c3-components 0.2.1 → 0.2.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.
- package/esm2022/lib/c3-auto-animate/c3-auto-animate.directive.mjs +3 -3
- package/esm2022/lib/c3-dialog/c3-dialog.module.mjs +4 -4
- package/esm2022/lib/c3-dialog/components/c3-dialog-confirm.component.mjs +3 -3
- package/esm2022/lib/c3-dialog/components/c3-dialog-embed-child.component.mjs +16 -8
- package/esm2022/lib/c3-dialog/components/c3-dialog-prompt.component.mjs +3 -3
- package/esm2022/lib/c3-dialog/services/c3-dialog.service.mjs +3 -3
- package/esm2022/lib/c3-dropdown/c3-dropdown.module.mjs +4 -4
- package/esm2022/lib/c3-dropdown/components/c3-dropdown.component.mjs +3 -3
- package/esm2022/lib/c3-dropdown/directives/c3-dropdown.trigger.mjs +3 -3
- package/esm2022/lib/c3-expansion/c3-expansion.module.mjs +4 -4
- package/esm2022/lib/c3-expansion/components/c3-expansion/c3-expansion.component.mjs +3 -3
- package/esm2022/lib/c3-expansion/components/c3-expansion-header/c3-expansion-header.component.mjs +3 -3
- package/esm2022/lib/c3-file-displayer/c3-file-display-card/c3-file-display-card.component.mjs +32 -10
- package/esm2022/lib/c3-file-displayer/c3-file-display-grid/c3-file-display-grid.component.mjs +5 -4
- package/esm2022/lib/c3-file-displayer/c3-file-display-icon/c3-file-display-icon.component.mjs +3 -3
- package/esm2022/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list.component.mjs +6 -5
- package/esm2022/lib/c3-file-displayer/c3-file-displayer.module.mjs +4 -4
- package/esm2022/lib/c3-file-viewer/c3-file-viewer.module.mjs +4 -4
- package/esm2022/lib/c3-file-viewer/components/c3-file-viewer-actions/c3-file-viewer-actions.component.mjs +3 -3
- package/esm2022/lib/c3-file-viewer/components/c3-file-viewer-image/c3-file-viewer-image.component.mjs +3 -3
- package/esm2022/lib/c3-file-viewer/components/c3-file-viewer-pdf/c3-file-viewer-pdf.component.mjs +3 -3
- package/esm2022/lib/c3-file-viewer/components/c3-file-viewer-video/c3-file-viewer-video.component.mjs +3 -3
- package/esm2022/lib/c3-file-viewer/components/public/c3-file-viewer/c3-file-viewer.component.mjs +3 -3
- package/esm2022/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.component.mjs +3 -3
- package/esm2022/lib/c3-file-viewer/components/public/c3-file-viewer-dialog/c3-file-viewer-dialog.mjs +3 -3
- package/esm2022/lib/c3-file-viewer/directives/full-screen.directive.mjs +3 -3
- package/esm2022/lib/c3-file-viewer/models/file-viewer.mjs +3 -3
- package/esm2022/lib/c3-safe-url/pipes/c3-safe-url.pipe.mjs +3 -3
- package/esm2022/lib/c3-select-on-focus/c3-select-on-focus.directive.mjs +3 -3
- package/esm2022/lib/c3-signals/c3-boolean-signal.mjs +1 -1
- package/esm2022/lib/c3-tree/c3-tree.component.mjs +47 -0
- package/esm2022/public-api.mjs +5 -1
- package/fesm2022/c3-components.mjs +176 -103
- package/fesm2022/c3-components.mjs.map +1 -1
- package/lib/c3-file-displayer/c3-file-display-card/c3-file-display-card.component.d.ts +6 -2
- package/lib/c3-file-displayer/c3-file-display-grid/c3-file-display-grid.component.d.ts +4 -1
- package/lib/c3-file-displayer/c3-file-display-list/c3-file-display-list.component.d.ts +4 -1
- package/lib/c3-signals/c3-boolean-signal.d.ts +3 -3
- package/lib/c3-tree/c3-tree.component.d.ts +28 -0
- package/lib/c3-tree/c3-tree.component.scss +74 -0
- package/package.json +1 -1
- package/public-api.d.ts +4 -0
|
@@ -26,12 +26,18 @@ import 'reflect-metadata';
|
|
|
26
26
|
import * as i1$4 from '@angular/common/http';
|
|
27
27
|
import { provideHttpClient, withInterceptorsFromDi, HttpClient } from '@angular/common/http';
|
|
28
28
|
import * as i1$3 from '@angular/platform-browser';
|
|
29
|
-
import
|
|
29
|
+
import * as i3 from '@angular/material/core';
|
|
30
|
+
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
|
|
30
31
|
import * as i5$2 from '@angular/material/menu';
|
|
31
32
|
import { MatMenuModule } from '@angular/material/menu';
|
|
32
33
|
import * as i4$1 from '@angular/material/tooltip';
|
|
33
34
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
34
35
|
import autoAnimate from '@formkit/auto-animate';
|
|
36
|
+
import { FlatTreeControl } from '@angular/cdk/tree';
|
|
37
|
+
import * as i4$2 from '@angular/material/progress-spinner';
|
|
38
|
+
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
39
|
+
import * as i1$5 from '@angular/material/tree';
|
|
40
|
+
import { MatTreeFlattener, MatTreeFlatDataSource, MatTreeModule } from '@angular/material/tree';
|
|
35
41
|
|
|
36
42
|
class C3DropdownComponent {
|
|
37
43
|
constructor(_changeDetectorRef) {
|
|
@@ -47,8 +53,8 @@ class C3DropdownComponent {
|
|
|
47
53
|
_markForCheck() {
|
|
48
54
|
this._changeDetectorRef.markForCheck();
|
|
49
55
|
}
|
|
50
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
51
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
56
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
57
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3DropdownComponent, selector: "c3-dropdown", inputs: { dropdownClass: "dropdownClass" }, viewQueries: [{ propertyName: "template", first: true, predicate: TemplateRef, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
|
|
52
58
|
<ng-template>
|
|
53
59
|
<div class="c3-dropdown-panel" [ngClass]="dropdownClass">
|
|
54
60
|
<ng-content></ng-content>
|
|
@@ -56,7 +62,7 @@ class C3DropdownComponent {
|
|
|
56
62
|
</ng-template>
|
|
57
63
|
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
58
64
|
}
|
|
59
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
65
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownComponent, decorators: [{
|
|
60
66
|
type: Component,
|
|
61
67
|
args: [{
|
|
62
68
|
selector: 'c3-dropdown',
|
|
@@ -171,10 +177,10 @@ class C3DropdownTrigger {
|
|
|
171
177
|
const detachments = this.overlayRef.detachments();
|
|
172
178
|
return merge(backdrop, detachments).pipe(takeUntil(this._destroyed));
|
|
173
179
|
}
|
|
174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
175
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
180
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownTrigger, deps: [{ token: i0.ElementRef }, { token: i1$1.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
181
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", 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 }); }
|
|
176
182
|
}
|
|
177
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
183
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownTrigger, decorators: [{
|
|
178
184
|
type: Directive,
|
|
179
185
|
args: [{
|
|
180
186
|
selector: '[c3Dropdown]',
|
|
@@ -196,11 +202,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
196
202
|
}] } });
|
|
197
203
|
|
|
198
204
|
class C3DropdownModule {
|
|
199
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
200
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
201
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
205
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
206
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownModule, declarations: [C3DropdownComponent, C3DropdownTrigger], imports: [CommonModule, OverlayModule], exports: [C3DropdownComponent, C3DropdownTrigger] }); }
|
|
207
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownModule, imports: [CommonModule, OverlayModule] }); }
|
|
202
208
|
}
|
|
203
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
209
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DropdownModule, decorators: [{
|
|
204
210
|
type: NgModule,
|
|
205
211
|
args: [{
|
|
206
212
|
imports: [CommonModule, OverlayModule],
|
|
@@ -217,8 +223,8 @@ class ConfirmDialogComponent {
|
|
|
217
223
|
onNoClick() {
|
|
218
224
|
this.dialogRef.close();
|
|
219
225
|
}
|
|
220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
226
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ConfirmDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: ConfirmDialogComponent, selector: "ConfirmDialogComponent", ngImport: i0, template: `
|
|
222
228
|
<mat-dialog-content>
|
|
223
229
|
<div [innerHtml]="data.text"></div>
|
|
224
230
|
</mat-dialog-content>
|
|
@@ -232,7 +238,7 @@ class ConfirmDialogComponent {
|
|
|
232
238
|
</mat-dialog-actions>
|
|
233
239
|
`, isInline: true, dependencies: [{ kind: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] }); }
|
|
234
240
|
}
|
|
235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
241
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
236
242
|
type: Component,
|
|
237
243
|
args: [{
|
|
238
244
|
selector: 'ConfirmDialogComponent',
|
|
@@ -265,8 +271,8 @@ class C3PromptDialogComponent {
|
|
|
265
271
|
onNoClick() {
|
|
266
272
|
this.dialogRef.close();
|
|
267
273
|
}
|
|
268
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
269
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
274
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3PromptDialogComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
275
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3PromptDialogComponent, selector: "PrompDialogComponent", ngImport: i0, template: `
|
|
270
276
|
<div mat-dialog-title>{{ data.text }}</div>
|
|
271
277
|
<mat-dialog-content>
|
|
272
278
|
<mat-form-field>
|
|
@@ -300,7 +306,7 @@ class C3PromptDialogComponent {
|
|
|
300
306
|
</mat-dialog-actions>
|
|
301
307
|
`, isInline: true, styles: ["mat-form-field{width:100%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "component", type: i2.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
302
308
|
}
|
|
303
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3PromptDialogComponent, decorators: [{
|
|
304
310
|
type: Component,
|
|
305
311
|
args: [{ selector: 'PrompDialogComponent', template: `
|
|
306
312
|
<div mat-dialog-title>{{ data.text }}</div>
|
|
@@ -372,9 +378,13 @@ class C3DialogEmbedChildComponent {
|
|
|
372
378
|
}
|
|
373
379
|
return component;
|
|
374
380
|
}
|
|
375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
377
|
-
<mat-toolbar
|
|
381
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogEmbedChildComponent, deps: [{ token: i1$2.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
382
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3DialogEmbedChildComponent, selector: "C3DialogEmbedChildComponent", viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: `<mat-dialog-content>
|
|
383
|
+
<mat-toolbar
|
|
384
|
+
*ngIf="data.toolbar"
|
|
385
|
+
[color]="data.toolbar.color || 'default'"
|
|
386
|
+
class="py-1"
|
|
387
|
+
>
|
|
378
388
|
<span>{{ data.toolbar.title }}</span>
|
|
379
389
|
<span class="spacer"></span>
|
|
380
390
|
<button
|
|
@@ -389,12 +399,16 @@ class C3DialogEmbedChildComponent {
|
|
|
389
399
|
<div class="dialog-content">
|
|
390
400
|
<ng-template #target></ng-template>
|
|
391
401
|
</div>
|
|
392
|
-
</mat-dialog-content>`, isInline: true, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
|
|
402
|
+
</mat-dialog-content>`, isInline: true, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto;min-width:16px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { 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: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }] }); }
|
|
393
403
|
}
|
|
394
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
404
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogEmbedChildComponent, decorators: [{
|
|
395
405
|
type: Component,
|
|
396
406
|
args: [{ selector: 'C3DialogEmbedChildComponent', template: `<mat-dialog-content>
|
|
397
|
-
<mat-toolbar
|
|
407
|
+
<mat-toolbar
|
|
408
|
+
*ngIf="data.toolbar"
|
|
409
|
+
[color]="data.toolbar.color || 'default'"
|
|
410
|
+
class="py-1"
|
|
411
|
+
>
|
|
398
412
|
<span>{{ data.toolbar.title }}</span>
|
|
399
413
|
<span class="spacer"></span>
|
|
400
414
|
<button
|
|
@@ -409,7 +423,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
409
423
|
<div class="dialog-content">
|
|
410
424
|
<ng-template #target></ng-template>
|
|
411
425
|
</div>
|
|
412
|
-
</mat-dialog-content>`, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto}\n"] }]
|
|
426
|
+
</mat-dialog-content>`, styles: ["mat-dialog-content{display:flex;flex-direction:column;height:100%}mat-dialog-content .dialog-content{display:flex;flex-direction:column;height:100%;overflow:auto;flex-grow:1}mat-dialog-content .mat-toolbar{display:flex;justify-content:space-between;align-items:center;border-radius:.25rem}mat-dialog-content .mat-toolbar span{color:inherit}mat-dialog-content .spacer{flex:1 1 auto;min-width:16px}\n"] }]
|
|
413
427
|
}], ctorParameters: () => [{ type: i1$2.MatDialogRef }, { type: undefined, decorators: [{
|
|
414
428
|
type: Inject,
|
|
415
429
|
args: [MAT_DIALOG_DATA]
|
|
@@ -548,10 +562,10 @@ class C3DialogService {
|
|
|
548
562
|
});
|
|
549
563
|
return result;
|
|
550
564
|
}
|
|
551
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
552
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.
|
|
565
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
566
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogService, providedIn: 'root' }); }
|
|
553
567
|
}
|
|
554
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogService, decorators: [{
|
|
555
569
|
type: Injectable,
|
|
556
570
|
args: [{
|
|
557
571
|
providedIn: 'root',
|
|
@@ -559,8 +573,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
559
573
|
}] });
|
|
560
574
|
|
|
561
575
|
class C3DialogModule {
|
|
562
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
563
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
576
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
577
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3DialogModule, declarations: [ConfirmDialogComponent,
|
|
564
578
|
C3PromptDialogComponent,
|
|
565
579
|
C3DialogEmbedChildComponent], imports: [CommonModule,
|
|
566
580
|
FormsModule,
|
|
@@ -571,7 +585,7 @@ class C3DialogModule {
|
|
|
571
585
|
MatInputModule,
|
|
572
586
|
MatToolbarModule,
|
|
573
587
|
ReactiveFormsModule] }); }
|
|
574
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
588
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogModule, providers: [C3DialogService], imports: [CommonModule,
|
|
575
589
|
FormsModule,
|
|
576
590
|
MatButtonModule,
|
|
577
591
|
MatDialogModule,
|
|
@@ -581,7 +595,7 @@ class C3DialogModule {
|
|
|
581
595
|
MatToolbarModule,
|
|
582
596
|
ReactiveFormsModule] }); }
|
|
583
597
|
}
|
|
584
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3DialogModule, decorators: [{
|
|
585
599
|
type: NgModule,
|
|
586
600
|
args: [{
|
|
587
601
|
declarations: [
|
|
@@ -651,10 +665,10 @@ class FullScreenDirective {
|
|
|
651
665
|
}
|
|
652
666
|
}
|
|
653
667
|
}
|
|
654
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
655
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
668
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FullScreenDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
669
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: FullScreenDirective, selector: "[C3FullScreen], [c3-full-screen]", inputs: { fullscreenState: ["c3Screenfull", "fullscreenState"], fullscreenStateSetter: ["c3-full-screen", "fullscreenStateSetter"] }, ngImport: i0 }); }
|
|
656
670
|
}
|
|
657
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
671
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: FullScreenDirective, decorators: [{
|
|
658
672
|
type: Directive,
|
|
659
673
|
args: [{
|
|
660
674
|
selector: '[C3FullScreen], [c3-full-screen]',
|
|
@@ -671,10 +685,10 @@ class C3FileViewerActionsComponent {
|
|
|
671
685
|
get config() {
|
|
672
686
|
return this.fileViewer.config;
|
|
673
687
|
}
|
|
674
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
675
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
688
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
689
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", 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"] }] }); }
|
|
676
690
|
}
|
|
677
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerActionsComponent, decorators: [{
|
|
678
692
|
type: Component,
|
|
679
693
|
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" }]
|
|
680
694
|
}], propDecorators: { fileViewer: [{
|
|
@@ -688,10 +702,10 @@ class C3SafeUrlPipe {
|
|
|
688
702
|
transform(url) {
|
|
689
703
|
return url ? this.sanitizer.bypassSecurityTrustResourceUrl(url) : '';
|
|
690
704
|
}
|
|
691
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
692
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.
|
|
705
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3SafeUrlPipe, deps: [{ token: i1$3.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
706
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3SafeUrlPipe, isStandalone: true, name: "c3SafeUrl" }); }
|
|
693
707
|
}
|
|
694
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
708
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3SafeUrlPipe, decorators: [{
|
|
695
709
|
type: Pipe,
|
|
696
710
|
args: [{
|
|
697
711
|
name: 'c3SafeUrl',
|
|
@@ -703,10 +717,10 @@ class C3FileViewerImageComponent {
|
|
|
703
717
|
constructor() {
|
|
704
718
|
this.dragstart = new EventEmitter();
|
|
705
719
|
}
|
|
706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
707
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
720
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerImageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
721
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", 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" }] }); }
|
|
708
722
|
}
|
|
709
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
723
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerImageComponent, decorators: [{
|
|
710
724
|
type: Component,
|
|
711
725
|
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" }]
|
|
712
726
|
}], propDecorators: { fileViewer: [{
|
|
@@ -719,10 +733,10 @@ class C3FileViewerPdfComponent {
|
|
|
719
733
|
constructor() {
|
|
720
734
|
this.dragstart = new EventEmitter();
|
|
721
735
|
}
|
|
722
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
736
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerPdfComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
737
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", 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 }); }
|
|
724
738
|
}
|
|
725
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
739
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerPdfComponent, decorators: [{
|
|
726
740
|
type: Component,
|
|
727
741
|
args: [{ selector: 'c3-file-viewer-pdf', encapsulation: ViewEncapsulation.None, host: {
|
|
728
742
|
style: 'display: block',
|
|
@@ -750,10 +764,10 @@ class C3FileViewerVideoComponent {
|
|
|
750
764
|
},
|
|
751
765
|
});
|
|
752
766
|
}
|
|
753
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
754
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
767
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerVideoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
768
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerVideoComponent, selector: "c3-file-viewer-video", inputs: { _srcUpdated: ["file", "_srcUpdated"], fileViewer: "fileViewer" }, ngImport: i0, template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }); }
|
|
755
769
|
}
|
|
756
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
770
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerVideoComponent, decorators: [{
|
|
757
771
|
type: Component,
|
|
758
772
|
args: [{ selector: 'c3-file-viewer-video', template: "<video controls [src]=\"src\" crossorigin=\"*\"></video>\n" }]
|
|
759
773
|
}], ctorParameters: () => [], propDecorators: { _srcUpdated: [{
|
|
@@ -803,10 +817,10 @@ class C3FileViewerComponent {
|
|
|
803
817
|
this.fileViewer.styleHeight =
|
|
804
818
|
'calc(100% - ' + this.screenHeightOccupied + 'px)';
|
|
805
819
|
}
|
|
806
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
807
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
820
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerComponent, deps: [{ token: 'config', optional: true }, { token: i1$4.HttpClient }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
821
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", 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 }); }
|
|
808
822
|
}
|
|
809
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
823
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerComponent, decorators: [{
|
|
810
824
|
type: Component,
|
|
811
825
|
args: [{ selector: 'c3-file-viewer', encapsulation: ViewEncapsulation.None, host: {
|
|
812
826
|
class: 'c3-file-viewer',
|
|
@@ -945,10 +959,10 @@ class C3FileViewer {
|
|
|
945
959
|
this.prevY = 0;
|
|
946
960
|
if (config)
|
|
947
961
|
this.config = config;
|
|
948
|
-
if (files)
|
|
949
|
-
this.files = files;
|
|
950
962
|
if (client)
|
|
951
963
|
this.client = client.get.bind(client);
|
|
964
|
+
if (files)
|
|
965
|
+
this.files = files;
|
|
952
966
|
this.config$.subscribe((config) => {
|
|
953
967
|
const { minHeight, maxHeight, minWidth, maxWidth, height, width } = config;
|
|
954
968
|
this.style.minHeight = this.valueToCss(minHeight);
|
|
@@ -1094,12 +1108,12 @@ class C3FileViewerDialog {
|
|
|
1094
1108
|
constructor(fileViewer) {
|
|
1095
1109
|
this.fileViewer = fileViewer;
|
|
1096
1110
|
}
|
|
1097
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1098
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
1111
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerDialog, deps: [{ token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1112
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerDialog, selector: "ng-component", ngImport: i0, template: `
|
|
1099
1113
|
<c3-file-viewer [fileViewer]="fileViewer" [screenHeightOccupied]="0" />
|
|
1100
1114
|
`, isInline: true, dependencies: [{ kind: "component", type: C3FileViewerComponent, selector: "c3-file-viewer", inputs: ["screenHeightOccupied", "fileViewer"], outputs: ["indexChange", "configChange", "customFileEvent"] }] }); }
|
|
1101
1115
|
}
|
|
1102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerDialog, decorators: [{
|
|
1103
1117
|
type: Component,
|
|
1104
1118
|
args: [{
|
|
1105
1119
|
template: `
|
|
@@ -1126,10 +1140,10 @@ class C3FileViewerDialogComponent {
|
|
|
1126
1140
|
...this.dialogConfig,
|
|
1127
1141
|
});
|
|
1128
1142
|
}
|
|
1129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.
|
|
1143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerDialogComponent, deps: [{ token: i1$2.MatDialog }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.1", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: { fileViewer: "fileViewer", dialogConfig: "dialogConfig" }, host: { listeners: { "click": "openDialog()" }, classAttribute: "c3-file-viewer-dialog" }, ngImport: i0, template: ` <ng-content /> `, isInline: true }); }
|
|
1131
1145
|
}
|
|
1132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1146
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerDialogComponent, decorators: [{
|
|
1133
1147
|
type: Component,
|
|
1134
1148
|
args: [{
|
|
1135
1149
|
selector: 'c3-file-viewer-dialog',
|
|
@@ -1148,8 +1162,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
1148
1162
|
}] } });
|
|
1149
1163
|
|
|
1150
1164
|
class C3FileViewerModule {
|
|
1151
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1152
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
1165
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1166
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerModule, declarations: [FullScreenDirective,
|
|
1153
1167
|
C3FileViewerComponent,
|
|
1154
1168
|
C3FileViewerActionsComponent,
|
|
1155
1169
|
C3FileViewerImageComponent,
|
|
@@ -1159,9 +1173,9 @@ class C3FileViewerModule {
|
|
|
1159
1173
|
C3FileViewerDialog], imports: [CommonModule, C3SafeUrlPipe, MatDialogModule], exports: [FullScreenDirective,
|
|
1160
1174
|
C3FileViewerComponent,
|
|
1161
1175
|
C3FileViewerDialogComponent] }); }
|
|
1162
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
1176
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerModule, providers: [provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule, MatDialogModule] }); }
|
|
1163
1177
|
}
|
|
1164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1178
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileViewerModule, decorators: [{
|
|
1165
1179
|
type: NgModule,
|
|
1166
1180
|
args: [{
|
|
1167
1181
|
declarations: [
|
|
@@ -1187,25 +1201,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
1187
1201
|
class C3FileDisplayCardComponent {
|
|
1188
1202
|
constructor() {
|
|
1189
1203
|
this.fileObjectUrl = input.required();
|
|
1204
|
+
this.displayFn = input((file) => file.name);
|
|
1190
1205
|
this.deletable = input(false);
|
|
1191
1206
|
this.size = input('32');
|
|
1192
1207
|
this.onDelete = output();
|
|
1193
|
-
effect(() => {
|
|
1194
|
-
console.log('fileObjectUrl', this.fileObjectUrl());
|
|
1195
|
-
});
|
|
1196
1208
|
}
|
|
1197
|
-
|
|
1198
|
-
|
|
1209
|
+
getFileType() {
|
|
1210
|
+
const file = this.fileObjectUrl();
|
|
1211
|
+
if (file && file.type) {
|
|
1212
|
+
if (file.type.startsWith('image'))
|
|
1213
|
+
return 'image';
|
|
1214
|
+
if (file.type.startsWith('application'))
|
|
1215
|
+
return 'application';
|
|
1216
|
+
if (file.type.startsWith('video'))
|
|
1217
|
+
return 'video';
|
|
1218
|
+
}
|
|
1219
|
+
return 'unknown';
|
|
1220
|
+
}
|
|
1221
|
+
getFileObjectUrl() {
|
|
1222
|
+
const file = this.fileObjectUrl();
|
|
1223
|
+
return file && file.objectUrl ? file.objectUrl : null;
|
|
1224
|
+
}
|
|
1225
|
+
getFileName() {
|
|
1226
|
+
const file = this.fileObjectUrl();
|
|
1227
|
+
return file ? file.name : '';
|
|
1228
|
+
}
|
|
1229
|
+
getDisplayName() {
|
|
1230
|
+
const file = this.fileObjectUrl();
|
|
1231
|
+
return file ? this.displayFn()(file) : '';
|
|
1232
|
+
}
|
|
1233
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1234
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayCardComponent, isStandalone: true, selector: "c3-file-display-card", inputs: { fileObjectUrl: { classPropertyName: "fileObjectUrl", publicName: "fileObjectUrl", isSignal: true, isRequired: true, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, ngImport: i0, template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n <div class=\"actions\">\n <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n } @if(fileObjectUrl()) {\n @switch (getFileType()) { @case ('image') {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n [alt]=\"getFileName()\"\n />\n } @case ('application') {\n <mat-icon> file-pdf-box </mat-icon>\n } @case ('video') {\n <mat-icon> video </mat-icon>\n }\n }\n\n <div class=\"informations flex justify-between items-center\">\n <span class=\"text-xs text-white\">\n {{ getDisplayName() }}\n </span>\n </div>\n }\n</button>\n", styles: [":host{display:block}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:auto}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1199
1235
|
}
|
|
1200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayCardComponent, decorators: [{
|
|
1201
1237
|
type: Component,
|
|
1202
|
-
args: [{ selector: 'c3-file-display-card', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule], template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n
|
|
1203
|
-
}]
|
|
1238
|
+
args: [{ selector: 'c3-file-display-card', standalone: true, imports: [CommonModule, MatButtonModule, MatIconModule], template: "<button\n class=\"file-card border\"\n [class.size-16]=\"size() === '16'\"\n [class.size-32]=\"size() === '32'\"\n [class.size-64]=\"size() === '64'\"\n [class.size-128]=\"size() === '128'\"\n [class.size-256]=\"size() === '256'\"\n>\n @if(deletable()) {\n <div class=\"actions\">\n <button mat-icon-button color=\"red\" (click)=\"onDelete.emit()\">\n <mat-icon>delete</mat-icon>\n </button>\n </div>\n } @if(fileObjectUrl()) {\n @switch (getFileType()) { @case ('image') {\n <img\n class=\"h-full w-full object-cover\"\n [src]=\"(getFileObjectUrl() | async) || '/default-image.svg'\"\n [alt]=\"getFileName()\"\n />\n } @case ('application') {\n <mat-icon> file-pdf-box </mat-icon>\n } @case ('video') {\n <mat-icon> video </mat-icon>\n }\n }\n\n <div class=\"informations flex justify-between items-center\">\n <span class=\"text-xs text-white\">\n {{ getDisplayName() }}\n </span>\n </div>\n }\n</button>\n", styles: [":host{display:block}:host .file-card{position:relative;border-radius:4px;border:1px solid #e0e0e0;overflow:auto}:host .file-card .actions{position:absolute;top:-21px;right:-21px;z-index:1;display:none}:host .file-card img{border-radius:4px}:host .file-card:hover .actions{display:block}:host .file-card .informations{position:absolute;bottom:0;left:0;z-index:1;width:100%;background:#00000080;padding:0 4px}\n"] }]
|
|
1239
|
+
}] });
|
|
1204
1240
|
|
|
1205
1241
|
class C3FileDisplayGridComponent {
|
|
1206
1242
|
constructor() {
|
|
1207
1243
|
this.files = input.required();
|
|
1208
1244
|
this.config = input();
|
|
1245
|
+
this.displayFn = input((file) => file.name);
|
|
1209
1246
|
this.deletable = input(false);
|
|
1210
1247
|
this.onDelete = output();
|
|
1211
1248
|
this.dialog = viewChild(C3FileViewerDialogComponent);
|
|
@@ -1229,10 +1266,10 @@ class C3FileDisplayGridComponent {
|
|
|
1229
1266
|
this.fileViewer.currentIndex = index;
|
|
1230
1267
|
this.dialog()?.openDialog();
|
|
1231
1268
|
}
|
|
1232
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
1269
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1270
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayGridComponent, isStandalone: true, selector: "c3-file-display-grid", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"c3-file-display-grid\">\n @for (file of files(); track $index) {\n <c3-file-display-card\n [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n (click)=\"openDialog($event, $index)\"\n (onDelete)=\"onDelete.emit(file)\"\n />\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:10px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: C3FileDisplayCardComponent, selector: "c3-file-display-card", inputs: ["fileObjectUrl", "displayFn", "deletable", "size"], outputs: ["onDelete"] }, { kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }] }); }
|
|
1234
1271
|
}
|
|
1235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayGridComponent, decorators: [{
|
|
1236
1273
|
type: Component,
|
|
1237
1274
|
args: [{ selector: 'c3-file-display-grid', standalone: true, imports: [CommonModule, C3FileDisplayCardComponent, C3FileViewerModule], template: "<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"c3-file-display-grid\">\n @for (file of files(); track $index) {\n <c3-file-display-card\n [fileObjectUrl]=\"fileViewer.filesObjectUrl[$index]\"\n (click)=\"openDialog($event, $index)\"\n (onDelete)=\"onDelete.emit(file)\"\n />\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:block}:host .c3-file-display-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:10px}\n"] }]
|
|
1238
1275
|
}], ctorParameters: () => [] });
|
|
@@ -1279,10 +1316,10 @@ class C3FileDisplayIconComponent {
|
|
|
1279
1316
|
}
|
|
1280
1317
|
});
|
|
1281
1318
|
}
|
|
1282
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1283
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.
|
|
1319
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1320
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3FileDisplayIconComponent, isStandalone: true, selector: "c3-file-display-icon", inputs: { fileType: { classPropertyName: "fileType", publicName: "fileType", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
1284
1321
|
}
|
|
1285
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1322
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayIconComponent, decorators: [{
|
|
1286
1323
|
type: Component,
|
|
1287
1324
|
args: [{ selector: 'c3-file-display-icon', standalone: true, imports: [CommonModule, MatIconModule], template: "<mat-icon [ngClass]=\"color()\">{{ displayedIcon() }}</mat-icon>\n", styles: [":host{display:block}:host .text-primary{color:var(--primary-color)}:host .text-secondary{color:var(--secondary-color)}:host .text-success{color:var(--success-color)}:host .text-gray{color:var(--gray-color)}\n"] }]
|
|
1288
1325
|
}] });
|
|
@@ -1291,6 +1328,7 @@ class C3FileDisplayListComponent {
|
|
|
1291
1328
|
constructor() {
|
|
1292
1329
|
this.files = input.required();
|
|
1293
1330
|
this.config = input();
|
|
1331
|
+
this.displayFn = input((file) => file.name);
|
|
1294
1332
|
this.deletable = input(false);
|
|
1295
1333
|
this.onDelete = output();
|
|
1296
1334
|
this.dialog = viewChild(C3FileViewerDialogComponent);
|
|
@@ -1314,10 +1352,10 @@ class C3FileDisplayListComponent {
|
|
|
1314
1352
|
this.fileViewer.currentIndex = index;
|
|
1315
1353
|
this.dialog()?.openDialog();
|
|
1316
1354
|
}
|
|
1317
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1318
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.
|
|
1355
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3FileDisplayListComponent, isStandalone: true, selector: "c3-file-display-list", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: true, isRequired: false, transformFunction: null }, deletable: { classPropertyName: "deletable", publicName: "deletable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onDelete: "onDelete" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: C3FileViewerDialogComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- header -->\n<div class=\"header\">\n <div class=\"title full\">\n <span>Nom</span>\n </div>\n <div class=\"title\">\n <span>Date d'ajout</span>\n </div>\n <div class=\"icon\">\n <mat-icon>more_vert</mat-icon>\n </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n <div class=\"name\">\n <span>{{ displayFn()(file) }}</span>\n </div>\n <div class=\"date-label\">\n <span>{{\n file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n }}</span>\n </div>\n <button mat-icon-button>\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"openDialog($event, $index)\">\n Ouvrir\n </button>\n @if (deletable()) {\n <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n }\n </mat-menu>\n </button>\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"], dependencies: [{ kind: "ngmodule", type: C3FileViewerModule }, { kind: "component", type: C3FileViewerDialogComponent, selector: "c3-file-viewer-dialog", inputs: ["fileViewer", "dialogConfig"] }, { kind: "component", type: C3FileDisplayIconComponent, selector: "c3-file-display-icon", inputs: ["fileType"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i5$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i5$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }] }); }
|
|
1319
1357
|
}
|
|
1320
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1358
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayListComponent, decorators: [{
|
|
1321
1359
|
type: Component,
|
|
1322
1360
|
args: [{ selector: 'c3-file-display-list', standalone: true, imports: [
|
|
1323
1361
|
C3FileViewerModule,
|
|
@@ -1327,12 +1365,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
1327
1365
|
MatIconModule,
|
|
1328
1366
|
MatNativeDateModule,
|
|
1329
1367
|
MatMenuModule,
|
|
1330
|
-
], template: "<!-- header -->\n<div class=\"header\">\n <div class=\"title full\">\n <span>Nom</span>\n </div>\n <div class=\"title\">\n <span>Date d'ajout</span>\n </div>\n <div class=\"icon\">\n <mat-icon>more_vert</mat-icon>\n </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n <div class=\"name\">\n <span>{{ file
|
|
1368
|
+
], template: "<!-- header -->\n<div class=\"header\">\n <div class=\"title full\">\n <span>Nom</span>\n </div>\n <div class=\"title\">\n <span>Date d'ajout</span>\n </div>\n <div class=\"icon\">\n <mat-icon>more_vert</mat-icon>\n </div>\n</div>\n<c3-file-viewer-dialog [fileViewer]=\"fileViewer\">\n <div class=\"file-display-list\">\n @for (file of files(); track $index) {\n <button>\n <div class=\"icon\">\n <c3-file-display-icon [fileType]=\"file.type\" />\n </div>\n <div class=\"name\">\n <span>{{ displayFn()(file) }}</span>\n </div>\n <div class=\"date-label\">\n <span>{{\n file.lastModified ? (file.lastModified | date : \"medium\") : \"-\"\n }}</span>\n </div>\n <button mat-icon-button>\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"openDialog($event, $index)\">\n Ouvrir\n </button>\n @if (deletable()) {\n <button mat-menu-item (click)=\"onDelete.emit(file)\">Supprimer</button>\n }\n </mat-menu>\n </button>\n }\n </div>\n</c3-file-viewer-dialog>\n", styles: [":host{display:flex;flex-direction:column;margin:.5rem}:host .header{display:flex;align-items:center;padding:0 .5rem;border-bottom:1px solid var(--mat-divider-color)}:host .header .title{flex-basis:304px;width:304px;font-size:1.5rem;font-weight:700}:host .header .title.full{flex:auto}:host .header .icon{flex-basis:40px;width:40px}:host .file-display-list{display:flex;flex-direction:column}:host .file-display-list>button{display:flex;flex-direction:row;height:3rem;align-items:center;border-bottom:1px solid var(--mat-divider-color);background-color:var(--mdc-protected-button-container-color);text-align:start;padding:0 .5rem}:host .file-display-list>button:hover{background-color:var(--background-hover)}:host .file-display-list>button .icon{flex-basis:56px;width:56px}:host .file-display-list>button .name{flex:auto;flex-basis:304px;width:304px}:host .file-display-list>button .date-label{flex-basis:304px;width:304px}\n"] }]
|
|
1331
1369
|
}], ctorParameters: () => [] });
|
|
1332
1370
|
|
|
1333
1371
|
class C3FileDisplayerModule {
|
|
1334
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1335
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
1372
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1373
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
|
|
1336
1374
|
C3FileDisplayGridComponent,
|
|
1337
1375
|
C3FileDisplayListComponent,
|
|
1338
1376
|
C3FileDisplayCardComponent,
|
|
@@ -1340,13 +1378,13 @@ class C3FileDisplayerModule {
|
|
|
1340
1378
|
C3FileDisplayListComponent,
|
|
1341
1379
|
C3FileDisplayCardComponent,
|
|
1342
1380
|
C3FileDisplayIconComponent] }); }
|
|
1343
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
1381
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayerModule, imports: [CommonModule,
|
|
1344
1382
|
C3FileDisplayGridComponent,
|
|
1345
1383
|
C3FileDisplayListComponent,
|
|
1346
1384
|
C3FileDisplayCardComponent,
|
|
1347
1385
|
C3FileDisplayIconComponent] }); }
|
|
1348
1386
|
}
|
|
1349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1387
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3FileDisplayerModule, decorators: [{
|
|
1350
1388
|
type: NgModule,
|
|
1351
1389
|
args: [{
|
|
1352
1390
|
declarations: [],
|
|
@@ -1374,10 +1412,10 @@ class C3ExpansionHeaderComponent {
|
|
|
1374
1412
|
get hostClass() {
|
|
1375
1413
|
return 'c3-expansion-header';
|
|
1376
1414
|
}
|
|
1377
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1378
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.
|
|
1415
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1416
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, c3Expansion: { classPropertyName: "c3Expansion", publicName: "c3Expansion", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.hostClass" } }, ngImport: i0, template: "<ng-content>\n <h4 class=\"text-lg\" *ngIf=\"title()\">\n {{ title() }}\n </h4>\n <button\n *ngIf=\"c3Expansion()\"\n mat-icon-button\n (click)=\"c3Expansion()?.toggleExpand()\"\n [matTooltip]=\"c3Expansion()?.isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n >\n <mat-icon>{{\n c3Expansion()?.isExpanded() ? \"expand_less\" : \"expand_more\"\n }}</mat-icon>\n </button>\n</ng-content>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1379
1417
|
}
|
|
1380
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionHeaderComponent, decorators: [{
|
|
1381
1419
|
type: Component,
|
|
1382
1420
|
args: [{ selector: 'c3-expansion-header', encapsulation: ViewEncapsulation.None, template: "<ng-content>\n <h4 class=\"text-lg\" *ngIf=\"title()\">\n {{ title() }}\n </h4>\n <button\n *ngIf=\"c3Expansion()\"\n mat-icon-button\n (click)=\"c3Expansion()?.toggleExpand()\"\n [matTooltip]=\"c3Expansion()?.isExpanded() ? 'R\u00E9duire' : 'D\u00E9velopper'\"\n >\n <mat-icon>{{\n c3Expansion()?.isExpanded() ? \"expand_less\" : \"expand_more\"\n }}</mat-icon>\n </button>\n</ng-content>\n" }]
|
|
1383
1421
|
}], propDecorators: { hostClass: [{
|
|
@@ -1392,10 +1430,10 @@ class C3AutoAnimateDirective {
|
|
|
1392
1430
|
ngAfterViewInit() {
|
|
1393
1431
|
autoAnimate(this.el.nativeElement, this.options);
|
|
1394
1432
|
}
|
|
1395
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1396
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
1433
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3AutoAnimateDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1434
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3AutoAnimateDirective, isStandalone: true, selector: "[c3AutoAnimate]", inputs: { options: "options" }, ngImport: i0 }); }
|
|
1397
1435
|
}
|
|
1398
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1436
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3AutoAnimateDirective, decorators: [{
|
|
1399
1437
|
type: Directive,
|
|
1400
1438
|
args: [{
|
|
1401
1439
|
selector: '[c3AutoAnimate]',
|
|
@@ -1417,10 +1455,10 @@ class C3ExpansionComponent {
|
|
|
1417
1455
|
toggleExpand() {
|
|
1418
1456
|
this.isExpanded.set(!this.isExpanded());
|
|
1419
1457
|
}
|
|
1420
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1421
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.
|
|
1458
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.1", type: C3ExpansionComponent, selector: "c3-expansion", inputs: { headerClass: { classPropertyName: "headerClass", publicName: "headerClass", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isExpanded: "isExpandedChange" }, host: { properties: { "class": "this.hostClass" } }, hostDirectives: [{ directive: C3AutoAnimateDirective, inputs: ["options", "options"] }], ngImport: i0, template: "<div [class]=\"headerClass()\">\n <ng-content select=\"c3-expansion-header\">\n <c3-expansion-header [c3Expansion]=\"this\" />\n </ng-content>\n</div>\n\n<div *ngIf=\"isExpanded()\">\n <ng-content></ng-content>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: C3ExpansionHeaderComponent, selector: "c3-expansion-header", inputs: ["title", "c3Expansion"] }] }); }
|
|
1422
1460
|
}
|
|
1423
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1461
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionComponent, decorators: [{
|
|
1424
1462
|
type: Component,
|
|
1425
1463
|
args: [{ selector: 'c3-expansion', hostDirectives: [
|
|
1426
1464
|
{
|
|
@@ -1434,22 +1472,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.1", ngImpor
|
|
|
1434
1472
|
}] } });
|
|
1435
1473
|
|
|
1436
1474
|
class C3ExpansionModule {
|
|
1437
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1438
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.
|
|
1475
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1476
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionModule, declarations: [C3ExpansionComponent, C3ExpansionHeaderComponent], imports: [CommonModule,
|
|
1439
1477
|
C3AutoAnimateDirective,
|
|
1440
1478
|
MatButtonModule,
|
|
1441
1479
|
MatIconModule,
|
|
1442
1480
|
MatTooltipModule,
|
|
1443
1481
|
MatButtonModule,
|
|
1444
1482
|
MatToolbarModule], exports: [C3ExpansionComponent, C3ExpansionHeaderComponent] }); }
|
|
1445
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.
|
|
1483
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionModule, imports: [CommonModule,
|
|
1446
1484
|
MatButtonModule,
|
|
1447
1485
|
MatIconModule,
|
|
1448
1486
|
MatTooltipModule,
|
|
1449
1487
|
MatButtonModule,
|
|
1450
1488
|
MatToolbarModule] }); }
|
|
1451
1489
|
}
|
|
1452
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3ExpansionModule, decorators: [{
|
|
1453
1491
|
type: NgModule,
|
|
1454
1492
|
args: [{
|
|
1455
1493
|
declarations: [C3ExpansionComponent, C3ExpansionHeaderComponent],
|
|
@@ -1470,10 +1508,10 @@ class C3SelectOnFocusDirective {
|
|
|
1470
1508
|
onFocus(target) {
|
|
1471
1509
|
setTimeout(() => target.select());
|
|
1472
1510
|
}
|
|
1473
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.
|
|
1474
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.
|
|
1511
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3SelectOnFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1512
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.1", type: C3SelectOnFocusDirective, isStandalone: true, selector: "[c3SelectOnFocus]", host: { listeners: { "focus": "onFocus($event.target)" } }, ngImport: i0 }); }
|
|
1475
1513
|
}
|
|
1476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.
|
|
1514
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3SelectOnFocusDirective, decorators: [{
|
|
1477
1515
|
type: Directive,
|
|
1478
1516
|
args: [{
|
|
1479
1517
|
selector: '[c3SelectOnFocus]',
|
|
@@ -1511,6 +1549,41 @@ function booleanSignal(value) {
|
|
|
1511
1549
|
return new BooleanSignal(value);
|
|
1512
1550
|
}
|
|
1513
1551
|
|
|
1552
|
+
class C3TreeComponent {
|
|
1553
|
+
constructor() {
|
|
1554
|
+
this.treeData = model.required();
|
|
1555
|
+
this.isLoading = model(false);
|
|
1556
|
+
this.treeDataSelected = output();
|
|
1557
|
+
this._transformer = (node, level) => ({
|
|
1558
|
+
expandable: !!node.children && node.children.length > 0,
|
|
1559
|
+
children: node.children,
|
|
1560
|
+
id: node.id,
|
|
1561
|
+
level,
|
|
1562
|
+
name: node.name,
|
|
1563
|
+
rawData: node.rawData,
|
|
1564
|
+
});
|
|
1565
|
+
this.hasChild = (_, node) => node.children.length > 0;
|
|
1566
|
+
this.treeControl = new FlatTreeControl((node) => node.level, (node) => node.expandable);
|
|
1567
|
+
this.treeFlattener = new MatTreeFlattener(this._transformer, (node) => node.level, (node) => node.expandable, (node) => node.children);
|
|
1568
|
+
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
|
|
1569
|
+
effect(() => {
|
|
1570
|
+
this.dataSource.data = this.treeData();
|
|
1571
|
+
});
|
|
1572
|
+
}
|
|
1573
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1574
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: C3TreeComponent, isStandalone: true, selector: "c3-tree", inputs: { treeData: { classPropertyName: "treeData", publicName: "treeData", isSignal: true, isRequired: true, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { treeData: "treeDataChange", isLoading: "isLoadingChange", treeDataSelected: "treeDataSelected" }, ngImport: i0, template: "@if(isLoading()) {\r\n<div class=\"c3-tree-loader\">\r\n <mat-spinner diameter=\"50\"></mat-spinner>\r\n</div>\r\n}\r\n\r\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding class=\"children\">\r\n <button mat-ripple (click)=\"treeDataSelected.emit(node)\">\r\n {{ node.name }}\r\n </button>\r\n </mat-tree-node>\r\n <mat-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodePadding\r\n class=\"has-children\"\r\n >\r\n <button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n </mat-icon>\r\n </button>\r\n <div class=\"mat-tree-node-content\">\r\n <ng-content>\r\n <span>{{ node.name }}</span>\r\n </ng-content>\r\n </div>\r\n </mat-tree-node>\r\n</mat-tree>\r\n", styles: [":host{display:block;width:100%;position:relative;min-height:100%;padding:4px 0}.c3-tree-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-tree{width:100%;height:100%;background-color:transparent;border:1px solid var(--mat-divider-color);border-radius:4px;overflow:auto}mat-tree mat-tree-node{display:flex;align-items:center;justify-content:start;gap:1rem}mat-tree mat-tree-node.has-children>button{height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid transparent;margin:.5rem}mat-tree mat-tree-node.has-children>button:hover{border-color:var(--mat-divider-color)}mat-tree mat-tree-node.has-children:hover{background-color:var(--background-hover)}mat-tree mat-tree-node.has-children .mat-tree-node-content{padding-right:.25rem;display:flex;justify-content:space-between;align-items:center;width:100%}mat-tree mat-tree-node.children button{width:100%;border-radius:.25rem;padding:0 1rem;height:2rem;text-align:left}mat-tree mat-tree-node.children button:hover{background-color:var(--background-hover)}mat-tree mat-tree-node:hover{background-color:var(--background-hover)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTreeModule }, { kind: "directive", type: i1$5.MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: i1$5.MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "directive", type: i1$5.MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "component", type: i1$5.MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: i1$5.MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i3.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i4$2.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
1575
|
+
}
|
|
1576
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: C3TreeComponent, decorators: [{
|
|
1577
|
+
type: Component,
|
|
1578
|
+
args: [{ selector: 'c3-tree', standalone: true, imports: [
|
|
1579
|
+
CommonModule,
|
|
1580
|
+
MatTreeModule,
|
|
1581
|
+
MatIconModule,
|
|
1582
|
+
MatRippleModule,
|
|
1583
|
+
MatProgressSpinnerModule,
|
|
1584
|
+
], template: "@if(isLoading()) {\r\n<div class=\"c3-tree-loader\">\r\n <mat-spinner diameter=\"50\"></mat-spinner>\r\n</div>\r\n}\r\n\r\n<mat-tree [dataSource]=\"dataSource\" [treeControl]=\"treeControl\">\r\n <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodePadding class=\"children\">\r\n <button mat-ripple (click)=\"treeDataSelected.emit(node)\">\r\n {{ node.name }}\r\n </button>\r\n </mat-tree-node>\r\n <mat-tree-node\r\n *matTreeNodeDef=\"let node; when: hasChild\"\r\n matTreeNodePadding\r\n class=\"has-children\"\r\n >\r\n <button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\r\n <mat-icon class=\"mat-icon-rtl-mirror\">\r\n {{ treeControl.isExpanded(node) ? \"expand_more\" : \"chevron_right\" }}\r\n </mat-icon>\r\n </button>\r\n <div class=\"mat-tree-node-content\">\r\n <ng-content>\r\n <span>{{ node.name }}</span>\r\n </ng-content>\r\n </div>\r\n </mat-tree-node>\r\n</mat-tree>\r\n", styles: [":host{display:block;width:100%;position:relative;min-height:100%;padding:4px 0}.c3-tree-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}mat-tree{width:100%;height:100%;background-color:transparent;border:1px solid var(--mat-divider-color);border-radius:4px;overflow:auto}mat-tree mat-tree-node{display:flex;align-items:center;justify-content:start;gap:1rem}mat-tree mat-tree-node.has-children>button{height:32px;width:32px;border-radius:50%;display:flex;justify-content:center;align-items:center;border:1px solid transparent;margin:.5rem}mat-tree mat-tree-node.has-children>button:hover{border-color:var(--mat-divider-color)}mat-tree mat-tree-node.has-children:hover{background-color:var(--background-hover)}mat-tree mat-tree-node.has-children .mat-tree-node-content{padding-right:.25rem;display:flex;justify-content:space-between;align-items:center;width:100%}mat-tree mat-tree-node.children button{width:100%;border-radius:.25rem;padding:0 1rem;height:2rem;text-align:left}mat-tree mat-tree-node.children button:hover{background-color:var(--background-hover)}mat-tree mat-tree-node:hover{background-color:var(--background-hover)}\n"] }]
|
|
1585
|
+
}], ctorParameters: () => [] });
|
|
1586
|
+
|
|
1514
1587
|
/*
|
|
1515
1588
|
* Public API Surface of c3-components
|
|
1516
1589
|
*/
|
|
@@ -1519,5 +1592,5 @@ function booleanSignal(value) {
|
|
|
1519
1592
|
* Generated bundle index. Do not edit.
|
|
1520
1593
|
*/
|
|
1521
1594
|
|
|
1522
|
-
export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
|
|
1595
|
+
export { C3AutoAnimateDirective, C3DialogEmbedChildComponent, C3DialogModule, C3DialogService, C3DropdownComponent, C3DropdownModule, C3DropdownTrigger, C3ExpansionComponent, C3ExpansionHeaderComponent, C3ExpansionModule, C3FileDisplayCardComponent, C3FileDisplayGridComponent, C3FileDisplayIconComponent, C3FileDisplayListComponent, C3FileDisplayerModule, C3FileViewer, C3FileViewerComponent, C3FileViewerDialog, C3FileViewerDialogComponent, C3FileViewerModule, C3PromptDialogComponent, C3SafeUrlPipe, C3SelectOnFocusDirective, C3TreeComponent, ConfirmDialogComponent, CustomFileEvent, FullScreenDirective, MAT_DROPDOWN_VALUE_ACCESSOR, booleanSignal };
|
|
1523
1596
|
//# sourceMappingURL=c3-components.mjs.map
|