@colijnit/corecomponents_v12 12.0.13 → 12.0.16

package/src/lib/components/popup/interface/popup-settings.ts

@@ -1,70 +0,0 @@
-import { PopupButton } from './popup-button';
-import { PopupType } from '../../../core/enum/popup-type.enum';
-import { PopupButtonType } from '../../../core/enum/popup-button-type.enum';
-
-export class PopupSettings {
-    // Title text for the header of a popup window. Will be localized.
-    public title: string;
-    // Whether to close the popup automatically when the user clicks outside of it.
-    public autoClose: boolean;
-    // Kind of popup to adjust styling.
-    public type: PopupType;
-    // Defines which buttons are shown.
-    public buttons?: PopupButton[];
-    // Set to true to hide the 'X' close icon in the top-right corner of the popup.
-    public hideCloseIcon?: boolean;
-    // Do not focus on first button when popping up (default behavior is to focus on the first button)
-    public noButtonFocus?: boolean;
-    // Whether the popup can be moved around
-    public fixed?: boolean;
-    // Whether content of the popup can be downloaded
-    public downloadable?: boolean;
-
-    constructor() {
-    }
-
-    public enableButtonByType(buttonType: PopupButtonType): void {
-        const button: PopupButton = this._getButtonByType(buttonType);
-        if (button) {
-            button.disabled = false;
-        }
-    }
-
-    public disableButtonByType(buttonType: PopupButtonType): void {
-        const button: PopupButton = this._getButtonByType(buttonType);
-        if (button) {
-            button.disabled = true;
-        }
-    }
-
-    public enableSaveButton(): void {
-        this.enableButtonByType(PopupButtonType.Save);
-    }
-
-    public disableSaveButton(): void {
-        this.disableButtonByType(PopupButtonType.Save);
-    }
-
-    public enableOpenButton(): void {
-        this.enableButtonByType(PopupButtonType.Open);
-    }
-
-    public disableOpenButton(): void {
-        this.disableButtonByType(PopupButtonType.Open);
-    }
-
-    private _getButtonByType(buttonType: PopupButtonType): PopupButton {
-        let button: PopupButton = undefined;
-
-        if (this.buttons) {
-            for (let i: number = 0, len: number = this.buttons.length; i < len; i++) {
-                if (this.buttons[i].closeType === buttonType) {
-                    button = this.buttons[i];
-                    break;
-                }
-            }
-        }
-
-        return button;
-    }
-}

package/src/lib/components/popup/interface/popup.ts

@@ -1,17 +0,0 @@
-import {EventEmitter} from "@angular/core";
-import { PopupWindowModel } from '../model/popup-window';
-import { PopupButtonType } from '../../../core/enum/popup-button-type.enum';
-
-// Base for all app popup components.
-export interface Popup<T = any> {
-    // usable by AppPopups to request the closing of the mother AppPopupWindowComponent
-    readonly closeRequest?: EventEmitter<PopupButtonType>;
-
-    popupModel?: PopupWindowModel;
-
-    // is called when the popup was just spawned
-    onOpen?(): void;
-
-    // Is called when the popup is closed by its mother AppPopupWindowComponent. Supply the output data in promise resolve.
-    onClose(eventType: PopupButtonType): Promise<T>;
-}

package/src/lib/components/popup/model/popup-button-globals.ts

@@ -1,11 +0,0 @@
-import { PopupButtonType } from '../../../core/enum/popup-button-type.enum';
-import { PopupButton } from '../interface/popup-button';
-
-export class PopupButtonGlobals {
-    public static readonly Ok: PopupButton = new PopupButton('OK', 'ok-button', PopupButtonType.Ok);
-    public static readonly Open: PopupButton = new PopupButton('OPEN', 'open-button', PopupButtonType.Open);
-    public static readonly Save: PopupButton = new PopupButton('SAVE', 'save-button', PopupButtonType.Save);
-    public static readonly Cancel: PopupButton = new PopupButton('CANCEL', 'cancel-button', PopupButtonType.Cancel);
-    public static readonly Yes: PopupButton = new PopupButton('JA', 'ok-button', PopupButtonType.Yes);
-    public static readonly No: PopupButton = new PopupButton('NEE', 'cancel-button', PopupButtonType.No);
-}

