feat(link): Allow email links without the external icon

demo/app/components/link/link.component.html

@@ -1,4 +1,20 @@
 <ts-card id="top">
+  <div>
+    <ts-link
+      [destination]="emailDestination"
+      [isExternal]="true"
+      tsVerticalSpacing
+    >support@terminus.com</ts-link>
+  </div>
+
+  <div>
+    <ts-link
+      [destination]="phoneDestination"
+      [isExternal]="true"
+      tsVerticalSpacing
+    >1800-423-4562</ts-link>
+  </div>
+
   <div>
     <ts-link
       [destination]="localDestination"

demo/app/components/link/link.component.ts

@@ -7,6 +7,8 @@ import { Component } from '@angular/core';
 })
 export class LinkComponent {
   localDestination = ['/components/copy'];
+  emailDestination = 'mailto:support@terminus.com';
+  phoneDestination = 'tel: 1800-423-4562';
   externalDestination = `http://google.com`;
   external = true;
 }

terminus-ui/link/src/link.component.html

@@ -18,7 +18,9 @@
 >
   <ng-template *ngTemplateOutlet="contentTemplate"></ng-template>
 
-  <ts-icon>
+  <ts-icon
+    *ngIf="showExternalIcon"
+  >
     open_in_new
   </ts-icon>
 </a>

terminus-ui/link/src/link.component.md

@@ -27,7 +27,8 @@ Wrap your link text and define a destination:
 
 ## External links
 
-To signify a link will leave the current app or site, set `external` to true:
+To signify a link will leave the current app or site, set `external` to true. 
+When the destination is a string and contains either `mailto` or `tel`, the external icon would not show.
 
 ```html
 <ts-link

terminus-ui/link/src/link.component.spec.ts

@@ -50,6 +50,7 @@ describe(`TsLinkComponent`, function() {
   let component: TestHostComponent;
   let fixture: ComponentFixture<TestHostComponent>;
   let link: HTMLElement;
+  let emailLink: HTMLElement;
   let linkComponent: TsLinkComponent;
 
   beforeEach(async(() => {
@@ -117,6 +118,24 @@ describe(`TsLinkComponent`, function() {
 
   });
 
+  describe(`showExternalIcon`, () => {
+
+    test(`should not show external icon when it is an email or phone`, () => {
+      component.destination = 'mailto: support@comcast.com';
+      component.isExternal = true;
+      fixture.detectChanges();
+      emailLink = fixture.debugElement.query(By.css('.c-link')).nativeElement;
+      expect(emailLink.classList).toContain('qa-link-external');
+
+      component.destination = 'tel: 18003256789';
+      fixture.detectChanges();
+      link = fixture.debugElement.query(By.css('.c-link')).nativeElement;
+      expect(link.classList).toContain('qa-link-external');
+
+      const externalLink = fixture.debugElement.query(By.css('.ts-icon'));
+      expect(externalLink).toBeFalsy();
+    });
+  });
 
   describe(`tabIndex`, () => {
 

terminus-ui/link/src/link.component.ts

@@ -4,6 +4,7 @@ import {
   Input,
   ViewEncapsulation,
 } from '@angular/core';
+import { isString } from '@terminus/ngx-tools';
 import { TsStyleThemeTypes } from '@terminus/ui/utilities';
 
 
@@ -56,11 +57,25 @@ export class TsLinkComponent {
    */
   public localRoute = ['.'];
 
+  /**
+   * Decide whether an external icon should be shown
+   */
+  public showExternalIcon = true;
+
   /**
    * Define the link's destination
    */
   @Input()
-  public destination: string | string[] | undefined;
+  public set destination(value: string | string[] | undefined) {
+    if (isString(value) && (value.includes('mailto') || value.includes('tel'))) {
+      this.showExternalIcon = false;
+    }
+    this._destination = value;
+  }
+  public get destination(): string | string[] | undefined {
+    return this._destination;
+  }
+  public _destination: string | string[] | undefined;
 
   /**
    * Define the link's fragment