valtech-components 2.0.720 → 2.0.721

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.
Files changed (7) hide show
  1. package/esm2022/lib/services/confirmation-dialog/confirmation-dialog.service.mjs +3 -10
  2. package/esm2022/lib/version.mjs +2 -2
  3. package/fesm2022/valtech-components.mjs +3 -10
  4. package/fesm2022/valtech-components.mjs.map +1 -1
  5. package/lib/version.d.ts +1 -1
  6. package/package.json +1 -1
  7. package/src/lib/components/styles/alert.scss +24 -32
package/lib/version.d.ts CHANGED
@@ -2,4 +2,4 @@
2
2
  * Current version of valtech-components.
3
3
  * This is automatically updated during the publish process.
4
4
  */
5
- export declare const VERSION = "2.0.720";
5
+ export declare const VERSION = "2.0.721";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "valtech-components",
3
- "version": "2.0.720",
3
+ "version": "2.0.721",
4
4
  "private": false,
5
5
  "bin": {
6
6
  "valtech-firebase-config": "./src/lib/services/firebase/scripts/generate-sw-config.js"
package/src/lib/components/styles/alert.scss CHANGED
@@ -1,34 +1,37 @@
1
1
  /**
2
- * val-alert — Estilo unificado para ion-alert (confirmation dialogs).
2
+ * val-alert — Estilo unificado para ion-alert.
3
3
  *
4
4
  * Inspirado en iOS native UIAlertController:
5
5
  * - Backdrop con blur
6
- * - Wrapper translúcido oscuro con bordes redondeados
7
- * - Botones pill apilados, neutros (sin colores chillones)
8
- * - Variant `--destructive`: texto rojo en el botón destructivo (solo texto, no fondo)
6
+ * - Wrapper translúcido con bordes redondeados
7
+ * - Botones pill apilados, full-width
8
+ * - **Sin colores**: todos los botones neutros (incluido destructive)
9
+ * - Adapta automáticamente light/dark via theme tokens de Ionic
9
10
  *
10
11
  * Aplicado por default desde ConfirmationDialogService.
11
12
  * Override añadiendo otra cssClass al alert.
12
13
  */
13
14
 
14
15
  ion-alert.val-alert {
16
+ /* Backdrop con blur */
15
17
  --backdrop-opacity: 0.4;
16
18
 
17
- /* Backdrop con blur */
18
19
  &::part(backdrop) {
19
20
  background: rgba(0, 0, 0, 0.4);
20
21
  backdrop-filter: blur(8px);
21
22
  -webkit-backdrop-filter: blur(8px);
22
23
  }
23
24
 
25
+ /* Wrapper — usa theme tokens, adapta light/dark */
26
+ --background: var(--ion-background-color, #ffffff);
27
+
24
28
  .alert-wrapper {
25
- background: rgba(28, 28, 30, 0.92);
26
- backdrop-filter: blur(40px) saturate(180%);
27
- -webkit-backdrop-filter: blur(40px) saturate(180%);
28
29
  border-radius: 16px;
29
- border: 1px solid rgba(255, 255, 255, 0.08);
30
- box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
30
+ border: 1px solid var(--ion-color-step-100, rgba(0, 0, 0, 0.08));
31
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
31
32
  overflow: hidden;
33
+ backdrop-filter: blur(40px) saturate(180%);
34
+ -webkit-backdrop-filter: blur(40px) saturate(180%);
32
35
  }
33
36
 
34
37
  .alert-head {
@@ -37,27 +40,27 @@ ion-alert.val-alert {
37
40
  }
38
41
 
39
42
  .alert-title {
40
- color: rgba(255, 255, 255, 0.98);
43
+ color: var(--ion-text-color, #000);
41
44
  font-weight: 700;
42
45
  font-size: 17px;
43
46
  line-height: 1.3;
44
47
  }
45
48
 
46
49
  .alert-sub-title {
47
- color: rgba(255, 255, 255, 0.7);
50
+ color: var(--ion-color-step-600, rgba(0, 0, 0, 0.6));
48
51
  font-size: 14px;
49
52
  margin-top: 4px;
50
53
  }
51
54
 
52
55
  .alert-message {
53
- color: rgba(255, 255, 255, 0.72);
56
+ color: var(--ion-color-step-700, rgba(0, 0, 0, 0.7));
54
57
  font-size: 14px;
55
58
  line-height: 1.4;
56
59
  padding: 0 20px 16px;
57
60
  text-align: center;
58
61
  }
59
62
 
60
- /* Grupo de botones */
63
+ /* Grupo de botones — apilado vertical */
61
64
  .alert-button-group {
62
65
  flex-direction: column !important;
63
66
  padding: 8px;
@@ -66,16 +69,16 @@ ion-alert.val-alert {
66
69
  border-top: none;
67
70
  }
68
71
 
69
- /* Cada botón */
72
+ /* Cada botón — pill neutro, sin colores */
70
73
  button.alert-button {
71
74
  flex: 0 0 auto;
72
75
  width: 100%;
73
76
  margin: 0;
74
77
  padding: 14px 20px;
75
78
  border-radius: 12px;
76
- background: rgba(255, 255, 255, 0.08);
77
- border: 1px solid rgba(255, 255, 255, 0.06);
78
- color: rgba(255, 255, 255, 0.95);
79
+ background: var(--ion-color-step-50, rgba(0, 0, 0, 0.04));
80
+ border: 1px solid var(--ion-color-step-100, rgba(0, 0, 0, 0.08));
81
+ color: var(--ion-text-color, #000);
79
82
  font-weight: 600;
80
83
  font-size: 16px;
81
84
  text-transform: none;
@@ -89,11 +92,11 @@ ion-alert.val-alert {
89
92
  }
90
93
 
91
94
  &:hover {
92
- background: rgba(255, 255, 255, 0.14);
95
+ background: var(--ion-color-step-100, rgba(0, 0, 0, 0.08));
93
96
  }
94
97
 
95
98
  &:active {
96
- background: rgba(255, 255, 255, 0.2);
99
+ background: var(--ion-color-step-150, rgba(0, 0, 0, 0.12));
97
100
  }
98
101
 
99
102
  .alert-button-inner {
@@ -103,18 +106,7 @@ ion-alert.val-alert {
103
106
  }
104
107
  }
105
108
 
106
- /* Botón destructivo: solo el texto en rojo, fondo neutro */
107
- &.val-alert--destructive button.alert-button[aria-label],
108
- button.alert-button.alert-button-role-destructive,
109
- button.alert-button[role='destructive'] {
110
- color: #ff453a; /* iOS systemRed dark */
111
-
112
- .alert-button-inner {
113
- color: #ff453a;
114
- }
115
- }
116
-
117
- /* Cancel button: ligeramente menos prominente */
109
+ /* Cancel button: ligeramente menos prominente (font-weight) */
118
110
  button.alert-button.alert-button-role-cancel,
119
111
  button.alert-button[role='cancel'] {
120
112
  font-weight: 500;