feat(info): possibilita transformar o valor em um link

- Adiciona nova propriedade `p-url` que da possibilidade de transformar
o conteúdo em um link.
- Adiciona ChangeDetectionStrategy.OnPush no componente po-info

Fixes DTHFUI-2458

Author: jhonyeduardo

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

@@ -59,6 +59,15 @@ export class PoInfoBaseComponent {
     return this._orientation;
   }
 
+  /**
+   * Ao informar uma URL, o conteúdo será exibido na forma de um *link* e ao ser clicado será redirecionado para a URL informada.
+   *
+   * > Caso informar `http://` será aberto uma nova aba.
+   * Caso informar um caminho relativo, exemplo: `/customers`, será aberto na aba atual.
+   *
+   */
+  @Input('p-url') url?: string;
+
   /** Valor do conteúdo a ser exibido. */
   @Input('p-value') value?: string;
 

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

@@ -11,6 +11,24 @@
   <div [ngClass]="labelSize && orientation === poInfoOrientation.Horizontal ? 'po-sm-' + (12 - labelSize) : ''"
     [class.po-info-container-content]="orientation !== poInfoOrientation.Horizontal"
     [class.po-info-value-horizontal]="orientation === poInfoOrientation.Horizontal">
-    <span class="po-info-value">{{ value }}</span>
+
+    <ng-container *ngIf="url; then infoLink; else infoValue"></ng-container>
   </div>
 </div>
+
+<ng-template #infoLink>
+  <ng-container *ngIf="isExternalLink; then externalLink; else internalLink">
+  </ng-container>
+</ng-template>
+
+<ng-template #infoValue>
+  <span class="po-info-value">{{ value }}</span>
+</ng-template>
+
+<ng-template #externalLink>
+  <a class="po-info-value po-info-link" [href]="url" target="_blank">{{ value }}</a>
+</ng-template>
+
+<ng-template #internalLink>
+  <a class="po-info-value po-info-link" [routerLink]="url">{{ value }}</a>
+</ng-template>

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

@@ -1,5 +1,7 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
 
+import * as UtilsFunctions from './../../utils/util';
 import { configureTestSuite } from './../../util-test/util-expect.spec';
 
 import { PoInfoBaseComponent } from './po-info-base.component';
