@progress/kendo-themes-html 5.5.0 → 5.5.1-dev.2

package/src/signature/tests/signature.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { Signature } from '../../signature';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('app') as HTMLElement
+);
+
+const styles = `
+    div[dir="rtl"] {
+        display: flex;
+        justify-content: end;
+    }
+`;
+
+root.render(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+            <span>Signature</span>
+            <span>Signature RTL</span>
+
+            <div>
+                <Signature/>
+            </div>
+            <div dir="rtl">
+                <Signature/>
+            </div>
+
+            <div>
+                <Signature hover />
+            </div>
+            <div dir="rtl">
+                <Signature hover />
+            </div>
+
+            <div>
+                <Signature focus />
+            </div>
+            <div dir="rtl">
+                <Signature focus />
+            </div>
+
+            <div>
+                <Signature invalid />
+            </div>
+            <div dir="rtl">
+                <Signature invalid />
+            </div>
+
+            <div>
+                <Signature invalid focus />
+            </div>
+            <div dir="rtl">
+                <Signature invalid focus />
+            </div>
+
+            <div>
+                <Signature disabled />
+            </div>
+            <div dir="rtl">
+                <Signature disabled />
+            </div>
+
+            <div className="k-colspan-all k-col-span-full">
+                <Signature maximized />
+            </div>
+
+        </div>
+    </>
+);

package/src/switch/tests/switch-size-rounded.tsx

@@ -18,9 +18,9 @@ root.render(
         <div id="test-area" className="k-d-grid">
 
             <span><small>rounded / size</small></span>
-            <span className="k-colspan-2">small</span>
-            <span className="k-colspan-2">medium</span>
-            <span className="k-colspan-2">large</span>
+            <span className="k-colspan-2 k-col-span-2">small</span>
+            <span className="k-colspan-2 k-col-span-2">medium</span>
+            <span className="k-colspan-2 k-col-span-2">large</span>
 
             <span>null</span>
             <span>

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>
+
+    </>
+);

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

@@ -18,8 +18,8 @@ root.render(
     <>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-            <span className="k-colspan-all">Angular specific rendering and spacing</span>
-            <section className="k-colspan-all">
+            <span className="k-colspan-all k-col-span-full">Angular specific rendering and spacing</span>
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar">
                     <div style={toolbarStyle}>
                         <Button>Button</Button>

package/src/toolbar/tests/toolbar-popup-legacy.tsx

@@ -99,7 +99,7 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">rtl</span>
+            <span className="k-colspan-all k-col-span-full">rtl</span>
             <section className="k-rtl" dir="rtl">
                 <div className="k-animation-container k-overflow-wrapper">
                     <ul className="k-reset k-popup k-group k-list-container k-overflow-container">

package/src/toolbar/tests/toolbar-popup.tsx

@@ -85,7 +85,7 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">rtl</span>
+            <span className="k-colspan-all k-col-span-full">rtl</span>
             <section className="k-rtl" dir="rtl">
                 <div className="k-animation-container">
                     <div className="k-popup k-menu-popup">

package/src/toolbar/tests/toolbar.tsx

@@ -14,8 +14,8 @@ root.render(
     <>
         <div id="test-area" className="k-d-grid k-grid-cols-2">
 
-            <span className="k-colspan-all">Toolbar</span>
-            <section className="k-colspan-all">
+            <span className="k-colspan-all k-col-span-full">Toolbar</span>
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null}></Button>
                     <Button icon="bold"></Button>
@@ -38,8 +38,8 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">RTL</span>
-            <section className="k-colspan-all" dir="rtl">
+            <span className="k-colspan-all k-col-span-full">RTL</span>
+            <section className="k-colspan-all k-col-span-full" dir="rtl">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null}></Button>
                     <Button icon="bold"></Button>
@@ -63,8 +63,8 @@ root.render(
             </section>
 
 
-            <span className="k-colspan-all">Button states</span>
-            <section className="k-colspan-all">
+            <span className="k-colspan-all k-col-span-full">Button states</span>
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null} hover></Button>
                     <Button>Normal</Button>
@@ -82,7 +82,7 @@ root.render(
                     <Button icon="bold" disabled></Button>
                 </div>
             </section>
-            <section className="k-colspan-all">
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null} focus></Button>
                     <Button icon="align-left" className="k-toggle-button">Normal</Button>
@@ -93,7 +93,7 @@ root.render(
                     <Button icon="align-left" className="k-toggle-button" disabled>Disabled</Button>
                 </div>
             </section>
-            <section className="k-colspan-all">
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null} active></Button>
                     <Button themeColor="primary" icon="align-left">Normal</Button>
@@ -105,8 +105,8 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">Disabled focus state of buttons</span>
-            <section className="k-colspan-all">
+            <span className="k-colspan-all k-col-span-full">Disabled focus state of buttons</span>
+            <section className="k-colspan-all k-col-span-full">
                 <div className="k-widget k-toolbar k-toolbar-resizable">
                     <Button icon="more-vertical" className="k-overflow-anchor" fillMode="flat" rounded={null} disabled focus></Button>
                     <Button disabled focus>Button</Button>

package/src/tooltip/tests/tooltip-states.tsx

@@ -23,7 +23,7 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">Tooltip states</span>
+            <span className="k-colspan-all k-col-span-full">Tooltip states</span>
             <section>
                 <div className="k-animation-container">
                     <div className="k-tooltip k-tooltip-primary">