c3-components 0.0.14 → 0.0.15

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

@@ -1,39 +0,0 @@
-import {
-  ChangeDetectorRef,
-  Component,
-  TemplateRef,
-  ViewChild,
-  Input,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
-
-@Component({
-  selector: 'c3-dropdown',
-  template: `
-    <ng-template>
-      <div class="c3-dropdown-panel" [ngClass]="dropdownClass">
-        <ng-content></ng-content>
-      </div>
-    </ng-template>
-  `,
-})
-export class C3DropdownComponent implements OnChanges {
-  @ViewChild(TemplateRef) template!: TemplateRef<any>;
-
-  /** Classes to be added to the container of the content. Supports the same syntax as `ngClass`. */
-  @Input()
-  dropdownClass: string | string[] | Set<string> | { [key: string]: any } = '';
-
-  constructor(private _changeDetectorRef: ChangeDetectorRef) {}
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['dropdownClass']) {
-      this._markForCheck();
-    }
-  }
-
-  _markForCheck(): void {
-    this._changeDetectorRef.markForCheck();
-  }
-}

package/src/lib/c3-dropdown/directives/c3-dropdown.trigger.ts

@@ -1,161 +0,0 @@
-import {
-  Directive,
-  forwardRef,
-  ElementRef,
-  ViewContainerRef,
-  Input,
-  OnDestroy,
-  HostListener,
-  OnChanges,
-  SimpleChanges,
-} from '@angular/core';
-import { NG_VALUE_ACCESSOR } from '@angular/forms';
-import {
-  Overlay,
-  OverlayRef,
-  OverlayConfig,
-  ConnectedPosition,
-} from '@angular/cdk/overlay';
-import { C3DropdownComponent } from '../components/c3-dropdown.component';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { TemplatePortal } from '@angular/cdk/portal';
-import { merge, Subject, Subscription, takeUntil } from 'rxjs';
-
-export const MAT_DROPDOWN_VALUE_ACCESSOR: any = {
-  provide: NG_VALUE_ACCESSOR,
-  useExisting: forwardRef(() => C3DropdownTrigger),
-  multi: true,
-};
-
-/**
- * @description The C3DropdownTrigger directive is used to display or hide a dropdown menu
- * C3DropdownComponent when an item is clicked.
- * @selector [c3Dropdown]
- * @exportAs c3DropdownTrigger
- * @input c3Dropdown - A reference to an instance of C3DropdownComponent.
- * @input c3DropdownDisabled - A boolean indicating whether the directive should be disabled.
- * @input c3DropdownClass - A string, an array of strings, a set of strings or a
- * object representing the CSS classes to be applied to the dropdown menu.
- */
-@Directive({
-  selector: '[c3Dropdown]',
-  exportAs: 'c3DropdownTrigger',
-  providers: [MAT_DROPDOWN_VALUE_ACCESSOR],
-})
-export class C3DropdownTrigger implements OnChanges, OnDestroy {
-  private overlayRef?: OverlayRef | null;
-  private _closingActionsSubscription: Subscription = Subscription.EMPTY;
-  private _destroyed = new Subject<void>();
-
-  private _dropdownClass:
-    | string
-    | string[]
-    | Set<string>
-    | { [key: string]: any } = '';
-
-  private _dropdownDisabled: boolean = false;
-
-  /** The dropdown menu instance */
-  @Input('c3Dropdown')
-  dropdown?: C3DropdownComponent;
-
-  /** Whether the dropdown is disabled. */
-  @Input('c3DropdownDisabled')
-  get dropdownDisabled(): boolean {
-    return this._dropdownDisabled;
-  }
-  set dropdownDisabled(value: boolean) {
-    this._dropdownDisabled = coerceBooleanProperty(value);
-  }
-
-  /** Classes to be passed to the dropdown menu. Supports the same syntax as `ngClass`. */
-  @Input('c3DropdownClass')
-  dropdownClass: string | string[] | Set<string> | { [key: string]: any } = '';
-
-  constructor(
-    private _element: ElementRef<HTMLElement>,
-    private _overlay: Overlay,
-    private _viewContainerRef: ViewContainerRef
-  ) {}
-
-  @HostListener('click')
-  onClick() {
-    this.show();
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['dropdownClass'] && this.dropdown) {
-      this.dropdown.dropdownClass = this._dropdownClass;
-      this.dropdown._markForCheck();
-    }
-  }
-
-  ngOnDestroy() {
-    this._destroyed.next();
-    this._destroyed.complete();
-    this._closingActionsSubscription.unsubscribe();
-    this.close();
-  }
-
-  public show(): void {
-    if (!this.dropdown) return;
-
-    const overlayRef = this._overlay.create(this._getOverlayConfig());
-    const portal = new TemplatePortal(
-      this.dropdown.template,
-      this._viewContainerRef
-    );
-    overlayRef.attach(portal);
-
-    this.overlayRef = overlayRef;
-
-    this._closingActionsSubscription = this._menuClosingActions().subscribe(
-      () => this.close()
-    );
-  }
-
-  public close(): void {
-    if (this.overlayRef && this.overlayRef.hasAttached())
-      this.overlayRef.detach();
-  }
-
-  private _getOverlayConfig(): OverlayConfig {
-    const belowPosition: ConnectedPosition = {
-      originX: 'start',
-      originY: 'bottom',
-      overlayX: 'start',
-      overlayY: 'top',
-    };
-    const abovePosition: ConnectedPosition = {
-      originX: 'start',
-      originY: 'top',
-      overlayX: 'start',
-      overlayY: 'bottom',
-
-      // The overlay edge connected to the trigger should have squared corners, while
-      // the opposite end has rounded corners. We apply a CSS class to swap the
-      // border-radius based on the overlay position.
-      panelClass: 'mat-autocomplete-panel-above',
-    };
-
-    const positionStrategy = this._overlay
-      .position()
-      .flexibleConnectedTo(this._element)
-      .withLockedPosition()
-      .withPositions([belowPosition, abovePosition]);
-
-    return new OverlayConfig({
-      positionStrategy,
-      backdropClass: 'cdk-overlay-transparent-backdrop',
-      hasBackdrop: true,
-    });
-  }
-
-  /** Returns a stream that emits whenever an action that should close the menu occurs. */
-  private _menuClosingActions() {
-    const backdrop = this.overlayRef!.backdropClick();
-    const detachments = this.overlayRef!.detachments();
-
-    return merge(backdrop, detachments).pipe(takeUntil(this._destroyed));
-  }
-}

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

@@ -1,24 +0,0 @@
-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

@@ -1,9 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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-file/c3-download/c3-download.module.ts

@@ -1,7 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,7 +0,0 @@
-<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

@@ -1,96 +0,0 @@
-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

@@ -1,53 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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 = [];
-  }
-}