@progress/kendo-themes-html 14.4.1-dev.0 → 14.4.1-dev.1

package/src/scheduler/tests/scheduler-week-view.tsx

@@ -1,7 +1,14 @@
 import { SchedulerWeek, SchedulerFlexWeek } from '../';
 
+const style = `
+    #test-area {
+        max-width: 1080px;
+    }
+`;
+
 export default () => (
     <>
+        <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <span>Scheduler Table Layout</span>
             <SchedulerWeek />

package/src/scheduler/tests/scheduler-year-view.tsx

@@ -1,6 +1,9 @@
 import { SchedulerFlexYear } from '../../scheduler';
 
 const styles = `
+    #test-area {
+        max-width: 1080px;
+    }
     .k-scheduler-body {
         height: 500px;
         overflow: auto;

package/src/timepicker/timepicker.spec.tsx

@@ -46,6 +46,7 @@ export type KendoTimePickerProps = KendoTimePickerOptions & {
     suffix?: React.JSX.Element;
     value?: string;
     placeholder?: string;
+    showClearButton?: boolean;
     opened?: boolean;
     adaptive?: boolean;
     adaptiveSettings?: KendoActionSheetProps;
@@ -56,6 +57,7 @@ export type KendoTimePickerProps = KendoTimePickerOptions & {
 export type KendoTimePickerState = { [K in (typeof states)[number]]?: boolean };
 
 const defaultOptions = {
+    showClearButton: true
 };
 
 /**
@@ -91,6 +93,7 @@ export const TimePicker: KendoComponent<KendoTimePickerProps & KendoTimePickerSt
         suffix,
         value,
         placeholder,
+        showClearButton = defaultOptions.showClearButton,
         hover,
         focus,
         valid,
@@ -144,11 +147,11 @@ export const TimePicker: KendoComponent<KendoTimePickerProps & KendoTimePickerSt
                 <InputLoadingIcon
                     loading={loading}
                     disabled={disabled} />
-                <InputClearValue
+                { showClearButton && <InputClearValue
                     loading={loading}
                     disabled={disabled}
                     readonly={readonly}
-                    value={value} />
+                    value={value} />}
                 <InputSuffix>{suffix}</InputSuffix>
                 <Button
                     className="k-input-button"

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

@@ -1,103 +0,0 @@
-import { WindowNormal } 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 { FormNormal, FormField } from '../../form';
-import { ButtonGroup } from '../../button-group';
-import { RadioButtonWithLabelAfter, RadioGroupNormal, RadioItem } from '../../radio';
-import { NumericTextbox } from '../../numerictextbox';
-import { DatePicker } from '../../datepicker';
-
-
-const style = `
-    #test-area {
-        width: 700px;
-    }
-    .k-window {
-        min-width: 400px;
-        position: relative;
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{style}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-1">
-
-            <section>
-                <WindowNormal title="Edit event" 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="trash">Delete</Button>
-                    </>
-                }>
-                    <FormNormal formButtons={null} tag="div" className="k-scheduler-edit-form">
-                        <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 editor={
-                            <>
-                                <Checkbox />
-                                <label className="k-checkbox-label">All Day Event</label>
-                            </>
-                        }/>
-                        <FormField editor={
-                            <>
-                                <Checkbox />
-                                <label className="k-checkbox-label">Specify Time Zone</label>
-                            </>
-                        }/>
-                        <div className="k-recurrence-editor">
-                            <FormField label="Repeat" editor={
-                                <ButtonGroup stretched className="k-scheduler-recurrence-repeat">
-                                    <Button className="k-group-start">Never</Button>
-                                    <Button selected >Daily</Button>
-                                    <Button>Weekly</Button>
-                                    <Button>Monthly</Button>
-                                    <Button className="k-group-end">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>
-                                        </>
-                                    } />
-                                </div>
-                                <div className="k-scheduler-recurrence-end-rule-editor">
-                                    <FormField label="End" editor={
-                                        <RadioGroupNormal>
-                                            <RadioItem>
-                                                <RadioButtonWithLabelAfter id="k-endrule-never">Never</RadioButtonWithLabelAfter>
-                                            </RadioItem>
-                                            <RadioItem>
-                                                <RadioButtonWithLabelAfter id="k-endrule-count" >After</RadioButtonWithLabelAfter>
-                                                <NumericTextbox className="k-recur-count" />
-                                                <span>occurrence(s)</span>
-                                            </RadioItem>
-                                            <RadioItem>
-                                                <RadioButtonWithLabelAfter id="k-endrule-until" >On</RadioButtonWithLabelAfter>
-                                                <DatePicker className="k-recur-until" disabled />
-                                            </RadioItem>
-                                        </RadioGroupNormal>
-                                    } />
-                                </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" /> }/>
-                    </FormNormal>
-                </WindowNormal>
-            </section>
-        </div>
-    </>
-);

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

