c3-components 0.0.13 → 0.0.14

package/src/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.html

@@ -0,0 +1,185 @@
+<div class="nav-button-container">
+  <button
+    *ngIf="config.btnShow?.prev"
+    type="button"
+    [class]="config.btnClass"
+    (click)="fileViewer.previousImage($event)"
+    [disabled]="fileViewer.currentIndex === 0"
+  >
+    <span
+      *ngIf="config.btnIcons?.prev?.classes"
+      [class]="config.btnIcons?.prev?.classes"
+    ></span>
+  </button>
+  <a
+    [class]="config.btnClass"
+    *ngIf="config.btnIcons?.prev?.text"
+    (click)="fileViewer.previousImage($event)"
+  >
+    <span [class]="config.btnSubClass">{{ config.btnIcons?.prev?.text }}</span>
+  </a>
+  <button
+    *ngIf="config.btnShow?.next"
+    type="button"
+    [class]="config.btnClass"
+    (click)="fileViewer.nextImage($event)"
+    [disabled]="fileViewer.currentIndex === fileViewer.files.length - 1"
+  >
+    <span
+      *ngIf="config.btnIcons?.next?.classes"
+      [class]="config.btnIcons?.next?.classes"
+    ></span>
+  </button>
+  <a
+    [class]="config.btnClass"
+    *ngIf="config.btnIcons?.next?.text"
+    (click)="fileViewer.nextImage($event)"
+  >
+    <span [class]="config.btnSubClass">{{ config.btnIcons?.next?.text }}</span>
+  </a>
+</div>
+
+<!-- Button Container -->
+<div
+  class="btn-container"
+  [class]="config.btnContainerClass"
+  *ngIf="fileViewer.currentFile.type.startsWith('image')"
+>
+  <!-- Rotate Counter Clockwise -->
+  <ng-container *ngIf="config.btnShow?.rotateCounterClockwise">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.rotateCounterClockwise()"
+      *ngIf="config.btnIcons?.rotateCounterClockwise?.classes"
+    >
+      <span [class]="config.btnIcons?.rotateCounterClockwise?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.rotateCounterClockwise?.text"
+      (click)="fileViewer.rotateCounterClockwise()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.rotateCounterClockwise?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Rotate Clockwise -->
+  <ng-container *ngIf="config.btnShow?.rotateClockwise">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.rotateClockwise()"
+      *ngIf="config.btnIcons?.rotateClockwise?.classes"
+    >
+      <span [class]="config.btnIcons?.rotateClockwise?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.rotateClockwise?.text"
+      (click)="fileViewer.rotateClockwise()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.rotateClockwise?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Zoom Out -->
+  <ng-container *ngIf="config.btnShow?.zoomOut">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.zoomOut()"
+      *ngIf="config.btnIcons?.zoomOut?.classes"
+    >
+      <span [class]="config.btnIcons?.zoomOut?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.zoomOut?.text"
+      (click)="fileViewer.zoomOut()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.zoomOut?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Zoom In -->
+  <ng-container *ngIf="config.btnShow?.zoomIn">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.zoomIn()"
+      *ngIf="config.btnIcons?.zoomIn?.classes"
+    >
+      <span [class]="config.btnIcons?.zoomIn?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.zoomIn?.text"
+      (click)="fileViewer.zoomIn()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.zoomIn?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Fullscreen -->
+  <ng-container *ngIf="config.allowFullscreen">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.toggleFullscreen()"
+      *ngIf="config.btnIcons?.fullscreen?.classes"
+    >
+      <span [class]="config.btnIcons?.fullscreen?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.fullscreen?.text"
+      (click)="fileViewer.toggleFullscreen()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.fullscreen?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Reset -->
+  <ng-container *ngIf="config.btnShow?.reset">
+    <button
+      type="button"
+      [class]="config.btnClass"
+      (click)="fileViewer.reset()"
+      *ngIf="config.btnIcons?.reset?.classes"
+    >
+      <span [class]="config.btnIcons?.reset?.classes"></span>
+    </button>
+    <a
+      [class]="config.btnClass"
+      *ngIf="config.btnIcons?.reset?.text"
+      (click)="fileViewer.reset()"
+    >
+      <span [class]="config.btnSubClass">{{
+        config.btnIcons?.reset?.text
+      }}</span>
+    </a>
+  </ng-container>
+
+  <!-- Custom Buttons -->
+  <ng-container *ngFor="let cBtn of config.customBtns">
+    <button *ngIf="cBtn.icon.classes" type="button" [class]="config.btnClass">
+      <span *ngIf="cBtn.icon.classes" [class]="cBtn.icon.classes"></span>
+    </button>
+    <ng-container *ngIf="cBtn.icon.text">
+      <a [class]="config.btnClass" *ngIf="cBtn.icon.text">
+        <span [class]="config.btnSubClass">{{ cBtn.icon.text }}</span>
+      </a>
+    </ng-container>
+  </ng-container>
+</div>

