npm - @progress/kendo-themes-html - Versions diffs - 5.6.1-dev.0 → 5.6.1-dev.3 - Mend

@progress/kendo-themes-html 5.6.1-dev.0 → 5.6.1-dev.3

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

package/src/rating/tests/rating.tsx CHANGED Viewed

@@ -8,22 +8,27 @@ const root = ReactDOM.createRoot(
 root.render(
     <>
-        <div id="test-area" className="k-d-grid k-grid-cols-2">
+        <div id="test-area" className="k-d-grid" style={{ gridTemplateColumns: "120px repeat(2, 1fr)", alignItems: "center" }}>
-            <span>Continuous</span>
-            <span>Single</span>
+            <span></span>
+            <span>Continuous Selection</span>
+            <span>Single Selection</span>
+            <span>Hover:</span>
             <section>
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-hover">
                             <Icon name="star"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-hover">
                             <Icon name="star"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-hover">
                             <Icon name="star"></Icon>
+                            <span className="k-rating-precision-part" style={{ width: `calc( --var() )` }}>
+                                <Icon name="star"></Icon>
+                            </span>
                         </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
@@ -32,9 +37,6 @@ root.render(
                             <Icon name="star-outline"></Icon>
                         </span>
                     </span>
-                    <span className="k-rating-label">
-                        <span>3 / 5</span>
-                    </span>
                 </span>
             </section>
             <section>
@@ -46,7 +48,7 @@ root.render(
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-hover">
                             <Icon name="star"></Icon>
                         </span>
                         <span className="k-rating-item">
@@ -56,26 +58,21 @@ root.render(
                             <Icon name="star-outline"></Icon>
                         </span>
                     </span>
-                    <span className="k-rating-label">
-                        <span>3 / 5</span>
-                    </span>
                 </span>
             </section>
+            <span>Focus:</span>
             <section>
-                <span className="k-rating k-widget">
+                <span className="k-rating k-widget k-focus">
                     <span className="k-rating-container">
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-selected">
                             <Icon name="star"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-selected">
                             <Icon name="star"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected">
-                            <Icon name="star-outline"></Icon>
-                            <span className="k-rating-precision-part" style={{ width: "12px" }}>
-                                <Icon name="star"></Icon>
-                            </span>
+                        <span className="k-rating-item k-selected k-focus">
+                            <Icon name="star"></Icon>
                         </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
@@ -84,25 +81,63 @@ root.render(
                             <Icon name="star-outline"></Icon>
                         </span>
                     </span>
-                    <span className="k-rating-label">
-                        <span>2.5 / 5</span>
+                </span>
+            </section>
+            <section>
+                <span className="k-rating k-widget k-focus">
+                    <span className="k-rating-container">
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item k-selected k-focus">
+                            <Icon name="star"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
                     </span>
                 </span>
             </section>
+            <span>Selected:</span>
             <section>
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
+                        <span className="k-rating-item k-selected">
+                            <Icon name="star"></Icon>
+                        </span>
+                        <span className="k-rating-item k-selected">
+                            <Icon name="star"></Icon>
+                        </span>
+                        <span className="k-rating-item k-selected">
+                            <Icon name="star"></Icon>
+                        </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
                         </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected">
+                    </span>
+                </span>
+            </section>
+            <section>
+                <span className="k-rating k-widget">
+                    <span className="k-rating-container">
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
-                            <span className="k-rating-precision-part" style={{ width: "12px" }}>
-                                <Icon name="star"></Icon>
-                            </span>
+                        </span>
+                        <span className="k-rating-item k-selected">
+                            <Icon name="star"></Icon>
                         </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
@@ -111,27 +146,43 @@ root.render(
                             <Icon name="star-outline"></Icon>
                         </span>
                     </span>
-                    <span className="k-rating-label">
-                        <span>2.5 / 5</span>
-                    </span>
                 </span>
             </section>
-            <span>Normal</span>
-            <span>Focus</span>
+            <span>Selected Hover:</span>
             <section>
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
+                        <span className="k-rating-item k-selected k-hover">
+                            <Icon name="star"></Icon>
+                        </span>
+                        <span className="k-rating-item k-selected k-hover">
+                            <Icon name="star"></Icon>
+                        </span>
+                        <span className="k-rating-item k-selected k-hover">
+                            <Icon name="star"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
                         </span>
+                    </span>
+                </span>
+            </section>
+            <section>
+                <span className="k-rating k-widget">
+                    <span className="k-rating-container">
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
                         </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
                         </span>
+                        <span className="k-rating-item k-selected k-hover">
+                            <Icon name="star"></Icon>
+                        </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
                         </span>
@@ -142,18 +193,46 @@ root.render(
                 </span>
             </section>
+            <span>Label</span>
             <section>
-                <span className="k-rating k-widget k-state-focused">
+                <span className="k-rating k-widget">
                     <span className="k-rating-container">
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-selected">
                             <Icon name="star"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected">
-                            <Icon name="star"></Icon>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected k-state-focused">
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                    </span>
+                    <span className="k-rating-label">
+                        <span>1 / 5</span>
+                    </span>
+                </span>
+            </section>
+            <section>
+                <span className="k-rating k-widget">
+                    <span className="k-rating-container">
+                        <span className="k-rating-item k-selected">
                             <Icon name="star"></Icon>
                         </span>
+                        <span className="k-rating-item k-selected">
+                            <Icon name="star-outline"></Icon>
+                            <span className="k-rating-precision-part" style={{ width: "12px" }}>
+                                <Icon name="star"></Icon>
+                            </span>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
                         <span className="k-rating-item">
                             <Icon name="star-outline"></Icon>
                         </span>
@@ -162,25 +241,23 @@ root.render(
                         </span>
                     </span>
                     <span className="k-rating-label">
-                        <span>3 / 5</span>
+                        <span>1.5 / 5</span>
                     </span>
                 </span>
             </section>
             <span>Nested</span>
-            <span>SVG</span>
             <section>
-                <div style={{ backgroundColor: "#656565" }}>
-                    <span className="k-rating k-widget k-state-focused">
+                <div style={{ backgroundColor: "silver" }}>
+                    <span className="k-rating k-widget k-focus">
                         <span className="k-rating-container">
-                            <span className="k-rating-item k-state-selected">
+                            <span className="k-rating-item k-selected">
                                 <Icon name="star"></Icon>
                             </span>
-                            <span className="k-rating-item k-state-selected">
+                            <span className="k-rating-item k-selected">
                                 <Icon name="star"></Icon>
                             </span>
-                            <span className="k-rating-item k-state-selected k-state-focused">
+                            <span className="k-rating-item k-selected k-focus">
                                 <Icon name="star"></Icon>
                             </span>
                             <span className="k-rating-item">
@@ -190,21 +267,75 @@ root.render(
                                 <Icon name="star-outline"></Icon>
                             </span>
                         </span>
-                        <span className="k-rating-label">
-                            <span>3 / 5</span>
+                    </span>
+                </div>
+            </section>
+            <section>
+                <div style={{ backgroundColor: "silver" }}>
+                    <span className="k-rating k-widget k-focus">
+                        <span className="k-rating-container">
+                            <span className="k-rating-item">
+                                <Icon name="star-outline"></Icon>
+                            </span>
+                            <span className="k-rating-item k-selected k-focus">
+                                <Icon name="star"></Icon>
+                            </span>
+                            <span className="k-rating-item">
+                                <Icon name="star-outline"></Icon>
+                            </span>
+                            <span className="k-rating-item">
+                                <Icon name="star-outline"></Icon>
+                            </span>
+                            <span className="k-rating-item">
+                                <Icon name="star-outline"></Icon>
+                            </span>
                         </span>
                     </span>
                 </div>
             </section>
+            <span>SVG</span>
             <section>
                 <span className="k-rating k-widget">
                     <span className="k-rating-container">
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-selected">
                             <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                 <rect className="k-i-rect" x="0" y="0" rx="5" ry="5" width="50" height="30"></rect>
                             </svg>
                         </span>
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-selected">
+                            <span className="k-rating-precision-complement" style={{ width: '50px' }} >
+                                <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                                    <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
+                                </svg>
+                            </span>
+                            <span className="k-rating-precision-part" style={{ width: "25px" }} >
+                                <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                                    <rect className="k-i-rect" x="0" y="0" rx="5" ry="5" width="50" height="30"></rect>
+                                </svg>
+                            </span>
+                            <span style={{ width: '50px', height: "30px", display: "block" }} ></span>
+                        </span>
+                        <span className="k-rating-item k-selected k-focus">
+                            <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                                <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
+                            </svg>
+                        </span>
+                    </span>
+                    <span className="k-rating-label">
+                        <span>1.5 / 3</span>
+                    </span>
+                </span>
+            </section>
+            <section>
+                <span className="k-rating k-widget">
+                    <span className="k-rating-container">
+                        <span className="k-rating-item k-selected">
+                            <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                                <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
+                            </svg>
+                        </span>
+                        <span className="k-rating-item k-selected">
                             <span className="k-rating-precision-complement" style={{ width: '50px' }} >
                                 <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                     <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
@@ -217,28 +348,27 @@ root.render(
                             </span>
                             <span style={{ width: '50px', height: "30px", display: "block" }} ></span>
                         </span>
-                        <span className="k-rating-item k-state-selected k-state-focused">
+                        <span className="k-rating-item k-selected k-focus">
                             <svg width="50" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                 <rect x="0" y="0" rx="5" ry="5" width="50" height="30" fillOpacity="0" stroke="#e9e9e9" strokeWidth="2"></rect>
                             </svg>
                         </span>
                     </span>
                     <span className="k-rating-label">
-                        <span>2 / 5</span>
+                        <span>1.5 / 3</span>
                     </span>
                 </span>
             </section>
-            <span>Readonly</span>
-            <span></span>
+            <span>Readonly</span>
             <section>
                 <span className="k-rating k-widget k-state-readonly">
                     <span className="k-rating-container">
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-selected">
                             <Icon name="star"></Icon>
                         </span>
-                        <span className="k-rating-item k-state-selected">
+                        <span className="k-rating-item k-selected">
                             <Icon name="star"></Icon>
                         </span>
                         <span className="k-rating-item">
@@ -253,8 +383,26 @@ root.render(
                     </span>
                 </span>
             </section>
             <section>
+                <span className="k-rating k-widget k-state-readonly">
+                    <span className="k-rating-container">
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item k-selected">
+                            <Icon name="star"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                        <span className="k-rating-item">
+                            <Icon name="star-outline"></Icon>
+                        </span>
+                    </span>
+                </span>
             </section>
         </div>
     </>

package/src/scheduler/tests/scheduler-adaptive-agenda.tsx CHANGED Viewed

@@ -32,10 +32,9 @@ root.render(
                                 <div className="k-scheduler-toolbar k-toolbar">
                                     <span className="k-scheduler-navigation">
                                         <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
-                                        <span className="k-nav-current">
-                                            <span className="k-m-date-format">Jun 13 - 20</span>
-                                            <span className="k-y-date-format">2013</span>
-                                        </span>
+                                        <Button className="k-nav-current" fillMode="flat" >
+                                            Jun 13 - 20, 2013
+                                        </Button>
                                         <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
                                     </span>
                                 </div>

package/src/scheduler/tests/scheduler-adaptive-day-resource-group.tsx CHANGED Viewed

@@ -32,10 +32,9 @@ root.render(
                                 <div className="k-scheduler-toolbar k-toolbar">
                                     <span className="k-scheduler-navigation">
                                         <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
-                                        <span className="k-nav-current">
-                                            <span className="k-m-date-format">Jun 13</span>
-                                            <span className="k-y-date-format">2013</span>
-                                        </span>
+                                        <Button className="k-nav-current" fillMode="flat" >
+                                            Jun 13, 2013
+                                        </Button>
                                         <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
                                     </span>
                                 </div>

package/src/scheduler/tests/scheduler-adaptive-day.tsx CHANGED Viewed

@@ -32,10 +32,9 @@ root.render(
                                 <div className="k-scheduler-toolbar k-toolbar">
                                     <span className="k-scheduler-navigation">
                                         <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
-                                        <span className="k-nav-current">
-                                            <span className="k-m-date-format">Jun 13</span>
-                                            <span className="k-y-date-format">2013</span>
-                                        </span>
+                                        <Button className="k-nav-current" fillMode="flat" >
+                                            Jun 13, 2013
+                                        </Button>
                                         <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
                                     </span>
                                 </div>

package/src/scheduler/tests/scheduler-adaptive-month.tsx CHANGED Viewed

@@ -32,10 +32,9 @@ root.render(
                                 <div className="k-scheduler-toolbar k-toolbar">
                                     <span className="k-scheduler-navigation">
                                         <Button className="k-nav-prev" icon="arrow-chevron-left"></Button>
-                                        <span className="k-nav-current">
-                                            <span className="k-m-date-format">June</span>
-                                            <span className="k-y-date-format">2013</span>
-                                        </span>
+                                        <Button className="k-nav-current" fillMode="flat" >
+                                            June, 2013
+                                        </Button>
                                         <Button className="k-nav-next" icon="arrow-chevron-right"></Button>
                                     </span>
                                 </div>

package/src/scheduler/tests/scheduler-angular-agenda-rtl.tsx CHANGED Viewed

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">6/23/2019 - 6/29/2019</span>
-                            <span className="k-lg-date-format">Sunday, June 23, 2019 - Saturday, June 29, 2019</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            Sunday, June 23, 2019 - Saturday, June 29, 2019
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

package/src/scheduler/tests/scheduler-angular-agenda.tsx CHANGED Viewed

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">6/23/2019 - 6/29/2019</span>
-                            <span className="k-lg-date-format">Sunday, June 23, 2019 - Saturday, June 29, 2019</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            Sunday, June 23, 2019 - Saturday, June 29, 2019
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

package/src/scheduler/tests/scheduler-angular-day-rtl.tsx CHANGED Viewed

@@ -20,11 +20,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">6/24/2013</span>
-                            <span className="k-lg-date-format">Monday, June 24, 2013</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            Monday, June 24, 2013
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

package/src/scheduler/tests/scheduler-angular-month-rtl.tsx CHANGED Viewed

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">June 2013</span>
-                            <span className="k-lg-date-format">June 2013</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            June 2013
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

package/src/scheduler/tests/scheduler-angular-month.tsx CHANGED Viewed

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">June 2013</span>
-                            <span className="k-lg-date-format">June 2013</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            June 2013
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

package/src/scheduler/tests/scheduler-angular-rtl.tsx CHANGED Viewed

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">6/23/2019 - 6/29/2019</span>
-                            <span className="k-lg-date-format">Sunday, June 23, 2019 - Saturday, June 29, 2019</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            Sunday, June 23, 2019 - Saturday, June 29, 2019
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

package/src/scheduler/tests/scheduler-angular.tsx CHANGED Viewed

@@ -27,11 +27,9 @@ root.render(
                                 <Button icon="arrow-60-right"></Button>
                             </div>
                         </div>
-                        <a className="k-nav-current" href="#">
-                            <Icon name="calendar"></Icon>
-                            <span className="k-sm-date-format">6/23/2019 - 6/29/2019</span>
-                            <span className="k-lg-date-format">Sunday, June 23, 2019 - Saturday, June 29, 2019</span>
-                        </a>
+                        <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                            Sunday, June 23, 2019 - Saturday, June 29, 2019
+                        </Button>
                     </div>
                     <span className="k-spacer"></span>
                     <div className="k-scheduler-views-wrapper">

package/src/scheduler/tests/scheduler-flex-layout.tsx CHANGED Viewed

@@ -17,11 +17,9 @@ root.render(
                         <Button icon="arrow-60-left"></Button>
                         <Button icon="arrow-60-right"></Button>
                     </span>
-                    <a href="#" className="k-nav-current">
-                        <Icon name="calendar"></Icon>
-                        <span className="k-sm-date-format">6/24/2019</span>
-                        <span className="k-lg-date-format">Monday, June 24, 2019</span>
-                    </a>
+                    <Button icon="calendar" className="k-nav-current" fillMode="flat" >
+                        Monday, June 24, 2019
+                    </Button>
                     <span className="k-spacer"></span>
                     <span className="k-scheduler-views-wrapper">
                         <select className="k-views-dropdown k-picker k-dropdown-list k-dropdown k-rounded-md">