@quadrel-enterprise-ui/framework 20.8.0 → 20.9.1-beta.137.1

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

@@ -1146,18 +1146,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
+const GENERIC_DEFAULTS = {
+    title: { i18n: 'i18n.qd.dialog.confirm.title' },
+    confirm: { i18n: 'i18n.qd.dialog.confirm.proceed' },
+    cancel: { i18n: 'i18n.qd.dialog.action.cancel' }
+};
+const CANCEL_DEFAULTS = {
+    title: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.title' },
+    message: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.message' },
+    confirm: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.proceed' },
+    cancel: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.close' }
+};
 class QdConfirmationDialogOpenerService {
     dialog = inject(Dialog);
-    showCancelConfirmation(config) {
-        return from(Promise.resolve().then(function () { return cancelDialog_component; }).then(m => m.QdCancelDialogComponent)).pipe(switchMap(component => {
+    showConfirmDialog(config, testId = 'dialog-confirm') {
+        const resolved = {
+            title: config.title ?? GENERIC_DEFAULTS.title,
+            message: config.message,
+            confirm: config.confirm ?? GENERIC_DEFAULTS.confirm,
+            cancel: config.cancel ?? GENERIC_DEFAULTS.cancel
+        };
+        return from(import('./quadrel-enterprise-ui-framework-dialog-confirm.module-BQLiEzSo.mjs').then(m => m.QdDialogConfirmComponent)).pipe(switchMap(component => {
             const dialogRef = this.open(component, {
-                title: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.title' },
+                title: resolved.title,
                 dialogSize: QdDialogSize.Small,
-                data: config
+                data: { ...resolved, testId }
             });
             return dialogRef.closed.pipe(map$1(result => !!result));
         }));
     }
+    showDiscardConfirmDialog(message, testId = 'cancel-confirmation') {
+        return this.showConfirmDialog({
+            title: CANCEL_DEFAULTS.title,
+            message: message ?? CANCEL_DEFAULTS.message,
+            confirm: CANCEL_DEFAULTS.confirm,
+            cancel: CANCEL_DEFAULTS.cancel
+        }, testId);
+    }
     open(component, config) {
         config.panelClass = 'qd-custom-panel';
         config.width = config.dialogSize || QdDialogSize.Default;
@@ -1470,7 +1495,7 @@ class QdDialogComponent {
     }
     confirmAndClose() {
         this.dialog
-            .showCancelConfirmation(this.config)
+            .showDiscardConfirmDialog(this.config.cancel?.confirmationMessage, 'dialog-cancel-confirmation')
             .pipe(take(1))
             .subscribe(confirmed => {
             if (!confirmed)
@@ -9186,7 +9211,7 @@ class QdDateAdapter {
     static parseToDate(formatted) {
         if (!formatted)
             return new Date();
-        return moment(formatted, 'l', 'de').toDate();
+        return moment(formatted, 'DD.MM.YYYY').toDate();
     }
     /**
      * Converts a localized Swiss date and time string into a JavaScript Date object.
@@ -9206,9 +9231,9 @@ class QdDateAdapter {
             return new Date(new Date().setHours(hours, minutes, 0, 0));
         }
         else if (date && !time) {
-            return moment(date, 'l', 'de').toDate();
+            return moment(date, 'DD.MM.YYYY').toDate();
         }
-        let format = 'l ';
+        let format = 'DD.MM.YYYY ';
         switch (time.length) {
             case 8:
                 format = format + 'HH:mm:ss';
@@ -9217,14 +9242,14 @@ class QdDateAdapter {
             default:
                 format = format + 'HH:mm';
         }
-        return moment(`${date} ${time}`, format, 'de').toDate();
+        return moment(`${date} ${time}`, format).toDate();
     }
     /**
      * Converts a localized date string into a Moment.js object.
      * If the input is null or undefined, it returns undefined.
      */
     static parseToMoment(formatted) {
-        return formatted ? moment(formatted, 'l', 'de').locale('de') : undefined;
+        return formatted ? moment(formatted, 'DD.MM.YYYY').locale('de') : undefined;
     }
     /**
      * Formats a Moment.js object into a localized date string.
@@ -9233,7 +9258,7 @@ class QdDateAdapter {
     static formatToLocalizedDateString(momentObj) {
         if (!momentObj)
             return '';
-        return momentObj.locale('de').format('L');
+        return momentObj.format('DD.MM.YYYY');
     }
     /**
      * Formats a JavaScript Date object into a localized date string.
@@ -9258,7 +9283,7 @@ class QdDateAdapter {
      * Returns true if the date is valid, otherwise false.
      */
     static isLocalizedDateStringValid(formatted) {
-        return moment(formatted, 'L', 'de', true).isValid();
+        return moment(formatted, 'DD.MM.YYYY', true).isValid();
     }
     /**
      * Validates if a date-time string matches the Swiss `DD.MM.YYYY HH:mm:ss` format.
@@ -9314,9 +9339,8 @@ class QdCalendarComponent {
         this.setWeekdays();
         this.todayDate = moment();
         this.months = moment.months();
-        this.years = this.getYears((QdDateAdapter.parseToMoment(this.selectedDate)?.isValid()
-            ? moment(this.selectedDate, 'L', this.language)
-            : this.todayDate).year());
+        const parsedSelected = QdDateAdapter.parseToMoment(this.selectedDate);
+        this.years = this.getYears((parsedSelected?.isValid() ? parsedSelected : this.todayDate).year());
         this.setCurrentDate();
         this.generateCalendar(this.currentDate);
     }
@@ -9406,9 +9430,8 @@ class QdCalendarComponent {
         return this.todayDate.isSame(momentObj, 'day');
     }
     setCurrentDate() {
-        const currentDate = (this.currentDate = QdDateAdapter.parseToMoment(this.selectedDate)?.isValid()
-            ? moment(this.selectedDate, 'L', 'de')
-            : this.todayDate);
+        const parsedDate = QdDateAdapter.parseToMoment(this.selectedDate);
+        const currentDate = (this.currentDate = parsedDate?.isValid() ? parsedDate : this.todayDate);
         this.currentDate = currentDate;
         this.selectedDate = QdDateAdapter.formatToLocalizedDateString(currentDate);
     }
@@ -10970,6 +10993,7 @@ class QdInputComponent {
     hasAutofocus;
     hasOptions = false;
     _value = { value: '' };
+    _displayValue = '';
     control;
     _optionsResolver;
     _subs = new Subscription();
@@ -11039,6 +11063,7 @@ class QdInputComponent {
     }
     writeValue(value) {
         this._value = getValueWithUnit(value, this.config);
+        this._displayValue = String(this._value.value ?? '');
     }
     setDisabledState(disabled) {
         this.disabled = disabled;
@@ -11169,7 +11194,7 @@ class QdInputComponent {
                 provide: QD_FOCUSABLE_TOKEN,
                 useExisting: QdInputComponent
             }
-        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _value.value\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"inputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
+        ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"inputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: QdAutofocusDirective, selector: "[qdAutofocus]", inputs: ["qdAutofocus"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "component", type: QdFormHintComponent, selector: "qd-form-hint", inputs: ["hint", "control", "hasError", "hintAction", "data-test-id"] }, { kind: "component", type: QdFormLabelComponent, selector: "qd-form-label", inputs: ["label", "isDisabled", "readonly", "viewonly", "control", "tooltip", "data-test-id"] }, { kind: "component", type: QdFormReadonlyComponent, selector: "qd-form-readonly", inputs: ["values", "readonlyAction", "data-test-id"] }, { kind: "component", type: QdFormViewonlyComponent, selector: "qd-form-viewonly", inputs: ["values", "viewonlyAction", "data-test-id"] }, { kind: "component", type: QdInputUnitsComponent, selector: "qd-input-units", inputs: ["config", "unit"], outputs: ["unitChange", "opened", "closed"] }, { kind: "directive", type: QdInputOptionsDirective, selector: "[qdInputOptions]", inputs: ["value", "config"], outputs: ["enterClick", "optionSelected"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, decorators: [{
             type: Component,
@@ -11187,7 +11212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                             provide: QD_FOCUSABLE_TOKEN,
                             useExisting: QdInputComponent
                         }
-                    ], standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _value.value\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"inputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
+                    ], standalone: false, template: "<qd-form-label\n  [label]=\"label\"\n  [readonly]=\"readonly\"\n  [viewonly]=\"viewonly\"\n  [control]=\"control\"\n  [tooltip]=\"config?.tooltip\"\n  [data-test-id]=\"testId\"\n></qd-form-label>\n\n<ng-container *ngIf=\"!readonly && !viewonly && !hasOptions\">\n  <div class=\"qd-input-input\" (keydown.enter)=\"emitEnterClick()\">\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</ng-container>\n\n<div *ngIf=\"!readonly && !viewonly && hasOptions\">\n  <div\n    class=\"qd-input-input\"\n    qdInputOptions\n    [qdPopoverMinWidth]=\"200\"\n    [config]=\"config\"\n    [value]=\"_value.value\"\n    (optionSelected)=\"handleOptionSelected($event)\"\n    (enterClick)=\"emitEnterClick()\"\n  >\n    <!-- handle (enterClick) by options directive here because event has to be fired after selection -->\n    <ng-container *ngTemplateOutlet=\"inputBox\"></ng-container>\n  </div>\n\n  <span class=\"qd-input-character-counter\" *ngIf=\"hasMaxLength\">{{ numberOfCharacters }} / {{ maxLength }}</span>\n\n  <qd-form-hint\n    *ngIf=\"hint || hasError\"\n    [hint]=\"hint\"\n    [control]=\"control\"\n    [hasError]=\"hasError\"\n    [hintAction]=\"hintAction\"\n    [data-test-id]=\"testId\"\n  ></qd-form-hint>\n</div>\n\n<qd-form-readonly\n  *ngIf=\"readonly\"\n  [values]=\"valueAsList\"\n  [readonlyAction]=\"readonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-readonly>\n\n<qd-form-viewonly\n  *ngIf=\"viewonly\"\n  [values]=\"valueAsList\"\n  [viewonlyAction]=\"viewonlyAction\"\n  [data-test-id]=\"testId\"\n></qd-form-viewonly>\n\n<ng-template #inputBox>\n  <input\n    #input\n    [placeholder]=\"placeholder | translate\"\n    [value]=\"hasOptions ? (_value.value.toString() | translate) : _displayValue\"\n    (input)=\"handleInput($event)\"\n    (focus)=\"handleInputFocus()\"\n    (blur)=\"handleInputBlur()\"\n    [disabled]=\"disabled || readonly\"\n    [type]=\"inputType\"\n    [attr.inputmode]=\"inputMode\"\n    [qdAutofocus]=\"hasAutofocus\"\n    [attr.data-test-id]=\"testId + '-input'\"\n    [step]=\"config?.step\"\n    required\n  />\n  <div class=\"qd-input-suffix\">\n    <qd-icon *ngIf=\"hasError && !hasOnlyUnitsError\" class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n    <qd-icon *ngIf=\"clearable\" class=\"qd-input-clearable-icon\" icon=\"timesLarge\" (click)=\"clearInput()\"></qd-icon>\n    <ng-content select=\"[qdIconButton]\"></ng-content>\n  </div>\n  <qd-input-units\n    *ngIf=\"hasUnits\"\n    [unit]=\"_value.unit\"\n    [config]=\"config\"\n    (unitChange)=\"handleUnitChange($event)\"\n    (opened)=\"handleUnitsOpened()\"\n    (closed)=\"handleUnitsClosed()\"\n  ></qd-input-units>\n  <div class=\"qd-input-suffix\" *ngIf=\"hasError && hasOnlyUnitsError\">\n    <qd-icon class=\"qd-input-error-icon\" icon=\"exclamationCircleSolid\"></qd-icon>\n  </div>\n</ng-template>\n", styles: [":host{position:relative;display:block;width:100%;flex-direction:column;margin-bottom:.75rem}:host .qd-input-input{display:flex;overflow:hidden;height:2.25rem;align-items:center;padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(180,180,180);border-radius:0;margin-bottom:.375rem;background-color:#fff}:host .qd-input-input:hover,:host .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(23,23,23);border-radius:0}:host .qd-input-input input{overflow:hidden;width:100%;flex-grow:1;border:none;background-color:#fff;color:#171717;font-size:.875rem;line-height:1.875rem}:host .qd-input-input input:hover,:host .qd-input-input input:focus,:host .qd-input-input input:active{border:none;outline:none}:host .qd-input-input input::placeholder{color:#b4b4b4}:host .qd-input-input input:focus::placeholder{display:block;color:#b4b4b4}:host .qd-input-input .qd-input-suffix{display:flex;align-items:center;margin-left:.75rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon{padding-right:.5rem;color:#c70023}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-error-icon+.qd-input-clearable-icon{margin-left:-.25rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon{margin-right:.5625rem;color:#979797;cursor:pointer;font-size:1.25rem;line-height:2rem}:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:hover,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:focus,:host .qd-input-input .qd-input-suffix ::ng-deep .qd-input-clearable-icon:active{color:#171717}:host .qd-input-input qd-input-units+.qd-input-suffix{margin:0 0 0 -.1875rem}:host .qd-input-character-counter{padding-left:.125rem;color:#757575;float:right;font-size:.75rem;font-weight:300;line-height:.75rem}:host:after{display:block;height:0;clear:both;content:\".\";visibility:hidden}:host.qd-input-focus .qd-input-input{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(0,102,153);border-radius:0;outline:none}:host.qd-input-readonly .qd-input-readonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-viewonly .qd-input-viewonly{color:#171717;font-size:.875rem;line-height:2.25rem}:host.qd-input-disabled .qd-input-input{border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled .qd-input-input input{background-color:#f5f5f5;color:#979797}:host.qd-input-disabled .qd-input-input input::placeholder{opacity:0}:host.qd-input-disabled .qd-input-input:hover,:host.qd-input-disabled .qd-input-input:active{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(151,151,151);background-color:#f5f5f5}:host.qd-input-disabled.qd-input-focus{border-color:#ff9b00}:host.qd-input--readonly-action .qd-input-readonly{color:#069;cursor:pointer}:host.qd-input--readonly-action .qd-input-readonly:hover,:host.qd-input--readonly-action .qd-input-readonly:active,:host.qd-input--readonly-action .qd-input-readonly:focus{text-decoration:underline}:host.qd-input--viewonly-action .qd-input-viewonly{color:#069;cursor:pointer}:host.qd-input--viewonly-action .qd-input-viewonly:hover,:host.qd-input--viewonly-action .qd-input-viewonly:active,:host.qd-input--viewonly-action .qd-input-viewonly:focus{text-decoration:underline}:host.qd-input-error .qd-input-input,:host.qd-input-error-from-outside .qd-input-input{padding:0 .0625rem 0 .5rem;border:.0625rem solid rgb(199,0,35)}:host.qd-input-error .qd-input-input:hover,:host.qd-input-error .qd-input-input:active,:host.qd-input-error-from-outside .qd-input-input:hover,:host.qd-input-error-from-outside .qd-input-input:active{padding:.0625rem 0 .0625rem .4375rem;border:.125rem solid rgb(199,0,35)}:host.qd-input-error.qd-input-focus,:host.qd-input-error-from-outside.qd-input-focus{border-color:#c70023}\n"] }]
         }], propDecorators: { formControlName: [{
                 type: Input
             }], value: [{
@@ -11409,8 +11434,6 @@ class QdDatepickerComponent {
         this.displayedDateTime = date ? QdDateAdapter.formatToDateTimeLocaleString(date, this.config?.enableSeconds) : '';
         this.displayedTime = date ? QdDateAdapter.formatToTimeLocaleString(date, this.config?.enableSeconds) : '';
         this.changeDetectorRef.detectChanges();
-        this.valueChange.emit(date);
-        this._onChange(date);
     }
     setDisabledState(disabled) {
         this.disabled = disabled;
@@ -12848,7 +12871,7 @@ class QdValidators {
         return ({ value }) => {
             if (!value)
                 return null;
-            const localizedFormat = moment().locale('de').format('L');
+            const localizedFormat = moment().format('DD.MM.YYYY');
             const formattedErrorKey = { date: { key: errorKey, params: { format: localizedFormat } } };
             if (value === 'Invalid Date')
                 return formattedErrorKey;
@@ -18161,37 +18184,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
-class QdCancelDialogComponent {
-    dialogRef = inject(DialogRef);
-    i18n;
-    handler;
-    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: "20.3.18", ngImport: i0, type: QdCancelDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", 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: i3.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", 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" }]
-        }] });
-
-var cancelDialog_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    QdCancelDialogComponent: QdCancelDialogComponent
-});
-
 class QdDialogModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
     static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.18", ngImport: i0, type: QdDialogModule, declarations: [QdDialogActionComponent,
@@ -18203,8 +18195,7 @@ class QdDialogModule {
             QdDialogConfirmationSuccessDirective,
             QdDialogRecordStepperComponent,
             QdPageDialogWithBreadcrumbsComponent,
-            QdPendingChangesGuardDirective,
-            QdCancelDialogComponent], imports: [CommonModule,
+            QdPendingChangesGuardDirective], imports: [CommonModule,
             TranslateModule,
             RouterModule,
             DialogModule,
@@ -18268,8 +18259,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdDialogConfirmationSuccessDirective,
                         QdDialogRecordStepperComponent,
                         QdPageDialogWithBreadcrumbsComponent,
-                        QdPendingChangesGuardDirective,
-                        QdCancelDialogComponent
+                        QdPendingChangesGuardDirective
                     ],
                     exports: [
                         QdDialogActionComponent,
@@ -24270,6 +24260,7 @@ class QdTableComponent {
     fillingWidthService = inject(QdTableFillingWidthService);
     breakpointService = inject(QdBreakpointService);
     resolverService = inject(QdTableResolverService);
+    confirmationDialogService = inject(QdConfirmationDialogOpenerService);
     /**
      * Configuration of the table. The generic type specifies the column definition. <br />
      *
@@ -24472,6 +24463,17 @@ class QdTableComponent {
             if (action.highlightOnRevisit) {
                 this.tableStoreService.setLastVisitedRow(resolveRowIdentifier(recentAction.rowData, recentAction.index, this.config.trackRowBy));
             }
+            if (action.confirmationMessage) {
+                this.confirmationDialogService
+                    .showConfirmDialog({ message: action.confirmationMessage }, this.testId + '-confirmation')
+                    .pipe(filter(confirmed => confirmed))
+                    .subscribe(() => {
+                    const result = action.handler(recentAction);
+                    if (action.refresh?.isEnabled)
+                        this.processSecondaryActionRefresh(result, action.refresh);
+                });
+                return;
+            }
             const result = action.handler(recentAction);
             if (action.refresh?.isEnabled)
                 this.processSecondaryActionRefresh(result, action.refresh);
@@ -26465,30 +26467,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 }]
         }] });
 
-class QdPageCancelConfirmationDialogComponent {
-    dialogRef = inject(DialogRef);
-    i18n;
-    handler;
-    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() {
-        this.dialogRef.close(true);
-        this.handler();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageCancelConfirmationDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdPageCancelConfirmationDialogComponent, isStandalone: false, selector: "qd-page-cancel-confirmation-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=\"page-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=\"page-cancel-confirmation-dialog-proceed\">\n      {{ \"i18n.qd.page.cancel.confirmation.dialog.proceed\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n", styles: [""], 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: QdDialogActionComponent, selector: "qd-dialog-action" }, { kind: "component", type: QdDialogComponent, selector: "qd-dialog" }, { kind: "component", type: QdTextSectionComponent, selector: "qd-text-section" }, { kind: "component", type: QdTextSectionParagraphComponent, selector: "qd-text-section-paragraph" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageCancelConfirmationDialogComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'qd-page-cancel-confirmation-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=\"page-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=\"page-cancel-confirmation-dialog-proceed\">\n      {{ \"i18n.qd.page.cancel.confirmation.dialog.proceed\" | translate }}\n    </button>\n  </qd-dialog-action>\n</qd-dialog>\n" }]
-        }] });
-
 /**
  * The **QdPageControlPanel** is used to display information and functions relevant to a specific business case, which is related to a specific Object Model.
  *
@@ -27198,6 +27176,39 @@ class QdFormGroupManagerService {
     takeFormGroupsSnapshot() {
         this._formGroups.forEach((fg, key) => this._formGroupsSnapshot.set(key, fg.getRawValue()));
     }
+    /**
+     * Captures a deep-cloned snapshot of all current form values without mutating internal state.
+     *
+     * Used by framework orchestration code that needs to remember the "at click time" state of a form
+     * so the baseline can later be committed to exactly that state — even if the user edits the form
+     * while an async commit action is pending.
+     *
+     * Throws if any form value is not structured-cloneable (functions, symbols, DOM nodes).
+     */
+    captureFormValues() {
+        const captured = new Map();
+        this._formGroups.forEach((fg, key) => {
+            try {
+                captured.set(key, structuredClone(fg.getRawValue()));
+            }
+            catch (err) {
+                throw new Error(`QdFormGroupManagerService: captureFormValues() failed for group "${key}". ` +
+                    `Form values must be structured-cloneable. Non-cloneable values like functions, ` +
+                    `symbols, or DOM nodes are not supported. Original error: ${String(err)}`);
+            }
+        });
+        return captured;
+    }
+    /**
+     * Replaces the internal baseline snapshot with the provided values.
+     *
+     * Intended to be paired with `captureFormValues()` so that the baseline can be advanced to the
+     * values present when a commit action was initiated — independent of whether the user edited the
+     * form in the meantime.
+     */
+    commitBaseline(values) {
+        values.forEach((snapshot, key) => this._formGroupsSnapshot.set(key, snapshot));
+    }
     restoreFormGroupsFromSnapshot() {
         this._formGroups.forEach((fg, key) => {
             const snapshot = this._formGroupsSnapshot.get(key);
@@ -27309,6 +27320,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
             type: Injectable
         }] });
 
+/**
+ * Intercepts router navigation when unsaved form changes exist on a QdPage.
+ *
+ * Provided per `QdPageComponent`. Activated automatically when the page enters an editable state
+ * (create pages or inspect pages in edit mode). Deactivated when the page returns to view mode.
+ *
+ * #### When navigation is intercepted
+ *
+ * - A `NavigationStart` event occurs (browser back, shell back button, or programmatic navigation).
+ * - The registered form groups report unsaved changes via `QdFormGroupManagerService.$hasValuesChanged()`.
+ *
+ * The navigation is cancelled and a confirmation dialog is shown. The user can either discard
+ * changes and proceed or stay on the page.
+ *
+ * #### When navigation is allowed
+ *
+ * - No unsaved changes exist — the form is either pristine or the framework has advanced the
+ *   baseline after a successful commit action (Submit, Save, SaveDraft).
+ * - The page switches to view mode via `deactivate()`.
+ *
+ * The service has no concept of "pending actions" or bypass windows. Framework actions advance the
+ * baseline directly via `QdFormGroupManagerService.commitBaseline(...)`; cancel-discard flows reset
+ * the baseline via `restoreFormGroupsFromSnapshot()`. Either way, the interceptor only observes the
+ * resulting form state — there is no time window where a bypass is active.
+ */
+class QdPageNavigationInterceptorService {
+    router = inject(Router);
+    formGroupManager = inject(QdFormGroupManagerService);
+    confirmationDialog = inject(QdConfirmationDialogOpenerService);
+    _destroy$ = new Subject();
+    _deactivate$ = new Subject();
+    /**
+     * Guards the re-dispatched navigation issued after the user confirms discard. While the dialog
+     * is open and while the confirmed target is being re-dispatched, the router events must not
+     * re-enter the interception pipeline — otherwise the dialog would open recursively.
+     */
+    _bypassInterception = false;
+    /**
+     * URL of the navigation target accepted by the user in the most recent discard-confirm dialog.
+     * Set by `navigateToConfirmedTarget()` and consumed once by `shouldIntercept()` when the
+     * corresponding `NavigationStart` arrives.
+     */
+    _confirmedTargetUrl;
+    _confirmationMessage;
+    ngOnDestroy() {
+        this._confirmedTargetUrl = undefined;
+        this._destroy$.next();
+        this._destroy$.complete();
+        this._deactivate$.complete();
+    }
+    /**
+     * Starts intercepting navigation events. Replaces any previously active listener.
+     */
+    activate(confirmationMessage) {
+        this._confirmationMessage = confirmationMessage;
+        this._deactivate$.next();
+        this.listenForUnsavedNavigationAttempts();
+    }
+    /**
+     * Stops intercepting and clears the pending confirmed-target bypass.
+     */
+    deactivate() {
+        this._deactivate$.next();
+        this._confirmedTargetUrl = undefined;
+    }
+    /**
+     * Runs the given action while temporarily suppressing navigation interception.
+     *
+     * Used by framework commit-action orchestration to wrap synchronous handler invocations and
+     * post-commit `onSuccess` callbacks: any router navigation that occurs during `action()` is
+     * passed through without raising the unsaved-changes dialog. Restoration happens in a `finally`
+     * block, so the flag is released even if `action()` throws.
+     */
+    executeWithBypass(action) {
+        this._bypassInterception = true;
+        try {
+            action();
+        }
+        finally {
+            this._bypassInterception = false;
+        }
+    }
+    listenForUnsavedNavigationAttempts() {
+        this.router.events
+            .pipe(filter$1((event) => event instanceof NavigationStart), filter$1(() => !this._bypassInterception), filter$1(event => this.shouldIntercept(event)), concatMap$1(event => this.checkForPendingChanges(event)), filter$1(({ hasChanges }) => hasChanges), exhaustMap(({ event }) => this.cancelNavigationAndConfirm(event)), filter$1(({ confirmed }) => confirmed), takeUntil$1(this._deactivate$), takeUntil$1(this._destroy$))
+            .subscribe(({ targetUrl }) => this.navigateToConfirmedTarget(targetUrl));
+    }
+    shouldIntercept(event) {
+        if (this._confirmedTargetUrl !== undefined && this._confirmedTargetUrl === event.url) {
+            this._confirmedTargetUrl = undefined;
+            return false;
+        }
+        return true;
+    }
+    checkForPendingChanges(event) {
+        return this.formGroupManager.$hasValuesChanged().pipe(take$1(1), map$1(hasChanges => ({ event, hasChanges })));
+    }
+    cancelNavigationAndConfirm(event) {
+        this._bypassInterception = true;
+        void this.router.navigateByUrl(this.router.url, { skipLocationChange: true });
+        return this.confirmationDialog
+            .showDiscardConfirmDialog(this._confirmationMessage, 'page-navigation-confirmation')
+            .pipe(map$1(confirmed => ({ confirmed, targetUrl: event.url })), finalize(() => (this._bypassInterception = false)));
+    }
+    navigateToConfirmedTarget(targetUrl) {
+        this._bypassInterception = false;
+        this._confirmedTargetUrl = targetUrl;
+        void this.router.navigateByUrl(targetUrl);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, decorators: [{
+            type: Injectable
+        }] });
+
 class QdResolverTriggerService {
     route = inject(ActivatedRoute, { optional: true });
     shouldTriggerResolver(triggerOn) {
@@ -27358,8 +27485,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
 class QdPageObjectHeaderComponent {
     pageObjectResolver = inject(QD_PAGE_OBJECT_RESOLVER_TOKEN, { optional: true });
     formGroupManagerService = inject(QdFormGroupManagerService, { optional: true });
+    navigationInterceptor = inject(QdPageNavigationInterceptorService);
     dialogComponent = inject(QdDialogComponent, { optional: true });
     dialog = inject(QdDialogService);
+    confirmationDialogService = inject(QdConfirmationDialogOpenerService);
     contextService = inject(QdContextService);
     resolverTriggerService = inject(QdResolverTriggerService);
     pageStoreService = inject(QdPageStoreService);
@@ -27521,13 +27650,39 @@ class QdPageObjectHeaderComponent {
         });
     }
     save() {
-        const handleSuccess = () => {
+        const saveAction = this.saveButton;
+        const applySuccess = (captured) => {
             this.formGroupManagerService.cancelPendingAsyncValidation();
             this.pageStoreService.toggleViewonly(true);
-            this.formGroupManagerService.takeFormGroupsSnapshot();
+            if (captured) {
+                this.formGroupManagerService.commitBaseline(captured);
+            }
+            else {
+                this.formGroupManagerService.takeFormGroupsSnapshot();
+            }
+            saveAction?.onSuccess?.();
         };
-        const result = this.saveButton?.handler?.(this.formGroupManagerService.getAllValues());
-        isObservable(result) ? result.pipe(take(1)).subscribe((ok) => ok && handleSuccess()) : handleSuccess();
+        if (!saveAction?.handler) {
+            this.navigationInterceptor.executeWithBypass(() => applySuccess(null));
+            return;
+        }
+        const captured = this.formGroupManagerService.captureFormValues();
+        let result;
+        this.navigationInterceptor.executeWithBypass(() => {
+            result = saveAction.handler(this.formGroupManagerService.getAllValues());
+        });
+        if (isObservable(result)) {
+            result.pipe(take(1), takeUntil(this._destroyed$)).subscribe({
+                next: ok => {
+                    if (ok)
+                        this.navigationInterceptor.executeWithBypass(() => applySuccess(captured));
+                },
+                error: err => console.error('QdPage save action observable errored — baseline not committed. Catch errors via catchError() in your handler.', err)
+            });
+        }
+        else {
+            this.navigationInterceptor.executeWithBypass(() => applySuccess(captured));
+        }
     }
     changeContext(context, selection, event) {
         event.stopPropagation();
@@ -27555,7 +27710,7 @@ class QdPageObjectHeaderComponent {
             .subscribe();
     }
     initContexts() {
-        this.contexts$ = this.contextService.contexts$.pipe(map(contexts => contexts.filter(context => context.selection || this.config.pageType === 'overview')), map(contexts => contexts?.map(({ selection, context }) => ({
+        this.contexts$ = this.contextService.contexts$.pipe(map(contexts => contexts.filter(context => context.selection || this.config.pageType === 'overview')), map(contexts => contexts.map(({ selection, context }) => ({
             label: context.label.i18n,
             value: Array.isArray(selection?.value)
                 ? selection?.value.filter(item => item !== null && item !== undefined)
@@ -27566,7 +27721,7 @@ class QdPageObjectHeaderComponent {
             selection: selection?.value ?? []
         }))));
         this.contexts$
-            .pipe(takeUntil(this._destroyed$), tap(contexts => (this._availableContexts = contexts?.length ?? 0)))
+            .pipe(takeUntil(this._destroyed$), tap(contexts => (this._availableContexts = contexts.length)))
             .subscribe();
     }
     updateCustomActions() {
@@ -27608,15 +27763,13 @@ class QdPageObjectHeaderComponent {
         return { actions };
     }
     openCancelDialog() {
-        this.dialog
-            .open(QdPageCancelConfirmationDialogComponent, {
-            title: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.title' },
-            dialogSize: QdDialogSize.Small,
-            data: this.config.pageTypeConfig
-        })
-            .closed.pipe(takeUntil(this._destroyed$))
-            .subscribe(confirm => {
-            if (confirm) {
+        const cancelConfig = this.config.pageTypeConfig?.cancel;
+        this.confirmationDialogService
+            .showDiscardConfirmDialog(cancelConfig?.confirmationMessage, this.testId + '-cancel-confirmation')
+            .pipe(takeUntil(this._destroyed$))
+            .subscribe(confirmed => {
+            if (confirmed) {
+                cancelConfig?.handler?.();
                 this.formGroupManagerService.restoreFormGroupsFromSnapshot();
                 this.pageStoreService.toggleViewonly(true);
             }
@@ -28587,126 +28740,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Output
             }] } });
 
-/**
- * Intercepts router navigation when unsaved form changes exist on a QdPage.
- *
- * Provided per `QdPageComponent`. Activated automatically when the page enters an editable state
- * (create pages or inspect pages in edit mode). Deactivated when the page returns to view mode.
- *
- * #### When navigation is intercepted
- *
- * - The user has unsaved form changes (tracked via `QdFormGroupManagerService`).
- * - A `NavigationStart` event occurs (browser back, shell back button, or programmatic navigation).
- *
- * The current navigation is cancelled, and a confirmation dialog is shown. The user can either
- * discard changes and proceed or cancel and stay on the page.
- *
- * #### When navigation is allowed
- *
- * - No unsaved changes exist — navigation proceeds silently.
- * - A framework action (Submit, SaveDraft) wraps its handler via `executeWithBypass()`.
- * - A confirmed discard sets `allowNextNavigation()` before the cancel handler navigates.
- * - The page switches to view mode via `deactivate()`.
- *
- * Custom actions defined by the application are not bypassed. If a custom action navigates away
- * while unsaved changes exist, the confirmation dialog is shown.
- */
-class QdPageNavigationInterceptorService {
-    router = inject(Router);
-    formGroupManager = inject(QdFormGroupManagerService);
-    confirmationDialog = inject(QdConfirmationDialogOpenerService);
-    _destroy$ = new Subject();
-    _deactivate$ = new Subject();
-    _bypassInterception = false;
-    _allowedTargetUrls = new Set();
-    _confirmationMessage;
-    ngOnDestroy() {
-        this._allowedTargetUrls.clear();
-        this._destroy$.next();
-        this._destroy$.complete();
-        this._deactivate$.complete();
-    }
-    /**
-     * Starts intercepting navigation events. Replaces any previously active listener.
-     */
-    activate(confirmationMessage) {
-        this._confirmationMessage = confirmationMessage;
-        this._deactivate$.next();
-        this.listenForUnsavedNavigationAttempts();
-    }
-    /**
-     * Stops intercepting and clears all pending URL bypasses.
-     */
-    deactivate() {
-        this._deactivate$.next();
-        this._allowedTargetUrls.clear();
-    }
-    /**
-     * Whitelists the next navigation so it bypasses interception.
-     * Without a URL, any next navigation is bypassed (wildcard). With a URL, only that
-     * specific navigation is bypassed — non-matching navigations are still intercepted.
-     */
-    allowNextNavigation(targetUrl) {
-        this._allowedTargetUrls.add(targetUrl ?? '*');
-    }
-    /**
-     * Executes the callback with interception temporarily disabled.
-     * The callback must navigate synchronously — async navigation after the callback returns
-     * will not be bypassed. This works because Angular's router emits NavigationStart
-     * synchronously within the navigateByUrl() / navigate() call.
-     */
-    executeWithBypass(fn) {
-        this._bypassInterception = true;
-        try {
-            fn();
-        }
-        finally {
-            this._bypassInterception = false;
-        }
-    }
-    listenForUnsavedNavigationAttempts() {
-        this.router.events
-            .pipe(filter$1((event) => event instanceof NavigationStart), filter$1(() => !this._bypassInterception), filter$1(event => this.shouldIntercept(event)), concatMap$1(event => this.checkForPendingChanges(event)), filter$1(({ hasChanges }) => hasChanges), exhaustMap(({ event }) => this.cancelNavigationAndConfirm(event)), filter$1(({ confirmed }) => confirmed), takeUntil$1(this._deactivate$), takeUntil$1(this._destroy$))
-            .subscribe(({ targetUrl }) => this.navigateToConfirmedTarget(targetUrl));
-    }
-    shouldIntercept(event) {
-        if (this._allowedTargetUrls.has('*')) {
-            this._allowedTargetUrls.clear();
-            return false;
-        }
-        if (this._allowedTargetUrls.has(event.url)) {
-            this._allowedTargetUrls.delete(event.url);
-            return false;
-        }
-        return true;
-    }
-    checkForPendingChanges(event) {
-        return this.formGroupManager.$hasValuesChanged().pipe(take$1(1), map$1(hasChanges => ({ event, hasChanges })));
-    }
-    cancelNavigationAndConfirm(event) {
-        this._bypassInterception = true;
-        void this.router.navigateByUrl(this.router.url, { skipLocationChange: true });
-        return this.confirmationDialog
-            .showCancelConfirmation({ cancel: { confirmationMessage: this._confirmationMessage } })
-            .pipe(map$1(confirmed => ({ confirmed, targetUrl: event.url })), finalize(() => (this._bypassInterception = false)));
-    }
-    navigateToConfirmedTarget(targetUrl) {
-        this._bypassInterception = false;
-        this._allowedTargetUrls.add(targetUrl);
-        void this.router.navigateByUrl(targetUrl);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, decorators: [{
-            type: Injectable
-        }] });
-
 class QdPageSubmitActionService {
     footerService = inject(QdPageFooterService);
     formGroupManagerService = inject(QdFormGroupManagerService);
+    navigationInterceptor = inject(QdPageNavigationInterceptorService);
     _labelI18n = 'i18n.qd.page.footer.submit';
-    _submitHandler;
+    _submitAction;
     _isVisible = true;
     _destroyed$ = new Subject();
     _cancelTrackFormValidity$ = new Subject();
@@ -28720,9 +28759,9 @@ class QdPageSubmitActionService {
         this._isVisible = isVisible;
         this.configureSubmitAction(pageTypeConfig.submit);
     }
-    configureSubmitAction(submitConfig) {
-        this._labelI18n = submitConfig.label?.i18n || 'i18n.qd.page.footer.submit';
-        this._submitHandler = this.buildSubmitHandler(submitConfig.handler);
+    configureSubmitAction(action) {
+        this._labelI18n = action.label?.i18n || 'i18n.qd.page.footer.submit';
+        this._submitAction = action;
         this.registerSubmitAction();
         this.trackFormValidity();
     }
@@ -28732,7 +28771,7 @@ class QdPageSubmitActionService {
                 key: 'submit',
                 action: {
                     titleI18n: this._labelI18n,
-                    handler: this._submitHandler,
+                    handler: () => this.executeSubmit(),
                     isDisabled: true,
                     isVisible: this._isVisible,
                     type: QdFooterActionType.Primary
@@ -28740,12 +28779,33 @@ class QdPageSubmitActionService {
             }
         ]);
     }
-    buildSubmitHandler(originalHandler) {
-        return (...args) => {
-            if (!this.formGroupManagerService.hasFormGroups())
-                return originalHandler(...args);
-            return originalHandler(this.formGroupManagerService.getAllValues());
-        };
+    executeSubmit() {
+        const action = this._submitAction;
+        if (!action?.handler)
+            return;
+        const values = this.formGroupManagerService.hasFormGroups()
+            ? this.formGroupManagerService.getAllValues()
+            : undefined;
+        const captured = this.formGroupManagerService.captureFormValues();
+        let result;
+        this.navigationInterceptor.executeWithBypass(() => {
+            result = action.handler(values);
+        });
+        if (isObservable(result)) {
+            result.pipe(take(1), takeUntil(this._destroyed$)).subscribe({
+                next: ok => {
+                    if (!ok)
+                        return;
+                    this.formGroupManagerService.commitBaseline(captured);
+                    this.navigationInterceptor.executeWithBypass(() => action.onSuccess?.());
+                },
+                error: err => console.error('QdPage commit action observable errored — baseline not committed. Catch errors via catchError() in your handler.', err)
+            });
+        }
+        else {
+            this.formGroupManagerService.commitBaseline(captured);
+            this.navigationInterceptor.executeWithBypass(() => action.onSuccess?.());
+        }
     }
     trackFormValidity() {
         this._cancelTrackFormValidity$.next();
@@ -28760,7 +28820,7 @@ class QdPageSubmitActionService {
                 key: 'submit',
                 action: {
                     titleI18n: this._labelI18n,
-                    handler: this._submitHandler,
+                    handler: () => this.executeSubmit(),
                     isDisabled: !isValid,
                     isVisible: this._isVisible,
                     type: QdFooterActionType.Primary
@@ -28884,7 +28944,15 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
  *         handler: () => handleCancel()
  *       },
  *       save: {
- *         handler: (formValues) => handleSave(formValues)
+ *         handler: () => saveApi.save(form.value).pipe(
+ *           tap(result => notifications.success('Saved')),
+ *           map(() => true),
+ *           catchError(err => {
+ *             notifications.showError(err);
+ *             return of(false);
+ *           })
+ *         ),
+ *         onSuccess: () => router.navigate(['/overview'])
  *       }
  *     }
  *   };
@@ -29002,7 +29070,8 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
  *   pageType: 'create',
  *   pageTypeConfig: {
  *     submit: {
- *       handler: (formValues) => handleSubmit(formValues)
+ *       handler: (formValues) => createApi.create(formValues).pipe(map(() => true)),
+ *       onSuccess: () => router.navigate(['/items'])
  *     }
  *   }
  * };
@@ -29095,7 +29164,14 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
  *       handler: () => handleCancel()
  *     },
  *     save: {
- *       handler: (formValues) => handleSave(formValues)
+ *       handler: (formValues) => saveApi.save(formValues).pipe(
+ *         map(() => true),
+ *         catchError(err => {
+ *           notifications.showError(err);
+ *           return of(false);
+ *         })
+ *       ),
+ *       onSuccess: () => router.navigate(['/overview'])
  *     }
  *   }
  * };
@@ -29164,6 +29240,7 @@ class QdPageComponent {
     bottomOffset$ = inject(QD_SAFE_BOTTOM_OFFSET, { optional: true });
     dialogRef = inject(DialogRef, { optional: true });
     navigationInterceptor = inject(QdPageNavigationInterceptorService);
+    confirmationDialogService = inject(QdConfirmationDialogOpenerService);
     /**
      * This property defines the configuration for the QdPage component, including the page type,
      * title, and specific configurations for each type of page.
@@ -29264,11 +29341,14 @@ class QdPageComponent {
             const action = pageTypeConfig[actionKey];
             if (!action)
                 continue;
+            const handler = actionKey === 'cancel'
+                ? () => action.handler()
+                : this.generateCommitActionHandler(action);
             actions.push({
                 actionKey,
                 partialAction: {
                     ...(action?.label?.i18n ? { titleI18n: action.label.i18n } : {}),
-                    handler: this.generateFooterActionHandler(action?.handler)
+                    handler
                 }
             });
         }
@@ -29285,11 +29365,7 @@ class QdPageComponent {
                     partialAction: {
                         handler: hasChanged
                             ? () => this.setupCancelConfirmation()
-                            : () => {
-                                this.navigationInterceptor.executeWithBypass(() => {
-                                    this.config?.pageTypeConfig?.cancel?.handler();
-                                });
-                            }
+                            : () => this.config?.pageTypeConfig?.cancel?.handler()
                     }
                 }
             ]);
@@ -29301,9 +29377,9 @@ class QdPageComponent {
             {
                 key: 'saveDraft',
                 action: {
-                    titleI18n: pageTypeConfig.saveDraft?.label?.i18n ?? 'i18n.qd.page.footer.saveDraft',
+                    titleI18n: pageTypeConfig.saveDraft.label?.i18n ?? 'i18n.qd.page.footer.saveDraft',
                     type: QdFooterActionType.Secondary,
-                    handler: this.generateFooterActionHandler(pageTypeConfig?.saveDraft?.handler),
+                    handler: this.generateCommitActionHandler(pageTypeConfig.saveDraft),
                     isVisible: true,
                     isDisabled: false
                 }
@@ -29330,30 +29406,49 @@ class QdPageComponent {
         if (this._isInitialized)
             this.operationModeChanged.emit(mode);
     }
-    generateFooterActionHandler(handler) {
+    generateCommitActionHandler(action) {
         return (...args) => {
-            if (!handler)
+            if (!action?.handler)
                 return;
             const values = this.formGroupManagerService.hasFormGroups() ? this.formGroupManagerService.getAllValues() : args;
-            this.navigationInterceptor.executeWithBypass(() => handler(values));
+            const captured = this.formGroupManagerService.captureFormValues();
+            let result;
+            this.navigationInterceptor.executeWithBypass(() => {
+                result = action.handler(values);
+            });
+            if (isObservable(result)) {
+                result.pipe(take(1), takeUntil(this._destroyed$)).subscribe({
+                    next: ok => {
+                        if (!ok)
+                            return;
+                        this.formGroupManagerService.commitBaseline(captured);
+                        this.navigationInterceptor.executeWithBypass(() => action.onSuccess?.());
+                    },
+                    error: err => console.error('QdPage commit action observable errored — baseline not committed. Catch errors via catchError() in your handler.', err)
+                });
+            }
+            else {
+                this.formGroupManagerService.commitBaseline(captured);
+                this.navigationInterceptor.executeWithBypass(() => action.onSuccess?.());
+            }
         };
     }
     setupCancelConfirmation() {
-        this.dialog
-            .open(QdPageCancelConfirmationDialogComponent, {
-            title: { i18n: 'i18n.qd.page.cancel.confirmation.dialog.title' },
-            dialogSize: QdDialogSize.Small,
-            data: this.config.pageTypeConfig
-        })
-            .closed.pipe(filter$1(result => !!result), takeUntil(this._destroyed$))
-            .subscribe(() => this.navigationInterceptor.allowNextNavigation());
+        const cancelConfig = this.config.pageTypeConfig?.cancel;
+        this.confirmationDialogService
+            .showDiscardConfirmDialog(cancelConfig?.confirmationMessage, this.testId + '-cancel-confirmation')
+            .pipe(filter$1(result => result), takeUntil(this._destroyed$))
+            .subscribe(() => {
+            this.formGroupManagerService.restoreFormGroupsFromSnapshot();
+            cancelConfig?.handler?.();
+        });
     }
     initSubmitValidation() {
         this._cancelSubmitValidation$.next();
         this.formGroupManagerService
             .$areFormGroupsValid()
             .pipe(takeUntil(this._cancelSubmitValidation$), takeUntil(this._destroyed$), tap(isValid => {
-            const submitDisabledInfoText = this.config.pageType === 'inspect' ? this.config.pageTypeConfig?.submit?.disabledInfo : undefined;
+            const submitDisabledInfoText = this.config.pageTypeConfig?.submit?.disabledInfo;
             this.footerService.updateActions([
                 {
                     actionKey: 'submit',
@@ -29545,7 +29640,6 @@ class QdPageModule {
             QdConnectFormStateToPageDirective,
             QdPageFooterCustomContentDirective,
             QdContextSelectDialogComponent,
-            QdPageCancelConfirmationDialogComponent,
             QdPageInfoBannerComponent], imports: [CommonModule,
             TranslateModule,
             QdButtonModule,
@@ -29630,7 +29724,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                         QdConnectFormStateToPageDirective,
                         QdPageFooterCustomContentDirective,
                         QdContextSelectDialogComponent,
-                        QdPageCancelConfirmationDialogComponent,
                         QdPageInfoBannerComponent
                     ],
                     exports: [
@@ -32486,6 +32579,7 @@ class QdQuickEditComponent {
     eventBrokerService = inject(QdEventBrokerService, { optional: true });
     changeDetectorRef = inject(ChangeDetectorRef);
     controlContainer = inject(ControlContainer, { optional: true, self: true });
+    confirmationDialogService = inject(QdConfirmationDialogOpenerService);
     /**
      * Configuration of the QuickEdit. The generic type specifies the column definition. <br />
      *
@@ -32634,6 +32728,16 @@ class QdQuickEditComponent {
         window.setTimeout(() => this.focusFirstControl());
     }
     removeRow(index) {
+        if (this.config.removeConfirmationMessage) {
+            this.confirmationDialogService
+                .showConfirmDialog({ message: this.config.removeConfirmationMessage }, (this.testId ?? 'quick-edit') + '-remove-confirmation')
+                .pipe(filter$1(confirmed => confirmed))
+                .subscribe(() => this.executeRemoveRow(index));
+            return;
+        }
+        this.executeRemoveRow(index);
+    }
+    executeRemoveRow(index) {
         this.redrawOnNextChange();
         if (this.controlContainer) {
             this.controlContainer.control.removeAt(index);