@progress/kendo-themes-html 7.1.0-dev.8 → 7.1.0-dev.9

package/src/gantt/tests/gantt-dep-validation-tooltip.tsx

@@ -1,4 +1,4 @@
-
+import { TooltipNormal } from '../../tooltip';
 
 const styles = `
     .k-tooltip {
@@ -15,81 +15,99 @@ export default () =>(
             <span className="k-rtl">RTL</span>
 
             <section>
-                <div className="k-tooltip k-gantt-tooltip-validation k-gantt-tooltip-valid">
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">From:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 1</span>
-                    </div>
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">To:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 2</span>
-                    </div>
-                </div>
+                <TooltipNormal className="k-gantt-tooltip-validation k-gantt-tooltip-valid" content={
+                    <>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">From:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 1</span>
+                        </div>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">To:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 2</span>
+                        </div>
+                    </>
+                }>
+                </TooltipNormal>
             </section>
 
             <section className="k-rtl">
-                <div className="k-tooltip k-gantt-tooltip-validation k-gantt-tooltip-valid">
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">From:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 1</span>
-                    </div>
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">To:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 2</span>
-                    </div>
-                </div>
+                <TooltipNormal className="k-gantt-tooltip-validation k-gantt-tooltip-valid" content={
+                    <>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">From:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 1</span>
+                        </div>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">To:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 2</span>
+                        </div>
+                    </>
+                }>
+                </TooltipNormal>
             </section>
 
             <section>
-                <div className="k-tooltip k-gantt-tooltip-validation k-gantt-tooltip-invalid">
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">From:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 3</span>
-                    </div>
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">To:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 4</span>
-                    </div>
-                </div>
+                <TooltipNormal className="k-gantt-tooltip-validation k-gantt-tooltip-invalid" content={
+                    <>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">From:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 3</span>
+                        </div>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">To:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 4</span>
+                        </div>
+                    </>
+                }>
+                </TooltipNormal>
             </section>
 
             <section className="k-rtl">
-                <div className="k-tooltip k-gantt-tooltip-validation k-gantt-tooltip-invalid">
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">From:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 3</span>
-                    </div>
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">To:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 4</span>
-                    </div>
-                </div>
+                <TooltipNormal className="k-gantt-tooltip-validation k-gantt-tooltip-invalid" content={
+                    <>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">From:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 3</span>
+                        </div>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">To:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 4</span>
+                        </div>
+                    </>
+                }>
+                </TooltipNormal>
             </section>
 
             <section>
-                <div className="k-tooltip k-gantt-tooltip-validation">
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">From:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 3</span>
-                    </div>
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">To:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 4</span>
-                    </div>
-                </div>
+                <TooltipNormal className="k-gantt-tooltip-validation" content={
+                    <>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">From:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 3</span>
+                        </div>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">To:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 4</span>
+                        </div>
+                    </>
+                }>
+                </TooltipNormal>
             </section>
 
             <section className="k-rtl">
-                <div className="k-tooltip k-gantt-tooltip-validation">
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">From:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 3</span>
-                    </div>
-                    <div className="k-gantt-tooltip-validation-row">
-                        <span className="k-gantt-tooltip-validation-label">To:</span>
-                        <span className="k-gantt-tooltip-validation-value">Task 4</span>
-                    </div>
-                </div>
+                <TooltipNormal className="k-gantt-tooltip-validation" content={
+                    <>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">From:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 3</span>
+                        </div>
+                        <div className="k-gantt-tooltip-validation-row">
+                            <span className="k-gantt-tooltip-validation-label">To:</span>
+                            <span className="k-gantt-tooltip-validation-value">Task 4</span>
+                        </div>
+                    </>
+                }>
+                </TooltipNormal>
             </section>
 
         </div>

package/src/gantt/tests/gantt-row-reordering.tsx

@@ -10,7 +10,7 @@ const styles = `
     .k-gantt-treelist {
         width: 250px;
     }
