@vitrosoftware/common-ui-ts 1.1.103 → 1.1.105

package/css/std/common.css

@@ -86,22 +86,7 @@ html, body {
     display: flex;
 }
 
-:global(.vitro-title.vitro-border-bottom) {
-    border-bottom: 1px solid #E4E6EC;
-    margin-right: 12px;
-    margin-bottom: 0;
-    padding-bottom: 12px;
-}
-
 @media (max-width: 800px) {
-    :global(.vitro-title) {
-        padding-bottom: 8px;
-        font-size: 18px;
-        line-height: 27px;
-        margin: 0;
-        margin-right: 12px;
-    }
-
     :global(.pane) > :global(.vitro-flex) {
         flex-direction: column;
         align-items: flex-start;

package/css/std/controls/action-handler/confirm-dialog.css

@@ -22,4 +22,10 @@
     height: 88px;
     padding: 24px 20px;
     border-bottom: none;
+}
+
+@media (max-width: 800px) {
+    .vitro-confirm-dialog {
+       width: 100% !important;
+    }
 }

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

@@ -64,12 +64,6 @@
     overflow-wrap: anywhere;
 }
 
-.vitro-message img {
-    max-width: calc(100% - 20px);
-    display: block;
-    margin: 4px 0;
-}
-
 .vitro-flex {
     display: flex;
 }

package/css/std/controls/activity-item/activity-message.css

