@ifsworld/granite-components 13.1.0 → 13.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm2022/lib/chips/chip.component.mjs +2 -2
  2. package/esm2022/lib/collapsible-group/collapsible-group.component.mjs +3 -3
  3. package/esm2022/lib/file-upload/file-upload.component.mjs +15 -8
  4. package/esm2022/lib/file-upload/file-upload.constants.mjs +1 -2
  5. package/fesm2022/ifsworld-granite-components.mjs +17 -11
  6. package/fesm2022/ifsworld-granite-components.mjs.map +1 -1
  7. package/lib/file-upload/file-upload.component.d.ts +2 -2
  8. package/lib/file-upload/file-upload.constants.d.ts +0 -1
  9. package/package.json +7 -7
package/fesm2022/ifsworld-granite-components.mjs CHANGED
@@ -3060,7 +3060,7 @@ class GraniteChipComponent {
3060
3060
  : null;
3061
3061
  }
3062
3062
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef, optional: true }, { token: 'tabindex', attribute: true }], target: i0.ɵɵFactoryTarget.Component }); }
3063
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteChipComponent, selector: "granite-chip, granite-input-chip", inputs: { tabIndex: "tabIndex", role: "role", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable", invalid: "invalid" }, outputs: { selectionChange: "selectionChange", removed: "removed", destroyed: "destroyed", chipFocus: "chipFocus", chipBlur: "chipBlur" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)", "blur": "_blur()", "focus": "focus()" }, properties: { "class.granite-chip-input": "inputChip", "class.granite-chip-selectable": "selectable", "class.granite-chip-selected": "selected", "class.granite-chip-disabled": "disabled", "class.granite-chip-invalid": "invalid", "class.granite-chip-removable": "!disabled && (removable || inputChip)", "attr.tabindex": "disabled ? null : tabIndex", "attr.role": "role", "attr.disabled": "disabled || null", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "granite-chip" }, exportAs: ["graniteChip"], ngImport: i0, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
3063
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteChipComponent, selector: "granite-chip, granite-input-chip", inputs: { tabIndex: "tabIndex", role: "role", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], selected: "selected", value: "value", selectable: "selectable", disabled: "disabled", removable: "removable", invalid: "invalid" }, outputs: { selectionChange: "selectionChange", removed: "removed", destroyed: "destroyed", chipFocus: "chipFocus", chipBlur: "chipBlur" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)", "blur": "_blur()", "focus": "focus()" }, properties: { "class.granite-chip-input": "inputChip", "class.granite-chip-selectable": "selectable", "class.granite-chip-selected": "selected", "class.granite-chip-disabled": "disabled", "class.granite-chip-invalid": "invalid", "class.granite-chip-removable": "!disabled && (removable || inputChip)", "attr.tabindex": "disabled ? null : tabIndex", "attr.role": "role", "attr.disabled": "disabled || null", "attr.aria-label": "ariaLabel", "attr.aria-labelledby": "ariaLabelledby", "attr.aria-disabled": "disabled.toString()", "attr.aria-selected": "ariaSelected" }, classAttribute: "granite-chip" }, exportAs: ["graniteChip"], ngImport: i0, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip:focus{outline:var(--granite-border-width-focus) solid var(--granite-color-focus);outline-offset:calc(var(--granite-border-width-focus) * -1)}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
3064
3064
  }
