keevo-components 2.0.200 → 2.0.201

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 (23) hide show
  1. package/esm2022/lib/components/kv-icon/kv-icon.component.mjs +3 -3
  2. package/esm2022/lib/components/kv-inputs/kv-tree-multi-select/kv-tree-multi-select.component.mjs +3 -3
  3. package/esm2022/lib/components/kv-table-draggable/kv-table-draggable.component.mjs +35 -35
  4. package/esm2022/lib/components/kv-tree-environment/components/kv-tree-environment/kv-tree-environment.component.mjs +3 -3
  5. package/esm2022/lib/components/kv-tree-environment/components/no-arvore/no-arvore.component.mjs +3 -3
  6. package/esm2022/lib/components/kv-widget-card/kv-widget-card.component.mjs +3 -3
  7. package/fesm2022/keevo-components.mjs +44 -44
  8. package/fesm2022/keevo-components.mjs.map +1 -1
  9. package/lib/components/kv-buttons/kv-button-popup/kv-button-popup.component.d.ts +1 -1
  10. package/lib/components/kv-table-viewer/kv-table-viewer.component.d.ts +1 -1
  11. package/package.json +6 -7
  12. package/src/assets/images/LogoEvo.png +0 -0
  13. package/src/assets/images/LogoPequenaEvo.png +0 -0
  14. package/src/assets/images/background.png +0 -0
  15. package/src/assets/images/keepass-logo.png +0 -0
  16. package/src/assets/images/keepass-logo.svg +74 -0
  17. package/src/assets/images/keevo-logo.png +0 -0
  18. package/src/assets/images/logokeevo_2.png +0 -0
  19. package/src/lib/components/keevo-components-styles.scss +293 -0
  20. package/src/lib/components/kv-button/kv-button.component.scss +389 -0
  21. package/src/lib/components/kv-inputs/kv-dropdown/kv-dropdown.component.scss +65 -0
  22. package/src/lib/components/kv-table/kv-table.component.scss +257 -0
  23. package/.npmignore +0 -2
