@digital-realty/ix-grid 1.0.38 → 2.0.0-alpha.1
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/demo/columns.js +1 -20
- package/dist/IxGrid.d.ts +55 -55
- package/dist/IxGrid.js +219 -219
- package/dist/components/IxGridColumnFilter.d.ts +28 -28
- package/dist/components/IxGridColumnFilter.js +152 -152
- package/dist/components/IxGridDownloadMenu.d.ts +12 -12
- package/dist/components/IxGridDownloadMenu.js +35 -35
- package/dist/components/IxGridNav.d.ts +15 -15
- package/dist/components/IxGridNav.js +20 -20
- package/dist/components/IxGridRowFilter.d.ts +40 -40
- package/dist/components/IxGridRowFilter.js +188 -188
- package/dist/components/IxPagination.d.ts +13 -13
- package/dist/components/IxPagination.js +59 -59
- package/dist/components/grid-column-filter-styles.d.ts +1 -1
- package/dist/components/grid-column-filter-styles.js +2 -2
- package/dist/components/grid-download-menu-styles.d.ts +1 -1
- package/dist/components/grid-download-menu-styles.js +2 -2
- package/dist/components/grid-row-filter-styles.d.ts +1 -1
- package/dist/components/grid-row-filter-styles.js +2 -2
- package/dist/components/ix-grid-nav.d.ts +1 -1
- package/dist/components/ix-grid-nav.js +2 -2
- package/dist/components/pagination-styles.d.ts +1 -1
- package/dist/components/pagination-styles.js +2 -2
- package/dist/grid-view-styles.d.ts +1 -1
- package/dist/grid-view-styles.js +2 -79
- package/dist/grid-view-styles.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.js +2 -2
- package/dist/ix-grid-copy.d.ts +10 -10
- package/dist/ix-grid-copy.js +10 -10
- package/dist/ix-grid.d.ts +1 -1
- package/dist/ix-grid.js +2 -2
- package/dist/ix-grid.min.js +1 -1
- package/dist/react/IxGridNav.d.ts +2 -2
- package/dist/react/IxGridNav.js +8 -8
- package/dist/test/ix-grid-column-filter.test.d.ts +1 -1
- package/dist/test/ix-grid-column-filter.test.js +35 -35
- package/dist/test/ix-grid-row-filter.test.d.ts +1 -1
- package/dist/test/ix-grid-row-filter.test.js +36 -36
- package/dist/test/ix-grid.test.d.ts +1 -1
- package/dist/test/ix-grid.test.js +42 -42
- package/dist/test/ix-pagination.test.d.ts +1 -1
- package/dist/test/ix-pagination.test.js +21 -21
- package/package.json +2 -3
- package/src/grid-view-styles.ts +0 -77
|
@@ -1,45 +1,45 @@
|
|
|
1
|
-
import { __decorate } from "tslib";
|
|
2
|
-
import { LitElement, html } from 'lit';
|
|
3
|
-
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
-
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
5
|
-
import '@digital-realty/ix-select/ix-select.js';
|
|
6
|
-
import { IxGridViewStyles } from '../grid-view-styles.js';
|
|
7
|
-
import { PaginationStyles } from './pagination-styles.js';
|
|
8
|
-
import { copy } from '../ix-grid-copy.js';
|
|
9
|
-
let IxPagination = class IxPagination extends LitElement {
|
|
10
|
-
constructor() {
|
|
11
|
-
super(...arguments);
|
|
12
|
-
this.recordCount = 0;
|
|
13
|
-
this.page = 1;
|
|
14
|
-
this.pageSize = 10;
|
|
15
|
-
this.pageSizes = [5, 10, 25, 100];
|
|
16
|
-
}
|
|
17
|
-
changePage(offset) {
|
|
18
|
-
this.page += offset;
|
|
19
|
-
this.updatePagination();
|
|
20
|
-
}
|
|
21
|
-
updatePagination(page = this.page, pageSize = this.pageSize) {
|
|
22
|
-
this.dispatchEvent(new CustomEvent('updatePagination', {
|
|
23
|
-
detail: {
|
|
24
|
-
page,
|
|
25
|
-
pageSize,
|
|
26
|
-
},
|
|
27
|
-
bubbles: true,
|
|
28
|
-
composed: true,
|
|
29
|
-
}));
|
|
30
|
-
}
|
|
31
|
-
render() {
|
|
32
|
-
const back = this.page > 1;
|
|
33
|
-
const next = this.recordCount > this.page * this.pageSize;
|
|
1
|
+
import { __decorate } from "tslib";
|
|
2
|
+
import { LitElement, html } from 'lit';
|
|
3
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
4
|
+
import '@digital-realty/ix-icon-button/ix-icon-button.js';
|
|
5
|
+
import '@digital-realty/ix-select/ix-select.js';
|
|
6
|
+
import { IxGridViewStyles } from '../grid-view-styles.js';
|
|
7
|
+
import { PaginationStyles } from './pagination-styles.js';
|
|
8
|
+
import { copy } from '../ix-grid-copy.js';
|
|
9
|
+
let IxPagination = class IxPagination extends LitElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.recordCount = 0;
|
|
13
|
+
this.page = 1;
|
|
14
|
+
this.pageSize = 10;
|
|
15
|
+
this.pageSizes = [5, 10, 25, 100];
|
|
16
|
+
}
|
|
17
|
+
changePage(offset) {
|
|
18
|
+
this.page += offset;
|
|
19
|
+
this.updatePagination();
|
|
20
|
+
}
|
|
21
|
+
updatePagination(page = this.page, pageSize = this.pageSize) {
|
|
22
|
+
this.dispatchEvent(new CustomEvent('updatePagination', {
|
|
23
|
+
detail: {
|
|
24
|
+
page,
|
|
25
|
+
pageSize,
|
|
26
|
+
},
|
|
27
|
+
bubbles: true,
|
|
28
|
+
composed: true,
|
|
29
|
+
}));
|
|
30
|
+
}
|
|
31
|
+
render() {
|
|
32
|
+
const back = this.page > 1;
|
|
33
|
+
const next = this.recordCount > this.page * this.pageSize;
|
|
34
34
|
return html ` <div class="pagination">
|
|
35
35
|
<p>${copy.rowsPerPage}:</p>
|
|
36
36
|
<ix-select
|
|
37
37
|
wide-menu
|
|
38
38
|
class="pagination__select-input"
|
|
39
|
-
@request-selection=${(e) => {
|
|
40
|
-
const el = e.target;
|
|
41
|
-
this.pageSize = Number(el.value);
|
|
42
|
-
this.updatePagination();
|
|
39
|
+
@request-selection=${(e) => {
|
|
40
|
+
const el = e.target;
|
|
41
|
+
this.pageSize = Number(el.value);
|
|
42
|
+
this.updatePagination();
|
|
43
43
|
}}
|
|
44
44
|
selected-index=${this.pageSizes.indexOf(this.pageSize)}
|
|
45
45
|
filled
|
|
@@ -52,8 +52,8 @@ let IxPagination = class IxPagination extends LitElement {
|
|
|
52
52
|
</ix-select>
|
|
53
53
|
<p>
|
|
54
54
|
${(this.page - 1) * this.pageSize + 1} -
|
|
55
|
-
${this.page * this.pageSize > this.recordCount
|
|
56
|
-
? html `${this.recordCount}`
|
|
55
|
+
${this.page * this.pageSize > this.recordCount
|
|
56
|
+
? html `${this.recordCount}`
|
|
57
57
|
: html `${this.page * this.pageSize}`}
|
|
58
58
|
of ${this.recordCount}
|
|
59
59
|
</p>
|
|
@@ -71,24 +71,24 @@ let IxPagination = class IxPagination extends LitElement {
|
|
|
71
71
|
>
|
|
72
72
|
</ix-icon-button>
|
|
73
73
|
</div>
|
|
74
|
-
</div>`;
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
IxPagination.styles = [IxGridViewStyles, PaginationStyles];
|
|
78
|
-
__decorate([
|
|
79
|
-
property({ type: Number })
|
|
80
|
-
], IxPagination.prototype, "recordCount", void 0);
|
|
81
|
-
__decorate([
|
|
82
|
-
property({ type: Number })
|
|
83
|
-
], IxPagination.prototype, "page", void 0);
|
|
84
|
-
__decorate([
|
|
85
|
-
property({ type: Number })
|
|
86
|
-
], IxPagination.prototype, "pageSize", void 0);
|
|
87
|
-
__decorate([
|
|
88
|
-
property({ type: Array })
|
|
89
|
-
], IxPagination.prototype, "pageSizes", void 0);
|
|
90
|
-
IxPagination = __decorate([
|
|
91
|
-
customElement('ix-pagination')
|
|
92
|
-
], IxPagination);
|
|
93
|
-
export { IxPagination };
|
|
74
|
+
</div>`;
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
IxPagination.styles = [IxGridViewStyles, PaginationStyles];
|
|
78
|
+
__decorate([
|
|
79
|
+
property({ type: Number })
|
|
80
|
+
], IxPagination.prototype, "recordCount", void 0);
|
|
81
|
+
__decorate([
|
|
82
|
+
property({ type: Number })
|
|
83
|
+
], IxPagination.prototype, "page", void 0);
|
|
84
|
+
__decorate([
|
|
85
|
+
property({ type: Number })
|
|
86
|
+
], IxPagination.prototype, "pageSize", void 0);
|
|
87
|
+
__decorate([
|
|
88
|
+
property({ type: Array })
|
|
89
|
+
], IxPagination.prototype, "pageSizes", void 0);
|
|
90
|
+
IxPagination = __decorate([
|
|
91
|
+
customElement('ix-pagination')
|
|
92
|
+
], IxPagination);
|
|
93
|
+
export { IxPagination };
|
|
94
94
|
//# sourceMappingURL=IxPagination.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxGridColumnFilterStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxGridColumnFilterStyles: import("lit").CSSResult;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const IxGridColumnFilterStyles = css `
|
|
3
3
|
.dropdown-content {
|
|
4
4
|
position: absolute;
|
|
@@ -97,5 +97,5 @@ export const IxGridColumnFilterStyles = css `
|
|
|
97
97
|
.list {
|
|
98
98
|
position: relative;
|
|
99
99
|
}
|
|
100
|
-
`;
|
|
100
|
+
`;
|
|
101
101
|
//# sourceMappingURL=grid-column-filter-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxGridDownloadMenuStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxGridDownloadMenuStyles: import("lit").CSSResult;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxGridRowFilterStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxGridRowFilterStyles: import("lit").CSSResult;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const IxGridRowFilterStyles = css `
|
|
3
3
|
.slot-wrap {
|
|
4
4
|
display: flex;
|
|
@@ -438,5 +438,5 @@ export const IxGridRowFilterStyles = css `
|
|
|
438
438
|
align-items: center;
|
|
439
439
|
display: flex;
|
|
440
440
|
}
|
|
441
|
-
`;
|
|
441
|
+
`;
|
|
442
442
|
//# sourceMappingURL=grid-row-filter-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IxGridNavigation } from './IxGridNav.js';
|
|
2
|
-
window.customElements.define('ix-grid-nav', IxGridNavigation);
|
|
1
|
+
import { IxGridNavigation } from './IxGridNav.js';
|
|
2
|
+
window.customElements.define('ix-grid-nav', IxGridNavigation);
|
|
3
3
|
//# sourceMappingURL=ix-grid-nav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const PaginationStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const PaginationStyles: import("lit").CSSResult;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const PaginationStyles = css `
|
|
3
3
|
.pagination {
|
|
4
4
|
display: flex;
|
|
@@ -45,5 +45,5 @@ export const PaginationStyles = css `
|
|
|
45
45
|
ix-select-option {
|
|
46
46
|
--md-menu-item-selected-container-color: rgba(20, 86, 224, 0.1);
|
|
47
47
|
}
|
|
48
|
-
`;
|
|
48
|
+
`;
|
|
49
49
|
//# sourceMappingURL=pagination-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const IxGridViewStyles: import("lit").CSSResult;
|
|
1
|
+
export declare const IxGridViewStyles: import("lit").CSSResult;
|
package/dist/grid-view-styles.js
CHANGED
|
@@ -1,17 +1,5 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css } from 'lit';
|
|
2
2
|
export const IxGridViewStyles = css `
|
|
3
|
-
@font-face {
|
|
4
|
-
font-family: 'Material Icons';
|
|
5
|
-
font-style: normal;
|
|
6
|
-
font-weight: 400;
|
|
7
|
-
src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)
|
|
8
|
-
format('truetype');
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
* {
|
|
12
|
-
font-family: 'Red Hat Display', sans-serif;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
3
|
vaadin-grid::part(cell) {
|
|
16
4
|
cursor: pointer;
|
|
17
5
|
}
|
|
@@ -52,45 +40,6 @@ export const IxGridViewStyles = css `
|
|
|
52
40
|
--md-sys-color-on-surface-variant: #b8bfc8;
|
|
53
41
|
}
|
|
54
42
|
|
|
55
|
-
.material-icons {
|
|
56
|
-
font-family: 'Material Icons';
|
|
57
|
-
font-weight: normal;
|
|
58
|
-
font-style: normal;
|
|
59
|
-
font-size: 24px;
|
|
60
|
-
line-height: 1;
|
|
61
|
-
letter-spacing: normal;
|
|
62
|
-
text-transform: none;
|
|
63
|
-
display: inline-block;
|
|
64
|
-
white-space: nowrap;
|
|
65
|
-
word-wrap: normal;
|
|
66
|
-
direction: ltr;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.material-icons.delete {
|
|
70
|
-
color: #6d758c;
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
.material-icons.info {
|
|
74
|
-
color: orange;
|
|
75
|
-
font-size: 48px;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
.material-icons.check_circle {
|
|
79
|
-
color: green;
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.material-icons.mail {
|
|
83
|
-
color: #ff9800;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
.material-icons.warning {
|
|
87
|
-
color: #db0028;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.material-icons.do_not_disturb_on {
|
|
91
|
-
color: #6d758c;
|
|
92
|
-
}
|
|
93
|
-
|
|
94
43
|
.grid-container {
|
|
95
44
|
background-color: #ffffff;
|
|
96
45
|
border-radius: 12px;
|
|
@@ -115,19 +64,6 @@ export const IxGridViewStyles = css `
|
|
|
115
64
|
gap: 18px;
|
|
116
65
|
}
|
|
117
66
|
|
|
118
|
-
.grid-header h2 {
|
|
119
|
-
margin: 0px;
|
|
120
|
-
font-style: normal;
|
|
121
|
-
font-weight: bold;
|
|
122
|
-
font-size: 20px;
|
|
123
|
-
line-height: 24px;
|
|
124
|
-
letter-spacing: 0.15px;
|
|
125
|
-
color: #092241;
|
|
126
|
-
overflow: hidden;
|
|
127
|
-
text-overflow: ellipsis;
|
|
128
|
-
white-space: nowrap;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
67
|
.grid-menu {
|
|
132
68
|
display: flex;
|
|
133
69
|
align-items: center;
|
|
@@ -144,19 +80,6 @@ export const IxGridViewStyles = css `
|
|
|
144
80
|
cursor: pointer;
|
|
145
81
|
}
|
|
146
82
|
|
|
147
|
-
.grid-empty-content {
|
|
148
|
-
height: 73vh;
|
|
149
|
-
justify-content: center;
|
|
150
|
-
align-items: flex-start;
|
|
151
|
-
padding-top: 54px;
|
|
152
|
-
}
|
|
153
|
-
|
|
154
|
-
.grid-empty-content h2 {
|
|
155
|
-
font-weight: 900;
|
|
156
|
-
font-size: 22px;
|
|
157
|
-
color: black;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
83
|
.header {
|
|
161
84
|
font-weight: bold;
|
|
162
85
|
display: flex;
|
|
@@ -207,5 +130,5 @@ export const IxGridViewStyles = css `
|
|
|
207
130
|
display: flex;
|
|
208
131
|
padding: 8px;
|
|
209
132
|
}
|
|
210
|
-
`;
|
|
133
|
+
`;
|
|
211
134
|
//# sourceMappingURL=grid-view-styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid-view-styles.js","sourceRoot":"","sources":["../src/grid-view-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"grid-view-styles.js","sourceRoot":"","sources":["../src/grid-view-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmIlC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridViewStyles = css`\n vaadin-grid::part(cell) {\n cursor: pointer;\n }\n\n vaadin-grid::part(header-cell) {\n cursor: default;\n --vaadin-grid-cell-background: #fff;\n }\n\n vaadin-grid::part(row):hover {\n --vaadin-grid-cell-background: #f5f5f5;\n }\n\n ix-icon-button {\n --md-icon-button-icon-size: 28px;\n --md-icon-button-icon-color: rgb(20, 86, 224);\n --md-icon-button-hover-icon-color: rgb(20, 86, 224);\n --md-icon-button-pressed-icon-color: rgb(20, 86, 224);\n --md-icon-button-focus-icon-color: rgb(20, 86, 224);\n --ix-icon-line-height: 1;\n }\n\n ix-button {\n --md-text-button-label-text-color: var(--md-sys-color-primary);\n --md-text-button-hover-state-layer-color: #49454f;\n --md-text-button-pressed-icon-color: rgb(20, 86, 224);\n --md-text-button-focus-icon-color: rgb(20, 86, 224);\n\n --md-outlined-button-outline-color: var(--md-sys-color-primary);\n --md-outlined-select-text-field-outline-color: #ddd;\n }\n\n ix-dialog {\n --md-dialog-container-color: #fff;\n }\n\n ix-grid ix-textbox {\n --md-sys-color-on-surface-variant: #b8bfc8;\n }\n\n .grid-container {\n background-color: #ffffff;\n border-radius: 12px;\n box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,\n #e1e4e8 0px 0px 0px 1px inset;\n box-sizing: border-box;\n padding: 3px;\n }\n\n .touch-edge {\n margin: 0 -3px;\n }\n\n .grid-header {\n display: flex;\n -webkit-box-pack: justify;\n place-content: space-between;\n -webkit-box-align: center;\n align-items: center;\n padding: 16px 24px;\n flex-wrap: wrap;\n gap: 18px;\n }\n\n .grid-menu {\n display: flex;\n align-items: center;\n margin-left: auto;\n }\n\n .grid-menu ix-button {\n --md-text-button-leading-space: 4px;\n --md-text-button-trailing-space: 4px;\n }\n\n .grid-menu span {\n color: #1456e0;\n cursor: pointer;\n }\n\n .header {\n font-weight: bold;\n display: flex;\n user-select: none;\n align-items: center;\n }\n\n .header .header-sort-icon {\n padding-left: 5px;\n opacity: 0;\n font-size: 17px;\n color: rgba(0, 0, 0, 0.54);\n cursor: pointer;\n height: 18px;\n }\n\n .header:hover .header-sort-icon {\n opacity: 1;\n }\n\n .loading {\n opacity: 0.25;\n }\n\n span .disabled {\n color: rgba(9, 34, 65, 0.7);\n }\n\n .disable-cursor {\n cursor: default !important;\n }\n\n .accounts {\n display: flex;\n align-items: center;\n }\n\n .account-name {\n margin: 0 8px 0 3px;\n }\n\n vaadin-grid-cell-content {\n font-size: 14px;\n --_cell-padding: 1rem;\n }\n\n .row-limit {\n display: flex;\n padding: 8px;\n }\n`;\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { IxGrid } from './IxGrid.js';
|
|
2
|
-
export { IxGridNavigation } from './components/IxGridNav.js';
|
|
1
|
+
export { IxGrid } from './IxGrid.js';
|
|
2
|
+
export { IxGridNavigation } from './components/IxGridNav.js';
|
package/dist/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { IxGrid } from './IxGrid.js';
|
|
2
|
-
export { IxGridNavigation } from './components/IxGridNav.js';
|
|
1
|
+
export { IxGrid } from './IxGrid.js';
|
|
2
|
+
export { IxGridNavigation } from './components/IxGridNav.js';
|
|
3
3
|
//# sourceMappingURL=index.js.map
|
package/dist/ix-grid-copy.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export declare const copy: {
|
|
2
|
-
activeFilter: string;
|
|
3
|
-
filters: string;
|
|
4
|
-
hideFilters: string;
|
|
5
|
-
showFilters: string;
|
|
6
|
-
rowsPerPage: string;
|
|
7
|
-
user: string;
|
|
8
|
-
viewMore: string;
|
|
9
|
-
viewLess: string;
|
|
10
|
-
};
|
|
1
|
+
export declare const copy: {
|
|
2
|
+
activeFilter: string;
|
|
3
|
+
filters: string;
|
|
4
|
+
hideFilters: string;
|
|
5
|
+
showFilters: string;
|
|
6
|
+
rowsPerPage: string;
|
|
7
|
+
user: string;
|
|
8
|
+
viewMore: string;
|
|
9
|
+
viewLess: string;
|
|
10
|
+
};
|
package/dist/ix-grid-copy.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
export const copy = {
|
|
2
|
-
activeFilter: 'active filter',
|
|
3
|
-
filters: 'Filters',
|
|
4
|
-
hideFilters: 'Hide Filters',
|
|
5
|
-
showFilters: 'Show Filters',
|
|
6
|
-
rowsPerPage: 'Rows per page',
|
|
7
|
-
user: 'user',
|
|
8
|
-
viewMore: 'VIEW MORE',
|
|
9
|
-
viewLess: 'VIEW LESS',
|
|
10
|
-
};
|
|
1
|
+
export const copy = {
|
|
2
|
+
activeFilter: 'active filter',
|
|
3
|
+
filters: 'Filters',
|
|
4
|
+
hideFilters: 'Hide Filters',
|
|
5
|
+
showFilters: 'Show Filters',
|
|
6
|
+
rowsPerPage: 'Rows per page',
|
|
7
|
+
user: 'user',
|
|
8
|
+
viewMore: 'VIEW MORE',
|
|
9
|
+
viewLess: 'VIEW LESS',
|
|
10
|
+
};
|
|
11
11
|
//# sourceMappingURL=ix-grid-copy.js.map
|
package/dist/ix-grid.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/dist/ix-grid.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { IxGrid } from './IxGrid.js';
|
|
2
|
-
window.customElements.define('ix-grid', IxGrid);
|
|
1
|
+
import { IxGrid } from './IxGrid.js';
|
|
2
|
+
window.customElements.define('ix-grid', IxGrid);
|
|
3
3
|
//# sourceMappingURL=ix-grid.js.map
|
package/dist/ix-grid.min.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{query,customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import"@vaadin/grid";import{columnHeaderRenderer,columnBodyRenderer}from"@vaadin/grid/lit.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-select/ix-select.js";import{repeat}from"lit/directives/repeat.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-button/ix-button.js";const IxGridViewStyles=css
|
|
1
|
+
import{__decorate}from"tslib";import{css,LitElement,html,nothing}from"lit";import{query,customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import"@vaadin/grid";import{columnHeaderRenderer,columnBodyRenderer}from"@vaadin/grid/lit.js";import"@digital-realty/ix-icon-button/ix-icon-button.js";import"@digital-realty/ix-icon/ix-icon.js";import"@digital-realty/ix-menu/ix-menu.js";import"@digital-realty/ix-menu/ix-menu-item.js";import"@digital-realty/ix-select/ix-select.js";import{repeat}from"lit/directives/repeat.js";import"@digital-realty/ix-switch/ix-switch.js";import"@digital-realty/ix-button/ix-button.js";const IxGridViewStyles=css`vaadin-grid::part(cell){cursor:pointer}vaadin-grid::part(header-cell){cursor:default;--vaadin-grid-cell-background:#fff}vaadin-grid::part(row):hover{--vaadin-grid-cell-background:#f5f5f5}ix-icon-button{--md-icon-button-icon-size:28px;--md-icon-button-icon-color:rgb(20, 86, 224);--md-icon-button-hover-icon-color:rgb(20, 86, 224);--md-icon-button-pressed-icon-color:rgb(20, 86, 224);--md-icon-button-focus-icon-color:rgb(20, 86, 224);--ix-icon-line-height:1}ix-button{--md-text-button-label-text-color:var(--md-sys-color-primary);--md-text-button-hover-state-layer-color:#49454f;--md-text-button-pressed-icon-color:rgb(20, 86, 224);--md-text-button-focus-icon-color:rgb(20, 86, 224);--md-outlined-button-outline-color:var(--md-sys-color-primary);--md-outlined-select-text-field-outline-color:#ddd}ix-dialog{--md-dialog-container-color:#fff}ix-grid ix-textbox{--md-sys-color-on-surface-variant:#b8bfc8}.grid-container{background-color:#fff;border-radius:12px;box-shadow:rgba(0,0,0,.12) 0 12px 20px -12px,#e1e4e8 0 0 0 1px inset;box-sizing:border-box;padding:3px}.touch-edge{margin:0 -3px}.grid-header{display:flex;-webkit-box-pack:justify;place-content:space-between;-webkit-box-align:center;align-items:center;padding:16px 24px;flex-wrap:wrap;gap:18px}.grid-menu{display:flex;align-items:center;margin-left:auto}.grid-menu ix-button{--md-text-button-leading-space:4px;--md-text-button-trailing-space:4px}.grid-menu span{color:#1456e0;cursor:pointer}.header{font-weight:700;display:flex;user-select:none;align-items:center}.header .header-sort-icon{padding-left:5px;opacity:0;font-size:17px;color:rgba(0,0,0,.54);cursor:pointer;height:18px}.header:hover .header-sort-icon{opacity:1}.loading{opacity:.25}span .disabled{color:rgba(9,34,65,.7)}.disable-cursor{cursor:default!important}.accounts{display:flex;align-items:center}.account-name{margin:0 8px 0 3px}vaadin-grid-cell-content{font-size:14px;--_cell-padding:1rem}.row-limit{display:flex;padding:8px}`,IxGridDownloadMenuStyles=css`ix-menu{--md-menu-container-color:#fff}`;let IxGridDownloadMenu=class extends LitElement{toggleMenu(){this.downloadMenu.open=!this.downloadMenu.open}render(){return html`<div style="position:relative"><ix-icon-button icon="download" id="anchor" @click="${this.toggleMenu}"></ix-icon-button><ix-menu id="menu" anchor="anchor" has-overflow><ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"all",bubbles:!0,composed:!0}))}"><div slot="headline">Download All Records</div></ix-menu-item><ix-menu-item @click="${()=>this.dispatchEvent(new CustomEvent("download",{detail:"filter",bubbles:!0,composed:!0}))}"><div slot="headline">Download Current Filter</div></ix-menu-item></ix-menu></div>`}};IxGridDownloadMenu.styles=[IxGridViewStyles,IxGridDownloadMenuStyles],__decorate([query("#menu")],IxGridDownloadMenu.prototype,"downloadMenu",void 0),__decorate([query("#anchor")],IxGridDownloadMenu.prototype,"downloadMenuAnchor",void 0),IxGridDownloadMenu=__decorate([customElement("ix-grid-download-menu")],IxGridDownloadMenu);const PaginationStyles=css`.pagination{display:flex;align-items:center;justify-content:end;gap:1rem;font-size:12px;margin:1rem}.pagination-nav{display:flex}ix-icon-button{--md-icon-button-icon-color:black;--md-icon-button-hover-icon-color:black;--md-icon-button-pressed-icon-color:black;--md-icon-button-focus-icon-color:black;--ix-icon-line-height:1}ix-select{--md-sys-color-primary:red;--md-sys-color-secondary:blue;--md-sys-color-tertiary:yellow;--md-menu-container-color:#fff;--md-filled-select-text-field-container-color:#fff;--md-filled-select-text-field-active-indicator-height:0px;--md-filled-select-text-field-hover-indicator-height:0px;--md-filled-field-hover-active-indicator-height:0px;--md-filled-field-focus-active-indicator-height:0px;--md-filled-field-content-size:14px;--md-filled-field-bottom-space:4px;--md-filled-field-top-space:4px;--md-filled-select-text-field-focus-trailing-icon-color:rgb(20, 86, 224);--md-filled-select-text-field-focus-active-indicator-color:var(
|
|
2
2
|
--md-filled-select-text-field-focus-trailing-icon-color
|
|
3
3
|
)}ix-select-option{--md-menu-item-selected-container-color:rgba(20, 86, 224, 0.1)}`,copy={activeFilter:"active filter",filters:"Filters",hideFilters:"Hide Filters",showFilters:"Show Filters",rowsPerPage:"Rows per page",user:"user",viewMore:"VIEW MORE",viewLess:"VIEW LESS"};let IxPagination=class extends LitElement{constructor(){super(...arguments),this.recordCount=0,this.page=1,this.pageSize=10,this.pageSizes=[5,10,25,100]}changePage(e){this.page+=e,this.updatePagination()}updatePagination(e=this.page,t=this.pageSize){this.dispatchEvent(new CustomEvent("updatePagination",{detail:{page:e,pageSize:t},bubbles:!0,composed:!0}))}render(){const e=1<this.page,t=this.recordCount>this.page*this.pageSize;return html`<div class="pagination"><p>${copy.rowsPerPage}:</p><ix-select wide-menu class="pagination__select-input" @request-selection="${e=>{e=e.target;this.pageSize=Number(e.value),this.updatePagination()}}" selected-index="${this.pageSizes.indexOf(this.pageSize)}" filled>${this.pageSizes.map(e=>html`<ix-select-option class="select-option" value="${e}"><div slot="headline">${e}</div></ix-select-option>`)}</ix-select><p>${(this.page-1)*this.pageSize+1} - ${this.page*this.pageSize>this.recordCount?html`${this.recordCount}`:html`${this.page*this.pageSize}`} of ${this.recordCount}</p><div class="pagination-nav"><ix-icon-button ?disabled="${!e}" @click="${()=>e&&this.changePage(-1)}" icon="chevron_left"></ix-icon-button><ix-icon-button ?disabled="${!t}" @click="${()=>t&&this.changePage(1)}" icon="chevron_right"></ix-icon-button></div></div>`}};IxPagination.styles=[IxGridViewStyles,PaginationStyles],__decorate([property({type:Number})],IxPagination.prototype,"recordCount",void 0),__decorate([property({type:Number})],IxPagination.prototype,"page",void 0),__decorate([property({type:Number})],IxPagination.prototype,"pageSize",void 0),__decorate([property({type:Array})],IxPagination.prototype,"pageSizes",void 0),IxPagination=__decorate([customElement("ix-pagination")],IxPagination);const IxGridColumnFilterStyles=css`.dropdown-content{position:absolute;background-color:#f9f9f9;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1;-webkit-box-align:center;align-items:center;cursor:pointer;vertical-align:middle;-webkit-tap-highlight-color:transparent;padding:10px}.dropdown-content>div{margin:0;font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:14px;line-height:24px;letter-spacing:.25px;color:#092241;display:block;cursor:pointer}.dropdown-content span:hover{background-color:#f1f1f1}.dropdown-content label{display:flex;align-items:center;background-color:#f9f9f9}.dropdown-content label.dragOrigin{background:#ff000017;outline:1px #ff9d9d dashed}.dropdown-content label p{flex:2}.dropdown-content label ix-icon.draggable{font-size:24px;color:var(--md-sys-color-primary,#1456e0);cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab;opacity:0}.dropdown-content label:hover ix-icon.draggable{opacity:1}.active{position:absolute;right:0;top:0;height:8px;width:8px;background-color:#db0028;border-radius:50%}ix-switch{padding:2px 4px;--md-switch-track-height:12px;--md-switch-track-width:35px;--md-sys-color-primary:rgba(20, 86, 224, 0.68);--md-sys-color-on-primary:#1456e0;--md-sys-color-primary-container:#1456e0;--md-switch-handle-height:19px;--md-switch-handle-width:18px;--md-sys-color-surface-container-highest:#9e9e9e;--md-sys-color-outline:#9e9e9e;--md-switch-pressed-handle-height:19px;--md-switch-pressed-handle-width:18px;--md-switch-handle-color:#fff;--md-sys-color-on-surface-variant:white;--selected-handle-height:19px;--selected-handle-width:18px;--_pressed-handle-height:19px;--_pressed-handle-width:18px;--md-switch-selected-handle-height:19px;--md-switch-selected-handle-width:18px;margin:11px 8px 1px 0}.list{position:relative}`,triggerKeys=[" ","Enter"];let IxGridColumnFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.localStorageID=void 0,this.isDropdownVisible=!1,this.disabledColumns=[],this.dragEvent={sourceEl:null,startId:-1,targetId:-1},this.outerInteraction=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.outerInteraction),this.initializeLocalStorage()}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.outerInteraction)}initializeLocalStorage(){if(this.localStorageID){var e=localStorage.getItem(this.localStorageID);if(e){const i=JSON.parse(e);this.columns.forEach((e,t)=>{i.includes(e.name)&&(this.columns[t].hidden=!0)})}this.dispatchUpdate()}}toggleColumn(e){this.columns[e].hidden=!this.columns[e].hidden,this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),void 0!==this.localStorageID&&localStorage.setItem(this.localStorageID,JSON.stringify(this.disabledColumns)),this.dispatchUpdate()}updateColumn(e,t){e=null==(e=e.target.shadowRoot)?void 0:e.querySelector("input");this.columns[t].hidden=!(null!=e&&e.checked),this.disabledColumns=this.columns.filter(e=>e.hidden).map(e=>e.name),void 0!==this.localStorageID&&localStorage.setItem(this.localStorageID,JSON.stringify(this.disabledColumns)),this.dispatchUpdate()}dispatchUpdate(e=this.columns){this.dispatchEvent(new CustomEvent("columnFilter",{detail:{columns:e},bubbles:!0,composed:!0}))}dragstart(e){e=e.target,(this.dragEvent.sourceEl=e).style.opacity="0.3",e=Number(e.getAttribute("data-id"));this.dragEvent.startId=e}dragend(){var e,t;this.dragEvent.startId!==this.dragEvent.targetId&&(t=(e=[...this.columns]).splice(this.dragEvent.startId,1)[0],e.splice(this.dragEvent.targetId,0,t),this.dispatchEvent(new CustomEvent("reorderColumns",{detail:{reorderedColumns:e},bubbles:!0,composed:!0}))),null!=(t=this.dragEvent.sourceEl)&&t.style.removeProperty("opacity"),this.dragEvent={sourceEl:null,startId:-1,targetId:-1}}dragenter(e){var e=e.target;e.classList.contains("drag-target")&&(e=Number(e.getAttribute("data-id")),this.dragEvent.targetId=e)}render(){return html`<div class="grid-menu"><span @click="${()=>{this.isDropdownVisible=!0}}" @keyDown="${e=>{triggerKeys.includes(e.key)&&(this.isDropdownVisible=!0)}}" class="list list-dropdown"><ix-icon-button appearance="default" icon="list"></ix-icon-button>${0<this.disabledColumns.length?html`<div class="active"></div>`:nothing} ${this.isDropdownVisible?html`<div class="dropdown-content" @dragover="${e=>e.preventDefault()}" @dragstart="${this.dragstart}" @dragend="${this.dragend}" @dragenter="${this.dragenter}">${repeat(this.columns,e=>e.name,(e,t)=>html`<div class="${e.hidden?"disabled":""}"><label class="${"ix-switch-label drag-target "+(this.dragEvent.startId===t?"dragOrigin":"")}" draggable="true" data-id="${t}"><ix-switch .selected="${!e.hidden}" @change="${e=>this.updateColumn(e,t)}"></ix-switch><p>${e.header}</p><ix-icon class="draggable">drag_handle</ix-icon></label></div>`)}</div>`:nothing}</span></div>`}};IxGridColumnFilter.styles=[IxGridViewStyles,IxGridColumnFilterStyles],__decorate([property({type:Array})],IxGridColumnFilter.prototype,"columns",void 0),__decorate([property({type:String})],IxGridColumnFilter.prototype,"localStorageID",void 0),__decorate([state()],IxGridColumnFilter.prototype,"isDropdownVisible",void 0),__decorate([state()],IxGridColumnFilter.prototype,"disabledColumns",void 0),__decorate([state()],IxGridColumnFilter.prototype,"dragEvent",void 0),IxGridColumnFilter=__decorate([customElement("ix-grid-column-filter")],IxGridColumnFilter);const IxGridRowFilterStyles=css`.slot-wrap{display:flex}.slot-wrap ix-icon{--ix-icon-font-size:24px;color:#1456e0;margin-right:5px}.grid-menu ix-button .filter{font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;margin-top:2px}.filter-form{white-space:nowrap;padding:9px;font-family:'Open Sans',sans-serif;color:#5d6d82}.filter-form-column{display:inline-block;vertical-align:middle}.filter-remove span{margin-right:0;color:#5d6d82}.filter-dropdown-content{position:absolute;display:inline;right:0;top:78%;box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:3;transition:box-shadow .3s cubic-bezier(.4,0,.2,1) 0s;border-radius:12px;box-shadow:rgba(0,0,0,.2) 0 5px 5px -3px,rgba(0,0,0,.14) 0 8px 10px 1px,rgba(0,0,0,.12) 0 3px 14px 2px;background-color:#fff}.filter-form input,.filter-form option,.filter-form select{border-radius:0;cursor:pointer;letter-spacing:1.44px;line-height:1.4375em;box-sizing:content-box;background:0 0;height:1.4375em;margin:0;animation-name:mui-auto-fill-cancel;animation-duration:10ms;border:none;border-image:initial;font-size:16px;box-sizing:border-box;cursor:text;user-select:none;color:currentcolor;-webkit-tap-highlight-color:transparent;display:block;min-width:0;width:100%;font-family:'Open Sans',sans-serif;height:25px;border-bottom:1px solid #000}.filter-form option{-webkit-tap-highlight-color:#9ca6b2}.filter-form input:hover,.filter-form select:hover{outline:0!important;border-bottom:2px solid #000}.filter-form input:focus,.filter-form select:focus{outline:0!important;border-bottom:2px solid #1456e0}.filter-form select:focus{background-color:rgba(0,0,0,.05)}.form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}.form-group label{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label span{font-family:'Open Sans',sans-serif;font-style:normal;font-weight:400;font-size:16px;line-height:1.4375em;letter-spacing:.44px;padding:0;color:#092241;display:block;transform-origin:left top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:133%;transform:translate(0,-1.5px) scale(.75);transition:color .2s cubic-bezier(0,0,.2,1) 0s,transform .2s cubic-bezier(0,0,.2,1) 0s,max-width .2s cubic-bezier(0,0,.2,1) 0s}.filter-form-group label:focus-within span{color:#1456e0}.filter-form-group{display:flex;flex-direction:column;align-items:baseline;height:54px;justify-content:flex-end;font-family:'Open Sans',sans-serif}option{font-weight:400;display:block;min-height:1.2em;padding:0 2px 1px;white-space:nowrap}.add-filter-button .add{margin-right:0;margin-left:-6px}.filter-footer{margin-top:auto;display:flex;align-items:left;padding:0;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;width:100%}.filter-footer button{align-items:center!important;margin-left:0}.filter-footer .add{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px}.filter-footer .clear{margin-left:auto!important}.form-group .close{user-select:none;width:1em;height:1em;display:inline-block;fill:currentcolor;flex-shrink:0;transition:fill .2s cubic-bezier(.4,0,.2,1) 0s;font-size:1.25rem;font-weight:lighter}.no-display{display:none}.filter-local-operator-empty{width:54px;border:none}.grid-menu span.filter-superscript{position:absolute;top:6px;left:14px;z-index:98;display:flex;align-items:center;justify-content:center;font-size:.75rem;padding:0;height:16px;width:16px;border-radius:50%;background-color:#1456e0;color:#fff}.filterlist{width:40px}.filterColumnField{width:150px}.filterValueField{width:190px}.filterOperatorField{width:120px}.add-filter-button.disabled{opacity:.5;cursor:not-allowed}select:hover{cursor:pointer}input:hover{cursor:text}.tooltip-container{position:relative;display:inline-block}.tool-tip{color:#fff;overflow-wrap:break-word;border-radius:3px;background-color:#071454;padding:5px 8px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;position:absolute;top:42px;right:0;z-index:3;white-space:nowrap;display:none}.filter-button:hover~.tool-tip{display:block}.tool-tip li{margin-left:-21px;color:#fff;overflow-wrap:break-word;border-radius:3px;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px;max-width:250px;min-width:200px;white-space:wrap}.tool-tip p{margin:0;padding:0;font-family:'Open Sans',sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:16px;letter-spacing:.4px}.add-filter-button{display:inline-flex;-webkit-box-align:center;align-items:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}.add-filter-button:disabled,.clear:disabled{opacity:.25;cursor:not-allowed}button{-webkit-box-align:center;-webkit-box-pack:center;justify-content:center;position:relative;box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:0;border:0;margin:0;cursor:pointer;user-select:none;vertical-align:middle;appearance:none;text-decoration:none;font-family:'Red Hat Display',sans-serif;font-weight:700;font-style:normal;font-size:14px;line-height:18.52px;letter-spacing:1.25px;text-transform:uppercase;color:#fff;min-width:64px;transition:background-color 250ms cubic-bezier(.4,0,.2,1) 0s,box-shadow 250ms cubic-bezier(.4,0,.2,1) 0s,border-color 250ms cubic-bezier(.4,0,.2,1) 0s,color 250ms cubic-bezier(.4,0,.2,1) 0s;box-shadow:none;min-height:36px;border-radius:100px;background-color:unset}ix-button.filter-button{padding-inline:0}.grid-menu ix-button{align-items:center;display:flex}`;let IxGridRowFilter=class extends LitElement{constructor(){super(...arguments),this.columns=[],this.isDropdownVisible=!1,this.filters=[],this.filterableColumns=[],this.filterColumns=[],this.activeFilters=[],this.mapSelect=!1,this.closeOnOuterClick=e=>{e.composedPath().includes(this)||(this.isDropdownVisible=!1)}}updateActiveFilters(){this.activeFilters=this.filters.filter(e=>0<e.value.length)}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.closeOnOuterClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.closeOnOuterClick)}firstUpdated(){this.filterableColumns=this.columns.filter(e=>e.filterable),this.filterColumns=this.filterableColumns.map(e=>e.name),this.filters=this.parseFilterQueryString(),this.filters.length||this.addFilter(),this.updateActiveFilters(),this.dispatchUpdate()}get filterNames(){return this.filters.map(e=>e.columnField)}get unselectedFilters(){return this.filterColumns.filter(e=>!this.filterNames.includes(e))}parseFilterQueryString(){var e,t,i=[];for([e,t]of new URLSearchParams(window.location.search))this.filterColumns.includes(e)&&i.push({columnField:e,operatorValue:"contains",value:t});return i}dispatchUpdate(){this.dispatchEvent(new CustomEvent("rowFilter",{detail:{filters:this.filters.filter(e=>3<=e.value.length)},bubbles:!0,composed:!0}))}addFilter(){var e=this.filterColumns.find(e=>!this.filterNames.includes(e))||"";this.filters=[...this.filters,{columnField:e,operatorValue:"contains",value:""}],this.updateActiveFilters()}clearFilters(){this.filters=[],this.addFilter(),this.dispatchUpdate()}removeFilter(i){this.filters=this.filters.filter((e,t)=>t!==i),this.dispatchUpdate(),0===this.filters.length&&(this.isDropdownVisible=!1,this.addFilter())}onfilterColumnChange(e,t){t=t.target.value;this.filters[e].columnField=t,this.filters=[...this.filters],3<=this.filters[e].value.length&&this.dispatchUpdate()}onfilterValueChange(e,t){var i=this.filters[e].value.length,t=t.target["value"],t=(this.filters[e].value=t,this.filters[e].value.length);0<this.filters[e].columnField.length&&(3<=t||t<i)&&this.dispatchUpdate(),this.updateActiveFilters()}formatCamelCaseToEnglish(e){e=e.replace(/([A-Z])/g," $1").toLowerCase();return e.charAt(0).toUpperCase()+e.slice(1)}renderToolTip(){return this.isDropdownVisible?copy.hideFilters:this.activeFilters.length?html`<p>${this.activeFilters.length} ${copy.activeFilter}</p><ul>${this.activeFilters.map(e=>html`<li>${this.formatCamelCaseToEnglish(e.columnField)} ${e.operatorValue} ${e.value}</li>`)}</ul>`:copy.showFilters}renderFilterInput(t,i){const o=[t.columnField,...this.unselectedFilters];var e=this.filterableColumns.filter(e=>o.includes(e.name));return html`<div class="filter-form"><div class="filter-remove filter-form-column"><div class="form-group"><ix-icon-button icon="close" @click="${()=>this.removeFilter(i)}" @keyDown="${e=>{" "!==e.key&&"Enter"!==e.key||this.removeFilter(i)}}"></ix-icon-button></div></div>${this.mapSelect?html`<div class="filter-form-column filter-form-column-border filterColumnField"><div class="form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${e.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
|
|
4
4
|
`)}">Columns</label> <select @change="${e=>this.onfilterColumnChange(i,e)}" .value="${t.columnField}" data-v="${t.columnField}">${e.map(e=>html`<option value="${e.name}" ?selected="${e.name===t.columnField}">${e.header}</option>`)}</select></div></div>`:nothing}<div class="filter-form-column filter-form-column-border filterColumnField"><div class="filter-form-group"><label class="form-group-column-label" title="select: ${t.columnField}, options: ${e.map(e=>`value=${e.name}, selected=${e.name===t.columnField}, ${e.header}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { IxGridNavigation } from '../components/IxGridNav.js';
|
|
2
|
-
export declare const IxGridNav: import("@lit/react").ReactWebComponent<IxGridNavigation, {}>;
|
|
1
|
+
import { IxGridNavigation } from '../components/IxGridNav.js';
|
|
2
|
+
export declare const IxGridNav: import("@lit/react").ReactWebComponent<IxGridNavigation, {}>;
|
package/dist/react/IxGridNav.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { createComponent } from '@lit/react';
|
|
3
|
-
import { IxGridNavigation } from '../components/IxGridNav.js';
|
|
4
|
-
export const IxGridNav = createComponent({
|
|
5
|
-
tagName: 'ix-grid-nav',
|
|
6
|
-
elementClass: IxGridNavigation,
|
|
7
|
-
react: React,
|
|
8
|
-
});
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { createComponent } from '@lit/react';
|
|
3
|
+
import { IxGridNavigation } from '../components/IxGridNav.js';
|
|
4
|
+
export const IxGridNav = createComponent({
|
|
5
|
+
tagName: 'ix-grid-nav',
|
|
6
|
+
elementClass: IxGridNavigation,
|
|
7
|
+
react: React,
|
|
8
|
+
});
|
|
9
9
|
//# sourceMappingURL=IxGridNav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import '../components/IxGridColumnFilter.js';
|
|
1
|
+
import '../components/IxGridColumnFilter.js';
|
|
@@ -1,36 +1,36 @@
|
|
|
1
|
-
import { html } from 'lit';
|
|
2
|
-
import { fixture, expect, elementUpdated } from '@open-wc/testing';
|
|
3
|
-
import '../components/IxGridColumnFilter.js';
|
|
4
|
-
const columns = [
|
|
5
|
-
{
|
|
6
|
-
name: 'firstName',
|
|
7
|
-
header: 'First name',
|
|
8
|
-
hidden: false,
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
name: 'lastName',
|
|
12
|
-
header: 'Last name',
|
|
13
|
-
hidden: true,
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
name: 'middleName',
|
|
17
|
-
header: 'Middle name',
|
|
18
|
-
hidden: false,
|
|
19
|
-
},
|
|
20
|
-
];
|
|
21
|
-
describe('IxGridColumnFilter', () => {
|
|
22
|
-
it('renders the grid column filter component', async () => {
|
|
23
|
-
const el = await fixture(html `<ix-grid-column-filter></ix-grid-column-filter>`);
|
|
24
|
-
expect(el).to.not.be.null;
|
|
25
|
-
});
|
|
26
|
-
it('renders the grid column filters list', async () => {
|
|
27
|
-
var _a, _b;
|
|
28
|
-
const el = await fixture(html `<ix-grid-column-filter .columns=${columns}></ix-grid-column-filter>`);
|
|
29
|
-
const list = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list');
|
|
30
|
-
list.click();
|
|
31
|
-
await elementUpdated(el);
|
|
32
|
-
const options = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('ix-switch');
|
|
33
|
-
expect(options === null || options === void 0 ? void 0 : options.length).to.equal(3);
|
|
34
|
-
});
|
|
35
|
-
});
|
|
1
|
+
import { html } from 'lit';
|
|
2
|
+
import { fixture, expect, elementUpdated } from '@open-wc/testing';
|
|
3
|
+
import '../components/IxGridColumnFilter.js';
|
|
4
|
+
const columns = [
|
|
5
|
+
{
|
|
6
|
+
name: 'firstName',
|
|
7
|
+
header: 'First name',
|
|
8
|
+
hidden: false,
|
|
9
|
+
},
|
|
10
|
+
{
|
|
11
|
+
name: 'lastName',
|
|
12
|
+
header: 'Last name',
|
|
13
|
+
hidden: true,
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
name: 'middleName',
|
|
17
|
+
header: 'Middle name',
|
|
18
|
+
hidden: false,
|
|
19
|
+
},
|
|
20
|
+
];
|
|
21
|
+
describe('IxGridColumnFilter', () => {
|
|
22
|
+
it('renders the grid column filter component', async () => {
|
|
23
|
+
const el = await fixture(html `<ix-grid-column-filter></ix-grid-column-filter>`);
|
|
24
|
+
expect(el).to.not.be.null;
|
|
25
|
+
});
|
|
26
|
+
it('renders the grid column filters list', async () => {
|
|
27
|
+
var _a, _b;
|
|
28
|
+
const el = await fixture(html `<ix-grid-column-filter .columns=${columns}></ix-grid-column-filter>`);
|
|
29
|
+
const list = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.list');
|
|
30
|
+
list.click();
|
|
31
|
+
await elementUpdated(el);
|
|
32
|
+
const options = (_b = el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('ix-switch');
|
|
33
|
+
expect(options === null || options === void 0 ? void 0 : options.length).to.equal(3);
|
|
34
|
+
});
|
|
35
|
+
});
|
|
36
36
|
//# sourceMappingURL=ix-grid-column-filter.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import '../components/IxGridRowFilter.js';
|
|
1
|
+
import '../components/IxGridRowFilter.js';
|