Fix dialog footer and buttons

Author: christianezeani

projects/ngsuite/src/lib/core/interfaces/Config.ts

@@ -1,5 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { NGSuiteComponent } from './Component';
+import { ButtonTheme } from '../../form';
 
 export interface NGSuiteConfig {
 
@@ -22,6 +23,20 @@ export interface NGSuiteConfig {
    */
   sectionLoadingAnimation?: NGSuiteComponent;
 
+  /**
+   * Default alert button theme
+   *
+   * If this is `undefined`, it defaults to `primary`
+   */
+  defaultAlertButtonTheme?: ButtonTheme;
+
+  /**
+   * Default confirm dialog button theme
+   *
+   * If this is `undefined`, it defaults to `primary`
+   */
+  defaultConfirmButtonTheme?: ButtonTheme;
+
   [key: string]: any;
 }
 

projects/ngsuite/src/lib/dialog/popup/alert/alert.component.html

@@ -9,7 +9,7 @@ <h1 ngs-dialog-title>{{ title }}</h1>
 </ngs-dialog-body>
 
 <ngs-dialog-footer>
-  <ngs-button primary (click)="accept()">
+  <ngs-button [theme]="defaultBtnTheme" (click)="accept()">
     <span>Okay</span>
   </ngs-button>
 </ngs-dialog-footer>

projects/ngsuite/src/lib/dialog/popup/alert/alert.component.ts

@@ -11,6 +11,7 @@ import {
 } from "../../components";
 
 import { NGSuiteDialogConfirmComponent } from "../confirm/confirm.component";
+import { NGS_CONFIG } from "../../../core";
 
 
 @Component({
@@ -29,6 +30,9 @@ export class NGSuiteDialogAlertComponent {
 
   private readonly dialogRef = inject(NGSuiteDialogRef<NGSuiteDialogConfirmComponent>);
   private readonly data = inject(NGS_DIALOG_DATA);
+  private readonly config = inject(NGS_CONFIG);
+
+  readonly defaultBtnTheme = this.config.defaultAlertButtonTheme || 'primary';
 
   get title() { return this.data.title; }
   get message() { return this.data.message; }

projects/ngsuite/src/lib/dialog/popup/confirm/confirm.component.html

@@ -13,7 +13,7 @@ <h1 ngs-dialog-title>{{ title }}</h1>
     <span>Cancel</span>
   </ngs-button>
 
-  <ngs-button primary (click)="accept()">
+  <ngs-button [theme]="defaultBtnTheme" (click)="accept()">
     <span>Okay</span>
   </ngs-button>
 </ngs-dialog-footer>

projects/ngsuite/src/lib/dialog/popup/confirm/confirm.component.ts

@@ -9,6 +9,7 @@ import {
   NGSuiteDialogFooterComponent,
   NGSuiteDialogHeaderComponent,
 } from "../../components";
+import { NGS_CONFIG } from "../../../core";
 
 @Component({
   selector: 'ngs-dialog-confirm',
@@ -26,6 +27,9 @@ export class NGSuiteDialogConfirmComponent {
 
   private readonly dialogRef = inject(NGSuiteDialogRef<NGSuiteDialogConfirmComponent>);
   private readonly data = inject(NGS_DIALOG_DATA);
+  private readonly config = inject(NGS_CONFIG);
+
+  readonly defaultBtnTheme = this.config.defaultAlertButtonTheme || 'primary';
 
   get title() { return this.data.title; }
   get message() { return this.data.message; }

projects/ngsuite/src/lib/form/components/button/button.component.ts

@@ -1,11 +1,13 @@
-import { Component, computed, ElementRef, HostBinding, inject, input, Input } from "@angular/core";
+import { Component, computed, ElementRef, HostBinding, inject, input } from "@angular/core";
 import { Icon, NGSuiteIconComponent } from "../../../core";
 import { NgClass } from "@angular/common";
 
-type ButtonDirection = 'normal' | 'reversed';
-type ButtonTheme = 'default' | 'primary' | 'secondary' | 'error' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark';
-type ButtonType = 'submit' | 'button' | 'reset' | 'menu';
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+import {
+  ButtonDirection,
+  ButtonSize,
+  ButtonTheme,
+  ButtonType,
+} from "../../interfaces";
 
 @Component({
   selector: 'ngs-button',

projects/ngsuite/src/lib/form/interfaces/Button.ts

@@ -0,0 +1,4 @@
+export type ButtonDirection = 'normal' | 'reversed';
+export type ButtonTheme = 'default' | 'primary' | 'secondary' | 'error' | 'danger' | 'success' | 'warning' | 'info' | 'light' | 'dark';
+export type ButtonType = 'submit' | 'button' | 'reset' | 'menu';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

projects/ngsuite/src/lib/form/interfaces/index.ts

@@ -1,2 +1,3 @@
 export * from './Form';
+export * from './Button';
 export * from './Select';