@vitrosoftware/common-ui-ts 1.1.27 → 1.1.29

package/css/common.css

@@ -34,7 +34,6 @@
     margin-right: 12px;
     margin-bottom: 0;
     padding-bottom: 12px;
-    margin-bottom: 8px;
 }
 
 @media (max-width: 800px) {
@@ -43,6 +42,7 @@
         font-size: 18px;
         line-height: 27px;
         margin: 0;
+        margin-right: 12px;
     }
 
     :global(.pane) > :global(.vitro-flex) {

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

@@ -1,6 +1,7 @@
 .vitro-item {
-    margin-bottom: 22px;
+    margin-bottom: 16px;
     min-height: 32px;
+    width: 100%;
 }
 
 .vitro-item.vitro-active {
@@ -11,24 +12,33 @@
     width: 100%;
 }
 
+.vitro-title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: flex;
+    align-items: center;
+}
+
 .vitro-title span {
     color: #222d44;
+    font-size: 14px;
+    line-height: 16px;
+    font-family: 'InterMedium';
+    text-overflow: ellipsis;
+    overflow: hidden;
 }
 
 .vitro-due-date {
-    font-size: 8pt;
-    color: #bdbdbd;
-    float: right;
     white-space: nowrap;
+    color: #4A556C !important;
+    margin-left: 8px;
+    font-family: 'InterRegular' !important;
 }
 
 .vitro-content {
-    margin-top: -1px;
     width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-right: 4px;
+    overflow: hidden;
 }
 
 .vitro-content p {
@@ -38,7 +48,6 @@
     color: #bdbdbd;
     font-size: 9pt;
     line-height: 14px;
-    margin-top: 3px;
 }
 
 .vitro-content p span {
@@ -66,9 +75,9 @@
 }
 
 .vitro-dropdown-button {
-    align-self: flex-start;
+    margin-left: auto;
 }
 
 .vitro-avatar {
-    margin-right: 4px;
+    margin-right: 8px;
 }

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

