ngx-vector-components 1.0.2 → 2.0.2

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 (27) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/assets/styles/_primeng-custom-theme.scss +87 -87
  3. package/assets/styles/_spinner.scss +4 -4
  4. package/assets/styles/_styles.scss +8 -6
  5. package/assets/styles/_variables.scss +23 -20
  6. package/esm2020/lib/components/breadcrumb/breadcrumb.component.mjs +2 -2
  7. package/esm2020/lib/components/fields/button/button.component.mjs +2 -2
  8. package/esm2020/lib/components/fields/calendar-field/calendar-field.component.mjs +2 -2
  9. package/esm2020/lib/components/fields/currency-field/currency-field.component.mjs +2 -2
  10. package/esm2020/lib/components/fields/data-table/data-table.component.mjs +2 -2
  11. package/esm2020/lib/components/fields/dropdown-field/dropdown-field.component.mjs +2 -2
  12. package/esm2020/lib/components/fields/multiselect-field/multiselect-field.component.mjs +2 -2
  13. package/esm2020/lib/components/fields/percentage-field/percentage-field.component.mjs +2 -2
  14. package/esm2020/lib/components/fields/radio-button-field/radio-button-field.component.mjs +2 -2
  15. package/esm2020/lib/components/fields/range-value/range-value.component.mjs +2 -2
  16. package/esm2020/lib/components/fields/text-field/text-field.component.mjs +2 -2
  17. package/esm2020/lib/components/generic-error-modal/generic-error-modal.component.mjs +2 -2
  18. package/esm2020/lib/components/generic-modal/generic-modal.component.mjs +2 -2
  19. package/esm2020/lib/components/menu/menu.component.mjs +3 -3
  20. package/esm2020/lib/components/menu/sub-menus-list/sub-menus-list.component.mjs +3 -3
  21. package/esm2020/lib/components/top-bar/top-bar.component.mjs +2 -2
  22. package/esm2020/lib/services/auth.service.mjs +3 -3
  23. package/fesm2015/ngx-vector-components.mjs +34 -34
  24. package/fesm2015/ngx-vector-components.mjs.map +1 -1
  25. package/fesm2020/ngx-vector-components.mjs +34 -34
  26. package/fesm2020/ngx-vector-components.mjs.map +1 -1
  27. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # Changelog
2
2
 
3
+ ## [2.0.2] (01/03/2022)
4
+
5
+ ### Bug Fixes
6
+
7
+ - Fixed old variable
8
+
9
+ ## [2.0.1] (01/03/2022)
10
+
11
+ ### Bug Fixes
12
+
13
+ - Fixed missing styles
14
+
15
+ ## [2.0.0] (01/03/2022)
16
+
17
+ ### Breaking Changes
18
+
19
+ - CSS variables changed declaration form.
20
+
3
21
  ## [1.0.2] (01/03/2022)
4
22
 
5
23
  ### Bug Fixes
@@ -14,21 +14,21 @@
14
14
  }
15
15
 
16
16
  p-calendar.ng-touched.ng-invalid input {
17
- border-color: $error-color !important;
18
- background-color: $error-color-transparent !important;
17
+ border-color: var(--error-color) !important;
18
+ background-color: var(--error-color-transparent) !important;
19
19
 
20
20
  &:focus {
21
- border-color: $theme-dark !important;
21
+ border-color: var(--theme-dark) !important;
22
22
  background-color: #fff !important;
23
23
  }
24
24
  }
25
25
  p-calendar.ng-touched.ng-invalid .p-datepicker-trigger {
26
- border-color: $error-color !important;
27
- background-color: $error-color-transparent !important;
26
+ border-color: var(--error-color) !important;
27
+ background-color: var(--error-color-transparent) !important;
28
28
  }
29
29
 
30
30
  .p-calendar .p-inputtext {
31
- color: $theme-dark !important;
31
+ color: var(--theme-dark) !important;
32
32
  font-weight: 600 !important;
33
33
  margin-left: -1px !important;
34
34
  border-top-right-radius: 0px !important;
@@ -38,22 +38,22 @@ p-calendar.ng-touched.ng-invalid .p-datepicker-trigger {
38
38
  border-right: none !important;
39
39
 
40
40
  + .p-datepicker-trigger {
41
- border-right: 2px solid $theme-dark !important;
42
- border-top: 2px solid $theme-dark !important;
43
- border-bottom: 2px solid $theme-dark !important;
41
+ border-right: 2px solid var(--theme-dark) !important;
42
+ border-top: 2px solid var(--theme-dark) !important;
43
+ border-bottom: 2px solid var(--theme-dark) !important;
44
44
  background-color: #ffffff !important;
45
45
  }
46
46
  }
47
47
  }
