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

package/src/panelbar/tests/panelbar-angular.tsx

@@ -23,41 +23,39 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all k-col-span-full">LTR</span>
-
             <section>
                 <div className="k-widget k-panelbar">
                     <div className="k-item">
                         <span className="k-link k-header">
-                            <Icon name="cog" />
+                            <Icon name="cog" className="k-panelbar-item-icon" />
                             Root
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                         </span>
                     </div>
                     <div className="k-item">
-                        <span className="k-link k-header k-state-hover">
-                            <span className="k-image"></span>
+                        <span className="k-link k-header k-hover">
+                            <span className="k-image k-panelbar-item-icon"></span>
                             Root hover
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                         </span>
                     </div>
                     <div className="k-item">
-                        <span className="k-link k-header k-state-focus">
+                        <span className="k-link k-header k-focus">
                             <span className="k-sprite"></span>
                             Root focus
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                         </span>
                     </div>
                     <div className="k-item">
-                        <span className="k-link k-header k-state-selected">
+                        <span className="k-link k-header k-selected">
                             Root selected
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                         </span>
                     </div>
                     <div className="k-item">
-                        <span className="k-link k-header k-state-disabled">
+                        <span className="k-link k-header k-disabled">
                             Root disabled
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                         </span>
                     </div>
                     <div className="k-item">
