@solcre-org/core-ui 2.12.7 → 2.12.8

package/assets/i18n/es/common.json

@@ -104,6 +104,12 @@
         "noResults": "No se encontraron resultados",
         "typeToSearch": "Escribe para buscar"
       }
+    },
+    "unsavedChanges": {
+      "title": "Cambios sin guardar",
+      "message": "Tienes cambios sin guardar. ¿Estás seguro de que quieres cerrar el modal?",
+      "confirm": "Cerrar sin guardar",
+      "cancel": "Continuar editando"
     }
   },
   "dashboard": {

package/fesm2022/solcre-org-core-ui.mjs

@@ -4005,10 +4005,107 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 args: ['customTabTemplate']
             }] } });
 
+var DialogActions;
+(function (DialogActions) {
+    DialogActions["CONFIRM"] = "dialog.confirm";
+    DialogActions["CANCEL"] = "dialog.cancel";
+})(DialogActions || (DialogActions = {}));
+
+class ConfirmationDialogService {
+    isOpen = signal(false);
+    isOpen$ = this.isOpen.asReadonly();
+    config = signal({ title: '' });
+    config$ = this.config.asReadonly();
+    responseSubject = new Subject();
+    response$ = this.responseSubject.asObservable();
+    openDelete(title, message, validationValue) {
+        return this.open({
+            title,
+            message,
+            type: 'delete',
+            icon: 'icon-delete',
+            confirmButtonText: 'dialog.delete',
+            cancelButtonText: 'dialog.cancel',
+            confirmButtonClass: 'c-btn context:error',
+            inputConfig: validationValue ? {
+                label: 'dialog.confirmName',
+                placeholder: 'dialog.enterName',
+                validationValue
+            } : undefined,
+            showCloseButton: true
+        });
+    }
+    openConfirm(config) {
+        return this.open({
+            ...config,
+            type: 'default',
+            size: config.size || 'default',
+            showCloseButton: config.showCloseButton ?? true
+        });
+    }
+    open(config) {
+        this.config.set({
+            ...config,
+            confirmButtonText: config.confirmButtonText ?? DialogActions.CONFIRM,
+            cancelButtonText: config.cancelButtonText ?? DialogActions.CANCEL,
+            messageParams: config.messageParams ?? {},
+            showCloseButton: config.showCloseButton ?? true
+        });
+        this.isOpen.set(true);
+        return this.response$;
+    }
+    confirm(value) {
+        this.responseSubject.next(value);
+        this.close();
+    }
+    cancel() {
+        this.responseSubject.next(undefined);
+        this.close();
+    }
+    close() {
+        this.isOpen.set(false);
+        this.config.set({ title: '' });
+        const newSubject = new Subject();
+        const oldSubject = this.responseSubject;
+        this.responseSubject = newSubject;
+        this.response$ = this.responseSubject.asObservable();
+        oldSubject.complete();
+    }
+    openWithOptionalInput(title, message, inputLabel, inputPlaceholder) {
+        return this.open({
+            title,
+            message,
+            type: 'default',
+            confirmButtonText: 'dialog.confirm',
+            cancelButtonText: 'dialog.cancel',
+            inputConfig: inputLabel ? {
+                label: inputLabel,
+                placeholder: inputPlaceholder || '',
+            } : undefined,
+            showCloseButton: true
+        });
+    }
+    updateConfig(config) {
+        this.config.update(currentConfig => ({
+            ...currentConfig,
+            ...config
+        }));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ConfirmationDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ConfirmationDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
 class GenericModalComponent {
     elementRef = inject(ElementRef);
     formBuilder = inject(FormBuilder);
     domSanitizer = inject(DomSanitizer);
+    confirmationDialogService = inject(ConfirmationDialogService);
     ModalMode = ModalMode;
     FieldType = FieldType;
     isClosing = signal(false);
@@ -4034,6 +4131,8 @@ class GenericModalComponent {
     isInitialized = signal(false);
     form = signal(this.formBuilder.group({}));
     activeTabId = signal('');
+    originalData = signal(null);
+    hasUnsavedChanges = signal(false);
     hasTabs = computed(() => this.tabs().length > 0);
     allFields = computed(() => {
         if (this.hasTabs()) {
@@ -4141,6 +4240,8 @@ class GenericModalComponent {
                 this.internalErrors.set([]);
                 this.fieldErrors.set({});
                 this.isInitialized.set(false);
+                this.originalData.set(null);
+                this.hasUnsavedChanges.set(false);
                 return;
             }
             if (!this.isInitialized()) {
@@ -4149,6 +4250,14 @@ class GenericModalComponent {
                 this.isInitialized.set(true);
             }
         });
+        effect(() => {
+            const editedData = this.editedData();
+            const originalData = this.originalData();
+            if (editedData && originalData && this.mode() !== ModalMode.VIEW) {
+                const hasChanges = this.detectFormChanges(editedData, originalData);
+                this.hasUnsavedChanges.set(hasChanges);
+            }
+        });
     }
     initializeData() {
         const data = this.data();
@@ -4222,6 +4331,11 @@ class GenericModalComponent {
             this.internalErrors.set([]);
         }, 0);
         this.editedData.set(newInstance);
+        if (this.mode() !== ModalMode.VIEW) {
+            const originalCopy = Object.create(Object.getPrototypeOf(newInstance));
+            Object.assign(originalCopy, newInstance);
+            this.originalData.set(originalCopy);
+        }
         setTimeout(() => {
             this.modalData.emit(newInstance);
         }, 1);
@@ -4418,6 +4532,7 @@ class GenericModalComponent {
         if (data) {
             const filteredData = this.filterPayloadData(data);
             this.save.emit(filteredData);
+            this.hasUnsavedChanges.set(false);
         }
     }
     filterPayloadData(data) {
@@ -4476,6 +4591,26 @@ class GenericModalComponent {
         });
     }
     onClose() {
+        if (this.hasUnsavedChanges() && this.mode() !== ModalMode.VIEW) {
+            this.confirmationDialogService.openConfirm({
+                title: 'modal.unsavedChanges.title',
+                message: 'modal.unsavedChanges.message',
+                confirmButtonText: 'modal.unsavedChanges.confirm',
+                cancelButtonText: 'modal.unsavedChanges.cancel',
+                type: 'default',
+                icon: 'icon-warning',
+                showCloseButton: true
+            }).subscribe((confirmed) => {
+                if (confirmed) {
+                    this.forceClose();
+                }
+            });
+        }
+        else {
+            this.forceClose();
+        }
+    }
+    forceClose() {
         this.isClosing.set(true);
         const overlay = this.elementRef.nativeElement.querySelector('.c-modal__overlay');
         const onAnimationEnd = (e) => {
@@ -4485,7 +4620,15 @@ class GenericModalComponent {
                 overlay.removeEventListener('animationend', onAnimationEnd);
             }
         };
-        overlay.addEventListener('animationend', onAnimationEnd);
+        if (overlay) {
+            overlay.addEventListener('animationend', onAnimationEnd);
+        }
+        else {
+            setTimeout(() => {
+                this.isClosing.set(false);
+                this.close.emit();
+            }, 300);
+        }
     }
     getFieldConfig(field) {
         const modeConfig = field.modes?.[this.mode()];
@@ -4566,6 +4709,24 @@ class GenericModalComponent {
             return fieldErrors.length > 0;
         });
     }
+    detectFormChanges(editedData, originalData) {
+        const relevantFields = this.allFields().filter(field => {
+            const modeConfig = field.modes?.[this.mode()];
+            return modeConfig?.visible !== false;
+        });
+        return relevantFields.some(field => {
+            const fieldKey = field.key;
+            const editedValue = editedData[fieldKey];
+            const originalValue = originalData[fieldKey];
+            if (Array.isArray(editedValue) && Array.isArray(originalValue)) {
+                return JSON.stringify(editedValue) !== JSON.stringify(originalValue);
+            }
+            if (editedValue instanceof Date && originalValue instanceof Date) {
+                return editedValue.getTime() !== originalValue.getTime();
+            }
+            return editedValue !== originalValue;
+        });
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: GenericModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: GenericModalComponent, isStandalone: true, selector: "core-generic-modal", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, fields: { classPropertyName: "fields", publicName: "fields", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, customTemplate: { classPropertyName: "customTemplate", publicName: "customTemplate", isSignal: true, isRequired: false, transformFunction: null }, customViewTemplate: { classPropertyName: "customViewTemplate", publicName: "customViewTemplate", isSignal: true, isRequired: false, transformFunction: null }, buttonConfig: { classPropertyName: "buttonConfig", publicName: "buttonConfig", isSignal: true, isRequired: false, transformFunction: null }, modelFactory: { classPropertyName: "modelFactory", publicName: "modelFactory", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, validators: { classPropertyName: "validators", publicName: "validators", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { save: "save", close: "close", modalData: "modalData" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-modal\" [class.is-visible]=\"isOpen()\" [class.is-closing]=\"isClosing()\">\n  <div class=\"c-modal__overlay\" (click)=\"onClose()\"></div>\n  <div class=\"c-modal__holder\">\n    <div class=\"c-modal__header\">\n      <p class=\"c-modal__title\">\n        {{ title() | translate }}\n      </p>\n      <core-generic-button\n        [config]=\"closeButtonConfig()\"\n        (buttonClick)=\"onClose()\">\n      </core-generic-button>\n    </div>\n    <div class=\"c-modal__body\">\n      @if (editedData()) {\n        @if (hasTabs()) {\n          <nav core-generic-tabs\n            [config]=\"genericTabsConfig()\"\n            [activeTabId]=\"activeTabId()\"\n            [hasTabErrors]=\"hasTabErrorsFunction\"\n            (tabChange)=\"onGenericTabChange($event)\">\n          </nav>\n        }\n\n        @if (mode() === ModalMode.VIEW) {\n          <core-data-list\n            [items]=\"dataListItems()\"\n            [customTemplate]=\"customViewTemplate()\"\n            [emptyMessage]=\"'modal.noData'\"\n          ></core-data-list>\n        } @else {\n          <div class=\"c-entry-group\">\n            @if (customTemplate()) {\n                <ng-container\n                  [ngTemplateOutlet]=\"customTemplate()\"\n                  [ngTemplateOutletContext]=\"{\n                    $implicit: editedData(),\n                    mode: mode(),\n                    updateField: onFieldValueChange.bind(this),\n                    save: onSave.bind(this),\n                    close: onClose.bind(this),\n                    activeTabId: activeTabId(),\n                    onTabChange: onTabChange.bind(this),\n                    getFieldErrors: getFieldErrors.bind(this),\n                    validateAllFields: validateAllFields.bind(this),\n                    hasErrors: hasErrors()\n                  }\"\n                ></ng-container>\n            } @else {\n              @for (field of (hasTabs() ? activeTabFields() : fields()); track field.key) {\n                @if (getFieldConfig(field).visible) {\n                  <div\n                    coreDynamicField\n                    [field]=\"getFieldConfig(field)\"\n                    [value]=\"editedData()![field.key]\"\n                    [mode]=\"mode()\"\n                    [errors]=\"getFieldErrors(field.key)\"\n                    [rowData]=\"editedData()\"\n                    [formValue]=\"editedData()\"\n                    (valueChange)=\"onFieldValueChange(field.key, $event)\"\n                    (onBlurEvent)=\"validateAllFields()\"\n                    (selectionChange)=\"onSelectionChange($event)\"\n                  ></div>\n                }\n              }\n            }\n          </div> <!-- .c-entry-group -->\n        }\n      } @else {\n        <p>{{ 'modal.noData' | translate }}</p>\n      }\n    </div>\n    <div class=\"c-modal__bottom\">\n      @if (buttonConfig().length > 0) {\n        @for (button of buttonConfig(); track $index) {\n          <core-generic-button\n            [config]=\"getCustomButtonConfig(button)\"\n            [data]=\"data()\"\n            (buttonClick)=\"onCustomButtonClick(button)\">\n          </core-generic-button>\n        }\n      } @else {\n        <core-generic-button\n          [config]=\"defaultCancelButtonConfig()\"\n          (buttonClick)=\"onClose()\">\n        </core-generic-button>\n        @if (mode() !== ModalMode.VIEW) {\n          <core-generic-button\n            [config]=\"defaultSaveButtonConfig()\"\n            (buttonClick)=\"onSave()\">\n          </core-generic-button>\n        }\n      }\n    </div>\n  </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }, { kind: "directive", type: DynamicFieldDirective, selector: "[coreDynamicField]", inputs: ["field", "value", "mode", "errors", "rowData", "formValue"], outputs: ["valueChange", "onBlurEvent", "onEnterEvent", "selectionChange"] }, { kind: "component", type: GenericTabsComponent, selector: "nav[core-generic-tabs]", inputs: ["config", "activeTabId", "hasTabErrors"], outputs: ["tabClick", "tabChange"] }, { kind: "component", type: GenericButtonComponent, selector: "core-generic-button", inputs: ["config", "data"], outputs: ["buttonClick"] }, { kind: "component", type: DataListComponent, selector: "core-data-list", inputs: ["items", "fields", "data", "customTemplate", "showEmptyMessage", "emptyMessage", "cssClasses"] }] });
 }
@@ -6217,102 +6378,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
                 type: Input
             }] } });
 
-var DialogActions;
-(function (DialogActions) {
-    DialogActions["CONFIRM"] = "dialog.confirm";
-    DialogActions["CANCEL"] = "dialog.cancel";
-})(DialogActions || (DialogActions = {}));
-
-class ConfirmationDialogService {
-    isOpen = signal(false);
-    isOpen$ = this.isOpen.asReadonly();
-    config = signal({ title: '' });
-    config$ = this.config.asReadonly();
-    responseSubject = new Subject();
-    response$ = this.responseSubject.asObservable();
-    openDelete(title, message, validationValue) {
-        return this.open({
-            title,
-            message,
-            type: 'delete',
-            icon: 'icon-delete',
-            confirmButtonText: 'dialog.delete',
-            cancelButtonText: 'dialog.cancel',
-            confirmButtonClass: 'c-btn context:error',
-            inputConfig: validationValue ? {
-                label: 'dialog.confirmName',
-                placeholder: 'dialog.enterName',
-                validationValue
-            } : undefined,
-            showCloseButton: true
-        });
-    }
-    openConfirm(config) {
-        return this.open({
-            ...config,
-            type: 'default',
-            size: config.size || 'default',
-            showCloseButton: config.showCloseButton ?? true
-        });
-    }
-    open(config) {
-        this.config.set({
-            ...config,
-            confirmButtonText: config.confirmButtonText ?? DialogActions.CONFIRM,
-            cancelButtonText: config.cancelButtonText ?? DialogActions.CANCEL,
-            messageParams: config.messageParams ?? {},
-            showCloseButton: config.showCloseButton ?? true
-        });
-        this.isOpen.set(true);
-        return this.response$;
-    }
-    confirm(value) {
-        this.responseSubject.next(value);
-        this.close();
-    }
-    cancel() {
-        this.responseSubject.next(undefined);
-        this.close();
-    }
-    close() {
-        this.isOpen.set(false);
-        this.config.set({ title: '' });
-        const newSubject = new Subject();
-        const oldSubject = this.responseSubject;
-        this.responseSubject = newSubject;
-        this.response$ = this.responseSubject.asObservable();
-        oldSubject.complete();
-    }
-    openWithOptionalInput(title, message, inputLabel, inputPlaceholder) {
-        return this.open({
-            title,
-            message,
-            type: 'default',
-            confirmButtonText: 'dialog.confirm',
-            cancelButtonText: 'dialog.cancel',
-            inputConfig: inputLabel ? {
-                label: inputLabel,
-                placeholder: inputPlaceholder || '',
-            } : undefined,
-            showCloseButton: true
-        });
-    }
-    updateConfig(config) {
-        this.config.update(currentConfig => ({
-            ...currentConfig,
-            ...config
-        }));
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ConfirmationDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ConfirmationDialogService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: ConfirmationDialogService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
 class ConfirmationDialogComponent {
     popupElement;
     overlayElement;
@@ -11193,11 +11258,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
 // Este archivo es generado automáticamente por scripts/update-version.js
 // No edites manualmente este archivo
 const VERSION = {
-    full: '2.12.7',
+    full: '2.12.8',
     major: 2,
     minor: 12,
-    patch: 7,
-    timestamp: '2025-09-03T18:01:25.906Z',
+    patch: 8,
+    timestamp: '2025-09-03T18:41:20.948Z',
     buildDate: '3/9/2025'
 };