c3-components 0.0.14 → 0.0.15

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

@@ -0,0 +1,5 @@
+export declare class CustomFileEvent {
+    name: string;
+    fileUrl: string;
+    constructor(name: string, fileUrl: string);
+}

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

@@ -0,0 +1,12 @@
+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/lib/c3-file-viewer/models/file-viewer-config.model.d.ts

@@ -0,0 +1,48 @@
+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;
+    };
+}
+export {};

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

@@ -0,0 +1,65 @@
+import { BehaviorSubject, Observable } from 'rxjs';
+import { C3FileViewerConfig } from './file-viewer-config.model';
+import { FileMetadata } from './file-metadata';
+export declare class C3FileViewer {
+    private _config;
+    get config(): C3FileViewerConfig;
+    set config(value: C3FileViewerConfig);
+    config$: BehaviorSubject<C3FileViewerConfig>;
+    fullscreen$: BehaviorSubject<Boolean>;
+    customFile$: BehaviorSubject<any>;
+    index$: BehaviorSubject<number>;
+    loading: boolean;
+    currentIndex: number;
+    get currentFile(): FileMetadata;
+    style: {
+        transform: string;
+        msTransform: string;
+        oTransform: string;
+        webkitTransform: string;
+        minHeight: string;
+        maxHeight: string;
+        height: string;
+        minWidth: string;
+        maxWidth: string;
+        width: string;
+    };
+    styleHeight: string;
+    hovered: boolean;
+    set files(value: FileMetadata[]);
+    get files(): FileMetadata[];
+    private _files;
+    filesObjectUrl: Array<FileMetadata & {
+        objectUrl?: Observable<string>;
+    }>;
+    private scale;
+    private rotation;
+    private translateX;
+    private translateY;
+    private prevX;
+    private prevY;
+    constructor({ config, files, }: {
+        config?: C3FileViewerConfig;
+        files?: FileMetadata[];
+    });
+    createObjectURL(file: FileMetadata): Observable<string>;
+    getFile(location: string): Observable<Blob>;
+    previousImage(event: KeyboardEvent | MouseEvent): void;
+    nextImage(event: KeyboardEvent | MouseEvent): void;
+    zoomIn(): void;
+    zoomOut(): void;
+    scrollZoom(evt: WheelEvent): boolean;
+    rotateClockwise(): void;
+    rotateCounterClockwise(): void;
+    onLoad(file: FileMetadata): void;
+    onLoadStart(file: FileMetadata): void;
+    imageNotFound(file: FileMetadata): void;
+    onDragOver(evt: DragEvent): void;
+    onDragStart(evt: DragEvent): void;
+    toggleFullscreen(): void;
+    reset(): void;
+    private canNavigate;
+    private updateStyle;
+    private valueToCss;
+    private mergeConfig;
+}

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

@@ -0,0 +1,14 @@
+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/lib/c3-safe-url/pipes/c3-safe-url.pipe.d.ts

@@ -0,0 +1,10 @@
+import { PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i0 from "@angular/core";
+export declare class C3SafeUrlPipe implements PipeTransform {
+    private sanitizer;
+    constructor(sanitizer: DomSanitizer);
+    transform(url: string | null): import("@angular/platform-browser").SafeResourceUrl;
+    static ɵfac: i0.ɵɵFactoryDeclaration<C3SafeUrlPipe, never>;
+    static ɵpipe: i0.ɵɵPipeDeclaration<C3SafeUrlPipe, "c3SafeUrl", true>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "c3-components",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "C3 Components Library",
   "author": "Kroenen62",
   "license": "MIT",
@@ -19,7 +19,16 @@
   "sideEffects": false,
   "exports": {
     ".": {
-      "sass": "./_index.scss"
+      "sass": "./_index.scss",
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/c3-components.mjs",
+      "esm": "./esm2022/c3-components.mjs",
+      "default": "./fesm2022/c3-components.mjs"
+    },
+    "./package.json": {
+      "default": "./package.json"
     }
-  }
-}
+  },
+  "module": "fesm2022/c3-components.mjs",
+  "typings": "index.d.ts"
+}

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

@@ -1,16 +1,10 @@
-/*
- * 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
  */
@@ -19,7 +13,6 @@ 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
  */
@@ -32,19 +25,16 @@ 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
  */