3065
3065
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteChipComponent, decorators: [{
3066
3066
  type: Component,
@@ -3083,7 +3083,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
3083
3083
  '(keydown)': '_handleKeydown($event)',
3084
3084
  '(blur)': '_blur()',
3085
3085
  '(focus)': 'focus()',
3086
- }, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"] }]
3086
+ }, template: "<ng-content></ng-content>\n<button\n *ngIf=\"!disabled && (removable || inputChip)\"\n class=\"granite-chip-remove\"\n (click)=\"_handleRemoveClick($event)\"\n>\n <granite-icon\n fontIcon=\"icon-close\"\n class=\"granite-chip-remove-icon\"\n [class.granite-chip-remove-icon-invalid]=\"invalid\"\n ></granite-icon>\n</button>\n", styles: [":host.granite-chip{display:-moz-inline-flex;display:inline-flex;flex-direction:row;flex-wrap:nowrap;overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;border:none;-webkit-appearance:none;-moz-appearance:none;justify-content:center;align-items:center;padding-inline:var(--granite-spacing-16);margin-inline:var(--granite-spacing-2);padding-top:var(--granite-spacing-8);padding-bottom:var(--granite-spacing-8);height:inherit;color:var(--granite-color-text-weak);background-color:var(--granite-color-background);border-radius:var(--granite-radius-l);border-style:solid;border-width:var(--granite-border-width-regular);border-color:var(--granite-color-border-hard)}:host.granite-chip:hover{background-color:var(--granite-color-background-hover);cursor:pointer}:host.granite-chip:focus{outline:var(--granite-border-width-focus) solid var(--granite-color-focus);outline-offset:calc(var(--granite-border-width-focus) * -1)}:host.granite-chip.granite-chip-disabled{background-color:var(--granite-color-background);color:var(--granite-color-text-hint)}:host.granite-chip.granite-chip-disabled:hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip:not(.granite-chip-selectable):hover{background-color:var(--granite-color-background);cursor:auto}:host.granite-chip.granite-chip-removable{padding-inline-end:var(--granite-spacing-8)}:host.granite-chip.granite-chip-invalid{background-color:var(--granite-color-background-failure);border-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input){border-color:var(--granite-color-background-active);background-color:var(--granite-color-background-info)}:host.granite-chip.granite-chip-selected:not(.granite-chip-disabled):not(.granite-chip-input):hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input{padding-top:var(--granite-spacing-4);padding-bottom:var(--granite-spacing-4);padding-inline:var(--granite-spacing-8)}:host.granite-chip.granite-chip-input:hover{background-color:var(--granite-color-background-hover)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid{background-color:var(--granite-color-background-failure)}:host.granite-chip.granite-chip-input:hover.granite-chip-invalid:hover{border-color:var(--granite-color-signal-failure)}.granite-chip-remove{display:flex;justify-content:center;align-items:center;background-color:transparent;outline:none;border:none;cursor:pointer;margin-inline-start:var(--granite-spacing-4);margin-inline-end:0;padding:0}[dir=rtl] .granite-chip-remove{margin-inline-end:var(--granite-spacing-4);margin-inline-start:0}.granite-chip-remove .granite-chip-remove-icon{position:relative;overflow:hidden;background-repeat:no-repeat;color:var(--granite-color-text-hint);line-height:inherit}.granite-chip-remove .granite-chip-remove-icon:hover{color:var(--granite-color-text)}.granite-chip-remove .granite-chip-remove-icon.granite-chip-remove-icon-invalid{color:var(--granite-color-signal-failure)}\n"] }]
3087
3087
  }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.ChangeDetectorRef, decorators: [{
3088
3088
  type: Optional
3089
3089
  }] }, { type: undefined, decorators: [{
@@ -5312,7 +5312,6 @@ const DEFAULT_ACCEPT_TYPE = '*.*';
5312
5312
  const DEFAULT_UPLOAD_TITLE = 'Upload Files';
5313
5313
  const DEFAULT_UPLOAD_ICON = 'icon-upload';
5314
5314
  const DEFAULT_FILE_BROWSE_BUTTON_ICON = 'icon-folder-alt';
5315
- const DEFAULT_UPLOAD_FAILURE_ICON = 'icon-error';
5316
5315
  const DEFAULT_DROPZONE_TEXT = 'Drop here or';
5317
5316
  const DEFAULT_BROWSE_BUTTON_TEXT = 'Browse';
5318
5317
  const DEFAULT_DROP_PLACEHOLDER_TEXT = 'Drop files here';
@@ -5439,7 +5438,6 @@ class GraniteFileUploadComponent {
5439
5438
  this.uploadTitle = DEFAULT_UPLOAD_TITLE;
5440
5439
  this.uploadIcon = DEFAULT_UPLOAD_ICON;
5441
5440
  this.browseIcon = DEFAULT_FILE_BROWSE_BUTTON_ICON;
5442
- this.errorIcon = DEFAULT_UPLOAD_FAILURE_ICON;
5443
5441
  this.dropZoneText = DEFAULT_DROPZONE_TEXT;
5444
5442
  this.browseButtonText = DEFAULT_BROWSE_BUTTON_TEXT;
5445
5443
  this.dropPlaceholderText = DEFAULT_DROP_PLACEHOLDER_TEXT;
@@ -5520,7 +5518,9 @@ class GraniteFileUploadComponent {
5520
5518
  return files.map((file) => ({
5521
5519
  file,
5522
5520
  readableSize: this.formatBytesToReadableSize(file.size, 2),
5523
- imageUrl: URL.createObjectURL(file),
5521
+ imageUrl: file.type.startsWith('image/')
5522
+ ? URL.createObjectURL(file)
5523
+ : null,
5524
5524
  }));
5525
5525
  }
5526
5526
  uploadFiles() {
@@ -5534,6 +5534,14 @@ class GraniteFileUploadComponent {
5534
5534
  this.fileRemoveHandler(i);
5535
5535
  }
5536
5536
  }
5537
+ resetFileUpload() {
5538
+ this.fileDropRef.nativeElement.value = null;
5539
+ this.fileError = false;
5540
+ this.fileDropErrorType = '';
5541
+ this.selectedFiles = [];
5542
+ this.previewReadyFiles = [];
5543
+ this.uploadStatus = FileUploadStatus.NotStarted;
5544
+ }
5537
5545
  formatBytesToReadableSize(bytes, decimals) {
5538
5546
  if (bytes === 0) {
5539
5547
  return `0 ${fileSizes[0]}`;
@@ -5544,11 +5552,11 @@ class GraniteFileUploadComponent {
5544
5552
  return `${parseFloat((bytes / Math.pow(bytesPerKB, exp)).toFixed(decimalPoints))} ${fileSizes[exp]}`;
5545
5553
  }
5546
5554
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5547
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", errorIcon: "errorIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
5555
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: GraniteFileUploadComponent, selector: "granite-file-upload", inputs: { accept: "accept", uploadTitle: "uploadTitle", uploadIcon: "uploadIcon", browseIcon: "browseIcon", dropZoneText: "dropZoneText", browseButtonText: "browseButtonText", dropPlaceholderText: "dropPlaceholderText", dropZoneHint: "dropZoneHint", removeButtonText: "removeButtonText", uploadButtonText: "uploadButtonText", retryButtonText: "retryButtonText", cancelButtonText: "cancelButtonText", uploadStatus: "uploadStatus", autoUpload: "autoUpload" }, outputs: { browseOrDragFiles: "browseOrDragFiles", removeFiles: "removeFiles", filesUpload: "filesUpload", fileUploadValidation: "fileUploadValidation" }, viewQueries: [{ propertyName: "fileDropRef", first: true, predicate: ["fileDropRef"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n [ngClass]=\"{ 'upload-failed': uploadStatus === FileUploadStatus.Failed }\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n @if (!isFileOnDropzone && !fileError) {\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n @if (previewFile?.imageUrl) {\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n [ngTemplateOutlet]=\"uploadFailedOverlay\"\n >\n </ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n } @else {\n <div\n class=\"document-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n >\n <div class=\"document-preview-holder\">\n <granite-icon\n class=\"document-file-preview\"\n [class.upload-failed]=\"\n uploadStatus === FileUploadStatus.Failed\n \"\n [fontIcon]=\"'icon-document-alt'\"\n ></granite-icon>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </div>\n }\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n } @else {\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n }\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #uploadingOverlay>\n <div class=\"file-preview-overlay\"></div>\n <div class=\"loading-container\">\n <div class=\"uploading-spinner\"></div>\n </div>\n</ng-template>\n\n<ng-template #uploadFailedOverlay>\n <div class=\"file-preview-overlay\"></div>\n</ng-template>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.upload-failed{border-color:var(--granite-color-categorical-4)}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * 1.125);text-align:center;color:var(--granite-color-text-hint);margin:calc(var(--granite-spacing-base-rem) * .625) 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:calc(var(--granite-spacing-base-rem) * .375)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:80px;height:114px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(250%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .file-preview-overlay{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder img{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.2}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder img,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-link);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:60px;height:60px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview{font-size:calc(var(--granite-font-size-body) * 3);color:var(--granite-color-text-hint);padding:calc(var(--granite-spacing-4) * 3) 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview.upload-failed{color:var(--granite-color-background-failure)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-10%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .document-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .document-file-preview,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-week);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteButtonComponent, selector: "button[graniteButton],\n button[granitePrimaryButton],\n button[graniteFlatButton],\n button[graniteToolbarButton]\n ", inputs: ["disabled", "toggled"], exportAs: ["graniteButton"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }, { kind: "directive", type: GraniteFileDragAndDropDirective, selector: "[graniteFileDragAndDrop]", inputs: ["multiFileUploadEnabled", "accept", "currentFiles"], outputs: ["droppedFiles", "isFileOver", "fileUploadValidation"], exportAs: ["graniteFileDragAndDrop"] }] }); }
5548
5556
  }
5549
5557
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteFileUploadComponent, decorators: [{
5550
5558
  type: Component,
5551
- args: [{ selector: 'granite-file-upload', template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n <ng-template #dropPlaceholder>\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n </ng-template>\n <ng-container\n *ngIf=\"!isFileOnDropzone && !fileError; else dropPlaceholder\"\n >\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n <div\n class=\"loading-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n >\n <div class=\"uploading-spinner\"></div>\n </div>\n <div\n class=\"failed-icon-container\"\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n >\n <granite-icon\n class=\"error-icon\"\n [fontIcon]=\"errorIcon\"\n ></granite-icon>\n </div>\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n </ng-container>\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:18px;text-align:center;color:var(--granite-color-text-hint);margin:10px 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:6px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;width:100%;text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{opacity:.6;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{width:80px;height:114px;background-color:var(--granite-color-background-variant)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{max-width:100%;max-height:100%;aspect-ratio:2/1;object-fit:cover;object-position:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:10px;color:var(--granite-color-text-link);margin:0 0 14px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container{position:absolute;transform:translateY(100%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .uploading-spinner,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .loading-container .error-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .failed-icon-container .error-icon{color:var(--granite-color-state-error);font-size:35px;padding:0}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"] }]
5559
+ args: [{ selector: 'granite-file-upload', template: "<div class=\"file-upload-wrapper\">\n <h2 class=\"file-upload-title\">{{ uploadTitle }}</h2>\n <div\n class=\"file-dropzone\"\n [ngClass]=\"{ 'upload-failed': uploadStatus === FileUploadStatus.Failed }\"\n graniteFileDragAndDrop\n (droppedFiles)=\"onFilesDropHandler($event)\"\n (isFileOver)=\"onFileOverDropzone($event)\"\n (fileUploadValidation)=\"onFileDropError($event)\"\n [multiFileUploadEnabled]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n [currentFiles]=\"selectedFiles\"\n >\n <input\n class=\"file-input\"\n #fileDropRef\n type=\"file\"\n title=\"fileUpload\"\n (change)=\"fileBrowseHandler($event)\"\n [multiple]=\"supportMultiFileUpload\"\n [accept]=\"accept\"\n />\n <div class=\"file-upload-body\">\n @if (!isFileOnDropzone && !fileError) {\n <div\n class=\"file-upload-browse\"\n *ngIf=\"previewReadyFiles.length === 0; else filePreview\"\n >\n <granite-icon\n class=\"file-upload-icon\"\n [fontIcon]=\"uploadIcon\"\n ></granite-icon>\n <div class=\"file-selection\">\n <h2 class=\"file-upload-body-text\">{{ dropZoneText }}</h2>\n <button\n class=\"file-select-button\"\n graniteButton\n (click)=\"fileDropRef.click()\"\n >\n <granite-icon\n class=\"browse-button-icon\"\n [fontIcon]=\"browseIcon\"\n ></granite-icon>\n <div class=\"browse-button-text\">{{ browseButtonText }}</div>\n </button>\n </div>\n <p *ngIf=\"dropZoneHint\" class=\"file-upload-hint\">\n {{ dropZoneHint }}\n </p>\n </div>\n <ng-template #filePreview>\n <div\n class=\"file-preview-container\"\n *ngFor=\"let previewFile of previewReadyFiles; let i = index\"\n >\n @if (previewFile?.imageUrl) {\n <a\n class=\"file-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n [href]=\"previewFile?.imageUrl\"\n target=\"_blank\"\n >\n <div class=\"file-preview-holder\">\n <img\n role=\"presentation\"\n [src]=\"previewFile?.imageUrl\"\n [alt]=\"previewFile?.file?.name\"\n />\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.Failed\"\n [ngTemplateOutlet]=\"uploadFailedOverlay\"\n >\n </ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </a>\n } @else {\n <div\n class=\"document-preview-link\"\n [ngClass]=\"{\n 'uploading-in-progress':\n uploadStatus === FileUploadStatus.InProgress,\n 'upload-failed': uploadStatus === FileUploadStatus.Failed\n }\"\n >\n <div class=\"document-preview-holder\">\n <granite-icon\n class=\"document-file-preview\"\n [class.upload-failed]=\"\n uploadStatus === FileUploadStatus.Failed\n \"\n [fontIcon]=\"'icon-document-alt'\"\n ></granite-icon>\n <ng-container\n *ngIf=\"uploadStatus === FileUploadStatus.InProgress\"\n [ngTemplateOutlet]=\"uploadingOverlay\"\n ></ng-container>\n </div>\n <p class=\"file-name\" [title]=\"previewFile?.file?.name\">\n {{ previewFile?.file?.name }}\n </p>\n <p class=\"file-size\">{{ previewFile?.readableSize }}</p>\n </div>\n }\n <button\n graniteButton\n *ngIf=\"\n [\n FileUploadStatus.Completed,\n FileUploadStatus.NotStarted\n ].includes(uploadStatus)\n \"\n (click)=\"fileRemoveHandler(i)\"\n >\n {{ removeButtonText }}\n </button>\n </div>\n </ng-template>\n } @else {\n <p class=\"drop-area-placeholder\">\n {{ dropPlaceholderText }}\n </p>\n }\n </div>\n </div>\n <div class=\"file-upload-footer\">\n <div class=\"footer-container\" *ngIf=\"previewReadyFiles.length > 0\">\n <button\n *ngIf=\"!autoUpload && uploadStatus === FileUploadStatus.NotStarted\"\n granitePrimaryButton\n (click)=\"uploadFiles()\"\n >\n {{ uploadButtonText }}\n </button>\n <ng-container *ngIf=\"uploadStatus === FileUploadStatus.Failed\">\n <button graniteButton (click)=\"cancelUpload()\">\n {{ cancelButtonText }}\n </button>\n <button\n class=\"retry-upload-button\"\n granitePrimaryButton\n (click)=\"retryUpload()\"\n >\n {{ retryButtonText }}\n </button>\n </ng-container>\n </div>\n </div>\n</div>\n\n<ng-template #uploadingOverlay>\n <div class=\"file-preview-overlay\"></div>\n <div class=\"loading-container\">\n <div class=\"uploading-spinner\"></div>\n </div>\n</ng-template>\n\n<ng-template #uploadFailedOverlay>\n <div class=\"file-preview-overlay\"></div>\n</ng-template>\n", styles: [":host{width:100%}.file-upload-wrapper{display:flex;flex-direction:column;background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-s);height:100%;width:100%}.file-upload-wrapper .file-upload-title{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-medium);font-weight:var(--granite-font-weight-bold);line-height:var(--granite-line-height-base-rem);color:var(--granite-color-text-weak);margin:0;padding:var(--granite-spacing-8) calc(var(--granite-spacing-16) * .813)}.file-upload-wrapper .file-dropzone{display:flex;flex-direction:column;border-width:var(--granite-border-width-focus);border-style:dashed;border-color:var(--granite-color-background-selected);border-radius:var(--granite-radius-m);margin:var(--granite-spacing-8);height:100%}.file-upload-wrapper .file-dropzone.upload-failed{border-color:var(--granite-color-categorical-4)}.file-upload-wrapper .file-dropzone.file-error{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-failure);border-color:var(--granite-color-state-error);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-error .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone.file-over{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;background-color:var(--granite-color-background-lobby-info);border-color:var(--granite-color-background-active);transition:background .15s ease}.file-upload-wrapper .file-dropzone.file-over .drop-area-placeholder{margin:0}.file-upload-wrapper .file-dropzone .file-input{opacity:0;position:absolute;width:0}.file-upload-wrapper .file-dropzone .file-upload-body{display:flex;align-items:center;justify-content:center;height:100%}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse{display:flex;flex-direction:column;gap:var(--granite-spacing-4);justify-content:center;align-items:center;padding:0 var(--granite-spacing-16)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-icon{font-size:var(--granite-font-size-display-small);color:var(--granite-color-text)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection{display:flex;justify-content:space-between;align-items:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-upload-body-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text);text-align:center;width:100%;margin-inline-end:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button{display:flex;justify-content:space-between;align-items:center;color:var(--granite-color-text-link);padding-top:calc(var(--granite-spacing-24) / 4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-icon{font-size:var(--granite-font-size-body);color:var(--granite-color-text-link);margin-inline-end:var(--granite-spacing-4);padding:0}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button .browse-button-text{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-flowing) / 2);margin-top:var(--granite-spacing-4)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-icon,.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-selection .file-select-button:hover .browse-button-text{color:var(--granite-color-text-inverse)}.file-upload-wrapper .file-dropzone .file-upload-body .file-upload-browse .file-upload-hint{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * 1.125);text-align:center;color:var(--granite-color-text-hint);margin:calc(var(--granite-spacing-base-rem) * .625) 0 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container{display:flex;flex-direction:column;align-items:center;width:100%;max-height:100%;padding:calc(var(--granite-spacing-base-rem) * .375)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link:hover .file-size{text-decoration:underline}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:80px;height:114px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(250%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .file-preview-overlay{position:absolute;top:0;inset-inline-start:0;width:100%;height:100%;pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder img{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.2}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder img,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-link);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .file-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-link);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link{display:flex;flex-direction:column;align-items:center;max-width:50%;padding:0 var(--granite-spacing-8);text-decoration:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder{display:flex;justify-content:center;align-items:flex-end;position:relative;width:60px;height:60px}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview{font-size:calc(var(--granite-font-size-body) * 3);color:var(--granite-color-text-hint);padding:calc(var(--granite-spacing-4) * 3) 0}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .document-file-preview.upload-failed{color:var(--granite-color-background-failure)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container{position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-10%)}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .document-preview-holder .loading-container .uploading-spinner{width:50px;height:50px;border-radius:50%;border:6px solid;border-color:var(--granite-color-background-page);border-right-color:var(--granite-color-background-active);animation:loading-keyframe 1s infinite linear}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .document-preview-holder .file-preview-overlay{background-color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.upload-failed .file-size{color:var(--granite-color-signal-failure);opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress{pointer-events:none}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .document-file-preview,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .document-preview-holder .file-preview-overlay,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-name,.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link.uploading-in-progress .file-size{opacity:.4}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-name{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:var(--granite-line-height-flowing);color:var(--granite-color-text-weak);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:calc(var(--granite-spacing-base-rem) * .375) 0 0;width:100%;text-align:center}.file-upload-wrapper .file-dropzone .file-upload-body .file-preview-container .document-preview-link .file-size{font-family:var(--granite-font-family-default);font-size:var(--granite-font-size-micro);font-weight:var(--granite-font-weight-regular);line-height:calc(var(--granite-line-height-base-rem) * .625);color:var(--granite-color-text-week);margin:0 0 calc(var(--granite-spacing-base-rem) * .875)}.file-upload-wrapper .file-upload-footer{margin-inline:var(--granite-spacing-8);margin-bottom:var(--granite-spacing-8)}.file-upload-wrapper .file-upload-footer .footer-container{display:flex;justify-content:flex-end;align-items:center}.file-upload-wrapper .file-upload-footer .footer-container .retry-upload-button{margin-inline-start:var(--granite-spacing-8)}@keyframes loading-keyframe{to{transform:rotate(360deg)}}\n"] }]
5552
5560
  }], propDecorators: { fileDropRef: [{
5553
5561
  type: ViewChild,
5554
5562
  args: ['fileDropRef', { read: ElementRef }]
@@ -5560,8 +5568,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
5560
5568
  type: Input
5561
5569
  }], browseIcon: [{
5562
5570
  type: Input
5563
- }], errorIcon: [{
5564
- type: Input
5565
5571
  }], dropZoneText: [{
5566
5572
  type: Input
5567
5573
  }], browseButtonText: [{
@@ -5648,11 +5654,11 @@ class GraniteCollapsibleGroupComponent {
5648
5654
  this.collapsedChanged.emit(this.collapsed);
5649
5655
  }
5650
5656
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCollapsibleGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
5651
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCollapsibleGroupComponent, selector: "granite-collapsible-group", inputs: { collapsed: "collapsed", id: "id", arialabel: "arialabel" }, outputs: { collapsedChanged: "collapsedChanged" }, queries: [{ propertyName: "conditionalBodyContentRef", first: true, predicate: GraniteCollapsibleConditionalBodyDirective, descendants: true }, { propertyName: "conditionalHeaderContentRef", first: true, predicate: GraniteCollapsibleConditionalHeaderDirective, descendants: true }], ngImport: i0, template: "<div class=\"collapsible-wrapper\">\n <div\n class=\"collapsible-group-header\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon *ngIf=\"collapsed; else caretUp\">caret-down</granite-icon>\n <ng-template #caretUp>\n <granite-icon>caret-up</granite-icon>\n </ng-template>\n </div>\n </div>\n <div\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background-variant);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-semibold);padding:0 var(--granite-spacing-8);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background-variant);align-items:center}.collapsible-wrapper .collapsible-group-header:hover{opacity:.7}.collapsible-wrapper .collapsible-group-header .collapse-icon{align-self:center;font-size:var(--granite-font-size-display-small)}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-2) var(--granite-spacing-16) var(--granite-spacing-2) var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
5657
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: GraniteCollapsibleGroupComponent, selector: "granite-collapsible-group", inputs: { collapsed: "collapsed", id: "id", arialabel: "arialabel" }, outputs: { collapsedChanged: "collapsedChanged" }, queries: [{ propertyName: "conditionalBodyContentRef", first: true, predicate: GraniteCollapsibleConditionalBodyDirective, descendants: true }, { propertyName: "conditionalHeaderContentRef", first: true, predicate: GraniteCollapsibleConditionalHeaderDirective, descendants: true }], ngImport: i0, template: "<div class=\"collapsible-wrapper\">\n <div\n class=\"collapsible-group-header\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon\n [fontIcon]=\"collapsed ? 'icon-caret-down' : 'icon-caret-up'\"\n ></granite-icon>\n </div>\n </div>\n <div\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-base);border-radius:var(--granite-radius-s);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapse-icon{align-self:center;width:var(--granite-size-base-rem);height:var(--granite-size-base-rem);font-size:var(--granite-font-size-body);color:var(--granite-color-background-inverse);display:none}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-base-rem);font-weight:var(--granite-font-weight-bold);padding:var(--granite-spacing-8) var(--granite-spacing-16);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background);align-items:center}.collapsible-wrapper .collapsible-group-header:hover{background-color:var(--granite-color-background-hover)}.collapsible-wrapper .collapsible-group-header:hover .collapse-icon{display:block}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GraniteIconComponent, selector: "granite-icon", inputs: ["fontIcon"] }] }); }
5652
5658
  }
5653
5659
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GraniteCollapsibleGroupComponent, decorators: [{
5654
5660
  type: Component,
5655
- args: [{ selector: 'granite-collapsible-group', template: "<div class=\"collapsible-wrapper\">\n <div\n class=\"collapsible-group-header\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon *ngIf=\"collapsed; else caretUp\">caret-down</granite-icon>\n <ng-template #caretUp>\n <granite-icon>caret-up</granite-icon>\n </ng-template>\n </div>\n </div>\n <div\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background-variant);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);font-weight:var(--granite-font-weight-semibold);padding:0 var(--granite-spacing-8);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background-variant);align-items:center}.collapsible-wrapper .collapsible-group-header:hover{opacity:.7}.collapsible-wrapper .collapsible-group-header .collapse-icon{align-self:center;font-size:var(--granite-font-size-display-small)}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-2) var(--granite-spacing-16) var(--granite-spacing-2) var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"] }]
5661
+ args: [{ selector: 'granite-collapsible-group', template: "<div class=\"collapsible-wrapper\">\n <div\n class=\"collapsible-group-header\"\n role=\"button\"\n (click)=\"toggleCollapsibleGroup()\"\n [attr.id]=\"id ? 'collapsible-group-header-' + id : null\"\n [attr.aria-label]=\"arialabel\"\n [attr.aria-expanded]=\"!collapsed\"\n [attr.aria-controls]=\"id ? 'collapsible-group-body-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n conditionalHeaderContentRef\n ? conditionalHeaderContentRef.template\n : null\n \"\n ></ng-container>\n\n <div class=\"collapse-icon\">\n <granite-icon\n [fontIcon]=\"collapsed ? 'icon-caret-down' : 'icon-caret-up'\"\n ></granite-icon>\n </div>\n </div>\n <div\n class=\"collapsible-group-body\"\n [class]=\"collapsed ? 'collapse' : 'expand'\"\n role=\"region\"\n [attr.id]=\"id ? 'collapsible-group-body-' + id : null\"\n [attr.aria-labelledby]=\"id ? 'collapsible-group-header-' + id : null\"\n >\n <ng-container\n [ngTemplateOutlet]=\"\n !collapsed && conditionalBodyContentRef\n ? conditionalBodyContentRef.template\n : null\n \"\n >\n </ng-container>\n </div>\n</div>\n", styles: [".collapsible-wrapper{background-color:var(--granite-color-background);box-shadow:var(--granite-shadow-base);border-radius:var(--granite-radius-s);width:100%;font-family:var(--granite-font-family-default)}.collapsible-wrapper .collapse-icon{align-self:center;width:var(--granite-size-base-rem);height:var(--granite-size-base-rem);font-size:var(--granite-font-size-body);color:var(--granite-color-background-inverse);display:none}.collapsible-wrapper .collapsible-group-header{display:flex;flex-direction:row;justify-content:space-between;cursor:pointer;font-size:var(--granite-font-size-body-small);line-height:var(--granite-line-height-base-rem);font-weight:var(--granite-font-weight-bold);padding:var(--granite-spacing-8) var(--granite-spacing-16);transition:background-color .2s ease-out;color:var(--granite-color-text);background-color:var(--granite-color-background);align-items:center}.collapsible-wrapper .collapsible-group-header:hover{background-color:var(--granite-color-background-hover)}.collapsible-wrapper .collapsible-group-header:hover .collapse-icon{display:block}.collapsible-wrapper .collapsible-group-body{padding:var(--granite-spacing-16);transition:all .3s ease-in-out}.collapsible-wrapper .collapsible-group-body.expand{display:block;background-color:var(--granite-color-background)}.collapsible-wrapper .collapsible-group-body.collapse{display:none}\n"] }]
5656
5662
  }], propDecorators: { collapsed: [{
5657
5663
  type: Input
5658
5664
  }], id: [{