c3-components 0.0.13 → 0.0.14

package/src/lib/c3-file-viewer/consts/default.config.ts

@@ -0,0 +1,41 @@
+import { C3FileViewerConfig } from '../models/file-viewer-config.model';
+
+export const DEFAULT_CONFIG: C3FileViewerConfig = {
+  btnContainerClass: 'btn-container',
+  btnClass: 'default',
+  btnSubClass: 'material-icons',
+  zoomFactor: 0.1,
+  containerBackgroundColor: '#00000000',
+  wheelZoom: false,
+  allowFullscreen: true,
+  allowKeyboardNavigation: true,
+  btnShow: {
+    zoomIn: true,
+    zoomOut: true,
+    rotateClockwise: true,
+    rotateCounterClockwise: true,
+    next: true,
+    prev: true,
+    reset: true,
+  },
+  btnIcons: {
+    zoomIn: {
+      text: 'zoom_in',
+    },
+    zoomOut: {
+      text: 'zoom_out',
+    },
+    rotateClockwise: {
+      text: 'rotate_right',
+    },
+    rotateCounterClockwise: {
+      text: 'rotate_left',
+    },
+    fullscreen: {
+      text: 'fullscreen',
+    },
+    reset: {
+      text: 'restore',
+    },
+  },
+};

package/src/lib/c3-file-viewer/directives/full-screen.directive.spec.ts

@@ -0,0 +1,11 @@
+import { ElementRef } from '@angular/core';
+import { FullScreenDirective } from './full-screen.directive';
+import { TestBed } from '@angular/core/testing';
+
+describe('FullScreenDirective', () => {
+  it('should create an instance', () => {
+    const el = TestBed.inject(ElementRef);
+    const directive = new FullScreenDirective(el);
+    expect(directive).toBeTruthy();
+  });
+});

package/src/lib/c3-file-viewer/directives/full-screen.directive.ts

@@ -0,0 +1,68 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+import { BehaviorSubject, debounceTime, filter, skip } from 'rxjs';
+
+@Directive({
+  selector: '[C3FullScreen], [c3-full-screen]',
+})
+export class FullScreenDirective {
+  @Input('c3Screenfull')
+  set fullscreenState(value: Boolean | null) {
+    this._fullscreenState.next(value?.valueOf() || false);
+  }
+
+  @Input('c3-full-screen')
+  set fullscreenStateSetter(value: Boolean | null) {
+    this.fullscreenState = value;
+  }
+
+  private _fullscreenState = new BehaviorSubject(false);
+
+  constructor(private el: ElementRef) {
+    this._fullscreenState
+      .pipe(
+        filter((value) => value !== null),
+        skip(2),
+        debounceTime(100)
+      )
+      .subscribe(() => {
+        this.defineState();
+      });
+  }
+
+  private defineState() {
+    if (this._fullscreenState.getValue()) {
+      const element: any = this.el.nativeElement;
+
+      const requestMethod =
+        element.requestFullscreen ||
+        element.webkitRequestFullScreen ||
+        element.mozRequestFullScreen ||
+        element.msRequestFullScreen;
+
+      if (requestMethod) {
+        // Native full screen.
+        requestMethod.call(element);
+      } else {
+        console.log('FullScreen Request Method Not Supported on this browser.');
+      }
+    } else {
+      const element: any = document;
+
+      const requestMethod =
+        element.cancelFullscreen ||
+        element.webkitExitFullscreen ||
+        element.webkitCancelFullScreen ||
+        element.mozCancelFullScreen ||
+        element.msExitFullScreen;
+
+      if (requestMethod) {
+        // Native Cancel full screen.
+        requestMethod.call(element);
+      } else {
+        console.log(
+          'FullScreen Cancel Request Method Not Supported on this browser.'
+        );
+      }
+    }
+  }
+}

package/src/lib/c3-file-viewer/models/custom-file-event.model.ts

@@ -0,0 +1,9 @@
+export class CustomFileEvent {
+  public name: string;
+  public fileUrl: string;
+
+  constructor(name: string, fileUrl: string) {
+    this.name = name;
+    this.fileUrl = fileUrl;
+  }
+}

package/src/lib/c3-file-viewer/models/file-metadata.ts

@@ -0,0 +1,13 @@
+import { Observable } from 'rxjs';
+
+export interface FileMetadata {
+  name: string;
+  size?: number;
+  type: string;
+  lastModified?: Date;
+  created?: Date;
+  extension?: string;
+  location: string;
+  objectUrl?: Observable<string>;
+  metadata?: Record<string, any>;
+}

package/src/lib/c3-file-viewer/models/file-viewer-config.model.ts

