@quadrel-enterprise-ui/framework 20.9.0 → 20.9.1-beta.137.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -9211,7 +9211,7 @@ class QdDateAdapter {
|
|
|
9211
9211
|
static parseToDate(formatted) {
|
|
9212
9212
|
if (!formatted)
|
|
9213
9213
|
return new Date();
|
|
9214
|
-
return moment(formatted, '
|
|
9214
|
+
return moment(formatted, 'DD.MM.YYYY').toDate();
|
|
9215
9215
|
}
|
|
9216
9216
|
/**
|
|
9217
9217
|
* Converts a localized Swiss date and time string into a JavaScript Date object.
|
|
@@ -9231,9 +9231,9 @@ class QdDateAdapter {
|
|
|
9231
9231
|
return new Date(new Date().setHours(hours, minutes, 0, 0));
|
|
9232
9232
|
}
|
|
9233
9233
|
else if (date && !time) {
|
|
9234
|
-
return moment(date, '
|
|
9234
|
+
return moment(date, 'DD.MM.YYYY').toDate();
|
|
9235
9235
|
}
|
|
9236
|
-
let format = '
|
|
9236
|
+
let format = 'DD.MM.YYYY ';
|
|
9237
9237
|
switch (time.length) {
|
|
9238
9238
|
case 8:
|
|
9239
9239
|
format = format + 'HH:mm:ss';
|
|
@@ -9242,14 +9242,14 @@ class QdDateAdapter {
|
|
|
9242
9242
|
default:
|
|
9243
9243
|
format = format + 'HH:mm';
|
|
9244
9244
|
}
|
|
9245
|
-
return moment(`${date} ${time}`, format
|
|
9245
|
+
return moment(`${date} ${time}`, format).toDate();
|
|
9246
9246
|
}
|
|
9247
9247
|
/**
|
|
9248
9248
|
* Converts a localized date string into a Moment.js object.
|
|
9249
9249
|
* If the input is null or undefined, it returns undefined.
|
|
9250
9250
|
*/
|
|
9251
9251
|
static parseToMoment(formatted) {
|
|
9252
|
-
return formatted ? moment(formatted, '
|
|
9252
|
+
return formatted ? moment(formatted, 'DD.MM.YYYY').locale('de') : undefined;
|
|
9253
9253
|
}
|
|
9254
9254
|
/**
|
|
9255
9255
|
* Formats a Moment.js object into a localized date string.
|
|
@@ -9258,7 +9258,7 @@ class QdDateAdapter {
|
|
|
9258
9258
|
static formatToLocalizedDateString(momentObj) {
|
|
9259
9259
|
if (!momentObj)
|
|
9260
9260
|
return '';
|
|
9261
|
-
return momentObj.
|
|
9261
|
+
return momentObj.format('DD.MM.YYYY');
|
|
9262
9262
|
}
|
|
9263
9263
|
/**
|
|
9264
9264
|
* Formats a JavaScript Date object into a localized date string.
|
|
@@ -9283,7 +9283,7 @@ class QdDateAdapter {
|
|
|
9283
9283
|
* Returns true if the date is valid, otherwise false.
|
|
9284
9284
|
*/
|
|
9285
9285
|
static isLocalizedDateStringValid(formatted) {
|
|
9286
|
-
return moment(formatted, '
|
|
9286
|
+
return moment(formatted, 'DD.MM.YYYY', true).isValid();
|
|
9287
9287
|
}
|
|
9288
9288
|
/**
|
|
9289
9289
|
* Validates if a date-time string matches the Swiss `DD.MM.YYYY HH:mm:ss` format.
|
|
@@ -9339,9 +9339,8 @@ class QdCalendarComponent {
|
|
|
9339
9339
|
this.setWeekdays();
|
|
9340
9340
|
this.todayDate = moment();
|
|
9341
9341
|
this.months = moment.months();
|
|
9342
|
-
|
|
9343
|
-
|
|
9344
|
-
: this.todayDate).year());
|
|
9342
|
+
const parsedSelected = QdDateAdapter.parseToMoment(this.selectedDate);
|
|
9343
|
+
this.years = this.getYears((parsedSelected?.isValid() ? parsedSelected : this.todayDate).year());
|
|
9345
9344
|
this.setCurrentDate();
|
|
9346
9345
|
this.generateCalendar(this.currentDate);
|
|
9347
9346
|
}
|
|
@@ -9431,9 +9430,8 @@ class QdCalendarComponent {
|
|
|
9431
9430
|
return this.todayDate.isSame(momentObj, 'day');
|
|
9432
9431
|
}
|
|
9433
9432
|
setCurrentDate() {
|
|
9434
|
-
const
|
|
9435
|
-
|
|
9436
|
-
: this.todayDate);
|
|
9433
|
+
const parsedDate = QdDateAdapter.parseToMoment(this.selectedDate);
|
|
9434
|
+
const currentDate = (this.currentDate = parsedDate?.isValid() ? parsedDate : this.todayDate);
|
|
9437
9435
|
this.currentDate = currentDate;
|
|
9438
9436
|
this.selectedDate = QdDateAdapter.formatToLocalizedDateString(currentDate);
|
|
9439
9437
|
}
|
|
@@ -10995,6 +10993,7 @@ class QdInputComponent {
|
|
|
10995
10993
|
hasAutofocus;
|
|
10996
10994
|
hasOptions = false;
|
|
10997
10995
|
_value = { value: '' };
|
|
10996
|
+
_displayValue = '';
|
|
10998
10997
|
control;
|
|
10999
10998
|
_optionsResolver;
|
|
11000
10999
|
_subs = new Subscription();
|
|
@@ -11064,6 +11063,7 @@ class QdInputComponent {
|
|
|
11064
11063
|
}
|
|
11065
11064
|
writeValue(value) {
|
|
11066
11065
|
this._value = getValueWithUnit(value, this.config);
|
|
11066
|
+
this._displayValue = String(this._value.value ?? '');
|
|
11067
11067
|
}
|
|
11068
11068
|
setDisabledState(disabled) {
|
|
11069
11069
|
this.disabled = disabled;
|
|
@@ -11194,7 +11194,7 @@ class QdInputComponent {
|
|
|
11194
11194
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11195
11195
|
useExisting: QdInputComponent
|
|
11196
11196
|
}
|
|
11197
|
-
], 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) :
|
|
11197
|
+
], 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" }] });
|
|
11198
11198
|
}
|
|
11199
11199
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdInputComponent, decorators: [{
|
|
11200
11200
|
type: Component,
|
|
@@ -11212,7 +11212,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
11212
11212
|
provide: QD_FOCUSABLE_TOKEN,
|
|
11213
11213
|
useExisting: QdInputComponent
|
|
11214
11214
|
}
|
|
11215
|
-
], 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) :
|
|
11215
|
+
], 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"] }]
|
|
11216
11216
|
}], propDecorators: { formControlName: [{
|
|
11217
11217
|
type: Input
|
|
11218
11218
|
}], value: [{
|
|
@@ -11434,8 +11434,6 @@ class QdDatepickerComponent {
|
|
|
11434
11434
|
this.displayedDateTime = date ? QdDateAdapter.formatToDateTimeLocaleString(date, this.config?.enableSeconds) : '';
|
|
11435
11435
|
this.displayedTime = date ? QdDateAdapter.formatToTimeLocaleString(date, this.config?.enableSeconds) : '';
|
|
11436
11436
|
this.changeDetectorRef.detectChanges();
|
|
11437
|
-
this.valueChange.emit(date);
|
|
11438
|
-
this._onChange(date);
|
|
11439
11437
|
}
|
|
11440
11438
|
setDisabledState(disabled) {
|
|
11441
11439
|
this.disabled = disabled;
|
|
@@ -12873,7 +12871,7 @@ class QdValidators {
|
|
|
12873
12871
|
return ({ value }) => {
|
|
12874
12872
|
if (!value)
|
|
12875
12873
|
return null;
|
|
12876
|
-
const localizedFormat = moment().
|
|
12874
|
+
const localizedFormat = moment().format('DD.MM.YYYY');
|
|
12877
12875
|
const formattedErrorKey = { date: { key: errorKey, params: { format: localizedFormat } } };
|
|
12878
12876
|
if (value === 'Invalid Date')
|
|
12879
12877
|
return formattedErrorKey;
|
|
@@ -27178,6 +27176,39 @@ class QdFormGroupManagerService {
|
|
|
27178
27176
|
takeFormGroupsSnapshot() {
|
|
27179
27177
|
this._formGroups.forEach((fg, key) => this._formGroupsSnapshot.set(key, fg.getRawValue()));
|
|
27180
27178
|
}
|
|
27179
|
+
/**
|
|
27180
|
+
* Captures a deep-cloned snapshot of all current form values without mutating internal state.
|
|
27181
|
+
*
|
|
27182
|
+
* Used by framework orchestration code that needs to remember the "at click time" state of a form
|
|
27183
|
+
* so the baseline can later be committed to exactly that state — even if the user edits the form
|
|
27184
|
+
* while an async commit action is pending.
|
|
27185
|
+
*
|
|
27186
|
+
* Throws if any form value is not structured-cloneable (functions, symbols, DOM nodes).
|
|
27187
|
+
*/
|
|
27188
|
+
captureFormValues() {
|
|
27189
|
+
const captured = new Map();
|
|
27190
|
+
this._formGroups.forEach((fg, key) => {
|
|
27191
|
+
try {
|
|
27192
|
+
captured.set(key, structuredClone(fg.getRawValue()));
|
|
27193
|
+
}
|
|
27194
|
+
catch (err) {
|
|
27195
|
+
throw new Error(`QdFormGroupManagerService: captureFormValues() failed for group "${key}". ` +
|
|
27196
|
+
`Form values must be structured-cloneable. Non-cloneable values like functions, ` +
|
|
27197
|
+
`symbols, or DOM nodes are not supported. Original error: ${String(err)}`);
|
|
27198
|
+
}
|
|
27199
|
+
});
|
|
27200
|
+
return captured;
|
|
27201
|
+
}
|
|
27202
|
+
/**
|
|
27203
|
+
* Replaces the internal baseline snapshot with the provided values.
|
|
27204
|
+
*
|
|
27205
|
+
* Intended to be paired with `captureFormValues()` so that the baseline can be advanced to the
|
|
27206
|
+
* values present when a commit action was initiated — independent of whether the user edited the
|
|
27207
|
+
* form in the meantime.
|
|
27208
|
+
*/
|
|
27209
|
+
commitBaseline(values) {
|
|
27210
|
+
values.forEach((snapshot, key) => this._formGroupsSnapshot.set(key, snapshot));
|
|
27211
|
+
}
|
|
27181
27212
|
restoreFormGroupsFromSnapshot() {
|
|
27182
27213
|
this._formGroups.forEach((fg, key) => {
|
|
27183
27214
|
const snapshot = this._formGroupsSnapshot.get(key);
|
|
@@ -27289,6 +27320,122 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
27289
27320
|
type: Injectable
|
|
27290
27321
|
}] });
|
|
27291
27322
|
|
|
27323
|
+
/**
|
|
27324
|
+
* Intercepts router navigation when unsaved form changes exist on a QdPage.
|
|
27325
|
+
*
|
|
27326
|
+
* Provided per `QdPageComponent`. Activated automatically when the page enters an editable state
|
|
27327
|
+
* (create pages or inspect pages in edit mode). Deactivated when the page returns to view mode.
|
|
27328
|
+
*
|
|
27329
|
+
* #### When navigation is intercepted
|
|
27330
|
+
*
|
|
27331
|
+
* - A `NavigationStart` event occurs (browser back, shell back button, or programmatic navigation).
|
|
27332
|
+
* - The registered form groups report unsaved changes via `QdFormGroupManagerService.$hasValuesChanged()`.
|
|
27333
|
+
*
|
|
27334
|
+
* The navigation is cancelled and a confirmation dialog is shown. The user can either discard
|
|
27335
|
+
* changes and proceed or stay on the page.
|
|
27336
|
+
*
|
|
27337
|
+
* #### When navigation is allowed
|
|
27338
|
+
*
|
|
27339
|
+
* - No unsaved changes exist — the form is either pristine or the framework has advanced the
|
|
27340
|
+
* baseline after a successful commit action (Submit, Save, SaveDraft).
|
|
27341
|
+
* - The page switches to view mode via `deactivate()`.
|
|
27342
|
+
*
|
|
27343
|
+
* The service has no concept of "pending actions" or bypass windows. Framework actions advance the
|
|
27344
|
+
* baseline directly via `QdFormGroupManagerService.commitBaseline(...)`; cancel-discard flows reset
|
|
27345
|
+
* the baseline via `restoreFormGroupsFromSnapshot()`. Either way, the interceptor only observes the
|
|
27346
|
+
* resulting form state — there is no time window where a bypass is active.
|
|
27347
|
+
*/
|
|
27348
|
+
class QdPageNavigationInterceptorService {
|
|
27349
|
+
router = inject(Router);
|
|
27350
|
+
formGroupManager = inject(QdFormGroupManagerService);
|
|
27351
|
+
confirmationDialog = inject(QdConfirmationDialogOpenerService);
|
|
27352
|
+
_destroy$ = new Subject();
|
|
27353
|
+
_deactivate$ = new Subject();
|
|
27354
|
+
/**
|
|
27355
|
+
* Guards the re-dispatched navigation issued after the user confirms discard. While the dialog
|
|
27356
|
+
* is open and while the confirmed target is being re-dispatched, the router events must not
|
|
27357
|
+
* re-enter the interception pipeline — otherwise the dialog would open recursively.
|
|
27358
|
+
*/
|
|
27359
|
+
_bypassInterception = false;
|
|
27360
|
+
/**
|
|
27361
|
+
* URL of the navigation target accepted by the user in the most recent discard-confirm dialog.
|
|
27362
|
+
* Set by `navigateToConfirmedTarget()` and consumed once by `shouldIntercept()` when the
|
|
27363
|
+
* corresponding `NavigationStart` arrives.
|
|
27364
|
+
*/
|
|
27365
|
+
_confirmedTargetUrl;
|
|
27366
|
+
_confirmationMessage;
|
|
27367
|
+
ngOnDestroy() {
|
|
27368
|
+
this._confirmedTargetUrl = undefined;
|
|
27369
|
+
this._destroy$.next();
|
|
27370
|
+
this._destroy$.complete();
|
|
27371
|
+
this._deactivate$.complete();
|
|
27372
|
+
}
|
|
27373
|
+
/**
|
|
27374
|
+
* Starts intercepting navigation events. Replaces any previously active listener.
|
|
27375
|
+
*/
|
|
27376
|
+
activate(confirmationMessage) {
|
|
27377
|
+
this._confirmationMessage = confirmationMessage;
|
|
27378
|
+
this._deactivate$.next();
|
|
27379
|
+
this.listenForUnsavedNavigationAttempts();
|
|
27380
|
+
}
|
|
27381
|
+
/**
|
|
27382
|
+
* Stops intercepting and clears the pending confirmed-target bypass.
|
|
27383
|
+
*/
|
|
27384
|
+
deactivate() {
|
|
27385
|
+
this._deactivate$.next();
|
|
27386
|
+
this._confirmedTargetUrl = undefined;
|
|
27387
|
+
}
|
|
27388
|
+
/**
|
|
27389
|
+
* Runs the given action while temporarily suppressing navigation interception.
|
|
27390
|
+
*
|
|
27391
|
+
* Used by framework commit-action orchestration to wrap synchronous handler invocations and
|
|
27392
|
+
* post-commit `onSuccess` callbacks: any router navigation that occurs during `action()` is
|
|
27393
|
+
* passed through without raising the unsaved-changes dialog. Restoration happens in a `finally`
|
|
27394
|
+
* block, so the flag is released even if `action()` throws.
|
|
27395
|
+
*/
|
|
27396
|
+
executeWithBypass(action) {
|
|
27397
|
+
this._bypassInterception = true;
|
|
27398
|
+
try {
|
|
27399
|
+
action();
|
|
27400
|
+
}
|
|
27401
|
+
finally {
|
|
27402
|
+
this._bypassInterception = false;
|
|
27403
|
+
}
|
|
27404
|
+
}
|
|
27405
|
+
listenForUnsavedNavigationAttempts() {
|
|
27406
|
+
this.router.events
|
|
27407
|
+
.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$))
|
|
27408
|
+
.subscribe(({ targetUrl }) => this.navigateToConfirmedTarget(targetUrl));
|
|
27409
|
+
}
|
|
27410
|
+
shouldIntercept(event) {
|
|
27411
|
+
if (this._confirmedTargetUrl !== undefined && this._confirmedTargetUrl === event.url) {
|
|
27412
|
+
this._confirmedTargetUrl = undefined;
|
|
27413
|
+
return false;
|
|
27414
|
+
}
|
|
27415
|
+
return true;
|
|
27416
|
+
}
|
|
27417
|
+
checkForPendingChanges(event) {
|
|
27418
|
+
return this.formGroupManager.$hasValuesChanged().pipe(take$1(1), map$1(hasChanges => ({ event, hasChanges })));
|
|
27419
|
+
}
|
|
27420
|
+
cancelNavigationAndConfirm(event) {
|
|
27421
|
+
this._bypassInterception = true;
|
|
27422
|
+
void this.router.navigateByUrl(this.router.url, { skipLocationChange: true });
|
|
27423
|
+
return this.confirmationDialog
|
|
27424
|
+
.showDiscardConfirmDialog(this._confirmationMessage, 'page-navigation-confirmation')
|
|
27425
|
+
.pipe(map$1(confirmed => ({ confirmed, targetUrl: event.url })), finalize(() => (this._bypassInterception = false)));
|
|
27426
|
+
}
|
|
27427
|
+
navigateToConfirmedTarget(targetUrl) {
|
|
27428
|
+
this._bypassInterception = false;
|
|
27429
|
+
this._confirmedTargetUrl = targetUrl;
|
|
27430
|
+
void this.router.navigateByUrl(targetUrl);
|
|
27431
|
+
}
|
|
27432
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
27433
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService });
|
|
27434
|
+
}
|
|
27435
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, decorators: [{
|
|
27436
|
+
type: Injectable
|
|
27437
|
+
}] });
|
|
27438
|
+
|
|
27292
27439
|
class QdResolverTriggerService {
|
|
27293
27440
|
route = inject(ActivatedRoute, { optional: true });
|
|
27294
27441
|
shouldTriggerResolver(triggerOn) {
|
|
@@ -27338,6 +27485,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
27338
27485
|
class QdPageObjectHeaderComponent {
|
|
27339
27486
|
pageObjectResolver = inject(QD_PAGE_OBJECT_RESOLVER_TOKEN, { optional: true });
|
|
27340
27487
|
formGroupManagerService = inject(QdFormGroupManagerService, { optional: true });
|
|
27488
|
+
navigationInterceptor = inject(QdPageNavigationInterceptorService);
|
|
27341
27489
|
dialogComponent = inject(QdDialogComponent, { optional: true });
|
|
27342
27490
|
dialog = inject(QdDialogService);
|
|
27343
27491
|
confirmationDialogService = inject(QdConfirmationDialogOpenerService);
|
|
@@ -27502,13 +27650,39 @@ class QdPageObjectHeaderComponent {
|
|
|
27502
27650
|
});
|
|
27503
27651
|
}
|
|
27504
27652
|
save() {
|
|
27505
|
-
const
|
|
27653
|
+
const saveAction = this.saveButton;
|
|
27654
|
+
const applySuccess = (captured) => {
|
|
27506
27655
|
this.formGroupManagerService.cancelPendingAsyncValidation();
|
|
27507
27656
|
this.pageStoreService.toggleViewonly(true);
|
|
27508
|
-
|
|
27657
|
+
if (captured) {
|
|
27658
|
+
this.formGroupManagerService.commitBaseline(captured);
|
|
27659
|
+
}
|
|
27660
|
+
else {
|
|
27661
|
+
this.formGroupManagerService.takeFormGroupsSnapshot();
|
|
27662
|
+
}
|
|
27663
|
+
saveAction?.onSuccess?.();
|
|
27509
27664
|
};
|
|
27510
|
-
|
|
27511
|
-
|
|
27665
|
+
if (!saveAction?.handler) {
|
|
27666
|
+
this.navigationInterceptor.executeWithBypass(() => applySuccess(null));
|
|
27667
|
+
return;
|
|
27668
|
+
}
|
|
27669
|
+
const captured = this.formGroupManagerService.captureFormValues();
|
|
27670
|
+
let result;
|
|
27671
|
+
this.navigationInterceptor.executeWithBypass(() => {
|
|
27672
|
+
result = saveAction.handler(this.formGroupManagerService.getAllValues());
|
|
27673
|
+
});
|
|
27674
|
+
if (isObservable(result)) {
|
|
27675
|
+
result.pipe(take(1), takeUntil(this._destroyed$)).subscribe({
|
|
27676
|
+
next: ok => {
|
|
27677
|
+
if (ok)
|
|
27678
|
+
this.navigationInterceptor.executeWithBypass(() => applySuccess(captured));
|
|
27679
|
+
},
|
|
27680
|
+
error: err => console.error('QdPage save action observable errored — baseline not committed. Catch errors via catchError() in your handler.', err)
|
|
27681
|
+
});
|
|
27682
|
+
}
|
|
27683
|
+
else {
|
|
27684
|
+
this.navigationInterceptor.executeWithBypass(() => applySuccess(captured));
|
|
27685
|
+
}
|
|
27512
27686
|
}
|
|
27513
27687
|
changeContext(context, selection, event) {
|
|
27514
27688
|
event.stopPropagation();
|
|
@@ -27536,7 +27710,7 @@ class QdPageObjectHeaderComponent {
|
|
|
27536
27710
|
.subscribe();
|
|
27537
27711
|
}
|
|
27538
27712
|
initContexts() {
|
|
27539
|
-
this.contexts$ = this.contextService.contexts$.pipe(map(contexts => contexts.filter(context => context.selection || this.config.pageType === 'overview')), map(contexts => contexts
|
|
27713
|
+
this.contexts$ = this.contextService.contexts$.pipe(map(contexts => contexts.filter(context => context.selection || this.config.pageType === 'overview')), map(contexts => contexts.map(({ selection, context }) => ({
|
|
27540
27714
|
label: context.label.i18n,
|
|
27541
27715
|
value: Array.isArray(selection?.value)
|
|
27542
27716
|
? selection?.value.filter(item => item !== null && item !== undefined)
|
|
@@ -27547,7 +27721,7 @@ class QdPageObjectHeaderComponent {
|
|
|
27547
27721
|
selection: selection?.value ?? []
|
|
27548
27722
|
}))));
|
|
27549
27723
|
this.contexts$
|
|
27550
|
-
.pipe(takeUntil(this._destroyed$), tap(contexts => (this._availableContexts = contexts
|
|
27724
|
+
.pipe(takeUntil(this._destroyed$), tap(contexts => (this._availableContexts = contexts.length)))
|
|
27551
27725
|
.subscribe();
|
|
27552
27726
|
}
|
|
27553
27727
|
updateCustomActions() {
|
|
@@ -28566,126 +28740,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
|
|
|
28566
28740
|
type: Output
|
|
28567
28741
|
}] } });
|
|
28568
28742
|
|
|
28569
|
-
/**
|
|
28570
|
-
* Intercepts router navigation when unsaved form changes exist on a QdPage.
|
|
28571
|
-
*
|
|
28572
|
-
* Provided per `QdPageComponent`. Activated automatically when the page enters an editable state
|
|
28573
|
-
* (create pages or inspect pages in edit mode). Deactivated when the page returns to view mode.
|
|
28574
|
-
*
|
|
28575
|
-
* #### When navigation is intercepted
|
|
28576
|
-
*
|
|
28577
|
-
* - The user has unsaved form changes (tracked via `QdFormGroupManagerService`).
|
|
28578
|
-
* - A `NavigationStart` event occurs (browser back, shell back button, or programmatic navigation).
|
|
28579
|
-
*
|
|
28580
|
-
* The current navigation is cancelled, and a confirmation dialog is shown. The user can either
|
|
28581
|
-
* discard changes and proceed or cancel and stay on the page.
|
|
28582
|
-
*
|
|
28583
|
-
* #### When navigation is allowed
|
|
28584
|
-
*
|
|
28585
|
-
* - No unsaved changes exist — navigation proceeds silently.
|
|
28586
|
-
* - A framework action (Submit, SaveDraft) wraps its handler via `executeWithBypass()`.
|
|
28587
|
-
* - A confirmed discard sets `allowNextNavigation()` before the cancel handler navigates.
|
|
28588
|
-
* - The page switches to view mode via `deactivate()`.
|
|
28589
|
-
*
|
|
28590
|
-
* Custom actions defined by the application are not bypassed. If a custom action navigates away
|
|
28591
|
-
* while unsaved changes exist, the confirmation dialog is shown.
|
|
28592
|
-
*/
|
|
28593
|
-
class QdPageNavigationInterceptorService {
|
|
28594
|
-
router = inject(Router);
|
|
28595
|
-
formGroupManager = inject(QdFormGroupManagerService);
|
|
28596
|
-
confirmationDialog = inject(QdConfirmationDialogOpenerService);
|
|
28597
|
-
_destroy$ = new Subject();
|
|
28598
|
-
_deactivate$ = new Subject();
|
|
28599
|
-
_bypassInterception = false;
|
|
28600
|
-
_allowedTargetUrls = new Set();
|
|
28601
|
-
_confirmationMessage;
|
|
28602
|
-
ngOnDestroy() {
|
|
28603
|
-
this._allowedTargetUrls.clear();
|
|
28604
|
-
this._destroy$.next();
|
|
28605
|
-
this._destroy$.complete();
|
|
28606
|
-
this._deactivate$.complete();
|
|
28607
|
-
}
|
|
28608
|
-
/**
|
|
28609
|
-
* Starts intercepting navigation events. Replaces any previously active listener.
|
|
28610
|
-
*/
|
|
28611
|
-
activate(confirmationMessage) {
|
|
28612
|
-
this._confirmationMessage = confirmationMessage;
|
|
28613
|
-
this._deactivate$.next();
|
|
28614
|
-
this.listenForUnsavedNavigationAttempts();
|
|
28615
|
-
}
|
|
28616
|
-
/**
|
|
28617
|
-
* Stops intercepting and clears all pending URL bypasses.
|
|
28618
|
-
*/
|
|
28619
|
-
deactivate() {
|
|
28620
|
-
this._deactivate$.next();
|
|
28621
|
-
this._allowedTargetUrls.clear();
|
|
28622
|
-
}
|
|
28623
|
-
/**
|
|
28624
|
-
* Whitelists the next navigation so it bypasses interception.
|
|
28625
|
-
* Without a URL, any next navigation is bypassed (wildcard). With a URL, only that
|
|
28626
|
-
* specific navigation is bypassed — non-matching navigations are still intercepted.
|
|
28627
|
-
*/
|
|
28628
|
-
allowNextNavigation(targetUrl) {
|
|
28629
|
-
this._allowedTargetUrls.add(targetUrl ?? '*');
|
|
28630
|
-
}
|
|
28631
|
-
/**
|
|
28632
|
-
* Executes the callback with interception temporarily disabled.
|
|
28633
|
-
* The callback must navigate synchronously — async navigation after the callback returns
|
|
28634
|
-
* will not be bypassed. This works because Angular's router emits NavigationStart
|
|
28635
|
-
* synchronously within the navigateByUrl() / navigate() call.
|
|
28636
|
-
*/
|
|
28637
|
-
executeWithBypass(fn) {
|
|
28638
|
-
this._bypassInterception = true;
|
|
28639
|
-
try {
|
|
28640
|
-
fn();
|
|
28641
|
-
}
|
|
28642
|
-
finally {
|
|
28643
|
-
this._bypassInterception = false;
|
|
28644
|
-
}
|
|
28645
|
-
}
|
|
28646
|
-
listenForUnsavedNavigationAttempts() {
|
|
28647
|
-
this.router.events
|
|
28648
|
-
.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$))
|
|
28649
|
-
.subscribe(({ targetUrl }) => this.navigateToConfirmedTarget(targetUrl));
|
|
28650
|
-
}
|
|
28651
|
-
shouldIntercept(event) {
|
|
28652
|
-
if (this._allowedTargetUrls.has('*')) {
|
|
28653
|
-
this._allowedTargetUrls.clear();
|
|
28654
|
-
return false;
|
|
28655
|
-
}
|
|
28656
|
-
if (this._allowedTargetUrls.has(event.url)) {
|
|
28657
|
-
this._allowedTargetUrls.delete(event.url);
|
|
28658
|
-
return false;
|
|
28659
|
-
}
|
|
28660
|
-
return true;
|
|
28661
|
-
}
|
|
28662
|
-
checkForPendingChanges(event) {
|
|
28663
|
-
return this.formGroupManager.$hasValuesChanged().pipe(take$1(1), map$1(hasChanges => ({ event, hasChanges })));
|
|
28664
|
-
}
|
|
28665
|
-
cancelNavigationAndConfirm(event) {
|
|
28666
|
-
this._bypassInterception = true;
|
|
28667
|
-
void this.router.navigateByUrl(this.router.url, { skipLocationChange: true });
|
|
28668
|
-
return this.confirmationDialog
|
|
28669
|
-
.showDiscardConfirmDialog(this._confirmationMessage, 'page-navigation-confirmation')
|
|
28670
|
-
.pipe(map$1(confirmed => ({ confirmed, targetUrl: event.url })), finalize(() => (this._bypassInterception = false)));
|
|
28671
|
-
}
|
|
28672
|
-
navigateToConfirmedTarget(targetUrl) {
|
|
28673
|
-
this._bypassInterception = false;
|
|
28674
|
-
this._allowedTargetUrls.add(targetUrl);
|
|
28675
|
-
void this.router.navigateByUrl(targetUrl);
|
|
28676
|
-
}
|
|
28677
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
28678
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService });
|
|
28679
|
-
}
|
|
28680
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPageNavigationInterceptorService, decorators: [{
|
|
28681
|
-
type: Injectable
|
|
28682
|
-
}] });
|
|
28683
|
-
|
|
28684
28743
|
class QdPageSubmitActionService {
|
|
28685
28744
|
footerService = inject(QdPageFooterService);
|
|
28686
28745
|
formGroupManagerService = inject(QdFormGroupManagerService);
|
|
28746
|
+
navigationInterceptor = inject(QdPageNavigationInterceptorService);
|
|
28687
28747
|
_labelI18n = 'i18n.qd.page.footer.submit';
|
|
28688
|
-
|
|
28748
|
+
_submitAction;
|
|
28689
28749
|
_isVisible = true;
|
|
28690
28750
|
_destroyed$ = new Subject();
|
|
28691
28751
|
_cancelTrackFormValidity$ = new Subject();
|
|
@@ -28699,9 +28759,9 @@ class QdPageSubmitActionService {
|
|
|
28699
28759
|
this._isVisible = isVisible;
|
|
28700
28760
|
this.configureSubmitAction(pageTypeConfig.submit);
|
|
28701
28761
|
}
|
|
28702
|
-
configureSubmitAction(
|
|
28703
|
-
this._labelI18n =
|
|
28704
|
-
this.
|
|
28762
|
+
configureSubmitAction(action) {
|
|
28763
|
+
this._labelI18n = action.label?.i18n || 'i18n.qd.page.footer.submit';
|
|
28764
|
+
this._submitAction = action;
|
|
28705
28765
|
this.registerSubmitAction();
|
|
28706
28766
|
this.trackFormValidity();
|
|
28707
28767
|
}
|
|
@@ -28711,7 +28771,7 @@ class QdPageSubmitActionService {
|
|
|
28711
28771
|
key: 'submit',
|
|
28712
28772
|
action: {
|
|
28713
28773
|
titleI18n: this._labelI18n,
|
|
28714
|
-
handler: this.
|
|
28774
|
+
handler: () => this.executeSubmit(),
|
|
28715
28775
|
isDisabled: true,
|
|
28716
28776
|
isVisible: this._isVisible,
|
|
28717
28777
|
type: QdFooterActionType.Primary
|
|
@@ -28719,12 +28779,33 @@ class QdPageSubmitActionService {
|
|
|
28719
28779
|
}
|
|
28720
28780
|
]);
|
|
28721
28781
|
}
|
|
28722
|
-
|
|
28723
|
-
|
|
28724
|
-
|
|
28725
|
-
|
|
28726
|
-
|
|
28727
|
-
|
|
28782
|
+
executeSubmit() {
|
|
28783
|
+
const action = this._submitAction;
|
|
28784
|
+
if (!action?.handler)
|
|
28785
|
+
return;
|
|
28786
|
+
const values = this.formGroupManagerService.hasFormGroups()
|
|
28787
|
+
? this.formGroupManagerService.getAllValues()
|
|
28788
|
+
: undefined;
|
|
28789
|
+
const captured = this.formGroupManagerService.captureFormValues();
|
|
28790
|
+
let result;
|
|
28791
|
+
this.navigationInterceptor.executeWithBypass(() => {
|
|
28792
|
+
result = action.handler(values);
|
|
28793
|
+
});
|
|
28794
|
+
if (isObservable(result)) {
|
|
28795
|
+
result.pipe(take(1), takeUntil(this._destroyed$)).subscribe({
|
|
28796
|
+
next: ok => {
|
|
28797
|
+
if (!ok)
|
|
28798
|
+
return;
|
|
28799
|
+
this.formGroupManagerService.commitBaseline(captured);
|
|
28800
|
+
this.navigationInterceptor.executeWithBypass(() => action.onSuccess?.());
|
|
28801
|
+
},
|
|
28802
|
+
error: err => console.error('QdPage commit action observable errored — baseline not committed. Catch errors via catchError() in your handler.', err)
|
|
28803
|
+
});
|
|
28804
|
+
}
|
|
28805
|
+
else {
|
|
28806
|
+
this.formGroupManagerService.commitBaseline(captured);
|
|
28807
|
+
this.navigationInterceptor.executeWithBypass(() => action.onSuccess?.());
|
|
28808
|
+
}
|
|
28728
28809
|
}
|
|
28729
28810
|
trackFormValidity() {
|
|
28730
28811
|
this._cancelTrackFormValidity$.next();
|
|
@@ -28739,7 +28820,7 @@ class QdPageSubmitActionService {
|
|
|
28739
28820
|
key: 'submit',
|
|
28740
28821
|
action: {
|
|
28741
28822
|
titleI18n: this._labelI18n,
|
|
28742
|
-
handler: this.
|
|
28823
|
+
handler: () => this.executeSubmit(),
|
|
28743
28824
|
isDisabled: !isValid,
|
|
28744
28825
|
isVisible: this._isVisible,
|
|
28745
28826
|
type: QdFooterActionType.Primary
|
|
@@ -28863,7 +28944,15 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
|
|
|
28863
28944
|
* handler: () => handleCancel()
|
|
28864
28945
|
* },
|
|
28865
28946
|
* save: {
|
|
28866
|
-
* handler: (
|
|
28947
|
+
* handler: () => saveApi.save(form.value).pipe(
|
|
28948
|
+
* tap(result => notifications.success('Saved')),
|
|
28949
|
+
* map(() => true),
|
|
28950
|
+
* catchError(err => {
|
|
28951
|
+
* notifications.showError(err);
|
|
28952
|
+
* return of(false);
|
|
28953
|
+
* })
|
|
28954
|
+
* ),
|
|
28955
|
+
* onSuccess: () => router.navigate(['/overview'])
|
|
28867
28956
|
* }
|
|
28868
28957
|
* }
|
|
28869
28958
|
* };
|
|
@@ -28981,7 +29070,8 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
|
|
|
28981
29070
|
* pageType: 'create',
|
|
28982
29071
|
* pageTypeConfig: {
|
|
28983
29072
|
* submit: {
|
|
28984
|
-
* handler: (formValues) =>
|
|
29073
|
+
* handler: (formValues) => createApi.create(formValues).pipe(map(() => true)),
|
|
29074
|
+
* onSuccess: () => router.navigate(['/items'])
|
|
28985
29075
|
* }
|
|
28986
29076
|
* }
|
|
28987
29077
|
* };
|
|
@@ -29074,7 +29164,14 @@ const SAFE_BOTTOM_OFFSET_PX = 64;
|
|
|
29074
29164
|
* handler: () => handleCancel()
|
|
29075
29165
|
* },
|
|
29076
29166
|
* save: {
|
|
29077
|
-
* handler: (formValues) =>
|
|
29167
|
+
* handler: (formValues) => saveApi.save(formValues).pipe(
|
|
29168
|
+
* map(() => true),
|
|
29169
|
+
* catchError(err => {
|
|
29170
|
+
* notifications.showError(err);
|
|
29171
|
+
* return of(false);
|
|
29172
|
+
* })
|
|
29173
|
+
* ),
|
|
29174
|
+
* onSuccess: () => router.navigate(['/overview'])
|
|
29078
29175
|
* }
|
|
29079
29176
|
* }
|
|
29080
29177
|
* };
|
|
@@ -29244,11 +29341,14 @@ class QdPageComponent {
|
|
|
29244
29341
|
const action = pageTypeConfig[actionKey];
|
|
29245
29342
|
if (!action)
|
|
29246
29343
|
continue;
|
|
29344
|
+
const handler = actionKey === 'cancel'
|
|
29345
|
+
? () => action.handler()
|
|
29346
|
+
: this.generateCommitActionHandler(action);
|
|
29247
29347
|
actions.push({
|
|
29248
29348
|
actionKey,
|
|
29249
29349
|
partialAction: {
|
|
29250
29350
|
...(action?.label?.i18n ? { titleI18n: action.label.i18n } : {}),
|
|
29251
|
-
handler
|
|
29351
|
+
handler
|
|
29252
29352
|
}
|
|
29253
29353
|
});
|
|
29254
29354
|
}
|
|
@@ -29265,11 +29365,7 @@ class QdPageComponent {
|
|
|
29265
29365
|
partialAction: {
|
|
29266
29366
|
handler: hasChanged
|
|
29267
29367
|
? () => this.setupCancelConfirmation()
|
|
29268
|
-
: () =>
|
|
29269
|
-
this.navigationInterceptor.executeWithBypass(() => {
|
|
29270
|
-
this.config?.pageTypeConfig?.cancel?.handler();
|
|
29271
|
-
});
|
|
29272
|
-
}
|
|
29368
|
+
: () => this.config?.pageTypeConfig?.cancel?.handler()
|
|
29273
29369
|
}
|
|
29274
29370
|
}
|
|
29275
29371
|
]);
|
|
@@ -29281,9 +29377,9 @@ class QdPageComponent {
|
|
|
29281
29377
|
{
|
|
29282
29378
|
key: 'saveDraft',
|
|
29283
29379
|
action: {
|
|
29284
|
-
titleI18n: pageTypeConfig.saveDraft
|
|
29380
|
+
titleI18n: pageTypeConfig.saveDraft.label?.i18n ?? 'i18n.qd.page.footer.saveDraft',
|
|
29285
29381
|
type: QdFooterActionType.Secondary,
|
|
29286
|
-
handler: this.
|
|
29382
|
+
handler: this.generateCommitActionHandler(pageTypeConfig.saveDraft),
|
|
29287
29383
|
isVisible: true,
|
|
29288
29384
|
isDisabled: false
|
|
29289
29385
|
}
|
|
@@ -29310,12 +29406,31 @@ class QdPageComponent {
|
|
|
29310
29406
|
if (this._isInitialized)
|
|
29311
29407
|
this.operationModeChanged.emit(mode);
|
|
29312
29408
|
}
|
|
29313
|
-
|
|
29409
|
+
generateCommitActionHandler(action) {
|
|
29314
29410
|
return (...args) => {
|
|
29315
|
-
if (!handler)
|
|
29411
|
+
if (!action?.handler)
|
|
29316
29412
|
return;
|
|
29317
29413
|
const values = this.formGroupManagerService.hasFormGroups() ? this.formGroupManagerService.getAllValues() : args;
|
|
29318
|
-
this.
|
|
29414
|
+
const captured = this.formGroupManagerService.captureFormValues();
|
|
29415
|
+
let result;
|
|
29416
|
+
this.navigationInterceptor.executeWithBypass(() => {
|
|
29417
|
+
result = action.handler(values);
|
|
29418
|
+
});
|
|
29419
|
+
if (isObservable(result)) {
|
|
29420
|
+
result.pipe(take(1), takeUntil(this._destroyed$)).subscribe({
|
|
29421
|
+
next: ok => {
|
|
29422
|
+
if (!ok)
|
|
29423
|
+
return;
|
|
29424
|
+
this.formGroupManagerService.commitBaseline(captured);
|
|
29425
|
+
this.navigationInterceptor.executeWithBypass(() => action.onSuccess?.());
|
|
29426
|
+
},
|
|
29427
|
+
error: err => console.error('QdPage commit action observable errored — baseline not committed. Catch errors via catchError() in your handler.', err)
|
|
29428
|
+
});
|
|
29429
|
+
}
|
|
29430
|
+
else {
|
|
29431
|
+
this.formGroupManagerService.commitBaseline(captured);
|
|
29432
|
+
this.navigationInterceptor.executeWithBypass(() => action.onSuccess?.());
|
|
29433
|
+
}
|
|
29319
29434
|
};
|
|
29320
29435
|
}
|
|
29321
29436
|
setupCancelConfirmation() {
|
|
@@ -29324,8 +29439,8 @@ class QdPageComponent {
|
|
|
29324
29439
|
.showDiscardConfirmDialog(cancelConfig?.confirmationMessage, this.testId + '-cancel-confirmation')
|
|
29325
29440
|
.pipe(filter$1(result => result), takeUntil(this._destroyed$))
|
|
29326
29441
|
.subscribe(() => {
|
|
29442
|
+
this.formGroupManagerService.restoreFormGroupsFromSnapshot();
|
|
29327
29443
|
cancelConfig?.handler?.();
|
|
29328
|
-
this.navigationInterceptor.allowNextNavigation();
|
|
29329
29444
|
});
|
|
29330
29445
|
}
|
|
29331
29446
|
initSubmitValidation() {
|
|
@@ -29333,7 +29448,7 @@ class QdPageComponent {
|
|
|
29333
29448
|
this.formGroupManagerService
|
|
29334
29449
|
.$areFormGroupsValid()
|
|
29335
29450
|
.pipe(takeUntil(this._cancelSubmitValidation$), takeUntil(this._destroyed$), tap(isValid => {
|
|
29336
|
-
const submitDisabledInfoText = this.config.
|
|
29451
|
+
const submitDisabledInfoText = this.config.pageTypeConfig?.submit?.disabledInfo;
|
|
29337
29452
|
this.footerService.updateActions([
|
|
29338
29453
|
{
|
|
29339
29454
|
actionKey: 'submit',
|