diff --git a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html index 6a1ff38..543c92a 100644 --- a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html +++ b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.html @@ -16,6 +16,10 @@

} + @if (config.component) { + + } + @if (config.requireInput) {
@@ -35,14 +39,20 @@ }
-
- +
+ @if (!config.cancelButtonPrimary) { + + } @else { +
+ {{ config.confirmationText }} +
+ } @if (config.alternativeConfirmationText) { - {{ config.denyText }} -
+ @if (config.cancelButtonPrimary) { + + } @else { +
+ {{ config.denyText }} +
+ } }
diff --git a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.scss b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.scss index 21c8eab..3269ccc 100644 --- a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.scss +++ b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.scss @@ -6,3 +6,12 @@ display: flex; flex-direction: column; } + +.reverse { + flex-direction: row-reverse; + justify-content: flex-end; +} + +.no-uppercase { + text-transform: unset; +} diff --git a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts index 67cc5c5..54dd7f9 100644 --- a/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts +++ b/src/lib/dialog/confirmation-dialog/confirmation-dialog.component.ts @@ -1,15 +1,24 @@ -import { NgTemplateOutlet } from '@angular/common'; -import { ChangeDetectionStrategy, Component, HostListener, inject, TemplateRef } from '@angular/core'; +import { NgClass, NgTemplateOutlet } from '@angular/common'; +import { + AfterViewInit, + ChangeDetectionStrategy, + Component, + HostListener, + inject, + TemplateRef, + Type, + viewChild, + ViewContainerRef, +} from '@angular/core'; import { FormsModule } from '@angular/forms'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog'; import { MatIconModule } from '@angular/material/icon'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { TranslateModule, TranslateService } from '@ngx-translate/core'; -import { CircleButtonComponent } from '../../buttons/circle-button/circle-button.component'; -import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component'; -import { IconButtonTypes } from '../../buttons/types/icon-button.type'; -import { ValuesOf } from '../../utils/types/utility-types'; +import { CircleButtonComponent, IconButtonTypes } from '../../buttons'; +import { IconButtonComponent } from '../../buttons'; +import { ValuesOf } from '../../utils'; export const TitleColors = { DEFAULT: 'default', @@ -48,6 +57,9 @@ interface InternalConfirmationDialogData { readonly checkboxes: CheckBox[]; readonly checkboxesValidation: boolean; readonly toastMessage?: string; + readonly component?: Type; + readonly componentInputs?: { [key: string]: unknown }; + readonly cancelButtonPrimary?: boolean; } export type IConfirmationDialogData = Partial; @@ -65,6 +77,9 @@ function getConfig(options?: IConfirmationDialogData): InternalConfirmationDialo denyText: options?.denyText ?? _('common.confirmation-dialog.deny'), checkboxes: options?.checkboxes ?? [], checkboxesValidation: typeof options?.checkboxesValidation === 'boolean' ? options.checkboxesValidation : true, + component: options?.component, + componentInputs: options?.componentInputs, + cancelButtonPrimary: options?.cancelButtonPrimary ?? false, }; } @@ -82,15 +97,17 @@ function getConfig(options?: IConfirmationDialogData): InternalConfirmationDialo IconButtonComponent, CircleButtonComponent, MatDialogModule, + NgClass, ], }) -export class ConfirmationDialogComponent { +export class ConfirmationDialogComponent implements AfterViewInit { readonly config = getConfig(inject(MAT_DIALOG_DATA)); inputValue = ''; showToast = false; readonly inputLabel: string; readonly confirmOptions = ConfirmOptions; readonly iconButtonTypes = IconButtonTypes; + readonly detailsComponentRef = viewChild.required('detailsComponent', { read: ViewContainerRef }); constructor( private readonly _dialogRef: MatDialogRef, @@ -115,13 +132,19 @@ export class ConfirmationDialogComponent { return ConfirmOptions.CONFIRM; } - @HostListener('window:keyup.enter') - onKeyupEnter(): void { - if (this.config.requireInput && !this.confirmationDoesNotMatch()) { - this.confirm(ConfirmOptions.CONFIRM); + @HostListener('window:keyup.enter', ['$event']) + onKeyupEnter(event: KeyboardEvent): void { + event?.stopImmediatePropagation(); + if (!this.config.requireInput || !this.confirmationDoesNotMatch()) { + if (!this.config.cancelButtonPrimary) this.confirm(ConfirmOptions.CONFIRM); + else this.deny(); } } + ngAfterViewInit() { + this.#initializeDetailsComponent(); + } + confirmationDoesNotMatch(): boolean { return this.inputValue.toLowerCase() !== this.config.confirmationText.toLowerCase(); } @@ -156,9 +179,13 @@ export class ConfirmationDialogComponent { }); } - @HostListener('window:keydown.Enter', ['$event']) - onEnter(event: KeyboardEvent): void { - event?.stopImmediatePropagation(); - this.confirm(ConfirmOptions.CONFIRM); + #initializeDetailsComponent() { + if (!this.config.component) return; + const component = this.detailsComponentRef().createComponent(this.config.component); + if (this.config.componentInputs) { + for (const [key, value] of Object.entries(this.config.componentInputs)) { + (component.instance as any)[key] = value; + } + } } }