ACS-8227: remove internal mime type icon pipe (#10142)

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) |

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>
 ```

docs/core/pipes/mime-type-icon.pipe.md

@@ -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)

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';
 
+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)

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)

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"

lib/content-services/src/lib/viewer/components/alfresco-viewer.component.spec.ts

@@ -455,8 +455,8 @@ describe('AlfrescoViewerComponent', () => {
         //
     });
 
-    describe('originalMimeType', () => {
+    describe('mimeType', () => {
-        it('should set originalMimeType based on nodeData content', async () => {
+        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');
         });
     });
 

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

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",

lib/core/src/lib/pipes/mime-type-icon.pipe.ts

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

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,

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

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"
+                         [alt]="'ADF_VIEWER.ARIA.MIME_TYPE_ICON' | translate"
-                         [src]="(originalMimeType || mimeType) | adfMimeTypeIcon"
+                         [src]="mimeTypeIconUrl"
                          data-automation-id="adf-file-thumbnail">
                     <span class="adf-viewer__display-name"
                           id="adf-viewer-display-name">{{ fileName }}</span>

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 {

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 = '';

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 {