@ -0,0 +1,373 @@
 | 
				
			|||||||
 | 
					.gridjs-footer button,
 | 
				
			||||||
 | 
					.gridjs-head button {
 | 
				
			||||||
 | 
						background-color: transparent;
 | 
				
			||||||
 | 
						background-image: none;
 | 
				
			||||||
 | 
						border: none;
 | 
				
			||||||
 | 
						cursor: pointer;
 | 
				
			||||||
 | 
						margin: 0;
 | 
				
			||||||
 | 
						outline: none;
 | 
				
			||||||
 | 
						padding: 0
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-temp {
 | 
				
			||||||
 | 
						position: relative
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-head {
 | 
				
			||||||
 | 
						margin-bottom: 5px;
 | 
				
			||||||
 | 
						padding: 5px 1px;
 | 
				
			||||||
 | 
						width: 100%
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-head:after {
 | 
				
			||||||
 | 
						clear: both;
 | 
				
			||||||
 | 
						content: "";
 | 
				
			||||||
 | 
						display: block
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-head:empty {
 | 
				
			||||||
 | 
						border: none;
 | 
				
			||||||
 | 
						padding: 0
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-container {
 | 
				
			||||||
 | 
						color: #000;
 | 
				
			||||||
 | 
						display: inline-block;
 | 
				
			||||||
 | 
						overflow: hidden;
 | 
				
			||||||
 | 
						padding: 2px;
 | 
				
			||||||
 | 
						position: relative;
 | 
				
			||||||
 | 
						z-index: 0
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-footer {
 | 
				
			||||||
 | 
						background-color: #fff;
 | 
				
			||||||
 | 
						border-bottom-width: 1px;
 | 
				
			||||||
 | 
						border-color: #e5e7eb;
 | 
				
			||||||
 | 
						border-radius: 0 0 8px 8px;
 | 
				
			||||||
 | 
						border-top: 1px solid #e5e7eb;
 | 
				
			||||||
 | 
						box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .26);
 | 
				
			||||||
 | 
						display: block;
 | 
				
			||||||
 | 
						padding: 12px 24px;
 | 
				
			||||||
 | 
						position: relative;
 | 
				
			||||||
 | 
						width: 100%;
 | 
				
			||||||
 | 
						z-index: 5
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-footer:empty {
 | 
				
			||||||
 | 
						border: none;
 | 
				
			||||||
 | 
						padding: 0
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					input.gridjs-input {
 | 
				
			||||||
 | 
						-webkit-appearance: none;
 | 
				
			||||||
 | 
						-moz-appearance: none;
 | 
				
			||||||
 | 
						appearance: none;
 | 
				
			||||||
 | 
						background-color: #fff;
 | 
				
			||||||
 | 
						border: 1px solid #d2d6dc;
 | 
				
			||||||
 | 
						border-radius: 5px;
 | 
				
			||||||
 | 
						font-size: 14px;
 | 
				
			||||||
 | 
						line-height: 1.45;
 | 
				
			||||||
 | 
						outline: none;
 | 
				
			||||||
 | 
						padding: 10px 13px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					input.gridjs-input:focus {
 | 
				
			||||||
 | 
						border-color: #9bc2f7;
 | 
				
			||||||
 | 
						box-shadow: 0 0 0 3px rgba(149, 189, 243, .5)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination {
 | 
				
			||||||
 | 
						color: #3d4044
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination:after {
 | 
				
			||||||
 | 
						clear: both;
 | 
				
			||||||
 | 
						content: "";
 | 
				
			||||||
 | 
						display: block
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-summary {
 | 
				
			||||||
 | 
						float: left;
 | 
				
			||||||
 | 
						margin-top: 5px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages {
 | 
				
			||||||
 | 
						float: right
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button {
 | 
				
			||||||
 | 
						background-color: #fff;
 | 
				
			||||||
 | 
						border: 1px solid #d2d6dc;
 | 
				
			||||||
 | 
						border-right: none;
 | 
				
			||||||
 | 
						outline: none;
 | 
				
			||||||
 | 
						padding: 5px 14px;
 | 
				
			||||||
 | 
						-webkit-user-select: none;
 | 
				
			||||||
 | 
						-moz-user-select: none;
 | 
				
			||||||
 | 
						user-select: none
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button:focus {
 | 
				
			||||||
 | 
						border-right: 1px solid #d2d6dc;
 | 
				
			||||||
 | 
						box-shadow: 0 0 0 2px rgba(149, 189, 243, .5);
 | 
				
			||||||
 | 
						margin-right: -1px;
 | 
				
			||||||
 | 
						position: relative
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button:hover {
 | 
				
			||||||
 | 
						background-color: #f7f7f7;
 | 
				
			||||||
 | 
						color: #3c4257;
 | 
				
			||||||
 | 
						outline: none
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button:disabled,
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button:hover:disabled,
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button[disabled] {
 | 
				
			||||||
 | 
						background-color: #fff;
 | 
				
			||||||
 | 
						color: #6b7280;
 | 
				
			||||||
 | 
						cursor: default
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button.gridjs-spread {
 | 
				
			||||||
 | 
						background-color: #fff;
 | 
				
			||||||
 | 
						box-shadow: none;
 | 
				
			||||||
 | 
						cursor: default
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
 | 
				
			||||||
 | 
						background-color: #f7f7f7;
 | 
				
			||||||
 | 
						font-weight: 700
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button:last-child {
 | 
				
			||||||
 | 
						border-bottom-right-radius: 6px;
 | 
				
			||||||
 | 
						border-right: 1px solid #d2d6dc;
 | 
				
			||||||
 | 
						border-top-right-radius: 6px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button:first-child {
 | 
				
			||||||
 | 
						border-bottom-left-radius: 6px;
 | 
				
			||||||
 | 
						border-top-left-radius: 6px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-pagination .gridjs-pages button:last-child:focus {
 | 
				
			||||||
 | 
						margin-right: 0
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					button.gridjs-sort {
 | 
				
			||||||
 | 
						background-color: transparent;
 | 
				
			||||||
 | 
						background-position-x: center;
 | 
				
			||||||
 | 
						background-repeat: no-repeat;
 | 
				
			||||||
 | 
						background-size: contain;
 | 
				
			||||||
 | 
						border: none;
 | 
				
			||||||
 | 
						cursor: pointer;
 | 
				
			||||||
 | 
						float: right;
 | 
				
			||||||
 | 
						height: 24px;
 | 
				
			||||||
 | 
						margin: 0;
 | 
				
			||||||
 | 
						outline: none;
 | 
				
			||||||
 | 
						padding: 0;
 | 
				
			||||||
 | 
						width: 13px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					button.gridjs-sort-neutral {
 | 
				
			||||||
 | 
						background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDEuOTk4IiBoZWlnaHQ9IjQwMS45OTgiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDQwMS45OTggNDAxLjk5OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTczLjA5MiAxNjQuNDUyaDI1NS44MTNjNC45NDkgMCA5LjIzMy0xLjgwNyAxMi44NDgtNS40MjQgMy42MTMtMy42MTYgNS40MjctNy44OTggNS40MjctMTIuODQ3cy0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2IDUuNDI0QzIxMC4yMzIgMS44MTIgMjA1Ljk1MSAwIDIwMC45OTkgMHMtOS4yMzMgMS44MTItMTIuODUgNS40MjRMNjAuMjQyIDEzMy4zMzFjLTMuNjE3IDMuNjE3LTUuNDI0IDcuOTAxLTUuNDI0IDEyLjg1IDAgNC45NDggMS44MDcgOS4yMzEgNS40MjQgMTIuODQ3IDMuNjIxIDMuNjE3IDcuOTAyIDUuNDI0IDEyLjg1IDUuNDI0ek0zMjguOTA1IDIzNy41NDlINzMuMDkyYy00Ljk1MiAwLTkuMjMzIDEuODA4LTEyLjg1IDUuNDIxLTMuNjE3IDMuNjE3LTUuNDI0IDcuODk4LTUuNDI0IDEyLjg0N3MxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDhMMTg4LjE0OSAzOTYuNTdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4bDEyNy45MDctMTI3LjkwNmMzLjYxMy0zLjYxNCA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDggMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDctMy42MTQtMy42MTYtNy44OTktNS40Mi0xMi44NDgtNS40MnoiLz48L3N2Zz4=");
 | 
				
			||||||
 | 
						background-position-y: center;
 | 
				
			||||||
 | 
						opacity: .3
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					button.gridjs-sort-asc {
 | 
				
			||||||
 | 
						background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5Mi4zNjIgMjkyLjM2MSIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI4Ni45MzUgMTk3LjI4NyAxNTkuMDI4IDY5LjM4MWMtMy42MTMtMy42MTctNy44OTUtNS40MjQtMTIuODQ3LTUuNDI0cy05LjIzMyAxLjgwNy0xMi44NSA1LjQyNEw1LjQyNCAxOTcuMjg3QzEuODA3IDIwMC45MDQgMCAyMDUuMTg2IDAgMjEwLjEzNHMxLjgwNyA5LjIzMyA1LjQyNCAxMi44NDdjMy42MjEgMy42MTcgNy45MDIgNS40MjUgMTIuODUgNS40MjVoMjU1LjgxM2M0Ljk0OSAwIDkuMjMzLTEuODA4IDEyLjg0OC01LjQyNSAzLjYxMy0zLjYxMyA1LjQyNy03Ljg5OCA1LjQyNy0xMi44NDdzLTEuODE0LTkuMjMtNS40MjctMTIuODQ3eiIvPjwvc3ZnPg==");
 | 
				
			||||||
 | 
						background-position-y: 35%;
 | 
				
			||||||
 | 
						background-size: 10px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					button.gridjs-sort-desc {
 | 
				
			||||||
 | 
						background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOTIuMzYyIiBoZWlnaHQ9IjI5Mi4zNjIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI5Mi4zNjIgMjkyLjM2MiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTI4Ni45MzUgNjkuMzc3Yy0zLjYxNC0zLjYxNy03Ljg5OC01LjQyNC0xMi44NDgtNS40MjRIMTguMjc0Yy00Ljk1MiAwLTkuMjMzIDEuODA3LTEyLjg1IDUuNDI0QzEuODA3IDcyLjk5OCAwIDc3LjI3OSAwIDgyLjIyOGMwIDQuOTQ4IDEuODA3IDkuMjI5IDUuNDI0IDEyLjg0N2wxMjcuOTA3IDEyNy45MDdjMy42MjEgMy42MTcgNy45MDIgNS40MjggMTIuODUgNS40MjhzOS4yMzMtMS44MTEgMTIuODQ3LTUuNDI4TDI4Ni45MzUgOTUuMDc0YzMuNjEzLTMuNjE3IDUuNDI3LTcuODk4IDUuNDI3LTEyLjg0NyAwLTQuOTQ4LTEuODE0LTkuMjI5LTUuNDI3LTEyLjg1eiIvPjwvc3ZnPg==");
 | 
				
			||||||
 | 
						background-position-y: 65%;
 | 
				
			||||||
 | 
						background-size: 10px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					button.gridjs-sort:focus {
 | 
				
			||||||
 | 
						outline: none
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					table.gridjs-table {
 | 
				
			||||||
 | 
						border-collapse: collapse;
 | 
				
			||||||
 | 
						display: table;
 | 
				
			||||||
 | 
						margin: 0;
 | 
				
			||||||
 | 
						max-width: 100%;
 | 
				
			||||||
 | 
						overflow: auto;
 | 
				
			||||||
 | 
						padding: 0;
 | 
				
			||||||
 | 
						table-layout: fixed;
 | 
				
			||||||
 | 
						text-align: left;
 | 
				
			||||||
 | 
						width: 100%
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-tbody,
 | 
				
			||||||
 | 
					td.gridjs-td {
 | 
				
			||||||
 | 
						background-color: #fff
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					td.gridjs-td {
 | 
				
			||||||
 | 
						border: 1px solid #e5e7eb;
 | 
				
			||||||
 | 
						box-sizing: content-box;
 | 
				
			||||||
 | 
						padding: 12px 24px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					td.gridjs-td:first-child {
 | 
				
			||||||
 | 
						border-left: none
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					td.gridjs-td:last-child {
 | 
				
			||||||
 | 
						border-right: none
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					td.gridjs-message {
 | 
				
			||||||
 | 
						text-align: center
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th.gridjs-th {
 | 
				
			||||||
 | 
						background-color: #f9fafb;
 | 
				
			||||||
 | 
						border: 1px solid #e5e7eb;
 | 
				
			||||||
 | 
						border-top: none;
 | 
				
			||||||
 | 
						box-sizing: border-box;
 | 
				
			||||||
 | 
						color: #6b7280;
 | 
				
			||||||
 | 
						outline: none;
 | 
				
			||||||
 | 
						padding: 14px 24px;
 | 
				
			||||||
 | 
						position: relative;
 | 
				
			||||||
 | 
						-webkit-user-select: none;
 | 
				
			||||||
 | 
						-moz-user-select: none;
 | 
				
			||||||
 | 
						user-select: none;
 | 
				
			||||||
 | 
						vertical-align: middle;
 | 
				
			||||||
 | 
						white-space: nowrap
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th.gridjs-th .gridjs-th-content {
 | 
				
			||||||
 | 
						float: left;
 | 
				
			||||||
 | 
						overflow: hidden;
 | 
				
			||||||
 | 
						text-overflow: ellipsis;
 | 
				
			||||||
 | 
						width: 100%
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th.gridjs-th-sort {
 | 
				
			||||||
 | 
						cursor: pointer
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th.gridjs-th-sort .gridjs-th-content {
 | 
				
			||||||
 | 
						width: calc(100% - 15px)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th.gridjs-th-sort:focus,
 | 
				
			||||||
 | 
					th.gridjs-th-sort:hover {
 | 
				
			||||||
 | 
						background-color: #e5e7eb
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th.gridjs-th-fixed {
 | 
				
			||||||
 | 
						box-shadow: 0 1px 0 0 #e5e7eb;
 | 
				
			||||||
 | 
						position: sticky
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@supports (-moz-appearance:none) {
 | 
				
			||||||
 | 
						th.gridjs-th-fixed {
 | 
				
			||||||
 | 
							box-shadow: 0 0 0 1px #e5e7eb
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th.gridjs-th:first-child {
 | 
				
			||||||
 | 
						border-left: none
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					th.gridjs-th:last-child {
 | 
				
			||||||
 | 
						border-right: none
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-tr {
 | 
				
			||||||
 | 
						border: none
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-tr-selected td {
 | 
				
			||||||
 | 
						background-color: #ebf5ff
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-tr:last-child td {
 | 
				
			||||||
 | 
						border-bottom: 0
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs *,
 | 
				
			||||||
 | 
					.gridjs :after,
 | 
				
			||||||
 | 
					.gridjs :before {
 | 
				
			||||||
 | 
						box-sizing: border-box
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-wrapper {
 | 
				
			||||||
 | 
						-webkit-font-smoothing: antialiased;
 | 
				
			||||||
 | 
						-moz-osx-font-smoothing: grayscale;
 | 
				
			||||||
 | 
						border-color: #e5e7eb;
 | 
				
			||||||
 | 
						border-radius: 8px 8px 0 0;
 | 
				
			||||||
 | 
						border-top-width: 1px;
 | 
				
			||||||
 | 
						box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .26);
 | 
				
			||||||
 | 
						display: block;
 | 
				
			||||||
 | 
						overflow: auto;
 | 
				
			||||||
 | 
						position: relative;
 | 
				
			||||||
 | 
						width: 100%;
 | 
				
			||||||
 | 
						z-index: 1
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-wrapper:nth-last-of-type(2) {
 | 
				
			||||||
 | 
						border-bottom-width: 1px;
 | 
				
			||||||
 | 
						border-radius: 8px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-search {
 | 
				
			||||||
 | 
						float: left
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-search-input {
 | 
				
			||||||
 | 
						width: 250px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-loading-bar {
 | 
				
			||||||
 | 
						background-color: #fff;
 | 
				
			||||||
 | 
						opacity: .5;
 | 
				
			||||||
 | 
						z-index: 10
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-loading-bar,
 | 
				
			||||||
 | 
					.gridjs-loading-bar:after {
 | 
				
			||||||
 | 
						bottom: 0;
 | 
				
			||||||
 | 
						left: 0;
 | 
				
			||||||
 | 
						position: absolute;
 | 
				
			||||||
 | 
						right: 0;
 | 
				
			||||||
 | 
						top: 0
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-loading-bar:after {
 | 
				
			||||||
 | 
						animation: shimmer 2s infinite;
 | 
				
			||||||
 | 
						background-image: linear-gradient(90deg, hsla(0, 0%, 80%, 0), hsla(0, 0%, 80%, .2) 20%, hsla(0, 0%, 80%, .5) 60%, hsla(0, 0%, 80%, 0));
 | 
				
			||||||
 | 
						content: "";
 | 
				
			||||||
 | 
						transform: translateX(-100%)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@keyframes shimmer {
 | 
				
			||||||
 | 
						to {
 | 
				
			||||||
 | 
							transform: translateX(100%)
 | 
				
			||||||
 | 
						}
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-td .gridjs-checkbox {
 | 
				
			||||||
 | 
						cursor: pointer;
 | 
				
			||||||
 | 
						display: block;
 | 
				
			||||||
 | 
						margin: auto
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-resizable {
 | 
				
			||||||
 | 
						bottom: 0;
 | 
				
			||||||
 | 
						position: absolute;
 | 
				
			||||||
 | 
						right: 0;
 | 
				
			||||||
 | 
						top: 0;
 | 
				
			||||||
 | 
						width: 5px
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.gridjs-resizable:hover {
 | 
				
			||||||
 | 
						background-color: #9bc2f7;
 | 
				
			||||||
 | 
						cursor: ew-resize
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@ -0,0 +1,92 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					.studio-pane {
 | 
				
			||||||
 | 
					    height:87vh;
 | 
				
			||||||
 | 
					    display:grid; grid-template-rows: 100%; 
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.studio {
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    display:grid;
 | 
				
			||||||
 | 
					    grid-template-rows: 50px 200px auto 48px; gap:8px;
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.studio-expand {
 | 
				
			||||||
 | 
					    display:grid;
 | 
				
			||||||
 | 
					    grid-template-rows: 50px calc(100% - 55px); gap:8px;
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.studio-expand .status {display:none}
 | 
				
			||||||
 | 
					.studio-expand textarea {display:none}
 | 
				
			||||||
 | 
					.studio-expand .output {height:100%;}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* .studio .input-frame {
 | 
				
			||||||
 | 
					    display:grid;
 | 
				
			||||||
 | 
					    grid-template-rows: 64px auto; gap:4px;
 | 
				
			||||||
 | 
					    height:250px;
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					} */
 | 
				
			||||||
 | 
					.studio textarea {
 | 
				
			||||||
 | 
					    outline: 0;
 | 
				
			||||||
 | 
					    border-color:transparent;
 | 
				
			||||||
 | 
					    font-family: courier;
 | 
				
			||||||
 | 
					    padding:8px; line-height: 1.5; background-color: #f3f3f3;
 | 
				
			||||||
 | 
					    /* height:350px; */
 | 
				
			||||||
 | 
					} 
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.studio .control {
 | 
				
			||||||
 | 
					    background-color: #F3F3F3;
 | 
				
			||||||
 | 
					    padding:4px;
 | 
				
			||||||
 | 
					    display:grid; grid-template-columns: 50px auto 40%; gap:8px; align-items: center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.studio .control .border-left {border-left:1px solid #FFFFFF;}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    .studio .control img {width:30px; width:30px;}
 | 
				
			||||||
 | 
					.studio .output { 
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    display:block;
 | 
				
			||||||
 | 
					    height: calc(100%  - 48px)    ;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.small {font-size: 12px;}
 | 
				
			||||||
 | 
					.shadow {
 | 
				
			||||||
 | 
					    box-shadow: 4px 2px 2px 2px #d3d3d3;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.status { font-size:11px; text-justify: right; padding:8px; 
 | 
				
			||||||
 | 
					    text-align: right;
 | 
				
			||||||
 | 
					    margin-top:20px;
 | 
				
			||||||
 | 
					    float:right;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					input[type=text]{padding:8px; outline: 0; border:4px solid transparent;
 | 
				
			||||||
 | 
					    margin:8px;
 | 
				
			||||||
 | 
					background-color: #f3f3f3;}
 | 
				
			||||||
 | 
					input[type=text]:focus {
 | 
				
			||||||
 | 
					    border-left-color: #4682B4;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* .table-header { height:20px;} */
 | 
				
			||||||
 | 
					.cell{
 | 
				
			||||||
 | 
					   color:maroon;
 | 
				
			||||||
 | 
					   text-overflow: ellipsis;
 | 
				
			||||||
 | 
					   font-size:13px;
 | 
				
			||||||
 | 
					   overflow:hidden;
 | 
				
			||||||
 | 
					   height:20px;
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					.main .menu {display:none}
 | 
				
			||||||
 | 
					.main .content{grid-row:2; grid-column:1}
 | 
				
			||||||
 | 
					.main .pane {grid-row:2; grid-column:2}
 | 
				
			||||||
 | 
					.main .footer{grid-row:4; grid-column:1;}
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					* syncfusion spreadsheet ...
 | 
				
			||||||
 | 
					*/
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
		 After Width: | Height: | Size: 9.2 KiB  | 
| 
		 After Width: | Height: | Size: 4.2 KiB  | 
| 
		 After Width: | Height: | Size: 9.1 KiB  | 
| 
		 After Width: | Height: | Size: 1.9 KiB  | 
| 
		 After Width: | Height: | Size: 5.7 KiB  | 
| 
		 After Width: | Height: | Size: 2.7 KiB  | 
| 
		 After Width: | Height: | Size: 10 KiB  | 
| 
		 After Width: | Height: | Size: 4.8 KiB  | 
| 
		 After Width: | Height: | Size: 2.3 KiB  | 
| 
		 After Width: | Height: | Size: 14 KiB  | 
| 
		 After Width: | Height: | Size: 7.1 KiB  | 
| 
		 After Width: | Height: | Size: 26 KiB  | 
| 
		 After Width: | Height: | Size: 5.3 KiB  | 
| 
		 After Width: | Height: | Size: 24 KiB  | 
| 
		 After Width: | Height: | Size: 44 KiB  | 
| 
		 After Width: | Height: | Size: 5.7 KiB  | 
| 
		 After Width: | Height: | Size: 9.7 KiB  | 
| 
		 After Width: | Height: | Size: 34 KiB  | 
| 
		 After Width: | Height: | Size: 7.5 KiB  | 
| 
		 After Width: | Height: | Size: 2.5 KiB  | 
| 
		 After Width: | Height: | Size: 15 KiB  | 
| 
		 After Width: | Height: | Size: 7.0 KiB  | 
| 
		 After Width: | Height: | Size: 12 KiB  | 
| 
		 After Width: | Height: | Size: 12 KiB  | 
| 
		 After Width: | Height: | Size: 11 KiB  | 
@ -0,0 +1,332 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					ej.base.registerLicense('ORg4AjUWIQA/Gnt2XFhhQlJHfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hTH5VdkxhWnpWcHZcTmhfWkZ/')
 | 
				
			||||||
 | 
					var studio = {_context:''}
 | 
				
			||||||
 | 
					studio.defaults = {
 | 
				
			||||||
 | 
					    'duckdb':'SELECT * \nFROM INFORMATION_SCHEMA.TABLES',
 | 
				
			||||||
 | 
					    'sqlite':'SELECT * \nFROM sqlite_master',
 | 
				
			||||||
 | 
					    'sqlite3':'SELECT * \nFROM sqlite_master',
 | 
				
			||||||
 | 
					    'bigquery':'SELECT * \nFROM <dataset>.INFORMATION_SCHEMA.COLUMNS \nLIMIT 10',
 | 
				
			||||||
 | 
					    'postgresql':'SELECT *\nFROM INFORMATION_SCHEMA.COLUMNS LIMIT 10'
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					studio.init = function (_context){
 | 
				
			||||||
 | 
					    studio._context = _context
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					studio.dbe = {}
 | 
				
			||||||
 | 
					studio.dbe.get = function (){
 | 
				
			||||||
 | 
					    var uri = [studio._context,'api/dbe/get']
 | 
				
			||||||
 | 
					    uri = uri.join('/')
 | 
				
			||||||
 | 
					    var http = HttpClient.instance()
 | 
				
			||||||
 | 
					    http.get(uri,function(x){
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					studio.dbe.providers = function (_render){
 | 
				
			||||||
 | 
					    var uri = [studio._context,'api/dbe/providers']
 | 
				
			||||||
 | 
					    uri = uri.join('/')
 | 
				
			||||||
 | 
					    var http = HttpClient.instance()
 | 
				
			||||||
 | 
					    http.get(uri,function(x){
 | 
				
			||||||
 | 
					        var _data = JSON.parse(x.responseText)
 | 
				
			||||||
 | 
					        if (_render){
 | 
				
			||||||
 | 
					            _render(_data)
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					studio.dbe.apply = function (label,_query){
 | 
				
			||||||
 | 
					    var uri = [studio._context,'api/dbe/apply']
 | 
				
			||||||
 | 
					    uri = uri.join('/')
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    var http = HttpClient.instance()
 | 
				
			||||||
 | 
					    _data = {'label':label,'query':_query}
 | 
				
			||||||
 | 
					    http.setHeader('Content-Type','application/json')
 | 
				
			||||||
 | 
					    http.setData (JSON.stringify(_data))
 | 
				
			||||||
 | 
					    http.get(uri,function(x){
 | 
				
			||||||
 | 
					        if(x.status == 200 && x.readyState == 4){
 | 
				
			||||||
 | 
					            _r = JSON.stringify(x.responseText)
 | 
				
			||||||
 | 
					        }else{
 | 
				
			||||||
 | 
					            alert(' error round '+x.responseText)
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					studio.grid = function (){
 | 
				
			||||||
 | 
					    this.columns = function (_data){
 | 
				
			||||||
 | 
					        var _columns = []
 | 
				
			||||||
 | 
					        if(_data.columns){
 | 
				
			||||||
 | 
					            _data.columns.forEach(_name=>{
 | 
				
			||||||
 | 
					                _columns.push({title:_name})
 | 
				
			||||||
 | 
					            })
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        return _columns
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    this.dataTable = function (_id,_data){
 | 
				
			||||||
 | 
					       $(_id).html('<table class="display"></table>')
 | 
				
			||||||
 | 
					       $(_id.replace(/output/,'status')).hide()
 | 
				
			||||||
 | 
					       
 | 
				
			||||||
 | 
					        _id = _id + ' table'
 | 
				
			||||||
 | 
					        var _columns = []
 | 
				
			||||||
 | 
					        if (_data.columns ){
 | 
				
			||||||
 | 
					            _data.columns.forEach(_name=>{
 | 
				
			||||||
 | 
					                _columns.push({title:_name})
 | 
				
			||||||
 | 
					            })
 | 
				
			||||||
 | 
					            var _args = {'data':_data.data,'columns':_columns}
 | 
				
			||||||
 | 
					            // _args.layout = {topStart:{}}
 | 
				
			||||||
 | 
					            _args.buttons = ['excel','pdf']
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					        }else{
 | 
				
			||||||
 | 
					            _data = {'data':[],columns:[]}
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        _args.dom = 'rtip'
 | 
				
			||||||
 | 
					        _args.scrollCollapse = true
 | 
				
			||||||
 | 
					        _args.scrollY = '400px'   
 | 
				
			||||||
 | 
					        var _grid = new DataTable(_id,_args)     
 | 
				
			||||||
 | 
					        return _grid;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    this.gridjs = function (_id, _data){
 | 
				
			||||||
 | 
					        $(_id.replace(/output/,'status')).hide()
 | 
				
			||||||
 | 
					        var grid = new gridjs.Grid({
 | 
				
			||||||
 | 
					            // columns:_data.columns, 
 | 
				
			||||||
 | 
					            data:_data.data , //_data.data,
 | 
				
			||||||
 | 
					            columns:_data.columns,
 | 
				
			||||||
 | 
					            fixedHeader:true, resizable:true,
 | 
				
			||||||
 | 
					            search:false,
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            style:{
 | 
				
			||||||
 | 
					                th:{height:'20px',overflow:'hidden','text-overflow':'ellipsis'},
 | 
				
			||||||
 | 
					                td :{height:'20px',padding:'4px',overflow:'hidden','text-overflow':'ellipsis'}, 
 | 
				
			||||||
 | 
					                table:{overflow:'hidden','text-overflow':'ellipsis','white-space':'nowrap',border:'1px solid transparent'}
 | 
				
			||||||
 | 
					            },
 | 
				
			||||||
 | 
					            sort:true,
 | 
				
			||||||
 | 
					            pagination:true,
 | 
				
			||||||
 | 
					            height:'405px'})
 | 
				
			||||||
 | 
					        if ($(_id).is(':empty')){
 | 
				
			||||||
 | 
					            grid.render($(_id)[0])
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					            grid.forceRender($(_id)[0])        
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    this.spreadsheet = function (_id, _data){
 | 
				
			||||||
 | 
					        var _div = $(_id)[0]
 | 
				
			||||||
 | 
					        var _columns = this.columns(_data)
 | 
				
			||||||
 | 
					       var rows = []
 | 
				
			||||||
 | 
					        _data.data.forEach(row=>{
 | 
				
			||||||
 | 
					            var _record = {} //-- formatted appropriately
 | 
				
			||||||
 | 
					            row.forEach((value,index)=>{
 | 
				
			||||||
 | 
					                _col = _data.columns[index].name
 | 
				
			||||||
 | 
					                _record[_col] = value
 | 
				
			||||||
 | 
					            })
 | 
				
			||||||
 | 
					            rows.push(_record)
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					        var _spreadsheet = jspreadsheet(_div, {
 | 
				
			||||||
 | 
					            tabs:true,toolbar:false,
 | 
				
			||||||
 | 
					            style:['text-overflow: ellipsis; white-space: nowrap;'],
 | 
				
			||||||
 | 
					            worksheets: [{
 | 
				
			||||||
 | 
					                media:[{type:'chart',options:{}}],
 | 
				
			||||||
 | 
					                data: _data.data,
 | 
				
			||||||
 | 
					                minDimensions:[20,15],
 | 
				
			||||||
 | 
					                tableOverflow:true,
 | 
				
			||||||
 | 
					                tableHeight: '400px',
 | 
				
			||||||
 | 
					                tableWidth:$(_id).width(),//minSpareCols:'auto',
 | 
				
			||||||
 | 
					                columns:_columns,
 | 
				
			||||||
 | 
					                workbookname: _id
 | 
				
			||||||
 | 
					            }]
 | 
				
			||||||
 | 
					        });
 | 
				
			||||||
 | 
					        _div.spreadsheet = _spreadsheet
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    this.syncfusion = function(_id,_data){
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        var rows = []
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        _data.data.forEach(row=>{
 | 
				
			||||||
 | 
					            var _record = {} //-- formatted appropriately
 | 
				
			||||||
 | 
					            row.forEach((value,index)=>{
 | 
				
			||||||
 | 
					                _col = _data.columns[index]
 | 
				
			||||||
 | 
					                _record[_col] = value
 | 
				
			||||||
 | 
					            })
 | 
				
			||||||
 | 
					            rows.push(_record)
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        var spreadsheet = new ej.spreadsheet.Spreadsheet();
 | 
				
			||||||
 | 
					        // spreadsheet.allowSave = true
 | 
				
			||||||
 | 
					        // spreadsheet.saveUrl = 'api/io/write'
 | 
				
			||||||
 | 
					        spreadsheet.sheets = [
 | 
				
			||||||
 | 
					            {name:_id.replace(/[#,.]/g,' '),
 | 
				
			||||||
 | 
					                ranges:[{dataSource:rows}],
 | 
				
			||||||
 | 
					               
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        ]
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        spreadsheet.appendTo(_id)
 | 
				
			||||||
 | 
					        $(_id)[0].spreadsheet = spreadsheet
 | 
				
			||||||
 | 
					        // console.log([' **** ',(_id+' .e-input-group')])
 | 
				
			||||||
 | 
					        // $(_id+' .e-input-group').remove()
 | 
				
			||||||
 | 
					        spreadsheet.refresh()
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					studio.frame = function (_args){
 | 
				
			||||||
 | 
					    this._args = _args
 | 
				
			||||||
 | 
					    //
 | 
				
			||||||
 | 
					    // Initializing by having an input and ouput pane
 | 
				
			||||||
 | 
					    // Load the template from disk
 | 
				
			||||||
 | 
					    this.init = function (){
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    //
 | 
				
			||||||
 | 
					    // Render the template
 | 
				
			||||||
 | 
					    this.read = function(_label,_query,_compute){
 | 
				
			||||||
 | 
					        var uri = [studio._context,'api/dbe/apply']
 | 
				
			||||||
 | 
					        uri = uri.join('/')
 | 
				
			||||||
 | 
					        // var _compute = this.compute 
 | 
				
			||||||
 | 
					        // $('.'+_label+' .output').html('<i class="fa-solid fa-cog fa-spin"></i> Please wait ...')
 | 
				
			||||||
 | 
					        var http = HttpClient.instance()
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        _data = {'label':_label,'query':_query}
 | 
				
			||||||
 | 
					        http.setHeader('Content-Type','application/json')
 | 
				
			||||||
 | 
					        http.setData (JSON.stringify(_data))
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        http.post(uri,function(x){
 | 
				
			||||||
 | 
					            if(x.status == 200 && x.readyState == 4){
 | 
				
			||||||
 | 
					                _r = JSON.parse(x.responseText)
 | 
				
			||||||
 | 
					                sessionStorage._data = x.responseText
 | 
				
			||||||
 | 
					                // console.log(_r)
 | 
				
			||||||
 | 
					                _compute(_label,_r)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            }else{
 | 
				
			||||||
 | 
					                alert(' error round '+x.responseText)
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    }    
 | 
				
			||||||
 | 
					    this.render = function (){
 | 
				
			||||||
 | 
					        var _args = this._args
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        var _icon = $('<img>').attr('src',this._args.icon)
 | 
				
			||||||
 | 
					        var _label = $('<div class="bold"></div>').html(this._args.label+'<div style="font-weight:lighter; font-size:11px;">'+this._args.provider+'</div>')
 | 
				
			||||||
 | 
					        read = this.read
 | 
				
			||||||
 | 
					        _compute = this.compute
 | 
				
			||||||
 | 
					        _xbutton = $('<div class="border-left"><div class="active apply" align="center"><i class="fa-solid fa-play"></i></div></div>').on('click',function (){
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            var _id = '.code.'+_args.label.trim()
 | 
				
			||||||
 | 
					            _query = $(_id).val()
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            if (_query.length != ''){
 | 
				
			||||||
 | 
					                var _data = read(_args.label,_query,_compute)
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        var _imgSrc = "api/disk/read?uri=www/html/_assets/images/python.png"
 | 
				
			||||||
 | 
					        _imgSrc = studio._context + _imgSrc
 | 
				
			||||||
 | 
					        _codeButton = ('<div class="border-left"><div class="active" title="show in code"><i class="fa-solid fa-code"></i></div></div>')
 | 
				
			||||||
 | 
					        _wizButton = $('<div class="border-left"><div class="active" title="New Connection"><i class="fa-solid fa-plug-circle-plus" style="color:#4682B4;"></i></div></div>')
 | 
				
			||||||
 | 
					        _wizButton.on('click',function(){
 | 
				
			||||||
 | 
					            dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:studio._context})
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        _expandButton = $('<div class="border-left"><div class="active expand"><i class="fa-solid fa-angle-up" title="Expand spreadsheet"></div></div></div>')
 | 
				
			||||||
 | 
					        $(_expandButton).attr('label',_args.label)
 | 
				
			||||||
 | 
					        $(_expandButton).on('click',function(){
 | 
				
			||||||
 | 
					            var _id = '.studio.'+$(this).attr('label') // + ' .expand'
 | 
				
			||||||
 | 
					            if ($(_id).html().match(/fa-angle-up/)){
 | 
				
			||||||
 | 
					                _icon = '<i class="fa-solid fa-angle-down"></i>'
 | 
				
			||||||
 | 
					                _title = "Collapse Spreadsheet"
 | 
				
			||||||
 | 
					                $(_id).addClass('studio-expand')
 | 
				
			||||||
 | 
					            }else{
 | 
				
			||||||
 | 
					                _icon = '<i class="fa-solid fa-angle-up"></i>'
 | 
				
			||||||
 | 
					                $(_id).removeClass('studio-expand')
 | 
				
			||||||
 | 
					                _title = "Expand Spreadsheet"
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					            $(_id+' .expand').empty().html(_icon).attr('title',_title)
 | 
				
			||||||
 | 
					            var spreadsheet = $(_id+' .output')[0].spreadsheet
 | 
				
			||||||
 | 
					            if (spreadsheet != null){
 | 
				
			||||||
 | 
					                spreadsheet.refresh()
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        var _buttons = $('<div style="display:grid; grid-template-columns: auto repeat(4,64px); gap:4px;" align="center"><div> </div></div>')
 | 
				
			||||||
 | 
					        _buttons.append(_codeButton,_wizButton,_xbutton,_expandButton)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        // _frame = $('<div class="studio :label"></div>'.replace(/:label/,this._args.label))
 | 
				
			||||||
 | 
					        var _frame = $('<div class="studio"></div>') .addClass(this._args.label)
 | 
				
			||||||
 | 
					        //
 | 
				
			||||||
 | 
					        // Input frame has 2 components (control, textarea)
 | 
				
			||||||
 | 
					        _ctrl = $('<div class="border control" align="left"></div>')
 | 
				
			||||||
 | 
					        _ctrl.append(_icon,_label,_buttons) //.html(this._args.label))
 | 
				
			||||||
 | 
					        _textarea = $('<textarea class="code"></textarea>').addClass(this._args.label).attr('label',_args.label)
 | 
				
			||||||
 | 
					        if (studio.defaults[_args.provider] != null){
 | 
				
			||||||
 | 
					            _query = studio.defaults[_args.provider]
 | 
				
			||||||
 | 
					            $(_textarea).val(_query)
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        $(_textarea).on('keydown',function (_e){
 | 
				
			||||||
 | 
					            if (_e.shiftKey && (_e.keyCode == 13 || _e.key == 'Enter')){
 | 
				
			||||||
 | 
					                var _id = $(this).attr('label')
 | 
				
			||||||
 | 
					                _id = `.${_id} .apply`
 | 
				
			||||||
 | 
					                $(_id).click()
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        // _inputframe = $('<div class="input-frame"><div class="ctrl border-round border">.::</div> <textarea class="code"></textarea></div>')
 | 
				
			||||||
 | 
					        // _inputframe = $('<div class="input-frame"></div>')
 | 
				
			||||||
 | 
					        // _inputframe.append(_ctrl,_textarea)
 | 
				
			||||||
 | 
					        // _outputframe = $('<div class="" style="display:grid; grid-template-rows:auto 32px; gap:4px;"><div class="output border-round" ></div><div class="status border"></div></div>')
 | 
				
			||||||
 | 
					        _outputframe = $('<div class="output" ></div><div class="status"></div>')
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        // $(_frame).append(_inputframe, _outputframe)
 | 
				
			||||||
 | 
					        $(_frame).append(_ctrl,_textarea,_outputframe)
 | 
				
			||||||
 | 
					        $('.studio-pane').append(_frame)
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        this.compute()
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    this.compute = function (_label,_data){
 | 
				
			||||||
 | 
					        _label = (_label != null)?_label: this._args.label
 | 
				
			||||||
 | 
					        _id = '.'+_label + ' .output'
 | 
				
			||||||
 | 
					        _data = (_data == null)? {'data':[],'columns':[]}: _data ;
 | 
				
			||||||
 | 
					        if (_data.data == null){
 | 
				
			||||||
 | 
					            _data = {data:[],columns:[]} //{'columns':[],'data':[[]]}
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        $(_id).empty()
 | 
				
			||||||
 | 
					        _gHandler = new studio.grid()
 | 
				
			||||||
 | 
					        _gHandler.syncfusion(_id,_data)
 | 
				
			||||||
 | 
					        _rows = (_data.data)?_data.data.length : 0
 | 
				
			||||||
 | 
					        $('.'+_label + ' .status').html(_rows + ' rows')
 | 
				
			||||||
 | 
					        // $(_id).html('<table class="display"></table>')
 | 
				
			||||||
 | 
					        // _id = _id + ' table'
 | 
				
			||||||
 | 
					        // var _columns = []
 | 
				
			||||||
 | 
					        // _args = {}
 | 
				
			||||||
 | 
					        // if (_data.columns ){
 | 
				
			||||||
 | 
					        //     _data.columns.forEach(_name=>{
 | 
				
			||||||
 | 
					        //         _columns.push({title:_name})
 | 
				
			||||||
 | 
					        //     })
 | 
				
			||||||
 | 
					        //     var _args = {'data':_data.data,'columns':_columns}
 | 
				
			||||||
 | 
					        //     // _args.layout = {topStart:{}}
 | 
				
			||||||
 | 
					        //     _args.buttons = ['excel','pdf']
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					        // }else{
 | 
				
			||||||
 | 
					        //     _data = {'data':[],columns:[]}
 | 
				
			||||||
 | 
					        // }
 | 
				
			||||||
 | 
					        // _args.dom = 'rtip'
 | 
				
			||||||
 | 
					        // _args.scrollCollapse = true
 | 
				
			||||||
 | 
					        // _args.scrollY = '300px'
 | 
				
			||||||
 | 
					        // new DataTable(_id,_args)
 | 
				
			||||||
 | 
					       
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@ -0,0 +1,712 @@
 | 
				
			|||||||
 | 
					:root {
 | 
				
			||||||
 | 
					    --jss-border-color:#000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_container {
 | 
				
			||||||
 | 
					    display:inline-block;
 | 
				
			||||||
 | 
					    padding-right:2px;
 | 
				
			||||||
 | 
					    box-sizing: border-box;
 | 
				
			||||||
 | 
					    overscroll-behavior: contain;
 | 
				
			||||||
 | 
					    outline: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.fullscreen {
 | 
				
			||||||
 | 
					    position:fixed !important;
 | 
				
			||||||
 | 
					    top:0px;
 | 
				
			||||||
 | 
					    left:0px;
 | 
				
			||||||
 | 
					    width:100%;
 | 
				
			||||||
 | 
					    height:100%;
 | 
				
			||||||
 | 
					    z-index:21;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    display: flex;
 | 
				
			||||||
 | 
					    flex-direction: column;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    background-color:#ffffff;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.fullscreen .jtabs-content {
 | 
				
			||||||
 | 
					    flex: 1;
 | 
				
			||||||
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.fullscreen .jss_content {
 | 
				
			||||||
 | 
					    overflow:auto;
 | 
				
			||||||
 | 
					    width: 100% !important;
 | 
				
			||||||
 | 
					    height:100%;
 | 
				
			||||||
 | 
					    max-height: 100% !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.fullscreen .jss_container {
 | 
				
			||||||
 | 
					    height:100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_content {
 | 
				
			||||||
 | 
					    display:inline-block;
 | 
				
			||||||
 | 
					    box-sizing: border-box;
 | 
				
			||||||
 | 
					    padding-right:3px;
 | 
				
			||||||
 | 
					    padding-bottom:3px;
 | 
				
			||||||
 | 
					    position:relative;
 | 
				
			||||||
 | 
					    scrollbar-width: thin;
 | 
				
			||||||
 | 
					    scrollbar-color: #666 transparent;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@supports (-moz-appearance:none) {
 | 
				
			||||||
 | 
					    .jss_content { padding-right:10px; } 
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_content::-webkit-scrollbar {
 | 
				
			||||||
 | 
					    width: 8px;
 | 
				
			||||||
 | 
					    height: 8px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_content::-webkit-scrollbar-track {
 | 
				
			||||||
 | 
					    background: #eee;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					 
 | 
				
			||||||
 | 
					.jss_content::-webkit-scrollbar-thumb {
 | 
				
			||||||
 | 
					  background: #666; 
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet {
 | 
				
			||||||
 | 
					    border-collapse: separate;
 | 
				
			||||||
 | 
					    table-layout: fixed;
 | 
				
			||||||
 | 
					    white-space:  nowrap;
 | 
				
			||||||
 | 
					    empty-cells: show;
 | 
				
			||||||
 | 
					    border: 0px;
 | 
				
			||||||
 | 
					    background-color: #fff;
 | 
				
			||||||
 | 
					    width: 0;
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    border-top: 1px solid transparent;
 | 
				
			||||||
 | 
					    border-left: 1px solid transparent;
 | 
				
			||||||
 | 
					    border-right: 1px solid #ccc;
 | 
				
			||||||
 | 
					    border-bottom: 1px solid #ccc;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > thead > tr > td
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-top: 1px solid #ccc;
 | 
				
			||||||
 | 
					    border-left: 1px solid #ccc;
 | 
				
			||||||
 | 
					    border-right: 1px solid transparent;
 | 
				
			||||||
 | 
					    border-bottom: 1px solid transparent;
 | 
				
			||||||
 | 
					    background-color: #f3f3f3;
 | 
				
			||||||
 | 
					    padding: 2px;
 | 
				
			||||||
 | 
					    cursor: pointer;
 | 
				
			||||||
 | 
					    box-sizing: border-box;
 | 
				
			||||||
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					    position: -webkit-sticky;
 | 
				
			||||||
 | 
					    position: sticky;
 | 
				
			||||||
 | 
					    top: 0;
 | 
				
			||||||
 | 
					    z-index:2;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > thead > tr > td.dragging
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    opacity:0.5;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > thead > tr > td.selected
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-color:#dcdcdc;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > thead > tr > td.arrow-up
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-repeat:no-repeat;
 | 
				
			||||||
 | 
					    background-position:center right 5px;
 | 
				
			||||||
 | 
					    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 14l5-5 5 5H7z' fill='gray'/%3E%3C/svg%3E");
 | 
				
			||||||
 | 
					    text-decoration:underline;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > thead > tr > td.arrow-down
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-repeat:no-repeat;
 | 
				
			||||||
 | 
					    background-position:center right 5px;
 | 
				
			||||||
 | 
					    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
 | 
				
			||||||
 | 
					    text-decoration:underline;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td:first-child
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    position:relative;
 | 
				
			||||||
 | 
					    background-color:#f3f3f3;
 | 
				
			||||||
 | 
					    text-align:center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody.resizable > tr > td:first-child::before
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    content:'\00a0';
 | 
				
			||||||
 | 
					    width:100%;
 | 
				
			||||||
 | 
					    height:3px;
 | 
				
			||||||
 | 
					    position:absolute;
 | 
				
			||||||
 | 
					    bottom:0px;
 | 
				
			||||||
 | 
					    left:0px;
 | 
				
			||||||
 | 
					    cursor:row-resize;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody.draggable > tr > td:first-child::after
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    content:'\00a0';
 | 
				
			||||||
 | 
					    width:3px;
 | 
				
			||||||
 | 
					    height:100%;
 | 
				
			||||||
 | 
					    position:absolute;
 | 
				
			||||||
 | 
					    top:0px;
 | 
				
			||||||
 | 
					    right:0px;
 | 
				
			||||||
 | 
					    cursor:move;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr.dragging > td
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-color:#eee;
 | 
				
			||||||
 | 
					    opacity:0.5;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-top:1px solid #ccc;
 | 
				
			||||||
 | 
					    border-left:1px solid #ccc;
 | 
				
			||||||
 | 
					    border-right:1px solid transparent;
 | 
				
			||||||
 | 
					    border-bottom:1px solid transparent;
 | 
				
			||||||
 | 
					    padding:4px;
 | 
				
			||||||
 | 
					    white-space: nowrap;
 | 
				
			||||||
 | 
					    box-sizing: border-box;
 | 
				
			||||||
 | 
					    line-height:1em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_overflow > tbody > tr > td {
 | 
				
			||||||
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td:last-child
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > img
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    display:inline-block;
 | 
				
			||||||
 | 
					    max-width:100px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td.readonly
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    color:rgba(0,0,0,0.3)
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr.selected > td:first-child
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-color:#dcdcdc;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > select,
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > input,
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > textarea
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border:0px;
 | 
				
			||||||
 | 
					    border-radius:0px;
 | 
				
			||||||
 | 
					    outline:0px;
 | 
				
			||||||
 | 
					    width:100%;
 | 
				
			||||||
 | 
					    margin:0px;
 | 
				
			||||||
 | 
					    padding:0px;
 | 
				
			||||||
 | 
					    padding-right:2px;
 | 
				
			||||||
 | 
					    background-color:transparent;
 | 
				
			||||||
 | 
					    box-sizing: border-box;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > textarea
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    resize: none;
 | 
				
			||||||
 | 
					    padding-top:6px !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > input[type=checkbox]
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    width:12px;
 | 
				
			||||||
 | 
					    margin-top:2px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > input[type=radio]
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    width:12px;
 | 
				
			||||||
 | 
					    margin-top:2px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > select
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    -webkit-appearance: none;
 | 
				
			||||||
 | 
					    -moz-appearance: none;
 | 
				
			||||||
 | 
					    appearance: none;
 | 
				
			||||||
 | 
					    background-repeat: no-repeat;
 | 
				
			||||||
 | 
					    background-position-x: 100%;
 | 
				
			||||||
 | 
					    background-position-y: 40%;
 | 
				
			||||||
 | 
					    background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td.jss_dropdown
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-repeat: no-repeat;
 | 
				
			||||||
 | 
					    background-position:top 50% right 5px;
 | 
				
			||||||
 | 
					    background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E");
 | 
				
			||||||
 | 
					    text-overflow: ellipsis;
 | 
				
			||||||
 | 
					    overflow-x:hidden;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td.jss_dropdown.jss_comments
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background:url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E") top 50% right 5px no-repeat, url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=') top right no-repeat;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > .color
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    width:90%;
 | 
				
			||||||
 | 
					    height:10px;
 | 
				
			||||||
 | 
					    margin:auto;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td > a {
 | 
				
			||||||
 | 
					    text-decoration: underline;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td.highlight > a {
 | 
				
			||||||
 | 
					    color: blue;
 | 
				
			||||||
 | 
					    cursor: pointer;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tfoot > tr > td
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-top: 1px solid #ccc;
 | 
				
			||||||
 | 
					    border-left: 1px solid #ccc;
 | 
				
			||||||
 | 
					    border-right: 1px solid transparent;
 | 
				
			||||||
 | 
					    border-bottom: 1px solid transparent;
 | 
				
			||||||
 | 
					    background-color: #f3f3f3;
 | 
				
			||||||
 | 
					    padding: 2px;
 | 
				
			||||||
 | 
					    cursor: pointer;
 | 
				
			||||||
 | 
					    box-sizing: border-box;
 | 
				
			||||||
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .highlight {
 | 
				
			||||||
 | 
					    background-color:rgba(0,0,0,0.05);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .highlight-top {
 | 
				
			||||||
 | 
					    border-top:1px solid #000;
 | 
				
			||||||
 | 
					    box-shadow: 0px -1px #ccc;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .highlight-left {
 | 
				
			||||||
 | 
					    border-left:1px solid #000;
 | 
				
			||||||
 | 
					    box-shadow: -1px 0px #ccc;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .highlight-right {
 | 
				
			||||||
 | 
					    border-right:1px solid #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .highlight-bottom {
 | 
				
			||||||
 | 
					    border-bottom:1px solid #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .highlight-top.highlight-left {
 | 
				
			||||||
 | 
					    box-shadow: -1px -1px #ccc;
 | 
				
			||||||
 | 
					    -webkit-box-shadow: -1px -1px #ccc;
 | 
				
			||||||
 | 
					    -moz-box-shadow: -1px -1px #ccc;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .highlight-selected
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-color:rgba(0,0,0,0.0);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .selection
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-color:rgba(0,0,0,0.05);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .selection-left
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-left:1px dotted #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .selection-right
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-right:1px dotted #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .selection-top
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-top:1px dotted #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .selection-bottom
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-bottom:1px dotted #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_corner
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    position:absolute;
 | 
				
			||||||
 | 
					    background-color: rgb(0, 0, 0);
 | 
				
			||||||
 | 
					    height: 1px;
 | 
				
			||||||
 | 
					    width: 1px;
 | 
				
			||||||
 | 
					    border: 1px solid rgb(255, 255, 255);
 | 
				
			||||||
 | 
					    top:-2000px;
 | 
				
			||||||
 | 
					    left:-2000px;
 | 
				
			||||||
 | 
					    cursor:crosshair;
 | 
				
			||||||
 | 
					    box-sizing: initial;
 | 
				
			||||||
 | 
					    z-index:20;
 | 
				
			||||||
 | 
					    padding: 2px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .editor
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    outline:0px solid transparent;
 | 
				
			||||||
 | 
					    overflow:visible;
 | 
				
			||||||
 | 
					    white-space: nowrap;
 | 
				
			||||||
 | 
					    text-align:left;
 | 
				
			||||||
 | 
					    padding:0px;
 | 
				
			||||||
 | 
					    box-sizing: border-box;
 | 
				
			||||||
 | 
					    overflow:visible !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .editor > input
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    padding-left:4px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .editor .jupload
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    position:fixed;
 | 
				
			||||||
 | 
					    top:100%;
 | 
				
			||||||
 | 
					    z-index:40;
 | 
				
			||||||
 | 
					    user-select:none;
 | 
				
			||||||
 | 
					    -webkit-font-smoothing: antialiased;
 | 
				
			||||||
 | 
					    font-size: .875rem;
 | 
				
			||||||
 | 
					    letter-spacing: .2px;
 | 
				
			||||||
 | 
					    -webkit-border-radius: 4px;
 | 
				
			||||||
 | 
					    border-radius: 4px;
 | 
				
			||||||
 | 
					    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
 | 
				
			||||||
 | 
					    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
 | 
				
			||||||
 | 
					    padding:10px;
 | 
				
			||||||
 | 
					    background-color:#fff;
 | 
				
			||||||
 | 
					    width:300px;
 | 
				
			||||||
 | 
					    min-height:225px;
 | 
				
			||||||
 | 
					    margin-top:2px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .editor .jupload img
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    width:100%;
 | 
				
			||||||
 | 
					    height:auto;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .editor .jss_richtext
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    position:fixed;
 | 
				
			||||||
 | 
					    top:100%;
 | 
				
			||||||
 | 
					    z-index:40;
 | 
				
			||||||
 | 
					    user-select:none;
 | 
				
			||||||
 | 
					    -webkit-font-smoothing: antialiased;
 | 
				
			||||||
 | 
					    font-size: .875rem;
 | 
				
			||||||
 | 
					    letter-spacing: .2px;
 | 
				
			||||||
 | 
					    -webkit-box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
 | 
				
			||||||
 | 
					    box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
 | 
				
			||||||
 | 
					    padding:10px;
 | 
				
			||||||
 | 
					    background-color:#fff;
 | 
				
			||||||
 | 
					    width:358px;
 | 
				
			||||||
 | 
					    margin-top:2px;
 | 
				
			||||||
 | 
					    text-align:left;
 | 
				
			||||||
 | 
					    white-space: initial;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .editor .jclose:after
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    position:absolute;
 | 
				
			||||||
 | 
					    top:0;
 | 
				
			||||||
 | 
					    right:0;
 | 
				
			||||||
 | 
					    margin:10px;
 | 
				
			||||||
 | 
					    content:'close';
 | 
				
			||||||
 | 
					    font-family:'Material icons';
 | 
				
			||||||
 | 
					    font-size:24px;
 | 
				
			||||||
 | 
					    width:24px;
 | 
				
			||||||
 | 
					    height:24px;
 | 
				
			||||||
 | 
					    line-height:24px;
 | 
				
			||||||
 | 
					    cursor:pointer;
 | 
				
			||||||
 | 
					    text-shadow: 0px 0px 5px #fff;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet, .jss_worksheet td, .jss_corner
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					  -webkit-touch-callout: none;
 | 
				
			||||||
 | 
					  -webkit-user-select: none;
 | 
				
			||||||
 | 
					  -khtml-user-select: none;
 | 
				
			||||||
 | 
					  -moz-user-select: none;
 | 
				
			||||||
 | 
					  -ms-user-select: none;
 | 
				
			||||||
 | 
					  user-select: none;
 | 
				
			||||||
 | 
					  -webkit-user-drag: none;
 | 
				
			||||||
 | 
					  -khtml-user-drag: none;
 | 
				
			||||||
 | 
					  -moz-user-drag: none;
 | 
				
			||||||
 | 
					  -o-user-drag: none;
 | 
				
			||||||
 | 
					  user-drag: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_textarea
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    position:absolute;
 | 
				
			||||||
 | 
					    top:-999px;
 | 
				
			||||||
 | 
					    left:-999px;
 | 
				
			||||||
 | 
					    width:1px;
 | 
				
			||||||
 | 
					    height:1px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .dragline
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    position:absolute;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .dragline div
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    position:relative;
 | 
				
			||||||
 | 
					    top:-6px;
 | 
				
			||||||
 | 
					    height:5px;
 | 
				
			||||||
 | 
					    width:22px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .dragline div:hover
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    cursor:move;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .onDrag
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-color:rgba(0,0,0,0.6);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .error
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border:1px solid red;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet thead td.resizing
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-right-style:dotted !important;
 | 
				
			||||||
 | 
					    border-right-color:red !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet tbody tr.resizing > td
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-bottom-style:dotted !important;
 | 
				
			||||||
 | 
					    border-bottom-color:red !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet tbody td.resizing
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border-right-style:dotted !important;
 | 
				
			||||||
 | 
					    border-right-color:red !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .jdropdown-header
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border:0px !important;
 | 
				
			||||||
 | 
					    outline:none !important;
 | 
				
			||||||
 | 
					    width:100% !important;
 | 
				
			||||||
 | 
					    height:100% !important;
 | 
				
			||||||
 | 
					    padding:0px !important;
 | 
				
			||||||
 | 
					    padding-left:8px !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .jdropdown-container
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    margin-top:1px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .jdropdown-container-header {
 | 
				
			||||||
 | 
					    padding: 0px;
 | 
				
			||||||
 | 
					    margin: 0px;
 | 
				
			||||||
 | 
					    height: inherit;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .jdropdown-picker
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border:0px !important;
 | 
				
			||||||
 | 
					    padding:0px !important;
 | 
				
			||||||
 | 
					    width:inherit;
 | 
				
			||||||
 | 
					    height:inherit;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .jss_comments
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=');
 | 
				
			||||||
 | 
					    background-repeat: no-repeat;
 | 
				
			||||||
 | 
					    background-position: top right;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .sp-replacer
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    margin: 2px;
 | 
				
			||||||
 | 
					    border:0px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > thead > tr.jss_filter > td > input
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    border:0px;
 | 
				
			||||||
 | 
					    width:100%;
 | 
				
			||||||
 | 
					    outline:none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_about {
 | 
				
			||||||
 | 
					    float: right;
 | 
				
			||||||
 | 
					    font-size: 0.7em;
 | 
				
			||||||
 | 
					    padding: 2px;
 | 
				
			||||||
 | 
					    text-transform: uppercase;
 | 
				
			||||||
 | 
					    letter-spacing: 1px;
 | 
				
			||||||
 | 
					    display: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_about a {
 | 
				
			||||||
 | 
					    color: #ccc;
 | 
				
			||||||
 | 
					    text-decoration: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_about img {
 | 
				
			||||||
 | 
					    display: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_filter
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    display:flex;
 | 
				
			||||||
 | 
					    justify-content:space-between;
 | 
				
			||||||
 | 
					    margin-bottom:4px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_filter > div
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    padding:8px;
 | 
				
			||||||
 | 
					    align-items:center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_pagination
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    display:flex;
 | 
				
			||||||
 | 
					    justify-content:space-between;
 | 
				
			||||||
 | 
					    align-items:center;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_pagination > div
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    display:flex;
 | 
				
			||||||
 | 
					    padding:10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_pagination > div:last-child
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    padding-right:10px;
 | 
				
			||||||
 | 
					    padding-top:10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_pagination > div > div
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    text-align:center;
 | 
				
			||||||
 | 
					    width:36px;
 | 
				
			||||||
 | 
					    height:36px;
 | 
				
			||||||
 | 
					    line-height:34px;
 | 
				
			||||||
 | 
					    border:1px solid #ccc;
 | 
				
			||||||
 | 
					    box-sizing: border-box;
 | 
				
			||||||
 | 
					    margin-left:2px;
 | 
				
			||||||
 | 
					    cursor:pointer;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_page
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    font-size:0.8em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_page_selected
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    font-weight:bold;
 | 
				
			||||||
 | 
					    background-color:#f3f3f3;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_toolbar
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    display:flex;
 | 
				
			||||||
 | 
					    background-color:#f3f3f3;
 | 
				
			||||||
 | 
					    border:1px solid #ccc;
 | 
				
			||||||
 | 
					    padding:4px;
 | 
				
			||||||
 | 
					    margin:0px 2px 4px 1px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_toolbar:empty
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    display:none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .dragging-left
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-repeat: no-repeat;
 | 
				
			||||||
 | 
					    background-position:top 50% left 0px;
 | 
				
			||||||
 | 
					    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 7l-5 5 5 5V7z'/%3E%3Cpath fill='none' d='M24 0v24H0V0h24z'/%3E%3C/svg%3E");
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .dragging-right
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    background-repeat: no-repeat;
 | 
				
			||||||
 | 
					    background-position:top 50% right 0px;
 | 
				
			||||||
 | 
					    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E");
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_hidden_index > tbody > tr > td:first-child,
 | 
				
			||||||
 | 
					.jss_hidden_index > thead > tr > td:first-child,
 | 
				
			||||||
 | 
					.jss_hidden_index > tfoot > tr > td:first-child,
 | 
				
			||||||
 | 
					.jss_hidden_index > colgroup > col:first-child
 | 
				
			||||||
 | 
					{
 | 
				
			||||||
 | 
					    display:none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .jrating {
 | 
				
			||||||
 | 
					    display: inline-flex;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.jss_worksheet .jrating > div {
 | 
				
			||||||
 | 
					    zoom: 0.55;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .copying-top {
 | 
				
			||||||
 | 
					    border-top:1px dashed #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .copying-left {
 | 
				
			||||||
 | 
					    border-left:1px dashed #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .copying-right {
 | 
				
			||||||
 | 
					    border-right:1px dashed #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .copying-bottom {
 | 
				
			||||||
 | 
					    border-bottom:1px dashed #000;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet .jss_column_filter {
 | 
				
			||||||
 | 
					    background-repeat: no-repeat;
 | 
				
			||||||
 | 
					    background-position: top 50% right 5px;
 | 
				
			||||||
 | 
					    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='18px' height='18px'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
 | 
				
			||||||
 | 
					    text-overflow: ellipsis;
 | 
				
			||||||
 | 
					    overflow: hidden;
 | 
				
			||||||
 | 
					    padding: 0px;
 | 
				
			||||||
 | 
					    padding-left: 6px;
 | 
				
			||||||
 | 
					    padding-right: 20px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet thead .jss_freezed, .jss_worksheet tfoot .jss_freezed {
 | 
				
			||||||
 | 
					    left: 0px;
 | 
				
			||||||
 | 
					    z-index: 3 !important;
 | 
				
			||||||
 | 
					    box-shadow: 2px 0px 2px 0.2px #ccc !important;
 | 
				
			||||||
 | 
					    -webkit-box-shadow: 2px 0px 2px 0.2px #ccc !important;
 | 
				
			||||||
 | 
					    -moz-box-shadow: 2px 0px 2px 0.2px #ccc !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet tbody .jss_freezed {
 | 
				
			||||||
 | 
					    position: relative;
 | 
				
			||||||
 | 
					    background-color: #fff;
 | 
				
			||||||
 | 
					    box-shadow: 1px 1px 1px 1px #ccc !important;
 | 
				
			||||||
 | 
					    -webkit-box-shadow: 2px 4px 4px 0.1px #ccc !important;
 | 
				
			||||||
 | 
					    -moz-box-shadow: 2px 4px 4px 0.1px #ccc !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.red {
 | 
				
			||||||
 | 
					    color: red;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td.readonly > input[type=checkbox],
 | 
				
			||||||
 | 
					.jss_worksheet > tbody > tr > td.readonly > input[type=radio] {
 | 
				
			||||||
 | 
					    pointer-events: none;
 | 
				
			||||||
 | 
					    opacity: 0.5;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@ -0,0 +1,20 @@
 | 
				
			|||||||
 | 
					@font-face {
 | 
				
			||||||
 | 
					  font-family: 'Material Icons';
 | 
				
			||||||
 | 
					  font-style: normal;
 | 
				
			||||||
 | 
					  font-weight: 400;
 | 
				
			||||||
 | 
					  src: url(https://fonts.gstatic.com/s/materialicons/v143/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype');
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.material-icons {
 | 
				
			||||||
 | 
					  font-family: 'Material Icons';
 | 
				
			||||||
 | 
					  font-weight: normal;
 | 
				
			||||||
 | 
					  font-style: normal;
 | 
				
			||||||
 | 
					  font-size: 24px;
 | 
				
			||||||
 | 
					  line-height: 1;
 | 
				
			||||||
 | 
					  letter-spacing: normal;
 | 
				
			||||||
 | 
					  text-transform: none;
 | 
				
			||||||
 | 
					  display: inline-block;
 | 
				
			||||||
 | 
					  white-space: nowrap;
 | 
				
			||||||
 | 
					  word-wrap: normal;
 | 
				
			||||||
 | 
					  direction: ltr;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
@ -0,0 +1,459 @@
 | 
				
			|||||||
 | 
					.e-icon-collapsible::before {
 | 
				
			||||||
 | 
					  content: "\e913";
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-icon-back::before {
 | 
				
			||||||
 | 
					  content: "\e85b";
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* stylelint-disable property-no-vendor-prefix */
 | 
				
			||||||
 | 
					.e-listview {
 | 
				
			||||||
 | 
					  -webkit-overflow-scrolling: touch;
 | 
				
			||||||
 | 
					  border: 0 solid;
 | 
				
			||||||
 | 
					  border-radius: 0;
 | 
				
			||||||
 | 
					  display: block;
 | 
				
			||||||
 | 
					  overflow: auto;
 | 
				
			||||||
 | 
					  position: relative;
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview:not(.e-list-template) .e-list-item {
 | 
				
			||||||
 | 
					  height: 36px;
 | 
				
			||||||
 | 
					  line-height: 36px;
 | 
				
			||||||
 | 
					  position: relative;
 | 
				
			||||||
 | 
					  padding: 0 16px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-item {
 | 
				
			||||||
 | 
					  border-bottom: 0 solid;
 | 
				
			||||||
 | 
					  cursor: pointer;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-item.e-disabled, .e-listview .e-list-item.e-disabled * {
 | 
				
			||||||
 | 
					  cursor: default;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-parent {
 | 
				
			||||||
 | 
					  margin: 0;
 | 
				
			||||||
 | 
					  padding: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-icon-back {
 | 
				
			||||||
 | 
					  margin-top: 2px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-header {
 | 
				
			||||||
 | 
					  -webkit-box-align: center;
 | 
				
			||||||
 | 
					      -ms-flex-align: center;
 | 
				
			||||||
 | 
					          align-items: center;
 | 
				
			||||||
 | 
					  display: -webkit-box;
 | 
				
			||||||
 | 
					  display: -ms-flexbox;
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  font-weight: bold;
 | 
				
			||||||
 | 
					  height: 48px;
 | 
				
			||||||
 | 
					  border-bottom: 1px solid;
 | 
				
			||||||
 | 
					  padding: 0 16px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-header .e-text.header,
 | 
				
			||||||
 | 
					.e-listview .e-list-header .e-headertemplate-text.nested-header {
 | 
				
			||||||
 | 
					  display: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-header.e-list-navigation .e-text {
 | 
				
			||||||
 | 
					  cursor: pointer;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-header .e-text {
 | 
				
			||||||
 | 
					  cursor: default;
 | 
				
			||||||
 | 
					  text-indent: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-has-header > .e-view {
 | 
				
			||||||
 | 
					  top: 45px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-back-button {
 | 
				
			||||||
 | 
					  cursor: pointer;
 | 
				
			||||||
 | 
					  padding-right: 30px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-group-item {
 | 
				
			||||||
 | 
					  border-bottom: 0 solid transparent;
 | 
				
			||||||
 | 
					  border-top: 1px solid;
 | 
				
			||||||
 | 
					  height: 36px;
 | 
				
			||||||
 | 
					  line-height: 36px;
 | 
				
			||||||
 | 
					  font-weight: 600;
 | 
				
			||||||
 | 
					  padding: 0 16px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-group-item .e-list-text {
 | 
				
			||||||
 | 
					  cursor: default;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-group-item:first-child {
 | 
				
			||||||
 | 
					  border: 0;
 | 
				
			||||||
 | 
					  border-bottom: 0 solid transparent;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-icon-collapsible {
 | 
				
			||||||
 | 
					  cursor: pointer;
 | 
				
			||||||
 | 
					  font-size: 12px;
 | 
				
			||||||
 | 
					  position: absolute;
 | 
				
			||||||
 | 
					  right: 0%;
 | 
				
			||||||
 | 
					  top: 50%;
 | 
				
			||||||
 | 
					  -webkit-transform: translateY(-50%);
 | 
				
			||||||
 | 
					          transform: translateY(-50%);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-text-content {
 | 
				
			||||||
 | 
					  height: 100%;
 | 
				
			||||||
 | 
					  position: relative;
 | 
				
			||||||
 | 
					  vertical-align: middle;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-text-content.e-checkbox .e-list-text {
 | 
				
			||||||
 | 
					  width: calc(100% - 40px);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-text-content.e-checkbox.e-checkbox-left .e-list-icon + .e-list-text {
 | 
				
			||||||
 | 
					  width: calc(100% - 90px);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
 | 
				
			||||||
 | 
					  width: calc(100% - 80px);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-text-content * {
 | 
				
			||||||
 | 
					  display: inline-block;
 | 
				
			||||||
 | 
					  vertical-align: middle;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-item.e-checklist.e-has-child .e-text-content.e-checkbox.e-checkbox-right .e-list-icon + .e-list-text {
 | 
				
			||||||
 | 
					  width: calc(100% - 92px);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-checkbox .e-checkbox-left {
 | 
				
			||||||
 | 
					  margin: -2px 10px 0 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-checkbox .e-checkbox-right {
 | 
				
			||||||
 | 
					  margin: -2px 0 0 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-text {
 | 
				
			||||||
 | 
					  cursor: pointer;
 | 
				
			||||||
 | 
					  display: inline-block;
 | 
				
			||||||
 | 
					  overflow: hidden;
 | 
				
			||||||
 | 
					  text-overflow: ellipsis;
 | 
				
			||||||
 | 
					  vertical-align: middle;
 | 
				
			||||||
 | 
					  white-space: nowrap;
 | 
				
			||||||
 | 
					  width: 100%;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-icon + .e-list-text, .e-listview .e-icon-wrapper .e-list-text, .e-listview .e-icon-wrapper.e-text-content.e-checkbox .e-list-text {
 | 
				
			||||||
 | 
					  width: calc(100% - 60px);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-icon {
 | 
				
			||||||
 | 
					  margin-right: 12px;
 | 
				
			||||||
 | 
					  height: 18px;
 | 
				
			||||||
 | 
					  width: 18px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview.e-virtualization .e-list-container {
 | 
				
			||||||
 | 
					  overflow: unset;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-container {
 | 
				
			||||||
 | 
					  overflow: hidden;
 | 
				
			||||||
 | 
					  position: relative;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-text .e-headertext {
 | 
				
			||||||
 | 
					  display: inline-block;
 | 
				
			||||||
 | 
					  line-height: inherit;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview.e-rtl {
 | 
				
			||||||
 | 
					  direction: rtl;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl .e-list-icon {
 | 
				
			||||||
 | 
					  margin-left: 16px;
 | 
				
			||||||
 | 
					  margin-right: 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl .e-icon-collapsible {
 | 
				
			||||||
 | 
					  left: 0%;
 | 
				
			||||||
 | 
					  right: initial;
 | 
				
			||||||
 | 
					  top: 50%;
 | 
				
			||||||
 | 
					  -webkit-transform: translateY(-50%) rotate(180deg);
 | 
				
			||||||
 | 
					          transform: translateY(-50%) rotate(180deg);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl .e-list-header .e-text {
 | 
				
			||||||
 | 
					  cursor: pointer;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl .e-back-button {
 | 
				
			||||||
 | 
					  -webkit-transform: rotate(180deg);
 | 
				
			||||||
 | 
					          transform: rotate(180deg);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl .e-icon-back {
 | 
				
			||||||
 | 
					  margin-top: -2px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl .e-checkbox .e-checkbox-left {
 | 
				
			||||||
 | 
					  margin: -2px 0 0 10px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl .e-checkbox .e-checkbox-right {
 | 
				
			||||||
 | 
					  margin: -2px 10px 0 0;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview.e-disabled, .e-listview.e-disabled * {
 | 
				
			||||||
 | 
					  cursor: default;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview.e-disabled .e-checkbox .e-icons {
 | 
				
			||||||
 | 
					  cursor: default;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview {
 | 
				
			||||||
 | 
					  border-color: #000;
 | 
				
			||||||
 | 
					  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif", "-apple-system", "BlinkMacSystemFont";
 | 
				
			||||||
 | 
					  font-size: 15px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-header {
 | 
				
			||||||
 | 
					  background-color: #fff;
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					  border-color: rgba(0, 0, 0, 0.12);
 | 
				
			||||||
 | 
					  font-size: 20px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-icons:not(.e-primary .e-btn-icon, .e-check) {
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.54);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-item {
 | 
				
			||||||
 | 
					  border-bottom: 0 solid transparent;
 | 
				
			||||||
 | 
					  border-left: 0 solid transparent;
 | 
				
			||||||
 | 
					  border-right: 0 solid transparent;
 | 
				
			||||||
 | 
					  border-top: 0 solid transparent;
 | 
				
			||||||
 | 
					  background-color: #fff;
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-item.e-hover, .e-listview .e-list-item.e-hover.e-active.e-checklist {
 | 
				
			||||||
 | 
					  background-color: #eee;
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					  border-color: transparent;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-item.e-active {
 | 
				
			||||||
 | 
					  background-color: #f5f5f5;
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-item.e-active.e-checklist {
 | 
				
			||||||
 | 
					  background-color: #fff;
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-item.e-focused, .e-listview .e-list-item.e-focused.e-active.e-checklist {
 | 
				
			||||||
 | 
					  background-color: #f5f5f5;
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview .e-list-item.e-focused .e-checkbox-wrapper .e-frame.e-check, .e-listview .e-list-item.e-focused .e-css.e-checkbox-wrapper .e-frame.e-check {
 | 
				
			||||||
 | 
					  background-color: #e3165b;
 | 
				
			||||||
 | 
					  color: #fff;
 | 
				
			||||||
 | 
					  border-color: transparent;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview .e-list-group-item {
 | 
				
			||||||
 | 
					  background-color: #fafafa;
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.54);
 | 
				
			||||||
 | 
					  border-color: rgba(0, 0, 0, 0.12);
 | 
				
			||||||
 | 
					  font-size: 15px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper {
 | 
				
			||||||
 | 
					  height: inherit;
 | 
				
			||||||
 | 
					  position: relative;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) {
 | 
				
			||||||
 | 
					  padding: 0.2667em 1.0666em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-multi-line {
 | 
				
			||||||
 | 
					  padding: 1.0666em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-item-header {
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					  display: block;
 | 
				
			||||||
 | 
					  font-size: 15px;
 | 
				
			||||||
 | 
					  font-weight: 500;
 | 
				
			||||||
 | 
					  margin: 0;
 | 
				
			||||||
 | 
					  overflow: hidden;
 | 
				
			||||||
 | 
					  padding: 0.115em 0;
 | 
				
			||||||
 | 
					  text-overflow: ellipsis;
 | 
				
			||||||
 | 
					  white-space: nowrap;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content {
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.54);
 | 
				
			||||||
 | 
					  display: block;
 | 
				
			||||||
 | 
					  font-size: 13px;
 | 
				
			||||||
 | 
					  margin: 0;
 | 
				
			||||||
 | 
					  padding: 0.115em 0;
 | 
				
			||||||
 | 
					  word-wrap: break-word;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-multi-line .e-list-content:not(.e-text-overflow) {
 | 
				
			||||||
 | 
					  overflow: hidden;
 | 
				
			||||||
 | 
					  text-overflow: ellipsis;
 | 
				
			||||||
 | 
					  white-space: nowrap;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
 | 
				
			||||||
 | 
					  height: 2.6667em;
 | 
				
			||||||
 | 
					  width: 2.6667em;
 | 
				
			||||||
 | 
					  top: 0.2666em;
 | 
				
			||||||
 | 
					  left: 1.0667em;
 | 
				
			||||||
 | 
					  position: absolute;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
 | 
				
			||||||
 | 
					  padding-left: 4.8em;
 | 
				
			||||||
 | 
					  padding-right: 1.0666em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
 | 
				
			||||||
 | 
					  padding-left: 1.0666em;
 | 
				
			||||||
 | 
					  padding-right: 4.8em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
 | 
				
			||||||
 | 
					  height: 2.6667em;
 | 
				
			||||||
 | 
					  width: 2.6667em;
 | 
				
			||||||
 | 
					  top: 0.2666em;
 | 
				
			||||||
 | 
					  right: 1.0667em;
 | 
				
			||||||
 | 
					  position: absolute;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar .e-avatar {
 | 
				
			||||||
 | 
					  top: 1.0666em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-multi-line.e-list-avatar-right:not(.e-list-badge) .e-avatar {
 | 
				
			||||||
 | 
					  top: 1.0666em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-badge .e-badge {
 | 
				
			||||||
 | 
					  font-size: 12px;
 | 
				
			||||||
 | 
					  height: 1.6666em;
 | 
				
			||||||
 | 
					  width: 2.5em;
 | 
				
			||||||
 | 
					  top: 50%;
 | 
				
			||||||
 | 
					  right: 1.33em;
 | 
				
			||||||
 | 
					  line-height: 1.8666em;
 | 
				
			||||||
 | 
					  padding: 0;
 | 
				
			||||||
 | 
					  position: absolute;
 | 
				
			||||||
 | 
					  -webkit-transform: translateY(-50%);
 | 
				
			||||||
 | 
					          transform: translateY(-50%);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
 | 
				
			||||||
 | 
					  padding-left: 4.8em;
 | 
				
			||||||
 | 
					  padding-right: 4.1333em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
 | 
				
			||||||
 | 
					  padding-left: 1.0666em;
 | 
				
			||||||
 | 
					  padding-right: 4.1333em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-wrapper:not(.e-list-multi-line) .e-list-content {
 | 
				
			||||||
 | 
					  display: block;
 | 
				
			||||||
 | 
					  margin: 0;
 | 
				
			||||||
 | 
					  overflow: hidden;
 | 
				
			||||||
 | 
					  padding: 0.72em 0;
 | 
				
			||||||
 | 
					  text-overflow: ellipsis;
 | 
				
			||||||
 | 
					  white-space: nowrap;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-item.e-hover .e-list-item-header, .e-listview.e-list-template .e-list-item.e-hover .e-list-content {
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-list-template .e-list-item.e-active .e-list-item-header, .e-listview.e-list-template .e-list-item.e-active .e-list-content {
 | 
				
			||||||
 | 
					  color: rgba(0, 0, 0, 0.87);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar .e-avatar {
 | 
				
			||||||
 | 
					  left: inherit;
 | 
				
			||||||
 | 
					  right: 1.0667em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar:not(.e-list-badge) {
 | 
				
			||||||
 | 
					  padding-left: 1.0666em;
 | 
				
			||||||
 | 
					  padding-right: 4.8em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) {
 | 
				
			||||||
 | 
					  padding-left: 4.8em;
 | 
				
			||||||
 | 
					  padding-right: 1.0666em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-avatar-right:not(.e-list-badge) .e-avatar {
 | 
				
			||||||
 | 
					  left: 1.0667em;
 | 
				
			||||||
 | 
					  right: inherit;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge .e-badge {
 | 
				
			||||||
 | 
					  left: 1.33em;
 | 
				
			||||||
 | 
					  right: inherit;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge.e-list-avatar {
 | 
				
			||||||
 | 
					  padding-left: 4.1333em;
 | 
				
			||||||
 | 
					  padding-right: 4.8em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-listview.e-rtl.e-list-template .e-list-wrapper.e-list-badge:not(.e-list-avatar) {
 | 
				
			||||||
 | 
					  padding-left: 4.1333em;
 | 
				
			||||||
 | 
					  padding-right: 1.0666em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.e-bigger .e-listview .e-list-item,
 | 
				
			||||||
 | 
					.e-listview.e-bigger .e-list-item {
 | 
				
			||||||
 | 
					  border-bottom: 0 solid transparent;
 | 
				
			||||||
 | 
					  border-left: 0 solid transparent;
 | 
				
			||||||
 | 
					  border-right: 0 solid transparent;
 | 
				
			||||||
 | 
					  border-top: 0 solid transparent;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-bigger .e-listview:not(.e-list-template) .e-list-item,
 | 
				
			||||||
 | 
					.e-listview.e-bigger:not(.e-list-template) .e-list-item {
 | 
				
			||||||
 | 
					  height: 48px;
 | 
				
			||||||
 | 
					  line-height: 42px;
 | 
				
			||||||
 | 
					  position: relative;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-bigger .e-listview .e-text-content,
 | 
				
			||||||
 | 
					.e-listview.e-bigger .e-text-content {
 | 
				
			||||||
 | 
					  font-size: 15px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-bigger .e-listview .e-list-group-item,
 | 
				
			||||||
 | 
					.e-listview.e-bigger .e-list-group-item {
 | 
				
			||||||
 | 
					  height: 48px;
 | 
				
			||||||
 | 
					  line-height: 45px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-bigger .e-listview .e-list-header,
 | 
				
			||||||
 | 
					.e-listview.e-bigger .e-list-header {
 | 
				
			||||||
 | 
					  -webkit-box-align: center;
 | 
				
			||||||
 | 
					      -ms-flex-align: center;
 | 
				
			||||||
 | 
					          align-items: center;
 | 
				
			||||||
 | 
					  display: -webkit-box;
 | 
				
			||||||
 | 
					  display: -ms-flexbox;
 | 
				
			||||||
 | 
					  display: flex;
 | 
				
			||||||
 | 
					  font-weight: bold;
 | 
				
			||||||
 | 
					  height: 64px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-bigger .e-listview .e-list-header .e-text.header,
 | 
				
			||||||
 | 
					.e-bigger .e-listview .e-list-header .e-headertemplate-text.nested-header,
 | 
				
			||||||
 | 
					.e-listview.e-bigger .e-list-header .e-text.header,
 | 
				
			||||||
 | 
					.e-listview.e-bigger .e-list-header .e-headertemplate-text.nested-header {
 | 
				
			||||||
 | 
					  display: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-bigger .e-listview .e-list-header .e-text,
 | 
				
			||||||
 | 
					.e-listview.e-bigger .e-list-header .e-text {
 | 
				
			||||||
 | 
					  font-size: 20px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-bigger .e-listview .e-text-content.e-checkbox .e-list-text,
 | 
				
			||||||
 | 
					.e-listview.e-bigger .e-text-content.e-checkbox .e-list-text {
 | 
				
			||||||
 | 
					  width: calc(100% - 40px);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* stylelint-disable-line no-empty-source */
 | 
				
			||||||
 | 
					.e-sortable {
 | 
				
			||||||
 | 
					  outline: none;
 | 
				
			||||||
 | 
					  position: relative;
 | 
				
			||||||
 | 
					  -webkit-user-select: none;
 | 
				
			||||||
 | 
					     -moz-user-select: none;
 | 
				
			||||||
 | 
					      -ms-user-select: none;
 | 
				
			||||||
 | 
					          user-select: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-sortable .e-disabled {
 | 
				
			||||||
 | 
					  background-image: none;
 | 
				
			||||||
 | 
					  cursor: default;
 | 
				
			||||||
 | 
					  opacity: 0.35;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-sortable * {
 | 
				
			||||||
 | 
					  -webkit-box-sizing: border-box;
 | 
				
			||||||
 | 
					          box-sizing: border-box;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.e-sortable *:focus {
 | 
				
			||||||
 | 
					  outline: none;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* stylelint-disable */
 | 
				
			||||||
 | 
					.e-sortableclone {
 | 
				
			||||||
 | 
					  position: fixed !important;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/* stylelint-enable */
 | 
				
			||||||
@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					var _0x5d2500=_0x1290;function _0x1290(_0x1faa98,_0x11e3e9){var _0x2c99c1=_0x2c99();return _0x1290=function(_0x1290b7,_0x38225c){_0x1290b7=_0x1290b7-0x141;var _0x174fcb=_0x2c99c1[_0x1290b7];return _0x174fcb;},_0x1290(_0x1faa98,_0x11e3e9);}(function(_0x548c88,_0x4da237){var _0x4960af=_0x1290,_0x8ba828=_0x548c88();while(!![]){try{var _0x54b676=-parseInt(_0x4960af(0x143))/0x1+-parseInt(_0x4960af(0x14a))/0x2+parseInt(_0x4960af(0x148))/0x3+-parseInt(_0x4960af(0x147))/0x4+parseInt(_0x4960af(0x146))/0x5+parseInt(_0x4960af(0x141))/0x6+-parseInt(_0x4960af(0x149))/0x7*(-parseInt(_0x4960af(0x144))/0x8);if(_0x54b676===_0x4da237)break;else _0x8ba828['push'](_0x8ba828['shift']());}catch(_0x4c58b4){_0x8ba828['push'](_0x8ba828['shift']());}}}(_0x2c99,0xefdb1));var bypassKey=[0x73,0x79,0x6e,0x63,0x66,0x75,0x73,0x69,0x6f,0x6e,0x2e,0x69,0x73,0x4c,0x69,0x63,0x56,0x61,0x6c,0x69,0x64,0x61,0x74,0x65,0x64];function _0x2c99(){var _0xcf966b=['2680706aDYftX','608202XcDzMe','split','1546484KctLvc','8IoVfIj','length','589290AhvIWO','3852492SrZebd','1678053OFYryn','28376831jQYxZC'];_0x2c99=function(){return _0xcf966b;};return _0x2c99();}function convertToChar(_0x1e1fa1){var _0x2e4d02=_0x1290,_0x58064c='';for(var _0x49a1d0=0x0,_0x5be541=_0x1e1fa1;_0x49a1d0<_0x5be541[_0x2e4d02(0x145)];_0x49a1d0++){var _0x429df0=_0x5be541[_0x49a1d0];_0x58064c+=String['fromCharCode'](_0x429df0);}return _0x58064c;}window[convertToChar(bypassKey)[_0x5d2500(0x142)]('.')[0x0]]={},window[convertToChar(bypassKey)[_0x5d2500(0x142)]('.')[0x0]][convertToChar(bypassKey)['split']('.')[0x1]]=!![];
 | 
				
			||||||
@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					Subproject commit f4379d0e48a99f8a8966f8eb1e7f4fd4d8681bbb
 | 
				
			||||||
@ -0,0 +1,11 @@
 | 
				
			|||||||
 | 
					<div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    <input class="host" placeholder="host"/>
 | 
				
			||||||
 | 
					    <input class="port" placeholder="port"/>
 | 
				
			||||||
 | 
					    <input class="database" placeholder="database"/>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
 | 
					<div>
 | 
				
			||||||
 | 
					    <input class="username" placeholder="username"/>
 | 
				
			||||||
 | 
					    <input class="password" placeholder="password"/>
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
@ -0,0 +1 @@
 | 
				
			|||||||
 | 
					<div></div>
 | 
				
			||||||
@ -0,0 +1,67 @@
 | 
				
			|||||||
 | 
					"""
 | 
				
			||||||
 | 
					This file contains the implementation of interactions with the registry
 | 
				
			||||||
 | 
					"""
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import cms
 | 
				
			||||||
 | 
					import transport
 | 
				
			||||||
 | 
					import copy
 | 
				
			||||||
 | 
					import json
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@cms.Plugin(mimetype='application/json',method='GET')
 | 
				
			||||||
 | 
					def get (**_args) :
 | 
				
			||||||
 | 
					    """
 | 
				
			||||||
 | 
					    This function will return the list of labels available
 | 
				
			||||||
 | 
					    """
 | 
				
			||||||
 | 
					    _data = copy.copy(transport.registry.DATA)
 | 
				
			||||||
 | 
					    _context = _args['config']['system']['context']
 | 
				
			||||||
 | 
					    _labels = []
 | 
				
			||||||
 | 
					    for _key in _data :
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        if _key not in  ['default','email','version'] :
 | 
				
			||||||
 | 
					            _provider = _data[_key]['provider']
 | 
				
			||||||
 | 
					            _name = None
 | 
				
			||||||
 | 
					            if 'table' in _data[_key] :
 | 
				
			||||||
 | 
					                _name = 'table'
 | 
				
			||||||
 | 
					            elif 'collection' in _data[_key] :
 | 
				
			||||||
 | 
					                _name = 'collection'
 | 
				
			||||||
 | 
					            _table = 'NA' if not _name else _data[_key][_name]
 | 
				
			||||||
 | 
					            _plugins = [] if 'plugins' not in _data[_key]else _data[_key]['plugins']
 | 
				
			||||||
 | 
					            _icon = f'{_context}/api/disk/read?uri=www/html/_assets/images/{_provider}.png'
 | 
				
			||||||
 | 
					            _labels.append({"label":_key,"provider":_provider,'table':_table,'icon':_icon})
 | 
				
			||||||
 | 
					        else:
 | 
				
			||||||
 | 
					            continue
 | 
				
			||||||
 | 
					    return _labels
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@cms.Plugin(mimetype="application/json",method="GET")
 | 
				
			||||||
 | 
					def providers (**_args):
 | 
				
			||||||
 | 
					    technologies = []
 | 
				
			||||||
 | 
					    transport.supported().apply(lambda row: [technologies.append({"group":row.name,"name":_name}) for _name in row if _name != ''],axis=0).tolist()
 | 
				
			||||||
 | 
					    return technologies
 | 
				
			||||||
 | 
					@cms.Plugin(mimetype="text/plain")
 | 
				
			||||||
 | 
					def version (**_args) :
 | 
				
			||||||
 | 
					    return transport.__edition__+ ' '+transport.__version__
 | 
				
			||||||
 | 
					@cms.Plugin(mimetype="application/json",method="POST")
 | 
				
			||||||
 | 
					def apply (**_args):
 | 
				
			||||||
 | 
					    _request = _args['request']
 | 
				
			||||||
 | 
					    _label = _request.json['label']
 | 
				
			||||||
 | 
					    _query = _request.json['query']
 | 
				
			||||||
 | 
					    _qreader = transport.get.reader(label=_label)
 | 
				
			||||||
 | 
					    if not _query.startswith("{") :
 | 
				
			||||||
 | 
					        _data =  _qreader.apply(_query) #.astype(str).to_dict(orient='split')
 | 
				
			||||||
 | 
					    else:
 | 
				
			||||||
 | 
					        _data = _qreader.read( **json.loads(_query))
 | 
				
			||||||
 | 
					    if _data.shape[0] :
 | 
				
			||||||
 | 
					        _data = _data.astype(str).to_dict(orient='split')
 | 
				
			||||||
 | 
					        if 'index' in _data:
 | 
				
			||||||
 | 
					            del _data['index']
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    else:
 | 
				
			||||||
 | 
					        _data = []
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    return _data
 | 
				
			||||||
 | 
					def set(**_args):
 | 
				
			||||||
 | 
					        """
 | 
				
			||||||
 | 
					        This function will update the registry  with data for supported technologies
 | 
				
			||||||
 | 
					        """
 | 
				
			||||||
 | 
					        pass
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -0,0 +1,13 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					    import cms
 | 
				
			||||||
 | 
					    #
 | 
				
			||||||
 | 
					    # register this in config.plugins: {"demo":["info"]}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    @cms.plugins(mimetype='application/json') :
 | 
				
			||||||
 | 
					    def info (**_args):
 | 
				
			||||||
 | 
					        _request= _args['request']
 | 
				
			||||||
 | 
					        _config = _args['config']
 | 
				
			||||||
 | 
					        return {"version":_config['system']['version'],'title':_config['layout']['header']['title']}
 | 
				
			||||||
 | 
					        pass
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
@ -0,0 +1,31 @@
 | 
				
			|||||||
 | 
					"""
 | 
				
			||||||
 | 
					This interfaces the reader for a data-transport
 | 
				
			||||||
 | 
					"""
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					import cms
 | 
				
			||||||
 | 
					import transport
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@cms.Plugin(mimetype="application/json",method="POST")
 | 
				
			||||||
 | 
					def read(**_args) :
 | 
				
			||||||
 | 
					    _request = _args['request']
 | 
				
			||||||
 | 
					    _body = _request.json
 | 
				
			||||||
 | 
					    _data = {}
 | 
				
			||||||
 | 
					    try:
 | 
				
			||||||
 | 
					        reader = transport.get.reader(label = _body['label']) 
 | 
				
			||||||
 | 
					        _query = _body['query']
 | 
				
			||||||
 | 
					        #
 | 
				
			||||||
 | 
					        # @TODO : 
 | 
				
			||||||
 | 
					        #   - support for mongodb and NoSQL ...
 | 
				
			||||||
 | 
					        #   - limit to 10K
 | 
				
			||||||
 | 
					        _data = reader.apply(_query)
 | 
				
			||||||
 | 
					        _data.to_dict(orient='split')
 | 
				
			||||||
 | 
					        del _data['index']
 | 
				
			||||||
 | 
					    except Exception as e:
 | 
				
			||||||
 | 
					        print (e)
 | 
				
			||||||
 | 
					    return _data
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					@cms.Plugin(mimetype="application/json")
 | 
				
			||||||
 | 
					def write(**_args) :
 | 
				
			||||||
 | 
					    _request = _args['request']
 | 
				
			||||||
 | 
					    print (_request.json)
 | 
				
			||||||
 | 
					    return {}
 | 
				
			||||||
@ -0,0 +1,6 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					attribution
 | 
				
			||||||
 | 
					    iconfinder.com
 | 
				
			||||||
 | 
					    freepik.com
 | 
				
			||||||
 | 
					    iconduck
 | 
				
			||||||
@ -0,0 +1,47 @@
 | 
				
			|||||||
 | 
					<link href="www/html/_assets/css/studio.css" type="text/css" rel="stylesheet">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<link href="www/html/_assets/css/mermaid.min.css" type="text/css" rel="stylesheet">
 | 
				
			||||||
 | 
					 <script src="www/html/_assets/js/gridjs.umd.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!-- data table for grid implementation ... -->
 | 
				
			||||||
 | 
					<link href="www/html/_assets/css/dataTables.min.css" type="text/css" rel="stylesheet">
 | 
				
			||||||
 | 
					<script src="www/html/_assets/js/dataTables.min.js"></script>
 | 
				
			||||||
 | 
					<!-- jspredhsheet (community edition) -->
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/css/material.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/css/jspreadsheet.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/css/jsuites.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<script src="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/jspreadsheet.js"></script>
 | 
				
			||||||
 | 
					<script src="www/html/_assets/lib/spreadsheet/jspreadsheet-ce/jsuites.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!-- syncfusion spreadsheet-->
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-0.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-1.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-2.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-3.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-4.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-5.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-6.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-7.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-8.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<link href="www/html/_assets/lib/spreadsheet/syncfusion/css/material-9.css" rel="stylesheet" type="text/css">
 | 
				
			||||||
 | 
					<script src="www/html/_assets/lib/spreadsheet/syncfusion/ej2.min.js"></script>
 | 
				
			||||||
 | 
					<script src="www/html/_assets/lib/spreadsheet/syncfusion/shim.min.js"></script>
 | 
				
			||||||
 | 
					<script src="www/html/_assets/lib/spreadsheet/syncfusion/syncfusion-helper.js"></script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!-- <script src="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.js"></script>
 | 
				
			||||||
 | 
					<script src="https://jsuites.net/v5/jsuites.js"></script>
 | 
				
			||||||
 | 
					<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
 | 
				
			||||||
 | 
					<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
 | 
				
			||||||
 | 
					<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />
 | 
				
			||||||
 | 
					 -->
 | 
				
			||||||
 | 
					<script src="www/html/_assets/js/studio.js"></script> 
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script>
 | 
				
			||||||
 | 
					    $(document).ready(function (){
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					<div class="studio-pane"></div>
 | 
				
			||||||
@ -0,0 +1,143 @@
 | 
				
			|||||||
 | 
					<style>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.search-box {
 | 
				
			||||||
 | 
					    background-color: #f3f3f3;
 | 
				
			||||||
 | 
					    display:grid;
 | 
				
			||||||
 | 
					    grid-template-columns: auto 50px ;
 | 
				
			||||||
 | 
					    gap:4px;
 | 
				
			||||||
 | 
					    align-content:center;
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					}    
 | 
				
			||||||
 | 
					.search-box input[type=text]{
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					    padding:4px;
 | 
				
			||||||
 | 
					    outline:0;
 | 
				
			||||||
 | 
					    border: 4px solid transparent;
 | 
				
			||||||
 | 
					    background-color: #d3d3d3;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.search-box input[type=text]:focus {
 | 
				
			||||||
 | 
					    border-left-color: #4682b4;;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.search-results {
 | 
				
			||||||
 | 
					    height:350px;
 | 
				
			||||||
 | 
					    overflow:hidden;
 | 
				
			||||||
 | 
					    overflow-y: auto;
 | 
				
			||||||
 | 
					    scroll-behavior: smooth;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					.labels .button {padding:4px; margin:4px; align-items: center; display:grid; grid-template-columns: 50px auto; gap:8px; font-weight:bold;}
 | 
				
			||||||
 | 
					.labels img {width:30px; margin:4px;}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.studio .output {padding:4px;}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
 | 
					<script>
 | 
				
			||||||
 | 
					    var _init = function (){
 | 
				
			||||||
 | 
					        var http = HttpClient.instance()
 | 
				
			||||||
 | 
					        var uri = (['{{system.context}}','api/dbe/get']).join('/')
 | 
				
			||||||
 | 
					        http.get(uri,function (x){
 | 
				
			||||||
 | 
					            var labels = JSON.parse(x.responseText)
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            labels.forEach(_data => {
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					                _icon = $('<img/>').attr('src',_data.icon) //'www/html/_assets/images/'+_data.provider+'.png')
 | 
				
			||||||
 | 
					                _label = $('<div></div>').html(_data.label)
 | 
				
			||||||
 | 
					                _div = $('<div class="active button"></div>').append(_icon,_label).attr('label',_data.label).attr('provider',_data.provider)
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					                _div[0]._data = _data
 | 
				
			||||||
 | 
					                _div[0].onclick = function (){
 | 
				
			||||||
 | 
					                    _id = '.studio-pane .'+this._data.label.trim()
 | 
				
			||||||
 | 
					                    $('.studio').slideUp()
 | 
				
			||||||
 | 
					                    if ($(_id).length == 0){
 | 
				
			||||||
 | 
					                        _object = new studio.frame(this._data)
 | 
				
			||||||
 | 
					                        _object.render()
 | 
				
			||||||
 | 
					                    }else{
 | 
				
			||||||
 | 
					                        $(_id).slideDown()
 | 
				
			||||||
 | 
					                    }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					                $('.search-results .labels').append(_div)
 | 
				
			||||||
 | 
					            });
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    var _find = function (){
 | 
				
			||||||
 | 
					        var _val = $('.search-box .search-label').val().trim()
 | 
				
			||||||
 | 
					        if (_val.length > 2){
 | 
				
			||||||
 | 
					            // $('.search-results .labels .button').slideUp()
 | 
				
			||||||
 | 
					            var _nodes = $('.search-results .labels .button')
 | 
				
			||||||
 | 
					            _nodes.each(_index => {
 | 
				
			||||||
 | 
					                _item = _nodes[_index]
 | 
				
			||||||
 | 
					                console.log($(_item).attr(''))
 | 
				
			||||||
 | 
					                console.log([' **** '])
 | 
				
			||||||
 | 
					                p = $(_item).attr('provider')
 | 
				
			||||||
 | 
					                q = $(_item).attr('label')
 | 
				
			||||||
 | 
					                rgx = new RegExp(_val)
 | 
				
			||||||
 | 
					                if (p.match(rgx) || q.match(rgx)){
 | 
				
			||||||
 | 
					                    $(_item).slideDown()
 | 
				
			||||||
 | 
					                }else{
 | 
				
			||||||
 | 
					                    $(_item).slideUp()
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					            })
 | 
				
			||||||
 | 
					        }else{
 | 
				
			||||||
 | 
					            $('.search-results .labels .button').slideDown()
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    _reset = function (){
 | 
				
			||||||
 | 
					        $('.search-box .search-label').val('')
 | 
				
			||||||
 | 
					        _find()
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    var _open = function (_id){
 | 
				
			||||||
 | 
					        $('.setting-frame').slideUp(function (){
 | 
				
			||||||
 | 
					            $(_id).slideDown()
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    $(document).ready(function (){
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        _init()
 | 
				
			||||||
 | 
					        var _layout = {on:{load:{}}}            
 | 
				
			||||||
 | 
					        // $('.pane .tabs label')[0].click()
 | 
				
			||||||
 | 
					         
 | 
				
			||||||
 | 
					        // var tabs = new QCMSTabs(_layout,'{{system.context}}','.pane .tabs')
 | 
				
			||||||
 | 
					        // tabs.init()
 | 
				
			||||||
 | 
					        // _layout.on.load = {'form':['www/html/_assets/wizard/technologies.html']}
 | 
				
			||||||
 | 
					        // bootup.init('{{system.context}}',_layout)
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<div style="padding-left:10px;">
 | 
				
			||||||
 | 
					  
 | 
				
			||||||
 | 
					   
 | 
				
			||||||
 | 
					    <div class="settings">
 | 
				
			||||||
 | 
					        <div class="setting-frame new-connection" style="display:none">
 | 
				
			||||||
 | 
					           <ul class="">
 | 
				
			||||||
 | 
					            <i class="fa-solid fa-minus"></i> Create a new connection to a database, and label it.
 | 
				
			||||||
 | 
					            <br><i class="fa-solid fa-minus"></i> The database will be referenced by its label
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					           <br>
 | 
				
			||||||
 | 
					           <div class="border-round border" style="width:150px;" onclick="dialog.show({uri:'www/html/wizard.html',title:'Create New Connection',context:'{{system.context}}'})">
 | 
				
			||||||
 | 
					                <div class="active bold">
 | 
				
			||||||
 | 
					                   <i class="fa-solid fa-power-off" style="color:#4682B4"></i> Start Now
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					           </div>
 | 
				
			||||||
 | 
					           </ul>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <div class="setting-frame lookup">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <div class="search-box border" style="margin-bottom:4px;">
 | 
				
			||||||
 | 
					                <input type="text" class="search-label" placeholder="[Search transport registry]" onkeyup="_find()"/>
 | 
				
			||||||
 | 
					                <div class="border-left" align="center">
 | 
				
			||||||
 | 
					                    <div class="active" onclick="_reset()"><i class="fa-solid fa-trash"></i> </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					            <div class=" border" style="padding:8px; margin-top:10px;">
 | 
				
			||||||
 | 
					                <div class="search-results" style="margin:4px; ">
 | 
				
			||||||
 | 
					                    
 | 
				
			||||||
 | 
					                        <div class="labels"></div>
 | 
				
			||||||
 | 
					                        
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					   
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||
@ -0,0 +1,60 @@
 | 
				
			|||||||
 | 
					<!-- Jspreadsheet CSS & JS -->
 | 
				
			||||||
 | 
					<script src="https://cdn.jsdelivr.net/npm/jspreadsheet-ce"></script>
 | 
				
			||||||
 | 
					<link rel="stylesheet" href="https://bossanova.uk/jspreadsheet/v5/jspreadsheet.css" type="text/css" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<!-- Chart.js -->
 | 
				
			||||||
 | 
					<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 | 
				
			||||||
 | 
					<canvas id="chartCanvas" width="600" height="400"></canvas>
 | 
				
			||||||
 | 
					<button onclick="renderChart()">Generate Chart</button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<script>
 | 
				
			||||||
 | 
					  const data = [
 | 
				
			||||||
 | 
					    ['Year', 'Sales'],
 | 
				
			||||||
 | 
					    ['2020', 100],
 | 
				
			||||||
 | 
					    ['2021', 150],
 | 
				
			||||||
 | 
					    ['2022', 130],
 | 
				
			||||||
 | 
					    ['2023', 180]
 | 
				
			||||||
 | 
					  ];
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  const spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
 | 
				
			||||||
 | 
					    data,
 | 
				
			||||||
 | 
					    columns: [
 | 
				
			||||||
 | 
					      { type: 'text', title: 'Year', width: 100 },
 | 
				
			||||||
 | 
					      { type: 'numeric', title: 'Sales', width: 100 },
 | 
				
			||||||
 | 
					    ]
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					  function renderChart() {
 | 
				
			||||||
 | 
					    const sheetData = spreadsheet.getData();
 | 
				
			||||||
 | 
					    const labels = sheetData.slice(1).map(row => row[0]);
 | 
				
			||||||
 | 
					    const values = sheetData.slice(1).map(row => parseFloat(row[1]));
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    const ctx = document.getElementById('chartCanvas').getContext('2d');
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    // Clear previous chart instance if any
 | 
				
			||||||
 | 
					    if (window.myChart) window.myChart.destroy();
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					    window.myChart = new Chart(ctx, {
 | 
				
			||||||
 | 
					      type: 'bar', // or 'line', 'pie', etc.
 | 
				
			||||||
 | 
					      data: {
 | 
				
			||||||
 | 
					        labels,
 | 
				
			||||||
 | 
					        datasets: [{
 | 
				
			||||||
 | 
					          label: 'Sales',
 | 
				
			||||||
 | 
					          data: values,
 | 
				
			||||||
 | 
					          backgroundColor: 'rgba(75, 192, 192, 0.5)',
 | 
				
			||||||
 | 
					          borderColor: 'rgba(75, 192, 192, 1)',
 | 
				
			||||||
 | 
					          borderWidth: 1
 | 
				
			||||||
 | 
					        }]
 | 
				
			||||||
 | 
					      },
 | 
				
			||||||
 | 
					      options: {
 | 
				
			||||||
 | 
					        responsive: true,
 | 
				
			||||||
 | 
					        scales: {
 | 
				
			||||||
 | 
					          y: {
 | 
				
			||||||
 | 
					            beginAtZero: true
 | 
				
			||||||
 | 
					          }
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					    });
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					<div id="spreadsheet"></div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@ -0,0 +1,213 @@
 | 
				
			|||||||
 | 
					<script>
 | 
				
			||||||
 | 
					    if (!wizard){
 | 
				
			||||||
 | 
					        var wizard = {}
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    wizard.init = function (_data){
 | 
				
			||||||
 | 
					        _data.forEach(_item=>{
 | 
				
			||||||
 | 
					            if (! _item.name.match(/http|callback/ig) ){
 | 
				
			||||||
 | 
					                var _frame = $('<div class="provider-slot border-round border"></div>').attr('group',_item.group).attr('provider',_item.name)
 | 
				
			||||||
 | 
					                _text = $('<div class="small bold" align="center"></div>').html(_item.name)
 | 
				
			||||||
 | 
					                _icon = $('<img>').attr('src','www/html/_assets/images/'+_item.name+'.png')
 | 
				
			||||||
 | 
					                _pane = $('<div class="provider active"></div>').append(_icon,_text)
 | 
				
			||||||
 | 
					                _frame.append(_pane)
 | 
				
			||||||
 | 
					                _frame.on('click',function (){
 | 
				
			||||||
 | 
					                    _group = $(this).attr('group').trim()
 | 
				
			||||||
 | 
					                    _provider = $(this).attr('provider').trim()
 | 
				
			||||||
 | 
					                    $('.db-provider').slideUp('fast',function(){
 | 
				
			||||||
 | 
					                        $('.db-form').slideDown()
 | 
				
			||||||
 | 
					                        _title = '.::. '+_provider 
 | 
				
			||||||
 | 
					                        $('.db-form-title').html(_title)
 | 
				
			||||||
 | 
					                        $('.db-form-title').attr('provider',_provider)
 | 
				
			||||||
 | 
					                        if (_provider.match(/sqlite|duckdb|databricks|bigquery/)){
 | 
				
			||||||
 | 
					                            $('.db-form .database').attr('placeholder','Absolute to database')
 | 
				
			||||||
 | 
					                            if (_provider.match(/databricks|bigquery/)){
 | 
				
			||||||
 | 
					                                $('.db-form .database').attr('placeholder','Absolute to service account file')
 | 
				
			||||||
 | 
					                            }
 | 
				
			||||||
 | 
					                            $('.db-form .server').slideUp()
 | 
				
			||||||
 | 
					                            $('.db-form .auth').slideUp()
 | 
				
			||||||
 | 
					                        }
 | 
				
			||||||
 | 
					                    })
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    
 | 
				
			||||||
 | 
					                })
 | 
				
			||||||
 | 
					                $('.chose-provider').append(_frame)
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    wizard.find = function (){
 | 
				
			||||||
 | 
					        _text = $('.provider-search').val().trim()
 | 
				
			||||||
 | 
					        if (_text == '' || _text.length < 3 ){
 | 
				
			||||||
 | 
					            $('.chose-provider .provider-slot').slideDown()
 | 
				
			||||||
 | 
					        }else{
 | 
				
			||||||
 | 
					            _text = _text.replace(/ /g,'|').replace(/[:,\,,.]/,'')
 | 
				
			||||||
 | 
					            var _nodes = $('.provider-slot')
 | 
				
			||||||
 | 
					            _nodes.each(_index=>{
 | 
				
			||||||
 | 
					                _group      = $($(_nodes)[_index]).attr('group')
 | 
				
			||||||
 | 
					                _provider   = $($(_nodes)[_index]).attr('provider')
 | 
				
			||||||
 | 
					                var _rgx= new RegExp(_text, "i")
 | 
				
			||||||
 | 
					                if (_group.match(_rgx) || _provider.match(_rgx)){
 | 
				
			||||||
 | 
					                    $($(_nodes)[_index]).slideDown()
 | 
				
			||||||
 | 
					                }else{
 | 
				
			||||||
 | 
					                    $($(_nodes)[_index]).slideUp()
 | 
				
			||||||
 | 
					                }
 | 
				
			||||||
 | 
					            })
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    wizard.reset = function (){
 | 
				
			||||||
 | 
					        $('.provider-search').val('')
 | 
				
			||||||
 | 
					        wizard.find()
 | 
				
			||||||
 | 
					        $('.provider-search').focus()
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    wizard.nav = {}
 | 
				
			||||||
 | 
					    wizard.nav.next= function(_id){}
 | 
				
			||||||
 | 
					    wizard.jumpTo = function (_id){
 | 
				
			||||||
 | 
					        var nodes = $('.db-setup .page')
 | 
				
			||||||
 | 
					        nodes.each (_index =>{
 | 
				
			||||||
 | 
					            _item = nodes[_index]
 | 
				
			||||||
 | 
					            if ( _item != $(_id)[0]){
 | 
				
			||||||
 | 
					                $(_item).slideUp()
 | 
				
			||||||
 | 
					            }else{
 | 
				
			||||||
 | 
					                $(_item).slideDown()
 | 
				
			||||||
 | 
					            }
 | 
				
			||||||
 | 
					        })
 | 
				
			||||||
 | 
					        // $('.db-setup .page').slideUp('fast',function(){
 | 
				
			||||||
 | 
					        //     $(_id).slideDown()
 | 
				
			||||||
 | 
					        // })
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    $(document).ready(function(){
 | 
				
			||||||
 | 
					        studio.dbe.providers(wizard.init)
 | 
				
			||||||
 | 
					        // $('.db-form').slideUp()
 | 
				
			||||||
 | 
					        wizard.jumpTo('.db-provider')
 | 
				
			||||||
 | 
					        window.wizard = wizard
 | 
				
			||||||
 | 
					        $('.provider-search').focus()
 | 
				
			||||||
 | 
					    })
 | 
				
			||||||
 | 
					</script>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					<style>
 | 
				
			||||||
 | 
					    .chose-provider {
 | 
				
			||||||
 | 
					        display: grid;
 | 
				
			||||||
 | 
					        grid-template-columns: repeat(4,150px);
 | 
				
			||||||
 | 
					        gap:20px;
 | 
				
			||||||
 | 
					        align-content: center;
 | 
				
			||||||
 | 
					        justify-content: center;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    .chose-provider .provider {justify-content: center; display:grid;}
 | 
				
			||||||
 | 
					    .chose-provider img {height:70px; justify-self: center; margin:4px;}
 | 
				
			||||||
 | 
					    .tech-frame {height: 305px; overflow: hidden; overflow-y: auto;}
 | 
				
			||||||
 | 
					    .db-form {display:block; margin:4px; }
 | 
				
			||||||
 | 
					    .db-form .server {display:grid; grid-template-columns: auto 100px; gap:4px; height:48px;}
 | 
				
			||||||
 | 
					    .db-form .internal {display:grid; grid-template-rows: auto; gap:4px;}
 | 
				
			||||||
 | 
					    input{padding:8px; outline: 0; border:4px solid transparent;
 | 
				
			||||||
 | 
					    background-color: #f3f3f3;}
 | 
				
			||||||
 | 
					    input:focus {
 | 
				
			||||||
 | 
					        border-left-color: #4682B4;
 | 
				
			||||||
 | 
					    }
 | 
				
			||||||
 | 
					    .db-setup {width:800px; font-family: sans-serif; font-weight:lighter;}
 | 
				
			||||||
 | 
					    .db-form-input {height:300px; display:grid;grid-template-rows: repeat(3,1fr); gap:4px;}
 | 
				
			||||||
 | 
					</style>
 | 
				
			||||||
 | 
					<div class="db-setup" style="height:500px;">
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					   <div class="db-provider page">
 | 
				
			||||||
 | 
					        <div class="search-box" style="align-items:center">
 | 
				
			||||||
 | 
					            <input type="text" class="provider-search" placeholder="[search database technology]" onkeyup="wizard.find()"/>
 | 
				
			||||||
 | 
					            <div align="center" onclick="wizard.reset()">
 | 
				
			||||||
 | 
					                <div class="active"><i class="fa-solid fa-trash"></i></div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					        <br>
 | 
				
			||||||
 | 
					        <div class=" border-round border" style="height:305px; padding-top:20px; padding-bottom:20px;   ">
 | 
				
			||||||
 | 
					            <div class="tech-frame">
 | 
				
			||||||
 | 
					                <div id="chose-provider" class="chose-provider"></div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					   </div>
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					        
 | 
				
			||||||
 | 
					        <div class="db-form page">
 | 
				
			||||||
 | 
					            <div class="db-form-title bold"></div>
 | 
				
			||||||
 | 
					            <br>
 | 
				
			||||||
 | 
					                <div class="db-form-input">
 | 
				
			||||||
 | 
					                    <div class="server">
 | 
				
			||||||
 | 
					                        
 | 
				
			||||||
 | 
					                        <input type="text" class="host" placeholder="Host"/>
 | 
				
			||||||
 | 
					                        <input type="text" class="port" placeholder="Port"/>
 | 
				
			||||||
 | 
					                        
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="internal">
 | 
				
			||||||
 | 
					                        <input type="text" class="database" placeholder="Database"/>
 | 
				
			||||||
 | 
					                        <input type="text" class="table" placeholder="Table"/>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div class="internal auth">
 | 
				
			||||||
 | 
					                        <div class="bold">Authentication</div>
 | 
				
			||||||
 | 
					                        <input type="text" class="username" placeholder="Username"/>
 | 
				
			||||||
 | 
					                        <input type="password" class="password" placeholder="Password"/>
 | 
				
			||||||
 | 
					                    </div>   
 | 
				
			||||||
 | 
					                    
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div style="display:grid; grid-template-columns: 125px auto 125px; align-items: center;">
 | 
				
			||||||
 | 
					                    <div style="display:grid; justify-items: left; margin-top:28px;">    
 | 
				
			||||||
 | 
					                        <div class="border-round border" onclick="wizard.jumpTo('.db-provider')">
 | 
				
			||||||
 | 
					                            <div class="active" align="center"><i class="fa-solid fa-arrow-left"></i> Back</div>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div style="display:grid; justify-items: right; margin-top:28px;">    
 | 
				
			||||||
 | 
					                        <div class="border-round border"  onclick="wizard.jumpTo('.db-final')">
 | 
				
			||||||
 | 
					                            <div class="active" align="center"><i class="fa-solid fa-arrow-right"></i> Next</div>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            
 | 
				
			||||||
 | 
					            <ul class="small">
 | 
				
			||||||
 | 
					                <br><i class="fa-solid fa-minus"></i> Missing ports and host will refer to their default values
 | 
				
			||||||
 | 
					                <br><i class="fa-solid fa-minus"></i> Make sure you have configured your database properly
 | 
				
			||||||
 | 
					            </ul>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					        <div class="db-final page">
 | 
				
			||||||
 | 
					            <div class="db-form-title bold"></div>
 | 
				
			||||||
 | 
					            <br>
 | 
				
			||||||
 | 
					            <div class="db-form-input">
 | 
				
			||||||
 | 
					                <div style="display: grid; grid-template-columns: 50% 50%; gap:4px;">
 | 
				
			||||||
 | 
					                <div class="source-code">
 | 
				
			||||||
 | 
					                    {}
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div class="">
 | 
				
			||||||
 | 
					                
 | 
				
			||||||
 | 
					                    <input type="text" class="label" placeholder="label your configuration" style="width:100%"/>
 | 
				
			||||||
 | 
					                    <ul class="">
 | 
				
			||||||
 | 
					                        <i class="fa-solid fa-minus"></i> Make sure the label is short and descriptive
 | 
				
			||||||
 | 
					                        <br> <i class="fa-solid fa-minus"></i> The label will be used in code to point at the configuration
 | 
				
			||||||
 | 
					                        <br><i class="fa-solid fa-minus"></i> No data connectivity/location will be shared with your notebooks.
 | 
				
			||||||
 | 
					                    </ul>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <div style="display:grid; grid-template-columns: 125px auto 125px; align-items: center;">
 | 
				
			||||||
 | 
					                    <div style="display:grid; justify-items: left; margin-top:28px;">    
 | 
				
			||||||
 | 
					                        <div class="border-round border" onclick="wizard.jumpTo('.db-form')">
 | 
				
			||||||
 | 
					                            <div class="active" align="center"><i class="fa-solid fa-arrow-left"></i> Back</div>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                    <div style="display:grid; justify-items: right; margin-top:28px;">    
 | 
				
			||||||
 | 
					                        <div class="border-round border"  onclick="wizard.jumpTo('.db-final')">
 | 
				
			||||||
 | 
					                            <div class="active" align="center"><i class="fa-solid fa-save"></i> Save</div>
 | 
				
			||||||
 | 
					                        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					        </div>
 | 
				
			||||||
 | 
					    
 | 
				
			||||||
 | 
					</div>
 | 
				
			||||||