@@ -1,128 +0,0 @@
-import { WindowNormal } 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 { FormNormal, FormField } from '../../form';
-import { ButtonGroup } from '../../button-group';
-import { NumericTextbox } from '../../numerictextbox';
-import { RadioButtonWithLabelAfter, RadioGroupNormal, RadioItem } from '../../radio';
-import { DatePicker } from '../../datepicker';
-
-const style = `
-    #test-area {
-        width: 700px;
-    }
-    .k-window {
-        min-width: 400px;
-        position: relative;
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{style}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-2">
-
-            <section>
-
-                <WindowNormal title="Edit event" 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="trash">Delete</Button>
-                    </>
-                }>
-                    <FormNormal formButtons={null} tag="div" className="k-scheduler-edit-form">
-                        <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 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 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 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 className="k-group-start">Never</Button>
-                                    <Button>Daily</Button>
-                                    <Button selected >Weekly</Button>
-                                    <Button>Monthly</Button>
-                                    <Button className="k-group-end">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 className="k-group-start">Sun</Button>
-                                                <Button selected >Mon</Button>
-                                                <Button>Tue</Button>
-                                                <Button>Wed</Button>
-                                                <Button>Thu</Button>
-                                                <Button>Fri</Button>
-                                                <Button className="k-group-end">Sat</Button>
-                                            </ButtonGroup>
-                                        } />
-                                    </div>
-                                    <div className="k-scheduler-recurrence-end-rule-editor">
-                                        <FormField label="End" editor={
-                                            <RadioGroupNormal>
-                                                <RadioItem>
-                                                    <RadioButtonWithLabelAfter id="k-endrule-never">Never</RadioButtonWithLabelAfter>
-                                                </RadioItem>
-                                                <RadioItem>
-                                                    <RadioButtonWithLabelAfter id="k-endrule-count" >After</RadioButtonWithLabelAfter>
-                                                    <NumericTextbox className="k-recur-count" />
-                                                    <span>occurrence(s)</span>
-                                                </RadioItem>
-                                                <RadioItem>
-                                                    <RadioButtonWithLabelAfter id="k-endrule-until" >On</RadioButtonWithLabelAfter>
-                                                    <DatePicker className="k-recur-until" disabled />
-                                                </RadioItem>
-                                            </RadioGroupNormal>
-                                        } />
-                                    </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" /> }/>
-                    </FormNormal>
-                </WindowNormal>
-
-            </section>
-
-        </div>
-    </>
-);

package/src/scheduler/tests/scheduler-tooltip.tsx

@@ -1,82 +0,0 @@
-import { AnimationContainer } from '../../animation-container';
-import { NoData } from '../../nodata';
-import { TooltipNormal } from '../../tooltip';
-
-const style = `
-    /* rest position and visibility */
-    .k-animation-container,
-    .k-popup,
-    .k-tooltip {
-        position: relative;
-        overflow: visible;
-    }
-
-    /* reset display and align */
-    .k-animation-container {
-        display: inline-flex;
-        vertical-align: top;
-    }
-
-    .k-callout-w {
-        top: 45px;
-    }
-`;
-
-export default () =>(
-    <>
-        <style>{style}</style>
-        <div id="test-area" className="k-d-grid k-grid-cols-2">
-
-            <span>Events List</span>
-            <span>No Data</span>
-
-            <section>
-                <AnimationContainer style={{ width: "220px" }} >
-                    <TooltipNormal className="k-scheduler-tooltip" style={{ width: "220px" }}
-                        callout="left"
-                        content={<>
-                            <div className="k-tooltip-title k-text-center">
-                                <div className="k-month">Jan</div>
-                                <div className="k-link k-day !k-text-primary">02</div>
-                            </div>
-                            <div className="k-tooltip-events-container">
-                                <div className="k-tooltip-events">
-                                    <div className="k-tooltip-event k-event" >
-                                        <div className="k-event-title k-text-ellipsis">Dance Practice</div>
-                                        <span className="k-spacer"></span>
-                                        <span className="k-event-time">6:30 PM</span>
-                                    </div>
-                                    <div className="k-tooltip-event k-event" style={{ backgroundColor: "rgb(17, 134, 64)", borderColor: "rgb(17, 134, 64)" }} >
-                                        <div className="k-event-title k-text-ellipsis">Helpdesk weekly meeting</div>
-                                        <span className="k-spacer"></span>
-                                        <span className="k-event-time">12:30 PM</span>
-                                    </div>
-                                    <div className="k-tooltip-event k-event">
-                                        <div className="k-event-title k-text-ellipsis">Regular Appointment</div>
-                                        <span className="k-spacer"></span>
-                                        <span className="k-event-time">13:30 PM</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </>}>
-                    </TooltipNormal>
-                </AnimationContainer>
-            </section>
-
-            <section>
-                <AnimationContainer style={{ width: "220px" }} >
-                    <TooltipNormal className="k-scheduler-tooltip" style={{ width: "220px" }}
-                        callout="left"
-                        content={<>
-                            <div className="k-tooltip-title k-text-center">
-                                <div className="k-month">Jan</div>
-                                <div className="k-link k-day !k-text-primary">29</div>
-                            </div>
-                            <NoData className="k-text-center">No events on this date.</NoData>
-                        </>}>
-                    </TooltipNormal>
-                </AnimationContainer>
-            </section>
-        </div>
-    </>
-);