@vitrosoftware/common-ui-ts 1.0.10 → 1.1.11

package/css/white/common.css

@@ -1,7 +1,6 @@
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/kendo.css');
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/treegrid.css');
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/jstree/style.min.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/table-view/table-view-custom-lookup-edit.css');
 
 :global(.vitro-opacity-low) {
     opacity: .3;

package/css/white/controls/action-handler/action-handler.css

@@ -71,3 +71,12 @@
 :global(.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before), :global(.bs-popover-bottom > .popover-arrow::before) {
     border-bottom-color: red;
 }
+
+.vitro-interface-blur {
+    position: absolute;
+    z-index: 100000;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+}

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

@@ -0,0 +1,27 @@
+.vitro-control {
+    padding: 6px 0;
+    width: 100%;
+    position: relative;
+}
+
+.vitro-control :global(.vitro-control-container) {
+    position: relative;
+}
+
+.vitro-control-row {
+    display: flex;
+    align-items: baseline;
+}
+
+.vitro-control-row > span {
+    display: block;
+    margin: 0 5px;
+}
+
+.vitro-control-row .vitro-label {
+    width: 136px;
+}
+
+.vitro-control-row > div:not(:has(div, input)) {
+    width: 136px;
+}

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

@@ -0,0 +1,110 @@
+.vitro-tab {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-tab :global(.nav) {
+    align-items: center;
+    justify-content: center;
+}
+
+.vitro-tab > :global(.vitro-content) {
+    position: relative;
+}
+
+.vitro-tab :global(.vitro-content) {
+    padding-top: 18px;
+}
+
+.vitro-tab:has(:global(.vitro-task-detail)) :global(.vitro-content) {
+    padding-top: 0;
+}
+
+:global(.ps) .vitro-tab :global(.vitro-content) {
+    position: relative;
+    flex: 1 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow-y: auto;
+}
+
+:global(.ps) .vitro-tab :global(.vitro-content)::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+:global(.ps) .vitro-tab :global(.vitro-content)::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 12px;
+}
+
+:global(.ps) .vitro-tab :global(.vitro-content)::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 4px;
+}
+
+:global(.ps) .vitro-tab :global(.vitro-content)::-webkit-scrollbar-thumb:hover {
+    background: #BDBDBD;
+}
+
+.vitro-tab :global(.vitro-time-log-history) object + :global(.vitro-control), .vitro-tab :global(.vitro-time-log-history) object + div {
+    padding-top: 0;
+}
+
+.vitro-tab > div:not([class]) > div > div:first-child {
+    padding-top: 0;
+}
+
+.vitro-tab :global(.nav) > div.vitro-item:not(:first-child) {
+    border: none;
+}
+
+.vitro-tab :global(.nav) > div.vitro-item {
+    flex-grow: 1;
+    text-align: center;
+}
+
+.vitro-tab :global(.nav) > div :global(.nav-link) {
+    padding: 0;
+}
+
+.vitro-tab :global(.nav) > div :global(.nav-item) a {
+    border-bottom: 1px solid #e0e0e0;
+    font-family: GraphikMedium;
+    font-size: 12pt;
+    padding-bottom: 16px;
+    line-height: normal;
+}
+
+.vitro-tab :global(.nav) > div :global(.nav-item) a:hover {
+    color: #0097ff;
+}
+
+.vitro-tab :global(.nav) > div :global(.nav-item) a span {
+    padding-top: 3px;
+    display: inline-flex;
+    align-items: center;
+}
+
+.vitro-tab :global(.nav) > div .active span {
+    font-weight: 500;
+}
+
+.vitro-tab :global(.nav) > div :global(.nav-item) a span i {
+    margin: 0 4px;
+    font-size: 18px;
+}
+
+.vitro-tab :global(.nav) > .vitro-dropdown-button {
+    padding-bottom: 8px;
+    margin-right: -2px;
+    width: 15px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.vitro-tab :global(.nav) > div :global(.nav-item).active a {
+    color: #0097ff !important;
+    border-bottom: 3px solid #0097ff;
+}

package/css/white/controls/table-view/table-view-custom-date-edit.css

@@ -0,0 +1,6 @@
+.table-view-custom-date-edit {
+    width: 512px;
+    position: absolute;
+    top: 57px;
+    z-index: 10000;
+}

package/css/white/controls/table-view/table-view.css

@@ -1,3 +1,6 @@
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/table-view/table-view-custom-lookup-edit.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/table-view/table-view-custom-date-edit.css');
+
 :global(#TableView) {
     border-radius: 8px;
     padding: 6px;
@@ -55,10 +58,3 @@
     background-color: #fff;
     border: 1px solid #ff5b2d !important;
 }
-
-:global(.table-view-custom-date-edit) {
-    width: 512px;
-    position: absolute;
-    top: 57px;
-    z-index: 10000;
-}

package/css/white/controls/view/view.css

@@ -0,0 +1,3 @@
+.vitro-view{
+
+}

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

@@ -0,0 +1,3 @@
+.vitro-view-part {
+
+}

package/dist/controls/ActionHandler/ActionHandler.d.ts

@@ -4,8 +4,8 @@ interface ActionHandlerProps {
     processItem: (item: any) => any;
     item?: any;
     itemList: any[];
-    showAfterAction?: boolean;
-    showProgress?: boolean;
+    isShowAfterAction?: boolean;
+    isShowProgress?: boolean;
     onAfterAction?: (error: any, successResult: any, failResult: any) => void;
     onBeforeAction?: () => void;
     onAfterActionClose?: (error: any, successResult: any, failResult: any) => void;
@@ -20,7 +20,8 @@ interface ActionHandlerProps {
     labelNo?: string;
     children?: React.ReactNode;
     durationMs?: number;
-    show?: boolean;
+    isShow?: boolean;
+    isBlockInterface?: boolean;
 }
 export declare let ActionHandler: React.FunctionComponent<ActionHandlerProps>;
 export {};

package/dist/controls/ControlGroup/ControlGroup.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface ControlGroupProps {
+    horizontal?: boolean;
+    as?: string;
+    children: React.ReactNode;
+}
+export declare const ControlGroup: (props: ControlGroupProps) => JSX.Element;

package/dist/controls/TabGroup/OverflowButton.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TabItem } from './TabItem';
+export interface OverflowButtonProps {
+    list: TabItem[];
+    offset: number;
+    onSelect: (offset: number) => void;
+}
+export declare const OverflowButton: (props: OverflowButtonProps) => JSX.Element | null;

package/dist/controls/TabGroup/Tab.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface TabProps {
+    index: number;
+    active: boolean;
+    onClick: (index: number) => void;
+    eventKey?: string;
+    icon?: string;
+    title: string;
+}
+export declare const Tab: (props: TabProps) => JSX.Element;

package/dist/controls/TabGroup/TabGroup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { TabItem } from './TabItem';
+export interface TabGroupProps {
+    wrap?: boolean;
+    placeholder?: string;
+    onChange?: (index: number) => void;
+    itemList: TabItem[];
+}
+export declare const TabGroup: (props: TabGroupProps) => JSX.Element;

package/dist/controls/TabGroup/TabGroupComponent.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TabItem } from './TabItem';
+export interface TabGroupComponentProps {
+    onChange?: (index: number) => void;
+    wrap?: boolean;
+    itemList: TabItem[];
+}
+export declare const TabGroupComponent: (props: TabGroupComponentProps) => JSX.Element;

