@progress/kendo-themes-html 6.2.1-dev.0 → 6.2.1-dev.44

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 (116) hide show
  1. package/dist/action-sheet/tests/action-sheet-data-table.js +382 -2
  2. package/dist/action-sheet/tests/action-sheet-data-table.js.map +4 -4
  3. package/dist/dropdowngrid/dropdowngrid.js +1 -1
  4. package/dist/dropdowngrid/dropdowngrid.js.map +2 -2
  5. package/dist/dropdowngrid/tests/dropdowngrid-flat.js +1 -1
  6. package/dist/dropdowngrid/tests/dropdowngrid-flat.js.map +2 -2
  7. package/dist/dropdowngrid/tests/dropdowngrid-outline.js +1 -1
  8. package/dist/dropdowngrid/tests/dropdowngrid-outline.js.map +2 -2
  9. package/dist/dropdowngrid/tests/dropdowngrid.js +1 -1
  10. package/dist/dropdowngrid/tests/dropdowngrid.js.map +2 -2
  11. package/dist/fab/fab-item.js +104 -0
  12. package/dist/fab/fab-item.js.map +7 -0
  13. package/dist/fab/fab-items.js +64 -0
  14. package/dist/fab/fab-items.js.map +7 -0
  15. package/dist/fab/tests/fab-items.js +51 -4
  16. package/dist/fab/tests/fab-items.js.map +4 -4
  17. package/dist/fab/tests/fab-position.js +6 -0
  18. package/dist/fab/tests/fab-position.js.map +4 -4
  19. package/dist/fab/tests/fab-size.js +6 -0
  20. package/dist/fab/tests/fab-size.js.map +4 -4
  21. package/dist/fab/tests/fab-states.js +6 -0
  22. package/dist/fab/tests/fab-states.js.map +4 -4
  23. package/dist/fab/tests/fab.js +6 -0
  24. package/dist/fab/tests/fab.js.map +4 -4
  25. package/dist/grid/tests/grid-rows-resizing.js +1131 -0
  26. package/dist/grid/tests/grid-rows-resizing.js.map +7 -0
  27. package/dist/index.js +711 -184
  28. package/dist/index.js.map +4 -4
  29. package/dist/popup/tests/popup-dropdowngrid.js +508 -0
  30. package/dist/popup/tests/popup-dropdowngrid.js.map +7 -0
  31. package/dist/table/data-table.js +97 -0
  32. package/dist/table/data-table.js.map +7 -0
  33. package/dist/table/table-body.js +67 -0
  34. package/dist/table/table-body.js.map +7 -0
  35. package/dist/table/table-footer.js +66 -0
  36. package/dist/table/table-footer.js.map +7 -0
  37. package/dist/table/table-group-header.js +66 -0
  38. package/dist/table/table-group-header.js.map +7 -0
  39. package/dist/table/table-group-row.js +66 -0
  40. package/dist/table/table-group-row.js.map +7 -0
  41. package/dist/table/table-group-sticky-header.js +66 -0
  42. package/dist/table/table-group-sticky-header.js.map +7 -0
  43. package/dist/table/table-header.js +115 -0
  44. package/dist/table/table-header.js.map +7 -0
  45. package/dist/table/table-list-group-row.js +66 -0
  46. package/dist/table/table-list-group-row.js.map +7 -0
  47. package/dist/table/table-list-row.js +78 -0
  48. package/dist/table/table-list-row.js.map +7 -0
  49. package/dist/table/table-list-td.js +103 -0
  50. package/dist/table/table-list-td.js.map +7 -0
  51. package/dist/table/table-list-th.js +103 -0
  52. package/dist/table/table-list-th.js.map +7 -0
  53. package/dist/table/table-list.js +97 -0
  54. package/dist/table/table-list.js.map +7 -0
  55. package/dist/table/table-row.js +78 -0
  56. package/dist/table/table-row.js.map +7 -0
  57. package/dist/table/table-tbody.js +66 -0
  58. package/dist/table/table-tbody.js.map +7 -0
  59. package/dist/table/table-td.js +105 -0
  60. package/dist/table/table-td.js.map +7 -0
  61. package/dist/table/table-tfoot.js +66 -0
  62. package/dist/table/table-tfoot.js.map +7 -0
  63. package/dist/table/table-th.js +105 -0
  64. package/dist/table/table-th.js.map +7 -0
  65. package/dist/table/table-thead.js +66 -0
  66. package/dist/table/table-thead.js.map +7 -0
  67. package/dist/table/table.js +94 -0
  68. package/dist/table/table.js.map +7 -0
  69. package/dist/table/tests/table-data-sizes.js +392 -1
  70. package/dist/table/tests/table-data-sizes.js.map +4 -4
  71. package/dist/table/tests/table-list-jquery.js +409 -1
  72. package/dist/table/tests/table-list-jquery.js.map +4 -4
  73. package/dist/table/tests/table-list-sizes.js +453 -1
  74. package/dist/table/tests/table-list-sizes.js.map +4 -4
  75. package/dist/table/tests/table-list-virtual.js +373 -1
  76. package/dist/table/tests/table-list-virtual.js.map +4 -4
  77. package/dist/table/tests/table-native-sizes.js +335 -1
  78. package/dist/table/tests/table-native-sizes.js.map +4 -4
  79. package/dist/table/tests/table-native-states.js +299 -1
  80. package/dist/table/tests/table-native-states.js.map +4 -4
  81. package/package.json +2 -2
  82. package/src/action-sheet/tests/action-sheet-data-table.tsx +119 -144
  83. package/src/dropdowngrid/dropdowngrid.tsx +1 -1
  84. package/src/fab/fab-item.tsx +48 -0
  85. package/src/fab/fab-items.tsx +32 -0
  86. package/src/fab/index.ts +2 -0
  87. package/src/fab/tests/fab-items.tsx +65 -250
  88. package/src/grid/tests/grid-rows-resizing.tsx +202 -0
  89. package/src/index.ts +3 -0
  90. package/src/popup/tests/popup-dropdowngrid.tsx +163 -0
  91. package/src/table/data-table.tsx +37 -0
  92. package/src/table/index.ts +19 -0
  93. package/src/table/table-body.tsx +29 -0
  94. package/src/table/table-footer.tsx +28 -0
  95. package/src/table/table-group-header.tsx +28 -0
  96. package/src/table/table-group-row.tsx +28 -0
  97. package/src/table/table-group-sticky-header.tsx +28 -0
  98. package/src/table/table-header.tsx +31 -0
  99. package/src/table/table-list-group-row.tsx +28 -0
  100. package/src/table/table-list-row.tsx +45 -0
  101. package/src/table/table-list-td.tsx +38 -0
  102. package/src/table/table-list-th.tsx +38 -0
  103. package/src/table/table-list.tsx +37 -0
  104. package/src/table/table-row.tsx +45 -0
  105. package/src/table/table-tbody.tsx +28 -0
  106. package/src/table/table-td.tsx +39 -0
  107. package/src/table/table-tfoot.tsx +28 -0
  108. package/src/table/table-th.tsx +39 -0
  109. package/src/table/table-thead.tsx +28 -0
  110. package/src/table/table.tsx +33 -0
  111. package/src/table/tests/table-data-sizes.tsx +205 -228
  112. package/src/table/tests/table-list-jquery.tsx +187 -204
  113. package/src/table/tests/table-list-sizes.tsx +178 -189
  114. package/src/table/tests/table-list-virtual.tsx +76 -79
  115. package/src/table/tests/table-native-sizes.tsx +157 -168
  116. package/src/table/tests/table-native-states.tsx +62 -61
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@progress/kendo-themes-html",
3
3
  "description": "A collection of HTML helpers used for developing Kendo UI themes",
