@progress/kendo-themes-html 5.8.2-dev.5 → 5.9.0

package/src/action-sheet/tests/action-sheet.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { Icon } from '../../icon';
+import { ActionSheet, ActionSheetItems, ActionSheetItem } from '../../action-sheet';
 
 const root = ReactDOM.createRoot(
     document.getElementById('app') as HTMLElement
@@ -8,158 +8,57 @@ const root = ReactDOM.createRoot(
 
 const styles = `
     #test-area {
+        --kendo-actionsheet-height: 400px;
+        --kendo-actionsheet-max-height: 400px;
+    }
+    #test-area > section {
         height: 600px;
-        transform: scale(1);
+        outline: 1px dotted;
         overflow: hidden;
-    }
-    .k-actionsheet:not(.k-rtl) {
-        left: 200px;
-    }
-    .k-actionsheet.k-rtl {
-        left: 600px;
+        position: relative;
+        transform: translateZ(0);
     }
 `;
 
 root.render(
     <>
         <style>{styles}</style>
-        <div id="test-area">
-            <div className="k-actionsheet-container">
-                <div className="k-overlay"></div>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-                <div className="k-actionsheet k-actionsheet-bottom">
+            <span>LTR</span>
+            <span>RTL</span>
 
-                    <div className="k-actionsheet-header">
-                        Header
-                    </div>
-
-                    <ul className="k-actionsheet-items">
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Action</span>
-                                    <span className="k-actionsheet-item-description">Action description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-hover">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Hover action</span>
-                                    <span className="k-actionsheet-item-description">Action Description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-focus">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Focus action</span>
-                                    <span className="k-actionsheet-item-description">Action Description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-disabled">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Disabled action</span>
-                                    <span className="k-actionsheet-item-description">Action description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Action</span>
-                                    <span className="k-actionsheet-item-description">Some longer subtitle to break on multiple rows, for testing purposes</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
+            <section>
+                <ActionSheet title="Header">
+                    <ActionSheetItems>
+                        <ActionSheetItem text="Action" description="Action description" iconName="cog" />
+                        <ActionSheetItem text="Hover action" description="Action description" iconName="cog" hover />
+                        <ActionSheetItem text="Focus action" description="Action description" iconName="cog" focus />
+                        <ActionSheetItem text="Disabled action" description="Action description" iconName="cog" disabled />
+                        <ActionSheetItem text="Action" description="Some longer subtitle to break on multiple rows, for testing purposes" iconName="cog" />
+                    </ActionSheetItems>
                     <hr className="k-hr" />
-                    <ul className="k-actionsheet-items">
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Cancel</span>
-                                    <span className="k-actionsheet-item-description">Action in second group</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-
-                <div className="k-actionsheet k-actionsheet-bottom k-rtl">
-                    <div className="k-actionsheet-header">
-                        Header
-                    </div>
+                    <ActionSheetItems>
+                        <ActionSheetItem text="Cancel" description="Action in a second group" iconName="cog" />
+                    </ActionSheetItems>
+                </ActionSheet>
+            </section>
 
-                    <ul className="k-actionsheet-items">
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Action</span>
-                                    <span className="k-actionsheet-item-description">Action description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-hover">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Hover action</span>
-                                    <span className="k-actionsheet-item-description">Action Description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-focus">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Focus action</span>
-                                    <span className="k-actionsheet-item-description">Action Description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action k-disabled">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Disabled action</span>
-                                    <span className="k-actionsheet-item-description">Action description</span>
-                                </span>
-                            </a>
-                        </li>
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Action</span>
-                                    <span className="k-actionsheet-item-description">Some longer subtitle to break on multiple rows, for testing purposes</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
+            <section>
+                <ActionSheet title="Header" className="k-rtl">
+                    <ActionSheetItems>
+                        <ActionSheetItem text="Action" description="Action description" iconName="cog" />
+                        <ActionSheetItem text="Hover action" description="Action description" iconName="cog" hover />
+                        <ActionSheetItem text="Focus action" description="Action description" iconName="cog" focus />
+                        <ActionSheetItem text="Disabled action" description="Action description" iconName="cog" disabled />
+                        <ActionSheetItem text="Action" description="Some longer subtitle to break on multiple rows, for testing purposes" iconName="cog" />
+                    </ActionSheetItems>
                     <hr className="k-hr" />
-                    <ul className="k-actionsheet-items">
-                        <li className="k-actionsheet-item">
-                            <a href="#" className="k-actionsheet-action">
-                                <Icon className="k-actionsheet-item-icon" name="cog" />
-                                <span className="k-actionsheet-item-text">
-                                    <span className="k-actionsheet-item-title">Cancel</span>
-                                    <span className="k-actionsheet-item-description">Action in second group</span>
-                                </span>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+                    <ActionSheetItems>
+                        <ActionSheetItem text="Cancel" description="Action in a second group" iconName="cog" />
+                    </ActionSheetItems>
+                </ActionSheet>
+            </section>
         </div>
     </>
 );

package/src/calendar/calendar-header.tsx

@@ -6,6 +6,7 @@ export interface CalendarHeaderProps {
     className?: string;
     calendarHeaderText?: string;
     showToday?: boolean;
+    size?: null | 'small' | 'medium' | 'large';
     orientation?: 'vertical' | 'horizontal';
 }
 
@@ -15,6 +16,7 @@ export class CalendarHeader extends React.Component<CalendarHeaderProps> {
         calendarHeaderText: 'October 2021',
         showToday: true,
         orientation: 'horizontal',
+        size: 'medium'
     };
 
     render() {
@@ -23,6 +25,7 @@ export class CalendarHeader extends React.Component<CalendarHeaderProps> {
             calendarHeaderText,
             showToday,
             orientation,
+            size,
             ...htmlAttributes
         } = this.props;
 
@@ -36,12 +39,12 @@ export class CalendarHeader extends React.Component<CalendarHeaderProps> {
                         'k-vstack': orientation === 'vertical',
                     }
                 )}>
-                <Button className="k-calendar-title" text={calendarHeaderText} fillMode="flat"></Button>
+                <Button className="k-calendar-title" text={calendarHeaderText} size={size} fillMode="flat"></Button>
                 <span className="k-spacer"></span>
                 <span className="k-calendar-nav">
-                    <Button className="k-calendar-nav-prev" icon="arrow-chevron-left" fillMode="flat"></Button>
+                    <Button className="k-calendar-nav-prev" icon="arrow-chevron-left" size={size} fillMode="flat"></Button>
                     {showToday && <span className="k-calendar-nav-today">Today</span>}
-                    <Button className="k-calendar-nav-next" icon="arrow-chevron-right" fillMode="flat"></Button>
+                    <Button className="k-calendar-nav-next" icon="arrow-chevron-right" size={size} fillMode="flat"></Button>
                 </span>
             </div>
         );

