npm - @progress/kendo-themes-html - Versions diffs - 6.2.1-dev.154 → 6.2.1-dev.170 - Mend

@progress/kendo-themes-html 6.2.1-dev.154 → 6.2.1-dev.170

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

package/src/grid/tests/grid-column-menu-tabbed.tsx ADDED Viewed

@@ -0,0 +1,337 @@
+import ReactDOM from 'react-dom/client';
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { DropdownList } from '../../dropdownlist';
+import { Icon } from '../../icon';
+import { Searchbox } from '../../searchbox';
+import { Textbox } from '../../textbox';
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+const styles = `
+    .k-animation-container,
+    .k-popup {
+        position: relative;
+        overflow: visible;
+    }
+    .k-grid-columnmenu-popup {
+        width: 100%;
+    }
+`;
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+            <span>Tab Filter</span>
+            <span>Tab More</span>
+            <span>Tab Column Visibility</span>
+            <section>
+                <div className="k-animation-container">
+                    <div className="k-column-menu k-column-menu-tabbed k-popup k-grid-columnmenu-popup">
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon name="filter" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon name="more-horizontal" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon name="columns" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <form className="k-filter-menu k-group k-reset">
+                                    <div className="k-filter-menu-container">
+                                        <DropdownList value="Contains" />
+                                        <Textbox placeholder="Filter..." />
+                                        <DropdownList value="And" className="k-filter-and" />
+                                        <DropdownList value="Contains" />
+                                        <Textbox placeholder="Filter..." />
+                                        <ActionButtons>
+                                            <Button themeColor="primary">Filter</Button>
+                                            <Button>Clear</Button>
+                                        </ActionButtons>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <div className="k-animation-container">
+                    <div className="k-column-menu k-column-menu-tabbed k-popup k-grid-columnmenu-popup">
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon name="filter" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon name="more-horizontal" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon name="columns" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <div className="k-columnmenu-item-wrapper">
+                                    <div className="k-columnmenu-item">
+                                        <Icon name="group" />Group Column
+                                    </div>
+                                </div>
+                                <div className="k-columnmenu-item-wrapper">
+                                    <div className="k-columnmenu-item">
+                                        <Icon name="sort-asc-small" />Sort Ascending
+                                    </div>
+                                    <div className="k-columnmenu-item">
+                                        <Icon name="sort-desc-small" />Sort Descending
+                                    </div>
+                                </div>
+                                <div className="k-columnmenu-item-wrapper">
+                                    <div className="k-columnmenu-item">
+                                        <Icon name="max-width" />Autosize This Column
+                                    </div>
+                                    <div className="k-columnmenu-item">
+                                        <Icon name="display-inline-flex" />Autosize All Columns
+                                    </div>
+                                </div>
+                                <div className="k-columnmenu-item-wrapper">
+                                    <div className="k-expander">
+                                        <div className="k-columnmenu-item">
+                                            <Icon name="set-column-position" />Set Column Position
+                                            <span className="k-spacer"></span>
+                                            <Icon className="k-expander-indicator" name="arrow-chevron-down" />
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <div className="k-animation-container">
+                    <div className="k-column-menu k-column-menu-tabbed k-popup k-grid-columnmenu-popup">
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon name="filter" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon name="more-horizontal" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon name="columns" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <form className="k-filter-menu k-group k-reset">
+                                    <div className="k-filter-menu-container">
+                                        <Searchbox placeholder="Search..." />
+                                        <ul className="k-reset k-multicheck-wrap">
+                                            <li className="k-item k-check-all-wrap">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>(Select all)</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                            <li className="k-item">
+                                                <label className="k-label k-checkbox-label">
+                                                    <Checkbox /><span>Column Name</span>
+                                                </label>
+                                            </li>
+                                        </ul>
+                                        <div className="k-filter-selected-items">0 selected items</div>
+                                        <ActionButtons>
+                                            <Button themeColor="primary">Apply</Button>
+                                            <Button>Reset</Button>
+                                        </ActionButtons>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <span>2 Tab Set</span>
+            <span>Single Tab Set</span>
+            <span></span>
+            <section>
+                <div className="k-animation-container">
+                    <div className="k-column-menu k-column-menu-tabbed k-popup k-grid-columnmenu-popup">
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon name="filter" />
+                                        </span>
+                                    </li>
+                                    <li className="k-item">
+                                        <span className="k-link">
+                                            <Icon name="more-horizontal" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <form className="k-filter-menu k-group k-reset">
+                                    <div className="k-filter-menu-container">
+                                        <DropdownList value="Contains" />
+                                        <Textbox placeholder="Filter..." />
+                                        <DropdownList value="And" className="k-filter-and" />
+                                        <DropdownList value="Contains" />
+                                        <Textbox placeholder="Filter..." />
+                                        <ActionButtons>
+                                            <Button themeColor="primary">Filter</Button>
+                                            <Button>Clear</Button>
+                                        </ActionButtons>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <div className="k-animation-container">
+                    <div className="k-column-menu k-column-menu-tabbed k-popup k-grid-columnmenu-popup">
+                        <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                            <div className="k-tabstrip-items-wrapper k-hstack">
+                                <ul className="k-reset k-tabstrip-items">
+                                    <li className="k-item k-active">
+                                        <span className="k-link">
+                                            <Icon name="filter" />
+                                        </span>
+                                    </li>
+                                </ul>
+                            </div>
+                            <div className="k-tabstrip-content k-active">
+                                <form className="k-filter-menu k-group k-reset">
+                                    <div className="k-filter-menu-container">
+                                        <DropdownList value="Contains" />
+                                        <Textbox placeholder="Filter..." />
+                                        <DropdownList value="And" className="k-filter-and" />
+                                        <DropdownList value="Contains" />
+                                        <Textbox placeholder="Filter..." />
+                                        <ActionButtons>
+                                            <Button themeColor="primary">Filter</Button>
+                                            <Button>Clear</Button>
+                                        </ActionButtons>
+                                    </div>
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </>
+);

