@ninebone/table 0.0.1

package/dist/css/ngFoot.css

@@ -0,0 +1,109 @@
+:host {
+	position: relative;
+	display: none;
+	width: 100%;
+	height: 0;
+}
+:host(.expand) {
+	display: flex;
+	height: 22px;
+}
+
+button {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: auto;
+}
+
+ng-paging {
+	position: relative;
+	display: flex;
+	flex-direction: row-reverse;
+	height: calc(100% - 3px);
+	margin-top: 3px;
+	width: 400px;
+	--border: 1px solid blueviolet;
+}
+
+ng-paging span {
+	--margin-top: 2px;
+	margin-left: 6px;
+	margin-right: 6px;
+	color: #999;
+}
+
+ng-paging button {
+	width: 17px;
+	height: 100%;
+	margin-left: 2px;
+	outline: none;
+	border: none;
+	border-right: 1px solid #ccc;
+}
+ng-paging button:hover {
+	filter: brightness(95%);
+}
+ng-paging button:disabled {
+	opacity: 0.5;
+}
+
+ng-paging .ng-paging-first {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23999" viewBox="0 0 16 16"><path d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.54-.313 1.232.066 1.232.696v7.384c0 .63-.692 1.01-1.232.697L5 8.753V12a.5.5 0 0 1-1 0z"/></svg>');
+}
+ng-paging .ng-paging-prev {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23999" viewBox="0 0 16 16"><path d="m3.86 8.753 5.482 4.796c.646.566 1.658.106 1.658-.753V3.204a1 1 0 0 0-1.659-.753l-5.48 4.796a1 1 0 0 0 0 1.506z"/></svg>');
+}
+ng-paging .ng-paging-next {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="%23999" viewBox="0 0 16 16"><path d="m12.14 8.753-5.482 4.796c-.646.566-1.658.106-1.658-.753V3.204a1 1 0 0 1 1.659-.753l5.48 4.796a1 1 0 0 1 0 1.506z"/></svg>');
+}
+ng-paging .ng-paging-last {
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="%23999" viewBox="0 0 16 16"><path d="M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.693 3.3 4 3.678 4 4.308v7.384c0 .63.692 1.01 1.233.697L11.5 8.753V12a.5.5 0 0 0 1 0z"/></svg>');
+}
+
+ng-layout {
+	position: relative;
+	display: flex;
+	height: 100%;
+	width: 100%;
+	overflow: hidden;
+}
+ng-layout .ng-wrap {
+	display: flex;
+}
+
+ng-layout button {
+	padding-left: 6px;
+	padding-right: 6px;
+	height: 100%;
+	outline: none;
+	border: none;
+	border-left: 1px solid #eee;
+	border-bottom: 1px solid #f0f0f0;
+	background: none;
+	outline: none;
+	cursor: pointer;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+ng-layout button:hover {
+	filter: brightness(95%);
+}
+ng-layout button:active {
+	color: red;
+}
+
+ng-layout button.ng-active {
+	color: green;
+	border-bottom: 2px solid green;
+	background-color: #f9f9f9;
+}
+
+ng-layout .ng-wrap button:first-child {
+	margin-left: 8px;
+	border-left: 1px solid #ccc;
+}
+
+ng-layout .ng-wrap button:last-child {
+	border-right: 1px solid #ccc;
+}

package/dist/css/ngHScrollBar.css

@@ -0,0 +1,85 @@
+:host {
+	position: sticky;
+	left: 0;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	border-top: 1px solid #ccc;
+	--border-right: 1px solid #ccc;
+	background-color: #f9f9f9;
+	box-sizing	: border-box;
+}
+
+.ng-scroll-track {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.ng-scroll-thumb {
+	position: relative;
+	height: calc(100% - 2px);
+}
+
+.ng-scroll-left,.ng-scroll-right {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 16px;
+	height: 100%;
+	border: none;
+	margin: 0;
+	background-color: #eee;
+	box-sizing	: border-box;
+	outline: 0;
+}
+
+.ng-scroll-left {
+	border-right: 1px solid #ddd;
+}
+
+.ng-scroll-right {
+	border-left: 1px solid #ddd;
+}
+
+.ng-scroll-left .ng-scroll-icon {
+	border-right	: 4px solid #999;
+	border-top		: 4px solid transparent;
+	border-bottom	: 4px solid transparent;
+}
+
+.ng-scroll-left:disabled .ng-scroll-icon {
+	border-right	: 4px solid #ccc!important;
+}
+
+.ng-scroll-right .ng-scroll-icon {
+	border-left		: 4px solid #999;
+	border-top		: 4px solid transparent;
+	border-bottom	: 4px solid transparent;
+}
+
+.ng-scroll-right:disabled .ng-scroll-icon {
+	border-left		: 4px solid #ccc!important;
+}
+
+button {
+	padding: 0;
+}
+.ng-scroll-thumb {
+	position: absolute;
+	background-color: #eee;
+	box-sizing	: border-box;
+	border: 1px solid #ccc;
+	border-radius: 3px 3px 3px 3px;
+}
+
+.ng-scroll-thumb:hover, .ng-scroll-left:hover, .ng-scroll-right:hover, .ng-scroll-top:hover, .ng-scroll-bottom:hover {
+	filter: brightness(95%);
+}
+
+.ng-scroll-thumb:disabled, .ng-scroll-left:disabled, .ng-scroll-right:disabled, .ng-scroll-top:disabled, .ng-scroll-bottom:disabled {
+	pointer-events:none;
+}

package/dist/css/ngHead.css

@@ -0,0 +1,86 @@
+:host {
+	position: relative;
+	display: flex;
+	width: 100%;
+	height: 0;
+	padding-bottom: unset !important;
+	overflow: visible;
+	z-index: 1;
+}
+:host(.expand) {
+	height: 32px;
+	padding-bottom: 2px;
+}
+
+:host(.expand) ng-menu {
+	height: 100%;
+	margin-top: 0;
+	bottom: 3px;
+}
+
+:host(.expand) ng-title {
+	display: flex;
+	align-items: flex-end;
+	bottom: 3px;
+	margin-left: 6px;
+	color: #666;
+}
+:host(.expand) ng-custom {
+	display: flex;
+	flex-direction: row-reverse;
+	width: 100%;
+	right: 1px;
+}
+
+buttons {
+	display: flex;
+}
+
+button {
+	padding-left: 6px;
+	padding-right: 6px;
+	height: 100%;
+	outline: none;
+	border: 1px solid #999;
+	border-radius: 3px;
+	margin-left: 5px;
+	cursor: pointer;
+}
+button:hover {
+	filter: brightness(95%);
+}
+button:active {
+	color: red;
+}
+
+ng-custom {
+	position: relative;
+	display: none;
+}
+
+ng-menu {
+	position: relative;
+	width: 16px;
+	height: 16px;
+	margin-top: 1px;
+	bottom: 0;
+	z-index: 1;
+	cursor: pointer;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5"/></svg>');
+	background-repeat: no-repeat;
+	background-position: bottom -3px right 0px;
+	background-size: auto;
+}
+:host(.expand) ng-menu {
+	background-position: bottom 0px right 0px;
+}
+
+ng-title {
+	position: relative;
+	display: none;
+}
+ng-title > span {
+	white-space: nowrap;
+	font-weight: bold;
+	line-height: 14px;
+}

package/dist/css/ngImg.css

@@ -0,0 +1,22 @@
+:host {
+	height: 100%;
+	width: calc(100% - 8px);
+	display: flex;
+	align-items: center;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+img {
+
+}
+img:hover {
+
+}
+
+div.ng-wrap {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+}

package/dist/css/ngInfo.css

@@ -0,0 +1,54 @@
+:host {
+	position: absolute;
+	bottom: 2px;
+	left: 1px;
+	width: 12px;
+	height: 12px;
+}
+
+svg.icon {
+	fill: #999;
+	cursor: pointer;
+}
+div.panel {
+	position: absolute;
+	display: none;
+	z-index: 1;
+	border: 1px solid #dcdcdc;
+   	background: white;
+   	box-shadow: 2px 2px 6px 0px #888888;
+	text-align: left;
+	padding: 8px 16px 8px 4px;
+}
+
+ul {
+	--list-style: none;
+}
+ol {
+	--list-style: none;
+}
+ul,ol,dl {
+	padding: 0;
+	margin: 0;
+	padding-bottom: 8px;
+}
+dl {
+	--margin-left: 4px;
+}
+li {
+    display: flex;
+    align-items: center;
+	height: 16px;
+	padding-top: 4px;
+}
+li * {
+	margin-left: 8px;
+}
+dt {
+	color: green;
+	margin-inline-start: 16px;
+}
+dd {
+	color: #999;
+	text-wrap: wrap;
+}

package/dist/css/ngInputColor.css

@@ -0,0 +1,77 @@
+:host {
+	--position: relative;
+	height: 100%;
+	width: calc(100% - 8px);
+	display: flex;
+	align-items: center;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+:host(.invalid) button {
+	padding: 2px;
+}
+:host(.invalid) button:after {
+	content: '';
+    width: 16px;
+    height: 16px;
+	border: none;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: auto;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: none; stroke-width: 2px; stroke: darkgoldenrod;" viewBox="0 0 16 16"><path d="m8 1 7 14H1L8 1z"></path><path d="M7.99 12H8v.01h-.01zM8 6v4"></path></svg>');
+}
+
+input[type=color]:invalid {
+	border: 2px solid red !important;
+}
+
+input[type=color] {
+	width: 100%;
+	height: 26px;
+	padding: 0px;
+	margin-left: unset;
+	border: 1px solid #eee;
+	border-right: none;
+	border-top-left-radius: 3px;
+	border-bottom-left-radius: 3px;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-color: transparent;
+}
+input[type=color]::-webkit-color-swatch {
+	border: 0;
+	border-top-left-radius: 2px;
+	border-bottom-left-radius: 2px;
+}
+input[type=color]::-webkit-color-swatch-wrapper {
+	padding: 1px;
+}
+
+button {
+	display: inline-flex;
+	--width: 24px;
+	height: 26px;
+	--padding: 2px;
+	margin-right: unset;
+	border: 1px solid #eee;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+	background-color: #f9f9f9;
+	justify-content: center;
+	align-items: center;
+}
+button:after {
+	content: "";
+	border-top: 0.3em solid;
+	border-right: 0.3em solid transparent;
+	border-bottom: 0;
+	border-left: 0.3em solid transparent;
+}
+input[type=color]:hover {
+	filter: brightness(90%);
+}
+button:hover {
+	filter: brightness(95%);
+}

package/dist/css/ngInputDate.css

@@ -0,0 +1,74 @@
+:host {
+	height: 100%;
+	width: calc(100% - 8px);
+	display: flex;
+	align-items: center;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+:host(.invalid) input::-webkit-calendar-picker-indicator,
+input:invalid::-webkit-calendar-picker-indicator {
+	width: 16px;
+	---height: 16px;
+	max-height: 26px;
+	border: none;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: auto;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: none; stroke-width: 2px; stroke: darkgoldenrod;" viewBox="0 0 16 16"><path d="m8 1 7 14H1L8 1z"></path><path d="M7.99 12H8v.01h-.01zM8 6v4"></path></svg>');
+	opacity: 1;
+	background-color: #f0f0f0;
+}
+
+input {
+	position: relative;
+	height: 26px;
+	padding:0;
+	margin:0;
+	font: inherit;
+	width: 100%;
+	font: inherit;
+	padding-left: 4px;
+	border: 1px solid #f0f0f0;
+	border-radius: 3px;
+	outline: 0;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="black" viewBox="0 0 16 16"><path d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5z"/><path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M2 2a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1z"/><path d="M2.5 4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5H3a.5.5 0 0 1-.5-.5z"/></svg>');
+	background-repeat: no-repeat;
+	background-position: right 2px center;
+	background-size: 14px auto;
+	color: unset;
+	box-sizing: border-box;
+}
+input:hover {
+	filter: brightness(95%);
+}
+input::-webkit-calendar-picker-indicator {
+	position: absolute;
+	right: 0;
+	top: 0;
+	width: 100%;
+	background: #ccc;
+	color: transparent;
+	cursor: pointer;
+	width: 16px;
+	opacity: 0.3;
+}
+input::before {
+	content: attr(data-placeholder);
+	position: absolute;
+	display: flex;
+	align-items: center;
+	width: calc(100% - 22px);
+	height: 100%;
+	background-color: white;
+}
+input:valid::before,
+input:focus::before {
+	display: none;
+}
+input:focus {
+	border: 1px solid #28a745;
+	border-radius: 3px;
+   	--box-shadow: 0 0 0 0.15rem rgba(40, 167, 69, 0.25);
+}

package/dist/css/ngInputText.css

@@ -0,0 +1,65 @@
+:host {
+	height: 100%;
+	width: calc(100% - 8px);
+	display: flex;
+	align-items: center;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+:host(.ng-left) input[type=text] {
+	text-align: left;
+}
+:host(.ng-center) input[type=text] {
+	text-align: center;
+}
+:host(.ng-right) input[type=text] {
+	text-align: right;
+}
+
+input[type=text].border-left-none {
+	border-left: 0;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+input[type=text].border-right-none {
+	border-right: 0;
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+input[type=text] {
+	position: relative;
+	-moz-user-select: auto;
+	-webkit-user-select: auto;
+	-ms-user-select: auto;
+	user-select: auto;
+	width: 100%;
+	height: 26px;
+	border: 1px solid #eee;
+	border-radius: 3px;
+	padding-left: 4px;
+	outline: 0;
+	font: inherit;
+	box-sizing: border-box;
+	background-color: white;
+	color: #333;
+}
+
+input[type=text].invalid {
+	content: '';
+	background-repeat: no-repeat;
+	background-position: right 2px top 4px;
+	background-size: auto;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: none; stroke-width: 2px; stroke: darkgoldenrod;" viewBox="0 0 16 16"><path d="m8 1 7 14H1L8 1z"></path><path d="M7.99 12H8v.01h-.01zM8 6v4"></path></svg>');
+}
+
+input[type=text]:disabled {
+	border-color: #fdfdfd;
+	filter: brightness(95%);
+}
+input[type=text]:read-only {
+	border-color: #fdfdfd;
+	filter: brightness(97%);
+}
+

package/dist/css/ngMaximize.css

@@ -0,0 +1,26 @@
+:host {
+	height: 100%;
+	width: 100%;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+svg {
+	cursor: pointer;
+	width: 12px;
+	height: 12px;
+}
+
+svg:hover {
+	opacity: 0.7;
+}
+svg:active {
+	fill: red;
+}
+
+svg {
+	stroke-width: 1.5px;
+	stroke: #666;
+	fill: none;
+}

package/dist/css/ngProgress.css

@@ -0,0 +1,40 @@
+:host {
+	height: 100%;
+	width: calc(100% - 8px);
+	display: flex;
+	align-items: center;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+progress {
+	position: relative;
+	top: unset;
+	height: calc(100% - 4px);
+	width: 100%;
+	margin-left: unset;
+	margin-right: unset;
+	border-radius: 0;
+}
+	
+progress::-webkit-progress-bar {
+	
+}
+
+progress::-webkit-progress-value {
+}
+	
+span {
+	position: absolute;
+	width: unset !important;
+	justify-content: center;
+	--text-shadow: 0 0 0.1em black, 0 0 0.1em black;
+}
+
+div.ng-wrap {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+	height: 100%;
+}

package/dist/css/ngRadio.css

@@ -0,0 +1,61 @@
+:host {
+	height: 100%;
+	width: calc(100% - 8px);
+	display: flex;
+	align-items: center;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+:host(.invalid)::after {
+	content: '';
+	margin-left: 4px;
+    width: 16px;
+    height: 16px;
+	border: none;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: auto;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" style="fill: none; stroke-width: 2px; stroke: darkgoldenrod;" viewBox="0 0 16 16"><path d="m8 1 7 14H1L8 1z"></path><path d="M7.99 12H8v.01h-.01zM8 6v4"></path></svg>');
+}
+
+input {
+	flex-shrink: 0;
+	width: 14px;
+	height: 14px;
+	padding: 0;
+	margin: 0;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+	border: 1px solid dimgray;
+	border-radius: 50%;
+	outline: 0;
+}
+input:checked {
+	background-image: url('data:image/svg+xml;utf8,<svg height="14" width="14" xmlns="http://www.w3.org/2000/svg"><circle r="3" cx="50%" cy="50%" fill="dimgray" /></svg>');
+}
+
+label {
+	display: flex;
+	align-items: center;
+	--margin-left: 4px;
+	margin-right: 4px;
+}
+label.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+span {
+	margin-left: 4px;
+}
+
+div.ng-wrap {
+	display: flex;
+	align-items: center;
+	width: 100%;
+}