fix(material): properly render anchor components

klemenoslaj · May 16, 2021 · 3d5d00d · 3d5d00d
1 parent 52606d6
commit 3d5d00d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 43 deletions.
diff --git a/projects/material/src/lib/action-mat-anchor.component.ts b/projects/material/src/lib/action-mat-anchor.component.ts
@@ -1,39 +1,32 @@
-import {
-  Component,
-  Input,
-  ChangeDetectionStrategy,
-  ViewEncapsulation,
-  ElementRef,
-  Inject,
-  HostBinding,
-} from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, ViewEncapsulation, Inject, HostBinding } from '@angular/core';
 import { ActionAnchor, ActionAnchorComponentImpl } from '@ng-action-outlet/core';
-import { FocusableOption, FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 
 import { actionMatButtonTemplate } from './action-mat-button.template';
 import { ICON_TYPE, ACTION_ICON_TYPE_TOKEN } from './action-icon-type-token';
 
 @Component({
   selector: 'action-mat-anchor',
   template: `
-    <ng-container *ngIf="(_action?.visible$ | async) && _action; let action">
-      <ng-container
-        *ngIf="action.href$ | async; let href"
-        [ngTemplateOutlet]="action.isExternalLink() ? external : internal"
-        [ngTemplateOutletContext]="{ $implicit: href }"
-      ></ng-container>
-
-      <ng-template #external let-href>
-        <a mat-button [actionMatButton]="action" [href]="href" [attr.target]="action.target$ | async">
-          <ng-container *ngTemplateOutlet="content; context: { $implicit: action }"></ng-container>
-        </a>
-      </ng-template>
-
-      <ng-template #internal let-href>
-        <a mat-button [actionMatButton]="action" [routerLink]="href" [target]="action.target$ | async">
-          <ng-container *ngTemplateOutlet="content; context: { $implicit: action }"></ng-container>
-        </a>
-      </ng-template>
+    <ng-container *ngIf="_action?.visible$ | async">
+      <a
+        *ngIf="_action.href$ | async; let href"
+        mat-button
+        [actionMatButton]="_action"
+        [href]="href"
+        [attr.target]="_action.target$ | async"
+      >
+        <ng-container *ngTemplateOutlet="content; context: { $implicit: _action }"></ng-container>
+      </a>
+
+      <a
+        *ngIf="_action.routerLink$ | async; let routerLink"
+        mat-button
+        [actionMatButton]="_action"
+        [routerLink]="routerLink"
+        [target]="_action.target$ | async"
+      >
+        <ng-container *ngTemplateOutlet="content; context: { $implicit: _action }"></ng-container>
+      </a>
     </ng-container>
 
     ${actionMatButtonTemplate}
@@ -42,7 +35,7 @@ import { ICON_TYPE, ACTION_ICON_TYPE_TOKEN } from './action-icon-type-token';
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class ActionMatAnchorComponent implements ActionAnchorComponentImpl, FocusableOption {
+export class ActionMatAnchorComponent implements ActionAnchorComponentImpl {
   @HostBinding('class.action-contents') _contentsClass = true;
 
   @Input('action')
@@ -51,15 +44,5 @@ export class ActionMatAnchorComponent implements ActionAnchorComponentImpl, Focu
   constructor(
     @Inject(ACTION_ICON_TYPE_TOKEN)
     readonly _iconType: ICON_TYPE,
-    private readonly _elementRef: ElementRef,
-    private readonly _focusMonitor?: FocusMonitor,
   ) {}
-
-  focus(origin: FocusOrigin = 'program', options?: FocusOptions): void {
-    if (this._focusMonitor) {
-      this._focusMonitor.focusVia(this._elementRef.nativeElement, origin, options);
-    } else {
-      this._elementRef.nativeElement.focus(options);
-    }
-  }
 }
diff --git a/projects/material/src/lib/action-mat-menu.component.ts b/projects/material/src/lib/action-mat-menu.component.ts
@@ -35,19 +35,19 @@ import { ACTION_ICON_TYPE_TOKEN, ICON_TYPE } from './action-icon-type-token';
           <ng-container *ngIf="action.visible$ | async" [ngSwitch]="_isAnchor(action)">
             <ng-container *ngSwitchCase="true">
               <a
-                *ngIf="action.isExternalLink()"
+                *ngIf="action.href$ | async; let href"
                 mat-menu-item
                 [actionMatButton]="action"
-                [href]="action.href$ | async"
+                [href]="href"
                 [attr.target]="action.target$ | async"
               >
                 <ng-container *ngTemplateOutlet="content; context: { $implicit: action }"></ng-container>
               </a>
               <a
-                *ngIf="!action.isExternalLink()"
+                *ngIf="action.routerLink$ | async; let routerLink"
                 mat-menu-item
                 [actionMatButton]="action"
-                [routerLink]="action.href$ | async"
+                [routerLink]="routerLink"
                 [target]="action.target$ | async"
               >
                 <ng-container *ngTemplateOutlet="content; context: { $implicit: action }"></ng-container>

diff --git a/projects/material/src/public_api.ts b/projects/material/src/public_api.ts
@@ -6,3 +6,4 @@ export * from './lib/action-mat-button.component';
 export * from './lib/action-mat-group.component';
 export * from './lib/action-mat.module';
 export * from './lib/action-icon-type-token';
+export * from './lib/action-mat-anchor.component';