fix(nbButton): set disabled DOM property (#871)

Author: yggg

src/framework/theme/components/accordion/accordion-item-header.component.ts

@@ -58,6 +58,7 @@ export class NbAccordionItemHeaderComponent implements OnInit, OnDestroy {
     return !this.accordionItem.collapsed;
   }
 
+  // issue #794
   @HostBinding('attr.tabindex')
   get tabbable(): string {
     return this.accordionItem.disabled ? '-1' : '0';

src/framework/theme/components/button/button.component.ts

@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, Input, HostBinding, HostListener } from '@angular/core';
+import { Component, Input, HostBinding, HostListener, Renderer2, ElementRef } from '@angular/core';
 import { convertToBoolProperty } from '../helpers';
 
 /**
@@ -203,6 +203,7 @@ export class NbButtonComponent {
   @HostBinding('attr.aria-disabled')
   @HostBinding('class.btn-disabled') disabled: boolean;
 
+  // issue #794
   @HostBinding('attr.tabindex')
   get tabbable(): string {
     return this.disabled ? '-1' : '0';
@@ -256,6 +257,7 @@ export class NbButtonComponent {
   @Input('disabled')
   set setDisabled(val: boolean) {
     this.disabled = convertToBoolProperty(val);
+    this.renderer.setProperty(this.hostElement.nativeElement, 'disabled', this.disabled);
   }
 
   /**
@@ -276,11 +278,26 @@ export class NbButtonComponent {
     this.outline = convertToBoolProperty(val);
   }
 
+  /**
+   * @private
+   * Keep this handler to partially support anchor disabling.
+   * Unlike button, anchor doesn't have 'disabled' DOM property,
+   * so handler will be called anyway. We preventing navigation and bubbling.
+   * Disabling is partial due to click handlers precedence. Consider example:
+   * <a nbButton [disabled]="true" (click)="clickHandler()">...</a>
+   * 'clickHandler' will be called before our host listener below. We can't prevent
+   * such handlers call.
+   */
   @HostListener('click', ['$event'])
   onClick(event: Event) {
     if (this.disabled) {
       event.preventDefault();
       event.stopImmediatePropagation();
     }
   }
+
+  constructor(
+    protected renderer: Renderer2,
+    protected hostElement: ElementRef<HTMLElement>,
+  ) {}
 }