@@ -0,0 +1,53 @@
+import { HttpClient } from '@angular/common/http';
+
+export interface C3FileViewerConfig {
+  btnContainerClass?: string;
+  btnClass?: string;
+  btnSubClass?: string;
+  zoomFactor?: number;
+  containerBackgroundColor?: string;
+  wheelZoom?: boolean;
+  allowFullscreen?: boolean;
+  allowKeyboardNavigation?: boolean;
+  customClient?: HttpClient['get'];
+
+  minHeight?: number | string;
+  minWidth?: number | string;
+  width?: number | string;
+  maxHeight?: number | string;
+  height?: number | string;
+  maxWidth?: number | string;
+
+  btnShow?: {
+    zoomIn?: boolean;
+    zoomOut?: boolean;
+    rotateClockwise?: boolean;
+    rotateCounterClockwise?: boolean;
+    next?: boolean;
+    prev?: boolean;
+    reset?: boolean;
+  };
+
+  btnIcons?: {
+    zoomIn?: MultiBtn['btn'];
+    zoomOut?: MultiBtn['btn'];
+    rotateClockwise?: MultiBtn['btn'];
+    rotateCounterClockwise?: MultiBtn['btn'];
+    next?: MultiBtn['btn'];
+    prev?: MultiBtn['btn'];
+    fullscreen?: MultiBtn['btn'];
+    reset?: MultiBtn['btn'];
+  };
+
+  customBtns?: Array<{
+    name: string;
+    icon: MultiBtn['btn'];
+  }>;
+}
+
+interface MultiBtn {
+  btn: {
+    classes?: string;
+    text?: string;
+  };
+}

package/src/lib/c3-file-viewer/models/file-viewer.ts

