@vitrosoftware/common-ui-ts 1.1.28 → 1.1.30

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),
@@ -19,6 +19,11 @@
     height: 100%;
 }
 
+.vitro-tab > :global(.vitro-content) > :global(.container) > div {
+    flex-direction: column;
+    display: flex;
+}
+
 .vitro-tab :global(.ps) > div:first-child {
     padding: 30px 16px 0 16px;
     display: flex;

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

@@ -607,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/css/std/controls/view/view.css

@@ -1,5 +1,5 @@
 .vitro-view {
     flex: 1 1;
     padding: 16px;
-    overflow-y: hidden;
+    overflow: hidden;
 }

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

@@ -1,5 +1,9 @@
 .vitro-view-part {
-    height: 100%;
     margin-left: -16px;
     margin-right: -16px;
 }
+
+.vitro-view-part:last-child {
+    flex-grow: 1;
+    max-height: 100%;
+}

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;