-    .k-gantt-timeline {
+    .k-gantt-timeline-pane {
         flex: 1;
         overflow: auto;
     }
@@ -203,8 +203,8 @@ export default () => (
                     <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ height: "604px" }}>
                         <div className="k-resize-handle"></div>
                     </div>
-                    <div className="k-gantt-timeline">
-                        <div className="k-timeline k-grid k-grid-md">
+                    <div className="k-gantt-timeline-pane">
+                        <div className="k-gantt-timeline k-grid k-grid-md">
                             <div className="k-grid-header">
                                 <div className="k-grid-header-wrap">
                                     <table className="k-table k-table-md k-grid-header-table" style={{ width: "4200px" }}>

package/src/gantt/tests/gantt.tsx

@@ -11,7 +11,7 @@ const styles = `
     .k-gantt-treelist {
         width: 250px;
     }
-    .k-gantt-timeline {
+    .k-gantt-timeline-pane {
         flex: 1;
         overflow: auto;
     }
@@ -200,8 +200,8 @@ export default () =>(
                     <div className="k-splitbar k-splitbar-horizontal k-splitbar-draggable-horizontal" style={{ height: "604px" }}>
                         <div className="k-resize-handle"></div>
                     </div>
-                    <div className="k-gantt-timeline">
-                        <div className="k-timeline k-grid k-grid-md">
+                    <div className="k-gantt-timeline-pane">
+                        <div className="k-gantt-timeline k-grid k-grid-md">
                             <div className="k-grid-header">
                                 <div className="k-grid-header-wrap">
                                     <table className="k-table k-table-md k-grid-header-table" style={{ width: "4200px" }}>

package/src/index.ts

@@ -91,7 +91,7 @@ export * from './treeview/index';
 export * from './card/index';
 export * from './expansion-panel/index';
 // export * from './panelbar/index';
-// export * from './splitter/index';
+export * from './splitter/index';
 export * from './tilelayout/index';
 // export * from './dock-manager/index';
 
@@ -102,7 +102,7 @@ export * from './listview/index';
 // export * from './pivotgrid/index';
 // export * from './treelist/index';
 export * from './filter/index';
-// export * from './filemanager/index';
+export * from './filemanager/index';
 // export * from './taskboard/index';
 
 // Misc

package/src/mediaplayer/tests/mediaplayer.tsx

@@ -1,6 +1,7 @@
 import { Button } from '../../button';
 import { DropdownList } from '../../dropdownlist';
 import { Toolbar } from '../../toolbar';
+import { SliderNormal } from '../../slider';
 
 
 const styles = `
