@progress/kendo-themes-html 5.4.2-dev.6 → 5.5.1-dev.1

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

@@ -25,7 +25,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <div>
                 <div className="k-notification-container">
@@ -141,7 +141,7 @@ root.render(
                 </div>
             </div>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
             <div dir="rtl">
                 <div className="k-notification-container">
                     <div className="k-widget k-notification">

package/src/notification/tests/notification-custom-angular.tsx

@@ -31,7 +31,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <div>
                 {/* notification group */}
@@ -58,7 +58,7 @@ root.render(
                     </div>
                 </div>
             </div>
-            <div className="k-colspan-3">
+            <div className="k-colspan-3 k-col-span-3">
                 <div className="k-notification-container fullwidth">
                     <div className="k-widget k-notification k-notification-closable">
                         <div className="k-notification-wrap">
@@ -69,7 +69,7 @@ root.render(
                 </div>
             </div>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
 
             <div dir="rtl">
                 {/* notification group */}
@@ -96,7 +96,7 @@ root.render(
                     </div>
                 </div>
             </div>
-            <div className="k-colspan-3" dir="rtl">
+            <div className="k-colspan-3 k-col-span-3" dir="rtl">
                 <div className="k-notification-container fullwidth">
                     <div className="k-widget k-notification k-notification-closable">
                         <div className="k-notification-wrap">

package/src/notification/tests/notification-jquery.tsx

@@ -26,7 +26,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <div>
                 <div className="k-animation-container">
@@ -142,7 +142,7 @@ root.render(
                 </div>
             </div>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
             <div dir="rtl">
                 <div className="k-animation-container">
                     <div className="k-widget k-popup k-notification">

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

@@ -23,7 +23,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <section>
                 <div className="k-widget k-panelbar">
@@ -188,7 +188,7 @@ root.render(
                 </div>
             </section>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
 
             <section>
                 <div className="k-widget k-panelbar" dir="rtl">

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

@@ -23,7 +23,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <section>
                 <ul className="k-widget k-reset k-header k-panelbar">
@@ -174,7 +174,7 @@ root.render(
                 </ul>
             </section>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
 
             <section className="k-rtl">
                 <ul className="k-widget k-reset k-header k-panelbar">

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

@@ -23,7 +23,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <section>
                 <div className="k-widget k-panelbar">
@@ -190,7 +190,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">
                 <div className="k-widget k-panelbar">

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

@@ -23,7 +23,7 @@ root.render(
         <style>{styles}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-4">
 
-            <span className="k-colspan-all">LTR</span>
+            <span className="k-colspan-all k-col-span-full">LTR</span>
 
             <section>
                 <ul className="k-panelbar">
@@ -235,7 +235,7 @@ root.render(
                 </ul>
             </section>
 
-            <span className="k-colspan-all">RTL</span>
+            <span className="k-colspan-all k-col-span-full">RTL</span>
 
             <section className="k-rtl">
                 <ul className="k-panelbar">

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

@@ -22,7 +22,7 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-3">
 
-            <span className="k-colspan-all">Angular scrollview</span>
+            <span className="k-colspan-all k-col-span-full">Angular scrollview</span>
 
             <span>Light mode</span>
             <span>Normal</span>

package/src/scrollview/tests/scrollview-blazor.tsx

@@ -22,7 +22,7 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-3">
 
-            <span className="k-colspan-all">Blazor scrollview</span>
+            <span className="k-colspan-all k-col-span-full">Blazor scrollview</span>
 
             <span>Light mode</span>
             <span>Normal</span>

package/src/scrollview/tests/scrollview.tsx

@@ -22,7 +22,7 @@ root.render(
         <style>{style}</style>
         <div id="test-area" className="k-d-grid k-grid-cols-3">
 
-            <span className="k-colspan-all">jQuery scrollview</span>
+            <span className="k-colspan-all k-col-span-full">jQuery scrollview</span>
 
             <span>Light mode</span>
             <span>Normal</span>

package/src/signature/index.tsx

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

package/src/signature/signature.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { classNames, kendoThemeMaps } from '../utils';
+import { Button } from '../button';
+
+export interface SignatureProps {
+    className?: string,
+    size?: null | 'small' | 'medium' | 'large';
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    fillMode?: null | 'solid' | 'outline' | 'flat';
+    hover?: boolean,
+    focus?: boolean,
+    valid?: boolean,
+    invalid?: boolean,
+    disabled?: boolean,
+    maximized?: boolean
+}
+
+export class Signature extends React.Component<SignatureProps> {
+
+    static defaultProps = {
+        size: 'medium',
+        rounded: 'medium',
+        fillMode: 'solid'
+    };
+
+    render() {
+        const {
+            className,
+            size,
+            rounded,
+            fillMode,
+            hover,
+            focus,
+            valid,
+            invalid,
+            disabled,
+            maximized
+        } = this.props;
+
+        return (
+            <div
+                className={classNames(
+                    className,
+                    'k-signature',
+                    'k-input',
+                    {
+                        [`k-signature-${kendoThemeMaps.sizeMap[size!] || size}`]: size,
+                        [`k-input-${fillMode}`]: fillMode,
+                        [`k-rounded-${kendoThemeMaps.roundedMap[rounded!] || rounded}`]: rounded,
+                        'k-hover': hover,
+                        'k-focus': focus,
+                        'k-valid': valid,
+                        'k-invalid': invalid,
+                        'k-disabled': disabled,
+                        'k-signature-maximized': maximized
+                    }
+                )}>
+                <div
+                    className={classNames(
+                        className,
+                        'k-signature-actions',
+                        'k-signature-actions-top'
+                    )}>
+                    <Button
+                        className={classNames(
+                            className,
+                            'k-signature-action',
+                            'k-signature-maximize',
+                        )}
+                        icon="window-maximize"
+                        rounded={this.props.rounded}
+                        size={this.props.size}
+                        fillMode="flat"
+                    />
+                    <Button
+                        className={classNames(
+                            className,
+                            'k-signature-action',
+                            'k-signature-minimize',
+                            'k-hidden'
+                        )}
+                        icon="window-minimize"
+                        rounded={this.props.rounded}
+                        size={this.props.size}
+                        fillMode="flat"
+                    />
+                </div>
+                <canvas className="k-signature-canvas"></canvas>
+                <div className="k-signature-line"></div>
+                <div
+                    className={classNames(
+                        className,
+                        'k-signature-actions',
+                        'k-signature-actions-bottom'
+                    )}>
+                    <Button
+                        className={classNames(
+                            className,
+                            'k-signature-action',
+                            'k-signature-clear',
+                        )}
+                        icon="close"
+                        rounded={this.props.rounded}
+                        size={this.props.size}
+                        fillMode="flat"
+                    />
+                </div>
+            </div>
+        );
+    }
+
+}

package/src/signature/tests/signature-flat.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 fillMode="flat"/>
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="flat"/>
+            </div>
+
+            <div>
+                <Signature fillMode="flat" hover />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="flat" hover />
+            </div>
+
+            <div>
+                <Signature fillMode="flat" focus />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="flat" focus />
+            </div>
+
+            <div>
+                <Signature fillMode="flat" invalid />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="flat" invalid />
+            </div>
+
+            <div>
+                <Signature fillMode="flat" invalid focus />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="flat" invalid focus />
+            </div>
+
+            <div>
+                <Signature fillMode="flat" disabled />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="flat" disabled />
+            </div>
+
+            <div className="k-colspan-all k-col-span-full">
+                <Signature fillMode="flat" maximized />
+            </div>
+
+        </div>
+    </>
+);

package/src/signature/tests/signature-outline.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 fillMode="outline"/>
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="outline"/>
+            </div>
+
+            <div>
+                <Signature fillMode="outline" hover />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="outline" hover />
+            </div>
+
+            <div>
+                <Signature fillMode="outline" focus />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="outline" focus />
+            </div>
+
+            <div>
+                <Signature fillMode="outline" invalid />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="outline" invalid />
+            </div>
+
+            <div>
+                <Signature fillMode="outline" invalid focus />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="outline" invalid focus />
+            </div>
+
+            <div>
+                <Signature fillMode="outline" disabled />
+            </div>
+            <div dir="rtl">
+                <Signature fillMode="outline" disabled />
+            </div>
+
+            <div className="k-colspan-all k-col-span-full">
+                <Signature fillMode="outline" maximized />
+            </div>
+
+        </div>
+    </>
+);

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/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">