@vitrosoftware/common-ui-ts 1.1.21 → 1.1.24

package/css/common.css

@@ -1,4 +1,5 @@
 @import url('@vitrosoftware/common-ui-ts/css/third-party/kendo/kendo.css');
+@import url('@vitrosoftware/common-ui-ts/css/third-party/perfect-scrollbar/perfect-scrollbar.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jstree/style.min.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.min.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.structure.css');

package/css/std/controls/breadcrumbs/breadcrumbs.css

@@ -3,6 +3,7 @@
     flex-direction: column;
     position: relative;
     margin-bottom: 16px;
+    height: 24px;
 }
 
 .vitro-breadcrumbs-list-wrap {

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

@@ -1,5 +1,8 @@
 .vitro-selected-item {
-    display: inline;
+    display: inline-block;
+    width: fit-content;
     margin: 0 6px 0 0;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

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

@@ -19,6 +19,7 @@
 }
 
 .vitro-value-list .vitro-item {
+    width: 100%;
     padding: 8px 12px;
     cursor: pointer;
     border-radius: 0px;

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

@@ -99,7 +99,7 @@
     border: none;
     background: transparent;
     flex: 1 1;
-    min-width: 100px;
+    min-width: 30px;
     color: #222D44;
     font-size: 14px;
     line-height: 16px;

package/css/std/controls/scrollbar/scrollbar.css

@@ -0,0 +1,54 @@
+.vitro-scrollbar-content {
+    height: 100%;
+    width: 100%;
+}
+
+:global(.ps) {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+:global(.ps__rail-y) {
+    background-color: #fff !important;
+    width: 12px !important;
+    border-left: 1px solid #F7F9FC;
+    border-top: 1px solid #F7F9FC;
+    opacity: 1 !important;
+}
+
+:global(.ps__rail-x) {
+    background-color: #fff !important;
+    height: 12px !important;
+    border-top: 1px solid #F7F9FC;
+    opacity: 1 !important;
+}
+
+:global(.ps__thumb-x), :global(.ps__thumb-y) {
+    background-color: #E4E6EC !important;
+    border-radius: 4px;
+}
+
+:global(.ps__thumb-y) {
+    width: 4px !important;
+    right: 3px !important;
+}
+
+:global(.ps__thumb-x) {
+    height: 4px !important;
+    top: 3px !important;
+}
+
+:global(.ps .ps__rail-x):hover, :global(.ps .ps__rail-y):hover, :global(.ps .ps__rail-x):focus, 
+:global(.ps .ps__rail-y):focus, :global(.ps .ps__rail-x.ps--clicking), :global(.ps .ps__rail-y.ps--clicking) {
+    background-color: #fff;
+    opacity: 1;
+}
+
+:global(.ps__rail-y:hover > .ps__thumb-y), :global(.ps__rail-y:focus > .ps__thumb-y), :global(.ps__rail-y.ps--clicking .ps__thumb-y) {
+    background-color: #E4E6EC;
+}
+
+:global(.ps__rail-x:hover > .ps__thumb-x), :global(.ps__rail-x:focus > .ps__thumb-x), :global(.ps__rail-x.ps--clicking .ps__thumb-x) {
+    background-color: #E4E6EC;
+}

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

@@ -132,6 +132,10 @@
     opacity: 0.136 !important;
 }
 
+.TWClassSelected td {
+    background-color: #DCEEFF !important;
+}
+
 .TWMenuMain {
     width: 241px !important;
     margin-top: 24px !important;

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

@@ -1,5 +1,5 @@
 :global(#TreeView) {
-    height: 100%;
+    height: calc(100% - 36px);
     flex: 1 1;
 }
 
@@ -92,6 +92,7 @@
     height: 32px !important;
     line-height: 32px !important;
     background-position: center !important;
+    background-size: 100% !important;
     margin-right: 4px;
 }
 

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

@@ -2,7 +2,6 @@
     bottom: 24px;
     right: 24px;
     position: absolute;
-    transition: all 0.1s ease;
     width: 241px;
     height: 96px;
     z-index: 10000000000000;
@@ -337,7 +336,6 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    transition: all 1s ease;
 }
 
 .vitro-uploader:global(.vitro-dropzone-active) .vitro-drop-zone {
@@ -473,3 +471,7 @@
     position: unset !important;
 }
 
+:global(.vitro-file-icon) {
+    width: 24px;
+    height: 24px;
+}

package/css/third-party/perfect-scrollbar/perfect-scrollbar.css

@@ -0,0 +1,116 @@
+/*
+ * Container style
+ */
+.ps {
+    overflow: hidden !important;
+    overflow-anchor: none;
+    -ms-overflow-style: none;
+    touch-action: auto;
+    -ms-touch-action: auto;
+}
+
+/*
+ * Scrollbar rail styles
+ */
+.ps__rail-x {
+    display: none;
+    opacity: 0;
+    transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    height: 15px;
+    /* there must be 'bottom' or 'top' for ps__rail-x */
+    bottom: 0px;
+    /* please don't change 'position' */
+    position: absolute;
+}
+
+.ps__rail-y {
+    display: none;
+    opacity: 0;
+    transition: background-color .2s linear, opacity .2s linear;
+    -webkit-transition: background-color .2s linear, opacity .2s linear;
+    width: 15px;
+    /* there must be 'right' or 'left' for ps__rail-y */
+    right: 0;
+    /* please don't change 'position' */
+    position: absolute;
+}
+
+.ps--active-x > .ps__rail-x,
+.ps--active-y > .ps__rail-y {
+    display: block;
+    background-color: transparent;
+}
+
+.ps:hover > .ps__rail-x,
+.ps:hover > .ps__rail-y,
+.ps--focus > .ps__rail-x,
+.ps--focus > .ps__rail-y,
+.ps--scrolling-x > .ps__rail-x,
+.ps--scrolling-y > .ps__rail-y {
+    opacity: 0.6;
+}
+
+.ps .ps__rail-x:hover,
+.ps .ps__rail-y:hover,
+.ps .ps__rail-x:focus,
+.ps .ps__rail-y:focus,
+.ps .ps__rail-x.ps--clicking,
+.ps .ps__rail-y.ps--clicking {
+    background-color: #eee;
+    opacity: 0.9;
+}
+
+/*
+ * Scrollbar thumb styles
+ */
+.ps__thumb-x {
+    background-color: #aaa;
+    border-radius: 6px;
+    transition: background-color .2s linear, height .2s ease-in-out;
+    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
+    height: 6px;
+    /* there must be 'bottom' for ps__thumb-x */
+    bottom: 2px;
+    /* please don't change 'position' */
+    position: absolute;
+}
+
+.ps__thumb-y {
+    background-color: #aaa;
+    border-radius: 6px;
+    transition: background-color .2s linear, width .2s ease-in-out;
+    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
+    width: 6px;
+    /* there must be 'right' for ps__thumb-y */
+    right: 2px;
+    /* please don't change 'position' */
+    position: absolute;
+}
+
+.ps__rail-x:hover > .ps__thumb-x,
+.ps__rail-x:focus > .ps__thumb-x,
+.ps__rail-x.ps--clicking .ps__thumb-x {
+    background-color: #999;
+    height: 11px;
+}
+
+.ps__rail-y:hover > .ps__thumb-y,
+.ps__rail-y:focus > .ps__thumb-y,
+.ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: #999;
+    width: 11px;
+}
+
+/* MS supports */
+@supports (-ms-overflow-style: none) {
+    .ps {
+        overflow: auto !important;
+    }
+}
+
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+    .ps {
+        overflow: auto !important;
+    }
+}

