c3-components 0.0.12 → 0.0.14

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

@@ -0,0 +1,24 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { C3ExpansionHeaderComponent } from './components/c3-expansion-header/c3-expansion-header.component';
+import { C3ExpansionComponent } from './components/c3-expansion/c3-expansion.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { C3AutoAnimateDirective } from '../c3-auto-animate/C3AutoAnimate.directive';
+
+@NgModule({
+  declarations: [C3ExpansionComponent, C3ExpansionHeaderComponent],
+  imports: [
+    CommonModule,
+    C3AutoAnimateDirective,
+    MatButtonModule,
+    MatIconModule,
+    MatTooltipModule,
+    MatButtonModule,
+    MatToolbarModule,
+  ],
+  exports: [C3ExpansionComponent, C3ExpansionHeaderComponent],
+})
+export class C3ExpansionModule {}

package/src/lib/c3-expansion/components/c3-expansion/c3-expansion.component.html

@@ -0,0 +1,9 @@
+<div [class]="' mat-toolbar mat-elevation-z4 ' + headerClass()">
+  <ng-content select="c3-expansion-header">
+    <c3-expansion-header [c3Expansion]="this" />
+  </ng-content>
+</div>
+
+<div *ngIf="isExpanded()">
+  <ng-content></ng-content>
+</div>

package/src/lib/c3-expansion/components/c3-expansion/c3-expansion.component.ts

@@ -0,0 +1,33 @@
+import {
+  Component,
+  ElementRef,
+  HostBinding,
+  input,
+  model,
+} from '@angular/core';
+import { C3AutoAnimateDirective } from '../../../c3-auto-animate/C3AutoAnimate.directive';
+
+@Component({
+  selector: 'c3-expansion',
+  templateUrl: './c3-expansion.component.html',
+  hostDirectives: [
+    {
+      directive: C3AutoAnimateDirective,
+      inputs: ['options'],
+    },
+  ],
+})
+export class C3ExpansionComponent {
+  public headerClass = input<string>('c3-expansion-header');
+  public isExpanded = model<boolean>(false);
+
+  @HostBinding('class') get hostClass() {
+    return 'c3-expansion';
+  }
+
+  constructor(public _elementRef: ElementRef) {}
+
+  toggleExpand() {
+    this.isExpanded.set(!this.isExpanded());
+  }
+}

package/src/lib/c3-expansion/components/c3-expansion-header/c3-expansion-header.component.html

@@ -0,0 +1,12 @@
+<h4 class="text-lg">
+  {{ title() }}
+</h4>
+<button
+  mat-icon-button
+  (click)="c3Expansion().toggleExpand()"
+  [matTooltip]="c3Expansion().isExpanded() ? 'Réduire' : 'Développer'"
+>
+  <mat-icon>{{
+    c3Expansion().isExpanded() ? "expand_less" : "expand_more"
+  }}</mat-icon>
+</button>

package/src/lib/c3-expansion/components/c3-expansion-header/c3-expansion-header.component.ts

