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

package/src/gantt/tests/gantt-editing-popup-other.tsx

@@ -0,0 +1,92 @@
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { Window } from '../../window';
+import { Textarea } from '../../textarea';
+import { Textbox } from '../../textbox';
+import { DatePicker } from '../../datepicker';
+import { NumericTextbox } from '../../numerictextbox';
+import { Checkbox } from '../../checkbox';
+import { Form, FormField } from '../../form';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-window {
+        min-width: 580px;
+        position: relative;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <section>
+                <Window title="Edit task" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons={
+                    <>
+                        <Button icon="save" themeColor="primary">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button icon="delete" fillMode="flat" themeColor="primary">Delete</Button>
+                    </>
+                }>
+                    <div className="k-tabstrip k-tabstrip-top">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-reset k-tabstrip-items">
+                                <li className="k-item k-first">
+                                    <span className="k-link">General</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Resources</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Predecessors</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Successors</span>
+                                </li>
+                                <li className="k-item k-last k-active">
+                                    <span className="k-link">Other</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <Form orientation="vertical">
+                                <FormField
+                                    label="Notes"
+                                    optional
+                                    editor={ <Textarea placeholder="Placeholder" /> }
+                                />
+                                <FormField
+                                    label="Text data field label"
+                                    editor={ <Textbox placeholder="Placeholder" /> }
+                                />
+                                <FormField
+                                    label="Date data field label"
+                                    editor={ <DatePicker placeholder="dd/MM/yyyy" /> }
+                                />
+                                <FormField
+                                    label="Numeric data field label"
+                                    editor={ <NumericTextbox placeholder="##,##" /> }
+                                />
+                                <FormField
+                                    editor={
+                                        <>
+                                            <Checkbox checked />
+                                            <label className="k-checkbox-label">Boolean data field label</label>
+                                        </>
+                                    }
+                                />
+                            </Form>
+                        </div>
+                    </div>
+                </Window>
+            </section>
+
+
+        </div>
+    </>
+);

package/src/gantt/tests/gantt-editing-popup-predecessors.tsx

@@ -0,0 +1,113 @@
+import ReactDOM from 'react-dom/client';
+import { Window } from '../../window';
+import { DropdownList } from '../../dropdownlist';
+import { Toolbar } from '../../toolbar';
+import { Button } from '../../button';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-window {
+        min-width: 580px;
+        min-height: 500px;
+        position: relative;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <section>
+                <Window title="Edit task" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons={
+                    <>
+                        <Button icon="save" themeColor="primary">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button icon="delete" fillMode="flat" themeColor="primary">Delete</Button>
+                    </>
+                }>
+                    <div className="k-tabstrip k-tabstrip-top">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-reset k-tabstrip-items">
+                                <li className="k-item k-first">
+                                    <span className="k-link">General</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Resources</span>
+                                </li>
+                                <li className="k-item k-active">
+                                    <span className="k-link">Predecessors</span>
+                                </li>
+                                <li className="k-item k-last">
+                                    <span className="k-link">Successors</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <div className="k-grid k-grid-md k-grid-no-scrollbar">
+                                <Toolbar className="k-grid-toolbar">
+                                    <Button icon="add">Add</Button>
+                                    <Button icon="minus">Remove</Button>
+                                </Toolbar>
+                                <div className="k-grid-header">
+                                    <div className="k-grid-header-wrap">
+                                        <table className="k-table k-table-md k-grid-header-table">
+                                            <colgroup>
+                                                <col/>
+                                                <col/>
+                                            </colgroup>
+                                            <thead className="k-table-thead">
+                                                <tr className="k-table-row">
+                                                    <th className="k-table-th k-header">
+                                                        <span className="k-cell-inner">
+                                                            <span className="k-link">
+                                                                <span className="k-column-title">Name</span>
+                                                                <span className="k-sort-icon"><Icon name="sort-asc-small" /></span>
+                                                            </span>
+                                                        </span>
+                                                    </th>
+                                                    <th className="k-table-th k-header">
+                                                        <span className="k-cell-inner">
+                                                            <span className="k-link">
+                                                                <span className="k-column-title">Type</span>
+                                                                <span className="k-sort-icon"><Icon name="sort-asc-small" /></span>
+                                                            </span>
+                                                        </span>
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                        </table>
+                                    </div>
+                                </div>
+                                <div className="k-grid-content">
+                                    <table className="k-table k-table-md k-grid-table">
+                                        <colgroup>
+                                            <col/>
+                                            <col/>
+                                        </colgroup>
+                                        <tbody className="k-table-tbody">
+                                            <tr className="k-table-row">
+                                                <td className="k-table-td">
+                                                    <DropdownList placeholder="-Select task-"/>
+                                                </td>
+                                                <td className="k-table-td">
+                                                    <DropdownList placeholder="Finish-Start"/>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Window>
+            </section>
+
+        </div>
+    </>
+);

