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

package/src/column-menu/templates/column-menu-tabbed.tsx

@@ -0,0 +1,36 @@
+import { ColumnMenu } from "../../column-menu";
+import { Icon } from '../../icon';
+
+export const ColumnMenuTabbed = (props) => (
+    <ColumnMenu
+        view="tabbed"
+        children={[
+            <div className="k-tabstrip k-pos-relative k-tabstrip-top">
+                <div className="k-tabstrip-items-wrapper k-hstack">
+                    <ul className="k-reset k-tabstrip-items">
+                        <li className="k-tabstrip-item k-item k-active">
+                            <span className="k-link">
+                                <Icon icon="filter" />
+                            </span>
+                        </li>
+                        <li className="k-tabstrip-item k-item">
+                            <span className="k-link">
+                                <Icon icon="sliders" />
+                            </span>
+                        </li>
+                        <li className="k-tabstrip-item k-item">
+                            <span className="k-link">
+                                <Icon icon="columns" />
+                            </span>
+                        </li>
+                    </ul>
+                </div>
+                <div className="k-tabstrip-content k-active">
+                    Tabbed column menu content
+                </div>
+            </div>
+        ]}
+        {...props}
+    >
+    </ColumnMenu>
+);

package/src/column-menu/templates/filter-menu-multi-check.tsx

@@ -0,0 +1,26 @@
+import { FilterMenu, ColumnMenuMulticheckWrap, ColumnMenuMulticheckItem } from "../../column-menu";
+import { Searchbox } from '../../searchbox';
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+
+export const FilterMenuMultiCheck = (props) => (
+    <FilterMenu
+        children={[
+            <Searchbox placeholder="Search..." />,
+            <ColumnMenuMulticheckWrap>
+                <ColumnMenuMulticheckItem text="Select All" className="k-check-all-wrap" />
+                <ColumnMenuMulticheckItem text="Column 1" />
+                <ColumnMenuMulticheckItem text="Column 2" />
+                <ColumnMenuMulticheckItem text="Column 3" />
+                <ColumnMenuMulticheckItem text="Column 4 Column 4 Column 4 Column 4 Column 4 Column 4 Column 4 Column 4" />
+            </ColumnMenuMulticheckWrap>,
+            <div className="k-filter-selected-items">0 selected items</div>,
+            <ActionButtons alignment="stretched">
+                <Button themeColor="primary">Apply</Button>
+                <Button>Clear</Button>
+            </ActionButtons>
+        ]}
+        {...props}
+    >
+    </FilterMenu>
+);

package/src/column-menu/templates/filter-menu-normal.tsx

@@ -0,0 +1,23 @@
+import { FilterMenu } from "../../column-menu";
+import { DropdownList } from "../../dropdownlist";
+import { Textbox } from "../../textbox";
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+
+export const FilterMenuNormal = (props) => (
+    <FilterMenu
+        children={[
+            <DropdownList value="Contains" />,
+            <Textbox placeholder="Filter..." />,
+            <DropdownList value="And" className="k-filter-and" />,
+            <DropdownList value="Contains" />,
+            <Textbox placeholder="Filter..." />,
+            <ActionButtons alignment="stretched">
+                <Button themeColor="primary">Filter</Button>
+                <Button>Clear</Button>
+            </ActionButtons>
+        ]}
+        {...props}
+    >
+    </FilterMenu>
+);

package/src/column-menu/tests/column-menu-rtl.tsx

