argent-grid 0.1.0 → 0.2.0

package/src/lib/components/argent-grid.component.css

@@ -2,9 +2,20 @@
   box-sizing: border-box;
   position: relative;
   overflow: hidden;
-  border: 1px solid #babed1;
-  background: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  border: 1px solid var(--ag-border-color, #babed1);
+  background: var(--ag-background-color, #fff);
+  font-family: var(
+    --ag-font-family,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    sans-serif
+  );
+  font-size: var(--ag-font-size, 14px);
+  color: var(--ag-foreground-color, #181d1f);
   display: flex;
   flex-direction: column;
 }
@@ -29,7 +40,7 @@
   right: 0;
   top: 0;
   bottom: 0;
-  z-index: 15;
+  z-index: 25; /* Higher than header z-index (20) */
   background: transparent;
   display: flex;
   flex-direction: row-reverse;
@@ -48,7 +59,8 @@
   flex-direction: column;
   pointer-events: none;
   height: 100%;
-  border-left: 1px solid #babed1;
+  border-left: 1px solid var(--ag-border-color, #babed1);
+  padding-top: 32px; /* Start below the header row */
 }
 
 .side-bar-button {
@@ -56,54 +68,49 @@
   padding: 12px 8px;
   cursor: pointer;
   font-size: 12px;
-  color: #666;
-  border-bottom: 1px solid #ddd;
-  background: #f4f4f4;
+  color: var(--ag-secondary-foreground-color, #666);
+  border-bottom: 1px solid var(--ag-border-color, #ddd);
+  background: var(--ag-background-color, #f4f4f4);
   pointer-events: auto;
 }
 
 .side-bar-button:hover {
-  background: #fff;
+  background: var(--ag-background-color, #fff);
 }
 
 .side-bar-button.active {
-  background: #fff;
-  border-left: 2px solid #2196f3;
-  color: #2196f3;
+  background: var(--ag-background-color, #fff);
+  border-left: 2px solid var(--ag-selected-row-background-color, #2196f3);
+  color: var(--ag-selected-row-background-color, #2196f3);
   font-weight: bold;
 }
 
 .tool-panel-content {
   width: 250px;
   padding: 12px;
+  padding-top: 32px; /* Start below the header row */
   overflow-y: auto;
-  background: #fff;
+  background: var(--ag-background-color, #fff);
   pointer-events: auto;
-  border-left: 1px solid #babed1;
+  border-left: 1px solid var(--ag-border-color, #babed1);
   box-shadow: -5px 0 10px rgba(0, 0, 0, 0.05);
 }
 
 .tool-panel-content h3 {
   margin: 0 0 12px 0;
   font-size: 14px;
-  color: #333;
-  border-bottom: 1px solid #eee;
+  color: var(--ag-foreground-color, #333);
+  border-bottom: 1px solid var(--ag-border-color, #eee);
   padding-bottom: 8px;
 }
 
-.column-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
 .column-item {
   display: flex;
   align-items: center;
   padding: 6px 8px;
   gap: 8px;
-  background: #fff;
-  border-bottom: 1px solid #f0f0f0;
+  background: var(--ag-background-color, #fff);
+  border-bottom: 1px solid var(--ag-border-color, #f0f0f0);
   cursor: default;
 }
 
@@ -113,7 +120,7 @@
 
 .column-drag-handle {
   cursor: grab;
-  color: #ccc;
+  color: var(--ag-secondary-foreground-color, #ccc);
   font-size: 14px;
   user-select: none;
   display: flex;
@@ -127,7 +134,7 @@
 .column-label {
   flex: 1;
   font-size: 12px;
-  color: #333;
+  color: var(--ag-foreground-color, #333);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -137,20 +144,22 @@
 .sidebar-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
   display: flex;
   align-items: center;
   padding: 8px 12px;
-  background: white;
+  background: var(--ag-background-color, white);
   z-index: 10001;
   gap: 8px;
+  color: var(--ag-foreground-color, #181d1f);
 }
 
 .sidebar-drag-placeholder {
   opacity: 0.3;
-  background: #e0e0e0;
+  background: var(--ag-border-color, #e0e0e0);
 }
 
 .column-list.cdk-drop-list-dragging .column-item:not(.cdk-drag-placeholder) {
@@ -161,14 +170,21 @@
   margin: 0;
 }
 
-.argent-grid-container *, .argent-grid-container *:before, .argent-grid-container *:after {
+.argent-grid-container *,
+.argent-grid-container *:before,
+.argent-grid-container *:after {
   box-sizing: inherit;
 }
 
 .argent-grid-header {
-  border-bottom: 1px solid #babed1;
-  background: #f8f9fa;
+  border-bottom: 1px solid var(--ag-border-color, #babed1);
+  background: var(--ag-header-background-color, #f8f9fa);
+  color: var(--ag-header-foreground-color, #181d1f);
   font-weight: 600;
+  position: relative;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
 }
 
 .argent-grid-header-row {
@@ -179,6 +195,11 @@
 .argent-grid-header-scrollable {
   overflow: hidden;
   flex: 1;
+  display: flex;
+}
+
+.argent-grid-header-scrollable .argent-grid-header-row {
+  flex: 1;
 }
 
 .argent-grid-header-pinned-left-container,
@@ -189,16 +210,18 @@
 .cdk-drag-preview {
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
-              0 8px 10px 1px rgba(0, 0, 0, 0.14),
-              0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  background: #f5f5f5;
+  box-shadow:
+    0 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  background: var(--ag-background-color, #f5f5f5);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px 12px;
   font-weight: 600;
   opacity: 0.8;
+  color: var(--ag-foreground-color, #181d1f);
 }
 
 .cdk-drag-placeholder {
@@ -209,13 +232,43 @@
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
-.argent-grid-header-cell.cdk-drop-list-dragging .argent-grid-header-cell:not(.cdk-drag-placeholder) {
+.argent-grid-header-cell.cdk-drop-list-dragging
+  .argent-grid-header-cell:not(.cdk-drag-placeholder) {
   transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }
 
+.argent-grid-header-checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.argent-grid-header-cell.center-content .argent-grid-header-checkbox {
+  margin-right: 0;
+}
+
+.argent-grid-header-cell.center-content {
+  justify-content: center;
+}
+
+.argent-grid-header-cell.center-content .argent-grid-header-content {
+  justify-content: center;
+  flex: none; /* Don't grow so parent's justify-content works better, or just center inside */
+  width: 100%;
+}
+
+.argent-grid-header-checkbox input {
+  margin: 0;
+  cursor: pointer;
+  width: 14px;
+  height: 14px;
+}
+
 .argent-grid-header-cell {
-  padding: 8px 12px;
-  border-right: 1px solid #babed1;
+  padding: 4px 12px;
+  border-right: 1px solid var(--ag-border-color, #babed1);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -223,7 +276,8 @@
   user-select: none;
   flex-shrink: 0;
   position: relative;
-  height: 100%;
+  min-height: 32px;
+  color: var(--ag-header-foreground-color, #181d1f);
 }
 
 .argent-grid-header-cell:hover .argent-grid-header-menu-icon {
@@ -235,7 +289,6 @@
   align-items: center;
   overflow: hidden;
   flex: 1;
-  height: 100%;
 }
 
 .header-text {
@@ -247,15 +300,15 @@
 .argent-grid-header-menu-icon {
   opacity: 0;
   padding: 0 6px;
-  color: #666;
+  color: var(--ag-secondary-foreground-color, #666);
   transition: opacity 0.2s;
   font-size: 16px;
   line-height: 1;
 }
 
 .argent-grid-header-menu-icon:hover {
-  color: #000;
-  background: #e0e0e0;
+  color: var(--ag-foreground-color, #000);
+  background: var(--ag-row-hover-color, #e0e0e0);
   border-radius: 4px;
 }
 
@@ -268,36 +321,37 @@
   cursor: col-resize;
   z-index: 5;
   transition: background-color 0.2s;
+  height: 100%;
 }
 
 .argent-grid-header-resize-handle:hover,
 .argent-grid-header-resize-handle.resizing {
-  background-color: #2196f3;
+  background-color: var(--ag-selected-row-background-color, #2196f3);
 }
 
 .argent-grid-header-cell-pinned-left {
   position: sticky;
   left: 0;
   z-index: 10;
-  background: #f8f9fa;
+  background: var(--ag-header-background-color, #f8f9fa);
 }
 
 .argent-grid-header-cell-pinned-right {
   position: sticky;
   right: 0;
   z-index: 10;
-  background: #f8f9fa;
+  background: var(--ag-header-background-color, #f8f9fa);
 }
 
 .argent-grid-header-cell.sortable:hover {
-  background: #e8e8e8;
+  background: var(--ag-row-hover-color, #e8e8e8);
 }
 
 .sort-indicator {
   margin-left: 4px;
   font-size: 12px;
+  color: var(--ag-foreground-color, #181d1f);
 }
-
 .argent-grid-viewport {
   position: relative;
   overflow: auto;
@@ -305,6 +359,7 @@
   will-change: scroll-position;
   flex: 1;
   min-height: 0;
+  background: var(--ag-background-color, #fff);
 }
 
 .argent-grid-canvas {
@@ -322,9 +377,9 @@
   position: absolute;
   top: 0;
   left: 0;
-  width: 1px;
-  visibility: hidden;
   pointer-events: none;
+  z-index: -1;
+  background: var(--ag-background-color, #fff);
 }
 
 .argent-grid-overlay {
@@ -336,7 +391,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(255, 255, 255, 0.9);
+  background: var(--ag-background-color, rgba(255, 255, 255, 0.9));
   z-index: 10;
 }
 
@@ -349,25 +404,28 @@
 .argent-grid-editor-input {
   width: 100%;
   height: 100%;
-  border: 2px solid #2196f3;
+  border: 2px solid var(--ag-selected-row-background-color, #2196f3);
   outline: none;
   padding: 4px 8px;
-  font-size: 13px;
-  font-family: inherit;
+  font-size: var(--ag-font-size, 13px);
+  font-family: var(--ag-font-family, inherit);
   box-sizing: border-box;
+  background: var(--ag-background-color, #fff);
+  color: var(--ag-foreground-color, #181d1f);
 }
 
-.argent-grid-header-menu, .argent-grid-context-menu {
+.argent-grid-header-menu,
+.argent-grid-context-menu {
   position: fixed;
-  background: #ffffff;
-  border: 1px solid #babed1;
+  background: var(--ag-background-color, #ffffff);
+  border: 1px solid var(--ag-border-color, #babed1);
   box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
   border-radius: 3px;
   padding: 4px 0;
   z-index: 10000;
   min-width: 200px;
   font-size: 13px;
-  color: #181d1f;
+  color: var(--ag-foreground-color, #181d1f);
 }
 
 .menu-item {
@@ -380,11 +438,11 @@
 }
 
 .menu-item:hover {
-  background-color: #f0f2f5;
+  background-color: var(--ag-row-hover-color, #f0f2f5);
 }
 
 .menu-item.disabled {
-  color: #999;
+  color: var(--ag-secondary-foreground-color, #999);
   cursor: not-allowed;
 }
 
@@ -399,7 +457,7 @@
 .menu-arrow {
   margin-left: 8px;
   font-size: 10px;
-  color: #999;
+  color: var(--ag-secondary-foreground-color, #999);
 }
 
 /* Sub-menu styling */
@@ -422,24 +480,33 @@
   align-items: center;
   margin-right: 8px;
   font-size: 14px;
-  color: #555;
+  color: var(--ag-foreground-color, #555);
 }
 
 .menu-divider {
   height: 1px;
-  background-color: #babed1;
+  background-color: var(--ag-border-color, #babed1);
   margin: 4px 0;
   opacity: 0.5;
 }
 
 .floating-filter-row {
-  background: #fafafa;
-  border-top: 1px solid #e0e0e0;
+  background: var(--ag-background-color, #fafafa);
+  border-top: 1px solid var(--ag-border-color, #babed1);
+  position: relative;
+  z-index: 20;
+  min-height: 28px;
+}
+
+.argent-grid-floating-filter-cell {
+  padding: 2px 12px;
+  cursor: default;
+  min-height: 28px;
 }
 
 .floating-filter-container {
   width: 100%;
-  padding: 2px 4px;
+  padding: 1px 4px;
   box-sizing: border-box;
   position: relative;
   display: flex;
@@ -448,20 +515,22 @@
 
 .floating-filter-input {
   width: 100%;
-  height: 24px;
-  border: 1px solid #d0d0d0;
+  height: 22px;
+  border: 1px solid var(--ag-border-color, #d0d0d0);
   border-radius: 2px;
   padding: 0 20px 0 6px;
   font-size: 12px;
   outline: none;
   box-sizing: border-box;
+  background: var(--ag-background-color, #fff);
+  color: var(--ag-foreground-color, #181d1f);
 }
 
 .floating-filter-clear {
   position: absolute;
   right: 8px;
   cursor: pointer;
-  color: #999;
+  color: var(--ag-secondary-foreground-color, #999);
   font-size: 10px;
   display: flex;
   align-items: center;
@@ -469,15 +538,197 @@
   width: 14px;
   height: 14px;
   border-radius: 50%;
-  transition: background-color 0.2s, color 0.2s;
+  transition:
+    background-color 0.2s,
+    color 0.2s;
 }
 
 .floating-filter-clear:hover {
-  background-color: #eee;
-  color: #333;
+  background-color: var(--ag-row-hover-color, #eee);
+  color: var(--ag-foreground-color, #333);
 }
 
 .floating-filter-input:focus {
-  border-color: #2196f3;
+  border-color: var(--ag-selected-row-background-color, #2196f3);
   box-shadow: 0 0 2px rgba(33, 150, 243, 0.2);
 }
+
+/* Set Filter Button */
+.floating-filter-btn {
+  width: 100%;
+  height: 22px;
+  border: 1px solid var(--ag-border-color, #d0d0d0);
+  border-radius: 2px;
+  padding: 0 8px;
+  font-size: 11px;
+  background: var(--ag-background-color, #fff);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+  outline: none;
+  transition: all 0.2s;
+  color: var(--ag-foreground-color, #181d1f);
+}
+
+.floating-filter-btn:hover {
+  border-color: var(--ag-selected-row-background-color, #4f46e5);
+  background: var(--ag-row-hover-color, #f5f5f5);
+}
+
+.floating-filter-btn.active {
+  border-color: var(--ag-selected-row-background-color, #4f46e5);
+  background: var(--ag-selected-row-background-color, #eef2ff);
+  color: var(--ag-selected-row-background-color, #4f46e5);
+}
+
+/* Set Filter Popup */
+.set-filter-popup {
+  position: fixed;
+  z-index: 1000;
+  background: var(--ag-background-color, #fff);
+  border: 1px solid var(--ag-border-color, #e0e0e0);
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  animation: fadeIn 0.15s ease-out;
+}
+
+/* Filter Popup */
+.filter-popup {
+  position: fixed;
+  z-index: 1000;
+  background: var(--ag-background-color, #fff);
+  border: 1px solid var(--ag-border-color, #babed1);
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 180px;
+  padding: 8px;
+  animation: fadeIn 0.1s ease-out;
+  pointer-events: auto;
+}
+
+.filter-popup-header {
+  font-size: 11px;
+  font-weight: bold;
+  color: var(--ag-secondary-foreground-color, #666);
+  margin-bottom: 6px;
+  text-transform: uppercase;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.filter-popup-close {
+  cursor: pointer;
+  padding: 2px;
+  opacity: 0.6;
+}
+
+.filter-popup-close:hover {
+  opacity: 1;
+}
+
+.filter-popup-body {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.filter-popup-row {
+  display: flex;
+  flex-direction: column;
+}
+
+.filter-popup-select {
+  width: 100%;
+  height: 28px;
+  border: 1px solid var(--ag-border-color, #d0d0d0);
+  border-radius: 2px;
+  padding: 0 4px;
+  font-size: 13px;
+  background: var(--ag-background-color, #fff);
+  outline: none;
+}
+
+.filter-popup-select:focus {
+  border-color: var(--ag-selected-row-background-color, #2196f3);
+}
+
+.filter-popup-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid var(--ag-border-color, #f0f0f0);
+}
+
+.filter-popup-btn {
+  padding: 4px 12px;
+  border-radius: 3px;
+  font-size: 12px;
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: all 0.1s;
+}
+
+.clear-btn {
+  background: transparent;
+  color: var(--ag-secondary-foreground-color, #666);
+  border-color: var(--ag-border-color, #d0d0d0);
+}
+
+.clear-btn:hover {
+  background: #f5f5f5;
+  color: #333;
+}
+
+.apply-btn {
+  background: var(--ag-selected-row-background-color, #2196f3);
+  color: white;
+}
+
+.apply-btn:hover {
+  background: #1976d2;
+}
+
+.filter-popup-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.filter-popup-clear {
+  position: absolute;
+  right: 8px;
+  cursor: pointer;
+  color: var(--ag-secondary-foreground-color, #999);
+  font-size: 10px;
+}
+
+.filter-popup-input {
+  width: 100%;
+  height: 28px;
+  border: 1px solid var(--ag-border-color, #d0d0d0);
+  border-radius: 2px;
+  padding: 0 8px;
+  font-size: 13px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.filter-popup-input:focus {
+  border-color: var(--ag-selected-row-background-color, #2196f3);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}