valtech-components 2.0.719 → 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.
- 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 +18 -11
- package/esm2022/lib/services/confirmation-dialog/types.mjs +1 -1
- package/esm2022/lib/version.mjs +2 -2
- package/fesm2022/valtech-components.mjs +37 -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 +114 -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,114 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* val-alert — Estilo unificado para ion-alert.
|
|
3
|
+
*
|
|
4
|
+
* Inspirado en iOS native UIAlertController:
|
|
5
|
+
* - Backdrop con blur
|
|
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
|
|
10
|
+
*
|
|
11
|
+
* Aplicado por default desde ConfirmationDialogService.
|
|
12
|
+
* Override añadiendo otra cssClass al alert.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
ion-alert.val-alert {
|
|
16
|
+
/* Backdrop con blur */
|
|
17
|
+
--backdrop-opacity: 0.4;
|
|
18
|
+
|
|
19
|
+
&::part(backdrop) {
|
|
20
|
+
background: rgba(0, 0, 0, 0.4);
|
|
21
|
+
backdrop-filter: blur(8px);
|
|
22
|
+
-webkit-backdrop-filter: blur(8px);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Wrapper — usa theme tokens, adapta light/dark */
|
|
26
|
+
--background: var(--ion-background-color, #ffffff);
|
|
27
|
+
|
|
28
|
+
.alert-wrapper {
|
|
29
|
+
border-radius: 16px;
|
|
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);
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
backdrop-filter: blur(40px) saturate(180%);
|
|
34
|
+
-webkit-backdrop-filter: blur(40px) saturate(180%);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.alert-head {
|
|
38
|
+
padding: 20px 20px 8px;
|
|
39
|
+
text-align: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.alert-title {
|
|
43
|
+
color: var(--ion-text-color, #000);
|
|
44
|
+
font-weight: 700;
|
|
45
|
+
font-size: 17px;
|
|
46
|
+
line-height: 1.3;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.alert-sub-title {
|
|
50
|
+
color: var(--ion-color-step-600, rgba(0, 0, 0, 0.6));
|
|
51
|
+
font-size: 14px;
|
|
52
|
+
margin-top: 4px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.alert-message {
|
|
56
|
+
color: var(--ion-color-step-700, rgba(0, 0, 0, 0.7));
|
|
57
|
+
font-size: 14px;
|
|
58
|
+
line-height: 1.4;
|
|
59
|
+
padding: 0 20px 16px;
|
|
60
|
+
text-align: center;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Grupo de botones — apilado vertical */
|
|
64
|
+
.alert-button-group {
|
|
65
|
+
flex-direction: column !important;
|
|
66
|
+
padding: 8px;
|
|
67
|
+
gap: 6px;
|
|
68
|
+
background: transparent;
|
|
69
|
+
border-top: none;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
/* Cada botón — pill neutro, sin colores */
|
|
73
|
+
button.alert-button {
|
|
74
|
+
flex: 0 0 auto;
|
|
75
|
+
width: 100%;
|
|
76
|
+
margin: 0;
|
|
77
|
+
padding: 14px 20px;
|
|
78
|
+
border-radius: 12px;
|
|
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);
|
|
82
|
+
font-weight: 600;
|
|
83
|
+
font-size: 16px;
|
|
84
|
+
text-transform: none;
|
|
85
|
+
letter-spacing: 0;
|
|
86
|
+
transition: background 0.15s ease;
|
|
87
|
+
min-height: auto;
|
|
88
|
+
|
|
89
|
+
&::part(native) {
|
|
90
|
+
background: transparent;
|
|
91
|
+
color: inherit;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
&:hover {
|
|
95
|
+
background: var(--ion-color-step-100, rgba(0, 0, 0, 0.08));
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
&:active {
|
|
99
|
+
background: var(--ion-color-step-150, rgba(0, 0, 0, 0.12));
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.alert-button-inner {
|
|
103
|
+
justify-content: center;
|
|
104
|
+
color: inherit;
|
|
105
|
+
font-weight: inherit;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Cancel button: ligeramente menos prominente (font-weight) */
|
|
110
|
+
button.alert-button.alert-button-role-cancel,
|
|
111
|
+
button.alert-button[role='cancel'] {
|
|
112
|
+
font-weight: 500;
|
|
113
|
+
}
|
|
114
|
+
}
|