@vitrosoftware/common-ui-ts 1.1.50 → 1.1.51

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 (13) hide show
  1. package/css/std/controls/breadcrumbs/breadcrumbs.css +22 -12
  2. package/css/std/controls/input/input.css +1 -1
  3. package/dist/controls/Breadcrumbs/Item.d.ts +3 -2
  4. package/dist/controls/DatePicker/DatePicker.d.ts +2 -2
  5. package/dist/controls/FieldIterator/FieldIterator.d.ts +1 -1
  6. package/dist/controls/Input/Input.d.ts +1 -1
  7. package/dist/controls/LookupPicker/LookupPicker.d.ts +1 -1
  8. package/dist/controls/TimePicker/TimePicker.d.ts +2 -2
  9. package/dist/controls/UserLookupPicker/UserLookupPicker.d.ts +1 -1
  10. package/dist/index.css +77 -67
  11. package/dist/index.js +201 -59
  12. package/dist/index.js.map +1 -1
  13. package/package.json +1 -1
package/css/std/controls/breadcrumbs/breadcrumbs.css CHANGED
@@ -6,6 +6,17 @@
6
6
  height: 24px;
7
7
  }
8
8
 
9
+ .vitro-breadcrumbs li {
10
+ list-style-type: none;
11
+ display: flex;
12
+ align-items: center;
13
+ }
14
+
15
+ .vitro-breadcrumbs li > div {
16
+ display: inline-flex;
17
+ align-items: center;
18
+ }
19
+
9
20
  .vitro-breadcrumbs-list-wrap {
10
21
  display: flex;
11
22
  position: relative;
@@ -30,8 +41,8 @@
30
41
  align-items: center;
31
42
  }
32
43
 
