@3mo/data-grid 0.5.15 → 0.5.16

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/DataGrid.js CHANGED
@@ -614,7 +614,7 @@ let DataGrid = DataGrid_1 = class DataGrid extends Component {
614
614
  const getRowTemplate = (data, index) => this.getRowTemplate(data, index);
615
615
  const content = this.shallVirtualize === false
616
616
  ? this.renderData.map(getRowTemplate)
617
- : html `<mo-virtualized-scroller .items=${this.renderData} .getItemTemplate=${getRowTemplate}></mo-virtualized-scroller>`;
617
+ : html `<mo-virtualized-scroller .items=${this.renderData} .getItemTemplate=${getRowTemplate} exportparts='row'></mo-virtualized-scroller>`;
618
618
  return html `
619
619
  <mo-scroller id='rowsContainer'
620
620
  ${style({ gridRow: '2', gridColumn: '1 / last-line', overflowX: 'hidden' })}
@@ -12,7 +12,7 @@ export declare class DataGridCell<TValue extends KeyPathValueOf<TData>, TData =
12
12
  column: ColumnDefinition<TData, TValue>;
13
13
  row: DataGridRow<TData, TDetailsElement>;
14
14
  private editing;
15
- get dataGrid(): import("./DataGrid.js").DataGrid<TData, TDetailsElement>;
15
+ get dataGrid(): import("DataGrid.js").DataGrid<TData, TDetailsElement>;
16
16
  get data(): TData;
17
17
  get dataSelector(): object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | (Extract<keyof TData, `${number}`> extends infer T ? T extends Extract<keyof TData, `${number}`> ? T extends keyof TData ? `${T}.${object extends TData[T] ? string : TData[T] extends infer T_1 ? T_1 extends TData[T] ? T_1 extends readonly any[] ? Extract<keyof T_1, `${number}`> | (Extract<keyof T_1, `${number}`> extends infer T_2 ? T_2 extends Extract<keyof T_1, `${number}`> ? T_2 extends keyof T_1 ? never : never : never : never) : T_1 extends object ? Extract<keyof T_1, string> | (Extract<keyof T_1, string> extends infer T_3 ? T_3 extends Extract<keyof T_1, string> ? T_3 extends keyof T_1 ? never : never : never : never) : never : never : never}` : never : never : never) : TData extends object ? Extract<keyof TData, string> | (Extract<keyof TData, string> extends infer T_4 ? T_4 extends Extract<keyof TData, string> ? T_4 extends keyof TData ? `${T_4}.${object extends TData[T_4] ? string : TData[T_4] extends infer T_5 ? T_5 extends TData[T_4] ? T_5 extends readonly any[] ? Extract<keyof T_5, `${number}`> | (Extract<keyof T_5, `${number}`> extends infer T_6 ? T_6 extends Extract<keyof T_5, `${number}`> ? T_6 extends keyof T_5 ? never : never : never : never) : T_5 extends object ? Extract<keyof T_5, string> | (Extract<keyof T_5, string> extends infer T_7 ? T_7 extends Extract<keyof T_5, string> ? T_7 extends keyof T_5 ? never : never : never : never) : never : never : never}` : never : never : never) : never;
18
18
  private get cellIndex();
@@ -1 +1 @@
1
- {"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG/G,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,6DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}
1
+ {"version":3,"file":"DataGridCell.d.ts","sourceRoot":"","sources":["../DataGridCell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAA6C,kBAAkB,EAAE,MAAM,WAAW,CAAA;AAG/G,OAAO,EAAE,gBAAgB,EAAuB,WAAW,EAAE,MAAM,YAAY,CAAA;AAO/E;;;;;;GAMG;AACH,qBACa,YAAY,CAAC,MAAM,SAAS,cAAc,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,GAAG,EAAE,eAAe,SAAS,OAAO,GAAG,SAAS,GAAG,SAAS,CAAE,SAAQ,SAAS;IAC1H,KAAK,EAAG,MAAM,CAAA;IACd,MAAM,EAAG,gBAAgB,CAAC,KAAK,EAAE,MAAM,CAAC,CAAA;IACxC,GAAG,EAAG,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;IAQlE,OAAO,CAAC,OAAO,CAAQ;IAE1B,IAAI,QAAQ,2DAA+B;IAC3C,IAAI,IAAI,UAA2B;IACnC,IAAI,YAAY,+/CAAsC;IAEtD,OAAO,KAAK,SAAS,GAAkD;IACvE,OAAO,KAAK,QAAQ,GAA0D;IAE9E,OAAO,KAAK,gBAAgB,GAAuD;IAEnF,OAAO,KAAK,UAAU,GAIrB;IAED,IAAI,SAAS,YAGZ;IAGD,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,YAAY;IAO/C,SAAS,CAAC,iBAAiB,CAAC,KAAK,EAAE,UAAU;cAQ7B,aAAa,CAAC,KAAK,EAAE,aAAa;IA2ClD,OAAO,CAAC,SAAS;IAWjB,WAAoB,MAAM,kCA0CzB;IAED,OAAO,KAAK,OAAO,GAAmC;IAEtD,cAAuB,QAAQ,uBAU9B;IAED,OAAO,KAAK,eAAe,GAE1B;IAED,OAAO,KAAK,mBAAmB,GAE9B;CACD;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,mBAAmB,EAAE,YAAY,CAAC,OAAO,CAAC,CAAA;KAC1C;CACD"}
@@ -23,33 +23,33 @@ let DataGridFooter = class DataGridFooter extends Component {
23
23
  this.manualPageSize = false;
24
24
  }
25
25
  static get styles() {
26
- return css `
27
- :host {
28
- grid-column: 1 / last-line;
29
- grid-row: 3;
30
- min-height: var(--mo-data-grid-footer-min-height);
31
- background: var(--mo-data-grid-footer-background);
32
- }
33
-
34
- :host(:not([hideTopBorder])) {
35
- border-top: var(--mo-data-grid-border);
36
- }
26
+ return css `
27
+ :host {
28
+ grid-column: 1 / last-line;
29
+ grid-row: 3;
30
+ min-height: var(--mo-data-grid-footer-min-height);
31
+ background: var(--mo-data-grid-footer-background);
32
+ }
33
+
34
+ :host(:not([hideTopBorder])) {
35
+ border-top: var(--mo-data-grid-border);
36
+ }
37
37
  `;
38
38
  }
