@3mo/data-grid 0.5.4 → 0.5.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/CsvGenerator.js +2 -3
- package/dist/DataGrid.d.ts +3 -1
- package/dist/DataGrid.d.ts.map +1 -1
- package/dist/DataGrid.js +294 -297
- package/dist/DataGridCell.js +46 -50
- package/dist/DataGridFooter.js +93 -94
- package/dist/DataGridHeader.js +92 -92
- package/dist/DataGridHeaderSeparator.d.ts.map +1 -1
- package/dist/DataGridHeaderSeparator.js +47 -49
- package/dist/DataGridPrimaryContextMenuItem.js +5 -5
- package/dist/DataGridSelectionController.js +1 -2
- package/dist/DataGridSidePanel.js +128 -129
- package/dist/FieldSelectDataGridPageSize.js +7 -7
- package/dist/columns/DataGridColumn.js +4 -7
- package/dist/columns/DataGridColumn.test.js +6 -6
- package/dist/columns/DataGridColumnBoolean.js +9 -9
- package/dist/columns/DataGridColumnImage.js +2 -2
- package/dist/columns/DataGridColumnText.js +6 -6
- package/dist/columns/date-time/DataGridColumnDate.js +1 -2
- package/dist/columns/date-time/DataGridColumnDateRange.js +1 -2
- package/dist/columns/date-time/DataGridColumnDateTime.js +1 -2
- package/dist/columns/date-time/DataGridColumnDateTimeBase.js +10 -11
- package/dist/columns/date-time/DataGridColumnDateTimeRange.js +1 -2
- package/dist/columns/number/DataGridColumnCurrency.js +10 -11
- package/dist/columns/number/DataGridColumnNumber.js +6 -7
- package/dist/columns/number/DataGridColumnNumberBase.js +5 -1
- package/dist/columns/number/DataGridColumnPercent.js +7 -8
- package/dist/columns/number/DataGridFooterSum.js +20 -20
- package/dist/excel.svg.js +47 -47
- package/dist/rows/DataGridDefaultRow.js +47 -47
- package/dist/rows/DataGridRow.d.ts +2 -0
- package/dist/rows/DataGridRow.d.ts.map +1 -1
- package/dist/rows/DataGridRow.js +159 -147
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +56 -56
|
@@ -15,22 +15,21 @@ let DataGridColumnCurrency = DataGridColumnCurrency_1 = class DataGridColumnCurr
|
|
|
15
15
|
}
|
|
16
16
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
17
17
|
getContentTemplate(value, _data) {
|
|
18
|
-
|
|
19
|
-
return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.formatAsCurrency(this.currency)) !== null && _b !== void 0 ? _b : html.nothing}`;
|
|
18
|
+
return html `${this.getNumber(value)?.formatAsCurrency(this.currency) ?? html.nothing}`;
|
|
20
19
|
}
|
|
21
20
|
getEditContentTemplate(value, data) {
|
|
22
|
-
return html `
|
|
23
|
-
<mo-field-currency dense data-focus
|
|
24
|
-
.currency=${this.currency}
|
|
25
|
-
label=${this.heading}
|
|
26
|
-
value=${ifDefined(value)}
|
|
27
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
28
|
-
></mo-field-currency>
|
|
21
|
+
return html `
|
|
22
|
+
<mo-field-currency dense data-focus
|
|
23
|
+
.currency=${this.currency}
|
|
24
|
+
label=${this.heading}
|
|
25
|
+
value=${ifDefined(value)}
|
|
26
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
27
|
+
></mo-field-currency>
|
|
29
28
|
`;
|
|
30
29
|
}
|
|
31
30
|
getSumTemplate(sum) {
|
|
32
|
-
return html `
|
|
33
|
-
<span style='font-weight: 500'>${sum.formatAsCurrency(this.currency)}</span>
|
|
31
|
+
return html `
|
|
32
|
+
<span style='font-weight: 500'>${sum.formatAsCurrency(this.currency)}</span>
|
|
34
33
|
`;
|
|
35
34
|
}
|
|
36
35
|
};
|
|
@@ -5,15 +5,14 @@ import { DataGridColumnNumberBase } from './DataGridColumnNumberBase.js';
|
|
|
5
5
|
let DataGridColumnNumber = class DataGridColumnNumber extends DataGridColumnNumberBase {
|
|
6
6
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7
7
|
getContentTemplate(value, _data) {
|
|
8
|
-
|
|
9
|
-
return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.format()) !== null && _b !== void 0 ? _b : html.nothing}`;
|
|
8
|
+
return html `${this.getNumber(value)?.format() ?? html.nothing}`;
|
|
10
9
|
}
|
|
11
10
|
getEditContentTemplate(value, data) {
|
|
12
|
-
return html `
|
|
13
|
-
<mo-field-number dense label=${this.heading} data-focus
|
|
14
|
-
value=${ifDefined(value)}
|
|
15
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
16
|
-
></mo-field-number>
|
|
11
|
+
return html `
|
|
12
|
+
<mo-field-number dense label=${this.heading} data-focus
|
|
13
|
+
value=${ifDefined(value)}
|
|
14
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
15
|
+
></mo-field-number>
|
|
17
16
|
`;
|
|
18
17
|
}
|
|
19
18
|
getSumTemplate(sum) {
|
|
@@ -8,7 +8,11 @@ export class DataGridColumnNumberBase extends DataGridColumn {
|
|
|
8
8
|
this.textAlign = 'end';
|
|
9
9
|
}
|
|
10
10
|
get definition() {
|
|
11
|
-
return
|
|
11
|
+
return {
|
|
12
|
+
...super.definition,
|
|
13
|
+
sumHeading: this.sumHeading,
|
|
14
|
+
getSumTemplate: this.getSumTemplate.bind(this),
|
|
15
|
+
};
|
|
12
16
|
}
|
|
13
17
|
getNumber(value) {
|
|
14
18
|
return Number.isFinite(value) ? value : undefined;
|
|
@@ -5,16 +5,15 @@ import { DataGridColumnNumberBase } from './DataGridColumnNumberBase.js';
|
|
|
5
5
|
let DataGridColumnPercent = class DataGridColumnPercent extends DataGridColumnNumberBase {
|
|
6
6
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
7
7
|
getContentTemplate(value, _data) {
|
|
8
|
-
|
|
9
|
-
return html `${(_b = (_a = this.getNumber(value)) === null || _a === void 0 ? void 0 : _a.formatAsPercent()) !== null && _b !== void 0 ? _b : html.nothing}`;
|
|
8
|
+
return html `${this.getNumber(value)?.formatAsPercent() ?? html.nothing}`;
|
|
10
9
|
}
|
|
11
10
|
getEditContentTemplate(value, data) {
|
|
12
|
-
return html `
|
|
13
|
-
<mo-field-percent dense data-focus
|
|
14
|
-
label=${this.heading}
|
|
15
|
-
value=${ifDefined(value)}
|
|
16
|
-
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
17
|
-
></mo-field-percent>
|
|
11
|
+
return html `
|
|
12
|
+
<mo-field-percent dense data-focus
|
|
13
|
+
label=${this.heading}
|
|
14
|
+
value=${ifDefined(value)}
|
|
15
|
+
@change=${(e) => this.handleEdit(e.detail, data)}
|
|
16
|
+
></mo-field-percent>
|
|
18
17
|
`;
|
|
19
18
|
}
|
|
20
19
|
getSumTemplate(sum) {
|
|
@@ -13,29 +13,29 @@ let DataGridFooterSum = class DataGridFooterSum extends Component {
|
|
|
13
13
|
this.heading = '';
|
|
14
14
|
}
|
|
15
15
|
static get styles() {
|
|
16
|
-
return css `
|
|
17
|
-
:host {
|
|
18
|
-
display: flex;
|
|
19
|
-
flex-direction: column;
|
|
20
|
-
position: relative;
|
|
21
|
-
max-height: 100%;
|
|
22
|
-
line-height: 1em;
|
|
23
|
-
user-select: all;
|
|
24
|
-
align-items: flex-end;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
div {
|
|
28
|
-
color: var(--mo-color-gray);
|
|
29
|
-
font-size: 0.75rem;
|
|
30
|
-
}
|
|
16
|
+
return css `
|
|
17
|
+
:host {
|
|
18
|
+
display: flex;
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
position: relative;
|
|
21
|
+
max-height: 100%;
|
|
22
|
+
line-height: 1em;
|
|
23
|
+
user-select: all;
|
|
24
|
+
align-items: flex-end;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
div {
|
|
28
|
+
color: var(--mo-color-gray);
|
|
29
|
+
font-size: 0.75rem;
|
|
30
|
+
}
|
|
31
31
|
`;
|
|
32
32
|
}
|
|
33
33
|
get template() {
|
|
34
|
-
return html `
|
|
35
|
-
<div>${this.heading}</div>
|
|
36
|
-
<mo-flex direction='horizontal' justifyContent='center'>
|
|
37
|
-
<slot></slot>
|
|
38
|
-
</mo-flex>
|
|
34
|
+
return html `
|
|
35
|
+
<div>${this.heading}</div>
|
|
36
|
+
<mo-flex direction='horizontal' justifyContent='center'>
|
|
37
|
+
<slot></slot>
|
|
38
|
+
</mo-flex>
|
|
39
39
|
`;
|
|
40
40
|
}
|
|
41
41
|
};
|
package/dist/excel.svg.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
export default `<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
|
|
3
|
-
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
|
|
4
|
-
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
|
|
5
|
-
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
|
|
6
|
-
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
|
|
7
|
-
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
|
|
8
|
-
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
|
|
9
|
-
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
|
|
10
|
-
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
|
|
11
|
-
]>
|
|
12
|
-
<svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
|
|
13
|
-
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2289.75 2130"
|
|
14
|
-
enable-background="new 0 0 2289.75 2130" xml:space="preserve">
|
|
15
|
-
<metadata>
|
|
16
|
-
<sfw xmlns="&ns_sfw;">
|
|
17
|
-
<slices></slices>
|
|
18
|
-
<sliceSourceBounds bottomLeftOrigin="true" height="2130" width="2289.75" x="-1147.5" y="-1041"></sliceSourceBounds>
|
|
19
|
-
</sfw>
|
|
20
|
-
</metadata>
|
|
21
|
-
<path fill="#185C37" d="M1437.75,1011.75L532.5,852v1180.393c0,53.907,43.7,97.607,97.607,97.607l0,0h1562.036
|
|
22
|
-
c53.907,0,97.607-43.7,97.607-97.607l0,0V1597.5L1437.75,1011.75z"/>
|
|
23
|
-
<path fill="#21A366" d="M1437.75,0H630.107C576.2,0,532.5,43.7,532.5,97.607c0,0,0,0,0,0V532.5l905.25,532.5L1917,1224.75
|
|
24
|
-
L2289.75,1065V532.5L1437.75,0z"/>
|
|
25
|
-
<path fill="#107C41" d="M532.5,532.5h905.25V1065H532.5V532.5z"/>
|
|
26
|
-
<path opacity="0.1" enable-background="new " d="M1180.393,426H532.5v1331.25h647.893c53.834-0.175,97.432-43.773,97.607-97.607
|
|
27
|
-
V523.607C1277.825,469.773,1234.227,426.175,1180.393,426z"/>
|
|
28
|
-
<path opacity="0.2" enable-background="new " d="M1127.143,479.25H532.5V1810.5h594.643
|
|
29
|
-
c53.834-0.175,97.432-43.773,97.607-97.607V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
|
|
30
|
-
<path opacity="0.2" enable-background="new " d="M1127.143,479.25H532.5V1704h594.643c53.834-0.175,97.432-43.773,97.607-97.607
|
|
31
|
-
V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
|
|
32
|
-
<path opacity="0.2" enable-background="new " d="M1073.893,479.25H532.5V1704h541.393c53.834-0.175,97.432-43.773,97.607-97.607
|
|
33
|
-
V576.857C1171.325,523.023,1127.727,479.425,1073.893,479.25z"/>
|
|
34
|
-
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="203.5132" y1="1729.0183" x2="967.9868" y2="404.9817" gradientTransform="matrix(1 0 0 -1 0 2132)">
|
|
35
|
-
<stop offset="0" style="stop-color:#18884F"/>
|
|
36
|
-
<stop offset="0.5" style="stop-color:#117E43"/>
|
|
37
|
-
<stop offset="1" style="stop-color:#0B6631"/>
|
|
38
|
-
</linearGradient>
|
|
39
|
-
<path fill="url(#SVGID_1_)" d="M97.607,479.25h976.285c53.907,0,97.607,43.7,97.607,97.607v976.285
|
|
40
|
-
c0,53.907-43.7,97.607-97.607,97.607H97.607C43.7,1650.75,0,1607.05,0,1553.143V576.857C0,522.95,43.7,479.25,97.607,479.25z"/>
|
|
41
|
-
<path fill="#FFFFFF" d="M302.3,1382.264l205.332-318.169L319.5,747.683h151.336l102.666,202.35
|
|
42
|
-
c9.479,19.223,15.975,33.494,19.49,42.919h1.331c6.745-15.336,13.845-30.228,21.3-44.677L725.371,747.79h138.929l-192.925,314.548
|
|
43
|
-
L869.2,1382.263H721.378L602.79,1160.158c-5.586-9.45-10.326-19.376-14.164-29.66h-1.757c-3.474,10.075-8.083,19.722-13.739,28.755
|
|
44
|
-
l-122.102,223.011H302.3z"/>
|
|
45
|
-
<path fill="#33C481" d="M2192.143,0H1437.75v532.5h852V97.607C2289.75,43.7,2246.05,0,2192.143,0L2192.143,0z"/>
|
|
46
|
-
<path fill="#107C41" d="M1437.75,1065h852v532.5h-852V1065z"/>
|
|
47
|
-
</svg>
|
|
1
|
+
export default `<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
+
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
|
|
3
|
+
<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
|
|
4
|
+
<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
|
|
5
|
+
<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
|
|
6
|
+
<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
|
|
7
|
+
<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
|
|
8
|
+
<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
|
|
9
|
+
<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
|
|
10
|
+
<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
|
|
11
|
+
]>
|
|
12
|
+
<svg version="1.1" id="Livello_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
|
|
13
|
+
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2289.75 2130"
|
|
14
|
+
enable-background="new 0 0 2289.75 2130" xml:space="preserve">
|
|
15
|
+
<metadata>
|
|
16
|
+
<sfw xmlns="&ns_sfw;">
|
|
17
|
+
<slices></slices>
|
|
18
|
+
<sliceSourceBounds bottomLeftOrigin="true" height="2130" width="2289.75" x="-1147.5" y="-1041"></sliceSourceBounds>
|
|
19
|
+
</sfw>
|
|
20
|
+
</metadata>
|
|
21
|
+
<path fill="#185C37" d="M1437.75,1011.75L532.5,852v1180.393c0,53.907,43.7,97.607,97.607,97.607l0,0h1562.036
|
|
22
|
+
c53.907,0,97.607-43.7,97.607-97.607l0,0V1597.5L1437.75,1011.75z"/>
|
|
23
|
+
<path fill="#21A366" d="M1437.75,0H630.107C576.2,0,532.5,43.7,532.5,97.607c0,0,0,0,0,0V532.5l905.25,532.5L1917,1224.75
|
|
24
|
+
L2289.75,1065V532.5L1437.75,0z"/>
|
|
25
|
+
<path fill="#107C41" d="M532.5,532.5h905.25V1065H532.5V532.5z"/>
|
|
26
|
+
<path opacity="0.1" enable-background="new " d="M1180.393,426H532.5v1331.25h647.893c53.834-0.175,97.432-43.773,97.607-97.607
|
|
27
|
+
V523.607C1277.825,469.773,1234.227,426.175,1180.393,426z"/>
|
|
28
|
+
<path opacity="0.2" enable-background="new " d="M1127.143,479.25H532.5V1810.5h594.643
|
|
29
|
+
c53.834-0.175,97.432-43.773,97.607-97.607V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
|
|
30
|
+
<path opacity="0.2" enable-background="new " d="M1127.143,479.25H532.5V1704h594.643c53.834-0.175,97.432-43.773,97.607-97.607
|
|
31
|
+
V576.857C1224.575,523.023,1180.977,479.425,1127.143,479.25z"/>
|
|
32
|
+
<path opacity="0.2" enable-background="new " d="M1073.893,479.25H532.5V1704h541.393c53.834-0.175,97.432-43.773,97.607-97.607
|
|
33
|
+
V576.857C1171.325,523.023,1127.727,479.425,1073.893,479.25z"/>
|
|
34
|
+
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="203.5132" y1="1729.0183" x2="967.9868" y2="404.9817" gradientTransform="matrix(1 0 0 -1 0 2132)">
|
|
35
|
+
<stop offset="0" style="stop-color:#18884F"/>
|
|
36
|
+
<stop offset="0.5" style="stop-color:#117E43"/>
|
|
37
|
+
<stop offset="1" style="stop-color:#0B6631"/>
|
|
38
|
+
</linearGradient>
|
|
39
|
+
<path fill="url(#SVGID_1_)" d="M97.607,479.25h976.285c53.907,0,97.607,43.7,97.607,97.607v976.285
|
|
40
|
+
c0,53.907-43.7,97.607-97.607,97.607H97.607C43.7,1650.75,0,1607.05,0,1553.143V576.857C0,522.95,43.7,479.25,97.607,479.25z"/>
|
|
41
|
+
<path fill="#FFFFFF" d="M302.3,1382.264l205.332-318.169L319.5,747.683h151.336l102.666,202.35
|
|
42
|
+
c9.479,19.223,15.975,33.494,19.49,42.919h1.331c6.745-15.336,13.845-30.228,21.3-44.677L725.371,747.79h138.929l-192.925,314.548
|
|
43
|
+
L869.2,1382.263H721.378L602.79,1160.158c-5.586-9.45-10.326-19.376-14.164-29.66h-1.757c-3.474,10.075-8.083,19.722-13.739,28.755
|
|
44
|
+
l-122.102,223.011H302.3z"/>
|
|
45
|
+
<path fill="#33C481" d="M2192.143,0H1437.75v532.5h852V97.607C2289.75,43.7,2246.05,0,2192.143,0L2192.143,0z"/>
|
|
46
|
+
<path fill="#107C41" d="M1437.75,1065h852v532.5h-852V1065z"/>
|
|
47
|
+
</svg>
|
|
48
48
|
`;
|
|
@@ -3,48 +3,48 @@ import { css, component, html } from '@a11d/lit';
|
|
|
3
3
|
import { DataGridRow } from './DataGridRow.js';
|
|
4
4
|
let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
|
|
5
5
|
static get styles() {
|
|
6
|
-
return css `
|
|
7
|
-
${super.styles}
|
|
8
|
-
|
|
9
|
-
mo-grid {
|
|
10
|
-
height: var(--mo-data-grid-row-height);
|
|
11
|
-
grid-template-columns: var(--mo-data-grid-columns);
|
|
12
|
-
column-gap: var(--mo-data-grid-columns-gap);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
mo-flex {
|
|
16
|
-
white-space: nowrap;
|
|
17
|
-
text-overflow: ellipsis;
|
|
18
|
-
overflow: hidden;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
#selectionContainer {
|
|
22
|
-
height: var(--mo-data-grid-row-height);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
#detailsContainer [instanceof*=mo-data-grid] {
|
|
26
|
-
--mo-data-grid-header-background: rgba(var(--mo-color-foreground-base), 0.04);
|
|
27
|
-
--mo-data-grid-alternating-background: transparent;
|
|
28
|
-
--mo-data-grid-content-min-height: 0px;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
#detailsContainer [instanceof*=mo-data-grid]:not([headerHidden]) {
|
|
32
|
-
background: var(--mo-color-transparent-gray-1);
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
:host([data-grid-has-details]) #detailsContainer > [instanceof*=mo-data-grid][headerHidden] {
|
|
36
|
-
margin-inline-start: var(--mo-details-data-grid-start-margin);
|
|
37
|
-
width: calc(100% - var(--mo-details-data-grid-start-margin));
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
:host([data-grid-has-details]) #detailsContainer > [instanceof*=mo-data-grid]:not([headerHidden]) {
|
|
41
|
-
margin: 16px var(--mo-details-data-grid-start-margin);
|
|
42
|
-
width: calc(100% - calc(var(--mo-details-data-grid-start-margin) * 2));
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
:host([data-grid-has-details]) #detailsContainer > [instanceof*=mo-data-grid] {
|
|
46
|
-
padding: 0px !important;
|
|
47
|
-
}
|
|
6
|
+
return css `
|
|
7
|
+
${super.styles}
|
|
8
|
+
|
|
9
|
+
mo-grid {
|
|
10
|
+
height: var(--mo-data-grid-row-height);
|
|
11
|
+
grid-template-columns: var(--mo-data-grid-columns);
|
|
12
|
+
column-gap: var(--mo-data-grid-columns-gap);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
mo-flex {
|
|
16
|
+
white-space: nowrap;
|
|
17
|
+
text-overflow: ellipsis;
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
#selectionContainer {
|
|
22
|
+
height: var(--mo-data-grid-row-height);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
#detailsContainer [instanceof*=mo-data-grid] {
|
|
26
|
+
--mo-data-grid-header-background: rgba(var(--mo-color-foreground-base), 0.04);
|
|
27
|
+
--mo-data-grid-alternating-background: transparent;
|
|
28
|
+
--mo-data-grid-content-min-height: 0px;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
#detailsContainer [instanceof*=mo-data-grid]:not([headerHidden]) {
|
|
32
|
+
background: var(--mo-color-transparent-gray-1);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
:host([data-grid-has-details]) #detailsContainer > [instanceof*=mo-data-grid][headerHidden] {
|
|
36
|
+
margin-inline-start: var(--mo-details-data-grid-start-margin);
|
|
37
|
+
width: calc(100% - var(--mo-details-data-grid-start-margin));
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
:host([data-grid-has-details]) #detailsContainer > [instanceof*=mo-data-grid]:not([headerHidden]) {
|
|
41
|
+
margin: 16px var(--mo-details-data-grid-start-margin);
|
|
42
|
+
width: calc(100% - calc(var(--mo-details-data-grid-start-margin) * 2));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
:host([data-grid-has-details]) #detailsContainer > [instanceof*=mo-data-grid] {
|
|
46
|
+
padding: 0px !important;
|
|
47
|
+
}
|
|
48
48
|
`;
|
|
49
49
|
}
|
|
50
50
|
updated(...parameters) {
|
|
@@ -55,11 +55,11 @@ let DataGridDefaultRow = class DataGridDefaultRow extends DataGridRow {
|
|
|
55
55
|
}
|
|
56
56
|
}
|
|
57
57
|
get rowTemplate() {
|
|
58
|
-
return html `
|
|
59
|
-
${this.detailsExpanderTemplate}
|
|
60
|
-
${this.selectionTemplate}
|
|
61
|
-
${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
|
|
62
|
-
${this.contextMenuIconButtonTemplate}
|
|
58
|
+
return html `
|
|
59
|
+
${this.detailsExpanderTemplate}
|
|
60
|
+
${this.selectionTemplate}
|
|
61
|
+
${this.dataGrid.columns.map(column => this.getCellTemplate(column))}
|
|
62
|
+
${this.contextMenuIconButtonTemplate}
|
|
63
63
|
`;
|
|
64
64
|
}
|
|
65
65
|
};
|
|
@@ -13,10 +13,12 @@ import { DataGrid, DataGridCell } from '../index.js';
|
|
|
13
13
|
export declare abstract class DataGridRow<TData, TDetailsElement extends Element | undefined = undefined> extends Component {
|
|
14
14
|
readonly detailsOpenChange: EventDispatcher<boolean>;
|
|
15
15
|
readonly cells: Array<DataGridCell<any, TData, TDetailsElement>>;
|
|
16
|
+
readonly subRows: Array<DataGridRow<TData, TDetailsElement>>;
|
|
16
17
|
dataGrid: DataGrid<TData, TDetailsElement>;
|
|
17
18
|
data: TData;
|
|
18
19
|
selected: boolean;
|
|
19
20
|
detailsOpen: boolean;
|
|
21
|
+
level: number;
|
|
20
22
|
protected contextMenuOpen: boolean;
|
|
21
23
|
get detailsElement(): TDetailsElement | undefined;
|
|
22
24
|
protected initialized(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAElH,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAyD,MAAM,aAAa,CAAA;AAE3G;;;;;;;;GAQG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACzG,QAAQ,CAAC,iBAAiB,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE/B,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"DataGridRow.d.ts","sourceRoot":"","sources":["../../rows/DataGridRow.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAyB,kBAAkB,EAAqB,MAAM,WAAW,CAAA;AAElH,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AACzD,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAyD,MAAM,aAAa,CAAA;AAE3G;;;;;;;;GAQG;AACH,8BAAsB,WAAW,CAAC,KAAK,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IACzG,QAAQ,CAAC,iBAAiB,EAAG,eAAe,CAAC,OAAO,CAAC,CAAA;IAE/B,QAAQ,CAAC,KAAK,EAAG,KAAK,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAChE,QAAQ,CAAC,OAAO,EAAG,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC,CAAA;IAEjE,QAAQ,EAAG,QAAQ,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAC3C,IAAI,EAAG,KAAK,CAAA;IACI,QAAQ,UAAQ;IAazD,WAAW,UAAQ;IAOnB,KAAK,SAAI;IAEgC,SAAS,CAAC,eAAe,UAAQ;IAE7E,IAAI,cAAc,gCAEjB;cAEkB,WAAW;IAIrB,OAAO,CAAC,GAAG,UAAU,EAAE,UAAU,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;IAShE,SAAS,KAAK,UAAU,YAEvB;IAED,WAAoB,MAAM,kCA4FzB;IAED,cAAuB,QAAQ,uBAY9B;IAED,SAAS,CAAC,QAAQ,KAAK,WAAW,IAAI,kBAAkB,CAAA;IAExD,SAAS,KAAK,uBAAuB,uBAepC;IAED,SAAS,KAAK,iBAAiB,uBAc9B;IAED,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAUlG,SAAS,KAAK,6BAA6B,uBAS1C;IAED,SAAS,KAAK,eAAe,uBAoB5B;IAED,OAAO,CAAC,YAAY;IAKpB,SAAS,CAAC,kBAAkB;cAYZ,wBAAwB;cAKxB,wBAAwB;YAK1B,yCAAyC;IAQjD,eAAe,CAAC,UAAU,CAAC,EAAE,UAAU;IAwB7C,OAAO,KAAK,eAAe,GAI1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;IAEK,gBAAgB;IAKtB,SAAS,CAAC,aAAa;IAIvB,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,OAAO;CAIvC;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,kBAAkB,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KACxC;CACD"}
|