@vitrosoftware/common-ui-ts 1.1.259 → 1.1.261

package/css/std/controls/bim-viewer/bim-viewer-index.css

@@ -14716,6 +14716,14 @@ div:focus-visible {
     height: 28px;
 }
 
+.toolbarButton#btnSaveCoordinationModel::before {
+    content: '';
+    background-image: url('img/save-summary-model.svg');
+    background-size: 100%;
+    width: 28px;
+    height: 28px;
+}
+
 .TWMenuMain {
     z-index: 99000011 !important;
 }

package/css/std/controls/bim-viewer/bim-viewer.css

@@ -444,6 +444,14 @@ div:focus-visible {
     height: 28px;
 }
 
+.toolbarButton#btnSaveCoordinationModel::before {
+    content: '';
+    background-image: url('img/save-summary-model.svg');
+    background-size: 100%;
+    width: 28px;
+    height: 28px;
+}
+
 .TWMenuMain {
     z-index: 99000011 !important;
 }

package/css/std/controls/bim-viewer/img/save-summary-model.svg

@@ -0,0 +1,12 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4699_9737)">
+<path d="M12.2393 1.06152L17.7393 4.06152L18 4.20312V10.2031L23.2393 13.0615L23.5 13.2031V19.7969L23.2393 19.9385L17.7393 22.9385L17.5 23.0693L17.2607 22.9385L12 20.0684L6.73926 22.9385L6.5 23.0693L6.26074 22.9385L0.760742 19.9385L0.5 19.7969V13.2031L0.760742 13.0615L6 10.2031V4.20312L6.26074 4.06152L11.7607 1.06152L12 0.930664L12.2393 1.06152ZM1.5 19.2031L6 21.6582V16.7959L1.5 14.3408V19.2031ZM12.5 7.7959V9.03125C12.3362 9.01082 12.1693 9 12 9C11.8307 9 11.6638 9.01082 11.5 9.03125V7.7959L7 5.34082V10.2031L8.51758 11.0312C8.35363 11.3206 8.22486 11.6324 8.13672 11.9609L6.5 11.0684L2.04297 13.5L6.5 15.9307L8.45898 14.8613C8.61636 15.1601 8.81037 15.4365 9.03516 15.6846L7 16.7959V21.6582L11.5 19.2031V16.9678C11.6638 16.9882 11.8306 17 12 17C12.1694 17 12.3362 16.9882 12.5 16.9678V19.2031L17 21.6582V16.7959L14.9639 15.6846C15.1887 15.4365 15.3826 15.1601 15.54 14.8613L17.5 15.9307L21.9561 13.5L17.5 11.0684L15.8623 11.9609C15.7741 11.6323 15.6455 11.3207 15.4814 11.0312L17 10.2031V5.34082L12.5 7.7959ZM18 16.7959V21.6582L22.5 19.2031V14.3408L18 16.7959ZM7.54297 4.5L12 6.93066L16.4561 4.5L12 2.06836L7.54297 4.5Z" fill="white"/>
+<rect x="7" y="8" width="10" height="10" rx="5" fill="white"/>
+<path d="M14.8237 10.9036C15.0496 11.1169 15.0597 11.4729 14.8464 11.6987L11.6589 15.0737C11.5546 15.1842 11.41 15.2478 11.258 15.2499C11.1061 15.2521 10.9597 15.1927 10.8523 15.0852L9.16475 13.3977C8.94508 13.1781 8.94508 12.8219 9.16475 12.6023C9.38442 12.3826 9.74058 12.3826 9.96025 12.6023L11.2385 13.8805L14.0286 10.9263C14.2419 10.7004 14.5979 10.6902 14.8237 10.9036Z" fill="#0D1115"/>
+</g>
+<defs>
+<clipPath id="clip0_4699_9737">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/css/std/controls/dropdown-button/dropdown-button.css

@@ -231,6 +231,18 @@
     background-color: #3274E0;
 }
 