package/src/lib/components/popup/model/popup-window.ts

@@ -1,51 +0,0 @@
-import {ComponentFactory} from "@angular/core";
-import { PopupType } from '../../../core/enum/popup-type.enum';
-import { StringUtils } from '../../../core/utils/string-utils';
-import { PopupWindowShellComponent } from '../popup-window-shell.component';
-import { PopupButtonType } from '../../../core/enum/popup-button-type.enum';
-import { Popup } from '../interface/popup';
-import { PopupSettings } from '../interface/popup-settings';
-
-// Represent the base for app popup windows, with common fields and methods that each popup window has.
-export class PopupWindowModel {
-    public static readonly closeDefaultOutputStr: string = "PopupWindowModel.closeDefault()";
-
-    public get type(): PopupType {
-        return this.settings ? this.settings.type : undefined;
-    }
-
-    public uuid: string = StringUtils.CreateGuid();
-
-    // Reference to the actual popup window component.
-    public popupWindowComponent?: PopupWindowShellComponent;
-
-    constructor(public factory: ComponentFactory<Popup>, public settings: PopupSettings, public inputs: any) {
-    }
-
-    public closeDefault(): void {
-        this.onClose(PopupButtonType.NoButton, PopupWindowModel.closeDefaultOutputStr);
-    }
-
-    public enableOpenButton(): void {
-        if (this.settings) {
-            this.settings.enableOpenButton();
-        }
-    }
-
-    public disableOpenButton(): void {
-        if (this.settings) {
-            this.settings.disableOpenButton();
-        }
-    }
-
-    public getTitle(): string {
-        if (this.settings) {
-            return this.settings.title;
-        }
-    }
-
-    //noinspection JSUnusedLocalSymbols
-    onClose(eventType: PopupButtonType, output?: any): void {
-        return;
-    }
-}

package/src/lib/components/popup/popup-buttons.component.ts

@@ -1,61 +0,0 @@
-import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from "@angular/core";
-import {ButtonComponent} from "../button/button.component";
-import {PopupButtonGlobals} from "./model/popup-button-globals";
-import {PopupButton} from "./interface/popup-button";
-
-@Component({
-    selector: 'co-popup-buttons',
-    template: `
-        <div class="popup-buttons">
-            <co-button
-                *ngFor="let button of buttons"
-                [label]="button.label"
-                [class]="button.cssClass"
-                [disabled]="button.disabled"
-                (click)="handleClick($event, button)"
-            ></co-button>
-        </div>
-    `,
-    styleUrls: [
-        './popup-buttons.component.scss'
-    ]
-})
-// Component that is part of the WindowComponent, and represents the panel with buttons on the bottom of app popups.
-export class PopupButtonsComponent implements OnInit {
-
-    @Input()
-    public popupWindow: any;
-
-    @Output()
-    public readonly buttonClick: EventEmitter<PopupButton> = new EventEmitter<PopupButton>();
-
-    @ViewChild(ButtonComponent)
-    public firstButton: ButtonComponent;
-
-    public buttons: PopupButton[] = [PopupButtonGlobals.Ok, PopupButtonGlobals.Cancel];
-
-    constructor() {
-    }
-
-    ngOnInit(): void {
-        if (!this.popupWindow || !this.popupWindow.settings) {
-            return;
-        }
-        if (this.popupWindow.settings.buttons) {
-            this.buttons = this.popupWindow.settings.buttons;
-        }
-    }
-
-    public handleClick(event: MouseEvent, button: PopupButton): void {
-        event.preventDefault();
-        event.stopImmediatePropagation();
-        event.stopPropagation();
-        this.buttonClick.emit(button);
-    }
-
-    public focusFirstButton(): void {
-        if (this.firstButton) {
-            this.firstButton.focus();
-        }
-    }
-}