39
39
  get template() {
40
40
  this.toggleAttribute('hideTopBorder', this.dataGrid.hasFooter === false);
41
- return this.dataGrid.hasFooter === false ? html.nothing : html `
42
- <mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '0 6px', height: '100%' })}>
43
- <mo-flex direction='horizontal' alignItems='center' gap='3vw' ${style({ flexBasis: 'auto' })}>
44
- ${this.paginationTemplate}
45
- ${this.exportTemplate}
46
- </mo-flex>
47
-
48
- <mo-flex direction='horizontal' alignItems='center' gap='10px' wrap='wrap-reverse' ${style({ paddingInlineEnd: 'var(--mo-data-grid-footer-trailing-padding)' })}>
49
- ${this.dataGrid.sumsTemplate}
50
- <slot name='sum'></slot>
51
- </mo-flex>
52
- </mo-flex>
41
+ return this.dataGrid.hasFooter === false ? html.nothing : html `
42
+ <mo-flex direction='horizontal' justifyContent='space-between' alignItems='center' wrap='wrap-reverse' gap='6px' ${style({ flex: '1', padding: '0 6px', height: '100%' })}>
43
+ <mo-flex direction='horizontal' alignItems='center' gap='3vw' ${style({ flexBasis: 'auto' })}>
44
+ ${this.paginationTemplate}
45
+ ${this.exportTemplate}
46
+ </mo-flex>
47
+
48
+ <mo-flex direction='horizontal' alignItems='center' gap='10px' wrap='wrap-reverse' ${style({ paddingInlineEnd: 'var(--mo-data-grid-footer-trailing-padding)' })}>
49
+ ${this.dataGrid.sumsTemplate}
50
+ <slot name='sum'></slot>
51
+ </mo-flex>
52
+ </mo-flex>
53
53
  `;
54
54
  }
55
55
  get paginationTemplate() {
@@ -62,53 +62,53 @@ let DataGridFooter = class DataGridFooter extends Component {
62
62
  `${(Math.min(from, to)).format()}-${to.format()}`,
63
63
  hasUnknownDataLength ? undefined : this.dataGrid.dataLength.format(),
64
64
  ].filter(Boolean).join(' / ');
65
- return !this.dataGrid.hasPagination ? html.nothing : html `
66
- <mo-flex direction='horizontal' alignItems='center' gap='1vw'>
67
- <mo-flex direction='horizontal' gap='4px' alignItems='center' justifyContent='center'>
68
- <mo-icon-button dense icon=${isRtl ? 'last_page' : 'first_page'}
69
- ?disabled=${this.page === 1}
70
- @click=${() => this.setPage(1)}
71
- ></mo-icon-button>
72
-
73
- <mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
74
- ?disabled=${this.page === 1}
75
- @click=${() => this.setPage(this.page - 1)}
76
- ></mo-icon-button>
77
-
78
- <div ${style({ cursor: 'pointer', width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
79
- ${this.manualPagination ? html `
80
- <mo-field-number dense
81
- value=${this.page}
82
- @change=${(e) => this.handleManualPageChange(e.detail)}>
83
- </mo-field-number>
84
- ` : html `
85
- <div ${style({ fontSize: 'small' })} @click=${() => this.manualPagination = hasUnknownDataLength === false}>${pageText}</div>
86
- `}
87
- </div>
88
-
89
- <mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
90
- ?disabled=${!this.dataGrid.hasNextPage}
91
- @click=${() => this.setPage(this.page + 1)}
92
- ></mo-icon-button>
93
-
94
- <mo-icon-button dense icon=${isRtl ? 'first_page' : 'last_page'}
95
- ?disabled=${hasUnknownDataLength || this.page === this.dataGrid.maxPage}
96
- @click=${() => this.setPage(this.dataGrid.maxPage ?? 1)}
97
- ></mo-icon-button>
98
- </mo-flex>
99
-
100
- <div ${style({ color: 'var(--mo-color-gray)', marginInlineStart: '8px' })}>
101
- ${!this.manualPageSize ? html `
102
- <div ${style({ fontSize: 'small' })} @click=${() => this.manualPageSize = true}>${pageSizeText}</div>
103
- ` : html `
104
- <mo-field-select-data-grid-page-size dense ${style({ width: '90px' })}
105
- .dataGrid=${this.dataGrid}
106
- value=${ifDefined(this.dataGrid.pagination)}
107
- @change=${(e) => this.handlePaginationChange(e.detail)}>
108
- </mo-field-select-data-grid-page-size>
109
- `}
110
- </div>
111
- </mo-flex>
65
+ return !this.dataGrid.hasPagination ? html.nothing : html `
66
+ <mo-flex direction='horizontal' alignItems='center' gap='1vw'>
67
+ <mo-flex direction='horizontal' gap='4px' alignItems='center' justifyContent='center'>
68
+ <mo-icon-button dense icon=${isRtl ? 'last_page' : 'first_page'}
69
+ ?disabled=${this.page === 1}
70
+ @click=${() => this.setPage(1)}
71
+ ></mo-icon-button>
72
+
73
+ <mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_right' : 'keyboard_arrow_left'}
74
+ ?disabled=${this.page === 1}
75
+ @click=${() => this.setPage(this.page - 1)}
76
+ ></mo-icon-button>
77
+
78
+ <div ${style({ cursor: 'pointer', width: hasUnknownDataLength ? '40px' : '75px', textAlign: 'center' })}>
79
+ ${this.manualPagination ? html `
80
+ <mo-field-number dense
81
+ value=${this.page}
82
+ @change=${(e) => this.handleManualPageChange(e.detail)}>
83
+ </mo-field-number>
84
+ ` : html `
85
+ <div ${style({ fontSize: 'small' })} @click=${() => this.manualPagination = hasUnknownDataLength === false}>${pageText}</div>
86
+ `}
87
+ </div>
88
+
89
+ <mo-icon-button dense icon=${isRtl ? 'keyboard_arrow_left' : 'keyboard_arrow_right'}
90
+ ?disabled=${!this.dataGrid.hasNextPage}
91
+ @click=${() => this.setPage(this.page + 1)}
92
+ ></mo-icon-button>
93
+
94
+ <mo-icon-button dense icon=${isRtl ? 'first_page' : 'last_page'}
95
+ ?disabled=${hasUnknownDataLength || this.page === this.dataGrid.maxPage}
96
+ @click=${() => this.setPage(this.dataGrid.maxPage ?? 1)}
97
+ ></mo-icon-button>
98
+ </mo-flex>
99
+
100
+ <div ${style({ color: 'var(--mo-color-gray)', marginInlineStart: '8px' })}>
101
+ ${!this.manualPageSize ? html `
102
+ <div ${style({ fontSize: 'small' })} @click=${() => this.manualPageSize = true}>${pageSizeText}</div>
103
+ ` : html `
104
+ <mo-field-select-data-grid-page-size dense ${style({ width: '90px' })}
105
+ .dataGrid=${this.dataGrid}
106
+ value=${ifDefined(this.dataGrid.pagination)}
107
+ @change=${(e) => this.handlePaginationChange(e.detail)}>
108
+ </mo-field-select-data-grid-page-size>
109
+ `}
110
+ </div>
111
+ </mo-flex>
112
112
  `;
113
113
  }
114
114
  handlePaginationChange(value) {
@@ -126,28 +126,28 @@ let DataGridFooter = class DataGridFooter extends Component {
126
126
  this.manualPagination = false;
127
127
  }
128
128
  get exportTemplate() {
129
- return !this.dataGrid.exportable ? html.nothing : html `
130
- <style>
131
- #export {
132
- height: 21px;
133
- width: 21px;
134
- aspect-ratio: 1 / 1;
135
- transition: .25s;
136
- -webkit-filter: grayscale(100%);
137
- filter: grayscale(100%);
138
- cursor: pointer;
139
- }
140
-
141
- #export:hover {
142
- -webkit-filter: grayscale(0%);
143
- filter: grayscale(0%);
144
- }
145
- </style>
146
- <img id='export'
147
- src=${`data:image/svg+xml,${encodeURIComponent(excelSvg)}`}
148
- ${tooltip(t('Export current view to Excel'), TooltipPlacement.BlockStart)}
149
- @click=${() => this.dataGrid.exportExcelFile()}
150
- />
129
+ return !this.dataGrid.exportable ? html.nothing : html `
130
+ <style>
131
+ #export {
132
+ height: 21px;
133
+ width: 21px;
134
+ aspect-ratio: 1 / 1;
135
+ transition: .25s;
136
+ -webkit-filter: grayscale(100%);
137
+ filter: grayscale(100%);
138
+ cursor: pointer;
139
+ }
140
+
141
+ #export:hover {
142
+ -webkit-filter: grayscale(0%);
143
+ filter: grayscale(0%);
144
+ }
145
+ </style>
146
+ <img id='export'
147
+ src=${`data:image/svg+xml,${encodeURIComponent(excelSvg)}`}
148
+ ${tooltip(t('Export current view to Excel'), TooltipPlacement.BlockStart)}
149
+ @click=${() => this.dataGrid.exportExcelFile()}
150
+ />
151
151
  `;
152
152
  }
153
153
  setPage(value) {
@@ -3,11 +3,11 @@ import { component, css } from '@a11d/lit';
3
3
  import { ContextMenuItem } from '@3mo/context-menu';
4
4
  let DataGridPrimaryContextMenuItem = class DataGridPrimaryContextMenuItem extends ContextMenuItem {
5
5
  static get styles() {
6
- return css `
7
- ${super.styles}
8
- :host {
9
- font-weight: bold;
10
- }
6
+ return css `
7
+ ${super.styles}
8
+ :host {
9
+ font-weight: bold;
10
+ }
11
11
  `;
12
12
  }
13
13
  };
@@ -4,13 +4,13 @@ import { component, html, property } from '@a11d/lit';
4
4
  import { FieldSelect } from '@3mo/select-field';
5
5
  let FieldSelectDataGridPageSize = FieldSelectDataGridPageSize_1 = class FieldSelectDataGridPageSize extends FieldSelect {
6
6
  get optionsTemplate() {
7
- return html `
8
- ${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? html.nothing : html `
9
- <mo-option value='auto'>Auto</mo-option>
10
- `}
11
- ${FieldSelectDataGridPageSize_1.data.map(size => html `
12
- <mo-option value=${size}>${size.format()}</mo-option>
13
- `)}
7
+ return html `
8
+ ${!this.dataGrid || !this.dataGrid.supportsDynamicPageSize ? html.nothing : html `
9
+ <mo-option value='auto'>Auto</mo-option>
10
+ `}
11
+ ${FieldSelectDataGridPageSize_1.data.map(size => html `
12
+ <mo-option value=${size}>${size.format()}</mo-option>
13
+ `)}
14
14
  `;
15
15
  }
16
16
  };
@@ -1,5 +1,9 @@
1
1
  import { DataGridColumn } from './DataGridColumn.js';
2
- /** @element mo-data-grid-column-image */
2
+ /**
3
+ * @element mo-data-grid-column-image
4
+ *
5
+ * @attr tooltipSelector - The data selector of the column to use as a tooltip. If a function is provided, it will be called with the data as an argument.
6
+ */
3
7
  export declare class DataGridColumnImage<TData> extends DataGridColumn<TData, string> {
4
8
  tooltipSelector?: KeyPathOf<TData> | ((data: TData) => string | undefined);
5
9
  nonSortable: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"DataGridColumnImage.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnImage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAGpD,yCAAyC;AACzC,qBACa,mBAAmB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAC,CAAA;IAE7E,WAAW,UAAO;IAClB,WAAW,UAAO;IAE3B,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAsBhD,sBAAsB,YAAY;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,2BAA2B,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;KACzD;CACD"}
1
+ {"version":3,"file":"DataGridColumnImage.d.ts","sourceRoot":"","sources":["../../columns/DataGridColumnImage.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAGpD;;;;GAIG;AACH,qBACa,mBAAmB,CAAC,KAAK,CAAE,SAAQ,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC;IAChE,eAAe,CAAC,EAAE,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,KAAK,MAAM,GAAG,SAAS,CAAC,CAAA;IAE7E,WAAW,UAAO;IAClB,WAAW,UAAO;IAE3B,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,EAAE,IAAI,EAAE,KAAK;IAsBhD,sBAAsB,YAAY;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,2BAA2B,EAAE,mBAAmB,CAAC,OAAO,CAAC,CAAA;KACzD;CACD"}
@@ -2,7 +2,11 @@ import { __decorate } from "tslib";
2
2
  import { component, html, property, style } from '@a11d/lit';
3
3
  import { DataGridColumn } from './DataGridColumn.js';
4
4
  import { tooltip } from '@3mo/tooltip';
5
- /** @element mo-data-grid-column-image */
5
+ /**
6
+ * @element mo-data-grid-column-image
7
+ *
8
+ * @attr tooltipSelector - The data selector of the column to use as a tooltip. If a function is provided, it will be called with the data as an argument.
9
+ */
6
10
  let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
7
11
  constructor() {
8
12
  super(...arguments);
@@ -19,14 +23,14 @@ let DataGridColumnImage = class DataGridColumnImage extends DataGridColumn {
19
23
  : typeof this.tooltipSelector === 'function'
20
24
  ? this.tooltipSelector(data)
21
25
  : getValueByKeyPath(data, this.tooltipSelector);
22
- return !value ? html.nothing : html `
23
- <img
24
- ${tooltipText ? tooltip(tooltipText) : html.nothing}
25
- ${style({ verticalAlign: 'middle' })}
26
- src=${value}
27
- onload='this.hidden = false'
28
- onerror='this.hidden = true'
29
- />
26
+ return !value ? html.nothing : html `
27
+ <img
28
+ ${tooltipText ? tooltip(tooltipText) : html.nothing}
29
+ ${style({ verticalAlign: 'middle' })}
30
+ src=${value}
31
+ onload='this.hidden = false'
32
+ onerror='this.hidden = true'
33
+ />
30
34
  `;
31
35
  }
32
36
  };
@@ -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
  };