package/dist/controls/TabGroup/TabGroupConstants.d.ts

@@ -0,0 +1,4 @@
+export declare const tabScriptList: {
+    url: string;
+    id: string;
+}[];

package/dist/controls/TabGroup/TabGroupHeader.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TabItem } from './TabItem';
+export interface TabGroupHeaderProps {
+    width: number;
+    itemList: TabItem[];
+    wrap?: boolean;
+    currentTab: number;
+    changeTab: (index: number) => void;
+}
+export declare let TabGroupHeader: (props: TabGroupHeaderProps) => JSX.Element;

package/dist/controls/TabGroup/TabItem.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export interface TabItem {
+    text: string;
+    content: {
+        component: React.FunctionComponent<any>;
+        props: {
+            [key: string]: any;
+        };
+    };
+    eventKey?: string;
+    icon?: string;
+    title?: string;
+}

package/dist/controls/TreeView/JsTreeViewContextImpl.d.ts

@@ -22,7 +22,7 @@ export declare class JsTreeViewContextImpl implements TreeViewContext {
     refresh(): void;
     deleteNode(node: any): void;
     selectNode(node: any): void;
-    openNode(node: any): void;
+    openNode(node: any, callback?: any, durationMs?: number): void;
     editNode(): void;
     getParent(node: any): any;
 }