@@ -0,0 +1,259 @@
+import { BehaviorSubject, Observable, map, tap } from 'rxjs';
+import { DEFAULT_CONFIG } from '../consts/default.config';
+import { C3FileViewerConfig } from './file-viewer-config.model';
+import { HttpClient } from '@angular/common/http';
+import { CustomFileEvent } from './custom-file-event.model';
+import { FileMetadata } from './file-metadata';
+import { inject } from '@angular/core';
+
+export class C3FileViewer {
+  private _config: C3FileViewerConfig = DEFAULT_CONFIG;
+  get config(): C3FileViewerConfig {
+    return this._config;
+  }
+
+  set config(value: C3FileViewerConfig) {
+    this._config = this.mergeConfig(DEFAULT_CONFIG, value);
+    this.config$.next(this._config);
+  }
+  public config$ = new BehaviorSubject<C3FileViewerConfig>(DEFAULT_CONFIG);
+
+  public fullscreen$ = new BehaviorSubject<Boolean>(false);
+
+  public customFile$ = new BehaviorSubject<any>(null);
+  public index$ = new BehaviorSubject<number>(0);
+  public loading: boolean = true;
+  public currentIndex: number = 0;
+
+  get currentFile(): FileMetadata {
+    return this.filesObjectUrl[this.currentIndex];
+  }
+
+  public style = {
+    transform: '',
+    msTransform: '',
+    oTransform: '',
+    webkitTransform: '',
+    minHeight: 'auto',
+    maxHeight: 'auto',
+    height: 'auto',
+    minWidth: 'auto',
+    maxWidth: 'auto',
+    width: 'auto',
+  };
+  public styleHeight = '100%';
+  public hovered = false;
+
+  public set files(value: FileMetadata[]) {
+    this._files = value;
+    this.currentIndex = 0;
+    this.index$.next(this.currentIndex);
+
+    this.filesObjectUrl = value.map((file) => {
+      return {
+        ...file,
+        objectUrl: file.objectUrl || this.createObjectURL(file),
+      };
+    });
+  }
+
+  public get files(): FileMetadata[] {
+    return this._files;
+  }
+
+  private _files: FileMetadata[] = [];
+
+  public filesObjectUrl: Array<
+    FileMetadata & {
+      objectUrl?: Observable<string>;
+    }
+  > = [];
+
+  private scale = 1;
+  private rotation = 0;
+  private translateX = 0;
+  private translateY = 0;
+  private prevX: number = 0;
+  private prevY: number = 0;
+
+  constructor({
+    config,
+    files,
+  }: {
+    config?: C3FileViewerConfig;
+    files?: FileMetadata[];
+  }) {
+    if (config) this.config = config;
+    if (files) this.files = files;
+
+    this.config$.subscribe((config) => {
+      const { minHeight, maxHeight, minWidth, maxWidth, height, width } =
+        config;
+      this.style.minHeight = this.valueToCss(minHeight);
+      this.style.height = this.valueToCss(height);
+      this.style.width = this.valueToCss(width);
+      this.style.maxHeight = this.valueToCss(maxHeight);
+      this.style.minWidth = this.valueToCss(minWidth);
+      this.style.maxWidth = this.valueToCss(maxWidth);
+      this.styleHeight = this.valueToCss(height);
+
+      this.updateStyle();
+    });
+  }
+
+  createObjectURL(file: FileMetadata) {
+    this.onLoadStart(file);
+    return this.getFile(file.location).pipe(
+      map((response) => URL.createObjectURL(response)),
+      tap(() => this.onLoad(file))
+    );
+  }
+
+  getFile(location: string) {
+    const client =
+      this.config.customClient ||
+      inject(HttpClient).get.bind(inject(HttpClient));
+    if (!client) {
+      throw new Error(
+        'No http client provided. Please provide a custom client or import HttpClientModule'
+      );
+    }
+
+    return client(location, {
+      responseType: 'blob',
+    });
+  }
+
+  previousImage(event: KeyboardEvent | MouseEvent) {
+    if (this.canNavigate(event)) {
+      this.loading = true;
+      if (this.currentIndex > 0) this.currentIndex--;
+      else this.currentIndex = this.files.length - 1;
+      this.index$.next(this.currentIndex);
+      this.reset();
+    }
+  }
+
+  nextImage(event: KeyboardEvent | MouseEvent) {
+    if (this.canNavigate(event)) {
+      this.loading = true;
+      if (this.currentIndex < this.files.length - 1) this.currentIndex++;
+      else this.currentIndex = 0;
+      this.index$.next(this.currentIndex);
+      this.reset();
+    }
+  }
+
+  zoomIn() {
+    this.scale *= 1 + (this.config.zoomFactor || 0);
+    this.updateStyle();
+  }
+
+  zoomOut() {
+    if (this.scale > (this.config.zoomFactor || 0)) {
+      this.scale /= 1 + (this.config.zoomFactor || 0);
+    }
+    this.updateStyle();
+  }
+
+  scrollZoom(evt: WheelEvent) {
+    if (this.config.wheelZoom) {
+      evt.deltaY > 0 ? this.zoomOut() : this.zoomIn();
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  rotateClockwise() {
+    this.rotation += 90;
+    this.updateStyle();
+  }
+
+  rotateCounterClockwise() {
+    this.rotation -= 90;
+    this.updateStyle();
+  }
+
+  onLoad(file: FileMetadata) {
+    this.loading = false;
+  }
+
+  onLoadStart(file: FileMetadata) {
+    this.loading = true;
+  }
+
+  imageNotFound(file: FileMetadata) {
+    this.loading = false;
+    this.customFile$.next(new CustomFileEvent('imageNotFound', file.location));
+  }
+
+  onDragOver(evt: DragEvent) {
+    this.translateX += evt.clientX - this.prevX;
+    this.translateY += evt.clientY - this.prevY;
+    this.prevX = evt.clientX;
+    this.prevY = evt.clientY;
+    this.updateStyle();
+  }
+
+  onDragStart(evt: DragEvent) {
+    if (evt.target && evt.dataTransfer && evt.dataTransfer.setDragImage) {
+      const target = evt.target as HTMLDivElement;
+      const nextElementSibling = target.nextElementSibling as HTMLDivElement;
+
+      if (nextElementSibling)
+        evt.dataTransfer.setDragImage(nextElementSibling, 0, 0);
+    }
+    this.prevX = evt.clientX;
+    this.prevY = evt.clientY;
+  }
+
+  toggleFullscreen() {
+    const fullScreenValue = this.fullscreen$.getValue();
+    this.fullscreen$.next(!fullScreenValue);
+    if (fullScreenValue) this.reset();
+  }
+
+  reset() {
+    this.scale = 1;
+    this.rotation = 0;
+    this.translateX = 0;
+    this.translateY = 0;
+    this.updateStyle();
+  }
+
+  private canNavigate(event: any) {
+    return (
+      event == null || (this.config.allowKeyboardNavigation && this.hovered)
+    );
+  }
+
+  private updateStyle() {
+    this.style.transform = `translate(${this.translateX}px, ${this.translateY}px) rotate(${this.rotation}deg) scale(${this.scale})`;
+    this.style.msTransform = this.style.transform;
+    this.style.webkitTransform = this.style.transform;
+    this.style.oTransform = this.style.transform;
+  }
+
+  private valueToCss(value: number | string | undefined) {
+    return value ? (typeof value === 'string' ? value : value + 'px') : 'auto';
+  }
+
+  private mergeConfig(
+    defaultValues: C3FileViewerConfig,
+    overrideValues: C3FileViewerConfig
+  ): C3FileViewerConfig {
+    let result: C3FileViewerConfig = { ...defaultValues };
+    if (overrideValues) {
+      result = { ...defaultValues, ...overrideValues };
+
+      if (overrideValues.btnIcons) {
+        result.btnIcons = {
+          ...defaultValues.btnIcons,
+          ...overrideValues.btnIcons,
+        };
+      }
+    }
+    return result;
+  }
+}

package/src/lib/c3-file-viewer/models/http.client.ts

@@ -0,0 +1,23 @@
+import { HttpContext, HttpHeaders, HttpParams } from '@angular/common/http';
+
+export interface HttpClientOptions {
+  headers?:
+    | HttpHeaders
+    | {
+        [header: string]: string | string[];
+      };
+  context?: HttpContext;
+  observe?: 'body';
+  params?:
+    | HttpParams
+    | {
+        [param: string]:
+          | string
+          | number
+          | boolean
+          | ReadonlyArray<string | number | boolean>;
+      };
+  reportProgress?: boolean;
+  responseType: 'blob';
+  withCredentials?: boolean;
+}

package/src/lib/c3-highlight-text/c3-highlight-text.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class C3HighlightTextModule { }

package/src/lib/c3-menu/c3-menu.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class C3MenuModule { }

package/src/lib/c3-modal/c3-modal.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class C3ModalModule { }

package/src/lib/c3-navbar/c3-navbar.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class C3NavbarModule { }

package/src/lib/c3-pdf-dialog/c3-pdf-dialog.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class C3PdfDialogModule { }

package/src/lib/c3-rounded-title/c3-rounded-title.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class C3RoundedTitleModule { }

package/src/lib/c3-safe-url/pipes/c3-safe-url.pipe.spec.ts

@@ -0,0 +1,8 @@
+import { C3SafeUrlPipe } from './c3-safe-url.pipe';
+
+describe('C3SafeUrlPipe', () => {
+  it('create an instance', () => {
+    const pipe = new C3SafeUrlPipe();
+    expect(pipe).toBeTruthy();
+  });
+});

package/src/lib/c3-safe-url/pipes/c3-safe-url.pipe.ts

@@ -0,0 +1,13 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({
+  name: 'c3SafeUrl',
+  standalone: true,
+})
+export class C3SafeUrlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+  transform(url: string | null) {
+    return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : '';
+  }
+}

package/{lib → src/lib}/c3-styles/_c3-core.sass

@@ -1,8 +1,10 @@
 @use "./c3-root-variables" as *
 @use "../c3-dropdown/styles/_c3-dropdown" as *
-@use "../c3-file-viewer/styles/_c3-file-viewer" as *
+// @use "../c3-file-viewer/styles/_c3-file-viewer" as *
+@use "../c3-expansion/styles/_c3-expansion" as *
 
 =c3-core($theme)
   @include c3-root-variables($theme)
   @include c3-material-dropdown($theme)
-  @include c3-file-viewer($theme)
+  // @include c3-file-viewer($theme)
+  @include c3-expansion($theme)

package/src/lib/c3-tabs/c3-tabs.module.ts

@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule
+  ]
+})
+export class C3TabsModule { }