@@ -0,0 +1,21 @@
+import {
+  Component,
+  HostBinding,
+  ViewEncapsulation,
+  input,
+} from '@angular/core';
+import { type C3ExpansionComponent } from '../c3-expansion/c3-expansion.component';
+
+@Component({
+  selector: 'c3-expansion-header',
+  templateUrl: './c3-expansion-header.component.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class C3ExpansionHeaderComponent {
+  public title = input<string>('Default Title');
+  public c3Expansion = input.required<C3ExpansionComponent>();
+
+  @HostBinding('class') get hostClass() {
+    return 'c3-expansion-header';
+  }
+}

package/src/lib/c3-expansion/styles/_c3-expansion.scss

@@ -0,0 +1,39 @@
+@use "sass:map";
+@use "sass:meta";
+@use "@angular/material" as mat;
+
+@mixin c3-expansion($theme) {
+  $config: mat.m2-get-color-config($theme);
+  $is-dark: map.get($config, is-dark);
+
+  $bg-toolbar: if(
+    $is-dark,
+    rgb(244 244 245 / var(--tw-bg-opacity)),
+    rgb(63 63 70 / var(--tw-bg-opacity))
+  );
+
+  .c3-expansion {
+    display: block;
+    width: 100%;
+
+    .mat-toolbar {
+      padding: 0 1rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background-color: $bg-toolbar;
+    }
+
+    .c3-expansion-header {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
+
+      h4 {
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+      }
+    }
+  }
+}

package/src/lib/c3-file/c3-download/c3-download.module.ts

@@ -0,0 +1,7 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { C3DownloadService } from './c3-download.service';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+
+@NgModule({ imports: [CommonModule], providers: [C3DownloadService, provideHttpClient(withInterceptorsFromDi())] })
+export class C3DownloadModule {}

package/src/lib/c3-file/c3-download/c3-download.service.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class C3DownloadService {
+  constructor(private _http: HttpClient) {}
+
+  download(url: string): Observable<Blob> {
+    return this._http.get(url, {
+      responseType: 'blob',
+    });
+  }
+}

package/src/lib/c3-file/c3-input-file/c3-input-file.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { C3InputFileTriggerComponent } from './components/c3-input-file-trigger/c3-input-file-trigger.component';
+import { C3InputFileContainerComponent } from './components/c3-input-file-container/c3-input-file-container.component';
+import { C3InputFileDisplayerComponent } from './components/c3-input-file-displayer/c3-input-file-displayer.component';
+import { C3InputFileTriggerDirective } from './directives/c3-input-file-trigger.directive';
+
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { C3InputFileComponent } from './components/c3-input-file/c3-input-file.component';
+
+@NgModule({
+  declarations: [
+    C3InputFileComponent,
+    C3InputFileTriggerComponent,
+    C3InputFileContainerComponent,
+    C3InputFileDisplayerComponent,
+    C3InputFileTriggerDirective,
+  ],
+  imports: [CommonModule, MatProgressBarModule, MatButtonModule, MatIconModule],
+  exports: [
+    C3InputFileComponent,
+    C3InputFileTriggerComponent,
+    C3InputFileContainerComponent,
+    C3InputFileDisplayerComponent,
+    C3InputFileTriggerDirective,
+  ],
+})
+export class C3InputFileModule {}

package/src/lib/c3-file/c3-input-file/class/c3-input-file.ts

@@ -0,0 +1,62 @@
+import { Subject } from 'rxjs';
+import { EventEmitter } from 'events';
+
+export class C3InputFile<ResponseType = any> extends EventEmitter {
+  name?: string;
+  id?: number;
+  fileName: string;
+  mimetype: string;
+  progressionChange = new Subject<number>();
+  private _progression = 0;
+  loaded: boolean = false;
+  path?: string;
+  size?: number;
+  aborded: boolean = false;
+  response?: ResponseType;
+
+  constructor({
+    fileName,
+    mimetype,
+    size,
+  }: {
+    fileName: string;
+    mimetype: string;
+    size: number;
+  }) {
+    super();
+    this.fileName = fileName;
+    this.mimetype = mimetype;
+    this.size = size;
+    this.progressionChange.next(this._progression);
+  }
+
+  set progression(value: number) {
+    this._progression = value;
+    if (value === 100) {
+      this.loaded = true;
+      this.emit('loaded');
+    }
+    this.progressionChange.next(value);
+  }
+
+  get progression(): number {
+    return this._progression;
+  }
+
+  override on(event: string | symbol, listener: (...args: any[]) => void) {
+    return super.on(event, listener);
+  }
+
+  override emit(event: string | symbol, ...args: any[]): boolean {
+    return super.emit(event, args);
+  }
+
+  override off(event: string | symbol, listener: (...args: any[]) => void) {
+    return super.off(event, listener);
+  }
+
+  abord() {
+    this.aborded = true;
+    this.emit('abord');
+  }
+}

package/src/lib/c3-file/c3-input-file/components/c3-input-file/c3-input-file.component.html

@@ -0,0 +1,7 @@
+<input
+  type="file"
+  #fileInput
+  [accept]="accept"
+  [multiple]="multiple"
+  (change)="change($event)"
+/>

package/src/lib/c3-file/c3-input-file/components/c3-input-file/c3-input-file.component.ts

@@ -0,0 +1,96 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ViewChild,
+  ElementRef,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+import { C3InputFile } from '../../class/c3-input-file';
+
+@Component({
+  selector: 'c3-input-file',
+  templateUrl: './c3-input-file.component.html',
+  styleUrls: ['./c3-input-file.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class C3InputFileComponent {
+  @Input() accept!: string;
+  @Input() multiple: Boolean = false;
+  @Input() dest: string = 'api/upload';
+  @Input() baseUrl: string = 'localhost:3000';
+  @Input() method: string = 'POST';
+  @Input() headers?: Object;
+
+  @ViewChild('fileInput') fileInput!: ElementRef<HTMLInputElement>;
+  @Output()
+  fileAdded: EventEmitter<C3InputFile> = new EventEmitter<C3InputFile>();
+
+  click() {
+    this.fileInput.nativeElement.click();
+  }
+
+  change({ target }: any) {
+    const files = Array.from(target.files as FileList);
+
+    files.forEach((file) => {
+      const formData = new FormData();
+      const xhr = new XMLHttpRequest();
+
+      formData.append('upload', file);
+
+      // ecoute la progression de l'upload
+      xhr.upload.addEventListener(
+        'progress',
+        (progress) => {
+          _file.progression = Math.round(
+            (progress.loaded / progress.total) * 100
+          );
+        },
+        false
+      );
+
+      // ecoute si une erreur survient lors de l'upload
+      xhr.addEventListener('error', (event) => console.log(event), false);
+
+      // ecoute si l'utilisateur annul l'upload en cours
+      xhr.addEventListener('abort', (event) => console.log(event), false);
+
+      xhr.addEventListener('readystatechange', (ev) => {
+        if (xhr.readyState === 4) {
+          const data = JSON.parse(xhr.response);
+          _file.name = data.name;
+          _file.id = data.id;
+          _file.path = data.path;
+          _file.response = data;
+          if (_file.progression !== 100) _file.progression = 100;
+          _file.progressionChange.complete();
+          _file.emit('completed');
+        }
+      });
+
+      // initialise le type de connection et l'url
+      xhr.open(this.method, `${this.baseUrl}/${this.dest}`);
+
+      // set header if data is transmitted
+      if (this.headers)
+        for (const [key, value] of Object.entries(this.headers))
+          xhr.setRequestHeader(key, value);
+
+      // start upload
+      xhr.send(formData);
+
+      const _file: C3InputFile = new C3InputFile({
+        fileName: file.name,
+        mimetype: file.type,
+        size: file.size,
+      });
+
+      _file.on('abord', () => {
+        xhr.abort();
+      });
+      this.fileAdded.emit(_file);
+    });
+  }
+}

package/src/lib/c3-file/c3-input-file/components/c3-input-file-container/c3-input-file-container.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  ViewEncapsulation,
+  ContentChild,
+  OnDestroy,
+  Input,
+} from '@angular/core';
+import { C3InputFileTriggerComponent } from '../c3-input-file-trigger/c3-input-file-trigger.component';
+import { C3InputFileTriggerDirective } from '../../directives/c3-input-file-trigger.directive';
+import { C3InputFileComponent } from '../c3-input-file/c3-input-file.component';
+
+@Component({
+  selector:
+    'c3-input-file-container, [c3InputFileContainer], [c3-input-file-container]',
+  template: ` <ng-content> </ng-content>
+    <c3-input-file-displayer
+      *ngIf="c3InputFile"
+      [c3InputFile]="c3InputFile"
+      [autoclose]="autoclose"
+    ></c3-input-file-displayer>`,
+  styles: [],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'c3-input-file-container',
+  },
+})
+export class C3InputFileContainerComponent implements OnDestroy {
+  @Input() autoclose?: boolean | number;
+
+  @ContentChild(C3InputFileComponent) c3InputFile?: C3InputFileComponent;
+
+  @ContentChild(C3InputFileTriggerComponent)
+  c3Trigger?: C3InputFileTriggerComponent;
+
+  @ContentChild(C3InputFileTriggerDirective)
+  c3TriggerDirective?: C3InputFileTriggerDirective;
+
+  ngAfterViewInit() {
+    if (this.c3Trigger)
+      this.c3Trigger.clicked.subscribe(($event) => {
+        this.c3InputFile?.click();
+      });
+    else if (this.c3TriggerDirective)
+      this.c3TriggerDirective.click.subscribe(($event) => {
+        this.c3InputFile?.click();
+      });
+  }
+
+  ngOnDestroy() {
+    if (this.c3Trigger) this.c3Trigger.clicked.unsubscribe();
+    if (this.c3TriggerDirective) this.c3TriggerDirective.click.unsubscribe();
+  }
+}

package/src/lib/c3-file/c3-input-file/components/c3-input-file-displayer/c3-input-file-displayer.component.ts

@@ -0,0 +1,107 @@
+import {
+  Component,
+  OnInit,
+  ViewEncapsulation,
+  Input,
+  AfterContentInit,
+} from '@angular/core';
+import { C3InputFile } from '../../class/c3-input-file';
+import { C3InputFileComponent } from '../c3-input-file/c3-input-file.component';
+
+@Component({
+  selector: 'c3-input-file-displayer',
+  template: `
+    <ng-container *ngIf="files.length">
+      <div class="c3-input-file-displayer mat-card">
+        <div
+          class="title-bar mat-elevation-z4"
+          fxLayout="row"
+          fxLayoutAlign="space-between center"
+        >
+          <span>Liste des téléversement</span>
+          <div>
+            <button mat-icon-button (click)="toggleMinimize()">
+              <mat-icon *ngIf="minimized">open_in_full</mat-icon>
+              <mat-icon *ngIf="!minimized">close_fullscreen</mat-icon>
+            </button>
+            <button mat-icon-button [disabled]="!closable" (click)="close()">
+              <mat-icon>close</mat-icon>
+            </button>
+          </div>
+        </div>
+        <div class="container-list" *ngIf="!minimized">
+          <div class="item" *ngFor="let item of files">
+            <div class="title">{{ item.fileName }}</div>
+            <div
+              fxLayout="row"
+              fxLayoutAlign="space-around center"
+              fxLayoutGap="4px"
+            >
+              <mat-progress-bar
+                fxFlex
+                [color]="item.aborded ? 'warn' : 'primary'"
+                [mode]="item.aborded ? 'determinate' : 'buffer'"
+                [value]="item.progression"
+                [bufferValue]="0"
+              >
+              </mat-progress-bar>
+
+              <button
+                mat-icon-button
+                [disabled]="item.aborded || item.loaded"
+                (click)="item.abord()"
+              >
+                <mat-icon>cancel</mat-icon>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-container>
+  `,
+  styles: [],
+  encapsulation: ViewEncapsulation.None,
+})
+export class C3InputFileDisplayerComponent implements AfterContentInit {
+  @Input() c3InputFile!: C3InputFileComponent;
+  files: Array<C3InputFile> = [];
+  @Input() autoclose?: boolean | number;
+
+  minimized: boolean = false;
+
+  get closable() {
+    return this.files.every(({ loaded, aborded }) => loaded || aborded);
+  }
+
+  constructor() {}
+
+  ngAfterContentInit(): void {
+    this.c3InputFile.fileAdded.subscribe(
+      (newFile: C3InputFile) => {
+        this.files.push(newFile);
+        if (this.autoclose)
+          if (newFile.loaded) this._autoclose();
+          else newFile.on('loaded', () => this._autoclose());
+      },
+      console.error,
+      () => {
+        console.log('completed');
+      }
+    );
+  }
+
+  toggleMinimize() {
+    this.minimized = !this.minimized;
+  }
+
+  _autoclose() {
+    if (this.closable)
+      if (typeof this.autoclose === 'number')
+        setTimeout(() => this.close(), 1000 * this.autoclose);
+      else this.close();
+  }
+
+  close() {
+    this.files = [];
+  }
+}

package/src/lib/c3-file/c3-input-file/components/c3-input-file-trigger/c3-input-file-trigger.component.ts

@@ -0,0 +1,22 @@
+import {
+  Component,
+  ViewEncapsulation,
+  Output,
+  EventEmitter,
+} from '@angular/core';
+
+@Component({
+  selector: 'c3-input-file-trigger',
+  template: `
+    <button (click)="click($event)">Ajouter des fichiers....</button>
+  `,
+  styles: [],
+  encapsulation: ViewEncapsulation.None,
+})
+export class C3InputFileTriggerComponent {
+  @Output('click') clicked: EventEmitter<MouseEvent> = new EventEmitter();
+
+  click($event: MouseEvent) {
+    this.clicked.emit($event);
+  }
+}

package/src/lib/c3-file/c3-input-file/directives/c3-input-file-trigger.directive.ts

@@ -0,0 +1,27 @@
+import {
+  Directive,
+  Output,
+  EventEmitter,
+  ElementRef,
+  AfterViewInit,
+  OnDestroy,
+} from '@angular/core';
+
+@Directive({
+  selector: '[c3InputFileTrigger], [c3-input-file-trigger]',
+})
+export class C3InputFileTriggerDirective implements AfterViewInit, OnDestroy {
+  @Output() click: EventEmitter<MouseEvent> = new EventEmitter();
+  constructor(private elementRef: ElementRef) {}
+
+  ngAfterViewInit() {
+    this.elementRef.nativeElement.addEventListener(
+      'click',
+      ($event: MouseEvent) => this.click.emit($event)
+    );
+  }
+
+  ngOnDestroy() {
+    this.elementRef.nativeElement.removeEventListener('click', () => {});
+  }
+}

package/src/lib/c3-file-upload/c3-file-upload.module.ts

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

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

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { FullScreenDirective } from './directives/full-screen.directive';
+import { C3FileViewerComponent } from './components/public/c3-file-viewer/c3-file-viewer.component';
+import { CommonModule } from '@angular/common';
+import { C3FileViewerActionsComponent } from './components/c3-file-viewer-actions/c3-file-viewer-actions.component';
+import { C3FileViewerImageComponent } from './components/c3-file-viewer-image/c3-file-viewer-image.component';
+import { C3FileViewerPdfComponent } from './components/c3-file-viewer-pdf/c3-file-viewer-pdf.component';
+import { C3FileViewerVideoComponent } from './components/c3-file-viewer-video/c3-file-viewer-video.component';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { C3SafeUrlPipe } from '../../public-api';
+import { C3FileViewerDialogComponent } from './components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { C3FileViewerDialog } from './components/public/c3-file-viewer-dialog/c3-file-viewer-dialog';
+
+@NgModule({ declarations: [
+        FullScreenDirective,
+        C3FileViewerComponent,
+        C3FileViewerActionsComponent,
+        C3FileViewerImageComponent,
+        C3FileViewerPdfComponent,
+        C3FileViewerVideoComponent,
+        C3FileViewerDialogComponent,
+        C3FileViewerDialog,
+    ],
+    exports: [
+        FullScreenDirective,
+        C3FileViewerComponent,
+        C3FileViewerDialogComponent,
+    ], imports: [CommonModule, C3SafeUrlPipe, MatDialogModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
+export class C3FileViewerModule {}