package/dist/controls/TreeView/TreeViewContext.d.ts

@@ -14,7 +14,7 @@ export interface TreeViewContext {
     getNode(nodeId: string): any;
     deleteNode(node: any): void;
     selectNode(node: any): void;
-    openNode(node: any): void;
+    openNode(node: any, callback?: any, durationMs?: number): void;
     editNode(): void;
     createNewNode(parent: any, node: any): void;
     redrawNode(node: any, deep?: boolean): void;

package/dist/controls/View/View.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface ViewProps {
+    item: any;
+    tabList?: Array<any>;
+}
+export declare const View: (props: ViewProps) => JSX.Element;
+export {};

package/dist/controls/ViewPart/ViewPart.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ViewPartProps {
+    component: any;
+    settings: any;
+    props: any;
+}
+export declare let ViewPart: (props: ViewPartProps) => JSX.Element;
+export {};

package/dist/index.css

@@ -1,7 +1,6 @@
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/kendo.css');
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/treegrid.css');
 @import url('@vitrosoftware/common-ui-ts/css/white/third-party/jstree/style.min.css');
-@import url('@vitrosoftware/common-ui-ts/css/white/controls/table-view/table-view-custom-lookup-edit.css');
 
 .vitro-opacity-low {
     opacity: .3;
@@ -455,6 +454,9 @@
     }
 }
 
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/table-view/table-view-custom-lookup-edit.css');
+@import url('@vitrosoftware/common-ui-ts/css/white/controls/table-view/table-view-custom-date-edit.css');
+
 #TableView {
     border-radius: 8px;
     padding: 6px;
@@ -512,13 +514,6 @@
     background-color: #fff;
     border: 1px solid #ff5b2d !important;
 }