33
- .vitro-breadcrumbs-list > li::after, .vitro-breadcrumbs-button::after, .vitro-root::after {
34
- content: '';
44
+ .vitro-separator,
45
+ .vitro-breadcrumbs-button::after {
35
46
  display: inline-block;
36
47
  margin: 0 4px;
37
48
  height: 16px;
@@ -43,15 +54,17 @@
43
54
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.1851C6 12.3633 6.21543 12.4525 6.34142 12.3265L10.5252 8.14272C10.6034 8.06462 10.6034 7.93799 10.5252 7.85988L6.34142 3.67606C6.21543 3.55006 6 3.6393 6 3.81748L6 12.1851Z' fill='%238E98A3'/%3E%3C/svg%3E%0A");
44
55
  }
45
56
 
57
+ .vitro-breadcrumbs-button::after {
58
+ content: '';
59
+ margin-left: 24px;
60
+ height: 20px;
61
+ }
62
+
46
63
  .vitro-breadcrumbs-list > li:last-child{
47
64
  color: #222D44;
48
65
  font-family: 'InterMedium';
49
66
  }
50
67
 
51
- .vitro-breadcrumbs-list > li:last-child::after {
52
- display: none;
53
- }
54
-
55
68
  .vitro-breadcrumbs-button {
56
69
  height: 20px;
57
70
  width: 20px;
@@ -66,21 +79,17 @@
66
79
 
67
80
  .vitro-root {
68
81
  cursor: pointer;
69
- margin-right: 24px;
70
82
  list-style-type: none;
71
83
  line-height: 16px;
72
84
  background-repeat: no-repeat;
73
85
  width: 20px;
86
+ height: 20px;
87
+ display: inline-block;
74
88
  background-size: 100%;
75
89
  /* root-folder.svg URL-encoder for SVG */
76
90
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V18C21.5 19.3807 20.3807 20.5 19 20.5H5C3.61929 20.5 2.5 19.3807 2.5 18V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3Cpath d='M8 16L12 10' stroke='%23999B9D' stroke-linecap='round'/%3E%3Cpath d='M12 16L16 16' stroke='%23999B9D' stroke-linecap='round'/%3E%3C/svg%3E%0A") !important;
77
91
  }
78
92
 
79
- .vitro-root::after, .vitro-breadcrumbs-button::after {
80
- margin-left: 24px;
81
- height: 20px;
82
- }
83
-
84
93
  .vitro-drop-down-list {
85
94
  z-index: 1000;
86
95
  background: white;
@@ -118,6 +127,7 @@
118
127
  color: #4A556C;
119
128
  margin-bottom: 0px;
120
129
  overflow: hidden;
130
+ border-radius: 4px;
121
131
  }
122
132
 
123
133
  .vitro-drop-down-list ul li {
package/css/std/controls/input/input.css CHANGED
@@ -7,6 +7,7 @@
7
7
  .vitro-control input,
8
8
  .vitro-control textarea {
9
9
  width: 100%;
10
+ min-height: 40px;
10
11
  padding: 8px 16px;
11
12
  background: #fff;
12
13
  border: 1px solid #C0CAD5;
@@ -18,7 +19,6 @@
18
19
  }
19
20
 
20
21
  .vitro-control input {
21
- min-height: 40px;
22
22
  white-space: normal;
23
23
  }
24
24
 
package/dist/controls/Breadcrumbs/Item.d.ts CHANGED
@@ -1,9 +1,10 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  interface ItemProps {
3
3
  onClick?: () => void;
4
- text?: string;
5
4
  id: string;
6
5
  className?: string;
6
+ isShowSeparator: boolean;
7
+ children: React.ReactNode;
7
8
  }
8
9
  export declare const Item: (props: ItemProps) => JSX.Element;
9
10
  export {};
package/dist/controls/DatePicker/DatePicker.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  interface DatePickerProps {
3
3
  name?: string;
4
4
  culture?: string;
@@ -22,5 +22,5 @@ interface DatePickerProps {
22
22
  onClose?: (value: any, name?: string) => void;
23
23
  className?: string;
24
24
  }
25
- export declare const DatePicker: (props: DatePickerProps) => JSX.Element;
25
+ export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<unknown>>;
26
26
  export {};
package/dist/controls/FieldIterator/FieldIterator.d.ts CHANGED
@@ -19,5 +19,5 @@ interface FieldIteratorProps {
19
19
  }[];
20
20
  isReadOnly?: boolean;
21
21
  }
22
- export declare const FieldIterator: (props: FieldIteratorProps) => JSX.Element;
22
+ export declare const FieldIterator: React.ForwardRefExoticComponent<FieldIteratorProps & React.RefAttributes<unknown>>;
23
23
  export {};
package/dist/controls/Input/Input.d.ts CHANGED
@@ -28,5 +28,5 @@ interface InputProps {
28
28
  children?: React.ReactNode;
29
29
  className?: string;
30
30
  }
31
- export declare const Input: (props: InputProps) => JSX.Element;
31
+ export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
32
32
  export {};
package/dist/controls/LookupPicker/LookupPicker.d.ts CHANGED
@@ -33,5 +33,5 @@ interface LookupPickerProps {
33
33
  className?: string;
34
34
  getAllValueList?: () => Promise<any>;
35
35
  }
36
- export declare const LookupPicker: (props: LookupPickerProps) => JSX.Element;
36
+ export declare const LookupPicker: React.ForwardRefExoticComponent<LookupPickerProps & React.RefAttributes<unknown>>;
37
37
  export {};
package/dist/controls/TimePicker/TimePicker.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import React from 'react';
2
2
  interface TimePickerProps {
3
3
  value?: string | Date;
4
4
  format?: string;
@@ -16,5 +16,5 @@ interface TimePickerProps {
16
16
  onClose?: (e: any, container: any) => void;
17
17
  className?: string;
18
18
  }
19
- export declare const TimePicker: (props: TimePickerProps) => JSX.Element;
19
+ export declare const TimePicker: React.ForwardRefExoticComponent<TimePickerProps & React.RefAttributes<unknown>>;
20
20
  export {};
package/dist/controls/UserLookupPicker/UserLookupPicker.d.ts CHANGED
@@ -34,5 +34,5 @@ interface UserLookupPickerProps {
34
34
  children?: React.ReactNode;
35
35
  className?: string;
36
36
  }
37
- export declare const UserLookupPicker: (props: UserLookupPickerProps) => JSX.Element;
37
+ export declare const UserLookupPicker: React.ForwardRefExoticComponent<UserLookupPickerProps & React.RefAttributes<unknown>>;
38
38
  export {};
package/dist/index.css CHANGED
@@ -50,60 +50,6 @@
50
50
  align-items: flex-start;
51
51
  }
52
52
  }
53
- ._scrollbar_vitro-scrollbar-content_3HXSt5u {
54
- height: 100%;
55
- width: 100%;
56
- }
57
-
58
- .ps {
59
- position: relative;
60
- width: 100%;
61
- height: 100%;
62
- }
63
-
64
- .ps__rail-y {
65
- background-color: #fff !important;
66
- width: 12px !important;
67
- border-left: 1px solid #F7F9FC;
68
- border-top: 1px solid #F7F9FC;
69
- opacity: 1 !important;
70
- }
71
-
72
- .ps__rail-x {
73
- background-color: #fff !important;
74
- height: 12px !important;
75
- border-top: 1px solid #F7F9FC;
76
- opacity: 1 !important;
77
- }
78
-
79
- .ps__thumb-x, .ps__thumb-y {
80
- background-color: #E4E6EC !important;
81
- border-radius: 4px;
82
- }
83
-
84
- .ps__thumb-y {
85
- width: 4px !important;
86
- right: 3px !important;
87
- }
88
-
89
- .ps__thumb-x {
90
- height: 4px !important;
91
- top: 3px !important;
92
- }
93
-
94
- .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus,
95
- .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
96
- background-color: #fff;
97
- opacity: 1;
98
- }
99
-
100
- .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
101
- background-color: #E4E6EC;
102
- }
103
-
104
- .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
105
- background-color: #E4E6EC;
106
- }
107
53
  ._breadcrumbs_vitro-breadcrumbs_3r4NcQY {
108
54
  display: flex;
109
55
  flex-direction: column;
@@ -112,6 +58,17 @@
112
58
  height: 24px;
113
59
  }