+:global(.vitro-context-button).vitro-compact-view,
+:global(.vitro-context-button:hover).vitro-compact-view,
+:global(.vitro-context-button:focus).vitro-compact-view,
+:global(.vitro-context-button:active).vitro-compact-view {
+    width: 24px;
+    height: 24px;
+}
+
+.vitro-compact-view.vitro-dropdown-menu[data-popper-placement="bottom-end"]::before {
+    right: -4px;
+}
+
 @media (max-width: 800px) {
     .vitro-dropdown-toggle .vitro-image-container + div {
         display: none;

package/css/std/controls/flex-box/flex-box.css

@@ -6,4 +6,16 @@
 
 .vitro-flex-column {
     flex-direction: column;
+}
+
+.vitro-full-width {
+    width: 100%;
+}
+
+.vitro-full-height {
+    height: 100%;
+}
+
+.vitro-wrap {
+    flex-wrap: wrap;
 }

package/css/std/controls/workflow-route/img/collapse-bottom-small.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'>
+	<g id='chevron-right' filter='url(#filter0_dd_2119_119831)'>
+		<path id='Vector' d='M7 10.5L12 15.5L17 10.5' stroke='#4A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>
+	</g>
+</svg>

package/css/std/controls/workflow-route/img/collapse-right-small.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'><g id='chevron-right' filter='url(#filter0_dd_2119_118517)'><path id='Vector' d='M10.5 17L15.5 12L10.5 7' stroke='#4A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g></svg>

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

@@ -0,0 +1,57 @@
+.vitro-workflow-route {
+    white-space: nowrap;
+}
+
+.vitro-resolved {
+    text-decoration: line-through;
+}
+
+.vitro-right {
+    margin-left: auto;
+}
+
+.vitro-workflow-route-header,
+.vitro-workflow-route-header-mobile {
+    border-bottom: 1px solid #E4E6EC;
+    min-height: 32px;
+}
+
+.vitro-workflow-route-header {
+    padding: 0 4px 0 4px;
+}
+
+.vitro-workflow-route-header-mobile {
+    padding: 4px;
+}
+
+.vitro-active {
+    background-color: #DCEEFF;
+}
+
+.vitro-workflow-route-content {
+    overflow: hidden;
+}
+
+.vitro-name {
+    white-space: normal;
+    padding-top: 4px;
+}
+
+.vitro-workflow-route:global(.vitro-expanded) .vitro-expand-collapse-button > div,
+.vitro-workflow-route:global(.vitro-expanded) .vitro-expand-collapse-button-mobile > div {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route/img/collapse-bottom-small.svg');
+}
+
+.vitro-workflow-route:global(.vitro-collapsed) .vitro-expand-collapse-button > div,
+.vitro-workflow-route:global(.vitro-collapsed) .vitro-expand-collapse-button-mobile > div {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route/img/collapse-right-small.svg');
+}
+
+.vitro-expand-collapse-button-mobile {
+    margin-bottom: auto;
+}
+
+.vitro-dropdown-button-container {
+    width: 24px;
+    height: 24px;
+}

package/css/std/controls/workflow-route-step/img/collapse-bottom-small.svg

@@ -0,0 +1,5 @@
+<svg viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'>
+	<g id='chevron-right' filter='url(#filter0_dd_2119_119831)'>
+		<path id='Vector' d='M7 10.5L12 15.5L17 10.5' stroke='#4A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/>
+	</g>
+</svg>

package/css/std/controls/workflow-route-step/img/collapse-right-small.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 24 26' fill='none' xmlns='http://www.w3.org/2000/svg'><g id='chevron-right' filter='url(#filter0_dd_2119_118517)'><path id='Vector' d='M10.5 17L15.5 12L10.5 7' stroke='#4A556C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></g></svg>

package/css/std/controls/workflow-route-step/workflow-route-step.css

@@ -0,0 +1,79 @@
+.vitro-disabled {
+    opacity: 0.7;
+}
+
+.vitro-right {
+    margin-left: auto;
+}
+
+.vitro-workflow-route-step-header,
+.vitro-workflow-route-step-header-mobile {
+    min-height: 32px;
+    position: relative;
+}
+
+.vitro-workflow-route-step-header {
+    padding: 0 4px 0 24px;
+}
+
+.vitro-workflow-route-step-header-mobile {
+    padding: 4px 4px 4px 24px;
+}
+
+.vitro-workflow-route-step-header::before,
+.vitro-workflow-route-step-header::after,
+.vitro-workflow-route-step-header-mobile::before,
+.vitro-workflow-route-step-header-mobile::after {
+    content: '';
+    width: 100%;
+    height: 1px;
+    background-color: #E4E6EC;
+    position: absolute;
+    left: 0;
+}
+
+.vitro-workflow-route-step-header::before,
+.vitro-workflow-route-step-header-mobile::before {
+    top: 0;
+}
+
+.vitro-workflow-route-step-header::after,
+.vitro-workflow-route-step-header-mobile::after {
+    top: 100%;
+}
+
+.vitro-active {
+    background-color: #F3F8FF;
+}
+
+.vitro-workflow-route-step:global(.vitro-expanded) .vitro-expand-collapse-button > div,
+.vitro-workflow-route-step:global(.vitro-expanded) .vitro-expand-collapse-button-mobile > div {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-step/img/collapse-bottom-small.svg');
+}
+
+.vitro-workflow-route-step:global(.vitro-collapsed) .vitro-expand-collapse-button > div,
+.vitro-workflow-route-step:global(.vitro-collapsed) .vitro-expand-collapse-button-mobile > div {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-step/img/collapse-right-small.svg');
+}
+
+.vitro-expand-collapse-button-mobile {
+    margin-bottom: auto;
+}
+
+.vitro-dropdown-button-container {
+    width: 24px;
+    height: 24px;
+}
+
+.vitro-status-icon {
+    width: 12px;
+    height: 12px;
+}
+
+.vitro-active .vitro-name {
+    font-family: 'InterMedium';
+}
+
+.vitro-name {
+    white-space: normal;
+}

package/css/std/controls/workflow-route-task/img/assigned-to-fact.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0029 11C14.2121 11 16.0029 9.20914 16.0029 7C16.0029 4.79086 14.2121 3 12.0029 3C9.79379 3 8.00293 4.79086 8.00293 7C8.00293 9.20914 9.79379 11 12.0029 11Z" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.3438 13.5088L12.0039 13.5H12.002C11.8888 13.5003 11.7754 13.5033 11.6621 13.5088C10.3909 13.5706 9.15639 13.9623 8.07422 14.6465C6.99215 15.3307 6.09756 16.2847 5.47363 17.418C4.84981 18.5512 4.51622 19.8277 4.50293 21.1279V22C4.50293 22.1326 4.55565 22.2598 4.64941 22.3535C4.74318 22.4473 4.87032 22.5 5.00293 22.5H13.0029V21.5H5.50293V21.1387C5.51448 20.0024 5.80592 18.888 6.34961 17.9004C6.89323 16.9129 7.67099 16.085 8.6084 15.4922C9.54582 14.8994 10.6135 14.5612 11.7109 14.5078C11.8083 14.5031 11.9057 14.5002 12.0029 14.5C12.1002 14.5002 12.1975 14.5031 12.2949 14.5078C13.3924 14.5612 14.46 14.8994 15.3975 15.4922C15.6408 15.6461 15.8733 15.8158 16.0938 16H17.5284C17.0616 15.4777 16.5248 15.0216 15.9316 14.6465C14.8495 13.9623 13.615 13.5706 12.3438 13.5088Z" fill="#222D44"/>
+<path d="M21.7529 17L16.7529 22L14.2529 19.5" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/workflow-route-task/img/assigned-to-list.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.984 10.5891C13.933 10.5891 15.513 9.00918 15.513 7.0602C15.513 5.11121 13.933 3.53125 11.984 3.53125C10.035 3.53125 8.45508 5.11121 8.45508 7.0602C8.45508 9.00918 10.035 10.5891 11.984 10.5891Z" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.63086 20.4693H11.983H18.3351V19.704C18.3238 18.6281 18.0401 17.5726 17.5103 16.6361C16.9806 15.6995 16.2221 14.9126 15.3057 14.3487C14.3894 13.7847 13.345 13.4623 12.2702 13.4114C12.1744 13.4069 12.0786 13.4045 11.983 13.4043C11.8873 13.4045 11.7915 13.4069 11.6957 13.4114C10.6209 13.4623 9.57657 13.7847 8.66021 14.3487C7.74385 14.9126 6.98537 15.6995 6.45561 16.6361C5.92585 17.5726 5.6421 18.6281 5.63086 19.704V20.4693Z" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17.8115 9.97339C19.3203 9.97339 20.5433 8.75032 20.5433 7.24158C20.5433 5.73284 19.3203 4.50977 17.8115 4.50977" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.15918 9.97339C4.65044 9.97339 3.42737 8.75032 3.42737 7.24158C3.42737 5.73284 4.65044 4.50977 6.15918 4.50977" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.5551 17.6204H22.7406V17.028C22.7319 16.1951 22.5122 15.378 22.1021 14.653C21.692 13.9281 21.1049 13.3189 20.3955 12.8823C19.9369 12.6001 19.437 12.396 18.916 12.2764" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3.4322 17.6243H1.24675V17.0319C1.25545 16.199 1.47511 15.3819 1.8852 14.6569C2.2953 13.932 2.88245 13.3228 3.59182 12.8862C4.05038 12.604 4.55033 12.4 5.07129 12.2803" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/workflow-route-task/img/assigned-to.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0029 11C14.2121 11 16.0029 9.20914 16.0029 7C16.0029 4.79086 14.2121 3 12.0029 3C9.79379 3 8.00293 4.79086 8.00293 7C8.00293 9.20914 9.79379 11 12.0029 11Z" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.3438 13.5088C13.615 13.5706 14.8495 13.9623 15.9316 14.6465C17.0137 15.3307 17.9083 16.2847 18.5322 17.418C19.1561 18.5512 19.4896 19.8277 19.5029 21.1279V22C19.5029 22.2761 19.2791 22.5 19.0029 22.5H5.00293C4.87032 22.5 4.74318 22.4473 4.64941 22.3535C4.55565 22.2597 4.50293 22.1326 4.50293 22V21.1279C4.51622 19.8277 4.84981 18.5512 5.47363 17.418C6.09756 16.2847 6.99215 15.3307 8.07422 14.6465C9.15639 13.9623 10.3909 13.5706 11.6621 13.5088C11.7754 13.5033 11.8888 13.5003 12.002 13.5H12.0039L12.3438 13.5088ZM11.7109 14.5078C10.6135 14.5612 9.54582 14.8994 8.6084 15.4922C7.67099 16.085 6.89323 16.9129 6.34961 17.9004C5.80592 18.888 5.51448 20.0024 5.50293 21.1387V21.5H18.5029V21.1387L18.4854 20.7139C18.4144 19.7259 18.132 18.7646 17.6562 17.9004C17.1126 16.9129 16.3349 16.085 15.3975 15.4922C14.46 14.8994 13.3924 14.5612 12.2949 14.5078C12.1975 14.5031 12.1002 14.5002 12.0029 14.5C11.9057 14.5002 11.8083 14.5031 11.7109 14.5078Z" fill="#222D44"/>
+</svg>

package/css/std/controls/workflow-route-task/img/calendar-check.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7459 10.8791C15.807 10.9401 15.8555 11.0125 15.8886 11.0922C15.9216 11.172 15.9387 11.2574 15.9387 11.3438C15.9387 11.4301 15.9216 11.5155 15.8886 11.5953C15.8555 11.675 15.807 11.7474 15.7459 11.8084L11.8084 15.7459C11.7474 15.807 11.675 15.8555 11.5953 15.8886C11.5155 15.9216 11.4301 15.9387 11.3438 15.9387C11.2574 15.9387 11.172 15.9216 11.0922 15.8886C11.0125 15.8555 10.9401 15.807 10.8791 15.7459L8.91037 13.7771C8.84936 13.7161 8.80096 13.6437 8.76794 13.564C8.73492 13.4842 8.71792 13.3988 8.71792 13.3125C8.71792 13.2262 8.73492 13.1408 8.76794 13.061C8.80096 12.9813 8.84936 12.9089 8.91037 12.8479C9.0336 12.7246 9.20073 12.6554 9.375 12.6554C9.46129 12.6554 9.54673 12.6724 9.62645 12.7054C9.70617 12.7385 9.77861 12.7869 9.83963 12.8479L11.3438 14.3533L14.8166 10.8791C14.8776 10.818 14.95 10.7695 15.0297 10.7364C15.1095 10.7034 15.1949 10.6863 15.2812 10.6863C15.3676 10.6863 15.453 10.7034 15.5328 10.7364C15.6125 10.7695 15.6849 10.818 15.7459 10.8791Z" fill="#4A556C"/>
+<path d="M6.09375 1.5C6.2678 1.5 6.43472 1.56914 6.55779 1.69221C6.68086 1.81528 6.75 1.9822 6.75 2.15625V2.8125H17.25V2.15625C17.25 1.9822 17.3191 1.81528 17.4422 1.69221C17.5653 1.56914 17.7322 1.5 17.9062 1.5C18.0803 1.5 18.2472 1.56914 18.3703 1.69221C18.4934 1.81528 18.5625 1.9822 18.5625 2.15625V2.8125H19.875C20.5712 2.8125 21.2389 3.08906 21.7312 3.58134C22.2234 4.07363 22.5 4.74131 22.5 5.4375V19.875C22.5 20.5712 22.2234 21.2389 21.7312 21.7312C21.2389 22.2234 20.5712 22.5 19.875 22.5H4.125C3.42881 22.5 2.76113 22.2234 2.26884 21.7312C1.77656 21.2389 1.5 20.5712 1.5 19.875V5.4375C1.5 4.74131 1.77656 4.07363 2.26884 3.58134C2.76113 3.08906 3.42881 2.8125 4.125 2.8125H5.4375V2.15625C5.4375 1.9822 5.50664 1.81528 5.62971 1.69221C5.75278 1.56914 5.9197 1.5 6.09375 1.5ZM2.8125 6.75V19.875C2.8125 20.2231 2.95078 20.5569 3.19692 20.8031C3.44306 21.0492 3.7769 21.1875 4.125 21.1875H19.875C20.2231 21.1875 20.5569 21.0492 20.8031 20.8031C21.0492 20.5569 21.1875 20.2231 21.1875 19.875V6.75H2.8125Z" fill="#4A556C"/>
+</svg>

package/css/std/controls/workflow-route-task/img/calendar.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.09375 1.5C6.2678 1.5 6.43472 1.56914 6.55779 1.69221C6.68086 1.81528 6.75 1.9822 6.75 2.15625V2.8125H17.25V2.15625C17.25 1.9822 17.3191 1.81528 17.4422 1.69221C17.5653 1.56914 17.7322 1.5 17.9062 1.5C18.0803 1.5 18.2472 1.56914 18.3703 1.69221C18.4934 1.81528 18.5625 1.9822 18.5625 2.15625V2.8125H19.875C20.5712 2.8125 21.2389 3.08906 21.7312 3.58134C22.2234 4.07363 22.5 4.74131 22.5 5.4375V19.875C22.5 20.5712 22.2234 21.2389 21.7312 21.7312C21.2389 22.2234 20.5712 22.5 19.875 22.5H4.125C3.42881 22.5 2.76113 22.2234 2.26884 21.7312C1.77656 21.2389 1.5 20.5712 1.5 19.875V5.4375C1.5 4.74131 1.77656 4.07363 2.26884 3.58134C2.76113 3.08906 3.42881 2.8125 4.125 2.8125H5.4375V2.15625C5.4375 1.9822 5.50664 1.81528 5.62971 1.69221C5.75278 1.56914 5.9197 1.5 6.09375 1.5ZM2.8125 6.75V19.875C2.8125 20.2231 2.95078 20.5569 3.19692 20.8031C3.44306 21.0492 3.7769 21.1875 4.125 21.1875H19.875C20.2231 21.1875 20.5569 21.0492 20.8031 20.8031C21.0492 20.5569 21.1875 20.2231 21.1875 19.875V6.75H2.8125Z" fill="#4A556C"/>
+</svg>

package/css/std/controls/workflow-route-task/img/comment-active.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path 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" fill="#92C1FD"/>
+<path d="M16.9918 11.75H17.0052" stroke="#326AD6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9927 11.75H12.0062" stroke="#326AD6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.99176 11.75H7.00523" stroke="#326AD6" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/workflow-route-task/img/comment.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path 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="#222D44" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.9918 11.75H17.0052" stroke="#222D44" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.9927 11.75H12.0062" stroke="#222D44" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.99176 11.75H7.00523" stroke="#222D44" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/workflow-route-task/img/warning.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.82715 4.82129C10.7863 3.13849 13.2119 3.13842 14.1709 4.82129L20.9756 16.7617C21.9254 18.4283 20.722 20.5 18.8037 20.5H5.19434C3.27607 20.5 2.0717 18.4283 3.02148 16.7617L9.82715 4.82129Z" stroke="#4A556C"/>
+<path d="M12 8V13" stroke="#222D44" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="12" cy="17" r="1" fill="#222D44"/>
+</svg>

package/css/std/controls/workflow-route-task/workflow-route-task.css

@@ -0,0 +1,171 @@
+.vitro-workflow-route-task,
+.vitro-workflow-route-task-mobile {
+    padding: 0 4px 0 24px;
+    position: relative;
+    min-height: 32px;
+}
+
+.vitro-workflow-route-task::after,
+.vitro-workflow-route-task-mobile::after {
+    content: '';
+    height: 1px;
+    background-color: #E4E6EC;
+    position: absolute;
+    top: 100%;
+}
+
+.vitro-workflow-route-task::after {
+    width: calc(100% - 24px);
+}
+
+.vitro-workflow-route-task-mobile::after {
+    width: 100%;
+    left: 0;
+}
+
+.vitro-workflow-route-task div,
+.vitro-workflow-route-task-mobile div {
+    white-space: nowrap;
+}
+
+.vitro-link {
+    padding: 0 4px;
+}
+
+.vitro-right {
+    margin-left: auto;
+}
+
+.vitro-user-container,
+.vitro-user-container > div,
+.vitro-user-container > div > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.vitro-user-list-container {
+    align-items: flex-start;
+    padding: 4px;
+}
+
+.vitro-end-date-fact-container {
+    width: 112px;
+}
+
+.vitro-end-date-plan,
+.vitro-end-date-fact {
+    padding: 0 4px;
+}
+
+.vitro-end-date-plan::before,
+.vitro-end-date-fact::before {
+    content: '';
+    width: 24px;
+    height: 24px;
+    display: block;
+    background-size: 100%;
+    background-position: 100%;
+    flex-shrink: 0;
+}
+
+.vitro-end-date-plan::before {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/calendar.svg');
+}
+
+.vitro-end-date-fact::before {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/calendar-check.svg');
+}
+
+.vitro-expired {
+    color: #D13438;
+}
+
+.vitro-dropdown-button-container {
+    width: 24px;
+}
+
+.vitro-toggle-comment,
+.vitro-toggle-comment-active {
+    width: 24px;
+    height: 24px;
+}
+
+.vitro-toggle-comment {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/comment.svg');
+}
+
+.vitro-toggle-comment-active {
+    background-color: #F3F8FF;
+    border-radius: 4px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/comment-active.svg');
+}
+
+.vitro-assigned-to,
+.vitro-assigned-to-fact,
+.vitro-assigned-to-list,
+.vitro-issue {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.vitro-assigned-to {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/assigned-to.svg');
+}
+
+.vitro-assigned-to-fact {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/assigned-to-fact.svg');
+}
+
+.vitro-assigned-to-list {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/assigned-to-list.svg');
+}
+
+.vitro-issue {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/workflow-route-task/img/warning.svg');
+}
+
+.vitro-icon-container {
+    width: 32px;
+    flex-shrink: 0;
+}
+
+.vitro-status-icon {
+    width: 12px;
+    height: 12px;
+}
+
+.vitro-status-container {
+    min-width: 20px;
+}
+
+.vitro-comment {
+    width: 100%;
+    padding: 4px 8px;
+    border-radius: 4px;
+    white-space: pre-wrap;
+    background-color: #F7F9FC;
+}
+
+.vitro-comment-container {
+    padding: 4px;
+}
+
+.vitro-data-container,
+.vitro-data-container-mobile {
+    padding: 4px 0;
+    position: relative;
+}
+
+.vitro-data-container::after {
+    content: '';
+    width: 100%;
+    height: 1px;
+    position: absolute;
+    top: 100%;
+    background-color: rgba(228, 230, 236, 0.5);
+}
+
+.vitro-date-container {
+    padding: 4px;
+}