c3-components 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/README.md +67 -13
  2. package/esm2020/c3-components.mjs +5 -0
  3. package/esm2020/lib/c3-dialog/c3-dialog.module.mjs +56 -0
  4. package/esm2020/lib/c3-dialog/components/c3-dialog-confirm.component.mjs +52 -0
  5. package/esm2020/lib/c3-dialog/components/c3-dialog-embed-child.component.mjs +32 -0
  6. package/esm2020/lib/c3-dialog/components/c3-dialog-prompt.component.mjs +95 -0
  7. package/esm2020/lib/c3-dialog/services/c3-dialog.service.mjs +79 -0
  8. package/esm2020/lib/c3-dropdown/c3-dropdown.module.mjs +20 -0
  9. package/esm2020/lib/c3-dropdown/components/c3-dropdown.component.mjs +45 -0
  10. package/esm2020/lib/c3-dropdown/directives/c3-dropdown.trigger.mjs +128 -0
  11. package/esm2020/lib/c3-file-viewer/c3-file-viewer.module.mjs +51 -0
  12. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.mjs +17 -0
  13. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-dialog/c3-file-viewer-dialog.mjs +20 -0
  14. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.mjs +20 -0
  15. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.mjs +23 -0
  16. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.mjs +32 -0
  17. package/esm2020/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.mjs +86 -0
  18. package/esm2020/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.mjs +34 -0
  19. package/esm2020/lib/c3-file-viewer/consts/default.config.mjs +40 -0
  20. package/esm2020/lib/c3-file-viewer/directives/full-screen.directive.mjs +66 -0
  21. package/esm2020/lib/c3-file-viewer/models/custom-file-event.model.mjs +7 -0
  22. package/esm2020/lib/c3-file-viewer/models/file-metadata.mjs +2 -0
  23. package/esm2020/lib/c3-file-viewer/models/file-viewer-config.model.mjs +2 -0
  24. package/esm2020/lib/c3-file-viewer/models/file-viewer.mjs +206 -0
  25. package/esm2020/lib/c3-file-viewer/models/http.client.mjs +2 -0
  26. package/esm2020/lib/c3-safe-url/pipes/c3-safe-url.pipe.mjs +21 -0
  27. package/esm2020/public-api.mjs +34 -0
  28. package/fesm2015/c3-components.mjs +1055 -0
  29. package/fesm2015/c3-components.mjs.map +1 -0
  30. package/fesm2020/c3-components.mjs +1053 -0
  31. package/fesm2020/c3-components.mjs.map +1 -0
  32. package/index.d.ts +5 -0
  33. package/lib/c3-dialog/c3-dialog.module.d.ts +16 -0
  34. package/lib/c3-dialog/components/c3-dialog-confirm.component.d.ts +23 -0
  35. package/lib/c3-dialog/components/c3-dialog-embed-child.component.d.ts +18 -0
  36. package/lib/c3-dialog/components/c3-dialog-prompt.component.d.ts +31 -0
  37. package/lib/c3-dialog/services/c3-dialog.service.d.ts +19 -0
  38. package/lib/c3-dropdown/c3-dropdown.module.d.ts +10 -0
  39. package/lib/c3-dropdown/components/c3-dropdown.component.d.ts +15 -0
  40. package/lib/c3-dropdown/directives/c3-dropdown.trigger.d.ts +45 -0
  41. package/lib/c3-dropdown/styles/_c3-dropdown.sass +22 -0
  42. package/lib/c3-file-viewer/c3-file-viewer.module.d.ts +18 -0
  43. package/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.d.ts +8 -0
  44. package/lib/c3-file-viewer/components/c3-file-viewer-dialog/c3-file-viewer-dialog.d.ts +8 -0
  45. package/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.d.ts +9 -0
  46. package/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.d.ts +9 -0
  47. package/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.d.ts +12 -0
  48. package/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.d.ts +25 -0
  49. package/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.d.ts +12 -0
  50. package/lib/c3-file-viewer/consts/default.config.d.ts +2 -0
  51. package/lib/c3-file-viewer/directives/full-screen.directive.d.ts +12 -0
  52. package/lib/c3-file-viewer/models/custom-file-event.model.d.ts +5 -0
  53. package/lib/c3-file-viewer/models/file-metadata.d.ts +12 -0
  54. package/lib/c3-file-viewer/models/file-viewer-config.model.d.ts +48 -0
  55. package/lib/c3-file-viewer/models/file-viewer.d.ts +65 -0
  56. package/lib/c3-file-viewer/models/http.client.d.ts +14 -0
  57. package/lib/c3-file-viewer/styles/_c3-file-viewer.sass +116 -0
  58. package/lib/c3-safe-url/pipes/c3-safe-url.pipe.d.ts +10 -0
  59. package/lib/c3-styles/_c3-core.sass +8 -0
  60. package/lib/c3-styles/_c3-root-variables.sass +107 -0
  61. package/lib/c3-styles/_utils.sass +27 -0
  62. package/package.json +5 -4
  63. package/public-api.d.ts +30 -0
  64. package/src/lib/c3-file/c3-input-file/components/c3-input-file/c3-input-file.component.scss +3 -0
