@ninebone/table 0.0.1

package/dist/css/ideDiff.css

@@ -0,0 +1,124 @@
+:host(ide-diff) {
+	width: 100%;
+	height: 100%;
+
+	.wrapper {
+		display: flex;
+		position: relative;
+		--gap: 8px;
+		--font-family: monospace;
+		height: 100%;
+	}
+	.panel {
+		width: 50%;
+		border: 1px solid #ccc;
+		--padding: 8px;
+		overflow: auto;
+		white-space: pre-wrap;
+		text-align: left;
+		display: flex;
+		justify-content: flex-start; /* 좌측 정렬 */
+		align-items: flex-start;     /* 상단 정렬 */
+		flex-direction: column;
+		box-sizing: border-box;
+	}
+	.panel pre {
+		margin: 0;
+		--padding: 8px;
+		text-align: left;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+
+	.cm-editor {
+		height: 100%;
+		width: 100%;
+		--padding-left: 80px;
+	}
+	.cm-content { /* CodeMirror 텍스트 내용을 감싸는 내부 div */
+	}
+	/* 각 라인에 버튼 공간 확보 */
+
+	/* ideDiff.css */
+
+	/* 기본적인 CodeMirror 라인 포지셔닝 */
+	.cm-line {
+		position: relative;
+		--display: flex;
+		padding-left: 18px;
+	}
+
+	/* 병합 버튼 컨테이너 */
+	.cm-merge-button-container {
+		position: absolute;
+		height: 16px;
+		width: 16px; /* 버튼 너비 고정으로 겹침 방지 */
+		left: 2px; /* 라인 번호 영역 바로 옆에 배치. 필요에 따라 조절하세요. */
+		top: 50%;
+		transform: translateY(-50%);
+		--z-index: 1; /* 다른 요소 위에 표시되도록 Z-index를 높게 설정 */
+		display: flex;
+		--gap: 5px;
+		justify-content: center; /* 버튼 중앙 정렬 */
+	}
+
+	/* 병합 버튼 기본 스타일 */
+	.cm-merge-button {
+		--margin: 2px 0;
+		width: 100%;
+		border: none;
+		border-radius: 3px;
+		cursor: pointer;
+		opacity: 0.7; /* 기본적으로 약간 투명하게 */
+		transition: opacity 0.2s ease-in-out; /* 호버 시 부드러운 전환 */
+		background-repeat: no-repeat;
+		background-position: center;
+		background-size: auto;
+	}
+
+	/* 호버 시 버튼 불투명도 증가 */
+	.cm-merge-button:hover {
+		opacity: 1;
+		background-color: #e0e0e0;
+	}
+
+	/* AI 추천을 현재 소스에 '적용'하는 버튼 (오른쪽 TOBE 에디터에 붙음) */
+	.cm-merge-button.accept {
+		background-color: #4CAF50; /* 녹색 */
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-left-short" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12 8a.5.5 0 0 1-.5.5H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5a.5.5 0 0 1 .5.5"/></svg>');
+	}
+
+	/* AI의 삭제를 현재 소스 기준으로 '되돌리는' 버튼 (왼쪽 ASIS 에디터에 붙음) */
+	.cm-merge-button.revert {
+		background-color: #f44336; /* 빨간색 */
+		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-x" viewBox="0 0 16 16"><path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/></svg>');
+	}
+
+	/* 삽입된 라인 (AI 추천 소스에 새로 추가된 라인) 배경색 및 경계선 */
+	.cm-inserted-line-bg {
+		background-color: #e6ffed; /* 연한 녹색 */
+		--border-left: 3px solid #66bb6a; /* 진한 녹색 */
+	}
+
+	/* 삭제된 라인 (현재 소스에서 AI가 삭제한 것으로 판단된 라인) 배경색 및 경계선 */
+	.cm-deleted-line-bg {
+		background-color: #ffebe9; /* 연한 빨간색 */
+		--border-left: 3px solid #ef5350; /* 진한 빨간색 */
+	}
+
+	/* CodeMirror 선택 영역 배경색 */
+	.cm-selectionBackground {
+		background-color: #d7d4f9 !important; /* 보라색 계열 */
+	}
+
+	/* 텍스트 선택 시 배경색 (브라우저 기본 선택색 재정의) */
+	.cm-editor ::selection {
+		background-color: #d7d4f9 !important;
+		color: inherit !important; /* 텍스트 색상은 유지 */
+	}
+	.cm-editor::-moz-selection { /* Firefox를 위한 접두사 */
+		background-color: #d7d4f9 !important;
+		color: inherit !important;
+	}
+}
+

package/dist/css/ngButton.css

@@ -0,0 +1,40 @@
+:host {
+	height: 100%;
+	width: calc(100% - 8px);
+	display: flex;
+	align-items: center;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+button {
+	height: calc(100% - 4px);
+	width: 100%;
+	margin-left: unset;
+	margin-right: unset;
+	border: 1px solid #ddd;
+	border-radius: 3px;
+	background-color: #f0f0f0;
+	outline: none;
+	cursor: pointer;
+	color: #333;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font: inherit;
+}
+button:hover:not(:disabled) {
+	border-color: #999;
+	--box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
+}
+button:focus:not(:disabled) {
+	border-color: #999;
+}
+button:active:not(:disabled) {
+	border-color: #333;
+	filter: brightness(80%);
+}
+button:disabled {
+	opacity: 0.5;
+	cursor: unset;
+}

package/dist/css/ngCheckBox.css

@@ -0,0 +1,81 @@
+: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>');
+}
+
+:host-context(.selected) input {
+}
+
+input {
+	flex-shrink: 0;
+	width: 14px;
+	height: 14px;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+	border: 1px solid dimgray;
+	outline: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+input[type=checkbox] {
+}
+input[type=checkbox]:checked {
+	background-image: url('data:image/svg+xml;utf8,<svg height="14" width="14" xmlns="http://www.w3.org/2000/svg"><polyline points="2.5,7 6,10 11,3" style="fill:none;stroke:dimgray;stroke-width:2" /></svg>');
+}
+input[type=radio] {
+	border-radius: 50%;
+}
+input[type=radio]: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>');
+}
+
+input:disabled {
+	opacity: 0.3;
+}
+
+label {
+	display: flex;
+	align-items: center;
+}
+
+label.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+}
+
+span {
+	margin-left: 2px;
+	align-items: center;
+	width: 100%;
+	line-height: 100%;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+div.ng-wrap {
+	display: flex;
+	align-items: center;
+	width: 100%;
+}

package/dist/css/ngColExpand.css

@@ -0,0 +1,17 @@
+:host {
+	position: absolute;
+	top: 1px;
+	right: 4px;
+	width: 12px;
+	height: 100%;
+	cursor: pointer;
+	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="12" height="12" fill="black" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8m-2.5 7a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5"/></svg>');
+}
+
+:host(.expand) {
+	right: 8px;
+	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="black" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5"/></svg>');
+}

package/dist/css/ngCombo.css

@@ -0,0 +1,75 @@
+:host {
+	height: 100%;
+	width: calc(100% - 8px);
+	display: flex;
+	align-items: center;
+	margin-left: 4px;
+	margin-right: 4px;
+}
+
+:host(.invalid) .btn2::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>');
+}
+
+:host:hover {
+	--border-color: #28a745;
+	--box-shadow: 0 0 0 .2rem rgba(40, 167, 69, 0.25);
+	border-color: unset;
+	box-shadow: unset;
+}
+
+button {
+	outline: none;
+}
+button:hover {
+	filter: brightness(95%);
+}
+button:focus {
+	--border-color: transparent;
+	--outline: 0;
+}
+button:disabled {
+	filter: brightness(95%);
+}
+
+button.btn1 {
+	width: 100%;
+	height: 26px;
+	margin-left: unset;
+	border: 1px solid #eee;
+	border-right: none;
+	border-top-left-radius: 3px;
+	border-bottom-left-radius: 3px;
+	text-align: left;
+	background-color: white;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	font: inherit;
+}
+button.btn2 {
+	padding: 3px;
+	width: 24px;
+	height: 26px;
+	margin-right: unset;
+	border: 1px solid #eee;
+	border-top-right-radius: 3px;
+	border-bottom-right-radius: 3px;
+	background-color: #f9f9f9;
+}
+
+button.btn2:after {
+	display: inline-flex;
+	content: "";
+	border-top: 0.3em solid;
+	border-right: 0.3em solid transparent;
+	border-bottom: 0;
+	border-left: 0.3em solid transparent;
+}