48
48
 
49
49
  .p-datepicker-trigger {
50
- background-color: $grey-light !important;
50
+ background-color: var(--grey-light) !important;
51
51
  border: none !important;
52
- border-top-right-radius: $border-radius !important;
53
- border-bottom-right-radius: $border-radius !important;
52
+ border-top-right-radius: var(--border-radius) !important;
53
+ border-bottom-right-radius: var(--border-radius) !important;
54
54
 
55
55
  .p-button-icon {
56
- color: $theme-dark !important;
56
+ color: var(--theme-dark) !important;
57
57
  }
58
58
  }
59
59
 
@@ -67,13 +67,13 @@ p-calendar.ng-touched.ng-invalid .p-datepicker-trigger {
67
67
  }
68
68
 
69
69
  .p-button.p-button-link {
70
- color: $theme-dark;
70
+ color: var(--theme-dark);
71
71
  background: transparent;
72
72
  border: transparent;
73
73
  }
74
74
  .p-button.p-button-link:enabled:hover {
75
75
  background: transparent;
76
- color: $theme-dark;
76
+ color: var(--theme-dark);
77
77
  border-color: transparent;
78
78
  }
79
79
  .p-button.p-button-link:enabled:hover .p-button-label {
@@ -86,7 +86,7 @@ p-calendar.ng-touched.ng-invalid .p-datepicker-trigger {
86
86
  }
87
87
  .p-button.p-button-link:enabled:active {
88
88
  background: transparent;
89
- color: $theme-dark;
89
+ color: var(--theme-dark);
90
90
  border-color: transparent;
91
91
  }
92
92
 
@@ -98,41 +98,41 @@ p-calendar.ng-touched.ng-invalid .p-datepicker-trigger {
98
98
 
99
99
  &:focus + .p-autocomplete-dropdown {
100
100
  background-color: #ffffff !important;
101
- border-right: 2px solid $theme-dark !important;
102
- border-top: 2px solid $theme-dark !important;
103
- border-bottom: 2px solid $theme-dark !important;
101
+ border-right: 2px solid var(--theme-dark) !important;
102
+ border-top: 2px solid var(--theme-dark) !important;
103
+ border-bottom: 2px solid var(--theme-dark) !important;
104
104
  }
105
105
  }
106
106
 
107
107
  .p-inputwrapper-focus .p-autocomplete-dropdown {
108
108
  background-color: #ffffff !important;
109
- border-right: 2px solid $theme-dark !important;
110
- border-top: 2px solid $theme-dark !important;
111
- border-bottom: 2px solid $theme-dark !important;
109
+ border-right: 2px solid var(--theme-dark) !important;
110
+ border-top: 2px solid var(--theme-dark) !important;
111
+ border-bottom: 2px solid var(--theme-dark) !important;
112
112
  }
113
113
 
114
114
  .p-autocomplete-dropdown {
115
- background-color: $grey-light !important;
115
+ background-color: var(--grey-light) !important;
116
116
  border: none !important;
117
117
  margin-left: -1px !important;
118
- border-top-right-radius: $border-radius !important;
119
- border-bottom-right-radius: $border-radius !important;
120
- color: $grey-dark !important;
118
+ border-top-right-radius: var(--border-radius) !important;
119
+ border-bottom-right-radius: var(--border-radius) !important;
120
+ color: var(--grey-dark) !important;
121
121
  padding-bottom: 5px !important;
122
122
  }
123
123
 
124
124
  input.p-inputtext:not(.currency-input) {
125
125
  border: none;
126
- background-color: $grey-light;
126
+ background-color: var(--grey-light);
127
127
  width: 100%;
128
128
  padding: 6px 12px 6px 12px;
129
- border-top-right-radius: $border-radius;
130
- border-bottom-right-radius: $border-radius;
131
- border-top-left-radius: $border-radius;
132
- border-bottom-left-radius: $border-radius;
129
+ border-top-right-radius: var(--border-radius);
130
+ border-bottom-right-radius: var(--border-radius);
131
+ border-top-left-radius: var(--border-radius);
132
+ border-bottom-left-radius: var(--border-radius);
133
133
  height: 40px;
134
134
  font-size: 0.9em !important;
135
- color: $theme-dark !important;
135
+ color: var(--theme-dark) !important;
136
136
  font-weight: 500;
137
137
 
138
138
  &:disabled {
@@ -143,35 +143,35 @@ input.p-inputtext:not(.currency-input) {
143
143
  &:focus {
144
144
  outline: 0 !important;
145
145
  box-shadow: none !important;
146
- border: 2px solid $theme-dark;
146
+ border: 2px solid var(--theme-dark);
147
147
  background-color: #ffffff;
148
148
  }
149
149
 
150
150
  &:hover,
151
151
  &:focus:not(.ng-invalid):not(.p-inputmask) {
152
- border-color: $theme-dark !important;
152
+ border-color: var(--theme-dark) !important;
153
153
  }
154
154
 
155
155
  &::placeholder {
156
- color: $theme-dark;
156
+ color: var(--theme-dark);
157
157
  opacity: 0.8;
158
158
  }
159
159
 
160
160
  &.ng-touched.ng-invalid {
161
- border-color: $error-color !important;
162
- background-color: $error-color-transparent !important;
161
+ border-color: var(--error-color) !important;
162
+ background-color: var(--error-color-transparent) !important;
163
163
  }
164
164
 
165
165
  &:not(.ng-invalid) {
166
- border-color: $theme-dark !important;
166
+ border-color: var(--theme-dark) !important;
167
167
  }
168
168
  }
169
169
  p-inputmask {
170
170
  flex: 1;
171
171
  }
172
172
  p-inputmask.ng-touched.ng-invalid input {
173
- border-color: $error-color !important;
174
- background-color: $error-color-transparent !important;
173
+ border-color: var(--error-color) !important;
174
+ background-color: var(--error-color-transparent) !important;
175
175
  }
176
176
 
177
177
  p-inputnumber:not(.currency-input),
@@ -185,7 +185,7 @@ p-inputnumber.outlined {
185
185
 
186
186
  p-inputnumber.currency-input:not(.outlined) {
187
187
  &.ng-touched.ng-invalid input.p-inputnumber-input {
188
- color: $error-color !important;
188
+ color: var(--error-color) !important;
189
189
  }
190
190
 
191
191
  input.p-inputnumber-input {
@@ -193,7 +193,7 @@ p-inputnumber.currency-input:not(.outlined) {
193
193
  font-size: 2em !important;
194
194
  font-weight: 600 !important;
195
195
  background-color: #ffffff !important;
196
- color: $theme-dark !important;
196
+ color: var(--theme-dark) !important;
197
197
  width: 100% !important;
198
198
 
199
199
  &:focus {
@@ -203,8 +203,8 @@ p-inputnumber.currency-input:not(.outlined) {
203
203
  }
204
204
  }
205
205
  .p-radiobutton-box.p-highlight {
206
- background-color: $success-color !important;
207
- border-color: $success-color !important;
206
+ background-color: var(--success-color) !important;
207
+ border-color: var(--success-color) !important;
208
208
 
209
209
  // &::before {
210
210
  // content: '\f00c';
@@ -214,17 +214,17 @@ p-inputnumber.currency-input:not(.outlined) {
214
214
  // height: 10px;
215
215
  // }
216
216
  // .p-radiobutton-icon {
217
- // background-color: $success-color !important;
217
+ // background-color: var(--success-color) !important;
218
218
  // }
219
219
  }
220
220
 
221
221
  .p-radiobutton .p-radiobutton-box:not(.p-disabled):not(.p-highlight):hover {
222
- border-color: $success-color !important;
222
+ border-color: var(--success-color) !important;
223
223
  }
224
224
 
225
225
  .p-highlight {
226
- background-color: $theme-primary !important;
227
- border-color: $theme-primary !important;
226
+ background-color: var(--theme-primary) !important;
227
+ border-color: var(--theme-primary) !important;
228
228
  }
229
229
 
230
230
  .p-button:focus {
@@ -250,16 +250,16 @@ p-inputnumber.currency-input:not(.outlined) {
250
250
  }
251
251
 
252
252
  .p-datepicker table td > span {
253
- color: $font-color !important;
253
+ color: var(--font-color) !important;
254
254
  }
255
255
 
256
256
  .p-datepicker {
257
- border: 2px solid $theme-dark !important;
258
- border-radius: $border-radius !important;
257
+ border: 2px solid var(--theme-dark) !important;
258
+ border-radius: var(--border-radius) !important;
259
259
  z-index: 15000 !important;
260
260
 
261
261
  .p-datepicker-calendar thead tr th span {
262
- color: $theme-dark !important;
262
+ color: var(--theme-dark) !important;
263
263
  }
264
264
  }
265
265
 
@@ -315,7 +315,7 @@ p-inputnumber.currency-input:not(.outlined) {
315
315
  }
316
316
 
317
317
  .p-selectbutton {
318
- background-color: $grey-light !important;
318
+ background-color: var(--grey-light) !important;
319
319
  border-radius: 10px !important;
320
320
  width: fit-content !important;
321
321
 
@@ -325,7 +325,7 @@ p-inputnumber.currency-input:not(.outlined) {
325
325
  border-radius: 8px !important;
326
326
 
327
327
  .p-button-label {
328
- color: $theme-dark !important;
328
+ color: var(--theme-dark) !important;
329
329
  font-weight: 500 !important;
330
330
  }
331
331
 
@@ -334,7 +334,7 @@ p-inputnumber.currency-input:not(.outlined) {
334
334
  }
335
335
 
336
336
  &.p-highlight {
337
- background-color: $theme-dark !important;
337
+ background-color: var(--theme-dark) !important;
338
338
 
339
339
  .p-button-label {
340
340
  color: #ffffff !important;
@@ -344,7 +344,7 @@ p-inputnumber.currency-input:not(.outlined) {
344
344
  }
345
345
 
346
346
  .p-multiselect {
347
- border: 2px solid $theme-dark !important;
347
+ border: 2px solid var(--theme-dark) !important;
348
348
  }
349
349
 
350
350
  .p-multiselect-header {
@@ -358,7 +358,7 @@ p-inputnumber.currency-input:not(.outlined) {
358
358
  }
359
359
 
360
360
  .p-multiselect-label {
361
- color: $theme-dark !important;
361
+ color: var(--theme-dark) !important;
362
362
  font-weight: 600 !important;
363
363
  }
364
364
 
@@ -369,7 +369,7 @@ p-inputnumber.currency-input:not(.outlined) {
369
369
 
370
370
  .p-multiselect-item {
371
371
  box-shadow: unset !important;
372
- color: $theme-dark !important;
372
+ color: var(--theme-dark) !important;
373
373
  }
374
374
 
375
375
  .p-multiselect-trigger-icon {
@@ -379,7 +379,7 @@ p-inputnumber.currency-input:not(.outlined) {
379
379
  .rounded-checkbox .p-checkbox-box {
380
380
  border-radius: 20px !important;
381
381
  border: none !important;
382
- background-color: $grey-light !important;
382
+ background-color: var(--grey-light) !important;
383
383
 
384
384
  .p-checkbox-icon {
385
385
  font-size: 0.8em !important;
@@ -387,16 +387,16 @@ p-inputnumber.currency-input:not(.outlined) {
387
387
  }
388
388
 
389
389
  .p-checkbox-box.p-highlight {
390
- background: $success-color !important;
391
- border-color: $success-color !important;
390
+ background: var(--success-color) !important;
391
+ border-color: var(--success-color) !important;
392
392
  }
393
393
 
394
394
  .p-checkbox-box {
395
395
  border-width: 2px !important;
396
- border-color: $grey-dark !important;
396
+ border-color: var(--grey-dark) !important;
397
397
 
398
398
  &:hover:not(.p-highlight) {
399
- border-color: $grey-dark !important;
399
+ border-color: var(--grey-dark) !important;
400
400
  }
401
401
  }
402
402
 
@@ -406,20 +406,20 @@ p-inputnumber.currency-input:not(.outlined) {
406
406
  }
407
407
 
408
408
  p-autocomplete.ng-touched.ng-invalid input {
409
- border-color: $error-color !important;
410
- background-color: $error-color-transparent !important;
409
+ border-color: var(--error-color) !important;
410
+ background-color: var(--error-color-transparent) !important;
411
411
  }
412
412
  p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown {
413
- border-color: $error-color !important;
414
- background-color: $error-color-transparent !important;
413
+ border-color: var(--error-color) !important;
414
+ background-color: var(--error-color-transparent) !important;
415
415
  }
416
416
 
417
417
  .p-dropdown-panel,
418
418
  .p-autocomplete-panel {
419
419
  max-width: 250px !important;
420
- border: 2px solid $theme-dark !important;
420
+ border: 2px solid var(--theme-dark) !important;
421
421
  margin-top: -2px !important;
422
- border-radius: $border-radius !important;
422
+ border-radius: var(--border-radius) !important;
423
423
 
424
424
  & .p-autocomplete-items {
425
425
  padding-top: 0px !important;
@@ -432,54 +432,54 @@ p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown {
432
432
  }
433
433
 
434
434
  &::-webkit-scrollbar-track {
435
- background: $grey-light;
435
+ background: var(--grey-light);
436
436
  }
437
437
 
438
438
  &::-webkit-scrollbar-thumb {
439
- background: $theme-dark;
439
+ background: var(--theme-dark);
440
440
  border-radius: 8px;
441
441
  }
442
442
 
443
443
  &::-webkit-scrollbar-thumb:hover {
444
- background: $theme-dark;
444
+ background: var(--theme-dark);
445
445
  }
446
446
  }
447
447
 
448
448
  .p-dropdown-item,
449
449
  .p-autocomplete-item {
450
450
  text-overflow: ellipsis;
451
- color: $theme-dark !important;
451
+ color: var(--theme-dark) !important;
452
452
 
453
453
  &:hover {
454
- background-color: $theme-dark !important;
454
+ background-color: var(--theme-dark) !important;
455
455
  color: #ffffff !important;
456
456
  }
457
457
  }
458
458
 
459
459
  .p-dropdown {
460
460
  // background-color: #ffffff;
461
- background-color: $grey-light !important;
461
+ background-color: var(--grey-light) !important;
462
462
  border: none !important;
463
463
  .p-highlight {
464
464
  background-color: #ffffff !important;
465
465
  }
466
466
  }
467
467
  .p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
468
- background-color: $theme-dark !important;
468
+ background-color: var(--theme-dark) !important;
469
469
  color: #ffffff !important;
470
470
  }
471
471
 
472
472
  .p-slider {
473
473
  background-color: #01529b;
474
474
  .p-slider-range {
475
- background-color: $success-color !important;
475
+ background-color: var(--success-color) !important;
476
476
  border-radius: inherit !important;
477
477
  }
478
478
  .p-slider-handle {
479
- border-color: $success-color !important;
479
+ border-color: var(--success-color) !important;
480
480
 
481
481
  &:hover {
482
- background-color: $success-color !important;
482
+ background-color: var(--success-color) !important;
483
483
  }
484
484
  &:focus {
485
485
  box-shadow: unset !important;
@@ -493,11 +493,11 @@ p-autocomplete.ng-touched.ng-invalid .p-autocomplete-dropdown {
493
493
  }
494
494
  .p-fileupload-choose {
495
495
  background: transparent !important;
496
- border: 2px solid $theme-dark !important;
497
- border-radius: $border-radius !important;
496
+ border: 2px solid var(--theme-dark) !important;
497
+ border-radius: var(--border-radius) !important;
498
498
 
499
499
  .p-button-label {
500
- color: $theme-dark !important;
500
+ color: var(--theme-dark) !important;
501
501
  max-width: 200px !important;
502
502
  text-overflow: ellipsis !important;
503
503
  white-space: nowrap !important;
@@ -530,11 +530,11 @@ vector-data-table {
530
530
  white-space: normal !important;
531
531
 
532
532
  .boolean-value-positive {
533
- color: $success-color;
533
+ color: var(--success-color);
534
534
  }
535
535
 
536
536
  .boolean-value-negative {
537
- color: $error-color;
537
+ color: var(--error-color);
538
538
  }
539
539
 
540
540
  .status-table-field {
@@ -542,13 +542,13 @@ vector-data-table {
542
542
  }
543
543
 
544
544
  .success {
545
- color: $success-color;
545
+ color: var(--success-color);
546
546
  }
547
547
  .error {
548
- color: $error-color;
548
+ color: var(--error-color);
549
549
  }
550
550
  .warning {
551
- color: $warning-color;
551
+ color: var(--warning-color);
552
552
  }
553
553
  }
554
554
  }
@@ -7,17 +7,17 @@ p-progressSpinner .p-progress-spinner-circle {
7
7
  @keyframes custom-progress-spinner-color {
8
8
  100%,
9
9
  0% {
10
- stroke: $theme-primary;
10
+ stroke: var(--theme-primary);
11
11
  }
12
12
  40% {
13
- stroke: $theme-primary;
13
+ stroke: var(--theme-primary);
14
14
  }
15
15
  66% {
16
- stroke: $theme-primary;
16
+ stroke: var(--theme-primary);
17
17
  }
18
18
  80%,
19
19
  90% {
20
- stroke: $theme-primary;
20
+ stroke: var(--theme-primary);
21
21
  }
22
22
  }
23
23
 
@@ -10,14 +10,14 @@ body {
10
10
 
11
11
  body,
12
12
  body .p-component {
13
- color: $font-color;
13
+ color: var(--font-color);
14
14
  font-size: 13px;
15
15
  font-family: Poppins;
16
16
  }
17
17
 
18
18
  i {
19
19
  font-size: 13px;
20
- color: $font-color;
20
+ color: var(--font-color);
21
21
  }
22
22
 
23
23
  @media screen and (max-width: 640px) {
@@ -31,14 +31,14 @@ i {
31
31
  }
32
32
 
33
33
  a {
34
- color: $theme-dark;
34
+ color: var(--theme-dark);
35
35
  font-weight: 600;
36
36
  cursor: pointer;
37
37
  text-decoration: none;
38
38
 
39
39
  &:hover,
40
40
  &:visited {
41
- color: $theme-dark;
41
+ color: var(--theme-dark);
42
42
  }
43
43
  }
44
44
 
@@ -64,7 +64,7 @@ ul {
64
64
  }
65
65
 
66
66
  ::-webkit-scrollbar-track {
67
- background: $grey-light;
67
+ background: var(--grey-light);
68
68
  border-radius: 7px;
69
69
  }
70
70
 
@@ -93,7 +93,7 @@ ul {
93
93
  }
94
94
 
95
95
  .form-container {
96
- color: $form-labels-color;
96
+ color: var(--form-labels-color);
97
97
  }
98
98
 
99
99
  .dump-field {
@@ -104,4 +104,6 @@ ul {
104
104
 
105
105
  label {
106
106
  font-weight: 500;
107
+ font-size: 0.8em;
108
+ color: var(--theme-dark);
107
109
  }
@@ -1,23 +1,26 @@
1
- $theme-primary: #0046E8;
2
- $theme-dark: #3a2b68;
3
- $background: #f2f2f7;
4
- $font-color: #151515;
5
- $disabled-background: #bcbcbc;
6
- $placeholder-color: #aaaaaa80;
7
- $border-radius: 5px;
8
- $theme-primary-transparent: rgba(1, 70, 108, 0.8);
9
- $grey-light: #e5e5ea;
10
- $grey-lighter: #eff0f6;
11
- $grey-dark: #6e7f88;
12
- $error-color: #fd6a6a;
13
- $error-color-dark: #ff4136;
14
- $error-color-transparent: #fd6a6a1a;
15
- $success-color: #11b797;
16
- $success-color-dark: #0e8a71;
17
- $theme-light: #0145e8;
18
- $warning-color: #e9c429;
19
- $cancel-color: #ca024f;
20
- $form-labels-color: #4e4b66;
1
+ :root {
2
+ --teste: green;
3
+ --theme-primary: #0046e8;
4
+ --theme-dark: #3a2b68;
5
+ --background: #f2f2f7;
6
+ --font-color: #151515;
7
+ --disabled-background: #bcbcbc;
8
+ --placeholder-color: #aaaaaa80;
9
+ --border-radius: 5px;
10
+ --theme-primary-transparent: rgba(1, 70, 108, 0.8);
11
+ --grey-light: #e5e5ea;
12
+ --grey-lighter: #eff0f6;
13
+ --grey-dark: #6e7f88;
14
+ --error-color: #fd6a6a;
15
+ --error-color-dark: #ff4136;
16
+ --error-color-transparent: #fd6a6a1a;
17
+ --success-color: #11b797;
18
+ --success-color-dark: #0e8a71;
19
+ --theme-light: #0145e8;
20
+ --warning-color: #e9c429;
21
+ --cancel-color: #ca024f;
22
+ --form-labels-color: #4e4b66;
23
+ }
21
24
 
22
25
  // crossplataform mixin
23
26
  @mixin crossBrowser($prop, $css) {
@@ -48,10 +48,10 @@ export class BreadcrumbComponent {
48
48
  }
49
49
  }
50
50
  BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i1.Router }, { token: 'environment' }, { token: 'menuOptions' }], target: i0.ɵɵFactoryTarget.Component });
51
- BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: BreadcrumbComponent, selector: "vector-breadcrumb", ngImport: i0, template: "<div class=\"breadcrumb-container\" *ngIf=\"routeFragments?.length\">\r\n <div class=\"route-path\">\r\n <span class=\"app-name\">{{ appName }}</span>\r\n <div *ngIf=\"routeFragments.length < 2\" class=\"chevron\"></div>\r\n <span class=\"route-fragment\" *ngFor=\"let fragment of routeFragments | removeLastChild\"\r\n ><div class=\"chevron\"></div>\r\n {{ fragment }}</span\r\n >\r\n </div>\r\n <span class=\"last-route\">\r\n {{ routeFragments[routeFragments.length - 1] }}\r\n </span>\r\n</div>\r\n", styles: [".breadcrumb-container{display:flex;flex-direction:column;margin-bottom:15px}.breadcrumb-container .route-path{display:flex;flex-direction:row;color:#6e7f88}.breadcrumb-container .app-name,.breadcrumb-container .last-route,.breadcrumb-container .route-path .route-fragment{font-weight:400;letter-spacing:.75px;display:flex;flex-direction:row;align-items:center}.breadcrumb-container .chevron{margin:0 5px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%227.4%22 viewBox%3D%220 0 12 7.4%22%3E%0D %3Cpath id%3D%22Caminho_1437%22 data-name%3D%22Caminho 1437%22 d%3D%22M1526.175%2C366.14l4.6%2C4.6%2C4.6-4.6%2C1.4%2C1.4-6%2C6-6-6Z%22 transform%3D%22translate(-1524.775 -366.14)%22 fill%3D%22%23333%22%2F%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-position:center;transform:rotate(-90deg);width:20px;height:20px;filter:invert(53%) sepia(13%) saturate(450%) hue-rotate(156deg) brightness(89%) contrast(85%)}.breadcrumb-container .last-route{font-size:1.5em;color:#0046e8}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "removeLastChild": i3.RemoveLastChildPipe } });
51
+ BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.3", type: BreadcrumbComponent, selector: "vector-breadcrumb", ngImport: i0, template: "<div class=\"breadcrumb-container\" *ngIf=\"routeFragments?.length\">\r\n <div class=\"route-path\">\r\n <span class=\"app-name\">{{ appName }}</span>\r\n <div *ngIf=\"routeFragments.length < 2\" class=\"chevron\"></div>\r\n <span class=\"route-fragment\" *ngFor=\"let fragment of routeFragments | removeLastChild\"\r\n ><div class=\"chevron\"></div>\r\n {{ fragment }}</span\r\n >\r\n </div>\r\n <span class=\"last-route\">\r\n {{ routeFragments[routeFragments.length - 1] }}\r\n </span>\r\n</div>\r\n", styles: [":root{--teste: green;--theme-primary: #0046e8;--theme-dark: #3a2b68;--background: #f2f2f7;--font-color: #151515;--disabled-background: #bcbcbc;--placeholder-color: #aaaaaa80;--border-radius: 5px;--theme-primary-transparent: rgba(1, 70, 108, .8);--grey-light: #e5e5ea;--grey-lighter: #eff0f6;--grey-dark: #6e7f88;--error-color: #fd6a6a;--error-color-dark: #ff4136;--error-color-transparent: #fd6a6a1a;--success-color: #11b797;--success-color-dark: #0e8a71;--theme-light: #0145e8;--warning-color: #e9c429;--cancel-color: #ca024f;--form-labels-color: #4e4b66}.breadcrumb-container{display:flex;flex-direction:column;margin-bottom:15px}.breadcrumb-container .route-path{display:flex;flex-direction:row;color:var(--grey-dark)}.breadcrumb-container .app-name,.breadcrumb-container .last-route,.breadcrumb-container .route-path .route-fragment{font-weight:400;letter-spacing:.75px;display:flex;flex-direction:row;align-items:center}.breadcrumb-container .chevron{margin:0 5px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%227.4%22 viewBox%3D%220 0 12 7.4%22%3E%0D %3Cpath id%3D%22Caminho_1437%22 data-name%3D%22Caminho 1437%22 d%3D%22M1526.175%2C366.14l4.6%2C4.6%2C4.6-4.6%2C1.4%2C1.4-6%2C6-6-6Z%22 transform%3D%22translate(-1524.775 -366.14)%22 fill%3D%22%23333%22%2F%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-position:center;transform:rotate(-90deg);width:20px;height:20px;filter:invert(53%) sepia(13%) saturate(450%) hue-rotate(156deg) brightness(89%) contrast(85%)}.breadcrumb-container .last-route{font-size:1.5em;color:var(--success-color)}\n"], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "removeLastChild": i3.RemoveLastChildPipe } });
52
52
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.3", ngImport: i0, type: BreadcrumbComponent, decorators: [{
53
53
  type: Component,
54
- args: [{ selector: 'vector-breadcrumb', template: "<div class=\"breadcrumb-container\" *ngIf=\"routeFragments?.length\">\r\n <div class=\"route-path\">\r\n <span class=\"app-name\">{{ appName }}</span>\r\n <div *ngIf=\"routeFragments.length < 2\" class=\"chevron\"></div>\r\n <span class=\"route-fragment\" *ngFor=\"let fragment of routeFragments | removeLastChild\"\r\n ><div class=\"chevron\"></div>\r\n {{ fragment }}</span\r\n >\r\n </div>\r\n <span class=\"last-route\">\r\n {{ routeFragments[routeFragments.length - 1] }}\r\n </span>\r\n</div>\r\n", styles: [".breadcrumb-container{display:flex;flex-direction:column;margin-bottom:15px}.breadcrumb-container .route-path{display:flex;flex-direction:row;color:#6e7f88}.breadcrumb-container .app-name,.breadcrumb-container .last-route,.breadcrumb-container .route-path .route-fragment{font-weight:400;letter-spacing:.75px;display:flex;flex-direction:row;align-items:center}.breadcrumb-container .chevron{margin:0 5px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%227.4%22 viewBox%3D%220 0 12 7.4%22%3E%0D %3Cpath id%3D%22Caminho_1437%22 data-name%3D%22Caminho 1437%22 d%3D%22M1526.175%2C366.14l4.6%2C4.6%2C4.6-4.6%2C1.4%2C1.4-6%2C6-6-6Z%22 transform%3D%22translate(-1524.775 -366.14)%22 fill%3D%22%23333%22%2F%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-position:center;transform:rotate(-90deg);width:20px;height:20px;filter:invert(53%) sepia(13%) saturate(450%) hue-rotate(156deg) brightness(89%) contrast(85%)}.breadcrumb-container .last-route{font-size:1.5em;color:#0046e8}\n"] }]
54
+ args: [{ selector: 'vector-breadcrumb', template: "<div class=\"breadcrumb-container\" *ngIf=\"routeFragments?.length\">\r\n <div class=\"route-path\">\r\n <span class=\"app-name\">{{ appName }}</span>\r\n <div *ngIf=\"routeFragments.length < 2\" class=\"chevron\"></div>\r\n <span class=\"route-fragment\" *ngFor=\"let fragment of routeFragments | removeLastChild\"\r\n ><div class=\"chevron\"></div>\r\n {{ fragment }}</span\r\n >\r\n </div>\r\n <span class=\"last-route\">\r\n {{ routeFragments[routeFragments.length - 1] }}\r\n </span>\r\n</div>\r\n", styles: [":root{--teste: green;--theme-primary: #0046e8;--theme-dark: #3a2b68;--background: #f2f2f7;--font-color: #151515;--disabled-background: #bcbcbc;--placeholder-color: #aaaaaa80;--border-radius: 5px;--theme-primary-transparent: rgba(1, 70, 108, .8);--grey-light: #e5e5ea;--grey-lighter: #eff0f6;--grey-dark: #6e7f88;--error-color: #fd6a6a;--error-color-dark: #ff4136;--error-color-transparent: #fd6a6a1a;--success-color: #11b797;--success-color-dark: #0e8a71;--theme-light: #0145e8;--warning-color: #e9c429;--cancel-color: #ca024f;--form-labels-color: #4e4b66}.breadcrumb-container{display:flex;flex-direction:column;margin-bottom:15px}.breadcrumb-container .route-path{display:flex;flex-direction:row;color:var(--grey-dark)}.breadcrumb-container .app-name,.breadcrumb-container .last-route,.breadcrumb-container .route-path .route-fragment{font-weight:400;letter-spacing:.75px;display:flex;flex-direction:row;align-items:center}.breadcrumb-container .chevron{margin:0 5px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%227.4%22 viewBox%3D%220 0 12 7.4%22%3E%0D %3Cpath id%3D%22Caminho_1437%22 data-name%3D%22Caminho 1437%22 d%3D%22M1526.175%2C366.14l4.6%2C4.6%2C4.6-4.6%2C1.4%2C1.4-6%2C6-6-6Z%22 transform%3D%22translate(-1524.775 -366.14)%22 fill%3D%22%23333%22%2F%3E%0D%3C%2Fsvg%3E%0D\");background-repeat:no-repeat;background-position:center;transform:rotate(-90deg);width:20px;height:20px;filter:invert(53%) sepia(13%) saturate(450%) hue-rotate(156deg) brightness(89%) contrast(85%)}.breadcrumb-container .last-route{font-size:1.5em;color:var(--success-color)}\n"] }]
55
55
  }], ctorParameters: function () { return [{ type: i1.Router }, { type: undefined, decorators: [{
56
56
  type: Inject,
57
57
  args: ['environment']