@colijnit/corecomponents_v12 12.2.18 → 12.2.19

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

@@ -0,0 +1,222 @@
+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/projects/corecomponents/src/lib/components/popup/popup.module.ts

@@ -0,0 +1,48 @@
+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/projects/corecomponents/src/lib/components/popup/service/popup-shower.service.ts

@@ -0,0 +1,98 @@
+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({providedIn: "root"})
+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);
+    }
+}

package/projects/corecomponents/src/lib/components/popup/service/prompt.service.ts

@@ -0,0 +1,127 @@
+import { Injectable } from '@angular/core';
+import { PopupShowerService } from './popup-shower.service';
+import { PopupType } from '../../../core/enum/popup-type.enum';
+import { StringUtils } from '../../../core/utils/string-utils';
+import { PopupMessageDisplayComponent } from '../popup-message-display.component';
+import { PopupButtonType } from '../../../core/enum/popup-button-type.enum';
+import { StringPromptResultEvent } from '../../../core/model/event/string-prompt-result-event';
+import { TextInputPopupComponent } from '../text-input-popup.component';
+import { PopupButtonGlobals } from '../model/popup-button-globals';
+import { PopupSettings } from '../interface/popup-settings';
+import { PopupCloseEvent } from '../interface/popup-close-event';
+
+// Service responsible for delivering small popup windows (string input promps, alerts, etc.) to the user.
+@Injectable({providedIn: "root"})
+export class PromptService {
+
+    constructor(private _popupShower: PopupShowerService) {
+    }
+
+    // Spawns a text input popup with given title and initial text, and resolves the returned promise with the user-entered text as output.
+    public async promptString(title: string, label?: string, initialText?: string): Promise<StringPromptResultEvent> {
+        const popupSettings: PopupSettings = new PopupSettings();
+        popupSettings.title = title;
+        const popupResult: PopupCloseEvent<string> = await this._popupShower.showPopup(TextInputPopupComponent, popupSettings, {
+            text: initialText,
+            label: label
+        });
+        return new StringPromptResultEvent(popupResult.eventType, popupResult.output);
+    }
+
+    // Shows given error text in an error popup to the user. Can also show an image instead of a text by supplying a data uri string.
+    public showError(textOrImageDataUri: string, title?: string, details?: string): Promise<PopupCloseEvent<void>> {
+        const popupSettings: PopupSettings = new PopupSettings();
+        popupSettings.title = title || "ERROR";
+        popupSettings.type = PopupType.Error;
+        popupSettings.buttons = [PopupButtonGlobals.Ok];
+        return this._popupShower.showPopup(PopupMessageDisplayComponent, popupSettings, {
+            message: StringUtils.ToStringOrDefault(textOrImageDataUri),
+            details: details
+        });
+    }
+
+    // Shows given warning text in a warning popup to the user. Can also show an image instead of a text by supplying a data uri string.
+    public showWarning(textOrImageDataUri: string, title?: string): Promise<PopupCloseEvent<void>> {
+        const popupSettings: PopupSettings = new PopupSettings();
+        popupSettings.title = title || "WARNING";
+        popupSettings.type = PopupType.Warning;
+        popupSettings.buttons = [PopupButtonGlobals.Ok];
+        return this._popupShower.showPopup(PopupMessageDisplayComponent, popupSettings, {
+            message: StringUtils.ToStringOrDefault(textOrImageDataUri)
+        });
+    }
+
+    public async showNotification(
+        textOrImageDataUri: string,
+        title?: string,
+        showOk: boolean = true,
+        autoClose: boolean = false,
+        hideCloseIcon: boolean = false,
+        downloadable: boolean = false
+    ): Promise<boolean> {
+        const popupSettings: PopupSettings = new PopupSettings();
+        popupSettings.title = title || "NOTIFICATION";
+        popupSettings.type = PopupType.Notification;
+        popupSettings.buttons = (showOk  ? [PopupButtonGlobals.Ok] : []);
+        popupSettings.downloadable = downloadable;
+        if (autoClose) {
+            popupSettings.autoClose = true;
+        }
+        if (hideCloseIcon) {
+            popupSettings.hideCloseIcon = true;
+        }
+        const popupResult: PopupCloseEvent<void> = await this._popupShower.showPopup(PopupMessageDisplayComponent, popupSettings,
+            {message: StringUtils.ToStringOrDefault(textOrImageDataUri)});
+        return popupResult.eventType === PopupButtonType.Ok;
+    }
+
+    public showImage(imageDataUri: string, title?: string): Promise<any> {
+        return this.showNotification(imageDataUri, title, false, true, false, true);
+    }
+
+    public async showYesNo(textOrImageDataUri: string, title?: string): Promise<boolean> {
+        const popupSettings: PopupSettings = new PopupSettings();
+        popupSettings.title = title || "QUESTION";
+        popupSettings.type = PopupType.Question;
+        popupSettings.buttons = [PopupButtonGlobals.Yes, PopupButtonGlobals.No];
+        const popupResult: any = await this._popupShower.showPopup(PopupMessageDisplayComponent, popupSettings, {
+            message: StringUtils.ToStringOrDefault(textOrImageDataUri)
+        });
+        return popupResult.eventType === PopupButtonType.Yes;
+    }
+
+    // Spawns a modal 'yes, no or cancel' question prompt. Returns the chosen exit button through AppPopupCloseEvent.eventType.
+    public async showModalYesNoCancel(textOrImageDataUri: string, title?: string): Promise<PopupCloseEvent<void>> {
+        const popupSettings: PopupSettings = new PopupSettings();
+        popupSettings.title = title || "QUESTION";
+        popupSettings.type = PopupType.Question;
+        popupSettings.buttons = [PopupButtonGlobals.Yes, PopupButtonGlobals.No, PopupButtonGlobals.Cancel];
+        popupSettings.autoClose = false;
+        popupSettings.hideCloseIcon = true;
+        return this._popupShower.showPopup(PopupMessageDisplayComponent, popupSettings, {
+            message: StringUtils.ToStringOrDefault(textOrImageDataUri)
+        });
+    }
+
+    // Used by AS-copied code. We call it showNotification.
+    public showOk(text: string, title?: string): Promise<boolean> {
+        return this.showNotification(text, title);
+    }
+
+    public async showOkCancel(text: string, title?: string): Promise<boolean> {
+        const popupSettings: PopupSettings = new PopupSettings();
+        popupSettings.title = title || "QUESTION";
+        popupSettings.type = PopupType.Question;
+        popupSettings.buttons = [PopupButtonGlobals.Ok, PopupButtonGlobals.Cancel];
+        popupSettings.autoClose = false;
+        popupSettings.hideCloseIcon = true;
+        const closeEvent: PopupCloseEvent =  await this._popupShower.showPopup(PopupMessageDisplayComponent, popupSettings, {
+            message: StringUtils.ToStringOrDefault(text)
+        });
+        return (closeEvent.eventType === PopupButtonType.Ok);
+    }
+
+    public showOkModal(text: string, title?: string): Promise<boolean> {
+        return this.showNotification(text, title, true, false, true);
+    }
+}