@@ -21,14 +22,7 @@ export default () =>(
             <div className="k-mediaplayer k-widget">
                 <div className="k-mediaplayer-titlebar">Media player title</div>
                 <div className="k-mediaplayer-toolbar-wrap">
-                    <div className="k-slider k-slider-horizontal k-mediaplayer-seekbar">
-                        <div className="k-slider-track-wrap">
-                            <div className="k-slider-track">
-                                <div className="k-slider-selection"></div>
-                                <a href="#" className="k-draghandle k-draghandle-end"></a>
-                            </div>
-                        </div>
-                    </div>
+                    <SliderNormal className="k-mediaplayer-seekbar" showButtons={false} showTicks={false} />
                     <Toolbar className="k-mediaplayer-toolbar">
                         <Button fillMode="flat" icon="play" className="k-play-button"></Button>
                         <div className="k-mediaplayer-currenttime-wrap">
@@ -38,14 +32,7 @@ export default () =>(
                         <div className="k-spacer"></div>
                         <Button fillMode="flat" icon="volume-up" className="k-volume-button"></Button>
                         <div className="k-mediaplayer-volume-wrap">
-                            <div className="k-slider k-slider-horizontal k-mediaplayer-volume">
-                                <div className="k-slider-track-wrap">
-                                    <div className="k-slider-track">
-                                        <div className="k-slider-selection"></div>
-                                        <a href="#" className="k-draghandle k-draghandle-end"></a>
-                                    </div>
-                                </div>
-                            </div>
+                            <SliderNormal className="k-mediaplayer-volume" showButtons={false} showTicks={false} />
                         </div>
                         <div className="k-mediaplayer-quality-wrap">
                             <DropdownList value="360p" arrowIconName="hd" className="k-mediaplayer-quality" />

package/src/slider/slider.spec.tsx

@@ -19,6 +19,8 @@ export type KendoSliderProps = {
     dir?: 'ltr' | 'rtl';
     handlePosition?: 'start' | 'end';
     trackStyle?: React.CSSProperties;
+    showButtons?: boolean;
+    showTicks?: boolean;
 };
 
 export type KendoSliderState = { [K in (typeof states)[number]]?: boolean };
@@ -28,7 +30,9 @@ const defaultProps = {
     orientation: 'horizontal',
     readonly: false,
     disabled: false,
-    handlePosition: 'end'
+    handlePosition: 'end',
+    showButtons: true,
+    showTicks: true
 };
 
 export const Slider = (
@@ -42,6 +46,8 @@ export const Slider = (
         readonly = defaultProps.readonly,
         disabled = defaultProps.disabled,
         handlePosition = defaultProps.handlePosition,
+        showButtons = defaultProps.showButtons,
+        showTicks = defaultProps.showTicks,
         hover,
         focus,
         active,
@@ -74,10 +80,10 @@ export const Slider = (
                 'k-range-slider': type === 'range'
             }
         )} dir={dir} >
-            { type !== 'gradient' && <Button className="k-button-decrease" rounded="full" icon={iconDecrease} /> }
+            { showButtons && <Button className="k-button-decrease" rounded="full" icon={iconDecrease} /> }
             <div className="k-slider-track-wrap">
                 {
-                    type !== 'gradient' &&
+                    showTicks &&
                         <ul className="k-reset k-slider-items">
                             {props.children}
                         </ul>
@@ -107,7 +113,7 @@ export const Slider = (
                     )}></span>
                 </div>
             </div>
-            { type !== 'gradient' && <Button className="k-button-increase" rounded="full" icon={iconIncrease} /> }
+            { showButtons && <Button className="k-button-increase" rounded="full" icon={iconIncrease} /> }
         </div>
     );
 };

package/src/slider/templates/slider-gradient-vertical.tsx

