ngx-vector-components 6.5.0 → 6.7.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.
Files changed (35) hide show
  1. package/CHANGELOG.md +3059 -3047
  2. package/README.md +35 -35
  3. package/assets/icons/chevron_down_icon.svg +3 -3
  4. package/assets/icons/home_menu_icon.svg +3 -3
  5. package/assets/icons/logout_icon.svg +9 -9
  6. package/assets/icons/menu_footer_icon.svg +3 -3
  7. package/assets/icons/menu_hamburguer_icon.svg +3 -3
  8. package/assets/icons/terms_of_use_icon.svg +9 -9
  9. package/assets/icons/vector_admin_icon.svg +4 -4
  10. package/assets/icons/vector_fintech_icon.svg +3 -3
  11. package/assets/icons/vector_logtech_icon.svg +6 -6
  12. package/assets/icons/vector_marketplace_icon.svg +3 -3
  13. package/assets/images/bunge_logo.svg +23 -23
  14. package/assets/images/cofco_logo.svg +117 -117
  15. package/assets/images/emote_bad.svg +6 -6
  16. package/assets/images/emote_cool.svg +5 -5
  17. package/assets/images/emote_nice.svg +5 -5
  18. package/assets/images/success_sign.svg +4 -4
  19. package/assets/images/vector-logo-horizontal-inverse-color.svg +13 -13
  20. package/assets/images/vector_logo_horizontal.svg +13 -13
  21. package/assets/images/warn_sign.svg +4 -4
  22. package/assets/styles/_fonts.scss +114 -114
  23. package/assets/styles/_mixins.scss +7 -7
  24. package/assets/styles/_primeng-custom-theme.scss +1861 -1861
  25. package/assets/styles/_spinner.scss +36 -36
  26. package/assets/styles/_styles.scss +134 -134
  27. package/assets/styles/_variables.scss +62 -61
  28. package/fesm2022/ngx-vector-components.mjs +118 -70
  29. package/fesm2022/ngx-vector-components.mjs.map +1 -1
  30. package/lib/components/fields/data-table/data-table.component.d.ts +2 -1
  31. package/lib/components/index.d.ts +1 -0
  32. package/lib/components/snackbar/index.d.ts +2 -0
  33. package/lib/components/snackbar/snackbar.component.d.ts +25 -0
  34. package/lib/components/snackbar/snackbar.module.d.ts +9 -0
  35. package/package.json +1 -1
