@vitrosoftware/common-ui-ts 1.1.70 → 1.1.72

package/css/std/controls/pdf-viewer/zoom.css

@@ -11,4 +11,8 @@ canvas.zoom {
 
 canvas.zoom.loaded {
     opacity: 1;
+}
+
+canvas.zoom.loaded.transparent {
+    opacity: 0;
 }

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

@@ -0,0 +1,112 @@
+.vitro-route-item {
+    display: flex;
+    width: 100%;
+}
+
+.vitro-route-item-body {
+    margin-bottom: 16px;
+}
+
+.vitro-route-item-content {
+    width: 100%;
+}
+
+.vitro-button-collapse,
+.vitro-button-expand,
+.vitro-button-hide-comment,
+.vitro-button-show-comment {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    background-position: center;
+    background-size: 100%;
+    border: none;
+    background-color: transparent;
+}
+
+.vitro-button-collapse,
+.vitro-button-expand {
+    margin-right: 12px;
+}
+
+.vitro-button-collapse {
+    /* collapse-bottom.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_119831)'%3E%3Cpath id='Vector' d='M7 10.5L12 15.5L17 10.5' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.vitro-button-expand {
+    /* collapse-right.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_118517)'%3E%3Cpath id='Vector' d='M10.5 17L15.5 12L10.5 7' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.vitro-button-hide-comment {
+    /* comment-hidden.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='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 2L2 22' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-show-comment {
+    /* comment.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='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-avatar {
+    margin-right: 8px;
+}
+
+.vitro-date {
+    color: #222D44;
+    font-size: 14px;
+    font-family: 'InterMedium';
+    margin-left: 8px;
+}
+
+.vitro-route-item-header {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+    margin-bottom: 4px;
+}
+
+.vitro-route-item-header > div,
+.vitro-route-item-header > div > div {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-route-item-header > div:last-child > div {
+    border-radius: 4px;
+    background: #F7F9FC;
+    padding: 4px 8px;
+    margin-left: 12px;
+}
+
+.vitro-route-item-header > div:last-child div a,
+.vitro-route-item-header > div:last-child div a:hover,
+.vitro-route-item-header > div:last-child div a:visited {
+    text-decoration: none;
+    color: #326AD6;
+}
+
+.vitro-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.vitro-comment {
+    padding: 4px 8px;
+    margin-top: 4px;
+    border-radius: 4px;
+    background: #F7F9FC;
+    color: #222D44;
+    font-size: 14px;
+    width: 100%;
+}
+
+.vitro-status-color {
+    width: 8px;
+    height: 8px;
+    min-width: 8px;
+    margin-right: 8px;
+    border-radius: 50%;
+}

package/css/std/controls/splitter/splitter.css

@@ -0,0 +1,71 @@
+:global(.splitter) {
+    height: 100% !important;
+    position: static;
+    display: flex;
+    align-content: flex-start;
+    user-select: text;
+    flex: 1 1 !important;
+    background: #fff;
+}
+
+:global(.splitter):first-child {
+    border-radius: 4px 4px 0 0;
+    overflow: hidden;
+}
+
+:global(.handle-bar) {
+    cursor: col-resize;
+    width: 2px !important;
+    min-width: 2px !important;
+    background: #E4E6EC;
+}
+
+:global(.handle-bar):active, :global(.handle-bar):hover, :global(.handle-bar.handle-bar_clone) {
+    background-color: #F5F6FA !important;
+}
+
+:global(.handle-bar_drag) {
+    background: transparent;
+    position: relative;
+    height: 30px !important;
+    width: 6px !important;
+    border: none !important;
+}
+
+:global(.handle-bar_drag)::after {
+    content: '';
+    background-position: center;
+    height: 30px;
+    width: 6px;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: 0;
+}
+
+:global(.handle-bar_drag)::after {
+    left: 3px;
+    /* splitter-handle-bar-drag.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Spliter'%3E%3Cpath id='Rectangle 4359' d='M0 0H4.5C5.32843 0 6 0.671573 6 1.5V28.5C6 29.3284 5.32843 30 4.5 30H0V0Z' fill='%23326AD6'/%3E%3Cpath id='Polygon 3' d='M1.5 12.911C1.5 12.6251 1.80945 12.4464 2.05701 12.5894L5.12058 14.3581C5.36814 14.501 5.36814 14.8584 5.12058 15.0013L2.05701 16.7701C1.80945 16.913 1.5 16.7343 1.5 16.4485L1.5 12.911Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+:global(.pane.vertical.primary) {
+    padding: 16px 0 0 12px;
+    display: flex;
+    flex-direction: column;
+}
+
+:global(.vitro-splitter-content) {
+    padding: 4px 0 0 12px;
+    height: calc(100%);
+    overflow: hidden;
+    flex-direction: column;
+    display: flex;
+}
+
+@media (max-width: 800px) {
+    :global(.pane.vertical.primary) {
+        padding: 12px 0 0 16px;
+        flex-direction: column;
+        flex-wrap: nowrap;
+    }
+}

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

@@ -158,7 +158,7 @@
 
 .TWFilterMenuMain {
     margin-top: 8px !important;
-    margin-left: -22px;
+    margin-left: -16px;
 }
 
 .TWCellMenuMain::before,
@@ -573,7 +573,7 @@
 }
 
 .TWEditInput {
-    background: white;
+    background: #DCEEFF;
 }
 
 .TWCellBase.vitro-table-view-deleted {
@@ -581,7 +581,7 @@
 }
 
 .TWCell .vitro-flex > .vitro-icon {
-    margin-right: 4px;
+    margin-right: 4px !important;
     line-height: 24px;
     width: 24px;
     height: 24px;
@@ -590,6 +590,7 @@
 .TWCell .vitro-flex > .vitro-avatar {
     width: 28px;
     height: 28px;
+    min-width: 28px;
     line-height: 28px;
     font-size: 14px;
     margin-right: 4px;
@@ -821,4 +822,153 @@
 .GridDisabled {
     background: #222D44;
     opacity: 0.2;
+}
+
+.TWFilterMenuHeader {
+    padding: 0 !important;
+    margin: 0 0 0 8px !important;
+    box-shadow: none;
+    background: transparent;
+}
+
+.TWFilterAllMenu {
+    background-position: center !important;
+    width: 16px !important;
+    height: 16px !important;
+    background-color: #fff;
+    border-radius: 2px;
+    margin-top: 1px;
+}
+
+.TWCellFilter {
+    padding: 0 0 0 32px !important;
+    background-position: 8px center !important;
+    font-size: 12px;
+}
+
+.TWEditFilterInput {
+    background-color: #DCEEFF;
+    font-size: 12px;
+}
+
+.TWCellFilter.TWFilter1Value,
+.TWCellFilter.TWFilter2Value,
+.TWCellFilter.TWFilter3Value,
+.TWCellFilter.TWFilter4Value,
+.TWCellFilter.TWFilter5Value,
+.TWCellFilter.TWFilter6Value,
+.TWCellFilter.TWFilter7Value,
+.TWCellFilter.TWFilter8Value,
+.TWCellFilter.TWFilter9Value,
+.TWCellFilter.TWFilter10Value,
+.TWCellFilter.TWFilter11Value,
+.TWCellFilter.TWFilter12Value,
+.TWCellFilter.TWOverflowDisable {
+    background-color: #DCEEFF;
+}
+
+.TWIconRight.TWCellFilter {
+    background-position: center !important;
+}
+
+.TWIconRight.TWCellFilter {
+    background-color: #DCEEFF;
+}
+
+.TWFilter0Value + .TWIconRight {
+    background-color: #F7F9FC;
+}
+
+.TWFilterAllMenu.TWFilter0Menu,
+.TWHiddenValue.TWFilter0Value {
+    /* filter-cancel.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect width='16' height='16' rx='2' fill='white'/%3E%3Cpath d='M4.50513 11.4955L8.00046 8.00022L11.4958 11.4955M11.4958 4.50488L7.99979 8.00022L4.50513 4.50488' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
+}
+
+.TWFilterAllMenu.TWFilter1Menu, .TWFilter1Value {
+    /* filter-equal.svg URL-encoder for SVG */
+    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%3Crect width='16' height='16' rx='2' fill='white'/%3E%3Cpath d='M3.19922 6H12.7992' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.19922 10H12.7992' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter2Menu, .TWFilter2Value {
+    /* filter-not-equal.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.796875' width='16' height='16' rx='2' fill='white'/%3E%3Cpath d='M3.19922 7.20312H12.7992' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.19922 11.2031L12.7992 11.2031' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.19922 14.0016L10.7992 3.60156' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter3Menu, .TWFilter3Value {
+    /* filter-math-lower.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.601562' width='16' height='16' rx='2' fill='white'/%3E%3Cpath d='M12.7992 12.6016L3.19922 8.60022L12.7992 4.60156' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter4Menu, .TWFilter4Value {
+    /* filter-math-equal-lower.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.398438' width='16' height='16' rx='2' fill='white'/%3E%3Cpath d='M12.7992 11.3984L3.19922 7.3971L12.7992 3.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3.19922 13.3984L12.7992 13.3984' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter5Menu, .TWFilter5Value {
+    /* filter-math-more.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='2' transform='matrix(-1 0 0 1 16 0.203125)' fill='white'/%3E%3Cpath d='M3.20078 12.2031L12.8008 8.20179L3.20078 4.20312' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter6Menu, .TWFilter6Value {
+    /* filter-math-equal-more.svg URL-encoder for SVG */
+    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%3Crect width='16' height='16' rx='2' transform='matrix(-1 0 0 1 16 0)' fill='white'/%3E%3Cpath d='M3.20078 11L12.8008 6.99866L3.20078 3' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12.8008 13L3.20078 13' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter7Menu, .TWFilter7Value {
+    /* filter-start-with.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='2' transform='matrix(-1 0 0 1 16 0.796875)' fill='white'/%3E%3Cpath d='M7.99609 13.6016L7.99609 4.00156' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.59844 4H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M9.59844 13.6016H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M12.5608 8.66456C12.6674 8.72614 12.6674 8.88011 12.5608 8.94169L10.6408 10.0502C10.5341 10.1118 10.4008 10.0348 10.4008 9.91164L10.4008 7.69461C10.4008 7.57144 10.5341 7.49446 10.6408 7.55605L12.5608 8.66456Z' fill='%234A556C'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter8Menu, .TWFilter8Value {
+    /* filter-not-start-with.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='2' transform='matrix(-1 0 0 1 16 0.601562)' fill='white'/%3E%3Cpath d='M7.99609 13.4062L7.99609 3.80625' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.59844 3.80469H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M9.59844 13.4062H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M12.5608 8.46144C12.6674 8.52302 12.6674 8.67698 12.5608 8.73856L10.6408 9.84708C10.5341 9.90866 10.4008 9.83168 10.4008 9.70851L10.4008 7.49149C10.4008 7.36832 10.5341 7.29134 10.6408 7.35292L12.5608 8.46144Z' fill='%234A556C'/%3E%3Crect x='2.91088' y='12.5625' width='12.8' height='1.6' rx='0.8' transform='rotate(-45 2.91088 12.5625)' fill='%234A556C' stroke='white' stroke-width='0.8'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter9Menu, .TWFilter9Value {
+    /* filter-ends-in.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='2' transform='matrix(-1 0 0 1 16 0.398438)' fill='white'/%3E%3Cpath d='M7.99609 13.1953L7.99609 3.59531' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.59844 3.59375H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M9.59844 13.1953H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M6.15844 8.25831C6.2651 8.31989 6.2651 8.47386 6.15844 8.53544L4.23844 9.64395C4.13177 9.70554 3.99844 9.62856 3.99844 9.50539L3.99844 7.28836C3.99844 7.16519 4.13177 7.08821 4.23844 7.1498L6.15844 8.25831Z' fill='%234A556C'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter10Menu, .TWFilter10Value {
+    /* filter-not-edns-in.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='2' transform='matrix(-1 0 0 1 16 0.203125)' fill='white'/%3E%3Cpath d='M7.99609 13.0078L7.99609 3.40781' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.59844 3.40625H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M9.59844 13.0078H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M6.15844 8.063C6.2651 8.12458 6.2651 8.27854 6.15844 8.34013L4.23844 9.44864C4.13177 9.51022 3.99844 9.43324 3.99844 9.31007L3.99844 7.09305C3.99844 6.96988 4.13177 6.8929 4.23844 6.95449L6.15844 8.063Z' fill='%234A556C'/%3E%3Crect x='2.91088' y='12.1641' width='12.8' height='1.6' rx='0.8' transform='rotate(-45 2.91088 12.1641)' fill='%234A556C' stroke='white' stroke-width='0.8'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter11Menu, .TWFilter11Value {
+    /* filter-contains.svg URL-encoder for SVG */
+    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%3Crect width='16' height='16' rx='2' transform='matrix(-1 0 0 1 16 0)' fill='white'/%3E%3Cpath d='M7.99609 12.7969L7.99609 3.19687' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.59844 3.19531H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M9.59844 12.7969H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M6.16234 7.85987C6.26901 7.92146 6.26901 8.07542 6.16234 8.137L4.24234 9.24551C4.13568 9.3071 4.00234 9.23012 4.00234 9.10695L4.00234 6.88993C4.00234 6.76676 4.13568 6.68978 4.24234 6.75136L6.16234 7.85987Z' fill='%234A556C'/%3E%3Cpath d='M9.84156 7.85987C9.7349 7.92146 9.7349 8.07542 9.84156 8.137L11.7616 9.24551C11.8682 9.3071 12.0016 9.23012 12.0016 9.10695L12.0016 6.88993C12.0016 6.76676 11.8682 6.68978 11.7616 6.75136L9.84156 7.85987Z' fill='%234A556C'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWFilterAllMenu.TWFilter12Menu, .TWFilter12Value {
+    /* filter-not-contains.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='2' transform='matrix(-1 0 0 1 16 0.796875)' fill='white'/%3E%3Cpath d='M7.99609 13.6016L7.99609 4.00156' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M9.59844 4H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M9.59844 13.6016H6.39844' stroke='%234A556C' stroke-width='0.8' stroke-linecap='round'/%3E%3Cpath d='M6.16234 8.66456C6.26901 8.72614 6.26901 8.88011 6.16234 8.94169L4.24234 10.0502C4.13568 10.1118 4.00234 10.0348 4.00234 9.91164L4.00234 7.69461C4.00234 7.57144 4.13568 7.49446 4.24234 7.55605L6.16234 8.66456Z' fill='%234A556C'/%3E%3Cpath d='M9.84156 8.66456C9.7349 8.72614 9.7349 8.88011 9.84156 8.94169L11.7616 10.0502C11.8682 10.1118 12.0016 10.0348 12.0016 9.91164L12.0016 7.69461C12.0016 7.57144 11.8682 7.49446 11.7616 7.55605L9.84156 8.66456Z' fill='%234A556C'/%3E%3Crect x='2.91088' y='13.1641' width='12.8' height='1.6' rx='0.8' transform='rotate(-45 2.91088 13.1641)' fill='%234A556C' stroke='white' stroke-width='0.8'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWMenuFocus {
+    background: #fff;
+}
+
+.TWTipOuter {
+    background-color: #4A556C;
+    opacity: 1;
+    border-radius: 4px;
+    padding: 8px 10px;
+    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
+}
+
+.TWTipBody > div {
+    color: #fff !important;
+}
+
+.TWTipMain.TWTipMainTop::after {
+    content: '';
+    display: block;
+    position: absolute;
+    height: 20px;
+    width: 42px;
+    left: calc(50% - 21px);
+    transform: rotate(180deg);
+    background-position: center -1px;
+    background-image: url("data:image/svg+xml,%3Csvg width='44' height='42' 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='%234A556C'/%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");
 }

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

@@ -4,6 +4,10 @@
     position: relative;
 }
 
+.vitro-display-none {
+    display: none;
+}
+
 .vitro-button-copy {
     height: 20px;
     width: 20px;
@@ -22,7 +26,7 @@
 .vitro-control-container {
     position: relative;
     z-index: 1100;
-    width: 100% !important;
+    width: 100%;
 }
 
 .vitro-control input {
@@ -131,7 +135,7 @@
     width: 100% !important;
 }
 
-.vitro-control :global(.k-animation-container) {
+.vitro-control-container :global(.k-animation-container) {
     top: 6px !important;
     left: unset !important;
     right: 0 !important;
@@ -139,7 +143,15 @@
     min-width: unset !important;
 }
 
-.vitro-control :global(.k-popup) {
+.vitro-control-container :global(.k-animation-container) {
+    position: initial !important;
+}
+
+.vitro-control .vitro-control-container :global(.k-animation-container) {
+    position: absolute !important;
+}
+
+.vitro-control-container :global(.k-popup) {
     box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12) !important;
     background-color: #fff;
     border-radius: 4px !important;
@@ -147,12 +159,12 @@
     width: 100% !important;
 }
 
-.vitro-control :global(.k-picker-wrap) {
+.vitro-control-container :global(.k-picker-wrap) {
     border-radius: 4px !important;
     border: 1px solid #C0CAD5 !important;
 }
 
-.vitro-control :global(.k-i-clock) {
+.vitro-control-container :global(.k-i-clock) {
     height: 16px;
     width: 16px;
     background-size: 100%;
@@ -161,11 +173,11 @@
     background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='clock'%3E%3Cpath id='Vector' d='M7.99888 15.4275C12.1016 15.4275 15.4275 12.1016 15.4275 7.99888C15.4275 3.8962 12.1016 0.570312 7.99888 0.570312C3.8962 0.570312 0.570312 3.8962 0.570312 7.99888C0.570312 12.1016 3.8962 15.4275 7.99888 15.4275Z' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M7.42969 3.42969V9.14397L10.8583 10.8583' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
-.vitro-control :global(.k-i-clock)::before {
+.vitro-control-container :global(.k-i-clock)::before {
     display: none;
 }
 
-.vitro-control :global(.k-picker-wrap > .k-select) {
+.vitro-control-container :global(.k-picker-wrap > .k-select) {
     background: transparent !important;
     margin-right: 16px;
     width: 20px;
@@ -173,12 +185,12 @@
     align-self: center;
 }
 
-.vitro-control :global(.k-picker-wrap.k-state-focused),
-.vitro-control :global(.k-picker-wrap.k-state-active) {
+.vitro-control-container :global(.k-picker-wrap.k-state-focused),
+.vitro-control-container :global(.k-picker-wrap.k-state-active) {
     box-shadow: none !important;
 }
 
-.vitro-control :global(.k-title) {
+.vitro-control-container :global(.k-title) {
     font-family: 'InterMedium';
     font-weight: unset !important;
     color: #222D44;
@@ -187,35 +199,35 @@
     line-height: 27px;
 }
 
-.vitro-control :global(.k-time-container .k-item:hover) {
+.vitro-control-container :global(.k-time-container .k-item:hover) {
     font-family: 'InterMedium';
 }
 
-.vitro-control :global(.k-time-highlight) {
+.vitro-control-container :global(.k-time-highlight) {
     border-color: #C0CAD5;
 }
 
-.vitro-control :global(.k-time-list)::after,
-.vitro-control :global(.k-time-list)::before {
+.vitro-control-container :global(.k-time-list)::after,
+.vitro-control-container :global(.k-time-list)::before {
     box-shadow: 0 12px 30px 60px #fff;
 }
 
-.vitro-control :global(.k-time-list-wrapper.k-state-focused) {
+.vitro-control-container :global(.k-time-list-wrapper.k-state-focused) {
     background-color: #fff;
 }
 
-.vitro-control :global(.k-time-list-wrapper.k-state-focused)::before,
-.vitro-control :global(.k-time-list-wrapper.k-state-focused)::after {
+.vitro-control-container :global(.k-time-list-wrapper.k-state-focused)::before,
+.vitro-control-container :global(.k-time-list-wrapper.k-state-focused)::after {
     display: none;
 }
 
-.vitro-control :global(.k-time-list-wrapper) {
+.vitro-control-container :global(.k-time-list-wrapper) {
     background-color: #FFF;
     width: 85px;
     margin-top: 1px;
 }
 
-.vitro-control :global(.k-time-list-wrapper .k-title) {
+.vitro-control-container :global(.k-time-list-wrapper .k-title) {
     font-family: 'InterRegular';
     color: #222D44;
     background-color: #FFF !important;
@@ -228,22 +240,22 @@
     opacity: 1 !important;
 }
 
-.vitro-control :global(.k-time-list-container) {
+.vitro-control-container :global(.k-time-list-container) {
     justify-content: center;
 }
 
-.vitro-control :global(.k-time-header) {
+.vitro-control-container :global(.k-time-header) {
     height: 40px;
     border-bottom: 1px solid #C0CAD5;
     padding: 8px 24px;
 }
 
-.vitro-control :global(.k-time-footer) {
+.vitro-control-container :global(.k-time-footer) {
     border-top: 1px solid #E4E6EC;
     margin-top: 0 !important;
 }
 
-.vitro-control :global(.k-time-now) {
+.vitro-control-container :global(.k-time-now) {
     border-radius: 4px !important;
     color: #3274E0 !important;
     font-size: 14px !important;
@@ -251,11 +263,11 @@
     outline: none !important;
 }
 
-.vitro-control :global(.k-time-now):hover::before {
+.vitro-control-container :global(.k-time-now):hover::before {
     display: none;
 }
 
-.vitro-control :global(.k-action-buttons .k-button) {
+.vitro-control-container :global(.k-action-buttons .k-button) {
     background: #fff;
     border-bottom-left-radius: 4px;
     font-size: 14px;
@@ -265,28 +277,28 @@
     color: #222D44;
 }
 
-.vitro-control :global(.k-action-buttons .k-primary) {
+.vitro-control-container :global(.k-action-buttons .k-primary) {
     background: #347FDE;
     border-bottom-left-radius: 0 !important;
     border-bottom-right-radius: 4px !important;
     color: white !important;
 }
 
-.vitro-control :global(.k-action-buttons .k-primary:hover) {
+.vitro-control-container :global(.k-action-buttons .k-primary:hover) {
     background: #3274E0;
     border-color: #3274E0;
 }
 
-.vitro-control :global(.k-time-cancel):hover {
+.vitro-control-container :global(.k-time-cancel):hover {
     background: #F3F8FF !important;
     background-image: none;
 }
 
-.vitro-control :global(.k-item) {
+.vitro-control-container :global(.k-item) {
     width: 85px;
 }
 
-.vitro-control :global(.k-item span) {
+.vitro-control-container :global(.k-item span) {
     color: #222D44;
     font-size: 14px;
     line-height: 21px;

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

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