Confirm Element

Author: Attila Németh

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@attus/elements",
-  "version": "11.0.2",
+  "version": "11.1.0",
   "peerDependencies": {
     "@angular/common": "^11.0",
     "@angular/core": "^11.0"

src/lib/components/confirm/confirm.component.html

@@ -0,0 +1,16 @@
+<div mat-dialog-content>
+  <p class="mat-title">{{ data.question }}</p>
+  <p class="mat-subheading-2" *ngIf="data.hint !== undefined && data.hint !== ''">
+    {{ data.hint }}
+  </p>
+</div>
+<div mat-dialog-actions>
+  <button mat-button mat-dialog-close="0">
+    <mat-icon>close</mat-icon>
+    {{ data.cancel }}
+  </button>
+  <button mat-button mat-dialog-close="1">
+    <mat-icon>check</mat-icon>
+    {{ data.ok }}
+  </button>
+</div>

src/lib/components/confirm/confirm.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ConfirmComponent } from './confirm.component';
+
+describe('ConfirmComponent', () => {
+  let component: ConfirmComponent;
+  let fixture: ComponentFixture<ConfirmComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ConfirmComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ConfirmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/lib/components/confirm/confirm.component.ts

@@ -0,0 +1,33 @@
+/**
+ * @file Confirm Component
+ * 
+ * @author Attila Németh
+ * @date 11.06.2020 
+ */
+ 
+import {Component, Inject} from '@angular/core';
+import {MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
+
+export interface ConfirmQuestion {
+  question: string
+  hint?: string
+  cancel?: string
+  ok?: string
+}
+
+@Component({
+  templateUrl: './confirm.component.html',
+})
+export class AttusConfirmDialogComponent {
+    
+  constructor(public dialogRef: MatDialogRef<AttusConfirmDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ConfirmQuestion) {
+    if (data.cancel === undefined) {
+      data.cancel = 'Cancel';
+    }    
+    if (data.ok === undefined) {
+      data.ok = 'OK';
+    }
+  }
+  
+}

src/lib/elements.module.ts

@@ -8,10 +8,12 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatButtonModule} from '@angular/material/button';
 
 import { AttusElementsLoginDialogComponent } from './components/login/login.component';
+import { ConfirmComponent } from './components/confirm/confirm.component';
 
 @NgModule({
   declarations: [
-    AttusElementsLoginDialogComponent
+    AttusElementsLoginDialogComponent,
+    ConfirmComponent
   ],
   imports: [
     CommonModule,

src/public-api.ts

@@ -4,3 +4,4 @@
 
 export * from './lib/elements.module';
 export * from './lib/components/login/login.component';
+export * from './lib/components/confirm/confirm.component';