114
60
 
61
+ ._breadcrumbs_vitro-breadcrumbs_3r4NcQY li {
62
+ list-style-type: none;
63
+ display: flex;
64
+ align-items: center;
65
+ }
66
+
67
+ ._breadcrumbs_vitro-breadcrumbs_3r4NcQY li > div {
68
+ display: inline-flex;
69
+ align-items: center;
70
+ }
71
+
115
72
  ._breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0 {
116
73
  display: flex;
117
74
  position: relative;
@@ -136,8 +93,8 @@
136
93
  align-items: center;
137
94
  }
138
95
 
139
- ._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li::after, ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after, ._breadcrumbs_vitro-root_1S5-6AY::after {
140
- content: '';
96
+ ._breadcrumbs_vitro-separator_3RKZZBc,
97
+ ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
141
98
  display: inline-block;
142
99
  margin: 0 4px;
143
100
  height: 16px;
@@ -149,15 +106,17 @@
149
106
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.1851C6 12.3633 6.21543 12.4525 6.34142 12.3265L10.5252 8.14272C10.6034 8.06462 10.6034 7.93799 10.5252 7.85988L6.34142 3.67606C6.21543 3.55006 6 3.6393 6 3.81748L6 12.1851Z' fill='%238E98A3'/%3E%3C/svg%3E%0A");
150
107
  }
151
108
 
109
+ ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
110
+ content: '';
111
+ margin-left: 24px;
112
+ height: 20px;
113
+ }
114
+
152
115
  ._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li:last-child{
153
116
  color: #222D44;
154
117
  font-family: 'InterMedium';
155
118
  }
156
119
 