@@ -43,7 +43,7 @@
 
 .vitro-message {
     font-family: 'InterRegular' !important;
-    white-space: normal;
+    white-space: pre-wrap;
 }
 
 .vitro-field-name {

package/css/std/controls/activity-item/attached-file-list.css

@@ -0,0 +1,51 @@
+.vitro-file-list-container {
+    display: flex;
+    padding: 4px 6px;
+    grid-gap: 8px 12px;
+    flex-wrap: wrap;
+}
+
+.vitro-overflow-button {
+    width: fit-content;
+    height: fit-content;
+    position: relative;
+}
+
+.vitro-item-count {
+    background: rgba(192, 202, 213, 0.7);
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.vitro-item-count > div {
+    width: 36px;
+    height: 36px;
+    background-color: #fff;
+    border-radius: 50%;
+    font-size: 14px;
+    color: #222D44;
+    line-height: 130%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+@media (max-width: 800px) {
+    .vitro-overflow-button,
+    .vitro-file {
+        width: calc(100% / 2 - 12px);
+        max-width: 142px;
+    }
+
+    .vitro-overflow-button .vitro-file {
+        width: 100%;
+    }
+}
+

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

@@ -5,7 +5,7 @@
     right: 0;
     top: 0;
     bottom: 0;
-    z-index: 1002;
+    z-index: 300;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -60,11 +60,11 @@
     transition: max-height 0.5s ease;
 }
 
-@media (max-width: 800px) {
-    .vitro-dialog {
-        z-index: 10001 !important;
-    }
+.vitro-display-none {
+    display: none;
+}
 
+@media (max-width: 800px) {
     .vitro-dialog > div {
         min-width: unset;
         max-width: calc(100% - 16px);

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

@@ -24,7 +24,7 @@
 }
 
 .vitro-dropdown-button button::after {
-    display: none;
+    display: none !important;
 }
 
 .vitro-dropdown-icon {
@@ -62,12 +62,9 @@
     padding: 0px;
     font-weight: 400;
     box-sizing: border-box;
-    -webkit-transform: none !important;
-    transform: none !important;
-    position: absolute;
     z-index: 1150;
-    top: calc(100% + 6px) !important;
     right: -4px !important;
+    margin-top: 6px;
 }
 
 .vitro-dropdown-button :global(.dropdown-menu)::before {

package/css/std/controls/file/file.css

@@ -0,0 +1,94 @@
+.vitro-file {
+    border-radius: 4px;
+    height: 80px;
+    width: 142px;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 8px;
+    position: relative;
+    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1), 0px 0px 2px 0px rgba(0, 0, 0, 0.12);
+}
+
+.vitro-preview {
+    padding: 0 !important;
+}
+
+.vitro-preview-container {
+    max-width: 100%;
+    max-height: 100%;
+    min-width: 36px;
+    min-height: 36px;
+    width: auto;
+    height: auto;
+    cursor: pointer;
+}
+
+.vitro-preview .vitro-preview-container {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+}
+
+.vitro-preview .vitro-preview-container img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.vitro-flex {
+    display: flex;
+    align-items: center;
+    grid-gap: 4px;
+    margin-top: 4px;
+    width: 100%;
+}
+
+.vitro-flex > div {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.vitro-image {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.vitro-file-name {
+    color: #222D44;
+    font-size: 11px;
+    line-height: 145%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    display: block;
+}
+
+.vitro-file-size {
+    color: #6C757D;
+    font-size: 10px;
+    line-height: 145%;
+}
+
+.vitro-dropdown-button {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    background-color: #E9ECEF;
+}
+
+.vitro-dropdown-button :global(.dropdown-menu) {
+    width: 184px;
+    min-width: 184px;
+}
+
+.vitro-dropdown-button :global(.btn) > span {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/file/img/file-button-context.svg');
+}

package/css/std/controls/file/img/file-button-context.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="#E9ECEF"/>
+<circle cx="12" cy="6.5" r="1.5" fill="#4A556C"/>
+<circle cx="12" cy="12" r="1.5" fill="#4A556C"/>
+<circle cx="12" cy="17.5" r="1.5" fill="#4A556C"/>
+</svg>

package/css/std/controls/file-version-select/file-version-select.css

@@ -150,6 +150,7 @@
     padding: 4px;
     text-align: center;
     overflow: hidden;
+    flex-shrink: 0;
 }
 
 .vitro-file-version-item .vitro-version-name {

package/css/std/controls/heading/heading.css

@@ -46,4 +46,11 @@
     font-weight: unset;
     margin-top: 0;
     margin-bottom: 0;
+}
+
+:global(.vitro-border-bottom) {
+    border-bottom: 1px solid #E4E6EC;
+    margin-right: 12px;
+    margin-bottom: 0;
+    padding-bottom: 12px;
 }

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

@@ -0,0 +1,84 @@
+.vitro-image-viewer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 200;
+}
+
+.vitro-header {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    padding: 20px;
+    display: flex;
+    justify-content: flex-end;
+    grid-gap: 12px;
+}
+
+.vitro-button-close {
+    width: 32px;
+    height: 32px;
+    background: transparent;
+    outline: none;
+    border: none;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/image-viewer/img/image-viewer-close.svg');
+}
+
+.vitro-scroll-view {
+    background-color: #212529 !important;
+    padding: 79px 0;
+}
+
+.vitro-scroll-view :global(.k-scrollview-prev) {
+    left: 20px !important;
+}
+
+.vitro-scroll-view :global(.k-scrollview-next) {
+    right: 20px !important;
+}
+
+.vitro-dropdown-button :global(.btn),
+.vitro-dropdown-button :global(.btn):hover,
+.vitro-dropdown-button :global(.btn):focus,
+.vitro-dropdown-button :global(.btn):active,
+.vitro-dropdown-button :global(.btn) > span {
+    width: 32px;
+    height: 32px;
+}
+
+.vitro-dropdown-button :global(.btn) > span {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/image-viewer/img/context-button-white.svg');
+}
+
+.vitro-pager {
+    width: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 20px;
+    line-height: 24px;
+    position: absolute;
+    bottom: 28px;
+    left: calc(50% - 30px);
+}
+
+@media (max-width: 800px) {
+    .vitro-image-viewer {
+        z-index: 301;
+    }
+
+    .vitro-scroll-view :global(.k-scrollview-prev) {
+        left: 0 !important;
+    }
+
+    .vitro-scroll-view :global(.k-scrollview-next) {
+        right: 0 !important;
+    }
+}

package/css/std/controls/image-viewer/img/context-button-white.svg

@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="16" cy="8.66675" r="2" fill="white"/>
+<circle cx="16" cy="16" r="2" fill="white"/>
+<circle cx="16" cy="23.3333" r="2" fill="white"/>
+</svg>

package/css/std/controls/image-viewer/img/image-viewer-close.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.01044 22.9918L16.0011 16.0012L22.9918 22.9918M22.9918 9.0105L15.9998 16.0012L9.01044 9.0105" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/image-viewer/page.css

@@ -0,0 +1,19 @@
+.vitro-image-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 60px;
+}
+
+.vitro-image-container img {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+@media (max-width: 800px) {
+    .vitro-image-container {
+        padding: 0;
+    }
+}

package/css/std/controls/linear-progress/linear-progress.css

@@ -0,0 +1,40 @@
+.vitro-linear-progress {
+    height: 2px;
+    position: relative;
+    overflow: hidden;
+}
+
+.vitro-bar {
+    width: 22%;
+    height: 2px;
+    background-color: #326AD6;
+    animation: progress 2.7s ease-in-out infinite;
+    position: absolute;
+    left: 0;
+}
+
+@keyframes progress {
+    0% {
+        transform: scaleX(1);
+        transform-origin: bottom left;
+        left: 0;
+    }
+    25% {
+        transform: scaleX(1.75);
+        transform-origin: bottom left;
+    }
+    50% {
+        transform-origin: bottom left;
+        transform: scaleX(1);
+        left: 78%;
+    }
+    75% {
+        transform: scaleX(1.75);
+        transform-origin: bottom right;
+    }
+    100% {
+        transform: scaleX(1);
+        transform-origin: bottom right;
+        left: 0;
+    }
+}

package/css/std/controls/message-input/attached-file.css

@@ -0,0 +1,26 @@
+.vitro-attached-file-container {
+    position: relative;
+}
+
+.vitro-attached-file {
+    width: 80px;
+    height: 80px;
+    padding: 4px;
+    align-items: flex-start;
+}
+
+.vitro-button-remove {
+    width: 16px;
+    height: 16px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-color: #E9ECEF;
+    border: none;
+    border-radius: 50%;
+    outline: none;
+    position: absolute;
+    z-index: 1;
+    top: 4px;
+    right: 4px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/message-input/img/attached-file-remove.svg');
+}

package/css/std/controls/message-input/img/attached-file-remove.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="16" height="16" rx="8" fill="#E9ECEF"/>
+<path d="M4.50525 11.4959L8.00058 8.00052L11.4959 11.4959M11.4959 4.50519L7.99992 8.00052L4.50525 4.50519" stroke="#D13438" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/message-input/message-input.css

@@ -1,30 +1,20 @@
 .vitro-message-input {
     display: flex;
     position: absolute;
-    width: calc(100% - 32px);
-    max-width: calc(100% - 32px);
-    bottom: 0;
+    width: calc(100%);
     align-items: flex-end;
-    background: #fff;
     bottom: 1px;
+    z-index: 2;
 }
 
 .vitro-message-input .vitro-control {
-    cursor: text;
-    width: 100%;
+    width: calc(100% - 48px);
     position: relative;
     border-radius: 4px;
     border: 1px solid #C0CAD5;
     min-height: 36px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     word-break: break-all;
-}
-
-.vitro-message-input :global(.ps) > div:first-child {
-    padding: 0;
-    padding: 6px 16px 6px 8px !important;
+    background-color: #fff;
 }
 
 .vitro-message-input :global(.ps__rail-y) {
@@ -42,6 +32,7 @@
 }
 
 .vitro-placeholder {
+    display: block;
     color: #8E98A3;
     font-weight: unset;
     font-size: 12px;
@@ -50,6 +41,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     user-select: none;
+    white-space: nowrap;
 }
 
 .vitro-button-add-file {
@@ -57,6 +49,7 @@
     width: 24px;
     min-width: 24px;
     min-height: 24px;
+    margin-right: 7px;
     background-color: #fff;
     border: none;
     outline: none;
@@ -66,7 +59,9 @@
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/message-input/img/paperclip.svg');
 }
 
-.vitro-button-send {
+.vitro-button-send,
+.vitro-button-send:hover,
+.vitro-button-send:active {
     height: 36px;
     width: 36px;
     min-width: 36px;
@@ -90,4 +85,36 @@
     background-color: none;
     border: none;
     outline: none;
+}
+
+.vitro-display-none {
+    display: none;
+}
+
+.vitro-attached-file-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.vitro-attached-file-list::after {
+    content: '';
+    display: block;
+    height: 1px;
+    background: #E9ECEF;
+    width: calc(100% - 16px);
+}
+
+.vitro-attached-file-list :global(.ps) {
+    max-height: 97px;
+    padding: 6px 8px 10px 8px;
+}
+
+.vitro-attached-file-list :global(.ps) > div:first-child {
+    grid-gap: 12px;
+}
+
+.vitro-flex :global(.ps) > div:first-child {
+    padding: 10px 16px 10px 8px !important;
+    min-height: 36px;
 }

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

@@ -3347,7 +3347,7 @@ body.swal2-no-backdrop .swal2-shown {
   content: "";
   width: 100%;
   height: 100%;
-  background: url("img/loading.svg") center no-repeat;
+  background: url("img/preloader.svg") center no-repeat;
   display: none;
   /* Using a delay with background-image doesn't work,
      consequently we use the display. */

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

@@ -1221,7 +1221,7 @@
   content: "";
   width: 100%;
   height: 100%;
-  background: url("img/loading.svg") center no-repeat;
+  background: url("img/preloader.svg") center no-repeat;
   display: none;
   /* Using a delay with background-image doesn't work,
      consequently we use the display. */

package/css/std/controls/scroll-view/img/scroll-view-next.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="60" viewBox="0 0 32 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="60" height="32" transform="matrix(4.37114e-08 1 1 -4.37114e-08 0 0)" fill="#212529" fill-opacity="0.5"/>
+<path d="M12 40L22 30L12 20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/scroll-view/img/scroll-view-prev.svg

@@ -0,0 +1,4 @@
+<svg width="32" height="60" viewBox="0 0 32 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="60" height="32" transform="translate(32) rotate(90)" fill="#212529" fill-opacity="0.5"/>
+<path d="M20 40L10 30L20 20" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,28 @@
+.vitro-scroll-view {
+    width: 100%;
+    height: 100%;
+}
+
+.vitro-scroll-view :global(.k-scrollview-next),
+.vitro-scroll-view :global(.k-scrollview-prev) {
+    height: 60px;
+    width: 32px;
+}
+
+.vitro-scroll-view :global(.k-i-arrowhead-e::before) {
+    content: url('@vitrosoftware/common-ui-ts/css/std/controls/scroll-view/img/scroll-view-next.svg');
+}
+
+.vitro-scroll-view :global(.k-i-arrowhead-w::before) {
+    content: url('@vitrosoftware/common-ui-ts/css/std/controls/scroll-view/img/scroll-view-prev.svg');
+}
+
+.vitro-scroll-view :global(.k-scrollview-nav) :global(.k-link) {
+    border-color: #E4E6EC !important;
+    background-color: #E4E6EC !important;
+}
+
+.vitro-scroll-view :global(.k-scrollview-nav) :global(.k-link.k-primary) {
+    border-color: #2A63F6 !important;
+    background-color: #2A63F6 !important;
+}

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

@@ -7,6 +7,7 @@
 .vitro-tab :global(.nav) {
     align-items: center;
     justify-content: center;
+    flex-wrap: nowrap;
 }
 
 .vitro-tab > :global(.vitro-content) {
@@ -47,8 +48,10 @@
     padding: 8px 12px;
 }
 
-.vitro-tab :global(.nav) :global(.dropdown-item):hover {
+.vitro-tab :global(.nav) :global(.dropdown-item):hover,
+.vitro-tab :global(.nav) :global(.dropdown-item):active {
     background: #F3F8FF;
+    color: #222D44;
 }
 
 .vitro-tab :global(.nav) :global(.dropdown-item):first-child {
@@ -66,6 +69,7 @@
 .vitro-tab :global(.nav) > div.vitro-item {
     flex-grow: 1;
     text-align: center;
+    overflow: hidden;
 }
 
 .vitro-tab :global(.nav) > div :global(.nav-link) {
@@ -86,8 +90,9 @@
 }
 
 .vitro-tab :global(.nav) > div :global(.nav-item) a span {
-    display: inline-flex;
-    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .vitro-tab :global(.nav) > div .active span {
@@ -109,6 +114,11 @@
     align-items: flex-start;
 }
 
+.vitro-tab :global(.nav) > .vitro-dropdown-button :global(.dropdown-menu) {
+    width: 241px;
+    min-width: unset;
+}
+
 .vitro-tab :global(.nav) > div :global(.nav-item).active a {
     color: #3274E0 !important;
     border-bottom: 2px solid #3274E0;