@@ -0,0 +1,119 @@
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
+
+const styles = `
+    .k-animation-container,
+    .k-popup {
+        position: relative;
+        overflow: visible;
+    }
+
+    .k-column-menu-popup {
+        width: 100%;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3 k-rtl" dir="rtl">
+
+            <span>Basic</span>
+            <span>Expanded item</span>
+            <span>Expanded item with Action buttons</span>
+
+            <section>
+                <ColumnMenuNormal />
+            </section>
+
+            <section>
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expanded item" itemIcon="columns" expanded={true} itemContent={
+                            <>
+                                <div className="k-column-list-wrapper">
+                                    <div className="k-column-list">
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 1</span>
+                                        </label>
+                                        <label className="k-column-list-item k-focus">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 2</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 3</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 4</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </>
+                        }/>
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expandable item" itemIcon="filter" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Non-expandable item" icon="group" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
+            </section>
+
+            <section>
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expanded item" itemIcon="columns" expanded={true} itemContent={
+                            <>
+                                <div className="k-column-list-wrapper">
+                                    <div className="k-column-list">
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 1</span>
+                                        </label>
+                                        <label className="k-column-list-item k-focus">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 2</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 3</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 4</span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <ActionButtons alignment="stretched">
+                                    <Button themeColor="primary">Apply</Button>
+                                    <Button>Reset</Button>
+                                </ActionButtons>
+                            </>
+                        }/>
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expandable item" itemIcon="filter" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Non-expandable item" icon="group" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
+            </section>
+
+        </div>
+    </>
+);

package/src/column-menu/tests/column-menu-tabbed.tsx

@@ -0,0 +1,113 @@
+import { Icon } from '../../icon';
+import { ColumnMenuTabbed, ColumnMenuItemWrapper, ColumnMenuItem, ColumnMenuExpander, FilterMenuNormal } from '../../column-menu';
+
+const styles = `
+    .k-animation-container,
+    .k-popup {
+        position: relative;
+        overflow: visible;
+    }
+
+    .k-column-menu-popup {
+        width: 100%;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-2">
+
+            <span>First tab seledted</span>
+            <span>Second tab selected</span>
+            <section>
+                <ColumnMenuTabbed />
+            </section>
+
+            <section>
+                <ColumnMenuTabbed>
+                    <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-reset k-tabstrip-items">
+                                <li className="k-item">
+                                    <span className="k-link">
+                                        <Icon icon="filter" />
+                                    </span>
+                                </li>
+                                <li className="k-item k-active">
+                                    <span className="k-link">
+                                        <Icon icon="sliders" />
+                                    </span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">
+                                        <Icon icon="columns" />
+                                    </span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <ColumnMenuItemWrapper>
+                                <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                                <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                            </ColumnMenuItemWrapper>
+                            <ColumnMenuItemWrapper>
+                                <ColumnMenuItem text="Item 3" icon="group" />
+                            </ColumnMenuItemWrapper>
+                            <ColumnMenuItemWrapper>
+                                <ColumnMenuExpander itemText="Expandable item" itemIcon="set-column-position" />
+                            </ColumnMenuItemWrapper>
+                        </div>
+                    </div>
+                </ColumnMenuTabbed>
+            </section>
+
+            <span>2 Tabs Set</span>
+            <span>Single Tab Set</span>
+
+            <section>
+                <ColumnMenuTabbed>
+                    <div className="k-tabstrip k-tabstrip-top k-overflow-hidden">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-reset k-tabstrip-items">
+                                <li className="k-item k-active">
+                                    <span className="k-link">
+                                        <Icon icon="filter" />
+                                    </span>
+                                </li>
+                                <li className="k-item">
+                                    <span className="k-link">
+                                        <Icon icon="sliders" />
+                                    </span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <FilterMenuNormal />
+                        </div>
+                    </div>
+                </ColumnMenuTabbed>
+            </section>
+
+            <section>
+                <ColumnMenuTabbed>
+                    <div className="k-tabstrip k-pos-relative k-tabstrip-top">
+                        <div className="k-tabstrip-items-wrapper k-hstack">
+                            <ul className="k-reset k-tabstrip-items">
+                                <li className="k-item k-active">
+                                    <span className="k-link">
+                                        <Icon icon="filter" />
+                                    </span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div className="k-tabstrip-content k-active">
+                            <FilterMenuNormal />
+                        </div>
+                    </div>
+                </ColumnMenuTabbed>
+            </section>
+
+        </div>
+    </>
+);

