feat(image): implementa diretiva NgOptimizedImage

Implementa diretiva `NgOptimizedImage` fornecendo melhor desempenho
para carregamento de imagens.

fixes DTHFUI-7013

Author: jnrpalma

projects/ui/src/lib/components/po-image/po-image-base.component.spec.ts

@@ -6,4 +6,10 @@ describe('PoImageBaseComponent:', () => {
   it('should be created', () => {
     expect(component instanceof PoImageBaseComponent).toBeTruthy();
   });
+
+  it('should isBase64 to true for valid image base64 string', () => {
+    const validBase64 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD';
+    component.source = validBase64;
+    expect(component.isBase64).toBe(true);
+  });
 });

projects/ui/src/lib/components/po-image/po-image-base.component.ts

@@ -1,4 +1,7 @@
 import { Directive, Input } from '@angular/core';
+import { isValidImageBase64 } from '../../utils/util';
+
+type PoImageLoading = 'lazy' | 'eager' | 'auto';
 
 /**
  * @description
@@ -29,6 +32,9 @@ import { Directive, Input } from '@angular/core';
  */
 @Directive()
 export class PoImageBaseComponent {
+  isBase64: boolean = false;
+  private _source: string;
+
   /**
    * @optional
    *
@@ -56,5 +62,46 @@ export class PoImageBaseComponent {
    * Fonte da imagem que pode ser um caminho local (`./assets/images/logo-black-small.png`)
    * ou um servidor externo (`https://po-ui.io/assets/images/logo-black-small.png`).
    */
-  @Input('p-src') source: string;
+  @Input('p-src') set source(value: string) {
+    if (isValidImageBase64(value)) {
+      this.isBase64 = true;
+    }
+    this._source = value;
+  }
+
+  get source(): string {
+    return this._source;
+  }
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Defini a prioridade de carregamento da imagem.
+   * > Para as imagens com carregamento prioritátio ativo é necessário incluir
+   * > uma tag link no head do arquivo index.html da sua aplicação.
+   *
+   * ```
+   * <link rel="preconnect" href="<url_base_da_imagem>">
+   * ```
+   *
+   * @default `false`
+   */
+  @Input('p-priority') priority: boolean = false;
+
+  /**
+   * @optional
+   *
+   * @description
+   *
+   * Defini o carregamento que pode ser dos tipo:
+   *
+   * — lazy
+   * — eager
+   * — auto
+   *
+   * > Não é permitido definir esta propriedade em conjunto com a propriedade `p-priority`.
+   */
+  @Input('p-loading') loading?: PoImageLoading;
 }

projects/ui/src/lib/components/po-image/po-image.component.html

@@ -1,3 +1,15 @@
-<po-container *ngIf="source">
-  <img class="po-image" [attr.alt]="alternate" [attr.height]="height" [attr.src]="source" />
+<po-container class="po-container-image" *ngIf="source" [p-height]="height">
+  <img
+    *ngIf="!isBase64; else imageBase64"
+    class="po-image"
+    [attr.alt]="alternate"
+    [priority]="priority"
+    [loading]="loading"
+    [fill]="true"
+    [ngSrc]="source"
+  />
 </po-container>
+
+<ng-template #imageBase64>
+  <img class="po-image" [attr.alt]="alternate" [loading]="loading" [src]="source" />
+</ng-template>

projects/ui/src/lib/components/po-image/po-image.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { PoImageComponent } from './po-image.component';
 import { PoContainerModule } from '../po-container';
 
@@ -10,7 +10,7 @@ import { PoContainerModule } from '../po-container';
  */
 @NgModule({
   declarations: [PoImageComponent],
-  imports: [CommonModule, PoContainerModule],
+  imports: [CommonModule, PoContainerModule, NgOptimizedImage],
   exports: [PoImageComponent]
 })
 export class PoImageModule {}

projects/ui/src/lib/utils/util.spec.ts

@@ -31,7 +31,8 @@ import {
   validValue,
   valuesFromObject,
   removeDuplicatedOptionsWithFieldValue,
-  removeUndefinedAndNullOptionsWithFieldValue
+  removeUndefinedAndNullOptionsWithFieldValue,
+  isValidImageBase64
 } from './util';
 
 import * as UtilFunctions from './util';
@@ -1600,20 +1601,31 @@ describe('sortFields:', () => {
     expect(result).toEqual(expectedFields);
   });
 
-  describe('replaceFormatSeparator: ', () => {
-    it('should show date separator as . according to russian locale selected', () => {
-      const separator = '.';
-      const format = 'dd/mm/yyyy';
-      const expectedFormat = 'dd.mm.yyyy';
-      const newFormat = UtilFunctions.replaceFormatSeparator(format, separator);
-      expect(newFormat).toBe(expectedFormat);
-    });
-    it('should show date separator as / according to portuguese locale selected', () => {
-      const separator = '/';
-      const format = 'dd/mm/yyyy';
-      const expectedFormat = 'dd/mm/yyyy';
-      const newFormat = UtilFunctions.replaceFormatSeparator(format, separator);
-      expect(newFormat).toBe(expectedFormat);
-    });
+  it('returns true for valid image base64 string', () => {
+    const validBase64 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD';
+    expect(isValidImageBase64(validBase64)).toBe(true);
+  });
+
+  it('returns false for invalid image base64 string', () => {
+    const invalidBase64 = 'not a valid base64 string';
+    expect(isValidImageBase64(invalidBase64)).toBe(false);
+  });
+});
+
+describe('replaceFormatSeparator: ', () => {
+  it('should show date separator as . according to russian locale selected', () => {
+    const separator = '.';
+    const format = 'dd/mm/yyyy';
+    const expectedFormat = 'dd.mm.yyyy';
+    const newFormat = UtilFunctions.replaceFormatSeparator(format, separator);
+    expect(newFormat).toBe(expectedFormat);
+  });
+
+  it('should show date separator as / according to portuguese locale selected', () => {
+    const separator = '/';
+    const format = 'dd/mm/yyyy';
+    const expectedFormat = 'dd/mm/yyyy';
+    const newFormat = UtilFunctions.replaceFormatSeparator(format, separator);
+    expect(newFormat).toBe(expectedFormat);
   });
 });

projects/ui/src/lib/utils/util.ts

@@ -547,6 +547,18 @@ export function convertImageToBase64(file: File): Promise<any> {
   });
 }
 
+/**
+ * Valida se a imagem é do tipo base64 valida
+ *
+ */
+export function isValidImageBase64(value: string): boolean {
+  try {
+    return !!value.match(/^data:image\/([a-zA-Z]*);base64,([^\"]*)$/);
+  } catch (err) {
+    return false;
+  }
+}
+
 /**
  * Converte um número em decimal baseado na quantidade de casas decimais.
  *