feat(theme-shared): add new inputs to button component

npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts

@@ -1,14 +1,24 @@
-import { Component, Input } from '@angular/core';
+import { Component, EventEmitter, Input, Output, ViewChild, ElementRef, Renderer2, OnInit } from '@angular/core';
+import { ABP } from '@abp/ng.core';
 
 @Component({
   selector: 'abp-button',
+  // tslint:disable-next-line: component-max-inline-declarations
   template: `
-    <button [attr.type]="type" [ngClass]="buttonClass" [disabled]="loading || disabled">
+    <button
+      #button
+      [attr.type]="type"
+      [ngClass]="buttonClass"
+      [disabled]="loading || disabled"
+      (click)="click.emit($event)"
+      (focus)="focus.emit($event)"
+      (blur)="blur.emit($event)"
+    >
       <i [ngClass]="icon" class="mr-1"></i><ng-content></ng-content>
     </button>
   `,
 })
-export class ButtonComponent {
+export class ButtonComponent implements OnInit {
   @Input()
   buttonClass = 'btn btn-primary';
 
@@ -24,6 +34,21 @@ export class ButtonComponent {
   @Input()
   disabled = false;
 
+  @Input()
+  attributes: ABP.Dictionary<string>;
+
+  // tslint:disable-next-line: no-output-native
+  @Output() readonly click = new EventEmitter<MouseEvent>();
+
+  // tslint:disable-next-line: no-output-native
+  @Output() readonly focus = new EventEmitter<FocusEvent>();
+
+  // tslint:disable-next-line: no-output-native
+  @Output() readonly blur = new EventEmitter<FocusEvent>();
+
+  @ViewChild('button', { static: true })
+  buttonRef: ElementRef<HTMLButtonElement>;
+
   /**
    * @deprecated Use buttonType instead. To be deleted in v1
    */
@@ -32,4 +57,14 @@ export class ButtonComponent {
   get icon(): string {
     return `${this.loading ? 'fa fa-pulse fa-spinner' : this.iconClass || 'd-none'}`;
   }
+
+  constructor(private renderer: Renderer2) {}
+
+  ngOnInit() {
+    if (this.attributes) {
+      Object.keys(this.attributes).forEach(key => {
+        this.renderer.setAttribute(this.buttonRef.nativeElement, key, this.attributes[key]);
+      });
+    }
+  }
 }

npm/ng-packs/packages/theme-shared/src/lib/tests/button.component.spec.ts

@@ -2,46 +2,55 @@ import { createHostFactory, SpectatorHost } from '@ngneat/spectator/jest';
 import { ButtonComponent } from '../components';
 
 describe('ButtonComponent', () => {
-  let host: SpectatorHost<ButtonComponent>;
+  let spectator: SpectatorHost<ButtonComponent>;
 
   const createHost = createHostFactory(ButtonComponent);
 
-  beforeEach(() => (host = createHost('<abp-button iconClass="fa fa-check">Button</abp-button>')));
+  beforeEach(
+    () =>
+      (spectator = createHost('<abp-button iconClass="fa fa-check" [attributes]="attributes">Button</abp-button>', {
+        hostProps: { attributes: { autofocus: '', name: 'abp-button' } },
+      })),
+  );
 
   it('should display the button', () => {
-    expect(host.query('button')).toBeTruthy();
+    expect(spectator.query('button')).toBeTruthy();
   });
 
   it('should equal the default classes to btn btn-primary', () => {
-    expect(host.query('button')).toHaveClass('btn btn-primary');
+    expect(spectator.query('button')).toHaveClass('btn btn-primary');
   });
 
   it('should equal the default type to button', () => {
-    expect(host.query('button')).toHaveAttribute('type', 'button');
+    expect(spectator.query('button')).toHaveAttribute('type', 'button');
   });
 
   it('should enabled', () => {
-    expect(host.query('[disabled]')).toBeFalsy();
+    expect(spectator.query('[disabled]')).toBeFalsy();
   });
 
   it('should have the text content', () => {
-    expect(host.query('button')).toHaveText('Button');
+    expect(spectator.query('button')).toHaveText('Button');
   });
 
   it('should display the icon', () => {
-    expect(host.query('i.d-none')).toBeFalsy();
-    expect(host.query('i')).toHaveClass('fa');
+    expect(spectator.query('i.d-none')).toBeFalsy();
+    expect(spectator.query('i')).toHaveClass('fa');
   });
 
   it('should display the spinner icon', () => {
-    host.component.loading = true;
-    host.detectComponentChanges();
-    expect(host.query('i')).toHaveClass('fa-spinner');
+    spectator.component.loading = true;
+    spectator.detectComponentChanges();
+    expect(spectator.query('i')).toHaveClass('fa-spinner');
   });
 
   it('should disabled when the loading input is true', () => {
-    host.component.loading = true;
-    host.detectComponentChanges();
-    expect(host.query('[disabled]')).toBeDefined();
+    spectator.component.loading = true;
+    spectator.detectComponentChanges();
+    expect(spectator.query('[disabled]')).toBeTruthy();
+  });
+
+  it('should disabled when the loading input is true', () => {
+    expect(spectator.query('[autofocus][name="abp-button"]')).toBeTruthy();
   });
 });