@ifsworld/granite-components 13.1.0 → 13.2.0
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/collapsible-group/collapsible-group.component.mjs +3 -3
- package/esm2022/lib/file-upload/file-upload.component.mjs +15 -8
- package/esm2022/lib/file-upload/file-upload.constants.mjs +1 -2
- package/fesm2022/ifsworld-granite-components.mjs +15 -9
- package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
- package/lib/file-upload/file-upload.component.d.ts +2 -2
- package/lib/file-upload/file-upload.constants.d.ts +0 -1
- package/package.json +1 -1
|
@@ -5312,7 +5312,6 @@ const DEFAULT_ACCEPT_TYPE = '*.*';
|
|
|
5312
5312
|
const DEFAULT_UPLOAD_TITLE = 'Upload Files';
|
|
5313
5313
|
const DEFAULT_UPLOAD_ICON = 'icon-upload';
|
|
5314
5314
|
const DEFAULT_FILE_BROWSE_BUTTON_ICON = 'icon-folder-alt';
|
|
5315
|
-
const DEFAULT_UPLOAD_FAILURE_ICON = 'icon-error';
|
|
5316
5315
|
const DEFAULT_DROPZONE_TEXT = 'Drop here or';
|
|
5317
5316
|
const DEFAULT_BROWSE_BUTTON_TEXT = 'Browse';
|
|
5318
5317
|
const DEFAULT_DROP_PLACEHOLDER_TEXT = 'Drop files here';
|
|
@@ -5439,7 +5438,6 @@ class GraniteFileUploadComponent {
|
|
|
5439
5438
|
this.uploadTitle = DEFAULT_UPLOAD_TITLE;
|
|
5440
5439
|
this.uploadIcon = DEFAULT_UPLOAD_ICON;
|
|
5441
5440
|
this.browseIcon = DEFAULT_FILE_BROWSE_BUTTON_ICON;
|
|
5442
|
-
this.errorIcon = DEFAULT_UPLOAD_FAILURE_ICON;
|
|
5443
5441
|
this.dropZoneText = DEFAULT_DROPZONE_TEXT;
|
|
5444
5442
|
this.browseButtonText = DEFAULT_BROWSE_BUTTON_TEXT;
|
|
5445
5443
|
this.dropPlaceholderText = DEFAULT_DROP_PLACEHOLDER_TEXT;
|
|
@@ -5520,7 +5518,9 @@ class GraniteFileUploadComponent {
|
|
|
5520
5518
|
return files.map((file) => ({
|
|
5521
5519
|
file,
|
|
5522
5520
|
readableSize: this.formatBytesToReadableSize(file.size, 2),
|
|
5523
|
-
imageUrl:
|
|
5521
|
+
imageUrl: file.type.startsWith('image/')
|
|
5522
|
+
? URL.createObjectURL(file)
|
|
5523
|
+
: null,
|
|
5524
5524
|
}));
|
|
5525
5525
|
}
|
|
5526
5526
|
uploadFiles() {
|
|
@@ -5534,6 +5534,14 @@ class GraniteFileUploadComponent {
|
|
|
5534
5534
|
this.fileRemoveHandler(i);
|
|
5535
5535
|
}
|
|
5536
5536
|
}
|
|
5537
|
+
resetFileUpload() {
|
|
5538
|
+
this.fileDropRef.nativeElement.value = null;
|
|
5539
|
+
this.fileError = false;
|
|
5540
|
+
this.fileDropErrorType = '';
|
|
5541
|
+
this.selectedFiles = [];
|
|
5542
|
+
this.previewReadyFiles = [];
|
|
5543
|
+
this.uploadStatus = FileUploadStatus.NotStarted;
|
|
5544
|
+
}
|
|
5537
5545
|
formatBytesToReadableSize(bytes, decimals) {
|
|
5538
5546
|
if (bytes === 0) {
|
|
5539
5547
|
return `0 ${fileSizes[0]}`;
|
|
@@ -5544,11 +5552,11 @@ class GraniteFileUploadComponent {
|
|
|
5544
5552
|
return `${parseFloat((bytes / Math.pow(bytesPerKB, exp)).toFixed(decimalPoints))} ${fileSizes[exp]}`;
|
|
5545
5553
|
}
|
|
5546
5554
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5547
|
-
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"] }] }); }
|
|
5555
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", 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 [ngClass]=\"{ 'upload-failed': uploadStatus === FileUploadStatus.Failed }\"\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 @if (!isFileOnDropzone && !fileError) {\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 @if (previewFile?.imageUrl) {\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 <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n [ngTemplateOutlet]=\"uploadFailedOverlay\"\n >\n </ng-container>\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 } @else {\n <div\n class=\"document-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n >\n <div class=\"document-preview-holder\">\n <granite-icon\n class=\"document-file-preview\"\n [class.upload-failed]=\"\n uploadStatus === FileUploadStatus.Failed\n \"\n [fontIcon]=\"'icon-document-alt'\"\n ></granite-icon>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\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 </div>\n }\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 } @else {\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n }\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\n<ng-template #uploadingOverlay>\n <div class=\"file-preview-overlay\"></div>\n <div class=\"loading-container\">\n <div class=\"uploading-spinner\"></div>\n </div>\n</ng-template>\n\n<ng-template #uploadFailedOverlay>\n <div class=\"file-preview-overlay\"></div>\n</ng-template>\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.upload-failed{border-color:var(--granite-color-categorical-4)}.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:calc(var(--granite-line-height-base-rem) * 1.125);text-align:center;color:var(--granite-color-text-hint);margin:calc(var(--granite-spacing-base-rem) * .625) 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:calc(var(--granite-spacing-base-rem) * .375)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration: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{display:flex;justify-content:center;align-items:flex-end;position:relative;width:80px;height:114px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(250%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .file-preview-overlay{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-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 .file-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder img{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.2}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder img,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-size{opacity:.4}.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:calc(var(--granite-spacing-base-rem) * .375) 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:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-link);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:60px;height:60px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview{font-size:calc(var(--granite-font-size-body) * 3);color:var(--granite-color-text-hint);padding:calc(var(--granite-spacing-4) * 3) 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview.upload-failed{color:var(--granite-color-background-failure)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-10%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-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 .document-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .document-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .document-file-preview,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-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-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-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:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-week);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.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: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
5548
5556
|
}
|
|
5549
5557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, decorators: [{
|
|
5550
5558
|
type: Component,
|
|
5551
|
-
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"] }]
|
|
5559
|
+
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 [ngClass]=\"{ 'upload-failed': uploadStatus === FileUploadStatus.Failed }\"\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 @if (!isFileOnDropzone && !fileError) {\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 @if (previewFile?.imageUrl) {\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 <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n [ngTemplateOutlet]=\"uploadFailedOverlay\"\n >\n </ng-container>\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 } @else {\n <div\n class=\"document-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n >\n <div class=\"document-preview-holder\">\n <granite-icon\n class=\"document-file-preview\"\n [class.upload-failed]=\"\n uploadStatus === FileUploadStatus.Failed\n \"\n [fontIcon]=\"'icon-document-alt'\"\n ></granite-icon>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\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 </div>\n }\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 } @else {\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n }\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\n<ng-template #uploadingOverlay>\n <div class=\"file-preview-overlay\"></div>\n <div class=\"loading-container\">\n <div class=\"uploading-spinner\"></div>\n </div>\n</ng-template>\n\n<ng-template #uploadFailedOverlay>\n <div class=\"file-preview-overlay\"></div>\n</ng-template>\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.upload-failed{border-color:var(--granite-color-categorical-4)}.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:calc(var(--granite-line-height-base-rem) * 1.125);text-align:center;color:var(--granite-color-text-hint);margin:calc(var(--granite-spacing-base-rem) * .625) 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:calc(var(--granite-spacing-base-rem) * .375)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration: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{display:flex;justify-content:center;align-items:flex-end;position:relative;width:80px;height:114px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(250%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .file-preview-overlay{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-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 .file-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder img{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.2}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder img,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-size{opacity:.4}.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:calc(var(--granite-spacing-base-rem) * .375) 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:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-link);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:60px;height:60px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview{font-size:calc(var(--granite-font-size-body) * 3);color:var(--granite-color-text-hint);padding:calc(var(--granite-spacing-4) * 3) 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview.upload-failed{color:var(--granite-color-background-failure)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-10%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-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 .document-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .document-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .document-file-preview,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-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-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-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:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-week);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.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"] }]
|
|
5552
5560
|
}], propDecorators: { fileDropRef: [{
|
|
5553
5561
|
type: ViewChild,
|
|
5554
5562
|
args: ['fileDropRef', { read: ElementRef }]
|
|
@@ -5560,8 +5568,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
|
|
|
5560
5568
|
type: Input
|
|
5561
5569
|
}], browseIcon: [{
|
|
5562
5570
|
type: Input
|
|
5563
|
-
}], errorIcon: [{
|
|
5564
|
-
type: Input
|
|
5565
5571
|
}], dropZoneText: [{
|
|
5566
5572
|
type: Input
|
|
5567
5573
|
}], browseButtonText: [{
|
|
@@ -5648,11 +5654,11 @@ class GraniteCollapsibleGroupComponent {
|
|
|
5648
5654
|
this.collapsedChanged.emit(this.collapsed);
|
|
5649
5655
|
}
|
|
5650
5656
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCollapsibleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5651
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCollapsibleGroupComponent, selector: "granite-collapsible-group", inputs: { collapsed: "collapsed", id: "id", arialabel: "arialabel" }, outputs: { collapsedChanged: "collapsedChanged" }, queries: [{ propertyName: "conditionalBodyContentRef", first: true, predicate: GraniteCollapsibleConditionalBodyDirective, descendants: true }, { propertyName: "conditionalHeaderContentRef", first: true, predicate: GraniteCollapsibleConditionalHeaderDirective, descendants: true }], ngImport: i0, template: "<div class=\"collapsible-wrapper\">\n <div\n class=\"collapsible-group-header\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon
|
|
5657
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCollapsibleGroupComponent, selector: "granite-collapsible-group", inputs: { collapsed: "collapsed", id: "id", arialabel: "arialabel" }, outputs: { collapsedChanged: "collapsedChanged" }, queries: [{ propertyName: "conditionalBodyContentRef", first: true, predicate: GraniteCollapsibleConditionalBodyDirective, descendants: true }, { propertyName: "conditionalHeaderContentRef", first: true, predicate: GraniteCollapsibleConditionalHeaderDirective, descendants: true }], ngImport: i0, template: "<div class=\"collapsible-wrapper\">\n <div\n class=\"collapsible-group-header\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon\n [fontIcon]=\"collapsed ? 'icon-caret-down' : 'icon-caret-up'\"\n ></granite-icon>\n </div>\n </div>\n <div\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-base);border-radius:var(--granite-radius-s);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapse-icon{align-self:center;width:var(--granite-size-base-rem);height:var(--granite-size-base-rem);font-size:var(--granite-font-size-body);color:var(--granite-color-background-inverse);display:none}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-base-rem);font-weight:var(--granite-font-weight-bold);padding:var(--granite-spacing-8) var(--granite-spacing-16);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background);align-items:center}.collapsible-wrapper .collapsible-group-header:hover{background-color:var(--granite-color-background-hover)}.collapsible-wrapper .collapsible-group-header:hover .collapse-icon{display:block}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
|
|
5652
5658
|
}
|
|
5653
5659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCollapsibleGroupComponent, decorators: [{
|
|
5654
5660
|
type: Component,
|
|
5655
|
-
args: [{ selector: 'granite-collapsible-group', template: "<div class=\"collapsible-wrapper\">\n <div\n class=\"collapsible-group-header\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon
|
|
5661
|
+
args: [{ selector: 'granite-collapsible-group', template: "<div class=\"collapsible-wrapper\">\n <div\n class=\"collapsible-group-header\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon\n [fontIcon]=\"collapsed ? 'icon-caret-down' : 'icon-caret-up'\"\n ></granite-icon>\n </div>\n </div>\n <div\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-base);border-radius:var(--granite-radius-s);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapse-icon{align-self:center;width:var(--granite-size-base-rem);height:var(--granite-size-base-rem);font-size:var(--granite-font-size-body);color:var(--granite-color-background-inverse);display:none}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-base-rem);font-weight:var(--granite-font-weight-bold);padding:var(--granite-spacing-8) var(--granite-spacing-16);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background);align-items:center}.collapsible-wrapper .collapsible-group-header:hover{background-color:var(--granite-color-background-hover)}.collapsible-wrapper .collapsible-group-header:hover .collapse-icon{display:block}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"] }]
|
|
5656
5662
|
}], propDecorators: { collapsed: [{
|
|
5657
5663
|
type: Input
|
|
5658
5664
|
}], id: [{
|