@nuralyui/table 0.0.3 → 0.0.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.
Files changed (89) hide show
  1. package/bundle.js +1497 -0
  2. package/package.json +16 -2
  3. package/react.js +1 -1
  4. package/react.js.map +1 -1
  5. package/table.component.d.ts +85 -12
  6. package/table.component.js +229 -136
  7. package/table.component.js.map +1 -1
  8. package/table.style.js +253 -2
  9. package/table.style.js.map +1 -1
  10. package/table.types.d.ts +22 -4
  11. package/table.types.js +0 -23
  12. package/table.types.js.map +1 -1
  13. package/components/hy-table-actions.d.ts +0 -10
  14. package/components/hy-table-actions.d.ts.map +0 -1
  15. package/components/hy-table-actions.js +0 -39
  16. package/components/hy-table-actions.js.map +0 -1
  17. package/components/hy-table-content.d.ts +0 -25
  18. package/components/hy-table-content.d.ts.map +0 -1
  19. package/components/hy-table-content.js +0 -168
  20. package/components/hy-table-content.js.map +0 -1
  21. package/components/hy-table-filter.d.ts +0 -11
  22. package/components/hy-table-filter.d.ts.map +0 -1
  23. package/components/hy-table-filter.js +0 -59
  24. package/components/hy-table-filter.js.map +0 -1
  25. package/components/hy-table-pagination.d.ts +0 -21
  26. package/components/hy-table-pagination.d.ts.map +0 -1
  27. package/components/hy-table-pagination.js +0 -111
  28. package/components/hy-table-pagination.js.map +0 -1
  29. package/components/table-actions.style.d.ts +0 -2
  30. package/components/table-actions.style.d.ts.map +0 -1
  31. package/components/table-actions.style.js +0 -31
  32. package/components/table-actions.style.js.map +0 -1
  33. package/components/table-actions.variables.d.ts +0 -2
  34. package/components/table-actions.variables.d.ts.map +0 -1
  35. package/components/table-actions.variables.js +0 -13
  36. package/components/table-actions.variables.js.map +0 -1
  37. package/components/table-content.style.d.ts +0 -2
  38. package/components/table-content.style.d.ts.map +0 -1
  39. package/components/table-content.style.js +0 -77
  40. package/components/table-content.style.js.map +0 -1
  41. package/components/table-content.variables.d.ts +0 -2
  42. package/components/table-content.variables.d.ts.map +0 -1
  43. package/components/table-content.variables.js +0 -29
  44. package/components/table-content.variables.js.map +0 -1
  45. package/components/table-filter.style.d.ts +0 -2
  46. package/components/table-filter.style.d.ts.map +0 -1
  47. package/components/table-filter.style.js +0 -39
  48. package/components/table-filter.style.js.map +0 -1
  49. package/components/table-filter.variables.d.ts +0 -2
  50. package/components/table-filter.variables.d.ts.map +0 -1
  51. package/components/table-filter.variables.js +0 -17
  52. package/components/table-filter.variables.js.map +0 -1
  53. package/components/table-pagination.style.d.ts +0 -2
  54. package/components/table-pagination.style.d.ts.map +0 -1
  55. package/components/table-pagination.style.js +0 -102
  56. package/components/table-pagination.style.js.map +0 -1
  57. package/components/table-pagination.variables.d.ts +0 -2
  58. package/components/table-pagination.variables.d.ts.map +0 -1
  59. package/components/table-pagination.variables.js +0 -17
  60. package/components/table-pagination.variables.js.map +0 -1
  61. package/demo/table-demo.d.ts +0 -17
  62. package/demo/table-demo.d.ts.map +0 -1
  63. package/demo/table-demo.js +0 -166
  64. package/demo/table-demo.js.map +0 -1
  65. package/index.d.ts.map +0 -1
  66. package/react.d.ts.map +0 -1
  67. package/table.component.d.ts.map +0 -1
  68. package/table.style.d.ts.map +0 -1
  69. package/table.types.d.ts.map +0 -1
  70. package/test/hy-table-actions_test.d.ts +0 -2
  71. package/test/hy-table-actions_test.d.ts.map +0 -1
  72. package/test/hy-table-actions_test.js +0 -32
  73. package/test/hy-table-actions_test.js.map +0 -1
  74. package/test/hy-table-content_test.d.ts +0 -2
  75. package/test/hy-table-content_test.d.ts.map +0 -1
  76. package/test/hy-table-content_test.js +0 -168
  77. package/test/hy-table-content_test.js.map +0 -1
  78. package/test/hy-table-filter_test.d.ts +0 -2
  79. package/test/hy-table-filter_test.d.ts.map +0 -1
  80. package/test/hy-table-filter_test.js +0 -80
  81. package/test/hy-table-filter_test.js.map +0 -1
  82. package/test/hy-table-pagination_test.d.ts +0 -2
  83. package/test/hy-table-pagination_test.d.ts.map +0 -1
  84. package/test/hy-table-pagination_test.js +0 -114
  85. package/test/hy-table-pagination_test.js.map +0 -1
  86. package/test/hy-table_test.d.ts +0 -2
  87. package/test/hy-table_test.d.ts.map +0 -1
  88. package/test/hy-table_test.js +0 -145
  89. package/test/hy-table_test.js.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-filter.style.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-filter.style.ts"],"names":[],"mappings":"AAsCA,eAAO,MAAM,MAAM,2BAAsC,CAAC"}
