@ifsworld/granite-components 12.3.2 → 12.3.4
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/file-upload/file-upload.component.mjs +2 -2
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +19 -7
- package/fesm2022/ifsworld-granite-components.mjs +20 -8
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
- package/lib/progress-bar/progress-bar.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -118,11 +118,11 @@ export class GraniteFileUploadComponent {
|
|
|
118
118
|
return `${parseFloat((bytes / Math.pow(bytesPerKB, exp)).toFixed(decimalPoints))} ${fileSizes[exp]}`;
|
|
119
119
|
}
|
|
120
120
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
121
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", errorIcon: "errorIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: i3.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: i4.GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
|
|
121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", errorIcon: "errorIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: i3.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: i4.GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
|
|
122
122
|
}
|
|
123
123
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, decorators: [{
|
|
124
124
|
type: Component,
|
|
125
|
-
args: [{ selector: 'granite-file-upload', template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"] }]
|
|
125
|
+
args: [{ selector: 'granite-file-upload', template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"] }]
|
|
126
126
|
}], propDecorators: { fileDropRef: [{
|
|
127
127
|
type: ViewChild,
|
|
128
128
|
args: ['fileDropRef', { read: ElementRef }]
|
|
@@ -10,6 +10,7 @@ import * as i7 from "./progress-bar-legend-trigger-for.directive";
|
|
|
10
10
|
export class GraniteProgressBarComponent {
|
|
11
11
|
constructor() {
|
|
12
12
|
this.progressBarData = [];
|
|
13
|
+
this.legendData = [];
|
|
13
14
|
this.showLabel = false;
|
|
14
15
|
this.showLegend = false;
|
|
15
16
|
this.DEFAULT_TOTAL = 100;
|
|
@@ -51,30 +52,41 @@ export class GraniteProgressBarComponent {
|
|
|
51
52
|
return this.progressBarData.reduce((acc, curr) => acc + curr.value, 0);
|
|
52
53
|
}
|
|
53
54
|
setLegendItems() {
|
|
54
|
-
this.legendItems =
|
|
55
|
+
this.legendItems =
|
|
56
|
+
this.legendData.length > 0
|
|
57
|
+
? this.getLegendItems(this.legendData)
|
|
58
|
+
: this.getLegendItems(this.progressBarData);
|
|
59
|
+
}
|
|
60
|
+
getLegendItems(data) {
|
|
61
|
+
return data.map(({ label, backgroundColor, }) => {
|
|
55
62
|
const legendItemColor = this.getStackColor(backgroundColor);
|
|
56
63
|
return { label, backgroundColor: legendItemColor };
|
|
57
64
|
});
|
|
58
65
|
}
|
|
59
66
|
ngOnChanges(changes) {
|
|
60
|
-
if (changes.progressBarData
|
|
61
|
-
JSON.stringify(changes.progressBarData.currentValue) !==
|
|
62
|
-
JSON.stringify(changes.progressBarData.previousValue)) {
|
|
67
|
+
if (changes.progressBarData) {
|
|
63
68
|
this.checkStackTotal();
|
|
64
69
|
this.setLegendItems();
|
|
65
70
|
}
|
|
71
|
+
if (changes.legendData) {
|
|
72
|
+
this.setLegendItems();
|
|
73
|
+
}
|
|
66
74
|
}
|
|
67
75
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
68
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", showLabel: "showLabel", showLegend: "showLegend" }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;
|
|
76
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", legendData: "legendData", showLabel: "showLabel", showLegend: "showLegend" }, host: { properties: { "class.label-present": "showLabel" } }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\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"] }, { kind: "directive", type: i2.GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"] }, { kind: "component", type: i3.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3.GraniteTooltipTriggerForDirective, selector: "[graniteTooltipTriggerFor]", inputs: ["graniteTooltipTriggerFor", "hideDelay", "showDelay", "showOnKeyboardFocus", "showOnClick"] }, { kind: "component", type: i4.GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "component", type: i5.GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: i6.GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: ["legendItems"] }, { kind: "directive", type: i7.GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: ["graniteProgressBarLegendTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
69
77
|
}
|
|
70
78
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
71
79
|
type: Component,
|
|
72
|
-
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar',
|
|
80
|
+
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', host: {
|
|
81
|
+
'[class.label-present]': 'showLabel',
|
|
82
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"] }]
|
|
73
83
|
}], propDecorators: { progressBarData: [{
|
|
74
84
|
type: Input
|
|
85
|
+
}], legendData: [{
|
|
86
|
+
type: Input
|
|
75
87
|
}], showLabel: [{
|
|
76
88
|
type: Input
|
|
77
89
|
}], showLegend: [{
|
|
78
90
|
type: Input
|
|
79
91
|
}] } });
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
92
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMvZ3Jhbml0ZS1jb21wb25lbnRzL3NyYy9saWIvcHJvZ3Jlc3MtYmFyL3Byb2dyZXNzLWJhci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzL2dyYW5pdGUtY29tcG9uZW50cy9zcmMvbGliL3Byb2dyZXNzLWJhci9wcm9ncmVzcy1iYXIuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsS0FBSyxHQUdOLE1BQU0sZUFBZSxDQUFDOzs7Ozs7Ozs7QUFnQnZCLE1BQU0sT0FBTywyQkFBMkI7SUFWeEM7UUFZRSxvQkFBZSxHQUErQixFQUFFLENBQUM7UUFHakQsZUFBVSxHQUFxQyxFQUFFLENBQUM7UUFHbEQsY0FBUyxHQUFZLEtBQUssQ0FBQztRQUczQixlQUFVLEdBQVksS0FBSyxDQUFDO1FBRTVCLGtCQUFhLEdBQUcsR0FBRyxDQUFDO1FBQ3BCLHVCQUFrQixHQUFHLHFDQUFxQyxDQUFDO1FBQzNELHdCQUFtQixHQUFHLCtCQUErQixDQUFDO1FBQ3RELGtCQUFhLEdBQUcsc0JBQXNCLENBQUM7UUFFdkMsVUFBSyxHQUFXLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDbkMsZ0JBQVcsR0FBcUMsRUFBRSxDQUFDO0tBMkVwRDtJQXpFQyxrQkFBa0I7UUFDaEIsT0FBTyxJQUFJLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFFRCxZQUFZLENBQUMsS0FBYTtRQUN4QixPQUFPLEtBQUs7WUFDVixDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUM7WUFDekIsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFRCxhQUFhLENBQUMsS0FBYTtRQUN6QixPQUFPLEtBQUs7WUFDVixDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUM7WUFDekIsQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLG1CQUFtQixDQUFDLENBQUM7SUFDakQsQ0FBQztJQUVELFdBQVcsQ0FBQyxLQUFhO1FBQ3ZCLE9BQU8sS0FBSyxFQUFFLFVBQVUsQ0FBQyxXQUFXLENBQUMsQ0FBQyxDQUFDLENBQUMsT0FBTyxLQUFLLEdBQUcsQ0FBQyxDQUFDLENBQUMsS0FBSyxDQUFDO0lBQ2xFLENBQUM7SUFFRCxRQUFRLENBQUMsS0FBYTtRQUNwQixPQUFPLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsR0FBRyxHQUFHLENBQUM7SUFDcEMsQ0FBQztJQUVELGdCQUFnQixDQUFDLEtBQWE7UUFDNUIsT0FBTyxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsR0FBRyxDQUFDO0lBQzdCLENBQUM7SUFFRCxlQUFlO1FBQ2IsTUFBTSxvQkFBb0IsR0FBRyxJQUFJLENBQUMsYUFBYSxFQUFFLENBQUM7UUFDbEQsSUFBSSxvQkFBb0IsR0FBRyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUM7WUFDdEMsSUFBSSxDQUFDLEtBQUssR0FBRyxvQkFBb0IsQ0FBQztRQUNwQyxDQUFDO0lBQ0gsQ0FBQztJQUVELGFBQWE7UUFDWCxPQUFPLElBQUksQ0FBQyxlQUFlLENBQUMsTUFBTSxDQUFDLENBQUMsR0FBRyxFQUFFLElBQUksRUFBRSxFQUFFLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7SUFDekUsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsV0FBVztZQUNkLElBQUksQ0FBQyxVQUFVLENBQUMsTUFBTSxHQUFHLENBQUM7Z0JBQ3hCLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUM7Z0JBQ3RDLENBQUMsQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQztJQUNsRCxDQUFDO0lBRUQsY0FBYyxDQUNaLElBQW1FO1FBRW5FLE9BQU8sSUFBSSxDQUFDLEdBQUcsQ0FDYixDQUFDLEVBQ0MsS0FBSyxFQUNMLGVBQWUsR0FJaEIsRUFBRSxFQUFFO1lBQ0gsTUFBTSxlQUFlLEdBQUcsSUFBSSxDQUFDLGFBQWEsQ0FBQyxlQUFlLENBQUMsQ0FBQztZQUM1RCxPQUFPLEVBQUUsS0FBSyxFQUFFLGVBQWUsRUFBRSxlQUFlLEVBQUUsQ0FBQztRQUNyRCxDQUFDLENBQ0YsQ0FBQztJQUNKLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDaEMsSUFBSSxPQUFPLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDNUIsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO1lBQ3ZCLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztRQUN4QixDQUFDO1FBRUQsSUFBSSxPQUFPLENBQUMsVUFBVSxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGNBQWMsRUFBRSxDQUFDO1FBQ3hCLENBQUM7SUFDSCxDQUFDOzhHQTdGVSwyQkFBMkI7a0dBQTNCLDJCQUEyQiw2U0N0QnhDLDYvQkFrQ0E7OzJGRFphLDJCQUEyQjtrQkFWdkMsU0FBUzsrQkFDRSxzQkFBc0IsWUFDdEIsb0JBQW9CLFFBR3hCO3dCQUNKLHVCQUF1QixFQUFFLFdBQVc7cUJBQ3JDLG1CQUNnQix1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQyxlQUFlO3NCQURkLEtBQUs7Z0JBSU4sVUFBVTtzQkFEVCxLQUFLO2dCQUlOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT25DaGFuZ2VzLFxuICBTaW1wbGVDaGFuZ2VzLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7XG4gIEdyYW5pdGVQcm9ncmVzc0ludGVyZmFjZSxcbiAgR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlLFxufSBmcm9tICcuL3Byb2dyZXNzLWJhci5tb2RlbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYW5pdGUtcHJvZ3Jlc3MtYmFyJyxcbiAgZXhwb3J0QXM6ICdncmFuaXRlUHJvZ3Jlc3NCYXInLFxuICB0ZW1wbGF0ZVVybDogJy4vcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vcHJvZ3Jlc3MtYmFyLmNvbXBvbmVudC5zY3NzJ10sXG4gIGhvc3Q6IHtcbiAgICAnW2NsYXNzLmxhYmVsLXByZXNlbnRdJzogJ3Nob3dMYWJlbCcsXG4gIH0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBHcmFuaXRlUHJvZ3Jlc3NCYXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICBASW5wdXQoKVxuICBwcm9ncmVzc0JhckRhdGE6IEdyYW5pdGVQcm9ncmVzc0ludGVyZmFjZVtdID0gW107XG5cbiAgQElucHV0KClcbiAgbGVnZW5kRGF0YTogR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlW10gPSBbXTtcblxuICBASW5wdXQoKVxuICBzaG93TGFiZWw6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBzaG93TGVnZW5kOiBib29sZWFuID0gZmFsc2U7XG5cbiAgREVGQVVMVF9UT1RBTCA9IDEwMDtcbiAgREVGQVVMVF9CQUNLR1JPVU5EID0gJy0tZ3Jhbml0ZS1jb2xvci1iYWNrZ3JvdW5kLXNlbGVjdGVkJztcbiAgREVGQVVMVF9TVEFDS19DT0xPUiA9ICctLWdyYW5pdGUtY29sb3ItY2F0ZWdvcmljYWwtMyc7XG4gIERFRkFVTFRfQ09MT1IgPSAnLS1ncmFuaXRlLWNvbG9yLXRleHQnO1xuXG4gIHRvdGFsOiBudW1iZXIgPSB0aGlzLkRFRkFVTFRfVE9UQUw7XG4gIGxlZ2VuZEl0ZW1zOiBHcmFuaXRlUHJvZ3Jlc3NMZWdlbmRJbnRlcmZhY2VbXSA9IFtdO1xuXG4gIGdldEJhY2tncm91bmRDb2xvcigpOiBzdHJpbmcge1xuICAgIHJldHVybiB0aGlzLmdldENvbG9yVmFyKHRoaXMuREVGQVVMVF9CQUNLR1JPVU5EKTtcbiAgfVxuXG4gIGdldEZvbnRDb2xvcihjb2xvcjogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gY29sb3JcbiAgICAgID8gdGhpcy5nZXRDb2xvclZhcihjb2xvcilcbiAgICAgIDogdGhpcy5nZXRDb2xvclZhcih0aGlzLkRFRkFVTFRfQ09MT1IpO1xuICB9XG5cbiAgZ2V0U3RhY2tDb2xvcihjb2xvcjogc3RyaW5nKTogc3RyaW5nIHtcbiAgICByZXR1cm4gY29sb3JcbiAgICAgID8gdGhpcy5nZXRDb2xvclZhcihjb2xvcilcbiAgICAgIDogdGhpcy5nZXRDb2xvclZhcih0aGlzLkRFRkFVTFRfU1RBQ0tfQ09MT1IpO1xuICB9XG5cbiAgZ2V0Q29sb3JWYXIoY29sb3I6IHN0cmluZyk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGNvbG9yPy5zdGFydHNXaXRoKCctLWdyYW5pdGUnKSA/IGB2YXIoJHtjb2xvcn0pYCA6IGNvbG9yO1xuICB9XG5cbiAgZ2V0V2lkdGgodmFsdWU6IG51bWJlcik6IG51bWJlciB7XG4gICAgcmV0dXJuICh2YWx1ZSAvIHRoaXMudG90YWwpICogMTAwO1xuICB9XG5cbiAgZ2V0U3RyaW5nT2ZXaWR0aCh3aWR0aDogbnVtYmVyKTogc3RyaW5nIHtcbiAgICByZXR1cm4gU3RyaW5nKHdpZHRoKSArICclJztcbiAgfVxuXG4gIGNoZWNrU3RhY2tUb3RhbCgpOiB2b2lkIHtcbiAgICBjb25zdCB0b3RhbE9mU3RhY2tlZFZhbHVlcyA9IHRoaXMuZ2V0U3RhY2tUb3RhbCgpO1xuICAgIGlmICh0b3RhbE9mU3RhY2tlZFZhbHVlcyA+IHRoaXMudG90YWwpIHtcbiAgICAgIHRoaXMudG90YWwgPSB0b3RhbE9mU3RhY2tlZFZhbHVlcztcbiAgICB9XG4gIH1cblxuICBnZXRTdGFja1RvdGFsKCk6IG51bWJlciB7XG4gICAgcmV0dXJuIHRoaXMucHJvZ3Jlc3NCYXJEYXRhLnJlZHVjZSgoYWNjLCBjdXJyKSA9PiBhY2MgKyBjdXJyLnZhbHVlLCAwKTtcbiAgfVxuXG4gIHNldExlZ2VuZEl0ZW1zKCk6IHZvaWQge1xuICAgIHRoaXMubGVnZW5kSXRlbXMgPVxuICAgICAgdGhpcy5sZWdlbmREYXRhLmxlbmd0aCA+IDBcbiAgICAgICAgPyB0aGlzLmdldExlZ2VuZEl0ZW1zKHRoaXMubGVnZW5kRGF0YSlcbiAgICAgICAgOiB0aGlzLmdldExlZ2VuZEl0ZW1zKHRoaXMucHJvZ3Jlc3NCYXJEYXRhKTtcbiAgfVxuXG4gIGdldExlZ2VuZEl0ZW1zKFxuICAgIGRhdGE6IEdyYW5pdGVQcm9ncmVzc0ludGVyZmFjZVtdIHwgR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlW11cbiAgKTogR3Jhbml0ZVByb2dyZXNzTGVnZW5kSW50ZXJmYWNlW10ge1xuICAgIHJldHVybiBkYXRhLm1hcChcbiAgICAgICh7XG4gICAgICAgIGxhYmVsLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3IsXG4gICAgICB9OiB7XG4gICAgICAgIGxhYmVsPzogc3RyaW5nO1xuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I/OiBzdHJpbmc7XG4gICAgICB9KSA9PiB7XG4gICAgICAgIGNvbnN0IGxlZ2VuZEl0ZW1Db2xvciA9IHRoaXMuZ2V0U3RhY2tDb2xvcihiYWNrZ3JvdW5kQ29sb3IpO1xuICAgICAgICByZXR1cm4geyBsYWJlbCwgYmFja2dyb3VuZENvbG9yOiBsZWdlbmRJdGVtQ29sb3IgfTtcbiAgICAgIH1cbiAgICApO1xuICB9XG5cbiAgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcyk6IHZvaWQge1xuICAgIGlmIChjaGFuZ2VzLnByb2dyZXNzQmFyRGF0YSkge1xuICAgICAgdGhpcy5jaGVja1N0YWNrVG90YWwoKTtcbiAgICAgIHRoaXMuc2V0TGVnZW5kSXRlbXMoKTtcbiAgICB9XG5cbiAgICBpZiAoY2hhbmdlcy5sZWdlbmREYXRhKSB7XG4gICAgICB0aGlzLnNldExlZ2VuZEl0ZW1zKCk7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2XG4gIHJvbGU9XCJwcm9ncmVzc2JhclwiXG4gIGFyaWEtdmFsdWVtaW49XCIwXCJcbiAgYXJpYS12YWx1ZW1heD1cIjEwMFwiXG4gIGNsYXNzPVwicHJvZ3Jlc3NcIlxuICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJnZXRCYWNrZ3JvdW5kQ29sb3IoKVwiXG4+XG4gIDxkaXZcbiAgICAqbmdGb3I9XCJsZXQgYmFyIG9mIHByb2dyZXNzQmFyRGF0YTsgbGV0IGkgPSBpbmRleFwiXG4gICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiZ2V0U3RhY2tDb2xvcihiYXIuYmFja2dyb3VuZENvbG9yKVwiXG4gICAgW3N0eWxlLndpZHRoXT1cImdldFN0cmluZ09mV2lkdGgoZ2V0V2lkdGgoYmFyLnZhbHVlKSlcIlxuICAgIFtzdHlsZS5jb2xvcl09XCJnZXRGb250Q29sb3IoYmFyLmZvcmVncm91bmRDb2xvcilcIlxuICAgIFtncmFuaXRlVG9vbHRpcFRyaWdnZXJGb3JdPVwidG9vbHRpcFwiXG4gICAgY2xhc3M9XCJwcm9ncmVzcy1iYXJcIlxuICA+XG4gICAgPGxhYmVsICpuZ0lmPVwic2hvd0xhYmVsXCIgZ3Jhbml0ZUhpZGVPbk92ZXJmbG93Pnt7IGJhci52YWx1ZUxhYmVsIH19PC9sYWJlbD5cbiAgICA8Z3Jhbml0ZS10b29sdGlwICN0b29sdGlwPiB7eyBiYXIudmFsdWVMYWJlbCB9fSA8L2dyYW5pdGUtdG9vbHRpcD5cbiAgPC9kaXY+XG48L2Rpdj5cblxuPG5nLWNvbnRhaW5lciAqbmdJZj1cInNob3dMZWdlbmRcIj5cbiAgPGJ1dHRvblxuICAgIGdyYW5pdGVGbGF0QnV0dG9uXG4gICAgW2dyYW5pdGVQcm9ncmVzc0JhckxlZ2VuZFRyaWdnZXJGb3JdPVwibGVnZW5kXCJcbiAgICBjbGFzcz1cImxlZ2VuZC1idG5cIlxuICA+XG4gICAgPGdyYW5pdGUtaWNvbiBmb250SWNvbj1cImljb24tY2FyZXQtZG93blwiPjwvZ3Jhbml0ZS1pY29uPlxuICA8L2J1dHRvbj5cbjwvbmctY29udGFpbmVyPlxuXG48Z3Jhbml0ZS1wcm9ncmVzcy1iYXItbGVnZW5kXG4gICNsZWdlbmRcbiAgW2xlZ2VuZEl0ZW1zXT1cImxlZ2VuZEl0ZW1zXCJcbj48L2dyYW5pdGUtcHJvZ3Jlc3MtYmFyLWxlZ2VuZD5cbiJdfQ==
|
|
@@ -4680,6 +4680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
4680
4680
|
class GraniteProgressBarComponent {
|
|
4681
4681
|
constructor() {
|
|
4682
4682
|
this.progressBarData = [];
|
|
4683
|
+
this.legendData = [];
|
|
4683
4684
|
this.showLabel = false;
|
|
4684
4685
|
this.showLegend = false;
|
|
4685
4686
|
this.DEFAULT_TOTAL = 100;
|
|
@@ -4721,27 +4722,38 @@ class GraniteProgressBarComponent {
|
|
|
4721
4722
|
return this.progressBarData.reduce((acc, curr) => acc + curr.value, 0);
|
|
4722
4723
|
}
|
|
4723
4724
|
setLegendItems() {
|
|
4724
|
-
this.legendItems =
|
|
4725
|
+
this.legendItems =
|
|
4726
|
+
this.legendData.length > 0
|
|
4727
|
+
? this.getLegendItems(this.legendData)
|
|
4728
|
+
: this.getLegendItems(this.progressBarData);
|
|
4729
|
+
}
|
|
4730
|
+
getLegendItems(data) {
|
|
4731
|
+
return data.map(({ label, backgroundColor, }) => {
|
|
4725
4732
|
const legendItemColor = this.getStackColor(backgroundColor);
|
|
4726
4733
|
return { label, backgroundColor: legendItemColor };
|
|
4727
4734
|
});
|
|
4728
4735
|
}
|
|
4729
4736
|
ngOnChanges(changes) {
|
|
4730
|
-
if (changes.progressBarData
|
|
4731
|
-
JSON.stringify(changes.progressBarData.currentValue) !==
|
|
4732
|
-
JSON.stringify(changes.progressBarData.previousValue)) {
|
|
4737
|
+
if (changes.progressBarData) {
|
|
4733
4738
|
this.checkStackTotal();
|
|
4734
4739
|
this.setLegendItems();
|
|
4735
4740
|
}
|
|
4741
|
+
if (changes.legendData) {
|
|
4742
|
+
this.setLegendItems();
|
|
4743
|
+
}
|
|
4736
4744
|
}
|
|
4737
4745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", showLabel: "showLabel", showLegend: "showLegend" }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;
|
|
4746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteProgressBarComponent, selector: "granite-progress-bar", inputs: { progressBarData: "progressBarData", legendData: "legendData", showLabel: "showLabel", showLegend: "showLegend" }, host: { properties: { "class.label-present": "showLabel" } }, exportAs: ["graniteProgressBar"], usesOnChanges: true, ngImport: i0, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: GraniteHideOnOverflowDirective, selector: "[graniteHideOnOverflow]", exportAs: ["graniteHideOnOverflow"] }, { kind: "component", type: i3.GraniteTooltipComponent, selector: "granite-tooltip" }, { kind: "directive", type: i3.GraniteTooltipTriggerForDirective, selector: "[graniteTooltipTriggerFor]", inputs: ["graniteTooltipTriggerFor", "hideDelay", "showDelay", "showOnKeyboardFocus", "showOnClick"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteProgressBarLegendComponent, selector: "granite-progress-bar-legend", inputs: ["legendItems"] }, { kind: "directive", type: GraniteProgressBarLegendTriggerForDirective, selector: "[graniteProgressBarLegendTriggerFor]", inputs: ["graniteProgressBarLegendTriggerFor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4739
4747
|
}
|
|
4740
4748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteProgressBarComponent, decorators: [{
|
|
4741
4749
|
type: Component,
|
|
4742
|
-
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar',
|
|
4750
|
+
args: [{ selector: 'granite-progress-bar', exportAs: 'graniteProgressBar', host: {
|
|
4751
|
+
'[class.label-present]': 'showLabel',
|
|
4752
|
+
}, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"100\"\n class=\"progress\"\n [style.background-color]=\"getBackgroundColor()\"\n>\n <div\n *ngFor=\"let bar of progressBarData; let i = index\"\n [style.background-color]=\"getStackColor(bar.backgroundColor)\"\n [style.width]=\"getStringOfWidth(getWidth(bar.value))\"\n [style.color]=\"getFontColor(bar.foregroundColor)\"\n [graniteTooltipTriggerFor]=\"tooltip\"\n class=\"progress-bar\"\n >\n <label *ngIf=\"showLabel\" graniteHideOnOverflow>{{ bar.valueLabel }}</label>\n <granite-tooltip #tooltip> {{ bar.valueLabel }} </granite-tooltip>\n </div>\n</div>\n\n<ng-container *ngIf=\"showLegend\">\n <button\n graniteFlatButton\n [graniteProgressBarLegendTriggerFor]=\"legend\"\n class=\"legend-btn\"\n >\n <granite-icon fontIcon=\"icon-caret-down\"></granite-icon>\n </button>\n</ng-container>\n\n<granite-progress-bar-legend\n #legend\n [legendItems]=\"legendItems\"\n></granite-progress-bar-legend>\n", styles: [":host{width:100%;display:flex;align-items:center;box-sizing:border-box;height:.5rem;border-radius:var(--granite-radius-m);font-size:var(--granite-font-size-body-small);line-height:var(--granite-font-size-body-small)}:host(.label-present){height:auto!important}.progress{display:flex;width:inherit;height:inherit;overflow:hidden;border-radius:inherit;background-color:var(--granite-color-background-selected)}.progress-bar{display:flex;align-items:center;box-sizing:border-box;width:inherit;height:inherit;line-height:inherit;font-size:inherit;vertical-align:middle;text-overflow:ellipsis;white-space:nowrap;color:var(--granite-color-text);overflow:hidden;text-align:center;justify-content:center}.progress-bar label{width:100%;padding:var(--granite-spacing-4) 0}.legend-btn{width:16px;height:16px;margin-inline-start:var(--granite-spacing-16)}\n"] }]
|
|
4743
4753
|
}], propDecorators: { progressBarData: [{
|
|
4744
4754
|
type: Input
|
|
4755
|
+
}], legendData: [{
|
|
4756
|
+
type: Input
|
|
4745
4757
|
}], showLabel: [{
|
|
4746
4758
|
type: Input
|
|
4747
4759
|
}], showLegend: [{
|
|
@@ -5369,11 +5381,11 @@ class GraniteFileUploadComponent {
|
|
|
5369
5381
|
return `${parseFloat((bytes / Math.pow(bytesPerKB, exp)).toFixed(decimalPoints))} ${fileSizes[exp]}`;
|
|
5370
5382
|
}
|
|
5371
5383
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5372
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", errorIcon: "errorIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
|
|
5384
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", errorIcon: "errorIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
|
|
5373
5385
|
}
|
|
5374
5386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, decorators: [{
|
|
5375
5387
|
type: Component,
|
|
5376
|
-
args: [{ selector: 'granite-file-upload', template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"] }]
|
|
5388
|
+
args: [{ selector: 'granite-file-upload', template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"] }]
|
|
5377
5389
|
}], propDecorators: { fileDropRef: [{
|
|
5378
5390
|
type: ViewChild,
|
|
5379
5391
|
args: ['fileDropRef', { read: ElementRef }]
|