@progress/kendo-themes-html 13.2.0-dev.4 → 14.0.0-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 (16) hide show
  1. package/dist/cjs/gantt/demos/gantt.js +1 -1
  2. package/dist/cjs/gantt/templates/gantt-normal.js +1 -1
  3. package/dist/cjs/gantt/templates/gantt-row-reordering.js +1 -1
  4. package/dist/cjs/gantt/templates/gantt-with-tooltip.js +1 -1
  5. package/dist/cjs/index.js +3 -3
  6. package/dist/esm/gantt/demos/gantt.mjs +1 -1
  7. package/dist/esm/gantt/templates/gantt-normal.mjs +1 -1
  8. package/dist/esm/gantt/templates/gantt-row-reordering.mjs +1 -1
  9. package/dist/esm/gantt/templates/gantt-with-tooltip.mjs +1 -1
  10. package/dist/esm/index.mjs +4 -4
  11. package/package.json +2 -2
  12. package/src/_preview/tests/preview-components.tsx +1445 -675
  13. package/src/gantt/templates/gantt-normal.tsx +6 -6
  14. package/src/gantt/templates/gantt-row-reordering.tsx +6 -6
  15. package/src/gantt/templates/gantt-with-tooltip.tsx +6 -6
  16. package/src/gantt/tests/gantt-react.tsx +6 -7
package/src/_preview/tests/preview-components.tsx CHANGED
@@ -1,29 +1,58 @@
1
+ import { Appbar } from "../../appbar/appbar.spec";
2
+ import { AppbarSection } from "../../appbar/appbar-section";
3
+ import { AutocompletePopup } from "../../autocomplete/templates/autocomplete-popup";
1
4
  import { BottomNavItem } from "../../bottom-nav/bottom-nav-item";
2
5
  import { BottomNavNormal } from "../../bottom-nav/templates/bottom-nav-normal";
3
6
  import { BreadcrumbCollapsingNone } from "../../breadcrumb/templates/breadcrumb-collapsing-none";
4
7
  import { Button } from "../../button/button.spec";
5
8
  import { TextButton } from "../../button/templates/text-button";
9
+ import { IconButton } from "../../button";
6
10
  import { ButtonGroup } from "../../button-group/button-group.spec";
7
11
  import { Calendar } from "../../calendar/calendar.spec";
8
12
  import { CalendarTable } from "../../calendar/calendar-table";
9
13
  import { CalendarCell } from "../../calendar/calendar-cell";
10
14
  import { CalendarTableRow } from "../../calendar/calendar-table-row.spec";
15
+ import { CalendarInfiniteNormal } from "../../calendar/templates/calendar-infinite-normal";
16
+ import { CaptchaNormal } from "../../captcha/templates/captcha-normal";
11
17
  import { CardNormal } from "../../card/templates/card-normal";
12
18
  import { Chip } from "../../chip/chip.spec";
13
19
  import { ChipAction } from "../../chip/chip-action";
14
20
  import { ColorPicker } from "../../colorpicker/colorpicker.spec";
15
21
  import { DatePickerNormal } from "../../datepicker/templates/datepicker-normal";
22
+ import { DateRangePickerPopup } from "../../daterangepicker/templates/daterangepicker-popup";
23
+ import { DateTimePickerPopup } from "../../datetimepicker/templates/datetimepicker-popup";
24
+ import { DockManagerNormal } from "../../dock-manager/templates/dock-manager-normal";
16
25
  import { Drawer } from "../../drawer/drawer.spec";
17
26
  import { DrawerContent } from "../../drawer/drawer-content.spec";
18
27
  import { DrawerItem } from "../../drawer/drawer-item.spec";
19
28
  import { DrawerItemSeparator } from "../../drawer/drawer-item-separator";
29
+ import { DropdownGridPopup } from "../../dropdowngrid/templates/dropdowngrid-popup";
30
+ import { DropdownTreePopup } from "../../dropdowntree/templates/dropdowntree-popup";
31
+ import { FloatingLabelNormal } from "../../floating-label/templates/floating-label-normal";
32
+ import { FormNormal } from "../../form/templates/form-normal";
33
+ import { GanttNormal } from "../../gantt/templates/gantt-normal";
20
34
  import { GridWithFilterRow } from "../../grid/templates/grid-with-filter-row";
35
+ import { DropdownListPopup } from "../../dropdownlist/templates/dropdownlist-popup";
36
+ import { ImageEditorNormal } from "../../imageeditor/templates/imageeditor-normal";
37
+ import { MediaPlayerNormal } from "../../mediaplayer/templates/mediaplayer-normal";
21
38
  import { MultiSelectNormal } from "../../multiselect/templates/multiselect-normal";
39
+ import { MultiSelectTreePopup } from "../../multiselecttree/templates/multiselecttree-popup";
40
+ import { OrgchartNormal } from "../../orgchart/templates/orgchart-normal";
22
41
  import { PanelBarContent } from "../../panelbar/panelbar-content";
23
42
  import { PanelBarItem } from "../../panelbar/panelbar-item";
24
43
  import { PanelBarNormal } from "../../panelbar/templates/panelbar-normal";
44
+ import { PDFViewerNormal } from "../../pdf-viewer/templates/pdf-viewer-normal";
45
+ import { PopoverNormal } from "../../popover/templates/popover-normal";
46
+ import { PropertyGridNormal } from "../../propertygrid/templates/propertygrid-normal";
47
+ import { ColorEditorNormal } from "../../coloreditor/templates/coloreditor-normal";
48
+ import { ColorEditorPaletteGroup } from "../../coloreditor/templates/coloreditor-palette-group";
25
49
  import { ChunkProgressBarNormal } from "../../progressbar/templates/chunk-progressbar-normal";
26
50
  import { ProgressBarNormal } from "../../progressbar/templates/progressbar-normal";
51
+ import { ScrollViewNormal } from "../../scrollview/templates/scrollview-normal";
52
+ import { SignatureNormal } from "../../signature/templates/signature-normal";
53
+ import { SkeletonNormal } from "../../skeleton/templates/skeleton-normal";
54
+ import { SkeletonCircle } from "../../skeleton/templates/skeleton-circle";
55
+ import { SkeletonRectangle } from "../../skeleton/templates/skeleton-rectangle";
27
56
  import { SliderNormal } from "../../slider/templates/slider-normal";
28
57
  import { Step } from "../../stepper/step";
29
58
  import { StepList } from "../../stepper/step-list";
@@ -34,10 +63,15 @@ import { TabStripContent } from "../../tabstrip/tabstrip-content";
34
63
  import { TabStripItem } from "../../tabstrip/tabstrip-item";
35
64
  import { TabStripLeft } from "../../tabstrip/templates/tabstrip-left";
36
65
  import { TabStripClosable } from "../../tabstrip/templates/tabstrip-closable";
66
+ import { TaskBoardNormal } from "../../taskboard/templates/taskboard-normal";
37
67
  import { TextboxNormal } from "../../textbox/templates/textbox-normal";
68
+ import { TileLayoutNormal } from "../../tilelayout/templates/tilelayout-normal";
69
+ import { TimeDurationPickerPopup } from "../../timedurationpicker/templates/timedurationpicker-popup";
38
70
  import { ToolbarItem } from "../../toolbar/toolbar-item.spec";
39
71
  import { ToolbarResizable } from "../../toolbar/templates/toolbar-resizable";
40
72
  import { ToolbarSeparator } from "../../toolbar/toolbar-separator";
73
+ import { TreeListNormal } from "../../treelist/templates/treelist-normal";
74
+ import { WizardNormal } from "../../wizard/templates/wizard-normal";
41
75
  import { WindowNormal } from "../../window/templates/window-normal";
42
76
  import { Menu } from "../../menu/menu.spec";
43
77
  import { MenuList } from "../../menu/menu-list.spec";
@@ -54,6 +88,9 @@ import { RadioButtonWithLabelAfter } from "../../radio/templates/radio-with-labe
54
88
  import { InputPrefixText } from "../../input/input-prefix-text";
55
89
  import { InputSuffixText } from "../../input/input-suffix-text";
56
90
  import { TimeSelectorAll } from "../../time-selector/templates/time-selector-all";
91
+ import { TimePickerNormal } from "../../timepicker/templates/timepicker-normal";
92
+ import { FilterMenuNormal } from "../../column-menu/templates/filter-menu-normal";
93
+ import { ColumnMenu, ColumnMenuItemWrapper, ColumnMenuItem, ColumnMenuExpander, ColumnList, ColumnListItem } from "../../column-menu";
57
94
  import { ChartWizardNormal } from "../../chart-wizard/templates/chart-wizard-normal";
58
95
  import { ListViewItem } from "../../listview/listview-item.spec";
59
96
  import { ListViewNormal } from "../../listview/templates/listview-normal";
@@ -86,11 +123,34 @@ import { AvatarImage } from "../../avatar/templates/avatar-image";
86
123
  import { AvatarText } from "../../avatar/templates/avatar-text";
87
124
  import { Icon } from "../../icon/icon.spec";
88
125
  import { BadgeNormal } from "../../badge/templates/badge-normal";
126
+ import { PromptBoxLineModeMulti } from "../../prompt-box/templates/prompt-box-multi";
127
+ import { ChatNormal } from "../../chat/templates/chat-normal";
128
+ import { Suggestion, SuggestionGroup } from "../../suggestion";
129
+ import { ComboboxNormal } from "../../combobox/templates/combobox-normal";
130
+ import { DropzoneNormal } from "../../dropzone/templates/dropzone-normal";
131
+ import { LoaderNormal } from "../../loader/templates/loader-normal";
132
+ import { LoaderInfinite } from "../../loader/templates/loader-infinite";
133
+ import { LoaderConverging } from "../../loader/templates/loader-converging";
134
+ import { SmartBoxNormal } from "../../smart-box/templates/smart-box-normal";
135
+ import { MaskedTextboxNormal } from "../../maskedtextbox/templates/maskedtextbox-normal";
136
+ import { TextMenuButton } from "../../menu-button/templates/text-menu-button";
137
+ import { NumericTextboxNormal } from "../../numerictextbox/templates/numerictextbox-normal";
138
+ import { OneTimePasswordNormal } from "../../otp/templates/otp-normal";
139
+ import { SearchboxNormal } from "../../searchbox/templates/searchbox-normal";
140
+ import { SegmentedControlNormal } from "../../segmented-control/templates/segmented-control-normal";
141
+ import { TextSplitButton } from "../../split-button/templates/text-split-button";
142
+ import { TextareaNormal } from "../../textarea/templates/textarea-normal";
143
+ import { UploadNormal } from "../../upload/templates/upload-normal";
144
+ import { ChartDemo } from "../../chart";
145
+ import { ListItem } from "../../list";
146
+ import { TaskBoardCard, TaskBoardColumn } from "../../taskboard";
147
+ import { CardBody, CardHeader } from "../../card";
89
148
 
90
149
  const style = `
91
150
 
92
151
  #test-area {
93
152
  max-width: unset;
153
+ padding: 0;
94
154
  }
95
155
 
96
156
  .k-drawer {
@@ -106,15 +166,26 @@ const style = `
106
166
  grid-column-end: 6;
107
167
  }
108
168
 
169
+ .k-datetimepicker-popup {
170
+ width: fit-content;
171
+ }
172
+
109
173
  .k-slider-horizontal {
110
174
  width: 100%;
111
175
  }
112
176
 
113
177
  .k-window,
