diff --git a/libs/ngxsmart/package.json b/libs/ngxsmart/package.json index 799c725..1cd696f 100644 --- a/libs/ngxsmart/package.json +++ b/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" diff --git a/libs/ngxsmart/src/index.ts b/libs/ngxsmart/src/index.ts index 31b40b0..d0ed326 100644 --- a/libs/ngxsmart/src/index.ts +++ b/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'; diff --git a/libs/ngxsmart/src/lib/buttons/delete-button/delete-button.component.ts b/libs/ngxsmart/src/lib/buttons/delete-button/delete-button.component.ts new file mode 100644 index 0000000..0a3a5e9 --- /dev/null +++ b/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: ` + + `, +}) +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 + *
+	 *   1. button
+	 *   2. submit
+	 * 
+ */ + @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 {} diff --git a/libs/ngxsmart/src/lib/buttons/edit-button/edit-button.component.ts b/libs/ngxsmart/src/lib/buttons/edit-button/edit-button.component.ts new file mode 100644 index 0000000..e7e6724 --- /dev/null +++ b/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: ` + + `, + styles: [], +}) +export class EditButtonComponent { + /** + * Type of the button. Following values are supported. See BootStrap docs for mor + * e information + *
+	 *   1. button
+	 *   2. submit
+	 * 
+ */ + @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 {} diff --git a/libs/ngxsmart/src/lib/buttons/save-primary-button/save-primary-button.component.ts b/libs/ngxsmart/src/lib/buttons/save-primary-button/save-primary-button.component.ts new file mode 100644 index 0000000..716a951 --- /dev/null +++ b/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: ` `, + 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 + *
+	 *   1. button
+	 *   2. submit
+	 * 
+ */ + @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 {} diff --git a/libs/ngxsmart/src/lib/buttons/search-button/search-button.component.ts b/libs/ngxsmart/src/lib/buttons/search-button/search-button.component.ts new file mode 100644 index 0000000..802c24b --- /dev/null +++ b/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: ` + + `, +}) +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 + *
+	 *   1. button
+	 *   2. submit
+	 * 
+ */ + @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 {} diff --git a/libs/ngxsmart/src/lib/buttons/success-button/success-button.component.ts b/libs/ngxsmart/src/lib/buttons/success-button/success-button.component.ts new file mode 100644 index 0000000..7ed06a7 --- /dev/null +++ b/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: ` + + `, +}) +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 + *
+	 *   1. button
+	 *   2. submit
+	 * 
+ */ + @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 {} diff --git a/libs/ngxsmart/src/lib/buttons/view-button/view-button.component.ts b/libs/ngxsmart/src/lib/buttons/view-button/view-button.component.ts new file mode 100644 index 0000000..fee062a --- /dev/null +++ b/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: ` + + `, + styles: [], +}) +export class ViewButtonComponent { + /** + * Type of the button. Following values are supported. See BootStrap docs for more information + *
+	 *   1. button
+	 *   2. submit
+	 * 
+ */ + @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 {} diff --git a/libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.html b/libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 0000000..faffdfb --- /dev/null +++ b/libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.html @@ -0,0 +1,13 @@ +
+

{{ title }}

+
+ + +
+

{{ message }}

+
+ + diff --git a/libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.scss b/libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.ts b/libs/ngxsmart/src/lib/confirm-dialog/confirm-dialog.component.ts new file mode 100644 index 0000000..4d01c10 --- /dev/null +++ b/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 + ) { + // 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 {}