package/dist/css/ngComboPanel.css

@@ -0,0 +1,102 @@
+:host {
+	z-index: 3;
+	position: absolute;
+	width: 250px;
+	height: 300px;
+	border: 1px solid #999;
+	background-color: white;
+	overflow: hidden;
+	resize: both;
+	box-shadow: 0 0 9px 0 #999;
+	display: flex;
+	flex-direction : column;
+	padding: 0;
+	margin:  0;
+}
+
+div.head {
+	display: none;
+	width: 100%;
+}
+
+div.head input[type=text] {
+	width: 100%;
+	--height: 100%;
+	outline: none;
+}
+
+:host(.expand) {
+	padding: 8px;
+}
+:host(.expand) div.head {
+	position: relative;
+    display: flex;
+    height: 32px;
+}
+:host(.expand) div:last-child {
+	margin-top: 3px;
+	background-color: unset;
+}
+div:last-child {
+	background-color: #f0f0f0;
+	margin-top: 0;
+	height: 28px;
+}
+
+nine-grid {
+	width: 100%;
+	height: 100%;
+	border: none;
+}
+:host(.expand) nine-grid {
+	margin-top: 4px;
+	border: 1px solid #ccc;
+	--border-top: 3px solid #ccc;
+}
+
+div:last-child {
+	position: relative;
+	display: none;
+	width: 100%;
+	height: 24px;
+	min-height: 24px;
+	bottom: 0;
+}
+div:last-child button {
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+}
+
+:host(.multi) div:last-child {
+	display: flex;
+	align-items: center;
+}
+
+div:last-child input[type=checkbox] {
+	position: relative;
+	width: 22px;
+}
+div:last-child label {
+	margin-left: 3px;
+	white-space: nowrap;
+}
+div:last-child label:hover {
+	color: cornflowerblue;
+	text-decoration: underline;
+	height: 18px;
+}
+div:last-child button {
+	margin-left: 12px;
+	height: 24px;
+	outline: none;
+	border: 1px solid #ccc;
+    border-radius: 3px;
+    background-color: #f0f0f0;
+}
+div:last-child button:hover {
+	filter: brightness(95%);
+}
+div:last-child button:active {
+	filter: brightness(90%);
+}

