@solcre-org/core-ui 2.12.40 → 2.12.41
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.
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
/** COMPONENT: MODAL
|
|
3
3
|
/* ******************************************** */
|
|
4
4
|
|
|
5
|
-
.c-modal{
|
|
5
|
+
.c-modal {
|
|
6
6
|
--_color: var(--color-neutral-700);
|
|
7
7
|
--_bg: var(--color-neutral-100);
|
|
8
8
|
--_fz: var(--fz-100);
|
|
@@ -13,8 +13,8 @@
|
|
|
13
13
|
--_holder-br: var(--app-br, 8px);
|
|
14
14
|
--_holder-min-w: 45rem;
|
|
15
15
|
--_holder-max-w: 60rem;
|
|
16
|
-
--_holder-w: clamp(var(--_holder-min-w),32vw,var(--_holder-max-w));
|
|
17
|
-
--_overlay-bg: var(--app-popup-overlay, hsl(var(--color-alternative-800-hsl)/70%)
|
|
16
|
+
--_holder-w: clamp(var(--_holder-min-w), 32vw, var(--_holder-max-w));
|
|
17
|
+
--_overlay-bg: var(--app-popup-overlay, hsl(var(--color-alternative-800-hsl)/70%));
|
|
18
18
|
--_header-py: 1.6rem;
|
|
19
19
|
--_bottom-gap-x: 1.5rem;
|
|
20
20
|
--_bottom-py: 1.6rem;
|
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
--_separator-line-color: var(--color-neutral-400);
|
|
32
32
|
|
|
33
33
|
--label-mb: .7em;
|
|
34
|
-
|
|
34
|
+
|
|
35
35
|
position: fixed;
|
|
36
36
|
top: 0;
|
|
37
37
|
left: 0;
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
display: none;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
.c-modal__overlay{
|
|
48
|
+
.c-modal__overlay {
|
|
49
49
|
background: var(--_overlay-bg);
|
|
50
50
|
opacity: var(--_overlay-op);
|
|
51
51
|
position: absolute;
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
/* opacity: 0; */
|
|
58
58
|
}
|
|
59
59
|
|
|
60
|
-
.c-modal__holder{
|
|
60
|
+
.c-modal__holder {
|
|
61
61
|
position: absolute;
|
|
62
62
|
right: var(--_ouside-padding);
|
|
63
63
|
top: var(--_ouside-padding);
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
|
|
78
78
|
.c-modal__header,
|
|
79
79
|
.c-modal__body,
|
|
80
|
-
.c-modal__bottom{
|
|
80
|
+
.c-modal__bottom {
|
|
81
81
|
padding: var(--_holder-py) var(--_holder-px);
|
|
82
82
|
}
|
|
83
83
|
|
|
@@ -90,11 +90,11 @@
|
|
|
90
90
|
height: fit-content;
|
|
91
91
|
}
|
|
92
92
|
|
|
93
|
-
.c-modal__close{
|
|
93
|
+
.c-modal__close {
|
|
94
94
|
color: var(--_close-color);
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
.c-modal__body{
|
|
97
|
+
.c-modal__body {
|
|
98
98
|
position: relative;
|
|
99
99
|
overflow: hidden;
|
|
100
100
|
overflow-y: auto;
|
|
@@ -105,102 +105,108 @@ body:has(.c-modal.is-visible) {
|
|
|
105
105
|
overflow: hidden;
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
-
|
|
109
|
-
content: "";
|
|
110
|
-
position: absolute;
|
|
111
|
-
bottom: 0;
|
|
112
|
-
width: 100%;
|
|
113
|
-
background: linear-gradient(360deg, hsl(var(--color-neutral-100-hsl) / 100%), hsl(var(--color-neutral-100-hsl) / 0%));
|
|
114
|
-
height: 5rem;
|
|
115
|
-
z-index: 1;
|
|
116
|
-
} */
|
|
117
|
-
|
|
118
|
-
.c-modal__body .c-form__group + .c-form__group{
|
|
108
|
+
.c-modal__body .c-form__group+.c-form__group {
|
|
119
109
|
margin-top: var(--_group-separator);
|
|
120
110
|
}
|
|
121
111
|
|
|
122
|
-
.c-modal__body .c-form-input{
|
|
112
|
+
.c-modal__body .c-form-input {
|
|
123
113
|
width: 100%;
|
|
124
114
|
}
|
|
125
115
|
|
|
126
|
-
.c-modal__bottom{
|
|
116
|
+
.c-modal__bottom {
|
|
127
117
|
padding-block: var(--_bottom-py);
|
|
128
118
|
border-top: var(--_separator-line-w) solid var(--_separator-line-color);
|
|
129
119
|
height: fit-content;
|
|
130
120
|
min-height: var(--_bottom-min-height);
|
|
131
121
|
}
|
|
132
122
|
|
|
133
|
-
.c-modal__title{
|
|
123
|
+
.c-modal__title {
|
|
134
124
|
font-size: var(--_title-fz);
|
|
135
125
|
font-weight: var(--_title-fw);
|
|
136
126
|
color: var(--_title-color);
|
|
137
127
|
}
|
|
138
128
|
|
|
139
|
-
.c-mody__text{
|
|
129
|
+
.c-mody__text {
|
|
140
130
|
--text-color: var(--_color);
|
|
141
131
|
}
|
|
142
132
|
|
|
143
|
-
.c-modal__icon{
|
|
133
|
+
.c-modal__icon {
|
|
144
134
|
font-size: var(--_icon-fz);
|
|
145
135
|
color: var(--_title-color);
|
|
146
136
|
}
|
|
147
137
|
|
|
148
|
-
:root .c-modal__icon
|
|
138
|
+
:root .c-modal__icon+.c-modal__title {
|
|
149
139
|
margin-top: calc(var(--_sepatarion-y)*.8);
|
|
150
140
|
}
|
|
151
141
|
|
|
152
|
-
:root .c-modal__bottom{
|
|
142
|
+
:root .c-modal__bottom {
|
|
153
143
|
display: flex;
|
|
154
144
|
justify-content: space-between;
|
|
155
145
|
gap: 0 var(--_bottom-gap-x);
|
|
156
146
|
align-items: center;
|
|
157
147
|
}
|
|
158
148
|
|
|
159
|
-
.c-modal.is-visible{
|
|
149
|
+
.c-modal.is-visible {
|
|
160
150
|
display: flex;
|
|
161
151
|
}
|
|
162
152
|
|
|
163
|
-
.c-modal.is-visible .c-
|
|
164
|
-
animation:
|
|
153
|
+
.c-modal.is-visible .c-modal__overlay {
|
|
154
|
+
animation: showOverlay var(--_modal-animation-in) var(--easeOutCubic) forwards;
|
|
165
155
|
}
|
|
166
156
|
|
|
167
|
-
.c-modal.is-
|
|
168
|
-
animation:
|
|
157
|
+
.c-modal.is-closing .c-modal__overlay {
|
|
158
|
+
animation: hideOverlay var(--_modal-animation-out) ease-out forwards;
|
|
169
159
|
}
|
|
170
160
|
|
|
161
|
+
@keyframes showmodal {
|
|
162
|
+
0% {
|
|
163
|
+
opacity: 0;
|
|
164
|
+
transform: translate3d(5rem, 0, 0);
|
|
165
|
+
}
|
|
171
166
|
|
|
172
|
-
|
|
173
|
-
|
|
167
|
+
100% {
|
|
168
|
+
opacity: 1;
|
|
169
|
+
transform: translate3d(0, 0, 0);
|
|
170
|
+
}
|
|
174
171
|
}
|
|
175
172
|
|
|
176
|
-
|
|
177
|
-
|
|
173
|
+
@keyframes hidemodal {
|
|
174
|
+
0% {
|
|
175
|
+
opacity: 1;
|
|
176
|
+
transform: translate3d(0, 0, 0);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
100% {
|
|
180
|
+
opacity: 0;
|
|
181
|
+
transform: translate3d(5rem, 0, 0);
|
|
182
|
+
}
|
|
178
183
|
}
|
|
179
184
|
|
|
180
|
-
@keyframes
|
|
185
|
+
@keyframes showmodalMobile {
|
|
181
186
|
0% {
|
|
182
187
|
opacity: 0;
|
|
183
|
-
transform: translate3d(
|
|
188
|
+
transform: translate3d(0, 100%, 0);
|
|
184
189
|
}
|
|
185
190
|
|
|
186
191
|
100% {
|
|
187
192
|
opacity: 1;
|
|
188
|
-
transform: translate3d(0,0,0);
|
|
193
|
+
transform: translate3d(0, 0, 0);
|
|
189
194
|
}
|
|
190
195
|
}
|
|
191
196
|
|
|
192
|
-
@keyframes
|
|
197
|
+
@keyframes hidemodalMobile {
|
|
193
198
|
0% {
|
|
194
199
|
opacity: 1;
|
|
195
|
-
transform: translate3d(0,0,0);
|
|
200
|
+
transform: translate3d(0, 0, 0);
|
|
196
201
|
}
|
|
197
202
|
|
|
198
203
|
100% {
|
|
199
204
|
opacity: 0;
|
|
200
|
-
transform: translate3d(
|
|
205
|
+
transform: translate3d(0, 100%, 0);
|
|
201
206
|
}
|
|
202
207
|
}
|
|
203
208
|
|
|
209
|
+
|
|
204
210
|
@keyframes showOverlay {
|
|
205
211
|
0% {
|
|
206
212
|
opacity: 0;
|
|
@@ -224,7 +230,7 @@ body:has(.c-modal.is-visible) {
|
|
|
224
230
|
|
|
225
231
|
/* modal--alt */
|
|
226
232
|
|
|
227
|
-
.c-modal--alt .c-modal__holder{
|
|
233
|
+
.c-modal--alt .c-modal__holder {
|
|
228
234
|
right: 0;
|
|
229
235
|
top: 0;
|
|
230
236
|
height: 100%;
|
|
@@ -235,33 +241,68 @@ body:has(.c-modal.is-visible) {
|
|
|
235
241
|
|
|
236
242
|
/* ********************** MEDIA HOVER ********************** */
|
|
237
243
|
|
|
238
|
-
@media (hover: hover) {
|
|
244
|
+
@media (hover: hover) {
|
|
239
245
|
|
|
240
|
-
.c-modal__close:is(:hover
|
|
246
|
+
.c-modal__close:is(:hover, :focus-visible) {
|
|
241
247
|
color: var(--color-hover);
|
|
242
248
|
transition: color var(--trs-duration-700) ease-out;
|
|
243
249
|
}
|
|
244
250
|
|
|
245
251
|
}
|
|
246
252
|
|
|
253
|
+
/* ********************** ONLY MOBILE ********************** */
|
|
247
254
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
255
|
+
@media (max-width: 47.9375rem)
|
|
256
|
+
/* up to 767px */
|
|
257
|
+
{
|
|
251
258
|
|
|
252
|
-
|
|
259
|
+
.c-modal {
|
|
253
260
|
--_holder-px: var(--wrapper-x);
|
|
254
261
|
--_holder-w: calc(100% - var(--_ouside-padding)*2);
|
|
255
262
|
--_header-py: 1.2rem;
|
|
256
|
-
|
|
257
|
-
|
|
263
|
+
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.c-modal.is-visible .c-modal__holder {
|
|
267
|
+
animation: showmodalMobile var(--_modal-animation-in) var(--easeOutCubic) forwards;
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.c-modal.is-closing .c-modal__holder {
|
|
271
|
+
animation: hidemodalMobile var(--_modal-animation-out) ease-out forwards;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.c-modal__holder {
|
|
275
|
+
height: auto;
|
|
276
|
+
top: auto;
|
|
277
|
+
left: 0;
|
|
278
|
+
right: 0;
|
|
279
|
+
bottom: 0;
|
|
280
|
+
width: 100%;
|
|
281
|
+
max-height: 100vh;
|
|
282
|
+
max-height: 100svh;
|
|
283
|
+
border-radius: 0;
|
|
284
|
+
transform: translate3d(0, 100%, 0);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.c-modal__header,
|
|
288
|
+
.c-modal__bottom {
|
|
289
|
+
border: none;
|
|
290
|
+
}
|
|
258
291
|
|
|
259
292
|
}
|
|
260
293
|
|
|
261
294
|
|
|
295
|
+
/* ********************** MOBILE & TABLET ********************** */
|
|
296
|
+
|
|
297
|
+
@media (max-width: 61.1875rem)
|
|
298
|
+
/* up to 979px */
|
|
299
|
+
{}
|
|
300
|
+
|
|
301
|
+
|
|
262
302
|
/* ********************** SHORT MOBILE ********************** */
|
|
263
303
|
|
|
264
|
-
@media (max-width: 22.4375rem) {
|
|
304
|
+
@media (max-width: 22.4375rem) {
|
|
305
|
+
/* 359px */
|
|
265
306
|
}
|
|
266
307
|
|
|
267
308
|
|
|
@@ -270,16 +311,18 @@ body:has(.c-modal.is-visible) {
|
|
|
270
311
|
|
|
271
312
|
/* ********************** TALL MOBILE PORTRAIT ********************** */
|
|
272
313
|
|
|
273
|
-
@media (max-width: 47.9375rem) and (min-height: 45.625rem) {
|
|
314
|
+
@media (max-width: 47.9375rem) and (min-height: 45.625rem) {
|
|
315
|
+
/* 767px, 730px */
|
|
274
316
|
}
|
|
275
317
|
|
|
276
|
-
|
|
318
|
+
|
|
277
319
|
|
|
278
320
|
|
|
279
321
|
|
|
280
322
|
/* ********************** MOBILE LANDSCAPE ********************** */
|
|
281
323
|
|
|
282
|
-
@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) {
|
|
324
|
+
@media (orientation: landscape) and (min-width: 31.25rem) and (max-width: 47.9375rem) {
|
|
325
|
+
/* 500px, 767px */
|
|
283
326
|
}
|
|
284
327
|
|
|
285
328
|
|
|
@@ -288,17 +331,29 @@ body:has(.c-modal.is-visible) {
|
|
|
288
331
|
|
|
289
332
|
/* ********************** de Mobile a TABLET ********************** */
|
|
290
333
|
|
|
291
|
-
@media (min-width: 48rem) {
|
|
292
|
-
|
|
293
|
-
|
|
334
|
+
@media (min-width: 48rem) {
|
|
335
|
+
/* 768px */
|
|
336
|
+
|
|
337
|
+
|
|
338
|
+
.c-modal.is-visible .c-modal__holder {
|
|
339
|
+
animation: showmodal var(--_modal-animation-in) var(--easeOutCubic) forwards;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.c-modal.is-closing .c-modal__holder {
|
|
343
|
+
animation: hidemodal var(--_modal-animation-out) ease-out forwards;
|
|
344
|
+
}
|
|
294
345
|
}
|
|
295
346
|
|
|
347
|
+
@media (min-width: 48rem) and (orientation: portrait) {}
|
|
348
|
+
|
|
296
349
|
|
|
297
350
|
|
|
298
351
|
|
|
299
352
|
/* ********************** de Tablet a DESKTOP ********************** */
|
|
300
353
|
|
|
301
|
-
@media (min-width: 61.25rem) {
|
|
354
|
+
@media (min-width: 61.25rem) {
|
|
355
|
+
/* 980px */
|
|
356
|
+
|
|
302
357
|
}
|
|
303
358
|
|
|
304
359
|
|
|
@@ -306,9 +361,12 @@ body:has(.c-modal.is-visible) {
|
|
|
306
361
|
|
|
307
362
|
/* ********************** de Desktop a DESKTOP 2 ********************** */
|
|
308
363
|
|
|
309
|
-
@media (min-width: 75rem) {
|
|
364
|
+
@media (min-width: 75rem) {
|
|
365
|
+
/* 1200px */
|
|
310
366
|
}
|
|
311
|
-
|
|
367
|
+
|
|
368
|
+
@media (min-width: 75rem) and (min-height: 45rem) {
|
|
369
|
+
/* 1200, 720 */
|
|
312
370
|
}
|
|
313
371
|
|
|
314
372
|
|
|
@@ -316,13 +374,16 @@ body:has(.c-modal.is-visible) {
|
|
|
316
374
|
|
|
317
375
|
/* ********************** de Desktop 2 a HD ********************** */
|
|
318
376
|
|
|
319
|
-
@media (min-width: 87.5rem) {
|
|
377
|
+
@media (min-width: 87.5rem) {
|
|
378
|
+
/* 1400px */
|
|
320
379
|
|
|
321
|
-
.c-modal{
|
|
380
|
+
.c-modal {
|
|
322
381
|
--_ouside-padding: 1.6rem;
|
|
323
382
|
}
|
|
324
383
|
}
|
|
325
|
-
|
|
384
|
+
|
|
385
|
+
@media (min-width: 87.5rem) and (min-height: 49.375rem) {
|
|
386
|
+
/* 1400px, 790px */
|
|
326
387
|
}
|
|
327
388
|
|
|
328
389
|
|
|
@@ -330,15 +391,22 @@ body:has(.c-modal.is-visible) {
|
|
|
330
391
|
|
|
331
392
|
/* ********************** de Hd a FULL HD ********************** */
|
|
332
393
|
|
|
333
|
-
@media (min-width: 100rem) {
|
|
394
|
+
@media (min-width: 100rem) {
|
|
395
|
+
/* 1600px */
|
|
334
396
|
}
|
|
335
397
|
|
|
336
|
-
@media (min-width: 100rem) and (min-height: 49.375rem) {
|
|
398
|
+
@media (min-width: 100rem) and (min-height: 49.375rem) {
|
|
399
|
+
/* 1600px, 790px */
|
|
337
400
|
}
|
|
338
|
-
|
|
401
|
+
|
|
402
|
+
@media (min-width: 100rem) and (min-height: 56.25rem) {
|
|
403
|
+
/* 1600px, 900px */
|
|
339
404
|
}
|
|
340
405
|
|
|
341
|
-
@media (min-width: 112.5rem) {
|
|
406
|
+
@media (min-width: 112.5rem) {
|
|
407
|
+
/* 1800px */
|
|
342
408
|
}
|
|
343
|
-
|
|
409
|
+
|
|
410
|
+
@media (min-width: 112.5rem) and (min-height: 56.25rem) {
|
|
411
|
+
/* 1800px, 900px */
|
|
344
412
|
}
|
|
@@ -3756,7 +3756,11 @@ class MultiEntryFieldComponent {
|
|
|
3756
3756
|
const signature = this.serializeValue(inputValue);
|
|
3757
3757
|
const currentEntriesCount = this.entries().length;
|
|
3758
3758
|
const requiresMinEntriesUpdate = currentEntriesCount < this.minEntries();
|
|
3759
|
-
|
|
3759
|
+
const matchesLastEmitted = this.lastEmittedSignature === signature;
|
|
3760
|
+
if ((this.lastInputSignature === signature || matchesLastEmitted) && currentEntriesCount > 0 && !requiresMinEntriesUpdate) {
|
|
3761
|
+
if (this.lastInputSignature !== signature) {
|
|
3762
|
+
this.lastInputSignature = signature;
|
|
3763
|
+
}
|
|
3760
3764
|
return;
|
|
3761
3765
|
}
|
|
3762
3766
|
this.isSyncingFromInput.set(true);
|
|
@@ -3797,6 +3801,9 @@ class MultiEntryFieldComponent {
|
|
|
3797
3801
|
this.entries.set(newEntries);
|
|
3798
3802
|
this.fieldValues.set(newEntries.map(entry => entry.value));
|
|
3799
3803
|
this.lastInputSignature = signature;
|
|
3804
|
+
if (matchesLastEmitted) {
|
|
3805
|
+
this.lastEmittedSignature = signature;
|
|
3806
|
+
}
|
|
3800
3807
|
}
|
|
3801
3808
|
finally {
|
|
3802
3809
|
this.isSyncingFromInput.set(false);
|
|
@@ -13393,11 +13400,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
|
|
|
13393
13400
|
// Este archivo es generado automáticamente por scripts/update-version.js
|
|
13394
13401
|
// No edites manualmente este archivo
|
|
13395
13402
|
const VERSION = {
|
|
13396
|
-
full: '2.12.
|
|
13403
|
+
full: '2.12.41',
|
|
13397
13404
|
major: 2,
|
|
13398
13405
|
minor: 12,
|
|
13399
|
-
patch:
|
|
13400
|
-
timestamp: '2025-09-
|
|
13406
|
+
patch: 41,
|
|
13407
|
+
timestamp: '2025-09-17T18:43:36.144Z',
|
|
13401
13408
|
buildDate: '17/9/2025'
|
|
13402
13409
|
};
|
|
13403
13410
|
|