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

package/dist/esm/wizard/wizard-steps.js

@@ -0,0 +1,34 @@
+// src/misc/class-names.ts
+var classNames = (...args) => {
+  return args.filter((arg) => arg !== true && Boolean(arg)).map((arg) => {
+    return Array.isArray(arg) ? classNames(...arg) : typeof arg === "object" ? Object.keys(arg).map((key, idx) => arg[idx] || arg[key] && key || null).filter((el) => el !== null).join(" ") : arg;
+  }).filter((arg) => Boolean(arg)).join(" ");
+};
+
+// src/wizard/wizard-steps.tsx
+import { jsx } from "react/jsx-runtime";
+var WIZZARDSTEPS_CLASSNAME = `k-wizard-steps`;
+var states = [];
+var options = {};
+var defaultProps = {};
+var WizardSteps = (props) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    className: classNames(
+      props.className,
+      WIZZARDSTEPS_CLASSNAME
+    ),
+    children: props.children
+  }
+);
+WizardSteps.states = states;
+WizardSteps.options = options;
+WizardSteps.className = WIZZARDSTEPS_CLASSNAME;
+WizardSteps.defaultProps = defaultProps;
+var wizard_steps_default = WizardSteps;
+export {
+  WIZZARDSTEPS_CLASSNAME,
+  WizardSteps,
+  wizard_steps_default as default
+};

package/dist/esm/wizard/wizard.spec.js

@@ -0,0 +1,88 @@
+// src/misc/class-names.ts
+var classNames = (...args) => {
+  return args.filter((arg) => arg !== true && Boolean(arg)).map((arg) => {
+    return Array.isArray(arg) ? classNames(...arg) : typeof arg === "object" ? Object.keys(arg).map((key, idx) => arg[idx] || arg[key] && key || null).filter((el) => el !== null).join(" ") : arg;
+  }).filter((arg) => Boolean(arg)).join(" ");
+};
+
+// src/misc/component-class-names.ts
+var stateClassNames = (_componentClassName, props) => {
+  return classNames({
+    "k-valid": props.valid,
+    "k-invalid": props.invalid,
+    "k-hover": props.hover,
+    "k-focus": props.focus,
+    "k-checked": props.checked,
+    "k-active": props.active,
+    "k-selected": props.selected,
+    "k-disabled": props.disabled,
+    "k-indeterminate": props.indeterminate && !props.checked,
+    "k-loading": props.loading,
+    "k-empty": props.empty,
+    "k-readonly": props.readonly
+  });
+};
+
+// src/misc/theme.ts
+var States = {
+  "open": "open",
+  "hover": "hover",
+  "focus": "focus",
+  "active": "active",
+  "selected": "selected",
+  "disabled": "disabled",
+  "valid": "valid",
+  "invalid": "invalid",
+  "loading": "loading",
+  "required": "required",
+  "empty": "empty",
+  "indeterminate": "indeterminate",
+  "checked": "checked",
+  "readonly": "readonly"
+};
+
+// src/wizard/wizard.spec.tsx
+import { jsx } from "react/jsx-runtime";
+var WIZZARD_CLASSNAME = `k-wizard`;
+var states = [
+  States.disabled
+];
+var options = {};
+var defaultProps = {
+  orientation: "horizontal",
+  contentPosition: "right"
+};
+var Wizard = (props) => {
+  const {
+    disabled,
+    orientation = defaultProps.orientation,
+    contentPosition = defaultProps.contentPosition,
+    ...other
+  } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...other,
+      className: classNames(
+        props.className,
+        WIZZARD_CLASSNAME,
+        stateClassNames(WIZZARD_CLASSNAME, { disabled }),
+        {
+          [`${WIZZARD_CLASSNAME}-${orientation}`]: orientation,
+          [`${WIZZARD_CLASSNAME}-${contentPosition}`]: contentPosition === "left"
+        }
+      ),
+      children: props.children
+    }
+  );
+};
+Wizard.states = states;
+Wizard.options = options;
+Wizard.className = WIZZARD_CLASSNAME;
+Wizard.defaultProps = defaultProps;
+var wizard_spec_default = Wizard;
+export {
+  WIZZARD_CLASSNAME,
+  Wizard,
+  wizard_spec_default as default
+};

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

