npm - @progress/kendo-themes-html - Versions diffs - 6.2.1-dev.154 → 6.2.1-dev.170 - Mend

@progress/kendo-themes-html 6.2.1-dev.154 → 6.2.1-dev.170

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 (133) hide show

package/src/grid/tests/grid-selection-aggregates.tsx ADDED Viewed

@@ -0,0 +1,192 @@
+import ReactDOM from 'react-dom/client';
+import { Pager } from '../../pager';
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+root.render(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span className="col-2">Grid with selection aggregates container</span>
+            <section className="col-2">
+                <div className="k-grid k-grid-md k-grid-no-scrollbar">
+                    <div className="k-grid-header">
+                        <div className="k-grid-header-wrap">
+                            <table className="k-table k-table-md k-grid-header-table">
+                                <colgroup>
+                                    <col style={{ width: "100px" }} />
+                                    <col />
+                                </colgroup>
+                                <thead className="k-table-thead">
+                                    <tr className="k-table-row">
+                                        <th className="k-table-th k-header">
+                                            <span className="k-cell-inner">
+                                                <span className="k-link">
+                                                    <span className="k-column-title">100px</span>
+                                                </span>
+                                            </span>
+                                        </th>
+                                        <th className="k-table-th k-header">
+                                            <span className="k-cell-inner">
+                                                <span className="k-link">
+                                                    <span className="k-column-title">no width</span>
+                                                </span>
+                                            </span>
+                                        </th>
+                                    </tr>
+                                </thead>
+                            </table>
+                        </div>
+                    </div>
+                    <div className="k-grid-content">
+                        <table className="k-table k-table-md k-grid-table">
+                            <colgroup>
+                                <col style={{ width: "100px" }} />
+                                <col />
+                            </colgroup>
+                            <tbody className="k-table-tbody">
+                                <tr className="k-table-row">
+                                    <td className="k-table-td">1</td>
+                                    <td className="k-table-td">Row</td>
+                                </tr>
+                                <tr className="k-table-row k-table-alt-row k-alt">
+                                    <td className="k-table-td k-selected">2</td>
+                                    <td className="k-table-td k-selected">Alt row</td>
+                                </tr>
+                                <tr className="k-table-row">
+                                    <td className="k-table-td k-selected">3</td>
+                                    <td className="k-table-td">
+                                        This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment.
+                                    </td>
+                                </tr>
+                                <tr className="k-table-row k-table-alt-row k-alt">
+                                    <td className="k-table-td k-selected">4</td>
+                                    <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                </tr>
+                                <tr className="k-table-row">
+                                    <td className="k-table-td">5</td>
+                                    <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div className="k-selection-aggregates k-grid-selection-aggregates">
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Sum: </span>
+                            <span className="k-selection-aggregates-item-value">9.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Avg: </span>
+                            <span className="k-selection-aggregates-item-value">3.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Min: </span>
+                            <span className="k-selection-aggregates-item-value">2.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Max: </span>
+                            <span className="k-selection-aggregates-item-value">4.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Count: </span>
+                            <span className="k-selection-aggregates-item-value">4</span>
+                        </div>
+                    </div>
+                    <Pager className="k-grid-pager" />
+                </div>
+            </section>
+            <span className="col-2">Grid with selection aggregates container (RTL)</span>
+            <section className="col-2 k-rtl">
+                <div className="k-grid k-grid-md k-grid-no-scrollbar">
+                    <div className="k-grid-header">
+                        <div className="k-grid-header-wrap">
+                            <table className="k-table k-table-md k-grid-header-table">
+                                <colgroup>
+                                    <col style={{ width: "100px" }} />
+                                    <col />
+                                </colgroup>
+                                <thead className="k-table-thead">
+                                    <tr className="k-table-row">
+                                        <th className="k-table-th k-header">
+                                            <span className="k-cell-inner">
+                                                <span className="k-link">
+                                                    <span className="k-column-title">100px</span>
+                                                </span>
+                                            </span>
+                                        </th>
+                                        <th className="k-table-th k-header">
+                                            <span className="k-cell-inner">
+                                                <span className="k-link">
+                                                    <span className="k-column-title">no width</span>
+                                                </span>
+                                            </span>
+                                        </th>
+                                    </tr>
+                                </thead>
+                            </table>
+                        </div>
+                    </div>
+                    <div className="k-grid-content">
+                        <table className="k-table k-table-md k-grid-table">
+                            <colgroup>
+                                <col style={{ width: "100px" }} />
+                                <col />
+                            </colgroup>
+                            <tbody className="k-table-tbody">
+                                <tr className="k-table-row">
+                                    <td className="k-table-td">1</td>
+                                    <td className="k-table-td">Row</td>
+                                </tr>
+                                <tr className="k-table-row k-table-alt-row k-alt">
+                                    <td className="k-table-td k-selected">2</td>
+                                    <td className="k-table-td k-selected">Alt row</td>
+                                </tr>
+                                <tr className="k-table-row">
+                                    <td className="k-table-td k-selected">3</td>
+                                    <td className="k-table-td">
+                                        This text continues to the end of the grid to test overflow behavior of row contents, as well as line height and vertical alignment.
+                                    </td>
+                                </tr>
+                                <tr className="k-table-row k-table-alt-row k-alt">
+                                    <td className="k-table-td k-selected">4</td>
+                                    <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                </tr>
+                                <tr className="k-table-row">
+                                    <td className="k-table-td">5</td>
+                                    <td className="k-table-td"><span className="k-placeholder-line"></span></td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div className="k-selection-aggregates k-grid-selection-aggregates">
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Sum: </span>
+                            <span className="k-selection-aggregates-item-value">9.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Avg: </span>
+                            <span className="k-selection-aggregates-item-value">3.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Min: </span>
+                            <span className="k-selection-aggregates-item-value">2.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Max: </span>
+                            <span className="k-selection-aggregates-item-value">4.00</span>
+                        </div>
+                        <div className="k-selection-aggregates-item">
+                            <span className="k-selection-aggregates-item-text">Count: </span>
+                            <span className="k-selection-aggregates-item-value">4</span>
+                        </div>
+                    </div>
+                    <Pager className="k-grid-pager" />
+                </div>
+            </section>
+        </div>
+    </>
+);

