feat(buttons): adds reusable buttons

libs/ngxsmart/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngxsmart/ngxsmart",
-	"version": "13.0.5",
+	"version": "13.1.0",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/ngxsmart/ngxsmart.git"

libs/ngxsmart/src/index.ts

@@ -10,3 +10,10 @@ export * from './lib/object-autocomplete/object-autocomplete.component';
 export * from './lib/string-autocomplete/string-autocomplete.component';
 export * from './lib/print.module';
 export * from './lib/print/ngx-print.directive';
+
+// Export buttons
+export * from './lib/buttons/edit-button/edit-button.component';
+export * from './lib/buttons/save-primary-button/save-primary-button.component';
+export * from './lib/buttons/search-button/search-button.component';
+export * from './lib/buttons/success-button/success-button.component';
+export * from './lib/buttons/view-button/view-button.component';

libs/ngxsmart/src/lib/buttons/delete-button/delete-button.component.ts

@@ -0,0 +1,51 @@
+import { Component, Input, NgModule, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+	selector: 'app-delete-button',
+	template: `
+		<button class="btn btn-danger {{ loading ? 'disabled' : '' }}" mat-raised-button type="{{ type }}">
+			<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			<mat-icon *ngIf="!loading">delete</mat-icon>
+			{{ loading ? deleteMessage : nonDeleteMessage }}
+		</button>
+	`,
+})
+export class DeleteButtonComponent implements OnInit {
+	/**
+	 *  Is search in progress and loading the data
+	 */
+	@Input() loading: boolean | undefined = false;
+
+	/**
+	 * Type of the button. Following values are supported. See BootStrap docs for more information
+	 * <pre>
+	 *   1. button
+	 *   2. submit
+	 * </pre>
+	 */
+	@Input() type = 'button';
+
+	/**
+	 * If set, shows when Delete in Progress
+	 */
+	@Input() deleteMessage = 'Deleting...';
+
+	/**
+	 * If set, shows when Delete is not in progress
+	 */
+	@Input() nonDeleteMessage = 'Delete';
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}
+
+@NgModule({
+	declarations: [DeleteButtonComponent],
+	imports: [CommonModule, MatIconModule, MatButtonModule],
+	exports: [DeleteButtonComponent],
+})
+export class DeleteButtonComponentModule {}

libs/ngxsmart/src/lib/buttons/edit-button/edit-button.component.ts

@@ -0,0 +1,43 @@
+import {Component, Input, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+
+@Component({
+	selector: 'mib-air-edit-button',
+	template: `
+		<button class="primary-button" mat-raised-button type="{{ type }}">
+			<mat-icon>{{ icon }}</mat-icon>
+			{{ message }}
+		</button>
+	`,
+	styles: [],
+})
+export class EditButtonComponent {
+	/**
+	 * Type of the button. Following values are supported. See BootStrap docs for mor
+	 * e information
+	 * <pre>
+	 *   1. button
+	 *   2. submit
+	 * </pre>
+	 */
+	@Input() type = 'button';
+
+	/**
+	 * If set, shows material icon
+	 */
+	@Input() icon = 'edit';
+
+	/**
+	 * If set, shows when search in progress
+	 */
+	@Input() message = 'Edit';
+}
+
+@NgModule({
+	imports: [CommonModule, MatIconModule, MatButtonModule],
+	declarations: [EditButtonComponent],
+	exports: [EditButtonComponent],
+})
+export class EditButtonComponentModule {}

libs/ngxsmart/src/lib/buttons/save-primary-button/save-primary-button.component.ts

@@ -0,0 +1,51 @@
+import { Component, OnInit, NgModule, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+	selector: 'mib-air-save-primary-button',
+	template: ` <button class="btn btn-primary {{ loading ? 'disabled' : '' }}" mat-raised-button type="{{ type }}">
+		<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+		<mat-icon *ngIf="!loading">{{ icon }}</mat-icon>
+		{{ loading ? loadingMessage : message }}
+	</button>`,
+	styles: [],
+})
+export class SavePrimaryButtonComponent {
+	/**
+	 *  Is search in progress and loading the data
+	 */
+	@Input() loading: boolean | undefined = false;
+
+	/**
+	 * Type of the button. Following values are supported. See BootStrap docs for more information
+	 * <pre>
+	 *   1. button
+	 *   2. submit
+	 * </pre>
+	 */
+	@Input() type = 'button';
+
+	/**
+	 * If set, shows when search in progress
+	 */
+	@Input() loadingMessage = 'Saving...';
+
+	/**
+	 * If set, shows when search is not in progress
+	 */
+	@Input() message = 'Save';
+
+	/**
+	 * If set, shows material icon
+	 */
+	@Input() icon = 'save';
+}
+
+@NgModule({
+	imports: [CommonModule, MatIconModule, MatButtonModule],
+	declarations: [SavePrimaryButtonComponent],
+	exports: [SavePrimaryButtonComponent],
+})
+export class SavePrimaryButtonComponentModule {}

libs/ngxsmart/src/lib/buttons/search-button/search-button.component.ts

