feat(ui): unify content thumbnails into dot-content-thumbnail component (#36295)

core-web/libs/block-editor/src/lib/block-editor.module.ts

@@ -29,7 +29,8 @@ import {
     DotFieldRequiredDirective,
     DotMessagePipe,
     DotSpinnerComponent,
-    DotContentletStatusBadgeComponent
+    DotContentletStatusBadgeComponent,
+    DotContentThumbnailComponent
 } from '@dotcms/ui';
 
 //Editor
@@ -78,7 +79,8 @@ const initTranslations = (dotMessageService: DotMessageService) => {
         DragHandleDirective,
         DotContextMenuComponent,
         DotAddButtonComponent,
-        DotContentletStatusBadgeComponent
+        DotContentletStatusBadgeComponent,
+        DotContentThumbnailComponent
     ],
     declarations: [
         EditorDirective,

core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html

@@ -2,12 +2,10 @@
     <p-card class="flex! flex-row! items-center justify-start">
         <ng-template #header>
             <div class="box-border flex h-full items-center p-4! pr-0!">
-                <dot-contentlet-thumbnail
-                    [width]="94"
-                    [height]="94"
-                    [iconSize]="'72px'"
+                <dot-content-thumbnail
                     [contentlet]="data"
-                    class="relative block h-[94px] w-[94px]" />
+                    iconSize="72px"
+                    class="relative h-[94px] w-[94px]" />
             </div>
         </ng-template>
 

core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css

@@ -28,9 +28,7 @@
     width: 32px;
 }
 
-.icon-wrapper dot-contentlet-thumbnail {
-    align-items: center;
-    display: block;
+.icon-wrapper dot-content-thumbnail {
     position: relative;
     width: 42px;
     height: 42px;
@@ -43,7 +41,7 @@
 }
 
 .icon-wrapper.page,
-.icon-wrapper.page dot-contentlet-thumbnail {
+.icon-wrapper.page dot-content-thumbnail {
     flex-basis: 64px;
     height: 64px;
     width: 64px;

core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html

@@ -3,11 +3,7 @@
         <i class="material-symbols-outlined">{{ url }}</i>
     } @else {
         @if (data?.contentlet) {
-            <dot-contentlet-thumbnail
-                [contentlet]="data.contentlet"
-                [width]="42"
-                [height]="42"
-                [iconSize]="'42px'" />
+            <dot-content-thumbnail [contentlet]="data.contentlet" iconSize="42px" />
         } @else {
             <img [src]="url" alt="" />
         }

core-web/libs/block-editor/src/lib/shared/shared.module.ts

@@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
 import { TagModule } from 'primeng/tag';
 
-import { DotContentletStatusBadgeComponent } from '@dotcms/ui';
+import { DotContentletStatusBadgeComponent, DotContentThumbnailComponent } from '@dotcms/ui';
 
 // Shared
 import {
@@ -26,7 +26,8 @@ import { SuggestionsService } from './services';
         ReactiveFormsModule,
         ButtonModule,
         TagModule,
-        DotContentletStatusBadgeComponent
+        DotContentletStatusBadgeComponent,
+        DotContentThumbnailComponent
     ],
     declarations: [
         SuggestionsComponent,

core-web/libs/dotcms-webcomponents/src/components.d.ts

@@ -450,6 +450,13 @@ export namespace Components {
          */
         "size": string;
     }
+    /**
+     * @deprecated Angular code must use `DotContentThumbnailComponent`
+     * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+     * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+     * This web component remains only for Stencil-internal use
+     * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+     */
     interface DotContentletThumbnail {
         /**
           * @default ''
@@ -1840,6 +1847,13 @@ declare global {
         prototype: HTMLDotContentletLockIconElement;
         new (): HTMLDotContentletLockIconElement;
     };
+    /**
+     * @deprecated Angular code must use `DotContentThumbnailComponent`
+     * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+     * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+     * This web component remains only for Stencil-internal use
+     * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+     */
     interface HTMLDotContentletThumbnailElement extends Components.DotContentletThumbnail, HTMLStencilElement {
     }
     var HTMLDotContentletThumbnailElement: {
@@ -2751,6 +2765,13 @@ declare namespace LocalJSX {
          */
         "size"?: string;
     }
+    /**
+     * @deprecated Angular code must use `DotContentThumbnailComponent`
+     * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+     * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+     * This web component remains only for Stencil-internal use
+     * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+     */
     interface DotContentletThumbnail {
         /**
           * @default ''
@@ -3891,6 +3912,13 @@ declare module "@stencil/core" {
              */
             "dot-contentlet-icon": LocalJSX.DotContentletIcon & JSXBase.HTMLAttributes<HTMLDotContentletIconElement>;
             "dot-contentlet-lock-icon": LocalJSX.DotContentletLockIcon & JSXBase.HTMLAttributes<HTMLDotContentletLockIconElement>;
+            /**
+             * @deprecated Angular code must use `DotContentThumbnailComponent`
+             * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+             * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+             * This web component remains only for Stencil-internal use
+             * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+             */
             "dot-contentlet-thumbnail": LocalJSX.DotContentletThumbnail & JSXBase.HTMLAttributes<HTMLDotContentletThumbnailElement>;
             "dot-context-menu": LocalJSX.DotContextMenu & JSXBase.HTMLAttributes<HTMLDotContextMenuElement>;
             "dot-data-view-button": LocalJSX.DotDataViewButton & JSXBase.HTMLAttributes<HTMLDotDataViewButtonElement>;

core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx

@@ -5,6 +5,13 @@ import { Component, h, Host, Prop, State } from '@stencil/core';
 
 import { DotContentletItem } from '../../models/dot-contentlet-item.model';
 
+/**
+ * @deprecated Angular code must use `DotContentThumbnailComponent`
+ * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+ * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+ * This web component remains only for Stencil-internal use
+ * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+ */
 @Component({
     tag: 'dot-contentlet-thumbnail',
     styleUrl: 'dot-contentlet-thumbnail.scss'

core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md

@@ -3,6 +3,12 @@
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Angular code must use `DotContentThumbnailComponent`
+(`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+This web component remains only for Stencil-internal use
+(`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+
 ## Properties
 
 | Property             | Attribute              | Description | Type                | Default     |

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html

@@ -15,19 +15,10 @@
         </div>
     } @else {
         <div class="dot-file-field-preview__thumbnail">
-            @if (fileInfo.source === 'temp') {
-                <dot-temp-file-thumbnail
-                    [tempFile]="fileInfo.file"
-                    [iconSize]="'48px'"
-                    data-testId="temp-file-thumbnail" />
-            } @else {
-                <dot-contentlet-thumbnail
-                    [fieldVariable]="fileInfo.fieldVariable"
-                    [iconSize]="'48px'"
-                    [contentlet]="fileInfo.file"
-                    [playableVideo]="true"
-                    data-testId="contentlet-thumbnail" />
-            }
+            <dot-content-thumbnail
+                [thumbnail]="fileInfo.thumbnail"
+                iconSize="48px"
+                data-testId="contentlet-thumbnail" />
         </div>
         <div class="dot-file-field-preview__metadata">
             @if (metadata) {

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss

@@ -37,6 +37,10 @@
     overflow: hidden;
     user-select: none;
     cursor: pointer;
+    // Narrow layout (container height: auto): cap the card like the media
+    // thumbnails instead of growing with the whole text content. Ignored on
+    // the wide layout, where both axes are definite.
+    aspect-ratio: 16 / 9;
 }
 
 .dot-file-field-preview__code-content {
@@ -56,6 +60,10 @@
     justify-content: center;
     overflow: hidden;
     background-color: #e5e7eb;
+    // Narrow layout (container height: auto): keep every card the same height
+    // regardless of the media's natural ratio. Ignored on the wide layout,
+    // where both width and height are definite.
+    aspect-ratio: 16 / 9;
 
     @container preview (min-width: 500px) {
         max-width: 17.5rem;
@@ -196,17 +204,6 @@
     text-decoration: none;
 }
 
-// Third-party web-component internals – cannot be styled with Tailwind
-:host {
-    dot-contentlet-thumbnail::ng-deep {
-        .thumbnail img,
-        .background-image:not(.svg-thumbnail) img {
-            object-fit: cover;
-        }
-    }
-}
-
-// Third-party web-component internals – cannot be styled with Tailwind
 .preview-container--fade .preview-code_container::after {
     content: "";
     background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts

@@ -67,6 +67,15 @@ describe('DotFileFieldPreviewComponent', () => {
             expect(spectator.query(byTestId('download-btn'))).toBeTruthy();
         });
 
+        it('should render the unified thumbnail with the temp file pdf src', () => {
+            spectator.detectChanges();
+
+            expect(spectator.query(byTestId('contentlet-thumbnail'))).toBeTruthy();
+            expect(
+                spectator.query(byTestId('dot-content-thumbnail-image')).getAttribute('src')
+            ).toBe(TEMP_FILE_MOCK.thumbnailUrl);
+        });
+
         it('should call downloadAsset when click on the download btn', () => {
             const downloadSpy = jest
                 .spyOn(spectator.component, 'downloadAsset')
@@ -80,6 +89,17 @@ describe('DotFileFieldPreviewComponent', () => {
             expect(downloadSpy).toHaveBeenCalledWith(expectedUrl);
         });
 
+        it('should render with fallback metadata when the temp file has none (image editor save)', () => {
+            spectator.setInput('previewFile', {
+                source: 'temp',
+                file: { ...TEMP_FILE_MOCK, metadata: undefined }
+            } as unknown);
+            spectator.detectChanges();
+
+            expect(spectator.component).toBeTruthy();
+            expect(spectator.query(byTestId('metadata-title'))).toHaveText(TEMP_FILE_MOCK.fileName);
+        });
+
         it('should not show download button when referenceUrl is missing', () => {
             spectator.setInput('previewFile', {
                 source: 'temp',
@@ -109,9 +129,15 @@ describe('DotFileFieldPreviewComponent', () => {
             expect(spectator.component).toBeTruthy();
         });
 
-        it('should be have a dot-contentlet-thumbnail', () => {
+        it('should render the unified thumbnail with the contentlet image src', () => {
             spectator.detectChanges();
-            expect(spectator.query('dot-contentlet-thumbnail')).toBeTruthy();
+
+            const { inode, modDate } = NEW_FILE_MOCK.entity;
+
+            expect(spectator.query(byTestId('contentlet-thumbnail'))).toBeTruthy();
+            expect(
+                spectator.query(byTestId('dot-content-thumbnail-image')).getAttribute('src')
+            ).toBe(`/dA/${inode}/asset/500w/50q?r=${modDate}`);
         });
 
         it('should show proper metadata', () => {

core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts

@@ -1,7 +1,6 @@
 import { of } from 'rxjs';
 
 import {
-    CUSTOM_ELEMENTS_SCHEMA,
     ChangeDetectionStrategy,
     Component,
     computed,
@@ -27,10 +26,14 @@ import {
     DotFileMetadata
 } from '@dotcms/dotcms-models';
 import {
-    DotTempFileThumbnailComponent,
+    DotContentThumbnail,
+    DotContentThumbnailComponent,
     DotFileSizeFormatPipe,
     DotMessagePipe,
-    DotCopyButtonComponent
+    DotCopyButtonComponent,
+    buildFallbackTempFileMetadata,
+    contentletToThumbnailModel,
+    tempFileToThumbnailModel
 } from '@dotcms/ui';
 import { getFileMetadata } from '@dotcms/utils';
 
@@ -47,6 +50,8 @@ type FileInfo = UploadedFile & {
     downloadLink: string | null;
     content: string | null;
     metadata: DotFileMetadata;
+    /** Resolved model for the thumbnail viewer, built from either origin. */
+    thumbnail: DotContentThumbnail;
 };
 
 const buildTempDownloadLink = (referenceUrl: string): string => {
@@ -58,7 +63,7 @@ const buildTempDownloadLink = (referenceUrl: string): string => {
 @Component({
     selector: 'dot-file-field-preview',
     imports: [
-        DotTempFileThumbnailComponent,
+        DotContentThumbnailComponent,
         DotFileSizeFormatPipe,
         DotMessagePipe,
         ButtonModule,
@@ -70,8 +75,7 @@ const buildTempDownloadLink = (referenceUrl: string): string => {
     providers: [ConfirmationService],
     templateUrl: './dot-file-field-preview.component.html',
     styleUrls: ['./dot-file-field-preview.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotFileFieldPreviewComponent implements OnInit {
     readonly #dotResourceLinksService = inject(DotResourceLinksService);
@@ -149,7 +153,8 @@ export class DotFileFieldPreviewComponent implements OnInit {
                 contentType,
                 fieldVariable,
                 downloadLink: `/contentAsset/raw-data/${file.inode}/${fieldVariable}?byInode=true&force_download=true`,
-                metadata: getFileMetadata(file)
+                metadata: getFileMetadata(file),
+                thumbnail: contentletToThumbnailModel(file, { fieldVariable, playableVideo: true })
             };
         }
 
@@ -162,7 +167,9 @@ export class DotFileFieldPreviewComponent implements OnInit {
             contentType: DEFAULT_CONTENT_TYPE,
             fieldVariable: DEFAULT_CONTENT_TYPE,
             downloadLink: file.referenceUrl ? buildTempDownloadLink(file.referenceUrl) : null,
-            metadata: file.metadata
+            // Temp files fresh from the image editor may lack the metadata block
+            metadata: file.metadata ?? buildFallbackTempFileMetadata(file),
+            thumbnail: tempFileToThumbnailModel(file)
         };
     });
 

core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html

@@ -127,10 +127,9 @@
                                 @if (showThumbnail) {
                                     <div
                                         class="h-14 w-20 shrink-0 overflow-hidden rounded-md bg-gray-100">
-                                        <dot-contentlet-thumbnail
-                                            [iconSize]="'24px'"
+                                        <dot-content-thumbnail
                                             [contentlet]="item"
-                                            [playableVideo]="false"
+                                            iconSize="24px"
                                             data-testId="contentlet-thumbnail" />
                                     </div>
                                 }
@@ -159,11 +158,12 @@
                     @case ('image') {
                         <td class="w-24 max-w-24 min-w-24" [class.cursor-not-allowed]="isDisabled">
                             <div class="flex items-center justify-center">
-                                <dot-contentlet-thumbnail
-                                    [iconSize]="'30px'"
-                                    [contentlet]="item"
-                                    [playableVideo]="false"
-                                    data-testId="contentlet-thumbnail" />
+                                <div class="h-14 w-20 shrink-0 overflow-hidden rounded-md">
+                                    <dot-content-thumbnail
+                                        [contentlet]="item"
+                                        iconSize="30px"
+                                        data-testId="contentlet-thumbnail" />
+                                </div>
                             </div>
                         </td>
                     }