From 6a74537c2c1e1b7495f33e0116771c477a939ccc Mon Sep 17 00:00:00 2001 From: deno Date: Wed, 18 Dec 2024 18:22:16 -0500 Subject: [PATCH] fix(core): bring inline SVG support to illustration message (#12856) --- .../illustrated-message.component.html | 3 +++ .../illustrated-message.component.ts | 21 +++++++++++---- ...ated-message-inline-example.component.html | 11 ++++++++ ...trated-message-inline-example.component.ts | 27 +++++++++++++++++++ .../illustrated-message-docs.component.html | 16 +++++++++++ .../illustrated-message-docs.component.ts | 21 ++++++++++++++- 6 files changed, 93 insertions(+), 6 deletions(-) create mode 100644 libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.html create mode 100644 libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.ts diff --git a/libs/core/illustrated-message/illustrated-message.component.html b/libs/core/illustrated-message/illustrated-message.component.html index 495d7749d44..8489c641275 100644 --- a/libs/core/illustrated-message/illustrated-message.component.html +++ b/libs/core/illustrated-message/illustrated-message.component.html @@ -4,6 +4,9 @@ } + @if (_inlineSvg) { +
+ } diff --git a/libs/core/illustrated-message/illustrated-message.component.ts b/libs/core/illustrated-message/illustrated-message.component.ts index ae3fab7d34d..2969d8e7918 100644 --- a/libs/core/illustrated-message/illustrated-message.component.ts +++ b/libs/core/illustrated-message/illustrated-message.component.ts @@ -12,19 +12,21 @@ import { SimpleChanges, ViewEncapsulation } from '@angular/core'; +import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; import { CssClassBuilder, Nullable, RequireOnlyOne, applyCssClass } from '@fundamental-ngx/cdk/utils'; import { Subscription, debounceTime, fromEvent } from 'rxjs'; export interface SvgConfig { - scene?: RequireOnlyOne; - dialog?: RequireOnlyOne; - spot?: RequireOnlyOne; - dot?: RequireOnlyOne; + scene?: RequireOnlyOne; + dialog?: RequireOnlyOne; + spot?: RequireOnlyOne; + dot?: RequireOnlyOne; } export interface SvgItemConfig { url: string; id: string; + file: string; } export type IllustratedMessageType = 'scene' | 'dialog' | 'spot' | 'dot' | 'base'; @@ -96,13 +98,17 @@ export class IllustratedMessageComponent implements AfterContentChecked, OnChang /** @hidden */ _isSmallScreen: boolean; + /** @hidden */ + _inlineSvg: SafeHtml | undefined; + /** @hidden */ private _subscriptions = new Subscription(); /** @hidden */ constructor( public readonly elementRef: ElementRef, - private _cdRef: ChangeDetectorRef + private _cdRef: ChangeDetectorRef, + private _sanitizer: DomSanitizer ) {} /** @@ -147,11 +153,16 @@ export class IllustratedMessageComponent implements AfterContentChecked, OnChang /** @hidden */ private _constructHref(): void { + this._inlineSvg = undefined; const containerWidth = this.elementRef.nativeElement.offsetWidth; let tempType = this.type; if (!this.type && containerWidth > 0) { tempType = this._determineIllustratedMessageType(containerWidth); } + const inlineSvg = this.svgConfig?.[tempType]?.file; + if (inlineSvg) { + this._inlineSvg = this._sanitizer.bypassSecurityTrustHtml(inlineSvg); + } this._href = this.svgConfig ? this._getHrefByType(tempType, this.svgConfig) : ''; this.buildComponentCssClass(); diff --git a/libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.html b/libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.html new file mode 100644 index 00000000000..a25a2fbbd9f --- /dev/null +++ b/libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.html @@ -0,0 +1,11 @@ +
+
+
+

No new mail

+

Check back again later.

+
+ + + +
+
diff --git a/libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.ts b/libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.ts new file mode 100644 index 00000000000..81ae58730b5 --- /dev/null +++ b/libs/docs/core/illustrated-message/examples/illustrated-message-inline-example.component.ts @@ -0,0 +1,27 @@ +import { Component } from '@angular/core'; +import { ButtonComponent } from '@fundamental-ngx/core/button'; +import { IllustratedMessageModule } from '@fundamental-ngx/core/illustrated-message'; + +@Component({ + selector: 'fd-illustrated-message-inline-example', + templateUrl: './illustrated-message-inline-example.component.html', + standalone: true, + imports: [IllustratedMessageModule, ButtonComponent] +}) +export class IllustratedMessageInlineExampleComponent { + spotConfig = { + spot: { file: sapIllusSpotRadar, id: 'sapIllus-Dialog-NoMail' }, + dot: { file: sapIllusSpotRadar, id: 'sapIllus-Dialog-NoMail' } + }; +} + +export const sapIllusSpotRadar = ` + + + + + + + + +`; diff --git a/libs/docs/core/illustrated-message/illustrated-message-docs.component.html b/libs/docs/core/illustrated-message/illustrated-message-docs.component.html index af3f6c30c7b..b68cdb85e56 100644 --- a/libs/docs/core/illustrated-message/illustrated-message-docs.component.html +++ b/libs/docs/core/illustrated-message/illustrated-message-docs.component.html @@ -41,3 +41,19 @@ + + Inline SVG + +

In some cases it's not applicable to use URLs for the SVG locations.

+

+ In this case developers can load SVG directly into their js code and pass it as a string to the component. The + configuration object passed to [svgConfig] should contain values for 'scene', 'dialog', 'spot' and + 'dot'. +

+ + + + + + + diff --git a/libs/docs/core/illustrated-message/illustrated-message-docs.component.ts b/libs/docs/core/illustrated-message/illustrated-message-docs.component.ts index 6f2a932ac35..6701ac62a7a 100644 --- a/libs/docs/core/illustrated-message/illustrated-message-docs.component.ts +++ b/libs/docs/core/illustrated-message/illustrated-message-docs.component.ts @@ -13,6 +13,7 @@ import { import { IllustratedMessageDialogExampleComponent } from './examples/illustrated-message-dialog-example.component'; import { IllustratedMessageDotExampleComponent } from './examples/illustrated-message-dot-example.component'; import { IllustratedMessageExampleComponent } from './examples/illustrated-message-example.component'; +import { IllustratedMessageInlineExampleComponent } from './examples/illustrated-message-inline-example.component'; import { IllustratedMessageSpotExampleComponent } from './examples/illustrated-message-spot-example.component'; const illustratedMessageSrc = 'illustrated-message-example.component.html'; @@ -27,6 +28,9 @@ const illustratedMessageSpotTsCode = 'illustrated-message-spot-example.component const illustratedMessageDotSrc = 'illustrated-message-dot-example.component.html'; const illustratedMessageDotTsCode = 'illustrated-message-dot-example.component.ts'; +const illustratedMessageInlineScr = 'illustrated-message-inline-example.component.html'; +const illustratedMessageInlineTsCore = 'illustrated-message-inline-example.component.ts'; + const illustration = 'assets/images/sapIllus-Dialog-NoMail.svg'; const illustrationDialogNoMail = 'assets/images/sapIllus-Dialog-NoMail.svg'; const illustrationSceneNoMail = 'assets/images/sapIllus-Scene-NoMail.svg'; @@ -46,7 +50,8 @@ const illustrationSpotNoMail = 'assets/images/sapIllus-Spot-NoMail.svg'; SeparatorComponent, IllustratedMessageDialogExampleComponent, IllustratedMessageSpotExampleComponent, - IllustratedMessageDotExampleComponent + IllustratedMessageDotExampleComponent, + IllustratedMessageInlineExampleComponent ] }) export class IllustratedMessageDocsComponent { @@ -135,4 +140,18 @@ export class IllustratedMessageDocsComponent { path: 'src/assets/images' } ]; + + illustratedMessageInline: ExampleFile[] = [ + { + language: 'html', + code: getAssetFromModuleAssets(illustratedMessageInlineScr), + fileName: 'illustrated-message-inline-example' + }, + { + language: 'typescript', + code: getAssetFromModuleAssets(illustratedMessageInlineTsCore), + fileName: 'illustrated-message-inline-example', + component: 'IllustratedMessageInlineExampleComponent' + } + ]; }