package/src/column-menu/tests/column-menu.tsx

@@ -0,0 +1,119 @@
+import { ActionButtons } from '../../action-buttons';
+import { Button } from '../../button';
+import { Checkbox } from '../../checkbox';
+import { ColumnMenuItem, ColumnMenuItemWrapper, ColumnMenuExpander, ColumnMenuNormal } from '../../column-menu';
+
+const styles = `
+    .k-animation-container,
+    .k-popup {
+        position: relative;
+        overflow: visible;
+    }
+
+    .k-column-menu-popup {
+        width: 100%;
+    }
+`;
+
+export default () =>(
+    <>
+        <style>{styles}</style>
+        <div id="test-area" className="k-d-grid k-grid-cols-3">
+
+            <span>Basic</span>
+            <span>Expanded item</span>
+            <span>Expanded item with Action buttons</span>
+
+            <section>
+                <ColumnMenuNormal />
+            </section>
+
+            <section>
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expanded item" itemIcon="columns" expanded={true} itemContent={
+                            <>
+                                <div className="k-column-list-wrapper">
+                                    <div className="k-column-list">
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 1</span>
+                                        </label>
+                                        <label className="k-column-list-item k-focus">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 2</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 3</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 4</span>
+                                        </label>
+                                    </div>
+                                </div>
+                            </>
+                        }/>
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expandable item" itemIcon="filter" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Non-expandable item" icon="group" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
+            </section>
+
+            <section>
+                <ColumnMenuNormal>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Item 1" icon="sort-asc-small" />
+                        <ColumnMenuItem text="Item 2" icon="sort-desc-small" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expanded item" itemIcon="columns" expanded={true} itemContent={
+                            <>
+                                <div className="k-column-list-wrapper">
+                                    <div className="k-column-list">
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 1</span>
+                                        </label>
+                                        <label className="k-column-list-item k-focus">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 2</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 3</span>
+                                        </label>
+                                        <label className="k-column-list-item">
+                                            <Checkbox />
+                                            <span className="k-checkbox-label">Column 4</span>
+                                        </label>
+                                    </div>
+                                </div>
+                                <ActionButtons alignment="stretched">
+                                    <Button themeColor="primary">Apply</Button>
+                                    <Button>Reset</Button>
+                                </ActionButtons>
+                            </>
+                        }/>
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuExpander itemText="Expandable item" itemIcon="filter" />
+                    </ColumnMenuItemWrapper>
+                    <ColumnMenuItemWrapper>
+                        <ColumnMenuItem text="Non-expandable item" icon="group" />
+                    </ColumnMenuItemWrapper>
+                </ColumnMenuNormal>
+            </section>
+
+        </div>
+    </>
+);

package/src/gantt/gantt-columns-table.spec.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../misc';
+import { Table, KendoTableOptions } from '../table';
+
+export const GANTTCOLUMNSTABLE_CLASSNAME = `k-gantt-columns`;
+
+export const GanttColumnsTable = (
+    props: KendoTableOptions &
+        React.HTMLAttributes<HTMLTableElement>
+) => (
+    <Table
+        size="medium"
+        {...props}
+        className={classNames(
+            props.className,
+            GANTTCOLUMNSTABLE_CLASSNAME,
+        )}
+    >
+        {props.children}
+    </Table>
+);

package/src/gantt/gantt-content.spec.tsx

@@ -0,0 +1,16 @@
+import { classNames } from '../misc';
+
+const className = `k-gantt-content`;
+
+export const GanttContent = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}>
+        {props.children}
+    </div>
+);

package/src/gantt/gantt-footer-toolbar.spec.tsx

@@ -0,0 +1,20 @@
+import { Toolbar, KendoToolbarProps } from '../toolbar';
+import { classNames } from '../misc';
+
+const className = `k-gantt-footer`;
+
+export const GanttFooterToolbar = (
+    props: KendoToolbarProps
+        & React.HTMLAttributes<HTMLDivElement>
+) => (
+    <Toolbar
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+            `k-gantt-toolbar`
+        )}
+    >
+        {props.children}
+    </Toolbar>
+);

