Feat/angular7 (#170)

* fix: better support for universal * feat: use provideredIn * chore: update host app * chore: update version * fix: Move focus to trigger instead of simply blur()ing * chore: add disclaimer in the code * chore: update
maxisam · Mar 7, 2019 · 493530c · 493530c
1 parent ca7fef2
commit 493530c
Show file tree

Hide file tree

Showing 8 changed files with 3,246 additions and 1,844 deletions.
diff --git a/README.md b/README.md
@@ -67,11 +67,11 @@ This library support multiple kinds of copy source.
 <button ngxClipboard [cbContent]="'target string'">Copy</button>
 ```
 
-You can assign the parent container to avoid focus trapper issue, #145
+You can assign the parent **container** to avoid focus trapper issue, #145
 
 ```html
 <div #container>
-  <button ngxClipboard [cbContent]="'target string'" [container]="container">Copy</button>
+    <button ngxClipboard [cbContent]="'target string'" [container]="container">Copy</button>
 </div>
 ```
 
@@ -80,7 +80,7 @@ You can assign the parent container to avoid focus trapper issue, #145
 ```html
 ....
 
-<input type="text" #inputTarget>
+<input type="text" #inputTarget />
 
 <button [ngxClipboard]="inputTarget">Copy</button>
 ```
@@ -106,13 +106,13 @@ copy(text: string){
 -   `cbOnSuccess` callback attribute is triggered after copy was successful with `$event: {isSuccess: true, content: string}`
 
 ```html
-<button (cbOnSuccess) = "copied($event)" [cbContent]="'example string'">Copied</button>
+<button (cbOnSuccess)="copied($event)" [cbContent]="'example string'">Copied</button>
 ```
 
 Or updating parameters directly like so
 
 ```html
-<button (cbOnSuccess) = "isCopied = true" [cbContent]="'example string'">Copied</button>
+<button (cbOnSuccess)="isCopied = true" [cbContent]="'example string'">Copied</button>
 ```
 
 -   `cbOnError` callback attribute is triggered when there's failure in copying with `$event:{isSuccess: false}`
@@ -149,7 +149,7 @@ Kudos to
 
 The core function is ported from [clipboard.js](http://zenorocha.github.io/clipboard.js/) by [@zenorocha](https://twitter.com/zenorocha).
 
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 6.0.1.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 7.
 
 <img src="https://www.browserstack.com/images/layout/browserstack-logo-600x315.png" height="80" title="BrowserStack Logo" alt="BrowserStack Logo" />
 

diff --git a/package.json b/package.json
@@ -14,49 +14,49 @@
     },
     "private": true,
     "dependencies": {
-        "@angular/animations": "^6.1.6",
-        "@angular/common": "^6.1.6",
-        "@angular/compiler": "^6.1.6",
-        "@angular/core": "^6.1.6",
-        "@angular/forms": "^6.1.6",
-        "@angular/http": "^6.1.6",
-        "@angular/platform-browser": "^6.1.6",
-        "@angular/platform-browser-dynamic": "^6.1.6",
-        "@angular/router": "^6.1.6",
-        "core-js": "^2.5.7",
-        "rxjs": "^6.3.0",
+        "@angular/animations": "~7.2.0",
+        "@angular/common": "~7.2.0",
+        "@angular/compiler": "~7.2.0",
+        "@angular/core": "~7.2.0",
+        "@angular/forms": "~7.2.0",
+        "@angular/platform-browser": "~7.2.0",
+        "@angular/platform-browser-dynamic": "~7.2.0",
+        "@angular/router": "~7.2.0",
+        "core-js": "^2.5.4",
+        "rxjs": "~6.3.3",
+        "tslib": "^1.9.0",
         "zone.js": "~0.8.26",
-        "ngx-clipboard": "^11.1.7",
-        "ngx-window-token": "^1.0.0"
+        "ngx-clipboard": "12.0.0-beta.1",
+        "ngx-window-token": "2.0.1"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~0.7.5",
-        "@angular-devkit/build-ng-packagr": "~0.7.5",
-        "@angular/cli": "~6.1.5",
-        "@angular/compiler-cli": "^6.1.6",
-        "@angular/language-service": "^6.1.6",
+        "@angular-devkit/build-angular": "~0.13.0",
+        "@angular-devkit/build-ng-packagr": "~0.13.0",
+        "@angular/cli": "~7.3.4",
+        "@angular/compiler-cli": "~7.2.0",
+        "@angular/language-service": "~7.2.0",
+        "@types/node": "~8.9.4",
         "@types/jasmine": "~2.8.8",
         "@types/jasminewd2": "~2.0.3",
-        "@types/node": "~8.9.4",
-        "@clr/ui": "^0.12.11",
-        "@clr/angular": "^0.12.11",
-        "@clr/icons": "^0.12.11",
-        "@webcomponents/custom-elements": "^1.2.0",
-        "codelyzer": "~4.4.4",
+        "codelyzer": "~4.5.0",
         "jasmine-core": "~2.99.1",
         "jasmine-spec-reporter": "~4.2.1",
-        "karma": "~1.7.1",
+        "karma": "~4.0.0",
         "karma-chrome-launcher": "~2.2.0",
-        "karma-coverage-istanbul-reporter": "~2.0.2",
+        "karma-coverage-istanbul-reporter": "~2.0.1",
         "karma-jasmine": "~1.1.2",
         "karma-jasmine-html-reporter": "^0.2.2",
-        "ng-packagr": "^3.0.0",
-        "protractor": "~5.3.0",
-        "ts-node": "~5.0.1",
-        "tsickle": ">=0.29.0",
-        "tslib": "^1.9.3",
+        "ng-packagr": "^4.2.0",
+        "protractor": "~5.4.0",
+        "ts-node": "~7.0.0",
+        "tsickle": ">=0.34.0",
+        "tslib": "^1.9.0",
         "tslint": "~5.11.0",
-        "typescript": "~2.9.2",
+        "typescript": "~3.2.2",
+        "@webcomponents/custom-elements": "^1.2.1",
+        "@clr/ui": "^0.13.6",
+        "@clr/angular": "^0.13.6",
+        "@clr/icons": "^0.13.6",
         "cpx": "^1.5.0"
     }
 }
diff --git a/projects/ngx-clipboard/package.json b/projects/ngx-clipboard/package.json
@@ -1,7 +1,7 @@
 {
     "name": "ngx-clipboard",
     "description": "angular 2 clipboard",
-    "version": "11.1.9",
+    "version": "12.0.0",
     "author": {
         "name": "Sam Lin",
         "email": "maxisam@gmail.com"
@@ -22,10 +22,10 @@
         "copy"
     ],
     "dependencies": {
-        "ngx-window-token": "^1.0.2"
+        "ngx-window-token": "^2.0.0"
     },
     "peerDependencies": {
-        "@angular/common": ">=6.0.0 || ^7.0.0-rc.0",
-        "@angular/core": ">=6.0.0 || ^7.0.0-rc.0"
+        "@angular/common": ">=6.0.0 || ^7.0.0",
+        "@angular/core": ">=6.0.0 || ^7.0.0"
     }
 }
diff --git a/projects/ngx-clipboard/src/lib/ngx-clipboard.module.ts b/projects/ngx-clipboard/src/lib/ngx-clipboard.module.ts
@@ -1,16 +1,11 @@
-import { ClipboardDirective } from './ngx-clipboard.directive';
-import { CLIPBOARD_SERVICE_PROVIDER } from './ngx-clipboard.service';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NgxWindowTokenModule } from 'ngx-window-token';
-export * from './ngx-clipboard.directive';
-export * from './ngx-clipboard.service';
+
+import { ClipboardDirective } from './ngx-clipboard.directive';
 
 @NgModule({
-  imports: [CommonModule, NgxWindowTokenModule],
-  // tslint:disable-next-line:object-literal-sort-keys
-  declarations: [ClipboardDirective],
-  exports: [ClipboardDirective],
-  providers: [CLIPBOARD_SERVICE_PROVIDER]
+    imports: [CommonModule],
+    declarations: [ClipboardDirective],
+    exports: [ClipboardDirective]
 })
 export class ClipboardModule {}
diff --git a/projects/ngx-clipboard/src/lib/ngx-clipboard.service.spec.ts b/projects/ngx-clipboard/src/lib/ngx-clipboard.service.spec.ts
@@ -1,14 +1,12 @@
 import { inject, TestBed } from '@angular/core/testing';
 import { BrowserModule } from '@angular/platform-browser';
-import { NgxWindowTokenModule } from 'ngx-window-token';
 
 import { ClipboardService } from './ngx-clipboard.service';
 
 describe('Service: Clipboard', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [BrowserModule, NgxWindowTokenModule],
-            providers: [ClipboardService]
+            imports: [BrowserModule]
         });
     });
 

diff --git a/projects/ngx-clipboard/src/lib/ngx-clipboard.service.ts b/projects/ngx-clipboard/src/lib/ngx-clipboard.service.ts
@@ -1,13 +1,15 @@
-import { Inject, Injectable, InjectionToken, Optional, SkipSelf } from '@angular/core';
+import { Inject, Injectable } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
 import { WINDOW } from 'ngx-window-token';
 
-@Injectable()
+// The following code is heavily copy from https://github.com/zenorocha/clipboard.js
+
+@Injectable({ providedIn: 'root' })
 export class ClipboardService {
     private tempTextArea: HTMLTextAreaElement | undefined;
     constructor(@Inject(DOCUMENT) public document: any, @Inject(WINDOW) private window: any) {}
     public get isSupported(): boolean {
-        return !!this.document.queryCommandSupported && !!this.document.queryCommandSupported('copy');
+        return !!this.document.queryCommandSupported && !!this.document.queryCommandSupported('copy') && !!this.window;
     }
 
     public isTargetValid(element: HTMLInputElement | HTMLTextAreaElement): boolean {
@@ -87,10 +89,10 @@ export class ClipboardService {
     private copyText(): boolean {
         return this.document.execCommand('copy');
     }
-    // Removes current selection and focus from `target` element.
+    // Moves focus away from `target` and back to the trigger, removes current selection.
     private clearSelection(inputElement: HTMLInputElement | HTMLTextAreaElement, window: Window) {
         // tslint:disable-next-line:no-unused-expression
-        inputElement && inputElement.blur();
+        inputElement && inputElement.focus();
         window.getSelection().removeAllRanges();
     }
 
@@ -115,13 +117,3 @@ export class ClipboardService {
         return ta;
     }
 }
-// this pattern is mentioned in https://github.com/angular/angular/issues/13854 in #43
-export function CLIPBOARD_SERVICE_PROVIDER_FACTORY(doc: Document, win: Window, parentDispatcher: ClipboardService) {
-    return parentDispatcher || new ClipboardService(doc, win);
-}
-
-export const CLIPBOARD_SERVICE_PROVIDER = {
-    deps: [DOCUMENT as InjectionToken<Document>, WINDOW as InjectionToken<Window>, [new Optional(), new SkipSelf(), ClipboardService]],
-    provide: ClipboardService,
-    useFactory: CLIPBOARD_SERVICE_PROVIDER_FACTORY
-};
diff --git a/src/polyfills.ts b/src/polyfills.ts
@@ -28,7 +28,7 @@ import 'core-js/es6/set';
 import 'core-js/es6/string';
 import 'core-js/es6/symbol';
 import 'core-js/es6/weak-map';
-import 'core-js/es7/reflect';
+
 import 'zone.js/dist/zone';