Merge pull request #283 from maxisam/chore/angular-13

🧹  Chore: angular 13 support

.browserslistrc

@@ -1,9 +1,16 @@
-# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# 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 IE 9-11 support, please uncomment the last line of the file and adjust as needed
-> 0.5%
-last 2 versions
+
+# 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 dead
-# IE 9-11

.gitignore

@@ -24,6 +24,7 @@ node_modules
 
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

README.md

@@ -12,10 +12,6 @@ It works with angular version 2.0.0 and up
 
 To make more sense with the future versioning scheme of Angular, the directive selector is now rename to **ngxClipboard**
 
-## Other packages
-
--   [ngx-progressive-image-loader](https://github.com/maxisam/ngx-progressive-image-loader): it can lazy load img/picture, prevent reflow and seo friendly.
-
 ## Dependencies
 
 -   If you need to use it on 2.x, please use version 7.x.x.
@@ -24,6 +20,7 @@ To make more sense with the future versioning scheme of Angular, the directive s
 -   If you need to use it on 8.x, please use version 12.x.x.
 -   If you need to use it on 9.x, please use version 13.x.x.
 -   If you need to use it on 10.x - 12.x, please use version 14.0.2.
+-   If you need to use it on 13.x, please use version 15.x.x. (Also thanks https://github.com/arturovt for updating & tuning)
 
 The code are pretty much the same, in v8.0.0 it uses InjectionToken which requires angular4 and above.
 

angular.json

@@ -13,19 +13,20 @@
                 "build": {
                     "builder": "@angular-devkit/build-angular:browser",
                     "options": {
-                        "aot": true,
                         "outputPath": "dist/library-host",
                         "index": "src/index.html",
                         "main": "src/main.ts",
                         "polyfills": "src/polyfills.ts",
                         "tsConfig": "tsconfig.app.json",
                         "assets": ["src/favicon.ico", "src/assets"],
-                        "styles": [
-                            "node_modules/@clr/ui/clr-ui.min.css",
-                            "node_modules/@clr/icons/clr-icons.min.css",
-                            "src/styles.css"
-                        ],
-                        "scripts": []
+                        "styles": ["src/styles.css"],
+                        "scripts": [],
+                        "vendorChunk": true,
+                        "extractLicenses": false,
+                        "buildOptimizer": false,
+                        "sourceMap": true,
+                        "optimization": false,
+                        "namedChunks": true
                     },
                     "configurations": {
                         "production": {
@@ -45,12 +46,12 @@
                             "outputHashing": "all",
                             "sourceMap": false,
                             "namedChunks": false,
-                            "aot": true,
                             "extractLicenses": true,
                             "vendorChunk": false,
                             "buildOptimizer": true
                         }
-                    }
+                    },
+                    "defaultConfiguration": ""
                 },
                 "serve": {
                     "builder": "@angular-devkit/build-angular:dev-server",
@@ -80,13 +81,6 @@
                         "scripts": [],
                         "assets": ["src/favicon.ico", "src/assets"]
                     }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
-                        "exclude": ["**/node_modules/**"]
-                    }
                 }
             }
         },
@@ -100,13 +94,6 @@
                         "protractorConfig": "e2e/protractor.conf.js",
                         "devServerTarget": "library-host:serve"
                     }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": "e2e/tsconfig.e2e.json",
-                        "exclude": ["**/node_modules/**"]
-                    }
                 }
             }
         },
@@ -143,16 +130,6 @@
                             "browsers": "ChromeHeadlessCI"
                         }
                     }
-                },
-                "lint": {
-                    "builder": "@angular-devkit/build-angular:tslint",
-                    "options": {
-                        "tsConfig": [
-                            "projects/ngx-clipboard/tsconfig.lib.json",
-                            "projects/ngx-clipboard/tsconfig.spec.json"
-                        ],
-                        "exclude": ["**/node_modules/**"]
-                    }
                 }
             }
         }

package.json

@@ -5,62 +5,58 @@
         "ng": "ng",
         "prettier": "prettier --write \"**/*.{json,md,ts,html,component.html}\"",
         "start": "ng serve",
