@solcre-org/core-ui 2.12.39 → 2.12.41

package/assets/css/inc/components/links.css

@@ -54,6 +54,12 @@
     pointer-events: none;
 }
 
+.c-link__underlined{
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+
 
 /* Context */
 

package/assets/css/inc/components/modal.css

@@ -2,7 +2,7 @@
 /** COMPONENT: MODAL
 /* ******************************************** */
 
-.c-modal{
+.c-modal {
     --_color: var(--color-neutral-700);
     --_bg: var(--color-neutral-100);
     --_fz: var(--fz-100);
@@ -13,8 +13,8 @@
     --_holder-br: var(--app-br, 8px);
     --_holder-min-w: 45rem;
     --_holder-max-w: 60rem;
-    --_holder-w: clamp(var(--_holder-min-w),32vw,var(--_holder-max-w));
-    --_overlay-bg: var(--app-popup-overlay, hsl(var(--color-alternative-800-hsl)/70%) );
+    --_holder-w: clamp(var(--_holder-min-w), 32vw, var(--_holder-max-w));
+    --_overlay-bg: var(--app-popup-overlay, hsl(var(--color-alternative-800-hsl)/70%));
     --_header-py: 1.6rem;
     --_bottom-gap-x: 1.5rem;
     --_bottom-py: 1.6rem;
@@ -31,7 +31,7 @@
     --_separator-line-color: var(--color-neutral-400);
 
     --label-mb: .7em;
-    
+
     position: fixed;
     top: 0;
     left: 0;
@@ -45,7 +45,7 @@
     display: none;
 }
 
-.c-modal__overlay{
+.c-modal__overlay {
     background: var(--_overlay-bg);
     opacity: var(--_overlay-op);
     position: absolute;
@@ -57,7 +57,7 @@
     /* opacity: 0; */
 }
 
-.c-modal__holder{
+.c-modal__holder {
     position: absolute;
     right: var(--_ouside-padding);
     top: var(--_ouside-padding);
@@ -77,7 +77,7 @@
 
 .c-modal__header,
 .c-modal__body,
-.c-modal__bottom{
+.c-modal__bottom {
     padding: var(--_holder-py) var(--_holder-px);
 }
 
@@ -90,11 +90,11 @@
     height: fit-content;
 }
 
-.c-modal__close{
+.c-modal__close {
     color: var(--_close-color);
 }
 
-.c-modal__body{
+.c-modal__body {
     position: relative;
     overflow: hidden;
     overflow-y: auto;
@@ -105,102 +105,108 @@ body:has(.c-modal.is-visible) {
     overflow: hidden;
 }
 
-/* .c-modal__body::before{
-    content: "";
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    background: linear-gradient(360deg, hsl(var(--color-neutral-100-hsl) / 100%), hsl(var(--color-neutral-100-hsl) / 0%));
-    height: 5rem;
-    z-index: 1;
-} */
-
-.c-modal__body .c-form__group + .c-form__group{
+.c-modal__body .c-form__group+.c-form__group {
     margin-top: var(--_group-separator);
 }
 
-.c-modal__body .c-form-input{
+.c-modal__body .c-form-input {
     width: 100%;
 }
 
-.c-modal__bottom{
+.c-modal__bottom {
     padding-block: var(--_bottom-py);
     border-top: var(--_separator-line-w) solid var(--_separator-line-color);
     height: fit-content;
     min-height: var(--_bottom-min-height);
 }
 
-.c-modal__title{
+.c-modal__title {
     font-size: var(--_title-fz);
     font-weight: var(--_title-fw);
     color: var(--_title-color);
 }
 
-.c-mody__text{
+.c-mody__text {
     --text-color: var(--_color);
 }
 
-.c-modal__icon{
+.c-modal__icon {
     font-size: var(--_icon-fz);
     color: var(--_title-color);
 }
 
-:root .c-modal__icon + .c-modal__title{
+:root .c-modal__icon+.c-modal__title {
     margin-top: calc(var(--_sepatarion-y)*.8);
 }
 
-:root .c-modal__bottom{
+:root .c-modal__bottom {
     display: flex;
     justify-content: space-between;
     gap: 0 var(--_bottom-gap-x);
     align-items: center;
 }
 
-.c-modal.is-visible{
+.c-modal.is-visible {
     display: flex;
 }
 
-.c-modal.is-visible .c-modal__holder{
-    animation: showmodal var(--_modal-animation-in) var(--easeOutCubic) forwards;
+.c-modal.is-visible .c-modal__overlay {
+    animation: showOverlay var(--_modal-animation-in) var(--easeOutCubic) forwards;
 }
 
-.c-modal.is-visible .c-modal__overlay{
-    animation: showOverlay var(--_modal-animation-in) var(--easeOutCubic) forwards;
+.c-modal.is-closing .c-modal__overlay {
+    animation: hideOverlay var(--_modal-animation-out) ease-out forwards;
 }
 
+@keyframes showmodal {
+    0% {
+        opacity: 0;
+        transform: translate3d(5rem, 0, 0);
+    }
 
-.c-modal.is-closing .c-modal__holder{
-    animation: hidemodal var(--_modal-animation-out) ease-out forwards;
+    100% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
 }
 
-.c-modal.is-closing .c-modal__overlay{
-    animation: hideOverlay var(--_modal-animation-out) ease-out forwards;
+@keyframes hidemodal {
+    0% {
+        opacity: 1;
+        transform: translate3d(0, 0, 0);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translate3d(5rem, 0, 0);
+    }
 }
 
-@keyframes showmodal {
+@keyframes showmodalMobile {
     0% {
         opacity: 0;
-        transform: translate3d(5rem,0,0);
+        transform: translate3d(0, 100%, 0);
     }
 
     100% {
         opacity: 1;
-        transform: translate3d(0,0,0);
+        transform: translate3d(0, 0, 0);
     }
 }
 
-@keyframes hidemodal {
+@keyframes hidemodalMobile {
     0% {
         opacity: 1;
-        transform: translate3d(0,0,0);
+        transform: translate3d(0, 0, 0);
     }
 
     100% {
         opacity: 0;
-        transform: translate3d(5rem,0,0);
+        transform: translate3d(0, 100%, 0);
     }
 }
 
+
 @keyframes showOverlay {
     0% {
         opacity: 0;
@@ -224,7 +230,7 @@ body:has(.c-modal.is-visible) {
 
 /* modal--alt */
 
-.c-modal--alt .c-modal__holder{
+.c-modal--alt .c-modal__holder {
     right: 0;
     top: 0;
     height: 100%;
@@ -235,33 +241,68 @@ body:has(.c-modal.is-visible) {
 
 /* ********************** MEDIA HOVER ********************** */
 
-@media (hover: hover) { 
+@media (hover: hover) {
 
-    .c-modal__close:is(:hover,:focus-visible){
+    .c-modal__close:is(:hover, :focus-visible) {
         color: var(--color-hover);
         transition: color var(--trs-duration-700) ease-out;
     }
 
 }
 
+/* ********************** ONLY MOBILE ********************** */
 
-/* ********************** MOBILE & TABLET ********************** */
-
-@media (max-width: 61.1875rem) /* up to 979px */ { 
+@media (max-width: 47.9375rem)
+/* up to 767px */
+    {
 
-     .c-modal{
+    .c-modal {
         --_holder-px: var(--wrapper-x);
         --_holder-w: calc(100% - var(--_ouside-padding)*2);
         --_header-py: 1.2rem;
-        
-     }
+
+    }
+
+    .c-modal.is-visible .c-modal__holder {
+        animation: showmodalMobile var(--_modal-animation-in) var(--easeOutCubic) forwards;
+    }
+
+    .c-modal.is-closing .c-modal__holder {
+        animation: hidemodalMobile var(--_modal-animation-out) ease-out forwards;
+    }
+
+    .c-modal__holder {
+        height: auto;
+        top: auto;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        width: 100%;
+        max-height: 100vh;
+        max-height: 100svh;
+        border-radius: 0;
+        transform: translate3d(0, 100%, 0);
+    }
+
+    .c-modal__header,
+    .c-modal__bottom {
+        border: none;
+    }
 
 }
 
 
+/* ********************** MOBILE & TABLET ********************** */
+
+@media (max-width: 61.1875rem)
+/* up to 979px */
+    {}
+
+
 /* ********************** SHORT MOBILE ********************** */
 
-@media (max-width: 22.4375rem) { /* 359px */
+@media (max-width: 22.4375rem) {
+    /* 359px */
 }
 
 
@@ -270,16 +311,18 @@ body:has(.c-modal.is-visible) {
 
 /* ********************** TALL MOBILE PORTRAIT ********************** */
 
-@media (max-width: 47.9375rem) and (min-height: 45.625rem) { /* 767px, 730px */
+@media (max-width: 47.9375rem) and (min-height: 45.625rem) {
+    /* 767px, 730px */
 }
 
- 
+
 
 
 
 /* ********************** MOBILE LANDSCAPE ********************** */
 
-@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) { /* 500px, 767px */
+@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) {
+    /* 500px, 767px */
 }
 
 
@@ -288,17 +331,29 @@ body:has(.c-modal.is-visible) {
 
 /* ********************** de Mobile a TABLET ********************** */
 
-@media (min-width: 48rem) { /* 768px */
-}
-@media (min-width: 48rem) and (orientation: portrait) {
+@media (min-width: 48rem) {
+    /* 768px */
+
+
+    .c-modal.is-visible .c-modal__holder {
+        animation: showmodal var(--_modal-animation-in) var(--easeOutCubic) forwards;
+    }
+
+    .c-modal.is-closing .c-modal__holder {
+        animation: hidemodal var(--_modal-animation-out) ease-out forwards;
+    }
 }
 
+@media (min-width: 48rem) and (orientation: portrait) {}
+
 
 
 
 /* ********************** de Tablet a DESKTOP ********************** */
 
-@media (min-width: 61.25rem) { /* 980px */
+@media (min-width: 61.25rem) {
+    /* 980px */
+
 }
 
 
@@ -306,9 +361,12 @@ body:has(.c-modal.is-visible) {
 
 /* ********************** de Desktop a DESKTOP 2 ********************** */
 
-@media (min-width: 75rem) { /* 1200px */
+@media (min-width: 75rem) {
+    /* 1200px */
 }
-@media (min-width: 75rem) and (min-height: 45rem) { /* 1200, 720 */
+
+@media (min-width: 75rem) and (min-height: 45rem) {
+    /* 1200, 720 */
 }
 
 
@@ -316,13 +374,16 @@ body:has(.c-modal.is-visible) {
 
 /* ********************** de Desktop 2 a HD ********************** */
 
-@media (min-width: 87.5rem) { /* 1400px */
+@media (min-width: 87.5rem) {
+    /* 1400px */
 
-    .c-modal{
+    .c-modal {
         --_ouside-padding: 1.6rem;
     }
 }
-@media (min-width: 87.5rem) and (min-height: 49.375rem) { /* 1400px, 790px */
+
+@media (min-width: 87.5rem) and (min-height: 49.375rem) {
+    /* 1400px, 790px */
 }
 
 
@@ -330,15 +391,22 @@ body:has(.c-modal.is-visible) {
 
 /* ********************** de Hd a FULL HD ********************** */
 
-@media (min-width: 100rem) { /* 1600px */
+@media (min-width: 100rem) {
+    /* 1600px */
 }
 
-@media (min-width: 100rem) and (min-height: 49.375rem) { /* 1600px, 790px */
+@media (min-width: 100rem) and (min-height: 49.375rem) {
+    /* 1600px, 790px */
 }
-@media (min-width: 100rem) and (min-height: 56.25rem) { /* 1600px, 900px */
+
+@media (min-width: 100rem) and (min-height: 56.25rem) {
+    /* 1600px, 900px */
 }
 
-@media (min-width: 112.5rem) { /* 1800px */
+@media (min-width: 112.5rem) {
+    /* 1800px */
 }
-@media (min-width: 112.5rem) and (min-height: 56.25rem) { /* 1800px, 900px */
+
+@media (min-width: 112.5rem) and (min-height: 56.25rem) {
+    /* 1800px, 900px */
 }

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

@@ -3704,6 +3704,9 @@ class MultiEntryFieldComponent {
     ModalMode = ModalMode;
     entries = signal([]);
     fieldValues = signal([]);
+    isSyncingFromInput = signal(false);
+    lastInputSignature = null;
+    lastEmittedSignature = null;
     config = computed(() => this.field().multiEntryConfig || {});
     allowMultiple = computed(() => this.config().allowMultipleEntries || false);
     maxEntries = computed(() => this.config().maxEntries || 10);
@@ -3750,38 +3753,61 @@ class MultiEntryFieldComponent {
         this.initializeEntries(this.value());
     }
     initializeEntries(inputValue) {
-        if (!inputValue) {
-            const initialEntries = Array(this.minEntries()).fill(null).map((_, index) => ({
-                id: this.generateEntryId(),
-                value: null
-            }));
-            this.entries.set(initialEntries);
-            this.fieldValues.set(Array(this.minEntries()).fill(null));
+        const signature = this.serializeValue(inputValue);
+        const currentEntriesCount = this.entries().length;
+        const requiresMinEntriesUpdate = currentEntriesCount < this.minEntries();
+        const matchesLastEmitted = this.lastEmittedSignature === signature;
+        if ((this.lastInputSignature === signature || matchesLastEmitted) && currentEntriesCount > 0 && !requiresMinEntriesUpdate) {
+            if (this.lastInputSignature !== signature) {
+                this.lastInputSignature = signature;
+            }
             return;
         }
-        let parsedValues = [];
-        if (Array.isArray(inputValue)) {
-            parsedValues = inputValue;
-        }
-        else if (typeof inputValue === 'string') {
-            const separator = this.config().customSeparator || ',';
-            parsedValues = inputValue.split(separator).map(v => v.trim()).filter(v => v !== '');
-        }
-        else {
-            parsedValues = [inputValue];
+        this.isSyncingFromInput.set(true);
+        try {
+            let newEntries = [];
+            if (!inputValue) {
+                newEntries = Array.from({ length: this.minEntries() }, () => ({
+                    id: this.generateEntryId(),
+                    value: null
+                }));
+            }
+            else {
+                let parsedValues = [];
+                if (Array.isArray(inputValue)) {
+                    parsedValues = inputValue;
+                }
+                else if (typeof inputValue === 'string') {
+                    const separator = this.config().customSeparator || ',';
+                    parsedValues = inputValue
+                        .split(separator)
+                        .map(v => v.trim())
+                        .filter(v => v !== '');
+                }
+                else {
+                    parsedValues = [inputValue];
+                }
+                newEntries = parsedValues.map(value => ({
+                    id: this.generateEntryId(),
+                    value
+                }));
+                while (newEntries.length < this.minEntries()) {
+                    newEntries.push({
+                        id: this.generateEntryId(),
+                        value: null
+                    });
+                }
+            }
+            this.entries.set(newEntries);
+            this.fieldValues.set(newEntries.map(entry => entry.value));
+            this.lastInputSignature = signature;
+            if (matchesLastEmitted) {
+                this.lastEmittedSignature = signature;
+            }
         }
-        const newEntries = parsedValues.map((value, index) => ({
-            id: this.generateEntryId(),
-            value: value
-        }));
-        while (newEntries.length < this.minEntries()) {
-            newEntries.push({
-                id: this.generateEntryId(),
-                value: null
-            });
+        finally {
+            this.isSyncingFromInput.set(false);
         }
-        this.entries.set(newEntries);
-        this.fieldValues.set(newEntries.map(entry => entry.value));
     }
     generateEntryId() {
         return `entry_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
@@ -3862,6 +3888,15 @@ class MultiEntryFieldComponent {
             default:
                 formattedValue = nonEmptyValues;
         }
+        const signature = this.serializeValue(formattedValue);
+        if (this.isSyncingFromInput()) {
+            this.lastEmittedSignature = signature;
+            return;
+        }
+        if (this.lastEmittedSignature === signature) {
+            return;
+        }
+        this.lastEmittedSignature = signature;
         this.valueChange.emit(formattedValue);
     }
     createFieldConfigForEntry(index) {
@@ -3890,6 +3925,14 @@ class MultiEntryFieldComponent {
     shouldShowRemoveButton(index) {
         return this.shouldShowActions(index) && this.canRemove();
     }
+    serializeValue(value) {
+        try {
+            return JSON.stringify(value ?? null);
+        }
+        catch {
+            return String(value);
+        }
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: MultiEntryFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: MultiEntryFieldComponent, isStandalone: true, selector: "core-multi-entry-field", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: true, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, rowData: { classPropertyName: "rowData", publicName: "rowData", isSignal: true, isRequired: false, transformFunction: null }, formValue: { classPropertyName: "formValue", publicName: "formValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange", onBlurEvent: "onBlurEvent", onEnterEvent: "onEnterEvent" }, hostDirectives: [{ directive: CoreHostDirective }], ngImport: i0, template: "<div class=\"c-entry-group\">\n  @for (entry of entries(); track entry.id; let index = $index) {\n    <div class=\"c-entry-item\">\n      <!-- Campo din\u00E1mico para cada entrada -->\n      <div\n        coreDynamicField\n        [field]=\"createFieldConfigForEntry(index)\"\n        [value]=\"entry.value\"\n        [mode]=\"mode()\"\n        [errors]=\"errors()\"\n        [rowData]=\"rowData()\"\n        [formValue]=\"formValue()\"\n        (valueChange)=\"onFieldValueChange($event, index)\"\n        (onBlurEvent)=\"onFieldBlur($event)\"\n        (onEnterEvent)=\"onFieldEnter($event)\">\n      </div>\n\n      <!-- Botones de acci\u00F3n (agregar/eliminar) -->\n      @if (shouldShowActions(index)) {\n        <div class=\"c-entry-actions\">\n          @if (shouldShowAddButton(index)) {\n            <button \n              type=\"button\"\n              class=\"c-entry-action c-entry-action--add\"\n              (click)=\"addEntry()\"\n              [disabled]=\"isDisabled()\"\n              [title]=\"addLabel() | translate\"\n              [attr.aria-label]=\"addLabel() | translate\">\n              <span class=\"icon-counter-up\"></span>\n              {{ addLabel() | translate }}\n            </button>\n          }\n          \n          @if (shouldShowRemoveButton(index)) {\n            <button \n              type=\"button\"\n              class=\"c-entry-action c-entry-action--remove\"\n              (click)=\"removeEntry(index)\"\n              [disabled]=\"isDisabled()\"\n              [title]=\"removeLabel() | translate\"\n              [attr.aria-label]=\"removeLabel() | translate\">\n              <span class=\"icon-counter-down\"></span>\n              {{ removeLabel() | translate }}\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Errores del campo principal -->\n  @if (errors().length > 0) {\n    <core-field-errors [errors]=\"errors()\"></core-field-errors>\n  }\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: FieldErrorsComponent, selector: "core-field-errors", inputs: ["errors"] }] });
 }
@@ -13357,11 +13400,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.39',
+    full: '2.12.41',
     major: 2,
     minor: 12,
-    patch: 39,
-    timestamp: '2025-09-17T15:15:12.462Z',
+    patch: 41,
+    timestamp: '2025-09-17T18:43:36.144Z',
     buildDate: '17/9/2025'
 };