@quadrel-enterprise-ui/framework 19.2.0 → 19.3.1

package/fesm2022/quadrel-enterprise-ui-framework.mjs

@@ -5,8 +5,8 @@ import { DialogModule } from '@angular/cdk/dialog';
 import * as i1 from '@angular/common';
 import { CommonModule, NgFor, NgIf, NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i3 from 'rxjs';
-import { BehaviorSubject, pairwise, ReplaySubject, Subject, throwError, of, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, map as map$1, switchMap, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, from, delay, tap as tap$1, first, scan, combineLatestWith, iif, delayWhen, withLatestFrom, async, filter as filter$1 } from 'rxjs';
-import { map, filter, catchError, debounceTime, takeUntil, startWith, distinctUntilChanged, concatMap, take, tap, skip, pairwise as pairwise$1, switchMap as switchMap$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
+import { BehaviorSubject, pairwise, from, switchMap, map as map$1, Subject, ReplaySubject, throwError, of, merge, fromEvent, isObservable, NEVER, Observable, EMPTY, shareReplay, Subscription, distinctUntilChanged as distinctUntilChanged$1, debounce, timer, startWith as startWith$1, debounceTime as debounceTime$1, takeUntil as takeUntil$1, firstValueFrom, combineLatest, concat, take as take$1, delay, tap as tap$1, first, scan, combineLatestWith, iif, delayWhen, withLatestFrom, async, filter as filter$1 } from 'rxjs';
+import { map, takeUntil, filter, catchError, debounceTime, startWith, distinctUntilChanged, concatMap, take, tap, skip, pairwise as pairwise$1, switchMap as switchMap$1, mergeMap, delay as delay$1 } from 'rxjs/operators';
 import { v4 } from 'uuid';
 import * as i1$2 from '@ngx-translate/core';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
@@ -1140,11 +1140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 
 class QdDialogActionComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QdDialogActionComponent, isStandalone: false, selector: "qd-dialog-action", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QdDialogActionComponent, isStandalone: false, selector: "qd-dialog-action", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;column-gap:.625rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogActionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-dialog-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"] }]
+            args: [{ selector: 'qd-dialog-action', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-content></ng-content>\n", styles: [":host{display:flex;column-gap:.625rem}\n"] }]
         }] });
 
 /**
@@ -1157,6 +1157,54 @@ var QdDialogSize;
     QdDialogSize["FullWidth"] = "100%";
 })(QdDialogSize || (QdDialogSize = {}));
 
+class QdDialogChangeGuardService {
+    _hasChanges = false;
+    get hasPendingChanges() {
+        return this._hasChanges;
+    }
+    setPendingChangesStatus(status) {
+        this._hasChanges = status;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogChangeGuardService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogChangeGuardService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogChangeGuardService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class QdConfirmationDialogOpenerService {
+    dialog;
+    constructor(dialog) {
+        this.dialog = dialog;
+    }
+    showCancelConfirmation(config) {
+        return from(Promise.resolve().then(function () { return cancelDialog_component; }).then(m => m.QdCancelDialogComponent)).pipe(switchMap(component => {
+            const dialogRef = this.open(component, {
+                title: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.title' },
+                dialogSize: QdDialogSize.Small,
+                data: config
+            });
+            return dialogRef.closed.pipe(map$1(result => !!result));
+        }));
+    }
+    open(component, config) {
+        config.panelClass = 'qd-custom-panel';
+        config.width = config.dialogSize || QdDialogSize.Default;
+        return this.dialog.open(component, config);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdConfirmationDialogOpenerService, deps: [{ token: i1$1.Dialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdConfirmationDialogOpenerService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdConfirmationDialogOpenerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i1$1.Dialog }] });
+
 /**
  * The **QdIconButton** can only display icons, in contrast to the **QdButton**. <br />
  * It is possible to bind it to either a `button` tag or to an `a` tag.
@@ -1210,7 +1258,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
 /**
  * **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**.
  *
@@ -1244,10 +1291,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  *         <button qdButton (click)="close('Yes')">Submit</button>
  *     </qd-dialog-action>
  * </qd-dialog>
- */
+ *
+ *  **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>
+ *  */
 class QdDialogComponent {
     dialogRef;
+    dialog;
     changeDetectorRef;
+    dialogChangeGuard;
     body;
     infoBanners;
     get hasSectionsClass() {
@@ -1256,9 +1315,12 @@ class QdDialogComponent {
     config;
     hasSections;
     hasInfoBanner;
-    constructor(dialogRef, changeDetectorRef) {
+    _destroyed$ = new Subject();
+    constructor(dialogRef, dialog, changeDetectorRef, dialogChangeGuard) {
         this.dialogRef = dialogRef;
+        this.dialog = dialog;
         this.changeDetectorRef = changeDetectorRef;
+        this.dialogChangeGuard = dialogChangeGuard;
     }
     ngOnInit() {
         this.config = this.dialogRef.config;
@@ -1275,18 +1337,41 @@ class QdDialogComponent {
         this.changeDetectorRef.detectChanges();
     }
     close() {
+        const hasPendingChanges = this.dialogChangeGuard.hasPendingChanges;
+        if (hasPendingChanges) {
+            this.dialog
+                .showCancelConfirmation(this.config)
+                .pipe(takeUntil(this._destroyed$))
+                .subscribe(confirmed => {
+                if (confirmed)
+                    this.dialogRef.close();
+            });
+        }
+        else {
+            if (this.config.cancel?.handler)
+                this.config.cancel?.handler();
+            this.dialogRef.close();
+        }
+    }
+    primaryActionClicked() {
+        if (this.config.primary?.handler)
+            this.config.primary?.handler();
         this.dialogRef.close();
     }
+    ngOnDestroy() {
+        this._destroyed$.next();
+        this._destroyed$.complete();
+    }
     get isFullWidth() {
         return this.config.dialogSize === QdDialogSize.FullWidth;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QdDialogComponent, isStandalone: false, selector: "qd-dialog", host: { properties: { "class.full-width": "isFullWidth", "class.has-sections": "this.hasSectionsClass" } }, providers: [QdDialogComponent], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "infoBanners", first: true, predicate: ["banners"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"qd-dialog-action\"></ng-content>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: QdConfirmationDialogOpenerService }, { token: i0.ChangeDetectorRef }, { token: QdDialogChangeGuardService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QdDialogComponent, isStandalone: false, selector: "qd-dialog", host: { properties: { "class.full-width": "isFullWidth", "class.has-sections": "this.hasSectionsClass" } }, providers: [QdDialogComponent], viewQueries: [{ propertyName: "body", first: true, predicate: ["body"], descendants: true }, { propertyName: "infoBanners", first: true, predicate: ["banners"], descendants: true }], ngImport: i0, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n  <button *ngIf=\"config.cancel\" qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\">Cancel</button>\n  <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\">Submit as</button>\n  <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdIconButtonComponent, selector: "button[qdIconButton], a[qdIconButton], button[qd-icon-button]", inputs: ["color", "data-test-id"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-dialog', host: { '[class.full-width]': 'isFullWidth' }, encapsulation: ViewEncapsulation.None, providers: [QdDialogComponent], standalone: false, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n<ng-content select=\"qd-dialog-action\"></ng-content>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: i0.ChangeDetectorRef }], propDecorators: { body: [{
+            args: [{ selector: 'qd-dialog', host: { '[class.full-width]': 'isFullWidth' }, encapsulation: ViewEncapsulation.None, providers: [QdDialogComponent], standalone: false, template: "<div *ngIf=\"!isFullWidth\" class=\"dialog-header\">\n  <div class=\"title-container\">\n    {{ config?.title?.i18n | translate }}\n  </div>\n  <button\n    *ngIf=\"!config?.hideCloseHeaderButton\"\n    qdIconButton\n    class=\"close\"\n    color=\"secondary\"\n    tabindex=\"-1\"\n    (click)=\"close()\"\n  >\n    <qd-icon icon=\"timesLargeLight\"></qd-icon>\n  </button>\n</div>\n\n<button\n  *ngIf=\"!config?.hideCloseHeaderButton && isFullWidth\"\n  qdIconButton\n  class=\"close\"\n  color=\"secondary\"\n  tabindex=\"-1\"\n  (click)=\"close()\"\n>\n  <qd-icon icon=\"timesLargeLight\"></qd-icon>\n</button>\n\n<div class=\"wrapper-body\">\n  <div [class.has-dialog-info-banners]=\"hasInfoBanner\" #banners>\n    <ng-content select=\"qd-page-info-banner\"></ng-content>\n  </div>\n  <div class=\"body\" [class.full-width]=\"isFullWidth\" #body>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n<div class=\"qd-dialog-actions\">\n  <button *ngIf=\"config.cancel\" qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\">Cancel</button>\n  <button *ngIf=\"config.primary\" qdButton (click)=\"primaryActionClicked()\">Submit as</button>\n  <ng-content select=\"qd-dialog-action\"></ng-content>\n</div>\n", styles: ["qd-dialog{display:flex;width:100%;height:100%;flex-direction:column;background:#efefef}qd-dialog.full-width{position:relative;width:calc(100% - 3rem)!important;height:calc(100% - 3rem)!important;margin:1.5rem}qd-dialog.full-width .close{position:absolute;z-index:9999;top:1.25rem;right:1rem;color:#454545;cursor:pointer}.dialog-header{display:flex;height:3.125rem;flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem 1.5rem;border-bottom:2px solid rgb(213,213,213);background:#fff}.dialog-header .title-container{display:block;color:#171717;font-weight:500}.dialog-header .close{cursor:pointer}.wrapper-body{overflow:auto;flex:1;background:#efefef}.wrapper-body .has-dialog-info-banners{padding:1rem 1.25rem .5rem;border-bottom:rgb(213,213,213) solid .0625rem;background-color:#fff}.wrapper-body .has-dialog-info-banners qd-page-info-banner:last-child{margin-bottom:0}.wrapper-body .body.full-width{height:100%}.wrapper-body .body:not(.full-width){max-height:80vh;padding:1rem 1.5rem}.wrapper-body .body:not(.full-width) qd-section{padding-right:1.5rem;padding-left:1.5rem}.wrapper-body .body:not(.full-width) qd-text-section{margin-right:0;margin-left:0}qd-dialog.has-sections .wrapper-body .body:not(.full-width){padding:0}.qd-dialog-actions{display:flex;justify-content:flex-end;padding:.5rem 1.5rem;border-top:2px solid rgb(213,213,213);background:#efefef;column-gap:.625rem}\n"] }]
+        }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: QdConfirmationDialogOpenerService }, { type: i0.ChangeDetectorRef }, { type: QdDialogChangeGuardService }], propDecorators: { body: [{
                 type: ViewChild,
                 args: ['body']
             }], infoBanners: [{
@@ -18356,6 +18441,111 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                 args: ['data-test-id']
             }] } });
 
+/**
+ * @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>
+ */
+class PendingChangesGuardDirective {
+    ngForm;
+    formGroupDirective;
+    changeGuard;
+    statusSubscription;
+    initialValue;
+    formGroup;
+    constructor(ngForm, formGroupDirective, changeGuard) {
+        this.ngForm = ngForm;
+        this.formGroupDirective = formGroupDirective;
+        this.changeGuard = changeGuard;
+        if (!this.ngForm && !this.formGroupDirective) {
+            console.error('QD-UI | QdPendingChangesGuardDirective - requires NgForm or FormGroupDirective to be present on the host element.');
+        }
+    }
+    ngOnInit() {
+        this.formGroup = this.ngForm?.form || this.formGroupDirective?.form;
+        if (this.formGroup) {
+            this.initialValue = { ...this.formGroup.value };
+            this.updateStatus();
+            this.statusSubscription = this.formGroup.valueChanges.subscribe(() => {
+                this.updateStatus();
+            });
+        }
+    }
+    updateStatus() {
+        if (!this.formGroup)
+            return;
+        const isPristine = isEqual(this.formGroup.value, this.initialValue);
+        const hasChanges = !isPristine;
+        this.changeGuard.setPendingChangesStatus(hasChanges);
+        if (isPristine && this.formGroup.dirty) {
+            this.formGroup.markAsPristine();
+        }
+    }
+    ngOnDestroy() {
+        this.statusSubscription?.unsubscribe();
+        this.changeGuard.setPendingChangesStatus(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PendingChangesGuardDirective, deps: [{ token: i1$4.NgForm, optional: true }, { token: i1$4.FormGroupDirective, optional: true }, { token: QdDialogChangeGuardService }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.15", type: PendingChangesGuardDirective, isStandalone: false, selector: "[qdPendingChangesGuard]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: PendingChangesGuardDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[qdPendingChangesGuard]',
+                    standalone: false
+                }]
+        }], ctorParameters: () => [{ type: i1$4.NgForm, decorators: [{
+                    type: Optional
+                }] }, { type: i1$4.FormGroupDirective, decorators: [{
+                    type: Optional
+                }] }, { type: QdDialogChangeGuardService }] });
+
+class QdCancelDialogComponent {
+    dialogRef;
+    i18n;
+    handler;
+    constructor(dialogRef) {
+        this.dialogRef = dialogRef;
+    }
+    ngOnInit() {
+        this.i18n =
+            this.dialogRef.config.data?.cancel?.confirmationMessage?.i18n ??
+                'i18n.qd.page.cancel.confirmation.dialog.message';
+        this.handler = this.dialogRef.config.data?.cancel?.handler;
+    }
+    close() {
+        this.dialogRef.close(false);
+    }
+    confirm() {
+        if (this.handler)
+            this.handler();
+        this.dialogRef.close(true);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdCancelDialogComponent, deps: [{ token: i1$1.DialogRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: QdCancelDialogComponent, isStandalone: false, selector: "qd-cancel-dialog", ngImport: i0, template: "<qd-dialog>\n  <qd-text-section>\n    <qd-text-section-paragraph>\n      {{ i18n | translate }}\n    </qd-text-section-paragraph>\n  </qd-text-section>\n\n  <qd-dialog-action>\n    <button\n      qdButton\n      qdButtonGhost\n      color=\"secondary\"\n      (click)=\"close()\"\n      data-test-id=\"dialog-cancel-confirmation-dialog-close\"\n    >\n      {{ \"i18n.qd.page.cancel.confirmation.dialog.close\" | translate }}\n    </button>\n\n    <button qdButton color=\"error\" (click)=\"confirm()\" data-test-id=\"dialog-cancel-confirmation-dialog-proceed\">\n      {{ \"i18n.qd.page.cancel.confirmation.dialog.proceed\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", dependencies: [{ kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdTextSectionComponent, selector: "qd-text-section" }, { kind: "component", type: QdTextSectionParagraphComponent, selector: "qd-text-section-paragraph" }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdCancelDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'qd-cancel-dialog', standalone: false, template: "<qd-dialog>\n  <qd-text-section>\n    <qd-text-section-paragraph>\n      {{ i18n | translate }}\n    </qd-text-section-paragraph>\n  </qd-text-section>\n\n  <qd-dialog-action>\n    <button\n      qdButton\n      qdButtonGhost\n      color=\"secondary\"\n      (click)=\"close()\"\n      data-test-id=\"dialog-cancel-confirmation-dialog-close\"\n    >\n      {{ \"i18n.qd.page.cancel.confirmation.dialog.close\" | translate }}\n    </button>\n\n    <button qdButton color=\"error\" (click)=\"confirm()\" data-test-id=\"dialog-cancel-confirmation-dialog-proceed\">\n      {{ \"i18n.qd.page.cancel.confirmation.dialog.proceed\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n" }]
+        }], ctorParameters: () => [{ type: i1$1.DialogRef }] });
+
+var cancelDialog_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    QdCancelDialogComponent: QdCancelDialogComponent
+});
+
 class QdDialogModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.15", ngImport: i0, type: QdDialogModule, declarations: [QdDialogActionComponent,
