@beaconsoftware/b-report-table 1.0.0 → 1.1.0
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/dist/b-report-table-cell.d.ts +6 -2
- package/dist/b-report-table-cell.d.ts.map +1 -1
- package/dist/b-report-table-cell.js +24 -28
- package/dist/b-report-table-cell.js.map +1 -1
- package/dist/b-report-table-footer-cell.d.ts +6 -3
- package/dist/b-report-table-footer-cell.d.ts.map +1 -1
- package/dist/b-report-table-footer-cell.js +24 -49
- package/dist/b-report-table-footer-cell.js.map +1 -1
- package/dist/b-report-table-footer.d.ts.map +1 -1
- package/dist/b-report-table-footer.js +7 -0
- package/dist/b-report-table-footer.js.map +1 -1
- package/dist/b-report-table-header-cell.d.ts +6 -5
- package/dist/b-report-table-header-cell.d.ts.map +1 -1
- package/dist/b-report-table-header-cell.js +13 -53
- package/dist/b-report-table-header-cell.js.map +1 -1
- package/dist/b-report-table-header.d.ts.map +1 -1
- package/dist/b-report-table-header.js +7 -0
- package/dist/b-report-table-header.js.map +1 -1
- package/dist/b-report-table-row.d.ts.map +1 -1
- package/dist/b-report-table-row.js +1 -4
- package/dist/b-report-table-row.js.map +1 -1
- package/dist/b-report-table.d.ts +10 -0
- package/dist/b-report-table.d.ts.map +1 -1
- package/dist/b-report-table.js +53 -18
- package/dist/b-report-table.js.map +1 -1
- package/package.json +2 -2
- package/src/b-report-table-cell.ts +23 -29
- package/src/b-report-table-footer-cell.ts +23 -50
- package/src/b-report-table-footer.ts +7 -0
- package/src/b-report-table-header-cell.ts +10 -59
- package/src/b-report-table-header.ts +7 -0
- package/src/b-report-table-row.ts +1 -4
- package/src/b-report-table.ts +57 -20
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import type { ColumnStickyConfig } from './b-report-table.js';
|
|
2
3
|
/**
|
|
3
4
|
* A cell within a table body row.
|
|
4
5
|
*
|
|
@@ -7,10 +8,13 @@ import { LitElement } from 'lit';
|
|
|
7
8
|
export declare class BReportTableCell extends LitElement {
|
|
8
9
|
static styles: import("lit").CSSResult;
|
|
9
10
|
connectedCallback(): void;
|
|
10
|
-
disconnectedCallback(): void;
|
|
11
11
|
private _findTable;
|
|
12
12
|
private _applyInitialConfig;
|
|
13
|
-
|
|
13
|
+
/**
|
|
14
|
+
* Public method called by the table to apply column configurations.
|
|
15
|
+
* This is the primary way cells receive sticky column updates.
|
|
16
|
+
*/
|
|
17
|
+
applyColumnConfigs(configs: ColumnStickyConfig[]): void;
|
|
14
18
|
private _applyConfig;
|
|
15
19
|
private _getColumnIndex;
|
|
16
20
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-cell.d.ts","sourceRoot":"","sources":["../src/b-report-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"b-report-table-cell.d.ts","sourceRoot":"","sources":["../src/b-report-table-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D;;;;GAIG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,MAAM,CAAC,MAAM,0BAqBX;IAGF,iBAAiB,IAAI,IAAI;IAQzB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,mBAAmB;IAgB3B;;;OAGG;IACH,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,EAAE,GAAG,IAAI;IAIvD,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,eAAe;IAOvB,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,gBAAgB,CAAC;KACzC;CACF"}
|
|
@@ -12,25 +12,12 @@ import { customElement } from 'lit/decorators.js';
|
|
|
12
12
|
* @slot - Default slot for cell content
|
|
13
13
|
*/
|
|
14
14
|
let BReportTableCell = class BReportTableCell extends LitElement {
|
|
15
|
-
constructor() {
|
|
16
|
-
super(...arguments);
|
|
17
|
-
this._handleConfigChange = (event) => {
|
|
18
|
-
const customEvent = event;
|
|
19
|
-
this._applyConfig(customEvent.detail.configs);
|
|
20
|
-
};
|
|
21
|
-
}
|
|
22
15
|
connectedCallback() {
|
|
23
16
|
super.connectedCallback();
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
this._applyInitialConfig();
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
disconnectedCallback() {
|
|
32
|
-
super.disconnectedCallback();
|
|
33
|
-
this._findTable()?.removeEventListener('column-config-change', this._handleConfigChange);
|
|
17
|
+
// Check if configs are already available when cell connects
|
|
18
|
+
// Use requestAnimationFrame to ensure the cell is fully in the DOM tree
|
|
19
|
+
// (handles case where cell is added to a row before row is added to table)
|
|
20
|
+
this._applyInitialConfig();
|
|
34
21
|
}
|
|
35
22
|
_findTable() {
|
|
36
23
|
return this.closest('b-report-table');
|
|
@@ -40,6 +27,23 @@ let BReportTableCell = class BReportTableCell extends LitElement {
|
|
|
40
27
|
if (table?.columnConfigs) {
|
|
41
28
|
this._applyConfig(table.columnConfigs);
|
|
42
29
|
}
|
|
30
|
+
else {
|
|
31
|
+
// Table not found yet - retry on next frame
|
|
32
|
+
// This handles the case where cell is added to row before row is added to body
|
|
33
|
+
requestAnimationFrame(() => {
|
|
34
|
+
const table = this._findTable();
|
|
35
|
+
if (table?.columnConfigs) {
|
|
36
|
+
this._applyConfig(table.columnConfigs);
|
|
37
|
+
}
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* Public method called by the table to apply column configurations.
|
|
43
|
+
* This is the primary way cells receive sticky column updates.
|
|
44
|
+
*/
|
|
45
|
+
applyColumnConfigs(configs) {
|
|
46
|
+
this._applyConfig(configs);
|
|
43
47
|
}
|
|
44
48
|
_applyConfig(configs) {
|
|
45
49
|
const index = this._getColumnIndex();
|
|
@@ -67,33 +71,25 @@ let BReportTableCell = class BReportTableCell extends LitElement {
|
|
|
67
71
|
}
|
|
68
72
|
};
|
|
69
73
|
BReportTableCell.styles = css `
|
|
74
|
+
/* Required for table structure */
|
|
70
75
|
:host {
|
|
71
76
|
display: table-cell;
|
|
72
|
-
padding: 12px 16px;
|
|
73
|
-
border-bottom: 1px solid #e2e8f0;
|
|
74
|
-
background: inherit;
|
|
75
77
|
}
|
|
76
78
|
|
|
79
|
+
/* Required for horizontal sticky columns */
|
|
77
80
|
:host([data-sticky='left']),
|
|
78
81
|
:host([data-sticky='right']) {
|
|
79
82
|
position: sticky;
|
|
80
83
|
z-index: 1;
|
|
81
|
-
background: #fff;
|
|
84
|
+
background: var(--b-report-table-cell-sticky-bg, #fff);
|
|
82
85
|
}
|
|
83
86
|
|
|
84
87
|
:host([data-sticky='left']) {
|
|
85
88
|
left: var(--sticky-offset, 0px);
|
|
86
|
-
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
87
89
|
}
|
|
88
90
|
|
|
89
91
|
:host([data-sticky='right']) {
|
|
90
92
|
right: var(--sticky-offset, 0px);
|
|
91
|
-
box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
:host-context(b-report-table-row:hover)[data-sticky='left'],
|
|
95
|
-
:host-context(b-report-table-row:hover)[data-sticky='right'] {
|
|
96
|
-
background: #f8fafc;
|
|
97
93
|
}
|
|
98
94
|
`;
|
|
99
95
|
BReportTableCell = __decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-cell.js","sourceRoot":"","sources":["../src/b-report-table-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD;;;;GAIG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"b-report-table-cell.js","sourceRoot":"","sources":["../src/b-report-table-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD;;;;GAIG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAyB9C,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4DAA4D;QAC5D,wEAAwE;QACxE,2EAA2E;QAC3E,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,CAAC;IAEO,mBAAmB;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAS,CAAC;QACvC,IAAI,KAAK,EAAE,aAAa,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,4CAA4C;YAC5C,+EAA+E;YAC/E,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAS,CAAC;gBACvC,IAAI,KAAK,EAAE,aAAa,EAAE,CAAC;oBACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;gBACzC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,kBAAkB,CAAC,OAA6B;QAC9C,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAEO,YAAY,CAAC,OAA6B;QAChD,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAEtD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;gBAClB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC;YAClE,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;gBACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC;QAC/B,IAAI,CAAC,GAAG;YAAE,OAAO,CAAC,CAAC,CAAC;QACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC;QACtE,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AApFM,uBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBlB,AArBY,CAqBX;AAtBS,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CAsF5B"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import type { ColumnStickyConfig } from './b-report-table.js';
|
|
2
3
|
/**
|
|
3
4
|
* A cell within a table footer row.
|
|
4
5
|
* Inherits sticky behavior from corresponding header columns.
|
|
@@ -8,11 +9,13 @@ import { LitElement } from 'lit';
|
|
|
8
9
|
export declare class BReportTableFooterCell extends LitElement {
|
|
9
10
|
static styles: import("lit").CSSResult;
|
|
10
11
|
connectedCallback(): void;
|
|
11
|
-
private _updateVerticalSticky;
|
|
12
|
-
disconnectedCallback(): void;
|
|
13
12
|
private _findTable;
|
|
14
13
|
private _applyInitialConfig;
|
|
15
|
-
|
|
14
|
+
/**
|
|
15
|
+
* Public method called by the table to apply column configurations.
|
|
16
|
+
* This is the primary way cells receive sticky column updates.
|
|
17
|
+
*/
|
|
18
|
+
applyColumnConfigs(configs: ColumnStickyConfig[]): void;
|
|
16
19
|
private _applyConfig;
|
|
17
20
|
private _getColumnIndex;
|
|
18
21
|
render(): import("lit-html").TemplateResult<1>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-footer-cell.d.ts","sourceRoot":"","sources":["../src/b-report-table-footer-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"b-report-table-footer-cell.d.ts","sourceRoot":"","sources":["../src/b-report-table-footer-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D;;;;;GAKG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,0BAqBX;IAGF,iBAAiB,IAAI,IAAI;IAQzB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,mBAAmB;IAgB3B;;;OAGG;IACH,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,EAAE,GAAG,IAAI;IAIvD,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,eAAe;IAOvB,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAC;KACtD;CACF"}
|
|
@@ -13,36 +13,12 @@ import { customElement } from 'lit/decorators.js';
|
|
|
13
13
|
* @slot - Default slot for cell content
|
|
14
14
|
*/
|
|
15
15
|
let BReportTableFooterCell = class BReportTableFooterCell extends LitElement {
|
|
16
|
-
constructor() {
|
|
17
|
-
super(...arguments);
|
|
18
|
-
this._handleConfigChange = (event) => {
|
|
19
|
-
const customEvent = event;
|
|
20
|
-
this._applyConfig(customEvent.detail.configs);
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
16
|
connectedCallback() {
|
|
24
17
|
super.connectedCallback();
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
this._applyInitialConfig();
|
|
30
|
-
}
|
|
31
|
-
// Check if parent footer has sticky attribute
|
|
32
|
-
this._updateVerticalSticky();
|
|
33
|
-
}
|
|
34
|
-
_updateVerticalSticky() {
|
|
35
|
-
const footer = this.closest('b-report-table-footer');
|
|
36
|
-
if (footer?.hasAttribute('sticky')) {
|
|
37
|
-
this.setAttribute('data-sticky-bottom', '');
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
this.removeAttribute('data-sticky-bottom');
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
disconnectedCallback() {
|
|
44
|
-
super.disconnectedCallback();
|
|
45
|
-
this._findTable()?.removeEventListener('column-config-change', this._handleConfigChange);
|
|
18
|
+
// Check if configs are already available when cell connects
|
|
19
|
+
// Use requestAnimationFrame to ensure the cell is fully in the DOM tree
|
|
20
|
+
// (handles case where cell is added to a row before row is added to table)
|
|
21
|
+
this._applyInitialConfig();
|
|
46
22
|
}
|
|
47
23
|
_findTable() {
|
|
48
24
|
return this.closest('b-report-table');
|
|
@@ -52,6 +28,23 @@ let BReportTableFooterCell = class BReportTableFooterCell extends LitElement {
|
|
|
52
28
|
if (table?.columnConfigs) {
|
|
53
29
|
this._applyConfig(table.columnConfigs);
|
|
54
30
|
}
|
|
31
|
+
else {
|
|
32
|
+
// Table not found yet - retry on next frame
|
|
33
|
+
// This handles the case where cell is added to row before row is added to body
|
|
34
|
+
requestAnimationFrame(() => {
|
|
35
|
+
const table = this._findTable();
|
|
36
|
+
if (table?.columnConfigs) {
|
|
37
|
+
this._applyConfig(table.columnConfigs);
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
/**
|
|
43
|
+
* Public method called by the table to apply column configurations.
|
|
44
|
+
* This is the primary way cells receive sticky column updates.
|
|
45
|
+
*/
|
|
46
|
+
applyColumnConfigs(configs) {
|
|
47
|
+
this._applyConfig(configs);
|
|
55
48
|
}
|
|
56
49
|
_applyConfig(configs) {
|
|
57
50
|
const index = this._getColumnIndex();
|
|
@@ -79,43 +72,25 @@ let BReportTableFooterCell = class BReportTableFooterCell extends LitElement {
|
|
|
79
72
|
}
|
|
80
73
|
};
|
|
81
74
|
BReportTableFooterCell.styles = css `
|
|
75
|
+
/* Required for table structure */
|
|
82
76
|
:host {
|
|
83
77
|
display: table-cell;
|
|
84
|
-
padding: 12px 16px;
|
|
85
|
-
font-weight: 600;
|
|
86
|
-
background: #f8fafc;
|
|
87
|
-
border-top: 2px solid #e2e8f0;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
/* Vertical sticky (when parent footer has sticky attribute) */
|
|
91
|
-
:host([data-sticky-bottom]) {
|
|
92
|
-
position: sticky;
|
|
93
|
-
bottom: 0;
|
|
94
|
-
z-index: 2;
|
|
95
78
|
}
|
|
96
79
|
|
|
97
|
-
/*
|
|
80
|
+
/* Required for horizontal sticky columns */
|
|
98
81
|
:host([data-sticky='left']),
|
|
99
82
|
:host([data-sticky='right']) {
|
|
100
83
|
position: sticky;
|
|
101
84
|
z-index: 2;
|
|
102
|
-
background: #
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
/* Both vertical and horizontal sticky */
|
|
106
|
-
:host([data-sticky-bottom][data-sticky='left']),
|
|
107
|
-
:host([data-sticky-bottom][data-sticky='right']) {
|
|
108
|
-
z-index: 4;
|
|
85
|
+
background: var(--b-report-table-footer-cell-sticky-bg, var(--b-report-table-footer-bg, #fff));
|
|
109
86
|
}
|
|
110
87
|
|
|
111
88
|
:host([data-sticky='left']) {
|
|
112
89
|
left: var(--sticky-offset, 0px);
|
|
113
|
-
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
114
90
|
}
|
|
115
91
|
|
|
116
92
|
:host([data-sticky='right']) {
|
|
117
93
|
right: var(--sticky-offset, 0px);
|
|
118
|
-
box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
119
94
|
}
|
|
120
95
|
`;
|
|
121
96
|
BReportTableFooterCell = __decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-footer-cell.js","sourceRoot":"","sources":["../src/b-report-table-footer-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD;;;;;GAKG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"b-report-table-footer-cell.js","sourceRoot":"","sources":["../src/b-report-table-footer-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD;;;;;GAKG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAyBpD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,4DAA4D;QAC5D,wEAAwE;QACxE,2EAA2E;QAC3E,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC7B,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACxC,CAAC;IAEO,mBAAmB;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAS,CAAC;QACvC,IAAI,KAAK,EAAE,aAAa,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QACzC,CAAC;aAAM,CAAC;YACN,4CAA4C;YAC5C,+EAA+E;YAC/E,qBAAqB,CAAC,GAAG,EAAE;gBACzB,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,EAAS,CAAC;gBACvC,IAAI,KAAK,EAAE,aAAa,EAAE,CAAC;oBACzB,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;gBACzC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;;OAGG;IACH,kBAAkB,CAAC,OAA6B;QAC9C,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC7B,CAAC;IAEO,YAAY,CAAC,OAA6B;QAChD,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAEtD,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;gBAClB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,MAAM,CAAC,CAAC;gBAChD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC;YAClE,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC;gBACpC,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC;YAC/C,CAAC;QACH,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC;QAC/B,IAAI,CAAC,GAAG;YAAE,OAAO,CAAC,CAAC,CAAC;QACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CAAC,CAAC;QAC7E,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AApFM,6BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBlB,AArBY,CAqBX;AAtBS,sBAAsB;IADlC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,sBAAsB,CAsFlC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-footer.d.ts","sourceRoot":"","sources":["../src/b-report-table-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;GAIG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"b-report-table-footer.d.ts","sourceRoot":"","sources":["../src/b-report-table-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;GAIG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,0BAWX;IAEF;;OAEG;IAEH,MAAM,UAAS;IAEf,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}
|
|
@@ -27,6 +27,13 @@ BReportTableFooter.styles = css `
|
|
|
27
27
|
:host {
|
|
28
28
|
display: table-footer-group;
|
|
29
29
|
}
|
|
30
|
+
|
|
31
|
+
:host([sticky]) {
|
|
32
|
+
position: sticky;
|
|
33
|
+
bottom: 0;
|
|
34
|
+
z-index: 10;
|
|
35
|
+
background: var(--b-report-table-footer-bg, #fff);
|
|
36
|
+
}
|
|
30
37
|
`;
|
|
31
38
|
__decorate([
|
|
32
39
|
property({ type: Boolean, reflect: true })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-footer.js","sourceRoot":"","sources":["../src/b-report-table-footer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;GAIG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;
|
|
1
|
+
{"version":3,"file":"b-report-table-footer.js","sourceRoot":"","sources":["../src/b-report-table-footer.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;GAIG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;QAcL;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;IAKjB,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AArBM,yBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;GAWlB,AAXY,CAWX;AAMF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAC5B;AAlBJ,kBAAkB;IAD9B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,kBAAkB,CAuB9B"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LitElement } from 'lit';
|
|
2
|
+
import type { ColumnStickyConfig } from './b-report-table.js';
|
|
2
3
|
/**
|
|
3
4
|
* A header cell within a table header row.
|
|
4
5
|
*
|
|
@@ -14,11 +15,11 @@ export declare class BReportTableHeaderCell extends LitElement {
|
|
|
14
15
|
*/
|
|
15
16
|
sticky: 'left' | 'right' | null;
|
|
16
17
|
private _offset;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
18
|
+
/**
|
|
19
|
+
* Public method called by the table to apply column configurations.
|
|
20
|
+
* This updates the sticky offset for header cells.
|
|
21
|
+
*/
|
|
22
|
+
applyColumnConfigs(configs: ColumnStickyConfig[]): void;
|
|
22
23
|
private _getColumnIndex;
|
|
23
24
|
render(): import("lit-html").TemplateResult<1>;
|
|
24
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-header-cell.d.ts","sourceRoot":"","sources":["../src/b-report-table-header-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"b-report-table-header-cell.d.ts","sourceRoot":"","sources":["../src/b-report-table-header-cell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAC;AAE9D;;;;GAIG;AACH,qBACa,sBAAuB,SAAQ,UAAU;IACpD,MAAM,CAAC,MAAM,0BAqBX;IAEF;;;;;OAKG;IAEH,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAQ;IAGvC,OAAO,CAAC,OAAO,CAAK;IAEpB;;;OAGG;IACH,kBAAkB,CAAC,OAAO,EAAE,kBAAkB,EAAE,GAAG,IAAI;IAUvD,OAAO,CAAC,eAAe;IASvB,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,4BAA4B,EAAE,sBAAsB,CAAC;KACtD;CACF"}
|
|
@@ -22,39 +22,19 @@ let BReportTableHeaderCell = class BReportTableHeaderCell extends LitElement {
|
|
|
22
22
|
*/
|
|
23
23
|
this.sticky = null;
|
|
24
24
|
this._offset = 0;
|
|
25
|
-
this._handleConfigChange = (event) => {
|
|
26
|
-
const customEvent = event;
|
|
27
|
-
const configs = customEvent.detail.configs;
|
|
28
|
-
const index = this._getColumnIndex();
|
|
29
|
-
const config = configs.find((c) => c.index === index);
|
|
30
|
-
if (config && config.sticky) {
|
|
31
|
-
this._offset = config.offset;
|
|
32
|
-
this.style.setProperty('--sticky-offset', `${this._offset}px`);
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
25
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
this.
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
this.removeAttribute('data-sticky-top');
|
|
26
|
+
/**
|
|
27
|
+
* Public method called by the table to apply column configurations.
|
|
28
|
+
* This updates the sticky offset for header cells.
|
|
29
|
+
*/
|
|
30
|
+
applyColumnConfigs(configs) {
|
|
31
|
+
const index = this._getColumnIndex();
|
|
32
|
+
const config = configs.find((c) => c.index === index);
|
|
33
|
+
if (config && config.sticky) {
|
|
34
|
+
this._offset = config.offset;
|
|
35
|
+
this.style.setProperty('--sticky-offset', `${this._offset}px`);
|
|
49
36
|
}
|
|
50
37
|
}
|
|
51
|
-
disconnectedCallback() {
|
|
52
|
-
super.disconnectedCallback();
|
|
53
|
-
this._findTable()?.removeEventListener('column-config-change', this._handleConfigChange);
|
|
54
|
-
}
|
|
55
|
-
_findTable() {
|
|
56
|
-
return this.closest('b-report-table');
|
|
57
|
-
}
|
|
58
38
|
_getColumnIndex() {
|
|
59
39
|
const row = this.parentElement;
|
|
60
40
|
if (!row)
|
|
@@ -67,45 +47,25 @@ let BReportTableHeaderCell = class BReportTableHeaderCell extends LitElement {
|
|
|
67
47
|
}
|
|
68
48
|
};
|
|
69
49
|
BReportTableHeaderCell.styles = css `
|
|
50
|
+
/* Required for table structure */
|
|
70
51
|
:host {
|
|
71
52
|
display: table-cell;
|
|
72
|
-
padding: 12px 16px;
|
|
73
|
-
text-align: left;
|
|
74
|
-
font-weight: 600;
|
|
75
|
-
background: #f8fafc;
|
|
76
|
-
border-bottom: 2px solid #e2e8f0;
|
|
77
|
-
white-space: nowrap;
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
/* Vertical sticky (when parent header has sticky attribute) */
|
|
81
|
-
:host([data-sticky-top]) {
|
|
82
|
-
position: sticky;
|
|
83
|
-
top: 0;
|
|
84
|
-
z-index: 2;
|
|
85
53
|
}
|
|
86
54
|
|
|
87
|
-
/*
|
|
55
|
+
/* Required for horizontal sticky columns */
|
|
88
56
|
:host([sticky='left']),
|
|
89
57
|
:host([sticky='right']) {
|
|
90
58
|
position: sticky;
|
|
91
59
|
z-index: 2;
|
|
92
|
-
background: #
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
/* Both vertical and horizontal sticky */
|
|
96
|
-
:host([data-sticky-top][sticky='left']),
|
|
97
|
-
:host([data-sticky-top][sticky='right']) {
|
|
98
|
-
z-index: 4;
|
|
60
|
+
background: var(--b-report-table-header-cell-sticky-bg, var(--b-report-table-header-bg, #fff));
|
|
99
61
|
}
|
|
100
62
|
|
|
101
63
|
:host([sticky='left']) {
|
|
102
64
|
left: var(--sticky-offset, 0px);
|
|
103
|
-
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
104
65
|
}
|
|
105
66
|
|
|
106
67
|
:host([sticky='right']) {
|
|
107
68
|
right: var(--sticky-offset, 0px);
|
|
108
|
-
box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
109
69
|
}
|
|
110
70
|
`;
|
|
111
71
|
__decorate([
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-header-cell.js","sourceRoot":"","sources":["../src/b-report-table-header-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGnE;;;;GAIG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAA/C;;
|
|
1
|
+
{"version":3,"file":"b-report-table-header-cell.js","sourceRoot":"","sources":["../src/b-report-table-header-cell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAGnE;;;;GAIG;AAEI,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAA/C;;QAwBL;;;;;WAKG;QAEH,WAAM,GAA4B,IAAI,CAAC;QAG/B,YAAO,GAAG,CAAC,CAAC;IA4BtB,CAAC;IA1BC;;;OAGG;IACH,kBAAkB,CAAC,OAA6B;QAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACrC,MAAM,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAEtD,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,CAAC;YAC5B,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC;YAC7B,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;QACjE,CAAC;IACH,CAAC;IAEO,eAAe;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC;QAC/B,IAAI,CAAC,GAAG;YAAE,OAAO,CAAC,CAAC,CAAC;QACpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,GAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAC,CACnD,CAAC;QACF,OAAO,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AA5DM,6BAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;GAqBlB,AArBY,CAqBX;AASF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACH;AAG/B;IADP,KAAK,EAAE;uDACY;AAlCT,sBAAsB;IADlC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,sBAAsB,CA8DlC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-header.d.ts","sourceRoot":"","sources":["../src/b-report-table-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;GAIG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"b-report-table-header.d.ts","sourceRoot":"","sources":["../src/b-report-table-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;GAIG;AACH,qBACa,kBAAmB,SAAQ,UAAU;IAChD,MAAM,CAAC,MAAM,0BAWX;IAEF;;OAEG;IAEH,MAAM,UAAS;IAEf,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEzC,iBAAiB,IAAI,IAAI;IASzB,oBAAoB,IAAI,IAAI;IAK5B,OAAO,CAAC,oBAAoB;IAO5B,OAAO,CAAC,uBAAuB;IAoE/B,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,kBAAkB,CAAC;KAC7C;CACF"}
|
|
@@ -103,6 +103,13 @@ BReportTableHeader.styles = css `
|
|
|
103
103
|
:host {
|
|
104
104
|
display: table-header-group;
|
|
105
105
|
}
|
|
106
|
+
|
|
107
|
+
:host([sticky]) {
|
|
108
|
+
position: sticky;
|
|
109
|
+
top: 0;
|
|
110
|
+
z-index: 10;
|
|
111
|
+
background: var(--b-report-table-header-bg, #fff);
|
|
112
|
+
}
|
|
106
113
|
`;
|
|
107
114
|
__decorate([
|
|
108
115
|
property({ type: Boolean, reflect: true })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-header.js","sourceRoot":"","sources":["../src/b-report-table-header.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAI5D;;;;GAIG;AAEI,IAAM,kBAAkB,GAAxB,MAAM,kBAAmB,SAAQ,UAAU;IAA3C;;
|
|
1
|
+
{"version":3,"file":"b-report-table-header.js","sourceRoot":"","sources":["../src/b-report-table-header.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-row.d.ts","sourceRoot":"","sources":["../src/b-report-table-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"b-report-table-row.d.ts","sourceRoot":"","sources":["../src/b-report-table-row.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C;;;;GAIG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,MAAM,CAAC,MAAM,0BAKX;IAEF,MAAM;CAGP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}
|
|
@@ -17,13 +17,10 @@ let BReportTableRow = class BReportTableRow extends LitElement {
|
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
19
|
BReportTableRow.styles = css `
|
|
20
|
+
/* Required for table structure */
|
|
20
21
|
:host {
|
|
21
22
|
display: table-row;
|
|
22
23
|
}
|
|
23
|
-
|
|
24
|
-
:host(:hover) {
|
|
25
|
-
background: #f8fafc;
|
|
26
|
-
}
|
|
27
24
|
`;
|
|
28
25
|
BReportTableRow = __decorate([
|
|
29
26
|
customElement('b-report-table-row')
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table-row.js","sourceRoot":"","sources":["../src/b-report-table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;
|
|
1
|
+
{"version":3,"file":"b-report-table-row.js","sourceRoot":"","sources":["../src/b-report-table-row.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD;;;;GAIG;AAEI,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAQ7C,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;;AATM,sBAAM,GAAG,GAAG,CAAA;;;;;GAKlB,AALY,CAKX;AANS,eAAe;IAD3B,aAAa,CAAC,oBAAoB,CAAC;GACvB,eAAe,CAW3B"}
|
package/dist/b-report-table.d.ts
CHANGED
|
@@ -11,9 +11,19 @@ export interface ColumnStickyConfig {
|
|
|
11
11
|
* @slot header - The table header (b-report-table-header)
|
|
12
12
|
* @slot - Default slot for table body (b-report-table-body)
|
|
13
13
|
* @slot footer - The table footer (b-report-table-footer)
|
|
14
|
+
*
|
|
15
|
+
* @csspart scroll-container - The scrollable container wrapping the table
|
|
16
|
+
* @csspart table - The table element
|
|
14
17
|
*/
|
|
15
18
|
export declare class BReportTable extends LitElement {
|
|
16
19
|
static styles: import("lit").CSSResult;
|
|
20
|
+
/**
|
|
21
|
+
* Maximum height of the table scroll container.
|
|
22
|
+
* Can be any valid CSS height value (e.g., '500px', '80vh', '100%').
|
|
23
|
+
* When content exceeds this height, the container becomes scrollable
|
|
24
|
+
* and sticky headers/footers will work.
|
|
25
|
+
*/
|
|
26
|
+
maxHeight: string;
|
|
17
27
|
private _columnConfigs;
|
|
18
28
|
get columnConfigs(): ColumnStickyConfig[];
|
|
19
29
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table.d.ts","sourceRoot":"","sources":["../src/b-report-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"b-report-table.d.ts","sourceRoot":"","sources":["../src/b-report-table.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAM5C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;GASG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,MAAM,CAAC,MAAM,0BAsBX;IAEF;;;;;OAKG;IAEH,SAAS,SAAU;IAGnB,OAAO,CAAC,cAAc,CAA4B;IAElD,IAAI,aAAa,IAAI,kBAAkB,EAAE,CAExC;IAED;;;OAGG;IACH,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,EAAE,GAAG,IAAI;IAKxD,OAAO,CAAC,eAAe;IAoBvB,MAAM;CAgBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}
|
package/dist/b-report-table.js
CHANGED
|
@@ -5,17 +5,27 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
7
|
import { LitElement, html, css } from 'lit';
|
|
8
|
-
import { customElement, state } from 'lit/decorators.js';
|
|
8
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
9
9
|
/**
|
|
10
10
|
* A report table component with support for sticky headers, footers, and columns.
|
|
11
11
|
*
|
|
12
12
|
* @slot header - The table header (b-report-table-header)
|
|
13
13
|
* @slot - Default slot for table body (b-report-table-body)
|
|
14
14
|
* @slot footer - The table footer (b-report-table-footer)
|
|
15
|
+
*
|
|
16
|
+
* @csspart scroll-container - The scrollable container wrapping the table
|
|
17
|
+
* @csspart table - The table element
|
|
15
18
|
*/
|
|
16
19
|
let BReportTable = class BReportTable extends LitElement {
|
|
17
20
|
constructor() {
|
|
18
21
|
super(...arguments);
|
|
22
|
+
/**
|
|
23
|
+
* Maximum height of the table scroll container.
|
|
24
|
+
* Can be any valid CSS height value (e.g., '500px', '80vh', '100%').
|
|
25
|
+
* When content exceeds this height, the container becomes scrollable
|
|
26
|
+
* and sticky headers/footers will work.
|
|
27
|
+
*/
|
|
28
|
+
this.maxHeight = '100%';
|
|
19
29
|
this._columnConfigs = [];
|
|
20
30
|
}
|
|
21
31
|
get columnConfigs() {
|
|
@@ -30,40 +40,65 @@ let BReportTable = class BReportTable extends LitElement {
|
|
|
30
40
|
this._notifyChildren();
|
|
31
41
|
}
|
|
32
42
|
_notifyChildren() {
|
|
33
|
-
//
|
|
34
|
-
this.
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
// Directly notify all header cells (for offset updates)
|
|
44
|
+
const headerCells = this.querySelectorAll('b-report-table-header-cell');
|
|
45
|
+
headerCells.forEach((cell) => {
|
|
46
|
+
cell.applyColumnConfigs(this._columnConfigs);
|
|
47
|
+
});
|
|
48
|
+
// Directly notify all body cells
|
|
49
|
+
const bodyCells = this.querySelectorAll('b-report-table-cell');
|
|
50
|
+
bodyCells.forEach((cell) => {
|
|
51
|
+
cell.applyColumnConfigs(this._columnConfigs);
|
|
52
|
+
});
|
|
53
|
+
// Directly notify all footer cells
|
|
54
|
+
const footerCells = this.querySelectorAll('b-report-table-footer-cell');
|
|
55
|
+
footerCells.forEach((cell) => {
|
|
56
|
+
cell.applyColumnConfigs(this._columnConfigs);
|
|
57
|
+
});
|
|
39
58
|
}
|
|
40
59
|
render() {
|
|
60
|
+
const style = this.maxHeight !== '100%' ? `--table-max-height: ${this.maxHeight}` : '';
|
|
41
61
|
return html `
|
|
42
|
-
<
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
62
|
+
<div
|
|
63
|
+
class="scroll-container"
|
|
64
|
+
part="scroll-container"
|
|
65
|
+
style="${style}"
|
|
66
|
+
>
|
|
67
|
+
<div class="table" role="table" part="table">
|
|
68
|
+
<slot name="header"></slot>
|
|
69
|
+
<slot></slot>
|
|
70
|
+
<slot name="footer"></slot>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
47
73
|
`;
|
|
48
74
|
}
|
|
49
75
|
};
|
|
50
76
|
BReportTable.styles = css `
|
|
77
|
+
/* Required for table structure */
|
|
51
78
|
:host {
|
|
52
79
|
display: block;
|
|
53
80
|
}
|
|
54
81
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
82
|
+
.scroll-container {
|
|
83
|
+
position: relative;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
:host([max-height]) .scroll-container {
|
|
87
|
+
overflow: auto;
|
|
88
|
+
max-height: var(--table-max-height);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.table {
|
|
92
|
+
display: table;
|
|
61
93
|
}
|
|
62
94
|
|
|
63
95
|
::slotted(*) {
|
|
64
96
|
display: table-row-group;
|
|
65
97
|
}
|
|
66
98
|
`;
|
|
99
|
+
__decorate([
|
|
100
|
+
property({ type: String, attribute: 'max-height' })
|
|
101
|
+
], BReportTable.prototype, "maxHeight", void 0);
|
|
67
102
|
__decorate([
|
|
68
103
|
state()
|
|
69
104
|
], BReportTable.prototype, "_columnConfigs", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"b-report-table.js","sourceRoot":"","sources":["../src/b-report-table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"b-report-table.js","sourceRoot":"","sources":["../src/b-report-table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAYnE;;;;;;;;;GASG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,UAAU;IAArC;;QAyBL;;;;;WAKG;QAEH,cAAS,GAAG,MAAM,CAAC;QAGX,mBAAc,GAAyB,EAAE,CAAC;IAmDpD,CAAC;IAjDC,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,cAAc,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACH,mBAAmB,CAAC,OAA6B;QAC/C,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC;QAC9B,IAAI,CAAC,eAAe,EAAE,CAAC;IACzB,CAAC;IAEO,eAAe;QACrB,wDAAwD;QACxD,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,4BAA4B,CAAuC,CAAC;QAC9G,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEH,iCAAiC;QACjC,MAAM,SAAS,GAAG,IAAI,CAAC,gBAAgB,CAAC,qBAAqB,CAAiC,CAAC;QAC/F,SAAS,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YACzB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEH,mCAAmC;QACnC,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,CAAC,4BAA4B,CAAuC,CAAC;QAC9G,WAAW,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC3B,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QACvF,OAAO,IAAI,CAAA;;;;iBAIE,KAAK;;;;;;;;KAQjB,CAAC;IACJ,CAAC;;AApFM,mBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;GAsBlB,AAtBY,CAsBX;AASF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;+CACjC;AAGX;IADP,KAAK,EAAE;oDAC0C;AAnCvC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAsFxB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@beaconsoftware/b-report-table",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A report table web component with sticky headers, footers, and columns",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -38,4 +38,4 @@
|
|
|
38
38
|
"publishConfig": {
|
|
39
39
|
"access": "public"
|
|
40
40
|
}
|
|
41
|
-
}
|
|
41
|
+
}
|
|
@@ -10,53 +10,35 @@ import type { ColumnStickyConfig } from './b-report-table.js';
|
|
|
10
10
|
@customElement('b-report-table-cell')
|
|
11
11
|
export class BReportTableCell extends LitElement {
|
|
12
12
|
static styles = css`
|
|
13
|
+
/* Required for table structure */
|
|
13
14
|
:host {
|
|
14
15
|
display: table-cell;
|
|
15
|
-
padding: 12px 16px;
|
|
16
|
-
border-bottom: 1px solid #e2e8f0;
|
|
17
|
-
background: inherit;
|
|
18
16
|
}
|
|
19
17
|
|
|
18
|
+
/* Required for horizontal sticky columns */
|
|
20
19
|
:host([data-sticky='left']),
|
|
21
20
|
:host([data-sticky='right']) {
|
|
22
21
|
position: sticky;
|
|
23
22
|
z-index: 1;
|
|
24
|
-
background: #fff;
|
|
23
|
+
background: var(--b-report-table-cell-sticky-bg, #fff);
|
|
25
24
|
}
|
|
26
25
|
|
|
27
26
|
:host([data-sticky='left']) {
|
|
28
27
|
left: var(--sticky-offset, 0px);
|
|
29
|
-
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
30
28
|
}
|
|
31
29
|
|
|
32
30
|
:host([data-sticky='right']) {
|
|
33
31
|
right: var(--sticky-offset, 0px);
|
|
34
|
-
box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
:host-context(b-report-table-row:hover)[data-sticky='left'],
|
|
38
|
-
:host-context(b-report-table-row:hover)[data-sticky='right'] {
|
|
39
|
-
background: #f8fafc;
|
|
40
32
|
}
|
|
41
33
|
`;
|
|
42
34
|
|
|
43
35
|
|
|
44
36
|
connectedCallback(): void {
|
|
45
37
|
super.connectedCallback();
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
this._applyInitialConfig();
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
disconnectedCallback(): void {
|
|
55
|
-
super.disconnectedCallback();
|
|
56
|
-
this._findTable()?.removeEventListener(
|
|
57
|
-
'column-config-change',
|
|
58
|
-
this._handleConfigChange
|
|
59
|
-
);
|
|
38
|
+
// Check if configs are already available when cell connects
|
|
39
|
+
// Use requestAnimationFrame to ensure the cell is fully in the DOM tree
|
|
40
|
+
// (handles case where cell is added to a row before row is added to table)
|
|
41
|
+
this._applyInitialConfig();
|
|
60
42
|
}
|
|
61
43
|
|
|
62
44
|
private _findTable(): HTMLElement | null {
|
|
@@ -67,13 +49,25 @@ export class BReportTableCell extends LitElement {
|
|
|
67
49
|
const table = this._findTable() as any;
|
|
68
50
|
if (table?.columnConfigs) {
|
|
69
51
|
this._applyConfig(table.columnConfigs);
|
|
52
|
+
} else {
|
|
53
|
+
// Table not found yet - retry on next frame
|
|
54
|
+
// This handles the case where cell is added to row before row is added to body
|
|
55
|
+
requestAnimationFrame(() => {
|
|
56
|
+
const table = this._findTable() as any;
|
|
57
|
+
if (table?.columnConfigs) {
|
|
58
|
+
this._applyConfig(table.columnConfigs);
|
|
59
|
+
}
|
|
60
|
+
});
|
|
70
61
|
}
|
|
71
62
|
}
|
|
72
63
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
64
|
+
/**
|
|
65
|
+
* Public method called by the table to apply column configurations.
|
|
66
|
+
* This is the primary way cells receive sticky column updates.
|
|
67
|
+
*/
|
|
68
|
+
applyColumnConfigs(configs: ColumnStickyConfig[]): void {
|
|
69
|
+
this._applyConfig(configs);
|
|
70
|
+
}
|
|
77
71
|
|
|
78
72
|
private _applyConfig(configs: ColumnStickyConfig[]): void {
|
|
79
73
|
const index = this._getColumnIndex();
|
|
@@ -11,74 +11,35 @@ import type { ColumnStickyConfig } from './b-report-table.js';
|
|
|
11
11
|
@customElement('b-report-table-footer-cell')
|
|
12
12
|
export class BReportTableFooterCell extends LitElement {
|
|
13
13
|
static styles = css`
|
|
14
|
+
/* Required for table structure */
|
|
14
15
|
:host {
|
|
15
16
|
display: table-cell;
|
|
16
|
-
padding: 12px 16px;
|
|
17
|
-
font-weight: 600;
|
|
18
|
-
background: #f8fafc;
|
|
19
|
-
border-top: 2px solid #e2e8f0;
|
|
20
17
|
}
|
|
21
18
|
|
|
22
|
-
/*
|
|
23
|
-
:host([data-sticky-bottom]) {
|
|
24
|
-
position: sticky;
|
|
25
|
-
bottom: 0;
|
|
26
|
-
z-index: 2;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/* Horizontal sticky columns */
|
|
19
|
+
/* Required for horizontal sticky columns */
|
|
30
20
|
:host([data-sticky='left']),
|
|
31
21
|
:host([data-sticky='right']) {
|
|
32
22
|
position: sticky;
|
|
33
23
|
z-index: 2;
|
|
34
|
-
background: #
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/* Both vertical and horizontal sticky */
|
|
38
|
-
:host([data-sticky-bottom][data-sticky='left']),
|
|
39
|
-
:host([data-sticky-bottom][data-sticky='right']) {
|
|
40
|
-
z-index: 4;
|
|
24
|
+
background: var(--b-report-table-footer-cell-sticky-bg, var(--b-report-table-footer-bg, #fff));
|
|
41
25
|
}
|
|
42
26
|
|
|
43
27
|
:host([data-sticky='left']) {
|
|
44
28
|
left: var(--sticky-offset, 0px);
|
|
45
|
-
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
46
29
|
}
|
|
47
30
|
|
|
48
31
|
:host([data-sticky='right']) {
|
|
49
32
|
right: var(--sticky-offset, 0px);
|
|
50
|
-
box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
51
33
|
}
|
|
52
34
|
`;
|
|
53
35
|
|
|
54
36
|
|
|
55
37
|
connectedCallback(): void {
|
|
56
38
|
super.connectedCallback();
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
this._applyInitialConfig();
|
|
62
|
-
}
|
|
63
|
-
// Check if parent footer has sticky attribute
|
|
64
|
-
this._updateVerticalSticky();
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
private _updateVerticalSticky(): void {
|
|
68
|
-
const footer = this.closest('b-report-table-footer');
|
|
69
|
-
if (footer?.hasAttribute('sticky')) {
|
|
70
|
-
this.setAttribute('data-sticky-bottom', '');
|
|
71
|
-
} else {
|
|
72
|
-
this.removeAttribute('data-sticky-bottom');
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
disconnectedCallback(): void {
|
|
77
|
-
super.disconnectedCallback();
|
|
78
|
-
this._findTable()?.removeEventListener(
|
|
79
|
-
'column-config-change',
|
|
80
|
-
this._handleConfigChange
|
|
81
|
-
);
|
|
39
|
+
// Check if configs are already available when cell connects
|
|
40
|
+
// Use requestAnimationFrame to ensure the cell is fully in the DOM tree
|
|
41
|
+
// (handles case where cell is added to a row before row is added to table)
|
|
42
|
+
this._applyInitialConfig();
|
|
82
43
|
}
|
|
83
44
|
|
|
84
45
|
private _findTable(): HTMLElement | null {
|
|
@@ -89,13 +50,25 @@ export class BReportTableFooterCell extends LitElement {
|
|
|
89
50
|
const table = this._findTable() as any;
|
|
90
51
|
if (table?.columnConfigs) {
|
|
91
52
|
this._applyConfig(table.columnConfigs);
|
|
53
|
+
} else {
|
|
54
|
+
// Table not found yet - retry on next frame
|
|
55
|
+
// This handles the case where cell is added to row before row is added to body
|
|
56
|
+
requestAnimationFrame(() => {
|
|
57
|
+
const table = this._findTable() as any;
|
|
58
|
+
if (table?.columnConfigs) {
|
|
59
|
+
this._applyConfig(table.columnConfigs);
|
|
60
|
+
}
|
|
61
|
+
});
|
|
92
62
|
}
|
|
93
63
|
}
|
|
94
64
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
65
|
+
/**
|
|
66
|
+
* Public method called by the table to apply column configurations.
|
|
67
|
+
* This is the primary way cells receive sticky column updates.
|
|
68
|
+
*/
|
|
69
|
+
applyColumnConfigs(configs: ColumnStickyConfig[]): void {
|
|
70
|
+
this._applyConfig(configs);
|
|
71
|
+
}
|
|
99
72
|
|
|
100
73
|
private _applyConfig(configs: ColumnStickyConfig[]): void {
|
|
101
74
|
const index = this._getColumnIndex();
|
|
@@ -12,6 +12,13 @@ export class BReportTableFooter extends LitElement {
|
|
|
12
12
|
:host {
|
|
13
13
|
display: table-footer-group;
|
|
14
14
|
}
|
|
15
|
+
|
|
16
|
+
:host([sticky]) {
|
|
17
|
+
position: sticky;
|
|
18
|
+
bottom: 0;
|
|
19
|
+
z-index: 10;
|
|
20
|
+
background: var(--b-report-table-footer-bg, #fff);
|
|
21
|
+
}
|
|
15
22
|
`;
|
|
16
23
|
|
|
17
24
|
/**
|
|
@@ -10,45 +10,25 @@ import type { ColumnStickyConfig } from './b-report-table.js';
|
|
|
10
10
|
@customElement('b-report-table-header-cell')
|
|
11
11
|
export class BReportTableHeaderCell extends LitElement {
|
|
12
12
|
static styles = css`
|
|
13
|
+
/* Required for table structure */
|
|
13
14
|
:host {
|
|
14
15
|
display: table-cell;
|
|
15
|
-
padding: 12px 16px;
|
|
16
|
-
text-align: left;
|
|
17
|
-
font-weight: 600;
|
|
18
|
-
background: #f8fafc;
|
|
19
|
-
border-bottom: 2px solid #e2e8f0;
|
|
20
|
-
white-space: nowrap;
|
|
21
16
|
}
|
|
22
17
|
|
|
23
|
-
/*
|
|
24
|
-
:host([data-sticky-top]) {
|
|
25
|
-
position: sticky;
|
|
26
|
-
top: 0;
|
|
27
|
-
z-index: 2;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
/* Horizontal sticky columns */
|
|
18
|
+
/* Required for horizontal sticky columns */
|
|
31
19
|
:host([sticky='left']),
|
|
32
20
|
:host([sticky='right']) {
|
|
33
21
|
position: sticky;
|
|
34
22
|
z-index: 2;
|
|
35
|
-
background: #
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
/* Both vertical and horizontal sticky */
|
|
39
|
-
:host([data-sticky-top][sticky='left']),
|
|
40
|
-
:host([data-sticky-top][sticky='right']) {
|
|
41
|
-
z-index: 4;
|
|
23
|
+
background: var(--b-report-table-header-cell-sticky-bg, var(--b-report-table-header-bg, #fff));
|
|
42
24
|
}
|
|
43
25
|
|
|
44
26
|
:host([sticky='left']) {
|
|
45
27
|
left: var(--sticky-offset, 0px);
|
|
46
|
-
box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
47
28
|
}
|
|
48
29
|
|
|
49
30
|
:host([sticky='right']) {
|
|
50
31
|
right: var(--sticky-offset, 0px);
|
|
51
|
-
box-shadow: -2px 0 4px -2px rgba(0, 0, 0, 0.1);
|
|
52
32
|
}
|
|
53
33
|
`;
|
|
54
34
|
|
|
@@ -64,48 +44,19 @@ export class BReportTableHeaderCell extends LitElement {
|
|
|
64
44
|
@state()
|
|
65
45
|
private _offset = 0;
|
|
66
46
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
);
|
|
73
|
-
// Check if parent header has sticky attribute
|
|
74
|
-
this._updateVerticalSticky();
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
private _updateVerticalSticky(): void {
|
|
78
|
-
const header = this.closest('b-report-table-header');
|
|
79
|
-
if (header?.hasAttribute('sticky')) {
|
|
80
|
-
this.setAttribute('data-sticky-top', '');
|
|
81
|
-
} else {
|
|
82
|
-
this.removeAttribute('data-sticky-top');
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
disconnectedCallback(): void {
|
|
87
|
-
super.disconnectedCallback();
|
|
88
|
-
this._findTable()?.removeEventListener(
|
|
89
|
-
'column-config-change',
|
|
90
|
-
this._handleConfigChange
|
|
91
|
-
);
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
private _findTable(): HTMLElement | null {
|
|
95
|
-
return this.closest('b-report-table');
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
private _handleConfigChange = (event: Event): void => {
|
|
99
|
-
const customEvent = event as CustomEvent<{ configs: ColumnStickyConfig[] }>;
|
|
100
|
-
const configs = customEvent.detail.configs;
|
|
47
|
+
/**
|
|
48
|
+
* Public method called by the table to apply column configurations.
|
|
49
|
+
* This updates the sticky offset for header cells.
|
|
50
|
+
*/
|
|
51
|
+
applyColumnConfigs(configs: ColumnStickyConfig[]): void {
|
|
101
52
|
const index = this._getColumnIndex();
|
|
102
|
-
|
|
103
53
|
const config = configs.find((c) => c.index === index);
|
|
54
|
+
|
|
104
55
|
if (config && config.sticky) {
|
|
105
56
|
this._offset = config.offset;
|
|
106
57
|
this.style.setProperty('--sticky-offset', `${this._offset}px`);
|
|
107
58
|
}
|
|
108
|
-
}
|
|
59
|
+
}
|
|
109
60
|
|
|
110
61
|
private _getColumnIndex(): number {
|
|
111
62
|
const row = this.parentElement;
|
|
@@ -9,13 +9,10 @@ import { customElement } from 'lit/decorators.js';
|
|
|
9
9
|
@customElement('b-report-table-row')
|
|
10
10
|
export class BReportTableRow extends LitElement {
|
|
11
11
|
static styles = css`
|
|
12
|
+
/* Required for table structure */
|
|
12
13
|
:host {
|
|
13
14
|
display: table-row;
|
|
14
15
|
}
|
|
15
|
-
|
|
16
|
-
:host(:hover) {
|
|
17
|
-
background: #f8fafc;
|
|
18
|
-
}
|
|
19
16
|
`;
|
|
20
17
|
|
|
21
18
|
render() {
|
package/src/b-report-table.ts
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { LitElement, html, css } from 'lit';
|
|
2
|
-
import { customElement, state } from 'lit/decorators.js';
|
|
2
|
+
import { customElement, property, state } from 'lit/decorators.js';
|
|
3
|
+
import type { BReportTableCell } from './b-report-table-cell.js';
|
|
4
|
+
import type { BReportTableFooterCell } from './b-report-table-footer-cell.js';
|
|
5
|
+
import type { BReportTableHeaderCell } from './b-report-table-header-cell.js';
|
|
3
6
|
|
|
4
7
|
export interface ColumnStickyConfig {
|
|
5
8
|
index: number;
|
|
@@ -14,20 +17,29 @@ export interface ColumnStickyConfig {
|
|
|
14
17
|
* @slot header - The table header (b-report-table-header)
|
|
15
18
|
* @slot - Default slot for table body (b-report-table-body)
|
|
16
19
|
* @slot footer - The table footer (b-report-table-footer)
|
|
20
|
+
*
|
|
21
|
+
* @csspart scroll-container - The scrollable container wrapping the table
|
|
22
|
+
* @csspart table - The table element
|
|
17
23
|
*/
|
|
18
24
|
@customElement('b-report-table')
|
|
19
25
|
export class BReportTable extends LitElement {
|
|
20
26
|
static styles = css`
|
|
27
|
+
/* Required for table structure */
|
|
21
28
|
:host {
|
|
22
29
|
display: block;
|
|
23
30
|
}
|
|
24
31
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
32
|
+
.scroll-container {
|
|
33
|
+
position: relative;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
:host([max-height]) .scroll-container {
|
|
37
|
+
overflow: auto;
|
|
38
|
+
max-height: var(--table-max-height);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.table {
|
|
42
|
+
display: table;
|
|
31
43
|
}
|
|
32
44
|
|
|
33
45
|
::slotted(*) {
|
|
@@ -35,6 +47,15 @@ export class BReportTable extends LitElement {
|
|
|
35
47
|
}
|
|
36
48
|
`;
|
|
37
49
|
|
|
50
|
+
/**
|
|
51
|
+
* Maximum height of the table scroll container.
|
|
52
|
+
* Can be any valid CSS height value (e.g., '500px', '80vh', '100%').
|
|
53
|
+
* When content exceeds this height, the container becomes scrollable
|
|
54
|
+
* and sticky headers/footers will work.
|
|
55
|
+
*/
|
|
56
|
+
@property({ type: String, attribute: 'max-height' })
|
|
57
|
+
maxHeight = '100%';
|
|
58
|
+
|
|
38
59
|
@state()
|
|
39
60
|
private _columnConfigs: ColumnStickyConfig[] = [];
|
|
40
61
|
|
|
@@ -52,23 +73,39 @@ export class BReportTable extends LitElement {
|
|
|
52
73
|
}
|
|
53
74
|
|
|
54
75
|
private _notifyChildren(): void {
|
|
55
|
-
//
|
|
56
|
-
this.
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
)
|
|
76
|
+
// Directly notify all header cells (for offset updates)
|
|
77
|
+
const headerCells = this.querySelectorAll('b-report-table-header-cell') as NodeListOf<BReportTableHeaderCell>;
|
|
78
|
+
headerCells.forEach((cell) => {
|
|
79
|
+
cell.applyColumnConfigs(this._columnConfigs);
|
|
80
|
+
});
|
|
81
|
+
|
|
82
|
+
// Directly notify all body cells
|
|
83
|
+
const bodyCells = this.querySelectorAll('b-report-table-cell') as NodeListOf<BReportTableCell>;
|
|
84
|
+
bodyCells.forEach((cell) => {
|
|
85
|
+
cell.applyColumnConfigs(this._columnConfigs);
|
|
86
|
+
});
|
|
87
|
+
|
|
88
|
+
// Directly notify all footer cells
|
|
89
|
+
const footerCells = this.querySelectorAll('b-report-table-footer-cell') as NodeListOf<BReportTableFooterCell>;
|
|
90
|
+
footerCells.forEach((cell) => {
|
|
91
|
+
cell.applyColumnConfigs(this._columnConfigs);
|
|
92
|
+
});
|
|
63
93
|
}
|
|
64
94
|
|
|
65
95
|
render() {
|
|
96
|
+
const style = this.maxHeight !== '100%' ? `--table-max-height: ${this.maxHeight}` : '';
|
|
66
97
|
return html`
|
|
67
|
-
<
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
98
|
+
<div
|
|
99
|
+
class="scroll-container"
|
|
100
|
+
part="scroll-container"
|
|
101
|
+
style="${style}"
|
|
102
|
+
>
|
|
103
|
+
<div class="table" role="table" part="table">
|
|
104
|
+
<slot name="header"></slot>
|
|
105
|
+
<slot></slot>
|
|
106
|
+
<slot name="footer"></slot>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
72
109
|
`;
|
|
73
110
|
}
|
|
74
111
|
}
|