@vitrosoftware/common-ui-ts 1.1.114 → 1.1.116

package/css/std/controls/button/button.css

@@ -32,7 +32,8 @@
 }
 
 .vitro-button:hover, 
-.vitro-button:active {
+.vitro-button:active,
+.vitro-button:focus {
     background: #3274E0;
 }
 

package/css/std/controls/button-cancel/button-cancel.css

@@ -7,6 +7,7 @@
 }
 
 .vitro-button-cancel:hover, 
-.vitro-button-cancel:active {
+.vitro-button-cancel:active,
+.vitro-button-cancel:focus {
     background: #F3F8FF !important;
 }

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

@@ -11,10 +11,13 @@
     background: #F3F8FF !important;
 }
 
+.vitro-command-menu-button > div {
+    gap: 4px;
+}
+
 .vitro-image {
     width: 24px;
     height: 24px;
-    margin-right: 4px;
 }
 
 @media (max-width: 800px) {

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

@@ -16,6 +16,10 @@
     padding: 0 16px;
 }
 
+.vitro-dropdown-button-container :global(.ps__rail-y) {
+    border: none;
+}
+
 .vitro-command-menu-dropdown-button :hover
 .vitro-command-menu-dropdown-button :active {
     background: #F3F8FF;
@@ -27,8 +31,7 @@
     border-radius: 4px;
     border: none !important;
     outline: none;
-    min-width: 241px;
-    width: fit-content;
+    width: 241px;
     font-size: 14px;
     padding: 0px;
     font-weight: 400;
@@ -40,6 +43,11 @@
     left: -20px;
 }
 
+.vitro-dropdown-button-container.vitro-right :global(.dropdown-menu) {
+    left: unset;
+    right: -20px;
+}
+
 .vitro-dropdown-button-container :global(.dropdown-toggle):after,
 .vitro-dropdown-button-container :global(.dropdown-menu):before {
     display: none;
@@ -55,27 +63,25 @@
     background-size: 44px 42px;
     background-repeat: no-repeat;
     position: absolute;
-    left: 16px;
+    left: 20px;
     top: -21px;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/command-menu/img/dropdown-menu-arrow.svg');
 }
 