package/src/lib/components/popup/popup-message-display.component.ts

@@ -1,49 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { PopupButtonType } from '../../core/enum/popup-button-type.enum';
-import { FileUtils } from '../../core/utils/file-utils';
-import { BrowserUtils } from '../../core/utils/browser-utils';
-import { Popup } from './interface/popup';
-
-@Component({
-    selector: "co-popup-message-display",
-    template: `
-        <span *ngIf="!image" class="message" [textContent]="message"></span>
-        <img *ngIf="image" [src]="message"/>
-        <ng-container *ngIf="details" label="DETAILS">
-            <div class="overflow-y-auto overflow-x-hidden details">
-                <span class="message wrap" [textContent]="details" style="overflow-wrap: break-word;"></span>
-            </div>
-            <span class="details-link" [textContent]="'COPY_MESSAGE_TO_CLIPBOARD'" (click)="handleCopyClick()"></span>
-        </ng-container>
-    `
-})
-export class PopupMessageDisplayComponent implements Popup<PopupButtonType> {
-    @Input()
-    public set message(value: string) {
-        this._message = value;
-        this.image = FileUtils.StringContainsDataUri(value);
-    }
-
-    public get message(): string {
-        return this._message;
-    }
-
-    @Input()
-    public details: string;
-
-    public image: boolean = false;
-
-    private _message: string = "";
-
-    constructor() {
-    }
-
-    // @implements AppPopup
-    async onClose(eventType: PopupButtonType): Promise<PopupButtonType> {
-        return eventType;
-    }
-
-    public handleCopyClick(): void {
-        BrowserUtils.CopyToClipboard(this.details);
-    }
-}

package/src/lib/components/popup/popup-window-shell.component.ts

