@eui/components 18.2.0-snapshot-1726103509746 → 18.2.0-snapshot-1726579511702
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/docs/components/EuiFilePreviewComponent.html +112 -448
- package/docs/components/EuiFileUploadComponent.html +157 -1
- package/docs/dependencies.html +2 -2
- package/docs/injectables/EuiFileUploadUtilsService.html +70 -0
- package/docs/js/menu-wc.js +9 -9
- package/docs/js/menu-wc_es5.js +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/modules/EuiFileUploadModule.html +9 -0
- package/esm2022/eui-file-upload/eui-file-upload.component.mjs +39 -5
- package/esm2022/eui-file-upload/eui-file-upload.module.mjs +6 -5
- package/esm2022/eui-file-upload/file-preview/file-preview.component.mjs +42 -63
- package/esm2022/eui-file-upload/index.mjs +2 -1
- package/esm2022/eui-file-upload/utils/eui-file-upload.utils.mjs +34 -1
- package/esm2022/eui-icon/eui-icon-svg.component.mjs +2 -2
- package/eui-file-upload/eui-file-upload.component.d.ts +31 -3
- package/eui-file-upload/eui-file-upload.component.d.ts.map +1 -1
- package/eui-file-upload/eui-file-upload.module.d.ts +2 -1
- package/eui-file-upload/eui-file-upload.module.d.ts.map +1 -1
- package/eui-file-upload/file-preview/file-preview.component.d.ts +29 -25
- package/eui-file-upload/file-preview/file-preview.component.d.ts.map +1 -1
- package/eui-file-upload/index.d.ts +1 -0
- package/eui-file-upload/index.d.ts.map +1 -1
- package/eui-file-upload/utils/eui-file-upload.utils.d.ts +6 -0
- package/eui-file-upload/utils/eui-file-upload.utils.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-file-upload.mjs +116 -71
- package/fesm2022/eui-components-eui-file-upload.mjs.map +1 -1
- package/fesm2022/eui-components-eui-icon.mjs +2 -2
- package/fesm2022/eui-components-eui-icon.mjs.map +1 -1
- package/package.json +3 -3
|
@@ -1,10 +1,17 @@
|
|
|
1
|
-
import { OnInit, ChangeDetectorRef, EventEmitter } from '@angular/core';
|
|
2
|
-
import {
|
|
1
|
+
import { OnInit, ChangeDetectorRef, EventEmitter, QueryList, TemplateRef, AfterViewInit } from '@angular/core';
|
|
2
|
+
import { EuiTemplateDirective } from '@eui/components/directives';
|
|
3
3
|
import { EuiUploadedFileInterface } from '../models/uploaded-file.model';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
|
-
export declare class EuiFilePreviewComponent implements OnInit {
|
|
5
|
+
export declare class EuiFilePreviewComponent implements OnInit, AfterViewInit {
|
|
6
6
|
private cd;
|
|
7
7
|
file: Blob | EuiUploadedFileInterface | any;
|
|
8
|
+
uploadedFileTemplate: TemplateRef<{
|
|
9
|
+
$implicit: {
|
|
10
|
+
file: EuiUploadedFileInterface;
|
|
11
|
+
index: number;
|
|
12
|
+
isFileObject: boolean;
|
|
13
|
+
};
|
|
14
|
+
}>;
|
|
8
15
|
index: number;
|
|
9
16
|
previewAsIconConfig: {
|
|
10
17
|
avi: string;
|
|
@@ -40,35 +47,32 @@ export declare class EuiFilePreviewComponent implements OnInit {
|
|
|
40
47
|
};
|
|
41
48
|
isLoading: boolean;
|
|
42
49
|
itemClick: EventEmitter<any>;
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
get isFiletypeDisplayed(): boolean;
|
|
53
|
-
set isFiletypeDisplayed(value: BooleanInput);
|
|
54
|
-
private _isFiletypeDisplayed;
|
|
55
|
-
get hasPreviewAsImage(): boolean;
|
|
56
|
-
set hasPreviewAsImage(value: BooleanInput);
|
|
57
|
-
private _hasPreviewAsImage;
|
|
58
|
-
get hasPreviewAsIcon(): boolean;
|
|
59
|
-
set hasPreviewAsIcon(value: BooleanInput);
|
|
60
|
-
private _hasPreviewAsIcon;
|
|
61
|
-
get isItemsClickable(): boolean;
|
|
62
|
-
set isItemsClickable(value: BooleanInput);
|
|
63
|
-
private _isItemsClickable;
|
|
50
|
+
hasPreview: boolean;
|
|
51
|
+
isFilenameDisplayed: boolean;
|
|
52
|
+
isFilesizeDisplayed: boolean;
|
|
53
|
+
isFiletypeDisplayed: boolean;
|
|
54
|
+
hasPreviewAsImage: boolean;
|
|
55
|
+
hasPreviewAsIcon: boolean;
|
|
56
|
+
isItemsClickable: boolean;
|
|
57
|
+
isFileObject: boolean;
|
|
58
|
+
templates: QueryList<EuiTemplateDirective>;
|
|
64
59
|
constructor(cd: ChangeDetectorRef);
|
|
65
60
|
ngOnInit(): void;
|
|
61
|
+
ngAfterViewInit(): void;
|
|
66
62
|
onRemoveFromList(): void;
|
|
67
63
|
onItemClick(e: Event): void;
|
|
68
64
|
private getFileExtension;
|
|
69
65
|
private getPreviewForMime;
|
|
70
66
|
private getIconForMime;
|
|
71
67
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiFilePreviewComponent, never>;
|
|
72
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<EuiFilePreviewComponent, "eui-file-preview", never, { "file": { "alias": "file"; "required": false; }; "index": { "alias": "index"; "required": false; }; "previewAsIconConfig": { "alias": "previewAsIconConfig"; "required": false; }; "hasPreview": { "alias": "hasPreview"; "required": false; }; "isFilenameDisplayed": { "alias": "isFilenameDisplayed"; "required": false; }; "isFilesizeDisplayed": { "alias": "isFilesizeDisplayed"; "required": false; }; "isFiletypeDisplayed": { "alias": "isFiletypeDisplayed"; "required": false; }; "hasPreviewAsImage": { "alias": "hasPreviewAsImage"; "required": false; }; "hasPreviewAsIcon": { "alias": "hasPreviewAsIcon"; "required": false; }; "isItemsClickable": { "alias": "isItemsClickable"; "required": false; }; }, { "removeFromList": "removeFromList"; "itemClick": "itemClick"; },
|
|
68
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<EuiFilePreviewComponent, "eui-file-preview", never, { "file": { "alias": "file"; "required": false; }; "uploadedFileTemplate": { "alias": "uploadedFileTemplate"; "required": false; }; "index": { "alias": "index"; "required": false; }; "previewAsIconConfig": { "alias": "previewAsIconConfig"; "required": false; }; "hasPreview": { "alias": "hasPreview"; "required": false; }; "isFilenameDisplayed": { "alias": "isFilenameDisplayed"; "required": false; }; "isFilesizeDisplayed": { "alias": "isFilesizeDisplayed"; "required": false; }; "isFiletypeDisplayed": { "alias": "isFiletypeDisplayed"; "required": false; }; "hasPreviewAsImage": { "alias": "hasPreviewAsImage"; "required": false; }; "hasPreviewAsIcon": { "alias": "hasPreviewAsIcon"; "required": false; }; "isItemsClickable": { "alias": "isItemsClickable"; "required": false; }; "isFileObject": { "alias": "isFileObject"; "required": false; }; }, { "removeFromList": "removeFromList"; "itemClick": "itemClick"; }, ["templates"], never, false, never>;
|
|
69
|
+
static ngAcceptInputType_hasPreview: unknown;
|
|
70
|
+
static ngAcceptInputType_isFilenameDisplayed: unknown;
|
|
71
|
+
static ngAcceptInputType_isFilesizeDisplayed: unknown;
|
|
72
|
+
static ngAcceptInputType_isFiletypeDisplayed: unknown;
|
|
73
|
+
static ngAcceptInputType_hasPreviewAsImage: unknown;
|
|
74
|
+
static ngAcceptInputType_hasPreviewAsIcon: unknown;
|
|
75
|
+
static ngAcceptInputType_isItemsClickable: unknown;
|
|
76
|
+
static ngAcceptInputType_isFileObject: unknown;
|
|
73
77
|
}
|
|
74
78
|
//# sourceMappingURL=file-preview.component.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"file-preview.component.d.ts","sourceRoot":"","sources":["../../../eui-file-upload/file-preview/file-preview.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,MAAM,EAIN,iBAAiB,EAEjB,YAAY,
|
|
1
|
+
{"version":3,"file":"file-preview.component.d.ts","sourceRoot":"","sources":["../../../eui-file-upload/file-preview/file-preview.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,MAAM,EAIN,iBAAiB,EAEjB,YAAY,EAEZ,SAAS,EACT,WAAW,EAEX,aAAa,EAChB,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,MAAM,+BAA+B,CAAC;;AAEzE,qBAMa,uBAAwB,YAAW,MAAM,EAAE,aAAa;IAuDrD,OAAO,CAAC,EAAE;IApDb,IAAI,EAAE,IAAI,GAAG,wBAAwB,GAAG,GAAG,CAAC;IAC5C,oBAAoB,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE;YAAE,IAAI,EAAE,wBAAwB,CAAC;YAAC,KAAK,EAAE,MAAM,CAAC;YAAC,YAAY,EAAE,OAAO,CAAA;SAAE,CAAA;KAAE,CAAC,CAAC;IAC3H,KAAK,EAAE,MAAM,CAAC;IAEd,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;MAuB1B;IAEQ,cAAc,uBAA8B;IAE/C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE;QAAE,KAAK,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,SAAS,UAAS;IAIf,SAAS,oBAA6D;IAExC,UAAU,UAAQ;IAClB,mBAAmB,UAAQ;IAC3B,mBAAmB,UAAQ;IAC3B,mBAAmB,UAAQ;IAC3B,iBAAiB,UAAQ;IACzB,gBAAgB,UAAS;IACzB,gBAAgB,UAAS;IACzB,YAAY,UAAS;IAEtB,SAAS,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;gBAE9D,EAAE,EAAE,iBAAiB;IAEzC,QAAQ,IAAI,IAAI;IA0ChB,eAAe,IAAI,IAAI;IAQhB,gBAAgB,IAAI,IAAI;IAIxB,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,IAAI;IAKlC,OAAO,CAAC,gBAAgB;IAMxB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,cAAc;yCAlIb,uBAAuB;2CAAvB,uBAAuB;yCAuI8l7B,OAAQ;kDAAR,OAAQ;kDAAR,OAAQ;kDAAR,OAAQ;gDAAR,OAAQ;+CAAR,OAAQ;+CAAR,OAAQ;2CAAR,OAAQ;CADzo7B"}
|
|
@@ -6,4 +6,5 @@ export * from './eui-file-upload.component';
|
|
|
6
6
|
export * from './utils/eui-file-upload.utils';
|
|
7
7
|
export * from './utils/eui-file-upload.validators';
|
|
8
8
|
export * from './models/uploaded-file.model';
|
|
9
|
+
export * from './pipes/filesize.pipe';
|
|
9
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../eui-file-upload/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../eui-file-upload/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+CAA+C,CAAC;AAC9D,cAAc,uCAAuC,CAAC;AACtD,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uBAAuB,CAAC"}
|
|
@@ -72,6 +72,12 @@ export declare class EuiFileUploadUtilsService {
|
|
|
72
72
|
* @returns The backend response.
|
|
73
73
|
*/
|
|
74
74
|
toResponseBody<T>(): UnaryFunction<Observable<HttpEvent<T>>, Observable<T>>;
|
|
75
|
+
/**
|
|
76
|
+
* Return the icon to be used with eui-icon-svg of the given extension or a default file icon
|
|
77
|
+
* @param fileExtension
|
|
78
|
+
* @returns Icon name as string
|
|
79
|
+
*/
|
|
80
|
+
getIconForExtension(fileExtension: string): string;
|
|
75
81
|
private toFormData;
|
|
76
82
|
static ɵfac: i0.ɵɵFactoryDeclaration<EuiFileUploadUtilsService, never>;
|
|
77
83
|
static ɵprov: i0.ɵɵInjectableDeclaration<EuiFileUploadUtilsService>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-file-upload.utils.d.ts","sourceRoot":"","sources":["../../../eui-file-upload/utils/eui-file-upload.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,SAAS,EAA+B,MAAM,sBAAsB,CAAC;AAE1F,OAAO,EAAQ,UAAU,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,MAAM,CAAC;;AAEjF,qBACa,yBAAyB;IACtB,OAAO,CAAC,UAAU;gBAAV,UAAU,EAAE,UAAU;IAE1C;;;;;;;;;;;;;;;;;;;;;;OAsBG;IAGI,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC;IAOhE;;;;;;;;;;;;;;;;;;;;;OAqBG;IACI,cAAc,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAQhG;;;;;;;;;;;;;;;;;;;OAmBG;IACI,cAAc,CAAC,CAAC,KAAK,aAAa,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"eui-file-upload.utils.d.ts","sourceRoot":"","sources":["../../../eui-file-upload/utils/eui-file-upload.utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,SAAS,EAA+B,MAAM,sBAAsB,CAAC;AAE1F,OAAO,EAAQ,UAAU,EAAE,aAAa,EAAE,wBAAwB,EAAE,MAAM,MAAM,CAAC;;AAEjF,qBACa,yBAAyB;IACtB,OAAO,CAAC,UAAU;gBAAV,UAAU,EAAE,UAAU;IAE1C;;;;;;;;;;;;;;;;;;;;;;OAsBG;IAGI,QAAQ,CAAC,IAAI,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG,CAAC;IAOhE;;;;;;;;;;;;;;;;;;;;;OAqBG;IACI,cAAc,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAQhG;;;;;;;;;;;;;;;;;;;OAmBG;IACI,cAAc,CAAC,CAAC,KAAK,aAAa,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IAOlF;;;;OAIG;IACI,mBAAmB,CAAC,aAAa,EAAE,MAAM,GAAG,MAAM;IAgCzD,OAAO,CAAC,UAAU;yCAjIT,yBAAyB;6CAAzB,yBAAyB;CAmKrC"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Pipe, EventEmitter, Output,
|
|
2
|
+
import { Component, ChangeDetectionStrategy, ViewEncapsulation, Input, Pipe, EventEmitter, booleanAttribute, Output, ContentChildren, HostBinding, ViewChildren, HostListener, Injectable, NgModule } from '@angular/core';
|
|
3
3
|
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
|
4
|
+
import { EuiTemplateDirective, EuiTemplateDirectiveModule } from '@eui/components/directives';
|
|
4
5
|
import * as i1 from '@angular/common';
|
|
5
6
|
import { CommonModule } from '@angular/common';
|
|
6
7
|
import * as i2 from '@eui/components/eui-button';
|
|
7
8
|
import { EuiButtonModule } from '@eui/components/eui-button';
|
|
8
|
-
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
9
9
|
import * as i3 from '@eui/components/eui-icon';
|
|
10
10
|
import { EuiIconModule } from '@eui/components/eui-icon';
|
|
11
11
|
import * as i5 from '@ngx-translate/core';
|
|
@@ -55,48 +55,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
55
55
|
}] });
|
|
56
56
|
|
|
57
57
|
class EuiFilePreviewComponent {
|
|
58
|
-
get hasPreview() {
|
|
59
|
-
return this._hasPreview;
|
|
60
|
-
}
|
|
61
|
-
set hasPreview(value) {
|
|
62
|
-
this._hasPreview = coerceBooleanProperty(value);
|
|
63
|
-
}
|
|
64
|
-
get isFilenameDisplayed() {
|
|
65
|
-
return this._isFilenameDisplayed;
|
|
66
|
-
}
|
|
67
|
-
set isFilenameDisplayed(value) {
|
|
68
|
-
this._isFilenameDisplayed = coerceBooleanProperty(value);
|
|
69
|
-
}
|
|
70
|
-
get isFilesizeDisplayed() {
|
|
71
|
-
return this._isFilesizeDisplayed;
|
|
72
|
-
}
|
|
73
|
-
set isFilesizeDisplayed(value) {
|
|
74
|
-
this._isFilesizeDisplayed = coerceBooleanProperty(value);
|
|
75
|
-
}
|
|
76
|
-
get isFiletypeDisplayed() {
|
|
77
|
-
return this._isFiletypeDisplayed;
|
|
78
|
-
}
|
|
79
|
-
set isFiletypeDisplayed(value) {
|
|
80
|
-
this._isFiletypeDisplayed = coerceBooleanProperty(value);
|
|
81
|
-
}
|
|
82
|
-
get hasPreviewAsImage() {
|
|
83
|
-
return this._hasPreviewAsImage;
|
|
84
|
-
}
|
|
85
|
-
set hasPreviewAsImage(value) {
|
|
86
|
-
this._hasPreviewAsImage = coerceBooleanProperty(value);
|
|
87
|
-
}
|
|
88
|
-
get hasPreviewAsIcon() {
|
|
89
|
-
return this._hasPreviewAsIcon;
|
|
90
|
-
}
|
|
91
|
-
set hasPreviewAsIcon(value) {
|
|
92
|
-
this._hasPreviewAsIcon = coerceBooleanProperty(value);
|
|
93
|
-
}
|
|
94
|
-
get isItemsClickable() {
|
|
95
|
-
return this._isItemsClickable;
|
|
96
|
-
}
|
|
97
|
-
set isItemsClickable(value) {
|
|
98
|
-
this._isItemsClickable = coerceBooleanProperty(value);
|
|
99
|
-
}
|
|
100
58
|
constructor(cd) {
|
|
101
59
|
this.cd = cd;
|
|
102
60
|
this.previewAsIconConfig = {
|
|
@@ -128,15 +86,15 @@ class EuiFilePreviewComponent {
|
|
|
128
86
|
// TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
|
|
129
87
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
130
88
|
this.itemClick = new EventEmitter();
|
|
131
|
-
this.
|
|
132
|
-
this.
|
|
133
|
-
this.
|
|
134
|
-
this.
|
|
135
|
-
this.
|
|
136
|
-
this.
|
|
137
|
-
this.
|
|
138
|
-
|
|
139
|
-
|
|
89
|
+
this.hasPreview = true;
|
|
90
|
+
this.isFilenameDisplayed = true;
|
|
91
|
+
this.isFilesizeDisplayed = true;
|
|
92
|
+
this.isFiletypeDisplayed = true;
|
|
93
|
+
this.hasPreviewAsImage = true;
|
|
94
|
+
this.hasPreviewAsIcon = false;
|
|
95
|
+
this.isItemsClickable = false;
|
|
96
|
+
this.isFileObject = false;
|
|
97
|
+
}
|
|
140
98
|
ngOnInit() {
|
|
141
99
|
if (this.hasPreviewAsIcon) {
|
|
142
100
|
this.hasPreviewAsImage = false;
|
|
@@ -144,7 +102,6 @@ class EuiFilePreviewComponent {
|
|
|
144
102
|
if (this.file instanceof Blob) {
|
|
145
103
|
const reader = new FileReader();
|
|
146
104
|
reader.readAsArrayBuffer(this.file);
|
|
147
|
-
// reader.readAsDataURL(this.file as Blob);
|
|
148
105
|
// TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
|
|
149
106
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
150
107
|
reader.onload = (event) => {
|
|
@@ -173,6 +130,13 @@ class EuiFilePreviewComponent {
|
|
|
173
130
|
this.cd.detectChanges();
|
|
174
131
|
}
|
|
175
132
|
}
|
|
133
|
+
ngAfterViewInit() {
|
|
134
|
+
this.templates.forEach((item) => {
|
|
135
|
+
if (item.getType() === 'uploadedFile') {
|
|
136
|
+
this.uploadedFileTemplate = item.template;
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
}
|
|
176
140
|
onRemoveFromList() {
|
|
177
141
|
this.removeFromList.emit(this.index);
|
|
178
142
|
}
|
|
@@ -195,13 +159,15 @@ class EuiFilePreviewComponent {
|
|
|
195
159
|
return !this.previewAsIconConfig[f] ? 'eui-file-empty-o' : this.previewAsIconConfig[f];
|
|
196
160
|
}
|
|
197
161
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiFilePreviewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
198
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
162
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: EuiFilePreviewComponent, selector: "eui-file-preview", inputs: { file: "file", uploadedFileTemplate: "uploadedFileTemplate", index: "index", previewAsIconConfig: "previewAsIconConfig", hasPreview: ["hasPreview", "hasPreview", booleanAttribute], isFilenameDisplayed: ["isFilenameDisplayed", "isFilenameDisplayed", booleanAttribute], isFilesizeDisplayed: ["isFilesizeDisplayed", "isFilesizeDisplayed", booleanAttribute], isFiletypeDisplayed: ["isFiletypeDisplayed", "isFiletypeDisplayed", booleanAttribute], hasPreviewAsImage: ["hasPreviewAsImage", "hasPreviewAsImage", booleanAttribute], hasPreviewAsIcon: ["hasPreviewAsIcon", "hasPreviewAsIcon", booleanAttribute], isItemsClickable: ["isItemsClickable", "isItemsClickable", booleanAttribute], isFileObject: ["isFileObject", "isFileObject", booleanAttribute] }, outputs: { removeFromList: "removeFromList", itemClick: "itemClick" }, queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], ngImport: i0, template: "@if (uploadedFileTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"uploadedFileTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { file: { id: file.id, name: file.name, url: file.url || previewData?.display, size: file.size, type: file.type }, index, isFileObject } }\">\n </ng-template>\n} @else {\n <div class=\"eui-file-upload__preview\">\n <div class=\"eui-file-upload__preview--left\">\n <div class=\"eui-file-upload__preview--left__image\" *ngIf=\"hasPreview && hasPreviewAsImage\">\n <img [src]=\"previewData.display\" *ngIf=\"url && previewData.image\" />\n <eui-icon-svg *ngIf=\"previewData && !previewData.image\" icon=\"{{ previewData.display }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n <div *ngIf=\"isLoading\" class=\"loading-container\">\n <eui-icon-svg isLoading size=\"2xl\"></eui-icon-svg>\n </div>\n </div>\n <div *ngIf=\"hasPreview && hasPreviewAsIcon\">\n <eui-icon-svg icon=\"{{ icon }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n </div>\n <div class=\"eui-file-upload__preview--left__filename eui-u-text-truncate\" *ngIf=\"isFilenameDisplayed\">\n <ng-container *ngIf=\"!isItemsClickable\">\n {{ file.name }}\n </ng-container>\n <ng-container *ngIf=\"isItemsClickable\">\n <a href=\"#\" (click)=\"onItemClick($event)\" class=\"eui-u-text-link eui-u-text-truncate\">{{ file.name }}</a>\n </ng-container>\n </div>\n </div>\n <div class=\"eui-file-upload__preview--right\">\n <div class=\"eui-u-text-no-wrap eui-u-ml-m\" *ngIf=\"isFilesizeDisplayed\">{{ file.size | filesize }}</div>\n <div class=\"eui-u-ml-m\" *ngIf=\"isFiletypeDisplayed\"><span euiLabel>{{ file.type }}</span></div>\n <div class=\"eui-u-ml-m\">\n <button euiButton euiDanger euiRounded euiIconButton euiBasicButton type=\"button\" (click)=\"onRemoveFromList()\">\n <eui-icon-svg icon=\"eui-ecl-trash\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n}\n", dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EuiIconSvgComponent, selector: "eui-icon-svg, span[euiIconSvg], i[euiIconSvg]", inputs: ["icon", "fillColor", "set", "size", "style", "iconUrl", "transform", "euiVariant", "aria-label", "ariaHidden", "focusable", "isLoading", "isInputIcon", "euiStart", "euiEnd"] }, { kind: "pipe", type: EuiFileSizePipe, name: "filesize" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
199
163
|
}
|
|
200
164
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiFilePreviewComponent, decorators: [{
|
|
201
165
|
type: Component,
|
|
202
|
-
args: [{ selector: 'eui-file-preview', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"eui-file-upload__preview\">\n
|
|
166
|
+
args: [{ selector: 'eui-file-preview', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "@if (uploadedFileTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"uploadedFileTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { file: { id: file.id, name: file.name, url: file.url || previewData?.display, size: file.size, type: file.type }, index, isFileObject } }\">\n </ng-template>\n} @else {\n <div class=\"eui-file-upload__preview\">\n <div class=\"eui-file-upload__preview--left\">\n <div class=\"eui-file-upload__preview--left__image\" *ngIf=\"hasPreview && hasPreviewAsImage\">\n <img [src]=\"previewData.display\" *ngIf=\"url && previewData.image\" />\n <eui-icon-svg *ngIf=\"previewData && !previewData.image\" icon=\"{{ previewData.display }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n <div *ngIf=\"isLoading\" class=\"loading-container\">\n <eui-icon-svg isLoading size=\"2xl\"></eui-icon-svg>\n </div>\n </div>\n <div *ngIf=\"hasPreview && hasPreviewAsIcon\">\n <eui-icon-svg icon=\"{{ icon }}\" size=\"l\" fillColor=\"info-100\" class=\"eui-u-mr-s\"></eui-icon-svg>\n </div>\n <div class=\"eui-file-upload__preview--left__filename eui-u-text-truncate\" *ngIf=\"isFilenameDisplayed\">\n <ng-container *ngIf=\"!isItemsClickable\">\n {{ file.name }}\n </ng-container>\n <ng-container *ngIf=\"isItemsClickable\">\n <a href=\"#\" (click)=\"onItemClick($event)\" class=\"eui-u-text-link eui-u-text-truncate\">{{ file.name }}</a>\n </ng-container>\n </div>\n </div>\n <div class=\"eui-file-upload__preview--right\">\n <div class=\"eui-u-text-no-wrap eui-u-ml-m\" *ngIf=\"isFilesizeDisplayed\">{{ file.size | filesize }}</div>\n <div class=\"eui-u-ml-m\" *ngIf=\"isFiletypeDisplayed\"><span euiLabel>{{ file.type }}</span></div>\n <div class=\"eui-u-ml-m\">\n <button euiButton euiDanger euiRounded euiIconButton euiBasicButton type=\"button\" (click)=\"onRemoveFromList()\">\n <eui-icon-svg icon=\"eui-ecl-trash\"></eui-icon-svg>\n </button>\n </div>\n </div>\n </div>\n}\n" }]
|
|
203
167
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { file: [{
|
|
204
168
|
type: Input
|
|
169
|
+
}], uploadedFileTemplate: [{
|
|
170
|
+
type: Input
|
|
205
171
|
}], index: [{
|
|
206
172
|
type: Input
|
|
207
173
|
}], previewAsIconConfig: [{
|
|
@@ -211,19 +177,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
211
177
|
}], itemClick: [{
|
|
212
178
|
type: Output
|
|
213
179
|
}], hasPreview: [{
|
|
214
|
-
type: Input
|
|
180
|
+
type: Input,
|
|
181
|
+
args: [{ transform: booleanAttribute }]
|
|
215
182
|
}], isFilenameDisplayed: [{
|
|
216
|
-
type: Input
|
|
183
|
+
type: Input,
|
|
184
|
+
args: [{ transform: booleanAttribute }]
|
|
217
185
|
}], isFilesizeDisplayed: [{
|
|
218
|
-
type: Input
|
|
186
|
+
type: Input,
|
|
187
|
+
args: [{ transform: booleanAttribute }]
|
|
219
188
|
}], isFiletypeDisplayed: [{
|
|
220
|
-
type: Input
|
|
189
|
+
type: Input,
|
|
190
|
+
args: [{ transform: booleanAttribute }]
|
|
221
191
|
}], hasPreviewAsImage: [{
|
|
222
|
-
type: Input
|
|
192
|
+
type: Input,
|
|
193
|
+
args: [{ transform: booleanAttribute }]
|
|
223
194
|
}], hasPreviewAsIcon: [{
|
|
224
|
-
type: Input
|
|
195
|
+
type: Input,
|
|
196
|
+
args: [{ transform: booleanAttribute }]
|
|
225
197
|
}], isItemsClickable: [{
|
|
226
|
-
type: Input
|
|
198
|
+
type: Input,
|
|
199
|
+
args: [{ transform: booleanAttribute }]
|
|
200
|
+
}], isFileObject: [{
|
|
201
|
+
type: Input,
|
|
202
|
+
args: [{ transform: booleanAttribute }]
|
|
203
|
+
}], templates: [{
|
|
204
|
+
type: ContentChildren,
|
|
205
|
+
args: [EuiTemplateDirective]
|
|
227
206
|
}] } });
|
|
228
207
|
|
|
229
208
|
class EuiFileUploadComponent {
|
|
@@ -291,6 +270,25 @@ class EuiFileUploadComponent {
|
|
|
291
270
|
this.hasPreviewAsImage = false;
|
|
292
271
|
}
|
|
293
272
|
}
|
|
273
|
+
ngAfterViewInit() {
|
|
274
|
+
// TODO EUI19: Change detection to OnPush to get rid of setTimeout workaround.
|
|
275
|
+
setTimeout(() => {
|
|
276
|
+
this.templates.forEach((item) => {
|
|
277
|
+
if (item.getType() === 'uploadedFile') {
|
|
278
|
+
this.uploadedFileTemplate = item.template;
|
|
279
|
+
}
|
|
280
|
+
if (item.getType() === 'browseButton') {
|
|
281
|
+
this.browseButtonTemplate = item.template;
|
|
282
|
+
}
|
|
283
|
+
if (item.getType() === 'resetButton') {
|
|
284
|
+
this.resetButtonTemplate = item.template;
|
|
285
|
+
}
|
|
286
|
+
if (item.getType() === 'progressBar') {
|
|
287
|
+
this.progressBarTemplate = item.template;
|
|
288
|
+
}
|
|
289
|
+
});
|
|
290
|
+
});
|
|
291
|
+
}
|
|
294
292
|
onDragEnter() {
|
|
295
293
|
if (!this.isDropAreaDisabled) {
|
|
296
294
|
this.dragEntered = true;
|
|
@@ -299,6 +297,10 @@ class EuiFileUploadComponent {
|
|
|
299
297
|
onDragLeave() {
|
|
300
298
|
this.dragEntered = false;
|
|
301
299
|
}
|
|
300
|
+
/**
|
|
301
|
+
* Remove a file from the array of files choosen by the user.
|
|
302
|
+
* @param index Index of the file to remove in the array.
|
|
303
|
+
*/
|
|
302
304
|
removeFromList(index) {
|
|
303
305
|
this.files = this.files.filter((f, i) => i !== index);
|
|
304
306
|
if (this.files.length === 0) {
|
|
@@ -307,6 +309,10 @@ class EuiFileUploadComponent {
|
|
|
307
309
|
this.getTotalSize();
|
|
308
310
|
this.onChange([...this.uploadedFiles, ...this.files]);
|
|
309
311
|
}
|
|
312
|
+
/**
|
|
313
|
+
* Remove a file from the array of files provided to the component as existing values.
|
|
314
|
+
* @param index Index of the file to remove in the array.
|
|
315
|
+
*/
|
|
310
316
|
removeFromUploadedList(index) {
|
|
311
317
|
this.uploadedFiles = this.uploadedFiles.filter((f, i) => i !== index);
|
|
312
318
|
if (this.files.length === 0) {
|
|
@@ -315,6 +321,9 @@ class EuiFileUploadComponent {
|
|
|
315
321
|
this.getTotalSize();
|
|
316
322
|
this.onChange([...this.uploadedFiles, ...this.files]);
|
|
317
323
|
}
|
|
324
|
+
/**
|
|
325
|
+
* Reset the list of files in the component.
|
|
326
|
+
*/
|
|
318
327
|
resetList() {
|
|
319
328
|
this.files = [];
|
|
320
329
|
this.uploadedFiles = [];
|
|
@@ -352,13 +361,13 @@ class EuiFileUploadComponent {
|
|
|
352
361
|
});
|
|
353
362
|
}
|
|
354
363
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.1", type: EuiFileUploadComponent, selector: "eui-file-upload", inputs: { e2eAttr: "e2eAttr", progress: "progress", accept: "accept", maxFiles: "maxFiles", isMultiple: ["isMultiple", "isMultiple", booleanAttribute], hasProgressBar: ["hasProgressBar", "hasProgressBar", booleanAttribute], hasPreview: ["hasPreview", "hasPreview", booleanAttribute], hasPreviewAsImage: ["hasPreviewAsImage", "hasPreviewAsImage", booleanAttribute], hasPreviewAsIcon: ["hasPreviewAsIcon", "hasPreviewAsIcon", booleanAttribute], hasTotalSizeDisplayed: ["hasTotalSizeDisplayed", "hasTotalSizeDisplayed", booleanAttribute], hasResetButton: ["hasResetButton", "hasResetButton", booleanAttribute], hasDragArea: ["hasDragArea", "hasDragArea", booleanAttribute], isItemsClickable: ["isItemsClickable", "isItemsClickable", booleanAttribute] }, outputs: { fileDrop: "fileDrop", itemClick: "itemClick" }, host: { listeners: { "change": "emitFiles($event.target.files)" }, properties: { "class": "this.cssClasses" } }, providers: [
|
|
356
365
|
{
|
|
357
366
|
provide: NG_VALUE_ACCESSOR,
|
|
358
367
|
useExisting: EuiFileUploadComponent,
|
|
359
368
|
multi: true,
|
|
360
369
|
},
|
|
361
|
-
], viewQueries: [{ propertyName: "fileInputs", predicate: ["input"], descendants: true }], ngImport: i0, template: "<div\n
|
|
370
|
+
], queries: [{ propertyName: "templates", predicate: EuiTemplateDirective }], viewQueries: [{ propertyName: "fileInputs", predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (hasDragArea) {\n <div\n class=\"eui-file-upload__drop-area\"\n [class.eui-file-upload__drop-area--active]=\"dragEntered\"\n [class.eui-file-upload__drop-area--disabled]=\"isDropAreaDisabled\">\n <span class=\"eui-file-upload__fake-btn\">{{ 'eui.euifileupload.CHOOSE-FILE' | translate }}</span>\n <span>{{ 'eui.euifileupload.DRAG-AND-DROP-FILE-HERE' | translate }}</span>\n <input\n #input\n class=\"eui-file-upload__file-input\"\n attr.aria-label=\"{{ 'eui.euifileupload.CHOOSE-FILE' | translate }} 'or' {{\n 'eui.euifileupload.DRAG-AND-DROP-FILE-HERE' | translate\n }}\"\n type=\"file\"\n accept=\"{{ accept }}\"\n [attr.disabled]=\"isDropAreaDisabled ? 'disabled' : null\"\n [multiple]=\"isMultiple\"\n (dragenter)=\"onDragEnter()\"\n (dragleave)=\"onDragLeave()\" />\n </div>\n} @else {\n <div class=\"eui-file-upload__simple-input-file\">\n <label for=\"file-{{ randomNumberId }}\">\n @if (browseButtonTemplate) {\n <ng-template [ngTemplateOutlet]=\"browseButtonTemplate\"></ng-template>\n } @else {\n <button euiButton type=\"button\" (click)=\"openBrowseWindow()\">{{ 'eui.euifileupload.CHOOSE-FILE' | translate }}</button>\n }\n </label>\n \n @if (isMultiple) {\n <input\n #input\n aria-label=\"Choose Multiple Files\"\n class=\"file-input\"\n id=\"file-{{ randomNumberId }}\"\n type=\"file\"\n accept=\"{{ accept }}\"\n multiple />\n } @else {\n <input\n #input\n aria-label=\"Choose a single file\"\n class=\"file-input\"\n id=\"file-{{ randomNumberId }}\"\n type=\"file\"\n accept=\"{{ accept }}\" />\n }\n </div>\n}\n\n@if (hasProgressBar) {\n @if (progressBarTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"progressBarTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { progress } }\">\n </ng-template>\n } @else {\n <eui-file-upload-progress [progress]=\"progress\"></eui-file-upload-progress>\n }\n}\n\n@for (uploadedFile of uploadedFiles; let i = $index; track $index) {\n <div>\n <eui-file-preview\n [isItemsClickable]=\"isItemsClickable\"\n [index]=\"i\"\n [file]=\"uploadedFile\"\n [hasPreview]=\"hasPreview\"\n [hasPreviewAsImage]=\"hasPreviewAsImage\"\n [hasPreviewAsIcon]=\"hasPreviewAsIcon\"\n [uploadedFileTemplate]=\"uploadedFileTemplate\"\n (itemClick)=\"onItemClick($event)\"\n (removeFromList)=\"removeFromUploadedList($event)\">\n </eui-file-preview>\n </div>\n}\n\n@for (file of files; let i = $index; track $index) {\n <div>\n <eui-file-preview\n isFileObject\n [isItemsClickable]=\"isItemsClickable\"\n [index]=\"i\"\n [file]=\"file\"\n [hasPreview]=\"hasPreview\"\n [hasPreviewAsImage]=\"hasPreviewAsImage\"\n [hasPreviewAsIcon]=\"hasPreviewAsIcon\"\n [uploadedFileTemplate]=\"uploadedFileTemplate\"\n (itemClick)=\"onItemClick($event)\"\n (removeFromList)=\"removeFromList($event)\">\n </eui-file-preview>\n </div>\n}\n\n@if (filesTotalSize && hasTotalSizeDisplayed) {\n <div class=\"eui-file-upload__total-size\">\n {{ filesTotalSize | filesize }} {{ 'eui.euifileupload.TOTAL-SIZE' | translate }}\n </div>\n}\n\n<ng-content></ng-content>\n\n@if (showResetBtn) {\n @if (resetButtonTemplate) {\n <ng-template [ngTemplateOutlet]=\"resetButtonTemplate\"></ng-template>\n } @else {\n <button euiButton type=\"button\" (click)=\"resetList()\">\n {{ 'eui.euifileupload.RESET-LIST' | translate }}\n </button>\n }\n}\n", styles: [".eui-18 .eui-file-upload__total-size{margin-bottom:1rem;font:var(--eui-f-m-bold)}.eui-18 .eui-file-upload__drop-area{outline:1px dashed var(--eui-c-info);border-radius:var(--eui-br-m);margin:0 0 10px;padding:30px;position:relative;-webkit-transition:.2s;transition:.2s}.eui-18 .eui-file-upload__drop-area--active{background-color:var(--eui-c-primary-bg);outline:3px dashed var(--eui-c-info);border-radius:var(--eui-br-m);margin:0 0 10px;padding:30px;position:relative;-webkit-transition:.2s;transition:.2s}.eui-18 .eui-file-upload__drop-area--disabled{opacity:.75;cursor:not-allowed}.eui-18 .eui-file-upload__drop-area--disabled .file-input{cursor:default}.eui-18 .eui-file-upload__fake-btn{background-color:#fff;border:var(--eui-bw-xs) solid #9e9ec4;border-radius:var(--eui-br-m);margin-right:8px;padding:8px 15px}.eui-18 .eui-file-upload__file-input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.eui-18 .eui-file-upload__file-input:not(:disabled){cursor:pointer}.eui-18 .eui-file-upload__simple-input-file{margin-bottom:var(--eui-s-xs)}.eui-18 .eui-file-upload__simple-input-file .file-input{display:none}.eui-18 .eui-file-upload__preview{align-items:center;display:flex;justify-content:space-between;margin:5px 0}.eui-18 .eui-file-upload__preview--left{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-18 .eui-file-upload__preview--left__image{margin-right:var(--eui-s-m)}.eui-18 .eui-file-upload__preview--left__image img{width:180px}.eui-18 .eui-file-upload__preview--left__image .loading-container{text-align:center;width:180px}.eui-18 .eui-file-upload__preview--left__filename{display:block}.eui-18 .eui-file-upload__preview--right{align-items:center;display:flex;margin-left:auto}.eui-18 .eui-file-upload__progress-bar-container{margin-bottom:var(--eui-s-2xs)}.eui-18 .eui-file-upload__progress-bar-container .progress-bar{background-color:var(--eui-c-primary);height:var(--eui-s-2xs)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EuiButtonComponent, selector: "button[euiButton], a[euiButton]", inputs: ["e2eAttr", "id", "euiBasicButton", "euiButtonCall", "euiBlockButton", "euiIconButton", "euiLineWrap", "isChecked", "euiDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: EuiFileUploadProgressComponent, selector: "eui-file-upload-progress", inputs: ["progress"] }, { kind: "component", type: EuiFilePreviewComponent, selector: "eui-file-preview", inputs: ["file", "uploadedFileTemplate", "index", "previewAsIconConfig", "hasPreview", "isFilenameDisplayed", "isFilesizeDisplayed", "isFiletypeDisplayed", "hasPreviewAsImage", "hasPreviewAsIcon", "isItemsClickable", "isFileObject"], outputs: ["removeFromList", "itemClick"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: EuiFileSizePipe, name: "filesize" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
362
371
|
}
|
|
363
372
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiFileUploadComponent, decorators: [{
|
|
364
373
|
type: Component,
|
|
@@ -368,7 +377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
368
377
|
useExisting: EuiFileUploadComponent,
|
|
369
378
|
multi: true,
|
|
370
379
|
},
|
|
371
|
-
], encapsulation: ViewEncapsulation.None, template: "<div\n
|
|
380
|
+
], encapsulation: ViewEncapsulation.None, template: "@if (hasDragArea) {\n <div\n class=\"eui-file-upload__drop-area\"\n [class.eui-file-upload__drop-area--active]=\"dragEntered\"\n [class.eui-file-upload__drop-area--disabled]=\"isDropAreaDisabled\">\n <span class=\"eui-file-upload__fake-btn\">{{ 'eui.euifileupload.CHOOSE-FILE' | translate }}</span>\n <span>{{ 'eui.euifileupload.DRAG-AND-DROP-FILE-HERE' | translate }}</span>\n <input\n #input\n class=\"eui-file-upload__file-input\"\n attr.aria-label=\"{{ 'eui.euifileupload.CHOOSE-FILE' | translate }} 'or' {{\n 'eui.euifileupload.DRAG-AND-DROP-FILE-HERE' | translate\n }}\"\n type=\"file\"\n accept=\"{{ accept }}\"\n [attr.disabled]=\"isDropAreaDisabled ? 'disabled' : null\"\n [multiple]=\"isMultiple\"\n (dragenter)=\"onDragEnter()\"\n (dragleave)=\"onDragLeave()\" />\n </div>\n} @else {\n <div class=\"eui-file-upload__simple-input-file\">\n <label for=\"file-{{ randomNumberId }}\">\n @if (browseButtonTemplate) {\n <ng-template [ngTemplateOutlet]=\"browseButtonTemplate\"></ng-template>\n } @else {\n <button euiButton type=\"button\" (click)=\"openBrowseWindow()\">{{ 'eui.euifileupload.CHOOSE-FILE' | translate }}</button>\n }\n </label>\n \n @if (isMultiple) {\n <input\n #input\n aria-label=\"Choose Multiple Files\"\n class=\"file-input\"\n id=\"file-{{ randomNumberId }}\"\n type=\"file\"\n accept=\"{{ accept }}\"\n multiple />\n } @else {\n <input\n #input\n aria-label=\"Choose a single file\"\n class=\"file-input\"\n id=\"file-{{ randomNumberId }}\"\n type=\"file\"\n accept=\"{{ accept }}\" />\n }\n </div>\n}\n\n@if (hasProgressBar) {\n @if (progressBarTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"progressBarTemplate\"\n [ngTemplateOutletContext]=\"{ $implicit: { progress } }\">\n </ng-template>\n } @else {\n <eui-file-upload-progress [progress]=\"progress\"></eui-file-upload-progress>\n }\n}\n\n@for (uploadedFile of uploadedFiles; let i = $index; track $index) {\n <div>\n <eui-file-preview\n [isItemsClickable]=\"isItemsClickable\"\n [index]=\"i\"\n [file]=\"uploadedFile\"\n [hasPreview]=\"hasPreview\"\n [hasPreviewAsImage]=\"hasPreviewAsImage\"\n [hasPreviewAsIcon]=\"hasPreviewAsIcon\"\n [uploadedFileTemplate]=\"uploadedFileTemplate\"\n (itemClick)=\"onItemClick($event)\"\n (removeFromList)=\"removeFromUploadedList($event)\">\n </eui-file-preview>\n </div>\n}\n\n@for (file of files; let i = $index; track $index) {\n <div>\n <eui-file-preview\n isFileObject\n [isItemsClickable]=\"isItemsClickable\"\n [index]=\"i\"\n [file]=\"file\"\n [hasPreview]=\"hasPreview\"\n [hasPreviewAsImage]=\"hasPreviewAsImage\"\n [hasPreviewAsIcon]=\"hasPreviewAsIcon\"\n [uploadedFileTemplate]=\"uploadedFileTemplate\"\n (itemClick)=\"onItemClick($event)\"\n (removeFromList)=\"removeFromList($event)\">\n </eui-file-preview>\n </div>\n}\n\n@if (filesTotalSize && hasTotalSizeDisplayed) {\n <div class=\"eui-file-upload__total-size\">\n {{ filesTotalSize | filesize }} {{ 'eui.euifileupload.TOTAL-SIZE' | translate }}\n </div>\n}\n\n<ng-content></ng-content>\n\n@if (showResetBtn) {\n @if (resetButtonTemplate) {\n <ng-template [ngTemplateOutlet]=\"resetButtonTemplate\"></ng-template>\n } @else {\n <button euiButton type=\"button\" (click)=\"resetList()\">\n {{ 'eui.euifileupload.RESET-LIST' | translate }}\n </button>\n }\n}\n", styles: [".eui-18 .eui-file-upload__total-size{margin-bottom:1rem;font:var(--eui-f-m-bold)}.eui-18 .eui-file-upload__drop-area{outline:1px dashed var(--eui-c-info);border-radius:var(--eui-br-m);margin:0 0 10px;padding:30px;position:relative;-webkit-transition:.2s;transition:.2s}.eui-18 .eui-file-upload__drop-area--active{background-color:var(--eui-c-primary-bg);outline:3px dashed var(--eui-c-info);border-radius:var(--eui-br-m);margin:0 0 10px;padding:30px;position:relative;-webkit-transition:.2s;transition:.2s}.eui-18 .eui-file-upload__drop-area--disabled{opacity:.75;cursor:not-allowed}.eui-18 .eui-file-upload__drop-area--disabled .file-input{cursor:default}.eui-18 .eui-file-upload__fake-btn{background-color:#fff;border:var(--eui-bw-xs) solid #9e9ec4;border-radius:var(--eui-br-m);margin-right:8px;padding:8px 15px}.eui-18 .eui-file-upload__file-input{height:100%;left:0;opacity:0;position:absolute;top:0;width:100%}.eui-18 .eui-file-upload__file-input:not(:disabled){cursor:pointer}.eui-18 .eui-file-upload__simple-input-file{margin-bottom:var(--eui-s-xs)}.eui-18 .eui-file-upload__simple-input-file .file-input{display:none}.eui-18 .eui-file-upload__preview{align-items:center;display:flex;justify-content:space-between;margin:5px 0}.eui-18 .eui-file-upload__preview--left{align-items:center;display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eui-18 .eui-file-upload__preview--left__image{margin-right:var(--eui-s-m)}.eui-18 .eui-file-upload__preview--left__image img{width:180px}.eui-18 .eui-file-upload__preview--left__image .loading-container{text-align:center;width:180px}.eui-18 .eui-file-upload__preview--left__filename{display:block}.eui-18 .eui-file-upload__preview--right{align-items:center;display:flex;margin-left:auto}.eui-18 .eui-file-upload__progress-bar-container{margin-bottom:var(--eui-s-2xs)}.eui-18 .eui-file-upload__progress-bar-container .progress-bar{background-color:var(--eui-c-primary);height:var(--eui-s-2xs)}\n"] }]
|
|
372
381
|
}], propDecorators: { e2eAttr: [{
|
|
373
382
|
type: Input
|
|
374
383
|
}], progress: [{
|
|
@@ -384,6 +393,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
384
393
|
}], cssClasses: [{
|
|
385
394
|
type: HostBinding,
|
|
386
395
|
args: ['class']
|
|
396
|
+
}], templates: [{
|
|
397
|
+
type: ContentChildren,
|
|
398
|
+
args: [EuiTemplateDirective]
|
|
387
399
|
}], fileInputs: [{
|
|
388
400
|
type: ViewChildren,
|
|
389
401
|
args: ['input']
|
|
@@ -506,6 +518,39 @@ class EuiFileUploadUtilsService {
|
|
|
506
518
|
toResponseBody() {
|
|
507
519
|
return pipe(filter((event) => event.type === HttpEventType.Response), map((res) => res.body));
|
|
508
520
|
}
|
|
521
|
+
/**
|
|
522
|
+
* Return the icon to be used with eui-icon-svg of the given extension or a default file icon
|
|
523
|
+
* @param fileExtension
|
|
524
|
+
* @returns Icon name as string
|
|
525
|
+
*/
|
|
526
|
+
getIconForExtension(fileExtension) {
|
|
527
|
+
const previewAsIconConfig = {
|
|
528
|
+
avi: 'eui-file-video',
|
|
529
|
+
html: 'eui-file-html',
|
|
530
|
+
htm: 'eui-file-code',
|
|
531
|
+
js: 'eui-file-code',
|
|
532
|
+
json: 'eui-file-code',
|
|
533
|
+
mp3: 'eui-file-audio',
|
|
534
|
+
mp4: 'eui-file-video',
|
|
535
|
+
pdf: 'eui-file-pdf',
|
|
536
|
+
png: 'eui-file-image',
|
|
537
|
+
svg: 'eui-file-image',
|
|
538
|
+
txt: 'eui-file-text',
|
|
539
|
+
xml: 'eui-file-code',
|
|
540
|
+
jpeg: 'eui-file-image',
|
|
541
|
+
jpg: 'eui-file-image',
|
|
542
|
+
zip: 'eui-file-archive',
|
|
543
|
+
doc: 'eui-file-word',
|
|
544
|
+
docx: 'eui-file-word-o',
|
|
545
|
+
xls: 'eui-file-excel-o',
|
|
546
|
+
xlsx: 'eui-file-excel-o',
|
|
547
|
+
ppt: 'eui-file-powerpoint',
|
|
548
|
+
csv: 'eui-file-text',
|
|
549
|
+
rtf: 'eui-file-text',
|
|
550
|
+
};
|
|
551
|
+
const f = fileExtension.toLowerCase();
|
|
552
|
+
return !previewAsIconConfig[f] ? 'eui-file-empty-o' : previewAsIconConfig[f];
|
|
553
|
+
}
|
|
509
554
|
// TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
|
|
510
555
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
511
556
|
toFormData(formValue) {
|
|
@@ -549,16 +594,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImpor
|
|
|
549
594
|
|
|
550
595
|
class EuiFileUploadModule {
|
|
551
596
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
552
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: EuiFileUploadModule, declarations: [EuiFileUploadComponent, EuiFileUploadProgressComponent, EuiFilePreviewComponent, EuiFileSizePipe], imports: [CommonModule, EuiButtonModule, EuiIconModule, TranslateModule], exports: [EuiFileUploadComponent] }); }
|
|
553
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiFileUploadModule, providers: [EuiFileUploadUtilsService], imports: [CommonModule, EuiButtonModule, EuiIconModule, TranslateModule] }); }
|
|
597
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.1", ngImport: i0, type: EuiFileUploadModule, declarations: [EuiFileUploadComponent, EuiFileUploadProgressComponent, EuiFilePreviewComponent, EuiFileSizePipe], imports: [CommonModule, EuiButtonModule, EuiIconModule, TranslateModule, EuiTemplateDirectiveModule], exports: [EuiFileUploadComponent, EuiFileSizePipe, EuiTemplateDirectiveModule] }); }
|
|
598
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiFileUploadModule, providers: [EuiFileUploadUtilsService], imports: [CommonModule, EuiButtonModule, EuiIconModule, TranslateModule, EuiTemplateDirectiveModule, EuiTemplateDirectiveModule] }); }
|
|
554
599
|
}
|
|
555
600
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.1", ngImport: i0, type: EuiFileUploadModule, decorators: [{
|
|
556
601
|
type: NgModule,
|
|
557
602
|
args: [{
|
|
558
|
-
imports: [CommonModule, EuiButtonModule, EuiIconModule, TranslateModule],
|
|
603
|
+
imports: [CommonModule, EuiButtonModule, EuiIconModule, TranslateModule, EuiTemplateDirectiveModule],
|
|
559
604
|
declarations: [EuiFileUploadComponent, EuiFileUploadProgressComponent, EuiFilePreviewComponent, EuiFileSizePipe],
|
|
560
605
|
providers: [EuiFileUploadUtilsService],
|
|
561
|
-
exports: [EuiFileUploadComponent],
|
|
606
|
+
exports: [EuiFileUploadComponent, EuiFileSizePipe, EuiTemplateDirectiveModule],
|
|
562
607
|
}]
|
|
563
608
|
}] });
|
|
564
609
|
|
|
@@ -920,5 +965,5 @@ const validateFileMimeType = (file, mimeTypes) => {
|
|
|
920
965
|
* Generated bundle index. Do not edit.
|
|
921
966
|
*/
|
|
922
967
|
|
|
923
|
-
export { EuiFilePreviewComponent, EuiFileUploadComponent, EuiFileUploadModule, EuiFileUploadProgressComponent, EuiFileUploadUtilsService, asyncMimeTypeExtensionValidator, maxFileSizeValidator, maxFilesValidator, maxSizeValidator, mimeTypeExtensionValidator };
|
|
968
|
+
export { EuiFilePreviewComponent, EuiFileSizePipe, EuiFileUploadComponent, EuiFileUploadModule, EuiFileUploadProgressComponent, EuiFileUploadUtilsService, asyncMimeTypeExtensionValidator, maxFileSizeValidator, maxFilesValidator, maxSizeValidator, mimeTypeExtensionValidator };
|
|
924
969
|
//# sourceMappingURL=eui-components-eui-file-upload.mjs.map
|