@@ -1,8 +1,8 @@
+export * from './filemanager-toolbar.spec';
 export * from './filemanager.spec';
 export * from './filemanager-breadcrumb.spec';
 export * from './filemanager-listview.spec';
 export * from './filemanager-treeview.spec';
-export * from './filemanager-toolbar.spec';
 export * from './filemanager-drag-hint';
 export * from './file-info';
 export * from './file-preview';

package/dist/types/index.d.ts

@@ -64,7 +64,9 @@ export * from './appbar/index';
 export * from './bottom-nav/index';
 export * from './breadcrumb/index';
 export * from './pager/index';
+export * from './stepper/index';
 export * from './treeview/index';
+export * from './wizard/index';
 export * from './card/index';
 export * from './expansion-panel/index';
 export * from './splitter/index';
@@ -73,6 +75,7 @@ export * from './grid/index';
 export * from './listview/index';
 export * from './filter/index';
 export * from './filemanager/index';
+export * from './taskboard/index';
 export * from './chat/index';
 export * from './timeline/index';
 export * from './pdf-viewer/index';

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

@@ -0,0 +1,5 @@
+export * from './stepper.spec';
+export * from './step-list';
+export * from './step';
+export * from './templates/stepper-normal';
+export * from './templates/stepper-vertical';

package/dist/types/stepper/step-list.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+export type KendoStepListProps = {
+    style?: React.CSSProperties;
+    orientation?: "horizontal" | "vertical";
+};
+export declare const StepList: {
+    (props: KendoStepListProps & React.HTMLAttributes<HTMLOListElement>): import("react/jsx-runtime").JSX.Element;
+    options: {};
+    states: any[];
+    className: string;
+    defaultProps: {
+        orientation: string;
+    };
+};
+export default StepList;

package/dist/types/stepper/step.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+declare const states: ("focus" | "invalid" | "disabled" | "hover" | "valid")[];
+export type KendoStepProps = {
+    style?: React.CSSProperties;
+    optional?: boolean;
+    first?: boolean;
+    done?: boolean;
+    current?: boolean;
+    last?: boolean;
+    label?: string;
+    text?: string;
+    icon?: string;
+    stepContent?: JSX.Element;
+};
+export type StepState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const Step: {
+    (props: KendoStepProps & StepState & React.HTMLAttributes<HTMLLIElement>): import("react/jsx-runtime").JSX.Element;
+    options: {};
+    states: ("focus" | "invalid" | "disabled" | "hover" | "valid")[];
+    className: string;
+    defaultProps: {};
+};
+export default Step;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export type KendoStepperProps = {
+    style?: React.CSSProperties;
+    dir?: "ltr" | "rtl";
+};
+export declare const Stepper: {
+    (props: KendoStepperProps & React.HTMLAttributes<HTMLElement>): import("react/jsx-runtime").JSX.Element;
+    options: {};
+    states: any[];
+    className: string;
+    defaultProps: {};
+};
+export default Stepper;

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

@@ -0,0 +1 @@
+export declare const StepperNormal: ({ gridTemplateColumns, ...other }: any) => import("react/jsx-runtime").JSX.Element;

package/dist/types/stepper/templates/stepper-vertical.d.ts

@@ -0,0 +1 @@
+export declare const StepperVertical: ({ gridTemplateRows, ...other }: any) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+export * from './taskboard-toolbar';
+export * from './taskboard-pane';
+export * from './taskboard.spec';
+export * from './taskboard-column';
+export * from './taskboard-card';
+export * from './templates/taskboard-normal';