@@ -1,39 +0,0 @@
1
- import { css } from 'lit';
2
- import { styleVariables } from './table-filter.variables.js';
3
- const tableActionsStyle = css `
4
- :host([showInput]) {
5
- width: 100%;
6
- }
7
-
8
- .filter-container {
9
- position: relative;
10
- margin-bottom: 5px;
11
- }
12
- .filter-container input {
13
- padding: 5px;
14
- padding-left: 30px;
15
- width: 100%;
16
- box-sizing: border-box;
17
- background-color: var(--hybrid-filter-input-background-color);
18
- color: var(--hybrid-filter-input-text-color);
19
- }
20
- input:focus {
21
- outline-style: none;
22
- border: var(--hybrid-filter-focused-input-border);
23
- }
24
- .icon-container {
25
- height: 25px;
26
- width: 35px;
27
- cursor: pointer;
28
- display: flex;
29
- justify-content: center;
30
- align-items: center;
31
- }
32
- .search-icon {
33
- position: absolute;
34
- left: 10px;
35
- top: 25%;
36
- }
37
- `;
38
- export const styles = [tableActionsStyle, styleVariables];
39
- //# sourceMappingURL=table-filter.style.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-filter.style.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-filter.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,6BAA6B,CAAC;AAC3D,MAAM,iBAAiB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC5B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,iBAAiB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './table-filter.variables.js';\nconst tableActionsStyle = css`\n :host([showInput]) {\n width: 100%;\n }\n\n .filter-container {\n position: relative;\n margin-bottom: 5px;\n }\n .filter-container input {\n padding: 5px;\n padding-left: 30px;\n width: 100%;\n box-sizing: border-box;\n background-color: var(--hybrid-filter-input-background-color);\n color: var(--hybrid-filter-input-text-color);\n }\n input:focus {\n outline-style: none;\n border: var(--hybrid-filter-focused-input-border);\n }\n .icon-container {\n height: 25px;\n width: 35px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .search-icon {\n position: absolute;\n left: 10px;\n top: 25%;\n }\n`;\n\nexport const styles = [tableActionsStyle, styleVariables];\n"]}
@@ -1,2 +0,0 @@
1
- export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=table-filter.variables.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-filter.variables.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-filter.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAc1B,CAAC"}
@@ -1,17 +0,0 @@
1
- import { css } from 'lit';
2
- export const styleVariables = css `
3
- :host {
4
- --hybrid-filter-input-background-color: #ffffff;
5
- --hybrid-filter-input-text-color: #000000;
6
- --hybrid-filter-focused-input-border: 1px solid #e0e0e0;
7
- }
8
-
9
- @media (prefers-color-scheme: dark) {
10
- :host {
11
- --hybrid-filter-input-background-color: #393939;
12
- --hybrid-filter-focused-input-border: 1px solid #393939;
13
- --hybrid-filter-input-text-color: #c6c6c6;
14
- }
15
- }
16
- `;
17
- //# sourceMappingURL=table-filter.variables.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-filter.variables.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-filter.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAchC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-filter-input-background-color: #ffffff;\n --hybrid-filter-input-text-color: #000000;\n --hybrid-filter-focused-input-border: 1px solid #e0e0e0;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-filter-input-background-color: #393939;\n --hybrid-filter-focused-input-border: 1px solid #393939;\n --hybrid-filter-input-text-color: #c6c6c6;\n }\n }\n`;\n"]}
@@ -1,2 +0,0 @@
1
- export declare const styles: import("lit").CSSResult[];
2
- //# sourceMappingURL=table-pagination.style.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-pagination.style.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-pagination.style.ts"],"names":[],"mappings":"AAsGA,eAAO,MAAM,MAAM,2BAAyC,CAAC"}
@@ -1,102 +0,0 @@
1
- import { css } from 'lit';
2
- import { styleVariables } from './table-pagination.variables.js';
3
- const tablePaginationStyle = css `
4
- .pagination-container {
5
- display: flex;
6
- justify-content: space-between;
7
- background-color: var(--hybrid-pagination-background-color);
8
- color: var(--hybrid-pagination-text-color);
9
- }
10
-
11
- .left-content {
12
- display: flex;
13
- justify-content: space-between;
14
- }
15
- .left-content .items-details {
16
- border-left: var(--hybrid-pagination-borders);
17
- padding: 10px;
18
- }
19
- .right-arrow,
20
- .left-arrow {
21
- --hybrid-icon-color: var(--hybrid-pagination-text-color);
22
- }
23
-
24
- :host([size='small']) .left-content .items-details {
25
- padding: 5px;
26
- }
27
-
28
- :host([size='large']) .left-content .items-details {
29
- padding: 15px;
30
- }
31
-
32
- .left-content .select-details {
33
- padding: 10px;
34
- }
35
-
36
- :host([size='small']) .left-content .select-details {
37
- padding: 5px;
38
- }
39
-
40
- :host([size='large']) .left-content .select-details {
41
- padding: 15px;
42
- }
43
-
44
- .right-content {
45
- display: flex;
46
- justify-content: space-between;
47
- border-left: var(--hybrid-pagination-borders);
48
- }
49
- .right-content .icon-container {
50
- display: flex;
51
- justify-content: space-between;
52
- border-left: var(--hybrid-pagination-borders);
53
- }
54
-
55
- .right-content .page-details {
56
- padding: 10px;
57
- }
58
-
59
- :host([size='small']) .right-content .page-details {
60
- padding: 5px;
61
- }
62
-
63
- :host([size='large']) .right-content .page-details {
64
- padding: 15px;
65
- }
66
-
67
- .icon-container .left-arrow,
68
- .icon-container .right-arrow {
69
- padding: 10px;
70
- }
71
-
72
- :host([size='small']) .icon-container .left-arrow,
73
- :host([size='small']) .icon-container .right-arrow {
74
- padding: 5px;
75
- }
76
-
77
- :host([size='large']) .icon-container .left-arrow,
78
- :host([size='large']) .icon-container .right-arrow {
79
- padding: 15px;
80
- }
81
-
82
- .icon-container .left-arrow {
83
- border-right: var(--hybrid-pagination-borders);
84
- }
85
-
86
- select {
87
- border: none;
88
- background-color: var(--hybrid-pagination-background-color);
89
- cursor: pointer;
90
- color: var(--hybrid-pagination-text-color);
91
- }
92
-
93
- hy-icon[data-enabled='false'] {
94
- cursor: not-allowed;
95
- }
96
-
97
- hy-icon[data-enabled='true'] {
98
- cursor: pointer;
99
- }
100
- `;
101
- export const styles = [tablePaginationStyle, styleVariables];
102
- //# sourceMappingURL=table-pagination.style.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-pagination.style.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-pagination.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AACxB,OAAO,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AAE/D,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiG/B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,oBAAoB,EAAE,cAAc,CAAC,CAAC","sourcesContent":["import {css} from 'lit';\nimport {styleVariables} from './table-pagination.variables.js';\n\nconst tablePaginationStyle = css`\n .pagination-container {\n display: flex;\n justify-content: space-between;\n background-color: var(--hybrid-pagination-background-color);\n color: var(--hybrid-pagination-text-color);\n }\n\n .left-content {\n display: flex;\n justify-content: space-between;\n }\n .left-content .items-details {\n border-left: var(--hybrid-pagination-borders);\n padding: 10px;\n }\n .right-arrow,\n .left-arrow {\n --hybrid-icon-color: var(--hybrid-pagination-text-color);\n }\n\n :host([size='small']) .left-content .items-details {\n padding: 5px;\n }\n\n :host([size='large']) .left-content .items-details {\n padding: 15px;\n }\n\n .left-content .select-details {\n padding: 10px;\n }\n\n :host([size='small']) .left-content .select-details {\n padding: 5px;\n }\n\n :host([size='large']) .left-content .select-details {\n padding: 15px;\n }\n\n .right-content {\n display: flex;\n justify-content: space-between;\n border-left: var(--hybrid-pagination-borders);\n }\n .right-content .icon-container {\n display: flex;\n justify-content: space-between;\n border-left: var(--hybrid-pagination-borders);\n }\n\n .right-content .page-details {\n padding: 10px;\n }\n\n :host([size='small']) .right-content .page-details {\n padding: 5px;\n }\n\n :host([size='large']) .right-content .page-details {\n padding: 15px;\n }\n\n .icon-container .left-arrow,\n .icon-container .right-arrow {\n padding: 10px;\n }\n\n :host([size='small']) .icon-container .left-arrow,\n :host([size='small']) .icon-container .right-arrow {\n padding: 5px;\n }\n\n :host([size='large']) .icon-container .left-arrow,\n :host([size='large']) .icon-container .right-arrow {\n padding: 15px;\n }\n\n .icon-container .left-arrow {\n border-right: var(--hybrid-pagination-borders);\n }\n\n select {\n border: none;\n background-color: var(--hybrid-pagination-background-color);\n cursor: pointer;\n color: var(--hybrid-pagination-text-color);\n }\n\n hy-icon[data-enabled='false'] {\n cursor: not-allowed;\n }\n\n hy-icon[data-enabled='true'] {\n cursor: pointer;\n }\n`;\n\nexport const styles = [tablePaginationStyle, styleVariables];\n"]}
@@ -1,2 +0,0 @@
1
- export declare const styleVariables: import("lit").CSSResult;
2
- //# sourceMappingURL=table-pagination.variables.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-pagination.variables.d.ts","sourceRoot":"","sources":["../../../../src/components/table/components/table-pagination.variables.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAc1B,CAAC"}
@@ -1,17 +0,0 @@
1
- import { css } from 'lit';
2
- export const styleVariables = css `
3
- :host {
4
- --hybrid-pagination-background-color: #f4f4f4;
5
- --hybrid-pagination-text-color: #161616;
6
- --hybrid-pagination-borders: 1px solid #e0e0e0;
7
- }
8
-
9
- @media (prefers-color-scheme: dark) {
10
- :host {
11
- --hybrid-pagination-background-color: #393939;
12
- --hybrid-pagination-text-color: #f4f4f4;
13
- --hybrid-pagination-borders: 1px solid #8d8d8d;
14
- }
15
- }
16
- `;
17
- //# sourceMappingURL=table-pagination.variables.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-pagination.variables.js","sourceRoot":"","sources":["../../../../src/components/table/components/table-pagination.variables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAchC,CAAC","sourcesContent":["import {css} from 'lit';\n\nexport const styleVariables = css`\n :host {\n --hybrid-pagination-background-color: #f4f4f4;\n --hybrid-pagination-text-color: #161616;\n --hybrid-pagination-borders: 1px solid #e0e0e0;\n }\n\n @media (prefers-color-scheme: dark) {\n :host {\n --hybrid-pagination-background-color: #393939;\n --hybrid-pagination-text-color: #f4f4f4;\n --hybrid-pagination-borders: 1px solid #8d8d8d;\n }\n }\n`;\n"]}
@@ -1,17 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class TableDemo extends LitElement {
3
- headers: {
4
- name: string;
5
- key: string;
6
- }[];
7
- rows: {
8
- id: number;
9
- status: string;
10
- priority: string;
11
- title: string;
12
- assignee: string;
13
- }[];
14
- static styles: import("lit").CSSResult[];
15
- render(): import("lit").TemplateResult<1>;
16
- }
17
- //# sourceMappingURL=table-demo.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-demo.d.ts","sourceRoot":"","sources":["../../../../src/components/table/demo/table-demo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAG1C,qBAAa,SAAU,SAAQ,UAAU;IAEvC,OAAO;;;QAqBL;IAGF,IAAI;;;;;;QAyDF;IACF,OAAgB,MAAM,4BAOpB;IACO,MAAM;CAyDhB"}
@@ -1,166 +0,0 @@
1
- var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
- var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
- if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
- else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
- return c > 3 && r && Object.defineProperty(target, key, r), r;
6
- };
7
- import { LitElement, css, html } from 'lit';
8
- import { state } from 'lit/decorators.js';
9
- export class TableDemo extends LitElement {
10
- constructor() {
11
- super(...arguments);
12
- this.headers = [
13
- {
14
- name: 'Id',
15
- key: 'id',
16
- },
17
- {
18
- name: 'Status',
19
- key: 'status',
20
- },
21
- {
22
- name: 'Priority',
23
- key: 'priority',
24
- },
25
- {
26
- name: 'Title',
27
- key: 'title',
28
- },
29
- {
30
- name: 'Assignee',
31
- key: 'assignee',
32
- },
33
- ];
34
- this.rows = [
35
- {
36
- id: 1,
37
- status: 'Open',
38
- priority: 'Normal',
39
- title: 'Product Details Page - Variant Component (1)',
40
- assignee: 'William Jones',
41
- },
42
- {
43
- id: 2,
44
- status: 'Open',
45
- priority: 'High',
46
- title: 'Product Details Page - Variant Component (2)',
47
- assignee: 'Natalia Hayward',
48
- },
49
- {
50
- id: 3,
51
- status: 'Closed',
52
- priority: 'Normal',
53
- title: 'Product Details Page - Variant Component (3)',
54
- assignee: 'Jess Plant',
55
- },
56
- {
57
- id: 4,
58
- status: 'Open',
59
- priority: 'Normal',
60
- title: 'Product Details Page - Variant Component (4)',
61
- assignee: 'William Jones',
62
- },
63
- {
64
- id: 5,
65
- status: 'Open',
66
- priority: 'Normal',
67
- title: 'Product Details Page - Variant Component (5)',
68
- assignee: 'Kathleen Knowles',
69
- },
70
- {
71
- id: 6,
72
- status: 'Open',
73
- priority: 'High',
74
- title: 'Product Details Page - Variant Component (6)',
75
- assignee: 'Mel Young',
76
- },
77
- {
78
- id: 7,
79
- status: 'Closed',
80
- priority: 'Normal',
81
- title: 'Product Details Page - Variant Component (7)',
82
- assignee: 'Zahid Allison',
83
- },
84
- {
85
- id: 8,
86
- status: 'Closed',
87
- priority: 'High',
88
- title: 'Product Details Page - Variant Component (8)',
89
- assignee: 'William Jones',
90
- },
91
- ];
92
- }
93
- render() {
94
- return html `
95
- <h1>With selection</h1>
96
- <h3>Multiple selection</h3>
97
- <hy-table
98
- @onSelect=${(e) => {
99
- console.log('selected', e.detail.value);
100
- }}
101
- @onPaginate=${(e) => {
102
- console.log('page ', e.detail.value);
103
- }}
104
- @onSort=${(e) => {
105
- console.log('sorted ', e.detail.value);
106
- }}
107
- .headers="${this.headers}" .rows="${this.rows}" .selectionMode=${'multiple'}></hy-table>
108
- <h3>Single selection</h3>
109
- <hy-table .headers="${this.headers}" .rows="${this.rows}" .selectionMode=${'single'}></hy-table>
110
- <h1>With Expandable attribute (title)</h1>
111
- <hy-table .headers="${this.headers}" .rows="${this.rows}" .expandable=${'title'}></hy-table>
112
- <h1>With filter: search</h1>
113
- <hy-table .headers="${this.headers}" .rows="${this.rows}" .withFilter=${true}></hy-table>
114
- <h3>filter + expandable attribute (priority)</h3>
115
- <hy-table
116
- .headers="${this.headers}"
117
- .rows="${this.rows}"
118
- .withFilter=${true}
119
- .expandable=${'priority'}
120
- @onSelect=${(e) => {
121
- console.log('selected', e.detail.value);
122
- }}
123
- @onSearch=${(e) => {
124
- console.log('searched ', e.detail.value);
125
- }}
126
- @onSort=${(e) => {
127
- console.log('sorted ', e.detail.value);
128
- }}
129
- ></hy-table>
130
-
131
- <h1>Sizes</h1>
132
- <h3>Small size with selection</h3>
133
- <hy-table
134
- .headers="${this.headers}"
135
- .rows="${this.rows}"
136
- .size=${'small'}
137
- .selectionMode=${'multiple'}
138
- ></hy-table>
139
- <h3>Large size</h3>
140
- <hy-table .headers="${this.headers}" .rows="${this.rows}" .size=${'large'}></hy-table>
141
- <h3>Large size with multiple selection</h3>
142
- <hy-table
143
- .headers="${this.headers}"
144
- .rows="${this.rows}"
145
- .size=${'large'}
146
- .selectionMode=${'multiple'}
147
- ></hy-table>
148
- `;
149
- }
150
- }
151
- TableDemo.styles = [
152
- css `
153
- :host {
154
- display: block;
155
- width: 90%;
156
- }
157
- `,
158
- ];
159
- __decorate([
160
- state()
161
- ], TableDemo.prototype, "headers", void 0);
162
- __decorate([
163
- state()
164
- ], TableDemo.prototype, "rows", void 0);
165
- customElements.define('hy-table-demo', TableDemo);
166
- //# sourceMappingURL=table-demo.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"table-demo.js","sourceRoot":"","sources":["../../../../src/components/table/demo/table-demo.ts"],"names":[],"mappings":"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","sourcesContent":["import {LitElement, css, html} from 'lit';\nimport {state} from 'lit/decorators.js';\n\nexport class TableDemo extends LitElement {\n @state()\n headers = [\n {\n name: 'Id',\n key: 'id',\n },\n {\n name: 'Status',\n key: 'status',\n },\n {\n name: 'Priority',\n key: 'priority',\n },\n {\n name: 'Title',\n key: 'title',\n },\n {\n name: 'Assignee',\n key: 'assignee',\n },\n ];\n\n @state()\n rows = [\n {\n id: 1,\n status: 'Open',\n priority: 'Normal',\n title: 'Product Details Page - Variant Component (1)',\n assignee: 'William Jones',\n },\n {\n id: 2,\n status: 'Open',\n priority: 'High',\n title: 'Product Details Page - Variant Component (2)',\n assignee: 'Natalia Hayward',\n },\n {\n id: 3,\n status: 'Closed',\n priority: 'Normal',\n title: 'Product Details Page - Variant Component (3)',\n assignee: 'Jess Plant',\n },\n {\n id: 4,\n status: 'Open',\n priority: 'Normal',\n title: 'Product Details Page - Variant Component (4)',\n assignee: 'William Jones',\n },\n {\n id: 5,\n status: 'Open',\n priority: 'Normal',\n title: 'Product Details Page - Variant Component (5)',\n assignee: 'Kathleen Knowles',\n },\n {\n id: 6,\n status: 'Open',\n priority: 'High',\n title: 'Product Details Page - Variant Component (6)',\n assignee: 'Mel Young',\n },\n {\n id: 7,\n status: 'Closed',\n priority: 'Normal',\n title: 'Product Details Page - Variant Component (7)',\n assignee: 'Zahid Allison',\n },\n {\n id: 8,\n status: 'Closed',\n priority: 'High',\n title: 'Product Details Page - Variant Component (8)',\n assignee: 'William Jones',\n },\n ];\n static override styles = [\n css`\n :host {\n display: block;\n width: 90%;\n }\n `,\n ];\n override render() {\n return html`\n <h1>With selection</h1>\n <h3>Multiple selection</h3>\n <hy-table \n @onSelect=${(e:CustomEvent)=>{\n console.log('selected', e.detail.value)\n }} \n @onPaginate=${(e:CustomEvent)=>{\n console.log('page ',e.detail.value)\n }}\n @onSort=${(e:CustomEvent)=>{\n console.log('sorted ', e.detail.value)\n }}\n .headers=\"${this.headers}\" .rows=\"${this.rows}\" .selectionMode=${'multiple'}></hy-table>\n <h3>Single selection</h3>\n <hy-table .headers=\"${this.headers}\" .rows=\"${this.rows}\" .selectionMode=${'single'}></hy-table>\n <h1>With Expandable attribute (title)</h1>\n <hy-table .headers=\"${this.headers}\" .rows=\"${this.rows}\" .expandable=${'title'}></hy-table>\n <h1>With filter: search</h1>\n <hy-table .headers=\"${this.headers}\" .rows=\"${this.rows}\" .withFilter=${true}></hy-table>\n <h3>filter + expandable attribute (priority)</h3>\n <hy-table\n .headers=\"${this.headers}\"\n .rows=\"${this.rows}\"\n .withFilter=${true}\n .expandable=${'priority'}\n @onSelect=${(e:CustomEvent)=>{\n console.log('selected', e.detail.value)\n }}\n @onSearch=${(e:CustomEvent)=>{\n console.log('searched ',e.detail.value)\n }}\n @onSort=${(e:CustomEvent)=>{\n console.log('sorted ', e.detail.value)\n }}\n ></hy-table>\n\n <h1>Sizes</h1>\n <h3>Small size with selection</h3>\n <hy-table\n .headers=\"${this.headers}\"\n .rows=\"${this.rows}\"\n .size=${'small'}\n .selectionMode=${'multiple'}\n ></hy-table>\n <h3>Large size</h3>\n <hy-table .headers=\"${this.headers}\" .rows=\"${this.rows}\" .size=${'large'}></hy-table>\n <h3>Large size with multiple selection</h3>\n <hy-table\n .headers=\"${this.headers}\"\n .rows=\"${this.rows}\"\n .size=${'large'}\n .selectionMode=${'multiple'}\n ></hy-table>\n `;\n }\n}\ncustomElements.define('hy-table-demo', TableDemo);\n"]}
package/index.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC"}
package/react.d.ts.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/table/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,eAAO,MAAM,gBAAgB;;;;EAS3B,CAAC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"table.component.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,UAAU,EAAE,gBAAgB,EAAgB,MAAM,KAAK,CAAC;AAEhE,OAAO,kCAAkC,CAAC;AAC1C,OAAO,iCAAiC,CAAC;AACzC,OAAO,qCAAqC,CAAC;AAC7C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAuB,MAAM,kBAAkB,CAAC;AAEpG,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,0BAAU;IAEP,OAAO,EAAG,OAAO,EAAE,CAAC;IACpB,IAAI,EAAE,EAAE,CAAM;IAC3B,IAAI,QAAgB;IACL,UAAU,UAAS;IACpB,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7C,aAAa,EAAE,aAAa,GAAG,SAAS,CAAC;IAE5C,WAAW,WAAmB;IAC9B,mBAAmB,SAAuB;IAC1C,aAAa,UAAM;IACnB,aAAa,EAAE,OAAO,EAAE,CAAM;IAC9B,WAAW,EAAG,MAAM,CAAC;IACrB,QAAQ,EAAE,EAAE,CAAM;IAClB,YAAY,UAAS;IACrB,aAAa,EAAE,aAAa,CAAyC;IAErE,iBAAiB,IAAI,IAAI;IAKzB,UAAU,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,IAAI,CAAC;IAkB9D,cAAc;IAGd,eAAe;IASf,kBAAkB,CAAC,gBAAgB,EAAE,WAAW;IAKhD,iBAAiB,CAAC,eAAe,EAAE,WAAW;IAU9C,eAAe,CAAC,aAAa,EAAE,WAAW;IAM1C,eAAe,CAAC,aAAa,EAAE,WAAW;IAM1C,gBAAgB,CAAC,cAAc,EAAE,WAAW;IAY5C,sBAAsB;IAKtB,aAAa,CAAC,WAAW,EAAE,WAAW;IAgBtC,gBAAgB,CAAC,cAAc,EAAE,WAAW;IAa5C,KAAK;IAkBL,UAAU;IAeD,MAAM;CAwChB"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"table.style.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.style.ts"],"names":[],"mappings":";AAEA,wBAWE"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"table.types.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa;IACvB,MAAM,WAAW;IACjB,QAAQ,aAAa;CACtB;AAED,oBAAY,KAAK;IACf,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,SAAS;IACnB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,UAAU,eAAe;CAC1B;AACD,oBAAY,SAAS;IACnB,OAAO,IAAI;IACX,SAAS,IAAI;IACb,UAAU,KAAK;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB;AACD,eAAO,MAAM,YAAY,KAAK,CAAC"}
@@ -1,2 +0,0 @@
1
- import '../components/hy-table-actions';
2
- //# sourceMappingURL=hy-table-actions_test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-table-actions_test.d.ts","sourceRoot":"","sources":["../../../../src/components/table/test/hy-table-actions_test.ts"],"names":[],"mappings":"AACA,OAAO,gCAAgC,CAAC"}
@@ -1,32 +0,0 @@
1
- var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
- function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
- return new (P || (P = Promise))(function (resolve, reject) {
4
- function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
- function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
- function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
- step((generator = generator.apply(thisArg, _arguments || [])).next());
8
- });
9
- };
10
- import { html, fixture, expect } from '@open-wc/testing';
11
- import '../components/hy-table-actions';
12
- suite('HyTableActions', () => {
13
- test('init table actions', () => __awaiter(void 0, void 0, void 0, function* () {
14
- const selectedItems = 1;
15
- const el = yield fixture(html `<hy-table-actions .selectedItems=${selectedItems}></hy-table-actions>`);
16
- const textContainer = el.shadowRoot.querySelector('span');
17
- expect(el.selectedItems).to.equal(selectedItems);
18
- expect(textContainer.textContent).to.equal(`${selectedItems} selected`);
19
- }));
20
- test('cancel selection', () => __awaiter(void 0, void 0, void 0, function* () {
21
- var _a;
22
- const el = yield fixture(html `<hy-table-actions></hy-table-actions>`);
23
- const cancelBtn = (_a = el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
24
- let cancelSelectionDispatched = false;
25
- el.addEventListener('cancel-selection', () => {
26
- cancelSelectionDispatched = true;
27
- });
28
- cancelBtn === null || cancelBtn === void 0 ? void 0 : cancelBtn.click();
29
- expect(cancelSelectionDispatched).to.be.true;
30
- }));
31
- });
32
- //# sourceMappingURL=hy-table-actions_test.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-table-actions_test.js","sourceRoot":"","sources":["../../../../src/components/table/test/hy-table-actions_test.ts"],"names":[],"mappings":";;;;;;;;;AAAA,OAAO,EAAC,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,MAAM,kBAAkB,CAAC;AACvD,OAAO,gCAAgC,CAAC;AAGxC,KAAK,CAAC,gBAAgB,EAAE,GAAG,EAAE;IAC3B,IAAI,CAAC,oBAAoB,EAAE,GAAS,EAAE;QACpC,MAAM,aAAa,GAAG,CAAC,CAAC;QACxB,MAAM,EAAE,GAAmB,MAAM,OAAO,CACtC,IAAI,CAAA,oCAAoC,aAAa,sBAAsB,CAC5E,CAAC;QACF,MAAM,aAAa,GAAG,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAE,CAAC;QAC5D,MAAM,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;QACjD,MAAM,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,aAAa,WAAW,CAAC,CAAC;IAC1E,CAAC,CAAA,CAAC,CAAC;IAEH,IAAI,CAAC,kBAAkB,EAAE,GAAS,EAAE;;QAClC,MAAM,EAAE,GAAmB,MAAM,OAAO,CAAC,IAAI,CAAA,uCAAuC,CAAC,CAAC;QACtF,MAAM,SAAS,GAAG,MAAA,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;QACzD,IAAI,yBAAyB,GAAG,KAAK,CAAC;QACtC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,GAAG,EAAE;YAC3C,yBAAyB,GAAG,IAAI,CAAC;QACnC,CAAC,CAAC,CAAC;QACH,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,CAAC;QACnB,MAAM,CAAC,yBAAyB,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAC/C,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import {html, fixture, expect} from '@open-wc/testing';\nimport '../components/hy-table-actions';\nimport {HyTableActions} from '../components/hy-table-actions';\n\nsuite('HyTableActions', () => {\n test('init table actions', async () => {\n const selectedItems = 1;\n const el: HyTableActions = await fixture(\n html`<hy-table-actions .selectedItems=${selectedItems}></hy-table-actions>`\n );\n const textContainer = el.shadowRoot!.querySelector('span')!;\n expect(el.selectedItems).to.equal(selectedItems);\n expect(textContainer.textContent).to.equal(`${selectedItems} selected`);\n });\n\n test('cancel selection', async () => {\n const el: HyTableActions = await fixture(html`<hy-table-actions></hy-table-actions>`);\n const cancelBtn = el.shadowRoot?.querySelector('button');\n let cancelSelectionDispatched = false;\n el.addEventListener('cancel-selection', () => {\n cancelSelectionDispatched = true;\n });\n cancelBtn?.click();\n expect(cancelSelectionDispatched).to.be.true;\n });\n});\n"]}
@@ -1,2 +0,0 @@
1
- import '../components/hy-table-content';
2
- //# sourceMappingURL=hy-table-content_test.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"hy-table-content_test.d.ts","sourceRoot":"","sources":["../../../../src/components/table/test/hy-table-content_test.ts"],"names":[],"mappings":"AACA,OAAO,gCAAgC,CAAC"}