package/src/gantt/tests/gantt-editing-popup-resources.tsx

@@ -0,0 +1,180 @@
+import ReactDOM from 'react-dom/client';
+import { Window } from '../../window';
+import { NumericTextbox } from '../../numerictextbox';
+import { DropdownList } from '../../dropdownlist';
+import { Toolbar } from '../../toolbar';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-window {
+        min-width: 580px;
+        position: relative;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <section>
+                <Window title="Edit task" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons={
+                    <>
+                        <Button icon="save" themeColor="primary">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button icon="delete" fillMode="flat" themeColor="primary">Delete</Button>
+                    </>
+                }>
+                    <div className="k-tabstrip k-tabstrip-top">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-reset k-tabstrip-items">
+                                <li className="k-item k-first">
+                                    <span className="k-link">General</span>
+                                </li>
+                                <li className="k-item k-active">
+                                    <span className="k-link">Resources</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Predecessors</span>
+                                </li>
+                                <li className="k-item k-last">
+                                    <span className="k-link">Successors</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <div className="k-grid k-grid-md k-grid-no-scrollbar">
+                                <Toolbar className="k-grid-toolbar">
+                                    <Button icon="add">Add</Button>
+                                    <Button icon="minus">Remove</Button>
+                                </Toolbar>
+                                <div className="k-grid-header">
+                                    <div className="k-grid-header-wrap">
+                                        <table className="k-table k-table-md k-grid-header-table">
+                                            <colgroup>
+                                                <col style={{ width: "42px" }}/>
+                                                <col/>
+                                                <col/>
+                                            </colgroup>
+                                            <thead className="k-table-thead">
+                                                <tr className="k-table-row">
+                                                    <th className="k-table-th k-header">
+                                                        <span className="k-checkbox-wrap">
+                                                            <Checkbox />
+                                                        </span>
+                                                        <label className="k-checkbox-label"></label>
+                                                    </th>
+                                                    <th className="k-table-th k-header k-filterable">
+                                                        <span className="k-cell-inner">
+                                                            <span className="k-link">
+                                                                <span className="k-column-title">Resources</span>
+                                                                <span className="k-sort-icon"><Icon name="sort-asc-small" /></span>
+                                                            </span>
+                                                            <div><a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon name="filter" /></a></div>
+                                                        </span>
+                                                    </th>
+                                                    <th className="k-table-th k-header k-filterable">
+                                                        <span className="k-cell-inner">
+                                                            <span className="k-link">
+                                                                <span className="k-column-title">Units</span>
+                                                                <span className="k-sort-icon"><Icon name="sort-asc-small" /></span>
+                                                            </span>
+                                                            <div><a href="#" className="k-grid-filter-menu k-grid-header-menu"><Icon name="filter" /></a></div>
+                                                        </span>
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                        </table>
+                                    </div>
+                                </div>
+                                <div className="k-grid-content">
+                                    <table className="k-table k-table-md k-grid-table">
+                                        <colgroup>
+                                            <col style={{ width: "42px" }}/>
+                                            <col/>
+                                            <col/>
+                                        </colgroup>
+                                        <tbody className="k-table-tbody">
+                                            <tr className="k-table-row">
+                                                <td className="k-table-td">
+                                                    <span className="k-checkbox-wrap">
+                                                        <Checkbox />
+                                                        <label className="k-checkbox-label"></label>
+                                                    </span>
+                                                </td>
+                                                <td className="k-table-td">
+                                                    <DropdownList placeholder="-Select resource-"/>
+                                                </td>
+                                                <td className="k-table-td">
+                                                    <NumericTextbox value="40"/>
+                                                </td>
+                                            </tr>
+                                            <tr className="k-table-row k-table-alt-row k-alt">
+                                                <td className="k-table-td">
+                                                    <span className="k-checkbox-wrap">
+                                                        <Checkbox />
+                                                        <label className="k-checkbox-label"></label>
+                                                    </span>
+                                                </td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                            </tr>
+                                            <tr className="k-table-row">
+                                                <td className="k-table-td">
+                                                    <span className="k-checkbox-wrap">
+                                                        <Checkbox />
+                                                        <label className="k-checkbox-label"></label>
+                                                    </span>
+                                                </td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                            </tr>
+                                            <tr className="k-table-row k-table-alt-row k-alt">
+                                                <td className="k-table-td">
+                                                    <span className="k-checkbox-wrap">
+                                                        <Checkbox />
+                                                        <label className="k-checkbox-label"></label>
+                                                    </span>
+                                                </td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                            </tr>
+                                            <tr className="k-table-row">
+                                                <td className="k-table-td">
+                                                    <span className="k-checkbox-wrap">
+                                                        <Checkbox />
+                                                        <label className="k-checkbox-label"></label>
+                                                    </span>
+                                                </td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                            </tr>
+                                            <tr className="k-table-row k-table-alt-row k-alt">
+                                                <td className="k-table-td">
+                                                    <span className="k-checkbox-wrap">
+                                                        <Checkbox />
+                                                        <label className="k-checkbox-label"></label>
+                                                    </span>
+                                                </td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                                <td className="k-table-td">Grid Cell</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Window>
+            </section>
+
+        </div>
+    </>
+);

