From dbe1e9fae14b313dd26ac1e8e0c0a8749f957cde Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Thu, 30 Mar 2023 14:06:31 +0300
Subject: [PATCH] check for routerLink when using stop propagation

---
 .../chevron-button/chevron-button.component.ts   |  3 ++-
 .../circle-button/circle-button.component.html   | 10 +++++-----
 .../circle-button/circle-button.component.ts     | 16 ++++++++--------
 .../icon-button/icon-button.component.html       |  2 +-
 .../buttons/icon-button/icon-button.component.ts |  6 ++++--
 5 files changed, 20 insertions(+), 17 deletions(-)

diff --git a/src/lib/buttons/chevron-button/chevron-button.component.ts b/src/lib/buttons/chevron-button/chevron-button.component.ts
index 97ff7ed..7b531c1 100644
--- a/src/lib/buttons/chevron-button/chevron-button.component.ts
+++ b/src/lib/buttons/chevron-button/chevron-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { randomString } from '../../utils';
 import { NgIf } from '@angular/common';
 import { MatLegacyButtonModule } from '@angular/material/legacy-button';
@@ -8,6 +8,7 @@ import { MatIconModule } from '@angular/material/icon';
     selector: 'iqser-chevron-button [label]',
     templateUrl: './chevron-button.component.html',
     styleUrls: ['./chevron-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     imports: [NgIf, MatIconModule, MatLegacyButtonModule],
 })
diff --git a/src/lib/buttons/circle-button/circle-button.component.html b/src/lib/buttons/circle-button/circle-button.component.html
index bc494e3..6a13270 100644
--- a/src/lib/buttons/circle-button/circle-button.component.html
+++ b/src/lib/buttons/circle-button/circle-button.component.html
@@ -1,15 +1,15 @@
 <div [matTooltipClass]="tooltipClass" [matTooltipPosition]="tooltipPosition" [matTooltip]="tooltip">
     <button
         (click)="performAction($event)"
-        [class.dark-bg]="type === circleButtonTypes.dark"
+        [class.dark-bg]="type === _circleButtonTypes.dark"
         [class.grey-selected]="greySelected"
-        [class.help]="type === circleButtonTypes.help"
+        [class.help]="type === _circleButtonTypes.help"
         [class.overlay]="showDot"
-        [class.primary]="type === circleButtonTypes.primary"
-        [class.warn]="type === circleButtonTypes.warn"
+        [class.primary]="type === _circleButtonTypes.primary"
+        [class.warn]="type === _circleButtonTypes.warn"
         [disabled]="disabled"
         [id]="buttonId"
-        [stopPropagation]="action.observed"
+        [stopPropagation]="action.observed && !_hasRouterLink"
         [type]="isSubmit ? 'submit' : 'button'"
         mat-icon-button
     >
diff --git a/src/lib/buttons/circle-button/circle-button.component.ts b/src/lib/buttons/circle-button/circle-button.component.ts
index a46a8e6..e38a2b4 100644
--- a/src/lib/buttons/circle-button/circle-button.component.ts
+++ b/src/lib/buttons/circle-button/circle-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, inject, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { CircleButtonType, CircleButtonTypes } from '../types/circle-button.type';
 import { IqserTooltipPosition, IqserTooltipPositions, randomString } from '../../utils';
@@ -6,17 +6,17 @@ import { NgIf } from '@angular/common';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
 import { StopPropagationDirective } from '../../directives';
+import { RouterLink } from '@angular/router';
 
 @Component({
     selector: 'iqser-circle-button [icon]',
     templateUrl: './circle-button.component.html',
     styleUrls: ['./circle-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     imports: [MatTooltipModule, MatIconModule, NgIf, MatButtonModule, StopPropagationDirective],
 })
 export class CircleButtonComponent implements OnInit {
-    readonly circleButtonTypes = CircleButtonTypes;
-
     @Input() buttonId = `${randomString()}-circle-button`;
     @Input() icon!: string;
     @Input() tooltip?: string;
@@ -32,14 +32,14 @@ export class CircleButtonComponent implements OnInit {
     @Input() size = 34;
     @Input() iconSize = 14;
     @Output() readonly action = new EventEmitter<MouseEvent>();
-
+    protected readonly _circleButtonTypes = CircleButtonTypes;
+    protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
     @ViewChild(MatTooltip) private readonly _matTooltip!: MatTooltip;
-
-    constructor(private readonly _elementRef: ElementRef) {}
+    readonly #elementRef = inject(ElementRef<HTMLElement>);
 
     ngOnInit(): void {
-        (this._elementRef.nativeElement as HTMLElement).style.setProperty('--size', `${this.size}px`);
-        (this._elementRef.nativeElement as HTMLElement).style.setProperty('--iconSize', `${this.iconSize}px`);
+        this.#elementRef.nativeElement.style.setProperty('--size', `${this.size}px`);
+        this.#elementRef.nativeElement.style.setProperty('--iconSize', `${this.iconSize}px`);
     }
 
     performAction($event: MouseEvent) {
diff --git a/src/lib/buttons/icon-button/icon-button.component.html b/src/lib/buttons/icon-button/icon-button.component.html
index 338e226..d69859f 100644
--- a/src/lib/buttons/icon-button/icon-button.component.html
+++ b/src/lib/buttons/icon-button/icon-button.component.html
@@ -3,7 +3,7 @@
     [disabled]="disabled"
     [id]="buttonId"
     [ngClass]="classes"
-    [stopPropagation]="action.observed"
+    [stopPropagation]="action.observed && !_hasRouterLink"
     [type]="submit ? 'submit' : 'button'"
     mat-button
 >
diff --git a/src/lib/buttons/icon-button/icon-button.component.ts b/src/lib/buttons/icon-button/icon-button.component.ts
index 116a38a..d5b5f8c 100644
--- a/src/lib/buttons/icon-button/icon-button.component.ts
+++ b/src/lib/buttons/icon-button/icon-button.component.ts
@@ -1,20 +1,21 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output } from '@angular/core';
 import { IconButtonType, IconButtonTypes } from '../types/icon-button.type';
 import { randomString } from '../../utils';
 import { NgClass, NgIf } from '@angular/common';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatIconModule } from '@angular/material/icon';
 import { StopPropagationDirective } from '../../directives';
+import { RouterLink } from '@angular/router';
 
 @Component({
     selector: 'iqser-icon-button [label]',
     templateUrl: './icon-button.component.html',
     styleUrls: ['./icon-button.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
     imports: [NgClass, MatButtonModule, NgIf, MatIconModule, StopPropagationDirective],
 })
 export class IconButtonComponent {
-    readonly iconButtonTypes = IconButtonTypes;
     @Input() label!: string;
     @Input() buttonId = `${randomString()}-icon-button`;
     @Input() icon?: string;
@@ -23,6 +24,7 @@ export class IconButtonComponent {
     @Input() submit = false;
     @Input() type: IconButtonType = IconButtonTypes.default;
     @Output() readonly action = new EventEmitter<MouseEvent>();
+    protected readonly _hasRouterLink = !!inject(RouterLink, { optional: true, host: true });
 
     get classes(): Record<string, boolean> {
         return {