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

package/src/form/tests/form-grid-layout.tsx

@@ -22,19 +22,19 @@ root.render(
                         <legend className="k-form-legend">Shipping Address</legend>
 
                         <div className="k-form-layout k-d-grid k-grid-cols-2" style={{ gap: "0px 16px" }}>
-                            <div className="k-form-field k-colspan-1">
+                            <div className="k-form-field k-colspan-1 k-col-span-1">
                                 <label className="k-label k-form-label">Country</label>
                                 <DropdownList value="France" />
                             </div>
 
-                            <div className="k-form-field k-colspan-1">
+                            <div className="k-form-field k-colspan-1 k-col-span-1">
                                 <label className="k-label k-form-label">City</label>
                                 <div className="k-form-field-wrap">
                                     <Textbox />
                                 </div>
                             </div>
 
-                            <div className="k-form-field k-colspan-2">
+                            <div className="k-form-field k-colspan-2 k-col-span-2">
                                 <label className="k-label k-form-label">Address Line</label>
                                 <div className="k-form-field-wrap">
                                     <Textbox />

package/src/imageeditor/tests/imageeditor-crop-pane.tsx

@@ -63,13 +63,13 @@ root.render(
                             <fieldset className="k-form-fieldset">
                                 <legend className="k-form-legend">Crop Image</legend>
                                 <div className="k-form-layout k-d-grid k-grid-cols-2" style={{ gap: "0px 8px" }}>
-                                    <div className="k-form-field k-colspan-2">
+                                    <div className="k-form-field k-colspan-2 k-col-span-2">
                                         <label className="k-label k-form-label">Aspect Ratio:</label>
                                         <div className="k-form-field-wrap">
                                             <DropdownList value="Original ratio" />
                                         </div>
                                     </div>
-                                    <div className="k-form-field k-colspan-2">
+                                    <div className="k-form-field k-colspan-2 k-col-span-2">
                                         <label className="k-label k-form-label">Orientation:</label>
                                         <div className="k-form-field-wrap">
                                             <div className="k-widget k-button-group">
@@ -78,19 +78,19 @@ root.render(
                                             </div>
                                         </div>
                                     </div>
-                                    <div className="k-form-field k-colspan-1">
+                                    <div className="k-form-field k-colspan-1 k-col-span-1">
                                         <label className="k-label k-form-label">Width:</label>
                                         <div className="k-form-field-wrap">
                                             <NumericTextbox showClearButton={false} value="61" />
                                         </div>
                                     </div>
-                                    <div className="k-form-field k-colspan-1">
+                                    <div className="k-form-field k-colspan-1 k-col-span-1">
                                         <label className="k-label k-form-label">Height:</label>
                                         <div className="k-form-field-wrap">
                                             <NumericTextbox showClearButton={false} value="68" />
                                         </div>
                                     </div>
-                                    <div className="k-form-field k-colspan-2">
+                                    <div className="k-form-field k-colspan-2 k-col-span-2">
                                         <label className="k-label k-form-label">Lock aspect ratio:</label>
                                         <div className="k-form-field-wrap">
                                             <Checkbox />

package/src/imageeditor/tests/imageeditor-resize-pane.tsx

@@ -49,31 +49,31 @@ root.render(
                             <fieldset className="k-form-fieldset">
                                 <legend className="k-form-legend">Resize image</legend>
                                 <div className="k-form-layout k-d-grid k-grid-cols-2" style={{ gap: "0px 8px" }}>
-                                    <div className="k-form-field k-colspan-1">
+                                    <div className="k-form-field  k-col-span-1-1 k-col-span-1">
                                         <label className="k-label k-form-label">Width:</label>
                                         <div className="k-form-field-wrap">
                                             <NumericTextbox showClearButton={false} value="61" />
                                         </div>
                                     </div>
-                                    <div className="k-form-field k-colspan-1">
+                                    <div className="k-form-field k-colspan-1 k-col-span-1">
                                         <label className="k-label k-form-label">&nbsp;</label>
                                         <div className="k-form-field-wrap">
                                             <DropdownList value="Pixels" />
                                         </div>
                                     </div>
-                                    <div className="k-form-field k-colspan-1">
+                                    <div className="k-form-field k-colspan-1 k-col-span-1">
                                         <label className="k-label k-form-label">Height:</label>
                                         <div className="k-form-field-wrap">
                                             <NumericTextbox showClearButton={false} value="68" />
                                         </div>
                                     </div>
-                                    <div className="k-form-field k-colspan-1">
+                                    <div className="k-form-field k-colspan-1 k-col-span-1">
                                         <label className="k-label k-form-label">&nbsp;</label>
                                         <div className="k-form-field-wrap">
                                             <DropdownList value="Pixels" />
                                         </div>
                                     </div>
-                                    <div className="k-form-field k-colspan-2">
+                                    <div className="k-form-field k-colspan-2 k-col-span-2">
                                         <label className="k-label k-form-label">Lock aspect ratio:</label>
                                         <div className="k-form-field-wrap">
                                             <Checkbox />

package/src/layout/tests/stack-layout.tsx

@@ -31,7 +31,7 @@ root.render(
         <div id="test-area" className="k-d-grid k-grid-cols-5">
 
             <span></span>
-            <span className="k-colspan-4">Orientation horizontal</span>
+            <span className="k-colspan-4 k-col-span-4">Orientation horizontal</span>
 
             <span></span>
             <span>horizontal align left</span>
@@ -159,10 +159,10 @@ root.render(
                 </Layout>
             </section>
 
-            <span className="k-colspan-all"></span>
+            <span className="k-colspan-all k-col-span-full"></span>
 
             <span></span>
-            <span className="k-colspan-4">Orientation vertical</span>
+            <span className="k-colspan-4 k-col-span-4">Orientation vertical</span>
 
             <span></span>
             <span>horizontal align left</span>

package/src/list/tests/list-sizes.tsx

@@ -39,7 +39,7 @@ root.render(
                 </List>
             </section>
 
-            <span className="k-colspan-all">universal grouping</span>
+            <span className="k-colspan-all k-col-span-full">universal grouping</span>
 
             <section>
                 <List size="small">
@@ -80,7 +80,7 @@ root.render(
                 </List>
             </section>
 
-            <span className="k-colspan-all">angular grouping</span>
+            <span className="k-colspan-all k-col-span-full">angular grouping</span>
 
             <section>
                 <List size="small" framework="angular">

package/src/multiviewcalendar/multiviewcalendar.tsx

@@ -53,6 +53,7 @@ export class MultiViewCalendar extends React.Component<MultiViewCalendarProps> {
                 showWeek={showWeek}
                 showOtherMonth={showOtherMonth}
                 showCalendarCaption={showCalendarCaption}
+                selectedRange={true}
 
             />
         );

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