add third party lib

src/ui_ng/lib/package.json

@@ -36,7 +36,6 @@
         "core-js": "^2.4.1",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
-        "ngx-clipboard": "^8.0.2",
         "ngx-cookie": "^1.0.0",
         "rxjs": "^5.0.1",
         "ts-helpers": "^1.1.1",

src/ui_ng/lib/pkg/package.json

@@ -19,25 +19,24 @@
     },
     "homepage": "https://github.com/vmware/harbor#readme",
     "peerDependencies": {
-        "@angular/animations": "~4.1.3",
-        "@angular/common": "~4.1.3",
-        "@angular/compiler": "~4.1.3",
-        "@angular/core": "~4.1.3",
-        "@angular/forms": "~4.1.3",
-        "@angular/http": "~4.1.3",
-        "@angular/platform-browser": "~4.1.3",
-        "@angular/platform-browser-dynamic": "~4.1.3",
-        "@angular/router": "~4.1.3",
+        "@angular/animations": "^4.0.1",
+        "@angular/common": "^4.0.1",
+        "@angular/compiler": "^4.0.1",
+        "@angular/core": "^4.0.1",
+        "@angular/forms": "^4.0.1",
+        "@angular/http": "^4.0.1",
+        "@angular/platform-browser": "^4.0.1",
+        "@angular/platform-browser-dynamic": "^4.0.1",
+        "@angular/router": "^4.0.1",
         "@ngx-translate/core": "^6.0.0",
         "@ngx-translate/http-loader": "0.0.3",
         "@webcomponents/custom-elements": "1.0.0-alpha.3",
-        "clarity-angular": "~0.9.8",
-        "clarity-icons": "~0.9.8",
-        "clarity-ui": "~0.9.8",
+        "clarity-angular": "^0.9.8",
+        "clarity-icons": "^0.9.8",
+        "clarity-ui": "^0.9.8",
         "core-js": "^2.4.1",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
-        "ngx-clipboard": "^8.0.2",
         "ngx-cookie": "^1.0.0",
         "rxjs": "^5.0.1",
         "ts-helpers": "^1.1.1",

src/ui_ng/lib/rollup.config.js

@@ -18,7 +18,6 @@ export default {
         '@ngx-translate/core',
         '@ngx-translate/http-loader',
         'ngx-cookie',
-        'ngx-clipboard',
         'rxjs',
         'rxjs/Rx',
         'rxjs/Subject',
@@ -36,7 +35,6 @@ export default {
         '@angular/http': 'ng.http',
         '@angular/platform-browser': 'ng.platformBrowser',
         '@angular/router': 'ng.router',
-        'ngx-clipboard': 'ngx.clipboard',
         'clarity-angular': 'ng.clarity',
         'ngx-cookie': 'ngx.cookie',
         '@ngx-translate/core': 'ngx.translate',

src/ui_ng/lib/src/index.ts

@@ -13,4 +13,5 @@ export * from './list-replication-rule/index';
 export * from './replication/index';
 export * from './vulnerability-scanning/index';
 export * from './i18n/index';
-export * from './push-image/index';
+export * from './push-image/index';
+export * from './third-party/index';

src/ui_ng/lib/src/shared/shared.module.ts

@@ -9,7 +9,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import { TranslatorJsonLoader } from '../i18n/local-json.loader';
 import { IServiceConfig, SERVICE_CONFIG } from '../service.config';
 import { CookieService, CookieModule } from 'ngx-cookie';
-import { ClipboardModule } from 'ngx-clipboard';
+import { ClipboardModule } from '../third-party/ngx-clipboard/index';
 
 /*export function HttpLoaderFactory(http: Http) {
     return new TranslateHttpLoader(http, 'i18n/lang/', '-lang.json');

src/ui_ng/lib/src/third-party/index.ts

@@ -0,0 +1,2 @@
+export * from './ngx-window-token/index';
+export * from './ngx-clipboard/index';

src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.directive.ts

@@ -0,0 +1,49 @@
+import { ClipboardService } from './clipboard.service';
+import { Directive, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, Renderer, ElementRef } from '@angular/core';
+
+@Directive({
+    selector: '[ngxClipboard]'
+})
+export class ClipboardDirective implements OnInit, OnDestroy {
+    @Input('ngxClipboard') public targetElm: HTMLInputElement;
+
+    @Input() public cbContent: string;
+
+    @Output() public cbOnSuccess: EventEmitter<any> = new EventEmitter<any>();
+
+    @Output() public cbOnError: EventEmitter<any> = new EventEmitter<any>();
+    constructor(
+        private clipboardSrv: ClipboardService,
+        private renderer: Renderer
+
+    ) { }
+
+    public ngOnInit() { }
+
+    public ngOnDestroy() {
+        this.clipboardSrv.destroy();
+    }
+
+    @HostListener('click', ['$event.target']) private onClick(button: ElementRef) {
+        if (!this.clipboardSrv.isSupported) {
+            this.handleResult(false, undefined);
+        } else if (this.targetElm && this.clipboardSrv.isTargetValid(this.targetElm)) {
+            this.handleResult(this.clipboardSrv.copyFromInputElement(this.targetElm, this.renderer),
+                this.targetElm.value);
+        } else if (this.cbContent) {
+            this.handleResult(this.clipboardSrv.copyFromContent(this.cbContent, this.renderer), this.cbContent);
+        }
+    }
+
+    /**
+     * Fires an event based on the copy operation result.
+     * @param {Boolean} succeeded
+     */
+    private handleResult(succeeded: Boolean, copiedContent: string) {
+        if (succeeded) {
+            this.cbOnSuccess.emit({ isSuccess: true, content: copiedContent });
+        } else {
+            this.cbOnError.emit({ isSuccess: false });
+        }
+    }
+}

src/ui_ng/lib/src/third-party/ngx-clipboard/clipboard.service.ts

@@ -0,0 +1,110 @@
+import { Inject, InjectionToken, Injectable, Optional, Renderer, SkipSelf } from '@angular/core';
+import { DOCUMENT } from '@angular/platform-browser';
+import { WINDOW } from "../ngx-window-token/index";
+
+
+@Injectable()
+export class ClipboardService {
+    private tempTextArea: HTMLTextAreaElement;
+    constructor(
+        @Inject(DOCUMENT) private document: any,
+        @Inject(WINDOW) private window: any,
+    ) { }
+    public get isSupported(): boolean {
+        return !!this.document.queryCommandSupported && !!this.document.queryCommandSupported('copy');
+    }
+
+    public isTargetValid(element: HTMLInputElement | HTMLTextAreaElement): boolean {
+        if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+            if (element.hasAttribute('disabled')) {
+                // tslint:disable-next-line:max-line-length
+                throw new Error('Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute');
+            }
+            return true;
+        }
+        throw new Error('Target should be input or textarea');
+    }
+
+    /**
+     * copyFromInputElement
+     */
+    public copyFromInputElement(targetElm: HTMLInputElement | HTMLTextAreaElement, renderer: Renderer): boolean {
+        try {
+            this.selectTarget(targetElm, renderer);
+            const re = this.copyText();
+            this.clearSelection(targetElm, this.window);
+            return re;
+        } catch (error) {
+            return false;
+        }
+    }
+
+    /**
+     * Creates a fake textarea element, sets its value from `text` property,
+     * and makes a selection on it.
+     */
+    public copyFromContent(content: string, renderer: Renderer) {
+        if (!this.tempTextArea) {
+            this.tempTextArea = this.createTempTextArea(this.document, this.window);
+            this.document.body.appendChild(this.tempTextArea);
+        }
+        this.tempTextArea.value = content;
+        return this.copyFromInputElement(this.tempTextArea, renderer);
+    }
+
+    // remove temporary textarea if any
+    public destroy() {
+        if (this.tempTextArea) {
+            this.document.body.removeChild(this.tempTextArea);
+            this.tempTextArea = undefined;
+        }
+    }
+
+    // select the target html input element
+    private selectTarget(inputElement: HTMLInputElement | HTMLTextAreaElement, renderer: Renderer): number | undefined {
+        renderer.invokeElementMethod(inputElement, 'select');
+        renderer.invokeElementMethod(inputElement, 'setSelectionRange', [0, inputElement.value.length]);
+        return inputElement.value.length;
+    }
+
+    private copyText(): boolean {
+        return this.document.execCommand('copy');
+    }
+    // Removes current selection and focus from `target` element.
+    private clearSelection(inputElement: HTMLInputElement | HTMLTextAreaElement, window: Window) {
+        // tslint:disable-next-line:no-unused-expression
+        inputElement && inputElement.blur();
+        window.getSelection().removeAllRanges();
+    }
+
+    // create a fake textarea for copy command
+    private createTempTextArea(doc: Document, window: Window): HTMLTextAreaElement {
+        const isRTL = doc.documentElement.getAttribute('dir') === 'rtl';
+        let ta: HTMLTextAreaElement;
+        ta = doc.createElement('textarea');
+        // Prevent zooming on iOS
+        ta.style.fontSize = '12pt';
+        // Reset box model
+        ta.style.border = '0';
+        ta.style.padding = '0';
+        ta.style.margin = '0';
+        // Move element out of screen horizontally
+        ta.style.position = 'absolute';
+        ta.style[isRTL ? 'right' : 'left'] = '-9999px';
+        // Move element to the same position vertically
+        let yPosition = window.pageYOffset || doc.documentElement.scrollTop;
+        ta.style.top = yPosition + 'px';
+        ta.setAttribute('readonly', '');
+        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 = {
+    provide: ClipboardService,
+    deps: [DOCUMENT, WINDOW, [new Optional(), new SkipSelf(), ClipboardService]],
+    useFactory: CLIPBOARD_SERVICE_PROVIDER_FACTORY
+};

src/ui_ng/lib/src/third-party/ngx-clipboard/index.ts

@@ -0,0 +1,15 @@
+import { ClipboardDirective } from './clipboard.directive';
+import { CLIPBOARD_SERVICE_PROVIDER } from './clipboard.service';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { WindowTokenModule } from '../ngx-window-token/index';
+export * from './clipboard.directive';
+export * from './clipboard.service';
+
+@NgModule({
+    imports: [CommonModule, WindowTokenModule],
+    declarations: [ClipboardDirective],
+    exports: [ClipboardDirective],
+    providers: [CLIPBOARD_SERVICE_PROVIDER]
+})
+export class ClipboardModule { }

src/ui_ng/lib/src/third-party/ngx-window-token/index.ts

@@ -0,0 +1 @@
+export { WindowTokenModule, WINDOW } from './window-token';

src/ui_ng/lib/src/third-party/ngx-window-token/window-token.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { InjectionToken } from '@angular/core';
+
+export const WINDOW = new InjectionToken<Window>('WindowToken');
+
+export function _window(): Window {
+    return window;
+}
+
+@NgModule({
+    providers: [{
+        provide: WINDOW,
+        useFactory: _window
+    }]
+})
+export class WindowTokenModule { }

src/ui_ng/package.json

@@ -31,7 +31,7 @@
         "clarity-icons": "^0.9.8",
         "clarity-ui": "^0.9.8",
         "core-js": "^2.4.1",
-        "harbor-ui": "^0.2.12",
+        "harbor-ui": "^0.2.13",
         "intl": "^1.2.5",
         "mutationobserver-shim": "^0.3.2",
         "ngx-clipboard": "^8.0.2",
@@ -69,4 +69,4 @@
         "typings": "^1.4.0",
         "webdriver-manager": "10.2.5"
     }
-}
+}