157
- ._breadcrumbs_vitro-breadcrumbs-list_1SNtgtJ > li:last-child::after {
158
- display: none;
159
- }
160
-
161
120
  ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c {
162
121
  height: 20px;
163
122
  width: 20px;
@@ -172,21 +131,17 @@
172
131
 
173
132
  ._breadcrumbs_vitro-root_1S5-6AY {
174
133
  cursor: pointer;
175
- margin-right: 24px;
176
134
  list-style-type: none;
177
135
  line-height: 16px;
178
136
  background-repeat: no-repeat;
179
137
  width: 20px;
138
+ height: 20px;
139
+ display: inline-block;
180
140
  background-size: 100%;
181
141
  /* root-folder.svg URL-encoder for SVG */
182
142
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V18C21.5 19.3807 20.3807 20.5 19 20.5H5C3.61929 20.5 2.5 19.3807 2.5 18V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3Cpath d='M8 16L12 10' stroke='%23999B9D' stroke-linecap='round'/%3E%3Cpath d='M12 16L16 16' stroke='%23999B9D' stroke-linecap='round'/%3E%3C/svg%3E%0A") !important;
183
143
  }
184
144
 
185
- ._breadcrumbs_vitro-root_1S5-6AY::after, ._breadcrumbs_vitro-breadcrumbs-button_3fazq3c::after {
186
- margin-left: 24px;
187
- height: 20px;
188
- }
189
-
190
145
  ._breadcrumbs_vitro-drop-down-list_2PhrR2a {
191
146
  z-index: 1000;
192
147
  background: white;
@@ -225,6 +180,7 @@
225
180
  color: #4A556C;
226
181
  margin-bottom: 0px;
227
182
  overflow: hidden;
183
+ border-radius: 4px;
228
184
  }
229
185
 
230
186
  ._breadcrumbs_vitro-drop-down-list_2PhrR2a ul li {
@@ -243,6 +199,60 @@
243
199
  margin-bottom: 12px;
244
200
  }
245
201
  }
202
+ ._scrollbar_vitro-scrollbar-content_3HXSt5u {
203
+ height: 100%;
204
+ width: 100%;
205
+ }
206
+
207
+ .ps {
208
+ position: relative;
209
+ width: 100%;
210
+ height: 100%;
211
+ }
212
+
213
+ .ps__rail-y {
214
+ background-color: #fff !important;
215
+ width: 12px !important;
216
+ border-left: 1px solid #F7F9FC;
217
+ border-top: 1px solid #F7F9FC;
218
+ opacity: 1 !important;
219
+ }
220
+
221
+ .ps__rail-x {
222
+ background-color: #fff !important;
223
+ height: 12px !important;
224
+ border-top: 1px solid #F7F9FC;
225
+ opacity: 1 !important;
226
+ }
227
+
228
+ .ps__thumb-x, .ps__thumb-y {
229
+ background-color: #E4E6EC !important;
230
+ border-radius: 4px;
231
+ }
232
+
233
+ .ps__thumb-y {
234
+ width: 4px !important;
235
+ right: 3px !important;
236
+ }
237
+
238
+ .ps__thumb-x {
239
+ height: 4px !important;
240
+ top: 3px !important;
241
+ }
242
+
243
+ .ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus,
244
+ .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
245
+ background-color: #fff;
246
+ opacity: 1;
247
+ }
248
+
249
+ .ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
250
+ background-color: #E4E6EC;
251
+ }
252
+
253
+ .ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
254
+ background-color: #E4E6EC;
255
+ }
246
256
  ._top-level-menu_vitro-top-level-menu_38-ZEUx {
247
257
  display: flex;
248
258
  justify-content: space-between;
@@ -1765,6 +1775,7 @@
1765
1775
  ._input_vitro-control_1DmPFkF input,
1766
1776
  ._input_vitro-control_1DmPFkF textarea {
1767
1777
  width: 100%;
1778
+ min-height: 40px;
1768
1779
  padding: 8px 16px;
1769
1780
  background: #fff;
1770
1781
  border: 1px solid #C0CAD5;
@@ -1776,7 +1787,6 @@
1776
1787
  }
1777
1788
 
1778
1789
  ._input_vitro-control_1DmPFkF input {
1779
- min-height: 40px;
1780
1790
  white-space: normal;
1781
1791
  }
1782
1792