@@ -0,0 +1,68 @@
+.vitro-activity-message {
+    display: flex;
+    flex-direction: column;
+    background: #F8F9FA;
+    border-radius: 4px;
+    padding: 4px 8px;
+    width: fit-content;
+    max-width: 100%;
+}
+
+.vitro-item {
+    display: flex;
+    grid-gap: 4px 0;
+    align-items: center;
+    white-space: nowrap;
+}
+
+.vitro-item > div {
+    font-family: 'InterMedium';
+    color: #222D44;
+    font-size: 14px;
+    line-height: 145%;
+    width: fit-content;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.vitro-item :global(.vitro-flex) > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.vitro-item > div > :global(.vitro-flex) {
+    grid-gap: 4px;
+}
+
+.vitro-item > div > :global(.vitro-flex) > div {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+    font-size: 10px;
+    line-height: 20px;
+}
+
+.vitro-message {
+    font-family: 'InterRegular' !important;
+    white-space: normal;
+}
+
+.vitro-field-name {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 145%;
+    margin-right: 8px;
+}
+
+.vitro-separator {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    margin: 0 4px;
+    white-space: nowrap;
+    /* activity-arrow.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%3Cpath d='M15.1602 7.81641C14.8684 7.5247 14.8671 7.05213 15.1572 6.7588C15.4496 6.46318 15.9267 6.46186 16.2207 6.75587L20.7585 11.2936C21.1487 11.6839 21.149 12.3165 20.7592 12.7071L16.2204 17.255C15.9267 17.5494 15.4494 17.5483 15.157 17.2526C14.867 16.9595 14.8683 16.4871 15.1599 16.1956L18.5937 12.7617L3.2857 12.7729C2.87128 12.7732 2.53516 12.4373 2.53516 12.0229C2.53516 11.6089 2.87061 11.2732 3.28461 11.2729L18.6055 11.2617L15.1602 7.81641Z' fill='%234A556C'/%3E%3C/svg%3E%0A");
+}

package/css/std/controls/dialog/dialog-content.css

@@ -8,7 +8,7 @@
 }
 
 .vitro-dialog-content :global(.ps) {
-    padding-top: 12px;
+    padding-top: 12px !important;
     padding-left: 16px;
 }
 

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

@@ -1,8 +1,9 @@
 .vitro-selected-item {
-    display: inline-block;
+    display: inline-flex;
     width: fit-content;
     margin: 0 6px 0 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    align-items: center;
 }

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

@@ -1,110 +1,94 @@
 .vitro-message-input {
     display: flex;
-    align-items: flex-start;
-    border-top: 1px solid #e0e0e0;
-    padding-top: 12px;
+    position: absolute;
+    width: calc(100% - 32px);
+    max-width: calc(100% - 32px);
+    bottom: 0;
+    align-items: end;
+    background: #fff;
+    bottom: 1px;
 }
 
 .vitro-message-input .vitro-control {
+    cursor: text;
     width: 100%;
     position: relative;
-    padding: 0;
     border-radius: 4px;
     border: 1px solid #C0CAD5;
-    min-height: 40px;
+    min-height: 36px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0 8px;
-    margin-left: 8px;
+    word-break: break-all;
 }
 
-.vitro-control textarea {
-    border: none;
-    resize: none;
-    line-height: 20px;
-    overflow-y: auto;
-    height: 20px;
-    width: 90%;
+.vitro-message-input :global(.ps) > div:first-child {
+    padding: 0;
+    padding: 6px 16px 6px 8px !important;
+}
+
+.vitro-message-input :global(.ps__rail-y) {
+    background: transparent !important;
+    border-top: none !important;
 }
 
-.vitro-control span {
-    overflow-y: auto;
-    width: 90%;
+.vitro-message {
+    font-size: 14px;
+    line-height: 16px;
     height: fit-content;
-    max-height: 60px;
+    width: 100%;
+    min-height: 16px;
+    max-height: 82px;
 }
 
-.vitro-button-send {
+.vitro-placeholder {
+    color: #8E98A3;
+    font-weight: unset;
+    font-size: 12px;
+    line-height: 16px;
+    pointer-events: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.vitro-button-add-file {
     height: 24px;
     width: 24px;
+    min-width: 24px;
+    min-height: 24px;
     background-color: #fff;
     border: none;
     outline: none;
     background-size: 100%;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' id='Layer_1' x='0px' y='0px' viewBox='0 0 20 20' style='enable-background:new 0 0 20 20;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23BDBDBD;stroke-miterlimit:10;%7D%0A%3C/style%3E%3Cpath class='st0' d='M18,10L1.5,8.5l0-5.9L18,10c-5.5,2.5-11,5-16.5,7.5v-6L18,10'/%3E%3C/svg%3E");
+    background-position: center;
+    background-repeat: no-repeat;
+    /* paperclip.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.9969 6.24219L7.15809 15.081C6.5723 15.6668 6.5723 16.6166 7.15809 17.2023C7.74388 17.7881 8.69362 17.7881 9.27941 17.2023L18.1182 8.36351C19.2898 7.19193 19.2898 5.29244 18.1182 4.12087C16.9467 2.94929 15.0472 2.94929 13.8756 4.12087L5.03677 12.9597C3.27941 14.7171 3.27941 17.5663 5.03677 19.3237C6.79413 21.081 9.64337 21.081 11.4007 19.3237L20.4969 10.2275' stroke='%238E98A3' stroke-linecap='round'/%3E%3C/svg%3E");
 }
 
-.vitro-button-send:hover,
-.vitro-button-send:active {
-    background-color: none;
+.vitro-button-send {
+    height: 36px;
+    width: 36px;
+    min-width: 36px;
+    min-height: 36px;
+    background-color: #fff;
+    border-radius: 50%;
     border: none;
     outline: none;
+    background-size: 24px;
+    background-position: center;
+    background-repeat: no-repeat;
+    box-shadow: 0px 0px 4px 0px rgba(19, 43, 74, 0.18);
+    margin-left: 12px;
+    /* send.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%3Cg id='icon_line/Send'%3E%3Cg id='Group 33514'%3E%3Cpath id='Vector' d='M21.7365 10.9623C22.4909 11.3814 22.4909 12.4664 21.7365 12.8855L9.00978 19.9559C7.64603 20.7135 6.02992 19.4959 6.38207 17.9761L7.5752 12.8268C7.71285 12.2327 7.71285 11.6151 7.5752 11.021L6.38207 5.87172C6.02992 4.35191 7.64603 3.13428 9.00977 3.89192L21.7365 10.9623Z' fill='%23347FDE'/%3E%3Cpath id='Vector 15' d='M8.46875 11.9219L13.4687 11.9219' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
 }
 
-:global(.vitro-input-upload-file) {
-    height: 24px;
-}
-
-:global(.vitro-input-upload-file) input {
-    display: none;
-}
-
-:global(.vitro-input-upload-file) label {
-    margin-bottom: 0px;
-}
-
-:global(.card-header), textarea:global(.note-codable), :global(.note-statusbar), :global(.note-table-popover.bottom), :global(.note-link-popover.bottom), :global(.note-dropzone) {
-    display: none;
-}
-
-:global(.note-editor) {
-    width: 100%;
-    border: none !important;
-}
-
-:global(.note-editable) {
-    color: #4F4F4F;
-}
-
-:global(.note-editable) img {
-    max-width: 200px;
-    display: block;
-}
-
-:global(.note-popover.popover) {
-    max-width: 440px;
-    max-height: 150px;
-    overflow-y: auto;
+.vitro-button-send:hover,
+.vitro-button-send:active,
+.vitro-button-add-file:hover,
+.vitro-button-add-file:active {
+    background-color: none;
     border: none;
-    background: #fff;
-    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
-    border-radius: 8px;
-    margin-bottom: 8px;
-}
-
-:global(.note-popover.popover div.note-hint-group) {
-    padding: 8px 0;
-}
-
-:global(.note-hint-item) {
-    padding: 4px 8px;
-    font-family: "InterRegular";
-    font-size: 10pt;
-    line-height: 11pt;
-    cursor: pointer;
-}
-
-:global(.note-hint-item):hover {
-    background: #F5F6FA;
-}
+    outline: none;
+}

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

@@ -10,8 +10,8 @@
 }
 
 .vitro-tab > :global(.vitro-content) {
-    position: relative;
-    height: 100%;
+    position: relative;
+    height: calc(100% - 37px);
 }
 
 .vitro-tab > :global(.vitro-content) > :global(.container),

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

@@ -211,16 +211,28 @@ div.TWMenuItemText {
 .TWCheck0Left,
 .TWMenuUncheckedIconLeft, .TWMenuUncheckedIconRight,
 .TWBool0, .TWBool0RO {
-    /* ico-tableview-checkbox-empty.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='none' stroke='%23bdbdbd' stroke-width='2' x='10' y='10' width='40' height='40' rx='5' ry='5'/%3E%3C/svg%3E") !important;
+	background-size: 24px;
+    /* checkbox-big-empty.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%3Cg id='Checkbox-big'%3E%3Crect id='Background' x='2.5' y='2.5' width='19' height='19' rx='3.5' stroke='%23C0CAD5'/%3E%3C/g%3E%3C/svg%3E%0A") !important;
 }
 
 .TWCheck1Left,
 .TWMenuCheckedIconLeft, .TWMenuCheckedIconRight,
 .TWFilter1, .TWGroup1, .TWSearch1,
 .TWBool1, .TWBool1RO {
-    /* ico-tableview-checkbox-full.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='%23fff' stroke='%23bdbdbd' stroke-width='2' x='10' y='10' width='40' height='40' rx='5' ry='5'/%3E%3Cpolyline fill='none' stroke='%23ff5b2d' stroke-width='6' points='16,28 28,38 44,20'/%3E%3C/svg%3E") !important;
+	background-size: 24px;
+    /* checkbox-big-active.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%3Crect x='2' y='2' width='20' height='20' rx='2.5' fill='%234292F7'/%3E%3Cpath d='M16.7062 8.50593C17.0826 8.86144 17.0996 9.45479 16.7441 9.83121L11.4316 15.4562C11.2577 15.6404 11.0166 15.7463 10.7634 15.7499C10.5101 15.7535 10.2662 15.6545 10.0871 15.4754L7.27459 12.6629C6.90847 12.2968 6.90847 11.7032 7.27459 11.3371C7.6407 10.971 8.2343 10.971 8.60041 11.3371L10.7308 13.4675L15.3809 8.54379C15.7364 8.16737 16.3298 8.15042 16.7062 8.50593Z' fill='white'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWBoolX, .TWBoolXRO {
+	background-size: 24px;
+	/* checkbox-big-undetermined.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%3Crect x='7' y='7' width='10' height='10' rx='1' fill='%234292F7'/%3E%3Crect x='2.625' y='2.625' width='18.75' height='18.75' rx='1.875' stroke='%23C0CAD5' stroke-width='1.25'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWBoolImage {
+	width: 24px !important;
 }
 
 .TWPickEmpty {
@@ -595,6 +607,8 @@ div.TWMenuItemText {
 
 .TWCell .vitro-flex > div {
     margin-right: 4px;
+    font-size: 12px;
+    line-height: 24px;
 }
 
 .TWRowAbove {

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

@@ -5,6 +5,7 @@
 
 :global(#TreeView) :global(.ps) {
     padding-right: 12px;
+    padding-top: 8px;
 }
 
 .vitro-tree-view {
@@ -95,7 +96,7 @@
     height: 32px !important;
     line-height: 32px !important;
     background-position: center !important;
-    background-size: 100%;
+    background-size: 100% !important;
     margin-right: 4px;
 }
 

package/dist/controls/ActivityItem/ActivityMessage.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ChangedValue } from './ChangedValue';
+export interface ActivityMessageProps {
+    changedValueList: ChangedValue[];
+}
+export declare const ActivityMessage: (props: ActivityMessageProps) => JSX.Element;

package/dist/controls/ActivityItem/ChangedValue.d.ts

@@ -0,0 +1,6 @@
+export interface ChangedValue {
+    fieldName?: string;
+    newValue: any;
+    oldValue?: any;
+    isMessage?: boolean;
+}

package/dist/controls/MessageInput/MessageInput.d.ts

@@ -1,12 +1,10 @@
 import React from 'react';
 interface MessageInputProps {
-    userName: string;
-    userImageUrl?: string;
     placeholder?: string;
-    maxRows?: number;
     isDisabled?: boolean;
     onSubmit: (value: string) => any;
-    onChange?: (e: any, value: string) => any;
+    onAddFile?: () => any;
+    onChange?: (value: string) => any;
     onDrop?: (e: any) => any;
     children?: React.ReactNode;
 }

package/dist/controls/MessageInput/MessageInputConstants.d.ts

@@ -0,0 +1,3 @@
+export declare enum LOCALE {
+    PLACEHOLDER = "app.common.messageInput.placeholder"
+}

package/dist/controls/TableView/TableViewContext.d.ts

@@ -49,6 +49,8 @@ export interface TableViewContext {
     getFirst(row?: TableViewRow, type?: number): TableViewRow;
     endEdit(editResult: boolean): any;
     expandRow(row: TableViewRow): void;
+    collapseRow(row: TableViewRow): void;
+    expandParents(row: TableViewRow): void;
     getCell(row: TableViewRow, col: TableViewCol | string): any;
     getFRow(): TableViewRow;
     getFCol(): TableViewCol;

package/dist/controls/TableView/TreeGridTableViewContextImpl.d.ts

@@ -57,6 +57,8 @@ export declare class TreeGridTableViewContextImpl implements TableViewContext {
     setEventHandler(eventHandler: TableViewEventHandler): void;
     endEdit(success: boolean): any;
     expandRow(row: TableViewRow): void;
+    collapseRow(row: TableViewRow): void;
+    expandParents(row: TableViewRow): void;
     getCell(row: TableViewRow, col: TableViewCol | string): any;
     getFRow(): TableViewRow;
     getFCol(): TableViewCol;