@@ -1614,6 +1614,7 @@
1614
1614
  "attributes": [
1615
1615
  {
1616
1616
  "name": "tooltipSelector",
1617
+ "description": "The data selector of the column to use as a tooltip. If a function is provided, it will be called with the data as an argument.",
1617
1618
  "type": "KeyPathOf<TData>"
1618
1619
  },
1619
1620
  {
@@ -1673,16 +1674,17 @@
1673
1674
  }
1674
1675
  ],
1675
1676
  "properties": [
1676
- {
1677
- "name": "tooltipSelector",
1678
- "attribute": "tooltipSelector",
1679
- "type": "(object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | SubKeyPathOf<TData, Extract<keyof TData, `${number}`>, 1> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | ((data: TData) => string | undefined) | undefined"
1680
- },
1681
1677
  {
1682
1678
  "name": "getEditContentTemplate",
1683
1679
  "type": "undefined",
1684
1680
  "default": "\"undefined\""
1685
1681
  },
1682
+ {
1683
+ "name": "tooltipSelector",
1684
+ "attribute": "tooltipSelector",
1685
+ "description": "The data selector of the column to use as a tooltip. If a function is provided, it will be called with the data as an argument.",
1686
+ "type": "(object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | SubKeyPathOf<TData, Extract<keyof TData, `${number}`>, 1> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | ((data: TData) => string | undefined) | undefined"
1687
+ },
1686
1688
  {
1687
1689
  "name": "regex",
1688
1690
  "type": "RegExp",
@@ -3702,8 +3704,7 @@
3702
3704
  ],
3703
3705
  "properties": [
3704
3706
  {
3705
- "name": "dataGrid",
3706
- "type": "DataGrid<TData, TDetailsElement>"
3707
+ "name": "dataGrid"
3707
3708
  },
3708
3709
  {
3709
3710
  "name": "data",
@@ -4527,6 +4528,11 @@
4527
4528
  "name": "mo-data-grid-column-image",
4528
4529
  "path": ".\\packages\\DataGrid\\dist\\columns\\DataGridColumnImage.d.ts",
4529
4530
  "attributes": [
4531
+ {
4532
+ "name": "tooltipSelector",
4533
+ "description": "The data selector of the column to use as a tooltip. If a function is provided, it will be called with the data as an argument.",
4534
+ "type": "KeyPathOf<TData>"
4535
+ },
4530
4536
  {
4531
4537
  "name": "width",
4532
4538
  "description": "The width of the column",
@@ -4574,14 +4580,16 @@
4574
4580
  }
4575
4581
  ],
4576
4582
  "properties": [
4577
- {
4578
- "name": "tooltipSelector",
4579
- "type": "(object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | SubKeyPathOf<TData, Extract<keyof TData, `${number}`>, 1> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | ((data: TData) => string | undefined) | undefined"
4580
- },
4581
4583
  {
4582
4584
  "name": "getEditContentTemplate",
4583
4585
  "type": "undefined"
4584
4586
  },
4587
+ {
4588
+ "name": "tooltipSelector",
4589
+ "attribute": "tooltipSelector",
4590
+ "description": "The data selector of the column to use as a tooltip. If a function is provided, it will be called with the data as an argument.",
4591
+ "type": "(object extends TData ? string : TData extends readonly any[] ? Extract<keyof TData, `${number}`> | SubKeyPathOf<TData, Extract<keyof TData, `${number}`>, 1> : TData extends object ? Extract<...> | SubKeyPathOf<...> : never) | ((data: TData) => string | undefined) | undefined"
4592
+ },
4585
4593
  {
4586
4594
  "name": "regex",
4587
4595
  "type": "RegExp"
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
  `;