@vitrosoftware/common-ui-ts 1.1.44 → 1.1.45

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

@@ -38,7 +38,7 @@
 
 .vitro-content {
     width: 100%;
-    overflow: hidden;
+    min-width: 0;
 }
 
 .vitro-content p {

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

@@ -15,12 +15,11 @@
     white-space: nowrap;
 }
 
-.vitro-item > div {
+.vitro-value {
     font-family: 'InterMedium';
     color: #222D44;
     font-size: 14px;
     line-height: 145%;
-    width: fit-content;
     text-overflow: ellipsis;
     overflow: hidden;
 }
@@ -30,11 +29,11 @@
     overflow: hidden;
 }
 
-.vitro-item > div > :global(.vitro-flex) {
+.vitro-value > :global(.vitro-flex) {
     grid-gap: 4px;
 }
 
-.vitro-item > div > :global(.vitro-flex) > div {
+.vitro-value > :global(.vitro-flex) > div {
     width: 20px;
     min-width: 20px;
     height: 20px;

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

@@ -50,7 +50,8 @@
     margin-right: 8px;
 }
 
-.vitro-value-list .vitro-item:hover {
+.vitro-value-list .vitro-item:hover,
+.vitro-value-list .vitro-item:focus {
     background: #F3F8FF;
 }
 

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

@@ -388,15 +388,14 @@ div.TWMenuItemText {
 .TWPageMessage, .GridMessage {
     border: none !important;
     box-shadow: none !important;
-    /* ico-preloader.svg URL-encoder for SVG */
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24px' height='24px' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid' style='margin: auto; background-image: none; display: block; shape-rendering: auto; background-position: initial initial; background-repeat: initial initial;' class='ng-star-inserted'%3E%3Cg transform='rotate(0 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.875s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(45 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.75s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(90 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.625s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(135 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.5s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.375s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(225 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.25s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='-0.125s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(315 50 50)'%3E%3Crect x='46' y='6' rx='3.84' ry='3.84' width='8' height='24' fill='%23FF5B2D'%3E%3Canimate attributeName='opacity' values='1;0' keyTimes='0;1' dur='1s' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
+    /* preloader.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='64' height='64' viewBox='0 0 24 24' fill='%230097ff' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_Wezc%7Btransform-origin:center;animation:spinner_Oiah 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite%7D@keyframes spinner_Oiah%7B8.3%25%7Btransform:rotate(30deg)%7D16.6%25%7Btransform:rotate(60deg)%7D25%25%7Btransform:rotate(90deg)%7D33.3%25%7Btransform:rotate(120deg)%7D41.6%25%7Btransform:rotate(150deg)%7D50%25%7Btransform:rotate(180deg)%7D58.3%25%7Btransform:rotate(210deg)%7D66.6%25%7Btransform:rotate(240deg)%7D75%25%7Btransform:rotate(270deg)%7D83.3%25%7Btransform:rotate(300deg)%7D91.6%25%7Btransform:rotate(330deg)%7D100%25%7Btransform:rotate(360deg)%7D%7D%3C/style%3E%3Cg class='spinner_Wezc'%3E%3Ccircle cx='12' cy='2.5' r='1' opacity='1'/%3E%3Ccircle cx='16.75' cy='3.77' r='1' opacity='1'/%3E%3Ccircle cx='20.23' cy='7.25' r='1' opacity='1'/%3E%3Ccircle cx='21.50' cy='12.00' r='1' opacity='1'/%3E%3Ccircle cx='20.23' cy='16.75' r='1' opacity='1'/%3E%3Ccircle cx='16.75' cy='20.23' r='1' opacity='1'/%3E%3Ccircle cx='12' cy='21.5' r='1'/%3E%3C/g%3E%3C/svg%3E");
     background-repeat: no-repeat;
-    background-position: center 20px;
-    background-size: 24px 24px;
-    padding-top: 56px !important;
-    text-align: center !important;
-    font-family: "GraphikRegular" !important;
-    font-size: 10pt !important;
+    background-position: center top;
+    padding: 0;
+    padding-top: 64px !important;
+    min-width: 110px;
+    font-family: 'InterRegular';
 }
 
 .TWMessage {

package/css/std/controls/tooltip/tooltip.css

@@ -0,0 +1,49 @@
+.vitro-tooltip {
+    display: none !important;
+}
+
+.vitro-tooltip[style*='transform'] {
+    display: block !important;
+}
+
+.vitro-tooltip :global(.tooltip-inner) {
+    color: #FFF;
+    font-family: 'InterRegular';
+    font-size: 14px;
+    line-height: 21px;
+    padding: 8px 10px;
+    border-radius: 4px;
+    background: #4A556C;
+    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
+    max-width: 224px;
+}
+
+.vitro-tooltip :global(.tooltip-arrow)::before {
+    content: '';
+    display: block;
+    width: 16px;
+    height: 13px;
+    border: unset !important;
+    background-size: 100%;
+    background-position: center;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13' fill='none'%3E%3Cpath d='M9.73205 12C8.96225 13.3333 7.03775 13.3333 6.26795 12L1.0718 3C0.301995 1.66667 1.26424 1.46309e-06 2.80384 1.32849e-06L13.1961 4.19966e-07C14.7358 2.8537e-07 15.698 1.66667 14.9282 3L9.73205 12Z' fill='%234A556C'/%3E%3C/svg%3E");
+}
+
+.vitro-tooltip:global(.bs-tooltip-top) :global(.tooltip-arrow)::before {
+    top: -3px;
+}
+
+.vitro-tooltip:global(.bs-tooltip-bottom) :global(.tooltip-arrow)::before {
+    bottom: -3px;
+    transform: rotate(180deg);
+}
+
+.vitro-tooltip:global(.bs-tooltip-end) :global(.tooltip-arrow)::before {
+    right: -3px;
+    transform: rotate(90deg);
+}
+
+.vitro-tooltip:global(.bs-tooltip-start) :global(.tooltip-arrow)::before {
+    left: -3px;
+    transform: rotate(-90deg);
+}

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

@@ -22,4 +22,5 @@ export interface TableViewProps {
     scope?: string;
     searchCriterionList?: SearchCriterion[];
     searchParentId?: string;
+    readOnly?: boolean;
 }

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

@@ -12,6 +12,7 @@ export interface TableViewContext {
     readonly gantt: string;
     readonly rowCount: number;
     readonly header: TableViewRow;
+    readonly readOnly: boolean;
     dragging: boolean;
     filterOneLevel: boolean;
     scope: string;

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

@@ -16,6 +16,7 @@ export declare class TreeGridTableViewContextImpl implements TableViewContext {
     constructor(grid: any);
     get columnList(): any;
     get columnNameList(): any;
+    get readOnly(): any;
     get gantt(): any;
     get sort(): any;
     get rowCount(): any;

package/dist/controls/Tooltip/Tooltip.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import * as TOOLTIP from './TooltipConstants';
+interface TooltipProps {
+    text: string;
+    placement?: TOOLTIP.PLACEMENT | any;
+    isShow?: boolean;
+    children: any;
+}
+export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+export {};

package/dist/controls/Tooltip/TooltipConstants.d.ts

@@ -0,0 +1,6 @@
+export declare enum PLACEMENT {
+    LEFT = "left",
+    TOP = "top",
+    RIGHT = "right",
+    BOTTOM = "bottom"
+}

package/dist/index.css

@@ -3128,7 +3128,8 @@
     margin-right: 8px;
 }
 
-._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:hover {
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:hover,
+._lookup-picker-value-list_vitro-value-list_LSdCMjq ._lookup-picker-value-list_vitro-item_7yZBz5u:focus {
     background: #F3F8FF;
 }
 
@@ -4383,7 +4384,7 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 
 ._activity-item_vitro-content_3Lt7XRy {
     width: 100%;
-    overflow: hidden;
+    min-width: 0;
 }
 
 ._activity-item_vitro-content_3Lt7XRy p {
@@ -4429,6 +4430,56 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     margin-right: 8px;
 }
 
+._tooltip_vitro-tooltip_JvGPShz {
+    display: none !important;
+}
+
+._tooltip_vitro-tooltip_JvGPShz[style*='transform'] {
+    display: block !important;
+}
+
+._tooltip_vitro-tooltip_JvGPShz .tooltip-inner {
+    color: #FFF;
+    font-family: 'InterRegular';
+    font-size: 14px;
+    line-height: 21px;
+    padding: 8px 10px;
+    border-radius: 4px;
+    background: #4A556C;
+    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
+    max-width: 224px;
+}
+
+._tooltip_vitro-tooltip_JvGPShz .tooltip-arrow::before {
+    content: '';
+    display: block;
+    width: 16px;
+    height: 13px;
+    border: unset !important;
+    background-size: 100%;
+    background-position: center;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='13' viewBox='0 0 16 13' fill='none'%3E%3Cpath d='M9.73205 12C8.96225 13.3333 7.03775 13.3333 6.26795 12L1.0718 3C0.301995 1.66667 1.26424 1.46309e-06 2.80384 1.32849e-06L13.1961 4.19966e-07C14.7358 2.8537e-07 15.698 1.66667 14.9282 3L9.73205 12Z' fill='%234A556C'/%3E%3C/svg%3E");
+}
+
+._tooltip_vitro-tooltip_JvGPShz.bs-tooltip-top .tooltip-arrow::before {
+    top: -3px;
+}
+
+._tooltip_vitro-tooltip_JvGPShz.bs-tooltip-bottom .tooltip-arrow::before {
+    bottom: -3px;
+    transform: rotate(180deg);
+}
+
+._tooltip_vitro-tooltip_JvGPShz.bs-tooltip-end .tooltip-arrow::before {
+    right: -3px;
+    transform: rotate(90deg);
+}
+
+._tooltip_vitro-tooltip_JvGPShz.bs-tooltip-start .tooltip-arrow::before {
+    left: -3px;
+    transform: rotate(-90deg);
+}
+
 ._activity-message_vitro-activity-message_3GdyQuC {
     display: flex;
     flex-direction: column;
@@ -4447,13 +4498,11 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     white-space: nowrap;
 }
 
-._activity-message_vitro-item_3Q-7zX3 > div {
+._activity-message_vitro-value_O4DpuTR {
     font-family: 'InterMedium';
     color: #222D44;
     font-size: 14px;
     line-height: 145%;
-    width: -moz-fit-content;
-    width: fit-content;
     text-overflow: ellipsis;
     overflow: hidden;
 }
@@ -4463,11 +4512,11 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
     overflow: hidden;
 }
 
-._activity-message_vitro-item_3Q-7zX3 > div > .vitro-flex {
+._activity-message_vitro-value_O4DpuTR > .vitro-flex {
     grid-gap: 4px;
 }
 
-._activity-message_vitro-item_3Q-7zX3 > div > .vitro-flex > div {
+._activity-message_vitro-value_O4DpuTR > .vitro-flex > div {
     width: 20px;
     min-width: 20px;
     height: 20px;

package/dist/index.d.ts

@@ -68,6 +68,8 @@ import { Criterion } from './controls/Criterion/Criterion';
 import { SearchCriterion } from './controls/Search/SearchCriterion';
 import { Search } from './controls/Search/Search';
 import { FieldIterator } from './controls/FieldIterator/FieldIterator';
+import { Tooltip } from './controls/Tooltip/Tooltip';
+import * as TOOLTIP from './controls/Tooltip/TooltipConstants';
 export { Breadcrumbs };
 export { TopLevelMenu };
 export { TreeView, TreeViewContext, TREE_VIEW };
@@ -108,3 +110,4 @@ export { ImagePicker };
 export { Criterion };
 export { Search, SearchCriterion };
 export { FieldIterator };
+export { Tooltip, TOOLTIP };