fix disable mad buttons(porscheinformatik#67)

stefan-isakovic · Apr 11, 2021 · a59c2d3 · a59c2d3
1 parent e77f328
commit a59c2d3
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 14 deletions.
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
@@ -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
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, HostBinding, Input, SimpleChanges, ViewChild} from '@angular/core';
 
 @Component({
   selector: 'mad-danger-button',
@@ -14,4 +14,29 @@ export class DangerButtonComponent {
 
   @Input()
   title: string = '';
+
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  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/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
@@ -1,5 +1,4 @@
-import {Component, Input} from '@angular/core';
-
+import { Component, ElementRef, HostBinding, Input, ViewChild, SimpleChanges } from '@angular/core';
 @Component({
   selector: 'mad-link-button',
   templateUrl: './link-button.component.html',
@@ -15,6 +14,28 @@ export class LinkButtonComponent {
   @Input()
   title: string = '';
 
-  @Input()
-  clickEvent: Function;
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  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/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
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, HostBinding, Input, SimpleChanges, ViewChild} from '@angular/core';
 
 @Component({
   selector: 'mad-icon-button',
@@ -14,4 +14,29 @@ export class IconButtonComponent {
 
   @Input()
   title: string = '';
+
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  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
@@ -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
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, HostBinding, Input, SimpleChanges, ViewChild} from '@angular/core';
 
 @Component({
   selector: 'mad-outline-button',
@@ -14,4 +14,29 @@ export class OutlineButtonComponent {
 
   @Input()
   title: string = '';
+
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  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/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
@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, ElementRef, HostBinding, Input, SimpleChanges, ViewChild} from '@angular/core';
 
 @Component({
   selector: 'mad-primary-button',
@@ -14,4 +14,29 @@ export class PrimaryButtonComponent {
 
   @Input()
   title: string = '';
+
+  @ViewChild('btn', { read: ElementRef, static: true }) button: ElementRef;
+
+  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/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>