@melodicdev/components 1.6.8 → 1.6.10

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.
@@ -88,6 +88,9 @@ export declare class DataGridComponent implements IElementRef, OnCreate, OnDestr
88
88
  get totalGridWidth(): number;
89
89
  get gridTemplateColumns(): string;
90
90
  getPinnedLeftOffset(key: string): number;
91
+ getPinnedRightOffset(key: string): number;
92
+ get lastLeftPinnedKey(): string | null;
93
+ get firstRightPinnedKey(): string | null;
91
94
  get topSpacerHeight(): number;
92
95
  get bottomSpacerHeight(): number;
93
96
  get allSelected(): boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"data-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.component.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"data-grid.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.component.ts"],"names":[],"mappings":"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"}
@@ -370,6 +370,33 @@ let DataGridComponent = class DataGridComponent {
370
370
  }
371
371
  return 0;
372
372
  }
373
+ getPinnedRightOffset(key) {
374
+ let offset = 0;
375
+ for (let i = this.orderedColumns.length - 1; i >= 0; i--) {
376
+ const col = this.orderedColumns[i];
377
+ if (col.key === key)
378
+ return offset;
379
+ if (col.pinned === 'right') {
380
+ offset += this.columnWidths[col.key] ?? 150;
381
+ }
382
+ }
383
+ return 0;
384
+ }
385
+ get lastLeftPinnedKey() {
386
+ let key = null;
387
+ for (const col of this.orderedColumns) {
388
+ if (col.pinned === 'left')
389
+ key = col.key;
390
+ }
391
+ return key;
392
+ }
393
+ get firstRightPinnedKey() {
394
+ for (const col of this.orderedColumns) {
395
+ if (col.pinned === 'right')
396
+ return col.key;
397
+ }
398
+ return null;
399
+ }
373
400
  get topSpacerHeight() {
374
401
  return this.virtual ? this.startIndex * this.rowHeight : 0;
375
402
  }
@@ -259,7 +259,8 @@ export const dataGridStyles = () => css `
259
259
  position: relative;
260
260
  }
261
261
 
262
- .ml-data-grid__filter-cell--pinned-left {
262
+ .ml-data-grid__filter-cell--pinned-left,
263
+ .ml-data-grid__filter-cell--pinned-right {
263
264
  position: sticky;
264
265
  z-index: 3;
265
266
  background: var(--ml-data-grid-bg);
@@ -394,9 +395,9 @@ export const dataGridStyles = () => css `
394
395
  background: var(--ml-data-grid-header-bg);
395
396
  }
396
397
 
