@vitrosoftware/common-ui-ts 1.1.70 → 1.1.71

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

@@ -0,0 +1,113 @@
+.vitro-route-item {
+    display: flex;
+    width: 100%;
+    margin-top: 16px;
+}
+
+.vitro-route-item:nth-child(2) {
+    margin-top: 0;
+}
+
+.vitro-route-item-content {
+    width: 100%;
+}
+
+.vitro-button-collapse,
+.vitro-button-expand,
+.vitro-button-hide-comment,
+.vitro-button-show-comment {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    background-position: center;
+    background-size: 100%;
+    border: none;
+    background-color: transparent;
+}
+
+.vitro-button-collapse,
+.vitro-button-expand {
+    margin-right: 12px;
+}
+
+.vitro-button-collapse {
+    /* collapse-bottom.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_119831)'%3E%3Cpath id='Vector' d='M7 10.5L12 15.5L17 10.5' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.vitro-button-expand {
+    /* collapse-right.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_118517)'%3E%3Cpath id='Vector' d='M10.5 17L15.5 12L10.5 7' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.vitro-button-hide-comment {
+    /* comment-hidden.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%3Cpath d='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 2L2 22' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-show-comment {
+    /* comment.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%3Cpath d='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-avatar {
+    margin-right: 8px;
+}
+
+.vitro-date {
+    color: #222D44;
+    font-size: 14px;
+    font-family: 'InterMedium';
+    margin-left: 8px;
+}
+
+.vitro-route-item-header {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+    margin-bottom: 4px;
+}
+
+.vitro-route-item-header > div,
+.vitro-route-item-header > div > div {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-route-item-header > div:last-child > div {
+    border-radius: 4px;
+    background: #F7F9FC;
+    padding: 4px 8px;
+    margin-left: 12px;
+}
+
+.vitro-route-item-header > div:last-child div a,
+.vitro-route-item-header > div:last-child div a:hover,
+.vitro-route-item-header > div:last-child div a:visited {
+    text-decoration: none;
+    color: #326AD6;
+}
+
+.vitro-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.vitro-comment {
+    padding: 4px 8px;
+    margin-top: 4px;
+    border-radius: 4px;
+    background: #F7F9FC;
+    color: #222D44;
+    font-size: 14px;
+    width: 100%;
+}
+
+.vitro-status-color {
+    width: 8px;
+    height: 8px;
+    min-width: 8px;
+    margin-right: 8px;
+    border-radius: 50%;
+}

package/dist/controls/RouteItem/RouteItem.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface RouteItemProps {
+    id: string;
+    userName: string;
+    userImage?: string;
+    date: string;
+    status: string;
+    statusColor?: string;
+    name: string;
+    comment?: string;
+    itemUrl?: string;
+    children?: React.ReactNode;
+}
+export declare const RouteItem: (props: RouteItemProps) => JSX.Element;
+export {};

package/dist/index.css

@@ -5378,3 +5378,117 @@ ul > li:last-child > ul > li:last-child ._sidebar-item_vitro-active_7p5iOhY {
 ._checkbox-list_vitro-checkbox-list_1iZSkkv span {
     display: block;
 }
+
+._route-item_vitro-route-item_bBCgBZG {
+    display: flex;
+    width: 100%;
+    margin-top: 16px;
+}
+
+._route-item_vitro-route-item_bBCgBZG:nth-child(2) {
+    margin-top: 0;
+}
+
+._route-item_vitro-route-item-content_2CcLogk {
+    width: 100%;
+}
+
+._route-item_vitro-button-collapse_1kVB5Vo,
+._route-item_vitro-button-expand_3IuABa1,
+._route-item_vitro-button-hide-comment_2CiY-Ch,
+._route-item_vitro-button-show-comment_DJt2SLC {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    background-position: center;
+    background-size: 100%;
+    border: none;
+    background-color: transparent;
+}
+
+._route-item_vitro-button-collapse_1kVB5Vo,
+._route-item_vitro-button-expand_3IuABa1 {
+    margin-right: 12px;
+}
+
+._route-item_vitro-button-collapse_1kVB5Vo {
+    /* collapse-bottom.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_119831)'%3E%3Cpath id='Vector' d='M7 10.5L12 15.5L17 10.5' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+._route-item_vitro-button-expand_3IuABa1 {
+    /* collapse-right.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='chevron-right' filter='url(%23filter0_dd_2119_118517)'%3E%3Cpath id='Vector' d='M10.5 17L15.5 12L10.5 7' stroke='%234A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+._route-item_vitro-button-hide-comment_2CiY-Ch {
+    /* comment-hidden.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%3Cpath d='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M22 2L2 22' stroke='%23222D44' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
+}
+
+._route-item_vitro-button-show-comment_DJt2SLC {
+    /* comment.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%3Cpath d='M8.5 19H8C3 19 2 19 2 14V9C2 4 3 3 8 3H16C21 3 22 4 22 9V14C22 18 21 19 16 19H15.5C15.19 19 14.89 19.15 14.7 19.4L13.2 21.4C12.54 22.28 11.46 22.28 10.8 21.4L9.3 19.4C9.14 19.18 8.77 19 8.5 19Z' stroke='%234A556C' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.9918 11.75H17.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M11.9918 11.75H12.0052' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.99176 11.75H7.00523' stroke='%234A556C' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+._route-item_vitro-avatar_3Dypnmz {
+    margin-right: 8px;
+}
+
+._route-item_vitro-date_3ojnKSb {
+    color: #222D44;
+    font-size: 14px;
+    font-family: 'InterMedium';
+    margin-left: 8px;
+}
+
+._route-item_vitro-route-item-header_y69bLwZ {
+    width: 100%;
+    justify-content: space-between;
+    display: flex;
+    margin-bottom: 4px;
+}
+
+._route-item_vitro-route-item-header_y69bLwZ > div,
+._route-item_vitro-route-item-header_y69bLwZ > div > div {
+    display: flex;
+    align-items: center;
+}
+
+._route-item_vitro-route-item-header_y69bLwZ > div:last-child > div {
+    border-radius: 4px;
+    background: #F7F9FC;
+    padding: 4px 8px;
+    margin-left: 12px;
+}
+
+._route-item_vitro-route-item-header_y69bLwZ > div:last-child div a,
+._route-item_vitro-route-item-header_y69bLwZ > div:last-child div a:hover,
+._route-item_vitro-route-item-header_y69bLwZ > div:last-child div a:visited {
+    text-decoration: none;
+    color: #326AD6;
+}
+
+._route-item_vitro-flex_3ebkqZ9 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+._route-item_vitro-comment_2K7RwrZ {
+    padding: 4px 8px;
+    margin-top: 4px;
+    border-radius: 4px;
+    background: #F7F9FC;
+    color: #222D44;
+    font-size: 14px;
+    width: 100%;
+}
+
+._route-item_vitro-status-color_VgXzXKD {
+    width: 8px;
+    height: 8px;
+    min-width: 8px;
+    margin-right: 8px;
+    border-radius: 50%;
+}

package/dist/index.d.ts

@@ -74,6 +74,7 @@ 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';
+import { RouteItem } from './controls/RouteItem/RouteItem';
 export { Breadcrumbs };
 export { TopLevelMenu };
 export { TreeView, TreeViewContext, TREE_VIEW, TreeViewProps };
@@ -118,3 +119,4 @@ export { FieldIterator };
 export { Tooltip, TOOLTIP };
 export { CONTROL };
 export { PasswordInput };
+export { RouteItem };

package/dist/index.js

@@ -65682,6 +65682,53 @@ var Search = function Search(props) {
   }))));
 };
 
+var styles$Q = {"vitro-route-item":"_route-item_vitro-route-item_bBCgBZG","vitro-route-item-content":"_route-item_vitro-route-item-content_2CcLogk","vitro-button-collapse":"_route-item_vitro-button-collapse_1kVB5Vo","vitro-button-expand":"_route-item_vitro-button-expand_3IuABa1","vitro-button-hide-comment":"_route-item_vitro-button-hide-comment_2CiY-Ch","vitro-button-show-comment":"_route-item_vitro-button-show-comment_DJt2SLC","vitro-avatar":"_route-item_vitro-avatar_3Dypnmz","vitro-date":"_route-item_vitro-date_3ojnKSb","vitro-route-item-header":"_route-item_vitro-route-item-header_y69bLwZ","vitro-flex":"_route-item_vitro-flex_3ebkqZ9","vitro-comment":"_route-item_vitro-comment_2K7RwrZ","vitro-status-color":"_route-item_vitro-status-color_VgXzXKD"};
+
+var RouteItem = function RouteItem(props) {
+  var _useState = React.useState(false),
+    isExpanded = _useState[0],
+    setIsExpanded = _useState[1];
+  var _useState2 = React.useState(false),
+    isShowComment = _useState2[0],
+    setIsShowComment = _useState2[1];
+  return React__default.createElement("div", {
+    className: styles$Q['vitro-route-item']
+  }, props.children ? React__default.createElement("button", {
+    className: isExpanded ? styles$Q['vitro-button-collapse'] : styles$Q['vitro-button-expand'],
+    onClick: function onClick() {
+      return setIsExpanded(!isExpanded);
+    }
+  }) : null, React__default.createElement("div", {
+    className: styles$Q['vitro-route-item-content']
+  }, React__default.createElement("div", {
+    className: styles$Q['vitro-route-item-header']
+  }, React__default.createElement("div", null, React__default.createElement("div", null, React__default.createElement(Avatar, {
+    userName: props.userName,
+    image: props.userImage,
+    className: styles$Q['vitro-avatar']
+  }), props.userName), React__default.createElement("div", {
+    className: styles$Q['vitro-date']
+  }, props.date)), React__default.createElement("div", null, React__default.createElement("div", null, props.statusColor && React__default.createElement("div", {
+    className: styles$Q['vitro-status-color'],
+    style: {
+      background: props.statusColor
+    }
+  }), props.status), React__default.createElement("div", null, React__default.createElement("a", {
+    href: props.itemUrl
+  }, CTRL.SHARP + props.id)))), React__default.createElement("div", null, React__default.createElement("div", {
+    className: styles$Q['vitro-flex']
+  }, React__default.createElement("span", null, props.name), props.comment && React__default.createElement("button", {
+    className: isShowComment ? styles$Q['vitro-button-hide-comment'] : styles$Q['vitro-button-show-comment'],
+    onClick: function onClick() {
+      return setIsShowComment(!isShowComment);
+    }
+  })), isShowComment && props.comment && React__default.createElement("div", {
+    className: styles$Q['vitro-comment']
+  }, props.comment)), isExpanded && React__default.createElement("div", {
+    className: styles$Q['vitro-route-item-child']
+  }, props.children)));
+};
+
 exports.ACTION_HANDLER = ActionHandlerConstants;
 exports.ALERT = AlertConstants;
 exports.ActionHandler = ActionHandler;
@@ -65722,6 +65769,7 @@ exports.NUMBER_INPUT = NumberInputConstants;
 exports.NumberInput = NumberInput;
 exports.PasswordInput = PasswordInput;
 exports.PdfViewer = PdfViewer;
+exports.RouteItem = RouteItem;
 exports.ScrollBar = ScrollBar;
 exports.Search = Search;
 exports.Sidebar = Sidebar;