diff --git a/docs/README.md b/docs/README.md
index f4bbc360dd..f2b95bd079 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -181,7 +181,6 @@ A collection of Angular components for generic use.
| [Format Space pipe](core/pipes/format-space.pipe.md) | Replaces all the white space in a string with a supplied character. | [Source](../lib/core/src/lib/pipes/format-space.pipe.ts) |
| [Full name pipe](core/pipes/full-name.pipe.md) | Joins the first and last name properties from a `UserLike` object into a single string. | [Source](../lib/core/src/lib/pipes/full-name.pipe.ts) |
| [Localized Date pipe](core/pipes/localized-date.pipe.md) | Converts a date to a given format and locale. | [Source](../lib/core/src/lib/pipes/localized-date.pipe.ts) |
-| [Mime Type Icon pipe](core/pipes/mime-type-icon.pipe.md) | Retrieves an icon to represent a MIME type. | [Source](../lib/core/src/lib/pipes/mime-type-icon.pipe.ts) |
| [Multi Value Pipe](core/pipes/multi-value.pipe.md) | Takes an array of strings and turns it into one string where items are separated by a separator. The default separator applied to the list is the comma , however, you can set your own separator in the params of the pipe. | [Source](../lib/core/src/lib/pipes/multi-value.pipe.ts) |
| [Node Name Tooltip pipe](core/pipes/node-name-tooltip.pipe.md) | Formats the tooltip for a Node. | [Source](../lib/content-services/src/lib/pipes/node-name-tooltip.pipe.ts) |
| [Text Highlight pipe](core/pipes/text-highlight.pipe.md) | Adds highlighting to words or sections of text that match a search string. | [Source](../lib/core/src/lib/pipes/text-highlight.pipe.ts) |
diff --git a/docs/core/components/viewer.component.md b/docs/core/components/viewer.component.md
index 31c4036bcf..47b2504c04 100644
--- a/docs/core/components/viewer.component.md
+++ b/docs/core/components/viewer.component.md
@@ -74,7 +74,6 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| canNavigateNext | `boolean` | true | Toggles the next (">") button. Requires `allowNavigate` to be enabled. |
| fileName | `string` | | Override Content filename. |
| mimeType | `string` | | Overload mimeType |
-| originalMimeType | `string` | | Overload originalMimeType |
| overlayMode | `boolean` | false | If `true` then show the Viewer as a full page over the current content. Otherwise fit inside the parent div. |
| readOnly | `boolean` | true | Enable when where is possible the editing functionalities |
| allowedEditActions | `{ [key: string]: boolean }` | `{ rotate: true, crop: true }` | Controls which editing actions are enabled when not in read-only mode. Allows granular control over actions like rotation and cropping. |
@@ -121,7 +120,6 @@ You can provide custom file parameters, for example a value for the `mimeType` o
[fileName]="fileName"
[allowGoBack]="false"
[mimeType]="mimeType"
- [originalMimeType]="originalMimeType"
[urlFile]="fileUrl">
</adf-viewer>
```
diff --git a/docs/core/pipes/mime-type-icon.pipe.md b/docs/core/pipes/mime-type-icon.pipe.md
deleted file mode 100644
index 146c2af181..0000000000
--- a/docs/core/pipes/mime-type-icon.pipe.md
+++ /dev/null
@@ -1,30 +0,0 @@
----
-Title: Mime Type Icon pipe
-Added: v2.0.0
-Status: Active
----
-
-# [Mime Type Icon pipe](../../../lib/core/src/lib/pipes/mime-type-icon.pipe.ts "Defined in mime-type-icon.pipe.ts")
-
-Retrieves an icon to represent a MIME type.
-
-## Basic Usage
-
-<!-- {% raw %} -->
-
-```HTML
-<div>
- <img src='{{ "image/jpeg" | adfMimeTypeIcon }}' />
-</div>
-```
-
-<!-- {% endraw %} -->
-
-## Details
-
-The pipe takes a MIME type as input and returns the URL of an SVG file that
-symbolizes that type (see the [Thumbnail service](../services/thumbnail.service.md) for the mapping between types and icons). The pipe will return a "miscellaneous" icon when no specific mapping is defined.
-
-## See also
-
-- [Thumbnail service](../services/thumbnail.service.md)
diff --git a/docs/core/services/thumbnail.service.md b/docs/core/services/thumbnail.service.md
index d10c61a0ba..d7213acfce 100644
--- a/docs/core/services/thumbnail.service.md
+++ b/docs/core/services/thumbnail.service.md
@@ -49,11 +49,14 @@ and icons is shown in the table below:
All the ADF icons for MIME types are now registered into the [`MatIconRegistry`](https://material.angular.io/components/icon/api), so you can use all
the icons via the <mat-icon> tag:
-```javascript
+```typescript
import { ThumbnailService } from '@alfresco/adf-core';
-constructor(public thumbnailService: ThumbnailService) {
-}
+class MyComponent {
+ constructor(public thumbnailService: ThumbnailService) {
+
+ }
+}
```
```html
@@ -62,7 +65,3 @@ PDF <mat-icon svgIcon="application/pdf"></mat-icon>
GIF <mat-icon svgIcon="image/gif"></mat-icon>
.....
```
-
-## See also
-
-- [Mime type icon pipe](../pipes/mime-type-icon.pipe.md)
diff --git a/docs/versionIndex.md b/docs/versionIndex.md
index eeab83126d..12a3bf2340 100644
--- a/docs/versionIndex.md
+++ b/docs/versionIndex.md
@@ -576,7 +576,6 @@ backend services have been tested with each released version of ADF.
- [Log service](core/services/log.service.md)
- [Login component](core/components/login.component.md)
- [Logout directive](core/directives/logout.directive.md)
-- [Mime type icon pipe](core/pipes/mime-type-icon.pipe.md)
- [Node delete directive](content-services/directives/node-delete.directive.md)
- [Node favorite directive](content-services/directives/node-favorite.directive.md)
- [Node name tooltip pipe](core/pipes/node-name-tooltip.pipe.md)
diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html
index cbe29f41a5..3dc32a9443 100644
--- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html
+++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.html
@@ -20,7 +20,6 @@
[hideInfoButton]="hideInfoButton"
[fileName]="fileName"
[mimeType]="mimeType"
- [originalMimeType]="originalMimeType"
[urlFile]="urlFileContent"
[tracks]="tracks"
[readOnly]="readOnly"
diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts
index 1979e3f401..a7c7e2f5da 100644
--- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts
+++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts
@@ -455,8 +455,8 @@ describe('AlfrescoViewerComponent', () => {
//
});
- describe('originalMimeType', () => {
- it('should set originalMimeType based on nodeData content', async () => {
+ describe('mimeType', () => {
+ it('should set mime type based on nodeData content', async () => {
const defaultNode: Node = {
id: 'mock-id',
name: 'Mock Node',
@@ -488,7 +488,7 @@ describe('AlfrescoViewerComponent', () => {
} as Node);
await fixture.whenStable();
- expect(component.originalMimeType).toEqual('application/msWord');
+ expect(component.mimeType).toEqual('application/msWord');
});
});
diff --git a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
index e7abd42814..c9f09f22b2 100644
--- a/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
+++ b/lib/content-services/src/lib/viewer/components/alfresco-viewer.component.ts
@@ -211,7 +211,6 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
urlFileContent: string;
fileName: string;
mimeType: string;
- originalMimeType: string;
nodeEntry: NodeEntry;
tracks: Track[] = [];
readOnly: boolean = true;
@@ -344,8 +343,10 @@ export class AlfrescoViewerComponent implements OnChanges, OnInit, OnDestroy {
}
if (nodeRendition) {
urlFileContent = nodeRendition.url;
- mimeType = nodeRendition.mimeType;
- this.originalMimeType = nodeData?.content?.mimeType;
+
+ const nodeMimeType = nodeData?.content?.mimeType;
+ const renditionMimeType = nodeRendition.mimeType;
+ mimeType = nodeMimeType || renditionMimeType;
}
} else if (viewerType === 'media') {
this.tracks = await this.renditionService.generateMediaTracksRendition(this.nodeId);
diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json
index 24547c75ea..bce017c0b8 100644
--- a/lib/core/src/lib/i18n/en.json
+++ b/lib/core/src/lib/i18n/en.json
@@ -436,6 +436,7 @@
"WAIT": "Wait"
},
"ARIA": {
+ "MIME_TYPE_ICON": "File type icon",
"PREVIOUS_PAGE": "Previous page",
"NEXT_PAGE": "Next page",
"ZOOM_IN": "Zoom in",
diff --git a/lib/core/src/lib/pipes/mime-type-icon.pipe.ts b/lib/core/src/lib/pipes/mime-type-icon.pipe.ts
deleted file mode 100644
index 3ed23a1ed1..0000000000
--- a/lib/core/src/lib/pipes/mime-type-icon.pipe.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Pipe, PipeTransform } from '@angular/core';
-import { ThumbnailService } from '../common/services/thumbnail.service';
-
-@Pipe({
- name: 'adfMimeTypeIcon',
- standalone: true
-})
-export class MimeTypeIconPipe implements PipeTransform {
- constructor(private thumbnailService: ThumbnailService) {}
-
- transform(text: string): string {
- return this.thumbnailService.getMimeTypeIcon(text);
- }
-}
diff --git a/lib/core/src/lib/pipes/pipe.module.ts b/lib/core/src/lib/pipes/pipe.module.ts
index f7c7d193c4..f75f6891b2 100644
--- a/lib/core/src/lib/pipes/pipe.module.ts
+++ b/lib/core/src/lib/pipes/pipe.module.ts
@@ -18,7 +18,6 @@
import { NgModule } from '@angular/core';
import { FileSizePipe } from './file-size.pipe';
-import { MimeTypeIconPipe } from './mime-type-icon.pipe';
import { HighlightPipe } from './text-highlight.pipe';
import { TimeAgoPipe } from './time-ago.pipe';
import { InitialUsernamePipe } from './user-initial.pipe';
@@ -38,7 +37,6 @@ export const CORE_PIPES = [
TimeAgoPipe,
FileSizePipe,
HighlightPipe,
- MimeTypeIconPipe,
FullNamePipe,
FormatSpacePipe,
FileTypePipe,
diff --git a/lib/core/src/lib/pipes/public-api.ts b/lib/core/src/lib/pipes/public-api.ts
index 680a1e952b..0d56cb670a 100644
--- a/lib/core/src/lib/pipes/public-api.ts
+++ b/lib/core/src/lib/pipes/public-api.ts
@@ -21,7 +21,6 @@ export * from './file-type.pipe';
export * from './format-space.pipe';
export * from './full-name.pipe';
export * from './localized-date.pipe';
-export * from './mime-type-icon.pipe';
export * from './multi-value.pipe';
export * from './text-highlight.pipe';
export * from './time-ago.pipe';
diff --git a/lib/core/src/lib/viewer/components/viewer.component.html b/lib/core/src/lib/viewer/components/viewer.component.html
index b97910ec33..73d3887d08 100644
--- a/lib/core/src/lib/viewer/components/viewer.component.html
+++ b/lib/core/src/lib/viewer/components/viewer.component.html
@@ -43,8 +43,8 @@
<mat-icon>navigate_before</mat-icon>
</button>
<img class="adf-viewer__mimeicon"
- [alt]="originalMimeType || mimeType"
- [src]="(originalMimeType || mimeType) | adfMimeTypeIcon"
+ [alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
+ [src]="mimeTypeIconUrl"
data-automation-id="adf-file-thumbnail">
<span class="adf-viewer__display-name"
id="adf-viewer-display-name">{{ fileName }}</span>
diff --git a/lib/core/src/lib/viewer/components/viewer.component.scss b/lib/core/src/lib/viewer/components/viewer.component.scss
index 05d5362bfc..6b569f034b 100644
--- a/lib/core/src/lib/viewer/components/viewer.component.scss
+++ b/lib/core/src/lib/viewer/components/viewer.component.scss
@@ -28,6 +28,8 @@
vertical-align: middle;
height: 18px;
width: 18px;
+ margin-left: 4px;
+ margin-right: 4px;
}
&-toolbar {
diff --git a/lib/core/src/lib/viewer/components/viewer.component.spec.ts b/lib/core/src/lib/viewer/components/viewer.component.spec.ts
index 8aecc8bace..4e73576d28 100644
--- a/lib/core/src/lib/viewer/components/viewer.component.spec.ts
+++ b/lib/core/src/lib/viewer/components/viewer.component.spec.ts
@@ -99,38 +99,6 @@ describe('ViewerComponent', () => {
});
});
- describe('originalMimeType', () => {
- const getMimeTypeIconElement = () => fixture.nativeElement.querySelector('.adf-viewer__mimeicon');
-
- it('should set alt attribute to originalMimeType when originalMimeType is provided', () => {
- component.originalMimeType = 'image/png';
- fixture.detectChanges();
- const altAttribute: string = getMimeTypeIconElement().getAttribute('alt');
- expect(altAttribute).toBe('image/png');
- });
-
- it('should set src attribute based on originalMimeType when originalMimeType is provided', () => {
- component.originalMimeType = 'image';
- fixture.detectChanges();
- const srcAttribute: string = getMimeTypeIconElement().getAttribute('src');
- expect(srcAttribute).toContain('image');
- });
-
- it('should set alt attribute to mimeType when originalMimeType is not provided', () => {
- component.mimeType = 'application/pdf';
- fixture.detectChanges();
- const altAttribute: string = getMimeTypeIconElement().getAttribute('alt');
- expect(altAttribute).toBe('application/pdf');
- });
-
- it('should set src attribute based on mimeType when originalMimeType is not provided', () => {
- component.mimeType = 'image';
- fixture.detectChanges();
- const srcAttribute: string = getMimeTypeIconElement().getAttribute('src');
- expect(srcAttribute).toContain('image');
- });
- });
-
describe('File Name Test', () => {
it('should fileName be set by urlFile input if the fileName is not provided as Input', () => {
component.fileName = '';
diff --git a/lib/core/src/lib/viewer/components/viewer.component.ts b/lib/core/src/lib/viewer/components/viewer.component.ts
index 9bbd11d270..41bf90764d 100644
--- a/lib/core/src/lib/viewer/components/viewer.component.ts
+++ b/lib/core/src/lib/viewer/components/viewer.component.ts
@@ -23,6 +23,7 @@ import {
ElementRef,
EventEmitter,
HostListener,
+ inject,
Input,
OnChanges,
OnDestroy,
@@ -52,7 +53,8 @@ import { ViewerSidebarComponent } from './viewer-sidebar.component';
import { ViewerToolbarComponent } from './viewer-toolbar.component';
import { ViewerToolbarActionsComponent } from './viewer-toolbar-actions.component';
import { ViewerToolbarCustomActionsComponent } from './viewer-toolbar-custom-actions.component';
-import { MimeTypeIconPipe } from '../../pipes';
+import { IconComponent } from '../../icon';
+import { ThumbnailService } from '../../common';
const DEFAULT_NON_PREVIEW_CONFIG = {
enableDownloadPrompt: false,
@@ -84,11 +86,13 @@ const DEFAULT_NON_PREVIEW_CONFIG = {
ViewerSidebarComponent,
ViewerToolbarActionsComponent,
ViewerToolbarCustomActionsComponent,
- MimeTypeIconPipe
+ IconComponent
],
providers: [ViewUtilService]
})
export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
+ private thumbnailService = inject(ThumbnailService);
+
@ContentChild(ViewerToolbarComponent)
toolbar: ViewerToolbarComponent;
@@ -208,10 +212,6 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
@Input()
mimeType: string;
- /** Overload originalMimeType*/
- @Input()
- originalMimeType: string;
-
/**
* Context object available for binding by the local sidebarRightTemplate with let declarations.
*/
@@ -291,6 +291,7 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
private isDialogVisible: boolean = false;
public downloadPromptTimer: number;
public downloadPromptReminderTimer: number;
+ public mimeTypeIconUrl: string;
constructor(
private el: ElementRef,
@@ -300,15 +301,20 @@ export class ViewerComponent<T> implements OnDestroy, OnInit, OnChanges {
) {}
ngOnChanges(changes: SimpleChanges) {
- const { blobFile, urlFile } = changes;
+ const { blobFile, urlFile, mimeType } = changes;
if (blobFile?.currentValue) {
this.mimeType = blobFile.currentValue.type;
+ this.mimeTypeIconUrl = this.thumbnailService.getMimeTypeIcon(blobFile.currentValue.type);
}
if (urlFile?.currentValue) {
this.fileName ||= this.viewUtilsService.getFilenameFromUrl(urlFile.currentValue);
}
+
+ if (mimeType?.currentValue) {
+ this.mimeTypeIconUrl = this.thumbnailService.getMimeTypeIcon(mimeType.currentValue);
+ }
}
ngOnInit(): void {