package/projects/corecomponents/src/lib/components/popup/text-input-popup.component.ts

@@ -0,0 +1,36 @@
+import {AfterViewInit, ChangeDetectorRef, Component, Input, OnDestroy} from '@angular/core';
+import { PopupButtonType } from '../../core/enum/popup-button-type.enum';
+import { Popup } from './interface/popup';
+
+@Component({
+    selector: "co-text-input-popup",
+    template: `
+        <co-input-text [(model)]="text" [label]="label" [noValidation]="true" [initFocus]="true"></co-input-text>
+    `
+})
+// A popup component that lets the user type and submit a text string.
+export class TextInputPopupComponent implements Popup<string>, AfterViewInit, OnDestroy {
+    // The user-changeable text content of the input text.
+    @Input()
+    public text: string;
+
+    // The label text for the input text. Localized.
+    @Input()
+    public label: string;
+
+    constructor(private _changeDetector: ChangeDetectorRef) {
+    }
+
+    ngOnDestroy(): void {
+        this._changeDetector = undefined;
+    }
+
+    ngAfterViewInit(): void {
+        this._changeDetector.detectChanges(); // fixes some changed-after-checked bug (popup service could have manipulated our text and label @Input's ..)
+    }
+
+    // @implements AppPopup
+    async onClose(eventType: PopupButtonType): Promise<string> {
+        return this.text;
+    }
+}

package/projects/corecomponents/src/lib/components/responsive-text/responsive-text.component.ts

@@ -0,0 +1,24 @@
+import {Component, HostBinding, Input, ViewEncapsulation} from '@angular/core';
+
+@Component({
+    selector: 'co-responsive-text',
+    template: `
+        <svg viewBox="0 0 100 100">
+            <foreignObject height="100%" width="100%">
+                <div class="text" [textContent]="text"></div>
+            </foreignObject>            
+        </svg>
+    `,
+    encapsulation: ViewEncapsulation.None
+})
+export class ResponsiveTextComponent {
+
+    @Input()
+    public text: string;
+
+    @HostBinding('class.co-responsive-text')
+    public showClass() {
+        return true;
+    }
+
+} 

package/projects/corecomponents/src/lib/components/responsive-text/responsive-text.module.ts

@@ -0,0 +1,17 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ResponsiveTextComponent} from './responsive-text.component';
+
+@NgModule({
+    imports: [
+        CommonModule
+    ],
+    declarations: [
+        ResponsiveTextComponent
+    ],
+    exports: [
+        ResponsiveTextComponent
+    ]
+})
+export class ResponsiveTextModule {
+}

package/projects/corecomponents/src/lib/components/responsive-text/style/_layout.scss

@@ -0,0 +1,9 @@
+@include export-module('co-responsive-text-layout') {
+  .co-responsive-text {
+    svg {
+      display: block;
+      height: 100%;
+      width: 100%;
+    }
+  }
+}

package/projects/corecomponents/src/lib/components/responsive-text/style/_theme.scss

@@ -0,0 +1,4 @@
+@include export-module('co-responsive-text-theme') {
+  .co-responsive-text {
+  }
+}

package/projects/corecomponents/src/lib/components/responsive-text/style/material.scss

@@ -0,0 +1,4 @@
+@import "../../../style/mixin";
+@import "./_material-definition";
+@import "./_layout";
+@import "./_theme";