@vitrosoftware/common-ui-ts 1.1.152 → 1.1.153

package/css/std/common.css

@@ -79,7 +79,7 @@ html, body {
     font-size: 20px;
     font-family: 'InterRegular';
     line-height: 24px;
-    margin-right: 24px;
+    margin-right: 12px;
     margin-bottom: 0;
 }
 

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

@@ -2,7 +2,6 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    margin-bottom: 16px;
     height: 24px;
     max-width: 100%;
 }
@@ -36,6 +35,7 @@
     flex-direction: row-reverse;
     justify-content: flex-end;
     list-style: none;
+    height: 100%;
 }
 
 .vitro-breadcrumbs-list {
@@ -156,11 +156,6 @@
 }
 
 @media (max-width: 800px) {
-    .vitro-breadcrumbs {
-        margin-bottom: 12px;
-        margin-right: 12px;
-    }
-
     .vitro-breadcrumbs-list {
         max-width: 100%;
     }

package/css/std/controls/checkbox/checkbox.css

@@ -1,7 +1,6 @@
 .vitro-control {
     width: 100%;
     position: relative;
-    margin-bottom: 32px;
 }
 
 .vitro-checkbox-content {

package/css/std/controls/checkbox-reorderable-list/checkbox-reorderable-list.css

@@ -0,0 +1,25 @@
+.vitro-checkbox-reorderable-list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    height: 100%;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    padding-left: 16px;
+}
+
+.vitro-reorderable-item {
+    margin-left: -16px;
+}
+
+.vitro-checkbox {
+    padding: 4px 16px 4px 8px;
+    user-select: none;
+    border-bottom: 1px solid #E4E6EC;
+}
+
+.vitro-checkbox input {
+    margin-right: 8px;
+}

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

@@ -1,6 +1,7 @@
 .vitro-control {
     padding: 0 !important;
     width: 100%;
+    max-width: unset;
     position: relative;
 }
 

package/css/std/controls/criterion/criterion.css

@@ -1,7 +1,6 @@
 .vitro-criterion-container {
     width: 100%;
     position: relative;
-    margin-bottom: 28px;
 }
 
 .vitro-control {

package/css/std/controls/criterion-field-iterator/criterion-field-iterator.css

@@ -0,0 +1,38 @@
+
+.vitro-field-iterator {
+    grid-gap: 28px 16px;
+}
+
+.vitro-add-field {
+    margin: 18px 0 16px 66px;
+}
+
+.vitro-add-field-button,
+.vitro-add-field-button:hover,
+.vitro-add-field-button:active {
+    font-family: 'InterRegular' !important;
+    background: #fff !important;
+    color: #326AD6 !important;
+    padding: 0 !important;
+    min-width: unset !important;
+    height: 16px !important;
+    font-size: 12px;
+    line-height: 16px;
+}
+
+.vitro-add-field-dialog {
+    z-index: 10001;
+    overflow: hidden;
+    border-radius: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+    .vitro-add-field-dialog[placement='right-start'] {
+        margin-top: -4px;
+        margin-left: 14px;
+    }
+
+    .vitro-add-field-dialog :global(.ps) > div:first-child {
+        max-height: 204px;
+        max-width: 242px;
+    }

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

@@ -1,5 +1,4 @@
 .vitro-control {
-    margin-bottom: 22px;
     width: 100%;
     position: relative;
 }

package/css/std/controls/dialog/dialog.css

@@ -62,7 +62,8 @@
 }
 
 .vitro-display-none {
-    display: none;
+    visibility: hidden;
+    transform: translateX(-100%);
 }
 
 @media (max-width: 800px) {

package/css/std/controls/editable-field-iterator/editable-field-iterator.css

@@ -0,0 +1,3 @@
+.vitro-field-iterator {
+    grid-gap: 28px 16px;
+}

package/css/std/controls/editable-field-iterator/item.css

@@ -0,0 +1,56 @@
+.vitro-criterion-container {
+    width: 100%;
+    position: relative;
+}
+
+.vitro-control {
+    position: relative;
+}
+
+.vitro-label {
+    color: #4A556C;
+    padding: 0 6px;
+    background-color: #fff;
+    z-index: 1;
+    position: absolute;
+    left: 10px;
+    top: -10px;
+    display: flex;
+    max-width: calc(100% - 76px);
+}
+
+.vitro-label:after {
+    content: "";
+    position: absolute;
+    width: 6px;
+    background: #ffffff;
+    right: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.vitro-control {
+    margin-bottom: 0px;
+    flex: 1 1;
+}
+
+.vitro-button-cancel {
+    flex-shrink: 0;
+    margin-left: 2px;
+    margin-top: -10px;
+    align-self: flex-start;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/criterion/img/cancel-grey.svg');
+}
+
+.vitro-focus .vitro-label {
+    color: #3274E0;
+}
+
+.vitro-error .vitro-label {
+    color: #D13438;
+}
+
+.vitro-image {
+    height: 16px;
+    width: 16px;
+}

package/css/std/controls/editable-list/editable-list.css

@@ -0,0 +1,44 @@
+.vitro-editable-list {
+    flex-direction: column;
+}
+
+.vitro-header {
+    width: 100%;
+    min-height: 32px;
+    padding: 0px 4px;
+}
+
+.vitro-create-button {
+    width: 24px;
+    height: 24px;
+    margin-left: auto;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/editable-list/img/add.svg');
+}
+
+.vitro-editable-item {
+    min-height: 32px;
+    padding: 0px 4px 0 28px;
+}
+
+.vitro-editable-item input {
+    width: 100%;
+    border: none;
+    outline: none;
+    background: transparent;
+}
+
+.vitro-active {
+    background-color: #DCEEFF;
+}
+
+.vitro-button-container {
+    margin-left: auto;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu) {
+    transform: translate3d(calc(100% - 50px), 26px, 0) !important;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu::before) {
+    left: 18px;
+}

package/css/std/controls/editable-list/img/add.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.002 17V7M7.00195 12H17.002" stroke="#222D44" stroke-linecap="round"/>
+<circle cx="12.002" cy="12" r="9.5" stroke="#222D44"/>
+</svg>

package/css/std/controls/field-iterator/field-iterator.css

@@ -2,7 +2,7 @@
     padding-top: 10px;
     display: flex;
     flex-wrap: wrap;
-    grid-gap: 0 16px;
+    grid-gap: 22px 16px;
     align-content: flex-start;
 }
 

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

@@ -15,3 +15,8 @@
     padding: 0;
     background-color: transparent;
 }
+
+.vitro-image-button :global(.vitro-image) {
+    width: 100%;
+    height: 100%;
+}

package/css/std/controls/input/input.css

@@ -3,7 +3,6 @@
 .vitro-control {
     width: 100%;
     position: relative;
-    margin-bottom: 22px;
 }
 
 .vitro-control input,

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

@@ -1,6 +1,5 @@
 .vitro-lookup-picker {
     position: relative;
-    margin-bottom: 22px;
     width: 100%;
 }
 

package/css/std/controls/main/main.css

@@ -1,8 +1,7 @@
 .vitro-main {
-    width: calc(100% - 56px);
+    width: 100%;
     height: 100%;
     overflow-x: hidden;
-    margin-left: 56px;
     position: relative;
     box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.09), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
     border-radius: 4px 0px 0px 0px;
@@ -16,15 +15,8 @@
     flex-direction: column;
 }
 
-:global(.toggled.pinned) .vitro-main {
-    margin-left: 208px;
-    width: calc(100% - 208px);
-}
-
 @media (max-width: 800px) {
     .vitro-main {
-        width: calc(100% - 24px);
-        margin: 0 auto;
         border-radius: 4px 4px 0px 0px;
         height: 100%;
         padding-bottom: 66px;

package/css/std/controls/pin-button/img/pin-active.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.99976 5L15.9998 5L15.0713 7.32119C15.024 7.43931 14.9998 7.56536 14.9998 7.69258V10V12.1492C14.9998 12.3763 15.077 12.5966 15.2189 12.7739L16.9998 15H6.99976L8.78062 12.7739C8.92248 12.5966 8.99976 12.3763 8.99976 12.1492V10V7.69258C8.99976 7.56536 8.97548 7.43931 8.92823 7.32119L7.99976 5Z" fill="#347FDE"/>
+<path d="M11.4998 15H12.4998V20.25L11.9998 21L11.4998 20.25V15Z" fill="#347FDE"/>
+</svg>

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

@@ -0,0 +1,11 @@
+.vitro-pin-button,
+.vitro-pin-button:hover,
+.vitro-pin-button:active {
+    width: 24px;
+    height: 24px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/pin-button/img/pin-active.svg');
+}
+
+.vitro-pin-button.vitro-active {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/pin-button/img/pin-active.svg');
+}

package/css/std/controls/reorderable-list/img/drag.svg

@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="3" r="1" fill="#8E98A3"/>
+<circle cx="6" cy="8" r="1" fill="#8E98A3"/>
+<circle cx="6" cy="13" r="1" fill="#8E98A3"/>
+<circle cx="10" cy="3" r="1" fill="#8E98A3"/>
+<circle cx="10" cy="8" r="1" fill="#8E98A3"/>
+<circle cx="10" cy="13" r="1" fill="#8E98A3"/>
+</svg>

package/css/std/controls/reorderable-list/reorderable-list.css

@@ -0,0 +1,37 @@
+.vitro-reorderable-list {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    max-height: 100%;
+    overflow: hidden;
+    position: relative;
+}
+
+.vitro-reorderable-item {
+    z-index: 1;
+}
+
+.vitro-drag-button {
+    cursor: move !important;
+    width: 16px;
+    height: 16px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/reorderable-list/img/drag.svg');
+}
+
+.vitro-dragged-item {
+    position: absolute;
+    z-index: 2;
+    background-color: #fff;
+    transform: translateY(-50%);
+}
+
+.vitro-drop-zone {
+    height: 32px;
+    background-color: #fff;
+    overflow: hidden;
+}
+
+.vitro-drop-zone.vitro-hidden {
+    height: 0px;
+    padding: 0px
+}

package/css/std/controls/search/search.css

@@ -1,7 +1,6 @@
 .vitro-search {
     position: relative;
     align-self: baseline;
-    margin-left: auto;
     max-width: 376px;
     min-width: 120px;
 }
@@ -52,6 +51,10 @@
     margin-top: 0;
 }
 
+.vitro-field-iterator {
+    grid-gap: 28px 16px;
+}
+
 .vitro-add-field {
     margin: 18px 0 16px 66px;
 }

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

@@ -99,6 +99,7 @@
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/sidebar/img/list-marker-active.svg');
 }
 
+.vitro-arrow,
 .vitro-expanded,
 .vitro-collapsed {
     cursor: pointer;
@@ -112,6 +113,10 @@
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/sidebar/img/collapse-bottom-black.svg');
 }
 
+.vitro-arrow {
+    transform: rotate(-90deg);
+}
+
 .vitro-expanded {
     transform: rotateX(180deg);
 }

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

@@ -1,6 +1,5 @@
 .vitro-sidebar {
     height: 100%;
-    position: fixed;
     overflow: hidden;
     background-color: #F7F9FC;
     display: flex;
@@ -8,8 +7,8 @@
     width: 56px;
     align-items: center;
     flex-direction: column;
-    padding-top: 80px !important;
-    top: 0;
+    flex-shrink: 0;
+    padding-top: 8px !important;
 }
 
 :global(.toggled) .vitro-sidebar {

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

@@ -8,11 +8,6 @@
     background: #fff;
 }
 
-:global(.splitter):first-child {
-    border-radius: 4px 4px 0 0;
-    overflow: hidden;
-}
-
 :global(.handle-bar) {
     cursor: col-resize;
     width: 2px !important;
@@ -20,7 +15,9 @@
     background: #E4E6EC;
 }
 
-:global(.handle-bar):active, :global(.handle-bar):hover, :global(.handle-bar.handle-bar_clone) {
+:global(.handle-bar):active,
+:global(.handle-bar):hover, 
+:global(.handle-bar.handle-bar_clone) {
     background-color: #F5F6FA !important;
 }
 
@@ -45,26 +42,4 @@
 :global(.handle-bar_drag)::after {
     left: 3px;
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/splitter/img/splitter-handle-bar-drag.svg');
-}
-
-: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/switch/switch.css

@@ -0,0 +1,55 @@
+.vitro-switch {
+    position: relative;
+    display: inline-block;
+    width: 40px;
+    height: 20px;
+    cursor: pointer;
+}
+
+.vitro-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.vitro-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #fff;
+    border: 1px solid #4A556C;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 10px;
+}
+
+.vitro-slider:before {
+    position: absolute;
+    content: "";
+    height: 14px;
+    width: 14px;
+    left: 2px;
+    top: calc(50% - 7px);
+    background-color: #4A556C;
+    -webkit-transition: .4s;
+    transition: .4s;
+    border-radius: 50%;
+}
+
+.vitro-switch.vitro-active .vitro-slider:before {
+    background-color: #fff;
+}
+
+.vitro-switch.vitro-active .vitro-slider {
+    background-color: #4292F7;
+    border: 1px solid #4292F7;
+}
+
+.vitro-switch input:checked + .vitro-slider:before {
+    -webkit-transform: translateX(20px);
+    -ms-transform: translateX(20px);
+    transform: translateX(20px);
+}

package/css/std/controls/tab-button-group/img/check.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="check-one /Line/Black" clip-path="url(#clip0_2166_122689)">
+<path id="Vector" d="M4 8L7 11L12 6" stroke="#222D44" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_2166_122689">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

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

@@ -0,0 +1,86 @@
+.vitro-tab-button-group {
+    padding: 0 24px 0 24px;
+    white-space: nowrap;
+    width: 100%;
+    border-bottom: 1px solid #E4E6EC;
+    margin: 0;
+    overflow: visible;
+}
+
+:global(.vitro-mobile-container) .vitro-tab-button-group {
+    overflow-x: auto;
+}
+
+.vitro-tab-button-group-content {
+    display: flex;
+    justify-content: flex-start;
+    padding: 0;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.vitro-tab-button-group-content > button {
+    color: #222D44 !important;
+    border-radius: 4px 4px 0px 0px !important;
+    padding: 8px 16px 9px 16px !important;
+    font-size: 12px !important;
+    line-height: 16px !important;
+    border-top: 1px solid #E4E6EC;
+    border-right: 1px solid #E4E6EC;
+    border-left: 1px solid #E4E6EC;
+    font-family: "InterRegular" !important;
+    background: #ffffff !important;
+    min-width: auto !important;
+    margin-left: 3px !important;
+    height: auto !important;
+}
+
+.vitro-tab-button-group-content > button:first-child {
+    margin-left: 0 !important;
+}
+
+.vitro-tab-button-group-content > button:hover {
+    background: #F7F9FC !important;
+    color: #222D44 !important;
+}
+
+.vitro-tab-button-group-content > button.active {
+    background: #F7F9FC !important;
+    font-family: 'InterMedium' !important;
+    position: relative;
+    color: #222D44 !important;
+}
+
+.vitro-tab-button-group-content > button:before {
+    display: none !important;
+}
+
+.vitro-tab-button-group-content > button.active:before {
+    content: '';
+    display: inline-block !important;
+    height: 16px !important;
+    margin-right: 4px !important;
+    width: 16px !important;
+    margin-left: -6px !important;
+    vertical-align: sub !important;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/tab-button-group/img/check.svg') !important;
+    border: none !important;
+    opacity: 1 !important;
+    visibility: visible !important;
+    position: relative !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: auto !important;
+    bottom: auto !important;
+}
+
+.vitro-tab-button-group-content > button.active:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    display: block;
+    height: 2px;
+    background: #F7F9FC !important;
+    top: 100%;
+    left: 0;
+}

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

@@ -101,4 +101,19 @@
     height: 6px;
     background-size: 16px 16px;
     background-position: center center;
+}
+
+.vitro-table-view-gantt .TWCell .vitro-flex > .vitro-avatar {
+    width: 16px;
+    height: 16px;
+    min-width: 16px;
+    line-height: 16px;
+    font-size: 10px;
+    margin-right: 4px;
+}
+
+.vitro-table-view-gantt .table-view-custom-lookup-edit,
+.vitro-table-view-gantt .table-view-custom-lookup-edit > div,
+.vitro-table-view-gantt .table-view-custom-lookup-edit > div > div {
+    height: 20px;
 }

package/css/std/controls/table-view/{table-view-additional-container.css → table-view-hidden-container.css}

@@ -1,4 +1,4 @@
-.vitro-additional-table-view-container {
+.vitro-hidden-table-view-container {
     position: absolute;
     top: 0;
     left: 0;