package/dist/constants/Event.d.ts

@@ -6,5 +6,6 @@ export declare enum EVENT {
     DRAGOVER = "dragover",
     DRAGLEAVE = "dragleave",
     HISTORY_UPDATE = "vitro.history.update",
-    HISTORY_CHANGED = "vitro.history.changed"
+    HISTORY_CHANGED = "vitro.history.changed",
+    DROP = "drop"
 }

package/dist/controls/ScrollBar/ScrollBar.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+interface ScrollBarProps {
+    isHideScrollX?: boolean;
+    isFocusOnScroll?: boolean;
+    onInit?: (container: any) => any;
+    children: React.ReactNode;
+}
+export declare const ScrollBar: (props: ScrollBarProps) => JSX.Element;
+export {};

package/dist/controls/TelerikUploader/TelerikUploaderContextImpl.d.ts

@@ -31,6 +31,7 @@ export declare class TelerikUploaderContextImpl implements TelerikUploaderContex
     private getProgressInfo;
     addFile(): void;
     setAthorizationToken(token: string): void;
+    private setFileImage;
     private setProgressBar;
     private setFileProgress;
     private initOnDrop;

package/dist/controls/TelerikUploader/TelerikUploaderSettings.d.ts

@@ -10,4 +10,5 @@ export interface TelerikUploaderSettings {
     isDirectoryDrop: boolean;
     isAutoReset?: boolean;
     resetDurationMs?: number;
+    getFileImage?: (name: string) => string;
 }

