@ninebone/table 0.1.40 → 0.1.42

package/dist/css/layout.css

@@ -1,470 +0,0 @@
-:host {
-    --scrollbar-size: 16px;
-}
-
-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;
-}

package/dist/css/nine-table-hscrollbar.css

@@ -1,3 +0,0 @@
-nine-table-hscrollbar {
-    display: none; /* 평소에는 기본 숨김 */
-}