@meshmakers/shared-ui 3.3.520 → 3.3.540
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, signal, ViewChild, Input, Component, Injectable, NgZone, Pipe, EventEmitter, ChangeDetectorRef, Directive, Output, ChangeDetectionStrategy, InjectionToken, HostListener, ElementRef, forwardRef, computed, effect, makeEnvironmentProviders } from '@angular/core';
|
|
2
|
+
import { inject, signal, ViewChild, Input, Component, Injectable, NgZone, Pipe, EventEmitter, ChangeDetectorRef, Directive, Output, ChangeDetectionStrategy, InjectionToken, HostListener, TemplateRef, ContentChild, ElementRef, forwardRef, computed, effect, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import * as i3$2 from '@progress/kendo-angular-dialog';
|
|
4
4
|
import { DialogContentBase, DialogRef, DialogActionsComponent, DialogService, WindowRef, WindowService, WindowModule, WindowCloseResult, DialogModule } from '@progress/kendo-angular-dialog';
|
|
5
5
|
import { NotificationService } from '@progress/kendo-angular-notification';
|
|
@@ -236,28 +236,29 @@ class ConfirmationWindowComponent extends DialogContentBase {
|
|
|
236
236
|
}
|
|
237
237
|
ngOnInit() {
|
|
238
238
|
if (this.data) {
|
|
239
|
+
const labels = this.data.buttonLabels;
|
|
239
240
|
if (this.data.dialogType === DialogType.OkCancel) {
|
|
240
|
-
this.button1Text = 'OK';
|
|
241
|
+
this.button1Text = labels?.ok ?? 'OK';
|
|
241
242
|
this.button1Result = ButtonTypes.Ok;
|
|
242
|
-
this.button2Text = 'Cancel';
|
|
243
|
+
this.button2Text = labels?.cancel ?? 'Cancel';
|
|
243
244
|
this.button2Result = ButtonTypes.Cancel;
|
|
244
245
|
}
|
|
245
246
|
else if (this.data.dialogType === DialogType.YesNoCancel) {
|
|
246
|
-
this.button1Text = 'Yes';
|
|
247
|
+
this.button1Text = labels?.yes ?? 'Yes';
|
|
247
248
|
this.button1Result = ButtonTypes.Yes;
|
|
248
|
-
this.button2Text = 'No';
|
|
249
|
+
this.button2Text = labels?.no ?? 'No';
|
|
249
250
|
this.button2Result = ButtonTypes.No;
|
|
250
|
-
this.button3Text = 'Cancel';
|
|
251
|
+
this.button3Text = labels?.cancel ?? 'Cancel';
|
|
251
252
|
this.button3Result = ButtonTypes.Cancel;
|
|
252
253
|
}
|
|
253
254
|
else if (this.data.dialogType === DialogType.Ok) {
|
|
254
|
-
this.button1Text = 'OK';
|
|
255
|
+
this.button1Text = labels?.ok ?? 'OK';
|
|
255
256
|
this.button1Result = ButtonTypes.Ok;
|
|
256
257
|
}
|
|
257
258
|
else {
|
|
258
|
-
this.button1Text = 'Yes';
|
|
259
|
+
this.button1Text = labels?.yes ?? 'Yes';
|
|
259
260
|
this.button1Result = ButtonTypes.Yes;
|
|
260
|
-
this.button2Text = 'No';
|
|
261
|
+
this.button2Text = labels?.no ?? 'No';
|
|
261
262
|
this.button2Result = ButtonTypes.No;
|
|
262
263
|
}
|
|
263
264
|
}
|
|
@@ -287,8 +288,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
287
288
|
|
|
288
289
|
class ConfirmationService {
|
|
289
290
|
dialogService = inject(DialogService);
|
|
290
|
-
async showYesNoConfirmationDialog(title, message, cssClass) {
|
|
291
|
-
const dialogRef = this.openDialog(title, message, DialogType.YesNo, cssClass);
|
|
291
|
+
async showYesNoConfirmationDialog(title, message, cssClass, buttonLabels) {
|
|
292
|
+
const dialogRef = this.openDialog(title, message, DialogType.YesNo, cssClass, buttonLabels);
|
|
292
293
|
const result = await firstValueFrom(dialogRef.result);
|
|
293
294
|
if (result instanceof ConfirmationWindowResult) {
|
|
294
295
|
return result.result === ButtonTypes.Yes;
|
|
@@ -297,8 +298,8 @@ class ConfirmationService {
|
|
|
297
298
|
return false;
|
|
298
299
|
}
|
|
299
300
|
}
|
|
300
|
-
async showYesNoCancelConfirmationDialog(title, message) {
|
|
301
|
-
const dialogRef = this.openDialog(title, message, DialogType.YesNoCancel);
|
|
301
|
+
async showYesNoCancelConfirmationDialog(title, message, buttonLabels) {
|
|
302
|
+
const dialogRef = this.openDialog(title, message, DialogType.YesNoCancel, undefined, buttonLabels);
|
|
302
303
|
const result = await firstValueFrom(dialogRef.result);
|
|
303
304
|
if (result instanceof ConfirmationWindowResult) {
|
|
304
305
|
return result;
|
|
@@ -331,7 +332,7 @@ class ConfirmationService {
|
|
|
331
332
|
return false;
|
|
332
333
|
}
|
|
333
334
|
}
|
|
334
|
-
openDialog(title, message, dialogType, cssClass) {
|
|
335
|
+
openDialog(title, message, dialogType, cssClass, buttonLabels) {
|
|
335
336
|
const dialogRef = this.dialogService.open({
|
|
336
337
|
title,
|
|
337
338
|
content: ConfirmationWindowComponent,
|
|
@@ -341,7 +342,8 @@ class ConfirmationService {
|
|
|
341
342
|
component.data = {
|
|
342
343
|
title,
|
|
343
344
|
message,
|
|
344
|
-
dialogType
|
|
345
|
+
dialogType,
|
|
346
|
+
buttonLabels,
|
|
345
347
|
};
|
|
346
348
|
return dialogRef;
|
|
347
349
|
}
|
|
@@ -2049,11 +2051,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
2049
2051
|
args: ['window:beforeunload', ['$event']]
|
|
2050
2052
|
}] } });
|
|
2051
2053
|
|
|
2054
|
+
class FormTitleExtraDirective {
|
|
2055
|
+
templateRef = inject((TemplateRef));
|
|
2056
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormTitleExtraDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
2057
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: FormTitleExtraDirective, isStandalone: true, selector: "[mmFormTitleExtra]", ngImport: i0 });
|
|
2058
|
+
}
|
|
2059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: FormTitleExtraDirective, decorators: [{
|
|
2060
|
+
type: Directive,
|
|
2061
|
+
args: [{ selector: '[mmFormTitleExtra]', standalone: true }]
|
|
2062
|
+
}] });
|
|
2052
2063
|
// Default responsive breakpoint for 2-column to 1-column
|
|
2053
2064
|
const DEFAULT_RESPONSIVE_COLSPAN = [
|
|
2054
2065
|
{ maxWidth: 768, value: 2 } // Full width on mobile
|
|
2055
2066
|
];
|
|
2056
2067
|
class BaseFormComponent {
|
|
2068
|
+
titleExtra;
|
|
2057
2069
|
form;
|
|
2058
2070
|
config = {
|
|
2059
2071
|
showCard: true,
|
|
@@ -2069,21 +2081,36 @@ class BaseFormComponent {
|
|
|
2069
2081
|
get title() {
|
|
2070
2082
|
if (this.config.title)
|
|
2071
2083
|
return this.config.title;
|
|
2084
|
+
const msgs = this.config.messages;
|
|
2072
2085
|
if (this.config.isViewMode)
|
|
2073
|
-
return 'View Details';
|
|
2074
|
-
return this.config.isEditMode ? 'Edit' : 'New';
|
|
2086
|
+
return msgs?.viewTitle ?? 'View Details';
|
|
2087
|
+
return this.config.isEditMode ? (msgs?.editTitle ?? 'Edit') : (msgs?.newTitle ?? 'New');
|
|
2075
2088
|
}
|
|
2076
2089
|
get saveButtonText() {
|
|
2077
2090
|
if (this.config.saveButtonText)
|
|
2078
2091
|
return this.config.saveButtonText;
|
|
2092
|
+
const msgs = this.config.messages;
|
|
2079
2093
|
if (this.config.isSaving)
|
|
2080
|
-
return 'Saving...';
|
|
2081
|
-
return this.config.isEditMode ? 'Update' : 'Create';
|
|
2094
|
+
return msgs?.savingText ?? 'Saving...';
|
|
2095
|
+
return this.config.isEditMode ? (msgs?.updateText ?? 'Update') : (msgs?.createText ?? 'Create');
|
|
2082
2096
|
}
|
|
2083
2097
|
get cancelButtonText() {
|
|
2084
2098
|
if (this.config.cancelButtonText)
|
|
2085
2099
|
return this.config.cancelButtonText;
|
|
2086
|
-
|
|
2100
|
+
const msgs = this.config.messages;
|
|
2101
|
+
return this.config.isViewMode ? (msgs?.backText ?? 'Back') : (msgs?.cancelText ?? 'Cancel');
|
|
2102
|
+
}
|
|
2103
|
+
get unsavedChangesText() {
|
|
2104
|
+
return this.config.messages?.unsavedChangesText ?? 'Unsaved Changes';
|
|
2105
|
+
}
|
|
2106
|
+
get loadingText() {
|
|
2107
|
+
return this.config.messages?.loadingText ?? 'Loading...';
|
|
2108
|
+
}
|
|
2109
|
+
get modifiedText() {
|
|
2110
|
+
return this.config.messages?.modifiedText ?? 'MODIFIED';
|
|
2111
|
+
}
|
|
2112
|
+
get readyText() {
|
|
2113
|
+
return this.config.messages?.readyText ?? 'READY';
|
|
2087
2114
|
}
|
|
2088
2115
|
get showSaveButton() {
|
|
2089
2116
|
return !this.config.isViewMode && !this.config.isLoading;
|
|
@@ -2120,15 +2147,18 @@ class BaseFormComponent {
|
|
|
2120
2147
|
return this.form?.dirty ?? false;
|
|
2121
2148
|
}
|
|
2122
2149
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2123
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: BaseFormComponent, isStandalone: true, selector: "mm-base-form", inputs: { form: "form", config: "config" }, outputs: { saveForm: "saveForm", cancelForm: "cancelForm" }, providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: BaseFormComponent }], hostDirectives: [{ directive: UnsavedChangesDirective }], ngImport: i0, template: "<div class=\"mm-base-form-container\" [class.with-card]=\"config.showCard\" [class.without-card]=\"!config.showCard\">\n <!-- Title (no card mode) -->\n <div *ngIf=\"!config.showCard && title\" class=\"mm-form-title-row mm-form-title-standalone\">\n <h2 class=\"mm-form-title\">{{ title }}</h2>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">Unsaved Changes</span>\n </div>\n\n <!-- Main form wrapper - styled as card or plain based on CSS class -->\n <div class=\"mm-form-wrapper\" [style.maxWidth]=\"config.showCard ? (config.cardWidth || '800px') : null\">\n <!-- Card header (only in card mode) -->\n <div *ngIf=\"config.showCard && title\" class=\"mm-form-header\">\n <h2 class=\"mm-form-title\">{{ title }}</h2>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">Unsaved Changes</span>\n </div>\n\n <!-- Form body with content projection -->\n <div class=\"mm-form-body\">\n <div *ngIf=\"config.isLoading && config.showLoadingOverlay\" class=\"mm-loading-overlay\">\n <div class=\"k-loader k-loader-lg\"></div>\n <p>Loading...</p>\n </div>\n <ng-content></ng-content>\n </div>\n\n <!-- Form actions -->\n <div class=\"mm-form-actions\">\n <!-- Status indicator (left side) -->\n <div class=\"mm-form-status\">\n <span class=\"mm-status-indicator\" [class.modified]=\"config.hasChanges\">\n <span class=\"mm-status-dot\"></span>\n <span class=\"mm-status-text\">{{ config.hasChanges ? 'MODIFIED' : 'READY' }}</span>\n </span>\n </div>\n\n <!-- Action buttons (right side) -->\n <div class=\"mm-form-buttons\">\n <button\n *ngIf=\"showSaveButton\"\n kendoButton\n type=\"submit\"\n [svgIcon]=\"saveIcon\"\n themeColor=\"primary\"\n [disabled]=\"saveButtonDisabled\"\n (click)=\"onSave()\">\n {{ saveButtonText }}\n </button>\n <button\n *ngIf=\"showCancelButton\"\n kendoButton\n type=\"button\"\n [svgIcon]=\"cancelIcon\"\n [disabled]=\"!!config.isSaving\"\n (click)=\"onCancel()\">\n {{ cancelButtonText }}\n </button>\n <ng-content select=\"[additionalActions]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--mm-form-bg: var(--kendo-color-surface);--mm-form-bg-alt: var(--kendo-color-surface-alt);--mm-form-bg-elevated: var(--kendo-color-surface-alt);--mm-form-border: var(--kendo-color-border);--mm-form-border-subtle: var(--kendo-color-border-alt, var(--mm-form-border));--mm-form-text: var(--kendo-color-on-app-surface);--mm-form-text-subtle: var(--kendo-color-subtle);--mm-form-text-label: var(--kendo-color-on-app-surface);--mm-form-accent: var(--kendo-color-primary);--mm-form-error: var(--kendo-color-error);--mm-form-status-ready: #37b400;--mm-form-status-modified: #da9162;--mm-form-padding: 1.5rem;--mm-form-padding-sm: 1rem;--mm-form-gap: .5rem;--mm-form-radius: 4px;--mm-form-shadow: 0 2px 6px rgba(0, 0, 0, .15);--mm-form-overlay-bg: var(--kendo-color-surface)}.mm-base-form-container{padding:var(--mm-form-padding);height:100%;overflow:auto}.mm-base-form-container .mm-form-wrapper{margin:0 auto}.mm-base-form-container.with-card .mm-form-wrapper{background:var(--mm-form-bg);border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);box-shadow:var(--mm-form-shadow)}.mm-base-form-container.with-card .mm-form-header{display:flex;align-items:center;gap:1rem;padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-bottom:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.with-card .mm-form-body{padding:var(--mm-form-padding)}.mm-base-form-container.with-card .mm-form-actions{padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-top:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.without-card .mm-form-wrapper{max-width:1200px}.mm-base-form-container.without-card .mm-form-title-standalone{margin-bottom:var(--mm-form-padding)}.mm-base-form-container.without-card .mm-form-actions{margin-top:var(--mm-form-padding);padding-top:var(--mm-form-padding);border-top:1px solid var(--mm-form-border)}.mm-base-form-container .mm-form-title-row{display:flex;align-items:center;gap:1rem}.mm-base-form-container .mm-form-title{font-size:1.5rem;font-weight:500;margin:0;color:var(--mm-form-text)}.mm-base-form-container .mm-modified-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mm-form-status-modified);background:#da916226;border:1px solid rgba(218,145,98,.4);border-radius:var(--mm-form-radius);animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.7}}.mm-base-form-container .mm-form-body{position:relative;min-height:100px}.mm-base-form-container .mm-form-actions{display:flex;gap:var(--mm-form-gap);justify-content:space-between;align-items:center}.mm-base-form-container .mm-form-status{display:flex;align-items:center}.mm-base-form-container .mm-status-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:#37b4001a;border:1px solid rgba(55,180,0,.3);border-radius:var(--mm-form-radius)}.mm-base-form-container .mm-status-indicator .mm-status-dot{width:8px;height:8px;border-radius:50%;background:var(--mm-form-status-ready);box-shadow:0 0 8px #37b40099;animation:pulse-dot 2s ease-in-out infinite}.mm-base-form-container .mm-status-indicator .mm-status-text{font-size:.7rem;font-weight:600;letter-spacing:1px;color:var(--mm-form-status-ready);text-transform:uppercase}.mm-base-form-container .mm-status-indicator.modified{background:#da91621a;border-color:#da91624d}.mm-base-form-container .mm-status-indicator.modified .mm-status-dot{background:var(--mm-form-status-modified);box-shadow:0 0 8px #da916299}.mm-base-form-container .mm-status-indicator.modified .mm-status-text{color:var(--mm-form-status-modified)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.6}}.mm-base-form-container .mm-form-buttons{display:flex;gap:var(--mm-form-gap)}.mm-base-form-container .mm-form-buttons button{min-width:100px}.mm-base-form-container .mm-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--mm-form-overlay-bg);opacity:.95;z-index:10}.mm-base-form-container .mm-loading-overlay p{margin-top:1rem;color:var(--mm-form-text-subtle);font-size:1rem}::ng-deep .mm-base-form-container fieldset[kendoformfieldset],::ng-deep .mm-base-form-container .k-form-fieldset{border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);padding:var(--mm-form-padding);margin:0;background:var(--mm-form-bg-alt)}::ng-deep .mm-base-form-container fieldset[kendoformfieldset] legend,::ng-deep .mm-base-form-container fieldset[kendoformfieldset] .k-form-legend,::ng-deep .mm-base-form-container .k-form-fieldset legend,::ng-deep .mm-base-form-container .k-form-fieldset .k-form-legend{font-size:1.125rem;font-weight:500;color:var(--mm-form-accent);padding:0 .5rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label,::ng-deep .mm-base-form-container kendo-formfield .k-label,::ng-deep .mm-base-form-container .k-form-field kendo-label,::ng-deep .mm-base-form-container .k-form-field .k-label{font-weight:500;color:var(--mm-form-text-label);margin-bottom:.25rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label .k-required,::ng-deep .mm-base-form-container kendo-formfield .k-label .k-required,::ng-deep .mm-base-form-container .k-form-field kendo-label .k-required,::ng-deep .mm-base-form-container .k-form-field .k-label .k-required{color:var(--mm-form-error)}::ng-deep .mm-base-form-container kendo-formfield kendo-textbox,::ng-deep .mm-base-form-container kendo-formfield kendo-numerictextbox,::ng-deep .mm-base-form-container kendo-formfield kendo-textarea,::ng-deep .mm-base-form-container kendo-formfield kendo-datepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-datetimepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-timepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-dropdownlist,::ng-deep .mm-base-form-container kendo-formfield kendo-combobox,::ng-deep .mm-base-form-container kendo-formfield kendo-multiselect,::ng-deep .mm-base-form-container kendo-formfield kendo-autocomplete,::ng-deep .mm-base-form-container .k-form-field kendo-textbox,::ng-deep .mm-base-form-container .k-form-field kendo-numerictextbox,::ng-deep .mm-base-form-container .k-form-field kendo-textarea,::ng-deep .mm-base-form-container .k-form-field kendo-datepicker,::ng-deep .mm-base-form-container .k-form-field kendo-datetimepicker,::ng-deep .mm-base-form-container .k-form-field kendo-timepicker,::ng-deep .mm-base-form-container .k-form-field kendo-dropdownlist,::ng-deep .mm-base-form-container .k-form-field kendo-combobox,::ng-deep .mm-base-form-container .k-form-field kendo-multiselect,::ng-deep .mm-base-form-container .k-form-field kendo-autocomplete{width:100%}::ng-deep .mm-base-form-container kendo-formfield kendo-formhint,::ng-deep .mm-base-form-container kendo-formfield .k-form-hint,::ng-deep .mm-base-form-container .k-form-field kendo-formhint,::ng-deep .mm-base-form-container .k-form-field .k-form-hint{color:var(--mm-form-text-subtle);font-size:.875rem}::ng-deep .mm-base-form-container kendo-formfield kendo-formerror,::ng-deep .mm-base-form-container kendo-formfield .k-form-error,::ng-deep .mm-base-form-container .k-form-field kendo-formerror,::ng-deep .mm-base-form-container .k-form-field .k-form-error{color:var(--mm-form-error);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--mm-form-radius);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator.success{background-color:var(--kendo-color-success-subtle);color:var(--kendo-color-success-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.warning{background-color:var(--kendo-color-warning-subtle);color:var(--kendo-color-warning-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.error{background-color:var(--kendo-color-error-subtle);color:var(--kendo-color-error-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.info{background-color:var(--kendo-color-info-subtle);color:var(--kendo-color-info-on-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
2150
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.0", type: BaseFormComponent, isStandalone: true, selector: "mm-base-form", inputs: { form: "form", config: "config" }, outputs: { saveForm: "saveForm", cancelForm: "cancelForm" }, providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: BaseFormComponent }], queries: [{ propertyName: "titleExtra", first: true, predicate: FormTitleExtraDirective, descendants: true }], hostDirectives: [{ directive: UnsavedChangesDirective }], ngImport: i0, template: "<div class=\"mm-base-form-container\" [class.with-card]=\"config.showCard\" [class.without-card]=\"!config.showCard\">\n <!-- Title (no card mode) -->\n <div *ngIf=\"!config.showCard && title\" class=\"mm-form-title-row mm-form-title-standalone\">\n <h2 class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Main form wrapper - styled as card or plain based on CSS class -->\n <div class=\"mm-form-wrapper\" [style.maxWidth]=\"config.showCard ? (config.cardWidth || '800px') : null\">\n <!-- Card header (only in card mode) -->\n <div *ngIf=\"config.showCard && title\" class=\"mm-form-header\">\n <h2 class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Form body with content projection -->\n <div class=\"mm-form-body\">\n <div *ngIf=\"config.isLoading && config.showLoadingOverlay\" class=\"mm-loading-overlay\">\n <div class=\"k-loader k-loader-lg\"></div>\n <p>{{ loadingText }}</p>\n </div>\n <ng-content></ng-content>\n </div>\n\n <!-- Form actions -->\n <div class=\"mm-form-actions\">\n <!-- Status indicator (left side) -->\n <div class=\"mm-form-status\">\n <span class=\"mm-status-indicator\" [class.modified]=\"config.hasChanges\">\n <span class=\"mm-status-dot\"></span>\n <span class=\"mm-status-text\">{{ config.hasChanges ? modifiedText : readyText }}</span>\n </span>\n </div>\n\n <!-- Action buttons (right side) -->\n <div class=\"mm-form-buttons\">\n <button\n *ngIf=\"showSaveButton\"\n kendoButton\n type=\"submit\"\n [svgIcon]=\"saveIcon\"\n themeColor=\"primary\"\n [disabled]=\"saveButtonDisabled\"\n (click)=\"onSave()\">\n {{ saveButtonText }}\n </button>\n <button\n *ngIf=\"showCancelButton\"\n kendoButton\n type=\"button\"\n [svgIcon]=\"cancelIcon\"\n [disabled]=\"!!config.isSaving\"\n (click)=\"onCancel()\">\n {{ cancelButtonText }}\n </button>\n <ng-content select=\"[additionalActions]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--mm-form-bg: var(--kendo-color-surface);--mm-form-bg-alt: var(--kendo-color-surface-alt);--mm-form-bg-elevated: var(--kendo-color-surface-alt);--mm-form-border: var(--kendo-color-border);--mm-form-border-subtle: var(--kendo-color-border-alt, var(--mm-form-border));--mm-form-text: var(--kendo-color-on-app-surface);--mm-form-text-subtle: var(--kendo-color-subtle);--mm-form-text-label: var(--kendo-color-on-app-surface);--mm-form-accent: var(--kendo-color-primary);--mm-form-error: var(--kendo-color-error);--mm-form-status-ready: #37b400;--mm-form-status-modified: #da9162;--mm-form-padding: 1.5rem;--mm-form-padding-sm: 1rem;--mm-form-gap: .5rem;--mm-form-radius: 4px;--mm-form-shadow: 0 2px 6px rgba(0, 0, 0, .15);--mm-form-overlay-bg: var(--kendo-color-surface)}.mm-base-form-container{padding:var(--mm-form-padding);height:100%;overflow:auto}.mm-base-form-container .mm-form-wrapper{margin:0 auto}.mm-base-form-container.with-card .mm-form-wrapper{background:var(--mm-form-bg);border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);box-shadow:var(--mm-form-shadow)}.mm-base-form-container.with-card .mm-form-header{display:flex;align-items:center;gap:1rem;padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-bottom:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.with-card .mm-form-body{padding:var(--mm-form-padding)}.mm-base-form-container.with-card .mm-form-actions{padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-top:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.without-card .mm-form-wrapper{max-width:1200px}.mm-base-form-container.without-card .mm-form-title-standalone{margin-bottom:var(--mm-form-padding)}.mm-base-form-container.without-card .mm-form-actions{margin-top:var(--mm-form-padding);padding-top:var(--mm-form-padding);border-top:1px solid var(--mm-form-border)}.mm-base-form-container .mm-form-title-row{display:flex;align-items:center;gap:1rem}.mm-base-form-container .mm-form-title{font-size:1.5rem;font-weight:500;margin:0;color:var(--mm-form-text)}.mm-base-form-container .mm-modified-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mm-form-status-modified);background:#da916226;border:1px solid rgba(218,145,98,.4);border-radius:var(--mm-form-radius);animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.7}}.mm-base-form-container .mm-form-body{position:relative;min-height:100px}.mm-base-form-container .mm-form-actions{display:flex;gap:var(--mm-form-gap);justify-content:space-between;align-items:center}.mm-base-form-container .mm-form-status{display:flex;align-items:center}.mm-base-form-container .mm-status-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:#37b4001a;border:1px solid rgba(55,180,0,.3);border-radius:var(--mm-form-radius)}.mm-base-form-container .mm-status-indicator .mm-status-dot{width:8px;height:8px;border-radius:50%;background:var(--mm-form-status-ready);box-shadow:0 0 8px #37b40099;animation:pulse-dot 2s ease-in-out infinite}.mm-base-form-container .mm-status-indicator .mm-status-text{font-size:.7rem;font-weight:600;letter-spacing:1px;color:var(--mm-form-status-ready);text-transform:uppercase}.mm-base-form-container .mm-status-indicator.modified{background:#da91621a;border-color:#da91624d}.mm-base-form-container .mm-status-indicator.modified .mm-status-dot{background:var(--mm-form-status-modified);box-shadow:0 0 8px #da916299}.mm-base-form-container .mm-status-indicator.modified .mm-status-text{color:var(--mm-form-status-modified)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.6}}.mm-base-form-container .mm-form-buttons{display:flex;gap:var(--mm-form-gap)}.mm-base-form-container .mm-form-buttons button{min-width:100px}.mm-base-form-container .mm-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--mm-form-overlay-bg);opacity:.95;z-index:10}.mm-base-form-container .mm-loading-overlay p{margin-top:1rem;color:var(--mm-form-text-subtle);font-size:1rem}::ng-deep .mm-base-form-container fieldset[kendoformfieldset],::ng-deep .mm-base-form-container .k-form-fieldset{border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);padding:var(--mm-form-padding);margin:0;background:var(--mm-form-bg-alt)}::ng-deep .mm-base-form-container fieldset[kendoformfieldset] legend,::ng-deep .mm-base-form-container fieldset[kendoformfieldset] .k-form-legend,::ng-deep .mm-base-form-container .k-form-fieldset legend,::ng-deep .mm-base-form-container .k-form-fieldset .k-form-legend{font-size:1.125rem;font-weight:500;color:var(--mm-form-accent);padding:0 .5rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label,::ng-deep .mm-base-form-container kendo-formfield .k-label,::ng-deep .mm-base-form-container .k-form-field kendo-label,::ng-deep .mm-base-form-container .k-form-field .k-label{font-weight:500;color:var(--mm-form-text-label);margin-bottom:.25rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label .k-required,::ng-deep .mm-base-form-container kendo-formfield .k-label .k-required,::ng-deep .mm-base-form-container .k-form-field kendo-label .k-required,::ng-deep .mm-base-form-container .k-form-field .k-label .k-required{color:var(--mm-form-error)}::ng-deep .mm-base-form-container kendo-formfield kendo-textbox,::ng-deep .mm-base-form-container kendo-formfield kendo-numerictextbox,::ng-deep .mm-base-form-container kendo-formfield kendo-textarea,::ng-deep .mm-base-form-container kendo-formfield kendo-datepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-datetimepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-timepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-dropdownlist,::ng-deep .mm-base-form-container kendo-formfield kendo-combobox,::ng-deep .mm-base-form-container kendo-formfield kendo-multiselect,::ng-deep .mm-base-form-container kendo-formfield kendo-autocomplete,::ng-deep .mm-base-form-container .k-form-field kendo-textbox,::ng-deep .mm-base-form-container .k-form-field kendo-numerictextbox,::ng-deep .mm-base-form-container .k-form-field kendo-textarea,::ng-deep .mm-base-form-container .k-form-field kendo-datepicker,::ng-deep .mm-base-form-container .k-form-field kendo-datetimepicker,::ng-deep .mm-base-form-container .k-form-field kendo-timepicker,::ng-deep .mm-base-form-container .k-form-field kendo-dropdownlist,::ng-deep .mm-base-form-container .k-form-field kendo-combobox,::ng-deep .mm-base-form-container .k-form-field kendo-multiselect,::ng-deep .mm-base-form-container .k-form-field kendo-autocomplete{width:100%}::ng-deep .mm-base-form-container kendo-formfield kendo-formhint,::ng-deep .mm-base-form-container kendo-formfield .k-form-hint,::ng-deep .mm-base-form-container .k-form-field kendo-formhint,::ng-deep .mm-base-form-container .k-form-field .k-form-hint{color:var(--mm-form-text-subtle);font-size:.875rem}::ng-deep .mm-base-form-container kendo-formfield kendo-formerror,::ng-deep .mm-base-form-container kendo-formfield .k-form-error,::ng-deep .mm-base-form-container .k-form-field kendo-formerror,::ng-deep .mm-base-form-container .k-form-field .k-form-error{color:var(--mm-form-error);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--mm-form-radius);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator.success{background-color:var(--kendo-color-success-subtle);color:var(--kendo-color-success-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.warning{background-color:var(--kendo-color-warning-subtle);color:var(--kendo-color-warning-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.error{background-color:var(--kendo-color-error-subtle);color:var(--kendo-color-error-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.info{background-color:var(--kendo-color-info-subtle);color:var(--kendo-color-info-on-subtle)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i4.ButtonComponent, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }] });
|
|
2124
2151
|
}
|
|
2125
2152
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BaseFormComponent, decorators: [{
|
|
2126
2153
|
type: Component,
|
|
2127
2154
|
args: [{ selector: 'mm-base-form', standalone: true, imports: [
|
|
2128
2155
|
CommonModule,
|
|
2129
2156
|
ButtonModule
|
|
2130
|
-
], hostDirectives: [UnsavedChangesDirective], providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: BaseFormComponent }], template: "<div class=\"mm-base-form-container\" [class.with-card]=\"config.showCard\" [class.without-card]=\"!config.showCard\">\n <!-- Title (no card mode) -->\n <div *ngIf=\"!config.showCard && title\" class=\"mm-form-title-row mm-form-title-standalone\">\n <h2 class=\"mm-form-title\">{{ title }}</h2>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">Unsaved Changes</span>\n </div>\n\n <!-- Main form wrapper - styled as card or plain based on CSS class -->\n <div class=\"mm-form-wrapper\" [style.maxWidth]=\"config.showCard ? (config.cardWidth || '800px') : null\">\n <!-- Card header (only in card mode) -->\n <div *ngIf=\"config.showCard && title\" class=\"mm-form-header\">\n <h2 class=\"mm-form-title\">{{ title }}</h2>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">Unsaved Changes</span>\n </div>\n\n <!-- Form body with content projection -->\n <div class=\"mm-form-body\">\n <div *ngIf=\"config.isLoading && config.showLoadingOverlay\" class=\"mm-loading-overlay\">\n <div class=\"k-loader k-loader-lg\"></div>\n <p>Loading...</p>\n </div>\n <ng-content></ng-content>\n </div>\n\n <!-- Form actions -->\n <div class=\"mm-form-actions\">\n <!-- Status indicator (left side) -->\n <div class=\"mm-form-status\">\n <span class=\"mm-status-indicator\" [class.modified]=\"config.hasChanges\">\n <span class=\"mm-status-dot\"></span>\n <span class=\"mm-status-text\">{{ config.hasChanges ? 'MODIFIED' : 'READY' }}</span>\n </span>\n </div>\n\n <!-- Action buttons (right side) -->\n <div class=\"mm-form-buttons\">\n <button\n *ngIf=\"showSaveButton\"\n kendoButton\n type=\"submit\"\n [svgIcon]=\"saveIcon\"\n themeColor=\"primary\"\n [disabled]=\"saveButtonDisabled\"\n (click)=\"onSave()\">\n {{ saveButtonText }}\n </button>\n <button\n *ngIf=\"showCancelButton\"\n kendoButton\n type=\"button\"\n [svgIcon]=\"cancelIcon\"\n [disabled]=\"!!config.isSaving\"\n (click)=\"onCancel()\">\n {{ cancelButtonText }}\n </button>\n <ng-content select=\"[additionalActions]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--mm-form-bg: var(--kendo-color-surface);--mm-form-bg-alt: var(--kendo-color-surface-alt);--mm-form-bg-elevated: var(--kendo-color-surface-alt);--mm-form-border: var(--kendo-color-border);--mm-form-border-subtle: var(--kendo-color-border-alt, var(--mm-form-border));--mm-form-text: var(--kendo-color-on-app-surface);--mm-form-text-subtle: var(--kendo-color-subtle);--mm-form-text-label: var(--kendo-color-on-app-surface);--mm-form-accent: var(--kendo-color-primary);--mm-form-error: var(--kendo-color-error);--mm-form-status-ready: #37b400;--mm-form-status-modified: #da9162;--mm-form-padding: 1.5rem;--mm-form-padding-sm: 1rem;--mm-form-gap: .5rem;--mm-form-radius: 4px;--mm-form-shadow: 0 2px 6px rgba(0, 0, 0, .15);--mm-form-overlay-bg: var(--kendo-color-surface)}.mm-base-form-container{padding:var(--mm-form-padding);height:100%;overflow:auto}.mm-base-form-container .mm-form-wrapper{margin:0 auto}.mm-base-form-container.with-card .mm-form-wrapper{background:var(--mm-form-bg);border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);box-shadow:var(--mm-form-shadow)}.mm-base-form-container.with-card .mm-form-header{display:flex;align-items:center;gap:1rem;padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-bottom:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.with-card .mm-form-body{padding:var(--mm-form-padding)}.mm-base-form-container.with-card .mm-form-actions{padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-top:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.without-card .mm-form-wrapper{max-width:1200px}.mm-base-form-container.without-card .mm-form-title-standalone{margin-bottom:var(--mm-form-padding)}.mm-base-form-container.without-card .mm-form-actions{margin-top:var(--mm-form-padding);padding-top:var(--mm-form-padding);border-top:1px solid var(--mm-form-border)}.mm-base-form-container .mm-form-title-row{display:flex;align-items:center;gap:1rem}.mm-base-form-container .mm-form-title{font-size:1.5rem;font-weight:500;margin:0;color:var(--mm-form-text)}.mm-base-form-container .mm-modified-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mm-form-status-modified);background:#da916226;border:1px solid rgba(218,145,98,.4);border-radius:var(--mm-form-radius);animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.7}}.mm-base-form-container .mm-form-body{position:relative;min-height:100px}.mm-base-form-container .mm-form-actions{display:flex;gap:var(--mm-form-gap);justify-content:space-between;align-items:center}.mm-base-form-container .mm-form-status{display:flex;align-items:center}.mm-base-form-container .mm-status-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:#37b4001a;border:1px solid rgba(55,180,0,.3);border-radius:var(--mm-form-radius)}.mm-base-form-container .mm-status-indicator .mm-status-dot{width:8px;height:8px;border-radius:50%;background:var(--mm-form-status-ready);box-shadow:0 0 8px #37b40099;animation:pulse-dot 2s ease-in-out infinite}.mm-base-form-container .mm-status-indicator .mm-status-text{font-size:.7rem;font-weight:600;letter-spacing:1px;color:var(--mm-form-status-ready);text-transform:uppercase}.mm-base-form-container .mm-status-indicator.modified{background:#da91621a;border-color:#da91624d}.mm-base-form-container .mm-status-indicator.modified .mm-status-dot{background:var(--mm-form-status-modified);box-shadow:0 0 8px #da916299}.mm-base-form-container .mm-status-indicator.modified .mm-status-text{color:var(--mm-form-status-modified)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.6}}.mm-base-form-container .mm-form-buttons{display:flex;gap:var(--mm-form-gap)}.mm-base-form-container .mm-form-buttons button{min-width:100px}.mm-base-form-container .mm-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--mm-form-overlay-bg);opacity:.95;z-index:10}.mm-base-form-container .mm-loading-overlay p{margin-top:1rem;color:var(--mm-form-text-subtle);font-size:1rem}::ng-deep .mm-base-form-container fieldset[kendoformfieldset],::ng-deep .mm-base-form-container .k-form-fieldset{border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);padding:var(--mm-form-padding);margin:0;background:var(--mm-form-bg-alt)}::ng-deep .mm-base-form-container fieldset[kendoformfieldset] legend,::ng-deep .mm-base-form-container fieldset[kendoformfieldset] .k-form-legend,::ng-deep .mm-base-form-container .k-form-fieldset legend,::ng-deep .mm-base-form-container .k-form-fieldset .k-form-legend{font-size:1.125rem;font-weight:500;color:var(--mm-form-accent);padding:0 .5rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label,::ng-deep .mm-base-form-container kendo-formfield .k-label,::ng-deep .mm-base-form-container .k-form-field kendo-label,::ng-deep .mm-base-form-container .k-form-field .k-label{font-weight:500;color:var(--mm-form-text-label);margin-bottom:.25rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label .k-required,::ng-deep .mm-base-form-container kendo-formfield .k-label .k-required,::ng-deep .mm-base-form-container .k-form-field kendo-label .k-required,::ng-deep .mm-base-form-container .k-form-field .k-label .k-required{color:var(--mm-form-error)}::ng-deep .mm-base-form-container kendo-formfield kendo-textbox,::ng-deep .mm-base-form-container kendo-formfield kendo-numerictextbox,::ng-deep .mm-base-form-container kendo-formfield kendo-textarea,::ng-deep .mm-base-form-container kendo-formfield kendo-datepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-datetimepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-timepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-dropdownlist,::ng-deep .mm-base-form-container kendo-formfield kendo-combobox,::ng-deep .mm-base-form-container kendo-formfield kendo-multiselect,::ng-deep .mm-base-form-container kendo-formfield kendo-autocomplete,::ng-deep .mm-base-form-container .k-form-field kendo-textbox,::ng-deep .mm-base-form-container .k-form-field kendo-numerictextbox,::ng-deep .mm-base-form-container .k-form-field kendo-textarea,::ng-deep .mm-base-form-container .k-form-field kendo-datepicker,::ng-deep .mm-base-form-container .k-form-field kendo-datetimepicker,::ng-deep .mm-base-form-container .k-form-field kendo-timepicker,::ng-deep .mm-base-form-container .k-form-field kendo-dropdownlist,::ng-deep .mm-base-form-container .k-form-field kendo-combobox,::ng-deep .mm-base-form-container .k-form-field kendo-multiselect,::ng-deep .mm-base-form-container .k-form-field kendo-autocomplete{width:100%}::ng-deep .mm-base-form-container kendo-formfield kendo-formhint,::ng-deep .mm-base-form-container kendo-formfield .k-form-hint,::ng-deep .mm-base-form-container .k-form-field kendo-formhint,::ng-deep .mm-base-form-container .k-form-field .k-form-hint{color:var(--mm-form-text-subtle);font-size:.875rem}::ng-deep .mm-base-form-container kendo-formfield kendo-formerror,::ng-deep .mm-base-form-container kendo-formfield .k-form-error,::ng-deep .mm-base-form-container .k-form-field kendo-formerror,::ng-deep .mm-base-form-container .k-form-field .k-form-error{color:var(--mm-form-error);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--mm-form-radius);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator.success{background-color:var(--kendo-color-success-subtle);color:var(--kendo-color-success-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.warning{background-color:var(--kendo-color-warning-subtle);color:var(--kendo-color-warning-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.error{background-color:var(--kendo-color-error-subtle);color:var(--kendo-color-error-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.info{background-color:var(--kendo-color-info-subtle);color:var(--kendo-color-info-on-subtle)}\n"] }]
|
|
2131
|
-
}], propDecorators: {
|
|
2157
|
+
], hostDirectives: [UnsavedChangesDirective], providers: [{ provide: HAS_UNSAVED_CHANGES, useExisting: BaseFormComponent }], template: "<div class=\"mm-base-form-container\" [class.with-card]=\"config.showCard\" [class.without-card]=\"!config.showCard\">\n <!-- Title (no card mode) -->\n <div *ngIf=\"!config.showCard && title\" class=\"mm-form-title-row mm-form-title-standalone\">\n <h2 class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Main form wrapper - styled as card or plain based on CSS class -->\n <div class=\"mm-form-wrapper\" [style.maxWidth]=\"config.showCard ? (config.cardWidth || '800px') : null\">\n <!-- Card header (only in card mode) -->\n <div *ngIf=\"config.showCard && title\" class=\"mm-form-header\">\n <h2 class=\"mm-form-title\">{{ title }}</h2>\n <ng-container *ngIf=\"titleExtra\" [ngTemplateOutlet]=\"titleExtra.templateRef\"></ng-container>\n <span *ngIf=\"config.hasChanges\" class=\"mm-modified-badge\">{{ unsavedChangesText }}</span>\n </div>\n\n <!-- Form body with content projection -->\n <div class=\"mm-form-body\">\n <div *ngIf=\"config.isLoading && config.showLoadingOverlay\" class=\"mm-loading-overlay\">\n <div class=\"k-loader k-loader-lg\"></div>\n <p>{{ loadingText }}</p>\n </div>\n <ng-content></ng-content>\n </div>\n\n <!-- Form actions -->\n <div class=\"mm-form-actions\">\n <!-- Status indicator (left side) -->\n <div class=\"mm-form-status\">\n <span class=\"mm-status-indicator\" [class.modified]=\"config.hasChanges\">\n <span class=\"mm-status-dot\"></span>\n <span class=\"mm-status-text\">{{ config.hasChanges ? modifiedText : readyText }}</span>\n </span>\n </div>\n\n <!-- Action buttons (right side) -->\n <div class=\"mm-form-buttons\">\n <button\n *ngIf=\"showSaveButton\"\n kendoButton\n type=\"submit\"\n [svgIcon]=\"saveIcon\"\n themeColor=\"primary\"\n [disabled]=\"saveButtonDisabled\"\n (click)=\"onSave()\">\n {{ saveButtonText }}\n </button>\n <button\n *ngIf=\"showCancelButton\"\n kendoButton\n type=\"button\"\n [svgIcon]=\"cancelIcon\"\n [disabled]=\"!!config.isSaving\"\n (click)=\"onCancel()\">\n {{ cancelButtonText }}\n </button>\n <ng-content select=\"[additionalActions]\"></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [":host{--mm-form-bg: var(--kendo-color-surface);--mm-form-bg-alt: var(--kendo-color-surface-alt);--mm-form-bg-elevated: var(--kendo-color-surface-alt);--mm-form-border: var(--kendo-color-border);--mm-form-border-subtle: var(--kendo-color-border-alt, var(--mm-form-border));--mm-form-text: var(--kendo-color-on-app-surface);--mm-form-text-subtle: var(--kendo-color-subtle);--mm-form-text-label: var(--kendo-color-on-app-surface);--mm-form-accent: var(--kendo-color-primary);--mm-form-error: var(--kendo-color-error);--mm-form-status-ready: #37b400;--mm-form-status-modified: #da9162;--mm-form-padding: 1.5rem;--mm-form-padding-sm: 1rem;--mm-form-gap: .5rem;--mm-form-radius: 4px;--mm-form-shadow: 0 2px 6px rgba(0, 0, 0, .15);--mm-form-overlay-bg: var(--kendo-color-surface)}.mm-base-form-container{padding:var(--mm-form-padding);height:100%;overflow:auto}.mm-base-form-container .mm-form-wrapper{margin:0 auto}.mm-base-form-container.with-card .mm-form-wrapper{background:var(--mm-form-bg);border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);box-shadow:var(--mm-form-shadow)}.mm-base-form-container.with-card .mm-form-header{display:flex;align-items:center;gap:1rem;padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-bottom:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.with-card .mm-form-body{padding:var(--mm-form-padding)}.mm-base-form-container.with-card .mm-form-actions{padding:var(--mm-form-padding-sm) var(--mm-form-padding);border-top:1px solid var(--mm-form-border);background:var(--mm-form-bg-alt)}.mm-base-form-container.without-card .mm-form-wrapper{max-width:1200px}.mm-base-form-container.without-card .mm-form-title-standalone{margin-bottom:var(--mm-form-padding)}.mm-base-form-container.without-card .mm-form-actions{margin-top:var(--mm-form-padding);padding-top:var(--mm-form-padding);border-top:1px solid var(--mm-form-border)}.mm-base-form-container .mm-form-title-row{display:flex;align-items:center;gap:1rem}.mm-base-form-container .mm-form-title{font-size:1.5rem;font-weight:500;margin:0;color:var(--mm-form-text)}.mm-base-form-container .mm-modified-badge{display:inline-flex;align-items:center;padding:.25rem .75rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--mm-form-status-modified);background:#da916226;border:1px solid rgba(218,145,98,.4);border-radius:var(--mm-form-radius);animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{opacity:1}50%{opacity:.7}}.mm-base-form-container .mm-form-body{position:relative;min-height:100px}.mm-base-form-container .mm-form-actions{display:flex;gap:var(--mm-form-gap);justify-content:space-between;align-items:center}.mm-base-form-container .mm-form-status{display:flex;align-items:center}.mm-base-form-container .mm-status-indicator{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;background:#37b4001a;border:1px solid rgba(55,180,0,.3);border-radius:var(--mm-form-radius)}.mm-base-form-container .mm-status-indicator .mm-status-dot{width:8px;height:8px;border-radius:50%;background:var(--mm-form-status-ready);box-shadow:0 0 8px #37b40099;animation:pulse-dot 2s ease-in-out infinite}.mm-base-form-container .mm-status-indicator .mm-status-text{font-size:.7rem;font-weight:600;letter-spacing:1px;color:var(--mm-form-status-ready);text-transform:uppercase}.mm-base-form-container .mm-status-indicator.modified{background:#da91621a;border-color:#da91624d}.mm-base-form-container .mm-status-indicator.modified .mm-status-dot{background:var(--mm-form-status-modified);box-shadow:0 0 8px #da916299}.mm-base-form-container .mm-status-indicator.modified .mm-status-text{color:var(--mm-form-status-modified)}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.6}}.mm-base-form-container .mm-form-buttons{display:flex;gap:var(--mm-form-gap)}.mm-base-form-container .mm-form-buttons button{min-width:100px}.mm-base-form-container .mm-loading-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:var(--mm-form-overlay-bg);opacity:.95;z-index:10}.mm-base-form-container .mm-loading-overlay p{margin-top:1rem;color:var(--mm-form-text-subtle);font-size:1rem}::ng-deep .mm-base-form-container fieldset[kendoformfieldset],::ng-deep .mm-base-form-container .k-form-fieldset{border:1px solid var(--mm-form-border);border-radius:var(--mm-form-radius);padding:var(--mm-form-padding);margin:0;background:var(--mm-form-bg-alt)}::ng-deep .mm-base-form-container fieldset[kendoformfieldset] legend,::ng-deep .mm-base-form-container fieldset[kendoformfieldset] .k-form-legend,::ng-deep .mm-base-form-container .k-form-fieldset legend,::ng-deep .mm-base-form-container .k-form-fieldset .k-form-legend{font-size:1.125rem;font-weight:500;color:var(--mm-form-accent);padding:0 .5rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label,::ng-deep .mm-base-form-container kendo-formfield .k-label,::ng-deep .mm-base-form-container .k-form-field kendo-label,::ng-deep .mm-base-form-container .k-form-field .k-label{font-weight:500;color:var(--mm-form-text-label);margin-bottom:.25rem}::ng-deep .mm-base-form-container kendo-formfield kendo-label .k-required,::ng-deep .mm-base-form-container kendo-formfield .k-label .k-required,::ng-deep .mm-base-form-container .k-form-field kendo-label .k-required,::ng-deep .mm-base-form-container .k-form-field .k-label .k-required{color:var(--mm-form-error)}::ng-deep .mm-base-form-container kendo-formfield kendo-textbox,::ng-deep .mm-base-form-container kendo-formfield kendo-numerictextbox,::ng-deep .mm-base-form-container kendo-formfield kendo-textarea,::ng-deep .mm-base-form-container kendo-formfield kendo-datepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-datetimepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-timepicker,::ng-deep .mm-base-form-container kendo-formfield kendo-dropdownlist,::ng-deep .mm-base-form-container kendo-formfield kendo-combobox,::ng-deep .mm-base-form-container kendo-formfield kendo-multiselect,::ng-deep .mm-base-form-container kendo-formfield kendo-autocomplete,::ng-deep .mm-base-form-container .k-form-field kendo-textbox,::ng-deep .mm-base-form-container .k-form-field kendo-numerictextbox,::ng-deep .mm-base-form-container .k-form-field kendo-textarea,::ng-deep .mm-base-form-container .k-form-field kendo-datepicker,::ng-deep .mm-base-form-container .k-form-field kendo-datetimepicker,::ng-deep .mm-base-form-container .k-form-field kendo-timepicker,::ng-deep .mm-base-form-container .k-form-field kendo-dropdownlist,::ng-deep .mm-base-form-container .k-form-field kendo-combobox,::ng-deep .mm-base-form-container .k-form-field kendo-multiselect,::ng-deep .mm-base-form-container .k-form-field kendo-autocomplete{width:100%}::ng-deep .mm-base-form-container kendo-formfield kendo-formhint,::ng-deep .mm-base-form-container kendo-formfield .k-form-hint,::ng-deep .mm-base-form-container .k-form-field kendo-formhint,::ng-deep .mm-base-form-container .k-form-field .k-form-hint{color:var(--mm-form-text-subtle);font-size:.875rem}::ng-deep .mm-base-form-container kendo-formfield kendo-formerror,::ng-deep .mm-base-form-container kendo-formfield .k-form-error,::ng-deep .mm-base-form-container .k-form-field kendo-formerror,::ng-deep .mm-base-form-container .k-form-field .k-form-error{color:var(--mm-form-error);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator{display:inline-flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:var(--mm-form-radius);font-size:.875rem}::ng-deep .mm-base-form-container .status-indicator.success{background-color:var(--kendo-color-success-subtle);color:var(--kendo-color-success-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.warning{background-color:var(--kendo-color-warning-subtle);color:var(--kendo-color-warning-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.error{background-color:var(--kendo-color-error-subtle);color:var(--kendo-color-error-on-subtle)}::ng-deep .mm-base-form-container .status-indicator.info{background-color:var(--kendo-color-info-subtle);color:var(--kendo-color-info-on-subtle)}\n"] }]
|
|
2158
|
+
}], propDecorators: { titleExtra: [{
|
|
2159
|
+
type: ContentChild,
|
|
2160
|
+
args: [FormTitleExtraDirective]
|
|
2161
|
+
}], form: [{
|
|
2132
2162
|
type: Input
|
|
2133
2163
|
}], config: [{
|
|
2134
2164
|
type: Input
|
|
@@ -3228,10 +3258,19 @@ class UnsavedChangesGuard {
|
|
|
3228
3258
|
if (!component.hasUnsavedChanges()) {
|
|
3229
3259
|
return true;
|
|
3230
3260
|
}
|
|
3261
|
+
// Get optional translated messages from the component
|
|
3262
|
+
const msgs = typeof component.unsavedChangesMessages === 'function'
|
|
3263
|
+
? component.unsavedChangesMessages()
|
|
3264
|
+
: undefined;
|
|
3265
|
+
const title = msgs?.title ?? 'Unsaved Changes';
|
|
3266
|
+
const buttonLabels = (msgs?.yesButton || msgs?.noButton || msgs?.cancelButton)
|
|
3267
|
+
? { yes: msgs?.yesButton, no: msgs?.noButton, cancel: msgs?.cancelButton }
|
|
3268
|
+
: undefined;
|
|
3231
3269
|
// Component has unsaved changes - ask user what to do
|
|
3232
3270
|
if (typeof component.saveChanges === 'function') {
|
|
3233
3271
|
// Component supports saving - show Yes/No/Cancel dialog
|
|
3234
|
-
const
|
|
3272
|
+
const message = msgs?.savePrompt ?? 'You have unsaved changes. Do you want to save before leaving?';
|
|
3273
|
+
const result = await this.confirmationService.showYesNoCancelConfirmationDialog(title, message, buttonLabels);
|
|
3235
3274
|
if (result === undefined) {
|
|
3236
3275
|
// Dialog was closed without selection - cancel navigation
|
|
3237
3276
|
return false;
|
|
@@ -3254,7 +3293,8 @@ class UnsavedChangesGuard {
|
|
|
3254
3293
|
}
|
|
3255
3294
|
else {
|
|
3256
3295
|
// Component doesn't support saving - show simple Yes/No dialog
|
|
3257
|
-
const
|
|
3296
|
+
const message = msgs?.discardPrompt ?? 'You have unsaved changes. Are you sure you want to leave? Your changes will be lost.';
|
|
3297
|
+
const confirmed = await this.confirmationService.showYesNoConfirmationDialog(title, message, undefined, buttonLabels);
|
|
3258
3298
|
return confirmed;
|
|
3259
3299
|
}
|
|
3260
3300
|
}
|
|
@@ -4958,5 +4998,5 @@ function provideMmSharedUi() {
|
|
|
4958
4998
|
* Generated bundle index. Do not edit.
|
|
4959
4999
|
*/
|
|
4960
5000
|
|
|
4961
|
-
export { BaseFormComponent, BaseTreeDetailComponent, BytesToSizePipe, CRON_PRESETS, ConfirmationService, CopyableTextComponent, CronBuilderComponent, CronHumanizerService, CronParserService, DEFAULT_CRON_BUILDER_CONFIG, DEFAULT_LIST_VIEW_MESSAGES, DEFAULT_RESPONSIVE_COLSPAN, DEFAULT_TIME_RANGE_LABELS, DataSourceBase, DataSourceTyped, EntitySelectDialogComponent, EntitySelectDialogService, EntitySelectInputComponent, FetchResultBase, FetchResultTyped, FileUploadService, HAS_UNSAVED_CHANGES, HOUR_INTERVALS, HierarchyDataSource, HierarchyDataSourceBase, ImportStrategyDialogComponent, ImportStrategyDialogResult, ImportStrategyDialogService, ImportStrategyDto, InputDialogComponent, InputService, ListViewComponent, MINUTE_INTERVALS, MessageDetailsDialogComponent, MessageDetailsDialogService, MessageListenerService, MmListViewDataBindingDirective, NotificationDisplayService, PascalCasePipe, ProgressValue, ProgressWindowComponent, ProgressWindowService, RELATIVE_WEEKS, SECOND_INTERVALS, SaveAsDialogComponent, SaveAsDialogService, TimeRangePickerComponent, TimeRangeUtils, TreeComponent, UnsavedChangesDirective, UnsavedChangesGuard, UploadFileDialogComponent, WEEKDAYS, WEEKDAY_ABBREVIATIONS, generateDayOfMonthOptions, generateHourOptions, generateMinuteOptions, provideMmSharedUi };
|
|
5001
|
+
export { BaseFormComponent, BaseTreeDetailComponent, ButtonTypes, BytesToSizePipe, CRON_PRESETS, ConfirmationService, ConfirmationWindowResult, CopyableTextComponent, CronBuilderComponent, CronHumanizerService, CronParserService, DEFAULT_CRON_BUILDER_CONFIG, DEFAULT_LIST_VIEW_MESSAGES, DEFAULT_RESPONSIVE_COLSPAN, DEFAULT_TIME_RANGE_LABELS, DataSourceBase, DataSourceTyped, DialogType, EntitySelectDialogComponent, EntitySelectDialogService, EntitySelectInputComponent, FetchResultBase, FetchResultTyped, FileUploadResult, FileUploadService, FormTitleExtraDirective, HAS_UNSAVED_CHANGES, HOUR_INTERVALS, HierarchyDataSource, HierarchyDataSourceBase, ImportStrategyDialogComponent, ImportStrategyDialogResult, ImportStrategyDialogService, ImportStrategyDto, InputDialogComponent, InputService, ListViewComponent, MINUTE_INTERVALS, MessageDetailsDialogComponent, MessageDetailsDialogService, MessageListenerService, MmListViewDataBindingDirective, NotificationDisplayService, PascalCasePipe, ProgressValue, ProgressWindowComponent, ProgressWindowService, RELATIVE_WEEKS, SECOND_INTERVALS, SaveAsDialogComponent, SaveAsDialogService, TimeRangePickerComponent, TimeRangeUtils, TreeComponent, UnsavedChangesDirective, UnsavedChangesGuard, UploadFileDialogComponent, WEEKDAYS, WEEKDAY_ABBREVIATIONS, generateDayOfMonthOptions, generateHourOptions, generateMinuteOptions, provideMmSharedUi };
|
|
4962
5002
|
//# sourceMappingURL=meshmakers-shared-ui.mjs.map
|