ngx-vector-components 6.42.0 → 6.44.0
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/CHANGELOG.md +29 -0
- package/assets/styles/_primeng-custom-theme.scss +0 -223
- package/assets/styles/_variables.scss +3 -0
- package/fesm2022/ngx-vector-components.mjs +54 -23
- package/fesm2022/ngx-vector-components.mjs.map +1 -1
- package/lib/components/fields/button/button.component.d.ts +22 -4
- package/lib/models/profile.model.d.ts +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,34 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [6.44.0] (23/10/2026)
|
|
4
|
+
|
|
5
|
+
### Feat
|
|
6
|
+
|
|
7
|
+
- Added permission 'ENABLED_RESET_LOT_TRIP_IMAGEM' ('Enabled Reset Lot Trip Imagem') in `ProfileModuleActionType` (`profile.model.ts`)
|
|
8
|
+
|
|
9
|
+
## [6.43.0] (22/10/2026)
|
|
10
|
+
|
|
11
|
+
### Feat
|
|
12
|
+
|
|
13
|
+
- Added `width` input (`'full' | 'fit-content'`, default `'full'`); `fit-content` overrides the global `width: 100%` (`button.component.ts`)
|
|
14
|
+
- Added `rounded` input for fully rounded borders: a pill with a label, a circle when icon-only (`button.component.ts`)
|
|
15
|
+
- Added `cursor` input (default `'pointer'`), not applied to the disabled state (`button.component.ts`)
|
|
16
|
+
- Exported type `ButtonCursorType` with the 14 accepted cursor values (`button.component.ts`)
|
|
17
|
+
- Added variant `light-filled` to `ButtonType` (`button.component.ts`)
|
|
18
|
+
- A button with an icon and no label now renders as 32x32 (`button.component.ts`, `button.component.scss`)
|
|
19
|
+
- Added a one-line JSDoc to every `@Input` and `@Output` (`button.component.ts`)
|
|
20
|
+
- Added CSS variables `--text-color-default` and `--border-light` (`_variables.scss`)
|
|
21
|
+
|
|
22
|
+
### Breaking
|
|
23
|
+
|
|
24
|
+
- Renamed the `noShadow` input to `shadow` (default `false`); the shadow is now opt-in. Remove `[noShadow]` from consumers and pass `[shadow]="true"` where the shadow is wanted (`button.component.ts`)
|
|
25
|
+
- Removed the `round` input; an 8px border radius is now the default. Remove `[round]` from consumers and use `[rounded]="true"` for fully rounded borders (`button.component.ts`, `button.component.scss`)
|
|
26
|
+
|
|
27
|
+
### Refactor
|
|
28
|
+
|
|
29
|
+
- Moved the 11 `ButtonType` variant styles from the global theme into the component, under `:host ::ng-deep` (`button.component.scss`, `_primeng-custom-theme.scss`)
|
|
30
|
+
- Kept the base `p-button` block global: `p-fileUpload`, `p-table`, `p-confirmDialog`, `p-carousel` and `p-datepicker` also render `<p-button>` internally (`_primeng-custom-theme.scss`)
|
|
31
|
+
|
|
3
32
|
## [6.42.0] (21/10/2026)
|
|
4
33
|
|
|
5
34
|
### Feat
|
|
@@ -60,12 +60,6 @@ p-button {
|
|
|
60
60
|
width: 100% !important;
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
&.round {
|
|
64
|
-
button {
|
|
65
|
-
border-radius: 8px;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
|
|
69
63
|
&:hover:not(:disabled) {
|
|
70
64
|
background-color: #003049;
|
|
71
65
|
border-color: #003049;
|
|
@@ -78,226 +72,9 @@ p-button {
|
|
|
78
72
|
&:disabled {
|
|
79
73
|
cursor: not-allowed;
|
|
80
74
|
}
|
|
81
|
-
.no-shadow {
|
|
82
|
-
box-shadow: none;
|
|
83
|
-
}
|
|
84
|
-
|
|
85
75
|
.p-button {
|
|
86
76
|
border-width: 2px !important;
|
|
87
77
|
}
|
|
88
|
-
|
|
89
|
-
.default {
|
|
90
|
-
background-color: #ffffff;
|
|
91
|
-
border-color: var(--theme-dark);
|
|
92
|
-
|
|
93
|
-
.p-button-label {
|
|
94
|
-
color: var(--theme-dark);
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
.p-button-icon {
|
|
98
|
-
color: var(--theme-dark);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
&:hover:not(:disabled) {
|
|
102
|
-
background-color: var(--theme-dark);
|
|
103
|
-
border-color: var(--theme-dark);
|
|
104
|
-
.p-button-label {
|
|
105
|
-
color: #ffffff;
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
.default-filled {
|
|
111
|
-
background-color: var(--theme-primary);
|
|
112
|
-
border-color: var(--theme-primary);
|
|
113
|
-
.p-button-label {
|
|
114
|
-
color: #ffffff;
|
|
115
|
-
}
|
|
116
|
-
.p-button-icon {
|
|
117
|
-
color: #ffffff;
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
&:hover:not(:disabled) {
|
|
121
|
-
background-color: var(--theme-dark);
|
|
122
|
-
border-color: var(--theme-dark);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
125
|
-
|
|
126
|
-
.cancel {
|
|
127
|
-
background-color: #ffffff;
|
|
128
|
-
border-color: var(--error-color);
|
|
129
|
-
.p-button-label {
|
|
130
|
-
color: var(--error-color);
|
|
131
|
-
}
|
|
132
|
-
.p-button-icon {
|
|
133
|
-
color: var(--error-color);
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
&:hover:not(:disabled) {
|
|
137
|
-
background-color: var(--error-color-dark);
|
|
138
|
-
border-color: var(--error-color-dark);
|
|
139
|
-
.p-button-label {
|
|
140
|
-
color: #ffffff;
|
|
141
|
-
}
|
|
142
|
-
}
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
.cancel-filled {
|
|
146
|
-
background-color: var(--error-color);
|
|
147
|
-
border-color: var(--error-color);
|
|
148
|
-
.p-button-label {
|
|
149
|
-
color: #ffffff;
|
|
150
|
-
}
|
|
151
|
-
|
|
152
|
-
.p-button-icon {
|
|
153
|
-
color: #ffffff;
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
&:hover:not(:disabled) {
|
|
157
|
-
background-color: var(--error-color-dark);
|
|
158
|
-
border-color: var(--error-color-dark);
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
|
|
162
|
-
.success {
|
|
163
|
-
background-color: var(--success-color);
|
|
164
|
-
border-color: var(--success-color);
|
|
165
|
-
.p-button-label {
|
|
166
|
-
color: #fff;
|
|
167
|
-
}
|
|
168
|
-
.p-button-icon {
|
|
169
|
-
color: #fff;
|
|
170
|
-
}
|
|
171
|
-
|
|
172
|
-
&:hover:not(:disabled) {
|
|
173
|
-
background-color: var(--success-color-dark);
|
|
174
|
-
border-color: var(--success-color-dark);
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
.light-outline {
|
|
179
|
-
background-color: var(--background);
|
|
180
|
-
border-color: var(--gray-medium);
|
|
181
|
-
.p-button-label {
|
|
182
|
-
color: var(--success-color);
|
|
183
|
-
}
|
|
184
|
-
.p-button-icon {
|
|
185
|
-
color: var(--success-color);
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
&:hover:not(:disabled) {
|
|
189
|
-
background-color: var(--success-color-dark);
|
|
190
|
-
border-color: var(--success-color-dark);
|
|
191
|
-
.p-button-label {
|
|
192
|
-
color: #fff;
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
.success-outlined {
|
|
198
|
-
background-color: #ffffff;
|
|
199
|
-
border-color: var(--success-color);
|
|
200
|
-
|
|
201
|
-
.p-button-label {
|
|
202
|
-
color: var(--success-color);
|
|
203
|
-
}
|
|
204
|
-
.p-button-icon {
|
|
205
|
-
color: var(--success-color);
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
&:hover:not(:disabled) {
|
|
209
|
-
background-color: var(--success-color-dark);
|
|
210
|
-
border-color: var(--success-color-dark);
|
|
211
|
-
|
|
212
|
-
.p-button-label {
|
|
213
|
-
color: #fff;
|
|
214
|
-
}
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
.default-outlined {
|
|
219
|
-
background-color: #ffffff;
|
|
220
|
-
border-color: var(--theme-light);
|
|
221
|
-
|
|
222
|
-
.p-button-label {
|
|
223
|
-
color: var(--theme-light);
|
|
224
|
-
}
|
|
225
|
-
.p-button-icon {
|
|
226
|
-
color: var(--theme-light);
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
&:hover:not(:disabled) {
|
|
230
|
-
background-color: var(--theme-primary);
|
|
231
|
-
border-color: var(--theme-primary);
|
|
232
|
-
|
|
233
|
-
.p-button-label {
|
|
234
|
-
color: #fff;
|
|
235
|
-
}
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
.default-outlined-gray {
|
|
239
|
-
background-color: #ffffff;
|
|
240
|
-
border-color: var(--gray-medium);
|
|
241
|
-
|
|
242
|
-
.p-button-label {
|
|
243
|
-
color: var(--theme-light);
|
|
244
|
-
}
|
|
245
|
-
.p-button-icon {
|
|
246
|
-
color: var(--theme-light);
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
&:hover:not(:disabled) {
|
|
250
|
-
background-color: var(--theme-primary);
|
|
251
|
-
border-color: var(--theme-primary);
|
|
252
|
-
|
|
253
|
-
.p-button-label {
|
|
254
|
-
color: #fff;
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
.default-outlined-gray-icon-red {
|
|
259
|
-
background-color: #ffffff;
|
|
260
|
-
border-color: var(--gray-medium);
|
|
261
|
-
|
|
262
|
-
.p-button-label {
|
|
263
|
-
color: var(--theme-light);
|
|
264
|
-
}
|
|
265
|
-
.p-button-icon {
|
|
266
|
-
color: var(--cancel-color);
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
&:hover:not(:disabled) {
|
|
270
|
-
background-color: var(--cancel-color);
|
|
271
|
-
border-color: var(--cancel-color);
|
|
272
|
-
|
|
273
|
-
.p-button-label {
|
|
274
|
-
color: #fff;
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
.default-outlined-gray-icon-gray {
|
|
279
|
-
background-color: #ffffff;
|
|
280
|
-
border-color: var(--gray-medium);
|
|
281
|
-
|
|
282
|
-
.p-button-label {
|
|
283
|
-
color: var(--form-labels-color);
|
|
284
|
-
}
|
|
285
|
-
.p-button-icon {
|
|
286
|
-
color: var(--form-labels-color);
|
|
287
|
-
}
|
|
288
|
-
|
|
289
|
-
&:hover:not(:disabled) {
|
|
290
|
-
background-color: var(--gray-medium);
|
|
291
|
-
border-color: var(--gray-medium);
|
|
292
|
-
|
|
293
|
-
.p-button-label {
|
|
294
|
-
color: var(--form-labels-color);
|
|
295
|
-
}
|
|
296
|
-
.p-button-icon {
|
|
297
|
-
color: var(--form-labels-color);
|
|
298
|
-
}
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
78
|
}
|
|
302
79
|
|
|
303
80
|
.p-inputgroup {
|
|
@@ -29,6 +29,9 @@
|
|
|
29
29
|
/* Design System — brand */
|
|
30
30
|
--brand-light: #e7ecfd; /* fundo do Segment Control */
|
|
31
31
|
--brand-blue: #1545de; /* azul-claro do design system (texto/borda ativos) */
|
|
32
|
+
|
|
33
|
+
--text-color-default: #434560; /* texto neutro — menu, botoes, input-file */
|
|
34
|
+
--border-light: #e0e1e8; /* borda sutil sobre superficie clara */
|
|
32
35
|
}
|
|
33
36
|
|
|
34
37
|
:root {
|