114
- .k-animation-container {
178
+ .k-animation-container,
179
+ .k-dialog-wrapper,
180
+ .k-actionsheet-container {
115
181
  position: relative;
116
182
  }
117
183
 
184
+ .k-dialog-wrapper > .k-overlay,
185
+ .k-actionsheet-container > .k-overlay {
186
+ position: absolute;
187
+ }
188
+
118
189
  .k-listview-header,
119
190
  .k-listview-footer,
120
191
  .k-listview-item {
@@ -127,6 +198,14 @@ const style = `
127
198
  align-items: flex-start;
128
199
  }
129
200
 
201
+ .k-chart {
202
+ height: 400px;
203
+ }
204
+
205
+ .k-gauge {
206
+ display: inline-block;
207
+ }
208
+
130
209
  .k-chart-wizard {
131
210
  height: 550px;
132
211
  }
@@ -139,685 +218,1376 @@ const style = `
139
218
  .k-spreadsheet {
140
219
  width: 100%;
141
220
  }
221
+
222
+ .preview-label {
223
+ font-size: var(--kendo-font-size-xs);
224
+ font-weight: var(--kendo-font-weight-semibold);
225
+ text-transform: uppercase;
226
+ letter-spacing: var(--kendo-letter-spacing-widest);
227
+ color: var(--kendo-color-subtle);
228
+ margin-bottom: 4px;
229
+ }
230
+
231
+ .k-chat {
232
+ height: 500px;
233
+ }
234
+
235
+ .k-dock-manager {
236
+ height: 400px;
237
+ }
238
+
239
+ .k-gantt {
240
+ height: 400px;
241
+ }
242
+
243
+ .k-imageeditor {
244
+ height: 300px;
245
+ }
246
+
247
+ .k-mediaplayer {
248
+ height: 300px;
249
+ }
250
+
251
+ .k-map {
252
+ height: 300px;
253
+ position: relative;
254
+ overflow: hidden;
255
+ }
256
+
257
+ .k-pdf-viewer {
258
+ height: 600px;
259
+ }
260
+
261
+ .k-scrollview {
262
+ height: 100%;
263
+ position: relative;
264
+ }
265
+
266
+ .k-signature {
267
+ height: 150px;
268
+ }
269
+
270
+ .k-taskboard {
271
+ height: 400px;
272
+ }
273
+
274
+ .k-tilelayout {
275
+ grid-template-columns: repeat(2, 1fr);
276
+ gap: 16px;
277
+ }
278
+
279
+ .k-orgchart {
280
+ height: 200px;
281
+ }
282
+
283
+ .k-wizard {
284
+ position: relative;
285
+ }
142
286
  `;
143
287
 
144
288
  export default () => (
145
- <>
146
- <style>{style}</style>
147
- <div id="test-area">
148
- <Drawer expanded
149
- items={
150
- <>
151
- <DrawerItem text="Inbox" />
152
- <DrawerItemSeparator />
153
- <DrawerItem icon="bell" text="Notification" />
154
- <DrawerItem icon="star" text="Favourites" />
155
- <DrawerItem icon="calendar" text="Calendar" />
156
- <DrawerItem text="Selected" selected icon="star-outline" />
157
- <DrawerItem text="Hover"hover icon="star-outline" />
158
- </>
159
- }
160
- >
161
- <DrawerContent>
162
- <div className="k-d-grid k-grid-rows k-gap-10">
163
- <div>
164
- <ToolbarResizable>
165
- <Button icon="bold"></Button>
166
- <Button>Button</Button>
167
- <Button>Toggle</Button>
168
- <ToolbarSeparator></ToolbarSeparator>
169
- <ButtonGroup>
170
- <Button className="k-group-start" icon="align-left">Left</Button>
171
- <Button icon="align-center">Center</Button>
172
- <Button className="k-group-end" icon="align-right">Right</Button>
173
- </ButtonGroup>
174
- <ToolbarSeparator></ToolbarSeparator>
175
- <Button themeColor="primary">Primary</Button>
176
- <ToolbarSeparator></ToolbarSeparator>
177
- <ToolbarItem>
178
- <label>Label:</label>
179
- <ColorPicker />
180
- </ToolbarItem>
181
- <ToolbarSeparator className="k-toolbar-button-separator" />
182
- <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat"></Button>
183
- </ToolbarResizable>
184
- </div>
185
- <div className="k-d-grid k-grid-cols-3 k-gap-10">
186
- <div className="k-d-grid k-grid-rows k-gap-10">
187
- <div><TabStripClosable>
188
- <TabStripContent active>
189
- <div className="k-tabstrip-wrapper">
190
- <TabStripLeft
191
- tabStripItems={
192
- <>
193
- <TabStripItem first active value="Inner First" />
194
- <TabStripItem last value="Inner Second" />
195
- </>
196
- }>
197
- <TabStripContent style={{ display: "block", marginLeft: "128px", minHeight: "68px" }}>
198
- Left orientation inside Top orientation
199
- </TabStripContent>
200
- </TabStripLeft>
201
- </div>
202
- </TabStripContent>
203
- </TabStripClosable></div>
204
- </div>
205
-
206
- <div className="k-d-grid k-grid-rows k-gap-10">
207
-
208
- <div><BottomNavNormal themeColor="primary" border>
209
- <BottomNavItem icon="envelope" text="Normal" />
210
- <BottomNavItem icon="envelope" text="Focused" focus />
211
- <BottomNavItem icon="envelope" text="Selected" selected />
212
- <BottomNavItem icon="envelope" text="Disabled" disabled />
213
- </BottomNavNormal></div>
214
-
215
- <div><StepperNormal>
216
- <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
217
- <Step first done valid text="1" label="Account Info with too long label" style={{ maxWidth: "33.333%" }}/>
218
- <Step current focus invalid text="2" label="Personal Info" style={{ maxWidth: "33.333%" }}/>
219
- <Step last optional text="3" label="Payment Details" style={{ maxWidth: "33.333%" }}/>
220
- </StepList>
221
- <ProgressBarNormal label={false} value="50" />
222
- </StepperNormal></div>
223
- </div>
224
-
225
- <div className="k-d-grid k-grid-rows k-gap-10">
226
- <div><BreadcrumbCollapsingNone /></div>
227
- <div>
228
- <AnimationContainer>
229
- <IconNotificationClosable themeColor="primary" text="Closable notification with icon" />
230
- </AnimationContainer>
231
- </div>
232
- </div>
233
-
234
- </div>
235
-
236
- <div className="k-d-grid k-grid-cols-4 k-gap-10 grid-with-calendar">
237
- <div className="k-d-grid k-grid-rows k-gap-10">
238
- <div className="k-d-grid k-grid-cols-3 k-gap-10">
239
- <div><TextButton>Solid</TextButton></div>
240
- <div><TextButton fillMode="outline">Outline</TextButton></div>
241
- <div><TextButton fillMode="flat">Flat</TextButton></div>
242
- <div><TextButton themeColor="primary">Primary</TextButton></div>
243
- <div><TextButton themeColor="primary" fillMode="outline">Primary</TextButton></div>
244
- <div><TextButton themeColor="primary" fillMode="flat">Primary</TextButton></div>
245
- </div>
246
- <div>
247
- <ButtonGroup>
248
- <Button className="k-group-start">Button 1</Button>
249
- <Button>Button 2</Button>
250
- <Button className="k-group-end">Button 3</Button>
251
- </ButtonGroup>
252
- </div>
253
- <div className="k-d-grid k-grid-cols-3 k-gap-10">
254
- <div><TextFloatingActionButton themeColor="primary" /></div>
255
- <div><IconFloatingActionButton themeColor="primary" /></div>
256
- <div><IconTextFloatingActionButton themeColor="primary" /></div>
257
- </div>
258
-
259
- </div>
260
- <div className="k-d-grid k-grid-rows k-gap-10">
261
- <div>
262
- <TextboxNormal value="Prefix & Suffix"
263
- prefix={
264
- <>
265
- <InputPrefixText>https://</InputPrefixText>
266
- </>
267
- }
268
- suffix={
269
- <>
270
- <InputSuffixText>.com</InputSuffixText>
271
- </>
272
- }
273
- />
274
- </div>
275
- <div><DatePickerNormal placeholder="placeholder..." /></div>
276
- <div><MultiSelectNormal
277
- tags={(
278
- <>
279
- <Chip text="Chip 1" actions={ <ChipAction type="remove"/> } />
280
- <Chip text="Chip 2" actions={ <ChipAction type="remove"/> } />
281
- </>
282
- )}
283
- />
284
- </div>
285
- <div className="k-d-grid k-grid-cols-2 k-gap-10">
286
- <div className="k-px-2">
287
- <CheckboxWithLabelAfter>Checkbox</CheckboxWithLabelAfter>
288
- </div>
289
- <div>
290
- <RadioButtonWithLabelAfter>Radio</RadioButtonWithLabelAfter>
291
- </div>
292
- </div>
293
- </div>
294
- <div className="k-d-grid k-grid-rows k-gap-10">
295
- <div><ProgressBarNormal value="50" labelPosition="center" /></div>
296
- <div><ChunkProgressBarNormal progress={2} /></div>
297
- <div><SliderNormal /></div>
298
- <div className="k-d-grid k-grid-cols-3 k-gap-2">
299
- <div><SwitchNormal /></div>
300
- <div><SwitchChecked /></div>
301
- <div><SwitchNormal disabled /></div>
302
- </div>
303
-
304
- </div>
305
-
306
- <div className="k-d-grid k-grid-rows k-gap-10">
307
- <div className="k-d-grid k-grid-cols-4 k-gap-2">
308
- <AvatarIcon fillMode="outline" themeColor="primary" border>
309
- <Icon icon="x" />
310
- </AvatarIcon>
311
- <AvatarIcon themeColor="primary">
312
- <Icon icon="x" />
313
- </AvatarIcon>
314
- <AvatarText themeColor="primary">JO</AvatarText>
315
- <AvatarImage>
316
- <img src="/packages/html/assets/avatar.jpg" />
317
- </AvatarImage>
318
- </div>
319
- <div className="k-d-grid k-grid-cols-3 k-gap-2">
320
- <div><BadgeNormal themeColor="primary">Rectangle</BadgeNormal></div>
321
- <div><BadgeNormal themeColor="primary" rounded="medium">Rounded</BadgeNormal></div>
322
- <div><BadgeNormal themeColor="primary" rounded="full">Pill</BadgeNormal></div>
323
- </div>
324
- <div><RatingNormal value={3.5} /></div>
325
- <div>
326
- <AnimationContainer>
327
- <TooltipClosable callout="top" />
328
- </AnimationContainer>
329
- </div>
330
- </div>
331
-
332
- <div>
333
- <Calendar className="k-calendar-range" calendarView="month" showWeek>
334
- <CalendarTable showWeek showTableHead>
335
- <CalendarTableRow>
336
- <CalendarCell text="39" weekCell />
337
- <CalendarCell empty />
338
- <CalendarCell empty />
339
- <CalendarCell empty />
340
- <CalendarCell empty />
341
- <CalendarCell empty />
342
- <CalendarCell text="1" />
343
- <CalendarCell text="2" weekend />
344
- </CalendarTableRow>
345
- <CalendarTableRow>
346
- <CalendarCell text="40" weekCell />
347
- <CalendarCell text="3" weekend />
348
- <CalendarCell text="4" />
349
- <CalendarCell text="5" />
350
- <CalendarCell text="6" />
351
- <CalendarCell text="7" />
352
- <CalendarCell text="8" />
353
- <CalendarCell text="9" weekend />
354
- </CalendarTableRow>
355
- <CalendarTableRow>
356
- <CalendarCell text="41" weekCell />
357
- <CalendarCell text="10" weekend />
358
- <CalendarCell text="11" />
359
- <CalendarCell text="12" today />
360
- <CalendarCell text="13" />
361
- <CalendarCell text="14" />
362
- <CalendarCell text="15" />
363
- <CalendarCell text="16" weekend />
364
- </CalendarTableRow>
365
- <CalendarTableRow>
366
- <CalendarCell text="42" weekCell />
367
- <CalendarCell text="17" weekend />
368
- <CalendarCell text="18" />
369
- <CalendarCell text="19" />
370
- <CalendarCell text="20" />
371
- <CalendarCell text="21" rangeStart selected />
372
- <CalendarCell text="22" rangeMid />
373
- <CalendarCell text="23" weekend rangeMid />
374
- </CalendarTableRow>
375
- <CalendarTableRow>
376
- <CalendarCell text="43" weekCell />
377
- <CalendarCell text="24" weekend rangeMid />
378
- <CalendarCell text="25" rangeEnd focus selected />
379
- <CalendarCell text="26" />
380
- <CalendarCell text="27" />
381
- <CalendarCell text="28" />
382
- <CalendarCell text="29" />
383
- <CalendarCell text="30" weekend />
384
- </CalendarTableRow>
385
- <CalendarTableRow>
386
- <CalendarCell text="44" weekCell />
387
- <CalendarCell text="31" weekend />
388
- <CalendarCell empty />
389
- <CalendarCell empty />
390
- <CalendarCell empty />
391
- <CalendarCell empty />
392
- <CalendarCell empty />
393
- <CalendarCell empty />
394
- </CalendarTableRow>
395
- </CalendarTable>
396
- </Calendar>
397
- </div>
398
-
399
- <div>
400
- <TimeSelectorAll />
401
- </div>
402
-
403
- <div className="k-d-grid k-grid-rows k-gap-10">
404
- <CardNormal />
405
- <WindowNormal>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.</WindowNormal>
406
- </div>
407
-
408
- <div>
409
- <Popup className="k-prompt-popup">
410
- <PromptSuggestions />
411
- </Popup>
412
- </div>
413
-
414
- <div>
415
- <PanelBarNormal>
416
- <PanelBarItem header icon="gear" text="Root">
417
- <PanelBarContent>content</PanelBarContent>
418
- </PanelBarItem>
419
- <PanelBarItem hover header iconClass="k-image" text="Root hover">
420
- <PanelBarContent>content</PanelBarContent>
421
- </PanelBarItem>
422
- <PanelBarItem focus header iconClass="k-sprite" text="Root focus">
423
- <PanelBarContent>content</PanelBarContent>
424
- </PanelBarItem>
425
- <PanelBarItem hover focus header iconClass="k-sprite" text="Root hover&focus">
426
- <PanelBarContent>content</PanelBarContent>
427
- </PanelBarItem>
428
- <PanelBarItem disabled header text="Root disabled">
429
- <PanelBarContent>content</PanelBarContent>
430
- </PanelBarItem>
431
- <PanelBarItem selected header text="Root selected">
432
- <PanelBarContent>content</PanelBarContent>
433
- </PanelBarItem>
434
- <PanelBarItem selected hover header text="Root selected hover">
435
- <PanelBarContent>content</PanelBarContent>
436
- </PanelBarItem>
437
- <PanelBarItem selected focus header text="Root selected focus">
438
- <PanelBarContent>content</PanelBarContent>
439
- </PanelBarItem>
440
- <PanelBarItem selected hover focus header text="Root selected hover&focus">
441
- <PanelBarContent>content</PanelBarContent>
442
- </PanelBarItem>
443
- </PanelBarNormal>
444
- </div>
445
- <div>
446
- <ExpansionPanelNormal title="Collapsed panel" subtitle="Normal" />
447
- <ExpansionPanelNormal title="Collapsed panel" hover subtitle="Hover" />
448
- <ExpansionPanelNormal title="Collapsed panel" focus subtitle="Focus" />
449
- <ExpansionPanelNormal title="Collapsed panel" hover focus subtitle="Hover & Focus" />
450
- <ExpansionPanelExpanded title="Expanded panel" subtitle="Subtitle" />
451
- </div>
452
-
453
- <div>
454
- <ListViewNormal
455
- header
456
- footer>
457
- <ListViewItem><div>Listview Item</div></ListViewItem>
458
- <ListViewItem focus><div>Focus Item</div></ListViewItem>
459
- <ListViewItem selected><div>Selected Item</div></ListViewItem>
460
- <ListViewItem focus selected><div>Focus Selected Item</div></ListViewItem>
461
- </ListViewNormal>
462
- </div>
463
-
464
- <div>
465
- <ListBoxNormal />
466
- </div>
467
-
468
- <div>
469
- <TreeviewNormal>
470
- <TreeviewItem text="Normal" />
471
- <TreeviewItem text="Hover" hover />
472
- <TreeviewItem text="Focus" focus/>
473
- <TreeviewItem text="Hover + Focus" hover focus/>
474
- <TreeviewItem text="Selected" selected/>
475
- <TreeviewItem text="Selected + Hover" selected hover/>
476
- <TreeviewItem text="Selected + Hover + Focus" selected hover focus/>
477
- <TreeviewItem text="Selected focus" selected focus/>
478
- <TreeviewItem text="Disabled" disabled/>
479
- <TreeviewItem text="Disabled focus" disabled focus/>
480
- <TreeviewItem leafClassName="k-treeview-load-more-button" text="Load more..."/>
481
- </TreeviewNormal>
482
- </div>
483
-
484
-
485
- <div>
486
- <Menu
487
- children={
488
- <>
489
- <MenuItem first text="Item 1"></MenuItem>
490
- <MenuItem showArrow arrowIconName="caret-alt-down" text="Item 2" active></MenuItem>
491
- <MenuItem showArrow arrowIconName="caret-alt-down" text="Item 3"></MenuItem>
492
- </>
493
- }
494
- popup={
495
- <>
496
- <Popup className="k-menu-popup">
497
- <MenuList>
498
- <MenuListItem first text="Disabled" disabled></MenuListItem>
499
- <MenuListItem text="Normal"></MenuListItem>
500
- <MenuListItem text="Hover" hover showArrow></MenuListItem>
501
- <MenuSeparator></MenuSeparator>
502
- <MenuListItem text="Active" active showArrow></MenuListItem>
503
- <MenuListItem text="Focus" focus></MenuListItem>
504
- <MenuListItem last text="Focus & Active" active focus></MenuListItem>
505
- </MenuList>
506
- </Popup>
507
- </>
508
- } />
509
- </div>
510
-
511
- <div className="k-col-span-2">
512
- <ChartWizardNormal />
513
- </div>
514
-
515
- </div>
516
-
517
- <div>
518
- <GridWithFilterRow></GridWithFilterRow>
519
- </div>
520
-
521
- <div>
522
- <FileManagerNormal />
523
- </div>
524
-
525
- <div className="k-d-grid k-grid-cols-2 k-gap-10">
526
- <div>
527
- <SpreadsheetNormal>
528
- <SpreadsheetHeader
529
- menuItems={[
530
- <MenuItem first text="File" active />,
531
- <MenuItem text="Home" />,
532
- <MenuItem text="Insert" />,
533
- <MenuItem text="Format" />,
534
- <MenuItem text="Formulas" />,
535
- <MenuItem text="Data" />,
536
- <MenuItem last text="View" />,
537
- ]}
538
- toolbarItems={[
539
- <Button icon="file-add" fillMode="flat"></Button>,
540
- <Button icon="folder-add" fillMode="flat"></Button>,
541
- <ToolbarSeparator></ToolbarSeparator>,
542
- <Button icon="download" fillMode="flat"></Button>,
543
- <ToolbarSeparator></ToolbarSeparator>,
544
- <Button icon="print" fillMode="flat"></Button>
545
- ]}
546
- />
547
- <SpreadsheetActionBar />
548
- <SpreadsheetView
549
- selection={
550
- <div className="k-spreadsheet-selection k-single-selection" style={{ width: "101px", height: "31px", top: "125px", left: "30px" }} />
551
- }
552
- rowHeaderSelection={{ 3: "partial" }}
553
- activeCellIndex={8}
554
- />
555
- <SpreadsheetSheetsBar />
556
- </SpreadsheetNormal>
557
- </div>
558
-
559
- <div className="k-d-grid k-grid-rows k-gap-10">
560
- <div>
561
- <EditorNormal>
562
- <p className="ProseMirror">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus mollitia obcaecati dignissimos beatae ipsam voluptatem pariatur consectetur culpa asperiores veniam?</p>
563
- </EditorNormal>
564
- </div>
565
- <div>
566
- <SchedulerWeek />
567
- </div>
568
- </div>
569
- </div>
570
-
571
- <div className="k-d-grid k-grid-cols-2 k-gap-10">
572
- <div>
573
- <TimelineNormalAlternating />
574
- </div>
575
- <div className="k-d-grid k-grid-rows k-gap-10">
576
- <div>
577
- <FilterNormal />
578
- </div>
579
- <div>
580
- <PivotGrid
581
- style={{ height: "550px", gridTemplateColumns: "150px auto", gridTemplateRows: "242px auto" }}
582
- columnHeaders={
583
- <PivotGridTable>
584
- <colgroup>
585
- <col width="120" />
586
- <col width="120" />
587
- <col width="120" />
588
- <col width="120" />
589
- <col width="120" />
590
- <col width="120" />
591
- <col width="120" />
592
- <col width="120" />
593
- <col width="120" />
594
- <col width="120" />
595
- </colgroup>
596
- <PivotGridTbody>
597
- <PivotGridRow columnTotal >
598
- <PivotGridCell as="th" colSpan={9} toggle="up" headerTitle="All Periods" headerRootCell />
599
- <PivotGridCell as="th" colSpan={1} rowSpan={4} headerTitle="All Periods" headerRootCell headerTotalCell />
600
- </PivotGridRow>
601
- <PivotGridRow>
602
- <PivotGridCell as="th" colSpan={6} toggle="up" headerTitle="CY 2010" />
603
- <PivotGridCell as="th" colSpan={1} rowSpan={3} toggle="down" headerTitle="CY 2011" />
604
- <PivotGridCell as="th" colSpan={1} rowSpan={3} toggle="down" headerTitle="CY 2012" />
605
- <PivotGridCell as="th" colSpan={1} rowSpan={3} toggle="down" headerTitle="CY 2013" />
606
- </PivotGridRow>
607
- <PivotGridRow>
608
- <PivotGridCell as="th" colSpan={1} toggle="up" headerTitle="H2 CY 2010" />
609
- <PivotGridCell as="th" colSpan={5} rowSpan={2} headerTitle="H2 CY 2010" />
610
- </PivotGridRow>
611
- <PivotGridRow>
612
- <PivotGridCell as="th" colSpan={1} toggle="down" headerTitle="Q4 CY 2010" />
613
- </PivotGridRow>
614
- <PivotGridRow columnTotal >
615
- <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell />
616
- <PivotGridCell as="th" colSpan={4} headerTitle="All Products" toggle="up" headerRootCell />
617
- <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" headerRootCell />
618
- <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell />
619
- <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell />
620
- <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell />
621
- <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell headerTotalCell />
622
- </PivotGridRow>
623
- <PivotGridRow>
624
- <PivotGridCell as="th" colSpan={1} headerTitle="Accessories" className="k-first" />
625
- <PivotGridCell as="th" colSpan={1} headerTitle="Bikes" />
626
- <PivotGridCell as="th" colSpan={1} headerTitle="Clothing" />
627
- <PivotGridCell as="th" colSpan={1} headerTitle="Components" />
628
- </PivotGridRow>
629
- </PivotGridTbody>
630
- </PivotGridTable>
631
- }
632
-
633
- rowHeaders={
634
- <PivotGridTable>
635
- <colgroup>
636
- <col />
637
- <col />
638
- </colgroup>
639
- <PivotGridTbody>
640
- <PivotGridRow>
641
- <PivotGridCell as="th" colSpan={1} rowSpan={9} toggle="up" headerTitle="All Geographies" headerRootCell rowTotalCell />
642
- <PivotGridCell as="th" colSpan={1} headerTitle="Austell" />
643
- </PivotGridRow>
644
- <PivotGridRow>
645
- <PivotGridCell as="th" colSpan={1} headerTitle="Biloxi" />
646
- </PivotGridRow>
647
- <PivotGridRow>
648
- <PivotGridCell as="th" colSpan={1} headerTitle="Braintree" />
649
- </PivotGridRow>
650
- <PivotGridRow>
651
- <PivotGridCell as="th" colSpan={1} headerTitle="Casper" />
652
- </PivotGridRow>
653
- <PivotGridRow>
654
- <PivotGridCell as="th" colSpan={1} headerTitle="Clearwater" />
655
- </PivotGridRow>
656
- <PivotGridRow>
657
- <PivotGridCell as="th" colSpan={1} headerTitle="Destin" />
658
- </PivotGridRow>
659
- <PivotGridRow>
660
- <PivotGridCell as="th" colSpan={1} headerTitle="Euclid" />
661
- </PivotGridRow>
662
- <PivotGridRow>
663
- <PivotGridCell as="th" colSpan={1} headerTitle="Everett" />
664
- </PivotGridRow>
665
- <PivotGridRow>
666
- <PivotGridCell as="th" colSpan={1} headerTitle="Fort Wayne" />
667
- </PivotGridRow>
668
- <PivotGridRow>
669
- <PivotGridCell as="th" colSpan={2} headerTitle="All Geographies" headerTotalCell />
670
- </PivotGridRow>
671
- </PivotGridTbody>
672
- </PivotGridTable>
673
- }
674
- >
675
- <PivotGridTable style={{ width: "1200px" }}>
676
- <colgroup>
677
- <col width="120" />
678
- <col width="120" />
679
- <col width="120" />
680
- <col width="120" />
681
- <col width="120" />
682
- <col width="120" />
683
- <col width="120" />
684
- <col width="120" />
685
- <col width="120" />
686
- <col width="120" />
687
- </colgroup>
688
- <PivotGridTbody>
689
- <PivotGridRow>
690
- <PivotGridCell as="td" colSpan={1} content="$514.14" />
691
- <PivotGridCell as="td" colSpan={1} content="$2.02" />
692
- <PivotGridCell as="td" colSpan={1} content="$508.12" />
693
- <PivotGridCell as="td" colSpan={1} content="$4.00" />
694
- <PivotGridCell as="td" colSpan={1} content="" />
695
- <PivotGridCell as="td" colSpan={1} content="$514.14" />
696
- <PivotGridCell as="td" colSpan={1} content="$3682.86" />
697
- <PivotGridCell as="td" colSpan={1} content="$2451.14" />
698
- <PivotGridCell as="td" colSpan={1} content="$2919.53" />
699
- <PivotGridCell as="td" colSpan={1} content="$10567.67" totalCell />
700
- </PivotGridRow>
701
- <PivotGridRow>
702
- <PivotGridCell as="td" colSpan={1} content="$344.69" />
703
- <PivotGridCell as="td" colSpan={1} content="$2.52" />
704
- <PivotGridCell as="td" colSpan={1} content="$298.45" />
705
- <PivotGridCell as="td" colSpan={1} content="$7.47" />
706
- <PivotGridCell as="td" colSpan={1} content="$36.25" />
707
- <PivotGridCell as="td" colSpan={1} content="$344.69" />
708
- <PivotGridCell as="td" colSpan={1} content="$1461.20" />
709
- <PivotGridCell as="td" colSpan={1} content="$105.70" />
710
- <PivotGridCell as="td" colSpan={1} content="" />
711
- <PivotGridCell as="td" colSpan={1} content="$1911.60" totalCell />
712
- </PivotGridRow>
713
- <PivotGridRow>
714
- <PivotGridCell as="td" colSpan={1} content="$96.89" />
715
- <PivotGridCell as="td" colSpan={1} content="" />
716
- <PivotGridCell as="td" colSpan={1} content="$96.17" />
717
- <PivotGridCell as="td" colSpan={1} content="$0.72" />
718
- <PivotGridCell as="td" colSpan={1} content="" />
719
- <PivotGridCell as="td" colSpan={1} content="$96.89" />
720
- <PivotGridCell as="td" colSpan={1} content="$719.27" />
721
- <PivotGridCell as="td" colSpan={1} content="" />
722
- <PivotGridCell as="td" colSpan={1} content="" />
723
- <PivotGridCell as="td" colSpan={1} content="$816.16" totalCell />
724
- </PivotGridRow>
725
- <PivotGridRow>
726
- <PivotGridCell as="td" colSpan={1} content="$1070.34" />
727
- <PivotGridCell as="td" colSpan={1} content="$3.03" />
728
- <PivotGridCell as="td" colSpan={1} content="$1064.62" />
729
- <PivotGridCell as="td" colSpan={1} content="$2.69" />
730
- <PivotGridCell as="td" colSpan={1} content="" />
731
- <PivotGridCell as="td" colSpan={1} content="$1070.34" />
732
- <PivotGridCell as="td" colSpan={1} content="$4671.39" />
733
- <PivotGridCell as="td" colSpan={1} content="$6621.86" />
734
- <PivotGridCell as="td" colSpan={1} content="$5156.51" />
735
- <PivotGridCell as="td" colSpan={1} content="$17520.10" totalCell />
736
- </PivotGridRow>
737
- <PivotGridRow>
738
- <PivotGridCell as="td" colSpan={1} content="$514.14" />
739
- <PivotGridCell as="td" colSpan={1} content="$2.02" />
740
- <PivotGridCell as="td" colSpan={1} content="$508.12" />
741
- <PivotGridCell as="td" colSpan={1} content="$4.00" />
742
- <PivotGridCell as="td" colSpan={1} content="" />
743
- <PivotGridCell as="td" colSpan={1} content="$514.14" />
744
- <PivotGridCell as="td" colSpan={1} content="$3682.86" />
745
- <PivotGridCell as="td" colSpan={1} content="$2451.14" />
746
- <PivotGridCell as="td" colSpan={1} content="$2919.53" />
747
- <PivotGridCell as="td" colSpan={1} content="$10567.67" totalCell />
748
- </PivotGridRow>
749
- <PivotGridRow>
750
- <PivotGridCell as="td" colSpan={1} content="$344.69" />
751
- <PivotGridCell as="td" colSpan={1} content="$2.52" />
752
- <PivotGridCell as="td" colSpan={1} content="$298.45" />
753
- <PivotGridCell as="td" colSpan={1} content="$7.47" />
754
- <PivotGridCell as="td" colSpan={1} content="$36.25" />
755
- <PivotGridCell as="td" colSpan={1} content="$344.69" />
756
- <PivotGridCell as="td" colSpan={1} content="$1461.20" />
757
- <PivotGridCell as="td" colSpan={1} content="$105.70" />
758
- <PivotGridCell as="td" colSpan={1} content="" />
759
- <PivotGridCell as="td" colSpan={1} content="$1911.60" totalCell />
760
- </PivotGridRow>
761
- <PivotGridRow>
762
- <PivotGridCell as="td" colSpan={1} content="$96.89" />
763
- <PivotGridCell as="td" colSpan={1} content="" />
764
- <PivotGridCell as="td" colSpan={1} content="$96.17" />
765
- <PivotGridCell as="td" colSpan={1} content="$0.72" />
766
- <PivotGridCell as="td" colSpan={1} content="" />
767
- <PivotGridCell as="td" colSpan={1} content="$96.89" />
768
- <PivotGridCell as="td" colSpan={1} content="$719.27" />
769
- <PivotGridCell as="td" colSpan={1} content="" />
770
- <PivotGridCell as="td" colSpan={1} content="" />
771
- <PivotGridCell as="td" colSpan={1} content="$816.16" totalCell />
772
- </PivotGridRow>
773
- <PivotGridRow>
774
- <PivotGridCell as="td" colSpan={1} content="$1070.34" />
775
- <PivotGridCell as="td" colSpan={1} content="$3.03" />
776
- <PivotGridCell as="td" colSpan={1} content="$1064.62" />
777
- <PivotGridCell as="td" colSpan={1} content="$2.69" />
778
- <PivotGridCell as="td" colSpan={1} content="" />
779
- <PivotGridCell as="td" colSpan={1} content="$1070.34" />
780
- <PivotGridCell as="td" colSpan={1} content="$4671.39" />
781
- <PivotGridCell as="td" colSpan={1} content="$6621.86" />
782
- <PivotGridCell as="td" colSpan={1} content="$5156.51" />
783
- <PivotGridCell as="td" colSpan={1} content="$17520.10" totalCell />
784
- </PivotGridRow>
785
- <PivotGridRow>
786
- <PivotGridCell as="td" colSpan={1} content="$96.89" />
787
- <PivotGridCell as="td" colSpan={1} content="" />
788
- <PivotGridCell as="td" colSpan={1} content="$96.17" />
789
- <PivotGridCell as="td" colSpan={1} content="$0.72" />
790
- <PivotGridCell as="td" colSpan={1} content="" />
791
- <PivotGridCell as="td" colSpan={1} content="$96.89" />
792
- <PivotGridCell as="td" colSpan={1} content="$719.27" />
793
- <PivotGridCell as="td" colSpan={1} content="" />
794
- <PivotGridCell as="td" colSpan={1} content="" />
795
- <PivotGridCell as="td" colSpan={1} content="$816.16" totalCell />
796
- </PivotGridRow>
797
- <PivotGridRow>
798
- <PivotGridCell as="td" colSpan={1} content="$9336.89" totalCell />
799
- <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
800
- <PivotGridCell as="td" colSpan={1} content="$9687.17" totalCell />
801
- <PivotGridCell as="td" colSpan={1} content="$7680.72" totalCell />
802
- <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
803
- <PivotGridCell as="td" colSpan={1} content="$9546.89" totalCell />
804
- <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
805
- <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
806
- <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
807
- <PivotGridCell as="td" colSpan={1} content="$88816.16" totalCell />
808
- </PivotGridRow>
809
- </PivotGridTbody>
810
- </PivotGridTable>
811
- </PivotGrid>
812
- </div>
813
- </div>
814
- </div>
289
+ <>
290
+ <style>{style}</style>
291
+ <div id="test-area">
292
+ <Drawer
293
+ expanded
294
+ items={
295
+ <>
296
+ <DrawerItem text="Inbox" />
297
+ <DrawerItemSeparator />
298
+ <DrawerItem icon="bell" text="Notification" />
299
+ <DrawerItem icon="star" text="Favourites" />
300
+ <DrawerItem icon="calendar" text="Calendar" />
301
+ <DrawerItem text="Selected" selected icon="star-outline" />
302
+ <DrawerItem text="Hover" hover icon="star-outline" />
303
+ </>
304
+ }
305
+ >
306
+ <DrawerContent>
307
+ <div className="k-d-grid k-grid-rows k-gap-10 k-p-10 k-pt-6">
308
+ <Appbar>
309
+ <AppbarSection>
310
+ <IconButton icon="menu" fillMode="flat" />
311
+ </AppbarSection>
312
+ <span className="k-spacer k-spacer-sized"></span>
313
+ <AppbarSection>
314
+ <span className="k-font-size-xl k-font-weight-bolder ">Appbar</span>
315
+ </AppbarSection>
316
+ <span className="k-spacer"></span>
317
+ <AppbarSection>
318
+ <TextButton fillMode="flat">Option</TextButton>
319
+ <TextButton fillMode="flat">Option</TextButton>
320
+ <TextButton fillMode="flat">Option</TextButton>
321
+ </AppbarSection>
322
+ <span className="k-spacer"></span>
323
+ <AppbarSection className="k-gap-2">
324
+ <IconButton icon="user" fillMode="flat" />
325
+ <span className="k-appbar-separator"></span>
326
+ <IconButton icon="bell" rounded="full" fillMode="flat" />
327
+ </AppbarSection>
328
+ </Appbar>
329
+
330
+ {/* --- Inputs --- */}
331
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
332
+ <div>
333
+ <div className="preview-label">Textbox</div>
334
+ <TextboxNormal
335
+ value="Prefix & Suffix"
336
+ prefix={
337
+ <>
338
+ <InputPrefixText>https://</InputPrefixText>
339
+ </>
340
+ }
341
+ suffix={
342
+ <>
343
+ <InputSuffixText>.com</InputSuffixText>
344
+ </>
345
+ }
346
+ />
347
+ </div>
348
+ <div>
349
+ <div className="preview-label">NumericTextbox</div>
350
+ <NumericTextboxNormal />
351
+ </div>
352
+ <div>
353
+ <div className="preview-label">Combobox</div>
354
+ <ComboboxNormal placeholder="Combobox..." />
355
+ </div>
356
+ <div>
357
+ <div className="preview-label">Searchbox</div>
358
+ <SearchboxNormal />
359
+ </div>
360
+ </div>
815
361
 
362
+ {/* Buttons */}
363
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
364
+ <div className="k-d-grid k-grid-rows">
365
+ <div className="preview-label">Button Base</div>
366
+ <div className="k-d-grid k-grid-cols-3 k-gap-10">
367
+ <div>
368
+ <TextButton>Solid</TextButton>
369
+ </div>
370
+ <div>
371
+ <TextButton fillMode="outline">Outline</TextButton>
372
+ </div>
373
+ <div>
374
+ <TextButton fillMode="flat">Flat</TextButton>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ <div className="k-d-grid k-grid-rows">
379
+ <div className="preview-label">Button Primary</div>
380
+ <div className="k-d-grid k-grid-cols-3 k-gap-10">
381
+ <div>
382
+ <TextButton themeColor="primary">Primary</TextButton>
383
+ </div>
384
+ <div>
385
+ <TextButton themeColor="primary" fillMode="outline">
386
+ Primary
387
+ </TextButton>
388
+ </div>
389
+ <div>
390
+ <TextButton themeColor="primary" fillMode="flat">
391
+ Primary
392
+ </TextButton>
393
+ </div>
394
+ </div>
395
+ </div>
396
+ <div className="k-d-grid k-grid-rows">
397
+ <div className="preview-label">Button Secondary</div>
398
+ <div className="k-d-grid k-grid-cols-3 k-gap-10">
399
+ <div>
400
+ <TextButton themeColor="secondary">Secondary</TextButton>
401
+ </div>
402
+ <div>
403
+ <TextButton themeColor="secondary" fillMode="outline">
404
+ Secondary
405
+ </TextButton>
406
+ </div>
407
+ <div>
408
+ <TextButton themeColor="secondary" fillMode="flat">
409
+ Secondary
410
+ </TextButton>
411
+ </div>
412
+ </div>
413
+ </div>
414
+ <div className="k-d-grid k-grid-rows">
415
+ <div className="preview-label">Button Tertiary</div>
416
+ <div className="k-d-grid k-grid-cols-3 k-gap-10">
417
+ <div>
418
+ <TextButton themeColor="tertiary">Tertiary</TextButton>
419
+ </div>
420
+ <div>
421
+ <TextButton themeColor="tertiary" fillMode="outline">
422
+ Tertiary
423
+ </TextButton>
424
+ </div>
425
+ <div>
426
+ <TextButton themeColor="tertiary" fillMode="flat">
427
+ Tertiary
428
+ </TextButton>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
433
+ <div>
434
+ <div className="preview-label">SplitButton</div>
435
+ <TextSplitButton>Split Button</TextSplitButton>
436
+ </div>
437
+ <div>
438
+ <div className="preview-label">MenuButton</div>
439
+ <TextMenuButton>Menu Button</TextMenuButton>
440
+ </div>
441
+ </div>
442
+ <div>
443
+ <div className="preview-label">SegmentedControl</div>
444
+ <SegmentedControlNormal thumbStyles={{ width: "50%" }} />
445
+ </div>
446
+ <div>
447
+ <div className="preview-label">ButtonGroup</div>
448
+ <ButtonGroup>
449
+ <Button className="k-group-start">Button 1</Button>
450
+ <Button>Button 2</Button>
451
+ <Button className="k-group-end">Button 3</Button>
452
+ </ButtonGroup>
453
+ </div>
454
+ <div className="k-d-grid k-grid-rows">
455
+ <div className="preview-label">FloatingActionButton</div>
456
+ <div className="k-d-grid k-grid-cols-3 k-gap-10">
457
+ <div>
458
+ <TextFloatingActionButton themeColor="primary" />
459
+ </div>
460
+ <div>
461
+ <IconFloatingActionButton themeColor="primary" />
462
+ </div>
463
+ <div>
464
+ <IconTextFloatingActionButton themeColor="primary" />
465
+ </div>
466
+ </div>
467
+ </div>
468
+ <div className="k-d-grid k-grid-cols-3 k-gap-2">
469
+ <div className="preview-label" style={{ gridColumn: "1 / -1" }}>
470
+ Switch
471
+ </div>
472
+ <div>
473
+ <SwitchNormal />
474
+ </div>
475
+ <div>
476
+ <SwitchChecked />
477
+ </div>
478
+ <div>
479
+ <SwitchNormal disabled />
480
+ </div>
481
+ </div>
482
+ <div className="k-d-grid k-grid-cols-4 k-gap-2">
483
+ <div className="preview-label" style={{ gridColumn: "1 / -1" }}>
484
+ Avatar
485
+ </div>
486
+ <AvatarIcon fillMode="outline" themeColor="primary" border>
487
+ <Icon icon="x" />
488
+ </AvatarIcon>
489
+ <AvatarIcon themeColor="primary">
490
+ <Icon icon="x" />
491
+ </AvatarIcon>
492
+ <AvatarText themeColor="primary">JO</AvatarText>
493
+ <AvatarImage>
494
+ <img src="/packages/html/assets/avatar.jpg" />
495
+ </AvatarImage>
496
+ </div>
497
+ <div className="k-d-grid k-grid-cols-3 k-gap-2">
498
+ <div className="preview-label" style={{ gridColumn: "1 / -1" }}>
499
+ Badge
500
+ </div>
501
+ <div>
502
+ <BadgeNormal themeColor="primary">Rectangle</BadgeNormal>
503
+ </div>
504
+ <div>
505
+ <BadgeNormal themeColor="primary" rounded="medium">
506
+ Rounded
507
+ </BadgeNormal>
508
+ </div>
509
+ <div>
510
+ <BadgeNormal themeColor="primary" rounded="full">
511
+ Pill
512
+ </BadgeNormal>
513
+ </div>
514
+ </div>
515
+ <div className="k-d-grid k-grid-cols-3 k-gap-5">
516
+ <div className="preview-label" style={{ gridColumn: "1 / -1" }}>
517
+ Loader
518
+ </div>
519
+ <div>
520
+ <LoaderNormal />
521
+ </div>
522
+ <div>
523
+ <LoaderInfinite />
524
+ </div>
525
+ <div>
526
+ <LoaderConverging />
527
+ </div>
528
+ </div>
529
+ </div>
530
+
531
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
532
+ <div className="k-d-grid k-grid-rows k-gap-5">
533
+ <div>
534
+ <div className="preview-label">DatePicker</div>
535
+ <DatePickerNormal placeholder="placeholder..." />
536
+ </div>
537
+ <div>
538
+ <div className="preview-label">OTP</div>
539
+ <OneTimePasswordNormal />
540
+ </div>
541
+ <div>
542
+ <div className="preview-label">ColorPicker</div>
543
+ <ColorPicker />
544
+ </div>
545
+ </div>
546
+ <div className="k-d-grid k-grid-rows k-gap-5">
547
+ <div>
548
+ <div className="preview-label">MultiSelect</div>
549
+ <MultiSelectNormal
550
+ tags={
551
+ <>
552
+ <Chip text="Chip 1" actions={<ChipAction type="remove" />} />
553
+ <Chip text="Chip 2" actions={<ChipAction type="remove" />} />
554
+ </>
555
+ }
556
+ />
557
+ </div>
558
+ <div>
559
+ <div className="preview-label">MaskedTextbox</div>
560
+ <MaskedTextboxNormal placeholder="MaskedTextbox..." />
561
+ </div>
562
+ <div>
563
+ <div className="preview-label">Textarea</div>
564
+ <TextareaNormal placeholder="Textarea..." />
565
+ </div>
566
+ </div>
567
+ <div className="k-d-grid k-grid-rows k-gap-5">
568
+ <div>
569
+ <div className="preview-label">SmartBox</div>
570
+ <SmartBoxNormal />
571
+ </div>
572
+ <div>
573
+ <div className="preview-label">PromptBox</div>
574
+ <PromptBoxLineModeMulti />
575
+ </div>
576
+ </div>
577
+ <div className="k-d-grid k-grid-rows k-gap-10">
578
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
579
+ <div className="k-d-grid k-grid-rows k-px-2">
580
+ <div className="preview-label">Checkbox</div>
581
+ <div>
582
+ <CheckboxWithLabelAfter>Checkbox</CheckboxWithLabelAfter>
583
+ </div>
584
+ <div>
585
+ <CheckboxWithLabelAfter checked id="cb-label-after-checked">
586
+ Checked
587
+ </CheckboxWithLabelAfter>
588
+ </div>
589
+ </div>
590
+ <div className="k-d-grid k-grid-rows k-px-2">
591
+ <div className="preview-label">RadioButton</div>
592
+ <div>
593
+ <RadioButtonWithLabelAfter>Radio</RadioButtonWithLabelAfter>
594
+ </div>
595
+ <div>
596
+ <RadioButtonWithLabelAfter checked id="radio-checked">
597
+ Checked
598
+ </RadioButtonWithLabelAfter>
816
599
  </div>
817
- </DrawerContent>
818
- </Drawer>
819
- </div>
600
+ </div>
601
+ </div>
602
+ <div>
603
+ <div className="preview-label">Rating</div>
604
+ <RatingNormal value={3.5} />
605
+ </div>
606
+ </div>
607
+ </div>
608
+ <div>
609
+ <div className="preview-label">Toolbar</div>
610
+ <ToolbarResizable>
611
+ <Button icon="bold"></Button>
612
+ <Button>Button</Button>
613
+ <Button>Toggle</Button>
614
+ <ToolbarSeparator></ToolbarSeparator>
615
+ <ButtonGroup>
616
+ <Button className="k-group-start" icon="align-left">
617
+ Left
618
+ </Button>
619
+ <Button icon="align-center">Center</Button>
620
+ <Button className="k-group-end" icon="align-right">
621
+ Right
622
+ </Button>
623
+ </ButtonGroup>
624
+ <ToolbarSeparator></ToolbarSeparator>
625
+ <Button themeColor="primary">Primary</Button>
626
+ <ToolbarSeparator></ToolbarSeparator>
627
+ <ToolbarItem>
628
+ <label>Label:</label>
629
+ <ColorPicker />
630
+ </ToolbarItem>
631
+ <ToolbarSeparator className="k-toolbar-button-separator" />
632
+ <Button icon="more-vertical" className="k-toolbar-overflow-button" fillMode="flat"></Button>
633
+ </ToolbarResizable>
634
+ </div>
635
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
636
+ <div className="k-d-grid k-grid-rows k-gap-10">
637
+ <div>
638
+ <div className="preview-label">TabStrip</div>
639
+ <TabStripClosable>
640
+ <TabStripContent active>
641
+ <div className="k-tabstrip-wrapper">
642
+ <TabStripLeft
643
+ tabStripItems={
644
+ <>
645
+ <TabStripItem first active value="Inner First" />
646
+ <TabStripItem last value="Inner Second" />
647
+ </>
648
+ }
649
+ >
650
+ <TabStripContent style={{ display: "block", marginLeft: "128px", minHeight: "68px" }}>Left orientation inside Top orientation</TabStripContent>
651
+ </TabStripLeft>
652
+ </div>
653
+ </TabStripContent>
654
+ </TabStripClosable>
655
+ </div>
656
+ </div>
657
+
658
+ <div className="k-d-grid k-grid-rows k-gap-10">
659
+ <div>
660
+ <div className="preview-label">Breadcrumb</div>
661
+ <BreadcrumbCollapsingNone />
662
+ </div>
663
+ <div>
664
+ <div className="preview-label">BottomNav</div>
665
+ <BottomNavNormal fillMode="solid" themeColor="primary" border>
666
+ <BottomNavItem icon="envelope" text="Normal" />
667
+ <BottomNavItem icon="envelope" text="Focused" focus />
668
+ <BottomNavItem icon="envelope" text="Selected" selected />
669
+ <BottomNavItem icon="envelope" text="Disabled" disabled />
670
+ </BottomNavNormal>
671
+ </div>
672
+ </div>
673
+ </div>
674
+ <div className="k-d-grid k-grid-cols-3 k-gap-10">
675
+ <div className="k-d-grid k-grid-rows k-gap-10">
676
+ <div>
677
+ <div className="preview-label">ProgressBar</div>
678
+ <ProgressBarNormal value="50" labelPosition="center" />
679
+ </div>
680
+ <div>
681
+ <div className="preview-label">Chunk ProgressBar</div>
682
+ <ChunkProgressBarNormal progress={2} />
683
+ </div>
684
+ </div>
685
+ <div className="k-d-grid k-grid-rows k-gap-10">
686
+ <div>
687
+ <div className="preview-label">Slider</div>
688
+ <SliderNormal />
689
+ </div>
690
+ <div>
691
+ <div className="preview-label">Stepper</div>
692
+ <StepperNormal>
693
+ <StepList style={{ gridColumnStart: "1", gridColumnEnd: "-1" }}>
694
+ <Step first done valid text="1" label="Account Info with too long label" style={{ maxWidth: "33.333%" }} />
695
+ <Step current focus invalid text="2" label="Personal Info" style={{ maxWidth: "33.333%" }} />
696
+ <Step last optional text="3" label="Payment Details" style={{ maxWidth: "33.333%" }} />
697
+ </StepList>
698
+ <ProgressBarNormal label={false} value="50" />
699
+ </StepperNormal>
700
+ </div>
701
+ </div>
702
+
703
+ <div className="k-d-grid k-grid-rows k-gap-10">
704
+ <div>
705
+ <div className="preview-label">Notification</div>
706
+ <AnimationContainer>
707
+ <IconNotificationClosable themeColor="primary" text="Closable notification with icon" />
708
+ </AnimationContainer>
709
+ </div>
710
+ <div>
711
+ <div className="preview-label">Tooltip</div>
712
+ <AnimationContainer>
713
+ <TooltipClosable callout="top" />
714
+ </AnimationContainer>
715
+ </div>
716
+ </div>
717
+ </div>
718
+
719
+ <div className="k-d-grid k-grid-cols-3 k-gap-10">
720
+ <div>
721
+ <div className="preview-label">Chat</div>
722
+ <ChatNormal
723
+ suggestedActions={
724
+ <SuggestionGroup layout="scrollable">
725
+ <Suggestion text="Suggestion 1" />
726
+ <Suggestion text="Suggestion 2" />
727
+ <Suggestion text="Suggestion 3" />
728
+ <Suggestion text="Suggestion 4" />
729
+ <Suggestion text="Suggestion 5" />
730
+ </SuggestionGroup>
731
+ }
732
+ />
733
+ </div>
734
+
735
+ <div>
736
+ <div className="preview-label">Prompt</div>
737
+ <Popup className="k-prompt-popup">
738
+ <PromptSuggestions />
739
+ </Popup>
740
+ </div>
741
+ <div className="k-d-grid k-grid-rows k-gap-5">
742
+ <div>
743
+ <div className="preview-label">Window</div>
744
+ <WindowNormal
745
+ title="Window"
746
+ actionButtons={
747
+ <>
748
+ <Button>Cancel</Button>
749
+ <Button themeColor="primary">OK</Button>
750
+ </>
751
+ }
752
+ actionButtonsAlign="end"
753
+ >
754
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et.
755
+ </WindowNormal>
756
+ </div>
757
+ <div>
758
+ <div className="preview-label">Card</div>
759
+ <CardNormal />
760
+ </div>
761
+ </div>
762
+ </div>
763
+
764
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
765
+ <div>
766
+ <div className="preview-label">FloatingLabel</div>
767
+ <FloatingLabelNormal />
768
+ </div>
769
+ <div>
770
+ <div className="preview-label">Captcha</div>
771
+ <CaptchaNormal />
772
+ </div>
773
+ <div>
774
+ <div className="preview-label">Signature</div>
775
+ <SignatureNormal />
776
+ </div>
777
+ <div>
778
+ <div className="preview-label">ListBox</div>
779
+ <ListBoxNormal actions={["up", "down", "left", "right"]}>
780
+ <ListItem key="ListItem1" focus>
781
+ List item 1
782
+ </ListItem>
783
+ <ListItem key="ListItem2" selected>
784
+ List item 2
785
+ </ListItem>
786
+ <ListItem key="ListItem3">List item 3</ListItem>
787
+ <ListItem key="ListItem4">List item 4</ListItem>
788
+ </ListBoxNormal>
789
+ </div>
790
+ </div>
791
+
792
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
793
+ <div>
794
+ <div className="preview-label">DropdownGrid</div>
795
+ <DropdownGridPopup />
796
+ </div>
797
+ <div>
798
+ <div className="preview-label">DateTimePicker</div>
799
+ <DateTimePickerPopup />
800
+ </div>
801
+ <div className="k-col-span-2">
802
+ <div className="preview-label">DateRangePicker</div>
803
+ <DateRangePickerPopup />
804
+ </div>
805
+ </div>
806
+
807
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
808
+ <div>
809
+ <div className="preview-label">Autocomplete</div>
810
+ <AutocompletePopup placeholder="Autocomplete..." />
811
+ </div>
812
+ <div>
813
+ <div className="preview-label">DropdownTree</div>
814
+ <DropdownTreePopup />
815
+ </div>
816
+ <div>
817
+ <div className="preview-label">MultiSelectTree</div>
818
+ <MultiSelectTreePopup />
819
+ </div>
820
+ <div>
821
+ <div className="preview-label">TimeDurationPicker</div>
822
+ <TimeDurationPickerPopup />
823
+ </div>
824
+ </div>
825
+
826
+ <div className="k-d-grid k-grid-cols-3 k-gap-10 grid-with-calendar">
827
+ <div>
828
+ <div className="preview-label">Calendar</div>
829
+ <Calendar className="k-calendar-range" calendarView="month" showWeek>
830
+ <CalendarTable showWeek showTableHead>
831
+ <CalendarTableRow>
832
+ <CalendarCell text="39" weekCell />
833
+ <CalendarCell empty />
834
+ <CalendarCell empty />
835
+ <CalendarCell empty />
836
+ <CalendarCell empty />
837
+ <CalendarCell empty />
838
+ <CalendarCell text="1" />
839
+ <CalendarCell text="2" weekend />
840
+ </CalendarTableRow>
841
+ <CalendarTableRow>
842
+ <CalendarCell text="40" weekCell />
843
+ <CalendarCell text="3" weekend />
844
+ <CalendarCell text="4" />
845
+ <CalendarCell text="5" />
846
+ <CalendarCell text="6" />
847
+ <CalendarCell text="7" />
848
+ <CalendarCell text="8" />
849
+ <CalendarCell text="9" weekend />
850
+ </CalendarTableRow>
851
+ <CalendarTableRow>
852
+ <CalendarCell text="41" weekCell />
853
+ <CalendarCell text="10" weekend />
854
+ <CalendarCell text="11" />
855
+ <CalendarCell text="12" today />
856
+ <CalendarCell text="13" />
857
+ <CalendarCell text="14" />
858
+ <CalendarCell text="15" />
859
+ <CalendarCell text="16" weekend />
860
+ </CalendarTableRow>
861
+ <CalendarTableRow>
862
+ <CalendarCell text="42" weekCell />
863
+ <CalendarCell text="17" weekend />
864
+ <CalendarCell text="18" />
865
+ <CalendarCell text="19" />
866
+ <CalendarCell text="20" />
867
+ <CalendarCell text="21" rangeStart selected />
868
+ <CalendarCell text="22" rangeMid />
869
+ <CalendarCell text="23" weekend rangeMid />
870
+ </CalendarTableRow>
871
+ <CalendarTableRow>
872
+ <CalendarCell text="43" weekCell />
873
+ <CalendarCell text="24" weekend rangeMid />
874
+ <CalendarCell text="25" rangeEnd focus selected />
875
+ <CalendarCell text="26" />
876
+ <CalendarCell text="27" />
877
+ <CalendarCell text="28" />
878
+ <CalendarCell text="29" />
879
+ <CalendarCell text="30" weekend />
880
+ </CalendarTableRow>
881
+ <CalendarTableRow>
882
+ <CalendarCell text="44" weekCell />
883
+ <CalendarCell text="31" weekend />
884
+ <CalendarCell empty />
885
+ <CalendarCell empty />
886
+ <CalendarCell empty />
887
+ <CalendarCell empty />
888
+ <CalendarCell empty />
889
+ <CalendarCell empty />
890
+ </CalendarTableRow>
891
+ </CalendarTable>
892
+ </Calendar>
893
+ </div>
894
+
895
+ <div>
896
+ <div className="preview-label">Calendar Infinite</div>
897
+ <CalendarInfiniteNormal />
898
+ </div>
899
+
900
+ <div>
901
+ <div className="preview-label">TimePicker / TimeSelector</div>
902
+ <TimePickerNormal />
903
+ <TimeSelectorAll className="k-pos-static" />
904
+ </div>
905
+ </div>
906
+
907
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
908
+ <div className="k-col-span-3">
909
+ <div className="preview-label">Grid</div>
910
+ <GridWithFilterRow></GridWithFilterRow>
911
+ </div>
912
+ <div>
913
+ <div className="preview-label">ColumnMenu</div>
914
+ <Popup>
915
+ <ColumnMenu>
916
+ <ColumnMenuItemWrapper>
917
+ <ColumnMenuItem text="Sort ascending" startIcon="sort-asc-small" />
918
+ <ColumnMenuItem text="Sort descending" startIcon="sort-desc-small" />
919
+ </ColumnMenuItemWrapper>
920
+ <ColumnMenuItemWrapper>
921
+ <ColumnMenuExpander
922
+ itemText="Columns"
923
+ itemStartIcon="columns"
924
+ expanded
925
+ itemContent={
926
+ <ColumnList aria-label="Columns">
927
+ <ColumnListItem label="Column 1" checked focus />
928
+ <ColumnListItem label="Column 2" checked />
929
+ <ColumnListItem label="Column 3" />
930
+ </ColumnList>
931
+ }
932
+ />
933
+ </ColumnMenuItemWrapper>
934
+ <ColumnMenuItemWrapper>
935
+ <ColumnMenuExpander itemText="Filter" itemStartIcon="filter" expanded itemContent={<FilterMenuNormal />} />
936
+ </ColumnMenuItemWrapper>
937
+ <ColumnMenuItemWrapper>
938
+ <ColumnMenuExpander itemText="Set column position" itemStartIcon="set-column-position" />
939
+ </ColumnMenuItemWrapper>
940
+ </ColumnMenu>
941
+ </Popup>
942
+ </div>
943
+ </div>
944
+
945
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
946
+ <div>
947
+ <div className="preview-label">ColorEditor</div>
948
+ <ColorEditorNormal />
949
+ </div>
950
+ <div>
951
+ <div className="preview-label">ColorEditor Palette</div>
952
+ <ColorEditorPaletteGroup />
953
+ </div>
954
+ <div>
955
+ <div className="preview-label">DropdownList</div>
956
+ <DropdownListPopup />
957
+ </div>
958
+ <div>
959
+ <div className="preview-label">Menu</div>
960
+ <Menu
961
+ children={
962
+ <>
963
+ <MenuItem first text="Item 1"></MenuItem>
964
+ <MenuItem showArrow arrowIconName="caret-alt-down" text="Item 2" active></MenuItem>
965
+ <MenuItem showArrow arrowIconName="caret-alt-down" text="Item 3"></MenuItem>
966
+ </>
967
+ }
968
+ popup={
969
+ <>
970
+ <Popup className="k-menu-popup">
971
+ <MenuList>
972
+ <MenuListItem first text="Disabled" disabled></MenuListItem>
973
+ <MenuListItem text="Normal"></MenuListItem>
974
+ <MenuListItem text="Hover" hover showArrow></MenuListItem>
975
+ <MenuSeparator></MenuSeparator>
976
+ <MenuListItem text="Active" active showArrow></MenuListItem>
977
+ <MenuListItem text="Focus" focus></MenuListItem>
978
+ <MenuListItem last text="Focus & Active" active focus></MenuListItem>
979
+ </MenuList>
980
+ </Popup>
981
+ </>
982
+ }
983
+ />
984
+ </div>
985
+ <div>
986
+ <div className="preview-label">ListView</div>
987
+ <ListViewNormal header footer>
988
+ <ListViewItem>
989
+ <div>Listview Item</div>
990
+ </ListViewItem>
991
+ <ListViewItem focus>
992
+ <div>Focus Item</div>
993
+ </ListViewItem>
994
+ <ListViewItem selected>
995
+ <div>Selected Item</div>
996
+ </ListViewItem>
997
+ <ListViewItem focus selected>
998
+ <div>Focus Selected Item</div>
999
+ </ListViewItem>
1000
+ </ListViewNormal>
1001
+ </div>
1002
+ <div>
1003
+ <div className="preview-label">PanelBar</div>
1004
+ <PanelBarNormal>
1005
+ <PanelBarItem header icon="gear" text="Root">
1006
+ <PanelBarContent>content</PanelBarContent>
1007
+ </PanelBarItem>
1008
+ <PanelBarItem hover header iconClass="k-image" text="Root hover">
1009
+ <PanelBarContent>content</PanelBarContent>
1010
+ </PanelBarItem>
1011
+ <PanelBarItem focus header iconClass="k-sprite" text="Root focus">
1012
+ <PanelBarContent>content</PanelBarContent>
1013
+ </PanelBarItem>
1014
+ <PanelBarItem hover focus header iconClass="k-sprite" text="Root hover&focus">
1015
+ <PanelBarContent>content</PanelBarContent>
1016
+ </PanelBarItem>
1017
+ <PanelBarItem disabled header text="Root disabled">
1018
+ <PanelBarContent>content</PanelBarContent>
1019
+ </PanelBarItem>
1020
+ <PanelBarItem selected header text="Root selected">
1021
+ <PanelBarContent>content</PanelBarContent>
1022
+ </PanelBarItem>
1023
+ <PanelBarItem selected hover header text="Root selected hover">
1024
+ <PanelBarContent>content</PanelBarContent>
1025
+ </PanelBarItem>
1026
+ <PanelBarItem selected focus header text="Root selected focus">
1027
+ <PanelBarContent>content</PanelBarContent>
1028
+ </PanelBarItem>
1029
+ <PanelBarItem selected hover focus header text="Root selected hover&focus">
1030
+ <PanelBarContent>content</PanelBarContent>
1031
+ </PanelBarItem>
1032
+ </PanelBarNormal>
1033
+ </div>
1034
+ <div>
1035
+ <div className="preview-label">ExpansionPanel</div>
1036
+ <ExpansionPanelNormal title="Collapsed panel" subtitle="Normal" />
1037
+ <ExpansionPanelNormal title="Collapsed panel" hover subtitle="Hover" />
1038
+ <ExpansionPanelNormal title="Collapsed panel" focus subtitle="Focus" />
1039
+ <ExpansionPanelNormal title="Collapsed panel" hover focus subtitle="Hover & Focus" />
1040
+ <ExpansionPanelExpanded title="Expanded panel" subtitle="Subtitle" />
1041
+ </div>
1042
+
1043
+ <div>
1044
+ <div className="preview-label">Treeview</div>
1045
+ <TreeviewNormal>
1046
+ <TreeviewItem text="Normal" />
1047
+ <TreeviewItem text="Hover" hover />
1048
+ <TreeviewItem text="Focus" focus />
1049
+ <TreeviewItem text="Hover + Focus" hover focus />
1050
+ <TreeviewItem text="Selected" selected />
1051
+ <TreeviewItem text="Selected + Hover" selected hover />
1052
+ <TreeviewItem text="Selected + Hover + Focus" selected hover focus />
1053
+ <TreeviewItem text="Selected focus" selected focus />
1054
+ <TreeviewItem text="Disabled" disabled />
1055
+ <TreeviewItem text="Disabled focus" disabled focus />
1056
+ <TreeviewItem leafClassName="k-treeview-load-more-button" text="Load more..." />
1057
+ </TreeviewNormal>
1058
+ </div>
1059
+ </div>
1060
+
1061
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
1062
+ <div className="k-d-grid k-grid-rows k-gap-10">
1063
+ <div>
1064
+ <div className="preview-label">Upload</div>
1065
+ <UploadNormal />
1066
+ </div>
1067
+ <div>
1068
+ <div className="preview-label">Dropzone</div>
1069
+ <DropzoneNormal />
1070
+ </div>
1071
+ <div>
1072
+ <div className="preview-label">Editor</div>
1073
+ <EditorNormal>
1074
+ <p className="ProseMirror">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus mollitia obcaecati dignissimos beatae ipsam voluptatem pariatur consectetur culpa asperiores veniam?</p>
1075
+ </EditorNormal>
1076
+ </div>
1077
+ </div>
1078
+ <div>
1079
+ <div className="preview-label">ChartWizard</div>
1080
+ <ChartWizardNormal />
1081
+ </div>
1082
+ </div>
820
1083
 
1084
+ <div>
1085
+ <div className="preview-label">FileManager</div>
1086
+ <FileManagerNormal />
1087
+ </div>
821
1088
 
822
- </>
1089
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
1090
+ <div>
1091
+ <div className="preview-label">Spreadsheet</div>
1092
+ <SpreadsheetNormal>
1093
+ <SpreadsheetHeader menuItems={[<MenuItem first text="File" active />, <MenuItem text="Home" />, <MenuItem text="Insert" />, <MenuItem text="Format" />, <MenuItem text="Formulas" />, <MenuItem text="Data" />, <MenuItem last text="View" />]} toolbarItems={[<Button icon="file-add" fillMode="flat"></Button>, <Button icon="folder-add" fillMode="flat"></Button>, <ToolbarSeparator></ToolbarSeparator>, <Button icon="download" fillMode="flat"></Button>, <ToolbarSeparator></ToolbarSeparator>, <Button icon="print" fillMode="flat"></Button>]} />
1094
+ <SpreadsheetActionBar />
1095
+ <SpreadsheetView selection={<div className="k-spreadsheet-selection k-single-selection" style={{ width: "101px", height: "31px", top: "125px", left: "30px" }} />} rowHeaderSelection={{ 3: "partial" }} activeCellIndex={8} />
1096
+ <SpreadsheetSheetsBar />
1097
+ </SpreadsheetNormal>
1098
+ </div>
1099
+
1100
+ <div className="k-d-grid k-grid-rows k-gap-10">
1101
+ <div>
1102
+ <div className="preview-label">Scheduler</div>
1103
+ <SchedulerWeek />
1104
+ </div>
1105
+ </div>
1106
+ </div>
1107
+
1108
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
1109
+ <div>
1110
+ <div className="preview-label">Timeline</div>
1111
+ <TimelineNormalAlternating />
1112
+ </div>
1113
+ <div className="k-d-grid k-grid-rows k-gap-10">
1114
+ <div>
1115
+ <div className="preview-label">Filter</div>
1116
+ <FilterNormal />
1117
+ </div>
1118
+ <div>
1119
+ <div className="preview-label">PivotGrid</div>
1120
+ <PivotGrid
1121
+ style={{ height: "550px", gridTemplateColumns: "150px auto", gridTemplateRows: "242px auto" }}
1122
+ columnHeaders={
1123
+ <PivotGridTable>
1124
+ <colgroup>
1125
+ <col width="120" />
1126
+ <col width="120" />
1127
+ <col width="120" />
1128
+ <col width="120" />
1129
+ <col width="120" />
1130
+ <col width="120" />
1131
+ <col width="120" />
1132
+ <col width="120" />
1133
+ <col width="120" />
1134
+ <col width="120" />
1135
+ </colgroup>
1136
+ <PivotGridTbody>
1137
+ <PivotGridRow columnTotal>
1138
+ <PivotGridCell as="th" colSpan={9} toggle="up" headerTitle="All Periods" headerRootCell />
1139
+ <PivotGridCell as="th" colSpan={1} rowSpan={4} headerTitle="All Periods" headerRootCell headerTotalCell />
1140
+ </PivotGridRow>
1141
+ <PivotGridRow>
1142
+ <PivotGridCell as="th" colSpan={6} toggle="up" headerTitle="CY 2010" />
1143
+ <PivotGridCell as="th" colSpan={1} rowSpan={3} toggle="down" headerTitle="CY 2011" />
1144
+ <PivotGridCell as="th" colSpan={1} rowSpan={3} toggle="down" headerTitle="CY 2012" />
1145
+ <PivotGridCell as="th" colSpan={1} rowSpan={3} toggle="down" headerTitle="CY 2013" />
1146
+ </PivotGridRow>
1147
+ <PivotGridRow>
1148
+ <PivotGridCell as="th" colSpan={1} toggle="up" headerTitle="H2 CY 2010" />
1149
+ <PivotGridCell as="th" colSpan={5} rowSpan={2} headerTitle="H2 CY 2010" />
1150
+ </PivotGridRow>
1151
+ <PivotGridRow>
1152
+ <PivotGridCell as="th" colSpan={1} toggle="down" headerTitle="Q4 CY 2010" />
1153
+ </PivotGridRow>
1154
+ <PivotGridRow columnTotal>
1155
+ <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell />
1156
+ <PivotGridCell as="th" colSpan={4} headerTitle="All Products" toggle="up" headerRootCell />
1157
+ <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" headerRootCell />
1158
+ <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell />
1159
+ <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell />
1160
+ <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell />
1161
+ <PivotGridCell as="th" colSpan={1} rowSpan={2} headerTitle="All Products" toggle="down" headerRootCell headerTotalCell />
1162
+ </PivotGridRow>
1163
+ <PivotGridRow>
1164
+ <PivotGridCell as="th" colSpan={1} headerTitle="Accessories" className="k-first" />
1165
+ <PivotGridCell as="th" colSpan={1} headerTitle="Bikes" />
1166
+ <PivotGridCell as="th" colSpan={1} headerTitle="Clothing" />
1167
+ <PivotGridCell as="th" colSpan={1} headerTitle="Components" />
1168
+ </PivotGridRow>
1169
+ </PivotGridTbody>
1170
+ </PivotGridTable>
1171
+ }
1172
+ rowHeaders={
1173
+ <PivotGridTable>
1174
+ <colgroup>
1175
+ <col />
1176
+ <col />
1177
+ </colgroup>
1178
+ <PivotGridTbody>
1179
+ <PivotGridRow>
1180
+ <PivotGridCell as="th" colSpan={1} rowSpan={9} toggle="up" headerTitle="All Geographies" headerRootCell rowTotalCell />
1181
+ <PivotGridCell as="th" colSpan={1} headerTitle="Austell" />
1182
+ </PivotGridRow>
1183
+ <PivotGridRow>
1184
+ <PivotGridCell as="th" colSpan={1} headerTitle="Biloxi" />
1185
+ </PivotGridRow>
1186
+ <PivotGridRow>
1187
+ <PivotGridCell as="th" colSpan={1} headerTitle="Braintree" />
1188
+ </PivotGridRow>
1189
+ <PivotGridRow>
1190
+ <PivotGridCell as="th" colSpan={1} headerTitle="Casper" />
1191
+ </PivotGridRow>
1192
+ <PivotGridRow>
1193
+ <PivotGridCell as="th" colSpan={1} headerTitle="Clearwater" />
1194
+ </PivotGridRow>
1195
+ <PivotGridRow>
1196
+ <PivotGridCell as="th" colSpan={1} headerTitle="Destin" />
1197
+ </PivotGridRow>
1198
+ <PivotGridRow>
1199
+ <PivotGridCell as="th" colSpan={1} headerTitle="Euclid" />
1200
+ </PivotGridRow>
1201
+ <PivotGridRow>
1202
+ <PivotGridCell as="th" colSpan={1} headerTitle="Everett" />
1203
+ </PivotGridRow>
1204
+ <PivotGridRow>
1205
+ <PivotGridCell as="th" colSpan={1} headerTitle="Fort Wayne" />
1206
+ </PivotGridRow>
1207
+ <PivotGridRow>
1208
+ <PivotGridCell as="th" colSpan={2} headerTitle="All Geographies" headerTotalCell />
1209
+ </PivotGridRow>
1210
+ </PivotGridTbody>
1211
+ </PivotGridTable>
1212
+ }
1213
+ >
1214
+ <PivotGridTable style={{ width: "1200px" }}>
1215
+ <colgroup>
1216
+ <col width="120" />
1217
+ <col width="120" />
1218
+ <col width="120" />
1219
+ <col width="120" />
1220
+ <col width="120" />
1221
+ <col width="120" />
1222
+ <col width="120" />
1223
+ <col width="120" />
1224
+ <col width="120" />
1225
+ <col width="120" />
1226
+ </colgroup>
1227
+ <PivotGridTbody>
1228
+ <PivotGridRow>
1229
+ <PivotGridCell as="td" colSpan={1} content="$514.14" />
1230
+ <PivotGridCell as="td" colSpan={1} content="$2.02" />
1231
+ <PivotGridCell as="td" colSpan={1} content="$508.12" />
1232
+ <PivotGridCell as="td" colSpan={1} content="$4.00" />
1233
+ <PivotGridCell as="td" colSpan={1} content="" />
1234
+ <PivotGridCell as="td" colSpan={1} content="$514.14" />
1235
+ <PivotGridCell as="td" colSpan={1} content="$3682.86" />
1236
+ <PivotGridCell as="td" colSpan={1} content="$2451.14" />
1237
+ <PivotGridCell as="td" colSpan={1} content="$2919.53" />
1238
+ <PivotGridCell as="td" colSpan={1} content="$10567.67" totalCell />
1239
+ </PivotGridRow>
1240
+ <PivotGridRow>
1241
+ <PivotGridCell as="td" colSpan={1} content="$344.69" />
1242
+ <PivotGridCell as="td" colSpan={1} content="$2.52" />
1243
+ <PivotGridCell as="td" colSpan={1} content="$298.45" />
1244
+ <PivotGridCell as="td" colSpan={1} content="$7.47" />
1245
+ <PivotGridCell as="td" colSpan={1} content="$36.25" />
1246
+ <PivotGridCell as="td" colSpan={1} content="$344.69" />
1247
+ <PivotGridCell as="td" colSpan={1} content="$1461.20" />
1248
+ <PivotGridCell as="td" colSpan={1} content="$105.70" />
1249
+ <PivotGridCell as="td" colSpan={1} content="" />
1250
+ <PivotGridCell as="td" colSpan={1} content="$1911.60" totalCell />
1251
+ </PivotGridRow>
1252
+ <PivotGridRow>
1253
+ <PivotGridCell as="td" colSpan={1} content="$96.89" />
1254
+ <PivotGridCell as="td" colSpan={1} content="" />
1255
+ <PivotGridCell as="td" colSpan={1} content="$96.17" />
1256
+ <PivotGridCell as="td" colSpan={1} content="$0.72" />
1257
+ <PivotGridCell as="td" colSpan={1} content="" />
1258
+ <PivotGridCell as="td" colSpan={1} content="$96.89" />
1259
+ <PivotGridCell as="td" colSpan={1} content="$719.27" />
1260
+ <PivotGridCell as="td" colSpan={1} content="" />
1261
+ <PivotGridCell as="td" colSpan={1} content="" />
1262
+ <PivotGridCell as="td" colSpan={1} content="$816.16" totalCell />
1263
+ </PivotGridRow>
1264
+ <PivotGridRow>
1265
+ <PivotGridCell as="td" colSpan={1} content="$1070.34" />
1266
+ <PivotGridCell as="td" colSpan={1} content="$3.03" />
1267
+ <PivotGridCell as="td" colSpan={1} content="$1064.62" />
1268
+ <PivotGridCell as="td" colSpan={1} content="$2.69" />
1269
+ <PivotGridCell as="td" colSpan={1} content="" />
1270
+ <PivotGridCell as="td" colSpan={1} content="$1070.34" />
1271
+ <PivotGridCell as="td" colSpan={1} content="$4671.39" />
1272
+ <PivotGridCell as="td" colSpan={1} content="$6621.86" />
1273
+ <PivotGridCell as="td" colSpan={1} content="$5156.51" />
1274
+ <PivotGridCell as="td" colSpan={1} content="$17520.10" totalCell />
1275
+ </PivotGridRow>
1276
+ <PivotGridRow>
1277
+ <PivotGridCell as="td" colSpan={1} content="$514.14" />
1278
+ <PivotGridCell as="td" colSpan={1} content="$2.02" />
1279
+ <PivotGridCell as="td" colSpan={1} content="$508.12" />
1280
+ <PivotGridCell as="td" colSpan={1} content="$4.00" />
1281
+ <PivotGridCell as="td" colSpan={1} content="" />
1282
+ <PivotGridCell as="td" colSpan={1} content="$514.14" />
1283
+ <PivotGridCell as="td" colSpan={1} content="$3682.86" />
1284
+ <PivotGridCell as="td" colSpan={1} content="$2451.14" />
1285
+ <PivotGridCell as="td" colSpan={1} content="$2919.53" />
1286
+ <PivotGridCell as="td" colSpan={1} content="$10567.67" totalCell />
1287
+ </PivotGridRow>
1288
+ <PivotGridRow>
1289
+ <PivotGridCell as="td" colSpan={1} content="$344.69" />
1290
+ <PivotGridCell as="td" colSpan={1} content="$2.52" />
1291
+ <PivotGridCell as="td" colSpan={1} content="$298.45" />
1292
+ <PivotGridCell as="td" colSpan={1} content="$7.47" />
1293
+ <PivotGridCell as="td" colSpan={1} content="$36.25" />
1294
+ <PivotGridCell as="td" colSpan={1} content="$344.69" />
1295
+ <PivotGridCell as="td" colSpan={1} content="$1461.20" />
1296
+ <PivotGridCell as="td" colSpan={1} content="$105.70" />
1297
+ <PivotGridCell as="td" colSpan={1} content="" />
1298
+ <PivotGridCell as="td" colSpan={1} content="$1911.60" totalCell />
1299
+ </PivotGridRow>
1300
+ <PivotGridRow>
1301
+ <PivotGridCell as="td" colSpan={1} content="$96.89" />
1302
+ <PivotGridCell as="td" colSpan={1} content="" />
1303
+ <PivotGridCell as="td" colSpan={1} content="$96.17" />
1304
+ <PivotGridCell as="td" colSpan={1} content="$0.72" />
1305
+ <PivotGridCell as="td" colSpan={1} content="" />
1306
+ <PivotGridCell as="td" colSpan={1} content="$96.89" />
1307
+ <PivotGridCell as="td" colSpan={1} content="$719.27" />
1308
+ <PivotGridCell as="td" colSpan={1} content="" />
1309
+ <PivotGridCell as="td" colSpan={1} content="" />
1310
+ <PivotGridCell as="td" colSpan={1} content="$816.16" totalCell />
1311
+ </PivotGridRow>
1312
+ <PivotGridRow>
1313
+ <PivotGridCell as="td" colSpan={1} content="$1070.34" />
1314
+ <PivotGridCell as="td" colSpan={1} content="$3.03" />
1315
+ <PivotGridCell as="td" colSpan={1} content="$1064.62" />
1316
+ <PivotGridCell as="td" colSpan={1} content="$2.69" />
1317
+ <PivotGridCell as="td" colSpan={1} content="" />
1318
+ <PivotGridCell as="td" colSpan={1} content="$1070.34" />
1319
+ <PivotGridCell as="td" colSpan={1} content="$4671.39" />
1320
+ <PivotGridCell as="td" colSpan={1} content="$6621.86" />
1321
+ <PivotGridCell as="td" colSpan={1} content="$5156.51" />
1322
+ <PivotGridCell as="td" colSpan={1} content="$17520.10" totalCell />
1323
+ </PivotGridRow>
1324
+ <PivotGridRow>
1325
+ <PivotGridCell as="td" colSpan={1} content="$96.89" />
1326
+ <PivotGridCell as="td" colSpan={1} content="" />
1327
+ <PivotGridCell as="td" colSpan={1} content="$96.17" />
1328
+ <PivotGridCell as="td" colSpan={1} content="$0.72" />
1329
+ <PivotGridCell as="td" colSpan={1} content="" />
1330
+ <PivotGridCell as="td" colSpan={1} content="$96.89" />
1331
+ <PivotGridCell as="td" colSpan={1} content="$719.27" />
1332
+ <PivotGridCell as="td" colSpan={1} content="" />
1333
+ <PivotGridCell as="td" colSpan={1} content="" />
1334
+ <PivotGridCell as="td" colSpan={1} content="$816.16" totalCell />
1335
+ </PivotGridRow>
1336
+ <PivotGridRow>
1337
+ <PivotGridCell as="td" colSpan={1} content="$9336.89" totalCell />
1338
+ <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
1339
+ <PivotGridCell as="td" colSpan={1} content="$9687.17" totalCell />
1340
+ <PivotGridCell as="td" colSpan={1} content="$7680.72" totalCell />
1341
+ <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
1342
+ <PivotGridCell as="td" colSpan={1} content="$9546.89" totalCell />
1343
+ <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
1344
+ <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
1345
+ <PivotGridCell as="td" colSpan={1} content="$4719.27" totalCell />
1346
+ <PivotGridCell as="td" colSpan={1} content="$88816.16" totalCell />
1347
+ </PivotGridRow>
1348
+ </PivotGridTbody>
1349
+ </PivotGridTable>
1350
+ </PivotGrid>
1351
+ </div>
1352
+ </div>
1353
+ </div>
1354
+
1355
+ {/* --- Additional Data Components --- */}
1356
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
1357
+ <div>
1358
+ <div className="preview-label">TreeList</div>
1359
+ <TreeListNormal />
1360
+ </div>
1361
+ <div>
1362
+ <div className="preview-label">PropertyGrid</div>
1363
+ <PropertyGridNormal />
1364
+ </div>
1365
+ </div>
1366
+
1367
+ <div>
1368
+ <div className="preview-label">Gantt</div>
1369
+ <GanttNormal />
1370
+ </div>
1371
+
1372
+ <div>
1373
+ <div className="preview-label">TaskBoard</div>
1374
+ <TaskBoardNormal>
1375
+ <>
1376
+ <TaskBoardColumn>
1377
+ <TaskBoardCard>
1378
+ <CardHeader className="k-hbox">
1379
+ <a className="k-card-title k-link">Card Title</a>
1380
+ <span className="k-spacer"></span>
1381
+ <span className="k-card-header-actions">
1382
+ <Button className="k-taskboard-card-menu-button" icon="more-vertical" fillMode="flat" aria-label="Card menu" title="Card menu" />
1383
+ </span>
1384
+ </CardHeader>
1385
+ <CardBody>
1386
+ <p>Card Body</p>
1387
+ </CardBody>
1388
+ </TaskBoardCard>
1389
+ <TaskBoardCard>
1390
+ <CardHeader className="k-hbox">
1391
+ <a className="k-card-title k-link">Card Title</a>
1392
+ <span className="k-spacer"></span>
1393
+ <span className="k-card-header-actions">
1394
+ <Button className="k-taskboard-card-menu-button" icon="more-vertical" fillMode="flat" aria-label="Card menu" title="Card menu" />
1395
+ </span>
1396
+ </CardHeader>
1397
+ <CardBody>
1398
+ <p>Card Body</p>
1399
+ </CardBody>
1400
+ </TaskBoardCard>
1401
+ <TaskBoardCard>
1402
+ <CardHeader className="k-hbox">
1403
+ <a className="k-card-title k-link">Card Title</a>
1404
+ <span className="k-spacer"></span>
1405
+ <span className="k-card-header-actions">
1406
+ <Button className="k-taskboard-card-menu-button" icon="more-vertical" fillMode="flat" aria-label="Card menu" title="Card menu" />
1407
+ </span>
1408
+ </CardHeader>
1409
+ <CardBody>
1410
+ <p>Card Body</p>
1411
+ </CardBody>
1412
+ </TaskBoardCard>
1413
+ </TaskBoardColumn>
1414
+ <TaskBoardColumn>
1415
+ <TaskBoardCard>
1416
+ <CardHeader className="k-hbox">
1417
+ <a className="k-card-title k-link">Card Title</a>
1418
+ <span className="k-spacer"></span>
1419
+ <span className="k-card-header-actions">
1420
+ <Button className="k-taskboard-card-menu-button" icon="more-vertical" fillMode="flat" aria-label="Card menu" title="Card menu" />
1421
+ </span>
1422
+ </CardHeader>
1423
+ <CardBody>
1424
+ <p>Card Body</p>
1425
+ </CardBody>
1426
+ </TaskBoardCard>
1427
+ <TaskBoardCard>
1428
+ <CardHeader className="k-hbox">
1429
+ <a className="k-card-title k-link">Card Title</a>
1430
+ <span className="k-spacer"></span>
1431
+ <span className="k-card-header-actions">
1432
+ <Button className="k-taskboard-card-menu-button" icon="more-vertical" fillMode="flat" aria-label="Card menu" title="Card menu" />
1433
+ </span>
1434
+ </CardHeader>
1435
+ <CardBody>
1436
+ <p>Card Body</p>
1437
+ </CardBody>
1438
+ </TaskBoardCard>
1439
+ </TaskBoardColumn>
1440
+ <TaskBoardColumn>
1441
+ <TaskBoardCard>
1442
+ <CardHeader className="k-hbox">
1443
+ <a className="k-card-title k-link">Card Title</a>
1444
+ <span className="k-spacer"></span>
1445
+ <span className="k-card-header-actions">
1446
+ <Button className="k-taskboard-card-menu-button" icon="more-vertical" fillMode="flat" aria-label="Card menu" title="Card menu" />
1447
+ </span>
1448
+ </CardHeader>
1449
+ <CardBody>
1450
+ <p>Card Body</p>
1451
+ </CardBody>
1452
+ </TaskBoardCard>
1453
+ </TaskBoardColumn>
1454
+ <TaskBoardColumn>
1455
+ <TaskBoardCard>
1456
+ <CardHeader className="k-hbox">
1457
+ <a className="k-card-title k-link">Card Title</a>
1458
+ <span className="k-spacer"></span>
1459
+ <span className="k-card-header-actions">
1460
+ <Button className="k-taskboard-card-menu-button" icon="more-vertical" fillMode="flat" aria-label="Card menu" title="Card menu" />
1461
+ </span>
1462
+ </CardHeader>
1463
+ <CardBody>
1464
+ <p>Card Body</p>
1465
+ </CardBody>
1466
+ </TaskBoardCard>
1467
+ </TaskBoardColumn>
1468
+ </>
1469
+ </TaskBoardNormal>
1470
+ </div>
1471
+
1472
+ <div>
1473
+ <div className="preview-label">OrgChart</div>
1474
+ <OrgchartNormal />
1475
+ </div>
1476
+
1477
+ {/* --- Layout Components --- */}
1478
+ <div>
1479
+ <div className="preview-label">TileLayout</div>
1480
+ <TileLayoutNormal />
1481
+ </div>
1482
+
1483
+ <div>
1484
+ <div className="preview-label">DockManager</div>
1485
+ <DockManagerNormal />
1486
+ </div>
1487
+
1488
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
1489
+ <div>
1490
+ <div className="preview-label">Form</div>
1491
+ <FormNormal />
1492
+ </div>
1493
+ <div>
1494
+ <div className="preview-label">Wizard</div>
1495
+ <WizardNormal />
1496
+ </div>
1497
+ </div>
1498
+
1499
+ <div className="k-d-grid k-grid-cols-4 k-gap-10">
1500
+ <div>
1501
+ <div className="preview-label">Popover</div>
1502
+ <AnimationContainer>
1503
+ <PopoverNormal />
1504
+ </AnimationContainer>
1505
+ </div>
1506
+
1507
+ <div>
1508
+ <div className="preview-label">Skeleton Text</div>
1509
+ <SkeletonNormal style={{ width: "100%", height: "16px" }} />
1510
+ <SkeletonNormal style={{ width: "80%", height: "16px", marginTop: "8px" }} />
1511
+ <SkeletonNormal style={{ width: "60%", height: "16px", marginTop: "8px" }} />
1512
+ </div>
1513
+ <div>
1514
+ <div className="preview-label">Skeleton Circle</div>
1515
+ <SkeletonCircle style={{ width: "60px", height: "60px" }} />
1516
+ </div>
1517
+ <div>
1518
+ <div className="preview-label">Skeleton Rectangle</div>
1519
+ <SkeletonRectangle style={{ width: "100%", height: "80px" }} />
1520
+ </div>
1521
+ </div>
1522
+
1523
+ {/* --- Media & Viewers --- */}
1524
+ <div className="k-d-grid k-grid-cols-3 k-gap-10">
1525
+ <div>
1526
+ <div className="preview-label">ImageEditor</div>
1527
+ <ImageEditorNormal />
1528
+ </div>
1529
+ <div>
1530
+ <div className="preview-label">ScrollView</div>
1531
+ <ScrollViewNormal />
1532
+ </div>
1533
+ <div>
1534
+ <div className="preview-label">MediaPlayer</div>
1535
+ <MediaPlayerNormal />
1536
+ </div>
1537
+ </div>
1538
+
1539
+ <div>
1540
+ <div className="preview-label">PDFViewer</div>
1541
+ <PDFViewerNormal />
1542
+ </div>
1543
+
1544
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
1545
+ <div>
1546
+ <div className="preview-label">Chart</div>
1547
+ <ChartDemo />
1548
+ </div>
1549
+ <div className="k-d-grid k-grid-cols-2 k-gap-10">
1550
+ <div>
1551
+ <div className="preview-label">Arc Gauge</div>
1552
+ <div className="k-gauge k-arcgauge">
1553
+ <div className="k-arcgauge-label" style={{ top: "125.125px", left: "85px" }}>
1554
+ 20
1555
+ </div>
1556
+ <div style={{ width: "200px", height: "200px" }}>
1557
+ <svg style={{ width: "100%", height: "100%", overflow: "hidden", left: "-0.5px", top: "0px" }}>
1558
+ <g>
1559
+ <path d="M0 0 L 200 0 200 200 0 200Z" stroke="none" fill="none"></path>
1560
+ <path d="M26.986 92.077 C 38.096 76.785 54.134 65.133 72.111 59.292 90.088 53.451 109.912 53.451 127.889 59.292 145.866 65.133 161.904 76.785 173.014 92.077 184.124 107.369 190.25 126.223 190.25 145.125" stroke="var(--kendo-chart-gauge-track)" strokeWidth="9.5" strokeLinecap="round" fill="none"></path>
1561
+ <path d="M9.75 145.125 C 9.75 126.223 15.876 107.369 26.986 92.077" stroke="var(--kendo-chart-gauge-pointer)" strokeWidth="9.5" strokeLinecap="round" fill="none"></path>
1562
+ </g>
1563
+ </svg>
1564
+ </div>
1565
+ </div>
1566
+ </div>
1567
+ <div>
1568
+ <div className="preview-label">Circular Gauge</div>
1569
+ <div className="k-gauge k-circulargauge">
1570
+ <div className="k-circulargauge-label" style={{ top: "90px", left: "85px" }}>
1571
+ 20
1572
+ </div>
1573
+ <div style={{ width: "200px", height: "200px" }}>
1574
+ <svg style={{ width: "100%", height: "100%", overflow: "hidden" }}>
1575
+ <g>
1576
+ <path d="M0 0 L 200 0 200 200 0 200Z" stroke="none" fill="none"></path>
1577
+ <g>
1578
+ <path d="M185.833 72.111 C 192.508 92.656 191.478 115.607 182.987 135.471 174.497 155.334 158.621 171.94 139.158 181.312 119.695 190.685 96.814 192.745 75.99 186.998 55.166 181.251 36.58 167.747 24.68 149.718 12.779 131.69 7.667 109.292 10.567 87.885 13.467 66.479 24.353 46.248 40.621 32.035 56.889 17.822 78.398 9.75 100 9.75" stroke="var(--kendo-chart-gauge-track)" strokeWidth="9.5" strokeLinecap="round" fill="none"></path>
1579
+ <path d="M100 9.75 C 118.902 9.75 137.756 15.876 153.048 26.986 168.34 38.096 179.992 54.134 185.833 72.111" stroke="var(--kendo-chart-gauge-pointer)" strokeWidth="9.5" strokeLinecap="round" fill="none"></path>
1580
+ </g>
1581
+ </g>
1582
+ </svg>
1583
+ </div>
1584
+ </div>
1585
+ </div>
1586
+ </div>
1587
+ </div>
1588
+ </div>
1589
+ </DrawerContent>
1590
+ </Drawer>
1591
+ </div>
1592
+ </>
823
1593
  );