@progress/kendo-vue-layout 8.0.3-develop.2 → 8.0.3-develop.4

package/stacklayout/StackLayoutProps.d.ts

@@ -0,0 +1,82 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * Represents the props of the [Kendo UI for Vue StackLayout component]({% slug overview_stacklayout %}).
+ */
+export interface StackLayoutProps {
+    /**
+     * Sets the `id` property of the root StackLayout element.
+     */
+    id?: string;
+    /**
+     * Specifies the gap between the inner elements ([see example]({% slug layout_stacklayout_gaps %})).
+     */
+    gap?: number | string;
+    /**
+     * Specifies the orientation of the StackLayout.
+     * ([see example]({% slug layout_stacklayout_orientation %})).
+     *
+     * The possible values are:
+     * * (Default)`horizontal`
+     * * `vertical`
+     */
+    orientation?: StackLayoutOrientation | string;
+    /**
+     * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
+     * Demo ([here]({% slug layout_stacklayout_alignment %}#toc-horizontal-alignment)) and ([here]({% slug layout_stacklayout_alignment %}#toc-vertical-alignment)).
+     *
+     * The possible keys are:
+     * * `horizontal`—Defines the possible horizontal alignment of the inner StackLayout elements.
+     *   * `start`—Uses the start point of the container.
+     *   * `center`—Uses the central point of the container.
+     *   * `end`—Uses the end point of the container.
+     *   * (Default)`stretch`—Stretches the items to fill the width of the container.
+     * * `vertical`—Defines the possible vertical alignment of the inner StackLayout elements.
+     *   * `top`—Uses the top point of the container.
+     *   * `middle`—Uses the middle point of the container.
+     *   * `bottom`—Uses the bottom point of the container.
+     *   * (Default)`stretch`—Stretches the items to fill the height of the container.
+     */
+    align?: StackLayoutAlign;
+}
+/**
+ * Specifies the orientation of the StackLayout ([see example]({% slug layout_stacklayout_orientation %})).
+ *
+ * The possible values are:
+ * * (Default)`horizontal`
+ * * `vertical`
+ *
+ */
+export type StackLayoutOrientation = 'horizontal' | 'vertical';
+/**
+ * Specifies the horizontal and vertical alignment of the inner StackLayout elements.
+ */
+export interface StackLayoutAlign {
+    /**
+     * Defines the possible horizontal alignment of the inner StackLayout elements
+     * ([see example]({% slug layout_stacklayout_alignment %}#toc-horizontal-alignment)).
+     *
+     * The available values are:
+     * - `start`—Uses the start point of the container.
+     * - `center`—Uses the center point of the container.
+     * - `end`—Uses the end point of the container.
+     * - (Default)`stretch`—Stretches the items to fill the width of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * Defines the possible vertical alignment of the inner StackLayout elements
+     * ([see example]({% slug layout_stacklayout_alignment %}#toc-vertical-alignment)).
+     *
+     * The available values are:
+     * - `top`—Uses the top point of the container.
+     * - `middle`—Uses the middle point of the container.
+     * - `bottom`—Uses the bottom point of the container.
+     * - (Default)`stretch`—Stretches the items to fill the height of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
+}

package/stepper/Step.d.ts

@@ -0,0 +1,120 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PropType } from 'vue';
+/**
+* @hidden
+*/
+export interface StepComputed {
+    itemClassNames: object;
+    itemStyles: object;
+}
+/**
+* Represents the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
+*
+* ```jsx
+* <Step v-bind="props" @change="(e) => props.onChange(e)">
+* <span class="k-step-indicator" aria-hidden="true">
+*    <span class="emoji">{{ props.emoji }}</span>
+* </span>
+* <span class="k-step-label">
+*    <span class="k-step-text">{{ props.label }}</span>
+* </span>
+* </Step>
+* ```
+*/
+declare const Step: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    current: PropType<boolean>;
+    disabled: PropType<boolean>;
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+    index: PropType<number>;
+    isValid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    focused: PropType<any>;
+    label: PropType<string>;
+    optional: PropType<boolean>;
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    text: PropType<string>;
+    animationDuration: PropType<any>;
+    isVertical: PropType<any>;
+    item: PropType<any>;
+    linear: PropType<any>;
+    mode: PropType<any>;
+    numOfSteps: PropType<any>;
+    value: PropType<any>;
+    successIcon: PropType<String>;
+    successSvgIcon: PropType<Object>;
+    errorIcon: PropType<String>;
+    errorSvgIcon: PropType<Object>;
+    onChange: PropType<any>;
+    onFocus: PropType<any>;
+}>, {
+    kendoLocalizationService: {};
+}, {}, {
+    itemClassNames(): StepComputed['itemClassNames'];
+    itemStyles(): StepComputed['itemStyles'];
+}, {
+    getStepIndicatorContent(label: string, icon: string, svgIcon: any, text: string, index: number, isValid: boolean | undefined, validationIcons: any): any;
+    focus(): void;
+    handleClick(event: any): void;
+    handleFocus(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    current: PropType<boolean>;
+    disabled: PropType<boolean>;
+    icon: PropType<string>;
+    svgIcon: PropType<import('@progress/kendo-vue-common').SVGIcon>;
+    index: PropType<number>;
+    isValid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    focused: PropType<any>;
+    label: PropType<string>;
+    optional: PropType<boolean>;
+    tabIndex: {
+        type: PropType<number>;
+        default: number;
+    };
+    text: PropType<string>;
+    animationDuration: PropType<any>;
+    isVertical: PropType<any>;
+    item: PropType<any>;
+    linear: PropType<any>;
+    mode: PropType<any>;
+    numOfSteps: PropType<any>;
+    value: PropType<any>;
+    successIcon: PropType<String>;
+    successSvgIcon: PropType<Object>;
+    errorIcon: PropType<String>;
+    errorSvgIcon: PropType<Object>;
+    onChange: PropType<any>;
+    onFocus: PropType<any>;
+}>> & Readonly<{}>, {
+    tabIndex: number;
+    isValid: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/**
+* Represents the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
+*
+* ```jsx
+* <Step v-bind="props" @change="(e) => props.onChange(e)">
+* <span class="k-step-indicator" aria-hidden="true">
+*    <span class="emoji">{{ props.emoji }}</span>
+* </span>
+* <span class="k-step-label">
+*    <span class="k-step-text">{{ props.label }}</span>
+* </span>
+* </Step>
+* ```
+*/
+export { Step };

package/stepper/Stepper.d.ts

@@ -0,0 +1,195 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepChangeEvent } from './interfaces/StepChangeEvent';
+import { StepFocusEvent } from './interfaces/StepFocusEvent';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface StepperComputed {
+    [key: string]: any;
+    computedValue: number;
+}
+/**
+ * Represents the [Kendo UI for Vue Stepper component]({% slug overview_stepper %}).
+ *
+ * ```jsx
+ * <template>
+ *    <Stepper :value="value" @change="handleChange" :items="items" />
+ * </template>
+ *
+ * <script>
+ * import {
+ *  Stepper
+ *     } from '@progress/kendo-vue-layout';
+ * export default {
+ *     components: {
+ *        Stepper
+ *     },
+ *     data () {
+ *       return {
+ *         value: 0,
+ *         items: [
+ *           {
+ *             label: "Cart",
+ *             icon: "cart",
+ *           },
+ *           {
+ *             label: "Delivery Address",
+ *             icon: "marker-pin-target",
+ *           },
+ *           {
+ *             label: "Payment Method",
+ *             icon: "dollar",
+ *           },
+ *           {
+ *             label: "Preview",
+ *             icon: "preview",
+ *             optional: true,
+ *           },
+ *           {
+ *             label: "Finish Order",
+ *             icon: "track-changes-accept",
+ *           },
+ *         ]
+ *       }
+ *     },
+ *     methods: {
+ *       handleChange (e) {
+ *         this.value = e.value;
+ *       }
+ *     }
+ * };
+ * </script>
+ * ```
+ *
+ */
+declare const Stepper: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    animationDuration: {
+        type: PropType<number | boolean>;
+        default: number;
+    };
+    dir: PropType<string>;
+    disabled: PropType<boolean>;
+    item: {
+        type: PropType<any>;
+        default: any;
+    };
+    items: PropType<import('..').StepProps[]>;
+    linear: PropType<boolean>;
+    mode: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    orientation: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    value: {
+        type: PropType<number>;
+        default: number;
+    };
+    progressTotal: {
+        type: PropType<number>;
+    };
+    progress: {
+        type: PropType<number>;
+    };
+    modelValue: PropType<number>;
+    successIcon: PropType<string>;
+    errorIcon: PropType<string>;
+}>, {}, {
+    currentDir: string;
+    focusedIdx: number;
+    stepper: {};
+    currentFocused: boolean;
+}, {
+    computedValue(): any;
+    isVertical(): boolean;
+    numOfSteps(): any;
+    stepperClasses(): {
+        'k-stepper': boolean;
+        'k-stepper-linear': any;
+    };
+    stepperStyles(): {
+        display: string;
+        gridTemplateColumns: string;
+        gridTemplateRows: string;
+    };
+    listClasses(): {
+        'k-step-list': boolean;
+        'k-step-list-horizontal': boolean;
+        'k-step-list-vertical': any;
+    };
+    listStyles(): {
+        gridColumnStart: string | number;
+        gridColumnEnd: string | number;
+        gridRowStart: string | number;
+        gridRowEnd: string | number;
+    };
+    progressbarStyles(): {
+        gridColumnStart: string | number;
+        gridColumnEnd: string | number;
+        gridRowStart: string | number;
+        gridRowEnd: string | number;
+    };
+}, {
+    focus(): void;
+    dispatchChangeEvent(event: any, val: number): void;
+    handleChange(event: StepChangeEvent): void;
+    handleFocus(event: StepFocusEvent): void;
+    handleEnter(event: any): void;
+    handleFocusin(): void;
+    handleFocusout(): void;
+    handleKeyDown(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    animationDuration: {
+        type: PropType<number | boolean>;
+        default: number;
+    };
+    dir: PropType<string>;
+    disabled: PropType<boolean>;
+    item: {
+        type: PropType<any>;
+        default: any;
+    };
+    items: PropType<import('..').StepProps[]>;
+    linear: PropType<boolean>;
+    mode: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    orientation: {
+        type: PropType<string>;
+        default: string;
+        validator: (value: string) => any;
+    };
+    value: {
+        type: PropType<number>;
+        default: number;
+    };
+    progressTotal: {
+        type: PropType<number>;
+    };
+    progress: {
+        type: PropType<number>;
+    };
+    modelValue: PropType<number>;
+    successIcon: PropType<string>;
+    errorIcon: PropType<string>;
+}>> & Readonly<{}>, {
+    value: number;
+    item: any;
+    orientation: string;
+    mode: string;
+    animationDuration: number | boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { Stepper };

package/stepper/contants.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const DEFAULT_ANIMATION_DURATION = 400;
+/**
+ * @hidden
+ */
+export declare const NO_ANIMATION = 0;

package/stepper/context/StepperContext.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepChangeEvent } from '../interfaces/StepChangeEvent';
+import { StepFocusEvent } from '../interfaces/StepFocusEvent';
+/** @hidden */
+export type StepperContextType = {
+    animationDuration?: number | boolean;
+    isVertical?: boolean;
+    item?: any;
+    linear?: boolean;
+    mode?: 'steps' | 'labels';
+    numOfSteps?: number;
+    value: number;
+    successIcon?: string;
+    errorIcon?: string;
+    onChange?: (event: StepChangeEvent) => void;
+    onFocus?: (event: StepFocusEvent) => void;
+};

package/stepper/interfaces/StepChangeEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onChange` Step event.
+ */
+export interface StepChangeEvent {
+    /**
+     * The index of the selected Step.
+     */
+    value: number;
+}

package/stepper/interfaces/StepFocusEvent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onFocus` Step event.
+ */
+export interface StepFocusEvent {
+}

package/stepper/interfaces/StepHandle.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The Step ref.
+ */
+export interface StepHandle {
+    /**
+     * The Step element.
+     */
+    element: HTMLLIElement | null;
+    /**
+     * Focus the Step.
+     */
+    focus: () => void;
+}

package/stepper/interfaces/StepProps.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { SVGIcon } from '@progress/kendo-vue-common';
+/**
+ * Represents the props of the [Kendo UI for Vue Step component]({% slug overview_stepper %}).
+ */
+export interface StepProps {
+    /**
+     * Specifies a list of CSS classes that will be added to the Step element.
+     */
+    className?: string;
+    /**
+     * Represents the content that will be rendered inside each Step.
+     *
+     * @hidden
+     */
+    content?: any;
+    /**
+     * Specifies the current Step.
+     */
+    current?: boolean;
+    /**
+     * Sets a custom property.
+     */
+    [customProp: string]: any;
+    /**
+     * Specifies if the Step is disabled
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    disabled?: boolean;
+    /**
+     * Defines the name for an existing icon in a Kendo UI for Vue theme.
+     * The icon is rendered inside the Step indicator by a `span.k-icon` element
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    icon?: string;
+    /**
+     * Defines an SVGIcon to be rendered within the Step.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines the name for an success icon in a Kendo UI for Vue theme.
+     */
+    successIcon?: String;
+    /**
+     * Defines an success SVGIcon to be rendered within the Step.
+     */
+    successSvgIcon?: Object;
+    /**
+     * Defines the name for an error icon in a Kendo UI for Vue theme.
+     */
+    errorIcon?: String;
+    /**
+     * Defines an error SVGIcon to be rendered within the Step.
+     */
+    errorSvgIcon?: Object;
+    /**
+     * Sets the index of the Step that is used to identify it.
+     */
+    index?: number;
+    /**
+     * Specifies the validity of the step
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    isValid?: boolean;
+    /**
+     * Specifies the label of the Step
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    label?: string;
+    /**
+     * Specifies if the step is optional. The validation is not applied to these steps
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    optional?: boolean;
+    /**
+     * Sets the `tabIndex` property of the Step.
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the text content of the Step indicator
+     * ([see example]({% slug display_modes_stepper %})).
+     */
+    text?: string;
+}

package/stepper/interfaces/StepperChangeEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onChange` Stepper event.
+ */
+export interface StepperChangeEvent {
+    /**
+     * The index of the selected Step.
+     */
+    value: number;
+}

package/stepper/interfaces/StepperFocusEvent.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The arguments for the `onFocus` Stepper event.
+ */
+export interface StepperFocusEvent {
+}

package/stepper/interfaces/StepperHandle.d.ts

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * The Stepper ref.
+ */
+export interface StepperHandle {
+    /**
+     * The Stepper element.
+     */
+    element: HTMLMenuElement | null;
+    /**
+     * Focus the Stepper's first focusable child.
+     */
+    focus: () => void;
+}

package/stepper/interfaces/StepperOnNavigateEvent.d.ts

@@ -0,0 +1,30 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepperHandle } from './../interfaces/StepperHandle';
+/**
+ * The `StepperOnNavigateEvent` event.
+ */
+export declare class StepperOnNavigateEvent {
+    /**
+     * The Stepper component.
+     */
+    target: StepperHandle;
+    event: any;
+    /**
+     * The previous index of the Step.
+     */
+    prevIndex: number;
+    /**
+     * The new index of the Step.
+     */
+    nextIndex: number;
+    /**
+     * @hidden
+     */
+    constructor(target: StepperHandle, prevIndex: number, nextIndex: number);
+}