@@ -1,222 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  ComponentRef,
-  HostBinding,
-  Inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-  ViewContainerRef
-} from "@angular/core";
-import {PopupButtonsComponent} from "./popup-buttons.component";
-import {Subscription} from "rxjs";
-import {PopupButtonType} from "../../core/enum/popup-button-type.enum";
-import {FileUtils} from "../../core/utils/file-utils";
-import {ObjectUtils} from "../../core/utils/object-utils";
-import {PopupType} from "../../core/enum/popup-type.enum";
-import {PopupMessageDisplayComponent} from "./popup-message-display.component";
-import {PopupWindowModel} from "./model/popup-window";
-import {Popup} from "./interface/popup";
-import {PopupButton} from "./interface/popup-button";
-import {POPUP_WINDOW_DATA} from "./const/popup-window-token";
-import {CoreComponentsIcon} from "../../core/enum/core-components-icon.enum";
-import {IconCacheService} from "../icon/icon-cache.service";
-import {SafeHtml} from "@angular/platform-browser";
-
-@Component({
-  selector: "co-popup-window-shell",
-  template: `
-    <ng-container *ngIf="!isBlank">
-      <co-button *ngIf="popupWindow?.settings.downloadable" class="circle shadowed popup-downloadable" [iconData]="downloadIcon"
-                 iconClass="light"
-                 (click)="onDownloadClick()"></co-button>
-      <co-button *ngIf="!popupWindow?.settings.hideCloseIcon" class="circle shadowed popup-close" [iconData]="closeIcon"
-                 iconClass="light"
-                 (click)="onCloseClick()"></co-button>
-      <div class="popup-wrapper" *ngIf="!isBlank">
-        <div class="popup-title"><h2 [textContent]="popupWindow?.settings.title"></h2></div>
-        <div class="popup-content" (mousedown)="$event.stopImmediatePropagation()">
-          <ng-template #popupContent></ng-template>
-        </div>
-        <co-popup-buttons [popupWindow]="popupWindow" (buttonClick)="onButtonClick($event)"></co-popup-buttons>
-      </div>
-    </ng-container>
-    <ng-template #popupContent *ngIf="isBlank"></ng-template>
-  `,
-  styleUrls: [
-    "popup-window-shell.component.scss"
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-// The main component for app popups. Visually represents the outer edges of the components.
-export class PopupWindowShellComponent implements AfterViewInit, OnDestroy, OnInit {
-
-  public readonly icons: typeof CoreComponentsIcon = CoreComponentsIcon;
-
-  @Input()
-  public popupWindow: PopupWindowModel;
-
-  @Input()
-  @HostBinding("class.mobile-sizings")
-  public hasMobileSizings: boolean;
-
-  @ViewChild("popupContent", {read: ViewContainerRef})
-  protected _viewContainer: ViewContainerRef;
-
-  @ViewChild(PopupButtonsComponent)
-  protected _appPopupButtons: PopupButtonsComponent;
-
-  @HostBinding("class.popup-error")
-  public isError: boolean;
-
-  @HostBinding("class.popup-warning")
-  public isWarning: boolean;
-
-  @HostBinding("class.popup-notification")
-  public isNotification: boolean;
-
-  @HostBinding("class.popup-question")
-  public isQuestion: boolean;
-
-  @HostBinding("class.movable")
-  public isMovable: boolean;
-
-  public isBlank: boolean;
-
-  public closeIcon: SafeHtml;
-  public downloadIcon: SafeHtml;
-
-  // @HostBinding('style.top.px')
-  // public top: number = -1000; //start off-screen
-  //
-  // @HostBinding('style.left.px')
-  // public left: number = -1000; //start off-screen
-
-  private _popupCompRef: ComponentRef<Popup>;
-
-  private _filterClickSub: Subscription;
-
-  private _popupCloseRequestSub: Subscription;
-
-  constructor(
-    private _iconCache: IconCacheService,
-    private _changeDetector: ChangeDetectorRef,
-    public viewContainerRef: ViewContainerRef
-  ) {
-  }
-
-  ngOnInit(): void {
-    this.closeIcon = this._iconCache.getIcon(this.icons.CrossSkinny);
-    this.downloadIcon = this._iconCache.getIcon(this.icons.Download);
-    this._setHostBindings();
-  }
-
-  ngAfterViewInit(): void {
-    this.popupWindow.popupWindowComponent = this;
-    this._createPopupComponent();
-    this._initOnClickAutoClose();
-    this._initAppPopupCloseRequestHandler();
-
-    if (!this.popupWindow.settings.noButtonFocus && this._appPopupButtons) {
-      setTimeout(() => {
-        this._appPopupButtons.focusFirstButton();
-      });
-    }
-
-    this._changeDetector.detectChanges();
-  }
-
-  ngOnDestroy(): void {
-    this._close();
-    this._viewContainer.clear();
-    this._popupCompRef = undefined;
-    this._viewContainer = undefined;
-    this._changeDetector = undefined;
-  }
-
-  public async close(eventType: PopupButtonType): Promise<void> {
-    if (this._popupCompRef && this._popupCompRef.instance && this._popupCompRef.instance.onClose) {
-      const onCloseOutput: any = await this._popupCompRef.instance.onClose(eventType);
-      this.popupWindow.onClose(eventType, onCloseOutput);
-    } else {
-      this.popupWindow.onClose(eventType);
-    }
-  }
-
-  public onButtonClick(button: PopupButton): void {
-    if (!button.disabled) {
-      this.close(button.closeType);
-    }
-  }
-
-  public onDownloadClick(): void {
-    try {
-      const dataUri: string = (this._popupCompRef.instance as PopupMessageDisplayComponent).message;
-      FileUtils.DownloadFromDataUri(dataUri, FileUtils.CreateDownloadFileNameFromBase64(dataUri));
-    } catch (e) {
-
-    }
-  }
-
-  public onCloseClick(): void {
-    this.close(PopupButtonType.Cancel);
-  }
-
-  private _close = (): void => {
-    this.onCloseClick();
-  };
-
-  private _createPopupComponent(): void {
-    this._popupCompRef = this._viewContainer.createComponent(this.popupWindow.factory);
-    ObjectUtils.ForOwnProperty(this.popupWindow.inputs, (value: any, key: string) => {
-      this._popupCompRef.instance[key] = value;
-    });
-    // give the concrete popup component access to its underlying model (with settings etc, e.g. for dynamic disabling/enabling of popup buttons on bottom)
-    this._popupCompRef.instance.popupModel = this.popupWindow;
-    if (this._popupCompRef.instance.onOpen) {
-      this._popupCompRef.instance.onOpen();
-    }
-  }
-
-  private _initOnClickAutoClose(): void {
-    if (this.popupWindow && this.popupWindow.settings && this.popupWindow.settings.autoClose) {
-      if (this._filterClickSub) {
-        this._filterClickSub.unsubscribe();
-      }
-      // this._filterClickSub = this._filterService.onClick.subscribe(() => {
-      //     this.onCloseClick();
-      // });
-    }
-  }
-
-  private _initAppPopupCloseRequestHandler(): void {
-    if (!this._popupCompRef || !this._popupCompRef.instance || !this._popupCompRef.instance.closeRequest) {
-      return;
-    }
-
-    if (this._popupCloseRequestSub) {
-      this._popupCloseRequestSub.unsubscribe();
-    }
-    this._popupCloseRequestSub = this._popupCompRef.instance.closeRequest.subscribe((closeButton: PopupButtonType) => {
-      if (!closeButton) {
-        closeButton = PopupButtonType.NoButton;
-      }
-      this.close(closeButton);
-    });
-  }
-
-  private _setHostBindings(): void {
-    if (this.popupWindow) {
-      this.isError = this.popupWindow.type === PopupType.Error;
-      this.isWarning = this.popupWindow.type === PopupType.Warning;
-      this.isNotification = this.popupWindow.type === PopupType.Notification;
-      this.isQuestion = this.popupWindow.type === PopupType.Question;
-      this.isBlank = this.popupWindow.type === PopupType.Blank;
-      this.isMovable = !this.popupWindow.settings.fixed;
-    }
-  }
-}

package/src/lib/components/popup/popup.module.ts

@@ -1,48 +0,0 @@
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-
-import { InputTextModule } from '../input-text/input-text.module';
-import { TextInputPopupComponent } from './text-input-popup.component';
-import { PopupMessageDisplayComponent } from './popup-message-display.component';
-import { PopupWindowShellComponent } from './popup-window-shell.component';
-import { PopupButtonsComponent } from './popup-buttons.component';
-import { ButtonModule } from '../button/button.module';
-import { PromptService } from './service/prompt.service';
-import { PopupShowerService } from './service/popup-shower.service';
-import { Overlay } from '@angular/cdk/overlay';
-import { IconCacheService } from '../icon/icon-cache.service';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        InputTextModule,
-        ButtonModule
-    ],
-    declarations: [
-        TextInputPopupComponent,
-        PopupMessageDisplayComponent,
-        PopupWindowShellComponent,
-        PopupButtonsComponent
-    ],
-    entryComponents: [
-        PopupMessageDisplayComponent,
-        PopupWindowShellComponent
-    ],
-    exports: [
-        TextInputPopupComponent,
-        PopupWindowShellComponent
-    ]
-})
-export class PopupModule {
-    static forRoot(): ModuleWithProviders<PopupModule> {
-        return {
-            ngModule: PopupModule,
-            providers: [
-                PromptService,
-                PopupShowerService,
-                Overlay,
-                IconCacheService
-            ]
-        };
-    }
-}

