photon-grid-core 2.0.5 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cell-selection/cell-selection-engine.d.ts +35 -0
- package/cell-selection/cell-selection-engine.d.ts.map +1 -1
- package/cell-selection/cell-selection-engine.js +133 -6
- package/cell-selection/cell-selection-engine.js.map +1 -1
- package/core/grid-api.d.ts +59 -0
- package/core/grid-api.d.ts.map +1 -1
- package/core/grid-api.js +88 -1
- package/core/grid-api.js.map +1 -1
- package/core/grid-core.d.ts.map +1 -1
- package/core/grid-core.js +1 -0
- package/core/grid-core.js.map +1 -1
- package/engines/clipboard/clipboard-engine.d.ts +3 -2
- package/engines/clipboard/clipboard-engine.d.ts.map +1 -1
- package/engines/clipboard/clipboard-engine.js +4 -3
- package/engines/clipboard/clipboard-engine.js.map +1 -1
- package/engines/filter/filter-engine.d.ts +16 -0
- package/engines/filter/filter-engine.d.ts.map +1 -1
- package/engines/filter/filter-engine.js +20 -0
- package/engines/filter/filter-engine.js.map +1 -1
- package/engines/filter/filter-panel.d.ts.map +1 -1
- package/engines/filter/filter-panel.js +6 -1
- package/engines/filter/filter-panel.js.map +1 -1
- package/package.json +1 -1
- package/photon-ai/builtins/filter.commands.d.ts +15 -0
- package/photon-ai/builtins/filter.commands.d.ts.map +1 -1
- package/photon-ai/builtins/filter.commands.js +5 -5
- package/photon-ai/builtins/filter.commands.js.map +1 -1
- package/photon-ai/builtins/selection.commands.d.ts.map +1 -1
- package/photon-ai/builtins/selection.commands.js +161 -2
- package/photon-ai/builtins/selection.commands.js.map +1 -1
- package/photon-ai/provider/command-normalizer.d.ts.map +1 -1
- package/photon-ai/provider/command-normalizer.js +5 -1
- package/photon-ai/provider/command-normalizer.js.map +1 -1
- package/photon-ai/provider/system-prompt.d.ts.map +1 -1
- package/photon-ai/provider/system-prompt.js +3 -1
- package/photon-ai/provider/system-prompt.js.map +1 -1
- package/photon-grid.min.js +149 -66
- package/renderer/auto-scroller.d.ts +11 -1
- package/renderer/auto-scroller.d.ts.map +1 -1
- package/renderer/auto-scroller.js +34 -19
- package/renderer/auto-scroller.js.map +1 -1
- package/renderer/body-renderer.d.ts +16 -0
- package/renderer/body-renderer.d.ts.map +1 -1
- package/renderer/body-renderer.js +54 -1
- package/renderer/body-renderer.js.map +1 -1
- package/renderer/cell-renderer.d.ts +9 -1
- package/renderer/cell-renderer.d.ts.map +1 -1
- package/renderer/cell-renderer.js +16 -2
- package/renderer/cell-renderer.js.map +1 -1
- package/renderer/grid-renderer.d.ts +20 -0
- package/renderer/grid-renderer.d.ts.map +1 -1
- package/renderer/grid-renderer.js +117 -1
- package/renderer/grid-renderer.js.map +1 -1
- package/renderer/header-renderer.d.ts +39 -0
- package/renderer/header-renderer.d.ts.map +1 -1
- package/renderer/header-renderer.js +131 -16
- package/renderer/header-renderer.js.map +1 -1
- package/styles/base/column-group-header.css.d.ts +1 -1
- package/styles/base/column-group-header.css.d.ts.map +1 -1
- package/styles/base/column-group-header.css.js +4 -0
- package/styles/base/column-group-header.css.js.map +1 -1
- package/styles/base/context-menu.css.d.ts +1 -1
- package/styles/base/context-menu.css.d.ts.map +1 -1
- package/styles/base/context-menu.css.js +15 -0
- package/styles/base/context-menu.css.js.map +1 -1
- package/styles/base/filter.css.d.ts +1 -1
- package/styles/base/filter.css.d.ts.map +1 -1
- package/styles/base/filter.css.js +43 -2
- package/styles/base/filter.css.js.map +1 -1
- package/styles/base/header.css.d.ts +1 -1
- package/styles/base/header.css.d.ts.map +1 -1
- package/styles/base/header.css.js +4 -1
- package/styles/base/header.css.js.map +1 -1
- package/styles/base/rows.css.d.ts +1 -1
- package/styles/base/rows.css.d.ts.map +1 -1
- package/styles/base/rows.css.js +19 -0
- package/styles/base/rows.css.js.map +1 -1
- package/styles/themes/theme-alpine.d.ts +1 -1
- package/styles/themes/theme-alpine.d.ts.map +1 -1
- package/styles/themes/theme-alpine.js +1 -1
- package/styles/themes/theme-balham.d.ts +1 -1
- package/styles/themes/theme-balham.d.ts.map +1 -1
- package/styles/themes/theme-balham.js +1 -1
- package/styles/themes/theme-material.d.ts +1 -1
- package/styles/themes/theme-material.d.ts.map +1 -1
- package/styles/themes/theme-material.js +1 -1
- package/styles/themes/theme-quartz.d.ts +1 -1
- package/styles/themes/theme-quartz.d.ts.map +1 -1
- package/styles/themes/theme-quartz.js +2 -1
- package/styles/themes/theme-quartz.js.map +1 -1
- package/theme/themes/light-theme.js +1 -1
|
@@ -127,6 +127,7 @@ export const columnGroupHeaderCss = `/* ─────────────
|
|
|
127
127
|
|
|
128
128
|
/* Smooth column-shift animation — enabled ONLY while actively dragging a column */
|
|
129
129
|
.pg-grid--col-dragging .pg-th[data-col-id],
|
|
130
|
+
.pg-grid--col-dragging .pg-filter-cell[data-col-id],
|
|
130
131
|
.pg-grid--col-dragging .pg-cell[data-col-id] {
|
|
131
132
|
transform: translateX(var(--pg-drag-x, 0px));
|
|
132
133
|
transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
@@ -139,11 +140,13 @@ export const columnGroupHeaderCss = `/* ─────────────
|
|
|
139
140
|
/* During header auto-scroll the transforms update every RAF tick — disable the
|
|
140
141
|
transition so cells snap instantly rather than endlessly chasing a moving target */
|
|
141
142
|
.pg-grid--col-autoscrolling .pg-th[data-col-id],
|
|
143
|
+
.pg-grid--col-autoscrolling .pg-filter-cell[data-col-id],
|
|
142
144
|
.pg-grid--col-autoscrolling .pg-cell[data-col-id] {
|
|
143
145
|
transition: none;
|
|
144
146
|
}
|
|
145
147
|
/* Live-preview path (store mutations during drag): suppress all transitions */
|
|
146
148
|
.pg-grid--drag-preview-sync .pg-th[data-col-id],
|
|
149
|
+
.pg-grid--drag-preview-sync .pg-filter-cell[data-col-id],
|
|
147
150
|
.pg-grid--drag-preview-sync .pg-cell[data-col-id] {
|
|
148
151
|
transition: none !important;
|
|
149
152
|
}
|
|
@@ -164,6 +167,7 @@ export const columnGroupHeaderCss = `/* ─────────────
|
|
|
164
167
|
transform: translateX(var(--pg-drag-x, 0px));
|
|
165
168
|
transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
|
|
166
169
|
}
|
|
170
|
+
.pg-grid--group-dragging .pg-filter-cell[data-col-id],
|
|
167
171
|
.pg-grid--group-dragging .pg-cell[data-col-id] {
|
|
168
172
|
transform: translateX(var(--pg-drag-x, 0px));
|
|
169
173
|
transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"column-group-header.css.js","sourceRoot":"","sources":["../../../src/styles/base/column-group-header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG
|
|
1
|
+
{"version":3,"file":"column-group-header.css.js","sourceRoot":"","sources":["../../../src/styles/base/column-group-header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyQnC,CAAC"}
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
* base-styles.ts; edit here, not there. Order is preserved because CSS
|
|
6
6
|
* cascade depends on it.
|
|
7
7
|
*/
|
|
8
|
-
export declare const contextMenuCss = "/* \u2500\u2500\u2500 Context menu \u2500\u2500\u2500 */\n.pg-context-menu {\n position: fixed;\n z-index: 999999;\n display: none;\n min-width: 192px;\n padding: 4px 0;\n background: var(--pg-colors-surface, #fff);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-md, 6px);\n box-shadow: var(--pg-shadows-dropdown, 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07));\n font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n font-size: var(--pg-typography-font-size-md, 13px);\n}\n.pg-context-menu--visible { display: block; }\n.pg-context-menu__item {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 7px 14px;\n border: none;\n background: transparent;\n cursor: pointer;\n text-align: left;\n color: var(--pg-colors-text-primary, #0f172a);\n gap: 0;\n transition: background 80ms;\n}\n.pg-context-menu__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-context-menu__item:active { background: var(--pg-colors-border, #e2e8f0); }\n.pg-context-menu__label { flex: 1; }\n.pg-context-menu__kbd {\n font-size: var(--pg-typography-font-size-sm, 11px);\n color: var(--pg-colors-text-disabled, #94a3b8);\n letter-spacing: 0.01em;\n}\n.pg-context-menu__sep {\n margin: 4px 0;\n border-top: 1px solid var(--pg-colors-border-ctxt-menu, #e2e8f0);\n background: var(--pg-colors-border, #e2e8f0);\n}\n\n.pg-cell__inner {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 0 12px;\n overflow: hidden;\n}\n.pg-cell__value {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: var(--pg-typography-line-height-base, 1.5);\n}\n.pg-cell--checkbox {\n width: 44px;\n min-width: 44px;\n max-width: 44px;\n justify-content: center;\n flex-shrink: 0;\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-cell--serial {\n width: 52px;\n min-width: 52px;\n max-width: 52px;\n justify-content: center;\n flex-shrink: 0;\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n color: var(--pg-colors-text-secondary, #475569);\n font-size: var(--pg-typography-font-size-sm, 12px);\n}\n.pg-cell__serial { font-variant-numeric: tabular-nums; }\n/* Dark mode: tint the serial (row-number) column with the header/footer chrome\n background (which sits above the darker data-row background in dark themes) so\n the number gutter reads as grid chrome \u2014 matching the header and footer\n surfaces \u2014 rather than as data. Scoped to dark mode per design; variants that\n define their own serial-column chrome (e.g. quartz) still win via source order. */\n[data-pg-mode=\"dark\"] .pg-cell--serial {\n background: var(--pg-colors-header-background, var(--pg-colors-footer-background, #1e293b));\n}\n.pg-cell--bool-true { color: var(--pg-colors-success, #16a34a); }\n.pg-cell--bool-false { color: var(--pg-colors-text-disabled, #94a3b8); }\n.pg-cell__image { border-radius: var(--pg-borders-radius-sm, 4px); object-fit: cover; }\n.pg-badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: var(--pg-borders-radius-pill, 9999px);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-medium, 500);\n white-space: nowrap;\n}\n.pg-cell--range-selected { background: var(--pg-colors-selection-background, rgba(37,99,235,0.08)); }\n.pg-cell--editing { padding: 0;border-radius: 4px }\n.pg-cell--editing .pg-cell__inner { padding: 0; overflow: visible; }\n.pg-selection-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 10; }\n\n";
|
|
8
|
+
export declare const contextMenuCss = "/* \u2500\u2500\u2500 Context menu \u2500\u2500\u2500 */\n.pg-context-menu {\n position: fixed;\n z-index: 999999;\n display: none;\n min-width: 192px;\n padding: 4px 0;\n background: var(--pg-colors-surface, #fff);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-md, 6px);\n box-shadow: var(--pg-shadows-dropdown, 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.07));\n font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n font-size: var(--pg-typography-font-size-md, 13px);\n}\n.pg-context-menu--visible { display: block; }\n.pg-context-menu__item {\n display: flex;\n align-items: center;\n width: 100%;\n padding: 7px 14px;\n border: none;\n background: transparent;\n cursor: pointer;\n text-align: left;\n color: var(--pg-colors-text-primary, #0f172a);\n gap: 0;\n transition: background 80ms;\n}\n.pg-context-menu__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-context-menu__item:active { background: var(--pg-colors-border, #e2e8f0); }\n.pg-context-menu__label { flex: 1; }\n.pg-context-menu__kbd {\n font-size: var(--pg-typography-font-size-sm, 11px);\n color: var(--pg-colors-text-disabled, #94a3b8);\n letter-spacing: 0.01em;\n}\n.pg-context-menu__sep {\n margin: 4px 0;\n border-top: 1px solid var(--pg-colors-border-ctxt-menu, #e2e8f0);\n background: var(--pg-colors-border, #e2e8f0);\n}\n\n.pg-cell__inner {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n padding: 0 12px;\n overflow: hidden;\n}\n.pg-cell__value {\n flex: 1;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n line-height: var(--pg-typography-line-height-base, 1.5);\n}\n.pg-cell--checkbox {\n width: 44px;\n min-width: 44px;\n max-width: 44px;\n justify-content: center;\n flex-shrink: 0;\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-cell--serial {\n width: 52px;\n min-width: 52px;\n max-width: 52px;\n justify-content: center;\n flex-shrink: 0;\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n color: var(--pg-colors-text-secondary, #475569);\n font-size: var(--pg-typography-font-size-sm, 12px);\n}\n.pg-cell__serial { font-variant-numeric: tabular-nums; }\n/* Dark mode: tint the serial (row-number) column with the header/footer chrome\n background (which sits above the darker data-row background in dark themes) so\n the number gutter reads as grid chrome \u2014 matching the header and footer\n surfaces \u2014 rather than as data. Scoped to dark mode per design; variants that\n define their own serial-column chrome (e.g. quartz) still win via source order. */\n[data-pg-mode=\"dark\"] .pg-cell--serial {\n background: var(--pg-colors-header-background, var(--pg-colors-footer-background, #1e293b));\n}\n/* \u2500\u2500 Serial column as a row-selection column (opt-in) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n When serialColumnSelection is enabled, the \"#\" cell becomes an AG Grid\u2013style\n selection handle: mouse-down starts a row drag-selection. The selected-state\n outline is drawn around the whole row (see rows.css), not on this cell. */\n.pg-cell--serial-select {\n cursor: pointer;\n user-select: none;\n}\n.pg-cell--serial-select:hover {\n background: var(--pg-colors-header-hover, var(--pg-colors-background-alt, #f1f5f9));\n}\n.pg-cell--serial-select:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--pg-colors-primary, #2563eb);\n}\n.pg-cell--bool-true { color: var(--pg-colors-success, #16a34a); }\n.pg-cell--bool-false { color: var(--pg-colors-text-disabled, #94a3b8); }\n.pg-cell__image { border-radius: var(--pg-borders-radius-sm, 4px); object-fit: cover; }\n.pg-badge {\n display: inline-flex;\n align-items: center;\n padding: 2px 8px;\n border-radius: var(--pg-borders-radius-pill, 9999px);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-medium, 500);\n white-space: nowrap;\n}\n.pg-cell--range-selected { background: var(--pg-colors-selection-background, rgba(37,99,235,0.08)); }\n.pg-cell--editing { padding: 0;border-radius: 4px }\n.pg-cell--editing .pg-cell__inner { padding: 0; overflow: visible; }\n.pg-selection-canvas { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 10; }\n\n";
|
|
9
9
|
//# sourceMappingURL=context-menu.css.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context-menu.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"context-menu.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,u3IAqH1B,CAAC"}
|
|
@@ -90,6 +90,21 @@ export const contextMenuCss = `/* ─── Context menu ─── */
|
|
|
90
90
|
[data-pg-mode="dark"] .pg-cell--serial {
|
|
91
91
|
background: var(--pg-colors-header-background, var(--pg-colors-footer-background, #1e293b));
|
|
92
92
|
}
|
|
93
|
+
/* ── Serial column as a row-selection column (opt-in) ──────────────────────
|
|
94
|
+
When serialColumnSelection is enabled, the "#" cell becomes an AG Grid–style
|
|
95
|
+
selection handle: mouse-down starts a row drag-selection. The selected-state
|
|
96
|
+
outline is drawn around the whole row (see rows.css), not on this cell. */
|
|
97
|
+
.pg-cell--serial-select {
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
user-select: none;
|
|
100
|
+
}
|
|
101
|
+
.pg-cell--serial-select:hover {
|
|
102
|
+
background: var(--pg-colors-header-hover, var(--pg-colors-background-alt, #f1f5f9));
|
|
103
|
+
}
|
|
104
|
+
.pg-cell--serial-select:focus-visible {
|
|
105
|
+
outline: none;
|
|
106
|
+
box-shadow: inset 0 0 0 2px var(--pg-colors-primary, #2563eb);
|
|
107
|
+
}
|
|
93
108
|
.pg-cell--bool-true { color: var(--pg-colors-success, #16a34a); }
|
|
94
109
|
.pg-cell--bool-false { color: var(--pg-colors-text-disabled, #94a3b8); }
|
|
95
110
|
.pg-cell__image { border-radius: var(--pg-borders-radius-sm, 4px); object-fit: cover; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context-menu.css.js","sourceRoot":"","sources":["../../../src/styles/base/context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG
|
|
1
|
+
{"version":3,"file":"context-menu.css.js","sourceRoot":"","sources":["../../../src/styles/base/context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqH7B,CAAC"}
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
* base-styles.ts; edit here, not there. Order is preserved because CSS
|
|
6
6
|
* cascade depends on it.
|
|
7
7
|
*/
|
|
8
|
-
export declare const filterCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-drag-preview {\n position: fixed;\n pointer-events: none;\n z-index: 99999;\n display: flex;\n align-items: center;\n gap: var(--pg-drag-preview-gap, 8px);\n padding: var(--pg-drag-preview-padding, 6px 12px);\n border-radius: var(--pg-borders-radius-md, 6px);\n box-shadow: var(--pg-shadows-drag-preview, 0 4px 16px rgba(0,0,0,0.18));\n font-size: var(--pg-typography-font-size-md, 13px);\n font-weight: var(--pg-typography-font-weight-medium, 500);\n white-space: nowrap;\n will-change: transform;\n background: var(--pg-colors-drag-preview-background, var(--pg-drag-preview-bg, #fff));\n border: 1px solid var(--pg-colors-drag-preview-border, var(--pg-drag-preview-border, #e0e0e0));\n color: var(--pg-colors-text-primary, var(--pg-text-primary, #222));\n top: 0;\n left: 0;\n transform: translate(-9999px, -9999px);\n}\n.pg-drag-preview__avatar {\n width: var(--pg-drag-preview-avatar-size, 24px);\n height: var(--pg-drag-preview-avatar-size, 24px);\n background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n overflow: hidden;\n flex-shrink: 0;\n}\n.pg-drag-preview__avatar--circle { border-radius: 50%; }\n.pg-drag-preview__avatar--square { border-radius: var(--pg-borders-radius-sm, 4px); }\n.pg-drag-preview__avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.pg-drag-preview__label {\n flex: 1;\n min-width: 0;\n}\n.pg-drag-preview__badge {\n background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n color: var(--pg-colors-primary-contrast, #fff);\n border-radius: var(--pg-borders-radius-pill, 999px);\n padding: 1px 7px;\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n min-width: 20px;\n text-align: center;\n}\n\n.pg-filter-cell {\n display: flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0 6px;\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-filter-cell:last-child { border-right: none; }\n.pg-filter-cell--checkbox {\n width: 44px;\n min-width: 44px;\n max-width: 44px;\n flex-shrink: 0;\n}\n.pg-filter-cell--serial {\n width: 52px;\n min-width: 52px;\n max-width: 52px;\n flex-shrink: 0;\n}\n.pg-filter-input {\n width: 100%;\n height: 24px;\n padding: 0 8px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n font-size: var(--pg-typography-font-size-sm, 12px);\n font-family: inherit;\n background: var(--pg-colors-surface, #fff);\n color: inherit;\n outline: none;\n transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-filter-panel {\n position: absolute;\n z-index: var(--pg-z-index-filter-panel, 200);\n min-width: 230px;\n max-width: 320px;\n width: max-content;\n background: var(--pg-colors-surface, #fff);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-md, 6px);\n box-shadow: var(--pg-shadows-lg, 0 8px 24px rgba(0,0,0,.12));\n overflow: hidden;\n font-size: var(--pg-typography-font-size-sm, 13px);\n color: var(--pg-colors-text-primary, #1e293b);\n user-select: none;\n}\n\n/* \u2500\u2500 Condition filter \u2500\u2500 */\n.pg-filter-cond-wrap { padding: 10px; display: flex; flex-direction: column; gap: 6px; }\n\n.pg-filter-cond__row { display: flex; flex-direction: column; gap: 4px; }\n.pg-filter-cond__row--hidden { display: none; }\n\n.pg-filter-cond__select {\n width: 100%;\n height: 30px;\n padding: 0 8px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-primary, #1e293b);\n font-size: inherit;\n font-family: inherit;\n cursor: pointer;\n outline: none;\n transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__select:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-cond__inputs { display: flex; align-items: center; gap: 4px; }\n.pg-filter-cond__inputs--hidden { display: none; }\n/* Stack inputs vertically in range (Between) mode so the panel never overflows horizontally */\n.pg-filter-cond__inputs--range { flex-direction: column; align-items: stretch; gap: 4px; }\n.pg-filter-cond__inputs--range .pg-filter-cond__range-sep {\n text-align: center;\n padding: 2px 0;\n color: var(--pg-colors-text-secondary, #64748b);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: 500;\n}\n\n.pg-filter-cond__input {\n flex: 1;\n height: 30px;\n padding: 0 8px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-primary, #1e293b);\n font-size: inherit;\n font-family: inherit;\n outline: none;\n padding: 6px;\n transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n.pg-filter-cond__input--hidden { display: none; }\n\n.pg-filter-cond__range-sep {\n flex-shrink: 0;\n font-size: var(--pg-typography-font-size-xs, 11px);\n color: var(--pg-colors-text-secondary, #475569);\n padding: 0 2px;\n}\n.pg-filter-cond__range-sep--hidden { display: none; }\n\n/* \u2500\u2500 Logic toggle row (AND / OR / None) \u2500\u2500 */\n.pg-filter-logic {\n display: flex;\n gap: 4px;\n padding: 4px 0 2px;\n}\n.pg-filter-logic--hidden { display: none; }\n\n.pg-filter-logic__btn {\n flex: 1;\n height: 26px;\n padding: 0 6px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-secondary, #475569);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n text-align: center;\n transition: background var(--pg-transitions-duration-fast, 100ms),\n color var(--pg-transitions-duration-fast, 100ms),\n border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-logic__btn:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-logic__btn--active {\n background: var(--pg-colors-primary, #2563eb);\n color: #fff;\n border-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500 Set filter (dropdown / array) \u2500\u2500 */\n.pg-filter-set { display: flex; flex-direction: column; }\n\n.pg-filter-set__search {\n padding: 8px 10px 4px;\n}\n.pg-filter-set__search-input {\n width: 100%;\n height: 30px;\n padding: 0 10px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-primary, #1e293b);\n font-size: inherit;\n font-family: inherit;\n box-sizing: border-box;\n outline: none;\n transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-set__search-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-set__divider {\n height: 1px;\n background: var(--pg-colors-border, #e2e8f0);\n margin: 2px 0;\n}\n\n/* Select All item */\n.pg-filter-set__item {\n display: flex;\n align-items: center;\n gap: 8px;\n height: 28px;\n padding: 0 10px;\n cursor: pointer;\n transition: background var(--pg-transitions-duration-fast, 100ms);\n box-sizing: border-box;\n position: absolute;\n left: 0;\n right: 0;\n}\n.pg-filter-set__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-set__item--select-all {\n position: static;\n font-weight: 500;\n color: var(--pg-colors-text-primary, #1e293b);\n}\n.pg-filter-set__item-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pg-filter-set__item-label--blank { color: var(--pg-colors-text-disabled, #94a3b8); font-style: italic; }\n\n.pg-filter-set__checkbox {\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n cursor: pointer;\n accent-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* Virtual scroll containers */\n.pg-filter-set__list {\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n scrollbar-width: thin;\n scrollbar-color: var(--pg-colors-border, #e2e8f0) transparent;\n}\n.pg-filter-set__list::-webkit-scrollbar { width: 6px; }\n.pg-filter-set__list::-webkit-scrollbar-track { background: transparent; }\n.pg-filter-set__list::-webkit-scrollbar-thumb {\n background: var(--pg-colors-border, #e2e8f0);\n border-radius: 3px;\n}\n.pg-filter-set__list-inner { position: relative; width: 100%; }\n\n/* \u2500\u2500 Panel footer \u2500\u2500 */\n.pg-filter-panel__footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 8px 10px;\n // border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n // background: var(--pg-colors-background, #f8fafc);\n}\n\n.pg-filter-panel__clear-btn {\n height: 28px;\n padding: 0 14px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-secondary, #475569);\n font-size: var(--pg-typography-font-size-sm, 12px);\n font-family: inherit;\n cursor: pointer;\n transition: background var(--pg-transitions-duration-fast, 100ms),\n border-color var(--pg-transitions-duration-fast, 100ms),\n color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-panel__clear-btn:hover {\n background: var(--pg-colors-background-alt, #f1f5f9);\n border-color: var(--pg-colors-text-secondary, #475569);\n color: var(--pg-colors-text-primary, #1e293b);\n}\n\n";
|
|
8
|
+
export declare const filterCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-drag-preview {\n position: fixed;\n pointer-events: none;\n z-index: 99999;\n display: flex;\n align-items: center;\n gap: var(--pg-drag-preview-gap, 8px);\n padding: var(--pg-drag-preview-padding, 6px 12px);\n border-radius: var(--pg-borders-radius-md, 6px);\n box-shadow: var(--pg-shadows-drag-preview, 0 4px 16px rgba(0,0,0,0.18));\n font-size: var(--pg-typography-font-size-md, 13px);\n font-weight: var(--pg-typography-font-weight-medium, 500);\n white-space: nowrap;\n will-change: transform;\n background: var(--pg-colors-drag-preview-background, var(--pg-drag-preview-bg, #fff));\n border: 1px solid var(--pg-colors-drag-preview-border, var(--pg-drag-preview-border, #e0e0e0));\n color: var(--pg-colors-text-primary, var(--pg-text-primary, #222));\n top: 0;\n left: 0;\n transform: translate(-9999px, -9999px);\n}\n.pg-drag-preview__avatar {\n width: var(--pg-drag-preview-avatar-size, 24px);\n height: var(--pg-drag-preview-avatar-size, 24px);\n background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n overflow: hidden;\n flex-shrink: 0;\n}\n.pg-drag-preview__avatar--circle { border-radius: 50%; }\n.pg-drag-preview__avatar--square { border-radius: var(--pg-borders-radius-sm, 4px); }\n.pg-drag-preview__avatar-img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.pg-drag-preview__label {\n flex: 1;\n min-width: 0;\n}\n.pg-drag-preview__badge {\n background: var(--pg-colors-primary, var(--pg-primary, #2563eb));\n color: var(--pg-colors-primary-contrast, #fff);\n border-radius: var(--pg-borders-radius-pill, 999px);\n padding: 1px 7px;\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n min-width: 20px;\n text-align: center;\n}\n\n.pg-filter-cell {\n display: flex;\n gap: 6px;\n align-items: center;\n flex-shrink: 0;\n padding: 0 6px;\n /* Column divider \u2014 themed, and gated by showVerticalBorders (removed under\n .pg-grid--no-v-borders, same as .pg-th/.pg-cell) so the filter row's\n vertical lines stay continuous with the header and body columns. */\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-filter-cell:last-child { border-right: none; }\n.pg-filter-cell--checkbox {\n width: 44px;\n min-width: 44px;\n max-width: 44px;\n flex-shrink: 0;\n}\n.pg-filter-cell--serial {\n width: 52px;\n min-width: 52px;\n max-width: 52px;\n flex-shrink: 0;\n}\n.pg-filter-input {\n /* Grow to fill the cell but yield room for the trailing filter icon. */\n flex: 1 1 auto;\n width: auto !important;\n min-width: 0 !important;\n height: 70%;\n padding: 0 8px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n font-size: var(--pg-typography-font-size-sm, 12px);\n font-family: inherit;\n background: var(--pg-colors-surface, #fff);\n color: inherit;\n outline: none;\n transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n/* Set-type columns (object / array / dropdown): read-only input that looks\n disabled and opens the checkbox filter dropdown on click. */\n.pg-filter-input--set {\n cursor: pointer;\n color: var(--pg-colors-text-secondary, #64748b);\n background: var(--pg-colors-background-alt, #f1f5f9);\n}\n.pg-filter-input--set::placeholder { color: var(--pg-colors-text-secondary, #64748b); }\n\n/* Trailing filter icon inside each filter cell \u2014 opens the filter panel. */\n.pg-filter-cell__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 22px;\n height: 22px;\n border-radius: var(--pg-borders-radius-sm, 4px);\n color: var(--pg-colors-text-secondary, #64748b);\n cursor: pointer;\n transition: background var(--pg-transitions-duration-fast, 100ms),\n color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cell__icon:hover {\n background: var(--pg-colors-background-alt, #f1f5f9);\n color: var(--pg-colors-text-primary, #1e293b);\n}\n.pg-filter-cell__icon:focus-visible {\n outline: 2px solid var(--pg-colors-border-focus, #2563eb);\n outline-offset: -1px;\n}\n.pg-filter-cell__icon svg { display: block; }\n.pg-filter-cell__icon--active { color: var(--pg-colors-primary, #2563eb); }\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Filter Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-filter-panel {\n position: absolute;\n z-index: var(--pg-z-index-filter-panel, 200);\n min-width: 230px;\n max-width: 320px;\n width: max-content;\n background: var(--pg-colors-surface, #fff);\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-md, 6px);\n box-shadow: var(--pg-shadows-lg, 0 8px 24px rgba(0,0,0,.12));\n overflow: hidden;\n font-size: var(--pg-typography-font-size-sm, 13px);\n color: var(--pg-colors-text-primary, #1e293b);\n user-select: none;\n}\n\n/* \u2500\u2500 Condition filter \u2500\u2500 */\n.pg-filter-cond-wrap { padding: 10px; display: flex; flex-direction: column; gap: 6px; }\n\n.pg-filter-cond__row { display: flex; flex-direction: column; gap: 4px; }\n.pg-filter-cond__row--hidden { display: none; }\n\n.pg-filter-cond__select {\n width: 100%;\n height: 30px;\n padding: 0 8px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-primary, #1e293b);\n font-size: inherit;\n font-family: inherit;\n cursor: pointer;\n outline: none;\n transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__select:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-cond__inputs { display: flex; align-items: center; gap: 4px; }\n.pg-filter-cond__inputs--hidden { display: none; }\n/* Stack inputs vertically in range (Between) mode so the panel never overflows horizontally */\n.pg-filter-cond__inputs--range { flex-direction: column; align-items: stretch; gap: 4px; }\n.pg-filter-cond__inputs--range .pg-filter-cond__range-sep {\n text-align: center;\n padding: 2px 0;\n color: var(--pg-colors-text-secondary, #64748b);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-weight: 500;\n}\n\n.pg-filter-cond__input {\n flex: 1;\n height: 30px;\n padding: 0 8px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-primary, #1e293b);\n font-size: inherit;\n font-family: inherit;\n outline: none;\n padding: 6px;\n transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-cond__input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n.pg-filter-cond__input--hidden { display: none; }\n\n.pg-filter-cond__range-sep {\n flex-shrink: 0;\n font-size: var(--pg-typography-font-size-xs, 11px);\n color: var(--pg-colors-text-secondary, #475569);\n padding: 0 2px;\n}\n.pg-filter-cond__range-sep--hidden { display: none; }\n\n/* \u2500\u2500 Logic toggle row (AND / OR / None) \u2500\u2500 */\n.pg-filter-logic {\n display: flex;\n gap: 4px;\n padding: 4px 0 2px;\n}\n.pg-filter-logic--hidden { display: none; }\n\n.pg-filter-logic__btn {\n flex: 1;\n height: 26px;\n padding: 0 6px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-secondary, #475569);\n font-size: var(--pg-typography-font-size-xs, 11px);\n font-family: inherit;\n font-weight: 500;\n cursor: pointer;\n text-align: center;\n transition: background var(--pg-transitions-duration-fast, 100ms),\n color var(--pg-transitions-duration-fast, 100ms),\n border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-logic__btn:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-logic__btn--active {\n background: var(--pg-colors-primary, #2563eb);\n color: #fff;\n border-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500 Set filter (dropdown / array) \u2500\u2500 */\n.pg-filter-set { display: flex; flex-direction: column; }\n\n.pg-filter-set__search {\n padding: 8px 10px 4px;\n}\n.pg-filter-set__search-input {\n width: 100%;\n height: 30px;\n padding: 0 10px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-primary, #1e293b);\n font-size: inherit;\n font-family: inherit;\n box-sizing: border-box;\n outline: none;\n transition: border-color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-set__search-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }\n\n.pg-filter-set__divider {\n height: 1px;\n background: var(--pg-colors-border, #e2e8f0);\n margin: 2px 0;\n}\n\n/* Select All item */\n.pg-filter-set__item {\n display: flex;\n align-items: center;\n gap: 8px;\n height: 28px;\n padding: 0 10px;\n cursor: pointer;\n transition: background var(--pg-transitions-duration-fast, 100ms);\n box-sizing: border-box;\n position: absolute;\n left: 0;\n right: 0;\n}\n.pg-filter-set__item:hover { background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-filter-set__item--select-all {\n position: static;\n font-weight: 500;\n color: var(--pg-colors-text-primary, #1e293b);\n}\n.pg-filter-set__item-label {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pg-filter-set__item-label--blank { color: var(--pg-colors-text-disabled, #94a3b8); font-style: italic; }\n\n.pg-filter-set__checkbox {\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n cursor: pointer;\n accent-color: var(--pg-colors-primary, #2563eb);\n}\n\n/* Virtual scroll containers */\n.pg-filter-set__list {\n overflow-y: auto;\n overflow-x: hidden;\n position: relative;\n scrollbar-width: thin;\n scrollbar-color: var(--pg-colors-border, #e2e8f0) transparent;\n}\n.pg-filter-set__list::-webkit-scrollbar { width: 6px; }\n.pg-filter-set__list::-webkit-scrollbar-track { background: transparent; }\n.pg-filter-set__list::-webkit-scrollbar-thumb {\n background: var(--pg-colors-border, #e2e8f0);\n border-radius: 3px;\n}\n.pg-filter-set__list-inner { position: relative; width: 100%; }\n\n/* \u2500\u2500 Panel footer \u2500\u2500 */\n.pg-filter-panel__footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding: 8px 10px;\n // border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n // background: var(--pg-colors-background, #f8fafc);\n}\n\n.pg-filter-panel__clear-btn {\n height: 28px;\n padding: 0 14px;\n border: 1px solid var(--pg-colors-border, #e2e8f0);\n border-radius: var(--pg-borders-radius-sm, 4px);\n background: var(--pg-colors-surface, #fff);\n color: var(--pg-colors-text-secondary, #475569);\n font-size: var(--pg-typography-font-size-sm, 12px);\n font-family: inherit;\n cursor: pointer;\n transition: background var(--pg-transitions-duration-fast, 100ms),\n border-color var(--pg-transitions-duration-fast, 100ms),\n color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-filter-panel__clear-btn:hover {\n background: var(--pg-colors-background-alt, #f1f5f9);\n border-color: var(--pg-colors-text-secondary, #475569);\n color: var(--pg-colors-text-primary, #1e293b);\n}\n\n";
|
|
9
9
|
//# sourceMappingURL=filter.css.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/filter.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"filter.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/filter.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,8vXAwVrB,CAAC"}
|
|
@@ -58,9 +58,13 @@ export const filterCss = `/* ─────────────────
|
|
|
58
58
|
|
|
59
59
|
.pg-filter-cell {
|
|
60
60
|
display: flex;
|
|
61
|
+
gap: 6px;
|
|
61
62
|
align-items: center;
|
|
62
63
|
flex-shrink: 0;
|
|
63
64
|
padding: 0 6px;
|
|
65
|
+
/* Column divider — themed, and gated by showVerticalBorders (removed under
|
|
66
|
+
.pg-grid--no-v-borders, same as .pg-th/.pg-cell) so the filter row's
|
|
67
|
+
vertical lines stay continuous with the header and body columns. */
|
|
64
68
|
border-right: 1px solid var(--pg-colors-border, #e2e8f0);
|
|
65
69
|
}
|
|
66
70
|
.pg-filter-cell:last-child { border-right: none; }
|
|
@@ -77,8 +81,11 @@ export const filterCss = `/* ─────────────────
|
|
|
77
81
|
flex-shrink: 0;
|
|
78
82
|
}
|
|
79
83
|
.pg-filter-input {
|
|
80
|
-
|
|
81
|
-
|
|
84
|
+
/* Grow to fill the cell but yield room for the trailing filter icon. */
|
|
85
|
+
flex: 1 1 auto;
|
|
86
|
+
width: auto !important;
|
|
87
|
+
min-width: 0 !important;
|
|
88
|
+
height: 70%;
|
|
82
89
|
padding: 0 8px;
|
|
83
90
|
border: 1px solid var(--pg-colors-border, #e2e8f0);
|
|
84
91
|
border-radius: var(--pg-borders-radius-sm, 4px);
|
|
@@ -91,6 +98,40 @@ export const filterCss = `/* ─────────────────
|
|
|
91
98
|
}
|
|
92
99
|
.pg-filter-input:focus { border-color: var(--pg-colors-border-focus, #2563eb); }
|
|
93
100
|
|
|
101
|
+
/* Set-type columns (object / array / dropdown): read-only input that looks
|
|
102
|
+
disabled and opens the checkbox filter dropdown on click. */
|
|
103
|
+
.pg-filter-input--set {
|
|
104
|
+
cursor: pointer;
|
|
105
|
+
color: var(--pg-colors-text-secondary, #64748b);
|
|
106
|
+
background: var(--pg-colors-background-alt, #f1f5f9);
|
|
107
|
+
}
|
|
108
|
+
.pg-filter-input--set::placeholder { color: var(--pg-colors-text-secondary, #64748b); }
|
|
109
|
+
|
|
110
|
+
/* Trailing filter icon inside each filter cell — opens the filter panel. */
|
|
111
|
+
.pg-filter-cell__icon {
|
|
112
|
+
display: inline-flex;
|
|
113
|
+
align-items: center;
|
|
114
|
+
justify-content: center;
|
|
115
|
+
flex-shrink: 0;
|
|
116
|
+
width: 22px;
|
|
117
|
+
height: 22px;
|
|
118
|
+
border-radius: var(--pg-borders-radius-sm, 4px);
|
|
119
|
+
color: var(--pg-colors-text-secondary, #64748b);
|
|
120
|
+
cursor: pointer;
|
|
121
|
+
transition: background var(--pg-transitions-duration-fast, 100ms),
|
|
122
|
+
color var(--pg-transitions-duration-fast, 100ms);
|
|
123
|
+
}
|
|
124
|
+
.pg-filter-cell__icon:hover {
|
|
125
|
+
background: var(--pg-colors-background-alt, #f1f5f9);
|
|
126
|
+
color: var(--pg-colors-text-primary, #1e293b);
|
|
127
|
+
}
|
|
128
|
+
.pg-filter-cell__icon:focus-visible {
|
|
129
|
+
outline: 2px solid var(--pg-colors-border-focus, #2563eb);
|
|
130
|
+
outline-offset: -1px;
|
|
131
|
+
}
|
|
132
|
+
.pg-filter-cell__icon svg { display: block; }
|
|
133
|
+
.pg-filter-cell__icon--active { color: var(--pg-colors-primary, #2563eb); }
|
|
134
|
+
|
|
94
135
|
/* ──────────────────── Filter Panel ──────────────────── */
|
|
95
136
|
.pg-filter-panel {
|
|
96
137
|
position: absolute;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter.css.js","sourceRoot":"","sources":["../../../src/styles/base/filter.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG
|
|
1
|
+
{"version":3,"file":"filter.css.js","sourceRoot":"","sources":["../../../src/styles/base/filter.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwVxB,CAAC"}
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
* base-styles.ts; edit here, not there. Order is preserved because CSS
|
|
6
6
|
* cascade depends on it.
|
|
7
7
|
*/
|
|
8
|
-
export declare const headerCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Header rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-header-row, .pg-filter-row {\n display: flex;\n align-items: stretch;\n}\n.pg-header-row { height: var(--pg-header-row-height, 44px); }\n.pg-filter-row {\n height: var(--pg-filter-row-height, 36px);\n border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n background: var(--pg-colors-filter-background, #
|
|
8
|
+
export declare const headerCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Header rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-header-row, .pg-filter-row {\n display: flex;\n align-items: stretch;\n}\n.pg-header-row { height: var(--pg-header-row-height, 44px); }\n.pg-filter-row {\n height: var(--pg-filter-row-height, 36px);\n border-top: 1px solid var(--pg-colors-border, #e2e8f0);\n /* Filter row shares the header surface so it reads as one chrome band across\n every mode/variant. A theme may still override via --pg-colors-filter-background. */\n background: var(--pg-colors-filter-background, var(--pg-colors-header-background, #f8fafc));\n}\n.pg-th {\n display: flex;\n align-items: center;\n position: relative;\n flex-shrink: 0;\n padding: 0;\n color: var(--pg-colors-header-text, #374151);\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n font-size: var(--pg-typography-font-size-sm, 12px);\n letter-spacing: var(--pg-typography-letter-spacing-wide, 0.025em);\n text-transform: uppercase;\n border-right: 1px solid var(--pg-colors-header-border, #e2e8f0);\n user-select: none;\n cursor: default;\n transition: background var(--pg-transitions-duration-fast, 100ms);\n overflow: hidden;\n min-width: var(--pg-sizing-column-min-width, 40px);\n}\n.pg-th:last-child { border-right: none; }\n.pg-th--sortable { cursor: pointer; }\n// .pg-th:hover, .pg-th.pg-th--sortable:hover { background: var(--pg-colors-header-hover, #f1f5f9); }\n// .pg-th.pg-th--sorted { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th.pg-th--sort-desc .pg-th__sort-icon { color: var(--pg-colors-primary, #2563eb); }\n.pg-th.pg-th--filter-active .pg-th__label { color: var(--pg-colors-primary, #2563eb); }\n.pg-th--checkbox {\n width: 44px;\n min-width: 44px;\n max-width: 44px;\n justify-content: center;\n flex-shrink: 0;\n}\n.pg-th--serial {\n width: 52px;\n min-width: 52px;\n max-width: 52px;\n justify-content: center;\n flex-shrink: 0;\n}\n.pg-th--auto-group {\n flex-shrink: 0;\n background: var(--pg-colors-header-background, #f8fafc);\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n font-size: var(--pg-typography-font-size-xs, 11px);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n color: var(--pg-colors-text-secondary, #64748b);\n}\n.pg-cell--auto-group-spacer {\n flex-shrink: 0;\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n background: transparent;\n}\n.pg-th__content {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n min-width: 0;\n padding: 0 10px 0 12px;\n height: 100%;\n}\n.pg-th__label {\n flex: 0 1 auto;\n min-width: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.pg-th__sort-icon { flex-shrink: 0; opacity: 0; color: var(--pg-colors-text-secondary, #475569); }\n/* Aligned column headers */\n.pg-th--align-right .pg-th__label { text-align: right; }\n.pg-th--align-center .pg-th__label { text-align: center; }\n.pg-th--align-center .pg-th__content,\n.pg-th--no-group .pg-th__content {\n justify-content: center;\n}\n.pg-th--no-group .pg-th__label {\n text-align: center;\n}\n/* Reversed header layout for numeric/currency columns: icons LEFT, text RIGHT */\n.pg-th--reverse { flex-direction: row-reverse; }\n.pg-th--reverse .pg-th__content { flex-direction: row-reverse; padding: 0 12px 0 10px; }\n.pg-th--reverse .pg-th__label { flex: 1 1 auto; }\n.pg-th--reverse .pg-th__filter-btn { margin-right: 0; margin-left: 2px; }\n.pg-th--reverse .pg-th__menu-btn { margin-right: 0; margin-left: 4px; }\n.pg-th--sort-asc .pg-th__sort-icon,\n.pg-th--sort-desc .pg-th__sort-icon { opacity: 1; color: var(--pg-colors-primary, #2563eb); }\n/* \u2500\u2500\u2500 Column header filter button \u2500\u2500\u2500 */\n.pg-th__filter-btn {\n flex-shrink: 0;\n display: none;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n padding: 4px;\n margin-right: 2px;\n border-radius: var(--pg-borders-radius-sm, 4px);\n color: var(--pg-colors-text-secondary, #475569);\n opacity: 0.7;\n transition: opacity var(--pg-transitions-duration-fast, 100ms),\n color var(--pg-transitions-duration-fast, 100ms),\n background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__filter-btn,\n.pg-th__filter-btn--active { display: flex; }\n/* Always-visible mode \u2014 opt in via headerIcons.filter / ColumnDef.filterIconDisplay */\n.pg-th__filter-btn--always { display: flex; }\n.pg-th__filter-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__filter-btn--active {\n opacity: 1;\n color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__filter-icon { flex-shrink: 0; color: var(--pg-colors-primary, #2563eb); }\n.pg-th__menu-btn {\n flex-shrink: 0;\n display: none;\n cursor: pointer;\n padding: 6px;\n margin-right: 4px;\n border-radius: var(--pg-borders-radius-sm, 4px);\n color: var(--pg-colors-text-secondary, #475569);\n opacity: 0.6;\n transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th:hover .pg-th__menu-btn,\n.pg-th__menu-btn--active { display: flex; }\n/* Always-visible mode \u2014 opt in via headerIcons.menu / ColumnDef.menuIconDisplay */\n.pg-th__menu-btn--always { display: flex; }\n.pg-th__menu-btn:hover { opacity: 1; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th__menu-btn--active { opacity: 1; background: var(--pg-colors-border, #e2e8f0); }\n.pg-th__resize-handle {\n position: absolute;\n right: -1px;\n top: 0;\n width: 6px;\n height: 50%;\n top: 25%;\n cursor: ew-resize;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--pg-colors-resize-handle-color, #d9d9db);\n background: transparent;\n transition: background var(--pg-transitions-duration-fast, 100ms);\n z-index: 5;\n font-size: 10px;\n user-select: none;\n background: #d6d6d6;\n width: 2px;\n}\n/* Right-pinned columns anchor their right edge to the grid border, so the\n resize handle lives on the inner (left) edge \u2014 the edge free to move. */\n.pg-th--pinned-right .pg-th__resize-handle {\n right: auto;\n left: -1px;\n}\n.pg-th__resize-handle:hover,\n.pg-th.pg-resizing .pg-th__resize-handle,\n.pg-th--resizing .pg-th__resize-handle {\n // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n\n/* No vertical-borders mode: completely remove the 1px border slot from both headers and cells */\n.pg-grid--no-v-borders .pg-th { border-right: none; }\n.pg-grid--no-v-borders .pg-filter-cell { border-right: none; }\n.pg-grid--no-v-borders .pg-cell { border-right: none; }\n// .pg-grid--no-v-borders .pg-th__resize-handle {\n// background: var(--pg-colors-resize-handle-color, #e2e8f0);\n// }\n.pg-grid--no-v-borders .pg-th__resize-handle:hover,\n.pg-grid--no-v-borders .pg-th.pg-resizing .pg-th__resize-handle,\n.pg-grid--no-v-borders .pg-th--resizing .pg-th__resize-handle {\n // background: var(--pg-colors-resize-handle-active-color, #2563eb);\n}\n.pg-th__drag-handle {\n position: absolute;\n left: 2px;\n top: 50%;\n transform: translateY(-50%);\n display: none;\n align-items: center;\n justify-content: center;\n width: 16px;\n height: 24px;\n cursor: grab;\n color: var(--pg-colors-text-secondary, #475569);\n z-index: 2;\n border-radius: 3px;\n}\n.pg-th:hover .pg-th__drag-handle { display: flex; opacity: 0.5; }\n.pg-th__drag-handle:hover { opacity: 1 !important; background: var(--pg-colors-background-alt, #f1f5f9); }\n.pg-th--dragging { opacity: 0.72; cursor: grabbing !important; }\n.pg-th__serial-label { font-size: 11px; opacity: 0.45; }\n.pg-header-checkbox { cursor: pointer; width: 16px; height: 16px; }\n\n/* Inline column-header rename input (column menu \u2192 Rename). */\n.pg-th__rename-input {\n flex: 1 1 auto;\n min-width: 0;\n width: 100%;\n box-sizing: border-box;\n padding: 2px 6px;\n margin: 0 4px;\n font-family: inherit;\n font-size: inherit;\n font-weight: inherit;\n color: var(--pg-colors-text-primary, #0f172a);\n background: var(--pg-colors-background, #ffffff);\n border: 1px solid var(--pg-colors-primary, #2563eb);\n border-radius: var(--pg-borders-radius-sm, 4px);\n outline: none;\n box-shadow: 0 0 0 2px var(--pg-colors-primary-soft, rgba(37, 99, 235, 0.16));\n}\n\n";
|
|
9
9
|
//# sourceMappingURL=header.css.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,
|
|
1
|
+
{"version":3,"file":"header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,SAAS,s5QAqOrB,CAAC"}
|
|
@@ -14,7 +14,9 @@ export const headerCss = `/* ─────────────────
|
|
|
14
14
|
.pg-filter-row {
|
|
15
15
|
height: var(--pg-filter-row-height, 36px);
|
|
16
16
|
border-top: 1px solid var(--pg-colors-border, #e2e8f0);
|
|
17
|
-
|
|
17
|
+
/* Filter row shares the header surface so it reads as one chrome band across
|
|
18
|
+
every mode/variant. A theme may still override via --pg-colors-filter-background. */
|
|
19
|
+
background: var(--pg-colors-filter-background, var(--pg-colors-header-background, #f8fafc));
|
|
18
20
|
}
|
|
19
21
|
.pg-th {
|
|
20
22
|
display: flex;
|
|
@@ -182,6 +184,7 @@ export const headerCss = `/* ─────────────────
|
|
|
182
184
|
|
|
183
185
|
/* No vertical-borders mode: completely remove the 1px border slot from both headers and cells */
|
|
184
186
|
.pg-grid--no-v-borders .pg-th { border-right: none; }
|
|
187
|
+
.pg-grid--no-v-borders .pg-filter-cell { border-right: none; }
|
|
185
188
|
.pg-grid--no-v-borders .pg-cell { border-right: none; }
|
|
186
189
|
// .pg-grid--no-v-borders .pg-th__resize-handle {
|
|
187
190
|
// background: var(--pg-colors-resize-handle-color, #e2e8f0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.css.js","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG
|
|
1
|
+
{"version":3,"file":"header.css.js","sourceRoot":"","sources":["../../../src/styles/base/header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqOxB,CAAC"}
|
|
@@ -5,5 +5,5 @@
|
|
|
5
5
|
* base-styles.ts; edit here, not there. Order is preserved because CSS
|
|
6
6
|
* cascade depends on it.
|
|
7
7
|
*/
|
|
8
|
-
export declare const rowsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-row {\n display: flex;\n align-items: stretch;\n position: absolute;\n left: 0;\n width: 100%;\n border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n background: var(--pg-colors-row-background, #fff);\n transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-row--hover { background: var(--pg-colors-row-hover, #f0f7ff) !important; }\n.pg-row--alt { background: var(--pg-colors-row-background-alt, #f8fafc); }\n.pg-row--selected {\n background: var(--pg-colors-row-selected, #eff6ff) !important;\n outline: none;\n}\n.pg-row--selected .pg-cell { color: inherit; }\n.pg-row--group {\n background: var(--pg-colors-group-row-background, #f8fafc);\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n // border-left: var(--pg-group-row-border-width, 3px) solid var(--pg-colors-primary, #2563eb);\n cursor: pointer;\n}\n.pg-row--group:hover,\n.pg-row--group.pg-row--hover {\n background: var(--pg-colors-group-row-hover, var(--pg-colors-row-hover, #eff2ff)) !important;\n}\n.pg-row--group:hover .pg-row-group__toggle,\n.pg-row--group.pg-row--hover .pg-row-group__toggle {\n background: var(--pg-colors-group-toggle-hover, rgba(37, 99, 235, 0.1));\n color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group footer row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/*\n * Appears below the last leaf child of each expanded group.\n * Shows the same aggregate values as the group header row (AG Grid groupIncludeFooter).\n * Cells are fully selectable and copyable; editing is blocked because values are computed.\n */\n.pg-row--group-footer {\n background: var(--pg-colors-group-footer-background, var(--pg-colors-background-alt, #eef2fa));\n font-style: italic;\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n border-bottom: 2px solid var(--pg-colors-primary-light, var(--pg-colors-border-strong, #bfdbfe));\n cursor: default;\n}\n.pg-row--group-footer:hover,\n.pg-row--group-footer.pg-row--hover {\n background: var(--pg-colors-group-footer-hover, var(--pg-colors-row-hover, #e0e9f8)) !important;\n}\n/* Level-based indentation mirrors the group header rules */\n.pg-row--group-footer[data-level=\"0\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-0, 8px); }\n.pg-row--group-footer[data-level=\"1\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-1, 28px); }\n.pg-row--group-footer[data-level=\"2\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-2, 48px); }\n.pg-row--group-footer[data-level=\"3\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-3, 68px); }\n.pg-row--group-footer[data-level=\"4\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-4, 88px); }\n.pg-row--group-footer[data-level=\"5\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-5, 108px); }\n.pg-row--group-footer .pg-row-group__label {\n color: var(--pg-colors-text-secondary, #475569);\n}\n\n";
|
|
8
|
+
export declare const rowsCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Rows \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-row {\n display: flex;\n align-items: stretch;\n position: absolute;\n left: 0;\n width: 100%;\n border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n background: var(--pg-colors-row-background, #fff);\n transition: background var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-row--hover { background: var(--pg-colors-row-hover, #f0f7ff) !important; }\n.pg-row--alt { background: var(--pg-colors-row-background-alt, #f8fafc); }\n.pg-row--selected {\n background: var(--pg-colors-row-selected, #eff6ff) !important;\n outline: none;\n}\n.pg-row--selected .pg-cell { color: inherit; }\n\n/* Row-selection outline \u2014 a thin primary-coloured border drawn around the\n whole selected block, mirroring the cell-range selection border. Edges are\n drawn via ::after so corners connect cleanly; JS (BodyRenderer.refreshRow-\n SelectionEdges) adds the edge classes only on the block's outer rows/parts\n (top of a run, bottom of a run, leftmost part, rightmost part) so interior\n boundaries between adjacent selected rows carry no line. */\n.pg-row--selected::after {\n content: '';\n position: absolute;\n inset: 0;\n border: 0 solid var(--pg-colors-primary, #2563eb);\n pointer-events: none;\n z-index: 3;\n}\n.pg-row--sel-top::after { border-top-width: 1px; }\n.pg-row--sel-bottom::after { border-bottom-width: 1px; }\n.pg-row--sel-edge-left::after { border-left-width: 1px; }\n.pg-row--sel-edge-right::after { border-right-width: 1px; }\n.pg-row--group {\n background: var(--pg-colors-group-row-background, #f8fafc);\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n // border-left: var(--pg-group-row-border-width, 3px) solid var(--pg-colors-primary, #2563eb);\n cursor: pointer;\n}\n.pg-row--group:hover,\n.pg-row--group.pg-row--hover {\n background: var(--pg-colors-group-row-hover, var(--pg-colors-row-hover, #eff2ff)) !important;\n}\n.pg-row--group:hover .pg-row-group__toggle,\n.pg-row--group.pg-row--hover .pg-row-group__toggle {\n background: var(--pg-colors-group-toggle-hover, rgba(37, 99, 235, 0.1));\n color: var(--pg-colors-primary, #2563eb);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Group footer row \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n/*\n * Appears below the last leaf child of each expanded group.\n * Shows the same aggregate values as the group header row (AG Grid groupIncludeFooter).\n * Cells are fully selectable and copyable; editing is blocked because values are computed.\n */\n.pg-row--group-footer {\n background: var(--pg-colors-group-footer-background, var(--pg-colors-background-alt, #eef2fa));\n font-style: italic;\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n border-bottom: 2px solid var(--pg-colors-primary-light, var(--pg-colors-border-strong, #bfdbfe));\n cursor: default;\n}\n.pg-row--group-footer:hover,\n.pg-row--group-footer.pg-row--hover {\n background: var(--pg-colors-group-footer-hover, var(--pg-colors-row-hover, #e0e9f8)) !important;\n}\n/* Level-based indentation mirrors the group header rules */\n.pg-row--group-footer[data-level=\"0\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-0, 8px); }\n.pg-row--group-footer[data-level=\"1\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-1, 28px); }\n.pg-row--group-footer[data-level=\"2\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-2, 48px); }\n.pg-row--group-footer[data-level=\"3\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-3, 68px); }\n.pg-row--group-footer[data-level=\"4\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-4, 88px); }\n.pg-row--group-footer[data-level=\"5\"] .pg-row-group__cell { padding-left: var(--pg-group-indent-5, 108px); }\n.pg-row--group-footer .pg-row-group__label {\n color: var(--pg-colors-text-secondary, #475569);\n}\n\n";
|
|
9
9
|
//# sourceMappingURL=rows.css.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rows.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"rows.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,OAAO,mqIAiFnB,CAAC"}
|
package/styles/base/rows.css.js
CHANGED
|
@@ -23,6 +23,25 @@ export const rowsCss = `/* ─────────────────
|
|
|
23
23
|
outline: none;
|
|
24
24
|
}
|
|
25
25
|
.pg-row--selected .pg-cell { color: inherit; }
|
|
26
|
+
|
|
27
|
+
/* Row-selection outline — a thin primary-coloured border drawn around the
|
|
28
|
+
whole selected block, mirroring the cell-range selection border. Edges are
|
|
29
|
+
drawn via ::after so corners connect cleanly; JS (BodyRenderer.refreshRow-
|
|
30
|
+
SelectionEdges) adds the edge classes only on the block's outer rows/parts
|
|
31
|
+
(top of a run, bottom of a run, leftmost part, rightmost part) so interior
|
|
32
|
+
boundaries between adjacent selected rows carry no line. */
|
|
33
|
+
.pg-row--selected::after {
|
|
34
|
+
content: '';
|
|
35
|
+
position: absolute;
|
|
36
|
+
inset: 0;
|
|
37
|
+
border: 0 solid var(--pg-colors-primary, #2563eb);
|
|
38
|
+
pointer-events: none;
|
|
39
|
+
z-index: 3;
|
|
40
|
+
}
|
|
41
|
+
.pg-row--sel-top::after { border-top-width: 1px; }
|
|
42
|
+
.pg-row--sel-bottom::after { border-bottom-width: 1px; }
|
|
43
|
+
.pg-row--sel-edge-left::after { border-left-width: 1px; }
|
|
44
|
+
.pg-row--sel-edge-right::after { border-right-width: 1px; }
|
|
26
45
|
.pg-row--group {
|
|
27
46
|
background: var(--pg-colors-group-row-background, #f8fafc);
|
|
28
47
|
font-weight: var(--pg-typography-font-weight-semi-bold, 600);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"rows.css.js","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG
|
|
1
|
+
{"version":3,"file":"rows.css.js","sourceRoot":"","sources":["../../../src/styles/base/rows.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFtB,CAAC"}
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
* mode tokens so it works in both light and dark. See {@link themeQuartzCss}
|
|
7
7
|
* for the shared design rationale.
|
|
8
8
|
*/
|
|
9
|
-
export declare const themeAlpineCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-alpine-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-alpine-theme .pg-grid {\n --pg-colors-primary: #16a34a;\n\n --pg-typography-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n --pg-typography-font-size-md: 0.8rem;\n --pg-typography-font-size-sm: 12px;\n --pg-typography-font-size-xs: 11px;\n --pg-typography-font-weight-medium: 400;\n --pg-typography-font-weight-semi-bold: 600;\n --pg-typography-letter-spacing-wide: 0em;\n\n --pg-header-row-height: 42px;\n --pg-row-height: 40px;\n\n --pg-borders-radius-md: 4px;\n --pg-borders-radius-sm: 2px;\n --pg-borders-radius-pill: 9999px;\n --pg-sizing-checkbox-size: 15px;\n\n --pg-transitions-duration-fast: 100ms;\n}\n\n/* Alpine header \u2014 no uppercase, clean weight; color follows the mode. */\n.pg-alpine-theme .pg-th {\n text-transform: none;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0em;\n color: var(--pg-colors-header-text);\n}\n.pg-alpine-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }\n\n/* Alpine rows \u2014 thin full-width divider */\n.pg-alpine-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Alpine icon tones \u2014 mode-aware */\n.pg-alpine-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-alpine-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Alpine checkbox \u2014 15px, 2px-radius, slim accent outline \u2192 fill */\n.pg-alpine-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: 15px;\n height: 15px;\n border: 1.5px solid var(--pg-colors-checkbox-border);\n border-radius: 2px;\n background: var(--pg-colors-checkbox-background);\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition: background 100ms linear, border-color 100ms linear;\n}\n.pg-alpine-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--pg-colors-primary) 30%, transparent);\n}\n.pg-alpine-theme .pg-checkbox:checked {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-alpine-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 3px;\n top: 1px;\n width: 5px;\n height: 8px;\n border: 1.5px solid var(--pg-colors-primary-text);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 50%;\n width: 7px;\n height: 1.5px;\n background: var(--pg-colors-primary-text);\n transform: translateY(-50%);\n}\n\n/* Alpine selection \u2014 clean accent left bar */\n.pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 var(--pg-colors-primary); }\n\n/* Alpine row-drag animation \u2014 snappy, fast linear */\n.pg-alpine-theme .pg-grid--row-dragging .pg-row {\n transition: background 100ms linear, top 100ms ease-out;\n}\n";
|
|
9
|
+
export declare const themeAlpineCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-alpine-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-alpine-theme .pg-grid {\n --pg-colors-primary: #16a34a;\n\n --pg-typography-font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;\n --pg-typography-font-size-md: 0.8rem;\n --pg-typography-font-size-sm: 12px;\n --pg-typography-font-size-xs: 11px;\n --pg-typography-font-weight-medium: 400;\n --pg-typography-font-weight-semi-bold: 600;\n --pg-typography-letter-spacing-wide: 0em;\n\n --pg-header-row-height: 42px;\n --pg-row-height: 40px;\n\n --pg-borders-radius-md: 4px;\n --pg-borders-radius-sm: 2px;\n --pg-borders-radius-pill: 9999px;\n --pg-sizing-checkbox-size: 15px;\n\n --pg-transitions-duration-fast: 100ms;\n}\n\n/* Alpine header \u2014 no uppercase, clean weight; color follows the mode. */\n.pg-alpine-theme .pg-th {\n text-transform: none;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0em;\n color: var(--pg-colors-header-text);\n}\n.pg-alpine-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }\n\n/* Alpine rows \u2014 thin full-width divider */\n.pg-alpine-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Alpine icon tones \u2014 mode-aware */\n.pg-alpine-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-alpine-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Alpine checkbox \u2014 15px, 2px-radius, slim accent outline \u2192 fill */\n.pg-alpine-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: 15px;\n height: 15px;\n border: 1.5px solid var(--pg-colors-checkbox-border);\n border-radius: 2px;\n background: var(--pg-colors-checkbox-background);\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition: background 100ms linear, border-color 100ms linear;\n}\n.pg-alpine-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-alpine-theme .pg-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--pg-colors-primary) 30%, transparent);\n}\n.pg-alpine-theme .pg-checkbox:checked {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-alpine-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 3px;\n top: 1px;\n width: 5px;\n height: 8px;\n border: 1.5px solid var(--pg-colors-primary-text);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-alpine-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 50%;\n width: 7px;\n height: 1.5px;\n background: var(--pg-colors-primary-text);\n transform: translateY(-50%);\n}\n\n/* Alpine selection \u2014 clean accent left bar */\n// .pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 var(--pg-colors-primary); }\n\n/* Alpine row-drag animation \u2014 snappy, fast linear */\n.pg-alpine-theme .pg-grid--row-dragging .pg-row {\n transition: background 100ms linear, top 100ms ease-out;\n}\n";
|
|
10
10
|
//# sourceMappingURL=theme-alpine.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-alpine.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"theme-alpine.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-alpine.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,45GAqG1B,CAAC"}
|
|
@@ -101,7 +101,7 @@ export const themeAlpineCss = `
|
|
|
101
101
|
}
|
|
102
102
|
|
|
103
103
|
/* Alpine selection — clean accent left bar */
|
|
104
|
-
.pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 var(--pg-colors-primary); }
|
|
104
|
+
// .pg-alpine-theme .pg-row--selected { box-shadow: inset 2px 0 0 var(--pg-colors-primary); }
|
|
105
105
|
|
|
106
106
|
/* Alpine row-drag animation — snappy, fast linear */
|
|
107
107
|
.pg-alpine-theme .pg-grid--row-dragging .pg-row {
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
* mode tokens so it works in both light and dark. See {@link themeQuartzCss}
|
|
7
7
|
* for the shared design rationale.
|
|
8
8
|
*/
|
|
9
|
-
export declare const themeBalhamCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-balham-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-balham-theme .pg-grid {\n --pg-colors-primary: #d97706;\n\n --pg-typography-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n --pg-typography-font-size-sm: 11px;\n --pg-typography-font-size-xs: 10px;\n --pg-typography-font-weight-medium: 400;\n --pg-typography-font-weight-semi-bold: 600;\n --pg-typography-letter-spacing-wide: 0.04em;\n\n --pg-header-row-height: 36px;\n --pg-row-height: 32px;\n\n --pg-borders-radius-md: 2px;\n --pg-borders-radius-sm: 0px;\n --pg-borders-radius-pill: 2px;\n --pg-sizing-checkbox-size: 14px;\n\n --pg-transitions-duration-fast: 80ms;\n}\n\n/* Balham header \u2014 dense, uppercase, pronounced border; color follows the mode. */\n.pg-balham-theme .pg-th {\n text-transform: uppercase;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.06em;\n color: var(--pg-colors-header-text);\n}\n.pg-balham-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }\n\n/* Balham rows \u2014 full row border, classic spreadsheet look */\n.pg-balham-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Balham icon tones \u2014 mode-aware */\n.pg-balham-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-balham-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Balham checkbox \u2014 14px, square (0 radius), flat accent fill */\n.pg-balham-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: 14px;\n height: 14px;\n border: 1px solid var(--pg-colors-checkbox-border);\n border-radius: 0px;\n background: var(--pg-colors-checkbox-background);\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition: background 80ms linear, border-color 80ms linear;\n}\n.pg-balham-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-checkbox:focus-visible {\n outline: 1px solid var(--pg-colors-primary);\n outline-offset: 1px;\n}\n.pg-balham-theme .pg-checkbox:checked {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-balham-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 3px;\n top: 1px;\n width: 5px;\n height: 8px;\n border: 2px solid var(--pg-colors-primary-text);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-balham-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-balham-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 50%;\n width: 8px;\n height: 2px;\n background: var(--pg-colors-primary-text);\n transform: translateY(-50%);\n}\n\n/* Balham selection \u2014 amber left accent bar */\n.pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }\n\n/* Balham row-drag \u2014 very fast, minimal */\n.pg-balham-theme .pg-grid--row-dragging .pg-row {\n transition: background 80ms linear, top 80ms linear;\n}\n";
|
|
9
|
+
export declare const themeBalhamCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-balham-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-balham-theme .pg-grid {\n --pg-colors-primary: #d97706;\n\n --pg-typography-font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;\n --pg-typography-font-size-sm: 11px;\n --pg-typography-font-size-xs: 10px;\n --pg-typography-font-weight-medium: 400;\n --pg-typography-font-weight-semi-bold: 600;\n --pg-typography-letter-spacing-wide: 0.04em;\n\n --pg-header-row-height: 36px;\n --pg-row-height: 32px;\n\n --pg-borders-radius-md: 2px;\n --pg-borders-radius-sm: 0px;\n --pg-borders-radius-pill: 2px;\n --pg-sizing-checkbox-size: 14px;\n\n --pg-transitions-duration-fast: 80ms;\n}\n\n/* Balham header \u2014 dense, uppercase, pronounced border; color follows the mode. */\n.pg-balham-theme .pg-th {\n text-transform: uppercase;\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.06em;\n color: var(--pg-colors-header-text);\n}\n.pg-balham-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-grid__header { border-bottom: 2px solid var(--pg-colors-header-border); }\n\n/* Balham rows \u2014 full row border, classic spreadsheet look */\n.pg-balham-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Balham icon tones \u2014 mode-aware */\n.pg-balham-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-balham-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Balham checkbox \u2014 14px, square (0 radius), flat accent fill */\n.pg-balham-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: 14px;\n height: 14px;\n border: 1px solid var(--pg-colors-checkbox-border);\n border-radius: 0px;\n background: var(--pg-colors-checkbox-background);\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition: background 80ms linear, border-color 80ms linear;\n}\n.pg-balham-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-balham-theme .pg-checkbox:focus-visible {\n outline: 1px solid var(--pg-colors-primary);\n outline-offset: 1px;\n}\n.pg-balham-theme .pg-checkbox:checked {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-balham-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 3px;\n top: 1px;\n width: 5px;\n height: 8px;\n border: 2px solid var(--pg-colors-primary-text);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-balham-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-balham-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 50%;\n width: 8px;\n height: 2px;\n background: var(--pg-colors-primary-text);\n transform: translateY(-50%);\n}\n\n/* Balham selection \u2014 amber left accent bar */\n// .pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }\n\n/* Balham row-drag \u2014 very fast, minimal */\n.pg-balham-theme .pg-grid--row-dragging .pg-row {\n transition: background 80ms linear, top 80ms linear;\n}\n";
|
|
10
10
|
//# sourceMappingURL=theme-balham.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-balham.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc
|
|
1
|
+
{"version":3,"file":"theme-balham.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-balham.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,cAAc,k0GAoG1B,CAAC"}
|
|
@@ -100,7 +100,7 @@ export const themeBalhamCss = `
|
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
/* Balham selection — amber left accent bar */
|
|
103
|
-
.pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }
|
|
103
|
+
// .pg-balham-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }
|
|
104
104
|
|
|
105
105
|
/* Balham row-drag — very fast, minimal */
|
|
106
106
|
.pg-balham-theme .pg-grid--row-dragging .pg-row {
|
|
@@ -6,5 +6,5 @@
|
|
|
6
6
|
* from the mode tokens so it works in both light and dark. See
|
|
7
7
|
* {@link themeQuartzCss} for the shared design rationale.
|
|
8
8
|
*/
|
|
9
|
-
export declare const themeMaterialCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-material-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-material-theme .pg-grid {\n /* Material uses elevation instead of a hard border. */\n border-radius: 4px;\n border-color: transparent;\n box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n\n --pg-colors-primary: #1976d2;\n\n --pg-typography-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;\n --pg-typography-font-size-sm: 12px;\n --pg-typography-font-size-xs: 11px;\n --pg-typography-font-weight-medium: 400;\n --pg-typography-font-weight-semi-bold: 500;\n --pg-typography-letter-spacing-wide: 0.04em;\n\n --pg-header-row-height: 56px;\n --pg-row-height: 52px;\n\n --pg-borders-radius-md: 4px;\n --pg-borders-radius-sm: 2px;\n --pg-borders-radius-pill: 4px;\n --pg-sizing-checkbox-size: 18px;\n\n --pg-transitions-duration-fast: 200ms;\n}\n\n/* Material header \u2014 no uppercase, medium weight; color follows the mode. */\n.pg-material-theme .pg-th {\n text-transform: none;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.04em;\n color: var(--pg-colors-header-text);\n}\n.pg-material-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-material-theme .pg-grid__header { border-bottom: 1px solid var(--pg-colors-header-border); }\n\n/* Material rows \u2014 thin divider lines */\n.pg-material-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n.pg-material-theme .pg-cell--v-border { border-right-color: var(--pg-colors-border); }\n\n/* Material filter row */\n.pg-material-theme .pg-filter-row { border-top-color: var(--pg-colors-border); }\n\n/* Material icon tones \u2014 mode-aware */\n.pg-material-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-material-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-material-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Material checkbox \u2014 18px, 2px radius, accent, Material motion + ripple */\n.pg-material-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border: 2px solid var(--pg-colors-checkbox-border);\n border-radius: 2px;\n background: transparent;\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n border-color 200ms cubic-bezier(0.4,0,0.2,1),\n box-shadow 200ms cubic-bezier(0.4,0,0.2,1);\n}\n.pg-material-theme .pg-checkbox:hover {\n border-color: var(--pg-colors-primary);\n box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 10%, transparent);\n}\n.pg-material-theme .pg-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 20%, transparent);\n}\n.pg-material-theme .pg-checkbox:checked {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-material-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 4px;\n top: 1px;\n width: 7px;\n height: 11px;\n border: 2px solid var(--pg-colors-primary-text);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-material-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-material-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 50%;\n width: 10px;\n height: 2px;\n background: var(--pg-colors-primary-text);\n transform: translateY(-50%);\n}\n\n/* Material selection \u2014 no left bar, full-row tint only */\n.pg-material-theme .pg-row--selected { box-shadow: none; }\n\n/* Material row-drag animation \u2014 Material motion curve */\n.pg-material-theme .pg-grid--row-dragging .pg-row {\n transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n top 200ms cubic-bezier(0.4,0,0.2,1);\n}\n";
|
|
9
|
+
export declare const themeMaterialCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-material-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-material-theme .pg-grid {\n /* Material uses elevation instead of a hard border. */\n border-radius: 4px;\n border-color: transparent;\n box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);\n\n --pg-colors-primary: #1976d2;\n\n --pg-typography-font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;\n --pg-typography-font-size-sm: 12px;\n --pg-typography-font-size-xs: 11px;\n --pg-typography-font-weight-medium: 400;\n --pg-typography-font-weight-semi-bold: 500;\n --pg-typography-letter-spacing-wide: 0.04em;\n\n --pg-header-row-height: 56px;\n --pg-row-height: 52px;\n\n --pg-borders-radius-md: 4px;\n --pg-borders-radius-sm: 2px;\n --pg-borders-radius-pill: 4px;\n --pg-sizing-checkbox-size: 18px;\n\n --pg-transitions-duration-fast: 200ms;\n}\n\n/* Material header \u2014 no uppercase, medium weight; color follows the mode. */\n.pg-material-theme .pg-th {\n text-transform: none;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.04em;\n color: var(--pg-colors-header-text);\n}\n.pg-material-theme .pg-th--sorted { color: var(--pg-colors-primary); }\n.pg-material-theme .pg-grid__header { border-bottom: 1px solid var(--pg-colors-header-border); }\n\n/* Material rows \u2014 thin divider lines */\n.pg-material-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n.pg-material-theme .pg-cell--v-border { border-right-color: var(--pg-colors-border); }\n\n/* Material filter row */\n.pg-material-theme .pg-filter-row { border-top-color: var(--pg-colors-border); }\n\n/* Material icon tones \u2014 mode-aware */\n.pg-material-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-material-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-material-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n\n/* Material checkbox \u2014 18px, 2px radius, accent, Material motion + ripple */\n.pg-material-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: 18px;\n height: 18px;\n border: 2px solid var(--pg-colors-checkbox-border);\n border-radius: 2px;\n background: transparent;\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n border-color 200ms cubic-bezier(0.4,0,0.2,1),\n box-shadow 200ms cubic-bezier(0.4,0,0.2,1);\n}\n.pg-material-theme .pg-checkbox:hover {\n border-color: var(--pg-colors-primary);\n box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 10%, transparent);\n}\n.pg-material-theme .pg-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 8px color-mix(in srgb, var(--pg-colors-primary) 20%, transparent);\n}\n.pg-material-theme .pg-checkbox:checked {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-material-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 4px;\n top: 1px;\n width: 7px;\n height: 11px;\n border: 2px solid var(--pg-colors-primary-text);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-material-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-material-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 50%;\n width: 10px;\n height: 2px;\n background: var(--pg-colors-primary-text);\n transform: translateY(-50%);\n}\n\n/* Material selection \u2014 no left bar, full-row tint only */\n// .pg-material-theme .pg-row--selected { box-shadow: none; }\n\n/* Material row-drag animation \u2014 Material motion curve */\n.pg-material-theme .pg-grid--row-dragging .pg-row {\n transition: background 200ms cubic-bezier(0.4,0,0.2,1),\n top 200ms cubic-bezier(0.4,0,0.2,1);\n}\n";
|
|
10
10
|
//# sourceMappingURL=theme-material.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-material.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-material.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,
|
|
1
|
+
{"version":3,"file":"theme-material.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-material.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,y/HAmH5B,CAAC"}
|
|
@@ -114,7 +114,7 @@ export const themeMaterialCss = `
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
/* Material selection — no left bar, full-row tint only */
|
|
117
|
-
.pg-material-theme .pg-row--selected { box-shadow: none; }
|
|
117
|
+
// .pg-material-theme .pg-row--selected { box-shadow: none; }
|
|
118
118
|
|
|
119
119
|
/* Material row-drag animation — Material motion curve */
|
|
120
120
|
.pg-material-theme .pg-grid--row-dragging .pg-row {
|
|
@@ -11,5 +11,5 @@
|
|
|
11
11
|
* The container carries the `.pg-quartz-theme` class; `.pg-grid` is its child,
|
|
12
12
|
* hence the descendant selectors below.
|
|
13
13
|
*/
|
|
14
|
-
export declare const themeQuartzCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-quartz-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-quartz-theme .pg-grid {\n /* Accent identity \u2014 drives sorted headers, selection, checkboxes, links. */\n --pg-colors-primary: #2563eb;\n\n /* Quartz \"chrome\" surface \u2014 the flat tint shared by every non-data surface\n (header, footer/pagination, top grouping row, scrollbars, serial-number\n column). Derived from the mode's alt background so it tints correctly in\n both light and dark; defined once here so the look changes in one place. */\n --pg-quartz-chrome-background: var(--pg-colors-background-alt);\n --pg-colors-header-background: var(--pg-quartz-chrome-background);\n --pg-colors-footer-background: var(--pg-quartz-chrome-background);\n --pg-colors-scrollbar-bg: var(--pg-quartz-chrome-background);\n --pg-colors-scrollbar-track: var(--pg-quartz-chrome-background);\n\n /* Typography identity */\n --pg-typography-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --pg-typography-font-size-md: 0.8rem;\n --pg-typography-font-size-sm: 12px;\n --pg-typography-font-size-xs: 11px;\n --pg-typography-font-weight-medium: 400;\n --pg-typography-font-weight-semi-bold: 600;\n --pg-typography-letter-spacing-wide: 0.06em;\n\n /* Density */\n --pg-header-row-height: 40px;\n --pg-row-height: 44px;\n\n /* Shape */\n --pg-borders-radius-md: 6px;\n --pg-borders-radius-sm: 4px;\n --pg-borders-radius-pill: 9999px;\n --pg-sizing-checkbox-size: 16px;\n\n /* Motion */\n --pg-transitions-duration-fast: 150ms;\n}\n\n/* Quartz header \u2014 capitalized, semi-bold; color follows the mode. */\n.pg-quartz-theme .pg-th {\n text-transform: capitalize;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0;\n color: var(--pg-colors-header-text);\n}\n\n/* Quartz row \u2014 bottom divider uses the mode border color */\n.pg-quartz-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Quartz icon tones \u2014 mode-aware */\n.pg-quartz-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-quartz-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-quartz-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n.pg-quartz-theme .pg-th--no-group { background: var(--pg-quartz-chrome-background); }\n\n/* Quartz checkbox \u2014 16px, 4px-radius square, solid accent on check */\n.pg-quartz-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n border: 2px solid var(--pg-colors-checkbox-border);\n border-radius: 4px;\n background: var(--pg-colors-checkbox-background);\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;\n}\n.pg-quartz-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-quartz-theme .pg-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-colors-primary) 25%, transparent);\n}\n.pg-quartz-theme .pg-checkbox:checked {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-quartz-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 4px;\n top: 1px;\n width: 5px;\n height: 9px;\n border: 2px solid var(--pg-colors-primary-text);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-quartz-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-quartz-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 50%;\n width: 8px;\n height: 2px;\n background: var(--pg-colors-primary-text);\n transform: translateY(-50%);\n}\n\n/* Quartz row selection highlight \u2014 accent left bar */\n.pg-quartz-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }\n\n/* Quartz row-drag animation \u2014 smooth cubic-bezier */\n.pg-quartz-theme .pg-grid--row-dragging .pg-row {\n transition: background 150ms ease, top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Quartz chrome tint \u2014 serial (row number) column \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Header, filter and body cells of the serial column share the chrome surface\n so the number gutter reads as grid chrome rather than data. (Scrollbars and\n the header/footer/grouping surfaces are driven by the tokens above.) */\n.pg-quartz-theme .pg-th--serial,\n.pg-quartz-theme .pg-filter-cell--serial,\n.pg-quartz-theme .pg-cell--serial {\n background: var(--pg-quartz-chrome-background);\n}\n";
|
|
14
|
+
export declare const themeQuartzCss = "\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 pg-quartz-theme: structural + accent tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-quartz-theme .pg-grid {\n /* Accent identity \u2014 drives sorted headers, selection, checkboxes, links. */\n --pg-colors-primary: #2563eb;\n\n /* Quartz \"chrome\" surface \u2014 the flat tint shared by every non-data surface\n (header, footer/pagination, top grouping row, scrollbars, serial-number\n column). Derived from the mode's alt background so it tints correctly in\n both light and dark; defined once here so the look changes in one place. */\n --pg-quartz-chrome-background: var(--pg-colors-background-alt);\n --pg-colors-header-background: var(--pg-quartz-chrome-background);\n --pg-colors-filter-background: var(--pg-quartz-chrome-background);\n --pg-colors-footer-background: var(--pg-quartz-chrome-background);\n --pg-colors-scrollbar-bg: var(--pg-quartz-chrome-background);\n --pg-colors-scrollbar-track: var(--pg-quartz-chrome-background);\n\n /* Typography identity */\n --pg-typography-font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --pg-typography-font-size-md: 0.8rem;\n --pg-typography-font-size-sm: 12px;\n --pg-typography-font-size-xs: 11px;\n --pg-typography-font-weight-medium: 400;\n --pg-typography-font-weight-semi-bold: 600;\n --pg-typography-letter-spacing-wide: 0.06em;\n\n /* Density */\n --pg-header-row-height: 40px;\n --pg-row-height: 44px;\n\n /* Shape */\n --pg-borders-radius-md: 6px;\n --pg-borders-radius-sm: 4px;\n --pg-borders-radius-pill: 9999px;\n --pg-sizing-checkbox-size: 16px;\n\n /* Motion */\n --pg-transitions-duration-fast: 150ms;\n}\n\n/* Quartz header \u2014 capitalized, semi-bold; color follows the mode. */\n.pg-quartz-theme .pg-th {\n text-transform: capitalize;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0;\n color: var(--pg-colors-header-text);\n}\n\n/* Quartz row \u2014 bottom divider uses the mode border color */\n.pg-quartz-theme .pg-row { border-bottom: 1px solid var(--pg-colors-border); }\n\n/* Quartz icon tones \u2014 mode-aware */\n.pg-quartz-theme .pg-icon { color: var(--pg-colors-text-secondary); }\n.pg-quartz-theme .pg-th--sorted .pg-icon { color: var(--pg-colors-primary); }\n.pg-quartz-theme .pg-row-drag-handle { color: var(--pg-colors-text-disabled); }\n.pg-quartz-theme .pg-th--no-group { background: var(--pg-quartz-chrome-background); }\n\n/* Quartz checkbox \u2014 16px, 4px-radius square, solid accent on check */\n.pg-quartz-theme .pg-checkbox {\n appearance: none;\n -webkit-appearance: none;\n width: 16px;\n height: 16px;\n border: 2px solid var(--pg-colors-checkbox-border);\n border-radius: 4px;\n background: var(--pg-colors-checkbox-background);\n cursor: pointer;\n position: relative;\n flex-shrink: 0;\n transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;\n}\n.pg-quartz-theme .pg-checkbox:hover { border-color: var(--pg-colors-primary); }\n.pg-quartz-theme .pg-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--pg-colors-primary) 25%, transparent);\n}\n.pg-quartz-theme .pg-checkbox:checked {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-quartz-theme .pg-checkbox:checked::after {\n content: '';\n position: absolute;\n left: 4px;\n top: 1px;\n width: 5px;\n height: 9px;\n border: 2px solid var(--pg-colors-primary-text);\n border-top: none;\n border-left: none;\n transform: rotate(45deg);\n}\n.pg-quartz-theme .pg-checkbox:indeterminate {\n background: var(--pg-colors-primary);\n border-color: var(--pg-colors-primary);\n}\n.pg-quartz-theme .pg-checkbox:indeterminate::after {\n content: '';\n position: absolute;\n left: 2px;\n top: 50%;\n width: 8px;\n height: 2px;\n background: var(--pg-colors-primary-text);\n transform: translateY(-50%);\n}\n\n/* Quartz row selection highlight \u2014 accent left bar */\n// .pg-quartz-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }\n\n/* Quartz row-drag animation \u2014 smooth cubic-bezier */\n.pg-quartz-theme .pg-grid--row-dragging .pg-row {\n transition: background 150ms ease, top 130ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Quartz chrome tint \u2014 serial (row number) column \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Header, filter and body cells of the serial column share the chrome surface\n so the number gutter reads as grid chrome rather than data. (Scrollbars and\n the header/footer/grouping surfaces are driven by the tokens above.) */\n.pg-quartz-theme .pg-th--serial,\n.pg-quartz-theme .pg-filter-cell--serial,\n.pg-quartz-theme .pg-cell--serial {\n background: var(--pg-quartz-chrome-background);\n}\n";
|
|
15
15
|
//# sourceMappingURL=theme-quartz.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-quartz.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-quartz.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"theme-quartz.d.ts","sourceRoot":"","sources":["../../../src/styles/themes/theme-quartz.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,y2JA8H1B,CAAC"}
|
|
@@ -24,6 +24,7 @@ export const themeQuartzCss = `
|
|
|
24
24
|
both light and dark; defined once here so the look changes in one place. */
|
|
25
25
|
--pg-quartz-chrome-background: var(--pg-colors-background-alt);
|
|
26
26
|
--pg-colors-header-background: var(--pg-quartz-chrome-background);
|
|
27
|
+
--pg-colors-filter-background: var(--pg-quartz-chrome-background);
|
|
27
28
|
--pg-colors-footer-background: var(--pg-quartz-chrome-background);
|
|
28
29
|
--pg-colors-scrollbar-bg: var(--pg-quartz-chrome-background);
|
|
29
30
|
--pg-colors-scrollbar-track: var(--pg-quartz-chrome-background);
|
|
@@ -120,7 +121,7 @@ export const themeQuartzCss = `
|
|
|
120
121
|
}
|
|
121
122
|
|
|
122
123
|
/* Quartz row selection highlight — accent left bar */
|
|
123
|
-
.pg-quartz-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }
|
|
124
|
+
// .pg-quartz-theme .pg-row--selected { box-shadow: inset 3px 0 0 var(--pg-colors-primary); }
|
|
124
125
|
|
|
125
126
|
/* Quartz row-drag animation — smooth cubic-bezier */
|
|
126
127
|
.pg-quartz-theme .pg-grid--row-dragging .pg-row {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-quartz.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-quartz.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG
|
|
1
|
+
{"version":3,"file":"theme-quartz.js","sourceRoot":"","sources":["../../../src/styles/themes/theme-quartz.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8H7B,CAAC"}
|
|
@@ -42,7 +42,7 @@ export const lightTheme = {
|
|
|
42
42
|
footerBorder: '#e2e8f0',
|
|
43
43
|
pinnedBackground: '#ffffff',
|
|
44
44
|
pinnedShadow: '4px 0 6px -2px rgba(15,23,42,0.08)',
|
|
45
|
-
filterBackground: '#
|
|
45
|
+
filterBackground: '#f8fafc',
|
|
46
46
|
filterBorder: '#e2e8f0',
|
|
47
47
|
filterActiveBackground: '#eff6ff',
|
|
48
48
|
filterActiveBorder: '#93c5fd',
|