@ifsworld/granite-components 12.1.2 → 12.2.0

package/fesm2022/ifsworld-granite-components.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ContentChild, Pipe, inject } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, ContentChildren, NgModule, InjectionToken, Attribute, Inject, Optional, EventEmitter, QueryList, TemplateRef, Directive, ViewChild, Output, Self, HostListener, ContentChild, Pipe, ElementRef, inject } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { coerceNumberProperty, coerceBooleanProperty } from '@angular/cdk/coercion';
@@ -4864,6 +4864,329 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 }]
         }] });
 
+const fileSizes = [
+    'Bytes',
+    'KB',
+    'MB',
+    'GB',
+    'TB',
+    'PB',
+    'EB',
+    'ZB',
+    'YB',
+];
+var FileUploadStatus;
+(function (FileUploadStatus) {
+    FileUploadStatus["NotStarted"] = "NotStarted";
+    FileUploadStatus["InProgress"] = "InProgress";
+    FileUploadStatus["Completed"] = "Completed";
+    FileUploadStatus["Failed"] = "Failed";
+    FileUploadStatus["Cancelled"] = "Cancelled";
+})(FileUploadStatus || (FileUploadStatus = {}));
+var FilUploadErrorTypes;
+(function (FilUploadErrorTypes) {
+    FilUploadErrorTypes["ExtensionNotSupported"] = "ExtensionNotSupported";
+    FilUploadErrorTypes["MultipleFilesNotSupported"] = "MultipleFilesNotSupported";
+})(FilUploadErrorTypes || (FilUploadErrorTypes = {}));
+const DEFAULT_MULTI_FILE_SUPPORT = false;
+const DEFAULT_ACCEPT_TYPE = '*.*';
+const DEFAULT_UPLOAD_TITLE = 'Upload Files';
+const DEFAULT_UPLOAD_ICON = 'icon-upload';
+const DEFAULT_FILE_BROWSE_BUTTON_ICON = 'icon-folder-alt';
+const DEFAULT_UPLOAD_FAILURE_ICON = 'icon-error';
+const DEFAULT_DROPZONE_TEXT = 'Drop here or';
+const DEFAULT_BROWSE_BUTTON_TEXT = 'Browse';
+const DEFAULT_DROP_PLACEHOLDER_TEXT = 'Drop files here';
+const DEFAULT_DROPZONE_HINT = '';
+const DEFAULT_REMOVE_BUTTON_TEXT = 'Remove';
+const DEFAULT_UPLOAD_BUTTON_TEXT = 'Upload';
+const DEFAULT_RETRY_BUTTON_TEXT = 'Retry';
+const DEFAULT_CANCEL_BUTTON_TEXT = 'Cancel';
+
+function validFileTypes(mimeTypesStringToCheck, files) {
+    const supportedFileMimeTypes = mimeTypesStringToCheck
+        .split(',')
+        .map((ext) => ext.trim());
+    if (!files || files.length === 0) {
+        return false;
+    }
+    return files.every((file) => {
+        const fileType = file['type'];
+        return fileType && supportedFileMimeTypes.includes(fileType);
+    });
+}
+
+class GraniteFileDragAndDropDirective {
+    constructor() {
+        this.currentFiles = [];
+        this.droppedFiles = new EventEmitter();
+        this.isFileOver = new EventEmitter();
+        this.fileUploadValidation = new EventEmitter();
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const transferFiles = event.dataTransfer?.items ?? [];
+        if (!validFileTypes(this.accept, Array.from(transferFiles))) {
+            this.fileBrowseError = true;
+            this.fileUploadValidation.emit({
+                isError: this.fileBrowseError,
+                type: FilUploadErrorTypes.ExtensionNotSupported,
+            });
+            return;
+        }
+        if (!this.multiFileUploadEnabled &&
+            (transferFiles.length > 1 || this.currentFiles.length >= 1)) {
+            this.fileBrowseError = true;
+            this.fileUploadValidation.emit({
+                isError: this.fileBrowseError,
+                type: FilUploadErrorTypes.MultipleFilesNotSupported,
+            });
+            return;
+        }
+        this.fileOver = true;
+        this.isFileOver.emit(this.fileOver);
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.fileOver = false;
+        this.fileBrowseError = false;
+        this.fileUploadValidation.emit({ isError: false, type: null });
+        this.isFileOver.emit(this.fileOver);
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (this.fileBrowseError) {
+            this.fileBrowseError = false;
+            this.fileUploadValidation.emit({
+                isError: this.fileBrowseError,
+                type: null,
+            });
+            return;
+        }
+        this.currentFiles = [
+            ...this.currentFiles,
+            ...Array.from(event.dataTransfer.files),
+        ];
+        this.fileOver = false;
+        this.isFileOver.emit(this.fileOver);
+        if (this.currentFiles.length > 0) {
+            this.droppedFiles.emit(this.currentFiles);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileDragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: { multiFileUploadEnabled: "multiFileUploadEnabled", accept: "accept", currentFiles: "currentFiles" }, outputs: { droppedFiles: "droppedFiles", isFileOver: "isFileOver", fileUploadValidation: "fileUploadValidation" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)" }, properties: { "class.file-over": "this.fileOver", "class.file-error": "this.fileBrowseError" } }, exportAs: ["graniteFileDragAndDrop"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileDragAndDropDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[graniteFileDragAndDrop]',
+                    exportAs: 'graniteFileDragAndDrop',
+                }]
+        }], propDecorators: { fileOver: [{
+                type: HostBinding,
+                args: ['class.file-over']
+            }], fileBrowseError: [{
+                type: HostBinding,
+                args: ['class.file-error']
+            }], multiFileUploadEnabled: [{
+                type: Input
+            }], accept: [{
+                type: Input
+            }], currentFiles: [{
+                type: Input
+            }], droppedFiles: [{
+                type: Output
+            }], isFileOver: [{
+                type: Output
+            }], fileUploadValidation: [{
+                type: Output
+            }], onDragOver: [{
+                type: HostListener,
+                args: ['dragover', ['$event']]
+            }], onDragLeave: [{
+                type: HostListener,
+                args: ['dragleave', ['$event']]
+            }], onDrop: [{
+                type: HostListener,
+                args: ['drop', ['$event']]
+            }] } });
+
+class GraniteFileUploadComponent {
+    constructor() {
+        this.accept = DEFAULT_ACCEPT_TYPE;
+        this.uploadTitle = DEFAULT_UPLOAD_TITLE;
+        this.uploadIcon = DEFAULT_UPLOAD_ICON;
+        this.browseIcon = DEFAULT_FILE_BROWSE_BUTTON_ICON;
+        this.errorIcon = DEFAULT_UPLOAD_FAILURE_ICON;
+        this.dropZoneText = DEFAULT_DROPZONE_TEXT;
+        this.browseButtonText = DEFAULT_BROWSE_BUTTON_TEXT;
+        this.dropPlaceholderText = DEFAULT_DROP_PLACEHOLDER_TEXT;
+        this.dropZoneHint = DEFAULT_DROPZONE_HINT;
+        this.removeButtonText = DEFAULT_REMOVE_BUTTON_TEXT;
+        this.uploadButtonText = DEFAULT_UPLOAD_BUTTON_TEXT;
+        this.retryButtonText = DEFAULT_RETRY_BUTTON_TEXT;
+        this.cancelButtonText = DEFAULT_CANCEL_BUTTON_TEXT;
+        this.browseOrDragFiles = new EventEmitter();
+        this.removeFiles = new EventEmitter();
+        this.filesUpload = new EventEmitter();
+        this.fileUploadValidation = new EventEmitter();
+        this.selectedFiles = [];
+        this.previewReadyFiles = [];
+        this.isFileOnDropzone = false;
+        this.FileUploadStatus = FileUploadStatus;
+        this.fileError = false;
+        // TODO: this becomes input when multiple file upload support with carousel component was done.
+        this.supportMultiFileUpload = DEFAULT_MULTI_FILE_SUPPORT;
+        this._uploadStatus = FileUploadStatus.NotStarted;
+        this._autoUpload = true;
+    }
+    get uploadStatus() {
+        return this._uploadStatus;
+    }
+    set uploadStatus(status) {
+        this._uploadStatus = status;
+    }
+    get autoUpload() {
+        return this._autoUpload;
+    }
+    set autoUpload(value) {
+        this._autoUpload = coerceBooleanProperty(value);
+    }
+    fileBrowseHandler(event) {
+        const target = event.target;
+        const files = Array.from(target.files);
+        if (!validFileTypes(this.accept, files)) {
+            this.fileUploadValidation.emit({
+                isError: true,
+                type: FilUploadErrorTypes.ExtensionNotSupported,
+            });
+            this.fileDropRef.nativeElement.value = null;
+            return;
+        }
+        this.selectedFiles = [...this.selectedFiles, ...files];
+        this.previewReadyFiles = this.prepareSelectedFiles(this.selectedFiles);
+        this.browseOrDragFiles.emit(this.previewReadyFiles);
+    }
+    fileRemoveHandler(index) {
+        this.selectedFiles.splice(index, 1);
+        this.previewReadyFiles.splice(index, 1);
+        if (this.selectedFiles.length === 0 &&
+            this.previewReadyFiles.length === 0) {
+            this.fileDropRef.nativeElement.value = null;
+            this.uploadStatus = FileUploadStatus.NotStarted;
+        }
+        this.removeFiles.emit(this.previewReadyFiles);
+    }
+    onFilesDropHandler(files) {
+        if (!this.supportMultiFileUpload &&
+            (this.selectedFiles.length === 1 || files.length !== 1)) {
+            this.fileError = true;
+            return;
+        }
+        this.selectedFiles = files;
+        this.previewReadyFiles = this.prepareSelectedFiles(this.selectedFiles);
+        this.browseOrDragFiles.emit(this.previewReadyFiles);
+    }
+    onFileOverDropzone(isFileOver) {
+        this.isFileOnDropzone = isFileOver;
+    }
+    onFileDropError(validation) {
+        this.fileError = validation.isError;
+        this.fileDropErrorType = validation.type;
+    }
+    prepareSelectedFiles(files) {
+        return files.map((file) => ({
+            file,
+            readableSize: this.formatBytesToReadableSize(file.size, 2),
+            imageUrl: URL.createObjectURL(file),
+        }));
+    }
+    uploadFiles() {
+        this.filesUpload.emit();
+    }
+    retryUpload() {
+        this.filesUpload.emit();
+    }
+    cancelUpload() {
+        for (let i = 0; i < this.previewReadyFiles.length; i++) {
+            this.fileRemoveHandler(i);
+        }
+    }
+    formatBytesToReadableSize(bytes, decimals) {
+        if (bytes === 0) {
+            return `0 ${fileSizes[0]}`;
+        }
+        const bytesPerKB = 1024;
+        const decimalPoints = decimals <= 0 ? 0 : decimals || 2;
+        const exp = Math.floor(Math.log(bytes) / Math.log(bytesPerKB));
+        return `${parseFloat((bytes / Math.pow(bytesPerKB, exp)).toFixed(decimalPoints))} ${fileSizes[exp]}`;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, decorators: [{
+            type: Component,
+            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"] }]
+        }], propDecorators: { fileDropRef: [{
+                type: ViewChild,
+                args: ['fileDropRef', { read: ElementRef }]
+            }], accept: [{
+                type: Input
+            }], uploadTitle: [{
+                type: Input
+            }], uploadIcon: [{
+                type: Input
+            }], browseIcon: [{
+                type: Input
+            }], errorIcon: [{
+                type: Input
+            }], dropZoneText: [{
+                type: Input
+            }], browseButtonText: [{
+                type: Input
+            }], dropPlaceholderText: [{
+                type: Input
+            }], dropZoneHint: [{
+                type: Input
+            }], removeButtonText: [{
+                type: Input
+            }], uploadButtonText: [{
+                type: Input
+            }], retryButtonText: [{
+                type: Input
+            }], cancelButtonText: [{
+                type: Input
+            }], browseOrDragFiles: [{
+                type: Output
+            }], removeFiles: [{
+                type: Output
+            }], filesUpload: [{
+                type: Output
+            }], fileUploadValidation: [{
+                type: Output
+            }], uploadStatus: [{
+                type: Input
+            }], autoUpload: [{
+                type: Input
+            }] } });
+
+class GraniteFileUploadModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadModule, declarations: [GraniteFileUploadComponent, GraniteFileDragAndDropDirective], imports: [CommonModule, GraniteButtonModule, GraniteIconModule], exports: [GraniteFileUploadComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadModule, imports: [CommonModule, GraniteButtonModule, GraniteIconModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [GraniteFileUploadComponent, GraniteFileDragAndDropDirective],
+                    exports: [GraniteFileUploadComponent],
+                    imports: [CommonModule, GraniteButtonModule, GraniteIconModule],
+                }]
+        }] });
+
 class GraniteCollapsibleConditionalBodyDirective {
     constructor() {
         this.template = inject(TemplateRef);
@@ -4961,5 +5284,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
+export { ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteBadgeComponent, GraniteBadgeHarness, GraniteBadgeModule, GraniteButtonComponent, GraniteButtonModule, GraniteCardActionsComponent, GraniteCardAvatarComponent, GraniteCardBodyComponent, GraniteCardComponent, GraniteCardContentComponent, GraniteCardFooterComponent, GraniteCardHeaderComponent, GraniteCardHeaderSubTitleComponent, GraniteCardHeaderTitleComponent, GraniteCardListComponent, GraniteCardListModule, GraniteCheckboxComponent, GraniteCheckboxGroupComponent, GraniteCheckboxModule, GraniteChipComponent, GraniteChipInputDirective, GraniteChipListComponent, GraniteChipSelectionChangeEvent, GraniteChipsModule, GraniteCollapsibleConditionalBodyDirective, GraniteCollapsibleConditionalHeaderDirective, GraniteCollapsibleGroupComponent, GraniteCollapsibleGroupModule, GraniteContactItemComponent, GraniteContactItemTitleComponent, GraniteContactsComponent, GraniteContactsModule, GraniteContactsProfileComponent, GraniteContactsTriggerForDirective, GraniteCoreModule, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteFileUploadComponent, GraniteFileUploadModule, GraniteGridComponent, GraniteGridItemComponent, GraniteGridModule, GraniteHideOnOverflowDirective, GraniteIconComponent, GraniteIconModule, GraniteInputFieldComponent, GraniteInputFieldModule, GraniteLabelComponent, GraniteLabelModule, GraniteMenuComponent, GraniteMenuHarness, GraniteMenuItemComponent, GraniteMenuItemHarness, GraniteMenuModule, GraniteMenuTouchCloseComponent, GraniteMenuTouchTitleItemComponent, GraniteMenuTriggerForDirective, GraniteProgressBarComponent, GraniteProgressBarModule, GraniteRadioButtonComponent, GraniteRadioButtonModule, GraniteRadioGroupComponent, GraniteTitleDirective, GraniteTitlePipe, GraniteToggleSwitchComponent, GraniteToggleSwitchModule, PurePipesModule, deviceDesktop, deviceTouch, disabledMixin, graniteMenuDesktopAnimations, graniteMenuTouchAnimations };
 //# sourceMappingURL=ifsworld-granite-components.mjs.map