package/src/grid/tests/grid-column-menu.tsx CHANGED Viewed

@@ -107,8 +107,8 @@ root.render(
                                         </div>
                                     </div>
                                     <ActionButtons alignment="stretched">
-                                        <Button>Reset</Button>
                                         <Button themeColor="primary">Apply</Button>
+                                        <Button>Reset</Button>
                                     </ActionButtons>
                                 </div>
                             </div>
@@ -186,8 +186,8 @@ root.render(
                                         </div>
                                     </div>
                                     <ActionButtons alignment="stretched">
-                                        <Button>Reset</Button>
                                         <Button themeColor="primary">Apply</Button>
+                                        <Button>Reset</Button>
                                     </ActionButtons>
                                 </div>
                             </div>
@@ -316,8 +316,8 @@ root.render(
                                             <DropdownList value="Contains" />
                                             <Textbox placeholder="Filter..." />
                                             <ActionButtons alignment="stretched">
-                                                <Button>Clear</Button>
                                                 <Button themeColor="primary">Filter</Button>
+                                                <Button>Clear</Button>
                                             </ActionButtons>
                                         </div>
                                     </form>
@@ -381,8 +381,8 @@ root.render(
                                             </ul>
                                             <div className="k-filter-selected-items">0 selected items</div>
                                             <ActionButtons alignment="stretched">
-                                                <Button>Clear</Button>
                                                 <Button themeColor="primary">Filter</Button>
+                                                <Button>Clear</Button>
                                             </ActionButtons>
                                         </div>
                                     </form>

package/src/grid/tests/grid-editing-popup.tsx CHANGED Viewed

@@ -1,10 +1,11 @@
 import ReactDOM from 'react-dom/client';
 import { Window } from '../../window';
 import { Checkbox } from '../../checkbox';
-import { Icon } from '../../icon';
 import { NumericTextbox } from '../../numerictextbox';
 import { Textbox } from '../../textbox';
-import { Upload, UploadFile } from '../../upload';
+import { Button } from '../../button';
+import { DropdownList } from '../../dropdownlist';
+import { DatePicker } from '../../datepicker';
 import { Form, FormField } from '../../form';
 const root = ReactDOM.createRoot(
@@ -16,7 +17,7 @@ const styles = `
         width: 500px;
     }
     .k-window {
-        width: 100%;
+        min-width: 400px;
         position: relative;
     }
 `;
@@ -27,36 +28,23 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-1">
             <section>
-                <Window title="Edit" actions={[ 'close' ]} actionButtons actionButtonsAlign="end">
-                    <Form tag="div" orientation="horizontal" >
-                        <FormField label="Product Name" editor={ <Textbox value="Chai" /> } />
-                        <FormField label="Unit Price" editor={
+                <Window title="Edit task" actions={[ 'minimize', 'maximize', 'close' ]} actionButtonsAlign="start" actionButtons={
+                    <>
+                        <Button themeColor="primary" icon="save">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                    </>
+                }>
+                    <Form tag="div" orientation="vertical">
+                        <FormField className="k-form-field-error" label="Text data field label" error="Error" editor={ <Textbox value="Invalid" invalid showClearButton /> } />
+                        <FormField label="Date data field label" editor={ <DatePicker placeholder="dd/MM/yyyy" /> } />
+                        <FormField label="Numeric data field label" editor={ <NumericTextbox placeholder="##,###" /> } />
+                        <FormField label=" " editor={
                             <>
-                                <NumericTextbox />
-                                <div className="k-tooltip k-tooltip-error k-validator-tooltip k-invalid-msg">
-                                    <Icon className="k-tooltip-icon" name="warning" />
-                                    <span className="k-tooltip-content">Unit Price is required</span>
-                                    <span className="k-callout k-callout-n"></span>
-                                </div>
-                            </> }
-                        />
-                        <FormField label="Units In Stock" editor={ <NumericTextbox /> } />
-                        <FormField label="Discontinued" editor={
-                            <>
-                                <Checkbox id="Discontinued" />
-                                <label className="k-checkbox-label">&#8203;</label>
+                                <Checkbox checked />
+                                <label className="k-checkbox-label">Boolean data field label</label>
                             </>
                         } />
-                        <FormField label="Files" editor={
-                            <Upload async status="done">
-                                <UploadFile progress="100"
-                                    status="success"
-                                    name="67409197_2322469807839836_4126207508270284800_n.png"
-                                    icon="file-image"
-                                    size="24.34 KB" />
-                            </Upload>
-                        }
-                        />
+                        <FormField label="Boolean data field label" editor={ <DropdownList value="True" /> } />
                     </Form>
                 </Window>
             </section>

package/src/grid/tests/grid-filter-menu-multi-checkbox.tsx CHANGED Viewed

@@ -47,8 +47,8 @@ root.render(
                             </ul>
                             <div className="k-filter-selected-items">0 selected items</div>
                             <ActionButtons alignment="stretched">
-                                <Button>Clear</Button>
                                 <Button themeColor="primary">Filter</Button>
+                                <Button>Clear</Button>
                             </ActionButtons>
                         </div>
                     </form>
@@ -68,8 +68,8 @@ root.render(
                             </ul>
                             <div className="k-filter-selected-items">0 selected items</div>
                             <ActionButtons alignment="stretched">
-                                <Button>Clear</Button>
                                 <Button themeColor="primary">Filter</Button>
+                                <Button>Clear</Button>
                             </ActionButtons>
                         </div>
                     </form>
@@ -90,8 +90,8 @@ root.render(
                                 <li className="k-item"><label className="k-label k-checkbox-label"><Checkbox /><span>is undefined</span></label></li>
                             </ul>
                             <ActionButtons alignment="stretched">
-                                <Button>Clear</Button>
                                 <Button themeColor="primary">Filter</Button>
+                                <Button>Clear</Button>
                             </ActionButtons>
                         </div>
                     </form>
@@ -109,8 +109,8 @@ root.render(
                                 <li className="k-item"><label className="k-label k-checkbox-label"><Checkbox /><span>is undefined</span></label></li>
                             </ul>
                             <ActionButtons alignment="stretched">
-                                <Button>Clear</Button>
                                 <Button themeColor="primary">Filter</Button>
+                                <Button>Clear</Button>
                             </ActionButtons>
                         </div>
                     </form>

package/src/grid/tests/grid-filter-menu.tsx CHANGED Viewed

@@ -37,8 +37,8 @@ root.render(
                             <DropdownList value="Is equal to" />
                             <NumericTextbox />
                             <ActionButtons alignment="stretched">
-                                <Button>Clear</Button>
                                 <Button themeColor="primary">Filter</Button>
+                                <Button>Clear</Button>
                             </ActionButtons>
                         </div>
                     </form>

package/src/grid/tests/grid-rows-resizing.tsx CHANGED Viewed

@@ -10,7 +10,6 @@ const root = ReactDOM.createRoot(
 root.render(
     <>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
             <span className="col-2">Resizing Row / Hover</span>
@@ -100,7 +99,9 @@ root.render(
                                 </tr>
                             </tbody>
                         </table>
-                        <span className="k-row-resizer" style={{ top: "34px" }}></span>
+                        <span className="k-resizer-wrap k-hover" style={{ top: "34px" }}>
+                            <span className="k-row-resizer"></span>
+                        </span>
                     </div>
                 </div>
             </section>
@@ -192,7 +193,9 @@ root.render(
                                 </tr>
                             </tbody>
                         </table>
-                        <span className="k-row-resizer k-active" style={{ top: "54px" }}></span>
+                        <span className="k-resizer-wrap k-active" style={{ top: "54px" }}>
+                            <span className="k-row-resizer"></span>
+                        </span>
                     </div>
                 </div>
             </section>