package/CONTRIBUTING.md

@@ -1,80 +0,0 @@
-# Contributing to c3-components
-
-First of all, thank you for your interest in contributing to the c3-components project! We appreciate your effort and look forward to collaborating with you. This document provides guidelines and best practices for contributing to the project.
-
-## Table of Contents
-
-- [Code of Conduct](#code-of-conduct)
-- [Getting Started](#getting-started)
-- [Reporting Issues](#reporting-issues)
-- [Submitting Pull Requests](#submitting-pull-requests)
-- [Coding Style](#coding-style)
-- [Testing](#testing)
-- [Documentation](#documentation)
-- [Additional Resources](#additional-resources)
-
-## Code of Conduct
-
-By participating in this project, you are expected to uphold our [Code of Conduct](./CODE_OF_CONDUCT.md). Please take a moment to read it before contributing.
-
-## Getting Started
-
-1. Fork the repository on GitHub.
-2. Clone your fork of the repository to your local machine.
-3. Install the required dependencies with `npm install`.
-4. Create a new branch for your changes using `git checkout -b your-feature-branch`.
-5. Implement your changes, following the [coding style](#coding-style) and [testing](#testing) guidelines.
-6. Commit your changes and push them to your fork on GitHub.
-7. Create a pull request with a clear description of your changes.
-
-## Reporting Issues
-
-If you encounter any issues or bugs, please report them on the [issue tracker](https://github.com/Kroenen62/c3-components/issues). When submitting an issue, make sure to:
-
-- Use a clear and descriptive title.
-- Provide a detailed description of the issue and steps to reproduce it.
-- Include any relevant code snippets or screenshots.
-
-## Submitting Pull Requests
-
-When submitting a pull request, please follow these guidelines:
-
-- Use a clear and descriptive title.
-- Provide a detailed description of your changes.
-- Reference any related issues in the pull request description.
-- Make sure your changes follow the [coding style](#coding-style) and [testing](#testing) guidelines.
-- Update the documentation if necessary.
-
-## Coding Style
-
-To ensure consistency and readability, please adhere to the following coding style guidelines:
-
-- Use 2 spaces for indentation.
-- Follow the [Angular style guide](https://angular.io/guide/styleguide).
-- Use camelCase for variable and function names.
-- Use PascalCase for class names.
-- Add comments to explain complex or non-obvious code.
-- Break down long functions or classes into smaller, more manageable pieces.
-
-## Testing
-
-Before submitting a pull request, make sure to test your changes thoroughly. Follow these testing guidelines:
-
-- Write unit tests for new features and bug fixes.
-- Ensure all tests pass by running `ng test`.
-- Test your changes in multiple browsers and screen sizes.
-
-## Documentation
-
-Keep the documentation up-to-date by following these guidelines:
-
-- Update the README.md file if you add or change any functionality.
-- Document any new components or features in the [documentation website](https://c3-components.example.com/).
-- Use clear and concise language, and provide examples when possible.
-
-## Additional Resources
-
-- [Angular Documentation](https://angular.io/docs)
-- [@angular/material Documentation](https://material.angular.io/)
-
-Once again, thank you for your interest in contributing to the c3-components project. Your time and expertise are greatly appreciated!

package/ng-package.json

@@ -1,19 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/c3-components",
-  "assets": [
-    {
-      "glob": "**/**.scss",
-      "input": "./src",
-      "output": "."
-    },
-    {
-      "glob": "**/**.sass",
-      "input": "./src",
-      "output": "."
-    }
-  ],
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/c3-auto-animate/C3AutoAnimate.directive.ts

@@ -1,18 +0,0 @@
-import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
-import autoAnimate, {
-  AutoAnimateOptions,
-  AutoAnimationPlugin,
-} from '@formkit/auto-animate';
-
-@Directive({
-  selector: '[c3AutoAnimate]',
-  standalone: true,
-})
-export class C3AutoAnimateDirective implements AfterViewInit {
-  @Input() options?: Partial<AutoAnimateOptions> | AutoAnimationPlugin;
-  constructor(private el: ElementRef) {}
-
-  ngAfterViewInit(): void {
-    autoAnimate(this.el.nativeElement, this.options);
-  }
-}

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

@@ -1,30 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MatButtonModule } from '@angular/material/button';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatInputModule } from '@angular/material/input';
-import { ConfirmDialogComponent } from './components/c3-dialog-confirm.component';
-import { C3DialogEmbedChildComponent } from './components/c3-dialog-embed-child.component';
-import { C3PromptDialogComponent } from './components/c3-dialog-prompt.component';
-import { C3DialogService } from './services/c3-dialog.service';
-
-@NgModule({
-  declarations: [
-    ConfirmDialogComponent,
-    C3PromptDialogComponent,
-    C3DialogEmbedChildComponent,
-  ],
-  imports: [
-    CommonModule,
-    MatDialogModule,
-    MatButtonModule,
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-    ReactiveFormsModule,
-  ],
-  providers: [C3DialogService],
-})
-export class C3DialogModule {}

package/src/lib/c3-dialog/components/c3-dialog-confirm.component.ts

@@ -1,44 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-export interface ConfirmConfig {
-  text: string;
-  placeholder?: string;
-  reject?: {
-    color?: string;
-    text?: string;
-  };
-  accept?: {
-    color?: string;
-    text: string;
-  };
-  width?: string;
-}
-
-@Component({
-  selector: 'ConfirmDialogComponent',
-  template: `
-    <mat-dialog-content>
-      <div [innerHtml]="data.text"></div>
-    </mat-dialog-content>
-    <mat-dialog-actions class="flex flex-row justify-end items-center">
-      <button mat-button mat-dialog-close [color]="data.reject?.color">
-        {{ data.reject?.text }}
-      </button>
-      <button mat-button [color]="data.accept?.color" [mat-dialog-close]="true">
-        {{ data.accept?.text }}
-      </button>
-    </mat-dialog-actions>
-  `,
-})
-export class ConfirmDialogComponent {
-  constructor(
-    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
-    @Inject(MAT_DIALOG_DATA)
-    public data: ConfirmConfig
-  ) {}
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-}

package/src/lib/c3-dialog/components/c3-dialog-embed-child.component.ts

@@ -1,40 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  ComponentRef,
-  Inject,
-  Type,
-  ViewChild,
-  ViewContainerRef,
-} from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-@Component({
-  selector: 'C3DialogEmbedChildComponent',
-  template: `<mat-dialog-content>
-    <ng-template #target></ng-template>
-  </mat-dialog-content>`,
-  styles: [],
-})
-export class C3DialogEmbedChildComponent<ComponenyType>
-  implements AfterViewInit
-{
-  @ViewChild('target', { read: ViewContainerRef }) target!: ViewContainerRef;
-
-  createdComponent?: ComponentRef<ComponenyType>;
-
-  constructor(
-    public dialogRef: MatDialogRef<C3DialogEmbedChildComponent<ComponenyType>>,
-    @Inject(MAT_DIALOG_DATA)
-    public data: {
-      component: Type<ComponenyType>;
-    },
-    private _cdr: ChangeDetectorRef
-  ) {}
-
-  ngAfterViewInit() {
-    this.createdComponent = this.target.createComponent(this.data.component);
-    this._cdr.detectChanges();
-  }
-}

package/src/lib/c3-dialog/components/c3-dialog-prompt.component.ts

@@ -1,81 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { FormBuilder, FormControl, ValidatorFn } from '@angular/forms';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-
-export interface PromptConfig {
-  text: string;
-  defaultValue?: string;
-  placeholder?: string;
-  multiline?: boolean;
-  validators?: ValidatorFn | ValidatorFn[];
-  required?: boolean;
-  reject?: {
-    color: string;
-    text: string;
-  };
-  accept?: {
-    color: string;
-    text: string;
-  };
-  width?: string;
-  maxWidth?: string;
-}
-
-@Component({
-  selector: 'PrompDialogComponent',
-  template: `
-    <div mat-dialog-title>{{ data.text }}</div>
-    <mat-dialog-content>
-      <mat-form-field>
-        <mat-label *ngIf="data.placeholder">{{ data.placeholder }}</mat-label>
-        <input
-          *ngIf="!data.multiline"
-          matInput
-          [formControl]="result"
-          (keydown.enter)="dialogRef.close(result.value)"
-        />
-        <textarea
-          *ngIf="data.multiline"
-          matInput
-          [formControl]="result"
-          cdkTextareaAutosize
-        ></textarea>
-      </mat-form-field>
-    </mat-dialog-content>
-    <mat-dialog-actions align="center">
-      <button mat-raised-button mat-dialog-close [class]="data.reject?.color">
-        {{ data.reject?.text }}
-      </button>
-      <button
-        mat-raised-button
-        [disabled]="result.invalid || (data.required && !result.value)"
-        [class]="data.accept?.color"
-        [mat-dialog-close]="result.value"
-      >
-        {{ data.accept?.text }}
-      </button>
-    </mat-dialog-actions>
-  `,
-  styles: [
-    `
-      mat-form-field {
-        width: 100%;
-      }
-    `,
-  ],
-})
-export class C3PromptDialogComponent {
-  result: FormControl;
-  constructor(
-    public dialogRef: MatDialogRef<C3PromptDialogComponent>,
-    @Inject(MAT_DIALOG_DATA)
-    public data: PromptConfig,
-    private _fb: FormBuilder
-  ) {
-    this.result = this._fb.control(data.defaultValue, data.validators);
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-}

package/src/lib/c3-dialog/services/c3-dialog.service.ts

@@ -1,87 +0,0 @@
-import { Injectable, Type, inject } from '@angular/core';
-import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
-import {
-  ConfirmConfig,
-  ConfirmDialogComponent,
-} from '../components/c3-dialog-confirm.component';
-import { C3DialogEmbedChildComponent } from '../components/c3-dialog-embed-child.component';
-import {
-  PromptConfig,
-  C3PromptDialogComponent,
-} from '../components/c3-dialog-prompt.component';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class C3DialogService {
-  readonly #dialog = inject(MatDialog);
-
-  public confirm(data: ConfirmConfig): Promise<boolean> {
-    return new Promise((resolve, reject) => {
-      const dialogRef = this.#dialog.open(ConfirmDialogComponent, {
-        width: data.width || '250px',
-        data: {
-          text: data.text,
-          reject: {
-            color:
-              data.reject && data.reject.color ? data.reject.color : undefined,
-            text: (data.reject && data.reject.text) || 'Annuler',
-          },
-          accept: {
-            color: (data.accept && data.accept.color) || 'primary',
-            text: (data.accept && data.accept.text) || 'Accepter',
-          },
-        },
-      });
-
-      dialogRef.afterClosed().subscribe(async (result) => {
-        if (result) resolve(true);
-        else resolve(false);
-      });
-    });
-  }
-
-  public prompt<T = any>(data: PromptConfig): Promise<false | T> {
-    return new Promise((resolve, reject) => {
-      const dialogRef = this.#dialog.open<C3PromptDialogComponent, any, T>(
-        C3PromptDialogComponent,
-        {
-          width: data.width || '250px',
-          maxWidth: data.maxWidth || '100vw',
-          data: {
-            text: data.text,
-            defaultValue: data.defaultValue,
-            placeholder: data.placeholder,
-            multiline: data.multiline,
-            validators: data.validators,
-            required: data.required,
-            reject: {
-              color:
-                data.reject && data.reject.color
-                  ? data.reject.color
-                  : undefined,
-              text: (data.reject && data.reject.text) || 'Annuler',
-            },
-            accept: {
-              color: (data.accept && data.accept.color) || 'primary',
-              text: (data.accept && data.accept.text) || 'Accepter',
-            },
-          },
-        }
-      );
-
-      dialogRef.afterClosed().subscribe(async (result) => {
-        if (result) resolve(result);
-        else resolve(false);
-      });
-    });
-  }
-
-  createDialgFromComponent<T>(
-    config: Partial<MatDialogConfig> & {
-      data: { component: Type<T> };
-    }
-  ) {
-    return this.#dialog.open(C3DialogEmbedChildComponent, config);
-  }
-}

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { C3DropdownComponent } from './components/c3-dropdown.component';
-import { C3DropdownTrigger } from './directives/c3-dropdown.trigger';
-import { OverlayModule } from '@angular/cdk/overlay';
-
-@NgModule({
-  imports: [CommonModule, OverlayModule],
-  declarations: [C3DropdownComponent, C3DropdownTrigger],
-  exports: [C3DropdownComponent, C3DropdownTrigger],
-})
-export class C3DropdownModule {}

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

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