@vitrosoftware/common-ui-ts 1.1.13 → 1.1.15

package/css/common.css

@@ -18,7 +18,7 @@
 
 :global(.vitro-title) {
     font-size: 20px;
-    font-family: 'InterRegular';
+    font-family: 'InterMedium';
     line-height: 24px;
     margin-right: 24px;
     margin-bottom: 14px;
@@ -40,5 +40,11 @@
         padding-bottom: 8px;
         font-size: 18px;
         line-height: 27px;
+        margin: 0;
+    }
+
+    :global(.pane) > :global(.vitro-flex) {
+        flex-direction: column;
+        align-items: flex-start;
     }
 }

package/css/std/controls/avatar/avatar.css

@@ -0,0 +1,21 @@
+.vitro-avatar {
+    position: relative;
+    border-radius: 50%;
+    border: 0;
+    background: #76AFF8;
+    color: #fff !important;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    text-align: center;
+    font-size: 12px;
+    line-height: 24px;
+}
+
+.vitro-avatar.vitro-avatar-big {
+    width: 32px;
+    min-width: 32px;
+    height: 32px;
+    line-height: 32px;
+    font-size: 16px;
+}

package/css/std/controls/command-menu/command-menu-button.css

@@ -15,4 +15,14 @@
     width: 24px;
     height: 24px;
     margin-right: 4px;
+}
+
+@media (max-width: 800px) {
+    .vitro-command-menu-button .vitro-icon + div {
+        display: none;
+    }
+
+    .vitro-command-menu-button {
+        min-width: 40px !important;
+    }
 }

package/css/std/controls/command-menu/command-menu-dropdown-button.css

@@ -152,4 +152,23 @@
 :global(.vitro-button-context:hover),
 :global(.vitro-button-context:active) {
     border-color: #fff !important;
+}
+
+@media (max-width: 800px) {
+    .vitro-command-menu-dropdown-button .vitro-icon + div {
+        display: none;
+    }
+
+    .vitro-command-menu-dropdown-button {
+        min-width: 40px !important;
+    }
+
+    li:first-child .vitro-icon + div {
+        display: block;
+    }
+
+    :global(.vitro-button-context) {
+        min-width: 32px !important;
+        width: 32px;
+    }
 }

package/css/std/controls/lookup-picker/lookup-picker-html-value.css

@@ -0,0 +1,8 @@
+.vitro-item-html-value {
+    height: fit-content;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}

package/css/std/controls/lookup-picker/lookup-picker-selected-item.css

@@ -1,4 +1,6 @@
 .vitro-selected-item {
     display: inline;
     margin: 0 6px 0 0;
-}
+    display: flex;
+    align-items: center;
+}

package/css/std/controls/lookup-picker/lookup-picker-value-list.css

@@ -14,22 +14,37 @@
     padding-right: 0 !important;
 }
 
