@vitrosoftware/common-ui-ts 1.1.14 → 1.1.15

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,21 @@
1
+ .vitro-avatar {
2
+ position: relative;
3
+ border-radius: 50%;
4
+ border: 0;
5
+ background: #76AFF8;
6
+ color: #fff !important;
7
+ width: 24px;
8
+ height: 24px;
9
+ min-width: 24px;
10
+ text-align: center;
11
+ font-size: 12px;
12
+ line-height: 24px;
13
+ }
14
+
15
+ .vitro-avatar.vitro-avatar-big {
16
+ width: 32px;
17
+ min-width: 32px;
18
+ height: 32px;
19
+ line-height: 32px;
20
+ font-size: 16px;
21
+ }
@@ -0,0 +1,8 @@
1
+ .vitro-item-html-value {
2
+ height: fit-content;
3
+ width: fit-content;
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: center;
7
+ margin-right: 8px;
8
+ }
@@ -1,4 +1,6 @@
1
1
  .vitro-selected-item {
2
2
  display: inline;
3
3
  margin: 0 6px 0 0;
4
- }
4
+ display: flex;
5
+ align-items: center;
6
+ }
@@ -14,22 +14,37 @@
14
14
  padding-right: 0 !important;
15
15
  }
16
16
 
17
- .vitro-value-list div.vitro-item {
17
+ .vitro-value-list > :global(.ps) > div:first-child {
18
+ padding: 0 !important;
19
+ }
20
+
21
+ .vitro-value-list .vitro-item {
18
22
  padding: 8px 12px;
19
23
  cursor: pointer;
20
24
  border-radius: 0px;
25
+ display: flex;
26
+ align-items: center;
21
27
  }
22
28
 
23
- .vitro-value-list div:last-child {
29
+ .vitro-value-list .vitro-item:last-child {
24
30
  border-radius: 0 0 4px 4px;
25
31
  }
26
32
 
27
- .vitro-value-list div:first-child {
33
+ .vitro-value-list .vitro-item:first-child {
28
34
  border-radius: 4px 4px 0 0;
29
35
  padding: 0 !important;
30
36
  }
31
37
 
32
- .vitro-value-list div.vitro-item:hover {
38
+ .vitro-value-list .vitro-item > .vitro-item-html-value {
39
+ height: fit-content;
40
+ width: fit-content;
41
+ display: flex;
42
+ align-items: center;
43
+ justify-content: center;
44
+ margin-right: 8px;
45
+ }
46
+
47
+ .vitro-value-list .vitro-item:hover {
33
48
  background: #F3F8FF;
34
49
  }
35
50
 
@@ -4,7 +4,7 @@
4
4
 
5
5
  :global(#TableView) {
6
6
  height: auto;
7
- flex: 1 1 100%;
7
+ flex: 1 0 auto;
8
8
  }
9
9
 
10
10
  .vitro-table-view {
@@ -586,3 +586,7 @@
586
586
  .TWCellBase.vitro-table-view-deleted {
587
587
  color: #BDBDBD;
588
588
  }
589
+
590
+ .TWCell .vitro-flex > div {
591
+ margin-right: 4px;
592
+ }
@@ -0,0 +1,77 @@
1
+ .vitro-user-profile span {
2
+ margin-right: 10px;
3
+ color: #5F6276;
4
+ font-size: 14px;
5
+ user-select: none;
6
+ white-space: nowrap;
7
+ cursor: pointer;
8
+ }
9
+
10
+ .vitro-user-profile > button > div {
11
+ display: flex;
12
+ align-items: center;
13
+ }
14
+
15
+ .vitro-user-profile :global(.dropdown-toggle) {
16
+ background-color: transparent !important;
17
+ border: none;
18
+ padding: 0;
19
+ }
20
+
21
+ .vitro-user-profile :global(.dropdown-toggle)::after {
22
+ display: none;
23
+ }
24
+
25
+ .vitro-user-profile :global(.dropdown-toggle):active,
26
+ .vitro-user-profile :global(.dropdown-toggle):hover {
27
+ background: transparent;
28
+ border: none;
29
+ outline: none;
30
+ }
31
+
32
+ .vitro-user-profile :global(.dropdown-menu) {
33
+ background: #fff;
34
+ width: fit-content;
35
+ border-radius: 4px;
36
+ padding: 0;
37
+ box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
38
+ inset: calc(100% + 5px) 0px auto auto !important;
39
+ }
40
+
41
+ .vitro-user-profile :global(.dropdown-menu::before) {
42
+ content: '';
43
+ display: block;
44
+ height: 11px;
45
+ width: 16px;
46
+ background-position: center;
47
+ background-size: 100%;
48
+ background-repeat: no-repeat;
49
+ position: absolute;
50
+ right: 8px;
51
+ top: -11px;
52
+ /* dropdown-arrow.svg URL-encoder for SVG */
53
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
54
+ }
55
+
56
+ .vitro-dropdown-item {
57
+ cursor: pointer;
58
+ background: #fff;
59
+ padding: 8px 12px;
60
+ font-size: 14px;
61
+ line-height: 16px;
62
+ }
63
+
64
+ .vitro-dropdown-item:first-child {
65
+ border-top-left-radius: 4px;
66
+ border-top-right-radius: 4px;
67
+ }
68
+
69
+ .vitro-dropdown-item:last-child {
70
+ border-bottom-left-radius: 4px;
71
+ border-bottom-right-radius: 4px;
72
+ }
73
+
74
+ .vitro-dropdown-item:hover,
75
+ .vitro-dropdown-item:active {
76
+ background: #DCEEFF;
77
+ }
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ interface AvatarProps {
3
+ userName: string;
4
+ image?: string;
5
+ isBigSize?: boolean;
6
+ }
7
+ export declare const Avatar: (props: AvatarProps) => JSX.Element;
8
+ export {};
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React, { FunctionComponent } from 'react';
2
2
  interface LookupPickerProps {
3
3
  name?: string;
4
4
  valueList?: {
@@ -13,6 +13,10 @@ interface LookupPickerProps {
13
13
  charCount?: number;
14
14
  filterValueTemplate?: any;
15
15
  selectedValueTemplate?: any;
16
+ htmlValueTemplate?: FunctionComponent<any>;
17
+ getHtmlValueTemplateProps?: (item: {
18
+ id: string;
19
+ }) => any;
16
20
  filterMinLength: number;
17
21
  isMultiSelect?: boolean;
18
22
  isDisabled?: boolean;
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import { FunctionComponentElement } from 'react';
2
2
  interface SelectedValueListProps {
3
3
  list: {
4
4
  id: string;
@@ -6,6 +6,9 @@ interface SelectedValueListProps {
6
6
  isMultiSelect?: boolean;
7
7
  selectedValueTemplate: (value: any) => any;
8
8
  onOptionValueDelete: (id: string) => any;
9
+ getHtmlValue?: (item: {
10
+ id: string;
11
+ }) => FunctionComponentElement<any> | null;
9
12
  }
10
13
  export declare const SelectedValueList: (props: SelectedValueListProps) => JSX.Element;
11
14
  export {};
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
1
+ import { FunctionComponentElement } from 'react';
2
2
  interface ValueListProps {
3
3
  inputValue: any;
4
4
  list: {
@@ -11,6 +11,9 @@ interface ValueListProps {
11
11
  isVisible?: boolean;
12
12
  onOptionValueSelect: (id: string) => any;
13
13
  emptyPlaceholder: string;
14
+ getHtmlValue?: (item: {
15
+ id: string;
16
+ }) => FunctionComponentElement<any> | null;
14
17
  }
15
18
  export declare const ValueList: (props: ValueListProps) => JSX.Element;
16
19
  export {};
@@ -0,0 +1,11 @@
1
+ import { FunctionComponentElement } from 'react';
2
+ interface ValueListItemProps {
3
+ item: {
4
+ id: string;
5
+ };
6
+ onSelect: (id: string) => any;
7
+ createDisplayValue: (item: any) => any;
8
+ htmlValue?: FunctionComponentElement<any> | null;
9
+ }
10
+ export declare const ValueListItem: (props: ValueListItemProps) => JSX.Element;
11
+ export {};
@@ -0,0 +1,38 @@
1
+ import React from 'react';
2
+ interface UserLookupPickerProps {
3
+ name?: string;
4
+ valueList?: {
5
+ id: string;
6
+ }[];
7
+ getValueList?: (value: string) => Promise<any>;
8
+ selectedValueList?: {
9
+ id: string;
10
+ }[];
11
+ selectedValue?: any;
12
+ scrollableElement?: any;
13
+ charCount?: number;
14
+ filterValueTemplate?: any;
15
+ selectedValueTemplate?: any;
16
+ getHtmlValueTemplateProps: (item: {
17
+ id: string;
18
+ }) => {
19
+ userName: string;
20
+ image?: string;
21
+ };
22
+ filterMinLength: number;
23
+ isMultiSelect?: boolean;
24
+ isDisabled?: boolean;
25
+ isReadOnly?: boolean;
26
+ isRequired?: boolean;
27
+ onChange?: (value: any[] | any, name?: string) => void;
28
+ onBlur?: (e: any, name?: string) => void;
29
+ label?: string;
30
+ labelWidth?: number;
31
+ placeholder?: string;
32
+ emptyPlaceholder?: string;
33
+ errorMessage?: string;
34
+ children?: React.ReactNode;
35
+ className?: string;
36
+ }
37
+ export declare const UserLookupPicker: (props: UserLookupPickerProps) => JSX.Element;
38
+ export {};
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ interface UserProfileProps {
3
+ userName: string;
4
+ image?: string;
5
+ dropdownMenuItemList?: {
6
+ text: string;
7
+ onClick?: () => any;
8
+ link?: string;
9
+ }[];
10
+ }
11
+ export declare const UserProfile: (props: UserProfileProps) => JSX.Element;
12
+ export {};
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ interface UserProfileMenuItemProps {
3
+ text: string;
4
+ link?: string;
5
+ onClick?: () => any;
6
+ imageUrl?: string;
7
+ hoverImageUrl?: string;
8
+ setDropdownState: (state: boolean) => any;
9
+ }
10
+ export declare const UserProfileMenuItem: (props: UserProfileMenuItemProps) => JSX.Element | null;
11
+ export {};
package/dist/index.css CHANGED
@@ -401,7 +401,7 @@
401
401
 
402
402
  #TableView {
403
403
  height: auto;
404
- flex: 1 1 100%;
404
+ flex: 1 0 auto;
405
405
  }
406
406
 
407
407
  ._table-view_vitro-table-view_1tTs32D {
@@ -2525,6 +2525,19 @@
2525
2525
  ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
2526
2526
  display: inline;
2527
2527
  margin: 0 6px 0 0;
2528
+ display: flex;
2529
+ align-items: center;
2530
+ }
2531
+
2532
+ ._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
2533
+ height: -moz-fit-content;
2534
+ height: fit-content;
2535
+ width: -moz-fit-content;
2536
+ width: fit-content;
2537
+ display: flex;
2538
+ align-items: center;
2539
+ justify-content: center;
2540
+ margin-right: 8px;
2528
2541
  }
2529
2542
  ._lookup-picker-value-list_vitro-value-list_LSdCMjq {
2530
2543
  position: absolute;
@@ -2542,22 +2555,39 @@
2542
2555
  padding-right: 0 !important;
2543
2556
  }
2544
2557
 
2545
- ._lookup-picker-value-list_vitro-value-list_LSdCMjq div._lookup-picker-value-list_vitro-item_7yZBz5u {
2558
+ ._lookup-picker-value-list_vitro-value-list_LSdCMjq > .ps > div:first-child {
2559
+ padding: 0 !important;
2560
+ }
2561
+
2562
+ ._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u {
2546
2563
  padding: 8px 12px;
2547
2564
  cursor: pointer;
2548
2565
  border-radius: 0px;
2566
+ display: flex;
2567
+ align-items: center;
2549
2568
  }
2550
2569
 
2551
- ._lookup-picker-value-list_vitro-value-list_LSdCMjq div:last-child {
2570
+ ._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:last-child {
2552
2571
  border-radius: 0 0 4px 4px;
2553
2572
  }
2554
2573
 
2555
- ._lookup-picker-value-list_vitro-value-list_LSdCMjq div:first-child {
2574
+ ._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:first-child {
2556
2575
  border-radius: 4px 4px 0 0;
2557
2576
  padding: 0 !important;
2558
2577
  }
2559
2578
 
2560
- ._lookup-picker-value-list_vitro-value-list_LSdCMjq div._lookup-picker-value-list_vitro-item_7yZBz5u:hover {
2579
+ ._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u > ._lookup-picker-value-list_vitro-item-html-value_1yl9tXx {
2580
+ height: -moz-fit-content;
2581
+ height: fit-content;
2582
+ width: -moz-fit-content;
2583
+ width: fit-content;
2584
+ display: flex;
2585
+ align-items: center;
2586
+ justify-content: center;
2587
+ margin-right: 8px;
2588
+ }
2589
+
2590
+ ._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:hover {
2561
2591
  background: #F3F8FF;
2562
2592
  }
2563
2593
 
@@ -3624,4 +3654,106 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
3624
3654
  position: absolute;
3625
3655
  bottom: 0;
3626
3656
  right: 0;
3657
+ }
3658
+ ._avatar_vitro-avatar_P2tU-_r {
3659
+ position: relative;
3660
+ border-radius: 50%;
3661
+ border: 0;
3662
+ background: #76AFF8;
3663
+ color: #fff !important;
3664
+ width: 24px;
3665
+ height: 24px;
3666
+ min-width: 24px;
3667
+ text-align: center;
3668
+ font-size: 12px;
3669
+ line-height: 24px;
3670
+ }
3671
+
3672
+ ._avatar_vitro-avatar_P2tU-_r._avatar_vitro-avatar-big_pEmlX3a {
3673
+ width: 32px;
3674
+ min-width: 32px;
3675
+ height: 32px;
3676
+ line-height: 32px;
3677
+ font-size: 16px;
3678
+ }
3679
+
3680
+ ._user-profile_vitro-user-profile_11XpBoQ span {
3681
+ margin-right: 10px;
3682
+ color: #5F6276;
3683
+ font-size: 14px;
3684
+ -webkit-user-select: none;
3685
+ -moz-user-select: none;
3686
+ user-select: none;
3687
+ white-space: nowrap;
3688
+ cursor: pointer;
3689
+ }
3690
+
3691
+ ._user-profile_vitro-user-profile_11XpBoQ > button > div {
3692
+ display: flex;
3693
+ align-items: center;
3694
+ }
3695
+
3696
+ ._user-profile_vitro-user-profile_11XpBoQ .dropdown-toggle {
3697
+ background-color: transparent !important;
3698
+ border: none;
3699
+ padding: 0;
3700
+ }
3701
+
3702
+ ._user-profile_vitro-user-profile_11XpBoQ .dropdown-toggle::after {
3703
+ display: none;
3704
+ }
3705
+
3706
+ ._user-profile_vitro-user-profile_11XpBoQ .dropdown-toggle:active,
3707
+ ._user-profile_vitro-user-profile_11XpBoQ .dropdown-toggle:hover {
3708
+ background: transparent;
3709
+ border: none;
3710
+ outline: none;
3711
+ }
3712
+
3713
+ ._user-profile_vitro-user-profile_11XpBoQ .dropdown-menu {
3714
+ background: #fff;
3715
+ width: -moz-fit-content;
3716
+ width: fit-content;
3717
+ border-radius: 4px;
3718
+ padding: 0;
3719
+ box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
3720
+ inset: calc(100% + 5px) 0px auto auto !important;
3721
+ }
3722
+
3723
+ ._user-profile_vitro-user-profile_11XpBoQ .dropdown-menu::before {
3724
+ content: '';
3725
+ display: block;
3726
+ height: 11px;
3727
+ width: 16px;
3728
+ background-position: center;
3729
+ background-size: 100%;
3730
+ background-repeat: no-repeat;
3731
+ position: absolute;
3732
+ right: 8px;
3733
+ top: -11px;
3734
+ /* dropdown-arrow.svg URL-encoder for SVG */
3735
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
3736
+ }
3737
+
3738
+ ._user-profile_vitro-dropdown-item_dSErsta {
3739
+ cursor: pointer;
3740
+ background: #fff;
3741
+ padding: 8px 12px;
3742
+ font-size: 14px;
3743
+ line-height: 16px;
3744
+ }
3745
+
3746
+ ._user-profile_vitro-dropdown-item_dSErsta:first-child {
3747
+ border-top-left-radius: 4px;
3748
+ border-top-right-radius: 4px;
3749
+ }
3750
+
3751
+ ._user-profile_vitro-dropdown-item_dSErsta:last-child {
3752
+ border-bottom-left-radius: 4px;
3753
+ border-bottom-right-radius: 4px;
3754
+ }
3755
+
3756
+ ._user-profile_vitro-dropdown-item_dSErsta:hover,
3757
+ ._user-profile_vitro-dropdown-item_dSErsta:active {
3758
+ background: #DCEEFF;
3627
3759
  }
package/dist/index.d.ts CHANGED
@@ -49,6 +49,9 @@ import * as ALERT from './controls/Alert/AlertConstants';
49
49
  import { Dialog } from './controls/Dialog/Dialog';
50
50
  import { DialogContent } from './controls/Dialog/DialogContent';
51
51
  import { DialogFooter } from './controls/Dialog/DialogFooter';
52
+ import { Avatar } from './controls/Avatar/Avatar';
53
+ import { UserProfile } from './controls/UserProfile/UserProfile';
54
+ import { UserLookupPicker } from './controls/UserLookupPicker/UserLookupPicker';
52
55
  export { Breadcrumbs };
53
56
  export { TopLevelMenu };
54
57
  export { TreeView, TreeViewContext, TREE_VIEW };
@@ -73,3 +76,6 @@ export { Sidebar, SidebarItem, SidebarSection };
73
76
  export { TaskTile };
74
77
  export { Alert, ALERT };
75
78
  export { Dialog, DialogContent, DialogFooter };
79
+ export { Avatar };
80
+ export { UserProfile };
81
+ export { UserLookupPicker };