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

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>,
+ ) {}
 }