package/src/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { C3FileViewerActionsComponent } from './c3-file-viewer-actions.component';
+
+describe('C3FileViewerActionsComponent', () => {
+  let component: C3FileViewerActionsComponent;
+  let fixture: ComponentFixture<C3FileViewerActionsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ C3FileViewerActionsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(C3FileViewerActionsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.ts

@@ -0,0 +1,15 @@
+import { Component, Host, Input } from '@angular/core';
+import { C3FileViewer } from '../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer-actions',
+  templateUrl: './c3-file-viewer-actions.component.html',
+})
+export class C3FileViewerActionsComponent {
+  @Input()
+  fileViewer!: C3FileViewer;
+
+  get config() {
+    return this.fileViewer.config;
+  }
+}

package/src/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.html

@@ -0,0 +1,7 @@
+<img
+  *ngIf="fileViewer.currentFile.objectUrl"
+  [src]="fileViewer.currentFile.objectUrl | async | c3SafeUrl"
+  [ngStyle]="fileViewer.style"
+  alt="Image not found..."
+  (dragstart)="dragstart.emit($event)"
+/>

package/src/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { C3FileViewerImageComponent } from './c3-file-viewer-image.component';
+
+describe('C3FileViewerImageComponent', () => {
+  let component: C3FileViewerImageComponent;
+  let fixture: ComponentFixture<C3FileViewerImageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ C3FileViewerImageComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(C3FileViewerImageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.ts

@@ -0,0 +1,14 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { C3FileViewer } from '../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer-image, [c3-file-viewer-image]',
+  templateUrl: './c3-file-viewer-image.component.html',
+})
+export class C3FileViewerImageComponent {
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  @Output()
+  dragstart = new EventEmitter<DragEvent>();
+}

package/src/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.html

@@ -0,0 +1,7 @@
+<!-- pdf viewer -->
+<embed
+  type="application/pdf"
+  [src]="fileViewer.currentFile.objectUrl | async | c3SafeUrl"
+  [style.height]="'100%'"
+  [style.width]="'100%'"
+/>

package/src/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { C3FileViewerPdfComponent } from './c3-file-viewer-pdf.component';
+
+describe('C3FileViewerPdfComponent', () => {
+  let component: C3FileViewerPdfComponent;
+  let fixture: ComponentFixture<C3FileViewerPdfComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ C3FileViewerPdfComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(C3FileViewerPdfComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.ts

@@ -0,0 +1,25 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation,
+} from '@angular/core';
+import { C3FileViewer } from '../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer-pdf',
+  templateUrl: './c3-file-viewer-pdf.component.html',
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    style: 'display: block',
+    class: 'c3-file-viewer-pdf',
+  },
+})
+export class C3FileViewerPdfComponent {
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  @Output()
+  dragstart = new EventEmitter<DragEvent>();
+}

package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.html

@@ -0,0 +1 @@
+<video controls [src]="src" crossorigin="*"></video>

package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { C3FileViewerVideoComponent } from './c3-file-viewer-video.component';
+
+describe('C3FileViewerVideoComponent', () => {
+  let component: C3FileViewerVideoComponent;
+  let fixture: ComponentFixture<C3FileViewerVideoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ C3FileViewerVideoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(C3FileViewerVideoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.ts

@@ -0,0 +1,35 @@
+import { Component, Input } from '@angular/core';
+import { FileMetadata } from '../../models/file-metadata';
+import { Subject, filter, mergeMap, tap } from 'rxjs';
+import { C3FileViewer } from '../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer-video',
+  templateUrl: './c3-file-viewer-video.component.html',
+})
+export class C3FileViewerVideoComponent {
+  @Input('file')
+  set _srcUpdated({ location }: FileMetadata) {
+    this.src$.next(location);
+  }
+  src = '';
+  private src$ = new Subject<string>();
+
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  constructor() {
+    this.src$
+      .pipe(
+        mergeMap((src) => this.fileViewer.getFile(src)),
+        filter((blob) => blob.type.startsWith('application/pdf')),
+        tap((blob) => (this.src = URL.createObjectURL(blob)))
+      )
+      .subscribe({
+        next: () => null,
+        error: (error) => {
+          console.log(error);
+        },
+      });
+  }
+}

package/src/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.html

@@ -0,0 +1,32 @@
+<div
+  class="container"
+  *ngIf="fileViewer"
+  [c3-full-screen]="fileViewer.fullscreen$ | async"
+  [style.height]="fileViewer.styleHeight"
+  [style.backgroundColor]="fileViewer.config.containerBackgroundColor"
+  (wheel)="fileViewer.scrollZoom($event)"
+  (dragover)="fileViewer.onDragOver($event)"
+>
+  <c3-file-viewer-image
+    *ngIf="fileViewer.currentFile.type.startsWith('image')"
+    [fileViewer]="fileViewer"
+    [style]="fileViewer.style"
+    (dragstart)="fileViewer.onDragStart($event)"
+  />
+
+  <c3-file-viewer-video
+    *ngIf="fileViewer.currentFile.type.startsWith('video')"
+  />
+
+  <c3-file-viewer-pdf
+    *ngIf="fileViewer.currentFile.type.startsWith('application/pdf')"
+    [fileViewer]="fileViewer"
+  />
+  <!-- Div below will be used to hide the 'ghost' image when dragging -->
+  <div></div>
+  <div class="spinner-container" *ngIf="fileViewer.loading">
+    <div class="spinner"></div>
+  </div>
+
+  <c3-file-viewer-actions [fileViewer]="fileViewer" />
+</div>

package/src/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { C3FileViewerComponent } from './c3-file-viewer.component';
+
+describe('C3FileViewerComponent', () => {
+  let component: C3FileViewerComponent;
+  let fixture: ComponentFixture<C3FileViewerComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ C3FileViewerComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(C3FileViewerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.ts

@@ -0,0 +1,93 @@
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Inject,
+  Input,
+  OnInit,
+  Optional,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core';
+import { C3FileViewerConfig } from '../../../models/file-viewer-config.model';
+import { CustomFileEvent } from '../../../models/custom-file-event.model';
+import { HttpClient } from '@angular/common/http';
+import { C3FileViewer } from '../../../models/file-viewer';
+
+@Component({
+  selector: 'c3-file-viewer',
+  templateUrl: './c3-file-viewer.component.html',
+  styleUrls: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'c3-file-viewer',
+  },
+})
+export class C3FileViewerComponent implements OnInit {
+  @Input()
+  public screenHeightOccupied?: 0; // In Px
+
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  @Output()
+  public indexChange: EventEmitter<number> = new EventEmitter();
+
+  @Output()
+  public configChange: EventEmitter<C3FileViewerConfig> = new EventEmitter();
+
+  @Output()
+  public customFileEvent: EventEmitter<CustomFileEvent> = new EventEmitter();
+
+  constructor(
+    @Optional() @Inject('config') public moduleConfig: C3FileViewerConfig,
+    public _http: HttpClient
+  ) {}
+
+  ngOnInit() {
+    this.defineStyleHeight();
+
+    this.fileViewer.customFile$.subscribe((event) => {
+      this.customFileEvent.emit(event);
+    });
+
+    this.fileViewer.index$.subscribe((index) => {
+      this.indexChange.emit(index);
+    });
+
+    this.fileViewer.config$.subscribe((config) => {
+      this.configChange.emit(config);
+    });
+  }
+
+  @HostListener('mouseover')
+  onMouseOver() {
+    this.fileViewer.hovered = true;
+  }
+
+  @HostListener('mouseleave')
+  onMouseLeave() {
+    this.fileViewer.hovered = false;
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['screenHeightOccupied'] && this.fileViewer)
+      this.defineStyleHeight();
+  }
+
+  @HostListener('window:keyup.ArrowRight', ['$event'])
+  next(event: KeyboardEvent) {
+    this.fileViewer.nextImage(event);
+  }
+
+  @HostListener('window:keyup.ArrowLeft', ['$event'])
+  previous(event: KeyboardEvent) {
+    this.fileViewer.previousImage(event);
+  }
+
+  defineStyleHeight() {
+    this.fileViewer.styleHeight =
+      'calc(100% - ' + this.screenHeightOccupied + 'px)';
+  }
+}

package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { C3FileViewerDialogComponent } from './c3-file-viewer-dialog.component';
+
+describe('C3FileViewerDialogComponent', () => {
+  let component: C3FileViewerDialogComponent;
+  let fixture: ComponentFixture<C3FileViewerDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ C3FileViewerDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(C3FileViewerDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.ts

@@ -0,0 +1,37 @@
+import { Component, HostListener, Inject, Input } from '@angular/core';
+import {
+  MAT_DIALOG_DATA,
+  MatDialog,
+  MatDialogConfig,
+} from '@angular/material/dialog';
+import { C3FileViewer } from '../../../models/file-viewer';
+import { C3FileViewerDialog } from './c3-file-viewer-dialog';
+
+@Component({
+  selector: 'c3-file-viewer-dialog',
+  template: ` <ng-content /> `,
+  host: {
+    class: 'c3-file-viewer-dialog',
+  },
+})
+export class C3FileViewerDialogComponent {
+  @Input()
+  public fileViewer!: C3FileViewer;
+
+  @Input()
+  public dialogConfig: Partial<MatDialogConfig> = {
+    panelClass: 'c3-file-viewer-dialog',
+    width: '80%',
+    height: '80%',
+  };
+
+  constructor(private _dialog: MatDialog) {}
+
+  @HostListener('click')
+  openDialog() {
+    this._dialog.open(C3FileViewerDialog, {
+      data: this.fileViewer,
+      ...this.dialogConfig,
+    });
+  }
+}

package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.spec.ts

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { C3FileViewerDialog } from './c3-file-viewer-dialog';
+
+describe('C3FileViewerDialog', () => {
+  let component: C3FileViewerDialog;
+  let fixture: ComponentFixture<C3FileViewerDialog>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [C3FileViewerDialog],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(C3FileViewerDialog);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.ts

@@ -0,0 +1,12 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { C3FileViewer } from '../../../models/file-viewer';
+
+@Component({
+  template: `
+    <c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
+  `,
+})
+export class C3FileViewerDialog {
+  constructor(@Inject(MAT_DIALOG_DATA) public fileViewer: C3FileViewer) {}
+}