package/dist/css/ngExpandButton.css

@@ -0,0 +1,71 @@
+:host {
+	display: flex;
+	justify-content: center;
+    align-items: center;
+	height: 26px;
+}
+:host(.ng-left) {
+	margin-right: 2px;
+}
+:host(.ng-right) {
+	margin-left: 2px;
+}
+:host(.ng-first) {
+	margin-left: -2px;
+}
+:host(.ng-last) {
+	margin-right: -2px;
+}
+
+:host(.border-left-none) {
+	margin-left: 0;
+}
+:host(.border-right-none) {
+	margin-right: 0;
+}
+
+:host(.border-left-none) button {
+	border-left: 0;
+	border-top-left-radius: 0;
+	border-bottom-left-radius: 0;
+}
+:host(.border-right-none) button {
+	border-right: 0;
+	border-top-right-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+button {
+	padding: 0;
+	--line-height: calc(100% - 2px);
+	height: 100%;
+	--max-height: 26px;
+	padding-left: 4px;
+	padding-right: 4px;
+	margin-right: unset;
+	border: 1px solid #eee;
+	border-radius: 3px;
+	background-color: #f0f0f0;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-size: auto;
+	outline: none;
+	cursor: pointer;
+	color: #333;
+	--position: sticky;
+	right: unset;
+}
+button:hover:not(:disabled) {
+	border-color: #999;
+}
+button:focus:not(:disabled) {
+	border-color: #999;
+}
+button:active:not(:disabled) {
+	border-color: #333;
+	filter: brightness(80%);
+}
+button:disabled {
+	opacity: 0.5;
+	cursor: unset;
+}

package/dist/css/ngExpandCheck.css

@@ -0,0 +1,34 @@
+:host {
+	display: flex;
+	justify-content: center;
+    align-items: center;
+	width: 15px;
+}
+:host(.ng-left) {
+	margin-right: 2px;
+}
+:host(.ng-right) {
+	margin-left: 2px;
+}
+input {
+	flex-shrink: 0;
+	width: 14px;
+	height: 14px;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: contain;
+	border: 1px solid dimgray;
+	outline: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+	background-image: unset;
+}
+input:checked {
+	background-image: url('data:image/svg+xml;utf8,<svg height="14" width="14" xmlns="http://www.w3.org/2000/svg"><polyline points="2.5,7 6,10 11,3" style="fill:none;stroke:dimgray;stroke-width:2" /></svg>');
+}
+input:disabled {
+	opacity: 0.3;
+}

package/dist/css/ngExpandIcon.css

@@ -0,0 +1,36 @@
+:host {
+	display: flex;
+	justify-content: center;
+    align-items: center;
+}
+:host(.ng-left) {
+	margin-right: 2px;
+}
+:host(.ng-right) {
+	margin-left: 2px;
+}
+
+svg {
+	display: flex;
+	justify-content: center;
+    align-items: center;
+}
+
+div.ng-expand-icon-sphere {
+	border-radius: 50%;
+}
+
+svg.ng-expand-icon-circle {
+}
+
+svg.ng-expand-icon-rect {
+}
+
+svg.ng-expand-icon-check {
+}
+
+div.ng-expand-icon-svg {
+}
+
+img.ng-expand-icon-img {
+}

package/dist/css/ngFilterPanel.css

@@ -0,0 +1,94 @@
+@keyframes loading{to{transform:rotate(360deg)}}
+:host(.loading) {
+	filter: brightness(90%);
+	--filter: brightness(90%);
+}
+:host(.loading)::after {
+	width: 2rem;
+	height: 2rem;
+	content:'';
+	position: absolute;
+	top: calc(50% - 16px);
+	left: calc(50% - 16px);
+	display: inline-block;
+	border-radius: 50%;
+	border: 0.25em solid green;
+	border-right-color:transparent;
+	animation: 0.75s linear infinite loading;
+}
+
+:host {
+	z-index: 3;
+	position: absolute;
+	width: 250px;
+	height: 300px;
+	border: 1px solid #999;
+	background-color: white;
+	overflow: hidden;
+	resize: both;
+	box-shadow: 0 0 9px 0 #999;
+	display: flex;
+	flex-direction: column;
+	padding: 8px;
+}
+
+nine-grid {
+	margin-top: 4px;
+}
+
+div.head {
+	position: relative;
+    display: flex;
+    width: 100%;
+    height: 32px;
+}
+div:last-child {
+    position: relative;
+    width: 100%;
+    height: 26px;
+    display: flex;
+    align-items: end;
+	margin-top: 8px;
+}
+
+input[type=text] {
+	--width: -webkit-fill-available;
+	--height: -webkit-fill-available;
+	width: 100%;
+	--height: 100%;
+	outline: none;
+	background-color: white;
+	color: #333;
+	border: 1px solid #666;
+}
+
+input[type=checkbox] {
+	--margin-right: 4px;
+}
+
+label {
+	display: flex;
+	align-items: center;
+}
+label:hover {
+	color: cornflowerblue;
+	text-decoration: underline;
+}
+label > input {
+	--position: relative;
+	--margin-right: 4px;
+}
+button {
+	position: absolute;
+	width: 60px;
+	height: 24px;
+	border: 1px solid #999;
+}
+
+#btnOk {
+	right: 66px;
+}
+
+#btnCancel {
+	right: 0px;
+}

package/dist/css/ngFlexBox.css

@@ -0,0 +1,7 @@
+ng-flex-box {
+	position: relative;
+	display: flex;
+	width: 100%;
+	height: 100%;
+	border: 1px solid red;
+}