@ifsworld/granite-components 14.1.2 → 14.2.1

package/fesm2022/ifsworld-granite-components.mjs

@@ -2719,6 +2719,7 @@ class GraniteInputFieldComponent {
         this._passwordField = false;
         this._currentCharCount = 0;
         this._passwordToggled = false;
+        this._lastEmittedValue = '';
     }
     ngOnInit() {
         this._validateType();
@@ -2775,7 +2776,7 @@ class GraniteInputFieldComponent {
         const inputEvent = event.target;
         this._applyCharacterCount(inputEvent.value);
         this._empty = inputEvent.value == null || inputEvent.value === '';
-        this.valueChange.emit(inputEvent.value);
+        this._emitValueIfChanged(inputEvent.value);
     }
     _validateType() {
         if (GRANITE_INPUT_INCLUDES.indexOf(this.type) < 0) {
@@ -2789,6 +2790,7 @@ class GraniteInputFieldComponent {
             if (this._currentCharCount > this.maxlength) {
                 inputString = inputString.slice(0, this.maxlength);
                 this.value = inputString;
+                this._emitValueIfChanged(inputString);
                 this._currentCharCount = this.maxlength;
             }
         }
@@ -2799,6 +2801,12 @@ class GraniteInputFieldComponent {
     _getTextareaElement() {
         return this._textareaElement.nativeElement;
     }
+    _emitValueIfChanged(value) {
+        if (value !== this._lastEmittedValue) {
+            this._lastEmittedValue = value;
+            this.valueChange.emit(value);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteInputFieldComponent, deps: [{ token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: GraniteInputFieldComponent, selector: "granite-input-field", inputs: { id: "id", name: "name", type: "type", value: "value", required: "required", readonly: "readonly", invalid: "invalid", disabled: "disabled", placeholder: "placeholder", prefixicon: "prefixicon", maxlength: "maxlength", countcharacters: "countcharacters", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "granite-input-field" }, viewQueries: [{ propertyName: "_inputElement", first: true, predicate: ["input"], descendants: true }, { propertyName: "_textareaElement", first: true, predicate: ["textarea"], descendants: true }], exportAs: ["graniteInputField"], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"_supported\"\n  class=\"granite-input-container\"\n  [class.granite-input-disabled]=\"disabled\"\n  [class.granite-input-readonly]=\"readonly\"\n  [class.granite-input-disabled]=\"disabled\"\n  [class.granite-input-readonly]=\"readonly\"\n>\n  <div\n    class=\"granite-input-top-row\"\n    [class.granite-input-required]=\"required\"\n    [class.granite-input-empty]=\"_empty\"\n    [class.granite-input-disabled]=\"disabled\"\n    [class.granite-input-readonly]=\"readonly\"\n    [class.granite-input-invalid]=\"invalid\"\n  >\n    <div\n      *ngIf=\"prefixicon\"\n      class=\"granite-input-prepend\"\n      [class.granite-input-required]=\"required\"\n      [class.granite-input-empty]=\"_empty\"\n    >\n      <granite-icon class=\"granite-input-prepend-icon\">\n        {{ prefixicon }}\n      </granite-icon>\n    </div>\n\n    <ng-container\n      *ngIf=\"type !== 'textarea'; then inputElement; else textareaElement\"\n    ></ng-container>\n\n    <ng-template #inputElement>\n      <input\n        #input\n        [id]=\"id\"\n        class=\"granite-input-base\"\n        [class.granite-input-invalid]=\"invalid\"\n        [class.granite-input-empty]=\"_empty\"\n        [name]=\"name\"\n        [attr.type]=\"type\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [attr.maxlength]=\"maxlength\"\n        [value]=\"value\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-invalid]=\"invalid\"\n        (input)=\"_onInput($event)\"\n      />\n    </ng-template>\n\n    <button\n      *ngIf=\"_passwordField\"\n      class=\"granite-input-append\"\n      [class.granite-input-required]=\"required\"\n      [class.granite-input-empty]=\"_empty\"\n      (click)=\"_togglePassword()\"\n    >\n      <granite-icon class=\"granite-input-password-toggle-icon\">\n        {{ _passwordFieldIcon }}\n      </granite-icon>\n    </button>\n\n    <ng-container *ngIf=\"!_passwordField\">\n      <ng-content select=\"[graniteInputSuffixButton]\"></ng-content>\n    </ng-container>\n\n    <ng-template #textareaElement>\n      <textarea\n        #textarea\n        [id]=\"id\"\n        class=\"granite-input-base granite-text-area\"\n        [class.granite-input-invalid]=\"invalid\"\n        [class.granite-input-empty]=\"_empty\"\n        rows=\"1\"\n        [name]=\"name\"\n        [attr.type]=\"type\"\n        [required]=\"required\"\n        [readonly]=\"readonly\"\n        [disabled]=\"disabled\"\n        [placeholder]=\"placeholder\"\n        [value]=\"value\"\n        [attr.maxlength]=\"maxlength\"\n        [attr.aria-label]=\"ariaLabel\"\n        [attr.aria-labelledby]=\"ariaLabelledby\"\n        [attr.aria-required]=\"required\"\n        [attr.aria-invalid]=\"invalid\"\n        (input)=\"_onInput($event)\"\n      ></textarea>\n    </ng-template>\n  </div>\n\n  <div *ngIf=\"countcharacters\" class=\"granite-input-bottom-row\">\n    <div class=\"granite-input-char-count\">\n      {{ _currentCharCount }}/{{ maxlength }}\n    </div>\n  </div>\n</div>\n", styles: [":host{transition:all .2s ease-out;width:14.5rem;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:inherit}.granite-input-container{width:inherit;font-size:var(--granite-font-size-body-small)}.granite-input-container .granite-input-top-row{display:inline-flex;width:inherit;position:relative;background:var(--granite-color-background)}.granite-input-container .granite-input-top-row:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-medium)}.granite-input-container .granite-input-top-row:hover:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-border-hard)}.granite-input-container .granite-input-top-row .granite-text-area{min-width:14.5rem;min-height:2rem}.granite-input-container .granite-input-top-row.granite-input-disabled,.granite-input-container .granite-input-top-row.granite-input-readonly{background-color:transparent;box-shadow:none}.granite-input-container .granite-input-top-row.granite-input-invalid:not(:focus-within){outline:var(--granite-border-width-regular) solid var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base{appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);padding:var(--granite-spacing-8);width:inherit;color:var(--granite-color-text);font:inherit;font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-regular)}.granite-input-container .granite-input-top-row .granite-input-base::placeholder{color:var(--granite-color-text-hint)}.granite-input-container .granite-input-top-row .granite-input-base:required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-top-row .granite-input-base:required::placeholder{color:var(--granite-color-text-weak)}.granite-input-container .granite-input-top-row .granite-input-base:read-only{background-color:transparent}.granite-input-container .granite-input-top-row .granite-input-base:disabled{opacity:.3}.granite-input-container .granite-input-top-row .granite-input-base:hover::placeholder{color:var(--granite-color-text)}.granite-input-container .granite-input-top-row .granite-input-base:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-top-row .granite-input-base:focus.granite-input-invalid{box-shadow:inset 0 -.125rem var(--granite-color-signal-failure),inset 0 .125rem var(--granite-color-signal-failure),inset .125rem 0 var(--granite-color-signal-failure),inset -.125rem 0 var(--granite-color-signal-failure)}.granite-input-container .granite-input-top-row .granite-input-base:focus::placeholder{color:transparent}.granite-input-container .granite-input-prepend{display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;align-items:center;padding:0 var(--granite-spacing-8);background:var(--granite-color-background-input)}.granite-input-container .granite-input-prepend .granite-input-prepend-icon{width:1rem;height:1rem;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-prepend.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-append{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative}.granite-input-container .granite-input-append:focus{box-shadow:inset 0 .125rem var(--granite-color-focus),inset .125rem 0 var(--granite-color-focus),inset -.125rem 0 var(--granite-color-focus),inset 0 -.125rem var(--granite-color-focus)}.granite-input-container .granite-input-append .granite-input-password-toggle-icon{width:max-content;height:max-content;color:var(--granite-color-text);box-shadow:none}.granite-input-container .granite-input-append.granite-input-required.granite-input-empty{background-color:var(--granite-color-background-failure)}.granite-input-container .granite-input-bottom-row{box-shadow:none}.granite-input-container .granite-input-char-count{background:var(--granite-color-background-warning);border-radius:0 0 .25rem .25rem;padding:var(--granite-spacing-8);background-size:contain;width:fit-content;box-shadow:none}.granite-input-container.granite-input-disabled,.granite-input-container.granite-input-readonly{background-color:transparent}:host ::ng-deep button[graniteInputSuffixButton]{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;border:none;background-color:var(--granite-color-background-input);position:relative;margin:0;border-radius:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -5467,335 +5475,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                 }]
         }] });
 
-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_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: "18.2.13", ngImport: i0, type: GraniteFileDragAndDropDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", 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: "18.2.13", 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.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: file.type.startsWith('image/')
-                ? URL.createObjectURL(file)
-                : null,
-        }));
-    }
-    uploadFiles() {
-        this.filesUpload.emit();
-    }
-    retryUpload() {
-        this.filesUpload.emit();
-    }
-    cancelUpload() {
-        for (let i = 0; i < this.previewReadyFiles.length; i++) {
-            this.fileRemoveHandler(i);
-        }
-    }
-    resetFileUpload() {
-        this.fileDropRef.nativeElement.value = null;
-        this.fileError = false;
-        this.fileDropErrorType = '';
-        this.selectedFiles = [];
-        this.previewReadyFiles = [];
-        this.uploadStatus = FileUploadStatus.NotStarted;
-    }
-    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: "18.2.13", ngImport: i0, type: GraniteFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", 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    [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"] }]
-        }], propDecorators: { fileDropRef: [{
-                type: ViewChild,
-                args: ['fileDropRef', { read: ElementRef }]
-            }], accept: [{
-                type: Input
-            }], uploadTitle: [{
-                type: Input
-            }], uploadIcon: [{
-                type: Input
-            }], browseIcon: [{
-                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: "18.2.13", ngImport: i0, type: GraniteFileUploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadModule, declarations: [GraniteFileUploadComponent, GraniteFileDragAndDropDirective], imports: [CommonModule, GraniteButtonModule, GraniteIconModule], exports: [GraniteFileUploadComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadModule, imports: [CommonModule, GraniteButtonModule, GraniteIconModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GraniteFileUploadModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [GraniteFileUploadComponent, GraniteFileDragAndDropDirective],
-                    exports: [GraniteFileUploadComponent],
-                    imports: [CommonModule, GraniteButtonModule, GraniteIconModule],
-                }]
-        }] });
-
 class GraniteCollapsibleConditionalBodyDirective {
     constructor() {
         this.template = inject(TemplateRef);
@@ -5900,5 +5579,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AVATAR_DEFAULT_STATUS, ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteAvatarComponent, GraniteAvatarDefaultStatusComponent, GraniteAvatarModule, 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, GraniteCustomAvatarStatusDirective, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteEmptyAvatarComponent, 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 };
+export { AVATAR_DEFAULT_STATUS, ButtonSelectors, CONTACT_DEFAULT_STATUS, ClientInputDesktopDirective, ClientInputTouchDirective, ClientOutputDesktopDirective, ClientOutputTouchDirective, ContactItemDefaultStatusComponent, GRANITE_CLIENT_INPUT, GRANITE_CLIENT_OUTPUT, GraniteAnchorComponent, GraniteArrangeGridComponent, GraniteArrangeGridItemComponent, GraniteArrangeGridModule, GraniteArrangeGridOrientation, GraniteAvatarComponent, GraniteAvatarDefaultStatusComponent, GraniteAvatarModule, 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, GraniteCustomAvatarStatusDirective, GraniteCustomProfileDirective, GraniteCustomStatusDirective, GraniteDividerDirective, GraniteEmptyAvatarComponent, 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