@vitrosoftware/common-ui-ts 1.1.11 → 1.1.13

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

@@ -0,0 +1,588 @@
+.TWMain, .TWMain * {
+    font-size: 14px;
+    line-height: 16px;
+    font-family: "InterRegular";
+    color: #222D44 !important;
+    border: none;
+}
+
+.TWMenuMain {
+    z-index: 1000;
+}
+
+.TWCustScroll3X .TWHScrollSpace {
+    width: 12px;
+    height: 12px;
+}
+
+.TWVScroll {
+    width: 10px !important;
+    border: 1px solid #F7F9FC;
+    box-sizing: border-box;
+}
+
+.TWHScroll {
+    height: 10px !important;
+    box-sizing: border-box;
+}
+
+.TWHScrollLeft, .TWHScrollMid, .TWHScrollRight {
+    border: 1px solid #F7F9FC !important;
+    background: #fff
+}
+
+.TWCustScroll3Right, .TWCustScroll3RightHidden {
+    height: 10px;
+    background: #fff;
+}
+
+.TWCustScroll3Left, .TWCustScroll3LeftHover {
+    padding: 3px 5px;
+}
+
+.TWCustScroll3Down, .TWCustScroll3DownHidden {
+    width: 10px;
+    background: #fff
+}
+
+.TWCustScroll3Up, .TWCustScroll3UpHover {
+    padding: 5px 3px;
+    background: #fff
+}
+
+.TWCustScroll3SliderRight, .TWCustScroll3SliderLeft,
+.TWCustScroll3SliderRightHover, .TWCustScroll3SliderLeftHover {
+    background: #E4E6EC;
+    height: 4px;
+    margin: 0;
+    border-radius: 4px;
+}
+
+.TWCustScroll3SliderDown, .TWCustScroll3SliderUp,
+.TWCustScroll3SliderDownHover, .TWCustScroll3SliderUpHover {
+    background: #E4E6EC;
+    width: 4px;
+    margin: 0;
+    border-radius: 4px;
+}
+
+.TWCellHeader {
+    font-family: "InterMedium" !important;
+    background: #F7F9FC;
+    padding: 4px 8px !important;
+}
+
+.TWHeaderButton {
+    padding: 0 !important;
+}
+
+.TWHeaderFont {
+    font-weight: unset;
+}
+
+.TWInt, .TWFloat, .TWDate {
+    text-align: unset;
+}
+
+.TWDataRow td {
+    border-bottom: 1px solid #E4E6EC !important;
+}
+
+.TWCellFilter, .TWCellFilterPanel, .TWGanttFilter {
+    background-color: #F7F9FC;
+    border-top: 1px solid #E4E6EC !important;
+}
+
+.TWFilter0Left, .TWFilter0Right, .TWFilter0Menu {
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50781 11.4946L8.00315 7.99924L11.4985 11.4946M11.4985 4.50391L8.00248 7.99924L4.50781 4.50391' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.TWCellBase.TWCellPanel,
+.TWCellBase.TWCellPanel {
+    padding: 0 8px;
+}
+
+.TWHeaderButton {
+    padding: 0 !important;
+}
+
+.TWLow .TWIconLeft {
+    padding-left: 39px !important;
+    background-position: 7px;
+    background-size: 24px;
+}
+
+.TWLow .TWIconRight {
+    background-position-x: -8px;
+    background-size: 24px;
+}
+
+.TWFillRow {
+    border: none !important;
+    border-bottom: none !important;
+    background: #fff !important;
+}
+
+.TWFocusRowBackground {
+    background: #0085FF !important;
+    opacity: 0.13 !important;
+}
+
+.TWMenuMain {
+    width: 241px !important;
+    margin-top: 8px !important;
+    border: none;
+    border-radius: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+.TWMenuMain::before {
+    content: '';
+    display: block;
+    height: 11px;
+    width: 16px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 26px;
+    top: -11px;
+    /* dropdown-arrow.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
+}
+
+.TWMenuOuter {
+    padding: 0;
+    margin: 0;
+    border-radius: 4px !important;
+    border: none !important;
+    min-width: 241px !important;
+}
+
+.TWMenuBody {
+    margin: 0 !important;
+    width: 100%;
+}
+
+.TWMenuBody {
+    cursor: default;
+    margin: 0px 1px 0px 1px;
+}
+
+.TWMenuFocus, .TWMenuHover {
+    background: #F3F8FF !important;
+}
+
+.TWMenuItem {
+    margin: 0 !important;
+    padding: 8px 0 !important;
+}
+
+.TWMenuItemText {
+    line-height: 150%;
+    padding-left: 12px;
+}
+
+.TWMenuItemIcon {
+    height: 20px;
+    width: 32px;
+    background-size: 20px;
+    background-position-x: 12px;
+}
+
+.TWCell {
+    padding: 0 8px !important;
+}
+
+.TWCheck0Left,
+.TWMenuUncheckedIconLeft, .TWMenuUncheckedIconRight,
+.TWBool0, .TWBool0RO {
+    /* ico-tableview-checkbox-empty.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Crect fill='none' stroke='%23bdbdbd' stroke-width='2' x='10' y='10' width='40' height='40' rx='5' ry='5'/%3E%3C/svg%3E") !important;
+}
+
+.TWCheck1Left,
+.TWMenuCheckedIconLeft, .TWMenuCheckedIconRight,
+.TWFilter1, .TWGroup1, .TWSearch1,
+.TWBool1, .TWBool1RO {
+    /* ico-tableview-checkbox-full.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Crect fill='%23fff' stroke='%23bdbdbd' stroke-width='2' x='10' y='10' width='40' height='40' rx='5' ry='5'/%3E%3Cpolyline fill='none' stroke='%23ff5b2d' stroke-width='6' points='16,28 28,38 44,20'/%3E%3C/svg%3E") !important;
+}
+
+.TWPickEmpty {
+    /* ico-tableview-calendar-empty.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpath fill='%23ff5b2d' d='M45.6,14.4C37,5.9,23,5.9,14.4,14.4s-8.6,22.5,0,31.1s22.5,8.6,31.1,0S54.1,23,45.6,14.4z M38.5,41.3L30,32.8l-8.5,8.5l-2.8-2.8l8.5-8.5l-8.5-8.5l2.8-2.8l8.5,8.5l8.5-8.5l2.8,2.8L32.8,30l8.5,8.5L38.5,41.3z' stroke='%23fff'/%3E%3C/svg%3E") !important;
+}
+
+.TWSort1Left, .TWSort1Right,
+.TWSort2Left, .TWSort2Right,
+.TWSort3Left, .TWSort3Right {
+    background-repeat: no-repeat !important;
+    height: 24px !important;
+    width: 24px !important;
+    background-size: 100% !important;
+    background-position: center !important;
+    /* tableview-sort-top.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='M9.06251 10.2031C8.86803 10.3976 8.55298 10.3985 8.35743 10.2051C8.16035 10.0101 8.15947 9.69209 8.35547 9.49609L11.3571 6.49447C11.6303 6.2213 12.0731 6.22108 12.3465 6.49397L15.3549 9.49627C15.5512 9.69212 15.5505 10.0103 15.3533 10.2052C15.1579 10.3985 14.843 10.3977 14.6486 10.2033L12.5303 8.08496C12.4673 8.02194 12.3595 8.06662 12.3596 8.15575L12.3668 17.4293C12.367 17.7056 12.1431 17.9297 11.8668 17.9297C11.5908 17.9297 11.367 17.7061 11.3668 17.4301L11.3596 8.14741C11.3595 8.05835 11.2518 8.0138 11.1889 8.07677L9.06251 10.2031Z' fill='%234292F7'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWSort4Left, .TWSort4Right,
+.TWSort6Left, .TWSort6Right {
+    background-repeat: no-repeat !important;
+    height: 24px !important;
+    width: 24px !important;
+    background-size: 100% !important;
+    background-position: center !important;
+    /* tableview-sort-bottom.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='M14.9375 13.7969C15.132 13.6024 15.447 13.6015 15.6426 13.7949C15.8397 13.9899 15.8405 14.3079 15.6445 14.5039L12.6429 17.5055C12.3697 17.7787 11.9269 17.7789 11.6535 17.506L8.64508 14.5037C8.44883 14.3079 8.44955 13.9897 8.64668 13.7948C8.84213 13.6015 9.15701 13.6023 9.35139 13.7967L11.4697 15.915C11.5327 15.9781 11.6405 15.9334 11.6404 15.8442L11.6332 6.5707C11.633 6.29441 11.8569 6.07031 12.1332 6.07031C12.4092 6.07031 12.633 6.29393 12.6332 6.56992L12.6404 15.8526C12.6405 15.9416 12.7482 15.9862 12.8111 15.9232L14.9375 13.7969Z' fill='%234292F7'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWSort0Left, .TWSort0Right {
+    background-image: none !important;
+}
+
+.TWP0200, .TWPx200, .TWP02x0, .TWP020x, .TWPx2x0, .TWPx20x, .TWP02xx, .TWPx2xx, .TWPanelSelectOn {
+    background-size: 24px;
+    /* checkbox-active.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%3Crect x='4' y='4' width='16' height='16' rx='2' fill='%234292F7'/%3E%3Cpath d='M15.765 9.20474C16.0661 9.48915 16.0797 9.96383 15.7953 10.265L11.5453 14.765C11.4061 14.9123 11.2133 14.997 11.0107 14.9999C10.8081 15.0028 10.6129 14.9236 10.4697 14.7803L8.21967 12.5303C7.92678 12.2374 7.92678 11.7626 8.21967 11.4697C8.51256 11.1768 8.98744 11.1768 9.28033 11.4697L10.9846 13.174L14.7047 9.23503C14.9891 8.9339 15.4638 8.92033 15.765 9.20474Z' fill='white'/%3E%3C/svg%3E%0A") !important;
+}
+
+.TWPanelSelect {
+    background-size: 24px;
+    /* checkbox-empty.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%3Crect x='4.5' y='4.5' width='15' height='15' rx='1.5' stroke='%23C0CAD5'/%3E%3C/svg%3E%0A");
+}
+
+.TWNE, .TWNER {
+    /* tree-closed.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='M9.5 7L14.5 12L9.5 17' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.TWNC, .TWNCR {
+    /* tree-closed-black.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%3Cg id='Chevron-tree-down'%3E%3Cpath id='Vector 9' d='M17 10L12 15L7 10' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.TWNC, .TWNCR,
+.TWNE, .TWNER {
+    background-size: 100%;
+    background-position: right !important;
+}
+
+.TWNTree, .TWNTreeImage {
+    background-size: 24px 24px;
+    background-position: right center;
+    background-repeat: no-repeat;
+}
+
+.TWIconRight.TWCellFilter {
+    background-size: 16px 16px !important;
+    background-position: 0 !important;
+}
+
+.TWRightSplitter {
+    background: #4292F7;
+}
+
+.GWGanttBaseOut {
+    background: none !important;
+}
+
+.GWGanttHtmlIn > div {
+    width: 100%;
+    height: 100%;
+    border-radius: 6px;
+}
+
+.TWClassReadOnly {
+    color: #8E98A3 !important;
+}
+
+.GWGanttHtmlLeft0.GWGanttHtml > span,
+.GWGanttHtmlRight0 .GWGanttHtml > span {
+    font-size: 12px;
+    width: fit-content;
+    height: fit-content;
+}
+
+.GWGanttHtml {
+    overflow: visible !important;
+    padding: 0 !important;
+}
+
+.GWGantt.TWCell > div {
+    overflow: visible !important;
+}
+
+.TWGanttHeader {
+    padding: 0 !important;
+}
+
+.TWGanttHeader1,
+.TWGanttHeader2,
+.TWGanttHeader3 {
+    border-left: 1px solid #E4E6EC !important;
+}
+
+.TWGanttHeader1 {
+    border-bottom: 1px solid #E4E6EC !important;
+}
+
+.TWGanttHeader3 {
+    border-top: 1px solid #E4E6EC !important;
+}
+
+.TWHeadRight {
+    border-left: 1px solid #E4E6EC !important;
+}
+
+.TWGanttHeaderBase {
+    background: #F7F9FC;
+}
+
+.GWGanttHtmlOut + div {
+    overflow: visible !important;
+    margin-left: 100% !important;
+    margin-top: -16px !important;
+}
+
+.GWGanttHtmlOut + div > div {
+    font-size: 12px;
+}
+
+.vitro-table-full-width {
+    width: 100%
+}
+
+.GWGanttMark {
+    background: #fffc85 !important;
+    opacity: 0.4 !important;
+}
+
+.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");
+    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;
+}
+
+.TWMessage {
+    font-family: inherit;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+    font-size: inherit;
+    padding: 16px;
+    min-width: 240px;
+    white-space: normal;
+    text-align: left;
+    box-shadow: none;
+    z-index: 100000;
+    top: 50% !important;
+}
+
+.TWMessage .vitro-flex {
+    align-items: center;
+    font-family: "GraphikRegular";
+    font-size: 10pt;
+}
+
+.TWMessage .TWMessageButtons {
+    display: flex;
+    width: 100%;
+    padding: 0;
+    justify-content: flex-end;
+    margin: 0;
+}
+
+.TWMessage .vitro-icon-before {
+    /* ico-question.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='49' height='49' viewBox='0 0 49 49' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.1631 44.1426C35.2088 44.1426 44.1631 35.1883 44.1631 24.1426C44.1631 13.0969 35.2088 4.14258 24.1631 4.14258C13.1174 4.14258 4.16309 13.0969 4.16309 24.1426C4.16309 35.1883 13.1174 44.1426 24.1631 44.1426Z' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M18.3428 18.1426C18.813 16.806 19.7411 15.6788 20.9627 14.9609C22.1843 14.2429 23.6206 13.9805 25.0171 14.22C26.4137 14.4596 27.6804 15.1857 28.5929 16.2697C29.5055 17.3537 30.0049 18.7257 30.0028 20.1426C30.0028 24.1426 24.0028 26.1426 24.0028 26.1426' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3Cpath d='M24.1631 34.1426H24.1831' stroke='%23BDBDBD' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/svg%3E");
+    background-size: cover;
+    width: 32px;
+    height: 32px;
+    margin-right: 8px;
+    padding-right: 0;
+    flex-shrink: 0;
+}
+
+.TWMessage .TWMessageButtons > button, .TWLow .TWMenuButton, .TWProgressButtons > button {
+    height: 32px;
+    line-height: 32px;
+    background: #0097ff;
+    color: #fff;
+    width: auto;
+    padding: 0 12px;
+    min-width: 96px;
+    margin: 8px 0 0 8px;
+    border-radius: 8px;
+    border: none;
+    padding: 0 !important;
+    font-weight: 500;
+    outline: none;
+    font-family: GraphikRegular;
+    font-size: 10pt;
+}
+
+.TWMessage .TWMessageButtons > button:hover, .TWLow .TWMenuButton:hover, .TWProgressButtons > button:hover {
+    background: rgba(0, 151, 255, .8);
+    border-color: transparent;
+}
+
+.TWMessage .TWMessageButtons > button:first-child {
+    margin-left: 0;
+}
+
+.TWMessage .TWMessageButtons > button:last-child,
+.TWMenuFoot > button:last-child,
+.TWProgressButtons > button:last-child {
+    background: #fff;
+    color: #0097ff;
+    border: 1px solid #0097ff;
+}
+
+.TWMessage .TWMessageButtons > button:last-child:hover,
+.TWMenuFoot > button:last-child:hover,
+.TWProgressButtons > button:last-child {
+    background: #fff;
+    border-color: rgba(0, 151, 255, .8);
+    color: rgba(0, 151, 255, .8);
+}
+
+.TWFilter12Left, .TWFilter12Right, .TWFilter12Menu {
+     /*ico-tableview-contains-not.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='12,24 12,40 24,32'/%3E%3Cpolygon points='52,40 52,24 40,32'/%3E%3Cpolygon points='28,33.3 36,28 36,20 40,20 40,12 24,12 24,20 28,20'/%3E%3Cpolygon points='36,32 28,37.3 28,44 24,44 24,52 40,52 40,44 36,44'/%3E%3Cpolygon fill='%23ff5b2d' points='48,20 48,16 12,40 12,44'/%3E%3C/g%3E%3C/svg%3E") !important;
+}
+
+.TWFilter11Left, .TWFilter11Right, .TWFilter11Menu {
+     /*ico-tableview-contains.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='40,20 40,12 24,12 24,20 28,20 28,44 24,44 24,52 40,52 40,44 36,44 36,20'/%3E%3Cpolygon points='12,24 12,40 24,32'/%3E%3Cpolygon points='52,40 52,24 40,32'/%3E%3C/g%3E%3C/svg%3E") !important;
+}
+
+.TWFilter10Left, .TWFilter10Right, .TWFilter10Menu {
+     /*ico-tableview-end-with-not.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='12,24 12,40 24,32'/%3E%3Cpolygon points='28,33.3 36,28 36,20 40,20 40,12 24,12 24,20 28,20'/%3E%3Cpolygon points='36,32 28,37.3 28,44 24,44 24,52 40,52 40,44 36,44'/%3E%3Cpolygon fill='%23ff5b2d' points='48,20 48,16 12,40 12,44'/%3E%3C/g%3E%3C/svg%3E") !important;
+}
+
+.TWFilter9Left, .TWFilter9Right, .TWFilter9Menu {
+     /*ico-tableview-end-with.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='44,20 44,12 28,12 28,20 32,20 32,44 28,44 28,52 44,52 44,44 40,44 40,20'/%3E%3Cpolygon fill='%23ff5b2d' points='16,24 16,40 28,32'/%3E%3C/svg%3E") !important;
+}
+
+.TWFilter8Left, .TWFilter8Right, .TWFilter8Menu {
+     /*ico-tableview-start-with-not.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Cpolygon points='24,36 32,30.7 32,20 36,20 36,12 20,12 20,20 24,20'/%3E%3Cpolygon points='32,34.7 24,40 24,44 20,44 20,52 36,52 36,44 32,44'/%3E%3Cpolygon points='36,32 36,40 48,32 42,28'/%3E%3Cpolygon fill='%23ff5b2d' points='48,20 48,16 12,40 12,44'/%3E%3C/g%3E%3C/svg%3E") !important;
+}
+
+.TWFilter7Left, .TWFilter7Right, .TWFilter7Menu {
+     /*ico-tableview-start-with.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='36,20 36,12 20,12 20,20 24,20 24,44 20,44 20,52 36,52 36,44 32,44 32,20'/%3E%3Cpolygon fill='%23ff5b2d' points='36,24 36,40 48,32'/%3E%3C/svg%3E") !important;
+}
+
+.TWFilter6Left, .TWFilter6Right, .TWFilter6Menu {
+     /*ico-tableview-more-equal.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='16,12 48,24 48,32 16,44 16,36 37.3,28 16,20'/%3E%3Crect fill='%23ff5b2d' x='16' y='44' width='32' height='8'/%3E%3C/svg%3E") !important;
+}
+
+.TWFilter5Left, .TWFilter5Right, .TWFilter5Menu {
+     /*ico-tableview-more.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='16,12 48,28 48,36 16,52 16,44 40,32 16,20'/%3E%3C/svg%3E") !important;
+}
+
+.TWFilter4Left, .TWFilter4Right, .TWFilter4Menu {
+     /*ico-tableview-less-equal.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='48,12 16,24 16,32 48,44 48,36 26.7,28 48,20'/%3E%3Crect fill='%23ff5b2d' x='16' y='44' width='32' height='8'/%3E%3C/svg%3E") !important;
+}
+
+.TWFilter3Left, .TWFilter3Right, .TWFilter3Menu {
+     /*ico-tableview-less.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cpolygon fill='%23ff5b2d' points='48,12 16,28 16,36 48,52 48,44 24,32 48,20'/%3E%3C/svg%3E") !important;
+}
+
+.TWFilter2Left, .TWFilter2Right, .TWFilter2Menu {
+     /*ico-tableview-not-equal.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Cg fill='%23ff5b2d'%3E%3Crect x='12' y='20' width='40' height='8'/%3E%3Crect x='12' y='36' width='40' height='8'/%3E%3C/g%3E%3Cpolygon fill='%23ff5b2d' points='48,12 24,52 16,52 40,12'/%3E%3C/svg%3E") !important;
+}
+
+.TWFilter1Left, .TWFilter1Right, .TWFilter1Menu {
+     /*ico-tableview-equal.svg URL-encoder for SVG*/ 
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 64 64'%3E%3Crect fill='%23ff5b2d' x='12' y='20' width='40' height='8'/%3E%3Crect fill='%23ff5b2d' x='12' y='36' width='40' height='8'/%3E%3C/svg%3E") !important;
+}
+
+.TWNoDataRow {
+    background: #fff;
+    border: none !important;
+}
+
+.TWNoDataRow .TWSpaceWidthInner {
+    text-align: center;
+} 
+
+.TWFocusRowBackground {
+    background: #0083ff !important;
+}
+
+.TWFilter0Value u.TWFilter1, .TWFilter0Value u.TWFilter0,
+.TWCellHeaderPanel .TWPanelDelete {
+    display: none;
+}
+
+.TWHintHeaderOuter > div,
+.TWHintDataOuter > div {
+    overflow: visible !important;
+}
+
+.TWProgressOuter {
+    background-color: #fff;
+    width: 220px !important;
+}
+
+.TWProgressInner {
+    height: 26px !important;
+    width: 100% !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") !important;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.TWProgressMain {
+    text-align: center;
+}
+
+.TWProgressButtons {
+    margin: 0;
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.TWProgressButtons > button {
+    min-width: 80px;
+    font-size: 9pt;
+    height: 26px;
+    line-height: 26px;
+    margin: 4px;
+    padding: 0 8px !important;
+}
+
+.TWMenuItemText {
+    white-space: normal;
+}
+
+.TWMenuItem.TWCfgMenuItem#TGMenu-0-style {
+    display: none;
+}
+
+.TWEditInput {
+    background: white;
+}
+
+.TWCellBase.vitro-table-view-deleted {
+    color: #BDBDBD;
+}

package/css/std/controls/task-tile/task-tile.css

@@ -0,0 +1,91 @@
+.vitro-task-tile {
+    position: relative;
+    background-color: #fff;
+    border-radius: 4px;
+    padding: 12px;
+    margin: 12px 0;
+    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 6px 0px rgba(0, 0, 0, 0.10);
+    min-height: 85px;
+}
+
+.vitro-task-tile.vitro-active {
+    background: #DCEEFF;
+}
+
+.vitro-content {
+    margin-top: 2px;
+    margin-bottom: -3px;
+}
+
+.vitro-description,
+.vitro-comment {
+    font-size: 14px;
+    line-height: 21px;
+    color: #6C757D;
+}
+
+.vitro-comment {
+    margin-top: 18px;
+}
+
+.vitro-title {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 21px;
+    margin-right: 48px;
+}
+
+.vitro-top-right {
+    position: absolute;
+    right: 23px;
+    top: 17px;
+}
+
+.vitro-dropdown-button {
+    margin-right: -1px;
+}
+
+.vitro-bottom-right {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    text-align: right;
+    color: #6C757D;
+    font-size: 14px;
+    line-height: 150%;
+}
+
+.vitro-task-tile :global(.vitro-task-tile-status-indicator) {
+    height: 2px;
+    position: absolute;
+    top: 0;
+    left: 4px;
+    right: 4px;
+}
+
+.vitro-task-tile :global(.vitro-task-tile-expired-indicator) {
+    width: 2px;
+    position: absolute;
+    top: 4px;
+    left: 0;
+    bottom: 4px;
+    background: #ff5b2d;
+}
+
+.vitro-button-cancel {
+    cursor: pointer;
+    height: 24px;
+    width: 24px;
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    /* clos�.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%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+:global(.vitro-time-log-history) .vitro-task-tile:first-child {
+    margin-top: 0px;
+}