@quadrel-enterprise-ui/framework 20.9.1 → 20.10.0-beta.139.1

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

@@ -9211,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.
@@ -9231,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';
@@ -9242,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.
@@ -9258,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.
@@ -9283,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.
@@ -9339,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);
     }
@@ -9431,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);
     }
@@ -10995,6 +10993,7 @@ class QdInputComponent {
     hasAutofocus;
     hasOptions = false;
     _value = { value: '' };
+    _displayValue = '';
     control;
     _optionsResolver;
     _subs = new Subscription();
@@ -11064,6 +11063,7 @@ class QdInputComponent {
     }
     writeValue(value) {
         this._value = getValueWithUnit(value, this.config);
+        this._displayValue = String(this._value.value ?? '');
     }
     setDisabledState(disabled) {
         this.disabled = disabled;
@@ -11194,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,
@@ -11212,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: [{
@@ -11434,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;
@@ -12873,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;
@@ -27064,6 +27062,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
                 type: Input
             }] } });
 
+class QdPageCommitActionExecutor {
+    static execute(action, values, context) {
+        const { formGroupManager, navigationInterceptor, destroyed$, onAfterSnapshot } = context;
+        const captured = formGroupManager.captureFormValues();
+        let result$;
+        navigationInterceptor.executeWithBypass(() => {
+            const handlerResult = action.handler(values);
+            if (isObservable(handlerResult))
+                result$ = handlerResult;
+        });
+        const applySuccess = () => {
+            formGroupManager.setFormGroupsSnapshot(captured);
+            navigationInterceptor.executeWithBypass(() => {
+                onAfterSnapshot?.();
+                try {
+                    action.onSuccess?.();
+                }
+                catch (err) {
+                    console.error('QD-UI | QdPage - onSuccess callback threw after form was marked as saved.', err);
+                }
+            });
+        };
+        if (result$) {
+            result$.pipe(take(1), takeUntil(destroyed$)).subscribe({
+                next: ok => {
+                    if (ok)
+                        applySuccess();
+                },
+                error: err => console.error('QD-UI | QdPage - Commit action observable errored — form was not marked as saved. Catch errors via catchError() in your handler.', err)
+            });
+        }
+        else {
+            applySuccess();
+        }
+    }
+}
+
 /**
  * The QdFormGroupManagerService provides centralized registration, snapshotting, and value tracking
  * for multiple Angular `FormGroup` instances. It supports efficient state restoration, including dynamic
@@ -27178,6 +27213,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 snapshot can later be set to exactly those values — 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(`QD-UI | QdFormGroupManager - 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 saved snapshot with the provided values.
+     *
+     * Intended to be paired with `captureFormValues()` so that the snapshot can be set to the
+     * values present when a commit action was initiated — independent of whether the user edited
+     * the form in the meantime.
+     */
+    setFormGroupsSnapshot(values) {
+        values.forEach((snapshot, key) => this._formGroupsSnapshot.set(key, snapshot));
+    }
     restoreFormGroupsFromSnapshot() {
         this._formGroups.forEach((fg, key) => {
             const snapshot = this._formGroupsSnapshot.get(key);
@@ -27187,20 +27255,6 @@ class QdFormGroupManagerService {
         });
         this.cancelPendingAsyncValidation();
     }
-    restoreFormGroup(fg, snapshot) {
-        Object.entries(fg.controls).forEach(([ctrlKey, ctrl]) => {
-            const newValue = snapshot[ctrlKey];
-            if (ctrl instanceof FormArray && Array.isArray(newValue)) {
-                this.resetFormArrayToValues(ctrl, newValue);
-            }
-            else if (ctrl instanceof FormGroup && newValue && typeof newValue === 'object') {
-                this.restoreFormGroup(ctrl, newValue);
-            }
-            else {
-                ctrl.reset(newValue);
-            }
-        });
-    }
     /**
      * Cancels any in-flight async validators on all registered form groups.
      *
@@ -27224,6 +27278,20 @@ class QdFormGroupManagerService {
             }
         });
     }
+    restoreFormGroup(fg, snapshot) {
+        Object.entries(fg.controls).forEach(([ctrlKey, ctrl]) => {
+            const newValue = snapshot[ctrlKey];
+            if (ctrl instanceof FormArray && Array.isArray(newValue)) {
+                this.resetFormArrayToValues(ctrl, newValue);
+            }
+            else if (ctrl instanceof FormGroup && newValue && typeof newValue === 'object') {
+                this.restoreFormGroup(ctrl, newValue);
+            }
+            else {
+                ctrl.reset(newValue);
+            }
+        });
+    }
     collectPendingControls(control) {
         const result = [];
         if (control instanceof FormGroup) {
@@ -27289,6 +27357,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 updated the
+ *   saved snapshot 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 update the
+ * saved snapshot directly via `QdFormGroupManagerService.setFormGroupsSnapshot(...)`; cancel-discard
+ * flows reset the form to the saved snapshot 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) {
@@ -27338,6 +27522,7 @@ 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);
@@ -27502,13 +27687,18 @@ class QdPageObjectHeaderComponent {
         });
     }
     save() {
-        const handleSuccess = () => {
-            this.formGroupManagerService.cancelPendingAsyncValidation();
-            this.pageStoreService.toggleViewonly(true);
-            this.formGroupManagerService.takeFormGroupsSnapshot();
-        };
-        const result = this.saveButton?.handler?.(this.formGroupManagerService.getAllValues());
-        isObservable(result) ? result.pipe(take(1)).subscribe((ok) => ok && handleSuccess()) : handleSuccess();
+        const saveAction = this.saveButton;
+        if (!saveAction)
+            return;
+        QdPageCommitActionExecutor.execute(saveAction, this.formGroupManagerService.getAllValues(), {
+            formGroupManager: this.formGroupManagerService,
+            navigationInterceptor: this.navigationInterceptor,
+            destroyed$: this._destroyed$,
+            onAfterSnapshot: () => {
+                this.formGroupManagerService.cancelPendingAsyncValidation();
+                this.pageStoreService.toggleViewonly(true);
+            }
+        });
     }
     changeContext(context, selection, event) {
         event.stopPropagation();
@@ -27536,7 +27726,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)
@@ -27547,7 +27737,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() {
@@ -28566,126 +28756,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
-            .showDiscardConfirmDialog(this._confirmationMessage, 'page-navigation-confirmation')
-            .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();
@@ -28699,9 +28775,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();
     }
@@ -28711,7 +28787,7 @@ class QdPageSubmitActionService {
                 key: 'submit',
                 action: {
                     titleI18n: this._labelI18n,
-                    handler: this._submitHandler,
+                    handler: (...args) => this.executeSubmit(...args),
                     isDisabled: true,
                     isVisible: this._isVisible,
                     type: QdFooterActionType.Primary
@@ -28719,12 +28795,16 @@ class QdPageSubmitActionService {
             }
         ]);
     }
-    buildSubmitHandler(originalHandler) {
-        return (...args) => {
-            if (!this.formGroupManagerService.hasFormGroups())
-                return originalHandler(...args);
-            return originalHandler(this.formGroupManagerService.getAllValues());
-        };
+    executeSubmit(...args) {
+        const action = this._submitAction;
+        if (!action)
+            return;
+        const values = this.formGroupManagerService.hasFormGroups() ? this.formGroupManagerService.getAllValues() : args;
+        QdPageCommitActionExecutor.execute(action, values, {
+            formGroupManager: this.formGroupManagerService,
+            navigationInterceptor: this.navigationInterceptor,
+            destroyed$: this._destroyed$
+        });
     }
     trackFormValidity() {
         this._cancelTrackFormValidity$.next();
@@ -28739,7 +28819,7 @@ class QdPageSubmitActionService {
                 key: 'submit',
                 action: {
                     titleI18n: this._labelI18n,
-                    handler: this._submitHandler,
+                    handler: (...args) => this.executeSubmit(...args),
                     isDisabled: !isValid,
                     isVisible: this._isVisible,
                     type: QdFooterActionType.Primary
@@ -28863,7 +28943,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'])
  *       }
  *     }
  *   };
@@ -28981,7 +29069,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'])
  *     }
  *   }
  * };
@@ -29074,7 +29163,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'])
  *     }
  *   }
  * };
@@ -29218,7 +29314,7 @@ class QdPageComponent {
         if (this.config.pageType === 'create' && this.config?.pageTypeConfig?.cancel !== undefined)
             this.handleCancelActionWithFormChanges();
         if (this.config.pageType === 'create' && this.config?.pageTypeConfig?.saveDraft !== undefined)
-            this.initSaveDraftFooterAction();
+            this.initSaveDraftFooterAction(this.config.pageTypeConfig.saveDraft);
         if (this.config.pageType === 'inspect')
             this.pageStoreService.isViewonly$
                 .pipe(takeUntil(this._destroyed$))
@@ -29244,11 +29340,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
                 }
             });
         }
@@ -29265,25 +29364,20 @@ class QdPageComponent {
                     partialAction: {
                         handler: hasChanged
                             ? () => this.setupCancelConfirmation()
-                            : () => {
-                                this.navigationInterceptor.executeWithBypass(() => {
-                                    this.config?.pageTypeConfig?.cancel?.handler();
-                                });
-                            }
+                            : () => this.config?.pageTypeConfig?.cancel?.handler()
                     }
                 }
             ]);
         });
     }
-    initSaveDraftFooterAction() {
-        const pageTypeConfig = this.config.pageTypeConfig;
+    initSaveDraftFooterAction(saveDraft) {
         this.footerService.setActions([
             {
                 key: 'saveDraft',
                 action: {
-                    titleI18n: pageTypeConfig.saveDraft?.label?.i18n ?? 'i18n.qd.page.footer.saveDraft',
+                    titleI18n: saveDraft.label?.i18n ?? 'i18n.qd.page.footer.saveDraft',
                     type: QdFooterActionType.Secondary,
-                    handler: this.generateFooterActionHandler(pageTypeConfig?.saveDraft?.handler),
+                    handler: this.generateCommitActionHandler(saveDraft),
                     isVisible: true,
                     isDisabled: false
                 }
@@ -29310,12 +29404,14 @@ class QdPageComponent {
         if (this._isInitialized)
             this.operationModeChanged.emit(mode);
     }
-    generateFooterActionHandler(handler) {
+    generateCommitActionHandler(action) {
         return (...args) => {
-            if (!handler)
-                return;
             const values = this.formGroupManagerService.hasFormGroups() ? this.formGroupManagerService.getAllValues() : args;
-            this.navigationInterceptor.executeWithBypass(() => handler(values));
+            QdPageCommitActionExecutor.execute(action, values, {
+                formGroupManager: this.formGroupManagerService,
+                navigationInterceptor: this.navigationInterceptor,
+                destroyed$: this._destroyed$
+            });
         };
     }
     setupCancelConfirmation() {
@@ -29324,8 +29420,8 @@ class QdPageComponent {
             .showDiscardConfirmDialog(cancelConfig?.confirmationMessage, this.testId + '-cancel-confirmation')
             .pipe(filter$1(result => result), takeUntil(this._destroyed$))
             .subscribe(() => {
+            this.formGroupManagerService.restoreFormGroupsFromSnapshot();
             cancelConfig?.handler?.();
-            this.navigationInterceptor.allowNextNavigation();
         });
     }
     initSubmitValidation() {
@@ -29333,7 +29429,7 @@ class QdPageComponent {
         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',
@@ -32613,9 +32709,11 @@ class QdQuickEditComponent {
         window.setTimeout(() => this.focusFirstControl());
     }
     removeRow(index) {
-        if (this.config.removeConfirmationMessage) {
+        const { hasRemoveConfirmation, removeConfirmationMessage } = this.config;
+        if (hasRemoveConfirmation || removeConfirmationMessage) {
+            const message = removeConfirmationMessage ?? { i18n: 'i18n.qd.quick.edit.removeConfirmation.message' };
             this.confirmationDialogService
-                .showConfirmDialog({ message: this.config.removeConfirmationMessage }, (this.testId ?? 'quick-edit') + '-remove-confirmation')
+                .showConfirmDialog({ message }, (this.testId ?? 'quick-edit') + '-remove-confirmation')
                 .pipe(filter$1(confirmed => confirmed))
                 .subscribe(() => this.executeRemoveRow(index));
             return;