package/src/imageeditor/tests/imageeditor-crop-pane.tsx CHANGED Viewed

@@ -61,27 +61,42 @@ root.render(
                     {/* Crop Pane */}
                     <div className="k-imageeditor-action-pane">
-                        <Form
-                            tag="div"
-                            className="k-imageeditor-pane-form"
-                            layout="grid" cols={2} legend="Crop Image"
-                            gapX={2}
-                            formButtons={
-                                <>
-                                    <Button>Cancel</Button>
-                                    <Button themeColor="primary">Confirm</Button>
-                                </>
-                            }>
-                            <FormField className="k-col-span-2" label="Aspect Ratio:" editor={ <DropdownList value="Original ratio" /> } />
-                            <FormField className="k-col-span-2" label="Orientation:" editor={
-                                <ButtonGroup>
-                                    <Button selected>Portrait</Button>
-                                    <Button>Landscape</Button>
-                                </ButtonGroup> }
+                        <Form tag="div" className="k-imageeditor-pane-form" layout="grid" legend="Crop Image" cols={2} gapX={2} formButtons={
+                            <>
+                                <Button themeColor="primary">Confirm</Button>
+                                <Button>Cancel</Button>
+                            </>
+                        }>
+                            <FormField
+                                className="k-col-span-2"
+                                label="Aspect Ratio:"
+                                editor={ <DropdownList value="Original ratio" /> }
+                            />
+                            <FormField
+                                className="k-col-span-2"
+                                label="Orientation:"
+                                editor={
+                                    <ButtonGroup>
+                                        <Button selected>Portrait</Button>
+                                        <Button>Landscape</Button>
+                                    </ButtonGroup>
+                                }
+                            />
+                            <FormField
+                                className="k-col-span-1"
+                                label="Width:"
+                                editor={ <NumericTextbox showClearButton={false} value="61" /> }
+                            />
+                            <FormField
+                                className="k-col-span-1"
+                                label="Height:"
+                                editor={ <NumericTextbox showClearButton={false} value="68" /> }
+                            />
+                            <FormField
+                                className="k-col-span-2"
+                                label="Lock aspect ratio:"
+                                editor={ <Checkbox /> }
                             />
-                            <FormField className="k-col-span-1" label="Width:" editor={ <NumericTextbox showClearButton={false} value="61" /> }/>
-                            <FormField className="k-col-span-1" label="Height:" editor={ <NumericTextbox showClearButton={false} value="68" /> } />
-                            <FormField className="k-col-span-2" label="Lock aspect ratio:" editor={ <Checkbox /> } />
                         </Form>
                     </div>
                 </div>

package/src/imageeditor/tests/imageeditor-resize-pane.tsx CHANGED Viewed

@@ -46,22 +46,37 @@ root.render(
                     </div>
                     <div className="k-imageeditor-action-pane">
-                        <Form
-                            tag="div"
-                            className="k-imageeditor-pane-form"
-                            layout="grid" cols={2} gapX={2}
-                            legend="Resize image"
-                            formButtons={
-                                <>
-                                    <Button>Cancel</Button>
-                                    <Button themeColor="primary" >Confirm</Button>
-                                </>
-                            } >
-                            <FormField className="k-col-span-1" label="Width:" editor={ <NumericTextbox showClearButton={false} value="61" /> } />
-                            <FormField className="k-col-span-1" label="&nbsp;" editor={ <DropdownList value="Pixels" /> } />
-                            <FormField className="k-col-span-1" label="Height:" editor={ <NumericTextbox showClearButton={false} value="68" /> } />
-                            <FormField className="k-col-span-1" label="&nbsp;" editor={ <DropdownList value="Pixels" /> } />
-                            <FormField className="k-col-span-2" label="Lock aspect ratio:" editor={ <Checkbox /> } />
+                        <Form tag="div" className="k-imageeditor-pane-form" layout="grid" legend="Resize Image" cols={2} gapX={2} formButtons={
+                            <>
+                                <Button themeColor="primary">Confirm</Button>
+                                <Button>Cancel</Button>
+                            </>
+                        }>
+                            <FormField
+                                className="k-col-span-1"
+                                label="Width:"
+                                editor={ <NumericTextbox showClearButton={false} value="61" /> }
+                            />
+                            <FormField
+                                className="k-col-span-1"
+                                label="&nbsp;"
+                                editor={ <DropdownList value="Pixels" /> }
+                            />
+                            <FormField
+                                className="k-col-span-1"
+                                label="Height:"
+                                editor={ <NumericTextbox showClearButton={false} value="68" /> }
+                            />
+                            <FormField
+                                className="k-col-span-1"
+                                label="&nbsp;"
+                                editor={ <DropdownList value="Pixels" /> }
+                            />
+                            <FormField
+                                className="k-col-span-2"
+                                label="Lock aspect ratio:"
+                                editor={ <Checkbox /> }
+                            />
                         </Form>
                     </div>

package/src/scheduler/tests/scheduler-edit-dialog.tsx CHANGED Viewed

@@ -2,14 +2,16 @@ import ReactDOM from 'react-dom/client';
 import { Window } from '../../window';
 import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
-import { DatePicker } from '../../datepicker';
-import { NumericTextbox } from '../../numerictextbox';
-import { RadioButton } from '../../radio';
 import { Textarea } from '../../textarea';
 import { Textbox } from '../../textbox';
-import { TimePicker } from '../../timepicker';
+import { DateTimePicker } from '../../datetimepicker';
+import { Combobox } from '../../combobox';
+import { MultiSelect } from '../../multiselect';
 import { Form, FormField } from '../../form';
 import { ButtonGroup } from '../../button-group';
+import { RadioButton } from '../../radio';
+import { NumericTextbox } from '../../numerictextbox';
+import { DatePicker } from '../../datepicker';
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -20,7 +22,7 @@ const style = `
         width: 700px;
     }
     .k-window {
-        width: 100%;
+        min-width: 400px;
         position: relative;
     }
 `;
@@ -31,50 +33,46 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <section>
-                <Window title="Event" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
-                    <Form tag="div" orientation="horizontal" className="k-scheduler-edit-form">
-                        <FormField label="Title" editor={ <Textbox placeholder="Title..." /> } />
-                        <FormField label="Start" editor={
-                            <div className="k-scheduler-datetime-picker">
-                                <DatePicker />
-                                <TimePicker />
-                            </div>
-                        } />
-                        <FormField label="End" editor={
-                            <div className="k-scheduler-datetime-picker">
-                                <DatePicker />
-                                <TimePicker />
-                            </div>
-                        } />
+                <Window title="Edit event" actions={[ 'minimize', 'maximize', 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary" icon="save">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button fillMode="flat" themeColor="primary" icon="delete">Delete</Button>
+                    </>
+                }>
+                    <Form tag="div" className="k-scheduler-edit-form" orientation="vertical">
+                        <FormField className="k-form-field-error" label="Title" error="Error" editor={ <Textbox invalid value="Invalid" /> }/>
+                        <FormField label="Start" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
+                        <FormField label="End" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
                         <FormField label=" " editor={
                             <>
-                                <Checkbox id="k-is-allday-chkbox" />
-                                <label htmlFor="k-is-allday-chkbox" className="k-checkbox-label">All Day Event</label>
+                                <Checkbox />
+                                <label className="k-checkbox-label">All Day Event</label>
                             </>
-                        } />
+                        }/>
                         <FormField label=" " editor={
                             <>
-                                <Checkbox id="k-set-timezone" />
-                                <label htmlFor="k-set-timezone" className="k-checkbox-label">Specify Time Zone</label>
+                                <Checkbox />
+                                <label className="k-checkbox-label">Specify Time Zone</label>
                             </>
-                        } />
+                        }/>
                         <div className="k-recurrence-editor">
                             <FormField label="Repeat" editor={
-                                <ButtonGroup className="k-scheduler-recurrence-repeat k-button-group-stretched" >
+                                <ButtonGroup stretched className="k-scheduler-recurrence-repeat">
                                     <Button>Never</Button>
-                                    <Button selected>Daily</Button>
+                                    <Button selected >Daily</Button>
                                     <Button>Weekly</Button>
                                     <Button>Monthly</Button>
                                     <Button>Yearly</Button>
                                 </ButtonGroup>
-                            } />
+                            }/>
                             <div className="k-recur-view">
                                 <div className="k-scheduler-recurrence-interval-editor">
                                     <FormField label="Repeat every" editor={
                                         <>
                                             <NumericTextbox className="k-recur-interval" />
-                                            <span>day(s)</span>
+                                            <span> day(s)</span>
                                         </>
                                     } />
                                 </div>
