@progress/kendo-themes-html 7.1.0-dev.0 → 7.1.0-dev.2

package/dist/types/index.d.ts

@@ -67,6 +67,7 @@ export * from './expansion-panel/index';
 export * from './tilelayout/index';
 export * from './listview/index';
 export * from './filter/index';
+export * from './timeline/index';
 export * from './scrollview/index';
 export * from './editor/index';
 export * from './table/index';

package/dist/types/timeline/horizontal-timeline-event.spec.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const TIMELINEHORIZONTALEVENT_CLASSNAME = "k-timeline-event";
+export type KendoHorizontalTimelineEventProps = {
+    content?: string | JSX.Element;
+    title?: string;
+    subtitle?: string;
+};
+export declare const HorizontalTimelineEvent: {
+    (props: KendoHorizontalTimelineEventProps & React.HTMLAttributes<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        title: string;
+        subtitle: string;
+        content: string;
+    };
+};
+export default HorizontalTimelineEvent;

package/dist/types/timeline/index.d.ts

@@ -0,0 +1,18 @@
+export * from './timeline.spec';
+export * from './vertical-timeline-event.spec';
+export * from './horizontal-timeline-event.spec';
+export * from './timeline-event-list.spec';
+export * from './timeline-flag-wrap.spec';
+export * from './timeline-circle.spec';
+export * from './timeline-flag.spec';
+export * from './timeline-card.spec';
+export * from './timeline-card-title';
+export * from './timeline-card-callout';
+export * from './timeline-date-wrap.spec';
+export * from './timeline-track-wrap.spec';
+export * from './timeline-track.spec';
+export * from './timeline-track-item.spec';
+export * from './templates/timeline-normal';
+export * from './templates/timeline-normal-collapsible';
+export * from './templates/timeline-normal-alternating';
+export * from './templates/timeline-horizontal';

package/dist/types/timeline/templates/timeline-horizontal.d.ts

@@ -0,0 +1 @@
+export declare const TimelineHorizontal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/timeline/templates/timeline-normal-alternating.d.ts

@@ -0,0 +1 @@
+export declare const TimelineNormalAlternating: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/timeline/templates/timeline-normal-collapsible.d.ts

@@ -0,0 +1 @@
+export declare const TimelineNormalCollapsible: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/timeline/templates/timeline-normal.d.ts

