diff --git a/projects/composition/src/app/api-data/cps-file-upload.json b/projects/composition/src/app/api-data/cps-file-upload.json index ec612b5a..5c34f3b8 100644 --- a/projects/composition/src/app/api-data/cps-file-upload.json +++ b/projects/composition/src/app/api-data/cps-file-upload.json @@ -44,6 +44,22 @@ "type": "Function", "default": "undefined", "description": "Callback for uploaded file processing." + }, + { + "name": "fileNameTooltipPosition", + "optional": false, + "readonly": false, + "type": "CpsTooltipPosition", + "default": "top", + "description": "Position of file name tooltip, it can be 'top', 'bottom', 'left' or 'right'." + }, + { + "name": "fileNameTooltipOffset", + "optional": false, + "readonly": false, + "type": "number", + "default": "12", + "description": "File name tooltip offset for styling." } ] }, diff --git a/projects/composition/src/app/api-data/cps-tooltip.json b/projects/composition/src/app/api-data/cps-tooltip.json index 5aad0e0e..fb8a7b7f 100644 --- a/projects/composition/src/app/api-data/cps-tooltip.json +++ b/projects/composition/src/app/api-data/cps-tooltip.json @@ -75,6 +75,14 @@ "type": "string", "default": "cps-tooltip-content", "description": "Tooltip content class for styling." + }, + { + "name": "tooltipOffset", + "optional": false, + "readonly": false, + "type": "number", + "default": "8", + "description": "Tooltip offset for styling." } ] } diff --git a/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html b/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html index 466e8c56..1d007144 100644 --- a/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html +++ b/projects/composition/src/app/pages/file-upload-page/file-upload-page.component.html @@ -7,14 +7,14 @@

File upload component with the dependency on selected label="File extension" [options]="fileUploadOptions" [value]="selectedFileUploadType.value" - (valueChanged)="onFileExtensionChanged($event)" - [mandatory]="false"> + (valueChanged)="onFileExtensionChanged($event)">
File upload component with extra info

[fileInfo]="fileInfo" fileDesc="Pictures or PDFs" width="500" + fileNameTooltipOffset="15" [fileProcessingCallback]="processUploadedFile" (fileUploadFailed)="onFileUploadFailed($event)" (fileUploaded)="onFileUploaded($event)" diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html index 82345c8e..aa1ccdc7 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html +++ b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.html @@ -12,6 +12,7 @@ (mouseleave)="isDragoverFile = false" (drop)="tryUploadFile($event)"> -
+
{{ uploadedFile.name }}
diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss index 3295cf8b..7a10425b 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss +++ b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.scss @@ -80,14 +80,22 @@ $text-color-darkest: var(--cps-color-text-darkest); .cps-file-upload-uploaded-file-title { display: flex; align-items: center; + flex: 1; + min-width: 0; .cps-file-upload-uploaded-file-name { color: $text-color-darkest; font-size: 20px; margin: 0 8px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: calc(100% - 60px); } } .cps-file-upload-uploaded-file-remove-icon { cursor: pointer; + flex-shrink: 0; + margin-left: 8px; &:hover { ::ng-deep .cps-icon { color: var(--cps-color-error-darken1) !important; diff --git a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts index ad8f4f8d..415acf05 100644 --- a/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts +++ b/projects/cps-ui-kit/src/lib/components/cps-file-upload/cps-file-upload.component.ts @@ -1,16 +1,23 @@ import { CommonModule } from '@angular/common'; import { Component, + ElementRef, EventEmitter, Input, + numberAttribute, OnChanges, OnInit, Output, - SimpleChanges + SimpleChanges, + ViewChild } from '@angular/core'; import { catchError, Observable, of, take } from 'rxjs'; import { convertSize } from '../../utils/internal/size-utils'; import { CpsIconComponent } from '../cps-icon/cps-icon.component'; +import { + CpsTooltipDirective, + CpsTooltipPosition +} from '../../directives/cps-tooltip/cps-tooltip.directive'; import { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress-linear.component'; /** @@ -20,7 +27,12 @@ import { CpsProgressLinearComponent } from '../cps-progress-linear/cps-progress- @Component({ selector: 'cps-file-upload', standalone: true, - imports: [CommonModule, CpsIconComponent, CpsProgressLinearComponent], + imports: [ + CommonModule, + CpsIconComponent, + CpsProgressLinearComponent, + CpsTooltipDirective + ], templateUrl: './cps-file-upload.component.html', styleUrls: ['./cps-file-upload.component.scss'] }) @@ -56,6 +68,18 @@ export class CpsFileUploadComponent implements OnInit, OnChanges { @Input() fileProcessingCallback?: (file: File) => Observable = undefined; + /** + * Position of file name tooltip, it can be 'top', 'bottom', 'left' or 'right'. + * @group Props + */ + @Input() fileNameTooltipPosition: CpsTooltipPosition = 'top'; + + /** + * File name tooltip offset for styling. + * @group Props + */ + @Input({ transform: numberAttribute }) fileNameTooltipOffset: number = 12; + /** * Callback to invoke when file is uploaded. * @param {File} File @@ -77,6 +101,8 @@ export class CpsFileUploadComponent implements OnInit, OnChanges { */ @Output() uploadedFileRemoved = new EventEmitter(); + @ViewChild('fileInput') fileInput?: ElementRef; + isDragoverFile = false; uploadedFile?: File; extensionsString = ''; @@ -150,6 +176,10 @@ export class CpsFileUploadComponent implements OnInit, OnChanges { const name = this.uploadedFile?.name ?? ''; this.uploadedFile = undefined; this.uploadedFileRemoved.emit(name); + + if (this.fileInput) { + this.fileInput.nativeElement.value = ''; + } } private _isFileExtensionValid(file?: File) { diff --git a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts index 8a71affe..8fac7bd9 100644 --- a/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts +++ b/projects/cps-ui-kit/src/lib/directives/cps-tooltip/cps-tooltip.directive.ts @@ -84,6 +84,12 @@ export class CpsTooltipDirective implements OnDestroy { */ @Input() tooltipContentClass = 'cps-tooltip-content'; + /** + * Tooltip offset for styling. + * @group Props + */ + @Input() tooltipOffset: number = 8; + private _popup?: HTMLDivElement; private _showTimeout?: any; private _hideTimeout?: any; @@ -216,11 +222,15 @@ export class CpsTooltipDirective implements OnDestroy { targetElRect.left + this.window.scrollX + (targetEl.offsetWidth - popupRect.width) / 2, - top: targetElRect.bottom + this.window.scrollY + 8 + top: targetElRect.bottom + this.window.scrollY + this.tooltipOffset }; case 'left': return { - left: targetElRect.left - this.window.scrollX - popupRect.width - 8, + left: + targetElRect.left - + this.window.scrollX - + popupRect.width - + this.tooltipOffset, top: targetElRect.top + this.window.scrollY + @@ -228,7 +238,7 @@ export class CpsTooltipDirective implements OnDestroy { }; case 'right': return { - left: targetElRect.right + this.window.scrollX + 8, + left: targetElRect.right + this.window.scrollX + this.tooltipOffset, top: targetElRect.top + this.window.scrollY + @@ -240,7 +250,11 @@ export class CpsTooltipDirective implements OnDestroy { targetElRect.left + this.window.scrollX + (targetEl.offsetWidth - popupRect.width) / 2, - top: targetElRect.top + this.window.scrollY - popupRect.height - 8 + top: + targetElRect.top + + this.window.scrollY - + popupRect.height - + this.tooltipOffset }; } }