@progress/kendo-vue-layout 5.3.0-dev.202410141143 → 5.3.0-develop.2

package/dist/es/stepper/Stepper.js

@@ -1,459 +0,0 @@
-var __assign = this && this.__assign || function () {
-  __assign = Object.assign || function (t) {
-    for (var s, i = 1, n = arguments.length; i < n; i++) {
-      s = arguments[i];
-      for (var p in s) {
-        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-      }
-    }
-    return t;
-  };
-  return __assign.apply(this, arguments);
-};
-// @ts-ignore
-import * as Vue from 'vue';
-var allVue = Vue;
-var gh = allVue.h;
-var isV3 = allVue.version && allVue.version[0] === '3';
-import { focusFirstFocusableChild, Keys, getDefaultSlots } from '@progress/kendo-vue-common';
-import { Step } from './Step';
-import { ProgressBar } from '@progress/kendo-vue-progressbars';
-import { DEFAULT_ANIMATION_DURATION, NO_ANIMATION } from './contants';
-import { validatePackage, isRtl, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
-import { packageMetadata } from '../package-metadata';
-import { messages, ariaLabel } from './messages/main';
-import { provideLocalizationService } from '@progress/kendo-vue-intl';
-/**
- * @hidden
- */
-var StepperVue2 = {
-  name: 'KendoStepper',
-  model: {
-    event: 'changemodel'
-  },
-  inject: {
-    kendoLocalizationService: {
-      default: null
-    }
-  },
-  props: {
-    animationDuration: {
-      type: [Boolean, Number],
-      default: 400
-    },
-    dir: String,
-    disabled: Boolean,
-    item: {
-      type: [String, Object, Function, Boolean],
-      default: undefined
-    },
-    items: Array,
-    linear: Boolean,
-    mode: {
-      type: String,
-      default: 'steps',
-      validator: function validator(value) {
-        return ['steps', 'labels'].includes(value);
-      }
-    },
-    orientation: {
-      type: String,
-      default: 'horizontal',
-      validator: function validator(value) {
-        return ['horizontal', 'vertical'].includes(value);
-      }
-    },
-    value: {
-      type: Number,
-      default: 0
-    },
-    progressTotal: {
-      type: Number
-    },
-    progress: {
-      type: Number
-    },
-    modelValue: Number,
-    successIcon: String,
-    errorIcon: String
-  },
-  created: function created() {
-    validatePackage(packageMetadata);
-    this.focusedIdx = this.computedValue !== undefined ? this.computedValue : 0;
-  },
-  mounted: function mounted() {
-    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : isRtl(this.$el) ? 'rtl' : 'ltr';
-  },
-  data: function data() {
-    return {
-      currentDir: 'ltr',
-      focusedIdx: 0,
-      stepper: {},
-      currentFocused: false
-    };
-  },
-  watch: {
-    value: function value(newValue) {
-      this.focusedIdx = newValue;
-    }
-  },
-  computed: {
-    computedValue: function computedValue() {
-      return this.$props.modelValue !== undefined ? this.$props.modelValue : this.$props.value;
-    },
-    isVertical: function isVertical() {
-      return this.$props.orientation === 'vertical';
-    },
-    numOfSteps: function numOfSteps() {
-      var items = this.$props.items;
-      return items ? items.length : 0;
-    },
-    stepperClasses: function stepperClasses() {
-      return {
-        'k-stepper': true,
-        'k-stepper-linear': this.$props.linear
-      };
-    },
-    stepperStyles: function stepperStyles() {
-      return {
-        display: 'grid',
-        gridTemplateColumns: !this.isVertical ? 'repeat(' + this.numOfSteps * 2 + ', 1fr)' : undefined,
-        gridTemplateRows: this.isVertical ? 'repeat(' + this.numOfSteps * 4 + ', 1fr)' : undefined
-      };
-    },
-    listClasses: function listClasses() {
-      return {
-        'k-step-list': true,
-        'k-step-list-horizontal': !this.isVertical,
-        'k-step-list-vertical': this.isVertical
-      };
-    },
-    listStyles: function listStyles() {
-      return {
-        gridColumnStart: !this.isVertical ? 1 : '',
-        gridColumnEnd: !this.isVertical ? -1 : '',
-        gridRowStart: this.isVertical ? 1 : '',
-        gridRowEnd: this.isVertical ? -1 : ''
-      };
-    },
-    progressbarStyles: function progressbarStyles() {
-      return {
-        gridColumnStart: !this.isVertical ? 2 : '',
-        gridColumnEnd: !this.isVertical ? this.numOfSteps * 2 : '',
-        gridRowStart: this.isVertical ? 2 : '',
-        gridRowEnd: this.isVertical ? this.numOfSteps * 4 - 2 : ''
-      };
-    }
-  },
-  // @ts-ignore
-  setup: !isV3 ? undefined : function () {
-    var v3 = !!isV3;
-    return {
-      v3: v3
-    };
-  },
-  // @ts-ignore
-  render: function render(createElement) {
-    var h = gh || createElement;
-    var defaultSlot = getDefaultSlots(this);
-    var _a = this.$props,
-      animationDuration = _a.animationDuration,
-      disabled = _a.disabled,
-      items = _a.items,
-      orientation = _a.orientation;
-    var value = this.computedValue;
-    var animation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? DEFAULT_ANIMATION_DURATION : NO_ANIMATION;
-    var localizationService = provideLocalizationService(this);
-    var progressbarAriaLabelMessage = localizationService.toLanguageString(ariaLabel, messages[ariaLabel]);
-    var steps = items && items.map(function (element, index) {
-      var step = this.$props.item ? templateRendering.call(this, this.$props.item, getListeners.call(this)) : undefined;
-      var stepDefaultRendering =
-      // @ts-ignore
-      h(Step, {
-        key: index,
-        index: index,
-        attrs: this.v3 ? undefined : {
-          index: index,
-          disabled: disabled || element.disabled,
-          focused: index === this.focusedIdx && this.currentFocused,
-          current: index === value,
-          icon: element.icon,
-          label: element.label,
-          optional: element.optional,
-          text: element.text,
-          isValid: element.isValid,
-          tabIndex: element.tabIndex,
-          animationDuration: this.animationDuration,
-          isVertical: this.isVertical,
-          item: this.item,
-          linear: this.linear,
-          mode: this.mode,
-          numOfSteps: this.numOfSteps,
-          value: value,
-          successIcon: this.successIcon,
-          errorIcon: this.errorIcon,
-          svgIcon: element.svgIcon,
-          successSvgIcon: element.successSvgIcon,
-          errorSvgIcon: element.errorSvgIcon
-        },
-        disabled: disabled || element.disabled,
-        focused: index === this.focusedIdx && this.currentFocused,
-        current: index === value,
-        onChange: this.handleChange,
-        on: this.v3 ? undefined : {
-          "change": this.handleChange,
-          "focus": this.handleFocus
-        },
-        onFocus: this.handleFocus,
-        "class": element.class,
-        style: element.style,
-        icon: element.icon,
-        label: element.label,
-        optional: element.optional,
-        text: element.text,
-        isValid: element.isValid,
-        tabIndex: element.tabIndex,
-        animationDuration: this.animationDuration,
-        isVertical: this.isVertical,
-        item: this.item,
-        linear: this.linear,
-        mode: this.mode,
-        numOfSteps: this.numOfSteps,
-        value: value,
-        successIcon: this.successIcon,
-        errorIcon: this.errorIcon,
-        svgIcon: element.svgIcon,
-        successSvgIcon: element.successSvgIcon,
-        errorSvgIcon: element.errorSvgIcon
-      });
-      var stepRendering = getTemplate.call(this, {
-        h: h,
-        template: step,
-        defaultRendering: stepDefaultRendering,
-        additionalProps: __assign(__assign({}, element), {
-          disabled: disabled || element.disabled,
-          focused: index === this.focusedIdx,
-          current: index === value,
-          value: value
-        }),
-        additionalListeners: {
-          change: this.handleChange,
-          focus: this.handleFocus
-        }
-      });
-      return stepRendering;
-    }, this);
-    return h("nav", {
-      tabindex: this.currentFocused ? -1 : 0,
-      attrs: this.v3 ? undefined : {
-        tabindex: this.currentFocused ? -1 : 0,
-        dir: this.currentDir
-      },
-      "class": this.stepperClasses,
-      style: this.stepperStyles,
-      dir: this.currentDir,
-      onFocusin: this.handleFocusin,
-      on: this.v3 ? undefined : {
-        "focusin": this.handleFocusin,
-        "focusout": this.handleFocusout,
-        "keydown": this.handleKeyDown
-      },
-      onFocusout: this.handleFocusout,
-      onKeydown: this.handleKeyDown
-    }, [h("ol", {
-      "class": this.listClasses,
-      style: this.listStyles
-    }, [steps ? steps : defaultSlot]),
-    // @ts-ignore
-    h(ProgressBar, {
-      style: this.progressbarStyles,
-      animation: {
-        duration: animation
-      },
-      attrs: this.v3 ? undefined : {
-        animation: {
-          duration: animation
-        },
-        "aria-hidden": true,
-        "aria-label": progressbarAriaLabelMessage,
-        max: this.progressTotal || this.numOfSteps - 1,
-        labelVisible: false,
-        orientation: orientation,
-        reverse: orientation === 'vertical',
-        value: this.progress || value,
-        disabled: disabled,
-        tabIndex: -1
-      },
-      "aria-hidden": true,
-      "aria-label": progressbarAriaLabelMessage,
-      max: this.progressTotal || this.numOfSteps - 1,
-      labelVisible: false,
-      orientation: orientation,
-      reverse: orientation === 'vertical',
-      value: this.progress || value,
-      disabled: disabled,
-      tabIndex: -1
-    })]);
-  },
-  methods: {
-    focus: function focus() {
-      if (this.$el) {
-        focusFirstFocusableChild(this.$el);
-      }
-    },
-    dispatchChangeEvent: function dispatchChangeEvent(event, val) {
-      var prevIdx = val === this.computedValue - 1;
-      var currIdx = val === this.computedValue;
-      var nextIdx = val === this.computedValue + 1;
-      var allowClick = !this.linear || prevIdx || currIdx || nextIdx;
-      if (this.computedValue !== val && !this.disabled && allowClick) {
-        this.focusedIdx = val;
-        this.$emit('changemodel', val);
-        this.$emit('update:modelValue', val);
-        this.$emit('change', {
-          component: this,
-          event: event,
-          value: val
-        });
-      }
-    },
-    handleChange: function handleChange(event) {
-      var currentValue = event.value;
-      this.dispatchChangeEvent(event, currentValue);
-    },
-    handleFocus: function handleFocus(event) {
-      if (!this.disabled) {
-        this.$emit('focus', event, undefined);
-      }
-    },
-    handleEnter: function handleEnter(event) {
-      var newEvent = {
-        component: this,
-        event: event,
-        value: this.focusedIdx
-      };
-      this.dispatchChangeEvent(newEvent, this.focusedIdx);
-    },
-    handleFocusin: function handleFocusin() {
-      this.currentFocused = true;
-    },
-    handleFocusout: function handleFocusout() {
-      this.currentFocused = false;
-    },
-    handleKeyDown: function handleKeyDown(event) {
-      var isCurrentRtl = this.currentDir === 'rtl';
-      var currIndex = this.focusedIdx;
-      var maxNavIndex = this.items.length - 1;
-      switch (event.keyCode) {
-        case Keys.left:
-          event.preventDefault();
-          if (!isCurrentRtl && currIndex > 0) {
-            this.focusedIdx = currIndex - 1;
-          }
-          if (isCurrentRtl && currIndex < maxNavIndex) {
-            this.focusedIdx = currIndex + 1;
-          }
-          break;
-        case Keys.right:
-          event.preventDefault();
-          if (!isCurrentRtl && currIndex < maxNavIndex) {
-            this.focusedIdx = currIndex + 1;
-          }
-          if (isCurrentRtl && currIndex > 0) {
-            this.focusedIdx = currIndex - 1;
-          }
-          break;
-        case Keys.up:
-          event.preventDefault();
-          if (!isCurrentRtl && currIndex > 0) {
-            this.focusedIdx = currIndex - 1;
-          }
-          if (isCurrentRtl && currIndex > 0) {
-            this.focusedIdx = currIndex - 1;
-          }
-          break;
-        case Keys.down:
-          event.preventDefault();
-          if (!isCurrentRtl && currIndex < maxNavIndex) {
-            this.focusedIdx = currIndex + 1;
-          }
-          if (isCurrentRtl && currIndex < maxNavIndex) {
-            this.focusedIdx = currIndex + 1;
-          }
-          break;
-        case Keys.home:
-          event.preventDefault();
-          this.focusedIdx = 0;
-          break;
-        case Keys.end:
-          event.preventDefault();
-          this.focusedIdx = maxNavIndex;
-          break;
-        case Keys.space:
-        case Keys.enter:
-          event.preventDefault();
-          if (!this.items[currIndex].disabled) {
-            this.handleEnter(event);
-          }
-          break;
-        default:
-      }
-    }
-  }
-};
-/**
- * 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>
- * ```
- *
- */
-var Stepper = StepperVue2;
-export { Stepper, StepperVue2 };

package/dist/es/stepper/contants.d.ts

@@ -1,8 +0,0 @@
-/**
- * @hidden
- */
-export declare const DEFAULT_ANIMATION_DURATION = 400;
-/**
- * @hidden
- */
-export declare const NO_ANIMATION = 0;

package/dist/es/stepper/contants.js

@@ -1,8 +0,0 @@
-/**
- * @hidden
- */
-export var DEFAULT_ANIMATION_DURATION = 400;
-/**
- * @hidden
- */
-export var NO_ANIMATION = 0;

package/dist/es/stepper/context/StepperContext.d.ts

@@ -1,16 +0,0 @@
-import { StepChangeEvent } from '../interfaces/StepChangeEvent';
-import { StepFocusEvent } from '../interfaces/StepFocusEvent';
-/** @hidden */
-export declare 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/dist/es/stepper/context/StepperContext.js

@@ -1,9 +0,0 @@
-/**
- * @hidden
- */
-var defaultContext = {
-    linear: false,
-    mode: 'steps',
-    value: 0
-};
-export {};

package/dist/es/stepper/interfaces/StepChangeEvent.d.ts

@@ -1,9 +0,0 @@
-/**
- * The arguments for the `onChange` Step event.
- */
-export interface StepChangeEvent {
-    /**
-     * The index of the selected Step.
-     */
-    value: number;
-}

package/dist/es/stepper/interfaces/StepChangeEvent.js

@@ -1 +0,0 @@
-export {};

package/dist/es/stepper/interfaces/StepFocusEvent.d.ts

@@ -1,5 +0,0 @@
-/**
- * The arguments for the `onFocus` Step event.
- */
-export interface StepFocusEvent {
-}

package/dist/es/stepper/interfaces/StepFocusEvent.js

@@ -1 +0,0 @@
-export {};

package/dist/es/stepper/interfaces/StepHandle.d.ts

@@ -1,13 +0,0 @@
-/**
- * The Step ref.
- */
-export interface StepHandle {
-    /**
-     * The Step element.
-     */
-    element: HTMLLIElement | null;
-    /**
-     * Focus the Step.
-     */
-    focus: () => void;
-}

package/dist/es/stepper/interfaces/StepHandle.js

@@ -1,4 +0,0 @@
-/**
- * The Step ref.
- */
-export {};

package/dist/es/stepper/interfaces/StepProps.d.ts

@@ -1,84 +0,0 @@
-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/dist/es/stepper/interfaces/StepProps.js

@@ -1 +0,0 @@
-export {};

package/dist/es/stepper/interfaces/StepperChangeEvent.d.ts

@@ -1,9 +0,0 @@
-/**
- * The arguments for the `onChange` Stepper event.
- */
-export interface StepperChangeEvent {
-    /**
-     * The index of the selected Step.
-     */
-    value: number;
-}

package/dist/es/stepper/interfaces/StepperChangeEvent.js

@@ -1 +0,0 @@
-export {};

package/dist/es/stepper/interfaces/StepperFocusEvent.d.ts

@@ -1,5 +0,0 @@
-/**
- * The arguments for the `onFocus` Stepper event.
- */
-export interface StepperFocusEvent {
-}

package/dist/es/stepper/interfaces/StepperFocusEvent.js

@@ -1 +0,0 @@
-export {};

package/dist/es/stepper/interfaces/StepperHandle.d.ts

@@ -1,13 +0,0 @@
-/**
- * The Stepper ref.
- */
-export interface StepperHandle {
-    /**
-     * The Stepper element.
-     */
-    element: HTMLMenuElement | null;
-    /**
-     * Focus the Stepper's first focusable child.
-     */
-    focus: () => void;
-}

package/dist/es/stepper/interfaces/StepperHandle.js

@@ -1,4 +0,0 @@
-/**
- * The Stepper ref.
- */
-export {};