@@ -4,6 +4,8 @@ export const SliderGradientVertical = (props) => (
     <Slider
         type="gradient"
         orientation="vertical"
+        showButtons={false}
+        showTicks={false}
         children={
             <>
                 <SliderTick label large text="0"/>

package/src/slider/templates/slider-gradient.tsx

@@ -3,6 +3,8 @@ import { Slider, SliderTick } from "../../slider";
 export const SliderGradient = (props) => (
     <Slider
         type="gradient"
+        showButtons={false}
+        showTicks={false}
         children={
             <>
                 <SliderTick label large text="0"/>

package/src/splitter/index.tsx

@@ -0,0 +1,5 @@
+export * from './splitter.spec';
+export * from './splitter-pane';
+export * from './splitter-splitbar';
+export * from './templates/splitter-normal';
+export * from './templates/splitter-vertical';

package/src/splitter/splitter-pane.tsx

@@ -0,0 +1,59 @@
+import { classNames } from '../misc';
+
+const SPLITTERPANE_CLASSNAME = 'k-pane';
+
+const states = [];
+
+const options = {};
+
+export type KendoSplitterPaneProps = {
+    collapsible?: boolean;
+    scrollable?: boolean;
+    resizable?: boolean;
+    flexBasis?: string;
+    flex?: boolean;
+};
+
+export type KendoSplitterPaneState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {
+    resizable: true,
+    flex: false,
+};
+
+export const SplitterPane = (
+    props: KendoSplitterPaneProps &
+        KendoSplitterPaneState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        scrollable,
+        flexBasis,
+        flex,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            style={{ flexBasis, ...props.style }}
+            className={classNames(
+                props.className,
+                SPLITTERPANE_CLASSNAME,
+                {
+                    [`${SPLITTERPANE_CLASSNAME}-static`]: flexBasis,
+                    [`${SPLITTERPANE_CLASSNAME}-flex`]: flex,
+                    [`k-scrollable`]: scrollable
+                },
+            )}>
+            {props.children}
+        </div>
+    );
+};
+
+SplitterPane.states = states;
+SplitterPane.options = options;
+SplitterPane.className = SPLITTERPANE_CLASSNAME;
+SplitterPane.defaultProps = defaultProps;
+
+export default SplitterPane;

package/src/splitter/splitter-splitbar.tsx

@@ -0,0 +1,82 @@
+import { Icon } from '../icon';
+import { classNames, stateClassNames, States } from '../misc';
+
+const SPLITTERSPLITBAR_CLASSNAME = 'k-splitbar';
+
+const states = [
+    States.hover,
+    States.focus,
+];
+
+const options = {};
+
+export type KendoSplitterSplitbarProps = {
+    orientation?: "horizontal" | "vertical";
+    draggable?: boolean,
+    collapsePrev?: boolean;
+    collapseNext?: boolean;
+};
+
+export type KendoSplitterSplitbarState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {
+    orientation: "horizontal",
+    draggable: true,
+};
+
+export const SplitterSplitbar = (
+    props: KendoSplitterSplitbarProps &
+        KendoSplitterSplitbarState &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        hover,
+        focus,
+        orientation,
+        draggable,
+        collapsePrev,
+        collapseNext,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                SPLITTERSPLITBAR_CLASSNAME,
+                stateClassNames(SPLITTERSPLITBAR_CLASSNAME, {
+                    hover,
+                    focus,
+                }),
+                {
+                    [`${SPLITTERSPLITBAR_CLASSNAME}-${orientation}`]: orientation,
+                    [`${SPLITTERSPLITBAR_CLASSNAME}-draggable-${orientation}`]: draggable,
+                    [`${SPLITTERSPLITBAR_CLASSNAME}-static-${orientation}`]: !draggable && !collapsePrev && !collapseNext,
+                },
+            )}>
+            {collapsePrev &&
+                <>
+                    <div className="k-collapse-prev">
+                        <Icon icon={`caret-alt-${orientation === "horizontal" ? 'left' : 'up'}`} size="xsmall"></Icon>
+                    </div>
+                </>
+            }
+            <div className="k-resize-handle"></div>
+            {collapseNext &&
+                <>
+                    <div className="k-collapse-next">
+                        <Icon icon={`caret-alt-${orientation === "horizontal" ? "right" : "down"}`} size="xsmall"></Icon>
+                    </div>
+                </>
+            }
+        </div>
+    );
+};
+
+SplitterSplitbar.states = states;
+SplitterSplitbar.options = options;
+SplitterSplitbar.className = SPLITTERSPLITBAR_CLASSNAME;
+SplitterSplitbar.defaultProps = defaultProps;
+
+export default SplitterSplitbar;

package/src/splitter/splitter.spec.tsx

