@elderbyte/ngx-starter 14.11.0 → 14.11.1

package/src/lib/components/files/elder-file-select.directive.ts

@@ -0,0 +1,184 @@
+import {
+  Directive,
+  ElementRef,
+  EventEmitter,
+  HostListener,
+  Input,
+  OnDestroy,
+  OnInit,
+  Output,
+  Renderer2
+} from '@angular/core';
+import {LoggerFactory} from '@elderbyte/ts-logger';
+
+@Directive({
+  selector: '[elderFileSelect]'
+})
+export class ElderFileSelectDirective implements OnInit, OnDestroy {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly logger = LoggerFactory.getLogger(this.constructor.name);
+
+  private _fileInput: HTMLInputElement;
+  private _unlisten: () => void;
+
+  @Output()
+  public readonly elderFileSelectChange = new EventEmitter<Set<File>>();
+
+  @Output()
+  public readonly elderSingleFileSelectChange = new EventEmitter<File>();
+
+  private _multiple: boolean;
+  private _accept: string;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+    this.createFileSelect();
+  }
+
+  public ngOnDestroy(): void {
+    this.removeFileSelect();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public set elderFileSelect(value: string) {
+    this._accept = value;
+    if (this._fileInput) {
+      this.renderer.setProperty(this._fileInput, 'accept', value);
+    }
+  }
+
+  @Input()
+  public set elderFileSelectMultiple(value: boolean) {
+    this._multiple = value;
+    if (this._fileInput) {
+      this.renderer.setProperty(this._fileInput, 'multiple', value);
+    }
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  @HostListener('click', ['$event'])
+  public onClick(event: any): void {
+    this.openFileSelectDialog();
+  }
+
+  public openFileSelectDialog(): void {
+    this._fileInput.click();
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * <input type="file"
+   *     hidden #fileInput
+   *     [multiple]="multiple"
+   *     [accept]="accept"
+   *     (change)="fileInputChanged()"
+   * />
+   */
+  private createFileSelect(): void {
+
+    this._fileInput = this.renderer.createElement('input');
+    this.renderer.setAttribute(this._fileInput, 'hidden', 'true');
+    this.renderer.setAttribute(this._fileInput, 'type', 'file');
+    this.renderer.appendChild(this.el.nativeElement, this._fileInput);
+
+    if (this._accept) {
+      this.renderer.setProperty(this._fileInput, 'accept', this._accept);
+    }
+    if (this._multiple) {
+      this.renderer.setProperty(this._fileInput, 'multiple', this._multiple);
+    }
+
+    this._unlisten = this.renderer.listen(
+      this._fileInput,
+      'change',
+      event => this.fileInputChanged(event)
+    );
+  }
+
+  private removeFileSelect(): void {
+    if (this._unlisten) {
+      this._unlisten();
+      this._unlisten = null;
+    }
+    if (this._fileInput) {
+      this.renderer.removeChild(this.el.nativeElement, this._fileInput);
+      this._fileInput = null;
+    }
+  }
+
+  private fileInputChanged(event: any): void {
+    const fileList = this._fileInput.files;
+    this.emitFileList(fileList);
+    this.clearFileList();
+  }
+
+  private clearFileList() {
+    // not nice but works
+    this._fileInput.value = null;
+  }
+
+  private emitFileList(fileList: FileList): void {
+    if (fileList.length > 0) {
+
+      this.elderFileSelectChange.next(
+        this.toSet(fileList)
+      );
+      if (!this.elderFileSelectMultiple) {
+        this.elderSingleFileSelectChange.emit(
+          fileList.item(0)
+        );
+      }
+    }
+  }
+
+  private toSet(fileList: FileList): Set<File> {
+    const files = new Set<File>();
+
+    for (const key in fileList) {
+      if (!isNaN(parseInt(key, 0))) {
+        files.add(fileList[key]);
+      }
+    }
+    return files;
+  }
+
+}

package/src/lib/components/files/elder-file.module.ts

@@ -0,0 +1,50 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ElderFileSelectComponent} from './file-select/file-select.component';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+import {MatListModule} from '@angular/material/list';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {ElderPipesModule} from '../../pipes/elder-pipes.module';
+import {ElderFileUploadComponent} from './file-upload/file-upload.component';
+import {ElderFileSelectDirective} from './elder-file-select.directive';
+import {ElderFileDropZoneDirective} from './elder-file-drop-zone.directive';
+import {ElderBlobViewerComponent} from './blob-viewer/elder-blob-viewer.component';
+
+export {ElderFileSelectComponent} from './file-select/file-select.component';
+export {ElderFileUploadComponent} from './file-upload/file-upload.component';
+export {ElderFileSelectDirective} from './elder-file-select.directive';
+export {ElderFileDropZoneDirective} from './elder-file-drop-zone.directive';
+export {ElderBlobViewerComponent} from './blob-viewer/elder-blob-viewer.component';
+export {BlobUrl} from './blob-url';
+
+@NgModule({
+  imports: [
+    CommonModule,
+
+    FlexLayoutModule, MatListModule,
+
+    MatButtonModule, MatIconModule,
+
+    MatProgressBarModule,
+
+    ElderPipesModule
+  ],
+  declarations: [
+    ElderFileSelectComponent,
+    ElderFileUploadComponent,
+    ElderFileSelectDirective,
+    ElderFileDropZoneDirective,
+    ElderBlobViewerComponent
+  ],
+  exports: [
+    ElderFileSelectComponent,
+    ElderFileUploadComponent,
+    ElderFileSelectDirective,
+    ElderFileDropZoneDirective,
+    ElderBlobViewerComponent
+  ]
+})
+export class ElderFileModule {
+}

package/src/lib/components/files/file-select/file-select.component.html

@@ -0,0 +1,9 @@
+
+
+<button mat-icon-button type="button"
+        [elderFileSelect]="accept"
+        [elderFileSelectMultiple]="multiple"
+        (elderFileSelectChange)="fileInputChanged($event)"
+>
+  <mat-icon [color]="color">{{icon}}</mat-icon>
+</button>

package/src/lib/components/files/file-select/file-select.component.ts

@@ -0,0 +1,61 @@
+import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+
+@Component({
+  selector: 'elder-file-select, ebs-file-select',
+  templateUrl: './file-select.component.html',
+  styleUrls: ['./file-select.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ElderFileSelectComponent implements OnInit {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public multiple = false;
+
+  @Input()
+  public accept: string = undefined;
+
+  @Input()
+  public icon = 'add';
+
+  @Input()
+  public color: string;
+
+  @Output()
+  public readonly filesChange = new EventEmitter<Set<File>>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public fileInputChanged(files: Set<File>): void {
+    this.filesChange.next(files);
+  }
+
+}

package/src/lib/components/files/file-upload/file-upload.component.html

@@ -0,0 +1,36 @@
+
+
+<div fxLayout="column">
+
+  <div fxLayout="row" fxLayoutGap="10px">
+
+    <button mat-icon-button type="button" color="primary"
+            *ngIf="uploadClient"  (click)="startUpload($event)" [disabled]="files.size === 0">
+      <mat-icon>cloud_upload</mat-icon>
+    </button>
+
+    <elder-file-select
+            [multiple]="multiple"
+            [accept]="accept"
+            (filesChange)="files = $event"
+    ></elder-file-select>
+
+  </div>
+
+  <mat-list>
+    <h2 mat-subheader>Selected Files ({{files.size}})</h2>
+    <mat-list-item *ngFor="let file of files">
+      <mat-icon mat-list-icon>attach_file</mat-icon>
+      <h4 mat-line>{{file.name}}</h4>
+      <p mat-line> {{file.size | bytes}}  - {{file.lastModified | timeAgo}}</p>
+
+      <mat-progress-bar *ngIf="(transferOf(file)?.state$ | async) as state"
+                        [color]="(state.hasFailed ? 'warn' : '')"
+                        mode="determinate"
+                        [value]="state.progress.percentDone">
+      </mat-progress-bar>
+
+    </mat-list-item>
+  </mat-list>
+
+</div>

package/src/lib/components/files/file-upload/file-upload.component.ts

@@ -0,0 +1,81 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {forkJoin, Observable} from 'rxjs';
+import {IFileUploadClient} from '../../../common/http/upload/file-upload-client';
+import {HttpDataTransfer} from '../../../common/http/transfer/http-data-transfer';
+
+@Component({
+  selector: 'elder-file-upload, ebs-file-upload',
+  templateUrl: './file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss']
+})
+export class ElderFileUploadComponent implements OnInit {
+
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input()
+  public files: Set<File> = new Set();
+  public uploadProgress: Map<File, HttpDataTransfer>;
+  public totalProgress: Observable<any>;
+
+  @Input()
+  public multiple = false;
+
+  @Input()
+  public accept: string = undefined;
+
+  @Input()
+  public uploadClient: IFileUploadClient;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() {
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life Cycle                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public ngOnInit(): void {
+
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public API                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public startUpload(event: any): void {
+    this.totalProgress = this.uploadAllFiles(this.files);
+  }
+
+  public transferOf(file: File): HttpDataTransfer {
+    if (this.uploadProgress) {
+      return this.uploadProgress.get(file);
+    }
+    return undefined;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+  private uploadAllFiles(files: Set<File>): Observable<any> {
+    this.uploadProgress = this.uploadClient.uploadFiles(files);
+    return forkJoin(this.uploadProgress.values());
+  }
+
+}

package/src/lib/components/forms/clipboard/elder-clipboard.service.ts

@@ -0,0 +1,57 @@
+import { Injectable } from '@angular/core';
+import {BehaviorSubject, fromEvent, Observable, Subject} from 'rxjs';
+import {first} from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ElderClipboardService {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor() { }
+
+  /***************************************************************************
+   *                                                                         *
+   * Public                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  /**
+   * Write text to the clipboard
+   */
+  public writeText(payload: string): Observable<string> {
+
+    const copiedEvent = new BehaviorSubject<string>(null);
+
+    const range = document.createRange();
+    range.selectNodeContents(document.body);
+    document.getSelection().addRange(range);
+
+    const listener = (e: ClipboardEvent) => {
+      const clipboard = e.clipboardData || (<any>window)['clipboardData'];
+      clipboard.setData('text', payload);
+      e.preventDefault();
+      copiedEvent.next(payload);
+
+      document.removeEventListener('copy', listener, false);
+      document.getSelection().removeAllRanges();
+    };
+
+    document.addEventListener('copy', listener, false);
+    document.execCommand('copy');
+
+    return copiedEvent.pipe(first());
+  }
+
+}

package/src/lib/components/forms/directives/base/elder-class-hostbinding-base.ts

@@ -0,0 +1,55 @@
+import {Directive, HostBinding, Input} from '@angular/core';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+
+@Directive()
+export abstract class ElderClassHostBindingBase {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  private readonly classToApplyWhenEnabled: string;
+  private readonly classToApplyWhenDisabled: string;
+
+  private _enabled: boolean;
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    classToApplyWhenEnabled: string,
+    classToApplyWhenDisabled: string = undefined
+  ) {
+    this.classToApplyWhenEnabled = classToApplyWhenEnabled;
+    this.classToApplyWhenDisabled = classToApplyWhenDisabled;
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Host Bindings                                                           *
+   *                                                                         *
+   **************************************************************************/
+
+  @HostBinding('class')
+  public elementClass: string;
+
+  /***************************************************************************
+   *                                                                         *
+   * Properties                                                              *
+   *                                                                         *
+   **************************************************************************/
+
+  public set enabled(enabled: boolean) {
+    this._enabled = enabled;
+    this.elementClass = enabled ? this.classToApplyWhenEnabled : this.classToApplyWhenDisabled;
+  }
+
+  public get enabled(): boolean {
+    return this._enabled;
+  }
+}

package/src/lib/components/forms/directives/elder-clipboard-put.directive.ts

@@ -0,0 +1,44 @@
+import {Directive, EventEmitter, HostListener, Input, Output} from '@angular/core';
+import {ElderClipboardService} from '../clipboard/elder-clipboard.service';
+
+@Directive({
+  selector: '[elderClipboardPut]'
+})
+export class ElderClipboardPutDirective {
+
+  /***************************************************************************
+   *                                                                         *
+   * Fields                                                                  *
+   *                                                                         *
+   **************************************************************************/
+
+  @Input('elderClipboardPut')
+  public payload: string;
+
+  @Output()
+  public readonly clipboardCopied = new EventEmitter<string>();
+
+  /***************************************************************************
+   *                                                                         *
+   * Constructor                                                             *
+   *                                                                         *
+   **************************************************************************/
+
+  constructor(
+    private readonly elderClipboardService: ElderClipboardService
+  ) { }
+
+
+  @HostListener('click', ['$event'])
+  public onClick(event: MouseEvent): void {
+
+    event.preventDefault();
+
+    this.elderClipboardService.writeText(
+      this.payload.toString()
+    ).subscribe(
+      copied => this.clipboardCopied.emit(this.payload)
+    );
+  }
+
+}

package/src/lib/components/forms/directives/elder-delayed-focus.directive.ts

@@ -0,0 +1,44 @@
+import {AfterViewInit, Directive, ElementRef, Input} from '@angular/core';
+
+@Directive({
+  selector: '[elderDelayedFocus]'
+})
+export class ElderDelayedFocusDirective implements AfterViewInit {
+
+  @Input()
+  public elderDelayedFocus: number;
+
+
+  constructor(private el: ElementRef) {
+
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Life cycle hooks                                                        *
+   *                                                                         *
+   **************************************************************************/
+
+
+  public ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.focusFirstInput();
+    }, this.elderDelayedFocus || 500);
+  }
+
+  /***************************************************************************
+   *                                                                         *
+   * Private Methods                                                         *
+   *                                                                         *
+   **************************************************************************/
+
+
+  private focusFirstInput(): void {
+    if (this.el) {
+      console.log('ElderDelayedFocusDirective - focusing element ...');
+      this.el.nativeElement.focus();
+    } else {
+      console.warn('ElderDelayedFocusDirective - No element found to focus!');
+    }
+  }
+}

package/src/lib/components/forms/directives/elder-form-field-dense.directive.ts

@@ -0,0 +1,31 @@
+import {Directive, HostBinding, Input} from '@angular/core';
+import { MatFormField } from '@angular/material/form-field';
+import { MatInput } from '@angular/material/input';
+import {coerceBooleanProperty} from '@angular/cdk/coercion';
+import {ElderClassHostBindingBase} from './base/elder-class-hostbinding-base';
+
+/**
+ * Once declared on a MatFormField tag, the css class 'elder-form-field-dense' will be added
+ * and dense styling will be applied.
+ *
+ * Example Usage:
+ *
+ *	<mat-form-field elderDense>
+ *		<input matInput placeholder="Some Input" value="Some Value">
+ *	</mat-form-field>
+ *
+ */
+@Directive({
+  selector: 'mat-form-field[elderDense]',
+})
+export class ElderFormFieldDenseDirective extends ElderClassHostBindingBase {
+
+  constructor() {
+    super('elder-dense')
+  }
+
+  @Input()
+  public set elderDense(enabled: boolean | string) {
+    this.enabled = coerceBooleanProperty(enabled);
+  }
+}