@progress/kendo-themes-html 7.2.1-dev.0 → 7.2.1-dev.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.
Files changed (172) hide show
  1. package/dist/cjs/autocomplete/tests/autocomplete-prefix-suffix.js +1096 -888
  2. package/dist/cjs/column-menu/column-menu-expander.spec.js +5933 -0
  3. package/dist/cjs/column-menu/column-menu-item-content.js +47 -0
  4. package/dist/cjs/column-menu/column-menu-item-wrapper.js +46 -0
  5. package/dist/cjs/column-menu/column-menu-item.spec.js +4396 -0
  6. package/dist/cjs/column-menu/column-menu-multicheck-item.js +261 -0
  7. package/dist/cjs/column-menu/column-menu-multicheck-wrap.js +46 -0
  8. package/dist/cjs/column-menu/column-menu.spec.js +67 -0
  9. package/dist/cjs/column-menu/filter-menu.spec.js +61 -0
  10. package/dist/cjs/column-menu/templates/column-menu-normal.js +5957 -0
  11. package/dist/cjs/column-menu/templates/column-menu-tabbed.js +5947 -0
  12. package/dist/cjs/column-menu/templates/filter-menu-multi-check.js +5984 -0
  13. package/dist/cjs/column-menu/templates/filter-menu-normal.js +5947 -0
  14. package/dist/cjs/column-menu/tests/column-menu-rtl.js +6038 -0
  15. package/dist/cjs/column-menu/tests/column-menu-tabbed.js +6026 -0
  16. package/dist/cjs/column-menu/tests/column-menu.js +6038 -0
  17. package/dist/cjs/combobox/tests/combobox-prefix-suffix.js +1096 -888
  18. package/dist/cjs/filemanager/tests/filemanager-gridview-preview.js +957 -749
  19. package/dist/cjs/filemanager/tests/filemanager-listview-preview.js +911 -703
  20. package/dist/cjs/form/tests/form-field-dropdowns.js +1095 -887
  21. package/dist/cjs/grid/tests/grid-column-menu-rtl.js +707 -603
  22. package/dist/cjs/grid/tests/grid-column-menu-tabbed.js +841 -655
  23. package/dist/cjs/grid/tests/grid-column-menu.js +706 -602
  24. package/dist/cjs/grid/tests/grid-column-reordering-actions.js +302 -122
  25. package/dist/cjs/grid/tests/grid-column-reordering.js +308 -128
  26. package/dist/cjs/grid/tests/grid-column-resizing-actions.js +290 -107
  27. package/dist/cjs/grid/tests/grid-editing-custom-editor.js +1168 -960
  28. package/dist/cjs/grid/tests/grid-grouping-actions.js +272 -59
  29. package/dist/cjs/index.js +2539 -2199
  30. package/dist/cjs/multiselect/templates/multiselect-prefix.js +1071 -863
  31. package/dist/cjs/multiselect/templates/multiselect-suffix.js +1071 -863
  32. package/dist/cjs/multiselect/tests/multiselect-adaptive.js +1077 -869
  33. package/dist/cjs/multiselect/tests/multiselect-flat.js +1101 -893
  34. package/dist/cjs/multiselect/tests/multiselect-grouping.js +1077 -869
  35. package/dist/cjs/multiselect/tests/multiselect-opened.js +1079 -871
  36. package/dist/cjs/multiselect/tests/multiselect-outline.js +1101 -893
  37. package/dist/cjs/multiselect/tests/multiselect-prefix-suffix.js +1108 -900
  38. package/dist/cjs/multiselect/tests/multiselect-size-rounded.js +1080 -872
  39. package/dist/cjs/multiselect/tests/multiselect-solid.js +1101 -893
  40. package/dist/cjs/pivotgrid/tests/pivotgrid-column-menus.js +886 -739
  41. package/dist/cjs/pivotgrid/tests/pivotgrid-settings-panel-reordering.js +1172 -308
  42. package/dist/cjs/scheduler/tests/scheduler-edit-dialog.js +1110 -902
  43. package/dist/cjs/scheduler/tests/scheduler-editing-weekly.js +1124 -916
  44. package/dist/cjs/taskboard/taskboard-pane.js +1078 -870
  45. package/dist/cjs/taskboard/taskboard.spec.js +993 -785
  46. package/dist/cjs/taskboard/templates/taskboard-normal.js +1027 -819
  47. package/dist/cjs/taskboard/tests/taskboard-card-column-menu.js +1620 -64
  48. package/dist/cjs/taskboard/tests/taskboard-card.js +1099 -891
  49. package/dist/cjs/taskboard/tests/taskboard-column.js +1114 -906
  50. package/dist/cjs/taskboard/tests/taskboard-pane.js +1035 -827
  51. package/dist/cjs/taskboard/tests/taskboard-resources.js +1081 -873
  52. package/dist/cjs/taskboard/tests/taskboard-rtl.js +1033 -825
  53. package/dist/cjs/taskboard/tests/taskboard.js +1033 -825
  54. package/dist/cjs/treelist/tests/treelist-aggregate-react.js +4277 -73
  55. package/dist/cjs/treelist/tests/treelist-aggregates.js +4519 -216
  56. package/dist/cjs/treelist/tests/treelist-react.js +2518 -98
  57. package/dist/cjs/treelist/tests/treelist-row-reordering.js +4371 -59
  58. package/dist/cjs/treelist/tests/treelist.js +4409 -112
  59. package/dist/cjs/treelist/treelist.spec.js +8415 -0
  60. package/dist/esm/autocomplete/tests/autocomplete-prefix-suffix.js +1011 -803
  61. package/dist/esm/column-menu/column-menu-expander.spec.js +5917 -0
  62. package/dist/esm/column-menu/column-menu-item-content.js +25 -0
  63. package/dist/esm/column-menu/column-menu-item-wrapper.js +24 -0
  64. package/dist/esm/column-menu/column-menu-item.spec.js +4380 -0
  65. package/dist/esm/column-menu/column-menu-multicheck-item.js +239 -0
  66. package/dist/esm/column-menu/column-menu-multicheck-wrap.js +24 -0
  67. package/dist/esm/column-menu/column-menu.spec.js +45 -0
  68. package/dist/esm/column-menu/filter-menu.spec.js +39 -0
  69. package/dist/esm/column-menu/templates/column-menu-normal.js +5941 -0
  70. package/dist/esm/column-menu/templates/column-menu-tabbed.js +5931 -0
  71. package/dist/esm/column-menu/templates/filter-menu-multi-check.js +5968 -0
  72. package/dist/esm/column-menu/templates/filter-menu-normal.js +5931 -0
  73. package/dist/esm/column-menu/tests/column-menu-rtl.js +6022 -0
  74. package/dist/esm/column-menu/tests/column-menu-tabbed.js +6010 -0
  75. package/dist/esm/column-menu/tests/column-menu.js +6022 -0
  76. package/dist/esm/combobox/tests/combobox-prefix-suffix.js +1011 -803
  77. package/dist/esm/filemanager/tests/filemanager-gridview-preview.js +949 -741
  78. package/dist/esm/filemanager/tests/filemanager-listview-preview.js +903 -695
  79. package/dist/esm/form/tests/form-field-dropdowns.js +1010 -802
  80. package/dist/esm/grid/tests/grid-column-menu-rtl.js +707 -603
  81. package/dist/esm/grid/tests/grid-column-menu-tabbed.js +852 -666
  82. package/dist/esm/grid/tests/grid-column-menu.js +706 -602
  83. package/dist/esm/grid/tests/grid-column-reordering-actions.js +302 -122
  84. package/dist/esm/grid/tests/grid-column-reordering.js +308 -128
  85. package/dist/esm/grid/tests/grid-column-resizing-actions.js +290 -107
  86. package/dist/esm/grid/tests/grid-editing-custom-editor.js +1083 -875
  87. package/dist/esm/grid/tests/grid-grouping-actions.js +272 -59
  88. package/dist/esm/index.js +2495 -2155
  89. package/dist/esm/multiselect/templates/multiselect-prefix.js +986 -778
  90. package/dist/esm/multiselect/templates/multiselect-suffix.js +986 -778
  91. package/dist/esm/multiselect/tests/multiselect-adaptive.js +992 -784
  92. package/dist/esm/multiselect/tests/multiselect-flat.js +1016 -808
  93. package/dist/esm/multiselect/tests/multiselect-grouping.js +992 -784
  94. package/dist/esm/multiselect/tests/multiselect-opened.js +994 -786
  95. package/dist/esm/multiselect/tests/multiselect-outline.js +1016 -808
  96. package/dist/esm/multiselect/tests/multiselect-prefix-suffix.js +1023 -815
  97. package/dist/esm/multiselect/tests/multiselect-size-rounded.js +995 -787
  98. package/dist/esm/multiselect/tests/multiselect-solid.js +1016 -808
  99. package/dist/esm/pivotgrid/tests/pivotgrid-column-menus.js +886 -739
  100. package/dist/esm/pivotgrid/tests/pivotgrid-settings-panel-reordering.js +1172 -308
  101. package/dist/esm/scheduler/tests/scheduler-edit-dialog.js +1025 -817
  102. package/dist/esm/scheduler/tests/scheduler-editing-weekly.js +1039 -831
  103. package/dist/esm/taskboard/taskboard-pane.js +985 -777
  104. package/dist/esm/taskboard/taskboard.spec.js +981 -773
  105. package/dist/esm/taskboard/templates/taskboard-normal.js +1015 -807
  106. package/dist/esm/taskboard/tests/taskboard-card-column-menu.js +1620 -64
  107. package/dist/esm/taskboard/tests/taskboard-card.js +1014 -806
  108. package/dist/esm/taskboard/tests/taskboard-column.js +1029 -821
  109. package/dist/esm/taskboard/tests/taskboard-pane.js +1023 -815
  110. package/dist/esm/taskboard/tests/taskboard-resources.js +996 -788
  111. package/dist/esm/taskboard/tests/taskboard-rtl.js +1021 -813
  112. package/dist/esm/taskboard/tests/taskboard.js +1021 -813
  113. package/dist/esm/treelist/tests/treelist-aggregate-react.js +4277 -73
  114. package/dist/esm/treelist/tests/treelist-aggregates.js +4520 -217
  115. package/dist/esm/treelist/tests/treelist-react.js +2518 -98
  116. package/dist/esm/treelist/tests/treelist-row-reordering.js +4371 -59
  117. package/dist/esm/treelist/tests/treelist.js +4410 -113
  118. package/dist/esm/treelist/treelist.spec.js +8399 -0
  119. package/dist/types/column-menu/column-menu-expander.spec.d.ts +17 -0
  120. package/dist/types/column-menu/column-menu-item-content.d.ts +1 -0
  121. package/dist/types/column-menu/column-menu-item-wrapper.d.ts +1 -0
  122. package/dist/types/column-menu/column-menu-item.spec.d.ts +17 -0
  123. package/dist/types/column-menu/column-menu-multicheck-item.d.ts +4 -0
  124. package/dist/types/column-menu/column-menu-multicheck-wrap.d.ts +1 -0
  125. package/dist/types/column-menu/column-menu.spec.d.ts +14 -0
  126. package/dist/types/column-menu/filter-menu.spec.d.ts +9 -0
  127. package/dist/types/column-menu/index.d.ts +12 -0
  128. package/dist/types/column-menu/templates/column-menu-normal.d.ts +1 -0
  129. package/dist/types/column-menu/templates/column-menu-tabbed.d.ts +1 -0
  130. package/dist/types/column-menu/templates/filter-menu-multi-check.d.ts +1 -0
  131. package/dist/types/column-menu/templates/filter-menu-normal.d.ts +1 -0
  132. package/dist/types/column-menu/tests/column-menu-rtl.d.ts +2 -0
  133. package/dist/types/column-menu/tests/column-menu-tabbed.d.ts +2 -0
  134. package/dist/types/column-menu/tests/column-menu.d.ts +2 -0
  135. package/dist/types/index.d.ts +2 -0
  136. package/dist/types/treelist/index.d.ts +1 -0
  137. package/dist/types/treelist/treelist.spec.d.ts +9 -0
  138. package/package.json +2 -2
  139. package/src/column-menu/column-menu-expander.spec.tsx +66 -0
  140. package/src/column-menu/column-menu-item-content.tsx +18 -0
  141. package/src/column-menu/column-menu-item-wrapper.tsx +17 -0
  142. package/src/column-menu/column-menu-item.spec.tsx +56 -0
  143. package/src/column-menu/column-menu-multicheck-item.tsx +32 -0
  144. package/src/column-menu/column-menu-multicheck-wrap.tsx +17 -0
  145. package/src/column-menu/column-menu.spec.tsx +46 -0
  146. package/src/column-menu/filter-menu.spec.tsx +38 -0
  147. package/src/column-menu/index.ts +12 -0
  148. package/src/column-menu/templates/column-menu-normal.tsx +23 -0
  149. package/src/column-menu/templates/column-menu-tabbed.tsx +36 -0
  150. package/src/column-menu/templates/filter-menu-multi-check.tsx +26 -0
  151. package/src/column-menu/templates/filter-menu-normal.tsx +23 -0
  152. package/src/column-menu/tests/column-menu-rtl.tsx +119 -0
  153. package/src/column-menu/tests/column-menu-tabbed.tsx +113 -0
  154. package/src/column-menu/tests/column-menu.tsx +119 -0
  155. package/src/grid/tests/grid-column-menu-rtl.tsx +194 -367
  156. package/src/grid/tests/grid-column-menu-tabbed.tsx +147 -260
  157. package/src/grid/tests/grid-column-menu.tsx +194 -366
  158. package/src/grid/tests/grid-column-reordering-actions.tsx +48 -77
  159. package/src/grid/tests/grid-column-reordering.tsx +60 -86
  160. package/src/grid/tests/grid-column-resizing-actions.tsx +25 -64
  161. package/src/grid/tests/grid-grouping-actions.tsx +15 -11
  162. package/src/index.ts +2 -1
  163. package/src/pivotgrid/tests/pivotgrid-column-menus.tsx +141 -232
  164. package/src/pivotgrid/tests/pivotgrid-settings-panel-reordering.tsx +17 -34
  165. package/src/taskboard/tests/taskboard-card-column-menu.tsx +12 -22
  166. package/src/treelist/index.ts +1 -0
  167. package/src/treelist/tests/treelist-aggregate-react.tsx +73 -71
  168. package/src/treelist/tests/treelist-aggregates.tsx +219 -242
  169. package/src/treelist/tests/treelist-react.tsx +98 -95
  170. package/src/treelist/tests/treelist-row-reordering.tsx +95 -74
  171. package/src/treelist/tests/treelist.tsx +110 -139
  172. package/src/treelist/treelist.spec.tsx +32 -0