@@ -14,6 +16,7 @@ describe('PoInfoComponent', () => {
 
   configureTestSuite(() => {
     TestBed.configureTestingModule({
+      imports: [ RouterModule.forRoot([]) ],
       declarations: [ PoInfoComponent ]
     });
   });
@@ -22,8 +25,6 @@ describe('PoInfoComponent', () => {
     fixture = TestBed.createComponent(PoInfoComponent);
     component = fixture.componentInstance;
 
-    fixture.detectChanges();
-
     nativeElement = fixture.debugElement.nativeElement;
   });
 
@@ -32,6 +33,28 @@ describe('PoInfoComponent', () => {
     expect(component instanceof PoInfoComponent).toBeTruthy();
   });
 
+  describe('Properties:', () => {
+
+    it('isExternalLink: should return true if `component.url` is truthy', () => {
+      component.url = 'http://portinari.io';
+
+      const spyIsExternalLink = spyOn(UtilsFunctions, 'isExternalLink').and.callThrough();
+
+      expect(component.isExternalLink).toBe(true);
+      expect(spyIsExternalLink).toHaveBeenCalled();
+    });
+
+    it('isExternalLink: should return false if `component.url` is falsy', () => {
+      component.url = '';
+
+      const spyIsExternalLink = spyOn(UtilsFunctions, 'isExternalLink').and.callThrough();
+
+      expect(component.isExternalLink).toBe(false);
+      expect(spyIsExternalLink).toHaveBeenCalled();
+    });
+
+  });
+
   describe('Template:', () => {
     it('should only start with the default classes and elements, shouldn`t have variations', () => {
       component.label = 'Po Info';
@@ -159,6 +182,34 @@ describe('PoInfoComponent', () => {
       expect(nativeElement.querySelector('.po-text-nowrap')).toBeTruthy();
     });
 
+    it('should find `a.po-info-link` if `component.url` is truthy', () => {
+      component.value = 'John Doe';
+      component.url = 'http://portinari.io';
+
+      fixture.detectChanges();
+
+      expect(nativeElement.querySelector('a.po-info-link[target=_blank]')).toBeTruthy();
+    });
+
+    it('shouldn`t find `a.po-info-link` if `component.url` is falsy', () => {
+      component.value = 'John Doe';
+      component.url = '';
+
+      fixture.detectChanges();
+
+      expect(nativeElement.querySelector('a.po-info-link')).toBeNull();
+    });
+
+    it('should find `a.po-info-link` and not find `a.po-info-link[target=_blank]` if URL is an internal link ', () => {
+      component.value = 'John Doe';
+      component.url = '/customers';
+
+      fixture.detectChanges();
+
+      expect(nativeElement.querySelector('a.po-info-link[target=_blank]')).toBeNull();
+      expect(nativeElement.querySelector('a.po-info-link')).toBeTruthy();
+    });
+
   });
 
 });

projects/ui/src/lib/components/po-info/po-info.component.ts

@@ -1,4 +1,6 @@
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+import { isExternalLink } from '../../utils/util';
 
 import { PoInfoBaseComponent } from './po-info-base.component';
 
@@ -24,6 +26,13 @@ import { PoInfoBaseComponent } from './po-info-base.component';
  */
 @Component({
   selector: 'po-info',
-  templateUrl: './po-info.component.html'
+  templateUrl: './po-info.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class PoInfoComponent extends PoInfoBaseComponent { }
+export class PoInfoComponent extends PoInfoBaseComponent {
+
+  get isExternalLink() {
+    return isExternalLink(this.url);
+  }
+
+}

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

@@ -2,14 +2,16 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { PoInfoComponent } from './po-info.component';
+import { RouterModule } from '@angular/router';
 /**
  * @description
  *
  * Módulo do componente po-info.
  */
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    RouterModule
   ],
   declarations: [
     PoInfoComponent

projects/ui/src/lib/components/po-info/samples/sample-po-info-labs/sample-po-info-labs.component.html

@@ -1,8 +1,8 @@
-
 <po-info
   [p-label]="label"
   [p-label-size]="labelSize"
   [p-orientation]="orientation"
+  [p-url]="url"
   [p-value]="value">
 </po-info>
 
@@ -26,24 +26,34 @@
       p-clean
       p-label="Value">
     </po-input>
+  </div>
 
-    <po-radio-group
-      class="po-md-8"
-      name="orientation"
-      [(ngModel)]="orientation"
-      p-label="Orientation"
-      [p-options]="orientationOptions">
-    </po-radio-group>
+  <div class="po-row">
+    <po-input
+      class="po-lg-4 po-md-6"
+      name="url"
+      [(ngModel)]="url"
+      p-clean
+      p-label="Url">
+    </po-input>
 
     <po-number
-      class="po-md-4"
+      class="po-lg-2 po-md-6"
       name="labelSize"
       [(ngModel)]="labelSize"
       p-clean
       p-label="Label size"
       p-max="11"
       p-min="1">
     </po-number>
+
+    <po-radio-group
+      class="po-lg-6 po-md-12"
+      name="orientation"
+      [(ngModel)]="orientation"
+      p-label="Orientation"
+      [p-options]="orientationOptions">
+    </po-radio-group>
   </div>
 
   <div class="po-row">

projects/ui/src/lib/components/po-info/samples/sample-po-info-labs/sample-po-info-labs.component.ts

@@ -11,6 +11,7 @@ export class SamplePoInfoLabsComponent implements OnInit {
   label: string;
   labelSize: number;
   orientation: PoInfoOrientation;
+  url: string;
   value: string;
 
   public readonly orientationOptions: Array<PoRadioGroupOption> = [
@@ -26,6 +27,7 @@ export class SamplePoInfoLabsComponent implements OnInit {
     this.label = 'Portinari Info';
     this.labelSize = undefined;
     this.orientation = undefined;
+    this.url = undefined;
     this.value = undefined;
   }