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
};
}
}