@vitrosoftware/common-ui-ts 1.1.74 → 1.1.77

package/css/std/controls/table-view/table-view-custom-lookup-edit.css

@@ -1,4 +1,4 @@
 .table-view-custom-lookup-edit {
    position: absolute;
    z-index: 10000;
-    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000000;
    line-height: 23px;
    width: 85%;
    display: none;
    height: 32px;
    padding: 0;
    margin: 0px !important;
+    background: #fff;
    display: none;
    height: 32px;
    padding: 0;
    margin: 0px !important;
 
-.table-view-custom-lookup-edit > div > div:first-child {
    min-height: initial;
    height: 32px;
    border: 0;
    border-radius: 0;
    padding: 3px 22px 3px 3px;
    top: 4px !important;
    display: none;
+.table-view-custom-lookup-edit > div > div:first-child {
    min-height: initial;
    height: 32px;
    border: 0;
    border-radius: 0;
    padding: 3px 22px 3px 3px;
    width: auto;
    min-width: 100%;
    top: 4px !important;
    right: 0;
    display: none;

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

@@ -50,4 +50,15 @@
     font-family: 'InterMedium';
     border-top: 1px solid #E4E6EC !important;
     color: #4A556C !important;
+}
+
+:global(.vitro-table-view-button-context) {
+    height: 24px;
+    width: 24px;
+    margin-left: -2px;
+    display: none;
+}
+
+:global(.TWClassSelected .vitro-table-view-button-context) {
+    display: inline-block;
 }

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

@@ -135,8 +135,13 @@
 }
 
 .TWCursorBackground {
-    background: #0085FF !important;
-    opacity: 0.136 !important;
+    background: #006AFF;
+    opacity: 0.047;
+}
+
+.TWClassHoveredCell,
+.TWClassHoveredCellReadOnly {
+    background-color: #F3F8FF;
 }
 
 .TWClassSelected td {
@@ -165,16 +170,24 @@
 .TWFilterMenuMain::before {
     content: '';
     display: block;
-    height: 11px;
-    width: 16px;
-    background-position: center;
-    background-size: 100%;
+    height: 21px;
+    width: 32px;
+    overflow: hidden;
+    background-position: center 0;
+    background-size: 44px 42px;
     background-repeat: no-repeat;
     position: absolute;
-    left: 24px;
-    top: -11px;
+    top: -21px;
     /* 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");
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_dd_778_105705)'%3E%3Cpath d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3CfeBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+}
+
+.TWCellMenuMain::before {
+    left: 12px;
+}
+
+.TWFilterMenuMain::before {
+    left: 16px;
 }
 
 .TWCellMenuMain .TWMenuOuter,
@@ -183,7 +196,7 @@
     margin: 0;
     border-radius: 4px !important;
     border: none !important;
-    min-width: 241px !important;
+    width: 241px !important;
 }
 
 .TWCellMenuMain .TWMenuBody,
@@ -280,6 +293,7 @@
 }
 
 .TWSort4Left, .TWSort4Right,
+.TWSort5Left, .TWSort5Right,
 .TWSort6Left, .TWSort6Right {
     background-repeat: no-repeat !important;
     height: 24px !important;
@@ -303,13 +317,18 @@
 .TWPanelSelect {
     width: 16px;
     height: 16px;
-    margin-top: 2px;
+    margin-top: 3px;
     background-size: 24px;
     /* checkbox-empty.svg URL-encoder for SVG */
     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%3Crect x='4.5' y='4.5' width='15' height='15' rx='1.5' stroke='%23C0CAD5'/%3E%3C/svg%3E%0A");
 }
 
-.TWNE, .TWNER {
+.TWPanelSelectOn {
+    margin-top: 3px;
+}
+
+.TWNE, .TWNER,
+.TWND4, .TWND4R {
     /* tree-closed.svg URL-encoder for SVG */
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 7L14.5 12L9.5 17' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
@@ -320,7 +339,8 @@
 }
 
 .TWNC, .TWNCR,
-.TWNE, .TWNER {
+.TWNE, .TWNER,
+.TWND4, .TWND4R {
     background-size: 100%;
     background-position: right !important;
 }
@@ -455,63 +475,83 @@
 }
 
 .TWFilter12Left, .TWFilter12Right, .TWFilter12Menu {
-     /*ico-tableview-contains-not.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='12,24 12,40 24,32'/%3E%3Cpolygon points='52,40 52,24 40,32'/%3E%3Cpolygon points='28,33.3 36,28 36,20 40,20 40,12 24,12 24,20 28,20'/%3E%3Cpolygon points='36,32 28,37.3 28,44 24,44 24,52 40,52 40,44 36,44'/%3E%3Cpolygon fill='%23ff5b2d' points='48,20 48,16 12,40 12,44'/%3E%3C/g%3E%3C/svg%3E") !important;
+    /* not-contain.svg URL-encoder for SVG*/
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.5L10 4.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M12 16.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M7.7 10.3268C7.83333 10.4038 7.83333 10.5962 7.7 10.6732L5.3 12.0588C5.16667 12.1358 5 12.0396 5 11.8856L5 9.11436C5 8.9604 5.16667 8.86417 5.3 8.94115L7.7 10.3268Z' fill='%234A556C'/%3E%3Cpath d='M12.3 10.3268C12.1667 10.4038 12.1667 10.5962 12.3 10.6732L14.7 12.0588C14.8333 12.1358 15 12.0396 15 11.8856L15 9.11436C15 8.9604 14.8333 8.86417 14.7 8.94115L12.3 10.3268Z' fill='%234A556C'/%3E%3Crect x='3.63664' y='15.9531' width='16' height='2' rx='1' transform='rotate(-45 3.63664 15.9531)' fill='%234A556C' stroke='white'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter11Left, .TWFilter11Right, .TWFilter11Menu {
-     /*ico-tableview-contains.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='40,20 40,12 24,12 24,20 28,20 28,44 24,44 24,52 40,52 40,44 36,44 36,20'/%3E%3Cpolygon points='12,24 12,40 24,32'/%3E%3Cpolygon points='52,40 52,24 40,32'/%3E%3C/g%3E%3C/svg%3E") !important;
+    /* contain.svg URL-encoder for SVG*/
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.5L10 4.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M12 16.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M7.7 10.3268C7.83333 10.4038 7.83333 10.5962 7.7 10.6732L5.3 12.0588C5.16667 12.1358 5 12.0396 5 11.8856L5 9.11436C5 8.9604 5.16667 8.86417 5.3 8.94115L7.7 10.3268Z' fill='%234A556C'/%3E%3Cpath d='M12.3 10.3268C12.1667 10.4038 12.1667 10.5962 12.3 10.6732L14.7 12.0588C14.8333 12.1358 15 12.0396 15 11.8856L15 9.11436C15 8.9604 14.8333 8.86417 14.7 8.94115L12.3 10.3268Z' fill='%234A556C'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter10Left, .TWFilter10Right, .TWFilter10Menu {
-     /*ico-tableview-end-with-not.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='12,24 12,40 24,32'/%3E%3Cpolygon points='28,33.3 36,28 36,20 40,20 40,12 24,12 24,20 28,20'/%3E%3Cpolygon points='36,32 28,37.3 28,44 24,44 24,52 40,52 40,44 36,44'/%3E%3Cpolygon fill='%23ff5b2d' points='48,20 48,16 12,40 12,44'/%3E%3C/g%3E%3C/svg%3E") !important;
+    /* not-end-with.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.5L10 4.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M12 16.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M7.7 10.3268C7.83333 10.4038 7.83333 10.5962 7.7 10.6732L5.3 12.0588C5.16667 12.1358 5 12.0396 5 11.8856L5 9.11436C5 8.9604 5.16667 8.86417 5.3 8.94115L7.7 10.3268Z' fill='%234A556C'/%3E%3Crect x='3.63664' y='15.4531' width='16' height='2' rx='1' transform='rotate(-45 3.63664 15.4531)' fill='%234A556C' stroke='white'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter9Left, .TWFilter9Right, .TWFilter9Menu {
-     /*ico-tableview-end-with.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='44,20 44,12 28,12 28,20 32,20 32,44 28,44 28,52 44,52 44,44 40,44 40,20'/%3E%3Cpolygon fill='%23ff5b2d' points='16,24 16,40 28,32'/%3E%3C/svg%3E") !important;
+    /* end-with.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.5L10 4.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M12 16.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M7.7 10.3268C7.83333 10.4038 7.83333 10.5962 7.7 10.6732L5.3 12.0588C5.16667 12.1358 5 12.0396 5 11.8856L5 9.11436C5 8.9604 5.16667 8.86417 5.3 8.94115L7.7 10.3268Z' fill='%234A556C'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter8Left, .TWFilter8Right, .TWFilter8Menu {
-     /*ico-tableview-start-with-not.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='24,36 32,30.7 32,20 36,20 36,12 20,12 20,20 24,20'/%3E%3Cpolygon points='32,34.7 24,40 24,44 20,44 20,52 36,52 36,44 32,44'/%3E%3Cpolygon points='36,32 36,40 48,32 42,28'/%3E%3Cpolygon fill='%23ff5b2d' points='48,20 48,16 12,40 12,44'/%3E%3C/g%3E%3C/svg%3E") !important;
+    /* not-begin-with.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.5L10 4.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M12 16.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M15.7 10.3268C15.8333 10.4038 15.8333 10.5962 15.7 10.6732L13.3 12.0588C13.1667 12.1358 13 12.0396 13 11.8856L13 9.11436C13 8.9604 13.1667 8.86417 13.3 8.94115L15.7 10.3268Z' fill='%234A556C'/%3E%3Crect x='3.63664' y='15.4531' width='16' height='2' rx='1' transform='rotate(-45 3.63664 15.4531)' fill='%234A556C' stroke='white'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter7Left, .TWFilter7Right, .TWFilter7Menu {
-     /*ico-tableview-start-with.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='36,20 36,12 20,12 20,20 24,20 24,44 20,44 20,52 36,52 36,44 32,44 32,20'/%3E%3Cpolygon fill='%23ff5b2d' points='36,24 36,40 48,32'/%3E%3C/svg%3E") !important;
+    /* begin-with.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 16.5L10 4.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 4.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M12 16.5H8' stroke='%234A556C' stroke-linecap='round'/%3E%3Cpath d='M15.7 10.3268C15.8333 10.4038 15.8333 10.5962 15.7 10.6732L13.3 12.0588C13.1667 12.1358 13 12.0396 13 11.8856L13 9.11436C13 8.9604 13.1667 8.86417 13.3 8.94115L15.7 10.3268Z' fill='%234A556C'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter6Left, .TWFilter6Right, .TWFilter6Menu {
-     /*ico-tableview-more-equal.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='16,12 48,24 48,32 16,44 16,36 37.3,28 16,20'/%3E%3Crect fill='%23ff5b2d' x='16' y='44' width='32' height='8'/%3E%3C/svg%3E") !important;
+    /* more-equal.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 14.5L16 9.49833L4 4.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16 17.5L4 17.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter5Left, .TWFilter5Right, .TWFilter5Menu {
-     /*ico-tableview-more.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='16,12 48,28 48,36 16,52 16,44 40,32 16,20'/%3E%3C/svg%3E") !important;
+    /* more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 15.5L16 10.4983L4 5.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter4Left, .TWFilter4Right, .TWFilter4Menu {
-     /*ico-tableview-less-equal.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='48,12 16,24 16,32 48,44 48,36 26.7,28 48,20'/%3E%3Crect fill='%23ff5b2d' x='16' y='44' width='32' height='8'/%3E%3C/svg%3E") !important;
+    /* less-equal.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 14.5L4 9.49833L16 4.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 17.5L16 17.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter3Left, .TWFilter3Right, .TWFilter3Menu {
-     /*ico-tableview-less.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='48,12 16,28 16,36 48,52 48,44 24,32 48,20'/%3E%3C/svg%3E") !important;
+    /* less.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16 15.5L4 10.4983L16 5.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter2Left, .TWFilter2Right, .TWFilter2Menu {
-     /*ico-tableview-not-equal.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Crect x='12' y='20' width='40' height='8'/%3E%3Crect x='12' y='36' width='40' height='8'/%3E%3C/g%3E%3Cpolygon fill='%23ff5b2d' points='48,12 24,52 16,52 40,12'/%3E%3C/svg%3E") !important;
+    /* not-equal.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8.5H16' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 13.5L16 13.5' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 17L13.5 4' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
 }
 
 .TWFilter1Left, .TWFilter1Right, .TWFilter1Menu {
-     /*ico-tableview-equal.svg URL-encoder for SVG*/ 
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Crect fill='%23ff5b2d' x='12' y='20' width='40' height='8'/%3E%3Crect fill='%23ff5b2d' x='12' y='36' width='40' height='8'/%3E%3C/svg%3E") !important;
+    /* equal.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='21' viewBox='0 0 20 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8H16' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4 13H16' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
+}
+
+
+.TWMenuItem .TWFilter0Menu,
+.TWMenuItem .TWFilter1Menu,
+.TWMenuItem .TWFilter2Menu,
+.TWMenuItem .TWFilter3Menu,
+.TWMenuItem .TWFilter4Menu,
+.TWMenuItem .TWFilter5Menu,
+.TWMenuItem .TWFilter6Menu,
+.TWMenuItem .TWFilter7Menu,
+.TWMenuItem .TWFilter8Menu,
+.TWMenuItem .TWFilter9Menu,
+.TWMenuItem .TWFilter10Menu,
+.TWMenuItem .TWFilter11Menu,
+.TWMenuItem .TWFilter12Menu {
+    width: 20px;
+    height: 20px;
+    background-repeat: no-repeat;
+    background-position:  center;
 }
 
 .TWNoDataRow {
@@ -824,6 +864,34 @@
     opacity: 0.2;
 }
 
+.TWDefaultsRight.TWClassReadOnly {
+    background-image: none;
+}
+
+.TWClassHoveredCellHeader,
+.TWCellFilter.TWClassHoveredCell {
+    background-color: #DCEEFF;
+}
+
+.TWClassHoveredCell,
+.TWClassHoveredCellReadOnly,
+.TWClassHoveredCellPanel {
+    background-color: #F3F8FF;
+}
+
+.TWCell.TWRightHtml {
+    padding: 0px !important;
+    pointer-events: none;
+}
+
+.TWCell.TWRightHtml {
+    pointer-events: none;
+}
+
+.TWClassSelected .TWCell.TWRightHtml {
+    pointer-events: all;
+}
+
 .TWFilterMenuHeader {
     padding: 0 !important;
     margin: 0 0 0 8px !important;

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

@@ -83,7 +83,7 @@
 .vitro-label {
     padding: 0 6px;
     background: #fff;
-    z-index: 1000;
+    z-index: 1;
     position: absolute;
     left: 10px;
     top: -10px;

package/css/std/controls/tooltip/tooltip.css

@@ -1,6 +1,7 @@
 .vitro-tooltip {
     display: none !important;
-    opacity: 1;
+    opacity: 1 !important;
+    z-index: 10000 !important;
 }
 
 .vitro-tooltip[style*='transform'] {

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

@@ -4,7 +4,7 @@
     position: absolute;
     width: 241px;
     height: 96px;
-    z-index: 1000;
+    z-index: 1;
 }
 
 .vitro-uploader:global(.vitro-dropzone-active) {

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

@@ -34,31 +34,33 @@
     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);
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
     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%;
+    height: 21px;
+    width: 32px;
+    overflow: hidden;
+    background-position: center 0;
+    background-size: 44px 42px;
     background-repeat: no-repeat;
     position: absolute;
-    right: 8px;
-    top: -11px;
+    top: -21px;
+    right: 0;
     /* 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");
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_dd_778_105705)'%3E%3Cpath d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='4'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset/%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/%3E%3CfeBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
 }
 
 .vitro-dropdown-item {
     cursor: pointer;
     background: #fff;
+    color: #222D44;
     padding: 8px 12px;
     font-size: 14px;
-    line-height: 16px;
+    line-height: 21px;
 }
 
 .vitro-dropdown-item:first-child {
@@ -73,7 +75,7 @@
 
 .vitro-dropdown-item:hover,
 .vitro-dropdown-item:active {
-    background: #DCEEFF;
+    background: #F3F8FF;
 }
 
 .vitro-avatar {

package/css/third-party/jquery-growl/jquery.growl.css

@@ -0,0 +1,96 @@
+/* jQuery Growl
+ * Copyright 2015 Kevin Sylvestre
+ * 1.3.5
+ */
+.ontop, #growls-default, #growls-tl, #growls-tr, #growls-bl, #growls-br, #growls-tc, #growls-bc, #growls-cc, #growls-cl, #growls-cr {
+  z-index: 50000;
+  position: fixed; }
+
+#growls-default {
+  top: 10px;
+  right: 10px; }
+#growls-tl {
+  top: 10px;
+  left: 10px; }
+#growls-tr {
+  top: 10px;
+  right: 10px; }
+#growls-bl {
+  bottom: 10px;
+  left: 10px; }
+#growls-br {
+  bottom: 10px;
+  right: 10px; }
+#growls-tc {
+  top: 30px;
+  right: 10px;
+  left: 10px; }
+#growls-bc {
+  bottom: 10px;
+  right: 10px;
+  left: 10px; }
+#growls-cc {
+  top: 50%;
+  left: 50%;
+  margin-left: -125px; }
+#growls-cl {
+  top: 50%;
+  left: 10px; }
+#growls-cr {
+  top: 50%;
+  right: 10px; }
+#growls-tc .growl, #growls-bc .growl {
+  margin-left: auto;
+  margin-right: auto; }
+
+.growl {
+  opacity: 0.8;
+  filter: alpha(opacity=80);
+  position: relative;
+  border-radius: 4px;
+  -webkit-transition: all 0.4s ease-in-out;
+  -moz-transition: all 0.4s ease-in-out;
+  transition: all 0.4s ease-in-out; }
+  .growl.growl-incoming {
+    opacity: 0;
+    filter: alpha(opacity=0); }
+  .growl.growl-outgoing {
+    opacity: 0;
+    filter: alpha(opacity=0); }
+  .growl.growl-small {
+    width: 200px;
+    padding: 5px;
+    margin: 5px; }
+  .growl.growl-medium {
+    width: 250px;
+    padding: 10px;
+    margin: 10px; }
+  .growl.growl-large {
+    width: 600px;
+    padding: 15px;
+    margin: 15px; }
+  .growl.growl-default {
+    color: #FFF;
+    background: #7f8c8d; }
+  .growl.growl-error {
+    color: #FFF;
+    background: #C0392B; }
+  .growl.growl-notice {
+    color: #FFF;
+    background: #2ECC71; }
+  .growl.growl-warning {
+    color: #FFF;
+    background: #F39C12; }
+  .growl .growl-close {
+    cursor: pointer;
+    float: right;
+    font-size: 14px;
+    line-height: 18px;
+    font-weight: normal;
+    font-family: helvetica, verdana, sans-serif; }
+  .growl .growl-title {
+    font-size: 18px;
+    line-height: 24px; }
+  .growl .growl-message {
+    font-size: 14px;
+    line-height: 18px; }