@quadrel-enterprise-ui/framework 19.2.0 → 19.3.0

package/lib/dialog/cancel-confirmation-dialog/cancel-dialog.component.d.ts

@@ -0,0 +1,14 @@
+import { OnInit } from '@angular/core';
+import { DialogRef } from '@angular/cdk/dialog';
+import * as i0 from "@angular/core";
+export declare class QdCancelDialogComponent implements OnInit {
+    private dialogRef;
+    i18n: string;
+    handler: () => void;
+    constructor(dialogRef: DialogRef<any>);
+    ngOnInit(): void;
+    close(): void;
+    confirm(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QdCancelDialogComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QdCancelDialogComponent, "qd-cancel-dialog", never, {}, {}, never, never, false, never>;
+}

package/lib/dialog/dialog.component.d.ts

@@ -1,11 +1,12 @@
-import { AfterContentChecked, AfterViewInit, ChangeDetectorRef, ElementRef, OnInit } from '@angular/core';
+import { AfterContentChecked, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { DialogRef } from '@angular/cdk/dialog';
 import { QdDialogConfig } from './models/dialog-config.model';
+import { QdDialogChangeGuardService } from './services/dialog-change-guard.service';
+import { QdConfirmationDialogOpenerService } from './services/confirmation-dialog.service';
 import * as i0 from "@angular/core";
 /**
  * **QdDialog** creating resonsive dialogs. Three different sizes are available.
  *
- * Detailed migration guideline from QdModal to QdDialog: https://confluence.bit.admin.ch/display/DAZUIC/Migration+Dialoge
  *
  * * @see child component: **QdDialogAction**.
  *
@@ -39,21 +40,36 @@ import * as i0 from "@angular/core";
  *         <button qdButton (click)="close('Yes')">Submit</button>
  *     </qd-dialog-action>
  * </qd-dialog>
- */
-export declare class QdDialogComponent implements OnInit, AfterContentChecked, AfterViewInit {
+ *
+ *  **Example of MyModalComponent (Including Form Change Guard):**
+ *
+ *  @example
+ *  <qd-dialog>
+ *   <form [formGroup]="myForm" qdPendingChangesGuard>
+ *   <input type="text" formControlName="name">
+ *   You have unsaved changes!
+ *   </form>
+ *  </qd-dialog>
+ *  */
+export declare class QdDialogComponent implements OnInit, AfterContentChecked, AfterViewInit, OnDestroy {
     dialogRef: DialogRef<string>;
+    private dialog;
     private changeDetectorRef;
+    private dialogChangeGuard;
     body: ElementRef;
     infoBanners: ElementRef;
     get hasSectionsClass(): boolean;
     config: QdDialogConfig;
     hasSections: boolean;
     hasInfoBanner: boolean;
-    constructor(dialogRef: DialogRef<string>, changeDetectorRef: ChangeDetectorRef);
+    private _destroyed$;
+    constructor(dialogRef: DialogRef<string>, dialog: QdConfirmationDialogOpenerService, changeDetectorRef: ChangeDetectorRef, dialogChangeGuard: QdDialogChangeGuardService);
     ngOnInit(): void;
     ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
     close(): void;
+    primaryActionClicked(): void;
+    ngOnDestroy(): void;
     get isFullWidth(): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<QdDialogComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<QdDialogComponent, "qd-dialog", never, {}, {}, never, ["qd-page-info-banner", "*", "qd-dialog-action"], false, never>;

package/lib/dialog/dialog.module.d.ts

@@ -9,6 +9,7 @@ import { QdDialogAuthSessionEndComponent } from './auth-session-end/dialog-auth-
 import { QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QdDialogConfirmationConfig, QdDialogConfirmationResolver } from './models/confirmation.model';
 import { QdDialogData } from './models/record-stepper.model';
 import { QdDialogAuthSessionEndResult } from './models/session-end-result.model';
+import { PendingChangesGuardDirective } from './directives/pending-changes-guard.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./action/dialog-action.component";
 import * as i2 from "./auth-session-end/dialog-auth-session-end.component";
@@ -16,21 +17,23 @@ import * as i3 from "./dialog.component";
 import * as i4 from "./confirmation/dialog-confirmation.component";
 import * as i5 from "./record-stepper/dialog-record-stepper.component";
 import * as i6 from "./page-dialog-with-breadcrumbs/page-dialog-with-breadcrumbs.component";
-import * as i7 from "@angular/common";
-import * as i8 from "@ngx-translate/core";
-import * as i9 from "@angular/router";
-import * as i10 from "@angular/cdk/dialog";
-import * as i11 from "../button/button.module";
-import * as i12 from "../forms/qd-form.module";
-import * as i13 from "../icon/icon.module";
-import * as i14 from "../notifications/notifications.module";
-import * as i15 from "../spinner/spinner.module";
-import * as i16 from "../text-section/text-section.module";
-import * as i17 from "../core/core.module";
-import * as i18 from "../core/breadcrumbs/breadcrumbs.module";
-export { QdDialogComponent, QdDialogActionComponent, QdDialogRecordStepperComponent, QdDialogAuthSessionEndComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogService, QdDialogAuthSessionEndService, QdDialogConfig, QdDialogTitle, QdDialogSize, QdDialogData, QdDialogAuthSessionEndResult, QdDialogConfirmationConfig, QdDialogConfirmationResolver, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN };
+import * as i7 from "./directives/pending-changes-guard.directive";
+import * as i8 from "./cancel-confirmation-dialog/cancel-dialog.component";
+import * as i9 from "@angular/common";
+import * as i10 from "@ngx-translate/core";
+import * as i11 from "@angular/router";
+import * as i12 from "@angular/cdk/dialog";
+import * as i13 from "../button/button.module";
+import * as i14 from "../forms/qd-form.module";
+import * as i15 from "../icon/icon.module";
+import * as i16 from "../notifications/notifications.module";
+import * as i17 from "../spinner/spinner.module";
+import * as i18 from "../text-section/text-section.module";
+import * as i19 from "../core/core.module";
+import * as i20 from "../core/breadcrumbs/breadcrumbs.module";
+export { QdDialogComponent, QdDialogActionComponent, QdDialogRecordStepperComponent, QdDialogAuthSessionEndComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogService, QdDialogAuthSessionEndService, QdDialogConfig, QdDialogTitle, QdDialogSize, QdDialogData, QdDialogAuthSessionEndResult, QdDialogConfirmationConfig, QdDialogConfirmationResolver, PendingChangesGuardDirective, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN };
 export declare class QdDialogModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<QdDialogModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<QdDialogModule, [typeof i1.QdDialogActionComponent, typeof i2.QdDialogAuthSessionEndComponent, typeof i3.QdDialogComponent, typeof i4.QdDialogConfirmationComponent, typeof i4.QdDialogConfirmationErrorDirective, typeof i4.QdDialogConfirmationInfoDirective, typeof i4.QdDialogConfirmationSuccessDirective, typeof i5.QdDialogRecordStepperComponent, typeof i6.QdPageDialogWithBreadcrumbsComponent], [typeof i7.CommonModule, typeof i8.TranslateModule, typeof i9.RouterModule, typeof i10.DialogModule, typeof i11.QdButtonModule, typeof i12.QdFormModule, typeof i13.QdIconModule, typeof i14.QdNotificationsModule, typeof i15.QdSpinnerModule, typeof i16.QdTextSectionModule, typeof i17.QdCoreModule, typeof i18.QdBreadcrumbsModule], [typeof i1.QdDialogActionComponent, typeof i2.QdDialogAuthSessionEndComponent, typeof i3.QdDialogComponent, typeof i4.QdDialogConfirmationComponent, typeof i4.QdDialogConfirmationErrorDirective, typeof i4.QdDialogConfirmationSuccessDirective, typeof i5.QdDialogRecordStepperComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<QdDialogModule, [typeof i1.QdDialogActionComponent, typeof i2.QdDialogAuthSessionEndComponent, typeof i3.QdDialogComponent, typeof i4.QdDialogConfirmationComponent, typeof i4.QdDialogConfirmationErrorDirective, typeof i4.QdDialogConfirmationInfoDirective, typeof i4.QdDialogConfirmationSuccessDirective, typeof i5.QdDialogRecordStepperComponent, typeof i6.QdPageDialogWithBreadcrumbsComponent, typeof i7.PendingChangesGuardDirective, typeof i8.QdCancelDialogComponent], [typeof i9.CommonModule, typeof i10.TranslateModule, typeof i11.RouterModule, typeof i12.DialogModule, typeof i13.QdButtonModule, typeof i14.QdFormModule, typeof i15.QdIconModule, typeof i16.QdNotificationsModule, typeof i17.QdSpinnerModule, typeof i18.QdTextSectionModule, typeof i19.QdCoreModule, typeof i20.QdBreadcrumbsModule], [typeof i1.QdDialogActionComponent, typeof i2.QdDialogAuthSessionEndComponent, typeof i3.QdDialogComponent, typeof i4.QdDialogConfirmationComponent, typeof i4.QdDialogConfirmationErrorDirective, typeof i4.QdDialogConfirmationSuccessDirective, typeof i5.QdDialogRecordStepperComponent, typeof i7.PendingChangesGuardDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<QdDialogModule>;
 }

package/lib/dialog/directives/pending-changes-guard.directive.d.ts

@@ -0,0 +1,35 @@
+import { NgForm, FormGroupDirective } from '@angular/forms';
+import { OnDestroy, OnInit } from '@angular/core';
+import { QdDialogChangeGuardService } from '../services/dialog-change-guard.service';
+import * as i0 from "@angular/core";
+/**
+ * @name PendingChangesGuardDirective
+ * @description
+ * Automatically monitors the status of form changes in QdDialogComponent (Reactive or Template-Driven Forms)
+ * by comparing the current form value with its initial value.
+ * * The directive automatically marks the form as `pristine` when all values
+ * match the initial state, even if the form has been modified in between.
+ * * @example
+ * // Usage in the Dialog Content Component (Reactive Form):
+ * // import { QdPendingChangesGuardDirective } from '...';
+ * // template:
+ * // <qd-dialog>
+ * //   <form [formGroup]="myForm" qdPendingChangesGuard>
+ * //     <input type="text" formControlName="name">
+ * //   </form>
+ * // </qd-dialog>
+ */
+export declare class PendingChangesGuardDirective implements OnInit, OnDestroy {
+    private ngForm;
+    private formGroupDirective;
+    private changeGuard;
+    private statusSubscription;
+    private initialValue;
+    private formGroup;
+    constructor(ngForm: NgForm, formGroupDirective: FormGroupDirective, changeGuard: QdDialogChangeGuardService);
+    ngOnInit(): void;
+    private updateStatus;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PendingChangesGuardDirective, [{ optional: true; }, { optional: true; }, null]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<PendingChangesGuardDirective, "[qdPendingChangesGuard]", never, {}, {}, never, never, false, never>;
+}

package/lib/dialog/models/dialog-config.model.d.ts

@@ -24,6 +24,14 @@ export interface QdDialogConfig extends DialogConfig {
     data?: {
         [key: string]: any;
     };
+    /**
+     * @description Configuration for the primary action.
+     */
+    primary?: QdDialogPrimaryAction;
+    /**
+     * @description Configuration for the cancel button.
+     */
+    cancel?: QdDialogCancelAction;
 }
 /**
  * Configuration object for page dialog.
@@ -48,3 +56,48 @@ export declare enum QdDialogSize {
     Default = "900px",
     FullWidth = "100%"
 }
+/**
+ * @description Interface for the primary action.
+ */
+export interface QdDialogPrimaryAction {
+    /**
+     * @description Label for a primary action button, used for translation.
+     *
+     * * If no custom translation key is provided, a standard label will be used by default.
+     */
+    label?: {
+        i18n: string;
+    };
+    /**
+     * @description Handler function that is triggered when the primary action is executed.
+     */
+    handler?: () => void;
+}
+/**
+ * @description Interface for the cancel action, including an optional confirmation message.
+ */
+export interface QdDialogCancelAction {
+    /**
+     * @description Label for the cancel action, used for translation.
+     *
+     * * If no custom translation key is provided, a standard label will be used by default.
+     */
+    label?: {
+        i18n: string;
+    };
+    /**
+     * @description Handler function that is triggered when the cancel action is executed.
+     */
+    handler?: (formValues?: any) => void;
+    /**
+     * @description An optional confirmation message displayed in a dialog when the user attempts to cancel the operation, warning that all changes will be discarded.
+     * If no custom message is provided, a standard message will be shown by default.
+     *
+     * * The cancellation process checks whether there are unsaved changes in the form. If there are changes, the dialog will appear.
+     *
+     * * If no changes are detected, the cancellation proceeds without showing the confirmation dialog.
+     */
+    confirmationMessage?: {
+        i18n: string;
+    };
+}

package/lib/dialog/services/confirmation-dialog.service.d.ts

@@ -0,0 +1,13 @@
+import { Observable } from 'rxjs';
+import { QdDialogConfig } from '../models/dialog-config.model';
+import { Dialog, DialogRef } from '@angular/cdk/dialog';
+import { ComponentType } from '@angular/cdk/portal';
+import * as i0 from "@angular/core";
+export declare class QdConfirmationDialogOpenerService {
+    private dialog;
+    constructor(dialog: Dialog);
+    showCancelConfirmation(config: any): Observable<boolean>;
+    open<C>(component: ComponentType<C>, config: QdDialogConfig): DialogRef<unknown, C>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QdConfirmationDialogOpenerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<QdConfirmationDialogOpenerService>;
+}

package/lib/dialog/services/dialog-change-guard.service.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+export declare class QdDialogChangeGuardService {
+    private _hasChanges;
+    get hasPendingChanges(): boolean;
+    setPendingChangesStatus(status: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QdDialogChangeGuardService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<QdDialogChangeGuardService>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrel-enterprise-ui/framework",
-  "version": "v19.2.0",
+  "version": "v19.3.0",
   "peerDependencies": {
     "@angular/cdk": "^19.2.9",
     "@angular/common": "^19.2.9",