-
-.table-view-custom-date-edit {
-    width: 512px;
-    position: absolute;
-    top: 57px;
-    z-index: 10000;
-}
 
 ._uploader_vitro-uploader_1frFGu3 {
     width: 100%;
@@ -672,3 +667,159 @@
 .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::before {
     border-bottom-color: red;
 }
+
+._action-handler_vitro-interface-blur_e0d8w42 {
+    position: absolute;
+    z-index: 100000;
+    height: 100vh;
+    width: 100vw;
+    top: 0;
+    left: 0;
+}
+
+._view-part_vitro-view-part_1jRQS_n {
+
+}
+
+._view_vitro-view_1PIFv5i{
+
+}
+
+._tab-group_vitro-tab_1JjKD6A {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav {
+    align-items: center;
+    justify-content: center;
+}
+
+._tab-group_vitro-tab_1JjKD6A > .vitro-content {
+    position: relative;
+}
+
+._tab-group_vitro-tab_1JjKD6A .vitro-content {
+    padding-top: 18px;
+}
+
+._tab-group_vitro-tab_1JjKD6A:has(.vitro-task-detail) .vitro-content {
+    padding-top: 0;
+}
+
+.ps ._tab-group_vitro-tab_1JjKD6A .vitro-content {
+    position: relative;
+    flex: 1 1;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    overflow-y: auto;
+}
+
+.ps ._tab-group_vitro-tab_1JjKD6A .vitro-content::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+.ps ._tab-group_vitro-tab_1JjKD6A .vitro-content::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 12px;
+}
+
+.ps ._tab-group_vitro-tab_1JjKD6A .vitro-content::-webkit-scrollbar-thumb {
+    background: #e0e0e0;
+    border-radius: 4px;
+}
+
+.ps ._tab-group_vitro-tab_1JjKD6A .vitro-content::-webkit-scrollbar-thumb:hover {
+    background: #BDBDBD;
+}
+
+._tab-group_vitro-tab_1JjKD6A .vitro-time-log-history object + .vitro-control, ._tab-group_vitro-tab_1JjKD6A .vitro-time-log-history object + div {
+    padding-top: 0;
+}
+
+._tab-group_vitro-tab_1JjKD6A > div:not([class]) > div > div:first-child {
+    padding-top: 0;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div._tab-group_vitro-item_1rEUKKg:not(:first-child) {
+    border: none;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div._tab-group_vitro-item_1rEUKKg {
+    flex-grow: 1;
+    text-align: center;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div .nav-link {
+    padding: 0;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div .nav-item a {
+    border-bottom: 1px solid #e0e0e0;
+    font-family: GraphikMedium;
+    font-size: 12pt;
+    padding-bottom: 16px;
+    line-height: normal;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div .nav-item a:hover {
+    color: #0097ff;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div .nav-item a span {
+    padding-top: 3px;
+    display: inline-flex;
+    align-items: center;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div ._tab-group_active_1bm9FlF span {
+    font-weight: 500;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div .nav-item a span i {
+    margin: 0 4px;
+    font-size: 18px;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > ._tab-group_vitro-dropdown-button_2khJUBS {
+    padding-bottom: 8px;
+    margin-right: -2px;
+    width: 15px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+._tab-group_vitro-tab_1JjKD6A .nav > div .nav-item._tab-group_active_1bm9FlF a {
+    color: #0097ff !important;
+    border-bottom: 3px solid #0097ff;
+}
+
+._control-group_vitro-control_O12WSU5 {
+    padding: 6px 0;
+    width: 100%;
+    position: relative;
+}
+
+._control-group_vitro-control_O12WSU5 .vitro-control-container {
+    position: relative;
+}
+
+._control-group_vitro-control-row_3H0qlpT {
+    display: flex;
+    align-items: baseline;
+}
+
+._control-group_vitro-control-row_3H0qlpT > span {
+    display: block;
+    margin: 0 5px;
+}
+
+._control-group_vitro-control-row_3H0qlpT ._control-group_vitro-label_3M058up {
+    width: 136px;
+}
+
+._control-group_vitro-control-row_3H0qlpT > div:not(:has(div, input)) {
+    width: 136px;
+}

package/dist/index.d.ts

@@ -19,6 +19,10 @@ import { ComponentLoaderContextImpl } from "./controls/ComponentLoader/Component
 import { ComponentLoaderContext } from "./controls/ComponentLoader/ComponentLoaderContext";
 import { ActionHandler } from "./controls/ActionHandler/ActionHandler";
 import * as ACTION_HANDLER from "./controls/ActionHandler/ActionHandlerConstants";
+import { View } from "./controls/View/View";
+import { TabGroup } from "./controls/TabGroup/TabGroup";
+import { TabItem } from "./controls/TabGroup/TabItem";
+import { ControlGroup } from "./controls/ControlGroup/ControlGroup";
 export { Breadcrumbs };
 export { TopLevelMenu };
 export { TreeView, TreeViewContext, TREE_VIEW };
@@ -27,3 +31,6 @@ export { MicroFrontend };
 export { TelerikUploader, TelerikUploaderContext, TelerikUploaderContextImpl, TelerikUploaderSettings };
 export { ComponentLoader, ComponentLoaderContextImpl, ComponentLoaderContext };
 export { ActionHandler, ACTION_HANDLER };
+export { View };
+export { TabGroup };
+export { ControlGroup, TabItem };