@progress/kendo-themes-html 5.6.1-dev.6 → 5.8.0

package/src/pager/tests/pager.tsx

@@ -15,8 +15,8 @@ root.render(
             <span>LTR</span>
             <section>
                 <div className="k-pager k-widget">
-                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-focus"><Icon name="arrow-w" /></a>
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                    <a className="k-link k-pager-nav k-focus"><Icon name="caret-alt-left" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option>1</option>
@@ -30,45 +30,45 @@ root.render(
                             <li><a className="k-link k-selected k-focus">6</a></li>
                         </ul>
                     </div>
-                    <a className="k-link k-pager-nav k-hover"><Icon name="arrow-e" /></a>
-                    <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                    <a className="k-link k-pager-nav k-hover"><Icon name="caret-alt-right" /></a>
+                    <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                     <span className="k-pager-sizes k-label">
                         <DropdownList value="20" />
                         items per page
                     </span>
 
-                    <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                    <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                     <span className="k-pager-info k-label">1 - 20 of 91 items</span>
                 </div>
             </section>
             <section>
                 <div className="k-pager k-widget k-focus">
-                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                     <span className="k-pager-input k-label">
                         Page
                         <Textbox showClearButton={false} value="999" />
                         of 8
                     </span>
-                    <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                    <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                    <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                    <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                     <span className="k-pager-sizes k-label">
                         <DropdownList value="20" />
                         items per page
                     </span>
 
-                    <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                    <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                     <span className="k-pager-info k-label">1 - 20 of 91 items</span>
                 </div>
             </section>
             <section>
                 <div className="k-pager k-widget">
-                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option>1</option>
@@ -81,15 +81,15 @@ root.render(
                             <li><a className="k-link">5</a></li>
                         </ul>
                     </div>
-                    <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                    <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                    <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                    <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                     <span className="k-pager-sizes k-label">
                         <DropdownList value="20" />
                         items per page
                     </span>
 
-                    <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                    <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                     <span className="k-pager-info k-label">1 - 20 of 91 items</span>
                 </div>
@@ -99,8 +99,8 @@ root.render(
             <span>RTL</span>
             <section>
                 <div className="k-pager k-widget" dir="rtl">
-                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option>1</option>
@@ -113,45 +113,45 @@ root.render(
                             <li><a className="k-link">5</a></li>
                         </ul>
                     </div>
-                    <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                    <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                    <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                    <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                     <span className="k-pager-sizes k-label">
                         <DropdownList value="20" />
                         items per page
                     </span>
 
-                    <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                    <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                     <span className="k-pager-info k-label">1 - 20 of 91 items</span>
                 </div>
             </section>
             <section>
                 <div className="k-pager k-widget" dir="rtl">
-                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                     <span className="k-pager-input k-label">
                         Page
                         <Textbox showClearButton={false} value="999" />
                         of 8
                     </span>
-                    <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                    <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                    <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                    <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                     <span className="k-pager-sizes k-label">
                         <DropdownList value="20" />
                         items per page
                     </span>
 
-                    <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                    <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                     <span className="k-pager-info k-label">1 - 20 of 91 items</span>
                 </div>
             </section>
             <section>
                 <div className="k-pager k-widget" dir="rtl">
-                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="arrow-end-left" /></a>
-                    <a className="k-link k-pager-nav k-disabled"><Icon name="arrow-w" /></a>
+                    <a className="k-link k-pager-nav k-pager-first k-disabled"><Icon name="caret-alt-to-left" /></a>
+                    <a className="k-link k-pager-nav k-disabled"><Icon name="caret-alt-left" /></a>
                     <div className="k-pager-numbers-wrap">
                         <select className="k-picker k-dropdown-list k-dropdown">
                             <option>1</option>
@@ -164,15 +164,15 @@ root.render(
                             <li><a className="k-link">5</a></li>
                         </ul>
                     </div>
-                    <a className="k-link k-pager-nav"><Icon name="arrow-e" /></a>
-                    <a className="k-link k-pager-nav k-pager-last"><Icon name="arrow-end-right" /></a>
+                    <a className="k-link k-pager-nav"><Icon name="caret-alt-right" /></a>
+                    <a className="k-link k-pager-nav k-pager-last"><Icon name="caret-alt-to-right" /></a>
 
                     <span className="k-pager-sizes k-label">
                         <DropdownList value="20" />
                         items per page
                     </span>
 
-                    <a className="k-pager-refresh k-link"><Icon name="reload" /></a>
+                    <a className="k-pager-refresh k-link"><Icon name="arrow-rotate-cw" /></a>
 
                     <span className="k-pager-info k-label">1 - 20 of 91 items</span>
                 </div>

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

@@ -52,8 +52,8 @@ root.render(
                             <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                         </span>
                     </div>
-                    <div className="k-item">
-                        <span className="k-link k-header k-disabled">
+                    <div className="k-item k-disabled">
+                        <span className="k-link k-header">
                             Root disabled
                             <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                         </span>
@@ -118,8 +118,8 @@ root.render(
                                         </div>
                                     </div>
                                 </div>
-                                <div className="k-item">
-                                    <span className="k-link k-disabled">
+                                <div className="k-item k-disabled">
+                                    <span className="k-link">
                                         Child disabled
                                         <Icon className="k-panelbar-expand" name="arrow-chevron-down" />
                                     </span>

package/src/pdf-viewer/tests/pdf-viewer-blank-page-blazor.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { Textbox } from '../../textbox';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area .k-pdf-viewer {
+        height: 600px;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <div className="k-widget k-pdf-viewer">
+                <div className="k-toolbar k-widget k-toolbar-resizable">
+                    <div className="k-pager">
+                        <Button fillMode="flat" icon="arrow-end-left" className="k-pager-nav k-pager-first"></Button>
+                        <Button fillMode="flat" icon="arrow-60-left" className="k-pager-nav"></Button>
+                        <span className="k-pager-input k-label"><Textbox />of 4 pages</span>
+                        <Button fillMode="flat" icon="arrow-60-right" className="k-pager-nav"></Button>
+                        <Button fillMode="flat" icon="arrow-end-right" className="k-pager-nav k-pager-last"></Button>
+                    </div>
+                    <span className="k-spacer"></span>
+                    <Button fillMode="flat" icon="file-pdf"></Button>
+                    <Button fillMode="flat" icon="print"></Button>
+                    <Button fillMode="flat" icon="fullscreen"></Button>
+                </div>
+                <div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
+                    <div className="k-pdf-viewer-pages">
+                        <div className="k-page k-blank-page">
+                            <Icon name="folder-open"></Icon>
+                            <div className="k-upload">
+                                <div className="k-dropzone">
+                                    <Button className="k-upload-button">Select files...</Button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+);

package/src/pdf-viewer/tests/pdf-viewer-blank-page.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { Textbox } from '../../textbox';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area .k-pdf-viewer {
+        height: 600px;
+    }
+    .k-dropzone {
+        gap: 8px;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <div className="k-widget k-pdf-viewer">
+                <div className="k-toolbar k-widget k-toolbar-resizable">
+                    <div className="k-pager">
+                        <Button fillMode="flat" icon="arrow-end-left" className="k-pager-nav k-pager-first"></Button>
+                        <Button fillMode="flat" icon="arrow-60-left" className="k-pager-nav"></Button>
+                        <span className="k-pager-input k-label"><Textbox />of 4 pages</span>
+                        <Button fillMode="flat" icon="arrow-60-right" className="k-pager-nav"></Button>
+                        <Button fillMode="flat" icon="arrow-end-right" className="k-pager-nav k-pager-last"></Button>
+                    </div>
+                    <span className="k-spacer"></span>
+                    <Button fillMode="flat" icon="file-pdf"></Button>
+                    <Button fillMode="flat" icon="print"></Button>
+                    <Button fillMode="flat" icon="fullscreen"></Button>
+                </div>
+                <div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
+                    <div className="k-pdf-viewer-pages">
+                        <div className="k-page k-blank-page">
+                            <div className="k-external-dropzone">
+                                <div className="k-dropzone-inner">
+                                    <Icon name="upload" />
+                                    <span className="k-dropzone-hint">Drag and drop files here to upload</span>
+                                </div>
+                            </div>
+                            <div className="k-upload">
+                                <div className="k-dropzone">
+                                    <Button className="k-upload-button">Select files...</Button>
+                                    <em className="k-dropzone-hint">Drop files here to upload</em>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+);

package/src/pdf-viewer/tests/pdf-viewer-search-panel.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { Textbox } from '../../textbox';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    #test-area .k-pdf-viewer {
+        height: 600px;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            <div className="k-widget k-pdf-viewer">
+                <div className="k-toolbar k-widget k-toolbar-resizable">
+                    <div className="k-pager">
+                        <Button fillMode="flat" icon="arrow-end-left" className="k-pager-nav k-pager-first"></Button>
+                        <Button fillMode="flat" icon="arrow-60-left" className="k-pager-nav"></Button>
+                        <span className="k-pager-input k-label"><Textbox />of 4 pages</span>
+                        <Button fillMode="flat" icon="arrow-60-right" className="k-pager-nav"></Button>
+                        <Button fillMode="flat" icon="arrow-end-right" className="k-pager-nav k-pager-last"></Button>
+                    </div>
+                    <span className="k-spacer"></span>
+                    <Button fillMode="flat" icon="file-pdf"></Button>
+                    <Button fillMode="flat" icon="print"></Button>
+                    <Button fillMode="flat" icon="fullscreen"></Button>
+                </div>
+                <div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
+                    <div className="k-search-panel k-pos-sticky k-top-center">
+                        <Button fillMode="flat" icon="handler-drag" className="k-search-dialog-draghandle"></Button>
+                        <Textbox
+                            suffix={
+                                <Button fillMode="flat" className="k-match-case-button" icon="convert-lowercase"></Button>
+                            }
+                        />
+                        <span className="k-search-matches">
+                            <span>0</span> of <span>1</span>
+                        </span>
+                        <Button fillMode="flat" icon="arrow-up"></Button>
+                        <Button fillMode="flat" icon="arrow-down"></Button>
+                        <Button fillMode="flat" icon="close"></Button>
+                    </div>
+                    <div className="k-pdf-viewer-pages">
+                        <div className="k-page" style={{ width: "720px", height: "360px" }}></div>
+                        <div className="k-page" style={{ width: "720px", height: "360px" }}></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+);

package/src/pdf-viewer/tests/pdf-viewer.tsx

@@ -32,9 +32,11 @@ root.render(
                     <Button fillMode="flat" icon="print"></Button>
                     <Button fillMode="flat" icon="fullscreen"></Button>
                 </div>
-                <div className="k-canvas k-list-scroller">
-                    <div className="k-page" style={{ width: "720px", height: "360px" }}></div>
-                    <div className="k-page" style={{ width: "720px", height: "360px" }}></div>
+                <div className="k-canvas k-pdf-viewer-canvas k-pos-relative k-overflow-auto">
+                    <div className="k-pdf-viewer-pages">
+                        <div className="k-page" style={{ width: "720px", height: "360px" }}></div>
+                        <div className="k-page" style={{ width: "720px", height: "360px" }}></div>
+                    </div>
                 </div>
             </div>
         </div>

package/src/pivotgrid/tests/pivotgrid-column-menus.tsx

@@ -260,7 +260,7 @@ root.render(
                                         <div className="k-animation-container">
                                             <div className="k-child-animation-container">
                                                 <div className="kendo-grid-filter-menu-container">
-                                                    <form className="k-filter-menu k-group k-reset k-state-border-up">
+                                                    <form className="k-filter-menu k-group k-reset">
                                                         <div className="k-filter-menu-container">
                                                             <DropdownList value="Contains" />
                                                             <Textbox />