@@ -0,0 +1,389 @@
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
+
14
+ ::ng-deep .kv-button {
15
+ white-space: nowrap;
16
+ border: none;
17
+ padding: 0.4rem;
18
+ display: flex;
19
+ flex-direction: row;
20
+ align-items: center;
21
+ justify-content: center;
22
+ gap: 0.125rem;
23
+
24
+ .kv-button-label {
25
+ font-weight: 500;
26
+ }
27
+ }
28
+
29
+ ::ng-deep .small {
30
+ height: 1.625rem;
31
+ min-width: 1.625rem;
32
+
33
+ .kv-button-label {
34
+ font-size: 0.625rem;
35
+ }
36
+
37
+ .kv-button-icon {
38
+ font-size: 0.75rem;
39
+ }
40
+
41
+ .p-button-loading-icon {
42
+ width: 0.55rem;
43
+ height: 0.55rem;
44
+ }
45
+ }
46
+
47
+ ::ng-deep .normal {
48
+ height: 1.875rem;
49
+ min-width: 1.875rem;
50
+
51
+ .kv-button-label {
52
+ font-size: 0.825rem;
53
+ }
54
+
55
+ .kv-button-icon {
56
+ font-size: 1rem;
57
+ }
58
+
59
+ .p-button-loading-icon {
60
+ width: 0.75rem;
61
+ height: 0.75rem;
62
+ }
63
+ }
64
+
65
+ ::ng-deep .large {
66
+ height: 2.125rem;
67
+ min-width: 2.125rem;
68
+
69
+ .kv-button-label {
70
+ font-size: 1rem;
71
+ }
72
+
73
+ .kv-button-icon {
74
+ font-size: 1.25rem;
75
+ }
76
+
77
+ .p-button-loading-icon {
78
+ width: 0.875rem;
79
+ height: 0.875rem;
80
+ }
81
+ }
82
+
83
+ //Primary button
84
+ ::ng-deep .primary {
85
+ background-color: rgb(var(--kv-primary-color));
86
+ &:hover {
87
+ background-color: rgba(var(--kv-primary-color), 0.8);
88
+ }
89
+
90
+ &:active {
91
+ background-color: rgba(var(--kv-primary-color), 0.95);
92
+ }
93
+ }
94
+
95
+ .primary.outline {
96
+ border: solid 0.5px rgb(var(--kv-primary-color));
97
+ background-color: white;
98
+ color: rgb(var(--kv-primary-color));
99
+
100
+ &:hover {
101
+ background-color: rgb(var(--kv-primary-color));
102
+ color: white;
103
+ }
104
+
105
+ &:active {
106
+ background-color: rgba(var(--kv-primary-color), 0.8);
107
+ }
108
+ }
109
+
110
+ .primary.text {
111
+ opacity: 0.9;
112
+ background-color: transparent;
113
+ color: rgb(var(--kv-primary-color));
114
+
115
+ &:hover {
116
+ background-color: rgba(var(--kv-primary-color), 0.1);
117
+ }
118
+
119
+ &:active {
120
+ background-color: rgba(var(--kv-primary-color), 0.2);
121
+ }
122
+ }
123
+
124
+ //Secondary button
125
+ ::ng-deep .secondary {
126
+ background-color: rgb(var(--kv-secondary-color));
127
+
128
+ &:hover {
129
+ background-color: rgba(var(--kv-secondary-color), 0.8);
130
+ }
131
+
132
+ &:active {
133
+ background-color: rgba(var(--kv-secondary-color), 0.95);
134
+ }
135
+ }
136
+
137
+ .secondary.outline {
138
+ border: solid 0.5px rgb(var(--kv-secondary-color));
139
+ background-color: white;
140
+ color: rgb(var(--kv-secondary-color));
141
+
142
+ &:hover {
143
+ background-color: rgb(var(--kv-secondary-color));
144
+ color: white;
145
+ }
146
+
147
+ &:active {
148
+ background-color: rgba(var(--kv-secondary-color), 0.8);
149
+ }
150
+ }
151
+
152
+ .secondary.text {
153
+ background-color: transparent;
154
+ color: rgb(var(--kv-secondary-color));
155
+
156
+ &:hover {
157
+ background-color: rgba(var(--kv-secondary-color), 0.1);
158
+ }
159
+
160
+ &:active {
161
+ background-color: rgba(var(--kv-secondary-color), 0.2);
162
+ }
163
+ }
164
+
165
+ //Tertiary button
166
+ ::ng-deep .tertiary {
167
+ color: #212121;
168
+ background-color: rgba(var(--kv-tertiary-color), 0.3);
169
+
170
+ &:hover {
171
+ background-color: rgba(var(--kv-tertiary-color), 0.8);
172
+ }
173
+
174
+ &:active {
175
+ background-color: rgba(var(--kv-tertiary-color), 0.95);
176
+ }
177
+ }
178
+
179
+ .tertiary.outline {
180
+ border: solid 0.5px rgb(var(--kv-tertiary-color));
181
+ background-color: white;
182
+ color: rgb(var(--kv-tertiary-color));
183
+
184
+ &:hover {
185
+ background-color: rgb(var(--kv-tertiary-color));
186
+ color: white;
187
+ }
188
+
189
+ &:active {
190
+ background-color: rgba(var(--kv-tertiary-color), 0.8);
191
+ }
192
+ }
193
+
194
+ .tertiary.text {
195
+ background-color: transparent;
196
+ color: rgb(var(--kv-tertiary-color));
197
+
198
+ &:hover {
199
+ background-color: rgba(var(--kv-tertiary-color), 0.1);
200
+ }
201
+
202
+ &:active {
203
+ background-color: rgba(var(--kv-tertiary-color), 0.2);
204
+ }
205
+ }
206
+
207
+ ::ng-deep.danger {
208
+ background-color: rgb(var(--kv-danger-color));
209
+
210
+ &:hover {
211
+ background-color: rgba(var(--kv-danger-color), 0.8);
212
+ }
213
+
214
+ &:active {
215
+ background-color: rgba(var(--kv-danger-color), 0.95);
216
+ }
217
+
218
+ &.outline {
219
+ border: solid 0.5px rgb(var(--kv-danger-color));
220
+ background-color: white;
221
+ color: rgb(var(--kv-danger-color));
222
+
223
+ &:hover {
224
+ background-color: rgb(var(--kv-danger-color));
225
+ color: white;
226
+ }
227
+
228
+ &:active {
229
+ background-color: rgba(var(--kv-danger-color), 0.8);
230
+ }
231
+ }
232
+
233
+ &.text {
234
+ background-color: transparent;
235
+ color: rgb(var(--kv-danger-color));
236
+
237
+ &:hover {
238
+ background-color: rgba(var(--kv-danger-color), 0.1);
239
+ }
240
+
241
+ &:active {
242
+ background-color: rgba(var(--kv-danger-color), 0.2);
243
+ }
244
+ }
245
+ }
246
+
247
+ // =======================================================================
248
+ // ==================== NOVO CSS DO BOTÃO ================================
249
+ // ======== AGUARDAR PUBLICAÇÃO DO REINF PARA LIBERAÇÃO ==================
250
+ // =======================================================================
251
+
252
+ // @import "../keevo-components-styles.scss";
253
+
254
+ // ::ng-deep .kv-button .p-button-loading-icon svg {
255
+ // width: 100%;
256
+ // height: 100%;
257
+ // display: block;
258
+ // }
259
+
260
+ // ::ng-deep .kv-button .p-button-loading-icon svg g {
261
+ // transform: translate(0, 0);
262
+ // }
263
+
264
+ // ::ng-deep .kv-button {
265
+ // border: none;
266
+ // // padding: 0.4rem;
267
+ // display: flex;
268
+ // flex-direction: row;
269
+ // align-items: center;
270
+ // justify-content: center;
271
+ // gap: 0.125rem;
272
+
273
+ // .kv-button-label {
274
+ // font-weight: 500;
275
+ // }
276
+
277
+ // :focus {
278
+ // outline: none;
279
+ // box-shadow: none;
280
+ // }
281
+ // }
282
+
283
+ // ::ng-deep .small {
284
+ // height: 1.625rem;
285
+ // min-width: 1.625rem;
286
+
287
+ // .kv-button-label {
288
+ // font-size: 0.625rem;
289
+ // }
290
+
291
+ // .kv-button-icon {
292
+ // font-size: 0.75rem;
293
+ // }
294
+
295
+ // .p-button-loading-icon {
296
+ // width: 0.55rem;
297
+ // height: 0.55rem;
298
+ // }
299
+ // }
300
+
301
+ // ::ng-deep .normal {
302
+ // height: 1.875rem;
303
+ // min-width: 1.875rem;
304
+
305
+ // .kv-button-label {
306
+ // font-size: 0.825rem;
307
+ // }
308
+
309
+ // .kv-button-icon {
310
+ // font-size: 1rem;
311
+ // }
312
+
313
+ // .p-button-loading-icon {
314
+ // width: 0.75rem;
315
+ // height: 0.75rem;
316
+ // }
317
+ // }
318
+
319
+ // ::ng-deep .large {
320
+ // height: 2.125rem;
321
+ // min-width: 2.125rem;
322
+
323
+ // .kv-button-label {
324
+ // font-size: 1rem;
325
+ // }
326
+
327
+ // .kv-button-icon {
328
+ // font-size: 1.25rem;
329
+ // }
330
+
331
+ // .p-button-loading-icon {
332
+ // width: 0.875rem;
333
+ // height: 0.875rem;
334
+ // }
335
+ // }
336
+
337
+ // //Primary button
338
+ // ::ng-deep .primary {
339
+ // background-color: rgb(var(--kv-color-system));
340
+ // &:hover {
341
+ // background-color: rgba(var(--kv-color-system), 0.8);
342
+ // }
343
+
344
+ // &:active {
345
+ // background-color: rgba(var(--kv-color-system), 0.95);
346
+ // }
347
+ // }
348
+
349
+ // ::ng-deep .secondary {
350
+ // border: solid 0.5px rgb(var(--kv-color-system));
351
+ // background-color: white;
352
+ // color: rgb(var(--kv-color-system));
353
+
354
+ // &:hover {
355
+ // background-color: rgb(var(--kv-color-system),0.1);
356
+ // }
357
+
358
+ // &:active {
359
+ // background-color: rgba(var(--kv-color-system), 0.8);
360
+ // }
361
+ // }
362
+
363
+ // ::ng-deep .tertiary {
364
+ // opacity: 0.9;
365
+ // background-color: transparent;
366
+ // color: rgb(var(--kv-color-system));
367
+
368
+ // &:hover {
369
+ // background-color: rgba(var(--kv-color-system), 0.1);
370
+ // }
371
+
372
+ // &:active {
373
+ // background-color: rgba(var(--kv-color-system), 0.2);
374
+ // }
375
+ // }
376
+
377
+ // ::ng-deep .callToAction {
378
+ // opacity: 0.9;
379
+ // background-color: transparent;
380
+ // color: rgb(var(--kv-color-system));
381
+
382
+ // &:hover {
383
+ // background-color: rgba(var(--kv-color-system), 0.1);
384
+ // }
385
+
386
+ // &:active {
387
+ // background-color: rgba(var(--kv-color-system), 0.2);
388
+ // }
389
+ // }
@@ -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