@@ -0,0 +1,1053 @@
1
+ import * as i0 from '@angular/core';
2
+ import { TemplateRef, Component, ViewChild, Input, forwardRef, Directive, HostListener, NgModule, Inject, ViewContainerRef, Injectable, Pipe, EventEmitter, Output, ViewEncapsulation, Optional, inject } from '@angular/core';
3
+ import * as i1 from '@angular/common';
4
+ import { CommonModule } from '@angular/common';
5
+ import * as i2$1 from '@angular/forms';
6
+ import { NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
7
+ import * as i1$1 from '@angular/cdk/overlay';
8
+ import { OverlayConfig, OverlayModule } from '@angular/cdk/overlay';
9
+ import { coerceBooleanProperty } from '@angular/cdk/coercion';
10
+ import { TemplatePortal } from '@angular/cdk/portal';
11
+ import { Subscription, Subject, merge, takeUntil, BehaviorSubject, filter, skip, debounceTime, mergeMap, tap, map } from 'rxjs';
12
+ import * as i1$2 from '@angular/material/dialog';
13
+ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
14
+ import * as i2 from '@angular/material/button';
15
+ import { MatButtonModule } from '@angular/material/button';
16
+ import * as i3 from '@angular/flex-layout/flex';
17
+ import * as i5 from '@angular/material/form-field';
18
+ import { MatFormFieldModule } from '@angular/material/form-field';
19
+ import * as i6 from '@angular/material/input';
20
+ import { MatInputModule } from '@angular/material/input';
21
+ import * as i7 from '@angular/cdk/text-field';
22
+ import { FlexLayoutModule } from '@angular/flex-layout';
23
+ import * as i1$4 from '@angular/common/http';
24
+ import { HttpClient, HttpClientModule } from '@angular/common/http';
25
+ import * as i1$3 from '@angular/platform-browser';
26
+
27
+ class C3DropdownComponent {
28
+ constructor(_changeDetectorRef) {
29
+ this._changeDetectorRef = _changeDetectorRef;
30
+ /** Classes to be added to the container of the content. Supports the same syntax as `ngClass`. */
31
+ this.dropdownClass = '';
32
+ }
33
+ ngOnChanges(changes) {
34
+ if (changes['dropdownClass']) {
35
+ this._markForCheck();
36
+ }
37
+ }
38
+ _markForCheck() {
39
+ this._changeDetectorRef.markForCheck();
40
+ }
41
+ }
42
+ C3DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
43
+ C3DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: C3DropdownComponent, selector: "c3-dropdown", inputs: { dropdownClass: "dropdownClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
44
+ <ng-template>
45
+ <div class="c3-dropdown-panel" [ngClass]="dropdownClass">
46
+ <ng-content></ng-content>
47
+ </div>
48
+ </ng-template>
49
+ `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
50
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DropdownComponent, decorators: [{
51
+ type: Component,
52
+ args: [{
53
+ selector: 'c3-dropdown',
54
+ template: `
55
+ <ng-template>
56
+ <div class="c3-dropdown-panel" [ngClass]="dropdownClass">
57
+ <ng-content></ng-content>
58
+ </div>
59
+ </ng-template>
60
+ `,
61
+ }]
62
+ }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { template: [{
63
+ type: ViewChild,
64
+ args: [TemplateRef]
65
+ }], dropdownClass: [{
66
+ type: Input
67
+ }] } });
68
+
69
+ const MAT_DROPDOWN_VALUE_ACCESSOR = {
70
+ provide: NG_VALUE_ACCESSOR,
71
+ useExisting: forwardRef(() => C3DropdownTrigger),
72
+ multi: true,
73
+ };
74
+ /**
75
+ * @description The C3DropdownTrigger directive is used to display or hide a dropdown menu
76
+ * C3DropdownComponent when an item is clicked.
77
+ * @selector [c3Dropdown]
78
+ * @exportAs c3DropdownTrigger
79
+ * @input c3Dropdown - A reference to an instance of C3DropdownComponent.
80
+ * @input c3DropdownDisabled - A boolean indicating whether the directive should be disabled.
81
+ * @input c3DropdownClass - A string, an array of strings, a set of strings or a
82
+ * object representing the CSS classes to be applied to the dropdown menu.
83
+ */
84
+ class C3DropdownTrigger {
85
+ /** Whether the dropdown is disabled. */
86
+ get dropdownDisabled() {
87
+ return this._dropdownDisabled;
88
+ }
89
+ set dropdownDisabled(value) {
90
+ this._dropdownDisabled = coerceBooleanProperty(value);
91
+ }
92
+ constructor(_element, _overlay, _viewContainerRef) {
93
+ this._element = _element;
94
+ this._overlay = _overlay;
95
+ this._viewContainerRef = _viewContainerRef;
96
+ this._closingActionsSubscription = Subscription.EMPTY;
97
+ this._destroyed = new Subject();
98
+ this._dropdownClass = '';
99
+ this._dropdownDisabled = false;
100
+ /** Classes to be passed to the dropdown menu. Supports the same syntax as `ngClass`. */
101
+ this.dropdownClass = '';
102
+ }
103
+ onClick() {
104
+ this.show();
105
+ }
106
+ ngOnChanges(changes) {
107
+ if (changes['dropdownClass'] && this.dropdown) {
108
+ this.dropdown.dropdownClass = this._dropdownClass;
109
+ this.dropdown._markForCheck();
110
+ }
111
+ }
112
+ ngOnDestroy() {
113
+ this._destroyed.next();
114
+ this._destroyed.complete();
115
+ this._closingActionsSubscription.unsubscribe();
116
+ this.close();
117
+ }
118
+ show() {
119
+ if (!this.dropdown)
120
+ return;
121
+ const overlayRef = this._overlay.create(this._getOverlayConfig());
122
+ const portal = new TemplatePortal(this.dropdown.template, this._viewContainerRef);
123
+ overlayRef.attach(portal);
124
+ this.overlayRef = overlayRef;
125
+ this._closingActionsSubscription = this._menuClosingActions().subscribe(() => this.close());
126
+ }
127
+ close() {
128
+ if (this.overlayRef && this.overlayRef.hasAttached())
129
+ this.overlayRef.detach();
130
+ }
131
+ _getOverlayConfig() {
132
+ const belowPosition = {
133
+ originX: 'start',
134
+ originY: 'bottom',
135
+ overlayX: 'start',
136
+ overlayY: 'top',
137
+ };
138
+ const abovePosition = {
139
+ originX: 'start',
140
+ originY: 'top',
141
+ overlayX: 'start',
142
+ overlayY: 'bottom',
143
+ // The overlay edge connected to the trigger should have squared corners, while
144
+ // the opposite end has rounded corners. We apply a CSS class to swap the
145
+ // border-radius based on the overlay position.
146
+ panelClass: 'mat-autocomplete-panel-above',
147
+ };
148
+ const positionStrategy = this._overlay
149
+ .position()
150
+ .flexibleConnectedTo(this._element)
151
+ .withLockedPosition()
152
+ .withPositions([belowPosition, abovePosition]);
153
+ return new OverlayConfig({
154
+ positionStrategy,
155
+ backdropClass: 'cdk-overlay-transparent-backdrop',
156
+ hasBackdrop: true,
157
+ });
158
+ }
159
+ /** Returns a stream that emits whenever an action that should close the menu occurs. */
160
+ _menuClosingActions() {
161
+ const backdrop = this.overlayRef.backdropClick();
162
+ const detachments = this.overlayRef.detachments();
163
+ return merge(backdrop, detachments).pipe(takeUntil(this._destroyed));
164
+ }
165
+ }
166
+ C3DropdownTrigger.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DropdownTrigger, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
167
+ C3DropdownTrigger.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", 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 });
168
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DropdownTrigger, decorators: [{
169
+ type: Directive,
170
+ args: [{
171
+ selector: '[c3Dropdown]',
172
+ exportAs: 'c3DropdownTrigger',
173
+ providers: [MAT_DROPDOWN_VALUE_ACCESSOR],
174
+ }]
175
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1$1.Overlay }, { type: i0.ViewContainerRef }]; }, propDecorators: { dropdown: [{
176
+ type: Input,
177
+ args: ['c3Dropdown']
178
+ }], dropdownDisabled: [{
179
+ type: Input,
180
+ args: ['c3DropdownDisabled']
181
+ }], dropdownClass: [{
182
+ type: Input,
183
+ args: ['c3DropdownClass']
184
+ }], onClick: [{
185
+ type: HostListener,
186
+ args: ['click']
187
+ }] } });
188
+
189
+ class C3DropdownModule {
190
+ }
191
+ C3DropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
192
+ C3DropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: C3DropdownModule, declarations: [C3DropdownComponent, C3DropdownTrigger], imports: [CommonModule, OverlayModule], exports: [C3DropdownComponent, C3DropdownTrigger] });
193
+ C3DropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DropdownModule, imports: [CommonModule, OverlayModule] });
194
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DropdownModule, decorators: [{
195
+ type: NgModule,
196
+ args: [{
197
+ imports: [CommonModule, OverlayModule],
198
+ declarations: [C3DropdownComponent, C3DropdownTrigger],
199
+ exports: [C3DropdownComponent, C3DropdownTrigger],
200
+ }]
201
+ }] });
202
+
203
+ class ConfirmDialogComponent {
204
+ constructor(dialogRef, data) {
205
+ this.dialogRef = dialogRef;
206
+ this.data = data;
207
+ }
208
+ onNoClick() {
209
+ this.dialogRef.close();
210
+ }
211
+ }
212
+ ConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
213
+ ConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: ConfirmDialogComponent, selector: "ConfirmDialogComponent", ngImport: i0, template: `
214
+ <mat-dialog-content>
215
+ <div [innerHtml]="data.text"></div>
216
+ </mat-dialog-content>
217
+ <mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
218
+ <button mat-button mat-dialog-close [color]="data.reject?.color">
219
+ {{ data.reject?.text }}
220
+ </button>
221
+ <button mat-button [color]="data.accept?.color" [mat-dialog-close]="true">
222
+ {{ data.accept?.text }}
223
+ </button>
224
+ </mat-dialog-actions>
225
+ `, 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"] }, { kind: "directive", type: i3.DefaultLayoutDirective, selector: " [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md], [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md], [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm], [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i3.DefaultLayoutAlignDirective, selector: " [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md], [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md], [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm], [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }] });
226
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
227
+ type: Component,
228
+ args: [{
229
+ selector: 'ConfirmDialogComponent',
230
+ template: `
231
+ <mat-dialog-content>
232
+ <div [innerHtml]="data.text"></div>
233
+ </mat-dialog-content>
234
+ <mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
235
+ <button mat-button mat-dialog-close [color]="data.reject?.color">
236
+ {{ data.reject?.text }}
237
+ </button>
238
+ <button mat-button [color]="data.accept?.color" [mat-dialog-close]="true">
239
+ {{ data.accept?.text }}
240
+ </button>
241
+ </mat-dialog-actions>
242
+ `,
243
+ }]
244
+ }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
245
+ type: Inject,
246
+ args: [MAT_DIALOG_DATA]
247
+ }] }]; } });
248
+
249
+ class C3PromptDialogComponent {
250
+ constructor(dialogRef, data, _fb) {
251
+ this.dialogRef = dialogRef;
252
+ this.data = data;
253
+ this._fb = _fb;
254
+ this.result = this._fb.control(data.defaultValue, data.validators);
255
+ }
256
+ onNoClick() {
257
+ this.dialogRef.close();
258
+ }
259
+ }
260
+ C3PromptDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3PromptDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
261
+ C3PromptDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: C3PromptDialogComponent, selector: "PrompDialogComponent", ngImport: i0, template: `
262
+ <div mat-dialog-title>{{ data.text }}</div>
263
+ <mat-dialog-content>
264
+ <mat-form-field>
265
+ <mat-label *ngIf="data.placeholder">{{ data.placeholder }}</mat-label>
266
+ <input
267
+ *ngIf="!data.multiline"
268
+ matInput
269
+ [formControl]="result"
270
+ (keydown.enter)="dialogRef.close(result.value)"
271
+ />
272
+ <textarea
273
+ *ngIf="data.multiline"
274
+ matInput
275
+ [formControl]="result"
276
+ cdkTextareaAutosize
277
+ ></textarea>
278
+ </mat-form-field>
279
+ </mat-dialog-content>
280
+ <mat-dialog-actions align="center">
281
+ <button mat-raised-button mat-dialog-close [class]="data.reject?.color">
282
+ {{ data.reject?.text }}
283
+ </button>
284
+ <button
285
+ mat-raised-button
286
+ [disabled]="result.invalid || (data.required && !result.value)"
287
+ [class]="data.accept?.color"
288
+ [mat-dialog-close]="result.value"
289
+ >
290
+ {{ data.accept?.text }}
291
+ </button>
292
+ </mat-dialog-actions>
293
+ `, 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"] }] });
294
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3PromptDialogComponent, decorators: [{
295
+ type: Component,
296
+ args: [{ selector: 'PrompDialogComponent', template: `
297
+ <div mat-dialog-title>{{ data.text }}</div>
298
+ <mat-dialog-content>
299
+ <mat-form-field>
300
+ <mat-label *ngIf="data.placeholder">{{ data.placeholder }}</mat-label>
301
+ <input
302
+ *ngIf="!data.multiline"
303
+ matInput
304
+ [formControl]="result"
305
+ (keydown.enter)="dialogRef.close(result.value)"
306
+ />
307
+ <textarea
308
+ *ngIf="data.multiline"
309
+ matInput
310
+ [formControl]="result"
311
+ cdkTextareaAutosize
312
+ ></textarea>
313
+ </mat-form-field>
314
+ </mat-dialog-content>
315
+ <mat-dialog-actions align="center">
316
+ <button mat-raised-button mat-dialog-close [class]="data.reject?.color">
317
+ {{ data.reject?.text }}
318
+ </button>
319
+ <button
320
+ mat-raised-button
321
+ [disabled]="result.invalid || (data.required && !result.value)"
322
+ [class]="data.accept?.color"
323
+ [mat-dialog-close]="result.value"
324
+ >
325
+ {{ data.accept?.text }}
326
+ </button>
327
+ </mat-dialog-actions>
328
+ `, styles: ["mat-form-field{width:100%}\n"] }]
329
+ }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
330
+ type: Inject,
331
+ args: [MAT_DIALOG_DATA]
332
+ }] }, { type: i2$1.FormBuilder }]; } });
333
+
334
+ class C3DialogEmbedChildComponent {
335
+ constructor(dialogRef, data, _cdr) {
336
+ this.dialogRef = dialogRef;
337
+ this.data = data;
338
+ this._cdr = _cdr;
339
+ }
340
+ ngAfterViewInit() {
341
+ this.createdComponent = this.target.createComponent(this.data.component);
342
+ this._cdr.detectChanges();
343
+ }
344
+ }
345
+ C3DialogEmbedChildComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DialogEmbedChildComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
346
+ C3DialogEmbedChildComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: C3DialogEmbedChildComponent, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<mat-dialog-content>
347
+ <ng-template #target></ng-template>
348
+ </mat-dialog-content>`, isInline: true, dependencies: [{ kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
349
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
350
+ type: Component,
351
+ args: [{ selector: 'C3DialogEmbedChildComponent', template: `<mat-dialog-content>
352
+ <ng-template #target></ng-template>
353
+ </mat-dialog-content>` }]
354
+ }], ctorParameters: function () { return [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
355
+ type: Inject,
356
+ args: [MAT_DIALOG_DATA]
357
+ }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { target: [{
358
+ type: ViewChild,
359
+ args: ['target', { read: ViewContainerRef }]
360
+ }] } });
361
+
362
+ class C3DialogService {
363
+ constructor(dialog) {
364
+ this.dialog = dialog;
365
+ }
366
+ confirm(data) {
367
+ return new Promise((resolve, reject) => {
368
+ const dialogRef = this.dialog.open(ConfirmDialogComponent, {
369
+ width: data.width || '250px',
370
+ data: {
371
+ text: data.text,
372
+ reject: {
373
+ color: data.reject && data.reject.color ? data.reject.color : undefined,
374
+ text: (data.reject && data.reject.text) || 'Annuler',
375
+ },
376
+ accept: {
377
+ color: (data.accept && data.accept.color) || 'primary',
378
+ text: (data.accept && data.accept.text) || 'Accepter',
379
+ },
380
+ },
381
+ });
382
+ dialogRef.afterClosed().subscribe(async (result) => {
383
+ if (result)
384
+ resolve(true);
385
+ else
386
+ resolve(false);
387
+ });
388
+ });
389
+ }
390
+ prompt(data) {
391
+ return new Promise((resolve, reject) => {
392
+ const dialogRef = this.dialog.open(C3PromptDialogComponent, {
393
+ width: data.width || '250px',
394
+ maxWidth: data.maxWidth || '100vw',
395
+ data: {
396
+ text: data.text,
397
+ defaultValue: data.defaultValue,
398
+ placeholder: data.placeholder,
399
+ multiline: data.multiline,
400
+ validators: data.validators,
401
+ required: data.required,
402
+ reject: {
403
+ color: data.reject && data.reject.color
404
+ ? data.reject.color
405
+ : undefined,
406
+ text: (data.reject && data.reject.text) || 'Annuler',
407
+ },
408
+ accept: {
409
+ color: (data.accept && data.accept.color) || 'primary',
410
+ text: (data.accept && data.accept.text) || 'Accepter',
411
+ },
412
+ },
413
+ });
414
+ dialogRef.afterClosed().subscribe(async (result) => {
415
+ if (result)
416
+ resolve(result);
417
+ else
418
+ resolve(false);
419
+ });
420
+ });
421
+ }
422
+ createDialgFromComponent(config) {
423
+ return this.dialog.open(C3DialogEmbedChildComponent, config);
424
+ }
425
+ }
426
+ C3DialogService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DialogService, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
427
+ C3DialogService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DialogService, providedIn: 'root' });
428
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DialogService, decorators: [{
429
+ type: Injectable,
430
+ args: [{
431
+ providedIn: 'root',
432
+ }]
433
+ }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; } });
434
+
435
+ class C3DialogModule {
436
+ }
437
+ C3DialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
438
+ C3DialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: C3DialogModule, declarations: [ConfirmDialogComponent,
439
+ C3PromptDialogComponent,
440
+ C3DialogEmbedChildComponent], imports: [CommonModule,
441
+ MatDialogModule,
442
+ MatButtonModule,
443
+ MatFormFieldModule,
444
+ MatInputModule,
445
+ FormsModule,
446
+ FlexLayoutModule,
447
+ ReactiveFormsModule] });
448
+ C3DialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DialogModule, providers: [C3DialogService], imports: [CommonModule,
449
+ MatDialogModule,
450
+ MatButtonModule,
451
+ MatFormFieldModule,
452
+ MatInputModule,
453
+ FormsModule,
454
+ FlexLayoutModule,
455
+ ReactiveFormsModule] });
456
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3DialogModule, decorators: [{
457
+ type: NgModule,
458
+ args: [{
459
+ declarations: [
460
+ ConfirmDialogComponent,
461
+ C3PromptDialogComponent,
462
+ C3DialogEmbedChildComponent,
463
+ ],
464
+ imports: [
465
+ CommonModule,
466
+ MatDialogModule,
467
+ MatButtonModule,
468
+ MatFormFieldModule,
469
+ MatInputModule,
470
+ FormsModule,
471
+ FlexLayoutModule,
472
+ ReactiveFormsModule,
473
+ ],
474
+ providers: [C3DialogService],
475
+ }]
476
+ }] });
477
+
478
+ class FullScreenDirective {
479
+ set fullscreenState(value) {
480
+ this._fullscreenState.next(value?.valueOf() || false);
481
+ }
482
+ set fullscreenStateSetter(value) {
483
+ this.fullscreenState = value;
484
+ }
485
+ constructor(el) {
486
+ this.el = el;
487
+ this._fullscreenState = new BehaviorSubject(false);
488
+ this._fullscreenState
489
+ .pipe(filter((value) => value !== null), skip(2), debounceTime(100))
490
+ .subscribe(() => {
491
+ this.defineState();
492
+ });
493
+ }
494
+ defineState() {
495
+ if (this._fullscreenState.getValue()) {
496
+ const element = this.el.nativeElement;
497
+ const requestMethod = element.requestFullscreen ||
498
+ element.webkitRequestFullScreen ||
499
+ element.mozRequestFullScreen ||
500
+ element.msRequestFullScreen;
501
+ if (requestMethod) {
502
+ // Native full screen.
503
+ requestMethod.call(element);
504
+ }
505
+ else {
506
+ console.log('FullScreen Request Method Not Supported on this browser.');
507
+ }
508
+ }
509
+ else {
510
+ const element = document;
511
+ const requestMethod = element.cancelFullscreen ||
512
+ element.webkitExitFullscreen ||
513
+ element.webkitCancelFullScreen ||
514
+ element.mozCancelFullScreen ||
515
+ element.msExitFullScreen;
516
+ if (requestMethod) {
517
+ // Native Cancel full screen.
518
+ requestMethod.call(element);
519
+ }
520
+ else {
521
+ console.log('FullScreen Cancel Request Method Not Supported on this browser.');
522
+ }
523
+ }
524
+ }
525
+ }
526
+ FullScreenDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FullScreenDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
527
+ FullScreenDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.8", type: FullScreenDirective, selector: "[C3FullScreen], [c3-full-screen]", inputs: { fullscreenState: ["c3Screenfull", "fullscreenState"], fullscreenStateSetter: ["c3-full-screen", "fullscreenStateSetter"] }, ngImport: i0 });
528
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: FullScreenDirective, decorators: [{
529
+ type: Directive,
530
+ args: [{
531
+ selector: '[C3FullScreen], [c3-full-screen]',
532
+ }]
533
+ }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { fullscreenState: [{
534
+ type: Input,
535
+ args: ['c3Screenfull']
536
+ }], fullscreenStateSetter: [{
537
+ type: Input,
538
+ args: ['c3-full-screen']
539
+ }] } });
540
+
541
+ class C3FileViewerActionsComponent {
542
+ get config() {
543
+ return this.fileViewer.config;
544
+ }
545
+ }
546
+ C3FileViewerActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
547
+ C3FileViewerActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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"] }] });
548
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
549
+ type: Component,
550
+ 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" }]
551
+ }], propDecorators: { fileViewer: [{
552
+ type: Input
553
+ }] } });
554
+
555
+ class C3SafeUrlPipe {
556
+ constructor(sanitizer) {
557
+ this.sanitizer = sanitizer;
558
+ }
559
+ transform(url) {
560
+ return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : '';
561
+ }
562
+ }
563
+ C3SafeUrlPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3SafeUrlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
564
+ C3SafeUrlPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: C3SafeUrlPipe, isStandalone: true, name: "c3SafeUrl" });
565
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3SafeUrlPipe, decorators: [{
566
+ type: Pipe,
567
+ args: [{
568
+ name: 'c3SafeUrl',
569
+ standalone: true,
570
+ }]
571
+ }], ctorParameters: function () { return [{ type: i1$3.DomSanitizer }]; } });
572
+
573
+ class C3FileViewerImageComponent {
574
+ constructor() {
575
+ this.dragstart = new EventEmitter();
576
+ }
577
+ }
578
+ C3FileViewerImageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
579
+ C3FileViewerImageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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" }] });
580
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerImageComponent, decorators: [{
581
+ type: Component,
582
+ 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" }]
583
+ }], propDecorators: { fileViewer: [{
584
+ type: Input
585
+ }], dragstart: [{
586
+ type: Output
587
+ }] } });
588
+
589
+ class C3FileViewerPdfComponent {
590
+ constructor() {
591
+ this.dragstart = new EventEmitter();
592
+ }
593
+ }
594
+ C3FileViewerPdfComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
595
+ C3FileViewerPdfComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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 });
596
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerPdfComponent, decorators: [{
597
+ type: Component,
598
+ args: [{ selector: 'c3-file-viewer-pdf', encapsulation: ViewEncapsulation.None, host: {
599
+ style: 'display: block',
600
+ class: 'c3-file-viewer-pdf',
601
+ }, 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" }]
602
+ }], propDecorators: { fileViewer: [{
603
+ type: Input
604
+ }], dragstart: [{
605
+ type: Output
606
+ }] } });
607
+
608
+ class C3FileViewerVideoComponent {
609
+ set _srcUpdated({ location }) {
610
+ this.src$.next(location);
611
+ }
612
+ constructor() {
613
+ this.src = '';
614
+ this.src$ = new Subject();
615
+ this.src$
616
+ .pipe(mergeMap((src) => this.fileViewer.getFile(src)), filter((blob) => blob.type.startsWith('application/pdf')), tap((blob) => (this.src = URL.createObjectURL(blob))))
617
+ .subscribe({
618
+ next: () => null,
619
+ error: (error) => {
620
+ console.log(error);
621
+ },
622
+ });
623
+ }
624
+ }
625
+ C3FileViewerVideoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
626
+ C3FileViewerVideoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: C3FileViewerVideoComponent, selector: "c3-file-viewer-video", inputs: { _srcUpdated: ["file", "_srcUpdated"], fileViewer: "fileViewer" }, ngImport: i0, template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" });
627
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
628
+ type: Component,
629
+ args: [{ selector: 'c3-file-viewer-video', template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }]
630
+ }], ctorParameters: function () { return []; }, propDecorators: { _srcUpdated: [{
631
+ type: Input,
632
+ args: ['file']
633
+ }], fileViewer: [{
634
+ type: Input
635
+ }] } });
636
+
637
+ class C3FileViewerComponent {
638
+ constructor(moduleConfig, _http) {
639
+ this.moduleConfig = moduleConfig;
640
+ this._http = _http;
641
+ this.indexChange = new EventEmitter();
642
+ this.configChange = new EventEmitter();
643
+ this.customFileEvent = new EventEmitter();
644
+ }
645
+ ngOnInit() {
646
+ this.defineStyleHeight();
647
+ this.fileViewer.customFile$.subscribe((event) => {
648
+ this.customFileEvent.emit(event);
649
+ });
650
+ this.fileViewer.index$.subscribe((index) => {
651
+ this.indexChange.emit(index);
652
+ });
653
+ this.fileViewer.config$.subscribe((config) => {
654
+ this.configChange.emit(config);
655
+ });
656
+ }
657
+ onMouseOver() {
658
+ this.fileViewer.hovered = true;
659
+ }
660
+ onMouseLeave() {
661
+ this.fileViewer.hovered = false;
662
+ }
663
+ ngOnChanges(changes) {
664
+ if (changes['screenHeightOccupied'] && this.fileViewer)
665
+ this.defineStyleHeight();
666
+ }
667
+ next(event) {
668
+ this.fileViewer.nextImage(event);
669
+ }
670
+ previous(event) {
671
+ this.fileViewer.previousImage(event);
672
+ }
673
+ defineStyleHeight() {
674
+ this.fileViewer.styleHeight =
675
+ 'calc(100% - ' + this.screenHeightOccupied + 'px)';
676
+ }
677
+ }
678
+ C3FileViewerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerComponent, deps: [{ token: 'config', optional: true }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
679
+ C3FileViewerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", 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 });
680
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerComponent, decorators: [{
681
+ type: Component,
682
+ args: [{ selector: 'c3-file-viewer', encapsulation: ViewEncapsulation.None, host: {
683
+ class: 'c3-file-viewer',
684
+ }, 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" }]
685
+ }], ctorParameters: function () { return [{ type: undefined, decorators: [{
686
+ type: Optional
687
+ }, {
688
+ type: Inject,
689
+ args: ['config']
690
+ }] }, { type: i1$4.HttpClient }]; }, propDecorators: { screenHeightOccupied: [{
691
+ type: Input
692
+ }], fileViewer: [{
693
+ type: Input
694
+ }], indexChange: [{
695
+ type: Output
696
+ }], configChange: [{
697
+ type: Output
698
+ }], customFileEvent: [{
699
+ type: Output
700
+ }], onMouseOver: [{
701
+ type: HostListener,
702
+ args: ['mouseover']
703
+ }], onMouseLeave: [{
704
+ type: HostListener,
705
+ args: ['mouseleave']
706
+ }], next: [{
707
+ type: HostListener,
708
+ args: ['window:keyup.ArrowRight', ['$event']]
709
+ }], previous: [{
710
+ type: HostListener,
711
+ args: ['window:keyup.ArrowLeft', ['$event']]
712
+ }] } });
713
+
714
+ const DEFAULT_CONFIG = {
715
+ btnContainerClass: 'btn-container',
716
+ btnClass: 'default',
717
+ btnSubClass: 'material-icons',
718
+ zoomFactor: 0.1,
719
+ containerBackgroundColor: '#00000000',
720
+ wheelZoom: false,
721
+ allowFullscreen: true,
722
+ allowKeyboardNavigation: true,
723
+ btnShow: {
724
+ zoomIn: true,
725
+ zoomOut: true,
726
+ rotateClockwise: true,
727
+ rotateCounterClockwise: true,
728
+ next: true,
729
+ prev: true,
730
+ reset: true,
731
+ },
732
+ btnIcons: {
733
+ zoomIn: {
734
+ text: 'zoom_in',
735
+ },
736
+ zoomOut: {
737
+ text: 'zoom_out',
738
+ },
739
+ rotateClockwise: {
740
+ text: 'rotate_right',
741
+ },
742
+ rotateCounterClockwise: {
743
+ text: 'rotate_left',
744
+ },
745
+ fullscreen: {
746
+ text: 'fullscreen',
747
+ },
748
+ reset: {
749
+ text: 'restore',
750
+ },
751
+ },
752
+ };
753
+
754
+ class CustomFileEvent {
755
+ constructor(name, fileUrl) {
756
+ this.name = name;
757
+ this.fileUrl = fileUrl;
758
+ }
759
+ }
760
+
761
+ class C3FileViewer {
762
+ get config() {
763
+ return this._config;
764
+ }
765
+ set config(value) {
766
+ this._config = this.mergeConfig(DEFAULT_CONFIG, value);
767
+ this.config$.next(this._config);
768
+ }
769
+ get currentFile() {
770
+ return this.filesObjectUrl[this.currentIndex];
771
+ }
772
+ set files(value) {
773
+ this._files = value;
774
+ this.currentIndex = 0;
775
+ this.index$.next(this.currentIndex);
776
+ this.filesObjectUrl = value.map((file) => {
777
+ return {
778
+ ...file,
779
+ objectUrl: file.objectUrl || this.createObjectURL(file),
780
+ };
781
+ });
782
+ }
783
+ get files() {
784
+ return this._files;
785
+ }
786
+ constructor({ config, files, }) {
787
+ this._config = DEFAULT_CONFIG;
788
+ this.config$ = new BehaviorSubject(DEFAULT_CONFIG);
789
+ this.fullscreen$ = new BehaviorSubject(false);
790
+ this.customFile$ = new BehaviorSubject(null);
791
+ this.index$ = new BehaviorSubject(0);
792
+ this.loading = true;
793
+ this.currentIndex = 0;
794
+ this.style = {
795
+ transform: '',
796
+ msTransform: '',
797
+ oTransform: '',
798
+ webkitTransform: '',
799
+ minHeight: 'auto',
800
+ maxHeight: 'auto',
801
+ height: 'auto',
802
+ minWidth: 'auto',
803
+ maxWidth: 'auto',
804
+ width: 'auto',
805
+ };
806
+ this.styleHeight = '100%';
807
+ this.hovered = false;
808
+ this._files = [];
809
+ this.filesObjectUrl = [];
810
+ this.scale = 1;
811
+ this.rotation = 0;
812
+ this.translateX = 0;
813
+ this.translateY = 0;
814
+ this.prevX = 0;
815
+ this.prevY = 0;
816
+ if (config)
817
+ this.config = config;
818
+ if (files)
819
+ this.files = files;
820
+ this.config$.subscribe((config) => {
821
+ const { minHeight, maxHeight, minWidth, maxWidth, height, width } = config;
822
+ this.style.minHeight = this.valueToCss(minHeight);
823
+ this.style.height = this.valueToCss(height);
824
+ this.style.width = this.valueToCss(width);
825
+ this.style.maxHeight = this.valueToCss(maxHeight);
826
+ this.style.minWidth = this.valueToCss(minWidth);
827
+ this.style.maxWidth = this.valueToCss(maxWidth);
828
+ this.styleHeight = this.valueToCss(height);
829
+ this.updateStyle();
830
+ });
831
+ }
832
+ createObjectURL(file) {
833
+ this.onLoadStart(file);
834
+ return this.getFile(file.location).pipe(map((response) => URL.createObjectURL(response)), tap(() => this.onLoad(file)));
835
+ }
836
+ getFile(location) {
837
+ const client = this.config.customClient ||
838
+ inject(HttpClient).get.bind(inject(HttpClient));
839
+ if (!client) {
840
+ throw new Error('No http client provided. Please provide a custom client or import HttpClientModule');
841
+ }
842
+ return client(location, {
843
+ responseType: 'blob',
844
+ });
845
+ }
846
+ previousImage(event) {
847
+ if (this.canNavigate(event)) {
848
+ this.loading = true;
849
+ if (this.currentIndex > 0)
850
+ this.currentIndex--;
851
+ else
852
+ this.currentIndex = this.files.length - 1;
853
+ this.index$.next(this.currentIndex);
854
+ this.reset();
855
+ }
856
+ }
857
+ nextImage(event) {
858
+ if (this.canNavigate(event)) {
859
+ this.loading = true;
860
+ if (this.currentIndex < this.files.length - 1)
861
+ this.currentIndex++;
862
+ else
863
+ this.currentIndex = 0;
864
+ this.index$.next(this.currentIndex);
865
+ this.reset();
866
+ }
867
+ }
868
+ zoomIn() {
869
+ this.scale *= 1 + (this.config.zoomFactor || 0);
870
+ this.updateStyle();
871
+ }
872
+ zoomOut() {
873
+ if (this.scale > (this.config.zoomFactor || 0)) {
874
+ this.scale /= 1 + (this.config.zoomFactor || 0);
875
+ }
876
+ this.updateStyle();
877
+ }
878
+ scrollZoom(evt) {
879
+ if (this.config.wheelZoom) {
880
+ evt.deltaY > 0 ? this.zoomOut() : this.zoomIn();
881
+ return false;
882
+ }
883
+ else {
884
+ return true;
885
+ }
886
+ }
887
+ rotateClockwise() {
888
+ this.rotation += 90;
889
+ this.updateStyle();
890
+ }
891
+ rotateCounterClockwise() {
892
+ this.rotation -= 90;
893
+ this.updateStyle();
894
+ }
895
+ onLoad(file) {
896
+ this.loading = false;
897
+ }
898
+ onLoadStart(file) {
899
+ this.loading = true;
900
+ }
901
+ imageNotFound(file) {
902
+ this.loading = false;
903
+ this.customFile$.next(new CustomFileEvent('imageNotFound', file.location));
904
+ }
905
+ onDragOver(evt) {
906
+ this.translateX += evt.clientX - this.prevX;
907
+ this.translateY += evt.clientY - this.prevY;
908
+ this.prevX = evt.clientX;
909
+ this.prevY = evt.clientY;
910
+ this.updateStyle();
911
+ }
912
+ onDragStart(evt) {
913
+ if (evt.target && evt.dataTransfer && evt.dataTransfer.setDragImage) {
914
+ const target = evt.target;
915
+ const nextElementSibling = target.nextElementSibling;
916
+ if (nextElementSibling)
917
+ evt.dataTransfer.setDragImage(nextElementSibling, 0, 0);
918
+ }
919
+ this.prevX = evt.clientX;
920
+ this.prevY = evt.clientY;
921
+ }
922
+ toggleFullscreen() {
923
+ const fullScreenValue = this.fullscreen$.getValue();
924
+ this.fullscreen$.next(!fullScreenValue);
925
+ if (fullScreenValue)
926
+ this.reset();
927
+ }
928
+ reset() {
929
+ this.scale = 1;
930
+ this.rotation = 0;
931
+ this.translateX = 0;
932
+ this.translateY = 0;
933
+ this.updateStyle();
934
+ }
935
+ canNavigate(event) {
936
+ return (event == null || (this.config.allowKeyboardNavigation && this.hovered));
937
+ }
938
+ updateStyle() {
939
+ this.style.transform = `translate(${this.translateX}px, ${this.translateY}px) rotate(${this.rotation}deg) scale(${this.scale})`;
940
+ this.style.msTransform = this.style.transform;
941
+ this.style.webkitTransform = this.style.transform;
942
+ this.style.oTransform = this.style.transform;
943
+ }
944
+ valueToCss(value) {
945
+ return value ? (typeof value === 'string' ? value : value + 'px') : 'auto';
946
+ }
947
+ mergeConfig(defaultValues, overrideValues) {
948
+ let result = { ...defaultValues };
949
+ if (overrideValues) {
950
+ result = { ...defaultValues, ...overrideValues };
951
+ if (overrideValues.btnIcons) {
952
+ result.btnIcons = {
953
+ ...defaultValues.btnIcons,
954
+ ...overrideValues.btnIcons,
955
+ };
956
+ }
957
+ }
958
+ return result;
959
+ }
960
+ }
961
+
962
+ class C3FileViewerDialog {
963
+ constructor(fileViewer) {
964
+ this.fileViewer = fileViewer;
965
+ }
966
+ }
967
+ C3FileViewerDialog.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerDialog, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
968
+ C3FileViewerDialog.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: C3FileViewerDialog, selector: "ng-component", ngImport: i0, template: "<c3-file-viewer [fileViewer]=\"fileViewer\" [screenHeightOccupied]=\"0\" />\n", styles: [""], dependencies: [{ kind: "component", type: C3FileViewerComponent, selector: "c3-file-viewer", inputs: ["screenHeightOccupied", "fileViewer"], outputs: ["indexChange", "configChange", "customFileEvent"] }] });
969
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerDialog, decorators: [{
970
+ type: Component,
971
+ args: [{ template: "<c3-file-viewer [fileViewer]=\"fileViewer\" [screenHeightOccupied]=\"0\" />\n" }]
972
+ }], ctorParameters: function () { return [{ type: C3FileViewer, decorators: [{
973
+ type: Inject,
974
+ args: [MAT_DIALOG_DATA]
975
+ }] }]; } });
976
+
977
+ class C3FileViewerDialogComponent {
978
+ constructor(_dialog) {
979
+ this._dialog = _dialog;
980
+ this.dialogConfig = {
981
+ panelClass: 'c3-file-viewer-dialog',
982
+ width: '80%',
983
+ height: '80%',
984
+ };
985
+ }
986
+ openDialog() {
987
+ this._dialog.open(C3FileViewerDialog, {
988
+ data: this.fileViewer,
989
+ ...this.dialogConfig,
990
+ });
991
+ }
992
+ }
993
+ C3FileViewerDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerDialogComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
994
+ C3FileViewerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.8", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: { fileViewer: "fileViewer", dialogConfig: "dialogConfig" }, host: { listeners: { "click": "openDialog()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [""] });
995
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerDialogComponent, decorators: [{
996
+ type: Component,
997
+ args: [{ selector: 'c3-file-viewer-dialog', template: "<ng-content></ng-content>\n" }]
998
+ }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; }, propDecorators: { fileViewer: [{
999
+ type: Input
1000
+ }], dialogConfig: [{
1001
+ type: Input
1002
+ }], openDialog: [{
1003
+ type: HostListener,
1004
+ args: ['click']
1005
+ }] } });
1006
+
1007
+ class C3FileViewerModule {
1008
+ }
1009
+ C3FileViewerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1010
+ C3FileViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerModule, declarations: [FullScreenDirective,
1011
+ C3FileViewerComponent,
1012
+ C3FileViewerActionsComponent,
1013
+ C3FileViewerImageComponent,
1014
+ C3FileViewerPdfComponent,
1015
+ C3FileViewerVideoComponent,
1016
+ C3FileViewerDialogComponent,
1017
+ C3FileViewerDialog], imports: [CommonModule, HttpClientModule, C3SafeUrlPipe, MatDialogModule], exports: [FullScreenDirective,
1018
+ C3FileViewerComponent,
1019
+ C3FileViewerDialogComponent] });
1020
+ C3FileViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerModule, imports: [CommonModule, HttpClientModule, MatDialogModule] });
1021
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerModule, decorators: [{
1022
+ type: NgModule,
1023
+ args: [{
1024
+ providers: [],
1025
+ declarations: [
1026
+ FullScreenDirective,
1027
+ C3FileViewerComponent,
1028
+ C3FileViewerActionsComponent,
1029
+ C3FileViewerImageComponent,
1030
+ C3FileViewerPdfComponent,
1031
+ C3FileViewerVideoComponent,
1032
+ C3FileViewerDialogComponent,
1033
+ C3FileViewerDialog,
1034
+ ],
1035
+ imports: [CommonModule, HttpClientModule, C3SafeUrlPipe, MatDialogModule],
1036
+ exports: [
1037
+ FullScreenDirective,
1038
+ C3FileViewerComponent,
1039
+ C3FileViewerDialogComponent,
1040
+ ],
1041
+ }]
1042
+ }] });
1043
+
1044
+ /*
1045
+ * Public API Surface of c3-components
1046
+ */
1047
+
1048
+ /**
1049
+ * Generated bundle index. Do not edit.
1050
+ */
1051
+
1052
+ export { C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3FileViewer, C3FileViewerComponent, C3FileViewerDialogComponent, C3FileViewerModule, C3PromptDialogComponent, C3SafeUrlPipe, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR };
1053
+ //# sourceMappingURL=c3-components.mjs.map