@@ -18366,7 +18556,9 @@ class QdDialogModule {
             QdDialogConfirmationInfoDirective,
             QdDialogConfirmationSuccessDirective,
             QdDialogRecordStepperComponent,
-            QdPageDialogWithBreadcrumbsComponent], imports: [CommonModule,
+            QdPageDialogWithBreadcrumbsComponent,
+            PendingChangesGuardDirective,
+            QdCancelDialogComponent], imports: [CommonModule,
             TranslateModule,
             RouterModule,
             DialogModule,
@@ -18383,7 +18575,8 @@ class QdDialogModule {
             QdDialogConfirmationComponent,
             QdDialogConfirmationErrorDirective,
             QdDialogConfirmationSuccessDirective,
-            QdDialogRecordStepperComponent] });
+            QdDialogRecordStepperComponent,
+            PendingChangesGuardDirective] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: QdDialogModule, imports: [CommonModule,
             TranslateModule,
             RouterModule,
@@ -18423,7 +18616,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         QdDialogConfirmationInfoDirective,
                         QdDialogConfirmationSuccessDirective,
                         QdDialogRecordStepperComponent,
-                        QdPageDialogWithBreadcrumbsComponent
+                        QdPageDialogWithBreadcrumbsComponent,
+                        PendingChangesGuardDirective,
+                        QdCancelDialogComponent
                     ],
                     exports: [
                         QdDialogActionComponent,
@@ -18432,7 +18627,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
                         QdDialogConfirmationComponent,
                         QdDialogConfirmationErrorDirective,
                         QdDialogConfirmationSuccessDirective,
-                        QdDialogRecordStepperComponent
+                        QdDialogRecordStepperComponent,
+                        PendingChangesGuardDirective
                     ]
                 }]
         }] });