@@ -0,0 +1 @@
+export declare const TimelineNormal: (props: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/timeline/timeline-card-callout.d.ts

@@ -0,0 +1,9 @@
+import { KendoCardCalloutProps } from '../card';
+export declare const TIMELINECARDCALLOUT_CLASSNAME = "k-timeline-card-callout";
+export declare const TimelineCardCallout: {
+    (props: KendoCardCalloutProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    className: string;
+    defaultProps: {};
+};
+export default TimelineCardCallout;

package/dist/types/timeline/timeline-card-title.d.ts

@@ -0,0 +1,11 @@
+export declare const TIMELINECARDTITLE_CLASSNAME = "k-card-title";
+export type KendoTimelineCardTitleProps = {
+    collapsible?: boolean;
+};
+export declare const TimelineCardTitle: {
+    (props: KendoTimelineCardTitleProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    className: string;
+    defaultProps: {};
+};
+export default TimelineCardTitle;

package/dist/types/timeline/timeline-card.spec.d.ts

@@ -0,0 +1,7 @@
+import { KendoCardProps } from '../card';
+export declare const TimelineCard: {
+    (props: KendoCardProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    defaultProps: {};
+};
+export default TimelineCard;

package/dist/types/timeline/timeline-circle.spec.d.ts

@@ -0,0 +1,3 @@
+export declare const TIMELINECIRCLE_CLASSNAME = "k-timeline-circle";
+export declare const TimelineCircle: (props: React.HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+export default TimelineCircle;

package/dist/types/timeline/timeline-date-wrap.spec.d.ts

@@ -0,0 +1,14 @@
+export declare const TIMELINEDATEWRAP_CLASSNAME = "k-timeline-date-wrap";
+export type KendoDateWrapProps = {
+    date?: string;
+};
+export declare const TimelineDateWrap: {
+    (props: KendoDateWrapProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        date: string;
+    };
+};
+export default TimelineDateWrap;

package/dist/types/timeline/timeline-event-list.spec.d.ts

@@ -0,0 +1,3 @@
+export declare const TIMELINEEVENTLIST_CLASSNAME = "k-timeline-events-list";
+export declare const TimelineEventList: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export default TimelineEventList;

package/dist/types/timeline/timeline-flag-wrap.spec.d.ts

@@ -0,0 +1,14 @@
+export declare const TIMELINEFLAGWRAP_CLASSNAME = "k-timeline-flag-wrap";
+export type KendoFlagWrapProps = {
+    year?: string;
+};
+export declare const TimelineFlagWrap: {
+    (props: KendoFlagWrapProps & React.HTMLAttributes<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
+    states: ("focus" | "selected")[];
+    options: {};
+    className: string;
+    defaultProps: {
+        year: string;
+    };
+};
+export default TimelineFlagWrap;

package/dist/types/timeline/timeline-flag.spec.d.ts

@@ -0,0 +1,6 @@
+export declare const TIMELINEFLAG_CLASSNAME = "k-timeline-flag";
+export type KendoTimelineFlagOptions = {
+    content?: string;
+};
+export declare const TimelineFlag: (props: KendoTimelineFlagOptions & React.HTMLAttributes<HTMLSpanElement>) => import("react/jsx-runtime").JSX.Element;
+export default TimelineFlag;

package/dist/types/timeline/timeline-track-item.spec.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const TIMELINETRACKITEM_CLASSNAME = "k-timeline-track-item";
+export type KendoTimelineTrackItemOptions = {
+    children?: JSX.Element | JSX.Element[];
+    content?: string;
+};
+export declare const TimelineTrackItem: (props: KendoTimelineTrackItemOptions & React.HTMLAttributes<HTMLLIElement>) => import("react/jsx-runtime").JSX.Element;
+export default TimelineTrackItem;

package/dist/types/timeline/timeline-track-wrap.spec.d.ts

@@ -0,0 +1,3 @@
+export declare const TIMELINETRACKWRAP_CLASSNAME = "k-timeline-track-wrap";
+export declare const TimelineTrackWrap: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export default TimelineTrackWrap;

package/dist/types/timeline/timeline-track.spec.d.ts

@@ -0,0 +1,3 @@
+export declare const TIMELINETRACK_CLASSNAME = "k-timeline-track";
+export declare const TimelineTrack: (props: React.HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+export default TimelineTrack;

package/dist/types/timeline/timeline.spec.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const TIMELINE_CLASSNAME = "k-timeline";
+export type KendoTimelineProps = {
+    children?: JSX.Element | JSX.Element[];
+    orientation?: null | 'vertical' | 'horizontal';
+    collapsibleEvents?: boolean;
+    alternatingMode?: boolean;
+};
+export declare const Timeline: {
+    (props: KendoTimelineProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        orientation: string;
+    };
+};
+export default Timeline;

package/dist/types/timeline/vertical-timeline-event.spec.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+export declare const TIMELINEVERTICALEVENT_CLASSNAME = "k-timeline-event";
+export type KendoVerticalTimelineEventProps = {
+    date?: string;
+    content?: string | JSX.Element;
+    collapsed?: boolean;
+    reverse?: boolean;
+    title?: string;
+    subtitle?: string;
+    showCollapseButton?: boolean;
+};
+export declare const VerticalTimelineEvent: {
+    (props: KendoVerticalTimelineEventProps & React.HTMLAttributes<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        collapsed: boolean;
+        reverse: boolean;
+        title: string;
+        subtitle: string;
+        content: string;
+    };
+};
+export default VerticalTimelineEvent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-themes-html",
   "description": "A collection of HTML helpers used for developing Kendo UI themes",
-  "version": "7.1.0-dev.0",
+  "version": "7.1.0-dev.2",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "e0a0885fdf92926065f788aab0ad62453b875258"
+  "gitHead": "5c463cc90be2d59355a047ce91142b02465fcc13"
 }

package/src/card/card-title.tsx

@@ -33,4 +33,4 @@ export const CardTitle = (
             {props.children}
         </div>
     );
-};
+};

package/src/gantt/tests/gantt.tsx

@@ -758,7 +758,7 @@ export default () =>(
                                     <div className="k-gantt-line k-gantt-line-v" style={{ left: "621px", top: "197px", height: "72px" }}></div>
                                     <div className="k-gantt-line k-gantt-line-h" style={{ left: "621px", top: "269px", width: "191px" }}><span className="k-arrow-e"></span></div>
                                 </div>
-                                <div className="k-current-time" style={{ left: "243px", top: "0px", height: "828px" }}></div>
+                                <div className="k-current-time" style={{ left: "243px", top: "0px", width: "1px", height: "828px" }}></div>
                             </div>
                         </div>
                     </div>

package/src/index.ts

@@ -108,7 +108,7 @@ export * from './filter/index';
 // export * from './adaptive/index''
 // export * from './chat/index';
 // export * from './mediaplayer/index';
-// export * from './timeline/index';
+export * from './timeline/index';
 // export * from './pdf-viewer/index';
 // export * from './scroller/index';
 export * from './scrollview/index';

package/src/multiselecttree/multiselecttree.spec.tsx

@@ -5,6 +5,7 @@ import {
     InputLoadingIcon,
     InputPrefix,
     InputSuffix,
+    InputInnerInput,
     InputValidationIcon
 } from '../input';
 import { Button } from '../button';
@@ -110,14 +111,14 @@ export const MultiSelectTree = (
                 className={classNames(props.className, MULTISELECTTREE_CLASSNAME)}
             >
                 <InputPrefix>{prefix}</InputPrefix>
-                <ChipList size={size} className="k-input-values">
-                    <>
-                        {tags}
-                    </>
-                </ChipList>
-                <span className="k-input-inner">
-                    <span className="k-input-value-text">{placeholder}</span>
-                </span>
+                <div className="k-input-values">
+                    <ChipList size={size}>
+                        <>
+                            {tags}
+                        </>
+                    </ChipList>
+                    <InputInnerInput placeholder={placeholder}/>
+                </div>
                 <InputValidationIcon
                     valid={valid}
                     invalid={invalid}

package/src/notification/tests/{notification-jquery-colors.tsx → notification-colors.tsx}

@@ -1,4 +1,4 @@
-import { Notification, NotificationClosable } from '../../notification';
+import { Notification, NotificationClosable } from '..';
 import { AnimationContainer } from '../../animation-container';
 
 

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

@@ -0,0 +1,49 @@
+import { NotificationNormal, NotificationClosable, IconNotification, IconNotificationClosable } from '..';
+import { AnimationContainer } from '../../animation-container';
+
+const styles = `
+    .k-notification-group, .k-animation-container {
+        position: static;
+    }
+`;
+
+export default () => (
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span className="k-col-span-1">LTR</span>
+            <span className="k-col-span-1">RTL</span>
+
+            <div className="k-notification-group">
+                <AnimationContainer>
+                    <NotificationNormal text="Default notification" />
+                </AnimationContainer>
+                <AnimationContainer>
+                    <IconNotification text="Icon notification" />
+                </AnimationContainer>
+                <AnimationContainer>
+                    <NotificationClosable text="Closable notification" />
+                </AnimationContainer>
+                <AnimationContainer>
+                    <IconNotificationClosable text="Closable notification with icon" />
+                </AnimationContainer>
+            </div>
+
+            <div className="k-notification-group k-rtl">
+                <AnimationContainer>
+                    <NotificationNormal text="Default notification" />
+                </AnimationContainer>
+                <AnimationContainer>
+                    <IconNotification text="Icon notification" />
+                </AnimationContainer>
+                <AnimationContainer>
+                    <NotificationClosable text="Closable notification" />
+                </AnimationContainer>
+                <AnimationContainer>
+                    <IconNotificationClosable text="Closable notification with icon" />
+                </AnimationContainer>
+            </div>
+        </div>
+    </>
+);

package/src/notification/tests/{notification-jquery.tsx → notification.tsx}

@@ -1,4 +1,4 @@
-import { NotificationNormal, NotificationClosable, IconNotification, IconNotificationClosable } from '../../notification';
+import { NotificationNormal, NotificationClosable, IconNotification, IconNotificationClosable } from '..';
 import { AnimationContainer } from '../../animation-container';
 
 

package/src/timeline/horizontal-timeline-event.spec.tsx

@@ -0,0 +1,66 @@
+import { classNames } from '../misc';
+import { CardHeader, CardBody, CardSubtitle } from '../card';
+import { TimelineCard, TimelineCardTitle } from '../timeline';
+
+export const TIMELINEHORIZONTALEVENT_CLASSNAME = `k-timeline-event`;
+
+const states = [];
+
+const options = {};
+
+
+export type KendoHorizontalTimelineEventProps = {
+    content?: string | JSX.Element;
+    title?: string;
+    subtitle?: string;
+};
+
+const defaultProps = {
+    title: "Event title",
+    subtitle: "Event subtitle",
+    content: "Event content"
+};
+
+export const HorizontalTimelineEvent = (
+    props: KendoHorizontalTimelineEventProps &
+        React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        content = defaultProps.content,
+        title = defaultProps.title,
+        subtitle = defaultProps.subtitle,
+        ...other
+    } = props;
+
+    return (
+        <li
+            {...other}
+            className={classNames(
+                props.className,
+                TIMELINEHORIZONTALEVENT_CLASSNAME
+            )}>
+            {content && <div className={classNames('k-timeline-card')}>
+                <TimelineCard orientation="vertical" callout="top">
+                    <div className="k-card-inner">
+                        <CardHeader>
+                            <TimelineCardTitle>{title}</TimelineCardTitle>
+                            <CardSubtitle>{subtitle}</CardSubtitle>
+                        </CardHeader>
+                        <CardBody>
+                            <div className="k-card-description">{content}</div>
+                        </CardBody>
+                    </div>
+                </TimelineCard>
+
+            </div>}
+            {props.children}
+        </li>
+    );
+};
+
+HorizontalTimelineEvent.states = states;
+HorizontalTimelineEvent.options = options;
+HorizontalTimelineEvent.className = TIMELINEHORIZONTALEVENT_CLASSNAME;
+HorizontalTimelineEvent.defaultProps = defaultProps;
+
+export default HorizontalTimelineEvent;

package/src/timeline/index.ts

@@ -0,0 +1,18 @@
+export * from './timeline.spec';
+export * from './vertical-timeline-event.spec';
+export * from './horizontal-timeline-event.spec';
+export * from './timeline-event-list.spec';
+export * from './timeline-flag-wrap.spec';
+export * from './timeline-circle.spec';
+export * from './timeline-flag.spec';
+export * from './timeline-card.spec';
+export * from './timeline-card-title';
+export * from './timeline-card-callout';
+export * from './timeline-date-wrap.spec';
+export * from './timeline-track-wrap.spec';
+export * from './timeline-track.spec';
+export * from './timeline-track-item.spec';
+export * from './templates/timeline-normal';
+export * from './templates/timeline-normal-collapsible';
+export * from './templates/timeline-normal-alternating';
+export * from './templates/timeline-horizontal';

package/src/timeline/templates/timeline-horizontal.tsx

@@ -0,0 +1,35 @@
+import { Timeline, TimelineTrackWrap, TimelineTrackItem, TimelineFlag, TimelineDateWrap, TimelineCircle, TimelineEventList, HorizontalTimelineEvent } from "../../timeline";
+
+export const TimelineHorizontal = (props) => (
+    <Timeline
+        orientation="horizontal"
+        children={[
+            <>
+                <TimelineTrackWrap>
+                    <TimelineTrackItem className="k-timeline-flag-wrap">
+                        <TimelineFlag content="2015"></TimelineFlag>
+                    </TimelineTrackItem>
+                    <TimelineTrackItem>
+                        <TimelineDateWrap date="Jan 14, 2015"></TimelineDateWrap>
+                        <TimelineCircle></TimelineCircle>
+                    </TimelineTrackItem>
+                    <TimelineTrackItem>
+                        <TimelineDateWrap date="Jun 1, 2015"></TimelineDateWrap>
+                        <TimelineCircle></TimelineCircle>
+                    </TimelineTrackItem>
+                    <TimelineTrackItem>
+                        <TimelineDateWrap date="Sep 29, 2015"></TimelineDateWrap>
+                        <TimelineCircle></TimelineCircle>
+                    </TimelineTrackItem>
+                    <TimelineTrackItem className="k-timeline-flag-wrap">
+                        <TimelineFlag content="2016"></TimelineFlag>
+                    </TimelineTrackItem>
+                </TimelineTrackWrap>
+                <TimelineEventList>
+                    <HorizontalTimelineEvent />
+                </TimelineEventList>
+            </>
+        ]}
+        {...props}>
+    </Timeline>
+);

package/src/timeline/templates/timeline-normal-alternating.tsx

@@ -0,0 +1,18 @@
+import { Timeline, TimelineFlagWrap, VerticalTimelineEvent } from "../../timeline";
+
+export const TimelineNormalAlternating = (props) => (
+    <Timeline
+        alternatingMode={true}
+        children={
+            <ul>
+                <TimelineFlagWrap year="2010"/>
+                <VerticalTimelineEvent date="Apr 11, 2010" reverse={true}/>
+                <VerticalTimelineEvent date="May 11, 2010"></VerticalTimelineEvent>
+                <TimelineFlagWrap year="2011" />
+                <VerticalTimelineEvent date="Oct 11, 2011" reverse={true}></VerticalTimelineEvent>
+                <VerticalTimelineEvent date="Dec 11, 2011"></VerticalTimelineEvent>
+            </ul>
+        }
+        {...props}>
+    </Timeline>
+);

package/src/timeline/templates/timeline-normal-collapsible.tsx

@@ -0,0 +1,16 @@
+import { Timeline, TimelineFlagWrap, VerticalTimelineEvent } from "../../timeline";
+
+export const TimelineNormalCollapsible = (props) => (
+    <Timeline
+        collapsibleEvents={true}
+        children={
+            <ul>
+                <TimelineFlagWrap year="2010"/>
+                <VerticalTimelineEvent date="May 11, 2010" collapsed={false} showCollapseButton={true}></VerticalTimelineEvent>
+                <TimelineFlagWrap year="2011" />
+                <VerticalTimelineEvent date="Oct 11, 2011" subtitle="Collapsed" collapsed={true} showCollapseButton={true}></VerticalTimelineEvent>
+            </ul>
+        }
+        {...props}>
+    </Timeline>
+);

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

@@ -0,0 +1,15 @@
+import { Timeline, TimelineFlagWrap, VerticalTimelineEvent } from "../../timeline";
+
+export const TimelineNormal = (props) => (
+    <Timeline
+        children={
+            <ul>
+                <TimelineFlagWrap year="2010"/>
+                <VerticalTimelineEvent date="May 11, 2010"></VerticalTimelineEvent>
+                <TimelineFlagWrap year="2011" />
+                <VerticalTimelineEvent date="Oct 11, 2011"></VerticalTimelineEvent>
+            </ul>
+        }
+        {...props}>
+    </Timeline>
+);

package/src/timeline/tests/timeline-horizontal.tsx

@@ -1,6 +1,4 @@
-import { ActionButtons } from '../../action-buttons';
-import { Button } from '../../button';
-import { Card, CardBody, CardCallout, CardHeader, CardMedia } from '../../card';
+import { TimelineHorizontal } from '../../timeline';
 
 const style = `
     .k-card-media {
@@ -15,65 +13,8 @@ export default () =>(
     <>
         <style>{style}</style>
         <div id="test-area">
-            <div className="k-timeline k-timeline-horizontal">
-                <div className="k-timeline-track-wrap">
-                    <Button icon="caret-alt-left" className="k-timeline-arrow k-timeline-arrow-left"></Button>
-                    <Button icon="caret-alt-right" className="k-timeline-arrow k-timeline-arrow-right"></Button>
-
-                    <div className="k-timeline-track">
-                        <ul className="k-timeline-scrollable-wrap">
-                            <li className="k-timeline-track-item">
-                                <span className="k-timeline-flag">2015</span>
-                            </li>
-                            <li className="k-timeline-track-item">
-                                <div className="k-timeline-date-wrap">
-                                    <span className="k-timeline-date">Jan 14, 2015</span>
-                                </div>
-                                <a className="k-timeline-circle" href="#"></a>
-                            </li>
-                            <li className="k-timeline-track-item k-focus">
-                                <div className="k-timeline-date-wrap">
-                                    <span className="k-timeline-date">Jun 1, 2015</span>
-                                </div>
-                                <a className="k-timeline-circle" href="#"></a>
-                            </li>
-                            <li className="k-timeline-track-item">
-                                <div className="k-timeline-date-wrap">
-                                    <span className="k-timeline-date">Sep 29, 2015</span>
-                                </div>
-                                <a className="k-timeline-circle" href="#"></a>
-                            </li>
-                            <li className="k-timeline-track-item">
-                                <span className="k-timeline-flag">2016</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div className="k-timeline-events-list">
-                    <ul className="k-timeline-scrollable-wrap">
-                        <li className="k-timeline-event">
-                            <div className="k-timeline-card">
-                                <Card orientation="vertical" callout="true">
-                                    <CardCallout className="k-timeline-card-callout" callout="top" />
-                                    <div className="k-card-inner">
-                                        <CardHeader title="Title" subtitle="Subtitle" />
-                                        <CardBody>
-                                            <div className="k-card-description">
-                                                <p>Card Description Here</p>
-                                                <CardMedia />
-                                            </div>
-                                        </CardBody>
-                                        <ActionButtons alignment="start" className="k-card-actions">
-                                            <Button fillMode="flat" themeColor="primary">Action 1</Button>
-                                            <Button fillMode="flat" themeColor="primary">Action 2</Button>
-                                        </ActionButtons>
-                                    </div>
-                                </Card>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
+            <span>Horizontal Timeline</span>
+            <TimelineHorizontal />
         </div>
     </>
 );