package/src/calendar/calendar.tsx

@@ -57,6 +57,7 @@ export class Calendar extends React.Component<CalendarProps> {
                     showToday={showCalendarFooter ? false : true }
                     calendarHeaderText={calendarHeaderText}
                     orientation={orientation}
+                    size={size}
                 />
 
                 <CalendarView

package/src/calendar/tests/calendar-classic-jquery.tsx

@@ -15,7 +15,7 @@ root.render(
             <span></span>
 
             <section>
-                <div className="k-widget k-calendar">
+                <div className="k-widget k-calendar k-calendar-md">
                     <div className="k-header k-hstack">
                         <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
                         <Button fillMode="flat" className="k-calendar-nav-today k-flex">March 2018</Button>
@@ -182,7 +182,7 @@ root.render(
                 </div>
             </section>
             <section>
-                <div className="k-widget k-calendar k-week-number">
+                <div className="k-widget k-calendar k-week-number k-calendar-md">
                     <div className="k-header k-hstack">
                         <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
                         <Button fillMode="flat" className="k-calendar-nav-today k-flex">March 2018</Button>
@@ -363,7 +363,7 @@ root.render(
             <span>jquery classic century</span>
 
             <section>
-                <div className="k-widget k-calendar">
+                <div className="k-widget k-calendar k-calendar-md">
                     <div className="k-header k-hstack">
                         <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
                         <Button fillMode="flat" className="k-calendar-nav-today k-flex">2018</Button>
@@ -424,7 +424,7 @@ root.render(
             </section>
 
             <section>
-                <div className="k-widget k-calendar">
+                <div className="k-widget k-calendar k-calendar-md">
                     <div className="k-header k-hstack">
                         <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
                         <Button fillMode="flat" className="k-calendar-nav-today k-flex">2010 - 2019</Button>
@@ -481,7 +481,7 @@ root.render(
             </section>
 
             <section>
-                <div className="k-widget k-calendar">
+                <div className="k-widget k-calendar k-calendar-md">
                     <div className="k-header k-hstack">
                         <Button fillMode="flat" className="k-calendar-nav-prev" icon="arrow-60-left"></Button>
                         <Button fillMode="flat" className="k-calendar-nav-today k-flex">2000 - 2099</Button>

package/src/calendar/tests/calendar-infinite-rtl.tsx

@@ -12,7 +12,7 @@ root.render(
 
             <section>
                 <div>infinite calendar month</div>
-                <div className="k-widget k-calendar k-calendar-infinite" dir="rtl">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md" dir="rtl">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -225,7 +225,7 @@ root.render(
 
             <section>
                 <div>infinite calendar with long month names</div>
-                <div className="k-widget k-calendar k-calendar-infinite" dir="rtl">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md" dir="rtl">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -438,7 +438,7 @@ root.render(
 
             <section>
                 <div>infinite calendar year</div>
-                <div className="k-widget k-calendar k-calendar-infinite" dir="rtl">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md" dir="rtl">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -596,7 +596,7 @@ root.render(
 
             <section>
                 <div>infinite calendar decade</div>
-                <div className="k-widget k-calendar k-calendar-infinite" dir="rtl">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md" dir="rtl">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -730,7 +730,7 @@ root.render(
 
             <section>
                 <div>infinite calendar century</div>
-                <div className="k-widget k-calendar k-calendar-infinite" dir="rtl">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md" dir="rtl">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -852,7 +852,7 @@ root.render(
 
             <section>
                 <div>infinite calendar empty cells</div>
-                <div className="k-widget k-calendar k-calendar-infinite" dir="rtl">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md" dir="rtl">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -945,7 +945,7 @@ root.render(
 
             <section>
                 <div>infinite calendar - week number column</div>
-                <div className="k-widget k-calendar k-calendar-infinite k-week-number" dir="rtl">
+                <div className="k-widget k-calendar k-calendar-infinite k-week-number k-calendar-md" dir="rtl">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">

package/src/calendar/tests/calendar-infinite.tsx

@@ -12,7 +12,7 @@ root.render(
 
             <section>
                 <div>infinite calendar month</div>
-                <div className="k-widget k-calendar k-calendar-infinite">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -225,7 +225,7 @@ root.render(
 
             <section>
                 <div>infinite calendar with long month names</div>
-                <div className="k-widget k-calendar k-calendar-infinite">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -438,7 +438,7 @@ root.render(
 
             <section>
                 <div>infinite calendar year</div>
-                <div className="k-widget k-calendar k-calendar-infinite">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -596,7 +596,7 @@ root.render(
 
             <section>
                 <div>infinite calendar decade</div>
-                <div className="k-widget k-calendar k-calendar-infinite">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -730,7 +730,7 @@ root.render(
 
             <section>
                 <div>infinite calendar century</div>
-                <div className="k-widget k-calendar k-calendar-infinite">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -852,7 +852,7 @@ root.render(
 
             <section>
                 <div>infinite calendar empty cells</div>
-                <div className="k-widget k-calendar k-calendar-infinite">
+                <div className="k-widget k-calendar k-calendar-infinite k-calendar-md">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">
@@ -945,7 +945,7 @@ root.render(
 
             <section>
                 <div>infinite calendar - week number column</div>
-                <div className="k-widget k-calendar k-calendar-infinite k-week-number">
+                <div className="k-widget k-calendar k-calendar-infinite k-week-number k-calendar-md">
                     <div className="k-calendar-navigation">
                         <span className="k-calendar-navigation-highlight"></span>
                         <div className="k-content k-scrollable">

package/src/calendar/tests/calendar-modern-size.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Calendar } from '../../calendar';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+root.render(
+    <>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+
+            <span>small</span>
+            <span>medium</span>
+            <span>large</span>
+
+            <section>
+                <Calendar calendarView="month" size="small"></Calendar>
+            </section>
+            <section>
+                <Calendar calendarView="month" showOtherMonth size="medium"></Calendar>
+            </section>
+            <section>
+                <Calendar calendarView="month" showOtherMonth showWeek size="large"></Calendar>
+            </section>
+
+            <section>
+                <Calendar calendarView="year" calendarHeaderText="2019" size="small"></Calendar>
+            </section>
+            <section>
+                <Calendar calendarView="decade" calendarHeaderText="2020 - 2029" size="medium"></Calendar>
+            </section>
+            <section>
+                <Calendar calendarView="century" calendarHeaderText="2000 - 2099" size="large"></Calendar>
+            </section>
+        </div>
+
+    </>
+);

package/src/coloreditor/tests/coloreditor-focused-colorgradient.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+import { ColorPreview } from '../../color-preview';
+import { NumericTextbox } from '../../numerictextbox';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-hue-slider {
+        --kendo-slider-start: 0;
+        --kendo-slider-end: 0;
+    }
+    .k-alpha-slider {
+        --kendo-slider-start: 0;
+        --kendo-slider-end: 100;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <span>Focused Cologradient Inside ColorEditor</span>
+
+            <section>
+                <div className="k-flatcolorpicker k-coloreditor">
+                    <div className="k-coloreditor-header k-hstack">
+                        <div className="k-coloreditor-header-actions k-hstack"></div>
+                        <div className="k-spacer"></div>
+                        <div className="k-coloreditor-header-actions k-hstack">
+                            <Button fillMode="flat" icon="reset-color"></Button>
+                            <div className="k-coloreditor-preview k-vstack">
+                                <ColorPreview className="k-coloreditor-preview-color" />
+                                <ColorPreview className="k-coloreditor-current-color" color="fuchsia"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="k-coloreditor-views k-vstack">
+                        <div className="k-focus k-colorgradient">
+                            <div className="k-colorgradient-canvas k-hstack">
+                                <div className="k-hsv-rectangle" style={{ background: "rgb(255, 0, 0)" }}>
+                                    <div className="k-hsv-gradient">
+                                        <div className="k-hsv-draghandle k-draghandle" style={{ top: '50px', left: "73px" }}></div>
+                                    </div>
+                                </div>
+                                <div className="k-hsv-controls k-hstack">
+                                    <div className="k-slider k-slider-vertical k-hue-slider k-colorgradient-slider">
+                                        <div className="k-slider-track-wrap">
+                                            <div className="k-slider-track">
+                                                <div className="k-slider-selection"></div>
+                                                <a className="k-draghandle k-draghandle-end"></a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div className="k-slider k-slider-vertical k-alpha-slider k-colorgradient-slider">
+                                        <div className="k-slider-track-wrap">
+                                            <div className="k-slider-track" style={{ background: "linear-gradient(to top, transparent, rgb(255, 0, 0))" }}>
+                                                <div className="k-slider-selection"></div>
+                                                <a className="k-draghandle k-draghandle-end"></a>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div className="k-colorgradient-inputs k-hstack">
+                                <div className="k-vstack">
+                                    <Button fillMode="flat" icon="arrows-kpi" className="k-colorgradient-toggle-mode" />
+                                </div>
+
+                                <div className="k-vstack">
+                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                                    <label className="k-colorgradient-input-label">R</label>
+                                </div>
+
+                                <div className="k-vstack">
+                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                                    <label className="k-colorgradient-input-label">G</label>
+                                </div>
+
+                                <div className="k-vstack">
+                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="132" />
+                                    <label className="k-colorgradient-input-label">B</label>
+                                </div>
+
+                                <div className="k-vstack">
+                                    <NumericTextbox showSpinButton={false} showClearButton={false} value="1.00" />
+                                    <label className="k-colorgradient-input-label">A</label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <ActionButtons className="k-coloreditor-footer" alignment="end">
+                        <Button className="k-coloreditor-cancel">Cancel</Button>
+                        <Button themeColor="primary" className="k-coloreditor-apply">Apply</Button>
+                    </ActionButtons>
+                </div>
+            </section>
+
+        </div>
+    </>
+);