package/dist/types/taskboard/taskboard-card.d.ts

@@ -0,0 +1,13 @@
+import { KendoCardProps, KendoCardOptions, KendoCardState } from '../card';
+export declare const TASKBOARDCARD_CLASSNAME = "k-taskboard-card";
+export type KendoTaskBoardCardProps = {
+    category?: boolean;
+};
+export declare const TaskBoardCard: {
+    (props: KendoTaskBoardCardProps & KendoCardProps & KendoCardOptions & KendoCardState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default TaskBoardCard;

package/dist/types/taskboard/taskboard-column.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const TASKBOARDCOLUMN_CLASSNAME = "k-taskboard-column";
+declare const states: never[];
+export type KendoTaskBoardColumnProps = {
+    header?: JSX.Element;
+    edit?: boolean;
+};
+export type KendoTaskBoardColumnState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const TaskBoardColumn: {
+    (props: KendoTaskBoardColumnProps & KendoTaskBoardColumnState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        header: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default TaskBoardColumn;

package/dist/types/taskboard/taskboard-pane.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const TASKBOARDPANE_CLASSNAME = "k-taskboard-pane";
+declare const states: never[];
+export type KendoTaskBoardPaneProps = {
+    header?: JSX.Element;
+};
+export type KendoTaskBoardPaneState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const TaskBoardPane: {
+    (props: KendoTaskBoardPaneProps & KendoTaskBoardPaneState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {
+        header: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default TaskBoardPane;

package/dist/types/taskboard/taskboard-toolbar.d.ts

@@ -0,0 +1,10 @@
+import { KendoToolbarProps } from '../toolbar';
+export declare const TASKBOARDTOOLBAR_CLASSNAME = "k-taskboard-toolbar";
+export declare const TaskBoardToolbar: {
+    (props: KendoToolbarProps & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default TaskBoardToolbar;

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

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const TASKBOARD_CLASSNAME = "k-taskboard";
+declare const states: "disabled"[];
+export type KendoTaskBoardProps = {
+    toolbar?: JSX.Element;
+    pane?: boolean;
+    panePosition?: "start" | "end";
+};
+export type KendoTaskBoardState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const TaskBoard: {
+    (props: KendoTaskBoardProps & KendoTaskBoardState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: "disabled"[];
+    options: {};
+    className: string;
+    defaultProps: {
+        toolbar: import("react/jsx-runtime").JSX.Element;
+        pane: boolean;
+        panePosition: string;
+    };
+};
+export default TaskBoard;

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

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

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

@@ -0,0 +1,5 @@
+export * from './wizard.spec';
+export * from './wizard-step';
+export * from './wizard-steps';
+export * from './templates/wizard-normal';
+export * from './templates/wizard-vertical';

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

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

package/dist/types/wizard/templates/wizard-vertical.d.ts

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

package/dist/types/wizard/wizard-step.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export declare const WIZZARDSTEP_CLASSNAME = "k-wizard-step";
+declare const states: "focus"[];
+export type KendoWizardStepProps = {
+    buttons?: JSX.Element;
+};
+export type KendoWizardStepState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const WizardStep: {
+    (props: KendoWizardStepProps & KendoWizardStepState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: "focus"[];
+    options: {};
+    className: string;
+    defaultProps: {
+        buttons: import("react/jsx-runtime").JSX.Element;
+    };
+};
+export default WizardStep;

package/dist/types/wizard/wizard-steps.d.ts

@@ -0,0 +1,9 @@
+export declare const WIZZARDSTEPS_CLASSNAME = "k-wizard-steps";
+export declare const WizardSteps: {
+    (props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: any[];
+    options: {};
+    className: string;
+    defaultProps: {};
+};
+export default WizardSteps;

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

@@ -0,0 +1,20 @@
+export declare const WIZZARD_CLASSNAME = "k-wizard";
+declare const states: "disabled"[];
+export type KendoWizardProps = {
+    orientation?: "vertical" | "horizontal";
+    contentPosition?: "right" | "left";
+};
+export type KendoWizardState = {
+    [K in (typeof states)[number]]?: boolean;
+};
+export declare const Wizard: {
+    (props: KendoWizardProps & KendoWizardState & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    states: "disabled"[];
+    options: {};
+    className: string;
+    defaultProps: {
+        orientation: string;
+        contentPosition: string;
+    };
+};
+export default Wizard;

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.2.0",
+  "version": "7.2.1-dev.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -52,5 +52,5 @@
   "devDependencies": {
     "@types/react": "^18.0.2"
   },
-  "gitHead": "47106d69e413c09b195dd2400f368e0ddedb4712"
+  "gitHead": "e2d5c5a08efe3d7ba9bb5a5c9666d7f2aab15d3d"
 }

package/src/filemanager/filemanager-toolbar.spec.tsx

@@ -20,11 +20,11 @@ export const FileManagerToolbar = (
 
     return (
         <Toolbar
+            {...other}
             className={classNames(
                 props.className,
                 FILEMANAGERTOOLBAR_CLASSNAME,
             )}
-            {...other}
         >
             {children}
         </Toolbar>

package/src/filemanager/filemanager.spec.tsx

@@ -1,10 +1,10 @@
+import { FileManagerToolbar } from '.';
 import { classNames, stateClassNames, States } from '../misc';
 import { Button } from '../button';
 import { ButtonGroup } from '../button-group';
 import { SplitButton } from '../split-button';
 import { Switch } from '../switch';
 import { Searchbox } from '../searchbox';
-import FileManagerToolbar from './filemanager-toolbar.spec';
 
 const FILEMANAGER_CLASSNAME = 'k-filemanager';
 
@@ -54,7 +54,7 @@ export const FileManager = (
 ) => {
     const {
         disabled,
-        toolbar,
+        toolbar = defaultProps.toolbar,
     } = props;
 
     return (

package/src/filemanager/index.ts

@@ -1,8 +1,8 @@
+export * from './filemanager-toolbar.spec';
 export * from './filemanager.spec';
 export * from './filemanager-breadcrumb.spec';
 export * from './filemanager-listview.spec';
 export * from './filemanager-treeview.spec';
-export * from './filemanager-toolbar.spec';
 export * from './filemanager-drag-hint';
 export * from './file-info';
 export * from './file-preview';

package/src/index.ts

@@ -83,10 +83,10 @@ export * from './appbar/index';
 export * from './bottom-nav/index';
 export * from './breadcrumb/index';
 export * from './pager/index';
-// export * from './stepper/index';
+export * from './stepper/index';
 // export * from './tabstrip/index';
 export * from './treeview/index';
-// export * from './wizard/index';
+export * from './wizard/index';
 
 // Layout & containers
 export * from './card/index';
@@ -104,7 +104,7 @@ export * from './listview/index';
 // export * from './treelist/index';
 export * from './filter/index';
 export * from './filemanager/index';
-// export * from './taskboard/index';
+export * from './taskboard/index';
 
 // Misc
 // export * from './adaptive/index''

package/src/stepper/index.tsx

@@ -0,0 +1,5 @@
+export * from './stepper.spec';
+export * from './step-list';
+export * from './step';
+export * from './templates/stepper-normal';
+export * from './templates/stepper-vertical';

package/src/stepper/step-list.tsx

@@ -0,0 +1,49 @@
+import { classNames } from '../misc';
+
+const STEPLIST_CLASSNAME = 'k-step-list';
+
+const states = [];
+
+const options = {};
+
+export type KendoStepListProps = {
+    style?: React.CSSProperties;
+    orientation?: "horizontal" | "vertical";
+}
+
+const defaultProps = {
+    orientation: "horizontal",
+};
+
+export const StepList = (
+    props: KendoStepListProps &
+        React.HTMLAttributes<HTMLOListElement>
+) => {
+    const {
+        style,
+        orientation = defaultProps.orientation,
+        ...other
+    } = props;
+
+    return (
+        <ol
+            {...other}
+            style={style}
+            className={classNames(
+                props.className,
+                STEPLIST_CLASSNAME,
+                {
+                    [`${STEPLIST_CLASSNAME}-${orientation}`]: orientation,
+                }
+            )}>
+            {props.children}
+        </ol>
+    );
+};
+
+StepList.options = options;
+StepList.states = states;
+StepList.className = STEPLIST_CLASSNAME;
+StepList.defaultProps = defaultProps;
+
+export default StepList;

package/src/stepper/step.tsx

@@ -0,0 +1,129 @@
+import { Icon } from '../icon';
+import { States, classNames, stateClassNames } from '../misc';
+
+const STEP_CLASSNAME = 'k-step';
+
+const states = [
+    States.disabled,
+    States.hover,
+    States.focus,
+    States.invalid,
+    States.valid,
+
+];
+
+const options = {};
+
+export type KendoStepProps = {
+    style?: React.CSSProperties;
+    optional?: boolean;
+    first?: boolean;
+    done?: boolean;
+    current?: boolean;
+    last?: boolean;
+    label?: string;
+    text?: string;
+    icon?: string;
+    stepContent?: JSX.Element;
+}
+
+export type StepState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {};
+
+export const Step = (
+    props: KendoStepProps & StepState &
+        React.HTMLAttributes<HTMLLIElement>
+) => {
+    const {
+        style,
+        disabled,
+        hover,
+        focus,
+        invalid,
+        valid,
+        optional,
+        first,
+        done,
+        current,
+        last,
+        label,
+        text,
+        icon,
+        stepContent,
+        ...other
+    } = props;
+
+    const iconName = invalid ? 'warning-circle' : 'check-circle';
+    const renderValidationIcon = Boolean( valid || invalid );
+
+    return (
+        <li
+            {...other}
+            style={style}
+            className={classNames(
+                props.className,
+                STEP_CLASSNAME,
+                {
+                    [`${STEP_CLASSNAME}-done`]: done,
+                    [`${STEP_CLASSNAME}-first`]: first,
+                    [`${STEP_CLASSNAME}-current`]: current,
+                    [`${STEP_CLASSNAME}-last`]: last,
+                    [`${STEP_CLASSNAME}-optional`]: optional,
+                    [`${STEP_CLASSNAME}-success`]: valid,
+                    [`${STEP_CLASSNAME}-error`]: invalid,
+                },
+                stateClassNames(STEP_CLASSNAME, { hover, focus, disabled }),
+            )}>
+
+            <a href="#" className="k-step-link">
+
+                { text && !icon &&
+                    <span className="k-step-indicator">
+                        <span className="k-step-indicator-text">
+                            {text}
+                        </span>
+                    </span>
+                }
+
+                { icon &&
+                    <span className="k-step-indicator">
+                        <Icon className="k-step-indicator-icon" icon={icon}/>
+                    </span>
+                }
+
+                { optional && !label &&
+                    <span className="k-step-label">
+                        <span className="k-step-label-optional">(Optional)</span>
+                    </span>
+                }
+
+                { label &&
+                    <span className="k-step-label">
+                        <span className="k-step-text">{label}</span>
+
+                        {renderValidationIcon &&
+                            <Icon icon={iconName}></Icon>
+                        }
+                        {optional &&
+                            <span className="k-step-label-optional">(Optional)</span>
+                        }
+                    </span>
+                }
+            </a>
+
+            {stepContent &&
+                <div className="k-step-content" style={{ height: "140px" }}>
+                    {stepContent}
+                </div>
+            }
+        </li>
+    );
+};
+
+Step.options = options;
+Step.states = states;
+Step.className = STEP_CLASSNAME;
+Step.defaultProps = defaultProps;
+
+export default Step;