@progress/kendo-themes-html 5.5.1-dev.1 → 5.6.1-dev.0

package/src/datepicker/tests/datepicker-adaptive.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { Calendar } from '../../calendar';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-actionsheet-container {
+        width: 100%;
+        height: 600px;
+        position: relative;
+        transform: translateZ(0);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>partial</span>
+            <span>full screen</span>
+
+            <section>
+                <div className="k-actionsheet-container">
+                    <div className="k-overlay"></div>
+
+                    <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
+                        <div className="k-actionsheet-titlebar">
+                            <div className="k-actionsheet-title k-text-center">
+                                <div>Select dates</div>
+                                <div className="k-text-muted">DD / MM / YY</div>
+                            </div>
+                            <div className="k-actionsheet-actions">
+                                <Button icon="x" fillMode="flat"></Button>
+                            </div>
+                        </div>
+                        <div className="k-actionsheet-content">
+                            <Calendar size="large"></Calendar>
+                        </div>
+                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
+                            <Button size="large" themeColor="primary">Select date</Button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <div className="k-actionsheet-container">
+                    <div className="k-overlay"></div>
+
+                    <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
+                        <div className="k-actionsheet-titlebar">
+                            <div className="k-actionsheet-title k-text-center">
+                                <div>Select dates</div>
+                                <div className="k-text-muted">DD / MM / YY</div>
+                            </div>
+                            <div className="k-actionsheet-actions">
+                                <Button icon="x" fillMode="flat"></Button>
+                            </div>
+                        </div>
+                        <div className="k-actionsheet-content">
+                            <Calendar size="large"></Calendar>
+                        </div>
+                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
+                            <Button size="large" themeColor="primary">Select date</Button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+    </>
+);

package/src/dropdownlist/tests/dropdownlist-adaptive.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { List, ListItem } from '../../list';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-actionsheet-container {
+        width: 100%;
+        height: 600px;
+        position: relative;
+        transform: translateZ(0);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>partial</span>
+            <span>full screen</span>
+
+            <section>
+                <div className="k-actionsheet-container">
+                    <div className="k-overlay"></div>
+
+                    <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
+                        <div className="k-actionsheet-titlebar">
+                            <div className="k-actionsheet-title k-text-center">
+                                <div>Dropdownlist label</div>
+                            </div>
+                            <div className="k-actionsheet-actions">
+                                <Button icon="x" fillMode="flat"></Button>
+                            </div>
+                        </div>
+                        <div className="k-actionsheet-content">
+                            <List size="large">
+                                <ListItem>List item</ListItem>
+                                <ListItem hover>Hover</ListItem>
+                                <ListItem focus>Focus</ListItem>
+                                <ListItem selected>Selected</ListItem>
+                                <ListItem hover selected>Hover selected</ListItem>
+                                <ListItem disabled>Disabled</ListItem>
+                                <ListItem>List item with very long text, that spans on multiple lines</ListItem>
+                                <ListItem showCheckbox>Checkbox</ListItem>
+                                <ListItem showIcon iconName="cog">Icon</ListItem>
+                                <ListItem showCheckbox showIcon iconName="cog">Checkbox icon</ListItem>
+                            </List>
+                        </div>
+                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
+                            <Button size="large" themeColor="primary">Select date</Button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <div className="k-actionsheet-container">
+                    <div className="k-overlay"></div>
+
+                    <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
+                        <div className="k-actionsheet-titlebar">
+                            <div className="k-actionsheet-title k-text-center">
+                                <div>Dropdownlist label</div>
+                            </div>
+                            <div className="k-actionsheet-actions">
+                                <Button icon="x" fillMode="flat"></Button>
+                            </div>
+                        </div>
+                        <div className="k-actionsheet-content">
+                            <List size="large">
+                                <ListItem>List item</ListItem>
+                                <ListItem hover>Hover</ListItem>
+                                <ListItem focus>Focus</ListItem>
+                                <ListItem selected>Selected</ListItem>
+                                <ListItem hover selected>Hover selected</ListItem>
+                                <ListItem disabled>Disabled</ListItem>
+                                <ListItem>List item with very long text, that spans on multiple lines</ListItem>
+                                <ListItem showCheckbox>Checkbox</ListItem>
+                                <ListItem showIcon iconName="cog">Icon</ListItem>
+                                <ListItem showCheckbox showIcon iconName="cog">Checkbox icon</ListItem>
+                            </List>
+                        </div>
+                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
+                            <Button size="large" themeColor="primary">Select date</Button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+    </>
+);

package/src/progressbar/tests/circular-progressbar-angular.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const style = `
+    #test-area {
+        justify-items: center;
+    }
+`;
+
+root.render(
+    <>
+        <style>{style}</style>
+        <div id="test-area">
+            <div style={{ width: "200px", height: "200px" }} className="k-circular-progressbar">
+                <div className="k-circular-progressbar-surface">
+                    <div>
+                        <svg>
+                            <g>
+                                <circle strokeWidth="9.5" className="k-circular-progressbar-scale" r="90" cx="100" cy="100"></circle>
+                                <circle style={{ strokeDasharray: "565.487", strokeDashoffset: "989.602" }} strokeWidth="9.5" className="k-circular-progressbar-arc" r="90" cx="100" cy="100"></circle>
+                            </g>
+                        </svg>
+                        <div style={{ left: "70.5px", top: "91px" }} className="k-circular-progressbar-label">
+                            value: 75
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>
+);