-        "build": "ng build ngx-clipboard --prod && yarn build-copy",
+        "build": "ng build ngx-clipboard --configuration production && yarn build-copy",
         "tslint-check": "tslint-config-prettier-check ./tslint.json",
         "test": "ng test ngx-clipboard",
         "test:watch": "ng test ngx-clipboard --watch",
         "lint": "ng lint ngx-clipboard",
         "publish:lib": "yarn publish ./dist/lib",
         "publish:lib:next": "yarn publish ./dist/lib --tag next",
         "build-copy": "cpx \"./README.md\" \"./dist/lib\"",
-        "e2e": "ng e2e",
-        "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
+        "e2e": "ng e2e"
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^11.1.1",
-        "@angular/common": "~11.1.1",
-        "@angular/compiler": "~11.1.1",
-        "@angular/core": "~11.1.1",
-        "@angular/forms": "~11.1.1",
-        "@angular/platform-browser": "~11.1.1",
-        "@angular/platform-browser-dynamic": "~11.1.1",
-        "@angular/router": "~11.1.1",
-        "@clr/angular": "^2.3.7",
-        "@clr/icons": "^2.3.7",
-        "@clr/ui": "^2.3.7",
-        "core-js": "^2.5.4",
-        "ngx-window-token": "4.0.0",
-        "rxjs": "~6.5.4",
-        "tslib": "^2.0.0",
-        "zone.js": "~0.10.3"
+        "@angular/animations": "^13.0.1",
+        "@angular/common": "~13.0.1",
+        "@angular/compiler": "~13.0.1",
+        "@angular/core": "~13.0.1",
+        "@angular/forms": "~13.0.1",
+        "@angular/platform-browser": "~13.0.1",
+        "@angular/platform-browser-dynamic": "~13.0.1",
+        "@angular/router": "~13.0.1",
+        "ngx-window-token": "6.0.0",
+        "ngx-clipboard": "15.0.0",
+        "rxjs": "~7.4.0",
+        "tslib": "^2.3.1",
+        "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~0.1101.2",
-        "@angular/cli": "~11.1.2",
-        "@angular/compiler-cli": "~11.1.1",
-        "@angular/language-service": "~11.1.1",
-        "@types/jasmine": "~3.6.0",
-        "@types/jasminewd2": "~2.0.3",
-        "@types/node": "^12.11.1",
+        "@angular-devkit/build-angular": "~13.0.2",
+        "@angular/cli": "~13.0.2",
+        "@angular/compiler-cli": "~13.0.1",
+        "@angular/language-service": "~13.0.1",
+        "@types/jasmine": "~3.10.2",
+        "@types/jasminewd2": "~2.0.10",
+        "@types/node": "^16.11.7",
         "codelyzer": "^6.0.0",
         "cpx": "^1.5.0",
-        "husky": "2.4.1",
-        "jasmine-core": "~3.6.0",
-        "jasmine-spec-reporter": "~5.0.0",
-        "karma": "~5.2.3",
+        "husky": "7.0.4",
+        "jasmine-core": "~3.10.1",
+        "jasmine-spec-reporter": "~7.0.0",
+        "karma": "~6.3.9",
         "karma-chrome-launcher": "~3.1.0",
-        "karma-coverage-istanbul-reporter": "~3.0.2",
-        "karma-jasmine": "~4.0.0",
-        "karma-jasmine-html-reporter": "^1.5.0",
-        "lint-staged": "8.2.1",
-        "ng-packagr": "^11.1.2",
-        "prettier": "1.18.2",
+        "karma-coverage-istanbul-reporter": "~3.0.3",
+        "karma-jasmine": "~4.0.1",
+        "karma-jasmine-html-reporter": "^1.7.0",
+        "lint-staged": "12.0.2",
+        "ng-packagr": "^13.0.3",
+        "prettier": "2.4.1",
         "protractor": "~7.0.0",
         "ts-node": "~7.0.0",
         "tslint": "~6.1.0",
         "tslint-config-prettier": "^1.18.0",