package/src/lib/components/popup/service/popup-shower.service.ts

@@ -1,98 +0,0 @@
-import {
-  ApplicationRef,
-  ComponentFactory,
-  ComponentFactoryResolver,
-  ComponentRef,
-  EmbeddedViewRef,
-  Injectable,
-  Injector
-} from "@angular/core";
-import { PopupSettings } from '../interface/popup-settings';
-import { PopupCloseEvent } from '../interface/popup-close-event';
-import { Popup } from '../interface/popup';
-import { PopupWindowModel } from '../model/popup-window';
-import { PopupWindowShellComponent } from '../popup-window-shell.component';
-import { GlobalPositionStrategy, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
-import { POPUP_WINDOW_DATA } from '../const/popup-window-token';
-import { PopupButtonType } from '../../../core/enum/popup-button-type.enum';
-
-// Class responsible for showing popups throughout the application and returning results from user interaction with those popups.
-@Injectable()
-export class PopupShowerService {
-
-    constructor(
-        private _compFactoryResolver: ComponentFactoryResolver,
-        private _appRef: ApplicationRef,
-        private _overlay: Overlay,
-        private _injector: Injector) {
-    }
-
-    public async showPopup<T = any>(popupCompClazz: any, popupSettings: PopupSettings, inputs: any = {}): Promise<PopupCloseEvent<T>> {
-        const popupShellRef: ComponentRef<PopupWindowShellComponent> = this._createWindowShell();
-        const popupShell: PopupWindowShellComponent = popupShellRef.instance;
-        const config: OverlayConfig = this._getConfig();
-        const popupCompFactory: ComponentFactory<Popup<T>> = this._compFactoryResolver.resolveComponentFactory(popupCompClazz);
-
-        return new Promise<PopupCloseEvent>((resolve: Function) => {
-
-          const popupWindow: PopupWindowModel = new PopupWindowModel(popupCompFactory, popupSettings, inputs);
-          // the generic onClose handler: remove the closed popup and resolve our original createPopup call with its output data
-          popupWindow.onClose = (eventType: PopupButtonType, output: any) => {
-            this._appRef.detachView(popupShellRef.hostView);
-            popupShellRef.destroy();
-            resolve({
-              eventType: eventType,
-              output: output
-            });
-          };
-          popupShell.popupWindow = popupWindow;
-        });
-    }
-
-    private _createWindowShell(): ComponentRef<PopupWindowShellComponent> {
-      const componentRef = this._compFactoryResolver
-        .resolveComponentFactory(PopupWindowShellComponent)
-        .create(this._injector);
-      this._appRef.attachView(componentRef.hostView);
-      const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
-      document.body.appendChild(domElem);
-      return componentRef;
-    }
-
-    private _createOverlay(config: OverlayConfig): OverlayRef {
-        return this._overlay.create(config);
-    }
-
-    private _getConfig(): OverlayConfig {
-        const positionStrategy: GlobalPositionStrategy = this._overlay.position()
-            .global()
-            .centerHorizontally()
-            .centerVertically();
-
-        return new OverlayConfig({
-            hasBackdrop: true,
-            backdropClass: 'message-overlay-backdrop',
-            panelClass: 'message-overlay',
-            scrollStrategy: this._overlay.scrollStrategies.block(),
-            positionStrategy
-        });
-    }
-
-    private _attachDialogContainer(overlayRef: OverlayRef, popupWindow: PopupWindowModel /*, dialogRef: FilePreviewOverlayRef*/): PopupWindowShellComponent {
-        const injector: Injector = this._createInjector(popupWindow);
-        const containerPortal: ComponentPortal<PopupWindowShellComponent> = new ComponentPortal(PopupWindowShellComponent, null, injector);
-        const containerRef: ComponentRef<PopupWindowShellComponent> = overlayRef.attach(containerPortal);
-        return containerRef.instance;
-    }
-
-    private _createInjector(popupWindow: PopupWindowModel): Injector {
-        const injectionTokens: any = new WeakMap();
-        injectionTokens.set(POPUP_WINDOW_DATA, popupWindow);
-        const options = {
-          parent: this._injector,
-          providers: injectionTokens
-        };
-        return Injector.create(options);
-    }
-}