@@ -23204,9 +23400,7 @@ class QdTableResolverService {
         // TODO: Add Error handling
         this.tableStoreService
             .selectDataResolutionCriteria$()
-            .pipe(takeUntil(this._destroyed$), distinctUntilChanged(isEqual$1), filter((resolutionCriteria) => {
-            return !!resolutionCriteria && this.shouldDataBeResolved(resolutionCriteria);
-        }), map(({ tableParams, connectorParams }) => {
+            .pipe(takeUntil(this._destroyed$), distinctUntilChanged(isEqual$1), filter((resolutionCriteria) => !!resolutionCriteria && this.shouldDataBeResolved(resolutionCriteria)), map(({ tableParams, connectorParams }) => {
             return {
                 ...(this._hasPagination ? tableParams : {}),
                 ...connectorParams
@@ -23224,7 +23418,7 @@ class QdTableResolverService {
             this._refreshSubscription.unsubscribe();
         this._refreshSubscription = this.tableStoreService
             .selectDataResolutionCriteria$()
-            .pipe(first(), tap(() => this.tableStoreService.setRequestState(QdTableRequestState.PENDING)), switchMap(resolutionCriteria => this.tableDataResolver.resolve({
+            .pipe(filter((criteria) => !!criteria), first(), tap(() => this.tableStoreService.setRequestState(QdTableRequestState.PENDING)), switchMap(resolutionCriteria => this.tableDataResolver.resolve({
             ...resolutionCriteria.tableParams,
             ...resolutionCriteria.connectorParams,
             ...(this._hasPagination && pageIndex !== undefined ? { page: pageIndex } : {})
@@ -24508,11 +24702,11 @@ class QdTableComponent {
     }
     ngOnInit() {
         this.tableStoreService.tableId = this.config.uid || v4();
-        this.resolverService.init(this.config.refreshOnLanguageChange, this.hasPagination);
         this.tableStoreService.init();
         this.tableStoreService.initTableState(this._data, this.hasResolver, this._connectors, this.hasPagination);
         this.tableStoreService.updateTableStateRecentSecondaryAction(undefined);
         this.tableStoreService.setupSort(this.config.columns);
+        this.resolverService.init(this.config.refreshOnLanguageChange, this.hasPagination);
         this.data$ = this.tableStoreService.tableDataEntries$();
         this.mapColumnFillsWidth();
         this.validateConfig();
@@ -31403,11 +31597,11 @@ class AddCommentDialogComponent {
         };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddCommentDialogComponent, deps: [{ token: i1$1.DialogRef }, { token: 'QdAuthenticationService', optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AddCommentDialogComponent, isStandalone: false, selector: "qd-comment-dialog", ngImport: i0, template: "<qd-dialog>\n  <form [formGroup]=\"form\">\n    <qd-input [config]=\"authorInputConfig\"></qd-input>\n    <qd-dropdown *ngIf=\"customInputConfig\" [config]=\"customInputConfig\" [formControlName]=\"'custom'\"\n                 [attr.data-test-id]=\"'comment-custom'\"></qd-dropdown>\n\n    <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n    <div *ngIf=\"form.get('comment')?.touched && form.get('comment')?.errors as errors\">\n      <div *ngFor=\"let errorKey of objectKeys(errors)\" [attr.data-test-id]=\"'comment-validation-' + errorKey\"\n           class=\"validation-message\">\n        {{ errors[errorKey] | translate }}\n      </div>\n    </div>\n\n    <qd-dialog-action>\n      <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n        {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n      </button>\n      <button [disabled]=\"!commentText.value || commentText.hasError\"\n        qdButton (click)=\"close('Yes')\" [data-test-id]=\"'button-submit'\">\n        {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n      </button>\n    </qd-dialog-action>\n  </form>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdRichtextComponent, selector: "qd-richtext", inputs: ["formControlName", "value", "config", "data-test-id"], outputs: ["valueChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.15", type: AddCommentDialogComponent, isStandalone: false, selector: "qd-comment-dialog", ngImport: i0, template: "<qd-dialog>\n  <form [formGroup]=\"form\">\n    <qd-input [config]=\"authorInputConfig\"></qd-input>\n    <qd-dropdown\n      *ngIf=\"customInputConfig\"\n      [config]=\"customInputConfig\"\n      [formControlName]=\"'custom'\"\n      [attr.data-test-id]=\"'comment-custom'\"\n    ></qd-dropdown>\n\n    <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n    <div *ngIf=\"form.get('comment')?.touched && form.get('comment')?.errors as errors\">\n      <div\n        *ngFor=\"let errorKey of objectKeys(errors)\"\n        [attr.data-test-id]=\"'comment-validation-' + errorKey\"\n        class=\"validation-message\"\n      >\n        {{ errors[errorKey] | translate }}\n      </div>\n    </div>\n  </form>\n  <qd-dialog-action>\n    <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n      {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n    </button>\n    <button\n      [disabled]=\"!commentText.value || commentText.hasError\"\n      qdButton\n      (click)=\"close('Yes')\"\n      [data-test-id]=\"'button-submit'\"\n    >\n      {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QdButtonComponent, selector: "button[qdButton], a[qdButton], button[qd-button]", inputs: ["disabled", "color", "icon", "data-test-id", "additionalInfo"] }, { kind: "directive", type: QdButtonGhostDirective, selector: "button[qdButtonGhost], a[qdButtonGhost]" }, { kind: "component", type: QdDropdownComponent, selector: "qd-dropdown", inputs: ["value", "id", "formControlName", "config", "data-test-id", "qdPopoverMaxHeight", "dense"], outputs: ["valueChange", "enterClick", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdInputComponent, selector: "qd-input", inputs: ["formControlName", "value", "config", "isError", "data-test-id"], outputs: ["valueChange", "enterClick", "clickClear", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdRichtextComponent, selector: "qd-richtext", inputs: ["formControlName", "value", "config", "data-test-id"], outputs: ["valueChange", "clickHint", "clickReadonly", "clickViewonly"] }, { kind: "component", type: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "directive", type: i1$4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImport: i0, type: AddCommentDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-comment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-dialog>\n  <form [formGroup]=\"form\">\n    <qd-input [config]=\"authorInputConfig\"></qd-input>\n    <qd-dropdown *ngIf=\"customInputConfig\" [config]=\"customInputConfig\" [formControlName]=\"'custom'\"\n                 [attr.data-test-id]=\"'comment-custom'\"></qd-dropdown>\n\n    <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n    <div *ngIf=\"form.get('comment')?.touched && form.get('comment')?.errors as errors\">\n      <div *ngFor=\"let errorKey of objectKeys(errors)\" [attr.data-test-id]=\"'comment-validation-' + errorKey\"\n           class=\"validation-message\">\n        {{ errors[errorKey] | translate }}\n      </div>\n    </div>\n\n    <qd-dialog-action>\n      <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n        {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n      </button>\n      <button [disabled]=\"!commentText.value || commentText.hasError\"\n        qdButton (click)=\"close('Yes')\" [data-test-id]=\"'button-submit'\">\n        {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n      </button>\n    </qd-dialog-action>\n  </form>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"] }]
+            args: [{ selector: 'qd-comment-dialog', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<qd-dialog>\n  <form [formGroup]=\"form\">\n    <qd-input [config]=\"authorInputConfig\"></qd-input>\n    <qd-dropdown\n      *ngIf=\"customInputConfig\"\n      [config]=\"customInputConfig\"\n      [formControlName]=\"'custom'\"\n      [attr.data-test-id]=\"'comment-custom'\"\n    ></qd-dropdown>\n\n    <qd-richtext [config]=\"richtextConfig\" #commentText [formControlName]=\"'comment'\"> </qd-richtext>\n    <div *ngIf=\"form.get('comment')?.touched && form.get('comment')?.errors as errors\">\n      <div\n        *ngFor=\"let errorKey of objectKeys(errors)\"\n        [attr.data-test-id]=\"'comment-validation-' + errorKey\"\n        class=\"validation-message\"\n      >\n        {{ errors[errorKey] | translate }}\n      </div>\n    </div>\n  </form>\n  <qd-dialog-action>\n    <button qdButton qdButtonGhost color=\"secondary\" (click)=\"close()\" [data-test-id]=\"'button-cancel'\">\n      {{ \"i18n.qd.comments.add.dialog.cancel\" | translate }}\n    </button>\n    <button\n      [disabled]=\"!commentText.value || commentText.hasError\"\n      qdButton\n      (click)=\"close('Yes')\"\n      [data-test-id]=\"'button-submit'\"\n    >\n      {{ \"i18n.qd.comments.add.dialog.submit\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [".validation-message{margin-top:4px;color:red;font-size:.875em}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.DialogRef }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -32963,5 +33157,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { APP_ENVIRONMENT, AVAILABLE_ICONS, BACKEND_ERROR_CODES, MockLocaleDatePipe, NavigationTileComponent, NavigationTilesComponent, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QD_FILE_MANAGER_TOKEN, QD_FILE_UPLOAD_MANAGER_TOKEN, QD_FORM_OPTIONS_RESOLVER, QD_PAGE_OBJECT_RESOLVER_TOKEN, QD_PAGE_STEP_RESOLVER_TOKEN, QD_POPOVER_TOP_FIRST, QD_SAFE_BOTTOM_OFFSET, QD_TABLE_DATA_RESOLVER_TOKEN, QD_UPLOAD_HTTP_OPTIONS, QdButtonComponent, QdButtonGhostDirective, QdButtonGridComponent, QdButtonLinkDirective, QdButtonModule, QdButtonStackButtonComponent, QdButtonStackComponent, QdCheckboxChipsComponent, QdCheckboxComponent, QdCheckboxesComponent, QdChipComponent, QdChipModule, QdColumnAutoFillDirective, QdColumnBreakBeforeDirective, QdColumnDirective, QdColumnDisableResponsiveColspansDirective, QdColumnFullGridWidthDirective, QdColumnNextInSameRowDirective, QdColumnsDirective, QdColumnsDisableAutoFillDirective, QdColumnsDisableResponsiveColspansDirective, QdColumnsMaxDirective, QdCommentsComponent, QdCommentsModule, QdConnectFormStateToPageDirective, QdConnectorTableContextDirective, QdConnectorTableFilterDirective, QdConnectorTableSearchDirective, QdContactCardComponent, QdContactCardModule, QdContainerPairsCaptionComponent, QdContainerPairsContainerComponent, QdContainerPairsHeaderComponent, QdContainerPairsItemComponent, QdContainerPairsValueComponent, QdContextService, QdCoreModule, QdDatepickerComponent, QdDialogActionComponent, QdDialogAuthSessionEndComponent, QdDialogAuthSessionEndService, QdDialogComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogModule, QdDialogRecordStepperComponent, QdDialogService, QdDialogSize, QdDisabledDirective, QdDropdownComponent, QdFileCollectorComponent, QdFileCollectorModule, QdFileSizePipe$1 as QdFileSizePipe, QdFileUploadComponent, QdFileUploadService, QdFilterComponent, QdFilterFormItemsComponent, QdFilterModule, QdFilterRestParamBuilder, QdFilterService, QdFormArray, QdFormBuilder, QdFormControl, QdFormGroup, QdFormModule, QdGridComponent, QdGridModule, QdHorizontalPairsCaptionComponent, QdHorizontalPairsComponent, QdHorizontalPairsItemComponent, QdHorizontalPairsValueComponent, QdIconButtonComponent, QdIconComponent, QdIconModule, QdImageComponent, QdImageModule, QdIndeterminateProgressBarComponent, QdInputComponent, QdListModule, QdMenuButtonComponent, QdMockBreakpointService, QdMockButtonComponent, QdMockButtonGhostDirective, QdMockButtonGridComponent, QdMockButtonLinkDirective, QdMockButtonModule, QdMockButtonStackButtonComponent, QdMockButtonStackComponent, QdMockCalendarComponent, QdMockCheckboxChipsComponent, QdMockCheckboxComponent, QdMockCheckboxesComponent, QdMockChipComponent, QdMockChipModule, QdMockColumnDirective, QdMockColumnsDirective, QdMockContactCardComponent, QdMockContactCardModule, QdMockContainerPairsCaptionComponent, QdMockContainerPairsContainerComponent, QdMockContainerPairsHeaderComponent, QdMockContainerPairsItemComponent, QdMockContainerPairsValueComponent, QdMockCoreModule, QdMockCounterBadgeComponent, QdMockDatepickerComponent, QdMockDisabledDirective, QdMockDropdownComponent, QdMockFileCollectorComponent, QdMockFileCollectorModule, QdMockFilterCategoryBooleanComponent, QdMockFilterCategoryComponent, QdMockFilterCategoryDateComponent, QdMockFilterCategoryDateRangeComponent, QdMockFilterCategoryFreeTextComponent, QdMockFilterCategorySelectComponent, QdMockFilterComponent, QdMockFilterFormItemsComponent, QdMockFilterItemBooleanComponent, QdMockFilterItemDateComponent, QdMockFilterItemDateRangeComponent, QdMockFilterItemFreeTextComponent, QdMockFilterItemMultiSelectComponent, QdMockFilterItemSingleSelectComponent, QdMockFilterModule, QdMockFilterService, QdMockFormErrorComponent, QdMockFormGroupErrorComponent, QdMockFormHintComponent, QdMockFormLabelComponent, QdMockFormReadonlyComponent, QdMockFormViewonlyComponent, QdMockFormsModule, QdMockGridModule, QdMockIconButtonComponent, QdMockIconComponent, QdMockIconModule, QdMockImageComponent, QdMockImageModule, QdMockIndeterminateProgressBarComponent, QdMockInputComponent, QdMockListModule, QdMockNavigationTileComponent, QdMockNavigationTilesComponent, QdMockNavigationTilesModule, QdMockNotificationComponent, QdMockNotificationContentComponent, QdMockNotificationsComponent, QdMockNotificationsModule, QdMockNotificationsService, QdMockPageComponent, QdMockPageModule, QdMockPercentageProgressBarComponent, QdMockPinCodeComponent, QdMockPlaceHolderModule, QdMockPopoverOnClickDirective, QdMockProgressBarModule, QdMockQdPlaceHolderComponent, QdMockRadioButtonsComponent, QdMockRwdDisabledDirective, QdMockSearchComponent, QdMockSearchModule, QdMockSectionComponent, QdMockSectionModule, QdMockShellComponent, QdMockShellFooterComponent, QdMockShellHeaderBannerComponent, QdMockShellHeaderComponent, QdMockShellHeaderSearchComponent, QdMockShellHeaderWidgetComponent, QdMockShellModule, QdMockShellToolbarComponent, QdMockShellToolbarItemComponent, QdMockStatusIndicatorCaptionComponent, QdMockStatusIndicatorComponent, QdMockStatusIndicatorItemComponent, QdMockStatusIndicatorModule, QdMockStatusPairsCaptionComponent, QdMockStatusPairsComponent, QdMockStatusPairsErrorComponent, QdMockStatusPairsItemComponent, QdMockStatusPairsValueComponent, QdMockSwitchComponent, QdMockSwitchesComponent, QdMockTableComponent, QdMockTableModule, QdMockTextSectionComponent, QdMockTextSectionHeadlineComponent, QdMockTextSectionModule, QdMockTextSectionParagraphComponent, QdMockTextareaComponent, QdMockTileButtonListComponent, QdMockTileComponent, QdMockTileTextListComponent, QdMockTileTextListItemComponent, QdMockTileTitleComponent, QdMockTilesContainerComponent, QdMockTilesContainerTitleComponent, QdMockTilesModule, QdMockTranslatePipe, QdMockVisuallyHiddenDirective, QdMultiInputComponent, QdNavigationTilesModule, QdNotificationComponent, QdNotificationContentComponent, QdNotificationsComponent, QdNotificationsHttpInterceptorService, QdNotificationsModule, QdNotificationsService, QdNotificationsSnackbarListenerDirective, QdPageComponent, QdPageControlPanelComponent, QdPageFooterComponent, QdPageFooterCustomContentDirective, QdPageInfoBannerComponent, QdPageModule, QdPageStepComponent, QdPageStepperAdapterDirective, QdPageStepperComponent, QdPageStepperModule, QdPageStoreService, QdPageTabComponent, QdPageTabsAdapterDirective, QdPageTabsComponent, QdPageTabsModule, QdPanelSectionActionsComponent, QdPanelSectionComponent, QdPanelSectionModule, QdPanelSectionStatusComponent, QdPanelSectionTextParagraphComponent, QdPercentageProgressBarComponent, QdPinCodeComponent, QdPlaceHolderComponent, QdPlaceHolderModule, QdPlaceholderPipe, QdProgressBarModule, QdProjectionGuardComponent, QdPushEventsService, QdQuickEditComponent, QdQuickEditModule, QdRadioButtonsComponent, QdRichtextComponent, QdRwdDisabledDirective, QdSearchComponent, QdSearchModule, QdSectionAdapterDirective, QdSectionComponent, QdSectionModule, QdSectionToolbarComponent, QdShellComponent, QdShellModule, QdSortDirection, QdSpinnerComponent, QdSpinnerModule, QdStatusIndicatorComponent, QdStatusIndicatorModule, QdStatusPairsCaptionComponent, QdStatusPairsComponent, QdStatusPairsErrorComponent, QdStatusPairsItemComponent, QdStatusPairsValueComponent, QdSubgridComponent, QdSwitchComponent, QdSwitchesComponent, QdTableComponent, QdTableModule, QdTableSpringTools, QdTextSectionComponent, QdTextSectionHeadlineComponent, QdTextSectionModule, QdTextSectionParagraphComponent, QdTextareaComponent, QdTileButtonListComponent, QdTileComponent, QdTileTextListComponent, QdTileTextListItemComponent, QdTileTitleComponent, QdTilesComponent, QdTilesModule, QdTilesTitleComponent, QdTooltipAtIntersectionDirective, QdTreeComponent, QdTreeModule, QdTreeRowExpanderService, QdUiMockModule, QdUiModule, QdUploadErrorType, QdValidators, QdViewportAdaptiveDirective, QdVisuallyHiddenDirective, chipColorDefault, updateHtmlLang };
+export { APP_ENVIRONMENT, AVAILABLE_ICONS, BACKEND_ERROR_CODES, MockLocaleDatePipe, NavigationTileComponent, NavigationTilesComponent, PendingChangesGuardDirective, QD_DIALOG_CONFIRMATION_RESOLVER_TOKEN, QD_FILE_MANAGER_TOKEN, QD_FILE_UPLOAD_MANAGER_TOKEN, QD_FORM_OPTIONS_RESOLVER, QD_PAGE_OBJECT_RESOLVER_TOKEN, QD_PAGE_STEP_RESOLVER_TOKEN, QD_POPOVER_TOP_FIRST, QD_SAFE_BOTTOM_OFFSET, QD_TABLE_DATA_RESOLVER_TOKEN, QD_UPLOAD_HTTP_OPTIONS, QdButtonComponent, QdButtonGhostDirective, QdButtonGridComponent, QdButtonLinkDirective, QdButtonModule, QdButtonStackButtonComponent, QdButtonStackComponent, QdCheckboxChipsComponent, QdCheckboxComponent, QdCheckboxesComponent, QdChipComponent, QdChipModule, QdColumnAutoFillDirective, QdColumnBreakBeforeDirective, QdColumnDirective, QdColumnDisableResponsiveColspansDirective, QdColumnFullGridWidthDirective, QdColumnNextInSameRowDirective, QdColumnsDirective, QdColumnsDisableAutoFillDirective, QdColumnsDisableResponsiveColspansDirective, QdColumnsMaxDirective, QdCommentsComponent, QdCommentsModule, QdConnectFormStateToPageDirective, QdConnectorTableContextDirective, QdConnectorTableFilterDirective, QdConnectorTableSearchDirective, QdContactCardComponent, QdContactCardModule, QdContainerPairsCaptionComponent, QdContainerPairsContainerComponent, QdContainerPairsHeaderComponent, QdContainerPairsItemComponent, QdContainerPairsValueComponent, QdContextService, QdCoreModule, QdDatepickerComponent, QdDialogActionComponent, QdDialogAuthSessionEndComponent, QdDialogAuthSessionEndService, QdDialogComponent, QdDialogConfirmationComponent, QdDialogConfirmationErrorDirective, QdDialogConfirmationInfoDirective, QdDialogConfirmationSuccessDirective, QdDialogModule, QdDialogRecordStepperComponent, QdDialogService, QdDialogSize, QdDisabledDirective, QdDropdownComponent, QdFileCollectorComponent, QdFileCollectorModule, QdFileSizePipe$1 as QdFileSizePipe, QdFileUploadComponent, QdFileUploadService, QdFilterComponent, QdFilterFormItemsComponent, QdFilterModule, QdFilterRestParamBuilder, QdFilterService, QdFormArray, QdFormBuilder, QdFormControl, QdFormGroup, QdFormModule, QdGridComponent, QdGridModule, QdHorizontalPairsCaptionComponent, QdHorizontalPairsComponent, QdHorizontalPairsItemComponent, QdHorizontalPairsValueComponent, QdIconButtonComponent, QdIconComponent, QdIconModule, QdImageComponent, QdImageModule, QdIndeterminateProgressBarComponent, QdInputComponent, QdListModule, QdMenuButtonComponent, QdMockBreakpointService, QdMockButtonComponent, QdMockButtonGhostDirective, QdMockButtonGridComponent, QdMockButtonLinkDirective, QdMockButtonModule, QdMockButtonStackButtonComponent, QdMockButtonStackComponent, QdMockCalendarComponent, QdMockCheckboxChipsComponent, QdMockCheckboxComponent, QdMockCheckboxesComponent, QdMockChipComponent, QdMockChipModule, QdMockColumnDirective, QdMockColumnsDirective, QdMockContactCardComponent, QdMockContactCardModule, QdMockContainerPairsCaptionComponent, QdMockContainerPairsContainerComponent, QdMockContainerPairsHeaderComponent, QdMockContainerPairsItemComponent, QdMockContainerPairsValueComponent, QdMockCoreModule, QdMockCounterBadgeComponent, QdMockDatepickerComponent, QdMockDisabledDirective, QdMockDropdownComponent, QdMockFileCollectorComponent, QdMockFileCollectorModule, QdMockFilterCategoryBooleanComponent, QdMockFilterCategoryComponent, QdMockFilterCategoryDateComponent, QdMockFilterCategoryDateRangeComponent, QdMockFilterCategoryFreeTextComponent, QdMockFilterCategorySelectComponent, QdMockFilterComponent, QdMockFilterFormItemsComponent, QdMockFilterItemBooleanComponent, QdMockFilterItemDateComponent, QdMockFilterItemDateRangeComponent, QdMockFilterItemFreeTextComponent, QdMockFilterItemMultiSelectComponent, QdMockFilterItemSingleSelectComponent, QdMockFilterModule, QdMockFilterService, QdMockFormErrorComponent, QdMockFormGroupErrorComponent, QdMockFormHintComponent, QdMockFormLabelComponent, QdMockFormReadonlyComponent, QdMockFormViewonlyComponent, QdMockFormsModule, QdMockGridModule, QdMockIconButtonComponent, QdMockIconComponent, QdMockIconModule, QdMockImageComponent, QdMockImageModule, QdMockIndeterminateProgressBarComponent, QdMockInputComponent, QdMockListModule, QdMockNavigationTileComponent, QdMockNavigationTilesComponent, QdMockNavigationTilesModule, QdMockNotificationComponent, QdMockNotificationContentComponent, QdMockNotificationsComponent, QdMockNotificationsModule, QdMockNotificationsService, QdMockPageComponent, QdMockPageModule, QdMockPercentageProgressBarComponent, QdMockPinCodeComponent, QdMockPlaceHolderModule, QdMockPopoverOnClickDirective, QdMockProgressBarModule, QdMockQdPlaceHolderComponent, QdMockRadioButtonsComponent, QdMockRwdDisabledDirective, QdMockSearchComponent, QdMockSearchModule, QdMockSectionComponent, QdMockSectionModule, QdMockShellComponent, QdMockShellFooterComponent, QdMockShellHeaderBannerComponent, QdMockShellHeaderComponent, QdMockShellHeaderSearchComponent, QdMockShellHeaderWidgetComponent, QdMockShellModule, QdMockShellToolbarComponent, QdMockShellToolbarItemComponent, QdMockStatusIndicatorCaptionComponent, QdMockStatusIndicatorComponent, QdMockStatusIndicatorItemComponent, QdMockStatusIndicatorModule, QdMockStatusPairsCaptionComponent, QdMockStatusPairsComponent, QdMockStatusPairsErrorComponent, QdMockStatusPairsItemComponent, QdMockStatusPairsValueComponent, QdMockSwitchComponent, QdMockSwitchesComponent, QdMockTableComponent, QdMockTableModule, QdMockTextSectionComponent, QdMockTextSectionHeadlineComponent, QdMockTextSectionModule, QdMockTextSectionParagraphComponent, QdMockTextareaComponent, QdMockTileButtonListComponent, QdMockTileComponent, QdMockTileTextListComponent, QdMockTileTextListItemComponent, QdMockTileTitleComponent, QdMockTilesContainerComponent, QdMockTilesContainerTitleComponent, QdMockTilesModule, QdMockTranslatePipe, QdMockVisuallyHiddenDirective, QdMultiInputComponent, QdNavigationTilesModule, QdNotificationComponent, QdNotificationContentComponent, QdNotificationsComponent, QdNotificationsHttpInterceptorService, QdNotificationsModule, QdNotificationsService, QdNotificationsSnackbarListenerDirective, QdPageComponent, QdPageControlPanelComponent, QdPageFooterComponent, QdPageFooterCustomContentDirective, QdPageInfoBannerComponent, QdPageModule, QdPageStepComponent, QdPageStepperAdapterDirective, QdPageStepperComponent, QdPageStepperModule, QdPageStoreService, QdPageTabComponent, QdPageTabsAdapterDirective, QdPageTabsComponent, QdPageTabsModule, QdPanelSectionActionsComponent, QdPanelSectionComponent, QdPanelSectionModule, QdPanelSectionStatusComponent, QdPanelSectionTextParagraphComponent, QdPercentageProgressBarComponent, QdPinCodeComponent, QdPlaceHolderComponent, QdPlaceHolderModule, QdPlaceholderPipe, QdProgressBarModule, QdProjectionGuardComponent, QdPushEventsService, QdQuickEditComponent, QdQuickEditModule, QdRadioButtonsComponent, QdRichtextComponent, QdRwdDisabledDirective, QdSearchComponent, QdSearchModule, QdSectionAdapterDirective, QdSectionComponent, QdSectionModule, QdSectionToolbarComponent, QdShellComponent, QdShellModule, QdSortDirection, QdSpinnerComponent, QdSpinnerModule, QdStatusIndicatorComponent, QdStatusIndicatorModule, QdStatusPairsCaptionComponent, QdStatusPairsComponent, QdStatusPairsErrorComponent, QdStatusPairsItemComponent, QdStatusPairsValueComponent, QdSubgridComponent, QdSwitchComponent, QdSwitchesComponent, QdTableComponent, QdTableModule, QdTableSpringTools, QdTextSectionComponent, QdTextSectionHeadlineComponent, QdTextSectionModule, QdTextSectionParagraphComponent, QdTextareaComponent, QdTileButtonListComponent, QdTileComponent, QdTileTextListComponent, QdTileTextListItemComponent, QdTileTitleComponent, QdTilesComponent, QdTilesModule, QdTilesTitleComponent, QdTooltipAtIntersectionDirective, QdTreeComponent, QdTreeModule, QdTreeRowExpanderService, QdUiMockModule, QdUiModule, QdUploadErrorType, QdValidators, QdViewportAdaptiveDirective, QdVisuallyHiddenDirective, chipColorDefault, updateHtmlLang };
 //# sourceMappingURL=quadrel-enterprise-ui-framework.mjs.map