@alaarab/ogrid-angular 2.1.7 → 2.1.9

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 (4) hide show
  1. package/dist/esm/index.js +73 -10
  2. package/dist/types/services/datagrid-editing.service.d.ts +8 -1
  3. package/dist/types/styles/ogrid-theme-vars.d.ts +4 -1
  4. package/package.json +2 -2
package/dist/esm/index.js CHANGED
@@ -790,7 +790,7 @@ var DataGridLayoutHelper = class {
790
790
  }
791
791
  };
792
792
  var DataGridEditingHelper = class {
793
- constructor(getVisibleCols, getItems, getWrappedOnCellValueChanged, setActiveCellFn) {
793
+ constructor(getVisibleCols, getItems, getWrappedOnCellValueChanged, setActiveCellFn, setSelectionRangeFn, getColOffset) {
794
794
  this.editingCellSig = signal(null);
795
795
  this.pendingEditorValueSig = signal(void 0);
796
796
  this.popoverAnchorElSig = signal(null);
@@ -798,6 +798,8 @@ var DataGridEditingHelper = class {
798
798
  this.getItems = getItems;
799
799
  this.getWrappedOnCellValueChanged = getWrappedOnCellValueChanged;
800
800
  this.setActiveCellFn = setActiveCellFn;
801
+ this.setSelectionRangeFn = setSelectionRangeFn;
802
+ this.getColOffset = getColOffset;
801
803
  }
802
804
  setEditingCell(cell) {
803
805
  this.editingCellSig.set(cell);
@@ -824,7 +826,10 @@ var DataGridEditingHelper = class {
824
826
  this.pendingEditorValueSig.set(void 0);
825
827
  const items = this.getItems();
826
828
  if (rowIndex < items.length - 1) {
827
- this.setActiveCellFn({ rowIndex: rowIndex + 1, columnIndex: globalColIndex });
829
+ const newRow = rowIndex + 1;
830
+ const localCol = globalColIndex - this.getColOffset();
831
+ this.setActiveCellFn({ rowIndex: newRow, columnIndex: globalColIndex });
832
+ this.setSelectionRangeFn({ startRow: newRow, startCol: localCol, endRow: newRow, endCol: localCol });
828
833
  }
829
834
  }
830
835
  cancelPopoverEdit() {
@@ -1546,7 +1551,9 @@ var DataGridStateService = class {
1546
1551
  () => this.visibleCols(),
1547
1552
  () => this.props()?.items ?? [],
1548
1553
  () => this.wrappedOnCellValueChanged(),
1549
- (cell) => this.setActiveCell(cell)
1554
+ (cell) => this.setActiveCell(cell),
1555
+ (range) => this.setSelectionRange(range),
1556
+ () => this.colOffset()
1550
1557
  );
1551
1558
  effect((onCleanup) => {
1552
1559
  const onMove = (e) => this.onWindowMouseMove(e);
@@ -2491,53 +2498,109 @@ SideBarComponent = __decorateClass([
2491
2498
 
2492
2499
  // src/styles/ogrid-theme-vars.ts
2493
2500
  var OGRID_THEME_VARS_CSS = `
2494
- /* \u2500\u2500\u2500 OGrid Theme Variables \u2500\u2500\u2500 */
2495
- :root {
2501
+ /* \u2500\u2500\u2500 OGrid Light Theme (default) \u2500\u2500\u2500 */
2502
+ :where(:root) {
2496
2503
  --ogrid-bg: #ffffff;
2497
2504
  --ogrid-fg: rgba(0, 0, 0, 0.87);
2498
2505
  --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);
2499
2506
  --ogrid-fg-muted: rgba(0, 0, 0, 0.5);
2500
2507
  --ogrid-border: rgba(0, 0, 0, 0.12);
2501
- --ogrid-header-bg: rgba(0, 0, 0, 0.04);
2508
+ --ogrid-border-strong: rgba(0, 0, 0, 0.5);
2509
+ --ogrid-border-hover: rgba(0, 0, 0, 0.3);
2510
+ --ogrid-header-bg: #f5f5f5;
2502
2511
  --ogrid-hover-bg: rgba(0, 0, 0, 0.04);
2503
2512
  --ogrid-selected-row-bg: #e6f0fb;
2513
+ --ogrid-bg-selected-hover: #dae8f8;
2504
2514
  --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);
2505
2515
  --ogrid-range-bg: rgba(33, 115, 70, 0.12);
2506
2516
  --ogrid-accent: #0078d4;
2517
+ --ogrid-accent-dark: #005a9e;
2507
2518
  --ogrid-selection-color: #217346;
2519
+ --ogrid-primary: #0078d4;
2520
+ --ogrid-primary-fg: #fff;
2521
+ --ogrid-primary-hover: #106ebe;
2522
+ --ogrid-bg-subtle: #f5f5f5;
2523
+ --ogrid-bg-hover: rgba(0, 0, 0, 0.04);
2524
+ --ogrid-active-bg: rgba(0, 0, 0, 0.06);
2525
+ --ogrid-muted: rgba(0, 0, 0, 0.5);
2526
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
2527
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);
2528
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);
2508
2529
  --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);
2530
+ --ogrid-selection: #217346;
2531
+ --ogrid-bg-range: rgba(33, 115, 70, 0.12);
2532
+ --ogrid-bg-selected: #e6f0fb;
2533
+ --ogrid-loading-bg: rgba(255, 255, 255, 0.7);
2509
2534
  }
2535
+ /* \u2500\u2500\u2500 Auto Dark (system preference) \u2500\u2500\u2500 */
2510
2536
  @media (prefers-color-scheme: dark) {
2511
- :root:not([data-theme="light"]) {
2537
+ :where(:root:not([data-theme="light"])) {
2512
2538
  --ogrid-bg: #1e1e1e;
2513
2539
  --ogrid-fg: rgba(255, 255, 255, 0.87);
2514
2540
  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
2515
2541
  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
2516
2542
  --ogrid-border: rgba(255, 255, 255, 0.12);
2517
- --ogrid-header-bg: rgba(255, 255, 255, 0.06);
2543
+ --ogrid-border-strong: rgba(255, 255, 255, 0.5);
2544
+ --ogrid-border-hover: rgba(255, 255, 255, 0.3);
2545
+ --ogrid-header-bg: #2c2c2c;
2518
2546
  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
2519
2547
  --ogrid-selected-row-bg: #1a3a5c;
2548
+ --ogrid-bg-selected-hover: #1f3650;
2520
2549
  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
2521
2550
  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
2522
2551
  --ogrid-accent: #4da6ff;
2552
+ --ogrid-accent-dark: #3390e0;
2523
2553
  --ogrid-selection-color: #2ea043;
2554
+ --ogrid-primary: #4da6ff;
2555
+ --ogrid-primary-fg: #fff;
2556
+ --ogrid-primary-hover: #66b3ff;
2557
+ --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
2558
+ --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
2559
+ --ogrid-active-bg: rgba(255, 255, 255, 0.08);
2560
+ --ogrid-muted: rgba(255, 255, 255, 0.5);
2561
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
2562
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
2563
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
2524
2564
  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
2565
+ --ogrid-selection: #2ea043;
2566
+ --ogrid-bg-range: rgba(46, 160, 67, 0.15);
2567
+ --ogrid-bg-selected: #1a3a5c;
2568
+ --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
2525
2569
  }
2526
2570
  }
2527
- [data-theme="dark"] {
2571
+ /* \u2500\u2500\u2500 Explicit Dark \u2500\u2500\u2500 */
2572
+ :where([data-theme="dark"]) {
2528
2573
  --ogrid-bg: #1e1e1e;
2529
2574
  --ogrid-fg: rgba(255, 255, 255, 0.87);
2530
2575
  --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);
2531
2576
  --ogrid-fg-muted: rgba(255, 255, 255, 0.5);
2532
2577
  --ogrid-border: rgba(255, 255, 255, 0.12);
2533
- --ogrid-header-bg: rgba(255, 255, 255, 0.06);
2578
+ --ogrid-border-strong: rgba(255, 255, 255, 0.5);
2579
+ --ogrid-border-hover: rgba(255, 255, 255, 0.3);
2580
+ --ogrid-header-bg: #2c2c2c;
2534
2581
  --ogrid-hover-bg: rgba(255, 255, 255, 0.08);
2535
2582
  --ogrid-selected-row-bg: #1a3a5c;
2583
+ --ogrid-bg-selected-hover: #1f3650;
2536
2584
  --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);
2537
2585
  --ogrid-range-bg: rgba(46, 160, 67, 0.15);
2538
2586
  --ogrid-accent: #4da6ff;
2587
+ --ogrid-accent-dark: #3390e0;
2539
2588
  --ogrid-selection-color: #2ea043;
2589
+ --ogrid-primary: #4da6ff;
2590
+ --ogrid-primary-fg: #fff;
2591
+ --ogrid-primary-hover: #66b3ff;
2592
+ --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);
2593
+ --ogrid-bg-hover: rgba(255, 255, 255, 0.08);
2594
+ --ogrid-active-bg: rgba(255, 255, 255, 0.08);
2595
+ --ogrid-muted: rgba(255, 255, 255, 0.5);
2596
+ --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
2597
+ --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);
2598
+ --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);
2540
2599
  --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);
2600
+ --ogrid-selection: #2ea043;
2601
+ --ogrid-bg-range: rgba(46, 160, 67, 0.15);
2602
+ --ogrid-bg-selected: #1a3a5c;
2603
+ --ogrid-loading-bg: rgba(0, 0, 0, 0.7);
2541
2604
  }`;
2542
2605
 
2543
2606
  // src/components/ogrid-layout.component.ts
package/dist/types/services/datagrid-editing.service.d.ts CHANGED
@@ -19,7 +19,14 @@ export declare class DataGridEditingHelper<T> {
19
19
  private getItems;
20
20
  private getWrappedOnCellValueChanged;
21
21
  private setActiveCellFn;
22
- constructor(getVisibleCols: () => IColumnDef<T>[], getItems: () => T[], getWrappedOnCellValueChanged: () => ((event: ICellValueChangedEvent<T>) => void) | undefined, setActiveCellFn: (cell: IActiveCell | null) => void);
22
+ private setSelectionRangeFn;
23
+ private getColOffset;
24
+ constructor(getVisibleCols: () => IColumnDef<T>[], getItems: () => T[], getWrappedOnCellValueChanged: () => ((event: ICellValueChangedEvent<T>) => void) | undefined, setActiveCellFn: (cell: IActiveCell | null) => void, setSelectionRangeFn: (range: {
25
+ startRow: number;
26
+ startCol: number;
27
+ endRow: number;
28
+ endCol: number;
29
+ } | null) => void, getColOffset: () => number);
23
30
  setEditingCell(cell: {
24
31
  rowId: RowId;
25
32
  columnId: string;
package/dist/types/styles/ogrid-theme-vars.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  /**
2
2
  * Shared OGrid CSS theme variables (light + dark mode).
3
3
  * Used by all Angular UI packages (Material, PrimeNG, Radix) to avoid duplication.
4
+ *
5
+ * Uses :where() selectors for ZERO specificity — consumer overrides always win.
6
+ * Dark mode: auto via prefers-color-scheme, explicit via [data-theme="dark"].
4
7
  */
5
- export declare const OGRID_THEME_VARS_CSS = "\n/* \u2500\u2500\u2500 OGrid Theme Variables \u2500\u2500\u2500 */\n:root {\n --ogrid-bg: #ffffff;\n --ogrid-fg: rgba(0, 0, 0, 0.87);\n --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);\n --ogrid-fg-muted: rgba(0, 0, 0, 0.5);\n --ogrid-border: rgba(0, 0, 0, 0.12);\n --ogrid-header-bg: rgba(0, 0, 0, 0.04);\n --ogrid-hover-bg: rgba(0, 0, 0, 0.04);\n --ogrid-selected-row-bg: #e6f0fb;\n --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);\n --ogrid-range-bg: rgba(33, 115, 70, 0.12);\n --ogrid-accent: #0078d4;\n --ogrid-selection-color: #217346;\n --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);\n}\n@media (prefers-color-scheme: dark) {\n :root:not([data-theme=\"light\"]) {\n --ogrid-bg: #1e1e1e;\n --ogrid-fg: rgba(255, 255, 255, 0.87);\n --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n --ogrid-border: rgba(255, 255, 255, 0.12);\n --ogrid-header-bg: rgba(255, 255, 255, 0.06);\n --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n --ogrid-selected-row-bg: #1a3a5c;\n --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n --ogrid-accent: #4da6ff;\n --ogrid-selection-color: #2ea043;\n --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n }\n}\n[data-theme=\"dark\"] {\n --ogrid-bg: #1e1e1e;\n --ogrid-fg: rgba(255, 255, 255, 0.87);\n --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n --ogrid-border: rgba(255, 255, 255, 0.12);\n --ogrid-header-bg: rgba(255, 255, 255, 0.06);\n --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n --ogrid-selected-row-bg: #1a3a5c;\n --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n --ogrid-accent: #4da6ff;\n --ogrid-selection-color: #2ea043;\n --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n}";
8
+ export declare const OGRID_THEME_VARS_CSS = "\n/* \u2500\u2500\u2500 OGrid Light Theme (default) \u2500\u2500\u2500 */\n:where(:root) {\n --ogrid-bg: #ffffff;\n --ogrid-fg: rgba(0, 0, 0, 0.87);\n --ogrid-fg-secondary: rgba(0, 0, 0, 0.6);\n --ogrid-fg-muted: rgba(0, 0, 0, 0.5);\n --ogrid-border: rgba(0, 0, 0, 0.12);\n --ogrid-border-strong: rgba(0, 0, 0, 0.5);\n --ogrid-border-hover: rgba(0, 0, 0, 0.3);\n --ogrid-header-bg: #f5f5f5;\n --ogrid-hover-bg: rgba(0, 0, 0, 0.04);\n --ogrid-selected-row-bg: #e6f0fb;\n --ogrid-bg-selected-hover: #dae8f8;\n --ogrid-active-cell-bg: rgba(0, 0, 0, 0.02);\n --ogrid-range-bg: rgba(33, 115, 70, 0.12);\n --ogrid-accent: #0078d4;\n --ogrid-accent-dark: #005a9e;\n --ogrid-selection-color: #217346;\n --ogrid-primary: #0078d4;\n --ogrid-primary-fg: #fff;\n --ogrid-primary-hover: #106ebe;\n --ogrid-bg-subtle: #f5f5f5;\n --ogrid-bg-hover: rgba(0, 0, 0, 0.04);\n --ogrid-active-bg: rgba(0, 0, 0, 0.06);\n --ogrid-muted: rgba(0, 0, 0, 0.5);\n --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08);\n --ogrid-pinned-shadow: rgba(0, 0, 0, 0.1);\n --ogrid-loading-overlay: rgba(255, 255, 255, 0.7);\n --ogrid-selection: #217346;\n --ogrid-bg-range: rgba(33, 115, 70, 0.12);\n --ogrid-bg-selected: #e6f0fb;\n --ogrid-loading-bg: rgba(255, 255, 255, 0.7);\n}\n/* \u2500\u2500\u2500 Auto Dark (system preference) \u2500\u2500\u2500 */\n@media (prefers-color-scheme: dark) {\n :where(:root:not([data-theme=\"light\"])) {\n --ogrid-bg: #1e1e1e;\n --ogrid-fg: rgba(255, 255, 255, 0.87);\n --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n --ogrid-border: rgba(255, 255, 255, 0.12);\n --ogrid-border-strong: rgba(255, 255, 255, 0.5);\n --ogrid-border-hover: rgba(255, 255, 255, 0.3);\n --ogrid-header-bg: #2c2c2c;\n --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n --ogrid-selected-row-bg: #1a3a5c;\n --ogrid-bg-selected-hover: #1f3650;\n --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n --ogrid-accent: #4da6ff;\n --ogrid-accent-dark: #3390e0;\n --ogrid-selection-color: #2ea043;\n --ogrid-primary: #4da6ff;\n --ogrid-primary-fg: #fff;\n --ogrid-primary-hover: #66b3ff;\n --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);\n --ogrid-bg-hover: rgba(255, 255, 255, 0.08);\n --ogrid-active-bg: rgba(255, 255, 255, 0.08);\n --ogrid-muted: rgba(255, 255, 255, 0.5);\n --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);\n --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);\n --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n --ogrid-selection: #2ea043;\n --ogrid-bg-range: rgba(46, 160, 67, 0.15);\n --ogrid-bg-selected: #1a3a5c;\n --ogrid-loading-bg: rgba(0, 0, 0, 0.7);\n }\n}\n/* \u2500\u2500\u2500 Explicit Dark \u2500\u2500\u2500 */\n:where([data-theme=\"dark\"]) {\n --ogrid-bg: #1e1e1e;\n --ogrid-fg: rgba(255, 255, 255, 0.87);\n --ogrid-fg-secondary: rgba(255, 255, 255, 0.6);\n --ogrid-fg-muted: rgba(255, 255, 255, 0.5);\n --ogrid-border: rgba(255, 255, 255, 0.12);\n --ogrid-border-strong: rgba(255, 255, 255, 0.5);\n --ogrid-border-hover: rgba(255, 255, 255, 0.3);\n --ogrid-header-bg: #2c2c2c;\n --ogrid-hover-bg: rgba(255, 255, 255, 0.08);\n --ogrid-selected-row-bg: #1a3a5c;\n --ogrid-bg-selected-hover: #1f3650;\n --ogrid-active-cell-bg: rgba(255, 255, 255, 0.06);\n --ogrid-range-bg: rgba(46, 160, 67, 0.15);\n --ogrid-accent: #4da6ff;\n --ogrid-accent-dark: #3390e0;\n --ogrid-selection-color: #2ea043;\n --ogrid-primary: #4da6ff;\n --ogrid-primary-fg: #fff;\n --ogrid-primary-hover: #66b3ff;\n --ogrid-bg-subtle: rgba(255, 255, 255, 0.04);\n --ogrid-bg-hover: rgba(255, 255, 255, 0.08);\n --ogrid-active-bg: rgba(255, 255, 255, 0.08);\n --ogrid-muted: rgba(255, 255, 255, 0.5);\n --ogrid-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);\n --ogrid-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25);\n --ogrid-pinned-shadow: rgba(0, 0, 0, 0.3);\n --ogrid-loading-overlay: rgba(0, 0, 0, 0.7);\n --ogrid-selection: #2ea043;\n --ogrid-bg-range: rgba(46, 160, 67, 0.15);\n --ogrid-bg-selected: #1a3a5c;\n --ogrid-loading-bg: rgba(0, 0, 0, 0.7);\n}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alaarab/ogrid-angular",
3
- "version": "2.1.7",
3
+ "version": "2.1.9",
4
4
  "description": "OGrid Angular – Angular services, signals, and headless components for OGrid data grids.",
5
5
  "main": "dist/esm/index.js",
6
6
  "module": "dist/esm/index.js",
@@ -35,7 +35,7 @@
35
35
  "node": ">=18"
36
36
  },
37
37
  "dependencies": {
38
- "@alaarab/ogrid-core": "2.1.7"
38
+ "@alaarab/ogrid-core": "2.1.9"
39
39
  },
40
40
  "peerDependencies": {
41
41
  "@angular/core": "^21.0.0",