@vitrosoftware/common-ui-ts 1.0.0 → 1.0.2

package/css/white/third-party/treegrid.css

@@ -0,0 +1,482 @@
+.TWMain, .TWMain * {
+    font-size: 10pt;
+    font-family: "GraphikRegular";
+}
+
+.TWMenuMain {
+    z-index: 1000;
+}
+
+.TWVScroll {
+    width: 17px;
+}
+
+.TWCellHeader {
+    font-family: "GraphikMedium" !important;
+    font-weight: normal !important;
+    background: #fff;
+}
+
+.TWCellFilter, .TWCellFilterPanel {
+    background-color: #F5F6FA;
+}
+
+.TWCellBase {
+    color: #222d44;
+}
+
+.TWFilterRow td, .TWDataRow td {
+    letter-spacing: -0.24px;
+}
+
+.TWDataRow td {
+    padding: 1px 3px 0px 3px !important;
+}
+
+.TWNoRight.TWHeaderText, .TWNoRight .TWHeaderText {
+    white-space: normal;
+    font-weight: bold;
+    font-family: Arial;
+}
+
+.TWType {
+    padding: 6px 10px 6px 10px;
+}
+
+.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);
+}
+
+.TWMenuFoot {
+    text-align: right;
+}
+
+.TWTaskTemplateCheck2Left {
+    /* ico-tableview-checkbox-intermediate.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' preserveAspectRatio='none'%3E%3Cg%3E%3Ctitle%3ELayer 1%3C/title%3E%3Crect id='svg_1' ry='5' rx='5' height='40' width='40' y='10' x='10' stroke-width='2' stroke='%23bdbdbd' fill='%23fff'/%3E%3Cpolyline id='svg_2' points='16,28 28,38 44,20' stroke-width='6' stroke='%23fff' fill='%23FFF'/%3E%3Crect stroke-width='0' stroke-dasharray='2,2' id='svg_3' height='34.93973' width='35.54214' y='12.4217' x='12.4217' stroke='%23fff' fill='%23FFF'/%3E%3Crect stroke='%23FFF' stroke-width='5' id='svg_9' height='29.90774' width='30.83' y='14.9381' x='14.60872' fill='%23ff5b2d'/%3E%3C/g%3E%3C/svg%3E") !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 {
+    /* ico-tableview-sort-top.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='32,16 20,28 44,28'/%3E%3Cpolygon fill='%23999' points='20,36 44,36 32,48'/%3E%3C/svg%3E") !important;
+}
+
+.TWSort4Left, .TWSort4Right,
+.TWSort6Left, .TWSort6Right {
+    /* ico-tableview-sort-bottom.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='%23999' points='32,16 20,28 44,28'/%3E%3Cpolygon fill='%23ff5b2d' points='20,36 44,36 32,48'/%3E%3C/svg%3E") !important;
+}
+
+.TWP0200, .TWPx200, .TWP02x0, .TWP020x, .TWPx2x0, .TWPx20x, .TWP02xx, .TWPx2xx, .TWPanelSelectOn {
+    /* ico-tableview-dot-selected.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%3Ccircle fill='white' stroke='%23ff5b2d' stroke-width='4' cx='30' cy='30' r='20'/%3E%3Ccircle fill='%23ff5b2d' cx='30' cy='30' r='12'/%3E%3C/svg%3E") !important;
+    background-position: 50% !important;
+}
+
+.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;
+}
+
+.TWToolbarRow .TWHtml,
+.TSToolbarRow .TSHtml,
+.TBToolbarRow .TBHtml,
+.TMToolbarRow .TMHtml,
+.TTToolbarRow .TTHtml {
+    display: none;
+}
+
+.TWDisabledHard {
+    top: 0 !important;
+    left: 0 !important;
+    height: 100% !important;
+    width: 100% !important;
+}
+
+.TWPickMain, .TWPickMain .TWPickOuter {
+    border-radius: 8px;
+}
+
+.TWPickOuter .TWPickMY {
+    background: #fff;
+    color: #222d44;
+}
+
+.TWPickOuter .TWPickMY > span {
+    line-height: 36px;
+    font-size: 10pt;
+    font-weight: normal;
+    display: block;
+    background: none;
+    margin: 0 30px;
+    padding: 0px;
+    text-transform: capitalize;
+}
+
+.TWPickOuter .TWPickMY > span:hover {
+    color: #0097ff;
+}
+
+.TWPickSel, .TWPick2MSel, .TWPick2YSel,
+.TWPickSel, .TWPick2MSel, .TWPickSelHover {
+    background: #0097ff;
+    color: #fff;
+}
+
+.TWPickOuter .TWPickBL, .TWPickOuter .TWPickBR {
+    margin-top: 8px;
+    background-size: 22px 22px;
+}
+
+.TWPickOuter .TWPickRowW .TWPickCell {
+    padding-bottom: 0px
+}
+
+.TWPickNow {
+    background: #fff;
+    color: #0097ff;
+    font-family: 'GraphikMedium';
+}
+
+.TWLow .TWPickCell {
+    width: 30px;
+    height: 30px;
+}
+
+.TWLow .TWPickCell > div {
+    line-height: 26px;
+    border-radius: 8px;
+}
+
+.TWPickWDN, .TWPickWNE {
+    text-transform: uppercase;
+    font-weight: normal;
+}
+
+.TWPickOM, .TWPickOMNE, .TWPickWDN, .TWPickWNE {
+    color: #bdbdbd;
+}
+
+.TWEnumMenuHeader {
+    border-radius: 0;
+    border-bottom: 1px solid #fff;
+    z-index: 10001;
+}
+
+.TWMenuMainBottom {
+    margin-top: 1px;
+    border-radius: 8px 0px 8px 8px;
+}
+
+.TWEnumMenuMainBottom {
+    margin-top: -1px;
+    border-radius: 0 0 8px 8px;
+    box-shadow: 0px 4px 4px 1px #ddd;
+}
+
+.TWEnumMenuMainBottom > div, .TWMenuMainBottom > div {
+    border-radius: 0 0 8px 8px;
+    border-top: 1px solid #fff;
+}
+
+.TWMenuMainBottom > div {
+    border-radius: 0 0 8px 8px;
+}
+
+.TWLow .TWMenuFoot {
+    padding: 3px 3px 5px 3px;
+}
+
+
+.TWMenuMainBottom.TWEnumMenuMainBottom {
+    border-radius: 0 0 8px 8px;
+    z-index: 10002;
+}
+
+.TWMenuMainBottom.TWEnumMenuMainBottom > div {
+    border-radius: 0 0 8px 8px;
+}
+
+.TWEnumLeft, .TWLow .TWEnumHeaderLeft {
+    background-position: right !important;
+    padding-left: 6px !important;
+}
+
+.TWEnumMenuBody .TWEnumMenuFocus {
+    color: #0097ff;
+    background: #fff !important;
+}
+
+.TWEnumMenuBody .TWEnumMenuHover,
+.TWMenuHover {
+    background: #F4F4F4 !important
+}
+
+.TWLow .TWMenuButton {
+    min-width: 80px;
+    font-size: 9pt;
+    min-width: 80px;
+    font-size: 9pt;
+    height: 26px;
+    line-height: 26px;
+    margin: 4px;
+}
+
+.TWFocusRowBackground {
+    background: #e0e0e0;
+}
+
+.HideCol0IsFavorite.TWCellHeader {
+    color: transparent;
+}
+
+.HideCol0IsFavorite.vitro-tableview-favorite-0, .HideCol0IsFavorite.TWCell.TWBool0 {
+    /* ico-favorite.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23BDBDBD;%7D%0A%3C/style%3E%3Cpath class='st0' d='M15,3.5H9c-1.1,0-2,0.9-2,2v15l5-5.7l5,5.7v-15C17,4.4,16.1,3.5,15,3.5z'/%3E%3C/svg%3E%0A") !important;
+}
+
+.HideCol0IsFavorite.vitro-tableview-favorite-2, .HideCol0IsFavorite.TWCell.TWBool1 {
+    /* ico-favorite-orange.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 24 24' style='enable-background:new 0 0 24 24;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23FF5B2D;%7D%0A%3C/style%3E%3Cpath class='st0' d='M15,3.5H9c-1.1,0-2,0.9-2,2v15l5-5.7l5,5.7v-15C17,4.4,16.1,3.5,15,3.5z'/%3E%3C/svg%3E%0A") !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;
+}
+
+.TWEnumMenuBody {
+    max-width: 600px;
+}
+
+.TWMenuItemText {
+    white-space: normal;
+}
+
+.TWMenuItem.TWCfgMenuItem#TGMenu-0-style {
+    display: none;
+}
+
+.TWEditInput {
+    background: white;
+}
+
+.TWCellBase.vitro-table-view-deleted {
+    color: #BDBDBD;
+}

package/dist/controls/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { BreadcrumbsItem } from './BreadcrumbsItem';
+export interface BreadcrumbsProps {
+    text: string;
+    itemList: BreadcrumbsItem[];
+    onClick: (item: BreadcrumbsItem) => void;
+    displayItemCount: number;
+}
+export declare const Breadcrumbs: (props: BreadcrumbsProps) => JSX.Element;

package/dist/controls/Breadcrumbs/BreadcrumbsItem.d.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbsItem {
+    id: string;
+    text: string;
+}

package/dist/controls/Breadcrumbs/Item.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface ItemProps {
+    onClick?: () => void;
+    text: string;
+    id: string;
+}
+export declare const Item: (props: ItemProps) => JSX.Element;
+export {};

package/dist/controls/MicroFrontend/MicroFrontend.d.ts

@@ -0,0 +1,8 @@
+import { FunctionComponent } from "react";
+interface MicroFrontendProps {
+    name: string;
+    host: string;
+    data: any;
+}
+export declare const MicroFrontend: FunctionComponent<MicroFrontendProps>;
+export {};

package/dist/controls/MicroFrontend/MicroFrontendState.d.ts

@@ -0,0 +1,8 @@
+export declare class MicroFrontendState {
+    constructor();
+    unmount(): void;
+    init: boolean;
+    name: string | null;
+    renderInProgress: boolean;
+    unmountAction: Function | null;
+}

package/dist/controls/MicroFrontend/renderMicrofrontend.d.ts

@@ -0,0 +1,2 @@
+import { MicroFrontendState } from './MicroFrontendState';
+export declare const renderMicrofrontend: (rendererName: string, microFrontendState: MicroFrontendState, rootElement: HTMLElement, data: any, tryCnt: number) => void;

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

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { TableViewContext } from './TableViewContext';
+import { TableViewRow } from './TableViewRow';
+import { TableViewEventHandler } from './TableViewEventHandler';
+export declare const TableView: (props: TableViewProps) => JSX.Element;
+export interface TableViewProps {
+    id: string;
+    textUrl?: string;
+    debug?: string;
+    createGridUrl?: ((...params: any[]) => any) | undefined;
+    controller?: string | undefined;
+    listCode?: string | undefined;
+    eventHandlerList?: TableViewEventHandler[];
+    onInit?: ((grid: TableViewContext, next?: () => any) => any) | undefined;
+    onSelect?: ((grid: TableViewContext, row: TableViewRow, deselect: boolean, columnList: string[], test: boolean) => any) | undefined;
+    layout?: any;
+    data?: any;
+    filterOneLevel?: boolean;
+}

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

@@ -0,0 +1,3 @@
+export interface TableViewCol {
+    [key: string]: any;
+}

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

@@ -0,0 +1,50 @@
+import { TableViewRow } from './TableViewRow';
+import { TableViewCol } from './TableViewCol';
+import { TableViewEventHandler } from './TableViewEventHandler';
+export interface TableViewContext {
+    readonly columnList: any;
+    readonly columnNameList: any;
+    readonly filter: any;
+    readonly sort: any;
+    readonly pageLength: number;
+    readonly id: string;
+    readonly gantt: string;
+    readonly rowCount: number;
+    readonly header: TableViewRow;
+    dragging: boolean;
+    filterOneLevel: boolean;
+    acceptChanges(row?: TableViewRow): void;
+    hasGantt(): boolean;
+    getRowById(id: string, attr?: string, nofixed?: boolean): TableViewRow;
+    getSelectedRowList(): TableViewRow[];
+    refreshRow(row: TableViewRow): void;
+    refreshCell(row: TableViewRow, col: string): void;
+    setValue(row: TableViewRow, col: string, value: any, refresh?: boolean): void;
+    addRow(parent: TableViewRow | null, next?: TableViewRow | null, show?: number, id?: string, def?: string): TableViewRow;
+    addPage(name: string, xml: string | null, count: number): TableViewRow;
+    setEventHandler(eventHandler: TableViewEventHandler): void;
+    showDefaults(row: TableViewRow, col: string): boolean;
+    clearSelection(type?: number): void;
+    selectRow(row: TableViewRow, select?: boolean, test?: boolean): boolean;
+    changeFilter(cols: string[], values: any[], operators: number[], nofilter?: boolean, noclear?: boolean, filter?: TableViewRow): void;
+    removeRow(row: TableViewRow): void;
+    showMessageTime(message: string, time?: number, func?: (...params: any[]) => any, buttons?: string[], importance?: number): void;
+    reRender(scroll: boolean, sync: boolean): void;
+    changeSort(sortCols: string): void;
+    deselectAll(): void;
+    hideMessage(): void;
+    blur(): void;
+    focus(): void;
+    dispose(): void;
+    showCol(col: string): void;
+    hideCol(col: string): void;
+    addCol(col: string, sec: number, pos: number, param?: any, show?: boolean, type?: string, caption?: string): TableViewCol;
+    reloadBody(): void;
+    getCols(): string[];
+    hasChangeList(): number;
+    getChangeList(): any;
+    moveRow(row: TableViewRow, parent: TableViewRow | null, next: TableViewRow | null, show: boolean): any;
+    deleteRowList(rowList: TableViewRow[]): void;
+    setRowCanExpand(row: TableViewRow, canExpand: boolean): void;
+    getFirst(row?: TableViewRow, type?: number): TableViewRow;
+}

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

@@ -0,0 +1,4 @@
+export interface TableViewEventHandler {
+    id: string;
+    process: (...params: any[]) => any;
+}

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

@@ -0,0 +1,3 @@
+export interface TableViewRow {
+    [key: string]: any;
+}

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { TableViewProps } from './TableView';
+import { TableViewContext } from './TableViewContext';
+export declare const tableViewList: Map<string, TableViewContext>;
+export declare function getTableViewById(id: string): TableViewContext | undefined;
+export declare const TreeGrid: (props: TableViewProps) => JSX.Element;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            tableview: {
+                layout_url: string;
+                data_url: string;
+                page_url: string;
+                text_url: string;
+                debug: string;
+                id: string;
+            };
+        }
+    }
+}