c3-components 0.0.7 → 0.0.8

package/fesm2022/c3-components.mjs

@@ -0,0 +1,1057 @@
+import * as i0 from '@angular/core';
+import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, ViewContainerRef, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, inject } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i1$1 from '@angular/cdk/overlay';
+import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { TemplatePortal } from '@angular/cdk/portal';
+import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, mergeMap, tap, map } from 'rxjs';
+import * as i1$2 from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import * as i2 from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i7 from '@angular/cdk/text-field';
+import * as i1$4 from '@angular/common/http';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import * as i1$3 from '@angular/platform-browser';
+
+class C3DropdownComponent {
+    constructor(_changeDetectorRef) {
+        this._changeDetectorRef = _changeDetectorRef;
+        /** Classes to be added to the container of the content. Supports the same syntax as `ngClass`. */
+        this.dropdownClass = '';
+    }
+    ngOnChanges(changes) {
+        if (changes['dropdownClass']) {
+            this._markForCheck();
+        }
+    }
+    _markForCheck() {
+        this._changeDetectorRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3DropdownComponent, selector: "c3-dropdown", inputs: { dropdownClass: "dropdownClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+    <ng-template>
+      <div class="c3-dropdown-panel" [ngClass]="dropdownClass">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DropdownComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c3-dropdown',
+                    template: `
+    <ng-template>
+      <div class="c3-dropdown-panel" [ngClass]="dropdownClass">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
+                type: ViewChild,
+                args: [TemplateRef]
+            }], dropdownClass: [{
+                type: Input
+            }] } });
+
+const MAT_DROPDOWN_VALUE_ACCESSOR = {
+    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.
+ */
+class C3DropdownTrigger {
+    /** Whether the dropdown is disabled. */
+    get dropdownDisabled() {
+        return this._dropdownDisabled;
+    }
+    set dropdownDisabled(value) {
+        this._dropdownDisabled = coerceBooleanProperty(value);
+    }
+    constructor(_element, _overlay, _viewContainerRef) {
+        this._element = _element;
+        this._overlay = _overlay;
+        this._viewContainerRef = _viewContainerRef;
+        this._closingActionsSubscription = Subscription.EMPTY;
+        this._destroyed = new Subject();
+        this._dropdownClass = '';
+        this._dropdownDisabled = false;
+        /** Classes to be passed to the dropdown menu. Supports the same syntax as `ngClass`. */
+        this.dropdownClass = '';
+    }
+    onClick() {
+        this.show();
+    }
+    ngOnChanges(changes) {
+        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();
+    }
+    show() {
+        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());
+    }
+    close() {
+        if (this.overlayRef && this.overlayRef.hasAttached())
+            this.overlayRef.detach();
+    }
+    _getOverlayConfig() {
+        const belowPosition = {
+            originX: 'start',
+            originY: 'bottom',
+            overlayX: 'start',
+            overlayY: 'top',
+        };
+        const abovePosition = {
+            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. */
+    _menuClosingActions() {
+        const backdrop = this.overlayRef.backdropClick();
+        const detachments = this.overlayRef.detachments();
+        return merge(backdrop, detachments).pipe(takeUntil(this._destroyed));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DropdownTrigger, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: C3DropdownTrigger, selector: "[c3Dropdown]", inputs: { dropdown: ["c3Dropdown", "dropdown"], dropdownDisabled: ["c3DropdownDisabled", "dropdownDisabled"], dropdownClass: ["c3DropdownClass", "dropdownClass"] }, host: { listeners: { "click": "onClick()" } }, providers: [MAT_DROPDOWN_VALUE_ACCESSOR], exportAs: ["c3DropdownTrigger"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DropdownTrigger, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[c3Dropdown]',
+                    exportAs: 'c3DropdownTrigger',
+                    providers: [MAT_DROPDOWN_VALUE_ACCESSOR],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { dropdown: [{
+                type: Input,
+                args: ['c3Dropdown']
+            }], dropdownDisabled: [{
+                type: Input,
+                args: ['c3DropdownDisabled']
+            }], dropdownClass: [{
+                type: Input,
+                args: ['c3DropdownClass']
+            }], onClick: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class C3DropdownModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.10", ngImport: i0, type: C3DropdownModule, declarations: [C3DropdownComponent, C3DropdownTrigger], imports: [CommonModule, OverlayModule], exports: [C3DropdownComponent, C3DropdownTrigger] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DropdownModule, imports: [CommonModule, OverlayModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DropdownModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, OverlayModule],
+                    declarations: [C3DropdownComponent, C3DropdownTrigger],
+                    exports: [C3DropdownComponent, C3DropdownTrigger],
+                }]
+        }] });
+
+class ConfirmDialogComponent {
+    constructor(dialogRef, data) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: ConfirmDialogComponent, selector: "ConfirmDialogComponent", ngImport: i0, 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>
+  `, isInline: true, dependencies: [{ kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    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>
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class C3PromptDialogComponent {
+    constructor(dialogRef, data, _fb) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this._fb = _fb;
+        this.result = this._fb.control(data.defaultValue, data.validators);
+    }
+    onNoClick() {
+        this.dialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3PromptDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3PromptDialogComponent, selector: "PrompDialogComponent", ngImport: i0, 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>
+  `, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "directive", type: i7.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3PromptDialogComponent, decorators: [{
+            type: Component,
+            args: [{ 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%}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i2$1.FormBuilder }]; } });
+
+class C3DialogEmbedChildComponent {
+    constructor(dialogRef, data, _cdr) {
+        this.dialogRef = dialogRef;
+        this.data = data;
+        this._cdr = _cdr;
+    }
+    ngAfterViewInit() {
+        this.createdComponent = this.target.createComponent(this.data.component);
+        this._cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DialogEmbedChildComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3DialogEmbedChildComponent, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<mat-dialog-content>
+    <ng-template #target></ng-template>
+  </mat-dialog-content>`, isInline: true, dependencies: [{ kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'C3DialogEmbedChildComponent', template: `<mat-dialog-content>
+    <ng-template #target></ng-template>
+  </mat-dialog-content>` }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
+                type: ViewChild,
+                args: ['target', { read: ViewContainerRef }]
+            }] } });
+
+class C3DialogService {
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    confirm(data) {
+        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);
+            });
+        });
+    }
+    prompt(data) {
+        return new Promise((resolve, reject) => {
+            const dialogRef = this.dialog.open(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(config) {
+        return this.dialog.open(C3DialogEmbedChildComponent, config);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DialogService, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; } });
+
+class C3DialogModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.10", ngImport: i0, type: C3DialogModule, declarations: [ConfirmDialogComponent,
+            C3PromptDialogComponent,
+            C3DialogEmbedChildComponent], imports: [CommonModule,
+            MatDialogModule,
+            MatButtonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DialogModule, providers: [C3DialogService], imports: [CommonModule,
+            MatDialogModule,
+            MatButtonModule,
+            MatFormFieldModule,
+            MatInputModule,
+            FormsModule,
+            ReactiveFormsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3DialogModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ConfirmDialogComponent,
+                        C3PromptDialogComponent,
+                        C3DialogEmbedChildComponent,
+                    ],
+                    imports: [
+                        CommonModule,
+                        MatDialogModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatInputModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                    ],
+                    providers: [C3DialogService],
+                }]
+        }] });
+
+class FullScreenDirective {
+    set fullscreenState(value) {
+        this._fullscreenState.next(value?.valueOf() || false);
+    }
+    set fullscreenStateSetter(value) {
+        this.fullscreenState = value;
+    }
+    constructor(el) {
+        this.el = el;
+        this._fullscreenState = new BehaviorSubject(false);
+        this._fullscreenState
+            .pipe(filter((value) => value !== null), skip(2), debounceTime(100))
+            .subscribe(() => {
+            this.defineState();
+        });
+    }
+    defineState() {
+        if (this._fullscreenState.getValue()) {
+            const element = 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 = 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.');
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: FullScreenDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: FullScreenDirective, selector: "[C3FullScreen], [c3-full-screen]", inputs: { fullscreenState: ["c3Screenfull", "fullscreenState"], fullscreenStateSetter: ["c3-full-screen", "fullscreenStateSetter"] }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: FullScreenDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[C3FullScreen], [c3-full-screen]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fullscreenState: [{
+                type: Input,
+                args: ['c3Screenfull']
+            }], fullscreenStateSetter: [{
+                type: Input,
+                args: ['c3-full-screen']
+            }] } });
+
+class C3FileViewerActionsComponent {
+    get config() {
+        return this.fileViewer.config;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3FileViewerActionsComponent, selector: "c3-file-viewer-actions", inputs: { fileViewer: "fileViewer" }, ngImport: i0, template: "<div class=\"nav-button-container\">\n  <button\n    *ngIf=\"config.btnShow?.prev\"\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.previousImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === 0\"\n  >\n    <span\n      *ngIf=\"config.btnIcons?.prev?.classes\"\n      [class]=\"config.btnIcons?.prev?.classes\"\n    ></span>\n  </button>\n  <a\n    [class]=\"config.btnClass\"\n    *ngIf=\"config.btnIcons?.prev?.text\"\n    (click)=\"fileViewer.previousImage($event)\"\n  >\n    <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n  </a>\n  <button\n    *ngIf=\"config.btnShow?.next\"\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.nextImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === fileViewer.files.length - 1\"\n  >\n    <span\n      *ngIf=\"config.btnIcons?.next?.classes\"\n      [class]=\"config.btnIcons?.next?.classes\"\n    ></span>\n  </button>\n  <a\n    [class]=\"config.btnClass\"\n    *ngIf=\"config.btnIcons?.next?.text\"\n    (click)=\"fileViewer.nextImage($event)\"\n  >\n    <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n  </a>\n</div>\n\n<!-- Button Container -->\n<div\n  class=\"btn-container\"\n  [class]=\"config.btnContainerClass\"\n  *ngIf=\"fileViewer.currentFile.type.startsWith('image')\"\n>\n  <!-- Rotate Counter Clockwise -->\n  <ng-container *ngIf=\"config.btnShow?.rotateCounterClockwise\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateCounterClockwise()\"\n      *ngIf=\"config.btnIcons?.rotateCounterClockwise?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.rotateCounterClockwise?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.rotateCounterClockwise?.text\"\n      (click)=\"fileViewer.rotateCounterClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateCounterClockwise?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Rotate Clockwise -->\n  <ng-container *ngIf=\"config.btnShow?.rotateClockwise\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateClockwise()\"\n      *ngIf=\"config.btnIcons?.rotateClockwise?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.rotateClockwise?.text\"\n      (click)=\"fileViewer.rotateClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateClockwise?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Zoom Out -->\n  <ng-container *ngIf=\"config.btnShow?.zoomOut\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomOut()\"\n      *ngIf=\"config.btnIcons?.zoomOut?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.zoomOut?.text\"\n      (click)=\"fileViewer.zoomOut()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomOut?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Zoom In -->\n  <ng-container *ngIf=\"config.btnShow?.zoomIn\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomIn()\"\n      *ngIf=\"config.btnIcons?.zoomIn?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.zoomIn?.text\"\n      (click)=\"fileViewer.zoomIn()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomIn?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Fullscreen -->\n  <ng-container *ngIf=\"config.allowFullscreen\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n      *ngIf=\"config.btnIcons?.fullscreen?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.fullscreen?.text\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.fullscreen?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Reset -->\n  <ng-container *ngIf=\"config.btnShow?.reset\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.reset()\"\n      *ngIf=\"config.btnIcons?.reset?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.reset?.text\"\n      (click)=\"fileViewer.reset()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.reset?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Custom Buttons -->\n  <ng-container *ngFor=\"let cBtn of config.customBtns\">\n    <button *ngIf=\"cBtn.icon.classes\" type=\"button\" [class]=\"config.btnClass\">\n      <span *ngIf=\"cBtn.icon.classes\" [class]=\"cBtn.icon.classes\"></span>\n    </button>\n    <ng-container *ngIf=\"cBtn.icon.text\">\n      <a [class]=\"config.btnClass\" *ngIf=\"cBtn.icon.text\">\n        <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n      </a>\n    </ng-container>\n  </ng-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-viewer-actions', template: "<div class=\"nav-button-container\">\n  <button\n    *ngIf=\"config.btnShow?.prev\"\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.previousImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === 0\"\n  >\n    <span\n      *ngIf=\"config.btnIcons?.prev?.classes\"\n      [class]=\"config.btnIcons?.prev?.classes\"\n    ></span>\n  </button>\n  <a\n    [class]=\"config.btnClass\"\n    *ngIf=\"config.btnIcons?.prev?.text\"\n    (click)=\"fileViewer.previousImage($event)\"\n  >\n    <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.prev?.text }}</span>\n  </a>\n  <button\n    *ngIf=\"config.btnShow?.next\"\n    type=\"button\"\n    [class]=\"config.btnClass\"\n    (click)=\"fileViewer.nextImage($event)\"\n    [disabled]=\"fileViewer.currentIndex === fileViewer.files.length - 1\"\n  >\n    <span\n      *ngIf=\"config.btnIcons?.next?.classes\"\n      [class]=\"config.btnIcons?.next?.classes\"\n    ></span>\n  </button>\n  <a\n    [class]=\"config.btnClass\"\n    *ngIf=\"config.btnIcons?.next?.text\"\n    (click)=\"fileViewer.nextImage($event)\"\n  >\n    <span [class]=\"config.btnSubClass\">{{ config.btnIcons?.next?.text }}</span>\n  </a>\n</div>\n\n<!-- Button Container -->\n<div\n  class=\"btn-container\"\n  [class]=\"config.btnContainerClass\"\n  *ngIf=\"fileViewer.currentFile.type.startsWith('image')\"\n>\n  <!-- Rotate Counter Clockwise -->\n  <ng-container *ngIf=\"config.btnShow?.rotateCounterClockwise\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateCounterClockwise()\"\n      *ngIf=\"config.btnIcons?.rotateCounterClockwise?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.rotateCounterClockwise?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.rotateCounterClockwise?.text\"\n      (click)=\"fileViewer.rotateCounterClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateCounterClockwise?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Rotate Clockwise -->\n  <ng-container *ngIf=\"config.btnShow?.rotateClockwise\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.rotateClockwise()\"\n      *ngIf=\"config.btnIcons?.rotateClockwise?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.rotateClockwise?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.rotateClockwise?.text\"\n      (click)=\"fileViewer.rotateClockwise()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.rotateClockwise?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Zoom Out -->\n  <ng-container *ngIf=\"config.btnShow?.zoomOut\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomOut()\"\n      *ngIf=\"config.btnIcons?.zoomOut?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.zoomOut?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.zoomOut?.text\"\n      (click)=\"fileViewer.zoomOut()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomOut?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Zoom In -->\n  <ng-container *ngIf=\"config.btnShow?.zoomIn\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.zoomIn()\"\n      *ngIf=\"config.btnIcons?.zoomIn?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.zoomIn?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.zoomIn?.text\"\n      (click)=\"fileViewer.zoomIn()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.zoomIn?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Fullscreen -->\n  <ng-container *ngIf=\"config.allowFullscreen\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n      *ngIf=\"config.btnIcons?.fullscreen?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.fullscreen?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.fullscreen?.text\"\n      (click)=\"fileViewer.toggleFullscreen()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.fullscreen?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Reset -->\n  <ng-container *ngIf=\"config.btnShow?.reset\">\n    <button\n      type=\"button\"\n      [class]=\"config.btnClass\"\n      (click)=\"fileViewer.reset()\"\n      *ngIf=\"config.btnIcons?.reset?.classes\"\n    >\n      <span [class]=\"config.btnIcons?.reset?.classes\"></span>\n    </button>\n    <a\n      [class]=\"config.btnClass\"\n      *ngIf=\"config.btnIcons?.reset?.text\"\n      (click)=\"fileViewer.reset()\"\n    >\n      <span [class]=\"config.btnSubClass\">{{\n        config.btnIcons?.reset?.text\n      }}</span>\n    </a>\n  </ng-container>\n\n  <!-- Custom Buttons -->\n  <ng-container *ngFor=\"let cBtn of config.customBtns\">\n    <button *ngIf=\"cBtn.icon.classes\" type=\"button\" [class]=\"config.btnClass\">\n      <span *ngIf=\"cBtn.icon.classes\" [class]=\"cBtn.icon.classes\"></span>\n    </button>\n    <ng-container *ngIf=\"cBtn.icon.text\">\n      <a [class]=\"config.btnClass\" *ngIf=\"cBtn.icon.text\">\n        <span [class]=\"config.btnSubClass\">{{ cBtn.icon.text }}</span>\n      </a>\n    </ng-container>\n  </ng-container>\n</div>\n" }]
+        }], propDecorators: { fileViewer: [{
+                type: Input
+            }] } });
+
+class C3SafeUrlPipe {
+    constructor(sanitizer) {
+        this.sanitizer = sanitizer;
+    }
+    transform(url) {
+        return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3SafeUrlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.10", ngImport: i0, type: C3SafeUrlPipe, isStandalone: true, name: "c3SafeUrl" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3SafeUrlPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'c3SafeUrl',
+                    standalone: true,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; } });
+
+class C3FileViewerImageComponent {
+    constructor() {
+        this.dragstart = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3FileViewerImageComponent, selector: "c3-file-viewer-image, [c3-file-viewer-image]", inputs: { fileViewer: "fileViewer" }, outputs: { dragstart: "dragstart" }, ngImport: i0, template: "<img\n  *ngIf=\"fileViewer.currentFile.objectUrl\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [ngStyle]=\"fileViewer.style\"\n  alt=\"Image not found...\"\n  (dragstart)=\"dragstart.emit($event)\"\n/>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerImageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-viewer-image, [c3-file-viewer-image]', template: "<img\n  *ngIf=\"fileViewer.currentFile.objectUrl\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [ngStyle]=\"fileViewer.style\"\n  alt=\"Image not found...\"\n  (dragstart)=\"dragstart.emit($event)\"\n/>\n" }]
+        }], propDecorators: { fileViewer: [{
+                type: Input
+            }], dragstart: [{
+                type: Output
+            }] } });
+
+class C3FileViewerPdfComponent {
+    constructor() {
+        this.dragstart = new EventEmitter();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3FileViewerPdfComponent, selector: "c3-file-viewer-pdf", inputs: { fileViewer: "fileViewer" }, outputs: { dragstart: "dragstart" }, host: { styleAttribute: "display: block", classAttribute: "c3-file-viewer-pdf" }, ngImport: i0, template: "<!-- pdf viewer -->\n<embed\n  type=\"application/pdf\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [style.height]=\"'100%'\"\n  [style.width]=\"'100%'\"\n/>\n", dependencies: [{ kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: C3SafeUrlPipe, name: "c3SafeUrl" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerPdfComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-viewer-pdf', encapsulation: ViewEncapsulation.None, host: {
+                        style: 'display: block',
+                        class: 'c3-file-viewer-pdf',
+                    }, template: "<!-- pdf viewer -->\n<embed\n  type=\"application/pdf\"\n  [src]=\"fileViewer.currentFile.objectUrl | async | c3SafeUrl\"\n  [style.height]=\"'100%'\"\n  [style.width]=\"'100%'\"\n/>\n" }]
+        }], propDecorators: { fileViewer: [{
+                type: Input
+            }], dragstart: [{
+                type: Output
+            }] } });
+
+class C3FileViewerVideoComponent {
+    set _srcUpdated({ location }) {
+        this.src$.next(location);
+    }
+    constructor() {
+        this.src = '';
+        this.src$ = new Subject();
+        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);
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3FileViewerVideoComponent, selector: "c3-file-viewer-video", inputs: { _srcUpdated: ["file", "_srcUpdated"], fileViewer: "fileViewer" }, ngImport: i0, template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-viewer-video', template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { _srcUpdated: [{
+                type: Input,
+                args: ['file']
+            }], fileViewer: [{
+                type: Input
+            }] } });
+
+class C3FileViewerComponent {
+    constructor(moduleConfig, _http) {
+        this.moduleConfig = moduleConfig;
+        this._http = _http;
+        this.indexChange = new EventEmitter();
+        this.configChange = new EventEmitter();
+        this.customFileEvent = new EventEmitter();
+    }
+    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);
+        });
+    }
+    onMouseOver() {
+        this.fileViewer.hovered = true;
+    }
+    onMouseLeave() {
+        this.fileViewer.hovered = false;
+    }
+    ngOnChanges(changes) {
+        if (changes['screenHeightOccupied'] && this.fileViewer)
+            this.defineStyleHeight();
+    }
+    next(event) {
+        this.fileViewer.nextImage(event);
+    }
+    previous(event) {
+        this.fileViewer.previousImage(event);
+    }
+    defineStyleHeight() {
+        this.fileViewer.styleHeight =
+            'calc(100% - ' + this.screenHeightOccupied + 'px)';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerComponent, deps: [{ token: 'config', optional: true }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3FileViewerComponent, selector: "c3-file-viewer", inputs: { screenHeightOccupied: "screenHeightOccupied", fileViewer: "fileViewer" }, outputs: { indexChange: "indexChange", configChange: "configChange", customFileEvent: "customFileEvent" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseleave": "onMouseLeave()", "window:keyup.ArrowRight": "next($event)", "window:keyup.ArrowLeft": "previous($event)" }, classAttribute: "c3-file-viewer" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"container\"\n  *ngIf=\"fileViewer\"\n  [c3-full-screen]=\"fileViewer.fullscreen$ | async\"\n  [style.height]=\"fileViewer.styleHeight\"\n  [style.backgroundColor]=\"fileViewer.config.containerBackgroundColor\"\n  (wheel)=\"fileViewer.scrollZoom($event)\"\n  (dragover)=\"fileViewer.onDragOver($event)\"\n>\n  <c3-file-viewer-image\n    *ngIf=\"fileViewer.currentFile.type.startsWith('image')\"\n    [fileViewer]=\"fileViewer\"\n    [style]=\"fileViewer.style\"\n    (dragstart)=\"fileViewer.onDragStart($event)\"\n  />\n\n  <c3-file-viewer-video\n    *ngIf=\"fileViewer.currentFile.type.startsWith('video')\"\n  />\n\n  <c3-file-viewer-pdf\n    *ngIf=\"fileViewer.currentFile.type.startsWith('application/pdf')\"\n    [fileViewer]=\"fileViewer\"\n  />\n  <!-- Div below will be used to hide the 'ghost' image when dragging -->\n  <div></div>\n  <div class=\"spinner-container\" *ngIf=\"fileViewer.loading\">\n    <div class=\"spinner\"></div>\n  </div>\n\n  <c3-file-viewer-actions [fileViewer]=\"fileViewer\" />\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: FullScreenDirective, selector: "[C3FullScreen], [c3-full-screen]", inputs: ["c3Screenfull", "c3-full-screen"] }, { kind: "component", type: C3FileViewerActionsComponent, selector: "c3-file-viewer-actions", inputs: ["fileViewer"] }, { kind: "component", type: C3FileViewerImageComponent, selector: "c3-file-viewer-image, [c3-file-viewer-image]", inputs: ["fileViewer"], outputs: ["dragstart"] }, { kind: "component", type: C3FileViewerPdfComponent, selector: "c3-file-viewer-pdf", inputs: ["fileViewer"], outputs: ["dragstart"] }, { kind: "component", type: C3FileViewerVideoComponent, selector: "c3-file-viewer-video", inputs: ["file", "fileViewer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'c3-file-viewer', encapsulation: ViewEncapsulation.None, host: {
+                        class: 'c3-file-viewer',
+                    }, template: "<div\n  class=\"container\"\n  *ngIf=\"fileViewer\"\n  [c3-full-screen]=\"fileViewer.fullscreen$ | async\"\n  [style.height]=\"fileViewer.styleHeight\"\n  [style.backgroundColor]=\"fileViewer.config.containerBackgroundColor\"\n  (wheel)=\"fileViewer.scrollZoom($event)\"\n  (dragover)=\"fileViewer.onDragOver($event)\"\n>\n  <c3-file-viewer-image\n    *ngIf=\"fileViewer.currentFile.type.startsWith('image')\"\n    [fileViewer]=\"fileViewer\"\n    [style]=\"fileViewer.style\"\n    (dragstart)=\"fileViewer.onDragStart($event)\"\n  />\n\n  <c3-file-viewer-video\n    *ngIf=\"fileViewer.currentFile.type.startsWith('video')\"\n  />\n\n  <c3-file-viewer-pdf\n    *ngIf=\"fileViewer.currentFile.type.startsWith('application/pdf')\"\n    [fileViewer]=\"fileViewer\"\n  />\n  <!-- Div below will be used to hide the 'ghost' image when dragging -->\n  <div></div>\n  <div class=\"spinner-container\" *ngIf=\"fileViewer.loading\">\n    <div class=\"spinner\"></div>\n  </div>\n\n  <c3-file-viewer-actions [fileViewer]=\"fileViewer\" />\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['config']
+                }] }, { type: i1$4.HttpClient }]; }, propDecorators: { screenHeightOccupied: [{
+                type: Input
+            }], fileViewer: [{
+                type: Input
+            }], indexChange: [{
+                type: Output
+            }], configChange: [{
+                type: Output
+            }], customFileEvent: [{
+                type: Output
+            }], onMouseOver: [{
+                type: HostListener,
+                args: ['mouseover']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], next: [{
+                type: HostListener,
+                args: ['window:keyup.ArrowRight', ['$event']]
+            }], previous: [{
+                type: HostListener,
+                args: ['window:keyup.ArrowLeft', ['$event']]
+            }] } });
+
+const DEFAULT_CONFIG = {
+    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',
+        },
+    },
+};
+
+class CustomFileEvent {
+    constructor(name, fileUrl) {
+        this.name = name;
+        this.fileUrl = fileUrl;
+    }
+}
+
+class C3FileViewer {
+    get config() {
+        return this._config;
+    }
+    set config(value) {
+        this._config = this.mergeConfig(DEFAULT_CONFIG, value);
+        this.config$.next(this._config);
+    }
+    get currentFile() {
+        return this.filesObjectUrl[this.currentIndex];
+    }
+    set files(value) {
+        this._files = value;
+        this.currentIndex = 0;
+        this.index$.next(this.currentIndex);
+        this.filesObjectUrl = value.map((file) => {
+            return {
+                ...file,
+                objectUrl: file.objectUrl || this.createObjectURL(file),
+            };
+        });
+    }
+    get files() {
+        return this._files;
+    }
+    constructor({ config, files, }) {
+        this._config = DEFAULT_CONFIG;
+        this.config$ = new BehaviorSubject(DEFAULT_CONFIG);
+        this.fullscreen$ = new BehaviorSubject(false);
+        this.customFile$ = new BehaviorSubject(null);
+        this.index$ = new BehaviorSubject(0);
+        this.loading = true;
+        this.currentIndex = 0;
+        this.style = {
+            transform: '',
+            msTransform: '',
+            oTransform: '',
+            webkitTransform: '',
+            minHeight: 'auto',
+            maxHeight: 'auto',
+            height: 'auto',
+            minWidth: 'auto',
+            maxWidth: 'auto',
+            width: 'auto',
+        };
+        this.styleHeight = '100%';
+        this.hovered = false;
+        this._files = [];
+        this.filesObjectUrl = [];
+        this.scale = 1;
+        this.rotation = 0;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.prevX = 0;
+        this.prevY = 0;
+        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) {
+        this.onLoadStart(file);
+        return this.getFile(file.location).pipe(map((response) => URL.createObjectURL(response)), tap(() => this.onLoad(file)));
+    }
+    getFile(location) {
+        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) {
+        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) {
+        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) {
+        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) {
+        this.loading = false;
+    }
+    onLoadStart(file) {
+        this.loading = true;
+    }
+    imageNotFound(file) {
+        this.loading = false;
+        this.customFile$.next(new CustomFileEvent('imageNotFound', file.location));
+    }
+    onDragOver(evt) {
+        this.translateX += evt.clientX - this.prevX;
+        this.translateY += evt.clientY - this.prevY;
+        this.prevX = evt.clientX;
+        this.prevY = evt.clientY;
+        this.updateStyle();
+    }
+    onDragStart(evt) {
+        if (evt.target && evt.dataTransfer && evt.dataTransfer.setDragImage) {
+            const target = evt.target;
+            const nextElementSibling = target.nextElementSibling;
+            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();
+    }
+    canNavigate(event) {
+        return (event == null || (this.config.allowKeyboardNavigation && this.hovered));
+    }
+    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;
+    }
+    valueToCss(value) {
+        return value ? (typeof value === 'string' ? value : value + 'px') : 'auto';
+    }
+    mergeConfig(defaultValues, overrideValues) {
+        let result = { ...defaultValues };
+        if (overrideValues) {
+            result = { ...defaultValues, ...overrideValues };
+            if (overrideValues.btnIcons) {
+                result.btnIcons = {
+                    ...defaultValues.btnIcons,
+                    ...overrideValues.btnIcons,
+                };
+            }
+        }
+        return result;
+    }
+}
+
+class C3FileViewerDialog {
+    constructor(fileViewer) {
+        this.fileViewer = fileViewer;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerDialog, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3FileViewerDialog, selector: "ng-component", ngImport: i0, template: `
+    <c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
+  `, isInline: true, dependencies: [{ kind: "component", type: C3FileViewerComponent, selector: "c3-file-viewer", inputs: ["screenHeightOccupied", "fileViewer"], outputs: ["indexChange", "configChange", "customFileEvent"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerDialog, decorators: [{
+            type: Component,
+            args: [{
+                    template: `
+    <c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: C3FileViewer, decorators: [{
+                    type: Inject,
+                    args: [MAT_DIALOG_DATA]
+                }] }]; } });
+
+class C3FileViewerDialogComponent {
+    constructor(_dialog) {
+        this._dialog = _dialog;
+        this.dialogConfig = {
+            panelClass: 'c3-file-viewer-dialog',
+            width: '80%',
+            height: '80%',
+        };
+    }
+    openDialog() {
+        this._dialog.open(C3FileViewerDialog, {
+            data: this.fileViewer,
+            ...this.dialogConfig,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerDialogComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: { fileViewer: "fileViewer", dialogConfig: "dialogConfig" }, host: { listeners: { "click": "openDialog()" } }, ngImport: i0, template: ` <ng-content /> `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerDialogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'c3-file-viewer-dialog',
+                    template: ` <ng-content /> `,
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; }, propDecorators: { fileViewer: [{
+                type: Input
+            }], dialogConfig: [{
+                type: Input
+            }], openDialog: [{
+                type: HostListener,
+                args: ['click']
+            }] } });
+
+class C3FileViewerModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerModule, declarations: [FullScreenDirective,
+            C3FileViewerComponent,
+            C3FileViewerActionsComponent,
+            C3FileViewerImageComponent,
+            C3FileViewerPdfComponent,
+            C3FileViewerVideoComponent,
+            C3FileViewerDialogComponent,
+            C3FileViewerDialog], imports: [CommonModule, HttpClientModule, C3SafeUrlPipe, MatDialogModule], exports: [FullScreenDirective,
+            C3FileViewerComponent,
+            C3FileViewerDialogComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerModule, imports: [CommonModule, HttpClientModule, MatDialogModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: C3FileViewerModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: [],
+                    declarations: [
+                        FullScreenDirective,
+                        C3FileViewerComponent,
+                        C3FileViewerActionsComponent,
+                        C3FileViewerImageComponent,
+                        C3FileViewerPdfComponent,
+                        C3FileViewerVideoComponent,
+                        C3FileViewerDialogComponent,
+                        C3FileViewerDialog,
+                    ],
+                    imports: [CommonModule, HttpClientModule, C3SafeUrlPipe, MatDialogModule],
+                    exports: [
+                        FullScreenDirective,
+                        C3FileViewerComponent,
+                        C3FileViewerDialogComponent,
+                    ],
+                }]
+        }] });
+
+/*
+ * Public API Surface of c3-components
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3PromptDialogComponent, C3SafeUrlPipe, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR };
+//# sourceMappingURL=c3-components.mjs.map