package/dist/index.css

@@ -1,4 +1,5 @@
 @import url('@vitrosoftware/common-ui-ts/css/third-party/kendo/kendo.css');
+@import url('@vitrosoftware/common-ui-ts/css/third-party/perfect-scrollbar/perfect-scrollbar.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jstree/style.min.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.min.css');
 @import url('@vitrosoftware/common-ui-ts/css/third-party/jquery-ui/jquery-ui.structure.css');
@@ -48,11 +49,66 @@
         align-items: flex-start;
     }
 }
+._scrollbar_vitro-scrollbar-content_3HXSt5u {
+    height: 100%;
+    width: 100%;
+}
+
+.ps {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.ps__rail-y {
+    background-color: #fff !important;
+    width: 12px !important;
+    border-left: 1px solid #F7F9FC;
+    border-top: 1px solid #F7F9FC;
+    opacity: 1 !important;
+}
+
+.ps__rail-x {
+    background-color: #fff !important;
+    height: 12px !important;
+    border-top: 1px solid #F7F9FC;
+    opacity: 1 !important;
+}
+
+.ps__thumb-x, .ps__thumb-y {
+    background-color: #E4E6EC !important;
+    border-radius: 4px;
+}
+
+.ps__thumb-y {
+    width: 4px !important;
+    right: 3px !important;
+}
+
+.ps__thumb-x {
+    height: 4px !important;
+    top: 3px !important;
+}
+
+.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, 
+.ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
+    background-color: #fff;
+    opacity: 1;
+}
+
+.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
+    background-color: #E4E6EC;
+}
+
+.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
+    background-color: #E4E6EC;
+}
 ._breadcrumbs_vitro-breadcrumbs_3r4NcQY {
     display: flex;
     flex-direction: column;
     position: relative;
     margin-bottom: 16px;
+    height: 24px;
 }
 
 ._breadcrumbs_vitro-breadcrumbs-list-wrap_1_JBrw0 {
@@ -283,7 +339,7 @@
 }
 
 #TreeView {
-    height: 100%;
+    height: calc(100% - 36px);
     flex: 1 1;
 }
 
@@ -378,6 +434,7 @@
     height: 32px !important;
     line-height: 32px !important;
     background-position: center !important;
+    background-size: 100% !important;
     margin-right: 4px;
 }
 
@@ -445,7 +502,6 @@
     bottom: 24px;
     right: 24px;
     position: absolute;
-    transition: all 0.1s ease;
     width: 241px;
     height: 96px;
     z-index: 10000000000000;
@@ -780,7 +836,6 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    transition: all 1s ease;
 }
 
 ._uploader_vitro-uploader_237vX7T.vitro-dropzone-active ._uploader_vitro-drop-zone_3w2dluc {
@@ -917,7 +972,10 @@
     position: unset !important;
 }
 
-
+.vitro-file-icon {
+    width: 24px;
+    height: 24px;
+}
 .vitro-display-none {
     display: none;
 }
@@ -2905,9 +2963,13 @@
     line-height: 21px;
 }
 ._lookup-picker-selected-item_vitro-selected-item_hw-euth {
-    display: inline;
+    display: inline-block;
+    width: -moz-fit-content;
+    width: fit-content;
     margin: 0 6px 0 0;
     white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 ._lookup-picker-html-value_vitro-item-html-value_2QBoTey {
@@ -2941,6 +3003,7 @@
 }
 
 ._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u {
+    width: 100%;
     padding: 8px 12px;
     cursor: pointer;
     border-radius: 0px;
@@ -3098,7 +3161,7 @@
     border: none;
     background: transparent;
     flex: 1 1;
-    min-width: 100px;
+    min-width: 30px;
     color: #222D44;
     font-size: 14px;
     line-height: 16px;

package/dist/index.d.ts

@@ -60,6 +60,7 @@ import { Activity } from './controls/Activity/Activity';
 import { ActivityItem, ActivityItemProps } from './controls/ActivityItem/ActivityItem';
 import { Icon } from './controls/Icon/Icon';
 import { EVENT } from './constants/Event';
+import { ScrollBar } from './controls/ScrollBar/ScrollBar';
 export { Breadcrumbs };
 export { TopLevelMenu };
 export { TreeView, TreeViewContext, TREE_VIEW };
@@ -94,3 +95,4 @@ export { Activity };
 export { ActivityItem, ActivityItemProps };
 export { Icon };
 export { EVENT };
+export { ScrollBar };