feat: open link in new tab on cmd + click, option to open links in ne…

…w tab by default (#82)

apps/breadcrumb-demo-e2e/cypress.json

@@ -5,7 +5,7 @@
   "modifyObstructiveCode": false,
   "pluginsFile": "./src/plugins/index",
   "supportFile": "./src/support/index.ts",
-  "video": true,
+  "video": false,
   "videosFolder": "../../dist/cypress/apps/breadcrumb-demo-e2e/videos",
   "screenshotsFolder": "../../dist/cypress/apps/breadcrumb-demo-e2e/screenshots",
   "chromeWebSecurity": false

apps/breadcrumb-demo-e2e/src/integration/default.spec.ts

@@ -53,7 +53,7 @@ describe('breadcrumb-demo', () => {
     });
   });
 
-  it('Should merge parent module/component data with child module/component', () => {
+  it('should merge parent module/component data with child module/component', () => {
     cy.visit('/');
     cy.get('.navbar-header').contains('Mentees').click();
     cy.get('bd-mentee-list .mat-card-avatar').eq(0).click();
@@ -64,12 +64,12 @@ describe('breadcrumb-demo', () => {
     ); // defined on grand child component
   });
 
-  it('Should have customized breadcrumb working via *xngBreadcrumbItem directive', () => {
+  it('should have customized breadcrumb working via *xngBreadcrumbItem directive', () => {
     cy.get('#titleCase').contains('Student'); // title case
     cy.get('#titleCase').contains('>>'); // custom seperator
   });
 
-  it('Should have invoked breadcrumb as a function with resolved param', () => {
+  it('should have invoked breadcrumb as a function with resolved param', () => {
     cy.visit('/');
     cy.get('.navbar-header').contains('Mentees').click();
     cy.get('bd-mentee-list .mat-card-avatar').eq(0).click();
@@ -80,11 +80,23 @@ describe('breadcrumb-demo', () => {
     });
   });
 
-  it('Should have used alias to skip a breadcrumb', () => {
+  it('should have used alias to skip a breadcrumb', () => {
     cy.visit('/');
     cy.get('.navbar-header').contains('Mentees').click();
     cy.get('bd-mentee-list .mat-card-avatar').eq(0).click();
     cy.get('.mat-card-actions button').click(); // Mentee Edit route uses set(@menteeEdit, {skip: true})
     getDefaultBreadcrumbs().contains('edit').should('not.exist');
   });
+
+  it('should open links on new tab if when anchorTarget is _blank', () => {
+    cy.visit('/');
+    cy.get('.navbar-header').contains('Mentors').click();
+    cy.location().should((loc) => {
+      expect(loc.hash).to.eq('#testFragment');
+    });
+    cy.get('bd-mentor-list .mat-card-avatar').eq(0).click();
+    cy.get('#advancedTemplate2')
+      .contains('a', 'Enabler')
+      .should('have.attr', 'target', '_blank');
+  });
 });

apps/breadcrumb-demo-e2e/src/integration/fragment.spec.ts

@@ -21,9 +21,8 @@ describe('breadcrumb-demo', () => {
       expect(loc.hash).to.eq('#testFragment');
     });
     cy.get('bd-mentor-list .mat-card-avatar').eq(0).click();
-    cy.get('#advancedTemplate2').contains('Enabler').click();
-    cy.location().should((loc) => {
-      expect(loc.hash).to.eq('');
-    });
+    cy.get('#advancedTemplate2')
+      .contains('a', 'Enabler')
+      .should('have.attr', 'href', '/mentor?viaNav=true&type=list');
   });
 });

apps/breadcrumb-demo/src/app/app.component.html

@@ -55,6 +55,7 @@
         class="myapp-breadcrumb"
         id="advancedTemplate2"
         [preserveFragment]="false"
+        anchorTarget="_blank"
       >
         <ng-container
           *xngBreadcrumbItem="

apps/got-demo-e2e/cypress.json

@@ -5,7 +5,7 @@
   "modifyObstructiveCode": false,
   "pluginsFile": "./src/plugins/index",
   "supportFile": "./src/support/index.ts",
-  "video": true,
+  "video": false,
   "videosFolder": "../../dist/cypress/apps/got-demo-e2e/videos",
   "screenshotsFolder": "../../dist/cypress/apps/got-demo-e2e/screenshots",
   "chromeWebSecurity": false

apps/simple-demo-e2e/cypress.json

@@ -5,7 +5,7 @@
   "modifyObstructiveCode": false,
   "pluginsFile": "./src/plugins/index",
   "supportFile": "./src/support/index.ts",
-  "video": true,
+  "video": false,
   "videosFolder": "../../dist/cypress/apps/simple-demo-e2e/videos",
   "screenshotsFolder": "../../dist/cypress/apps/simple-demo-e2e/screenshots",
   "chromeWebSecurity": false

docs/advanced-patterns.md

@@ -195,3 +195,11 @@ You can display whatever you want in the place of breadcrumb text by providing a
   padding: 0 4px;
 }
 ```
+
+### Open breadcrumb link in new tab
+
+by default breadcrumb links
+
+```javascript
+<xng-breadcrumb anchorTarget="_blank"></xng-breadcrumb>
+```

libs/xng-breadcrumb/src/lib/breadcrumb.component.html

@@ -12,13 +12,22 @@
       <li class="xng-breadcrumb-item">
         <a
           *ngIf="!isLast"
-          (click)="handleRoute(breadcrumb)"
-          (keydown.enter)="handleRoute(breadcrumb)"
           class="xng-breadcrumb-link"
           [ngClass]="{ 'xng-breadcrumb-link-disabled': breadcrumb.disable }"
           [attr.aria-disabled]="breadcrumb.disable"
           [attr.tabIndex]="breadcrumb.disable ? -1 : 0"
           role="button"
+          rel="noopener noreferrer"
+          [routerLink]="
+            breadcrumb.routeInterceptor
+              ? breadcrumb.routeInterceptor(breadcrumb.routeLink, breadcrumb)
+              : breadcrumb.routeLink
+          "
+          [queryParams]="
+            preserveQueryParams ? breadcrumb.queryParams : undefined
+          "
+          [fragment]="preserveFragment ? breadcrumb.fragment : undefined"
+          [target]="anchorTarget ? anchorTarget : '_self'"
         >
           <ng-container
             *ngTemplateOutlet="

libs/xng-breadcrumb/src/lib/breadcrumb.component.ts

@@ -57,6 +57,11 @@ export class BreadcrumbComponent implements OnInit {
    */
   @Input() class = '';
 
+  /**
+   * anchorTarget = "_blank" makes the breadcrumb link open in a new tab
+   */
+  @Input() anchorTarget: '_blank' | undefined;
+
   /**
    * separator between breadcrumbs, defaults to '/'.
    * User can customize separator either by passing a String or Template
@@ -100,23 +105,13 @@ export class BreadcrumbComponent implements OnInit {
           .map((breadcrumb: BreadcrumbDefinition) => {
             // Do not mutate breadcrumb as its source of truth.
             // There can be scenarios where we can have multiple xng-breadcrumb instances in page
+            const { routeInterceptor, routeLink } = breadcrumb;
             return {
               ...breadcrumb,
-              queryParams: this.preserveQueryParams
-                ? breadcrumb.queryParams
-                : undefined,
-              fragment: this.preserveFragment ? breadcrumb.fragment : undefined,
+              routeLink: routeInterceptor?.(routeLink, breadcrumb) || routeLink,
             };
           });
       })
     );
   }
-
-  handleRoute(breadcrumb: BreadcrumbDefinition) {
-    const routeLink = breadcrumb.routeInterceptor
-      ? breadcrumb.routeInterceptor(breadcrumb.routeLink, breadcrumb)
-      : breadcrumb.routeLink;
-    const { queryParams, fragment } = breadcrumb;
-    this.router.navigate([routeLink], { queryParams, fragment });
-  }
 }

libs/xng-breadcrumb/tsconfig.lib.json

@@ -12,7 +12,8 @@
   "angularCompilerOptions": {
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
-    "enableResourceInlining": true
+    "enableResourceInlining": true,
+    "fullTemplateTypeCheck": true
   },
   "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
   "include": ["**/*.ts"]