package/src/gantt/gantt-header-toolbar.spec.tsx

@@ -0,0 +1,20 @@
+import { Toolbar, KendoToolbarProps } from '../toolbar';
+import { classNames } from '../misc';
+
+const className = `k-gantt-header`;
+
+export const GanttHeaderToolbar = (
+    props: KendoToolbarProps
+        & React.HTMLAttributes<HTMLDivElement>
+) => (
+    <Toolbar
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+            `k-gantt-toolbar`
+        )}
+    >
+        {props.children}
+    </Toolbar>
+);

package/src/gantt/gantt-line.spec.tsx

@@ -0,0 +1,47 @@
+import { classNames } from '../misc';
+
+export const GANTTLINE_CLASSNAME = 'k-gantt-line';
+
+const states = [];
+
+const options = {};
+
+export type KendoGanttLineProps = {
+    orientation?: "horizontal" | "vertical";
+};
+
+const defaultProps = {
+    orientation: "horizontal"
+};
+
+export const GanttLine = (
+    props: KendoGanttLineProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        orientation = defaultProps.orientation,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GANTTLINE_CLASSNAME,
+                {
+                    [`k-gantt-line-h`]: orientation === "horizontal",
+                    [`k-gantt-line-v`]: orientation === "vertical"
+                }
+            )}>
+        </div>
+    );
+};
+
+GanttLine.states = states;
+GanttLine.options = options;
+GanttLine.className = GANTTLINE_CLASSNAME;
+GanttLine.defaultProps = defaultProps;
+
+export default GanttLine;

package/src/gantt/gantt-rows-table.spec.tsx

@@ -0,0 +1,20 @@
+import { classNames } from '../misc';
+import { Table, KendoTableOptions } from '../table';
+
+export const GANTTROWSTABLE_CLASSNAME = `k-gantt-rows`;
+
+export const GanttRowsTable = (
+    props: KendoTableOptions &
+        React.HTMLAttributes<HTMLTableElement>
+) => (
+    <Table
+        size="medium"
+        {...props}
+        className={classNames(
+            props.className,
+            GANTTROWSTABLE_CLASSNAME,
+        )}
+    >
+        {props.children}
+    </Table>
+);

package/src/gantt/gantt-tables-wrapper.spec.tsx

@@ -0,0 +1,16 @@
+import { classNames } from '../misc';
+
+const className = `k-gantt-tables`;
+
+export const GanttTables = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => (
+    <div
+        {...props}
+        className={classNames(
+            props.className,
+            className,
+        )}>
+        {props.children}
+    </div>
+);

package/src/gantt/gantt-task-content.spec.tsx

@@ -0,0 +1,44 @@
+import { classNames } from '../misc';
+import { Icon } from '../icon';
+
+export const GANTTTASKCONTENT_CLASSNAME = 'k-task-content';
+
+const states = [];
+
+const options = {};
+
+export type KendoGanttTaskContentProps = {
+    content?: string | JSX.Element | JSX.Element[];
+};
+
+const defaultProps = {};
+
+export const GanttTaskContent = (
+    props: KendoGanttTaskContentProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        content,
+        ...other
+    } = props;
+
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                GANTTTASKCONTENT_CLASSNAME
+            )}>
+            { content && <div className="k-task-template">{content}</div> }
+            <span className="k-task-actions"><a className="k-link k-task-delete"><Icon icon="x" /></a></span><span className="k-resize-handle k-resize-w"></span><span className="k-resize-handle k-resize-e"></span>
+        </div>
+    );
+};
+
+GanttTaskContent.states = states;
+GanttTaskContent.options = options;
+GanttTaskContent.className = GANTTTASKCONTENT_CLASSNAME;
+GanttTaskContent.defaultProps = defaultProps;
+
+export default GanttTaskContent;