photon-grid-core 0.0.1 → 0.0.3

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.
Files changed (142) hide show
  1. package/README.md +305 -0
  2. package/icons/icon-sets/core-icons.js +1 -1
  3. package/icons/icon-sets/core-icons.js.map +1 -1
  4. package/index.d.ts +1 -0
  5. package/index.d.ts.map +1 -1
  6. package/package.json +22 -16
  7. package/renderer/body-renderer.d.ts.map +1 -1
  8. package/renderer/body-renderer.js +21 -4
  9. package/renderer/body-renderer.js.map +1 -1
  10. package/renderer/cell-renderer.js +1 -1
  11. package/renderer/cell-renderer.js.map +1 -1
  12. package/renderer/column-menu.js +24 -25
  13. package/renderer/column-menu.js.map +1 -1
  14. package/renderer/column-style-manager.d.ts.map +1 -1
  15. package/renderer/column-style-manager.js +11 -2
  16. package/renderer/column-style-manager.js.map +1 -1
  17. package/renderer/grid-renderer.js +1 -1
  18. package/renderer/grid-renderer.js.map +1 -1
  19. package/renderer/header-renderer.d.ts.map +1 -1
  20. package/renderer/header-renderer.js +17 -3
  21. package/renderer/header-renderer.js.map +1 -1
  22. package/renderer/row-drag-renderer.d.ts +18 -0
  23. package/renderer/row-drag-renderer.d.ts.map +1 -1
  24. package/renderer/row-drag-renderer.js +53 -0
  25. package/renderer/row-drag-renderer.js.map +1 -1
  26. package/styles/base/cells.css.d.ts +9 -0
  27. package/styles/base/cells.css.d.ts.map +1 -0
  28. package/styles/base/cells.css.js +233 -0
  29. package/styles/base/cells.css.js.map +1 -0
  30. package/styles/base/chart-panel.css.d.ts +9 -0
  31. package/styles/base/chart-panel.css.d.ts.map +1 -0
  32. package/styles/base/chart-panel.css.js +140 -0
  33. package/styles/base/chart-panel.css.js.map +1 -0
  34. package/styles/base/column-context-menu.css.d.ts +9 -0
  35. package/styles/base/column-context-menu.css.d.ts.map +1 -0
  36. package/styles/base/column-context-menu.css.js +153 -0
  37. package/styles/base/column-context-menu.css.js.map +1 -0
  38. package/styles/base/column-group-header.css.d.ts +9 -0
  39. package/styles/base/column-group-header.css.d.ts.map +1 -0
  40. package/styles/base/column-group-header.css.js +270 -0
  41. package/styles/base/column-group-header.css.js.map +1 -0
  42. package/styles/base/context-menu.css.d.ts +9 -0
  43. package/styles/base/context-menu.css.d.ts.map +1 -0
  44. package/styles/base/context-menu.css.js +103 -0
  45. package/styles/base/context-menu.css.js.map +1 -0
  46. package/styles/base/editors.css.d.ts +9 -0
  47. package/styles/base/editors.css.d.ts.map +1 -0
  48. package/styles/base/editors.css.js +291 -0
  49. package/styles/base/editors.css.js.map +1 -0
  50. package/styles/base/filter.css.d.ts +9 -0
  51. package/styles/base/filter.css.d.ts.map +1 -0
  52. package/styles/base/filter.css.js +312 -0
  53. package/styles/base/filter.css.js.map +1 -0
  54. package/styles/base/footer.css.d.ts +9 -0
  55. package/styles/base/footer.css.d.ts.map +1 -0
  56. package/styles/base/footer.css.js +78 -0
  57. package/styles/base/footer.css.js.map +1 -0
  58. package/styles/base/group-bar-search.css.d.ts +9 -0
  59. package/styles/base/group-bar-search.css.d.ts.map +1 -0
  60. package/styles/base/group-bar-search.css.js +86 -0
  61. package/styles/base/group-bar-search.css.js.map +1 -0
  62. package/styles/base/group-drop-zone.css.d.ts +9 -0
  63. package/styles/base/group-drop-zone.css.d.ts.map +1 -0
  64. package/styles/base/group-drop-zone.css.js +173 -0
  65. package/styles/base/group-drop-zone.css.js.map +1 -0
  66. package/styles/base/header.css.d.ts +9 -0
  67. package/styles/base/header.css.d.ts.map +1 -0
  68. package/styles/base/header.css.js +206 -0
  69. package/styles/base/header.css.js.map +1 -0
  70. package/styles/base/master-detail.css.d.ts +9 -0
  71. package/styles/base/master-detail.css.d.ts.map +1 -0
  72. package/styles/base/master-detail.css.js +202 -0
  73. package/styles/base/master-detail.css.js.map +1 -0
  74. package/styles/base/misc.css.d.ts +9 -0
  75. package/styles/base/misc.css.d.ts.map +1 -0
  76. package/styles/base/misc.css.js +65 -0
  77. package/styles/base/misc.css.js.map +1 -0
  78. package/styles/base/panels.css.d.ts +9 -0
  79. package/styles/base/panels.css.d.ts.map +1 -0
  80. package/styles/base/panels.css.js +162 -0
  81. package/styles/base/panels.css.js.map +1 -0
  82. package/styles/base/photon-ai.css.d.ts +9 -0
  83. package/styles/base/photon-ai.css.d.ts.map +1 -0
  84. package/styles/base/photon-ai.css.js +200 -0
  85. package/styles/base/photon-ai.css.js.map +1 -0
  86. package/styles/base/root.css.d.ts +9 -0
  87. package/styles/base/root.css.d.ts.map +1 -0
  88. package/styles/base/root.css.js +56 -0
  89. package/styles/base/root.css.js.map +1 -0
  90. package/styles/base/row-drag.css.d.ts +9 -0
  91. package/styles/base/row-drag.css.d.ts.map +1 -0
  92. package/styles/base/row-drag.css.js +93 -0
  93. package/styles/base/row-drag.css.js.map +1 -0
  94. package/styles/base/row-group.css.d.ts +9 -0
  95. package/styles/base/row-group.css.d.ts.map +1 -0
  96. package/styles/base/row-group.css.js +79 -0
  97. package/styles/base/row-group.css.js.map +1 -0
  98. package/styles/base/rows.css.d.ts +9 -0
  99. package/styles/base/rows.css.d.ts.map +1 -0
  100. package/styles/base/rows.css.js +83 -0
  101. package/styles/base/rows.css.js.map +1 -0
  102. package/styles/base/scrollbars.css.d.ts +9 -0
  103. package/styles/base/scrollbars.css.d.ts.map +1 -0
  104. package/styles/base/scrollbars.css.js +56 -0
  105. package/styles/base/scrollbars.css.js.map +1 -0
  106. package/styles/base/sparkline.css.d.ts +9 -0
  107. package/styles/base/sparkline.css.d.ts.map +1 -0
  108. package/styles/base/sparkline.css.js +109 -0
  109. package/styles/base/sparkline.css.js.map +1 -0
  110. package/styles/base/tooltip.css.d.ts +9 -0
  111. package/styles/base/tooltip.css.d.ts.map +1 -0
  112. package/styles/base/tooltip.css.js +39 -0
  113. package/styles/base/tooltip.css.js.map +1 -0
  114. package/styles/base/tree.css.d.ts +9 -0
  115. package/styles/base/tree.css.d.ts.map +1 -0
  116. package/styles/base/tree.css.js +78 -0
  117. package/styles/base/tree.css.js.map +1 -0
  118. package/styles/base-styles.d.ts.map +1 -1
  119. package/styles/base-styles.js +56 -3026
  120. package/styles/base-styles.js.map +1 -1
  121. package/styles/themes/theme-alpine.d.ts +1 -1
  122. package/styles/themes/theme-alpine.d.ts.map +1 -1
  123. package/styles/themes/theme-alpine.js +1 -1
  124. package/styles/themes/theme-balham.d.ts +1 -1
  125. package/styles/themes/theme-balham.d.ts.map +1 -1
  126. package/styles/themes/theme-balham.js +0 -1
  127. package/styles/themes/theme-balham.js.map +1 -1
  128. package/styles/themes/theme-dark.d.ts +1 -1
  129. package/styles/themes/theme-dark.d.ts.map +1 -1
  130. package/styles/themes/theme-dark.js +1 -1
  131. package/styles/themes/theme-material.d.ts +1 -1
  132. package/styles/themes/theme-material.d.ts.map +1 -1
  133. package/styles/themes/theme-material.js +0 -1
  134. package/styles/themes/theme-material.js.map +1 -1
  135. package/styles/themes/theme-quartz.d.ts +1 -1
  136. package/styles/themes/theme-quartz.d.ts.map +1 -1
  137. package/styles/themes/theme-quartz.js +1 -1
  138. package/LICENSE +0 -1
  139. package/chart/chart-analyzer.d.ts +0 -12
  140. package/chart/chart-analyzer.d.ts.map +0 -1
  141. package/chart/chart-analyzer.js +0 -77
  142. package/chart/chart-analyzer.js.map +0 -1