@@ -0,0 +1,74 @@
+import { classNames } from '../misc';
+import SplitterPane from './splitter-pane';
+import SplitterSplitbar from './splitter-splitbar';
+
+const SPLITTER_CLASSNAME = 'k-splitter';
+
+const options = {};
+
+export type KendoSplitterProps = {
+    orientation?: "vertical" | "horizontal";
+    children?: JSX.Element | JSX.Element[];
+}
+
+const defaultProps = {
+    orientation: "horizontal",
+};
+
+export const Splitter = (
+    props: KendoSplitterProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        orientation,
+        children,
+        ...other
+    } = props;
+
+    const listChildren: JSX.Element | JSX.Element[] = [];
+
+    if (children) {
+        if (Array.isArray(children)) {
+            children.map((child, index) => {
+                if (child.type === SplitterPane) {
+                    listChildren.push(
+                        <SplitterPane {...child.props} key={index} />,
+
+                        children[ index + 1] &&
+                        <>
+                            <SplitterSplitbar
+                                draggable = { child.props.resizable !== false && children[ index + 1 ].props.resizable !== false }
+                                collapsePrev = {child.props.collapsible }
+                                collapseNext= { children[ index + 1 ].props.collapsible }
+                                orientation={orientation}
+                            />
+                        </>
+                    );
+                } else {
+                    listChildren.push(child);
+                }
+            });
+        }
+    }
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                SPLITTER_CLASSNAME,
+                {
+                    [`${SPLITTER_CLASSNAME}-${orientation}`]: orientation
+                },
+                "k-splitter-flex",
+            )}>
+            {listChildren}
+        </div>
+    );
+};
+
+Splitter.options = options;
+Splitter.className = SPLITTER_CLASSNAME;
+Splitter.defaultProps = defaultProps;
+
+export default Splitter;

package/src/splitter/templates/splitter-normal.tsx

@@ -0,0 +1,20 @@
+import { Splitter, SplitterPane } from "..";
+
+export const SplitterNormal = (props) => (
+    <Splitter
+        children={[
+            <SplitterPane flexBasis="20%" collapsible>
+                <p>Collapsible pane - 20%</p>
+            </SplitterPane>,
+            <SplitterPane>
+                <p>Content</p>
+                <p>Content</p>
+                <p>Content</p>
+            </SplitterPane>,
+            <SplitterPane flexBasis="30%" collapsible>
+                <p>Collapsible pane - 30%</p>
+            </SplitterPane>
+        ]}
+        {...props}>
+    </Splitter>
+);

package/src/splitter/templates/splitter-vertical.tsx

@@ -0,0 +1,21 @@
+import { Splitter, SplitterPane } from "..";
+
+export const SplitterVertical = (props) => (
+    <Splitter
+        children={[
+            <SplitterPane flexBasis="20%" collapsible>
+                <p>Collapsible pane - 20%</p>
+            </SplitterPane>,
+            <SplitterPane>
+                <p>Content</p>
+                <p>Content</p>
+                <p>Content</p>
+            </SplitterPane>,
+            <SplitterPane flexBasis="30%" collapsible>
+                <p>Collapsible pane - 30%</p>
+            </SplitterPane>
+        ]}
+        orientation="vertical"
+        {...props}>
+    </Splitter>
+);

package/src/splitter/tests/splitter-splitbar-states.tsx

@@ -0,0 +1,39 @@
+import SplitterSplitbar from '../splitter-splitbar';
+import Splitter from '../splitter.spec';
+
+const style = `
+    .k-splitter {
+        height: 150px;
+    }
+
+    .text {
+        margin-inline: 10px;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{style}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-1">
+
+            {[ "normal", ...SplitterSplitbar.states ].map((state) => (
+                <>
+                    <span>{state}</span>
+                    <Splitter>
+                        <span className="text">static</span>
+                        <SplitterSplitbar draggable={false} { ...{ [state]: true } }/>
+                        <span className="text">draggable</span>
+                        <SplitterSplitbar { ...{ [state]: true } }/>
+                        <span className="text">collapse - right</span>
+                        <SplitterSplitbar collapseNext { ...{ [state]: true } }/>
+                        <span className="text">collapse  - left</span>
+                        <SplitterSplitbar collapsePrev { ...{ [state]: true } }/>
+                        <span className="text">collapse - left & right</span>
+                        <SplitterSplitbar collapseNext collapsePrev { ...{ [state]: true } }/>
+                    </Splitter>
+                </>
+            ))}
+
+        </div>
+    </>
+);