@eui/components 18.2.17 → 18.2.19-snapshot-1759231200616
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/changelog.html +20 -0
- package/docs/components/EuiFileUploadComponent.html +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/properties.html +1 -1
- package/esm2022/eui-file-upload/eui-file-upload.component.mjs +8 -6
- package/esm2022/externals/eui-editor/eui-editor.component.mjs +3 -3
- package/eui-file-upload/eui-file-upload.component.d.ts.map +1 -1
- package/fesm2022/eui-components-eui-file-upload.mjs +7 -5
- package/fesm2022/eui-components-eui-file-upload.mjs.map +1 -1
- package/fesm2022/eui-components-externals-eui-editor.mjs +2 -2
- package/fesm2022/eui-components-externals-eui-editor.mjs.map +1 -1
- package/package.json +16 -16
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-file-upload.component.d.ts","sourceRoot":"","sources":["../../eui-file-upload/eui-file-upload.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,UAAU,EAKV,MAAM,EAEN,SAAS,EAET,YAAY,EAEZ,aAAa,EAEb,WAAW,EACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAqB,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;;AAExE,qBAaa,sBAAuB,YAAW,oBAAoB,EAAE,MAAM,EAAE,aAAa;IAC7E,OAAO,SAAqB;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,SAAO;IACb,QAAQ,EAAE,MAAM,CAAC;IAChB,QAAQ,oBAAsB;IAG9B,SAAS,oBAA6D;IAEhF,IACW,UAAU,IAAI,MAAM,CAM9B;IAEM,KAAK,EAAE,IAAI,EAAE,CAAM;IACnB,cAAc,SAAK;IACnB,cAAc,SAAqC;IACnD,aAAa,EAAE,wBAAwB,EAAE,CAAM;IAC/C,WAAW,UAAS;IAEY,SAAS,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAE3D,UAAU,EAAE,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEpE,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,oBAAoB,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAC/C,mBAAmB,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAC9C,mBAAmB,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC,CAAC;IAErC,UAAU,UAAQ;IAClB,cAAc,UAAQ;IACtB,UAAU,UAAQ;IAClB,iBAAiB,UAAQ;IACzB,gBAAgB,UAAS;IACzB,qBAAqB,UAAQ;IAC7B,cAAc,UAAQ;IACtB,WAAW,UAAS;IACpB,gBAAgB,UAAS;IAEhB,SAAS,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;IA2BpF,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,IAAI,kBAAkB,IAAI,OAAO,CAEhC;IAED,IAAI,sBAAsB,IAAI,OAAO,CAEpC;IAED,QAAQ,IAAI,IAAI;IAMhB,eAAe,IAAI,IAAI;IAoBvB,WAAW,IAAI,IAAI;IAMnB,WAAW,IAAI,IAAI;IAInB;;;OAGG;IACI,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAU1C;;;OAGG;IACI,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAWlD;;OAEG;IACI,SAAS,IAAI,IAAI;IAQjB,gBAAgB,IAAI,IAAI;
|
|
1
|
+
{"version":3,"file":"eui-file-upload.component.d.ts","sourceRoot":"","sources":["../../eui-file-upload/eui-file-upload.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,UAAU,EAKV,MAAM,EAEN,SAAS,EAET,YAAY,EAEZ,aAAa,EAEb,WAAW,EACd,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,oBAAoB,EAAqB,MAAM,gBAAgB,CAAC;AAEzE,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;;AAExE,qBAaa,sBAAuB,YAAW,oBAAoB,EAAE,MAAM,EAAE,aAAa;IAC7E,OAAO,SAAqB;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,SAAO;IACb,QAAQ,EAAE,MAAM,CAAC;IAChB,QAAQ,oBAAsB;IAG9B,SAAS,oBAA6D;IAEhF,IACW,UAAU,IAAI,MAAM,CAM9B;IAEM,KAAK,EAAE,IAAI,EAAE,CAAM;IACnB,cAAc,SAAK;IACnB,cAAc,SAAqC;IACnD,aAAa,EAAE,wBAAwB,EAAE,CAAM;IAC/C,WAAW,UAAS;IAEY,SAAS,EAAE,SAAS,CAAC,oBAAoB,CAAC,CAAC;IAE3D,UAAU,EAAE,SAAS,CAAC,UAAU,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEpE,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,oBAAoB,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAC/C,mBAAmB,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAC9C,mBAAmB,EAAE,WAAW,CAAC;QAAE,SAAS,EAAE;YAAE,QAAQ,EAAE,MAAM,CAAA;SAAE,CAAA;KAAE,CAAC,CAAC;IAErC,UAAU,UAAQ;IAClB,cAAc,UAAQ;IACtB,UAAU,UAAQ;IAClB,iBAAiB,UAAQ;IACzB,gBAAgB,UAAS;IACzB,qBAAqB,UAAQ;IAC7B,cAAc,UAAQ;IACtB,WAAW,UAAS;IACpB,gBAAgB,UAAS;IAEhB,SAAS,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI;IA2BpF,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,IAAI,kBAAkB,IAAI,OAAO,CAEhC;IAED,IAAI,sBAAsB,IAAI,OAAO,CAEpC;IAED,QAAQ,IAAI,IAAI;IAMhB,eAAe,IAAI,IAAI;IAoBvB,WAAW,IAAI,IAAI;IAMnB,WAAW,IAAI,IAAI;IAInB;;;OAGG;IACI,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAU1C;;;OAGG;IACI,sBAAsB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAWlD;;OAEG;IACI,SAAS,IAAI,IAAI;IAQjB,gBAAgB,IAAI,IAAI;IAQxB,WAAW,CAAC,CAAC,EAAE,IAAI,GAAG,wBAAwB,GAAG,GAAG,GAAG,IAAI;IAMlE,UAAU,CAAC,KAAK,EAAE,GAAG,GAAG,IAAI;IAQ5B,gBAAgB,CAAC,EAAE,EAAE,GAAG,GAAG,IAAI;IAM/B,iBAAiB,CAAC,EAAE,EAAE,GAAG,GAAG,IAAI;IAIhC,OAAO,CAAC,QAAQ,CAAsD;IAEtE,OAAO,CAAC,YAAY;yCAjMX,sBAAsB;2CAAtB,sBAAsB;yCAwM6h8B,OAAQ;6CAAR,OAAQ;yCAAR,OAAQ;gDAAR,OAAQ;+CAAR,OAAQ;oDAAR,OAAQ;6CAAR,OAAQ;0CAAR,OAAQ;+CAAR,OAAQ;CADvk8B"}
|
|
@@ -267,10 +267,10 @@ class EuiFileUploadComponent {
|
|
|
267
267
|
return this.hasResetButton && this.isMultiple && (this.files.length > 0 || this.uploadedFiles.length > 0);
|
|
268
268
|
}
|
|
269
269
|
get isDropAreaDisabled() {
|
|
270
|
-
return (!this.isMultiple && [...this.uploadedFiles, ...this.files].length
|
|
270
|
+
return (!this.isMultiple && [...this.uploadedFiles, ...this.files].length >= 1) || [...this.uploadedFiles, ...this.files].length === this.maxFiles;
|
|
271
271
|
}
|
|
272
272
|
get isBrowseButtonDisabled() {
|
|
273
|
-
return (!this.isMultiple && [...this.uploadedFiles, ...this.files].length
|
|
273
|
+
return (!this.isMultiple && [...this.uploadedFiles, ...this.files].length >= 1) || [...this.uploadedFiles, ...this.files].length === this.maxFiles;
|
|
274
274
|
}
|
|
275
275
|
ngOnInit() {
|
|
276
276
|
if (this.hasPreviewAsIcon) {
|
|
@@ -339,7 +339,9 @@ class EuiFileUploadComponent {
|
|
|
339
339
|
this.onChange([...this.uploadedFiles, ...this.files]);
|
|
340
340
|
}
|
|
341
341
|
openBrowseWindow() {
|
|
342
|
-
this.
|
|
342
|
+
if (!this.isBrowseButtonDisabled) {
|
|
343
|
+
this.fileInputs.first.nativeElement.click();
|
|
344
|
+
}
|
|
343
345
|
}
|
|
344
346
|
// TODO: find the correct type or turn into a generic, https://www.typescriptlang.org/docs/handbook/2/generics.html
|
|
345
347
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
@@ -374,7 +376,7 @@ class EuiFileUploadComponent {
|
|
|
374
376
|
useExisting: EuiFileUploadComponent,
|
|
375
377
|
multi: true,
|
|
376
378
|
},
|
|
377
|
-
], 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 [attr.disabled]=\"isBrowseButtonDisabled ? 'disabled' : null\" 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 }); }
|
|
379
|
+
], 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\" [class.eui-file-upload__browse-button--disabled]=\"isBrowseButtonDisabled\">\n <label class=\"eui-file-upload__simple-input-file-label\" for=\"file-{{ randomNumberId }}\">\n @if (browseButtonTemplate) {\n <ng-template [ngTemplateOutlet]=\"browseButtonTemplate\"></ng-template>\n } @else {\n <button euiButton [attr.disabled]=\"isBrowseButtonDisabled ? 'disabled' : null\" 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)}.eui-18 .eui-file-upload__browse-button--disabled .eui-file-upload__simple-input-file-label{pointer-events:none}\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 }); }
|
|
378
380
|
}
|
|
379
381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EuiFileUploadComponent, decorators: [{
|
|
380
382
|
type: Component,
|
|
@@ -384,7 +386,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
384
386
|
useExisting: EuiFileUploadComponent,
|
|
385
387
|
multi: true,
|
|
386
388
|
},
|
|
387
|
-
], 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 [attr.disabled]=\"isBrowseButtonDisabled ? 'disabled' : null\" 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"] }]
|
|
389
|
+
], 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\" [class.eui-file-upload__browse-button--disabled]=\"isBrowseButtonDisabled\">\n <label class=\"eui-file-upload__simple-input-file-label\" for=\"file-{{ randomNumberId }}\">\n @if (browseButtonTemplate) {\n <ng-template [ngTemplateOutlet]=\"browseButtonTemplate\"></ng-template>\n } @else {\n <button euiButton [attr.disabled]=\"isBrowseButtonDisabled ? 'disabled' : null\" 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)}.eui-18 .eui-file-upload__browse-button--disabled .eui-file-upload__simple-input-file-label{pointer-events:none}\n"] }]
|
|
388
390
|
}], propDecorators: { e2eAttr: [{
|
|
389
391
|
type: Input
|
|
390
392
|
}], progress: [{
|