@@ -0,0 +1,233 @@
1
+ /**
2
+ * Photon Grid base styles — cells section.
3
+ *
4
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
5
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
6
+ * cascade depends on it.
7
+ */
8
+ export const cellsCss = `/* ──────────────────── Cells ──────────────────── */
9
+ .pg-cell {
10
+ display: flex;
11
+ align-items: center;
12
+ flex-shrink: 0;
13
+ min-width: var(--pg-sizing-column-min-width, 40px);
14
+ border-right: 1px solid transparent;
15
+ padding: 0;
16
+ overflow: hidden;
17
+ position: relative;
18
+ }
19
+ .pg-cell--v-border { border-right-color: var(--pg-colors-border, #e2e8f0); }
20
+ .pg-cell:last-child { border-right: none; }
21
+ .pg-cell--align-right { justify-content: flex-end; }
22
+ .pg-cell--align-center { justify-content: center; }
23
+ .pg-cell--align-right .pg-cell__inner { text-align: right; }
24
+ .pg-cell--align-center .pg-cell__inner { text-align: center; }
25
+
26
+ /* ─── Cell selection (CSS-based, replaces canvas) ─── */
27
+ /* Suppress the browser's native focus ring — the grid uses its own blue
28
+ box-shadow indicator on .pg-cell--active-cell instead. */
29
+ .pg-cell { user-select: none; outline: none; }
30
+
31
+ /*
32
+ * Range selection — edge borders drawn via ::after so CSS border corners
33
+ * always connect cleanly (no box-shadow joining artefacts).
34
+ * The JS engine adds sel-top/right/bottom/left only on cells that sit on
35
+ * the outer edge of the range; interior cells carry no edge classes.
36
+ */
37
+ .pg-cell--in-selection {
38
+ background-color: var(--pg-colors-selection-background, aliceblue) !important;
39
+ position: relative;
40
+ z-index: 1;
41
+ }
42
+ .pg-cell--in-selection::after {
43
+ content: '';
44
+ position: absolute;
45
+ inset: 0;
46
+ border: 0 solid var(--pg-colors-primary, #2563eb);
47
+ pointer-events: none;
48
+ }
49
+ .pg-cell--sel-top::after { border-top-width: 1px; }
50
+ .pg-cell--sel-bottom::after { border-bottom-width: 1px; }
51
+ .pg-cell--sel-left::after { border-left-width: 1px; }
52
+ .pg-cell--sel-right::after { border-right-width: 1px; }
53
+
54
+ /* Active (focused) cell — solid 2px inset border, no background */
55
+ .pg-cell--active-cell {
56
+ background-color: transparent !important;
57
+ box-shadow: inset 0 0 0 2px var(--pg-colors-primary, #2563eb) !important;
58
+ position: relative;
59
+ z-index: 2;
60
+ outline: none;
61
+ }
62
+ /* Suppress the ::after edge overlay only when the active cell is NOT inside a selection */
63
+ .pg-cell--active-cell:not(.pg-cell--in-selection)::after { content: none; }
64
+
65
+ /* Active cell inside a range — selection wins entirely: no 2px border, full selection look */
66
+ .pg-cell--in-selection.pg-cell--active-cell {
67
+ background-color: var(--pg-colors-selection-background, aliceblue) !important;
68
+ box-shadow: none !important;
69
+ }
70
+
71
+ /* Dark-mode overrides */
72
+ .pg-grid[data-theme="dark"] .pg-cell--in-selection {
73
+ background-color: rgba(37,99,235,0.18) !important;
74
+ }
75
+ .pg-grid[data-theme="dark"] .pg-cell--sel-top { --_t: 2px; }
76
+ .pg-grid[data-theme="dark"] .pg-cell--sel-bottom { --_b: -2px; }
77
+ .pg-grid[data-theme="dark"] .pg-cell--sel-left { --_l: 2px; }
78
+ .pg-grid[data-theme="dark"] .pg-cell--sel-right { --_r: -2px; }
79
+ .pg-grid[data-theme="dark"] .pg-cell--active-cell {
80
+ background-color: rgba(37,99,235,0.25) !important;
81
+ box-shadow: inset 0 0 0 2px #60a5fa !important;
82
+ }
83
+ .pg-grid[data-theme="dark"] .pg-cell--in-selection.pg-cell--active-cell {
84
+ background-color: rgba(37,99,235,0.18) !important;
85
+ box-shadow:
86
+ inset 0 var(--_t) 0 0 #60a5fa,
87
+ inset 0 var(--_b) 0 0 #60a5fa,
88
+ inset var(--_l) 0 0 0 #60a5fa,
89
+ inset var(--_r) 0 0 0 #60a5fa !important;
90
+ }
91
+
92
+ /* ─── Group aggregate cells ─── */
93
+ /*
94
+ * Aggregate values are displayed inside .pg-cell--agg cells that sit directly
95
+ * under their column headers, aligned with normal data-row cells via the same
96
+ * [data-col-id] width rules managed by ColumnStyleManager.
97
+ */
98
+ .pg-cell--agg {
99
+ color: var(--pg-colors-agg-text, var(--pg-colors-text-secondary, #475569));
100
+ font-style: italic;
101
+ font-weight: var(--pg-typography-font-weight-semi-bold, 600);
102
+ }
103
+ .pg-grid[data-theme="dark"] .pg-cell--agg {
104
+ color: var(--pg-colors-agg-text, var(--pg-colors-text-secondary, #94a3b8));
105
+ }
106
+
107
+ /* ─── Copy / Cut flash feedback ─── */
108
+ /*
109
+ * background-color: !important on pg-cell--in-selection blocks keyframe bg changes.
110
+ * Use a ::after overlay instead — it's a separate layer, no !important conflict.
111
+ */
112
+ @keyframes pg-copy-flash-overlay {
113
+ 0% { opacity: 0; }
114
+ 15% { opacity: 1; }
115
+ 100% { opacity: 0; }
116
+ }
117
+ @keyframes pg-cut-flash-overlay {
118
+ 0% { opacity: 0; }
119
+ 15% { opacity: 1; }
120
+ 100% { opacity: 0; }
121
+ }
122
+ /*
123
+ * Flash overlay uses ::before so it never conflicts with the ::after
124
+ * pseudo-element that draws the selection edge borders.
125
+ */
126
+ .pg-cell--copy-flash::before,
127
+ .pg-cell--cut-flash::before {
128
+ content: '';
129
+ position: absolute;
130
+ inset: 0;
131
+ pointer-events: none;
132
+ z-index: 5;
133
+ }
134
+ .pg-cell--copy-flash::before {
135
+ background: rgba(59, 130, 246, 0.45);
136
+ animation: pg-copy-flash-overlay 0.75s ease-out forwards;
137
+ }
138
+ .pg-cell--cut-flash::before {
139
+ background: rgba(239, 68, 68, 0.45);
140
+ animation: pg-cut-flash-overlay 0.75s ease-out forwards;
141
+ }
142
+ /* Dark mode uses stronger overlay */
143
+ .pg-grid[data-theme="dark"] .pg-cell--copy-flash::before {
144
+ background: rgba(99, 165, 253, 0.5);
145
+ }
146
+ .pg-grid[data-theme="dark"] .pg-cell--cut-flash::before {
147
+ background: rgba(252, 100, 100, 0.5);
148
+ }
149
+
150
+ /* ─── Fill success flash ─── */
151
+ /*
152
+ * Applied to the newly filled cells after a fill-handle drag completes.
153
+ * Uses ::before (same as copy/cut flash) so it never conflicts with the
154
+ * selection edge border drawn on ::after.
155
+ */
156
+ @keyframes pg-fill-flash-overlay {
157
+ 0% { opacity: 0; }
158
+ 20% { opacity: 1; }
159
+ 100% { opacity: 0; }
160
+ }
161
+ .pg-cell--fill-flash::before {
162
+ content: '';
163
+ position: absolute;
164
+ inset: 0;
165
+ pointer-events: none;
166
+ z-index: 5;
167
+ background: rgba(34, 197, 94, 0.45);
168
+ animation: pg-fill-flash-overlay 0.75s ease-out forwards;
169
+ }
170
+ .pg-grid[data-theme="dark"] .pg-cell--fill-flash::before {
171
+ background: rgba(74, 222, 128, 0.5);
172
+ }
173
+
174
+ /* ─── Fill handle ─── */
175
+ /*
176
+ * The fill handle is a small drag target at the bottom-right corner of the
177
+ * primary selection range. It lives inside the corner cell as an absolutely-
178
+ * positioned child so it scrolls with the grid naturally.
179
+ *
180
+ * pg-cell--has-fill-handle lets the handle extend 4 px past the cell edge
181
+ * (standard AG Grid behaviour) by lifting overflow:hidden on that one cell.
182
+ *
183
+ * Dragging from the handle copies the source range into the dragged area in
184
+ * one direction at a time; a dashed overlay (pg-cell--fill-preview) previews
185
+ * the fill area before the mouse button is released.
186
+ */
187
+ .pg-cell--has-fill-handle {
188
+ overflow: visible !important;
189
+ }
190
+ .pg-fill-handle {
191
+ position: absolute;
192
+ right: 0px;
193
+ bottom: 0px;
194
+ width: 6px;
195
+ height: 6px;
196
+ box-sizing: border-box;
197
+ background-color: var(--pg-colors-primary, #2563eb);
198
+ cursor: crosshair;
199
+ z-index: 10;
200
+ pointer-events: auto;
201
+ user-select: none;
202
+ }
203
+
204
+ /* ─── Fill preview — dashed border on cells being hovered during fill drag ─── */
205
+ .pg-cell--fill-preview {
206
+ background-color: var(--pg-colors-selection-background, aliceblue) !important;
207
+ position: relative;
208
+ z-index: 1;
209
+ }
210
+ /*
211
+ * The fill-preview ::after uses a dashed border (vs the solid selection border)
212
+ * to clearly distinguish "about to be filled" from "already selected."
213
+ * These classes are orthogonal to sel-top/bottom/left/right — fill-preview
214
+ * cells are never pg-cell--in-selection, so there is no ::after conflict.
215
+ */
216
+ .pg-cell--fill-preview::after {
217
+ content: '';
218
+ position: absolute;
219
+ inset: 0;
220
+ border: 0 dashed var(--pg-colors-primary, #2563eb);
221
+ pointer-events: none;
222
+ }
223
+ .pg-cell--fp-top::after { border-top-width: 1px; }
224
+ .pg-cell--fp-bottom::after { border-bottom-width: 1px; }
225
+ .pg-cell--fp-left::after { border-left-width: 1px; }
226
+ .pg-cell--fp-right::after { border-right-width: 1px; }
227
+
228
+ .pg-grid[data-theme="dark"] .pg-cell--fill-preview {
229
+ background-color: rgba(37, 99, 235, 0.12) !important;
230
+ }
231
+
232
+ `;
233
+ //# sourceMappingURL=cells.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"cells.css.js","sourceRoot":"","sources":["../../../src/styles/base/cells.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgOvB,CAAC"}
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Photon Grid base styles — chart-panel section.
3
+ *
4
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
5
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
6
+ * cascade depends on it.
7
+ */
8
+ export declare const chartPanelCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Chart Panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n.pg-chart-panel-backdrop {\n position: absolute; inset: 0; z-index: 9990;\n background: transparent;\n overflow: hidden;\n pointer-events: none;\n}\n.pg-chart-panel-backdrop--open {\n pointer-events: auto;\n}\n.pg-chart-panel-backdrop--fullscreen {\n position: fixed !important;\n background: rgba(0,0,0,0.40) !important;\n}\n.pg-chart-panel {\n position: absolute;\n background: var(--pg-colors-surface,#fff);\n border-radius: 4px;\n box-shadow: 0 8px 40px rgba(0,0,0,0.18),0 2px 12px rgba(0,0,0,0.10);\n display: flex; flex-direction: column;\n width: min(720px, 88%); height: min(520px, 85%);\n overflow: hidden;\n pointer-events: auto;\n}\n.pg-chart-panel--fullscreen {\n width: calc(100%) !important; height: calc(100%) !important;\n}\n.pg-chart-panel__header {\n display: flex; align-items: center; justify-content: space-between;\n padding: 14px 16px;\n border-bottom: 1px solid var(--pg-colors-border,#e2e8f0);\n flex-shrink: 0;\n cursor: grab; user-select: none;\n}\n.pg-chart-panel__header--dragging { cursor: grabbing; }\n.pg-chart-panel--dragging .pg-chart-panel__body { pointer-events: none; }\n.pg-chart-panel__title {\n font-size: 15px; font-weight: 600;\n color: var(--pg-colors-text-primary,#0f172a);\n font-family: var(--pg-typography-font-family,system-ui,sans-serif);\n}\n.pg-chart-panel__actions { display: flex; align-items: center; gap: 4px; }\n.pg-chart-panel__action-btn {\n display: inline-flex; align-items: center; justify-content: center;\n width: 28px; height: 28px; border-radius: 4px;\n border: none; background: transparent;\n color: var(--pg-colors-text-secondary,#64748b); cursor: pointer;\n transition: background 80ms, color 80ms;\n}\n.pg-chart-panel__action-btn:hover {\n background: var(--pg-colors-background-alt,#f1f5f9);\n color: var(--pg-colors-text-primary,#0f172a);\n}\n.pg-chart-panel__body {\n flex: 1; min-height: 0; position: relative; padding: 8px; overflow: hidden;\n}\n.pg-chart-panel__canvas { display: block; }\n.pg-chart-panel__dots-btn {\n position: absolute; top: 12px; right: 12px; z-index: 10;\n display: inline-flex; align-items: center; justify-content: center;\n width: 26px; height: 26px; border-radius: 4px;\n border: none; background: transparent;\n color: var(--pg-colors-text-secondary,#64748b); cursor: pointer;\n transition: background 80ms;\n}\n.pg-chart-panel__dots-btn:hover, .pg-chart-panel__dots-btn--active {\n background: var(--pg-colors-background-alt,#f1f5f9);\n color: var(--pg-colors-text-primary,#0f172a);\n}\n.pg-chart-panel__dots-menu {\n display: none; position: absolute; top: 40px; right: 8px; z-index: 20;\n background: var(--pg-colors-surface,#fff);\n border: 1px solid var(--pg-colors-border,#e2e8f0);\n border-radius: 6px;\n box-shadow: 0 8px 24px rgba(0,0,0,0.12);\n min-width: 160px; padding: 4px;\n}\n.pg-chart-panel__dots-menu--open { display: block; }\n.pg-chart-panel__dots-item {\n display: flex; align-items: center; gap: 8px;\n width: 100%; padding: 7px 10px;\n border: none; border-radius: 4px; background: transparent;\n cursor: pointer; text-align: left;\n font-size: 13px; color: var(--pg-colors-text-primary,#0f172a);\n font-family: var(--pg-typography-font-family,system-ui,sans-serif);\n transition: background 80ms;\n}\n.pg-chart-panel__dots-item:hover { background: var(--pg-colors-background-alt,#f1f5f9); }\n.pg-chart-panel__empty {\n display: flex; flex-direction: column; align-items: center; justify-content: center;\n height: 100%; gap: 10px; padding: 24px;\n color: var(--pg-colors-text-secondary,#64748b);\n font-family: var(--pg-typography-font-family,system-ui,sans-serif);\n}\n.pg-chart-panel__empty-icon { opacity: 0.35; color: var(--pg-colors-text-secondary,#64748b); }\n.pg-chart-panel__empty-text {\n font-size: 15px; font-weight: 600;\n color: var(--pg-colors-text-primary,#0f172a);\n}\n.pg-chart-panel__empty-sub {\n font-size: 12px; text-align: center; max-width: 280px;\n color: var(--pg-colors-text-secondary,#64748b);\n}\n.pg-chart-panel__legend {\n display: flex; flex-wrap: wrap; align-items: center; justify-content: center;\n gap: 2px 4px; padding: 5px 12px 8px;\n flex-shrink: 0;\n border-top: 1px solid var(--pg-colors-border,#e2e8f0);\n}\n.pg-chart-panel__legend:empty { border-top: none; padding: 0; }\n.pg-chart-panel__legend-item {\n display: inline-flex; align-items: center; gap: 6px;\n padding: 4px 8px; border-radius: 5px;\n border: none; background: transparent; cursor: pointer;\n font-size: 12px; color: var(--pg-colors-text-secondary,#64748b);\n font-family: var(--pg-typography-font-family,system-ui,sans-serif);\n user-select: none;\n transition: background 80ms, opacity 220ms;\n}\n.pg-chart-panel__legend-item:hover {\n background: var(--pg-colors-background-alt,#f1f5f9);\n color: var(--pg-colors-text-primary,#0f172a);\n}\n.pg-chart-panel__legend-item--hidden { opacity: 0.35; }\n.pg-chart-panel__legend-swatch {\n width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;\n}\n.pg-chart-panel__legend-label {\n max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n}\n\n";
9
+ //# sourceMappingURL=chart-panel.css.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chart-panel.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/chart-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,uxKAmIzB,CAAC"}
@@ -0,0 +1,140 @@
1
+ /**
2
+ * Photon Grid base styles — chart-panel section.
3
+ *
4
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
5
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
6
+ * cascade depends on it.
7
+ */
8
+ export const chartPanelCss = `/* ──────────────────── Chart Panel ──────────────────── */
9
+ .pg-chart-panel-backdrop {
10
+ position: absolute; inset: 0; z-index: 9990;
11
+ background: transparent;
12
+ overflow: hidden;
13
+ pointer-events: none;
14
+ }
15
+ .pg-chart-panel-backdrop--open {
16
+ pointer-events: auto;
17
+ }
18
+ .pg-chart-panel-backdrop--fullscreen {
19
+ position: fixed !important;
20
+ background: rgba(0,0,0,0.40) !important;
21
+ }
22
+ .pg-chart-panel {
23
+ position: absolute;
24
+ background: var(--pg-colors-surface,#fff);
25
+ border-radius: 4px;
26
+ box-shadow: 0 8px 40px rgba(0,0,0,0.18),0 2px 12px rgba(0,0,0,0.10);
27
+ display: flex; flex-direction: column;
28
+ width: min(720px, 88%); height: min(520px, 85%);
29
+ overflow: hidden;
30
+ pointer-events: auto;
31
+ }
32
+ .pg-chart-panel--fullscreen {
33
+ width: calc(100%) !important; height: calc(100%) !important;
34
+ }
35
+ .pg-chart-panel__header {
36
+ display: flex; align-items: center; justify-content: space-between;
37
+ padding: 14px 16px;
38
+ border-bottom: 1px solid var(--pg-colors-border,#e2e8f0);
39
+ flex-shrink: 0;
40
+ cursor: grab; user-select: none;
41
+ }
42
+ .pg-chart-panel__header--dragging { cursor: grabbing; }
43
+ .pg-chart-panel--dragging .pg-chart-panel__body { pointer-events: none; }
44
+ .pg-chart-panel__title {
45
+ font-size: 15px; font-weight: 600;
46
+ color: var(--pg-colors-text-primary,#0f172a);
47
+ font-family: var(--pg-typography-font-family,system-ui,sans-serif);
48
+ }
49
+ .pg-chart-panel__actions { display: flex; align-items: center; gap: 4px; }
50
+ .pg-chart-panel__action-btn {
51
+ display: inline-flex; align-items: center; justify-content: center;
52
+ width: 28px; height: 28px; border-radius: 4px;
53
+ border: none; background: transparent;
54
+ color: var(--pg-colors-text-secondary,#64748b); cursor: pointer;
55
+ transition: background 80ms, color 80ms;
56
+ }
57
+ .pg-chart-panel__action-btn:hover {
58
+ background: var(--pg-colors-background-alt,#f1f5f9);
59
+ color: var(--pg-colors-text-primary,#0f172a);
60
+ }
61
+ .pg-chart-panel__body {
62
+ flex: 1; min-height: 0; position: relative; padding: 8px; overflow: hidden;
63
+ }
64
+ .pg-chart-panel__canvas { display: block; }
65
+ .pg-chart-panel__dots-btn {
66
+ position: absolute; top: 12px; right: 12px; z-index: 10;
67
+ display: inline-flex; align-items: center; justify-content: center;
68
+ width: 26px; height: 26px; border-radius: 4px;
69
+ border: none; background: transparent;
70
+ color: var(--pg-colors-text-secondary,#64748b); cursor: pointer;
71
+ transition: background 80ms;
72
+ }
73
+ .pg-chart-panel__dots-btn:hover, .pg-chart-panel__dots-btn--active {
74
+ background: var(--pg-colors-background-alt,#f1f5f9);
75
+ color: var(--pg-colors-text-primary,#0f172a);
76
+ }
77
+ .pg-chart-panel__dots-menu {
78
+ display: none; position: absolute; top: 40px; right: 8px; z-index: 20;
79
+ background: var(--pg-colors-surface,#fff);
80
+ border: 1px solid var(--pg-colors-border,#e2e8f0);
81
+ border-radius: 6px;
82
+ box-shadow: 0 8px 24px rgba(0,0,0,0.12);
83
+ min-width: 160px; padding: 4px;
84
+ }
85
+ .pg-chart-panel__dots-menu--open { display: block; }
86
+ .pg-chart-panel__dots-item {
87
+ display: flex; align-items: center; gap: 8px;
88
+ width: 100%; padding: 7px 10px;
89
+ border: none; border-radius: 4px; background: transparent;
90
+ cursor: pointer; text-align: left;
91
+ font-size: 13px; color: var(--pg-colors-text-primary,#0f172a);
92
+ font-family: var(--pg-typography-font-family,system-ui,sans-serif);
93
+ transition: background 80ms;
94
+ }
95
+ .pg-chart-panel__dots-item:hover { background: var(--pg-colors-background-alt,#f1f5f9); }
96
+ .pg-chart-panel__empty {
97
+ display: flex; flex-direction: column; align-items: center; justify-content: center;
98
+ height: 100%; gap: 10px; padding: 24px;
99
+ color: var(--pg-colors-text-secondary,#64748b);
100
+ font-family: var(--pg-typography-font-family,system-ui,sans-serif);
101
+ }
102
+ .pg-chart-panel__empty-icon { opacity: 0.35; color: var(--pg-colors-text-secondary,#64748b); }
103
+ .pg-chart-panel__empty-text {
104
+ font-size: 15px; font-weight: 600;
105
+ color: var(--pg-colors-text-primary,#0f172a);
106
+ }
107
+ .pg-chart-panel__empty-sub {
108
+ font-size: 12px; text-align: center; max-width: 280px;
109
+ color: var(--pg-colors-text-secondary,#64748b);
110
+ }
111
+ .pg-chart-panel__legend {
112
+ display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
113
+ gap: 2px 4px; padding: 5px 12px 8px;
114
+ flex-shrink: 0;
115
+ border-top: 1px solid var(--pg-colors-border,#e2e8f0);
116
+ }
117
+ .pg-chart-panel__legend:empty { border-top: none; padding: 0; }
118
+ .pg-chart-panel__legend-item {
119
+ display: inline-flex; align-items: center; gap: 6px;
120
+ padding: 4px 8px; border-radius: 5px;
121
+ border: none; background: transparent; cursor: pointer;
122
+ font-size: 12px; color: var(--pg-colors-text-secondary,#64748b);
123
+ font-family: var(--pg-typography-font-family,system-ui,sans-serif);
124
+ user-select: none;
125
+ transition: background 80ms, opacity 220ms;
126
+ }
127
+ .pg-chart-panel__legend-item:hover {
128
+ background: var(--pg-colors-background-alt,#f1f5f9);
129
+ color: var(--pg-colors-text-primary,#0f172a);
130
+ }
131
+ .pg-chart-panel__legend-item--hidden { opacity: 0.35; }
132
+ .pg-chart-panel__legend-swatch {
133
+ width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0;
134
+ }
135
+ .pg-chart-panel__legend-label {
136
+ max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
137
+ }
138
+
139
+ `;
140
+ //# sourceMappingURL=chart-panel.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"chart-panel.css.js","sourceRoot":"","sources":["../../../src/styles/base/chart-panel.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmI5B,CAAC"}
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Photon Grid base styles — column-context-menu section.
3
+ *
4
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
5
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
6
+ * cascade depends on it.
7
+ */
8
+ export declare const columnContextMenuCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Column Context Menu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Menu container \u2014 fixed-position dropdown attached to document.body.\n Height is capped so the menu never grows into the viewport's top/bottom\n 200px; content beyond that scrolls internally via overflow-y instead of\n being clipped. Fly-out submenus (.pg-col-ctx-menu__submenu) are portaled to\n document.body while open rather than nested here, so this container's\n scroll clipping never cuts them off on the X axis. */\n.pg-col-ctx-menu {\n position: fixed;\n z-index: 9999;\n min-width: 220px;\n max-width: 300px;\n max-height: calc(100% - 200px);\n overflow-y: auto;\n overflow-x: hidden;\n padding: 4px;\n background: var(--pg-colors-surface, #ffffff);\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(15, 23, 42, 0.12));\n font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n font-size: var(--pg-typography-font-size-sm, 13px);\n color: var(--pg-colors-text-primary, #0f172a);\n user-select: none;\n outline: none;\n}\n\n/* Horizontal divider between section groups */\n.pg-col-ctx-menu__separator {\n border-top: 1px solid var(--pg-colors-border-col-ctxt-menu, #e2e8f0);\n background: var(--pg-colors-border, #e2e8f0);\n margin: 4px 0;\n}\n\n/* \u2500\u2500 Menu items \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Base item \u2014 covers both leaf items and parent (submenu-trigger) items */\n.pg-col-ctx-menu__item {\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 10px;\n border-radius: var(--pg-borders-radius-sm, 4px);\n cursor: pointer;\n transition: background var(--pg-transitions-fast, 80ms ease);\n outline: none;\n white-space: nowrap;\n}\n\n.pg-col-ctx-menu__item:hover,\n.pg-col-ctx-menu__item:focus-visible {\n background: var(--pg-colors-background-alt, #f1f5f9);\n}\n\n/* Highlighted / \"currently applied\" item (e.g. active sort direction) */\n.pg-col-ctx-menu__item--active {\n color: var(--pg-colors-primary, #2563eb);\n font-weight: 600;\n}\n\n/* Disabled item \u2014 rendered but not interactive */\n.pg-col-ctx-menu__item--disabled {\n opacity: 0.38;\n cursor: not-allowed;\n pointer-events: none;\n}\n\n/* \u2500\u2500 Item anatomy \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Leading icon */\n.pg-col-ctx-menu__item-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 16px;\n height: 16px;\n opacity: 0.6;\n}\n\n.pg-col-ctx-menu__item--active .pg-col-ctx-menu__item-icon {\n opacity: 1;\n}\n\n/* Text label \u2014 fills remaining space */\n.pg-col-ctx-menu__item-label {\n flex: 1;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n/* Trailing chevron indicating a fly-out submenu */\n.pg-col-ctx-menu__item-chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: 14px;\n height: 14px;\n opacity: 0.4;\n margin-left: 4px;\n transition: opacity var(--pg-transitions-fast, 80ms ease);\n}\n\n.pg-col-ctx-menu__item--has-submenu:hover .pg-col-ctx-menu__item-chevron {\n opacity: 0.75;\n}\n\n/* \u2500\u2500 Fly-out submenu \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* Hidden by default; shown when JS adds --open. Positioned fixed rather than\n absolute-within-parent because it is portaled to document.body while open\n (see ColumnMenu.openSubmenu) \u2014 left/top are set inline in viewport\n coordinates by adjustSubmenuPosition. */\n.pg-col-ctx-menu__submenu {\n display: none;\n position: fixed;\n min-width: 180px;\n padding: 4px;\n background: var(--pg-colors-surface, #ffffff);\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(15, 23, 42, 0.12));\n z-index: 10000;\n}\n\n/* JS-controlled open state */\n.pg-col-ctx-menu__submenu--open {\n display: block;\n}\n\n/* Invisible hover bridge \u2014 prevents flicker when mouse crosses from\n parent item edge into the submenu. Extends 6px to the left of the submenu. */\n.pg-col-ctx-menu__submenu--open::before {\n content: '';\n position: absolute;\n right: 100%;\n top: 0;\n width: 8px;\n height: 100%;\n}\n\n";
9
+ //# sourceMappingURL=column-context-menu.css.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"column-context-menu.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/column-context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,gpKAgJhC,CAAC"}
@@ -0,0 +1,153 @@
1
+ /**
2
+ * Photon Grid base styles — column-context-menu section.
3
+ *
4
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
5
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
6
+ * cascade depends on it.
7
+ */
8
+ export const columnContextMenuCss = `/* ──────────────────── Column Context Menu ──────────────────── */
9
+
10
+ /* Menu container — fixed-position dropdown attached to document.body.
11
+ Height is capped so the menu never grows into the viewport's top/bottom
12
+ 200px; content beyond that scrolls internally via overflow-y instead of
13
+ being clipped. Fly-out submenus (.pg-col-ctx-menu__submenu) are portaled to
14
+ document.body while open rather than nested here, so this container's
15
+ scroll clipping never cuts them off on the X axis. */
16
+ .pg-col-ctx-menu {
17
+ position: fixed;
18
+ z-index: 9999;
19
+ min-width: 220px;
20
+ max-width: 300px;
21
+ max-height: calc(100% - 200px);
22
+ overflow-y: auto;
23
+ overflow-x: hidden;
24
+ padding: 4px;
25
+ background: var(--pg-colors-surface, #ffffff);
26
+ border: 1px solid var(--pg-colors-border, #e2e8f0);
27
+ border-radius: var(--pg-borders-radius-md, 6px);
28
+ box-shadow: var(--pg-shadows-dropdown, 0 8px 24px rgba(15, 23, 42, 0.12));
29
+ font-family: var(--pg-typography-font-family, system-ui, sans-serif);
30
+ font-size: var(--pg-typography-font-size-sm, 13px);
31
+ color: var(--pg-colors-text-primary, #0f172a);
32
+ user-select: none;
33
+ outline: none;
34
+ }
35
+
36
+ /* Horizontal divider between section groups */
37
+ .pg-col-ctx-menu__separator {
38
+ border-top: 1px solid var(--pg-colors-border-col-ctxt-menu, #e2e8f0);
39
+ background: var(--pg-colors-border, #e2e8f0);
40
+ margin: 4px 0;
41
+ }
42
+
43
+ /* ── Menu items ─────────────────────────────────────────────── */
44
+
45
+ /* Base item — covers both leaf items and parent (submenu-trigger) items */
46
+ .pg-col-ctx-menu__item {
47
+ position: relative;
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 8px;
51
+ padding: 7px 10px;
52
+ border-radius: var(--pg-borders-radius-sm, 4px);
53
+ cursor: pointer;
54
+ transition: background var(--pg-transitions-fast, 80ms ease);
55
+ outline: none;
56
+ white-space: nowrap;
57
+ }
58
+
59
+ .pg-col-ctx-menu__item:hover,
60
+ .pg-col-ctx-menu__item:focus-visible {
61
+ background: var(--pg-colors-background-alt, #f1f5f9);
62
+ }
63
+
64
+ /* Highlighted / "currently applied" item (e.g. active sort direction) */
65
+ .pg-col-ctx-menu__item--active {
66
+ color: var(--pg-colors-primary, #2563eb);
67
+ font-weight: 600;
68
+ }
69
+
70
+ /* Disabled item — rendered but not interactive */
71
+ .pg-col-ctx-menu__item--disabled {
72
+ opacity: 0.38;
73
+ cursor: not-allowed;
74
+ pointer-events: none;
75
+ }
76
+
77
+ /* ── Item anatomy ────────────────────────────────────────────── */
78
+
79
+ /* Leading icon */
80
+ .pg-col-ctx-menu__item-icon {
81
+ display: flex;
82
+ align-items: center;
83
+ justify-content: center;
84
+ flex-shrink: 0;
85
+ width: 16px;
86
+ height: 16px;
87
+ opacity: 0.6;
88
+ }
89
+
90
+ .pg-col-ctx-menu__item--active .pg-col-ctx-menu__item-icon {
91
+ opacity: 1;
92
+ }
93
+
94
+ /* Text label — fills remaining space */
95
+ .pg-col-ctx-menu__item-label {
96
+ flex: 1;
97
+ overflow: hidden;
98
+ text-overflow: ellipsis;
99
+ }
100
+
101
+ /* Trailing chevron indicating a fly-out submenu */
102
+ .pg-col-ctx-menu__item-chevron {
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ flex-shrink: 0;
107
+ width: 14px;
108
+ height: 14px;
109
+ opacity: 0.4;
110
+ margin-left: 4px;
111
+ transition: opacity var(--pg-transitions-fast, 80ms ease);
112
+ }
113
+
114
+ .pg-col-ctx-menu__item--has-submenu:hover .pg-col-ctx-menu__item-chevron {
115
+ opacity: 0.75;
116
+ }
117
+
118
+ /* ── Fly-out submenu ─────────────────────────────────────────── */
119
+
120
+ /* Hidden by default; shown when JS adds --open. Positioned fixed rather than
121
+ absolute-within-parent because it is portaled to document.body while open
122
+ (see ColumnMenu.openSubmenu) — left/top are set inline in viewport
123
+ coordinates by adjustSubmenuPosition. */
124
+ .pg-col-ctx-menu__submenu {
125
+ display: none;
126
+ position: fixed;
127
+ min-width: 180px;
128
+ padding: 4px;
129
+ background: var(--pg-colors-surface, #ffffff);
130
+ border: 1px solid var(--pg-colors-border, #e2e8f0);
131
+ border-radius: var(--pg-borders-radius-md, 6px);
132
+ box-shadow: var(--pg-shadows-dropdown, 0 8px 24px rgba(15, 23, 42, 0.12));
133
+ z-index: 10000;
134
+ }
135
+
136
+ /* JS-controlled open state */
137
+ .pg-col-ctx-menu__submenu--open {
138
+ display: block;
139
+ }
140
+
141
+ /* Invisible hover bridge — prevents flicker when mouse crosses from
142
+ parent item edge into the submenu. Extends 6px to the left of the submenu. */
143
+ .pg-col-ctx-menu__submenu--open::before {
144
+ content: '';
145
+ position: absolute;
146
+ right: 100%;
147
+ top: 0;
148
+ width: 8px;
149
+ height: 100%;
150
+ }
151
+
152
+ `;
153
+ //# sourceMappingURL=column-context-menu.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"column-context-menu.css.js","sourceRoot":"","sources":["../../../src/styles/base/column-context-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJnC,CAAC"}
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Photon Grid base styles — column-group-header section.
3
+ *
4
+ * Auto-split from base-styles.ts. Concatenated back (in order) by
5
+ * base-styles.ts; edit here, not there. Order is preserved because CSS
6
+ * cascade depends on it.
7
+ */
8
+ export declare const columnGroupHeaderCss = "/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 Column group 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-group-row {\n position: relative;\n flex-shrink: 0;\n height: var(--pg-header-row-height, 44px);\n background: var(--pg-colors-header-background, #f8fafc);\n border-bottom: 1px solid var(--pg-colors-border, #e2e8f0);\n}\n.pg-th--group {\n position: absolute;\n top: 0;\n height: 100%;\n display: flex;\n align-items: center;\n overflow: hidden;\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n background: var(--pg-colors-header-background, #f8fafc);\n cursor: pointer;\n outline: none;\n transition: background var(--pg-transitions-duration-fast, 100ms);\n font-weight: var(--pg-typography-header-font-weight, 600);\n font-size: var(--pg-typography-font-size-sm, 13px);\n color: var(--pg-colors-text-primary, #1e293b);\n user-select: none;\n}\n.pg-th--group:hover,\n.pg-th--group:focus-visible { background: var(--pg-colors-header-hover, #f1f5f9); }\n.pg-th--group--collapsed {\n background: var(--pg-colors-background-alt, #f1f5f9);\n justify-content: center;\n}\n// .pg-th--group--collapsed .pg-th__label { display: none; }\n.pg-th__collapse-btn {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n margin-right: 4px;\n border-radius: var(--pg-sizing-border-radius, 4px);\n color: var(--pg-colors-text-secondary, #475569);\n transition: background var(--pg-transitions-duration-fast, 100ms),\n color var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th--group:hover .pg-th__collapse-btn,\n.pg-th--group:focus-visible .pg-th__collapse-btn {\n background: var(--pg-colors-background-alt, #f1f5f9);\n color: var(--pg-colors-primary, #2563eb);\n}\n.pg-th__resize-handle--group {\n position: absolute;\n right: 0;\n top: 0;\n width: 6px;\n height: 100%;\n cursor: col-resize;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n color: var(--pg-colors-resize-handle-color, #e2e8f0);\n z-index: 6;\n transition: opacity var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-th--group:hover .pg-th__resize-handle--group { opacity: 1; }\n\n/* \u2500\u2500 Flat columns alongside grouped headers \u2500\u2500 */\n/* A flat (ungrouped) leaf column in a grid that has grouped columns must span\n the full header height (group rows + leaf row) so it does not appear as a\n short stub next to taller group header cells.\n Strategy: keep the cell in normal flex flow (preserves horizontal layout),\n give it the combined height, and translateY it upward so its visual top\n aligns with the top of the header area. The panel header overflow:hidden\n clips exactly at the combined height, so nothing leaks outside the header.\n --pg-group-rows-count is set in JS by HeaderRenderer. */\n.pg-th--no-group {\n align-self: flex-start;\n position: relative;\n z-index: 2;\n height: calc((var(--pg-group-rows-count, 0) + 1) * var(--pg-header-row-height, 44px));\n transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n\n.pg-group-drop-indicator {\n position: absolute;\n top: 0;\n width: 2px;\n height: var(--pg-header-row-height, 44px);\n background: var(--pg-colors-primary, #2563eb);\n z-index: 20;\n pointer-events: none;\n border-radius: 1px;\n}\n.pg-th-group-filler { position: absolute; top: 0; height: 100%; }\n.pg-th--standalone-filler {\n position: absolute;\n top: 0;\n height: 100%;\n background: var(--pg-colors-header-background, #f8fafc);\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n pointer-events: none;\n cursor: default;\n}\n/* Filler cell in a group row for columns with no ancestor group at this depth.\n Blends with the header background \u2014 makes flat/shallow columns appear to span\n the full header height. No interactive elements, no bottom border. */\n.pg-th--depth-filler {\n position: absolute;\n top: 0;\n height: 100%;\n background: var(--pg-colors-header-background, #f8fafc);\n border-right: 1px solid var(--pg-colors-border, #e2e8f0);\n pointer-events: none;\n cursor: default;\n z-index: 0;\n}\n\n@keyframes pg-drag-indicator-in { from { opacity: 0; } to { opacity: 1; } }\n\n/* Smooth column-shift animation \u2014 enabled ONLY while actively dragging a column */\n.pg-grid--col-dragging .pg-th[data-col-id],\n.pg-grid--col-dragging .pg-cell[data-col-id] {\n transform: translateX(var(--pg-drag-x, 0px));\n transition: transform 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94);\n will-change: transform;\n}\n.pg-grid--col-dragging .pg-th--no-group[data-col-id] {\n transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n}\n\n/* During header auto-scroll the transforms update every RAF tick \u2014 disable the\n transition so cells snap instantly rather than endlessly chasing a moving target */\n.pg-grid--col-autoscrolling .pg-th[data-col-id],\n.pg-grid--col-autoscrolling .pg-cell[data-col-id] {\n transition: none;\n}\n/* Live-preview path (store mutations during drag): suppress all transitions */\n.pg-grid--drag-preview-sync .pg-th[data-col-id],\n.pg-grid--drag-preview-sync .pg-cell[data-col-id] {\n transition: none !important;\n}\n\n/* \u2500\u2500 Group-header CSS-transform drag \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n * Cells shift via --pg-drag-x. The --pg-drag-transition variable is 0ms for\n * the actively-dragged group (injected by display-group-drag-handler.ts) and\n * falls back to the default 180ms for displaced neighbours \u2014 giving AG Grid-\n * style smooth animation for everything except the grabbed group itself.\n * body cells use the same variable so leaf columns and data rows stay in sync.\n */\n.pg-grid--group-dragging .pg-th--group {\n transform: translateX(var(--pg-drag-x, 0px));\n transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n will-change: transform;\n}\n.pg-grid--group-dragging .pg-th[data-col-id] {\n transform: translateX(var(--pg-drag-x, 0px));\n transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n.pg-grid--group-dragging .pg-cell[data-col-id] {\n transform: translateX(var(--pg-drag-x, 0px));\n transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n.pg-grid--group-dragging .pg-th--depth-filler {\n transform: translateX(var(--pg-drag-x, 0px));\n}\n.pg-grid--group-dragging .pg-th--no-group[data-col-id] {\n transform: translate(var(--pg-drag-x, 0px), calc(var(--pg-group-rows-count, 0) * -1 * var(--pg-header-row-height, 44px)));\n transition: transform var(--pg-drag-transition, 180ms cubic-bezier(0.25, 0.46, 0.45, 0.94));\n}\n\n/* Column drag ghost (floating preview chip that follows the cursor) */\n.pg-col-drag-ghost {\n position: fixed;\n pointer-events: none;\n z-index: 9999;\n display: flex;\n align-items: center;\n gap: var(--pg-drag-ghost-gap, 8px);\n padding: 5px 12px 5px 10px;\n background: var(--pg-colors-drag-ghost-background, #fff);\n border: 1.5px solid var(--pg-colors-primary, #2563eb);\n border-radius: var(--pg-borders-radius-md, 6px);\n box-shadow: 0 6px 24px rgba(0,0,0,0.13), 0 2px 8px rgba(37, 99, 235, 0.12);\n font-family: var(--pg-typography-font-family, system-ui, sans-serif);\n font-size: var(--pg-typography-font-size-sm, 12px);\n font-weight: var(--pg-typography-font-weight-semi-bold, 600);\n color: var(--pg-colors-header-text, #374151);\n white-space: nowrap;\n user-select: none;\n transform: translateY(-50%);\n transition:\n border-color var(--pg-transitions-duration-fast, 100ms),\n box-shadow var(--pg-transitions-duration-fast, 100ms);\n}\n.pg-col-drag-ghost__icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n color: var(--pg-colors-primary, #2563eb);\n opacity: 0.7;\n}\n.pg-col-drag-ghost__label {\n flex: 1;\n min-width: 0;\n}\n\n/* Default icon visibility */\n.pg-col-drag-ghost__icon--move { display: inline-flex; }\n.pg-col-drag-ghost__icon--ban { display: none; }\n.pg-col-drag-ghost__icon--arrow-left { display: none; }\n.pg-col-drag-ghost__icon--arrow-right { display: none; }\n\n/* Hide-column state: amber ghost + eyeOff icon */\n.pg-col-drag-ghost__icon--hide { display: none; }\n.pg-col-drag-ghost--hide .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--hide .pg-col-drag-ghost__icon--hide { display: inline-flex; color: var(--pg-colors-warning, #f59e0b); }\n.pg-col-drag-ghost--hide {\n border-color: var(--pg-colors-warning, #f59e0b);\n box-shadow: 0 6px 24px rgba(245,158,11,0.13), 0 2px 8px rgba(245,158,11,0.12);\n color: var(--pg-colors-warning, #f59e0b);\n}\n\n/* No-drop state: red ghost + ban icon */\n.pg-col-drag-ghost--no-drop {\n border-color: var(--pg-colors-danger, #ef4444);\n box-shadow: 0 6px 24px rgba(239,68,68,0.13), 0 2px 8px rgba(239,68,68,0.12);\n color: var(--pg-colors-danger, #ef4444);\n}\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon { color: var(--pg-colors-danger, #ef4444); }\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--no-drop .pg-col-drag-ghost__icon--ban { display: inline-flex; }\n\n/* Outside-grid drop state: red ghost signals \"drop = hide all columns in group\" */\n.pg-col-drag-ghost--outside {\n border-color: var(--pg-colors-danger, #ef4444);\n box-shadow: 0 6px 24px rgba(239,68,68,0.18), 0 2px 8px rgba(239,68,68,0.14);\n color: var(--pg-colors-danger, #ef4444);\n opacity: 0.85;\n}\n.pg-col-drag-ghost--outside .pg-col-drag-ghost__label::after {\n content: ' (hide)';\n font-size: 10px;\n opacity: 0.7;\n}\n\n/* Auto-scroll state: directional arrow replaces move icon */\n@keyframes pg-scroll-arrow-left { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }\n@keyframes pg-scroll-arrow-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }\n\n.pg-col-drag-ghost--scroll-left .pg-col-drag-ghost__icon--move,\n.pg-col-drag-ghost--scroll-right .pg-col-drag-ghost__icon--move { display: none; }\n.pg-col-drag-ghost--scroll-left .pg-col-drag-ghost__icon--arrow-left {\n display: inline-flex;\n animation: pg-scroll-arrow-left 700ms ease-in-out infinite;\n}\n.pg-col-drag-ghost--scroll-right .pg-col-drag-ghost__icon--arrow-right {\n display: inline-flex;\n animation: pg-scroll-arrow-right 700ms ease-in-out infinite;\n}\n\n";
9
+ //# sourceMappingURL=column-group-header.css.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"column-group-header.css.d.ts","sourceRoot":"","sources":["../../../src/styles/base/column-group-header.css.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,0sVAqQhC,CAAC"}