valtech-components 2.0.719 → 2.0.720
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.
- package/esm2022/lib/components/molecules/action-card/action-card.component.mjs +15 -40
- package/esm2022/lib/components/molecules/stats-card/stats-card.component.mjs +8 -10
- package/esm2022/lib/services/confirmation-dialog/confirmation-dialog.service.mjs +25 -11
- package/esm2022/lib/services/confirmation-dialog/types.mjs +1 -1
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/valtech-components.mjs +44 -57
- package/fesm2022/valtech-components.mjs.map +1 -1
- package/lib/components/molecules/action-card/action-card.component.d.ts +3 -3
- package/lib/components/molecules/stats-card/stats-card.component.d.ts +2 -2
- package/lib/services/confirmation-dialog/types.d.ts +2 -2
- package/lib/version.d.ts +1 -1
- package/package.json +1 -1
- package/src/lib/components/styles/alert.scss +122 -0
- package/src/lib/components/styles/overrides.scss +1 -0
|
@@ -15,7 +15,7 @@ import * as i0 from "@angular/core";
|
|
|
15
15
|
* title: 'Settings',
|
|
16
16
|
* description: 'Manage your preferences'
|
|
17
17
|
* }"
|
|
18
|
-
* (
|
|
18
|
+
* (onClick)="onCardClick($event)"
|
|
19
19
|
* />
|
|
20
20
|
* ```
|
|
21
21
|
*
|
|
@@ -50,7 +50,7 @@ export declare class ActionCardComponent {
|
|
|
50
50
|
/** Component configuration */
|
|
51
51
|
readonly props: import("@angular/core").InputSignal<Partial<ActionCardMetadata>>;
|
|
52
52
|
/** Event emitted when card is clicked */
|
|
53
|
-
|
|
53
|
+
onClick: EventEmitter<ActionCardClickEvent>;
|
|
54
54
|
/** Merged configuration with defaults */
|
|
55
55
|
config: import("@angular/core").Signal<{
|
|
56
56
|
token?: string;
|
|
@@ -86,5 +86,5 @@ export declare class ActionCardComponent {
|
|
|
86
86
|
/** Handle card click */
|
|
87
87
|
handleClick(event: MouseEvent): void;
|
|
88
88
|
static ɵfac: i0.ɵɵFactoryDeclaration<ActionCardComponent, never>;
|
|
89
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<ActionCardComponent, "val-action-card", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "
|
|
89
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<ActionCardComponent, "val-action-card", never, { "props": { "alias": "props"; "required": false; "isSignal": true; }; }, { "onClick": "onClick"; }, never, never, true, never>;
|
|
90
90
|
}
|
|
@@ -6,7 +6,7 @@ export declare class StatsCardComponent implements OnInit, OnChanges {
|
|
|
6
6
|
preset?: string;
|
|
7
7
|
props: Partial<StatsCardMetadata>;
|
|
8
8
|
resolvedProps: StatsCardMetadata;
|
|
9
|
-
|
|
9
|
+
onClick: EventEmitter<void>;
|
|
10
10
|
Math: Math;
|
|
11
11
|
ngOnInit(): void;
|
|
12
12
|
ngOnChanges(changes: SimpleChanges): void;
|
|
@@ -16,5 +16,5 @@ export declare class StatsCardComponent implements OnInit, OnChanges {
|
|
|
16
16
|
getTrendClass(): string;
|
|
17
17
|
getTrendIcon(): string;
|
|
18
18
|
static ɵfac: i0.ɵɵFactoryDeclaration<StatsCardComponent, never>;
|
|
19
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<StatsCardComponent, "val-stats-card", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "
|
|
19
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<StatsCardComponent, "val-stats-card", never, { "preset": { "alias": "preset"; "required": false; }; "props": { "alias": "props"; "required": false; }; }, { "onClick": "onClick"; }, never, never, true, never>;
|
|
20
20
|
}
|
|
@@ -30,8 +30,8 @@ export interface ConfirmationDialogMetadata {
|
|
|
30
30
|
extraButtons?: ConfirmationButton[];
|
|
31
31
|
/** Allow dismissing by clicking backdrop */
|
|
32
32
|
backdropDismiss?: boolean;
|
|
33
|
-
/** CSS class for the alert */
|
|
34
|
-
cssClass?: string;
|
|
33
|
+
/** CSS class(es) for the alert */
|
|
34
|
+
cssClass?: string | string[];
|
|
35
35
|
/** Alert mode */
|
|
36
36
|
mode?: 'ios' | 'md';
|
|
37
37
|
/** Unique token identifier */
|
package/lib/version.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* val-alert — Estilo unificado para ion-alert (confirmation dialogs).
|
|
3
|
+
*
|
|
4
|
+
* Inspirado en iOS native UIAlertController:
|
|
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)
|
|
9
|
+
*
|
|
10
|
+
* Aplicado por default desde ConfirmationDialogService.
|
|
11
|
+
* Override añadiendo otra cssClass al alert.
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
ion-alert.val-alert {
|
|
15
|
+
--backdrop-opacity: 0.4;
|
|
16
|
+
|
|
17
|
+
/* Backdrop con blur */
|
|
18
|
+
&::part(backdrop) {
|
|
19
|
+
background: rgba(0, 0, 0, 0.4);
|
|
20
|
+
backdrop-filter: blur(8px);
|
|
21
|
+
-webkit-backdrop-filter: blur(8px);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.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
|
+
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);
|
|
31
|
+
overflow: hidden;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.alert-head {
|
|
35
|
+
padding: 20px 20px 8px;
|
|
36
|
+
text-align: center;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.alert-title {
|
|
40
|
+
color: rgba(255, 255, 255, 0.98);
|
|
41
|
+
font-weight: 700;
|
|
42
|
+
font-size: 17px;
|
|
43
|
+
line-height: 1.3;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.alert-sub-title {
|
|
47
|
+
color: rgba(255, 255, 255, 0.7);
|
|
48
|
+
font-size: 14px;
|
|
49
|
+
margin-top: 4px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.alert-message {
|
|
53
|
+
color: rgba(255, 255, 255, 0.72);
|
|
54
|
+
font-size: 14px;
|
|
55
|
+
line-height: 1.4;
|
|
56
|
+
padding: 0 20px 16px;
|
|
57
|
+
text-align: center;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Grupo de botones */
|
|
61
|
+
.alert-button-group {
|
|
62
|
+
flex-direction: column !important;
|
|
63
|
+
padding: 8px;
|
|
64
|
+
gap: 6px;
|
|
65
|
+
background: transparent;
|
|
66
|
+
border-top: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/* Cada botón */
|
|
70
|
+
button.alert-button {
|
|
71
|
+
flex: 0 0 auto;
|
|
72
|
+
width: 100%;
|
|
73
|
+
margin: 0;
|
|
74
|
+
padding: 14px 20px;
|
|
75
|
+
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
|
+
font-weight: 600;
|
|
80
|
+
font-size: 16px;
|
|
81
|
+
text-transform: none;
|
|
82
|
+
letter-spacing: 0;
|
|
83
|
+
transition: background 0.15s ease;
|
|
84
|
+
min-height: auto;
|
|
85
|
+
|
|
86
|
+
&::part(native) {
|
|
87
|
+
background: transparent;
|
|
88
|
+
color: inherit;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&:hover {
|
|
92
|
+
background: rgba(255, 255, 255, 0.14);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
&:active {
|
|
96
|
+
background: rgba(255, 255, 255, 0.2);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.alert-button-inner {
|
|
100
|
+
justify-content: center;
|
|
101
|
+
color: inherit;
|
|
102
|
+
font-weight: inherit;
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
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 */
|
|
118
|
+
button.alert-button.alert-button-role-cancel,
|
|
119
|
+
button.alert-button[role='cancel'] {
|
|
120
|
+
font-weight: 500;
|
|
121
|
+
}
|
|
122
|
+
}
|