@@ -101,12 +99,12 @@ root.render(
                                 </div>
                             </div>
                         </div>
-                        <FormField label="Description" editor={ <Textarea /> } />
+                        <FormField label="Description" editor={ <Textarea /> }/>
+                        <FormField label="Owner" editor={ <Combobox placeholder="Select owner" /> }/>
+                        <FormField label="Atendee" optional editor={ <MultiSelect placeholder="Invite people" /> }/>
                     </Form>
                 </Window>
             </section>
         </div>
     </>
 );

package/src/scheduler/tests/scheduler-editing-weekly.tsx ADDED Viewed

@@ -0,0 +1,137 @@
+import ReactDOM from 'react-dom/client';
+import { Window } from '../../window';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { Textarea } from '../../textarea';
+import { Textbox } from '../../textbox';
+import { DateTimePicker } from '../../datetimepicker';
+import { Combobox } from '../../combobox';
+import { MultiSelect } from '../../multiselect';
+import { Form, FormField } from '../../form';
+import { ButtonGroup } from '../../button-group';
+import { NumericTextbox } from '../../numerictextbox';
+import { RadioButton } from '../../radio';
+import { DatePicker } from '../../datepicker';
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+const style = `
+    #test-area {
+        width: 700px;
+    }
+    .k-window {
+        min-width: 400px;
+        position: relative;
+    }
+`;
+root.render(
+    <>
+        <style>{style}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <section>
+                <Window title="Edit event" actions={[ 'minimize', 'maximize', 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary" icon="save">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button fillMode="flat" themeColor="primary" icon="delete">Delete</Button>
+                    </>
+                }>
+                    <Form tag="div" className="k-scheduler-edit-form" orientation="vertical">
+                        <FormField className="k-form-field-error" label="Title" error="Error" editor={ <Textbox invalid value="Invalid" /> }/>
+                        <FormField label="Start" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
+                        <FormField label=" " editor={
+                            <>
+                                <Checkbox checked />
+                                <label className="k-checkbox-label">Specify Time Zone</label>
+                            </>
+                        } />
+                        <FormField label="Start Time Zone" editor={
+                            <Combobox placeholder="Eastern European Summer Time (Sofia-Bulgaria)" />
+                        } />
+                        <FormField label="End" editor={ <DateTimePicker placeholder="dd/MM/yyyy hh:mm AM" /> }/>
+                        <FormField label=" " editor={
+                            <>
+                                <Checkbox checked />
+                                <label className="k-checkbox-label">End in different Time Zone</label>
+                            </>
+                        } />
+                        <FormField label="End Time Zone" editor={
+                            <Combobox placeholder="Select Time Zone, Country, City" />
+                        } />
+                        <FormField label=" " editor={
+                            <>
+                                <Checkbox />
+                                <label className="k-checkbox-label">All Day Event</label>
+                            </>
+                        }/>
+                        <FormField label="Repeat" editor={
+                            <div className="k-recurrence-editor">
+                                <ButtonGroup stretched className="k-scheduler-recurrence-repeat">
+                                    <Button>Never</Button>
+                                    <Button>Daily</Button>
+                                    <Button selected >Weekly</Button>
+                                    <Button>Monthly</Button>
+                                    <Button>Yearly</Button>
+                                </ButtonGroup>
+                                <div className="k-recur-view">
+                                    <div className="k-scheduler-recurrence-interval-editor">
+                                        <FormField label="Repeat every:" editor={
+                                            <>
+                                                <NumericTextbox className="k-recur-interval" />
+                                                <span> weeks(s)</span>
+                                            </>
+                                        }/>
+                                        <FormField label="Repeat on:" editor={
+                                            <ButtonGroup stretched>
+                                                <Button>Sun</Button>
+                                                <Button selected >Mon</Button>
+                                                <Button>Tue</Button>
+                                                <Button>Wed</Button>
+                                                <Button>Thu</Button>
+                                                <Button>Fri</Button>
+                                                <Button>Sat</Button>
+                                            </ButtonGroup>
+                                        } />
+                                    </div>
+                                    <div className="k-scheduler-recurrence-end-rule-editor">
+                                        <FormField label="End" editor={
+                                            <ul className="k-radio-list">
+                                                <li className="k-radio-list-item">
+                                                    <RadioButton id="k-endrule-never" />
+                                                    <label className="k-radio-label" htmlFor="k-endrule-never">Never</label>
+                                                </li>
+                                                <li className="k-radio-list-item">
+                                                    <RadioButton id="k-endrule-count" />
+                                                    <label className="k-radio-label" htmlFor="k-endrule-count">After</label>
+                                                    <NumericTextbox className="k-recur-count" />
+                                                    <span>occurrence(s)</span>
+                                                </li>
+                                                <li className="k-radio-list-item">
+                                                    <RadioButton id="k-endrule-until" />
+                                                    <label className="k-radio-label" htmlFor="k-endrule-until">On</label>
+                                                    <DatePicker className="k-recur-until" disabled />
+                                                </li>
+                                            </ul>
+                                        } />
+                                    </div>
+                                </div>
+                            </div>
+                        }/>
+                        <FormField label="Description" editor={ <Textarea /> }/>
+                        <FormField label="Owner" editor={ <Combobox placeholder="Select owner" /> }/>
+                        <FormField label="Atendee" optional editor={ <MultiSelect placeholder="Invite people" /> }/>
+                    </Form>
+                </Window>
+            </section>
+        </div>
+    </>
+);

package/src/spreadsheet/tests/spreadsheet-dialog.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom/client';
 import { Window } from '../../window';
 import { Textarea } from '../../textarea';
+import { Button } from '../../button';
 import { Form, FormField } from '../../form';
 const root = ReactDOM.createRoot(
@@ -12,7 +13,7 @@ const style = `
         width: 500px;
     }
     .k-window {
-        width: 100%;
+        min-width: 400px;
         position: relative;
     }
 `;
@@ -24,15 +25,25 @@ root.render(
             <section>
-                <Window title="Insert comment" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+                <Window title="Insert comment" actions={[ 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Update</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
                     <Form tag="div" orientation="horizontal">
-                        <FormField label="Comment:" editor={ <Textarea /> } />
+                        <FormField label="Comment:" editor={ <Textarea /> }/>
                     </Form>
                 </Window>
             </section>
             <section>
-                <Window title="Insert image" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
+                <Window title="Insert image" actions={[ 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary">Update</Button>
+                        <Button>Cancel</Button>
+                    </>
+                }>
                     <div className="k-spreadsheet-insert-image-dialog">
                         <label>
                             <div>Drag an image here, or click to select</div>

package/src/timepicker/timepicker.spec.tsx CHANGED Viewed

@@ -129,8 +129,8 @@ export const TimePicker = (
                         </TimeSelectorHeader>
                     )}/>
                     <ActionButtons alignment="stretched" className="k-time-footer">
-                        <Button className="k-time-cancel">Cancel</Button>
                         <Button themeColor="primary" className="k-time-accept">Set</Button>
+                        <Button className="k-time-cancel">Cancel</Button>
                     </ActionButtons>
                 </Popup>
             }