Merge branch 'main' into fix/semantic-release-dependency

libs/angular-accelerator/src/index.ts

@@ -1,6 +1,7 @@
 // directives
 export * from './lib/directives/if-permission.directive'
 export * from './lib/directives/if-breakpoint.directive'
+export * from './lib/directives/src.directive'
 
 // components
 export * from './lib/components/column-group-selection/column-group-selection.component'

libs/angular-accelerator/src/lib/angular-accelerator.module.ts

@@ -41,6 +41,7 @@ import { OcxTimeAgoPipe } from './pipes/ocxtimeago.pipe'
 import { OcxTimeagoIntl } from './utils/ocxtimeagointl.utils'
 import { createTranslateLoader } from './utils/create-translate-loader.utils'
 import { TranslationCacheService } from './services/translation-cache.service'
+import { SrcDirective } from './directives/src.directive'
 
 export class AngularAcceleratorMissingTranslationHandler implements MissingTranslationHandler {
   handle(params: MissingTranslationHandlerParams) {
@@ -86,6 +87,7 @@ export class AngularAcceleratorMissingTranslationHandler implements MissingTrans
     GroupByCountDiagramComponent,
     IfPermissionDirective,
     IfBreakpointDirective,
+    SrcDirective,
     OcxTimeAgoPipe,
   ],
   providers: [
@@ -131,6 +133,7 @@ export class AngularAcceleratorMissingTranslationHandler implements MissingTrans
     GroupByCountDiagramComponent,
     IfPermissionDirective,
     IfBreakpointDirective,
+    SrcDirective,
     OcxTimeAgoPipe,
     // DataListGridSortingComponent,
   ],

libs/angular-accelerator/src/lib/directives/src.directive.ts

@@ -0,0 +1,31 @@
+import { HttpClient } from '@angular/common/http'
+import { Directive, ElementRef, Input } from '@angular/core'
+
+@Directive({ selector: '[ocxSrc]' })
+export class SrcDirective {
+  private _src: string | undefined
+
+  @Input()
+  get ocxSrc(): string | undefined {
+    return this._src
+  }
+  set ocxSrc(value: string | undefined) {
+    if (value && this._src !== value) {
+      this.httpClient.get(value, { responseType: 'blob' }).subscribe({
+        next: (blob) => {
+          const url = URL.createObjectURL(blob)
+          this.el.nativeElement.onload = () => {
+            URL.revokeObjectURL(url)
+          }
+          this.el.nativeElement.src = url
+        },
+        error: () => {
+          this.el.nativeElement.src = 'error'
+        },
+      })
+      this._src = value
+    }
+  }
+
+  constructor(private el: ElementRef, private httpClient: HttpClient) {}
+}