-.vitro-dropdown-button-container:first-child :global(.dropdown-menu) {
-    left: 0;
+.vitro-dropdown-button-container.vitro-right :global(.dropdown-menu::before) {
+    left: unset;
+    right: 20px;
 }
 
-.vitro-dropdown-button-container:last-child :global(.dropdown-menu) {
-    right: -20px;
-}
-
-.vitro-dropdown-button-container:last-child :global(.dropdown-menu::before) {
-    right: 25px;
+.vitro-dropdown-button-container:first-child :global(.dropdown-menu) {
+    left: 0;
 }
 
 .vitro-dropdown-button-container :global(.dropdown-item) {
     display: flex;
     align-items: center;
-    height: 37px;
+    min-height: 37px;
+    white-space: normal;
     padding: 8px 12px;
     border: none;
     box-shadow: none;
@@ -164,6 +170,10 @@
     border-color: #fff !important;
 }
 
+.vitro-scrollbar {
+    max-height: 288px;
+}
+
 @media (max-width: 800px) {
     .vitro-command-menu-dropdown-button .vitro-image + div {
         display: none;
@@ -183,5 +193,6 @@
     }
     .vitro-dropdown-button-container :global(.dropdown-menu) {
         min-width: 100px;
+        max-width: 241px;
     }
 }

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

@@ -237,10 +237,18 @@
 }
 
 :global(.k-calendar-view .k-link) {
-    height: 24px !important;
-    width: 24px !important;
+    height: auto !important;
+    min-height: 24px;
+    width: auto !important;
+    min-width: 24px;
+    max-width: 100%;
     padding: 0 !important;
     margin: auto;
+    height: auto !important;
+}
+
+:global(.k-content.k-month) :global(.k-link) {
+    width: 24px !important;
 }
 
 :global(.k-state-selected .k-link) {

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

@@ -7955,6 +7955,7 @@ dialog .separator {
     width: 408px;
     background: #fff;
     border-left: 2px solid #eeeff0;
+    border-right: none;
 }
 
 .body__sidebar-close,

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

@@ -959,6 +959,7 @@ dialog .separator {
     width: 408px;
     background: #fff;
     border-left: 2px solid #eeeff0;
+    border-right: none;
 }
 
 .body__sidebar-close,

package/css/std/controls/tab-group/tab-group.css

@@ -115,3 +115,21 @@
     color: #3274E0 !important;
     border-bottom: 2px solid #3274E0;
 }
+
+@media (max-width: 800px) {
+    .vitro-item {
+        flex-grow: 0 !important;
+    }
+
+    .vitro-item a {
+        padding: 0 14px 15px 14px !important;
+    }
+
+    .vitro-dropdown-button {
+        flex-grow: 1;
+    }
+
+    .vitro-dropdown-button > :global(.dropdown) {
+        margin-left: auto;
+    }
+}

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

@@ -1,4 +1,17 @@
 @import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-cell.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-cfg-menu.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-context-menu.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-filter.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-gantt.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-group.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-header.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-message.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-progress.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-scroll.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-sort.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-tab.css');
+@import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/treegrid-tip.css');
 @import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/table-view-custom-lookup-edit.css');
 @import url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/table-view-custom-date-edit.css');
 

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

@@ -0,0 +1,70 @@
+.TWCell {
+    padding: 0 8px !important;
+}
+
+.TWInt, .TWFloat, .TWDate {
+    text-align: unset;
+}
+
+.TWDataRow td {
+    border-bottom: 1px solid #E4E6EC !important;
+}
+
+.TWCellBase.TWCellPanel,
+.TWCellBase.TWCellPanel {
+    padding: 0 8px;
+}
+
+.TWLow .TWIconLeft {
+    padding-left: 39px !important;
+    background-position: 7px;
+    background-size: 24px;
+}
+
+.TWLow .TWIconRight {
+    background-position: center;
+    background-size: 24px;
+}
+
+.TWClassSelected td {
+    background-color: #DCEEFF !important;
+}
+
+.TWCellBase.vitro-table-view-deleted {
+    color: #BDBDBD;
+}
+
+.TWCell .vitro-flex > .vitro-image {
+    margin-right: 4px !important;
+    line-height: 24px;
+    width: 24px;
+    height: 24px;
+}
+
+.TWCell .vitro-flex > .vitro-avatar {
+    width: 28px;
+    height: 28px;
+    min-width: 28px;
+    line-height: 28px;
+    font-size: 14px;
+    margin-right: 4px;
+}
+
+.TWClassHoveredCell,
+.TWClassHoveredCellReadOnly,
+.TWClassHoveredCellPanel {
+    background-color: #F3F8FF;
+}
+
+.TWCell.TWRightHtml {
+    padding: 0px !important;
+    cursor: default;
+}
+
+.TWEditInput {
+    background: #DCEEFF;
+}
+
+.TWClassReadOnly {
+    color: #8E98A3 !important;
+}

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

@@ -0,0 +1,208 @@
+.TWMenuItem.TWCfgMenuItem#TGMenu-0-style {
+    display: none;
+}
+
+.TWCfgMenuItem {
+    margin: 0;
+    background: #fff !important;
+    padding: 0 16px !important;
+}
+
+.TWCfgMenuItem .TWCfgMenuItemText {
+    padding: 4px 0;
+}
+
+.TWCfgMenuItem .TWCfgMenuBoolIconRight {
+    background-size: 16px;
+}
+
+.TWCfgMenuMain {
+    max-width: calc(100% - 30px);
+    left: 50% !important;
+    top: 50% !important;
+    transform: translate(-50%, -50%);
+    border-radius: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+.TWMenuButton {
+    border-radius: 4px;
+    background: #347FDE;
+    padding: 8px 16px !important;
+    color: #fff !important;
+    margin: 0 !important;
+}
+
+.TWMenuButton:hover,
+.TWMenuButton:active {
+    background: #3274E0;
+    border: none;
+}
+
+.TWDialogButtonCancel {
+    color: #222D44 !important;
+    background: #fff;
+}
+
+.TWDialogButtonCancel:hover,
+.TWDialogButtonCancel:active {
+    color: #222D44 !important;
+    background: #F3F8FF;
+}
+
+.TWCfgMenuCaption {
+    font-weight: normal;
+    line-height: 150%;
+    padding: 4px;
+}
+
+.TWCfgMenuHead {
+    background: #fff;
+    border-bottom: 1px solid #E4E6EC;
+    padding: 20px 16px 20px 16px !important;
+}
+
+.TWCfgMenuHeadText {
+    font-size: 20px;
+    line-height: 24px;
+    text-align: left;
+}
+
+.TWCfgMenuClose {
+    position: absolute;
+    height: 60px;
+    width: 60px !important;
+    top: -9px;
+    right: -64px;
+    background-size: 100%;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/img/cancel-white.svg');
+}
+
+.TWCfgMenuBody {
+    margin: 0;
+    width: 100%;
+    padding: 8px 0;
+}
+
+.TWCfgMenuFoot {
+    border-top: 1px solid #E4E6EC;
+    padding: 16px 16px !important;
+    display: flex;
+    grid-gap: 12px;
+    justify-content: flex-start;
+    flex-direction: row-reverse;
+}
+
+.TWCfgMenuOuterBottom {
+    padding: 0 !important;
+    border-radius: 4px;
+}
+
+@media (max-width: 800px) {
+    .TWCfgMenuMain {
+        width: 100%;
+        max-width: 100%;
+        height: 100%;
+        overflow: hidden;
+        margin: 0;
+        border: none;
+        border-radius: 0;
+    }
+
+    .TWCfgMenuHeadTouch {
+        display: flex;
+        align-items: center;
+        padding: 24px !important;
+    }
+
+    .TWCfgMenuHeadTouch .TWMenuHeadTextTouch {
+        font-size: 18px;
+        line-height: 150%;
+    }
+
+    .TWCfgMenuFootTouch {
+        padding: 24px !important;
+        background-color: #F8F9FA;
+    }
+
+    .TWCfgMenuFootTouch .TWCfgMenuButtonTouch {
+        padding: 0 !important;
+        height: 40px;
+        width: 100%;
+    }
+
+    .TWCfgMenuFootTouch .TWCfgMenuButtonTouch.TWDialogButtonOk {
+        font-family: 'InterMedium';
+    }
+
+    .TWCfgMenuFootTouch .TWCfgMenuButtonTouch.TWDialogButtonCancel {
+        border: 1px solid #E4E6EC;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuOuter {
+        width: 100% !important;
+        max-height: 100%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuBodyTouch {
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuBodyTouch::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuBodyTouch::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuBodyTouch::-webkit-scrollbar-thumb {
+        background: #E4E6EC;
+        border-radius: 4px;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuBodyTouch {
+        scrollbar-color: #E4E6EC #fff;
+        scrollbar-width: thin;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuBodyTouch::-webkit-scrollbar-thumb:hover {
+        background: #E4E6EC;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuBody tr {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .TWCfgMenuItemTouch tr {
+        display: table-row !important;
+    }
+
+    .TWCfgMenuMain .TWCfgMenuVSeparator {
+        display: none;
+    }
+
+    .TWCfgMenuSeparatorTouch {
+        display: none;
+    }
+
+    .TWCfgMenuBoolIconRightTouch {
+        background-size: 20px !important;
+        padding-right: 0;
+        padding-left: 34px;
+        border-bottom: 1px solid rgba(228, 230, 236, 0.5);
+        background-position: 8px center;
+    }
+
+    .TWCfgMenuBoolIconRightTouch .TWMenuItemTextTouch {
+        height: 40px;
+        display: flex;
+        align-items: center;
+        padding: 0;
+    }
+}

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

@@ -0,0 +1,164 @@
+.vitro-table-view-context-menuMain,
+.vitro-table-view-context-menu-leftMain,
+.vitro-table-view-popup-menuMain {
+    width: 241px !important;
+    border: none;
+    border-radius: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+.vitro-table-view-context-menu-leftMain {
+    margin-right: -19px;
+}
+
+.vitro-table-view-context-menuMain .TWMenuMain,
+.vitro-table-view-context-menu-leftMain .TWMenuMain,
+.vitro-table-view-popup-menuMain .TWMenuMain {
+    margin-left: -27px;
+}
+
+.vitro-table-view-context-menuMain::before,
+.vitro-table-view-context-menu-leftMain::before,
+.vitro-table-view-popup-menuMain::before {
+    content: '';
+    display: block;
+    height: 21px;
+    width: 32px;
+    overflow: hidden;
+    background-position: center 0;
+    background-size: 44px 42px;
+    background-repeat: no-repeat;
+    position: absolute;
+    top: -21px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/table-view/img/dropdown-menu-arrow.svg');
+}
+
+.vitro-table-view-context-menuMain::before,
+.vitro-table-view-popup-menuMain::before {
+    left: 12px;
+}
+
+.vitro-table-view-context-menu-leftMain::before {
+    right: 12px;
+}
+
+.vitro-table-view-context-menuMain .TWMenuOuter,
+.vitro-table-view-context-menu-leftMain .TWMenuOuter,
+.vitro-table-view-popup-menuMain .TWMenuOuter {
+    padding: 0;
+    margin: 0;
+    border-radius: 4px !important;
+    border: none !important;
+    width: 241px !important;
+}
+
+.vitro-table-view-context-menuMain .TWMenuBody,
+.vitro-table-view-context-menu-leftMain .TWMenuBody,
+.vitro-table-view-popup-menuMain .TWMenuBody {
+    margin: 0;
+    width: 100%;
+    cursor: default;
+}
+
+.vitro-table-view-context-menuMain .TWMenuBody,
+.vitro-table-view-context-menu-leftMain .TWMenuBody,
+.vitro-table-view-popup-menuMain .TWMenuBody {
+    max-height: 288px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.vitro-table-view-context-menuMain .TWMenuBody::-webkit-scrollbar,
+.vitro-table-view-context-menu-leftMain .TWMenuBody::-webkit-scrollbar,
+.vitro-table-view-popup-menuMain .TWMenuBody::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    background: transparent;
+}
+
+.vitro-table-view-context-menuMain .TWMenuBody::-webkit-scrollbar-button,
+.vitro-table-view-context-menu-leftMain .TWMenuBody::-webkit-scrollbar-button,
+.vitro-table-view-popup-menuMain .TWMenuBody::-webkit-scrollbar-button {
+    display: none;
+}
+
+.vitro-table-view-context-menuMain .TWMenuBody::-webkit-scrollbar-track,
+.vitro-table-view-context-menu-leftMain .TWMenuBody::-webkit-scrollbar-track,
+.vitro-table-view-popup-menuMainMain .TWMenuBody::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.vitro-table-view-context-menuMain .TWMenuBody::-webkit-scrollbar-thumb,
+.vitro-table-view-context-menu-leftMain .TWMenuBody::-webkit-scrollbar-thumb,
+.vitro-table-view-popup-menuMainMain .TWMenuBody::-webkit-scrollbar-thumb {
+    background: #E4E6EC;
+    border-radius: 4px;
+}
+
+.vitro-table-view-context-menuMain.TWMenuMainTop,
+.vitro-table-view-context-menu-leftMain.TWMenuMainTop,
+.vitro-table-view-popup-menuMain.TWMenuMainTop {
+    margin-top: 0 !important;
+}
+
+.vitro-table-view-context-menuMain.TWMenuMainTop,
+.vitro-table-view-context-menuMain.TWMenuMainBottom {
+    transform: translateX(calc(100% - 38px));
+}
+
+.vitro-table-view-context-menuMainTop::before,
+.vitro-table-view-context-menu-leftMainTop::before,
+.vitro-table-view-popup-menuMainTop::before {
+    bottom: -21px;
+    top: unset;
+    transform: rotate(180deg);
+}
+
+.vitro-table-view-popup-menuMainBottom {
+    transform: translateY(24px);
+    margin-left: -18px;
+}
+
+.vitro-table-view-popup-menuMainTop {
+    transform: translateY(-24px);
+    margin-left: -18px;
+}
+
+.vitro-table-view-context-menuMain .TWMenuFocus,
+.vitro-table-view-context-menu-leftMain .TWMenuFocus,
+.vitro-table-view-context-menuMain .TWMenuHover,
+.vitro-table-view-context-menu-leftMain .TWMenuHover,
+.vitro-table-view-popup-menuMain .TWMenuFocus,
+.vitro-table-view-popup-menuMain .TWMenuHover {
+    background: #F3F8FF !important;
+}
+
+.vitro-table-view-context-menuMain .TWMenuItem,
+.vitro-table-view-popup-menuMain .TWMenuItem,
+.vitro-table-view-context-menu-leftMain .TWMenuItem {
+    margin: 0 !important;
+    padding: 8px 0 !important;
+}
+
+.vitro-table-view-context-menuMain .TWMenuItemText,
+.vitro-table-view-popup-menuMain .TWMenuItemText,
+.vitro-table-view-context-menu-leftMain .TWMenuItemText {
+    line-height: 150%;
+    padding-left: 12px;
+    white-space: normal;
+}
+
+.vitro-table-view-context-menuMain div.TWMenuItemText,
+.vitro-table-view-context-menu-leftMain div.TWMenuItemText,
+.vitro-table-view-popup-menuMain div.TWMenuItemText {
+    margin-left: 32px;
+}
+
+.vitro-table-view-context-menuMain .TWMenuItemIcon,
+.vitro-table-view-context-menu-leftMain .TWMenuItemIcon,
+.vitro-table-view-popup-menuMain .TWMenuItemIcon {
+    height: 20px;
+    width: 32px;
+    background-size: 20px;
+    background-position-x: 12px;
+}