397
- /* Pinned left shadow */
398
- .ml-data-grid__th--pinned-left::after,
399
- .ml-data-grid__td--pinned-left::after {
398
+ /* Pinned left shadow — renders only on the rightmost (boundary) left-pinned cell */
399
+ .ml-data-grid__th--pinned-left-edge::after,
400
+ .ml-data-grid__td--pinned-left-edge::after {
400
401
  content: '';
401
402
  position: absolute;
402
403
  top: 0;
@@ -410,7 +411,6 @@ export const dataGridStyles = () => css `
410
411
  .ml-data-grid__th--pinned-right,
411
412
  .ml-data-grid__td--pinned-right {
412
413
  position: sticky;
413
- right: 0;
414
414
  z-index: 1;
415
415
  background: var(--ml-data-grid-bg);
416
416
  }
@@ -420,9 +420,9 @@ export const dataGridStyles = () => css `
420
420
  background: var(--ml-data-grid-header-bg);
421
421
  }
422
422
 
423
- /* Pinned right shadow */
424
- .ml-data-grid__th--pinned-right::before,
425
- .ml-data-grid__td--pinned-right::before {
423
+ /* Pinned right shadow — renders only on the leftmost (boundary) right-pinned cell */
424
+ .ml-data-grid__th--pinned-right-edge::before,
425
+ .ml-data-grid__td--pinned-right-edge::before {
426
426
  content: '';
427
427
  position: absolute;
428
428
  top: 0;
@@ -1 +1 @@
1
- {"version":3,"file":"data-grid.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AASlE,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,iBAAiB,6CA0NpD"}
1
+ {"version":3,"file":"data-grid.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/data-grid/data-grid.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAelE,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,iBAAiB,6CA+NpD"}
@@ -5,6 +5,13 @@ function renderCell(col, row, index) {
5
5
  const val = row[col.key];
6
6
  return val == null ? '' : val;
7
7
  }
8
+ function pinStyle(c, col) {
9
+ if (col.pinned === 'left')
10
+ return `left: ${c.getPinnedLeftOffset(col.key)}px`;
11
+ if (col.pinned === 'right')
12
+ return `right: ${c.getPinnedRightOffset(col.key)}px`;
13
+ return '';
14
+ }
8
15
  export function dataGridTemplate(c) {
9
16
  const gtc = c.gridTemplateColumns;
10
17
  const totalW = c.totalGridWidth;
@@ -54,11 +61,13 @@ export function dataGridTemplate(c) {
54
61
  'ml-data-grid__th--sorted': c.sortKey === col.key,
55
62
  'ml-data-grid__th--pinned-left': col.pinned === 'left',
56
63
  'ml-data-grid__th--pinned-right': col.pinned === 'right',
64
+ 'ml-data-grid__th--pinned-left-edge': col.key === c.lastLeftPinnedKey,
65
+ 'ml-data-grid__th--pinned-right-edge': col.key === c.firstRightPinnedKey,
57
66
  'ml-data-grid__th--drag-over': c.dragOverKey === col.key,
58
67
  'ml-data-grid__th--dragging': c.draggingKey === col.key,
59
68
  'ml-data-grid__th--resizing': c.resizingKey === col.key
60
69
  })}
61
- style=${col.pinned === 'left' ? `left: ${c.getPinnedLeftOffset(col.key)}px` : ''}
70
+ style=${pinStyle(c, col)}
62
71
  draggable=${col.reorderable !== false ? 'true' : 'false'}
63
72
  @dragstart=${(e) => c.handleDragStart(col.key, e)}
64
73
  @dragover=${(e) => c.handleDragOver(col.key, e)}
@@ -103,9 +112,10 @@ export function dataGridTemplate(c) {
103
112
  <div
104
113
  class=${classMap({
105
114
  'ml-data-grid__filter-cell': true,
106
- 'ml-data-grid__filter-cell--pinned-left': col.pinned === 'left'
115
+ 'ml-data-grid__filter-cell--pinned-left': col.pinned === 'left',
116
+ 'ml-data-grid__filter-cell--pinned-right': col.pinned === 'right'
107
117
  })}
108
- style=${col.pinned === 'left' ? `left: ${c.getPinnedLeftOffset(col.key)}px` : ''}
118
+ style=${pinStyle(c, col)}
109
119
  >
110
120
  ${when(!!col.filterable, () => html `
111
121
  <input
@@ -155,9 +165,11 @@ export function dataGridTemplate(c) {
155
165
  'ml-data-grid__td': true,
156
166
  [`ml-data-grid__td--${col.align ?? 'left'}`]: true,
157
167
  'ml-data-grid__td--pinned-left': col.pinned === 'left',
158
- 'ml-data-grid__td--pinned-right': col.pinned === 'right'
168
+ 'ml-data-grid__td--pinned-right': col.pinned === 'right',
169
+ 'ml-data-grid__td--pinned-left-edge': col.key === c.lastLeftPinnedKey,
170
+ 'ml-data-grid__td--pinned-right-edge': col.key === c.firstRightPinnedKey
159
171
  })}
160
- style=${col.pinned === 'left' ? `left: ${c.getPinnedLeftOffset(col.key)}px` : ''}
172
+ style=${pinStyle(c, col)}
161
173
  >
162
174
  ${renderCell(col, row, c.startIndex + i)}
163
175
  </div>
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA0NxB,CAAC"}
1
+ {"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dialog/dialog.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA2NxB,CAAC"}
@@ -47,7 +47,7 @@ export const dialogStyles = () => css `
47
47
  /* Dialog base */
48
48
  dialog.ml-dialog {
49
49
  position: fixed;
50
- display: flex;
50
+ display: none;
51
51
  flex-direction: column;
52
52
  width: 100%;
53
53
  max-width: var(--ml-dialog-max-width);
@@ -70,6 +70,7 @@ export const dialogStyles = () => css `
70
70
  }
71
71
 
72
72
  dialog.ml-dialog[open] {
73
+ display: flex;
73
74
  transform: scale(1) translateY(0);
74
75
  opacity: 1;
75
76
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@melodicdev/components",
3
- "version": "1.6.8",
3
+ "version": "1.6.10",
4
4
  "description": "Themeable UI component library built on the Melodic Framework",
5
5
  "license": "MIT",
6
6
  "author": "Melodic Development",