package/src/pivotgrid/tests/pivotgrid-column-menus.tsx CHANGED
@@ -1,13 +1,9 @@
1
1
  import { ActionButtons } from '../../action-buttons';
2
2
  import { Button } from '../../button';
3
3
  import { Checkbox } from '../../checkbox';
4
- import { DropdownList } from '../../dropdownlist';
5
- import { Icon } from '../../icon';
6
- import { Textbox } from '../../textbox';
7
4
  import { Treeview, TreeviewGroup, TreeviewItem } from '../../treeview';
8
5
  import { Popup } from '../../popup';
9
- import { AnimationContainer } from '../../animation-container';
10
-
6
+ import { ColumnMenuNormal, ColumnMenuItemWrapper, ColumnMenuItem, ColumnMenuExpander, FilterMenuNormal } from "../../column-menu";
11
7
 
12
8
  const styles = `
13
9
  .k-animation-container {
@@ -26,248 +22,161 @@ export default () =>(
26
22
  <span>Filter Fields View</span>
27
23
 
28
24
  <section>
29
- <Popup className="k-column-menu k-grid-columnmenu-popup">
30
- <div className="k-columnmenu-item-wrapper">
31
- <div className="k-columnmenu-item">
32
- <Icon icon="sort-asc-small" />Sort Ascending
33
- </div>
34
- <div className="k-columnmenu-item">
35
- <Icon icon="sort-desc-small" />Sort Descending
36
- </div>
37
- </div>
38
- <div className="k-columnmenu-item-wrapper">
39
- <div className="k-widget k-expander">
40
- <div className="k-columnmenu-item">
41
- <Icon icon="grid-layout" />Include Fields
42
- <span className="k-spacer"></span>
43
- <span className="k-expander-indicator">
44
- <Icon icon="chevron-down" />
45
- </span>
46
- </div>
47
- </div>
48
- </div>
49
- <div className="k-columnmenu-item-wrapper">
50
- <div className="k-widget k-expander">
51
- <div className="k-columnmenu-item">
52
- <Icon icon="filter" />Filter Fields
53
- <span className="k-spacer"></span>
54
- <span className="k-expander-indicator">
55
- <Icon icon="chevron-down" />
56
- </span>
57
- </div>
58
- </div>
59
- </div>
25
+ <Popup className="k-grid-columnmenu-popup">
26
+ <ColumnMenuNormal>
27
+ <ColumnMenuItemWrapper>
28
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
29
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
30
+ </ColumnMenuItemWrapper>
31
+ <ColumnMenuItemWrapper>
32
+ <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" />
33
+ </ColumnMenuItemWrapper>
34
+ <ColumnMenuItemWrapper>
35
+ <ColumnMenuExpander itemText="Filter fields" itemIcon="filter" />
36
+ </ColumnMenuItemWrapper>
37
+ </ColumnMenuNormal>
60
38
  </Popup>
61
39
  </section>
62
40
 
63
41
  <section>
64
- <Popup className="k-column-menu k-grid-columnmenu-popup">
65
- <div className="k-columnmenu-item-wrapper">
66
- <div className="k-columnmenu-item">
67
- <Icon icon="sort-asc-small" />Sort Ascending
68
- </div>
69
- <div className="k-columnmenu-item">
70
- <Icon icon="sort-desc-small" />Sort Descending
71
- </div>
72
- </div>
73
- <div className="k-columnmenu-item-wrapper">
74
- <div className="k-widget k-expander">
75
- <div className="k-columnmenu-item">
76
- <Icon icon="grid-layout" />Include Fields
77
- <span className="k-spacer"></span>
78
- <span className="k-expander-indicator">
79
- <Icon icon="chevron-up" />
80
- </span>
81
- </div>
82
- </div>
83
- <div className="k-columnmenu-item-content k-columns-item" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
84
- <div className="k-column-list-wrapper">
85
- <div className="k-column-list">
86
- <label className="k-column-list-item k-checkbox-label">
87
- <Checkbox />
88
- ID
89
- </label>
90
- <label className="k-column-list-item k-checkbox-label">
91
- <Checkbox />
92
- Name
93
- </label>
94
- <label className="k-column-list-item k-checkbox-label">
95
- <Checkbox />
96
- Category
97
- </label>
98
- <label className="k-column-list-item k-checkbox-label">
99
- <Checkbox />
100
- Account
101
- </label>
102
- <label className="k-column-list-item k-checkbox-label">
103
- <Checkbox />
104
- Number
105
- </label>
106
- <label className="k-column-list-item k-checkbox-label">
107
- <Checkbox />
108
- Type
109
- </label>
110
- <label className="k-column-list-item k-checkbox-label">
111
- <Checkbox />
112
- Employer
113
- </label>
114
- <label className="k-column-list-item k-checkbox-label">
115
- <Checkbox />
116
- Employee
117
- </label>
118
- <label className="k-column-list-item k-checkbox-label">
119
- <Checkbox />
120
- Company
121
- </label>
122
- <label className="k-column-list-item k-checkbox-label">
123
- <Checkbox />
124
- Products
125
- </label>
126
- <label className="k-column-list-item k-checkbox-label">
127
- <Checkbox />
128
- Number
129
- </label>
130
- <label className="k-column-list-item k-checkbox-label">
131
- <Checkbox />
132
- Type
133
- </label>
134
- </div>
135
- </div>
136
- <ActionButtons alignment="stretched">
137
- <Button>Reset</Button>
138
- <Button themeColor="primary">Apply</Button>
139
- </ActionButtons>
140
- </div>
141
- </div>
142
- <div className="k-columnmenu-item-wrapper">
143
- <div className="k-widget k-expander">
144
- <div className="k-columnmenu-item">
145
- <Icon icon="filter" />Filter Fields
146
- <span className="k-spacer"></span>
147
- <span className="k-expander-indicator">
148
- <Icon icon="chevron-down" />
149
- </span>
150
- </div>
151
- </div>
152
- </div>
42
+ <Popup className="k-grid-columnmenu-popup">
43
+ <ColumnMenuNormal>
44
+ <ColumnMenuItemWrapper>
45
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
46
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
47
+ </ColumnMenuItemWrapper>
48
+ <ColumnMenuItemWrapper>
49
+ <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" expanded={true} itemContent={
50
+ <>
51
+ <div className="k-column-list-wrapper">
52
+ <div className="k-column-list">
53
+ <label className="k-column-list-item k-checkbox-label">
54
+ <Checkbox />
55
+ ID
56
+ </label>
57
+ <label className="k-column-list-item k-checkbox-label">
58
+ <Checkbox />
59
+ Name
60
+ </label>
61
+ <label className="k-column-list-item k-checkbox-label">
62
+ <Checkbox />
63
+ Category
64
+ </label>
65
+ <label className="k-column-list-item k-checkbox-label">
66
+ <Checkbox />
67
+ Account
68
+ </label>
69
+ <label className="k-column-list-item k-checkbox-label">
70
+ <Checkbox />
71
+ Number
72
+ </label>
73
+ <label className="k-column-list-item k-checkbox-label">
74
+ <Checkbox />
75
+ Type
76
+ </label>
77
+ <label className="k-column-list-item k-checkbox-label">
78
+ <Checkbox />
79
+ Employer
80
+ </label>
81
+ <label className="k-column-list-item k-checkbox-label">
82
+ <Checkbox />
83
+ Employee
84
+ </label>
85
+ <label className="k-column-list-item k-checkbox-label">
86
+ <Checkbox />
87
+ Company
88
+ </label>
89
+ <label className="k-column-list-item k-checkbox-label">
90
+ <Checkbox />
91
+ Products
92
+ </label>
93
+ <label className="k-column-list-item k-checkbox-label">
94
+ <Checkbox />
95
+ Number
96
+ </label>
97
+ <label className="k-column-list-item k-checkbox-label">
98
+ <Checkbox />
99
+ Type
100
+ </label>
101
+ </div>
102
+ </div>
103
+ <ActionButtons alignment="stretched">
104
+ <Button themeColor="primary">Apply</Button>
105
+ <Button>Reset</Button>
106
+ </ActionButtons>
107
+ </>
108
+ }/>
109
+ </ColumnMenuItemWrapper>
110
+ <ColumnMenuItemWrapper>
111
+ <ColumnMenuExpander itemText="Filter fields" itemIcon="filter" />
112
+ </ColumnMenuItemWrapper>
113
+ </ColumnMenuNormal>
153
114
  </Popup>
154
115
  </section>
155
116
 
156
117
  <section>
157
- <Popup className="k-column-menu k-grid-columnmenu-popup">
158
- <div className="k-columnmenu-item-wrapper">
159
- <div className="k-columnmenu-item">
160
- <Icon icon="sort-asc-small" />Sort Ascending
161
- </div>
162
- <div className="k-columnmenu-item">
163
- <Icon icon="sort-desc-small" />Sort Descending
164
- </div>
165
- </div>
166
- <div className="k-columnmenu-item-wrapper">
167
- <div className="k-widget k-expander">
168
- <div className="k-columnmenu-item">
169
- <Icon icon="grid-layout" />Include Fields
170
- <span className="k-spacer"></span>
171
- <span className="k-expander-indicator">
172
- <Icon icon="chevron-up" />
173
- </span>
174
- </div>
175
- </div>
176
- <div className="k-columnmenu-item-content" style={{ width: '100%', height: 'auto', overflow: 'hidden' }}>
177
- <div className="k-column-list-wrapper">
178
- <div className="k-column-list">
179
- <Treeview>
180
- <TreeviewItem showCheckbox hasChildren text="Account" />
181
- <TreeviewItem showCheckbox hasChildren text="Customer" />
182
- <TreeviewItem showCheckbox expanded text="Date">
183
- <TreeviewGroup>
184
- <TreeviewItem showCheckbox hasChildren text="Date.Calendar" />
185
- <TreeviewItem showCheckbox expanded text="Date.Calendar Quarter of Year">
118
+ <Popup className="k-grid-columnmenu-popup">
119
+ <ColumnMenuNormal>
120
+ <ColumnMenuItemWrapper>
121
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
122
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
123
+ </ColumnMenuItemWrapper>
124
+ <ColumnMenuItemWrapper>
125
+ <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" expanded={true} itemContent={
126
+ <>
127
+ <div className="k-column-list-wrapper">
128
+ <div className="k-column-list">
129
+ <Treeview>
130
+ <TreeviewItem showCheckbox hasChildren text="Account" />
131
+ <TreeviewItem showCheckbox hasChildren text="Customer" />
132
+ <TreeviewItem showCheckbox expanded text="Date">
186
133
  <TreeviewGroup>
187
- <TreeviewItem showCheckbox hasChildren text="(All)" />
188
- <TreeviewItem showCheckbox hasChildren text="Calendar Quarter of Year" />
134
+ <TreeviewItem showCheckbox hasChildren text="Date.Calendar" />
135
+ <TreeviewItem showCheckbox expanded text="Date.Calendar Quarter of Year">
136
+ <TreeviewGroup>
137
+ <TreeviewItem showCheckbox hasChildren text="(All)" />
138
+ <TreeviewItem showCheckbox hasChildren text="Calendar Quarter of Year" />
139
+ </TreeviewGroup>
140
+ </TreeviewItem>
189
141
  </TreeviewGroup>
190
142
  </TreeviewItem>
191
- </TreeviewGroup>
192
- </TreeviewItem>
193
- <TreeviewItem showCheckbox hasChildren text="Delivery date" />
194
- <TreeviewItem showCheckbox hasChildren text="Department" />
195
- <TreeviewItem showCheckbox hasChildren text="Country" />
196
- <TreeviewItem showCheckbox hasChildren text="Region" />
197
- </Treeview>
198
- </div>
199
- </div>
200
- <ActionButtons alignment="stretched">
201
- <Button>Reset</Button>
202
- <Button themeColor="primary">Apply</Button>
203
- </ActionButtons>
204
- </div>
205
- </div>
206
- <div className="k-columnmenu-item-wrapper">
207
- <div className="k-widget k-expander">
208
- <div className="k-columnmenu-item">
209
- <Icon icon="filter" />Filter Fields
210
- <span className="k-spacer"></span>
211
- <span className="k-expander-indicator">
212
- <Icon icon="chevron-down" />
213
- </span>
214
- </div>
215
- </div>
216
- </div>
143
+ <TreeviewItem showCheckbox hasChildren text="Delivery date" />
144
+ <TreeviewItem showCheckbox hasChildren text="Department" />
145
+ <TreeviewItem showCheckbox hasChildren text="Country" />
146
+ <TreeviewItem showCheckbox hasChildren text="Region" />
147
+ </Treeview>
148
+ </div>
149
+ </div>
150
+ <ActionButtons alignment="stretched">
151
+ <Button themeColor="primary">Apply</Button>
152
+ <Button>Reset</Button>
153
+ </ActionButtons>
154
+ </>
155
+ }/>
156
+ </ColumnMenuItemWrapper>
157
+ <ColumnMenuItemWrapper>
158
+ <ColumnMenuExpander itemText="Filter fields" itemIcon="filter" />
159
+ </ColumnMenuItemWrapper>
160
+ </ColumnMenuNormal>
217
161
  </Popup>
218
162
  </section>
219
163
 
220
164
  <section>
221
- <Popup className="k-column-menu k-grid-columnmenu-popup">
222
- <div className="k-columnmenu-item-wrapper">
223
- <div className="k-columnmenu-item">
224
- <Icon icon="sort-asc-small" />Sort Ascending
225
- </div>
226
- <div className="k-columnmenu-item">
227
- <Icon icon="sort-desc-small" />Sort Descending
228
- </div>
229
- </div>
230
- <div className="k-columnmenu-item-wrapper">
231
- <div className="k-widget k-expander">
232
- <div className="k-columnmenu-item">
233
- <Icon icon="grid-layout" />Include Fields
234
- <span className="k-spacer"></span>
235
- <span className="k-expander-indicator">
236
- <Icon icon="chevron-down" />
237
- </span>
238
- </div>
239
- </div>
240
- </div>
241
- <div className="k-columnmenu-item-wrapper">
242
- <div className="k-widget k-expander">
243
- <div className="k-columnmenu-item">
244
- <Icon icon="filter" />Filter Fields
245
- <span className="k-spacer"></span>
246
- <span className="k-expander-indicator">
247
- <Icon icon="chevron-up" />
248
- </span>
249
- </div>
250
- </div>
251
- <div className="k-columnmenu-item-content">
252
- <AnimationContainer>
253
- <div className="kendo-grid-filter-menu-container">
254
- <form className="k-filter-menu k-group k-reset">
255
- <div className="k-filter-menu-container">
256
- <DropdownList value="Contains" />
257
- <Textbox />
258
- <DropdownList value="And" className="k-filter-and" />
259
- <DropdownList value="Contains" />
260
- <Textbox />
261
- <ActionButtons alignment="stretched">
262
- <Button>Clear</Button>
263
- <Button themeColor="primary">Filter</Button>
264
- </ActionButtons>
265
- </div>
266
- </form>
267
- </div>
268
- </AnimationContainer>
269
- </div>
270
- </div>
165
+ <Popup className="k-grid-columnmenu-popup">
166
+ <ColumnMenuNormal>
167
+ <ColumnMenuItemWrapper>
168
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
169
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
170
+ </ColumnMenuItemWrapper>
171
+ <ColumnMenuItemWrapper>
172
+ <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" />
173
+ </ColumnMenuItemWrapper>
174
+ <ColumnMenuItemWrapper>
175
+ <ColumnMenuExpander itemText="Filter fields" itemIcon="filter" expanded={true} itemContent={
176
+ <FilterMenuNormal />
177
+ }/>
178
+ </ColumnMenuItemWrapper>
179
+ </ColumnMenuNormal>
271
180
  </Popup>
272
181
  </section>
273
182
 
package/src/pivotgrid/tests/pivotgrid-settings-panel-reordering.tsx CHANGED
@@ -6,6 +6,7 @@ import { Icon } from '../../icon';
6
6
  import { Searchbox } from '../../searchbox';
7
7
  import { Treeview, TreeviewItem, TreeviewGroup } from '../../treeview';
8
8
  import { Popup } from '../../popup';
9
+ import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
9
10
 
10
11
  const style = `
