@ninebone/table 0.1.32 → 0.1.33

package/dist/css/layout.css

@@ -1,241 +1,467 @@
 
-	:host { 
-                    display: flex; 
-                    flex-direction: column; 
-                    position: relative; 
-                    overflow: hidden; 
-                 
-                    background: #fff;
-                }
-                
-                :host([theme="simple"]) {
-                    /* 1. 불필요한 패널 및 컴포넌트 숨기기 */
-                    .ng-part-header, .ng-part-footer,
-                    nine-table-toolbar,
-                    nine-table-sheets-footer,
-                    nine-table-vscrollbar,
-                    nine-table-hscrollbar,
-                    nine-table-sheet .ng-scroll-edge {
-                        display: none;
-                    }
-                    
-                    .col-indicator-rowgroup {
-                        display: none;
-                    }
-                    tr {
-                        height: 32px;
-                    }
-                    
-                    /* 2. 💡 [핵심] 스크롤바용 우측 16px 빈 공간을 제거하고 1열(1fr)로 꽉 채우기 */
-                    nine-table-sheet {
-                        border: none;
-                        overflow: hidden;
-                        grid-template-columns: 1fr;
-                        grid-template-rows: 1fr;
-                    }
-
-                    nine-table-sheet tr th, 
-                    nine-table-sheet tr td {
-                        border: none;
-                        padding: 0 8px;
-                    }
-                    
-                    nine-table-sheet tr td {
-                        text-align: left;
-                    }
-                    
-                    /* 4. 브라우저 기본 네이티브 스크롤바를 콘텐츠 위에 자연스럽게 오버레이(Overlay) */
-                    nine-table-sheet .ng-sheet-body {
-                        overflow-y: auto;
-                        overflow-x: hidden;
-                        scrollbar-width: thin;
-                        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-                    }
-                    
-                    nine-table-sheet .ng-sheet-body::-webkit-scrollbar {
-                        display: block;
-                        width: 6px;
-                        height: 6px;
-                    }
-
-                    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-track {
-                        background: transparent;
-                    }
-
-                    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-thumb {
-                        background: rgba(0, 0, 0, 0.15);
-                        border-radius: 3px;
-                    }
-
-                    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-thumb:hover {
-                        background: rgba(0, 0, 0, 0.3);
-                    }
-
-                    nine-table-sheet .ng-container-body {
-                        --overflow: visible;
-                    }
-                    
-                }
-                
-                /* 🎯 Toolbar 숨김 제어 */
-                :host([theme="simple"]) nine-table-toolbar,
-                :host([show-header="false"]) nine-table-toolbar {
-                    display: none;
-                }
-
-                /* 🎯 Footer(StatusBar) 숨김 제어 (show-statusbar="false") */
-                :host([theme="simple"]) nine-table-sheets-footer,
-                :host([show-statusbar="false"]) nine-table-sheets-footer {
-                    display: none;
-                }
-                
-                :host([theme="simple"]) {
-                    col[data-col="0"], th[data-col="0"], td[data-col="0"] {
-                        display: none;
-                    }
-                    .ng-container-right {
-                        display: none;
-                    }
-                    tr {
-                        height: 26px;
-                    }
-                }
-                
-                /* 3분할된 tr들이 동시에 hover 상태가 되었을 때의 배경색 */
-                nine-table-sheet tr.hover th,
-                nine-table-sheet tr.hover td {
-                    background-color: rgba(37, 99, 235, 0.06);
-                }
-                
-                tr.col-indicator-rowgroup {
-                    th,td {
-                        padding: 0;
-                    }
-                }
-                
-                .col-indicator-rowgroup.expand {
-                    height: 20px;
-                }
-                .col-indicator-rowgroup.collapse {
-                    height: 2px;
-                    
-                }
-                .col-indicator-rowgroup.expand th {
-                    background-color: #eee;
-                    border-right-color: #ccc;
-                    border-top: 2px solid #666;
-                }
-                .col-indicator-rowgroup.collapse th {
-                    background-color: #666;
-                    border: none;
-                }
-                .col-indicator-rowgroup.collapse div {
-                    display: unset;
-                }
-                .col-indicator-rowgroup.collapse div {
-                   display: none;
-                }
-
-                nine-table-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }
-                nine-table-summary { display: none; width: 250px; flex-shrink: 0; border-right: 1px solid #e5e7eb; }
-                --nine-splitter:not([data-split-index]) { width: 4px; background: #e5e7eb; cursor: col-resize; flex-shrink: 0; }
-                nine-table-analysis { display: none; }
-                nine-table-footer { display: none; }
-
-                nine-table-sheets {
-                    flex: 1;
-                    display: flex;
-                    flex-direction: column;
-                    overflow: hidden;
-                    position: relative;
-                    background: #fff;
-                }
-                nine-table-sheets-body {
-                    flex: 1;
-                    overflow: hidden;
-                    position: relative;
-                    display: flex;
-                    flex-direction: row;
-                }
-
-
-                
-                nine-table-sheet .ng-nodata-overlay {
-                    display: none;
-                    position: absolute;
-                    left: 0;
-                    right: 0;
-                    background: #ffffff;
-                    z-index: 0;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 12px;
-                    color: #9ca3af;
-                }
-                
-                nine-table-sheets.nodata {
-                    .ng-nodata-overlay {
-                        display: flex;
-                    }
-                        
-                    .ng-scroll-content {
-                        table {
-                            display: none;
-                        }
-                        .ng-virtual-spacer {
-                            display: none;
-                        }
-                    }
-                }
-                
-                :host(.loading) {
-                    .ng-loading-bar {
-                        display: block;
-                    }
-                }
-                
-
-                .ng-loading-bar {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    right: 0;
-                    height: 2px;
-                    background: rgba(255, 255, 255, 0.08); /* 은은한 화이트 트랙 배경 */
-                    z-index: 10000;
-                    display: none;
-                    overflow: hidden;
-                }
-
-                /* 🎯 아주 좁고 쨍한 빛 조각 형태로 압축 */
-                .ng-loading-bar::after {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    bottom: 0;
-                    width: 12%; /* 바의 전체 길이를 12%로 대폭 축소 */
-                    background: linear-gradient(
-          90deg, 
-          transparent 0%, 
-          rgba(255, 255, 255, 0.4) 20%, 
-          #ffffff 50%, 
-          rgba(255, 255, 255, 0.4) 80%, 
-          transparent 100%
-      );
-                    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
-                    animation: ng-loading-slide 0.9s ease-in-out infinite;
-                }
-
-
-
-
-
-                @keyframes ng-loading-slide {
-                    0% {
-                        transform: translateX(-150%);
-                    }
-                    100% {
-                        transform: translateX(850%); /* 폭이 좁아진 만큼 이동 거리 확장 */
-                    }
-                }
+nine-table-filter-panel, cell-combo-panel {
+    z-index: 2;
+    position: absolute;
+    width: 250px;
+    height: 250px;
+    border: 1px solid #999;
+    background-color: white;
+    overflow: hidden;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    display: none;
+    flex-direction: column;
+    padding: 0;
+    margin: 0;
+    font-size: 12px;
+    resize: both;
+}
+
+nine-table-filter-panel.loading,
+cell-combo-panel.loading {
+
+    nine-table-simple {
+        visibility: hidden;
+    }
+}
+
+nine-table-filter-panel.loading::after,
+cell-combo-panel.loading::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.3);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+nine-table-filter-panel.loading::before,
+cell-combo-panel.loading::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 24px;
+    height: 24px;
+    margin: -12px 0 0 -12px;
+    border: 3px solid #e5e7eb;
+    border-top-color: #2563eb;
+    border-radius: 50%;
+    animation: nine-spin 0.6s linear infinite;
+    z-index: 999999911;
+}
+@keyframes nine-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.empty-value {
+    color: #999;
+}
+
+input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    background-color: #ffffff; /* 미체크 시 배경 */
+    border: 1px solid #9ca3af;
+    border-radius: 3px;
+    outline: none;
+    cursor: pointer;
+    margin: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+input[type="checkbox"]:checked {
+    background-color: #2563eb; /* 체크 시 파란색 배경 */
+    border-color: #2563eb;
+    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+thead tr {
+    height: 48px;
+}
+
+tbody tr {
+    height: 32px;
+}
+
+
+
+/* 3분할된 tr들이 동시에 hover 상태가 되었을 때의 배경색 */
+nine-table-sheet tr.hover th,
+nine-table-sheet tr.hover td {
+    background-color: rgba(37, 99, 235, 0.06);
+}
+
+tr.col-indicator-rowgroup {
+    th,td {
+        padding: 0;
+    }
+}
+
+.col-indicator-rowgroup.expand {
+    height: 20px;
+}
+.col-indicator-rowgroup.collapse {
+    height: 2px;
+}
+.col-indicator-rowgroup.expand th {
+    background-color: #eee;
+    border-right-color: #ccc;
+    border-top: 2px solid #666;
+}
+.col-indicator-rowgroup.collapse th {
+    background-color: #666;
+    border: none;
+}
+.col-indicator-rowgroup.collapse div {
+    display: unset;
+}
+.col-indicator-rowgroup.collapse div {
+    display: none;
+}
+
+nine-table-body { display: flex; flex-direction: row; flex: 1; overflow: hidden; position: relative; }
+nine-table-summary { display: none; width: 250px; flex-shrink: 0; border-right: 1px solid #e5e7eb; }
+nine-table-analysis { display: none; }
+nine-table-footer { display: none; }
+
+
+nine-table-toolbar {
+    --display: flex;
+    display: none;
+    align-items: center;
+    justify-content: space-between;
+    height: 40px;
+    padding: 0 12px;
+    --border-bottom: 1px solid #e5e7eb;
+    background: #ffffff;
+    box-sizing: border-box;
+    user-select: none;
+    flex-shrink: 0;
+
+
+    .ng-toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+    }
+    .ng-toolbar-title {
+        font-size: 13px;
+        font-weight: 600;
+        color: #111827;
+        cursor: pointer;
+    }
+    .ng-toolbar-menu-btn {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        background: none;
+        border: none;
+        padding: 4px;
+        border-radius: 4px;
+    }
+    .ng-toolbar-menu-btn:hover {
+        background-color: #f3f4f6;
+    }
+    .ng-toolbar-custom {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+}
+
+nine-table-toolbar[show-menu="false"] .ng-toolbar-menu-btn {
+    display: none;
+}
+
+
+
+
+
+nine-table-sheets {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    position: relative;
+    background: #fff;
+
+    nine-table-sheets-body {
+        flex: 1;
+        overflow: hidden;
+        position: relative;
+        display: flex;
+        flex-direction: row;
+    }
+
+
+}
+
+nine-table-sheets-footer {
+    display: flex;
+    height: 26px;
+    --background: #f3f4f6;
+    border-top: 1px solid #e5e7eb;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 8px;
+    flex-shrink: 0;
+
+    .sheets-counter {
+        font-size: 12px;
+        color: #6b7280;
+        padding-left: 12px;
+        flex-shrink: 0;
+
+        span#row-count {
+            font-weight: 700;
+        }
+    }
+
+
+
+    .nine-tab-bar {
+        display: flex;
+        align-items: flex-start;
+        gap: 2px;
+        overflow-x: auto;
+        flex: 1;
+        height: 100%;
+
+
+
+        nt-sheets-tab-item {
+            padding: 4px 12px;
+            cursor: pointer;
+            font-size: 12px;
+            color: #4b5563;
+            background: #f9fafb;
+            border: 1px solid #e5e7eb;
+            border-top: none;
+            border-radius: 0 0 3px 3px;
+            user-select: none;
+            height: 100%;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+        }
+
+        nt-sheets-tab-item.active {
+            background: white;
+            color: #111827;
+            font-weight: 600;
+            border-bottom: 2px solid green;
+        }
+    }
+}
+
+
+nine-table-sheet .ng-nodata-overlay {
+    display: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    background: #ffffff;
+    z-index: 0;
+    align-items: center;
+    justify-content: center;
+    font-size: 12px;
+    color: #9ca3af;
+}
+
+nine-table-sheets.nodata {
+    .ng-nodata-overlay {
+        display: flex;
+    }
+
+    .ng-scroll-content {
+        table {
+            display: none;
+        }
+        .ng-virtual-spacer {
+            display: none;
+        }
+    }
+}
+
+:host(.loading) {
+    .ng-loading-bar {
+        display: block;
+    }
+}
+
+
+.ng-loading-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: rgba(255, 255, 255, 0.08); /* 은은한 화이트 트랙 배경 */
+    z-index: 10000;
+    display: none;
+    overflow: hidden;
+}
+
+    /* 🎯 아주 좁고 쨍한 빛 조각 형태로 압축 */
+.ng-loading-bar::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 12%; /* 바의 전체 길이를 12%로 대폭 축소 */
+    background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.4) 20%,
+        #ffffff 50%,
+        rgba(255, 255, 255, 0.4) 80%,
+        transparent 100%
+        );
+    box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
+    animation: ng-loading-slide 0.9s ease-in-out infinite;
+}
+
+
+
+
+:host {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    overflow: hidden;
+
+    background: #fff;
+}
+
+:host([theme="simple"]) {
+    /* 1. 불필요한 패널 및 컴포넌트 숨기기 */
+    .ng-part-header, .ng-part-footer,
+    nine-table-toolbar,
+    nine-table-sheets-footer,
+    nine-table-vscrollbar,
+    nine-table-hscrollbar,
+    nine-table-sheet .ng-scroll-edge {
+        display: none;
+    }
+
+    .col-indicator-rowgroup {
+        display: none;
+    }
+
+    tr {
+        height: 32px;
+    }
+
+    /* 2. 💡 [핵심] 스크롤바용 우측 16px 빈 공간을 제거하고 1열(1fr)로 꽉 채우기 */
+    nine-table-sheet {
+        border: none;
+        overflow: hidden;
+        grid-template-columns: 1fr;
+        grid-template-rows: 1fr;
+    }
+
+    nine-table-sheet tr th,
+    nine-table-sheet tr td {
+        border: none;
+        padding: 0 8px;
+    }
+
+    nine-table-sheet tr td {
+        text-align: left;
+    }
+
+    /* 4. 브라우저 기본 네이티브 스크롤바를 콘텐츠 위에 자연스럽게 오버레이(Overlay) */
+    nine-table-sheet .ng-sheet-body {
+        overflow-y: auto;
+        overflow-x: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+    }
+
+    nine-table-sheet .ng-sheet-body::-webkit-scrollbar {
+        display: block;
+        width: 6px;
+        height: 6px;
+    }
+
+    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-track {
+        background: transparent;
+    }
+
+    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-thumb {
+        background: rgba(0, 0, 0, 0.15);
+        border-radius: 3px;
+    }
+
+    nine-table-sheet .ng-sheet-body::-webkit-scrollbar-thumb:hover {
+        background: rgba(0, 0, 0, 0.3);
+    }
+}
+
+/* 🎯 Toolbar 숨김 제어 */
+:host([theme="simple"]) nine-table-toolbar,
+:host([show-header="false"]) nine-table-toolbar {
+    display: none;
+}
+
+/* 🎯 Footer(StatusBar) 숨김 제어 (show-statusbar="false") */
+:host([theme="simple"]) nine-table-sheets-footer,
+:host([show-statusbar="false"]) nine-table-sheets-footer {
+    display: none;
+}
+
+:host([theme="simple"]) {
+    col[data-col="0"], th[data-col="0"], td[data-col="0"] {
+        display: none;
+    }
+    .ng-container-right {
+        display: none;
+    }
+    tr {
+        height: 26px;
+    }
+}
+
+
+@keyframes ng-loading-slide {
+    0% {
+        transform: translateX(-150%);
+    }
+    100% {
+        transform: translateX(850%); /* 폭이 좁아진 만큼 이동 거리 확장 */
+    }
+}
+
+
+cell-renderer {          /* Custom element host layout */
+    display: block;
+    span {
+        display: block;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;   /* 줄바꿈 방지 */
+    }
+}
+
+.CELL-RENDERER {      /* Parent cell hook */
+    text-align: left;
+}
+.CELL-RENDERER[text-align="center"] {
+    text-align: center;
+}
+.CELL-RENDERER[text-align="right"] {
+    text-align: right;
+}