c3-components 0.0.4 → 0.0.5

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 (127) hide show
  1. package/CONTRIBUTING.md +80 -0
  2. package/_index.scss +3 -0
  3. package/ng-package.json +19 -0
  4. package/package.json +8 -20
  5. package/src/lib/c3-dialog/c3-dialog.module.ts +30 -0
  6. package/src/lib/c3-dialog/components/c3-dialog-confirm.component.ts +44 -0
  7. package/src/lib/c3-dialog/components/c3-dialog-embed-child.component.ts +40 -0
  8. package/src/lib/c3-dialog/components/c3-dialog-prompt.component.ts +81 -0
  9. package/src/lib/c3-dialog/services/c3-dialog.service.ts +87 -0
  10. package/src/lib/c3-dropdown/c3-dropdown.module.ts +12 -0
  11. package/src/lib/c3-dropdown/components/c3-dropdown.component.spec.ts +22 -0
  12. package/src/lib/c3-dropdown/components/c3-dropdown.component.ts +39 -0
  13. package/src/lib/c3-dropdown/directives/c3-dropdown.trigger.ts +161 -0
  14. package/src/lib/c3-file/c3-download/c3-download.module.ts +10 -0
  15. package/src/lib/c3-file/c3-download/c3-download.service.ts +16 -0
  16. package/src/lib/c3-file/c3-input-file/c3-input-file.module.ts +30 -0
  17. package/src/lib/c3-file/c3-input-file/class/c3-input-file.ts +62 -0
  18. package/src/lib/c3-file/c3-input-file/components/c3-input-file/c3-input-file.component.html +7 -0
  19. package/src/lib/c3-file/c3-input-file/components/c3-input-file/c3-input-file.component.ts +96 -0
  20. package/src/lib/c3-file/c3-input-file/components/c3-input-file-container/c3-input-file-container.component.ts +53 -0
  21. package/src/lib/c3-file/c3-input-file/components/c3-input-file-displayer/c3-input-file-displayer.component.ts +107 -0
  22. package/src/lib/c3-file/c3-input-file/components/c3-input-file-trigger/c3-input-file-trigger.component.ts +22 -0
  23. package/src/lib/c3-file/c3-input-file/directives/c3-input-file-trigger.directive.ts +27 -0
  24. package/src/lib/c3-file-upload/c3-file-upload.module.ts +8 -0
  25. package/src/lib/c3-file-viewer/c3-file-viewer.module.ts +34 -0
  26. package/src/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.html +185 -0
  27. package/src/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.spec.ts +23 -0
  28. package/src/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.ts +15 -0
  29. package/src/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.html +7 -0
  30. package/src/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.spec.ts +23 -0
  31. package/src/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.ts +14 -0
  32. package/src/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.html +7 -0
  33. package/src/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.spec.ts +23 -0
  34. package/src/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.ts +25 -0
  35. package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.css +0 -0
  36. package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.html +1 -0
  37. package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.spec.ts +23 -0
  38. package/src/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.ts +35 -0
  39. package/src/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.html +32 -0
  40. package/src/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.spec.ts +23 -0
  41. package/src/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.ts +93 -0
  42. package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.spec.ts +23 -0
  43. package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.ts +34 -0
  44. package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.spec.ts +22 -0
  45. package/src/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.ts +12 -0
  46. package/src/lib/c3-file-viewer/consts/default.config.ts +41 -0
  47. package/src/lib/c3-file-viewer/directives/full-screen.directive.spec.ts +11 -0
  48. package/src/lib/c3-file-viewer/directives/full-screen.directive.ts +68 -0
  49. package/src/lib/c3-file-viewer/models/custom-file-event.model.ts +9 -0
  50. package/src/lib/c3-file-viewer/models/file-metadata.ts +13 -0
  51. package/src/lib/c3-file-viewer/models/file-viewer-config.model.ts +53 -0
  52. package/src/lib/c3-file-viewer/models/file-viewer.ts +259 -0
  53. package/src/lib/c3-file-viewer/models/http.client.ts +23 -0
  54. package/src/lib/c3-highlight-text/c3-highlight-text.module.ts +12 -0
  55. package/src/lib/c3-menu/c3-menu.module.ts +12 -0
  56. package/src/lib/c3-modal/c3-modal.module.ts +12 -0
  57. package/src/lib/c3-navbar/c3-navbar.module.ts +12 -0
  58. package/src/lib/c3-pdf-dialog/c3-pdf-dialog.module.ts +12 -0
  59. package/src/lib/c3-rounded-title/c3-rounded-title.module.ts +12 -0
  60. package/src/lib/c3-safe-url/pipes/c3-safe-url.pipe.spec.ts +8 -0
  61. package/src/lib/c3-safe-url/pipes/c3-safe-url.pipe.ts +13 -0
  62. package/src/lib/c3-tabs/c3-tabs.module.ts +12 -0
  63. package/{public-api.d.ts → src/public-api.ts} +8 -0
  64. package/tailwind.config.js +8 -0
  65. package/tsconfig.lib.json +14 -0
  66. package/tsconfig.lib.prod.json +10 -0
  67. package/tsconfig.spec.json +14 -0
  68. package/esm2020/c3-components.mjs +0 -5
  69. package/esm2020/lib/c3-dialog/c3-dialog.module.mjs +0 -56
  70. package/esm2020/lib/c3-dialog/components/c3-dialog-confirm.component.mjs +0 -52
  71. package/esm2020/lib/c3-dialog/components/c3-dialog-embed-child.component.mjs +0 -32
  72. package/esm2020/lib/c3-dialog/components/c3-dialog-prompt.component.mjs +0 -95
  73. package/esm2020/lib/c3-dialog/services/c3-dialog.service.mjs +0 -79
  74. package/esm2020/lib/c3-dropdown/c3-dropdown.module.mjs +0 -20
  75. package/esm2020/lib/c3-dropdown/components/c3-dropdown.component.mjs +0 -45
  76. package/esm2020/lib/c3-dropdown/directives/c3-dropdown.trigger.mjs +0 -128
  77. package/esm2020/lib/c3-file-viewer/c3-file-viewer.module.mjs +0 -51
  78. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.mjs +0 -17
  79. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.mjs +0 -20
  80. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.mjs +0 -23
  81. package/esm2020/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.mjs +0 -32
  82. package/esm2020/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.mjs +0 -86
  83. package/esm2020/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.mjs +0 -37
  84. package/esm2020/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.mjs +0 -26
  85. package/esm2020/lib/c3-file-viewer/consts/default.config.mjs +0 -40
  86. package/esm2020/lib/c3-file-viewer/directives/full-screen.directive.mjs +0 -66
  87. package/esm2020/lib/c3-file-viewer/models/custom-file-event.model.mjs +0 -7
  88. package/esm2020/lib/c3-file-viewer/models/file-metadata.mjs +0 -2
  89. package/esm2020/lib/c3-file-viewer/models/file-viewer-config.model.mjs +0 -2
  90. package/esm2020/lib/c3-file-viewer/models/file-viewer.mjs +0 -206
  91. package/esm2020/lib/c3-file-viewer/models/http.client.mjs +0 -2
  92. package/esm2020/lib/c3-safe-url/pipes/c3-safe-url.pipe.mjs +0 -21
  93. package/esm2020/public-api.mjs +0 -35
  94. package/fesm2015/c3-components.mjs +0 -1064
  95. package/fesm2015/c3-components.mjs.map +0 -1
  96. package/fesm2020/c3-components.mjs +0 -1062
  97. package/fesm2020/c3-components.mjs.map +0 -1
  98. package/index.d.ts +0 -5
  99. package/lib/c3-dialog/c3-dialog.module.d.ts +0 -16
  100. package/lib/c3-dialog/components/c3-dialog-confirm.component.d.ts +0 -23
  101. package/lib/c3-dialog/components/c3-dialog-embed-child.component.d.ts +0 -18
  102. package/lib/c3-dialog/components/c3-dialog-prompt.component.d.ts +0 -31
  103. package/lib/c3-dialog/services/c3-dialog.service.d.ts +0 -19
  104. package/lib/c3-dropdown/c3-dropdown.module.d.ts +0 -10
  105. package/lib/c3-dropdown/components/c3-dropdown.component.d.ts +0 -15
  106. package/lib/c3-dropdown/directives/c3-dropdown.trigger.d.ts +0 -45
  107. package/lib/c3-file-viewer/c3-file-viewer.module.d.ts +0 -18
  108. package/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.d.ts +0 -8
  109. package/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.d.ts +0 -9
  110. package/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.d.ts +0 -9
  111. package/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.d.ts +0 -12
  112. package/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.d.ts +0 -25
  113. package/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.d.ts +0 -12
  114. package/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.d.ts +0 -8
  115. package/lib/c3-file-viewer/consts/default.config.d.ts +0 -2
  116. package/lib/c3-file-viewer/directives/full-screen.directive.d.ts +0 -12
  117. package/lib/c3-file-viewer/models/custom-file-event.model.d.ts +0 -5
  118. package/lib/c3-file-viewer/models/file-metadata.d.ts +0 -12
  119. package/lib/c3-file-viewer/models/file-viewer-config.model.d.ts +0 -48
  120. package/lib/c3-file-viewer/models/file-viewer.d.ts +0 -65
  121. package/lib/c3-file-viewer/models/http.client.d.ts +0 -14
  122. package/lib/c3-safe-url/pipes/c3-safe-url.pipe.d.ts +0 -10
  123. /package/{lib → src/lib}/c3-dropdown/styles/_c3-dropdown.sass +0 -0
  124. /package/{lib → src/lib}/c3-file-viewer/styles/_c3-file-viewer.sass +0 -0
  125. /package/{lib → src/lib}/c3-styles/_c3-core.sass +0 -0
  126. /package/{lib → src/lib}/c3-styles/_c3-root-variables.sass +0 -0
  127. /package/{lib → src/lib}/c3-styles/_utils.sass +0 -0