4
- "version": "6.2.1-dev.0+7a0fad806",
4
+ "version": "6.2.1-dev.44+34fe2f00e",
5
5
  "author": "Progress",
6
6
  "license": "Apache-2.0",
7
7
  "keywords": [
@@ -43,5 +43,5 @@
43
43
  "devDependencies": {
44
44
  "@types/react": "^18.0.2"
45
45
  },
46
- "gitHead": "7a0fad8063cd9fe27e17a9898e289cca17895c32"
46
+ "gitHead": "34fe2f00e792deed2954e13a8cc2e5f39e20a5fa"
47
47
  }
package/src/action-sheet/tests/action-sheet-data-table.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React from 'react';
2
2
  import ReactDOM from 'react-dom/client';
3
3
  import { ActionSheet, ActionSheetFooter, ActionSheetHeader } from '../../action-sheet';
4
+ import { DataTable, TableBody, TableFooter, TableGroupStickyHeader, TableHeader, TableList, TableListGroupRow, TableListRow, TableListTd, TableListTh, TableRow, TableTh, TableThead } from '../../table';
4
5
 
5
6
  const root = ReactDOM.createRoot(
6
7
  document.getElementById('app') as HTMLElement
@@ -36,69 +37,65 @@ root.render(
36
37
  title="Select Item">
37
38
  </ActionSheetHeader>
38
39
  <div className="k-list-container">
39
- <div className="k-data-table k-table-lg">
40
- <div className="k-table-header">
41
- <div className="k-table-header-wrap">
42
- <table className="k-table">
43
- <colgroup>
44
- <col style={{ width: '50px' }} />
45
- <col style={{ width: "160px" }} />
46
- <col />
47
- </colgroup>
48
- <thead className="k-table-thead">
49
- <tr className="k-table-row">
50
- <th className="k-table-th">ID</th>
51
- <th className="k-table-th">Name</th>
52
- <th className="k-table-th">Job Title</th>
53
- </tr>
54
- </thead>
55
- </table>
56
- </div>
57
- </div>
58
- <div className="k-table-group-sticky-header">
59
- <span className="k-table-th">Initial group</span>
60
- </div>
61
- <div className="k-table-scroller">
62
- <ul className="k-table k-table-list">
63
- <li className="k-table-row">
64
- <span style={{ width: '50px' }} className="k-table-td">1</span>
65
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
66
- <span className="k-table-td">Data 1.3</span>
67
- </li>
68
- <li className="k-table-row k-table-alt-row">
69
- <span style={{ width: '50px' }} className="k-table-td">2</span>
70
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
71
- <span className="k-table-td">Data 2.3</span>
72
- </li>
73
- <li className="k-table-row">
74
- <span style={{ width: '50px' }} className="k-table-td">3</span>
75
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
76
- <span className="k-table-td">Data 3.3</span>
77
- </li>
78
- <li className="k-table-group-row">
79
- <span className="k-table-th">Group</span>
80
- </li>
81
- <li className="k-table-row">
82
- <span style={{ width: '50px' }} className="k-table-td">4</span>
83
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
84
- <span className="k-table-td">Data 4.3</span>
85
- </li>
86
- <li className="k-table-row k-table-alt-row">
87
- <span style={{ width: '50px' }} className="k-table-td">5</span>
88
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
89
- <span className="k-table-td">Data 5.3</span>
90
- </li>
91
- <li className="k-table-row">
92
- <span style={{ width: '50px' }} className="k-table-td">6</span>
93
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
94
- <span className="k-table-td">Data 6.3</span>
95
- </li>
96
- </ul>
97
- </div>
98
- <div className="k-table-footer">
99
- <span className="k-table-td">30 records in total</span>
100
- </div>
101
- </div>
40
+ <DataTable size="large">
41
+ <TableHeader>
42
+ <colgroup>
43
+ <col style={{ width: '50px' }} />
44
+ <col style={{ width: '160px' }} />
45
+ <col />
46
+ </colgroup>
47
+ <TableThead>
48
+ <TableRow>
49
+ <TableTh text="ID"></TableTh>
50
+ <TableTh text="Name"></TableTh>
51
+ <TableTh text="Job Title"></TableTh>
52
+ </TableRow>
53
+ </TableThead>
54
+ </TableHeader>
55
+ <TableGroupStickyHeader>
56
+ <TableListTh text="Initial group"></TableListTh>
57
+ </TableGroupStickyHeader>
58
+ <TableBody>
59
+ <TableList>
60
+ <TableListRow>
61
+ <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
62
+ <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
63
+ <TableListTd text="Data 1.3"></TableListTd>
64
+ </TableListRow>
65
+ <TableListRow alt>
66
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
67
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
68
+ <TableListTd text="Data 2.3"></TableListTd>
69
+ </TableListRow>
70
+ <TableListRow>
71
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
72
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
73
+ <TableListTd text="Data 3.3"></TableListTd>
74
+ </TableListRow>
75
+ <TableListGroupRow>
76
+ <TableListTh text="Group"></TableListTh>
77
+ </TableListGroupRow>
78
+ <TableListRow>
79
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
80
+ <TableListTd text="Data 4.2" style={{ width: '160px' }}></TableListTd>
81
+ <TableListTd text="Data 4.3"></TableListTd>
82
+ </TableListRow>
83
+ <TableListRow alt>
84
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
85
+ <TableListTd text="Data 5.2 (alt)" style={{ width: '160px' }}></TableListTd>
86
+ <TableListTd text="Data 5.3"></TableListTd>
87
+ </TableListRow>
88
+ <TableListRow>
89
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
90
+ <TableListTd text="Data 6.2" style={{ width: '160px' }}></TableListTd>
91
+ <TableListTd text="Data 6.3"></TableListTd>
92
+ </TableListRow>
93
+ </TableList>
94
+ </TableBody>
95
+ <TableFooter>
96
+ <TableListTd text="30 records in total"></TableListTd>
97
+ </TableFooter>
98
+ </DataTable>
102
99
  </div>
103
100
  <ActionSheetFooter actions={[ '!Apply', 'Cancel' ]} />
104
101
  </ActionSheet>
@@ -112,87 +109,65 @@ root.render(
112
109
  title="Select Item">
113
110
  </ActionSheetHeader>
114
111
  <div className="k-list-container">
115
- <div className="k-data-table k-table-lg">
116
- <div className="k-table-header">
117
- <div className="k-table-header-wrap">
118
- <table className="k-table">
119
- <colgroup>
120
- <col style={{ width: '50px' }} />
121
- <col style={{ width: "160px" }} />
122
- <col />
123
- </colgroup>
124
- <thead className="k-table-thead">
125
- <tr className="k-table-row">
126
- <th className="k-table-th">ID</th>
127
- <th className="k-table-th">Name</th>
128
- <th className="k-table-th">Job Title</th>
129
- </tr>
130
- </thead>
131
- </table>
132
- </div>
133
- </div>
134
- <div className="k-table-group-sticky-header">
135
- <span className="k-table-th">Initial group</span>
136
- </div>
137
- <div className="k-table-scroller">
138
- <ul className="k-table k-table-list">
139
- <li className="k-table-row">
140
- <span style={{ width: '50px' }} className="k-table-td">1</span>
141
- <span style={{ width: "160px" }} className="k-table-td">Data 1.2</span>
142
- <span className="k-table-td">Data 1.3</span>
143
- </li>
144
- <li className="k-table-row k-table-alt-row">
145
- <span style={{ width: '50px' }} className="k-table-td">2</span>
146
- <span style={{ width: "160px" }} className="k-table-td">Data 2.2 (alt)</span>
147
- <span className="k-table-td">Data 2.3</span>
148
- </li>
149
- <li className="k-table-row">
150
- <span style={{ width: '50px' }} className="k-table-td">3</span>
151
- <span style={{ width: "160px" }} className="k-table-td">Data 3.2</span>
152
- <span className="k-table-td">Data 3.3</span>
153
- </li>
154
- <li className="k-table-group-row">
155
- <span className="k-table-th">Group</span>
156
- </li>
157
- <li className="k-table-row">
158
- <span style={{ width: '50px' }} className="k-table-td">4</span>
159
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
160
- <span className="k-table-td">Data 4.3</span>
161
- </li>
162
- <li className="k-table-row k-table-alt-row">
163
- <span style={{ width: '50px' }} className="k-table-td">5</span>
164
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
165
- <span className="k-table-td">Data 5.3</span>
166
- </li>
167
- <li className="k-table-row">
168
- <span style={{ width: '50px' }} className="k-table-td">6</span>
169
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
170
- <span className="k-table-td">Data 6.3</span>
171
- </li>
172
- <li className="k-table-group-row">
173
- <span className="k-table-th">Group</span>
174
- </li>
175
- <li className="k-table-row">
176
- <span style={{ width: '50px' }} className="k-table-td">4</span>
177
- <span style={{ width: "160px" }} className="k-table-td">Data 4.2</span>
178
- <span className="k-table-td">Data 4.3</span>
179
- </li>
180
- <li className="k-table-row k-table-alt-row">
181
- <span style={{ width: '50px' }} className="k-table-td">5</span>
182
- <span style={{ width: "160px" }} className="k-table-td">Data 5.2 (alt)</span>
183
- <span className="k-table-td">Data 5.3</span>
184
- </li>
185
- <li className="k-table-row">
186
- <span style={{ width: '50px' }} className="k-table-td">6</span>
187
- <span style={{ width: "160px" }} className="k-table-td">Data 6.2</span>
188
- <span className="k-table-td">Data 6.3</span>
189
- </li>
190
- </ul>
191
- </div>
192
- <div className="k-table-footer">
193
- <span className="k-table-td">30 records in total</span>
194
- </div>
195
- </div>
112
+ <DataTable size="large">
113
+ <TableHeader>
114
+ <colgroup>
115
+ <col style={{ width: '50px' }} />
116
+ <col style={{ width: '160px' }} />
117
+ <col />
118
+ </colgroup>
119
+ <TableThead>
120
+ <TableRow>
121
+ <TableTh text="ID"></TableTh>
122
+ <TableTh text="Name"></TableTh>
123
+ <TableTh text="Job Title"></TableTh>
124
+ </TableRow>
125
+ </TableThead>
126
+ </TableHeader>
127
+ <TableGroupStickyHeader>
128
+ <TableListTh text="Initial group"></TableListTh>
129
+ </TableGroupStickyHeader>
130
+ <TableBody>
131
+ <TableList>
132
+ <TableListRow>
133
+ <TableListTd text="1" style={{ width: '50px' }}></TableListTd>
134
+ <TableListTd text="Data 1.2" style={{ width: '160px' }}></TableListTd>
135
+ <TableListTd text="Data 1.3"></TableListTd>
136
+ </TableListRow>
137
+ <TableListRow alt>
138
+ <TableListTd text="2" style={{ width: '50px' }}></TableListTd>
139
+ <TableListTd text="Data 2.2 (alt)" style={{ width: '160px' }}></TableListTd>
140
+ <TableListTd text="Data 2.3"></TableListTd>
141
+ </TableListRow>
142
+ <TableListRow>
143
+ <TableListTd text="3" style={{ width: '50px' }}></TableListTd>
144
+ <TableListTd text="Data 3.2" style={{ width: '160px' }}></TableListTd>
145
+ <TableListTd text="Data 3.3"></TableListTd>
146
+ </TableListRow>
147
+ <TableListGroupRow>
148
+ <TableListTh text="Group"></TableListTh>
149
+ </TableListGroupRow>
150
+ <TableListRow>
151
+ <TableListTd text="4" style={{ width: '50px' }}></TableListTd>
152
+ <TableListTd text="Data 4.2" style={{ width: '160px' }}></TableListTd>
153
+ <TableListTd text="Data 4.3"></TableListTd>
154
+ </TableListRow>
155
+ <TableListRow alt>
156
+ <TableListTd text="5" style={{ width: '50px' }}></TableListTd>
157
+ <TableListTd text="Data 5.2 (alt)" style={{ width: '160px' }}></TableListTd>
158
+ <TableListTd text="Data 5.3"></TableListTd>
159
+ </TableListRow>
160
+ <TableListRow>
161
+ <TableListTd text="6" style={{ width: '50px' }}></TableListTd>
162
+ <TableListTd text="Data 6.2" style={{ width: '160px' }}></TableListTd>
163
+ <TableListTd text="Data 6.3"></TableListTd>
164
+ </TableListRow>
165
+ </TableList>
166
+ </TableBody>
167
+ <TableFooter>
168
+ <TableListTd text="30 records in total"></TableListTd>
169
+ </TableFooter>
170
+ </DataTable>
196
171
  </div>
197
172
  <ActionSheetFooter actions={[ '!Apply', 'Cancel' ]} />
198
173
  </ActionSheet>
package/src/dropdowngrid/dropdowngrid.tsx CHANGED
@@ -62,7 +62,7 @@ export class DropdownGrid extends React.Component<DropdownGridProps> {
62
62
  required={required}
63
63
  loading={loading}
64
64
  disabled={disabled}
65
- className={classNames(className, 'k-dropdowngrid')}
65
+ className={classNames(className, 'k-combobox', 'k-dropdowngrid')}
66
66
  >
67
67
  <InputPrefix>{prefix}</InputPrefix>
68
68
  <InputInnerInput placeholder={placeholder} value={value} />
package/src/fab/fab-item.tsx ADDED
@@ -0,0 +1,48 @@
1
+ import * as React from 'react';
2
+ import { classNames } from '../utils';
3
+ import { Icon } from '../icon';
4
+
5
+ export interface FloatingActionButtonItemProps {
6
+ className?: string;
7
+ align?: 'left' | 'right';
8
+ text?: string;
9
+ icon?: string;
10
+ hover?: boolean;
11
+ focus?: boolean;
12
+ active?: boolean;
13
+ disabled?: boolean;
14
+ }
15
+
16
+ export class FloatingActionButtonItem extends React.Component<FloatingActionButtonItemProps> {
17
+
18
+ render() {
19
+ const {
20
+ className,
21
+ align,
22
+ text,
23
+ icon,
24
+ hover,
25
+ focus,
26
+ active,
27
+ disabled
28
+ } = this.props;
29
+
30
+ return (
31
+ <li className={classNames(
32
+ className,
33
+ 'k-fab-item',
34
+ {
35
+ [`k-text-${align}`]: align,
36
+ 'k-hover': hover,
37
+ 'k-focus': focus,
38
+ 'k-active': active,
39
+ 'k-disabled': disabled
40
+ }
41
+ )}>
42
+ <span className="k-fab-item-text">{text}</span>
43
+ <Icon className="k-fab-item-icon" name={icon} />
44
+ </li>
45
+ );
46
+
47
+ }
48
+ }
package/src/fab/fab-items.tsx ADDED
@@ -0,0 +1,32 @@
1
+ import * as React from 'react';
2
+ import { classNames } from '../utils';
3
+
4
+ export interface FloatingActionButtonItemsProps {
5
+ className?: string;
6
+ position?: null | 'top' | 'bottom';
7
+ children?: React.ReactNode;
8
+ }
9
+
10
+ export class FloatingActionButtonItems extends React.Component<FloatingActionButtonItemsProps> {
11
+
12
+ render() {
13
+ const {
14
+ className,
15
+ position,
16
+ children
17
+ } = this.props;
18
+
19
+ return (
20
+ <ul className={classNames(
21
+ className,
22
+ 'k-fab-items',
23
+ {
24
+ [`k-fab-items-${position}`]: position
25
+ }
26
+ )}>
27
+ {children}
28
+ </ul>
29
+ );
30
+
31
+ }
32
+ }
package/src/fab/index.ts CHANGED
@@ -1 +1,3 @@
1
1
  export * from './fab';
2
+ export * from './fab-items';
3
+ export * from './fab-item';