@@ -0,0 +1,51 @@
+import { Component, Input, NgModule, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+	selector: 'app-search-button',
+	template: `
+		<button class="btn btn-primary {{ loading ? 'disabled' : '' }}" mat-raised-button type="{{ type }}">
+			<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			<mat-icon *ngIf="!loading">search</mat-icon>
+			{{ loading ? searchMessage : nonSearchMessage }}
+		</button>
+	`,
+})
+export class SearchButtonComponent implements OnInit {
+	/**
+	 *  Is search in progress and loading the data
+	 */
+	@Input() loading: boolean | undefined = false;
+
+	/**
+	 * Type of the button. Following values are supported. See BootStrap docs for more information
+	 * <pre>
+	 *   1. button
+	 *   2. submit
+	 * </pre>
+	 */
+	@Input() type = 'button';
+
+	/**
+	 * If set, shows when search in progress
+	 */
+	@Input() searchMessage = 'Searching...';
+
+	/**
+	 * If set, shows when search is not in progress
+	 */
+	@Input() nonSearchMessage = 'Search';
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}
+
+@NgModule({
+	declarations: [SearchButtonComponent],
+	imports: [CommonModule, MatIconModule, MatButtonModule],
+	exports: [SearchButtonComponent],
+})
+export class SearchButtonComponentModule {}

libs/ngxsmart/src/lib/buttons/success-button/success-button.component.ts

@@ -0,0 +1,56 @@
+import { Component, Input, NgModule, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+	selector: 'app-success-button',
+	template: `
+		<button class="btn btn-success {{ loading || disabled ? 'disabled' : '' }}" mat-raised-button type="{{ type }}">
+			<span *ngIf="loading" aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
+			<mat-icon *ngIf="!loading">save</mat-icon>
+			{{ loading ? loadingMessage : message }}
+		</button>
+	`,
+})
+export class SuccessButtonComponent implements OnInit {
+	/**
+	 *  Is search in progress and loading the data
+	 */
+	@Input() loading: boolean | undefined = false;
+
+	/**
+	 *  Is button disabled, default is false
+	 */
+	@Input() disabled = false;
+
+	/**
+	 * Type of the button. Following values are supported. See BootStrap docs for more information
+	 * <pre>
+	 *   1. button
+	 *   2. submit
+	 * </pre>
+	 */
+	@Input() type = 'button';
+
+	/**
+	 * If set, shows when search in progress
+	 */
+	@Input() loadingMessage = 'Updating...';
+
+	/**
+	 * If set, shows when search is not in progress
+	 */
+	@Input() message = 'Update';
+
+	constructor() {}
+
+	ngOnInit(): void {}
+}
+
+@NgModule({
+	declarations: [SuccessButtonComponent],
+	imports: [CommonModule, MatIconModule, MatButtonModule],
+	exports: [SuccessButtonComponent],
+})
+export class SuccessButtonComponentModule {}

libs/ngxsmart/src/lib/buttons/view-button/view-button.component.ts

@@ -0,0 +1,42 @@
+import {Component, Input, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+
+@Component({
+	selector: 'mib-air-view-button',
+	template: `
+		<button class="primary-button" mat-raised-button type="{{ type }}">
+			<mat-icon>{{ icon }}</mat-icon>
+			{{ message }}
+		</button>
+	`,
+	styles: [],
+})
+export class ViewButtonComponent {
+	/**
+	 * Type of the button. Following values are supported. See BootStrap docs for more information
+	 * <pre>
+	 *   1. button
+	 *   2. submit
+	 * </pre>
+	 */
+	@Input() type = 'button';
+
+	/**
+	 * If set, shows material icon
+	 */
+	@Input() icon = 'visibility';
+
+	/**
+	 * If set, shows when search is not in progress
+	 */
+	@Input() message = 'View';
+}
+
+@NgModule({
+	imports: [CommonModule, MatIconModule, MatButtonModule],
+	declarations: [ViewButtonComponent],
+	exports: [ViewButtonComponent],
+})
+export class ViewButtonComponentModule {}

libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.html

@@ -0,0 +1,13 @@
+<div class="mat-dialog-title" style="text-align: center">
+	<h4>{{ title }}</h4>
+</div>
+
+<mat-divider></mat-divider>
+<div mat-dialog-content style="margin: 20px">
+	<p>{{ message }}</p>
+</div>
+
+<div align="end" class="modal-footer" mat-dialog-actions>
+	<button (click)="onDismiss()" mat-raised-button>No</button>
+	<button (click)="onConfirm()" color="primary" mat-raised-button>Yes</button>
+</div>

libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.ts

@@ -0,0 +1,50 @@
+import { Component, Inject, NgModule, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDividerModule } from '@angular/material/divider';
+
+@Component({
+	selector: 'app-confirm-dialog',
+	templateUrl: './confirm-dialog.component.html',
+	styleUrls: ['./confirm-dialog.component.scss'],
+})
+export class ConfirmDialogComponent implements OnInit {
+	title: string;
+	message: string;
+
+	constructor(
+		@Inject(MAT_DIALOG_DATA) public data: ConfirmDialogData,
+		public dialogRef: MatDialogRef<ConfirmDialogComponent>
+	) {
+		// Update view with given values
+		this.title = data.title;
+		this.message = data.message;
+	}
+
+	ngOnInit(): void {}
+
+	onDismiss() {
+		// Close the dialog, return true
+		this.dialogRef.close(false);
+	}
+
+	onConfirm() {
+		// Close the dialog, return true
+		this.dialogRef.close(true);
+	}
+}
+
+/**
+ * Class to represent confirm dialog model.
+ */
+export interface ConfirmDialogData {
+	title: string;
+	message: string;
+}
+
+@NgModule({
+	declarations: [ConfirmDialogComponent],
+	imports: [MatButtonModule, MatDividerModule, MatDialogModule],
+	exports: [ConfirmDialogComponent],
+})
+export class ConfirmDialogComponentModule {}