@@ -76,7 +74,7 @@ root.render(
                     <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Middle expanded
-                            <Icon className="k-panelbar-collapse" name="arrow-n" />
+                            <Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
                         </span>
                         <div>
                             <div className="k-panel k-group">
@@ -84,27 +82,27 @@ root.render(
                                     <span className="k-link">Child</span>
                                 </div>
                                 <div className="k-item">
-                                    <span className="k-link k-state-hover">
+                                    <span className="k-link k-hover">
                                         Child hover
-                                        <Icon className="k-panelbar-expand" name="arrow-s" />
+                                        <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                                     </span>
                                 </div>
                                 <div className="k-item">
-                                    <span className="k-link k-state-focus">
+                                    <span className="k-link k-focus">
                                         Child focus
-                                        <Icon className="k-panelbar-expand" name="arrow-s" />
+                                        <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                                     </span>
                                 </div>
                                 <div className="k-item">
-                                    <span className="k-link k-state-selected">
+                                    <span className="k-link k-selected">
                                         Child selected
-                                        <Icon className="k-panelbar-expand" name="arrow-s" />
+                                        <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                                     </span>
                                 </div>
                                 <div className="k-item k-expanded">
                                     <span className="k-link">
                                         Child expanded
-                                        <Icon className="k-panelbar-collapse" name="arrow-n" />
+                                        <Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
                                     </span>
                                     <div>
                                         <div className="k-panel k-group">
@@ -121,9 +119,9 @@ root.render(
                                     </div>
                                 </div>
                                 <div className="k-item">
-                                    <span className="k-link k-state-disabled">
+                                    <span className="k-link k-disabled">
                                         Child disabled
-                                        <Icon className="k-panelbar-expand" name="arrow-s" />
+                                        <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                                     </span>
                                 </div>
                                 <div className="k-item">
@@ -147,7 +145,7 @@ root.render(
                     <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             First expanded
-                            <Icon className="k-panelbar-collapse" name="arrow-n" />
+                            <Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
                         </span>
                         <div>
                             <div className="k-panelbar-content">
@@ -176,7 +174,7 @@ root.render(
                     <div className="k-item k-expanded">
                         <span className="k-link k-header">
                             Last expanded
-                            <Icon className="k-panelbar-collapse" name="arrow-n" />
+                            <Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
                         </span>
                         <div>
                             <div className="k-panelbar-content">
@@ -187,172 +185,6 @@ root.render(
                     </div>
                 </div>
             </section>
-
-            <span className="k-colspan-all k-col-span-full">RTL</span>
-
-            <section>
-                <div className="k-widget k-panelbar" dir="rtl">
-                    <div className="k-item">
-                        <span className="k-link k-header">
-                            <Icon name="cog" />
-                            Root
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
-                        </span>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header k-state-hover">
-                            <span className="k-image"></span>
-                            Root hover
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
-                        </span>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header k-state-focus">
-                            <span className="k-sprite"></span>
-                            Root focus
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
-                        </span>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header k-state-selected">
-                            Root selected
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
-                        </span>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header k-state-disabled">
-                            Root disabled
-                            <Icon className="k-panelbar-expand" name="arrow-s" />
-                        </span>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header">
-                            Root last
-                        </span>
-                    </div>
-                </div>
-            </section>
-
-            <section>
-                <div className="k-widget k-panelbar" dir="rtl">
-                    <div className="k-item">
-                        <span className="k-link k-header">First</span>
-                    </div>
-                    <div className="k-item k-expanded">
-                        <span className="k-link k-header">
-                            Middle expanded
-                            <Icon className="k-panelbar-collapse" name="arrow-n" />
-                        </span>
-                        <div>
-                            <div className="k-panel k-group">
-                                <div className="k-item">
-                                    <span className="k-link">Child</span>
-                                </div>
-                                <div className="k-item">
-                                    <span className="k-link k-state-hover">
-                                        Child hover
-                                        <Icon className="k-panelbar-expand" name="arrow-s" />
-                                    </span>
-                                </div>
-                                <div className="k-item">
-                                    <span className="k-link k-state-focus">
-                                        Child focus
-                                        <Icon className="k-panelbar-expand" name="arrow-s" />
-                                    </span>
-                                </div>
-                                <div className="k-item">
-                                    <span className="k-link k-state-selected">
-                                        Child selected
-                                        <Icon className="k-panelbar-expand" name="arrow-s" />
-                                    </span>
-                                </div>
-                                <div className="k-item k-expanded">
-                                    <span className="k-link">
-                                        Child expanded
-                                        <Icon className="k-panelbar-collapse" name="arrow-n" />
-                                    </span>
-                                    <div>
-                                        <div className="k-panel k-group">
-                                            <div className="k-item">
-                                                <span className="k-link">Child</span>
-                                            </div>
-                                            <div className="k-item">
-                                                <span className="k-link">Child</span>
-                                            </div>
-                                            <div className="k-item">
-                                                <span className="k-link">Child</span>
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div className="k-item">
-                                    <span className="k-link k-state-disabled">
-                                        Child disabled
-                                        <Icon className="k-panelbar-expand" name="arrow-s" />
-                                    </span>
-                                </div>
-                                <div className="k-item">
-                                    <span className="k-link">
-                                        <span className="k-panelbar-item-text">Child last</span>
-                                    </span>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header">
-                            <span className="k-panelbar-item-text">Last</span>
-                        </span>
-                    </div>
-                </div>
-            </section>
-
-            <section>
-                <div className="k-widget k-panelbar" dir="rtl">
-                    <div className="k-item k-expanded">
-                        <span className="k-link k-header">
-                            First expanded
-                            <Icon className="k-panelbar-collapse" name="arrow-n" />
-                        </span>
-                        <div>
-                            <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>
-                        </div>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header">Middle</span>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header">Last</span>
-                    </div>
-                </div>
-            </section>
-
-            <section>
-                <div className="k-widget k-panelbar" dir="rtl">
-                    <div className="k-item">
-                        <span className="k-link k-header">First</span>
-                    </div>
-                    <div className="k-item">
-                        <span className="k-link k-header">Middle</span>
-                    </div>
-                    <div className="k-item k-expanded">
-                        <span className="k-link k-header">
-                            Last expanded
-                            <Icon className="k-panelbar-collapse" name="arrow-n" />
-                        </span>
-                        <div>
-                            <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>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
         </div>
     </>
 );

package/src/panelbar/tests/panelbar-rtl-angular.tsx

@@ -0,0 +1,190 @@
+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>
+                <div className="k-widget k-panelbar" dir="rtl">
+                    <div className="k-item">
+                        <span className="k-link k-header">
+                            <Icon name="cog" className="k-panelbar-item-icon" />
+                            Root
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header k-hover">
+                            <span className="k-image k-panelbar-item-icon"></span>
+                            Root hover
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header k-focus">
+                            <span className="k-sprite"></span>
+                            Root focus
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header k-selected">
+                            Root selected
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header k-disabled">
+                            Root disabled
+                            <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                        </span>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header">
+                            Root last
+                        </span>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div className="k-widget k-panelbar" dir="rtl">
+                    <div className="k-item">
+                        <span className="k-link k-header">First</span>
+                    </div>
+                    <div className="k-item k-expanded">
+                        <span className="k-link k-header">
+                            Middle expanded
+                            <Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div>
+                            <div className="k-panel k-group">
+                                <div className="k-item">
+                                    <span className="k-link">Child</span>
+                                </div>
+                                <div className="k-item">
+                                    <span className="k-link k-hover">
+                                        Child hover
+                                        <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                                    </span>
+                                </div>
+                                <div className="k-item">
+                                    <span className="k-link k-focus">
+                                        Child focus
+                                        <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                                    </span>
+                                </div>
+                                <div className="k-item">
+                                    <span className="k-link k-selected">
+                                        Child selected
+                                        <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                                    </span>
+                                </div>
+                                <div className="k-item k-expanded">
+                                    <span className="k-link">
+                                        Child expanded
+                                        <Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
+                                    </span>
+                                    <div>
+                                        <div className="k-panel k-group">
+                                            <div className="k-item">
+                                                <span className="k-link">Child</span>
+                                            </div>
+                                            <div className="k-item">
+                                                <span className="k-link">Child</span>
+                                            </div>
+                                            <div className="k-item">
+                                                <span className="k-link">Child</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div className="k-item">
+                                    <span className="k-link k-disabled">
+                                        Child disabled
+                                        <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
+                                    </span>
+                                </div>
+                                <div className="k-item">
+                                    <span className="k-link">
+                                        <span className="k-panelbar-item-text">Child last</span>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header">
+                            <span className="k-panelbar-item-text">Last</span>
+                        </span>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div className="k-widget k-panelbar" dir="rtl">
+                    <div className="k-item k-expanded">
+                        <span className="k-link k-header">
+                            First expanded
+                            <Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div>
+                            <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>
+                        </div>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header">Middle</span>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header">Last</span>
+                    </div>
+                </div>
+            </section>
+
+            <section>
+                <div className="k-widget k-panelbar" dir="rtl">
+                    <div className="k-item">
+                        <span className="k-link k-header">First</span>
+                    </div>
+                    <div className="k-item">
+                        <span className="k-link k-header">Middle</span>
+                    </div>
+                    <div className="k-item k-expanded">
+                        <span className="k-link k-header">
+                            Last expanded
+                            <Icon className="k-panelbar-collapse" name="arrow-chevron-up" />
+                        </span>
+                        <div>
+                            <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>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+        </div>
+    </>
+);