From 14a1102cd87e35300b9219b66f07a11a7f4cf3d7 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 8 Oct 2024 11:31:51 +0300 Subject: [PATCH 1/2] fix style attr passed as object not rendered properly for image field --- .../src/components/image.directive.spec.ts | 10 ++++++++++ .../src/components/image.directive.ts | 9 ++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) diff --git a/packages/sitecore-jss-angular/src/components/image.directive.spec.ts b/packages/sitecore-jss-angular/src/components/image.directive.spec.ts index 4ff50438b5..1a119cf080 100644 --- a/packages/sitecore-jss-angular/src/components/image.directive.spec.ts +++ b/packages/sitecore-jss-angular/src/components/image.directive.spec.ts @@ -190,6 +190,7 @@ describe('', () => { alt: 'my image', height: '650', width: '300', + style: { background: 'white', color: 'black' }, }, }; const eeMedia = { @@ -224,6 +225,15 @@ describe('', () => { expect(img.width).toBe(150); }); + it('should render img with style prop', () => { + comp2.field = media; + fixture2.detectChanges(); + + const img = de.nativeElement.getElementsByTagName('img')[0]; + expect(img.style.getPropertyValue('background')).toBe('white'); + expect(img.style.getPropertyValue('color')).toBe('black'); + }); + it('should render img with addtional props in EE mode', () => { comp2.field = eeMedia; fixture2.detectChanges(); diff --git a/packages/sitecore-jss-angular/src/components/image.directive.ts b/packages/sitecore-jss-angular/src/components/image.directive.ts index 085e274060..0820e85020 100644 --- a/packages/sitecore-jss-angular/src/components/image.directive.ts +++ b/packages/sitecore-jss-angular/src/components/image.directive.ts @@ -124,7 +124,7 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { ...parsedAttrs, }; // eslint-disable-next-line prefer-const - let { src, srcSet, ...otherAttrs } = combinedAttrs; + let { src, srcSet, style, ...otherAttrs } = combinedAttrs; if (!src) { return null; } @@ -139,6 +139,13 @@ export class ImageDirective extends BaseFieldDirective implements OnChanges { } else { newAttrs.src = src; } + + if (style) { + newAttrs.style = Object.entries(style) + .map(([propName, value]) => `${propName}:${value}`) + .join(';'); + } + return newAttrs; } From 82ef222d07757eb4915dddbae3e2af69e918fbc7 Mon Sep 17 00:00:00 2001 From: yavorsk Date: Tue, 8 Oct 2024 11:37:57 +0300 Subject: [PATCH 2/2] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c3f7d891fc..9286e6897f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -17,6 +17,7 @@ Our versioning strategy is as follows: * `[templates/nextjs]` Fix embedded personalization not rendering correctly after navigation through router links. ([#1911](https://github.com/Sitecore/jss/pull/1911)) * `[template/angular]` Prevent client-side dictionary API call when SSR data is available ([#1930](https://github.com/Sitecore/jss/pull/1930)) ([#1932](https://github.com/Sitecore/jss/pull/1932)) * `[sitecore-jss-angular]` Fix default empty field components to not render the unwanted wrapping tags ([#1937](https://github.com/Sitecore/jss/pull/1937)) ([#1940](https://github.com/Sitecore/jss/pull/1940)) +* `[sitecore-jss-angular]` Fix image field style property not rendered properly ([#1944](https://github.com/Sitecore/jss/pull/1944)) ### 🎉 New Features & Improvements