-.vitro-value-list div.vitro-item {
+.vitro-value-list > :global(.ps) > div:first-child {
+    padding: 0 !important;
+}
+
+.vitro-value-list .vitro-item {
     padding: 8px 12px;
     cursor: pointer;
     border-radius: 0px;
+    display: flex;
+    align-items: center;
 }
 
-.vitro-value-list div:last-child {
+.vitro-value-list .vitro-item:last-child {
     border-radius: 0 0 4px 4px;
 }
 
-.vitro-value-list div:first-child {
+.vitro-value-list .vitro-item:first-child {
     border-radius: 4px 4px 0 0;
     padding: 0 !important;
 }
 
-.vitro-value-list div.vitro-item:hover {
+.vitro-value-list .vitro-item > .vitro-item-html-value {
+    height: fit-content;
+    width: fit-content;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 8px;
+}
+
+.vitro-value-list .vitro-item:hover {
     background: #F3F8FF;
 }
 

package/css/std/controls/sidebar/sidebar-item.css

@@ -1,8 +1,8 @@
-a.vitro-active {
+.vitro-active {
     background-color: #DCEEFF;
 }
 
-ul > li:last-child > ul > li:last-child a.vitro-active {
+ul > li:last-child > ul > li:last-child .vitro-active {
     background-color: transparent;
 }
 
@@ -21,29 +21,90 @@ ul > li:last-child > ul > li:last-child a.vitro-active {
     display: none;
 }
 
-a:hover .vitro-icon-text, a:hover .vitro-item-text, a.vitro-active .vitro-icon-text, a.vitro-active .vitro-item-text {
+.vitro-active .vitro-icon-text,
+.vitro-active .vitro-item-text {
     color: #326AD6;
     font-weight: 500;
     font-family: 'InterMedium';
 }
 
-.vitro-icon > :global(.vitro-icon-hover) {
-    display: none;
+.vitro-icon {
+    width: 24px;
+    height: 24px;
 }
 
-.vitro-icon:hover > :global(.vitro-icon-hover) {
+:global(.toggled.pinned) .vitro-item a {
+    width: 100%;
+}
+
+.vitro-item a > div {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+}
+
+.vitro-item a {
+    text-decoration: none;
+    height: 40px;
+    width: 40px;
+    border-radius: 8px;
+    padding: 8px;
+    cursor: pointer;
+    margin-bottom: 8px;
     display: block;
 }
 
-.vitro-icon:hover > :global(.vitro-icon-default) {
-    display: none;
+.vitro-active {
+    background-color: #DCEEFF;
 }
 
-.vitro-icon {
-    width: 24px;
-    height: 24px;
+:global(.vitro-bottom-menu) .vitro-item-text {
+    display: block;
+    color: #4A556C;
+    font-size: 12px;
+    line-height: 12px;
+    text-align: center;
 }
 
-:global(.vitro-display-none) {
+:global(.vitro-bottom-menu) .vitro-icon-text {
     display: none;
-}
+}
+
+:global(.vitro-bottom-menu) .vitro-active {
+    background: transparent;
+    position: relative;
+}
+
+:global(.vitro-bottom-menu) .vitro-active::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 2px;
+    border-radius: 2px;
+    background: #4292F7;
+    width: 32px;
+    bottom: -8px;
+}
+
+.vitro-active .vitro-item-text {
+    color: #4A556C;
+    font-family: 'InterRegular' !important;
+}
+
+.vitro-item {
+    display: flex;
+    justify-content: center;
+}
+
+:global(.vitro-bottom-menu) .vitro-item > a {
+    background: transparent;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
+    width: fit-content;
+    height: 100%;
+    padding: 0;
+    margin-bottom: 0;
+}

package/css/std/controls/sidebar/sidebar.css

@@ -35,21 +35,6 @@
     justify-content: space-between;
 }
 
-.vitro-sidebar a {
-    text-decoration: none;
-    height: 40px;
-    width: 40px;
-    border-radius: 8px;
-    padding: 8px;
-    cursor: pointer;
-    margin-bottom: 8px;
-    display: block;
-}
-
-.vitro-sidebar a:hover {
-    background-color: #DCEEFF;
-}
-
 .vitro-sidebar ul > li:last-child > ul > li:last-child a {
     margin-bottom: 0;
 }
@@ -67,12 +52,53 @@
     font-weight: 400 !important;
 }
 
-:global(.toggled.pinned) .vitro-sidebar a {
+:global(.vitro-bottom-menu) {
     width: 100%;
+    z-index: 10000;
+    flex-direction: row;
+    height: 60px;
+    padding: 0 21px !important;
+    background: #fff;
+    bottom: 0;
+    top: initial;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    border-radius: 4px 4px 0 0;
 }
 
-.vitro-sidebar a > div {
+:global(.vitro-bottom-menu) ul {
     display: flex;
-    width: fit-content;
-    align-items: center;
+    flex-direction: row;
+    height: 100%;
+}
+
+.vitro-scroll-container {
+    height: 100%;
+    flex: 0 1 auto;
+    overflow: hidden;
+    padding: 8px 0;
+}
+
+.vitro-scroll-container > ul {
+    transition: 1s all ease;
+}
+
+.vitro-button-more {
+    display: block;
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    border: none;
+    background-color: #fff;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* bottom-menu-button-more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 41 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='20' r='2.5' transform='rotate(-90 10.5 20)' fill='%234A556C'/%3E%3Ccircle cx='20.5' cy='20' r='2.5' transform='rotate(-90 20.5 20)' fill='%234A556C'/%3E%3Ccircle cx='30.5' cy='20' r='2.5' transform='rotate(-90 30.5 20)' fill='%234A556C'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-more:hover,
+.vitro-button-more:active {
+    border: none;
+    background-color: #fff;
+    outline: none;
 }

package/css/std/controls/table-view/table-view.css

@@ -4,7 +4,7 @@
 
 :global(#TableView) {
     height: auto;
-    flex: 1 1 100%;
+    flex: 1 0 auto;
 }
 
 .vitro-table-view {

package/css/std/controls/table-view/treegrid.css

@@ -586,3 +586,7 @@
 .TWCellBase.vitro-table-view-deleted {
     color: #BDBDBD;
 }
+
+.TWCell .vitro-flex > div {
+    margin-right: 4px;
+}

package/css/std/controls/uploader/uploader.css

@@ -317,6 +317,11 @@
     flex: unset;
 }
 
+.vitro-uploader :global(.k-upload-action) {
+    min-width: 24px;
+    justify-content: flex-start;
+}
+
 :global(#TableViewContainer .splitter:last-child > .pane.primary):has(.vitro-uploader) {
     position: relative;
 }
@@ -444,6 +449,8 @@
 .vitro-uploader :global(.k-progressbar) {
     height: 32px !important;
     width: 32px !important;
+    min-width: 32px;
+    min-height: 32px;
     border-radius: 50% !important;
     display: flex;
     align-items: center !important;
@@ -455,8 +462,10 @@
 }
 
 .vitro-uploader :global(.k-progressbar > span) {
-    height: 27px !important;
-    width: 27px !important;
+    height: 28px !important;
+    width: 28px !important;
+    min-width: 28px;
+    min-height: 28px;
     border-radius: 50% !important;
     background: #fff !important;
     display: block;

package/css/std/controls/user-profile/user-profile.css

@@ -0,0 +1,77 @@
+.vitro-user-profile span {
+    margin-right: 10px;
+    color: #5F6276;
+    font-size: 14px;
+    user-select: none;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.vitro-user-profile > button > div {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-user-profile :global(.dropdown-toggle) {
+    background-color: transparent !important;
+    border: none;
+    padding: 0;
+}
+
+.vitro-user-profile :global(.dropdown-toggle)::after {
+    display: none;
+}
+
+.vitro-user-profile :global(.dropdown-toggle):active, 
+.vitro-user-profile :global(.dropdown-toggle):hover {
+    background: transparent;
+    border: none;
+    outline: none;
+}
+
+.vitro-user-profile :global(.dropdown-menu) {
+    background: #fff;
+    width: fit-content;
+    border-radius: 4px;
+    padding: 0;
+    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.14), 0px 0px 2px 0px rgba(0, 0, 0, 0.10);
+    inset: calc(100% + 5px) 0px auto auto !important;
+}
+
+.vitro-user-profile :global(.dropdown-menu::before) {
+    content: '';
+    display: block;
+    height: 11px;
+    width: 16px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 8px;
+    top: -11px;
+    /* dropdown-arrow.svg URL-encoder for SVG */
+    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");
+}
+
+.vitro-dropdown-item {
+    cursor: pointer;
+    background: #fff;
+    padding: 8px 12px;
+    font-size: 14px;
+    line-height: 16px;
+}
+
+.vitro-dropdown-item:first-child {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+}
+
+.vitro-dropdown-item:last-child {
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.vitro-dropdown-item:hover,
+.vitro-dropdown-item:active {
+    background: #DCEEFF;
+}

package/dist/controls/Avatar/Avatar.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface AvatarProps {
+    userName: string;
+    image?: string;
+    isBigSize?: boolean;
+}
+export declare const Avatar: (props: AvatarProps) => JSX.Element;
+export {};

package/dist/controls/LookupPicker/LookupPicker.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 interface LookupPickerProps {
     name?: string;
     valueList?: {
@@ -13,6 +13,10 @@ interface LookupPickerProps {
     charCount?: number;
     filterValueTemplate?: any;
     selectedValueTemplate?: any;
+    htmlValueTemplate?: FunctionComponent<any>;
+    getHtmlValueTemplateProps?: (item: {
+        id: string;
+    }) => any;
     filterMinLength: number;
     isMultiSelect?: boolean;
     isDisabled?: boolean;
@@ -27,6 +31,7 @@ interface LookupPickerProps {
     errorMessage?: string;
     children?: React.ReactNode;
     className?: string;
+    getAllValueList?: () => Promise<any>;
 }
 export declare const LookupPicker: (props: LookupPickerProps) => JSX.Element;
 export {};

package/dist/controls/LookupPicker/SelectedValueList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { FunctionComponentElement } from 'react';
 interface SelectedValueListProps {
     list: {
         id: string;
@@ -6,6 +6,9 @@ interface SelectedValueListProps {
     isMultiSelect?: boolean;
     selectedValueTemplate: (value: any) => any;
     onOptionValueDelete: (id: string) => any;
+    getHtmlValue?: (item: {
+        id: string;
+    }) => FunctionComponentElement<any> | null;
 }
 export declare const SelectedValueList: (props: SelectedValueListProps) => JSX.Element;
 export {};

package/dist/controls/LookupPicker/ValueList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { FunctionComponentElement } from 'react';
 interface ValueListProps {
     inputValue: any;
     list: {
@@ -11,6 +11,9 @@ interface ValueListProps {
     isVisible?: boolean;
     onOptionValueSelect: (id: string) => any;
     emptyPlaceholder: string;
+    getHtmlValue?: (item: {
+        id: string;
+    }) => FunctionComponentElement<any> | null;
 }
 export declare const ValueList: (props: ValueListProps) => JSX.Element;
 export {};

package/dist/controls/LookupPicker/ValueListItem.d.ts

@@ -0,0 +1,11 @@
+import { FunctionComponentElement } from 'react';
+interface ValueListItemProps {
+    item: {
+        id: string;
+    };
+    onSelect: (id: string) => any;
+    createDisplayValue: (item: any) => any;
+    htmlValue?: FunctionComponentElement<any> | null;
+}
+export declare const ValueListItem: (props: ValueListItemProps) => JSX.Element;
+export {};

package/dist/controls/Sidebar/LinkItem.d.ts

@@ -10,6 +10,7 @@ interface LinkItem {
     imageUrl: string;
     imageHoverUrl?: string;
     text: string;
+    linkItemWidth?: number;
 }
 export declare const LinkItem: (props: LinkItem) => JSX.Element;
 export {};

package/dist/controls/Sidebar/Section.d.ts

@@ -5,6 +5,7 @@ interface SectionProps {
     itemList: SidebarItem[];
     activeItem?: string;
     currentUrl: string;
+    linkItemWidth?: number;
 }
 export declare const Section: (props: SectionProps) => JSX.Element;
 export {};

package/dist/controls/Sidebar/SectionList.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { SidebarSection } from './SidebarSection';
 interface SectionListProps {
     itemList: SidebarSection[];
     currentUrl: string;
     activeItem?: string;
+    linkItemWidth?: number;
 }
-export declare const SectionList: (props: SectionListProps) => JSX.Element | null;
+export declare const SectionList: React.ForwardRefExoticComponent<SectionListProps & React.RefAttributes<unknown>>;
 export {};

package/dist/controls/Sidebar/Sidebar.d.ts

@@ -8,6 +8,7 @@ interface SidebarProps {
     bottomItemList?: SidebarSection[];
     overflowItemList?: SidebarSection[];
     activeItem?: any;
+    isDifferentOnMobileView?: boolean;
 }
 export declare const Sidebar: (props: SidebarProps) => JSX.Element;
 export {};

package/dist/controls/UserLookupPicker/UserLookupPicker.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+interface UserLookupPickerProps {
+    name?: string;
+    valueList?: {
+        id: string;
+    }[];
+    getValueList?: (value: string) => Promise<any>;
+    selectedValueList?: {
+        id: string;
+    }[];
+    selectedValue?: any;
+    scrollableElement?: any;
+    charCount?: number;
+    filterValueTemplate?: any;
+    selectedValueTemplate?: any;
+    getHtmlValueTemplateProps: (item: {
+        id: string;
+    }) => {
+        userName: string;
+        image?: string;
+    };
+    filterMinLength: number;
+    isMultiSelect?: boolean;
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    isRequired?: boolean;
+    onChange?: (value: any[] | any, name?: string) => void;
+    onBlur?: (e: any, name?: string) => void;
+    label?: string;
+    labelWidth?: number;
+    placeholder?: string;
+    emptyPlaceholder?: string;
+    errorMessage?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const UserLookupPicker: (props: UserLookupPickerProps) => JSX.Element;
+export {};

package/dist/controls/UserProfile/UserProfile.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface UserProfileProps {
+    userName: string;
+    image?: string;
+    dropdownMenuItemList?: {
+        text: string;
+        onClick?: () => any;
+        link?: string;
+    }[];
+}
+export declare const UserProfile: (props: UserProfileProps) => JSX.Element;
+export {};

package/dist/controls/UserProfile/UserProfileMenuItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface UserProfileMenuItemProps {
+    text: string;
+    link?: string;
+    onClick?: () => any;
+    imageUrl?: string;
+    hoverImageUrl?: string;
+    setDropdownState: (state: boolean) => any;
+}
+export declare const UserProfileMenuItem: (props: UserProfileMenuItemProps) => JSX.Element | null;
+export {};