@@ -1,1062 +0,0 @@
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: `
969
- <c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
970
- `, isInline: true, dependencies: [{ kind: "component", type: C3FileViewerComponent, selector: "c3-file-viewer", inputs: ["screenHeightOccupied", "fileViewer"], outputs: ["indexChange", "configChange", "customFileEvent"] }] });
971
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerDialog, decorators: [{
972
- type: Component,
973
- args: [{
974
- template: `
975
- <c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
976
- `,
977
- }]
978
- }], ctorParameters: function () { return [{ type: C3FileViewer, decorators: [{
979
- type: Inject,
980
- args: [MAT_DIALOG_DATA]
981
- }] }]; } });
982
-
983
- class C3FileViewerDialogComponent {
984
- constructor(_dialog) {
985
- this._dialog = _dialog;
986
- this.dialogConfig = {
987
- panelClass: 'c3-file-viewer-dialog',
988
- width: '80%',
989
- height: '80%',
990
- };
991
- }
992
- openDialog() {
993
- this._dialog.open(C3FileViewerDialog, {
994
- data: this.fileViewer,
995
- ...this.dialogConfig,
996
- });
997
- }
998
- }
999
- 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 });
1000
- 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 /> `, isInline: true });
1001
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerDialogComponent, decorators: [{
1002
- type: Component,
1003
- args: [{
1004
- selector: 'c3-file-viewer-dialog',
1005
- template: ` <ng-content /> `,
1006
- }]
1007
- }], ctorParameters: function () { return [{ type: i1$2.MatDialog }]; }, propDecorators: { fileViewer: [{
1008
- type: Input
1009
- }], dialogConfig: [{
1010
- type: Input
1011
- }], openDialog: [{
1012
- type: HostListener,
1013
- args: ['click']
1014
- }] } });
1015
-
1016
- class C3FileViewerModule {
1017
- }
1018
- C3FileViewerModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1019
- C3FileViewerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerModule, declarations: [FullScreenDirective,
1020
- C3FileViewerComponent,
1021
- C3FileViewerActionsComponent,
1022
- C3FileViewerImageComponent,
1023
- C3FileViewerPdfComponent,
1024
- C3FileViewerVideoComponent,
1025
- C3FileViewerDialogComponent,
1026
- C3FileViewerDialog], imports: [CommonModule, HttpClientModule, C3SafeUrlPipe, MatDialogModule], exports: [FullScreenDirective,
1027
- C3FileViewerComponent,
1028
- C3FileViewerDialogComponent] });
1029
- C3FileViewerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerModule, imports: [CommonModule, HttpClientModule, MatDialogModule] });
1030
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.8", ngImport: i0, type: C3FileViewerModule, decorators: [{
1031
- type: NgModule,
1032
- args: [{
1033
- providers: [],
1034
- declarations: [
1035
- FullScreenDirective,
1036
- C3FileViewerComponent,
1037
- C3FileViewerActionsComponent,
1038
- C3FileViewerImageComponent,
1039
- C3FileViewerPdfComponent,
1040
- C3FileViewerVideoComponent,
1041
- C3FileViewerDialogComponent,
1042
- C3FileViewerDialog,
1043
- ],
1044
- imports: [CommonModule, HttpClientModule, C3SafeUrlPipe, MatDialogModule],
1045
- exports: [
1046
- FullScreenDirective,
1047
- C3FileViewerComponent,
1048
- C3FileViewerDialogComponent,
1049
- ],
1050
- }]
1051
- }] });
1052
-
1053
- /*
1054
- * Public API Surface of c3-components
1055
- */
1056
-
1057
- /**
1058
- * Generated bundle index. Do not edit.
1059
- */
1060
-
1061
- export { C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3PromptDialogComponent, C3SafeUrlPipe, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR };
1062
- //# sourceMappingURL=c3-components.mjs.map