package/src/time-selector/index.ts

@@ -0,0 +1 @@
+export * from './time-selector';

package/src/time-selector/time-selector.tsx

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import { classNames, kendoThemeMaps } from '../utils';
+import { Button } from '../button';
+
+export interface TimeSelectorProps {
+    className?: string;
+    value?: string;
+    size?: null | 'small' | 'medium' | 'large';
+    disabled?: boolean;
+}
+
+export class TimeSelector extends React.Component<TimeSelectorProps> {
+
+    static defaultProps = {
+        size: 'medium'
+    };
+
+    render() {
+
+        const {
+            className,
+            size
+        } = this.props;
+
+        return (
+            <div
+                className={classNames(
+                    className,
+                    'k-timeselector',
+                    {
+                        [`k-timeselector-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
+                    }
+
+                )}>
+                <div className="k-time-part">
+                    <div className="k-time-header">
+                        <span className="k-title">10:00:00 AM</span>
+                        <Button fillMode="flat" className="k-time-now">Now</Button>
+                    </div>
+                    <div className="k-time-list-container">
+                        <span className="k-time-highlight"></span>
+                        <div className="k-time-list-wrapper">
+                            <span className="k-title">Hour</span>
+                            <div className="k-time-list">
+                                <div className="k-content k-scrollable k-time-container">
+                                    <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
+                                        <li className="k-item">
+                                            <span>0</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>1</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>2</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>3</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>4</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>5</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>6</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>7</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>8</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>9</span>
+                                        </li>
+                                    </ul>
+                                    <div className="k-scrollable-placeholder"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="k-time-separator">:</div>
+                        <div className="k-time-list-wrapper k-state-focused">
+                            <span className="k-title">Minute</span>
+                            <div className="k-time-list">
+                                <div className="k-content k-scrollable k-time-container">
+                                    <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
+                                        <li className="k-item">
+                                            <span>0</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>1</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>2</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>3</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>4</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>5</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>6</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>7</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>8</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>9</span>
+                                        </li>
+                                    </ul>
+                                    <div className="k-scrollable-placeholder"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="k-time-separator">:</div>
+                        <div className="k-time-list-wrapper">
+                            <span className="k-title">Second</span>
+                            <div className="k-time-list">
+                                <div className="k-content k-scrollable k-time-container">
+                                    <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
+                                        <li className="k-item">
+                                            <span>0</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>1</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>2</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>3</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>4</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>5</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>6</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>7</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>8</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>9</span>
+                                        </li>
+                                    </ul>
+                                    <div className="k-scrollable-placeholder"></div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="k-time-separator">:</div>
+                        <div className="k-time-list-wrapper">
+                            <span className="k-title">AM/PM</span>
+                            <div className="k-time-list">
+                                <div className="k-content k-scrollable k-time-container">
+                                    <ul className="k-reset" style={{ transform: "translateY(97px)" }}>
+                                        <li className="k-item">
+                                            <span>AM</span>
+                                        </li>
+                                        <li className="k-item">
+                                            <span>PM</span>
+                                        </li>
+                                    </ul>
+                                    <div className="k-scrollable-placeholder"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}

package/src/timepicker/tests/timepicker-adaptive.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Button } from '../../button';
+import { TimeSelector } from '../../time-selector';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    .k-actionsheet-container {
+        width: 100%;
+        height: 600px;
+        position: relative;
+        transform: translateZ(0);
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>partial</span>
+            <span>full screen</span>
+
+            <section>
+                <div className="k-actionsheet-container">
+                    <div className="k-overlay"></div>
+
+                    <div className="k-actionsheet k-actionsheet-bottom k-adaptive-actionsheet">
+                        <div className="k-actionsheet-titlebar">
+                            <div className="k-actionsheet-title k-text-center">
+                                <div>Select dates</div>
+                                <div className="k-text-muted">DD / MM / YY</div>
+                            </div>
+                            <div className="k-actionsheet-actions">
+                                <Button icon="x" fillMode="flat"></Button>
+                            </div>
+                        </div>
+                        <div className="k-actionsheet-content">
+                            <TimeSelector size="large"></TimeSelector>
+                        </div>
+                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
+                            <Button size="large" themeColor="primary">Select date</Button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            <section>
+                <div className="k-actionsheet-container">
+                    <div className="k-overlay"></div>
+
+                    <div className="k-actionsheet k-actionsheet-bottom k-actionsheet-fullscreen k-adaptive-actionsheet">
+                        <div className="k-actionsheet-titlebar">
+                            <div className="k-actionsheet-title k-text-center">
+                                <div>Select dates</div>
+                                <div className="k-text-muted">DD / MM / YY</div>
+                            </div>
+                            <div className="k-actionsheet-actions">
+                                <Button icon="x" fillMode="flat"></Button>
+                            </div>
+                        </div>
+                        <div className="k-actionsheet-content">
+                            <TimeSelector size="large"></TimeSelector>
+                        </div>
+                        <div className="k-actionsheet-footer k-actions k-actions-stretched">
+                            <Button size="large" themeColor="primary">Select date</Button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+    </>
+);