11
12
  .k-animation-container {
@@ -641,40 +642,22 @@ export default () => (
641
642
  </div>
642
643
  </section>
643
644
 
644
- <Popup className="k-column-menu k-grid-columnmenu-popup">
645
- <div className="k-columnmenu-item-wrapper">
646
- <div className="k-columnmenu-item">
647
- <Icon icon="sort-asc-small"/>Sort ascending
648
- </div>
649
- <div className="k-columnmenu-item">
650
- <Icon icon="sort-desc-small" />Sort descending
651
- </div>
652
- <div className="k-columnmen-item-wrapper">
653
- <div className="k-expander">
654
- <div className="k-columnmenu-item">
655
- <Icon icon="grid-layout" />Include Fields
656
- <span className="k-spacer"></span>
657
- <span className="k-expander-indicator">
658
- <Icon icon="chevron-down" />
659
- </span>
660
- </div>
661
- </div>
662
- </div>
663
- <div className="k-columnmenu-item-wrapper">
664
- <div className="k-columnmenu-item k-disabled">
665
- <Icon icon="caret-alt-left" />Move Previous
666
- </div>
667
- <div className="k-columnmenu-item">
668
- <Icon icon="caret-alt-right" />Move Next
669
- </div>
670
- <div className="k-columnmenu-item">
671
- <Icon icon="caret-alt-down" />Move to Rows
672
- </div>
673
- <div className="k-columnmenu-item">
674
- <Icon icon="caret-alt-to-bottom" />Move to Values
675
- </div>
676
- </div>
677
- </div>
645
+ <Popup className="k-grid-columnmenu-popup">
646
+ <ColumnMenuNormal>
647
+ <ColumnMenuItemWrapper>
648
+ <ColumnMenuItem text="Sort ascending" icon="sort-asc-small" />
649
+ <ColumnMenuItem text="Sort descending" icon="sort-desc-small" />
650
+ </ColumnMenuItemWrapper>
651
+ <ColumnMenuItemWrapper>
652
+ <ColumnMenuExpander itemText="Include fields" itemIcon="grid-layout" />
653
+ </ColumnMenuItemWrapper>
654
+ <ColumnMenuItemWrapper>
655
+ <ColumnMenuItem text="Move to Columns" icon="columns" className="k-disabled" />
656
+ <ColumnMenuItem text="Move to Rows" icon="rows" />
657
+ <ColumnMenuItem text="Move previous" icon="arrow-left" className="k-disabled" />
658
+ <ColumnMenuItem text="Move next" icon="arrow-right" />
659
+ </ColumnMenuItemWrapper>
660
+ </ColumnMenuNormal>
678
661
  </Popup>
679
662
  </div>
680
663
  </>
package/src/taskboard/tests/taskboard-card-column-menu.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Popup } from '../../popup';
2
- import { Icon } from '../../icon';
2
+ import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuNormal } from '../../column-menu';
3
3
 
