npm - @progress/kendo-themes-html - Versions diffs - 5.6.1-dev.2 → 5.6.1-dev.5 - Mend

@progress/kendo-themes-html 5.6.1-dev.2 → 5.6.1-dev.5

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

package/src/panelbar/tests/panelbar-rtl.tsx ADDED Viewed

@@ -0,0 +1,238 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Icon } from '../../icon';
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+const styles = `
+    .k-sprite {
+        background-color: gray;
+    }
+    .k-image {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        background-color: gold;
+    }
+`;
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-4">
+            <section className="k-rtl">
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <Icon className="k-panelbar-item-icon" name="cog" />
+                            <span className="k-panelbar-item-text">Root</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-hover">
+                            <span className="k-panelbar-item-icon k-image"></span>
+                            <span className="k-panelbar-item-text">Root hover</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-focus">
+                            <span className="k-panelbar-item-icon k-sprite"></span>
+                            <span className="k-panelbar-item-text">Root focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-focus k-hover">
+                            <span className="k-panelbar-item-icon k-sprite"></span>
+                            <span className="k-panelbar-item-text">Root hover&focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-disabled">
+                            <span className="k-panelbar-item-text">Root disabled</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected">
+                            <span className="k-panelbar-item-text">Root selected</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-hover">
+                            <span className="k-panelbar-item-text">Root selected hover</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-focus">
+                            <span className="k-panelbar-item-text">Root selected focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-focus k-hover">
+                            <span className="k-panelbar-item-text">Root selected hover&focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                </ul>
+            </section>
+            <section className="k-rtl">
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <ul className="k-panelbar-group k-panel k-group">
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-hover">
+                                    <span className="k-panelbar-item-text">Child hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-focus">
+                                    <span className="k-panelbar-item-text">Child focus</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-focus k-hover">
+                                    <span className="k-panelbar-item-text">Child focus&hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected">
+                                    <span className="k-panelbar-item-text">Child selected</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-hover">
+                                    <span className="k-panelbar-item-text">Child selected hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-focus">
+                                    <span className="k-panelbar-item-text">Child selected focus</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-focus k-hover">
+                                    <span className="k-panelbar-item-text">Child selected focus&hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-expanded k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child expanded</span>
+                                    <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                                </span>
+                                <ul className="k-panelbar-group k-panel k-group">
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-disabled">
+                                    <span className="k-panelbar-item-text">Child disabled</span>
+                                    <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child last</span>
+                                </span>
+                            </li>
+                        </ul>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </li>
+                </ul>
+            </section>
+            <section className="k-rtl">
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div className="k-panelbar-content">
+                            <h4>Title in template</h4>
+                            <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
+                        </div>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </li>
+                </ul>
+            </section>
+            <section className="k-rtl">
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div className="k-panelbar-content">
+                            <h4>Title in template</h4>
+                            <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
+                        </div>
+                    </li>
+                </ul>
+            </section>
+        </div>
+    </>
+);

package/src/panelbar/tests/panelbar.tsx ADDED Viewed

@@ -0,0 +1,238 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Icon } from '../../icon';
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+const styles = `
+    .k-sprite {
+        background-color: gray;
+    }
+    .k-image {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+        background-color: gold;
+    }
+`;
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-4">
+            <section>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <Icon className="k-panelbar-item-icon" name="cog" />
+                            <span className="k-panelbar-item-text">Root</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-hover">
+                            <span className="k-panelbar-item-icon k-image"></span>
+                            <span className="k-panelbar-item-text">Root hover</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-focus">
+                            <span className="k-panelbar-item-icon k-sprite"></span>
+                            <span className="k-panelbar-item-text">Root focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-focus k-hover">
+                            <span className="k-panelbar-item-icon k-sprite"></span>
+                            <span className="k-panelbar-item-text">Root hover&focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-disabled">
+                            <span className="k-panelbar-item-text">Root disabled</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected">
+                            <span className="k-panelbar-item-text">Root selected</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-hover">
+                            <span className="k-panelbar-item-text">Root selected hover</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-focus">
+                            <span className="k-panelbar-item-text">Root selected focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link k-selected k-focus k-hover">
+                            <span className="k-panelbar-item-text">Root selected hover&focus</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </li>
+                </ul>
+            </section>
+            <section>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <ul className="k-panelbar-group k-panel k-group">
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <Icon className="k-panelbar-item-icon" name="cog" />
+                                    <span className="k-panelbar-item-text">Child</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-hover">
+                                    <span className="k-panelbar-item-text">Child hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-focus">
+                                    <span className="k-panelbar-item-text">Child focus</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-focus k-hover">
+                                    <span className="k-panelbar-item-text">Child focus&hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected">
+                                    <span className="k-panelbar-item-text">Child selected</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-hover">
+                                    <span className="k-panelbar-item-text">Child selected hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-focus">
+                                    <span className="k-panelbar-item-text">Child selected focus</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-selected k-focus k-hover">
+                                    <span className="k-panelbar-item-text">Child selected focus&hover</span>
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-expanded k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child expanded</span>
+                                    <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                                </span>
+                                <ul className="k-panelbar-group k-panel k-group">
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                    <li className="k-panelbar-item k-item k-level-2">
+                                        <span className="k-link">
+                                            <span className="k-panelbar-item-text">Child</span>
+                                        </span>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link k-disabled">
+                                    <span className="k-panelbar-item-text">Child disabled</span>
+                                    <Icon className="k-panelbar-toggle k-panelbar-expand" name="arrow-chevron-down" />
+                                </span>
+                            </li>
+                            <li className="k-panelbar-item k-item k-level-1">
+                                <span className="k-link">
+                                    <span className="k-panelbar-item-text">Child last</span>
+                                </span>
+                            </li>
+                        </ul>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </li>
+                </ul>
+            </section>
+            <section>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div className="k-panelbar-content">
+                            <h4>Title in template</h4>
+                            <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
+                        </div>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </li>
+                </ul>
+            </section>
+            <section>
+                <ul className="k-panelbar">
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">First</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Middle</span>
+                        </span>
+                    </li>
+                    <li className="k-panelbar-header k-item k-expanded k-level-0">
+                        <span className="k-link">
+                            <span className="k-panelbar-item-text">Last expanded</span>
+                            <Icon className="k-panelbar-toggle k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div className="k-panelbar-content">
+                            <h4>Title in template</h4>
+                            <p>Multi line paragraph in template. Some more content to break onto multiple lines</p>
+                        </div>
+                    </li>
+                </ul>
+            </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">