package/assets/styles/_spinner.scss CHANGED
@@ -1,36 +1,36 @@
1
- p-progressSpinner .p-progress-spinner-circle,
2
- p-progressSpinner .p-progressspinner-circle {
3
- animation: custom-progress-spinner 1.5s ease-in-out infinite, custom-progress-spinner-color 6s ease-in-out infinite !important;
4
- }
5
-
6
- @keyframes custom-progress-spinner-color {
7
- 100%,
8
- 0% {
9
- stroke: var(--theme-primary);
10
- }
11
- 40% {
12
- stroke: var(--theme-primary);
13
- }
14
- 66% {
15
- stroke: var(--theme-primary);
16
- }
17
- 80%,
18
- 90% {
19
- stroke: var(--theme-primary);
20
- }
21
- }
22
-
23
- @keyframes custom-progress-spinner {
24
- 0% {
25
- stroke-dasharray: 1, 200;
26
- stroke-dashoffset: 0;
27
- }
28
- 50% {
29
- stroke-dasharray: 89, 200;
30
- stroke-dashoffset: -35px;
31
- }
32
- 100% {
33
- stroke-dasharray: 89, 200;
34
- stroke-dashoffset: -124px;
35
- }
36
- }
1
+ p-progressSpinner .p-progress-spinner-circle,
2
+ p-progressSpinner .p-progressspinner-circle {
3
+ animation: custom-progress-spinner 1.5s ease-in-out infinite, custom-progress-spinner-color 6s ease-in-out infinite !important;
4
+ }
5
+
6
+ @keyframes custom-progress-spinner-color {
7
+ 100%,
8
+ 0% {
9
+ stroke: var(--theme-primary);
10
+ }
11
+ 40% {
12
+ stroke: var(--theme-primary);
13
+ }
14
+ 66% {
15
+ stroke: var(--theme-primary);
16
+ }
17
+ 80%,
18
+ 90% {
19
+ stroke: var(--theme-primary);
20
+ }
21
+ }
22
+
23
+ @keyframes custom-progress-spinner {
24
+ 0% {
25
+ stroke-dasharray: 1, 200;
26
+ stroke-dashoffset: 0;
27
+ }
28
+ 50% {
29
+ stroke-dasharray: 89, 200;
30
+ stroke-dashoffset: -35px;
31
+ }
32
+ 100% {
33
+ stroke-dasharray: 89, 200;
34
+ stroke-dashoffset: -124px;
35
+ }
36
+ }
package/assets/styles/_styles.scss CHANGED
@@ -1,134 +1,134 @@
1
- @import './fonts';
2
- @import './primeng-custom-theme';
3
- @import './spinner';
4
- @import './variables';
5
- @import './mixins';
6
-
7
- body {
8
- margin: 0px;
9
- height: 100vh;
10
- background-color: var(--background);
11
- }
12
-
13
- body,
14
- body .p-component {
15
- color: var(--font-color);
16
- font-size: 14px;
17
- }
18
-
19
- /* Poppins em tudo (fallback Inter) — inclui elementos de form, que nao herdam
20
- font-family, e os componentes do PrimeNG 18 */
21
- html,
22
- body,
23
- input,
24
- button,
25
- textarea,
26
- select,
27
- .p-component {
28
- font-family: 'Poppins', 'Inter', sans-serif;
29
- }
30
-
31
- :root {
32
- --p-font-family: 'Poppins', 'Inter', sans-serif;
33
- }
34
-
35
- .grid {
36
- margin-top: 0 !important;
37
- }
38
-
39
- i {
40
- font-size: 13px;
41
- color: var(--font-color);
42
- }
43
-
44
- @media screen and (max-width: 640px) {
45
- body {
46
- font-size: 13px;
47
- }
48
-
49
- i {
50
- font-size: 15px;
51
- }
52
- }
53
-
54
- a {
55
- color: var(--theme-dark);
56
- font-weight: 600;
57
- cursor: pointer;
58
- text-decoration: none;
59
-
60
- &:hover,
61
- &:visited {
62
- color: var(--theme-dark);
63
- }
64
- }
65
-
66
- .card {
67
- background-color: #ffffff;
68
- background: #ffffff 0% 0% no-repeat padding-box;
69
- box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06);
70
- border-radius: 24px;
71
- padding: 15px 20px 15px 20px;
72
- overflow: hidden;
73
- }
74
-
75
- ul {
76
- padding: 0;
77
- margin: 0;
78
- list-style: none;
79
- }
80
-
81
- ::-webkit-scrollbar {
82
- width: 7px;
83
- height: 7px;
84
- border-radius: 7px;
85
- }
86
-
87
- ::-webkit-scrollbar-track {
88
- background: var(--gray-light);
89
- border-radius: 7px;
90
- }
91
-
92
- ::-webkit-scrollbar-thumb {
93
- background: #aaaaaa6e;
94
- border-radius: 5px;
95
- }
96
-
97
- ::-webkit-scrollbar-thumb:hover {
98
- background: #aaa;
99
- }
100
-
101
- .field {
102
- margin-bottom: 0px !important;
103
- }
104
-
105
- .form-field {
106
- display: flex;
107
- flex-direction: column;
108
- justify-content: flex-end;
109
- min-height: 85px;
110
- }
111
-
112
- .field-centered {
113
- justify-content: center;
114
- }
115
-
116
- .checkbox-centered {
117
- padding-bottom: 17px !important;
118
- }
119
-
120
- .form-container {
121
- color: var(--form-labels-color);
122
- }
123
-
124
- .dump-field {
125
- @media (max-width: 992px) {
126
- display: none;
127
- }
128
- }
129
-
130
- label {
131
- font-weight: 500;
132
- font-size: 1em;
133
- color: var(--theme-dark);
134
- }
1
+ @import './fonts';
2
+ @import './primeng-custom-theme';
3
+ @import './spinner';
4
+ @import './variables';
5
+ @import './mixins';
6
+
7
+ body {
8
+ margin: 0px;
9
+ height: 100vh;
10
+ background-color: var(--background);
11
+ }
12
+
13
+ body,
14
+ body .p-component {
15
+ color: var(--font-color);
16
+ font-size: 14px;
17
+ }
18
+
19
+ /* Poppins em tudo (fallback Inter) — inclui elementos de form, que nao herdam
20
+ font-family, e os componentes do PrimeNG 18 */
21
+ html,
22
+ body,
23
+ input,
24
+ button,
25
+ textarea,
26
+ select,
27
+ .p-component {
28
+ font-family: 'Poppins', 'Inter', sans-serif;
29
+ }
30
+
31
+ :root {
32
+ --p-font-family: 'Poppins', 'Inter', sans-serif;
33
+ }
34
+
35
+ .grid {
36
+ margin-top: 0 !important;
37
+ }
38
+
39
+ i {
40
+ font-size: 13px;
41
+ color: var(--font-color);
42
+ }
43
+
44
+ @media screen and (max-width: 640px) {
45
+ body {
46
+ font-size: 13px;
47
+ }
48
+
49
+ i {
50
+ font-size: 15px;
51
+ }
52
+ }
53
+
54
+ a {
55
+ color: var(--theme-dark);
56
+ font-weight: 600;
57
+ cursor: pointer;
58
+ text-decoration: none;
59
+
60
+ &:hover,
61
+ &:visited {
62
+ color: var(--theme-dark);
63
+ }
64
+ }
65
+
66
+ .card {
67
+ background-color: #ffffff;
68
+ background: #ffffff 0% 0% no-repeat padding-box;
69
+ box-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.06);
70
+ border-radius: 24px;
71
+ padding: 15px 20px 15px 20px;
72
+ overflow: hidden;
73
+ }
74
+
75
+ ul {
76
+ padding: 0;
77
+ margin: 0;
78
+ list-style: none;
79
+ }
80
+
81
+ ::-webkit-scrollbar {
82
+ width: 7px;
83
+ height: 7px;
84
+ border-radius: 7px;
85
+ }
86
+
87
+ ::-webkit-scrollbar-track {
88
+ background: var(--gray-light);
89
+ border-radius: 7px;
90
+ }
91
+
92
+ ::-webkit-scrollbar-thumb {
93
+ background: #aaaaaa6e;
94
+ border-radius: 5px;
95
+ }
96
+
97
+ ::-webkit-scrollbar-thumb:hover {
98
+ background: #aaa;
99
+ }
100
+
101
+ .field {
102
+ margin-bottom: 0px !important;
103
+ }
104
+
105
+ .form-field {
106
+ display: flex;
107
+ flex-direction: column;
108
+ justify-content: flex-end;
109
+ min-height: 85px;
110
+ }
111
+
112
+ .field-centered {
113
+ justify-content: center;
114
+ }
115
+
116
+ .checkbox-centered {
117
+ padding-bottom: 17px !important;
118
+ }
119
+
120
+ .form-container {
121
+ color: var(--form-labels-color);
122
+ }
123
+
124
+ .dump-field {
125
+ @media (max-width: 992px) {
126
+ display: none;
127
+ }
128
+ }
129
+
130
+ label {
131
+ font-weight: 500;
132
+ font-size: 1em;
133
+ color: var(--theme-dark);
134
+ }
package/assets/styles/_variables.scss CHANGED
@@ -1,61 +1,62 @@
1
- :root {
2
- --theme-primary: #0046e8;
3
- --theme-medium: #0041ac;
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
- --gray-lighter: #eff0f6;
12
- --gray-light: #e5e5ea;
13
- --gray-medium: #d9dbe9;
14
- --gray-dark: #6e7f88;
15
- --gray-darker: #6e7191;
16
- --error-color: #fd6a6a;
17
- --error-color-dark: #ff4136;
18
- --error-color-transparent: #fd6a6a1a;
19
- --success-color: #11b797;
20
- --success-color-dark: #0e8a71;
21
- --theme-light: #0145e8;
22
- --warning-color: #e9c429;
23
- --cancel-color: #ca024f;
24
- --form-labels-color: #4e4b66;
25
- --font-color-primary: #3a2b68;
26
- --font-color-secondary: rgb(87, 87, 87);
27
-
28
- /* Design System — brand */
29
- --brand-light: #e7ecfd; /* fundo do Segment Control */
30
- --brand-blue: #1545de; /* azul-claro do design system (texto/borda ativos) */
31
- }
32
-
33
- :root {
34
- /* superficies */
35
- --surface-ground: #f2f2f7;
36
- --surface-section: #ffffff;
37
- --surface-card: #ffffff;
38
- --surface-overlay: #ffffff;
39
- --surface-hover: #e9ecef;
40
- --surface-border: #dee2e6;
41
-
42
- --surface-0: #ffffff;
43
- --surface-50: #fafafa;
44
- --surface-100: #f5f5f5;
45
- --surface-200: #eeeeee;
46
- --surface-300: #e0e0e0;
47
- --surface-400: #bdbdbd;
48
- --surface-500: #9e9e9e;
49
- --surface-600: #757575;
50
- --surface-700: #616161;
51
- --surface-800: #424242;
52
- --surface-900: #212121;
53
-
54
- /* texto */
55
- --text-color: var(--font-color);
56
- --text-color-secondary: var(--gray-darker);
57
-
58
- /* cor primaria */
59
- --primary-color: var(--theme-primary);
60
- --primary-color-text: #ffffff;
61
- }
1
+ :root {
2
+ --theme-primary: #0046e8;
3
+ --theme-medium: #0041ac;
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
+ --gray-lighter: #eff0f6;
12
+ --gray-light: #e5e5ea;
13
+ --gray-medium: #d9dbe9;
14
+ --gray-dark: #6e7f88;
15
+ --gray-darker: #6e7191;
16
+ --gray-darkest: #262338;
17
+ --error-color: #fd6a6a;
18
+ --error-color-dark: #ff4136;
19
+ --error-color-transparent: #fd6a6a1a;
20
+ --success-color: #11b797;
21
+ --success-color-dark: #0e8a71;
22
+ --theme-light: #0145e8;
23
+ --warning-color: #e9c429;
24
+ --cancel-color: #ca024f;
25
+ --form-labels-color: #4e4b66;
26
+ --font-color-primary: #3a2b68;
27
+ --font-color-secondary: rgb(87, 87, 87);
28
+
29
+ /* Design System — brand */
30
+ --brand-light: #e7ecfd; /* fundo do Segment Control */
31
+ --brand-blue: #1545de; /* azul-claro do design system (texto/borda ativos) */
32
+ }
33
+
34
+ :root {
35
+ /* superficies */
36
+ --surface-ground: #f2f2f7;
37
+ --surface-section: #ffffff;
38
+ --surface-card: #ffffff;
39
+ --surface-overlay: #ffffff;
40
+ --surface-hover: #e9ecef;
41
+ --surface-border: #dee2e6;
42
+
43
+ --surface-0: #ffffff;
44
+ --surface-50: #fafafa;
45
+ --surface-100: #f5f5f5;
46
+ --surface-200: #eeeeee;
47
+ --surface-300: #e0e0e0;
48
+ --surface-400: #bdbdbd;
49
+ --surface-500: #9e9e9e;
50
+ --surface-600: #757575;
51
+ --surface-700: #616161;
52
+ --surface-800: #424242;
53
+ --surface-900: #212121;
54
+
55
+ /* texto */
56
+ --text-color: var(--font-color);
57
+ --text-color-secondary: var(--gray-darker);
58
+
59
+ /* cor primaria */
60
+ --primary-color: var(--theme-primary);
61
+ --primary-color-text: #ffffff;
62
+ }