From 304efb4f2e127ae4651a1f8ccd1aae15f1f4a815 Mon Sep 17 00:00:00 2001
From: "ext.isakovic" <stefan.isakovic@specific-group.com>
Date: Sun, 11 Apr 2021 00:38:32 +0200
Subject: [PATCH] fix disable mad buttons(#67)

---
 .../danger-button.component.html              |  2 +-
 .../danger-button/danger-button.component.ts  | 13 +++++++--
 .../flat-button/link-button.component.html    |  2 +-
 .../flat-button/link-button.component.ts      | 15 ++++++----
 .../icon-button/icon-button.component.html    |  2 +-
 .../icon-button/icon-button.component.ts      | 13 +++++++--
 .../src/lib/button/mad-basic-button.ts        | 29 +++++++++++++++++++
 .../outline-button.component.html             |  2 +-
 .../outline-button.component.ts               | 13 +++++++--
 .../primary-button.component.html             |  2 +-
 .../primary-button.component.ts               | 13 +++++++--
 .../lib/quick-list/quick-list.component.html  |  2 +-
 12 files changed, 89 insertions(+), 19 deletions(-)
 create mode 100644 projects/material-addons/src/lib/button/mad-basic-button.ts

diff --git a/projects/material-addons/src/lib/button/danger-button/danger-button.component.html b/projects/material-addons/src/lib/button/danger-button/danger-button.component.html
index 14f44585..aae77965 100644
--- a/projects/material-addons/src/lib/button/danger-button/danger-button.component.html
+++ b/projects/material-addons/src/lib/button/danger-button/danger-button.component.html
@@ -1,3 +1,3 @@
-<button mat-raised-button color="warn" [type]="type" [disabled]="disabled" [title]="title">
+<button mat-raised-button color="warn" [type]="type" [title]="title" #btn>
   <ng-content></ng-content>
 </button>
diff --git a/projects/material-addons/src/lib/button/danger-button/danger-button.component.ts b/projects/material-addons/src/lib/button/danger-button/danger-button.component.ts
index 3a51ebe2..c59ef9c0 100644
--- a/projects/material-addons/src/lib/button/danger-button/danger-button.component.ts
+++ b/projects/material-addons/src/lib/button/danger-button/danger-button.component.ts
@@ -1,11 +1,12 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {MadBasicButton} from '../mad-basic-button';
 
 @Component({
   selector: 'mad-danger-button',
   templateUrl: './danger-button.component.html',
   styleUrls: ['./danger-button.component.css'],
 })
-export class DangerButtonComponent {
+export class DangerButtonComponent extends MadBasicButton {
   @Input()
   type: string;
 
@@ -14,4 +15,12 @@ export class DangerButtonComponent {
 
   @Input()
   title: string = '';
+
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  constructor() {
+    super();
+    super.button = this.button;
+    super.disabled = this.disabled;
+  }
 }
diff --git a/projects/material-addons/src/lib/button/flat-button/link-button.component.html b/projects/material-addons/src/lib/button/flat-button/link-button.component.html
index 17608250..c7e8c42a 100644
--- a/projects/material-addons/src/lib/button/flat-button/link-button.component.html
+++ b/projects/material-addons/src/lib/button/flat-button/link-button.component.html
@@ -1,3 +1,3 @@
-<button (click)="clickEvent()" [disabled]="disabled" [title]="title" [type]="type" color="primary" mat-button>
+<button [title]="title" [type]="type" color="primary" #btn mat-button>
   <ng-content></ng-content>
 </button>
diff --git a/projects/material-addons/src/lib/button/flat-button/link-button.component.ts b/projects/material-addons/src/lib/button/flat-button/link-button.component.ts
index 8f9e871e..f10c6262 100644
--- a/projects/material-addons/src/lib/button/flat-button/link-button.component.ts
+++ b/projects/material-addons/src/lib/button/flat-button/link-button.component.ts
@@ -1,11 +1,11 @@
-import {Component, Input} from '@angular/core';
-
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import {MadBasicButton} from '../mad-basic-button';
 @Component({
   selector: 'mad-link-button',
   templateUrl: './link-button.component.html',
   styleUrls: ['./link-button.component.css'],
 })
-export class LinkButtonComponent {
+export class LinkButtonComponent extends MadBasicButton {
   @Input()
   type: string;
 
@@ -15,6 +15,11 @@ export class LinkButtonComponent {
   @Input()
   title: string = '';
 
-  @Input()
-  clickEvent: Function;
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  constructor() {
+    super();
+    super.button = this.button;
+    super.disabled = this.disabled;
+  }
 }
diff --git a/projects/material-addons/src/lib/button/icon-button/icon-button.component.html b/projects/material-addons/src/lib/button/icon-button/icon-button.component.html
index 19f8f7e3..780daf37 100644
--- a/projects/material-addons/src/lib/button/icon-button/icon-button.component.html
+++ b/projects/material-addons/src/lib/button/icon-button/icon-button.component.html
@@ -1,3 +1,3 @@
-<button mat-icon-button color="primary" [type]="type" [disabled]="disabled" [title]="title">
+<button mat-icon-button color="primary" [type]="type" [title]="title" #btn>
   <ng-content></ng-content>
 </button>
diff --git a/projects/material-addons/src/lib/button/icon-button/icon-button.component.ts b/projects/material-addons/src/lib/button/icon-button/icon-button.component.ts
index ea4cfbc5..71a01eba 100644
--- a/projects/material-addons/src/lib/button/icon-button/icon-button.component.ts
+++ b/projects/material-addons/src/lib/button/icon-button/icon-button.component.ts
@@ -1,11 +1,12 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {MadBasicButton} from '../mad-basic-button';
 
 @Component({
   selector: 'mad-icon-button',
   templateUrl: './icon-button.component.html',
   styleUrls: ['./icon-button.component.css'],
 })
-export class IconButtonComponent {
+export class IconButtonComponent extends MadBasicButton {
   @Input()
   type: string;
 
@@ -14,4 +15,12 @@ export class IconButtonComponent {
 
   @Input()
   title: string = '';
+
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  constructor() {
+    super();
+    super.button = this.button;
+    super.disabled = this.disabled;
+  }
 }
diff --git a/projects/material-addons/src/lib/button/mad-basic-button.ts b/projects/material-addons/src/lib/button/mad-basic-button.ts
new file mode 100644
index 00000000..e1bfc4ca
--- /dev/null
+++ b/projects/material-addons/src/lib/button/mad-basic-button.ts
@@ -0,0 +1,29 @@
+import {ElementRef, HostBinding, SimpleChanges} from '@angular/core';
+
+export class MadBasicButton {
+  button: ElementRef;
+  disabled: boolean;
+
+  disableClick = (e: Event) => e.stopPropagation();
+
+  ngOnChanges(changes: SimpleChanges) {
+    this.disableButton();
+  }
+
+  disableButton(): void {
+    if (this.disabled) {
+      this.button.nativeElement.addEventListener('click', this.disableClick);
+    } else {
+      this.button.nativeElement.removeEventListener('click', this.disableClick);
+    }
+  }
+  @HostBinding('style.pointer-events')
+  get pointerEvent(): string {
+    return this.disabled ? 'none' : 'auto';
+  }
+
+  @HostBinding('style.opacity')
+  get opacity(): string {
+    return this.disabled ? '0.35' : '1';
+  }
+}
diff --git a/projects/material-addons/src/lib/button/outline-button/outline-button.component.html b/projects/material-addons/src/lib/button/outline-button/outline-button.component.html
index 56e5a8e3..11ec8bc4 100644
--- a/projects/material-addons/src/lib/button/outline-button/outline-button.component.html
+++ b/projects/material-addons/src/lib/button/outline-button/outline-button.component.html
@@ -1,3 +1,3 @@
-<button mat-stroked-button color="primary" [type]="type" [disabled]="disabled" [title]="title">
+<button mat-stroked-button color="primary" [type]="type" [title]="title" #btn>
   <ng-content></ng-content>
 </button>
diff --git a/projects/material-addons/src/lib/button/outline-button/outline-button.component.ts b/projects/material-addons/src/lib/button/outline-button/outline-button.component.ts
index 6b335836..49211d04 100644
--- a/projects/material-addons/src/lib/button/outline-button/outline-button.component.ts
+++ b/projects/material-addons/src/lib/button/outline-button/outline-button.component.ts
@@ -1,11 +1,12 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {MadBasicButton} from '../mad-basic-button';
 
 @Component({
   selector: 'mad-outline-button',
   templateUrl: './outline-button.component.html',
   styleUrls: ['./outline-button.component.css'],
 })
-export class OutlineButtonComponent {
+export class OutlineButtonComponent extends MadBasicButton {
   @Input()
   type: string;
 
@@ -14,4 +15,12 @@ export class OutlineButtonComponent {
 
   @Input()
   title: string = '';
+
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  constructor() {
+    super();
+    super.button = this.button;
+    super.disabled = this.disabled;
+  }
 }
diff --git a/projects/material-addons/src/lib/button/primary-button/primary-button.component.html b/projects/material-addons/src/lib/button/primary-button/primary-button.component.html
index 88dab097..6f9032a7 100644
--- a/projects/material-addons/src/lib/button/primary-button/primary-button.component.html
+++ b/projects/material-addons/src/lib/button/primary-button/primary-button.component.html
@@ -1,3 +1,3 @@
-<button mat-raised-button color="primary" [type]="type" [disabled]="disabled" [title]="title">
+<button mat-raised-button color="primary" [type]="type" [title]="title" #btn>
   <ng-content></ng-content>
 </button>
diff --git a/projects/material-addons/src/lib/button/primary-button/primary-button.component.ts b/projects/material-addons/src/lib/button/primary-button/primary-button.component.ts
index 6cb8d628..2429f68e 100644
--- a/projects/material-addons/src/lib/button/primary-button/primary-button.component.ts
+++ b/projects/material-addons/src/lib/button/primary-button/primary-button.component.ts
@@ -1,11 +1,12 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {MadBasicButton} from '../mad-basic-button';
 
 @Component({
   selector: 'mad-primary-button',
   templateUrl: './primary-button.component.html',
   styleUrls: ['./primary-button.component.css'],
 })
-export class PrimaryButtonComponent {
+export class PrimaryButtonComponent extends MadBasicButton {
   @Input()
   type: string;
 
@@ -14,4 +15,12 @@ export class PrimaryButtonComponent {
 
   @Input()
   title: string = '';
+
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  constructor() {
+    super();
+    super.button = this.button;
+    super.disabled = this.disabled;
+  }
 }
diff --git a/projects/material-addons/src/lib/quick-list/quick-list.component.html b/projects/material-addons/src/lib/quick-list/quick-list.component.html
index 688d1f82..a8796f9a 100644
--- a/projects/material-addons/src/lib/quick-list/quick-list.component.html
+++ b/projects/material-addons/src/lib/quick-list/quick-list.component.html
@@ -9,7 +9,7 @@ <h3>
     </mad-icon-button>
   </div>
 </ng-container>
-<mad-link-button *ngIf="!(readonly || readonly === '')" [clickEvent]="addEventFunction"
+<mad-link-button *ngIf="!(readonly || readonly === '')" (click)="addItem()"
                  [disabled]="!addPossible || !isAddAllowed()">
   {{ addLabel }}
 </mad-link-button>