-        "typescript": "^4.1.3"
+        "typescript": "~4.4.3"
     },
     "husky": {
         "hooks": {

projects/ngx-clipboard/ng-package.json

@@ -2,7 +2,7 @@
     "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
     "dest": "../../dist/lib",
     "deleteDestPath": false,
-    "whitelistedNonPeerDependencies": ["ngx-window-token"],
+    "allowedNonPeerDependencies": ["ngx-window-token"],
     "lib": {
         "entryFile": "src/public_api.ts"
     }

projects/ngx-clipboard/ng-package.prod.json

@@ -1,7 +1,7 @@
 {
     "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
     "dest": "../../dist/lib",
-    "whitelistedNonPeerDependencies": ["ngx-window-token"],
+    "allowedNonPeerDependencies": ["ngx-window-token"],
     "lib": {
         "entryFile": "src/public_api.ts"
     }

projects/ngx-clipboard/package.json

@@ -1,7 +1,7 @@
 {
     "name": "ngx-clipboard",
     "description": "angular 2 clipboard",
-    "version": "14.0.2",
+    "version": "15.0.0-beta03",
     "author": {
         "name": "Sam Lin",
         "email": "maxisam@gmail.com"
@@ -22,11 +22,11 @@
         "copy"
     ],
     "dependencies": {
-        "ngx-window-token": ">=4.0.0 <6.0.0",
+        "ngx-window-token": ">=6.0.0",
         "tslib": "^2.0.0"
     },
     "peerDependencies": {
-        "@angular/common": ">=10.0.0 <13.0.0",
-        "@angular/core": ">=10.0.0 <13.0.0"
+        "@angular/common": ">=13.0.0",
+        "@angular/core": ">=13.0.0"
     }
 }

projects/ngx-clipboard/src/test.ts

@@ -1,15 +1,16 @@
 // This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
+// The order of import matters
+import 'zone.js';
+import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
 declare const require: any;
 
 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.

projects/ngx-clipboard/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
         "declarationMap": false
     },
     "angularCompilerOptions": {
-        "enableIvy": false
+        "compilationMode": "partial"
     }
 }

src/app/app.component.html

@@ -62,37 +62,3 @@ <h3>Copy from text -- target</h3>
         <button class="btn btn-primary" (click)="basic = true">focus trapper</button>
     </div>
 </div>
-<clr-modal [(clrModalOpen)]="basic" [clrModalClosable]="false">
-    <h3 class="modal-title">Copy in a modal with focus trapper</h3>
-    <div class="modal-body container" #modal>
-        <div class="row justify-content-center">
-            <div class="col-10">
-                <div class="input-group">
-                    <input
-                        type="text"
-                        class="form-control"
-                        [(ngModel)]="textModal"
-                        placeholder="content will be copy after click the copy button"
-                    />
-                    <span class="input-group-append">
-                        <button
-                            class="btn btn-default"
-                            type="button"
-                            ngxClipboard
-                            [cbContent]="textModal"
-                            [container]="modal"
-                            (cbOnSuccess)="isCopied3 = true"
-                            (cbOnError)="onCopyFailure()"
-                            [class.btn-success]="isCopied3"
-                        >
-                            copy
-                        </button>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="modal-footer">
-        <button type="button" class="btn btn-primary" (click)="basic = false">Ok</button>
-    </div>
-</clr-modal>

src/app/app.module.ts

@@ -1,14 +1,12 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ClarityModule } from '@clr/angular';
 import { ClipboardModule } from 'ngx-clipboard';
-
 import { AppComponent } from './app.component';
 
 @NgModule({
     declarations: [AppComponent],
-    imports: [BrowserAnimationsModule, FormsModule, ClipboardModule, ClarityModule],
+    imports: [BrowserAnimationsModule, FormsModule, ClipboardModule],
     providers: [],
     bootstrap: [AppComponent]
 })

src/environments/environment.ts

@@ -12,4 +12,4 @@ export const environment = {
  * import the following file, but please comment it out in production mode
  * because it will have performance impact when throw error
  */
-// import 'zone.js/dist/zone-error';  // Included with Angular CLI.
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.

src/polyfills.ts

@@ -13,8 +13,7 @@
  *
  * Learn more in https://angular.io/guide/browser-support
  */
-import 'core-js/es6/reflect';
-import 'zone.js/dist/zone';
+import 'zone.js';
 
 /***************************************************************************************************
  * BROWSER POLYFILLS
@@ -25,18 +24,10 @@ import 'zone.js/dist/zone';
  */
 
 /** IE9, IE10 and IE11 requires all of the following polyfills. **/
-/** 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 for the Reflect API. */
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- **/
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents