feature(theme-shared): add abp-button component

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

@@ -0,0 +1,68 @@
+import { LoaderStart, LoaderStop } from '@abp/ng.core';
+import { Component, Input, OnInit } from '@angular/core';
+import { Actions, ofActionSuccessful } from '@ngxs/store';
+import { filter } from 'rxjs/operators';
+
+@Component({
+  selector: 'abp-button',
+  template: `
+    <button [attr.type]="buttonType" [ngClass]="buttonClass">
+      <i [ngClass]="icon" class="mr-1"></i><ng-content></ng-content>
+    </button>
+  `,
+})
+export class ButtonComponent implements OnInit {
+  @Input()
+  buttonClass: string = 'btn btn-primary';
+
+  @Input()
+  buttonType: string = 'button';
+
+  @Input()
+  iconClass: string;
+
+  @Input()
+  loading: boolean = false;
+
+  @Input()
+  requestType: string | string[];
+
+  @Input()
+  requestURLContainSearchValue: string;
+
+  get icon(): string {
+    return `${this.loading ? 'fa fa-spin fa-spinner' : this.iconClass || 'd-none'}`;
+  }
+
+  constructor(private actions: Actions) {}
+
+  ngOnInit(): void {
+    if (this.requestType || this.requestURLContainSearchValue) {
+      this.actions
+        .pipe(
+          ofActionSuccessful(LoaderStart, LoaderStop),
+          filter((event: LoaderStart | LoaderStop) => {
+            let condition = true;
+            if (this.requestType) {
+              if (!Array.isArray(this.requestType)) this.requestType = [this.requestType];
+
+              condition =
+                condition &&
+                this.requestType.findIndex(type => type.toLowerCase() === event.payload.method.toLowerCase()) > -1;
+            }
+
+            if (this.requestURLContainSearchValue) {
+              condition =
+                condition &&
+                event.payload.url.toLowerCase().indexOf(this.requestURLContainSearchValue.toLowerCase()) > -1;
+            }
+
+            return condition;
+          }),
+        )
+        .subscribe(() => {
+          this.loading = !this.loading;
+        });
+    }
+  }
+}

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

@@ -1,3 +1,5 @@
+export * from './button/button.component';
 export * from './confirmation/confirmation.component';
-export * from './toast/toast.component';
+export * from './loader-bar/loader-bar.component';
 export * from './modal/modal.component';
+export * from './toast/toast.component';

npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts

@@ -13,6 +13,7 @@ import { ModalComponent } from './components/modal/modal.component';
 import { ToastComponent } from './components/toast/toast.component';
 import styles from './contants/styles';
 import { ErrorHandler } from './handlers/error.handler';
+import { ButtonComponent } from './components/button/button.component';
 
 export function appendScript(injector: Injector) {
   const fn = function() {
@@ -41,8 +42,15 @@ export function appendScript(injector: Injector) {
       targetSelector: '.form-group',
     }),
   ],
-  declarations: [ConfirmationComponent, ToastComponent, ModalComponent, ErrorComponent, LoaderBarComponent],
-  exports: [NgbModalModule, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent],
+  declarations: [
+    ButtonComponent,
+    ConfirmationComponent,
+    ToastComponent,
+    ModalComponent,
+    ErrorComponent,
+    LoaderBarComponent,
+  ],
+  exports: [NgbModalModule, ButtonComponent, ConfirmationComponent, ToastComponent, ModalComponent, LoaderBarComponent],
   entryComponents: [ErrorComponent],
 })
 export class ThemeSharedModule {