4
4
  const styles = `
5
5
  .k-animation-container,
@@ -18,27 +18,17 @@ export default () =>(
18
18
  <style>{styles}</style>
19
19
  <div id="test-area" className="k-d-grid k-grid-cols-4">
20
20
 
21
- <Popup className="k-column-menu k-card-columnmenu-popup">
22
- <div className="k-columnmenu-item-wrapper">
23
- <div className="k-columnmenu-item">
24
- <Icon icon="caret-alt-left" />Move to prev column
25
- </div>
26
- <div className="k-columnmenu-item">
27
- <Icon icon="caret-alt-right" />Move to next column
28
- </div>
29
- <div className="k-columnmenu-item">
30
- <Icon icon="caret-alt-up" />Move up
31
- </div>
32
- <div className="k-columnmenu-item">
33
- <Icon icon="caret-alt-down" />Move down
34
- </div>
35
- <div className="k-columnmenu-item">
36
- <Icon icon="caret-alt-to-top" />Move top
37
- </div>
38
- <div className="k-columnmenu-item">
39
- <Icon icon="caret-alt-to-bottom" />Move bottom
40
- </div>
41
- </div>
21
+ <Popup className="k-card-columnmenu-popup">
22
+ <ColumnMenuNormal>
23
+ <ColumnMenuItemWrapper>
24
+ <ColumnMenuItem text="Move to prev column" icon="caret-alt-left" />
25
+ <ColumnMenuItem text="Move to next column" icon="caret-alt-right" />
26
+ <ColumnMenuItem text="Move up" icon="caret-alt-up" />
27
+ <ColumnMenuItem text="Move down" icon="caret-alt-down" />
28
+ <ColumnMenuItem text="Move top" icon="caret-alt-to-top" />
29
+ <ColumnMenuItem text="Move bottom" icon="caret-alt-to-bottom" />
30
+ </ColumnMenuItemWrapper>
31
+ </ColumnMenuNormal>
42
32
  </Popup>
43
33
  </div>
44
34
  </>
package/src/treelist/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './treelist.spec';