package/{public-api.d.ts → src/public-api.ts}

@@ -1,10 +1,16 @@
+/*
+ * Public API Surface of c3-components
+ */
+
 export * from './lib/c3-file-viewer/models/http.client';
+
 /**
  * Dropdown
  */
 export * from './lib/c3-dropdown/components/c3-dropdown.component';
 export * from './lib/c3-dropdown/directives/c3-dropdown.trigger';
 export * from './lib/c3-dropdown/c3-dropdown.module';
+
 /**
  * Dialog
  */
@@ -13,6 +19,7 @@ export * from './lib/c3-dialog/components/c3-dialog-prompt.component';
 export * from './lib/c3-dialog/components/c3-dialog-embed-child.component';
 export * from './lib/c3-dialog/services/c3-dialog.service';
 export * from './lib/c3-dialog/c3-dialog.module';
+
 /**
  * File Viewer
  */
@@ -25,7 +32,20 @@ export * from './lib/c3-file-viewer/models/file-viewer-config.model';
 export * from './lib/c3-file-viewer/models/file-viewer';
 export * from './lib/c3-file-viewer/models/file-metadata';
 export * from './lib/c3-file-viewer/c3-file-viewer.module';
+
 /**
  * Safe Url
  */
 export * from './lib/c3-safe-url/pipes/c3-safe-url.pipe';
+
+/**
+ * Expansion
+ */
+export * from './lib/c3-expansion/c3-expansion.module';
+export * from './lib/c3-expansion/components/c3-expansion/c3-expansion.component';
+export * from './lib/c3-expansion/components/c3-expansion-header/c3-expansion-header.component';
+
+/**
+ * Auto Animate
+ */
+export * from './lib/c3-auto-animate/C3AutoAnimate.directive';

package/tsconfig.lib.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "exclude": [
+    "**/*.spec.ts"
+  ]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}