keevo-components 2.0.196 → 2.0.197

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.
@@ -0,0 +1,388 @@
1
+ @import "../keevo-components-styles.scss";
2
+
3
+ ::ng-deep .kv-button .p-button-loading-icon svg {
4
+ width: 100%;
5
+ height: 100%;
6
+ display: block;
7
+ }
8
+
9
+ ::ng-deep .kv-button .p-button-loading-icon svg g {
10
+ transform: translate(0, 0);
11
+ }
12
+
13
+ ::ng-deep .kv-button {
14
+ white-space: nowrap;
15
+ border: none;
16
+ padding: 0.4rem;
17
+ display: flex;
18
+ flex-direction: row;
19
+ align-items: center;
20
+ justify-content: center;
21
+ gap: 0.125rem;
22
+
23
+ .kv-button-label {
24
+ font-weight: 500;
25
+ }
26
+ }
27
+
28
+ ::ng-deep .small {
29
+ height: 1.625rem;
30
+ min-width: 1.625rem;
31
+
32
+ .kv-button-label {
33
+ font-size: 0.625rem;
34
+ }
35
+
36
+ .kv-button-icon {
37
+ font-size: 0.75rem;
38
+ }
39
+
40
+ .p-button-loading-icon {
41
+ width: 0.55rem;
42
+ height: 0.55rem;
43
+ }
44
+ }
45
+
46
+ ::ng-deep .normal {
47
+ height: 1.875rem;
48
+ min-width: 1.875rem;
49
+
50
+ .kv-button-label {
51
+ font-size: 0.825rem;
52
+ }
53
+
54
+ .kv-button-icon {
55
+ font-size: 1rem;
56
+ }
57
+
58
+ .p-button-loading-icon {
59
+ width: 0.75rem;
60
+ height: 0.75rem;
61
+ }
62
+ }
63
+
64
+ ::ng-deep .large {
65
+ height: 2.125rem;
66
+ min-width: 2.125rem;
67
+
68
+ .kv-button-label {
69
+ font-size: 1rem;
70
+ }
71
+
72
+ .kv-button-icon {
73
+ font-size: 1.25rem;
74
+ }
75
+
76
+ .p-button-loading-icon {
77
+ width: 0.875rem;
78
+ height: 0.875rem;
79
+ }
80
+ }
81
+
82
+ //Primary button
83
+ ::ng-deep .primary {
84
+ background-color: rgb(var(--kv-primary-color));
85
+ &:hover {
86
+ background-color: rgba(var(--kv-primary-color), 0.8);
87
+ }
88
+
89
+ &:active {
90
+ background-color: rgba(var(--kv-primary-color), 0.95);
91
+ }
92
+ }
93
+
94
+ .primary.outline {
95
+ border: solid 0.5px rgb(var(--kv-primary-color));
96
+ background-color: white;
97
+ color: rgb(var(--kv-primary-color));
98
+
99
+ &:hover {
100
+ background-color: rgb(var(--kv-primary-color));
101
+ color: white;
102
+ }
103
+
104
+ &:active {
105
+ background-color: rgba(var(--kv-primary-color), 0.8);
106
+ }
107
+ }
108
+
109
+ .primary.text {
110
+ opacity: 0.9;
111
+ background-color: transparent;
112
+ color: rgb(var(--kv-primary-color));
113
+
114
+ &:hover {
115
+ background-color: rgba(var(--kv-primary-color), 0.1);
116
+ }
117
+
118
+ &:active {
119
+ background-color: rgba(var(--kv-primary-color), 0.2);
120
+ }
121
+ }
122
+
123
+ //Secondary button
124
+ ::ng-deep .secondary {
125
+ background-color: rgb(var(--kv-secondary-color));
126
+
127
+ &:hover {
128
+ background-color: rgba(var(--kv-secondary-color), 0.8);
129
+ }
130
+
131
+ &:active {
132
+ background-color: rgba(var(--kv-secondary-color), 0.95);
133
+ }
134
+ }
135
+
136
+ .secondary.outline {
137
+ border: solid 0.5px rgb(var(--kv-secondary-color));
138
+ background-color: white;
139
+ color: rgb(var(--kv-secondary-color));
140
+
141
+ &:hover {
142
+ background-color: rgb(var(--kv-secondary-color));
143
+ color: white;
144
+ }
145
+
146
+ &:active {
147
+ background-color: rgba(var(--kv-secondary-color), 0.8);
148
+ }
149
+ }
150
+
151
+ .secondary.text {
152
+ background-color: transparent;
153
+ color: rgb(var(--kv-secondary-color));
154
+
155
+ &:hover {
156
+ background-color: rgba(var(--kv-secondary-color), 0.1);
157
+ }
158
+
159
+ &:active {
160
+ background-color: rgba(var(--kv-secondary-color), 0.2);
161
+ }
162
+ }
163
+
164
+ //Tertiary button
165
+ ::ng-deep .tertiary {
166
+ color: #212121;
167
+ background-color: rgba(var(--kv-tertiary-color), 0.3);
168
+
169
+ &:hover {
170
+ background-color: rgba(var(--kv-tertiary-color), 0.8);
171
+ }
172
+
173
+ &:active {
174
+ background-color: rgba(var(--kv-tertiary-color), 0.95);
175
+ }
176
+ }
177
+
178
+ .tertiary.outline {
179
+ border: solid 0.5px rgb(var(--kv-tertiary-color));
180
+ background-color: white;
181
+ color: rgb(var(--kv-tertiary-color));
182
+
183
+ &:hover {
184
+ background-color: rgb(var(--kv-tertiary-color));
185
+ color: white;
186
+ }
187
+
188
+ &:active {
189
+ background-color: rgba(var(--kv-tertiary-color), 0.8);
190
+ }
191
+ }
192
+
193
+ .tertiary.text {
194
+ background-color: transparent;
195
+ color: rgb(var(--kv-tertiary-color));
196
+
197
+ &:hover {
198
+ background-color: rgba(var(--kv-tertiary-color), 0.1);
199
+ }
200
+
201
+ &:active {
202
+ background-color: rgba(var(--kv-tertiary-color), 0.2);
203
+ }
204
+ }
205
+
206
+ ::ng-deep.danger {
207
+ background-color: rgb(var(--kv-danger-color));
208
+
209
+ &:hover {
210
+ background-color: rgba(var(--kv-danger-color), 0.8);
211
+ }
212
+
213
+ &:active {
214
+ background-color: rgba(var(--kv-danger-color), 0.95);
215
+ }
216
+
217
+ &.outline {
218
+ border: solid 0.5px rgb(var(--kv-danger-color));
219
+ background-color: white;
220
+ color: rgb(var(--kv-danger-color));
221
+
222
+ &:hover {
223
+ background-color: rgb(var(--kv-danger-color));
224
+ color: white;
225
+ }
226
+
227
+ &:active {
228
+ background-color: rgba(var(--kv-danger-color), 0.8);
229
+ }
230
+ }
231
+
232
+ &.text {
233
+ background-color: transparent;
234
+ color: rgb(var(--kv-danger-color));
235
+
236
+ &:hover {
237
+ background-color: rgba(var(--kv-danger-color), 0.1);
238
+ }
239
+
240
+ &:active {
241
+ background-color: rgba(var(--kv-danger-color), 0.2);
242
+ }
243
+ }
244
+ }
245
+
246
+ // =======================================================================
247
+ // ==================== NOVO CSS DO BOTÃO ================================
248
+ // ======== AGUARDAR PUBLICAÇÃO DO REINF PARA LIBERAÇÃO ==================
249
+ // =======================================================================
250
+
251
+ // @import "../keevo-components-styles.scss";
252
+
253
+ // ::ng-deep .kv-button .p-button-loading-icon svg {
254
+ // width: 100%;
255
+ // height: 100%;
256
+ // display: block;
257
+ // }
258
+
259
+ // ::ng-deep .kv-button .p-button-loading-icon svg g {
260
+ // transform: translate(0, 0);
261
+ // }
262
+
263
+ // ::ng-deep .kv-button {
264
+ // border: none;
265
+ // // padding: 0.4rem;
266
+ // display: flex;
267
+ // flex-direction: row;
268
+ // align-items: center;
269
+ // justify-content: center;
270
+ // gap: 0.125rem;
271
+
272
+ // .kv-button-label {
273
+ // font-weight: 500;
274
+ // }
275
+
276
+ // :focus {
277
+ // outline: none;
278
+ // box-shadow: none;
279
+ // }
280
+ // }
281
+
282
+ // ::ng-deep .small {
283
+ // height: 1.625rem;
284
+ // min-width: 1.625rem;
285
+
286
+ // .kv-button-label {
287
+ // font-size: 0.625rem;
288
+ // }
289
+
290
+ // .kv-button-icon {
291
+ // font-size: 0.75rem;
292
+ // }
293
+
294
+ // .p-button-loading-icon {
295
+ // width: 0.55rem;
296
+ // height: 0.55rem;
297
+ // }
298
+ // }
299
+
300
+ // ::ng-deep .normal {
301
+ // height: 1.875rem;
302
+ // min-width: 1.875rem;
303
+
304
+ // .kv-button-label {
305
+ // font-size: 0.825rem;
306
+ // }
307
+
308
+ // .kv-button-icon {
309
+ // font-size: 1rem;
310
+ // }
311
+
312
+ // .p-button-loading-icon {
313
+ // width: 0.75rem;
314
+ // height: 0.75rem;
315
+ // }
316
+ // }
317
+
318
+ // ::ng-deep .large {
319
+ // height: 2.125rem;
320
+ // min-width: 2.125rem;
321
+
322
+ // .kv-button-label {
323
+ // font-size: 1rem;
324
+ // }
325
+
326
+ // .kv-button-icon {
327
+ // font-size: 1.25rem;
328
+ // }
329
+
330
+ // .p-button-loading-icon {
331
+ // width: 0.875rem;
332
+ // height: 0.875rem;
333
+ // }
334
+ // }
335
+
336
+ // //Primary button
337
+ // ::ng-deep .primary {
338
+ // background-color: rgb(var(--kv-color-system));
339
+ // &:hover {
340
+ // background-color: rgba(var(--kv-color-system), 0.8);
341
+ // }
342
+
343
+ // &:active {
344
+ // background-color: rgba(var(--kv-color-system), 0.95);
345
+ // }
346
+ // }
347
+
348
+ // ::ng-deep .secondary {
349
+ // border: solid 0.5px rgb(var(--kv-color-system));
350
+ // background-color: white;
351
+ // color: rgb(var(--kv-color-system));
352
+
353
+ // &:hover {
354
+ // background-color: rgb(var(--kv-color-system),0.1);
355
+ // }
356
+
357
+ // &:active {
358
+ // background-color: rgba(var(--kv-color-system), 0.8);
359
+ // }
360
+ // }
361
+
362
+ // ::ng-deep .tertiary {
363
+ // opacity: 0.9;
364
+ // background-color: transparent;
365
+ // color: rgb(var(--kv-color-system));
366
+
367
+ // &:hover {
368
+ // background-color: rgba(var(--kv-color-system), 0.1);
369
+ // }
370
+
371
+ // &:active {
372
+ // background-color: rgba(var(--kv-color-system), 0.2);
373
+ // }
374
+ // }
375
+
376
+ // ::ng-deep .callToAction {
377
+ // opacity: 0.9;
378
+ // background-color: transparent;
379
+ // color: rgb(var(--kv-color-system));
380
+
381
+ // &:hover {
382
+ // background-color: rgba(var(--kv-color-system), 0.1);
383
+ // }
384
+
385
+ // &:active {
386
+ // background-color: rgba(var(--kv-color-system), 0.2);
387
+ // }
388
+ // }
@@ -0,0 +1,65 @@
1
+ ::ng-deep .p-dropdown-filter-icon{
2
+ top: 1.2rem;
3
+ }
4
+
5
+ ::ng-deep .p-dropdown-clear-icon{
6
+ top: 1.2em
7
+ }
8
+
9
+ ::ng-deep .p-dropdown .p-dropdown-label {
10
+ display: flex;
11
+ align-items: center;
12
+ }
13
+
14
+ ::ng-deep .p-dropdown {
15
+ width: 100%;
16
+ }
17
+
18
+ ::ng-deep .p-dropdown-item {
19
+ font-size: 0.875rem;
20
+ padding: 0.5rem;
21
+ text-overflow: ellipsis;
22
+ width: 100%;
23
+ border-radius: .5rem;
24
+ }
25
+
26
+ ::ng-deep .p-dropdown-filter {
27
+ height: 1.875rem;
28
+ }
29
+
30
+ ::ng-deep .p-dropdown-panel .p-dropdown-header {
31
+ padding: 0.75rem 0.75rem;
32
+ }
33
+
34
+ ::ng-deep .p-dropdown-panel .p-dropdown-items {
35
+ padding: 0.75rem 0.75rem;
36
+ }
37
+
38
+ ::ng-deep p-dropdown p-overlay .p-overlay {
39
+ max-width: 100%;
40
+ }
41
+
42
+ ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-empty-message {
43
+ padding: 0.75rem 0.75rem;
44
+ font-size: 0.875rem;
45
+ }
46
+
47
+ ::ng-deep .p-inputtext {
48
+ font-size: 0.875rem;
49
+ }
50
+
51
+ ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
52
+ padding: 0;
53
+ }
54
+
55
+ ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item:has(.disable) {
56
+ background-color: #f0f0f0;
57
+ opacity: 0.5;
58
+ cursor: not-allowed;
59
+ pointer-events: auto;
60
+ }
61
+
62
+ /* Bloqueia o clique */
63
+ ::ng-deep .p-dropdown-panel .p-dropdown-items .p-dropdown-item:has(.disable):active {
64
+ pointer-events: none;
65
+ }
@@ -0,0 +1,257 @@
1
+ @import "../kv-button/kv-button.component.scss";
2
+
3
+ ::ng-deep .p-datatable > .p-datatable-wrapper {
4
+ &::-webkit-scrollbar {
5
+ width: 6px;
6
+
7
+ &:hover {
8
+ background-color: rgba(222, 222, 222, 0.75);
9
+ }
10
+ }
11
+
12
+ &::-webkit-scrollbar-thumb {
13
+ border-radius: 4px;
14
+ background-color: transparent;
15
+ }
16
+
17
+ &:hover::-webkit-scrollbar-thumb {
18
+ border-left: 2px solid white;
19
+ background-color: rgba(0, 0, 0, 0.5);
20
+ }
21
+
22
+ &::-webkit-scrollbar-track {
23
+ border-left: 2px solid white;
24
+ background-color: rgba(222, 222, 222, 0.75);
25
+ }
26
+ }
27
+
28
+ .tag {
29
+ width: 5px;
30
+ height: 20px;
31
+ border-radius: 0.25rem;
32
+ }
33
+
34
+ ::ng-deep .p-panel .p-panel-header {
35
+ border: none !important;
36
+ }
37
+
38
+ :host ::ng-deep .p-datatable-header {
39
+ padding: 0 !important;
40
+ border-radius: 5px !important;
41
+ background-color: transparent;
42
+ border: none;
43
+ }
44
+
45
+ ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
46
+ padding: 0.15rem 0.15rem;
47
+ background-color: rgba(var(--kv-color-system), 0.05);
48
+ color: rgba(var(--kv-color-text), 0.6);
49
+ // border: 1px solid black;
50
+ }
51
+
52
+ ::ng-deep .p-datatable-table {
53
+ border: 1px solid rgba(var(--kv-color-system), 0.1);
54
+ border-radius: 0.5rem;
55
+ overflow: hidden;
56
+ color: rgb(var(--kv-color-system));
57
+ }
58
+
59
+ .icon-more {
60
+ font-weight: 500;
61
+ font-size: 1.4rem !important;
62
+ // color: #64748b;
63
+ color: rgb(var(--kv-color-system), 0.75);
64
+ transition: all 0.4s;
65
+ // padding: 0.1rem !important;
66
+ }
67
+
68
+ .icon-more:hover,
69
+ .icon-more:focus {
70
+ color: #5e5e5e;
71
+ transition: color 0.3s, transform 0.3s;
72
+ background-color: #eaeaea;
73
+ border-radius: 50%;
74
+ }
75
+
76
+ .tr-td {
77
+ &:hover {
78
+ box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
79
+ rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
80
+ background-color: white;
81
+ transition: color 0.3s, transform 0.3s;
82
+ transform: scale(1);
83
+ &.last {
84
+ box-shadow: -1px -1px 9px -3px rgba(0, 0, 0, 0.75);
85
+ -webkit-box-shadow: -1px -1px 9px -3px rgba(0, 0, 0, 0.75);
86
+ -moz-box-shadow: -1px -1px 9px -3px rgba(0, 0, 0, 0.75);
87
+ }
88
+ }
89
+ overflow-wrap: anywhere;
90
+ }
91
+
92
+ .disabled-row {
93
+ pointer-events: none;
94
+ opacity: 0.6;
95
+ background-color: #dddddd8e;
96
+ }
97
+
98
+ ::ng-deep .p-tooltip {
99
+ pointer-events: auto;
100
+ }
101
+
102
+ .btn-table {
103
+ background-color: #29b92d;
104
+ padding: 12px 12px;
105
+
106
+ &:hover {
107
+ background-color: #249a29;
108
+ }
109
+
110
+ &:active {
111
+ background-color: #1c801f;
112
+ }
113
+
114
+ &:disabled {
115
+ background-color: #29b92d;
116
+ }
117
+ }
118
+
119
+ ::ng-deep svg.p-icon {
120
+ width: 0.65rem;
121
+ height: 0.65rem;
122
+ }
123
+
124
+ ::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
125
+ border-color: #004172;
126
+ background: #004172;
127
+
128
+ &:hover {
129
+ background-color: #002542;
130
+ }
131
+
132
+ &:active {
133
+ background-color: #002542;
134
+ }
135
+
136
+ &:disabled {
137
+ background-color: #002542;
138
+ opacity: 0.4;
139
+ cursor: auto;
140
+ }
141
+ }
142
+
143
+ input {
144
+ height: 1.75rem;
145
+ }
146
+
147
+ ::ng-deep {
148
+ $checkbox-width: 1.125rem;
149
+ $checkbox-height: 1.125rem;
150
+
151
+ .p-checkbox .p-checkbox-box {
152
+ width: $checkbox-width;
153
+ height: $checkbox-height;
154
+ border: 1.5px solid #d1d5db;
155
+ }
156
+
157
+ .p-checkbox {
158
+ display: flex !important;
159
+ align-items: center !important;
160
+ justify-content: right;
161
+ width: calc(
162
+ $checkbox-width + 0.5rem
163
+ ) !important; //ESPAÇO LATERAL À ESQUERDA DO CHECKBOX
164
+ height: $checkbox-height;
165
+ }
166
+
167
+ .p-checkbox-label {
168
+ font-size: 0.875rem;
169
+ }
170
+
171
+ .p-datatable .p-paginator-bottom {
172
+ border: solid #ffffff;
173
+ scale: 0.75;
174
+ }
175
+
176
+ .p-datatable.p-datatable-sm .p-datatable-tbody > tr > td {
177
+ padding: 0.1rem 0.1rem;
178
+ }
179
+
180
+ .p-dropdown-panel .p-dropdown-items .p-dropdown-item {
181
+ padding: 0.25rem !important;
182
+ }
183
+
184
+ .p-dropdown-panel .p-dropdown-items {
185
+ padding: 0.5rem 0.5rem !important;
186
+ }
187
+
188
+ .p-button-label {
189
+ font-weight: 500 !important;
190
+ }
191
+
192
+ .p-button .p-button-icon-left {
193
+ margin-left: 0.25rem;
194
+ margin-right: 0.25rem;
195
+ font-size: 0.675rem !important;
196
+ }
197
+ }
198
+
199
+ :host {
200
+ height: 100%;
201
+ }
202
+
203
+ ::ng-deep .kv-table-container,
204
+ ::ng-deep p-table {
205
+ height: 100%;
206
+ }
207
+
208
+ ::ng-deep p-table .p-datatable {
209
+ display: flex;
210
+ flex-direction: column;
211
+ height: 100%;
212
+ }
213
+
214
+ //expande o necessário, encolhe se necessário, tamanho inicial
215
+ ::ng-deep .p-datatable .p-datatable-wrapper {
216
+ flex: 1 1 1;
217
+ }
218
+
219
+ ::ng-deep p-table .p-datatable .p-datatable-wrapper,
220
+ ::ng-deep p-table {
221
+ height: 100%;
222
+ }
223
+
224
+ ::ng-deep table {
225
+ height: auto !important;
226
+ }
227
+
228
+ .ellipsis-text {
229
+ white-space: nowrap;
230
+ overflow: hidden;
231
+ text-overflow: ellipsis;
232
+ max-width: 100%;
233
+ display: inline-block;
234
+ }
235
+
236
+ ::ng-deep .p-tieredmenu {
237
+ padding: 0.5rem !important;
238
+ }
239
+
240
+ :host ::ng-deep .p-disabled * {
241
+ pointer-events: auto !important;
242
+ }
243
+
244
+ ::ng-deep p-tieredmenusub .p-disabled *:active {
245
+ pointer-events: none !important;
246
+ font-size: 0.75rem !important;
247
+ padding: 0.5rem !important;
248
+ }
249
+
250
+ ::ng-deep .p-tieredmenu .p-tieredmenu-root-list {
251
+ font-size: 0.75rem !important;
252
+ // padding: 0.5rem !important;
253
+ }
254
+
255
+ ::ng-deep .p-tieredmenu .p-menuitem > .p-menuitem-content {
256
+ padding: 0.5rem;
257
+ }
package/.npmignore DELETED
@@ -1,2 +0,0 @@
1
- # Nested package.json's are only needed for development.
2
- **/package.json