package/src/gantt/tests/gantt-editing-popup-successors.tsx

@@ -0,0 +1,113 @@
+import ReactDOM from 'react-dom/client';
+import { Window } from '../../window';
+import { DropdownList } from '../../dropdownlist';
+import { Toolbar } from '../../toolbar';
+import { Button } from '../../button';
+import { Icon } from '../../icon';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-window {
+        min-width: 580px;
+        min-height: 500px;
+        position: relative;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <section>
+                <Window title="Edit task" actions={[ 'window-minimize', 'window-maximize', 'close' ]} actionButtons={
+                    <>
+                        <Button icon="save" themeColor="primary">Save</Button>
+                        <Button icon="cancel">Cancel</Button>
+                        <span className="k-spacer"></span>
+                        <Button icon="delete" fillMode="flat" themeColor="primary">Delete</Button>
+                    </>
+                }>
+                    <div className="k-tabstrip k-tabstrip-top">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-reset k-tabstrip-items">
+                                <li className="k-item k-first">
+                                    <span className="k-link">General</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Resources</span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">Predecessors</span>
+                                </li>
+                                <li className="k-item k-last k-active">
+                                    <span className="k-link">Successors</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <div className="k-grid k-grid-md k-grid-no-scrollbar">
+                                <Toolbar className="k-grid-toolbar">
+                                    <Button icon="add">Add</Button>
+                                    <Button icon="minus">Remove</Button>
+                                </Toolbar>
+                                <div className="k-grid-header">
+                                    <div className="k-grid-header-wrap">
+                                        <table className="k-table k-table-md k-grid-header-table">
+                                            <colgroup>
+                                                <col/>
+                                                <col/>
+                                            </colgroup>
+                                            <thead className="k-table-thead">
+                                                <tr className="k-table-row">
+                                                    <th className="k-table-th k-header">
+                                                        <span className="k-cell-inner">
+                                                            <span className="k-link">
+                                                                <span className="k-column-title">Name</span>
+                                                                <span className="k-sort-icon"><Icon name="sort-asc-small" /></span>
+                                                            </span>
+                                                        </span>
+                                                    </th>
+                                                    <th className="k-table-th k-header">
+                                                        <span className="k-cell-inner">
+                                                            <span className="k-link">
+                                                                <span className="k-column-title">Type</span>
+                                                                <span className="k-sort-icon"><Icon name="sort-asc-small" /></span>
+                                                            </span>
+                                                        </span>
+                                                    </th>
+                                                </tr>
+                                            </thead>
+                                        </table>
+                                    </div>
+                                </div>
+                                <div className="k-grid-content">
+                                    <table className="k-table k-table-md k-grid-table">
+                                        <colgroup>
+                                            <col/>
+                                            <col/>
+                                        </colgroup>
+                                        <tbody className="k-table-tbody">
+                                            <tr className="k-table-row">
+                                                <td className="k-table-td">
+                                                    <DropdownList placeholder="-Select task-"/>
+                                                </td>
+                                                <td className="k-table-td">
+                                                    <DropdownList placeholder="Finish-Start"/>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </Window>
+            </section>
+
+        </div>
+    </>
+);

package/src/grid/tests/grid-column-menu-rtl.tsx

@@ -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>