@progress/kendo-vue-layout 2.6.3 → 2.6.4

package/dist/npm/stepper/Step.js

@@ -0,0 +1,210 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepVue3 = exports.Step = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+var inject = allVue.inject;
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+
+var contants_1 = require("./contants");
+
+var messages_1 = require("./messages"); // tslint:enable:max-line-length
+
+
+var Step = {
+  name: 'KendoStep',
+  props: {
+    current: Boolean,
+    disabled: Boolean,
+    icon: String,
+    index: Number,
+    isValid: Boolean,
+    focused: Boolean,
+    label: String,
+    optional: Boolean,
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    text: String,
+    animationDuration: [Boolean, Number],
+    isVertical: Boolean,
+    item: [String, Object, Boolean, Function],
+    linear: Boolean,
+    mode: String,
+    numOfSteps: Number,
+    value: Number,
+    successIcon: String,
+    errorIcon: String
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  computed: {
+    itemClassNames: function itemClassNames() {
+      var _a = this.$props,
+          current = _a.current,
+          disabled = _a.disabled,
+          focused = _a.focused,
+          index = _a.index,
+          isValid = _a.isValid,
+          optional = _a.optional;
+      return {
+        'k-step': true,
+        'k-step-first': index === 0,
+        'k-step-last': this.numOfSteps && index === this.numOfSteps - 1,
+        'k-step-done': index < this.value,
+        'k-step-current': current,
+        'k-step-optional': optional,
+        'k-step-disabled': disabled,
+        'k-step-focus': focused,
+        'k-step-error': isValid !== undefined && !isValid,
+        'k-step-success': isValid
+      };
+    },
+    itemStyles: function itemStyles() {
+      var index = this.$props.index;
+      var allowClick = !this.linear || index === this.value - 1 || index === this.value || index === this.value + 1;
+      return {
+        maxWidth: !this.isVertical ? "calc(100% / " + this.numOfSteps + ")" : undefined,
+        pointerEvents: !allowClick ? 'none' : undefined
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    var kendoLocalizationService = inject('kendoLocalizationService', {});
+    return {
+      v3: v3,
+      kendoLocalizationService: kendoLocalizationService
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = kendo_vue_common_1.getDefaultSlots(this);
+    var _a = this.$props,
+        current = _a.current,
+        disabled = _a.disabled,
+        focused = _a.focused,
+        icon = _a.icon,
+        index = _a.index,
+        isValid = _a.isValid,
+        label = _a.label,
+        optional = _a.optional,
+        tabIndex = _a.tabIndex,
+        text = _a.text,
+        animationDuration = _a.animationDuration,
+        item = _a.item,
+        linear = _a.linear,
+        mode = _a.mode,
+        value = _a.value,
+        successIcon = _a.successIcon,
+        errorIcon = _a.errorIcon;
+    var allowClick = !linear || index === value - 1 || index === value || index === value + 1;
+    var isInLabel = mode === 'labels' || Boolean(icon) && Boolean(label);
+    var localizationService = kendo_vue_intl_1.provideLocalizationService(this);
+
+    var localizeMessage = function localizeMessage(message) {
+      return localizationService.toLanguageString(message, messages_1.messages[message]);
+    };
+
+    var optionalMessage = localizeMessage(messages_1.optionalText);
+    var progressAnimation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? contants_1.DEFAULT_ANIMATION_DURATION : contants_1.NO_ANIMATION;
+    var validationIconClasses = isValid ? successIcon ? "" + successIcon : 'k-icon k-i-check' : errorIcon ? "" + errorIcon : 'k-icon k-i-warning';
+    var validationIcons = h("span", {
+      "class": 'k-step-indicator-icon ' + validationIconClasses,
+      "aria-hidden": "true",
+      attrs: this.v3 ? undefined : {
+        "aria-hidden": "true"
+      }
+    });
+
+    var stepIndicator = function stepIndicator() {
+      return mode !== 'labels' ? h("span", {
+        "class": "k-step-indicator",
+        "aria-hidden": true,
+        attrs: this.v3 ? undefined : {
+          "aria-hidden": true
+        },
+        style: {
+          transitionDuration: progressAnimation + 'ms'
+        }
+      }, [icon ? !isInLabel && isValid !== undefined ? validationIcons : h("span", {
+        "class": "k-step-indicator-icon k-icon " + icon
+      }) : isValid !== undefined ? validationIcons : h("span", {
+        "class": "k-step-indicator-text"
+      }, [text ? text : index + 1])]) : null;
+    };
+
+    var stepLabel = function stepLabel() {
+      return h("span", {
+        "class": "k-step-label"
+      }, [label && h("span", {
+        "class": "k-step-text"
+      }, [label]), isInLabel && isValid !== undefined && validationIcons, optional && h("span", {
+        "class": "k-step-label-optional"
+      }, [optionalMessage])]);
+    };
+
+    return h("li", {
+      "class": this.itemClassNames,
+      style: this.itemStyles
+    }, [h("a", {
+      "class": "k-step-link",
+      title: label ? label : undefined,
+      attrs: this.v3 ? undefined : {
+        title: label ? label : undefined,
+        tabIndex: tabIndex ? tabIndex : focused ? 0 : -1,
+        "aria-current": current ? 'step' : undefined,
+        "aria-disabled": disabled || !allowClick || undefined,
+        "aria-invalid": isValid !== undefined && !isValid || undefined
+      },
+      onClick: this.handleClick,
+      on: this.v3 ? undefined : {
+        "click": this.handleClick,
+        "focusin": this.handleFocus
+      },
+      onFocusin: this.handleFocus,
+      tabIndex: tabIndex ? tabIndex : focused ? 0 : -1,
+      "aria-current": current ? 'step' : undefined,
+      "aria-disabled": disabled || !allowClick || undefined,
+      "aria-invalid": isValid !== undefined && !isValid || undefined
+    }, [!item ? [stepIndicator.call(this), stepLabel.call(this)] : defaultSlots])]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        kendo_vue_common_1.focusFirstFocusableChild(this.$el);
+      }
+    },
+    handleClick: function handleClick(event) {
+      if (!this.disabled) {
+        this.$emit('change', {
+          event: event,
+          value: this.index
+        });
+      }
+    },
+    handleFocus: function handleFocus(event) {
+      if (!this.disabled) {
+        this.$emit('focus', event);
+      }
+    }
+  }
+};
+exports.Step = Step;
+var StepVue3 = Step;
+exports.StepVue3 = StepVue3;

package/dist/npm/stepper/Stepper.d.ts

@@ -0,0 +1,39 @@
+import { DefineComponent } from '../additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { StepperProps } from './interfaces/StepperProps';
+/**
+ * @hidden
+ */
+export interface StepperState {
+}
+/**
+ * @hidden
+ */
+export interface StepperComputed {
+}
+/**
+ * @hidden
+ */
+export interface StepperMethods {
+    [key: string]: any;
+    setStepper: () => void;
+}
+/**
+ * @hidden
+ */
+export interface StepperData {
+    focusedIdx: number;
+    currentDir: string;
+}
+/**
+ * @hidden
+ */
+export interface StepperAll extends Vue, StepperMethods, StepperData, StepperComputed, StepperState {
+}
+declare let Stepper: ComponentOptions<StepperAll, DefaultData<StepperData>, DefaultMethods<StepperAll>, StepperComputed, RecordPropsDefinition<StepperProps>>;
+declare const StepperVue3: DefineComponent<StepperProps, any, StepperData, StepperComputed, StepperMethods, {}, {}, {}, string, StepperProps, StepperProps, {}>;
+export { Stepper, StepperVue3 };

package/dist/npm/stepper/Stepper.js

@@ -0,0 +1,366 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StepperVue3 = exports.Stepper = void 0; // @ts-ignore
+
+var Vue = require("vue");
+
+var allVue = Vue;
+var gh = allVue.h;
+
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+
+var Step_1 = require("./Step");
+
+var kendo_vue_progressbars_1 = require("@progress/kendo-vue-progressbars");
+
+var contants_1 = require("./contants");
+
+var kendo_vue_common_2 = require("@progress/kendo-vue-common");
+
+var package_metadata_1 = require("../package-metadata"); // tslint:enable:max-line-length
+
+
+var Stepper = {
+  name: 'KendoStepper',
+  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,
+      required: true,
+      default: 0
+    },
+    successIcon: String,
+    errorIcon: String
+  },
+  created: function created() {
+    kendo_vue_common_2.validatePackage(package_metadata_1.packageMetadata);
+    this.focusedIdx = this.$props.value;
+  },
+  mounted: function mounted() {
+    this.currentDir = this.$props.dir !== undefined ? this.$props.dir : kendo_vue_common_2.isRtl(this.$el) ? 'rtl' : 'ltr';
+  },
+  data: function data() {
+    return {
+      currentDir: 'ltr',
+      focusedIdx: 0,
+      stepper: {}
+    };
+  },
+  computed: {
+    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 : undefined,
+        gridColumnEnd: !this.isVertical ? -1 : undefined,
+        gridRowStart: this.isVertical ? 1 : undefined,
+        gridRowEnd: this.isVertical ? -1 : undefined
+      };
+    },
+    progressbarStyles: function progressbarStyles() {
+      return {
+        gridColumnStart: !this.isVertical ? 2 : undefined,
+        gridColumnEnd: !this.isVertical ? this.numOfSteps * 2 : undefined,
+        gridRowStart: this.isVertical ? 2 : undefined,
+        gridRowEnd: this.isVertical ? this.numOfSteps * 4 - 2 : undefined
+      };
+    }
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+        animationDuration = _a.animationDuration,
+        children = _a.children,
+        disabled = _a.disabled,
+        items = _a.items,
+        orientation = _a.orientation;
+    var value = this.$props.value;
+    var animation = typeof animationDuration === 'number' ? animationDuration : animationDuration !== false ? contants_1.DEFAULT_ANIMATION_DURATION : contants_1.NO_ANIMATION;
+    var steps = items && items.map(function (element, index) {
+      var step = this.$props.item ? kendo_vue_common_2.templateRendering.call(this, this.$props.item, kendo_vue_common_2.getListeners.call(this)) : undefined;
+      var stepDefaultRendering = // @ts-ignore
+      h(Step_1.Step, {
+        key: index,
+        index: index,
+        attrs: this.v3 ? undefined : {
+          index: index,
+          disabled: disabled || element.disabled,
+          focused: index === this.focusedIdx,
+          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: this.value,
+          successIcon: this.successIcon,
+          errorIcon: this.errorIcon
+        },
+        disabled: disabled || element.disabled,
+        focused: index === this.focusedIdx,
+        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: this.value,
+        successIcon: this.successIcon,
+        errorIcon: this.errorIcon
+      });
+      var stepRendering = kendo_vue_common_2.getTemplate.call(this, {
+        h: h,
+        template: step,
+        defaultRendering: stepDefaultRendering,
+        additionalProps: element,
+        additionalListeners: {
+          change: this.handleChange,
+          focus: this.handleFocus
+        }
+      });
+      return stepRendering;
+    }, this);
+    return h("nav", {
+      "class": this.stepperClasses,
+      style: this.stepperStyles,
+      dir: this.currentDir,
+      attrs: this.v3 ? undefined : {
+        dir: this.currentDir
+      },
+      onKeydown: this.handleKeyDown,
+      on: this.v3 ? undefined : {
+        "keydown": this.handleKeyDown
+      }
+    }, [h("ol", {
+      "class": this.listClasses,
+      style: this.listStyles
+    }, [steps ? steps : children]), // @ts-ignore
+    h(kendo_vue_progressbars_1.ProgressBar, {
+      style: this.progressbarStyles,
+      animation: {
+        duration: animation
+      },
+      attrs: this.v3 ? undefined : {
+        animation: {
+          duration: animation
+        },
+        "aria-hidden": true,
+        max: this.numOfSteps - 1,
+        labelVisible: false,
+        orientation: orientation,
+        reverse: orientation === 'vertical',
+        value: value,
+        disabled: disabled,
+        tabIndex: -1
+      },
+      "aria-hidden": true,
+      max: this.numOfSteps - 1,
+      labelVisible: false,
+      orientation: orientation,
+      reverse: orientation === 'vertical',
+      value: value,
+      disabled: disabled,
+      tabIndex: -1
+    })]);
+  },
+  methods: {
+    focus: function focus() {
+      if (this.$el) {
+        kendo_vue_common_1.focusFirstFocusableChild(this.$el);
+      }
+    },
+    dispatchChangeEvent: function dispatchChangeEvent(event, val) {
+      var prevIdx = val === this.value - 1;
+      var currIdx = val === this.value;
+      var nextIdx = val === this.value + 1;
+      var allowClick = !this.linear || prevIdx || currIdx || nextIdx;
+
+      if (this.value !== val && !this.disabled && allowClick) {
+        this.focusedIdx = val;
+        this.$emit('change', {
+          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) {
+      this.dispatchChangeEvent(event, this.focusedIdx);
+    },
+    handleKeyDown: function handleKeyDown(event) {
+      var isCurrentRtl = this.currentDir === 'rtl';
+      var currIndex = this.focusedIdx;
+      var maxNavIndex = this.items.length - 1;
+
+      switch (event.keyCode) {
+        case kendo_vue_common_1.Keys.left:
+          event.preventDefault();
+
+          if (!isCurrentRtl && currIndex > 0) {
+            this.focusedIdx = currIndex - 1;
+          }
+
+          if (isCurrentRtl && currIndex < maxNavIndex) {
+            this.focusedIdx = currIndex + 1;
+          }
+
+          break;
+
+        case kendo_vue_common_1.Keys.right:
+          event.preventDefault();
+
+          if (!isCurrentRtl && currIndex < maxNavIndex) {
+            this.focusedIdx = currIndex + 1;
+          }
+
+          if (isCurrentRtl && currIndex > 0) {
+            this.focusedIdx = currIndex - 1;
+          }
+
+          break;
+
+        case kendo_vue_common_1.Keys.up:
+          event.preventDefault();
+
+          if (!isCurrentRtl && currIndex > 0) {
+            this.focusedIdx = currIndex - 1;
+          }
+
+          if (isCurrentRtl && currIndex > 0) {
+            this.focusedIdx = currIndex - 1;
+          }
+
+          break;
+
+        case kendo_vue_common_1.Keys.down:
+          event.preventDefault();
+
+          if (!isCurrentRtl && currIndex < maxNavIndex) {
+            this.focusedIdx = currIndex + 1;
+          }
+
+          if (isCurrentRtl && currIndex < maxNavIndex) {
+            this.focusedIdx = currIndex + 1;
+          }
+
+          break;
+
+        case kendo_vue_common_1.Keys.home:
+          event.preventDefault();
+          this.focusedIdx = 0;
+          break;
+
+        case kendo_vue_common_1.Keys.end:
+          event.preventDefault();
+          this.focusedIdx = maxNavIndex;
+          break;
+
+        case kendo_vue_common_1.Keys.space:
+        case kendo_vue_common_1.Keys.enter:
+          event.preventDefault();
+
+          if (!this.items[currIndex].disabled) {
+            this.handleEnter(event);
+          }
+
+          break;
+
+        default:
+      }
+    }
+  }
+};
+exports.Stepper = Stepper;
+var StepperVue3 = Stepper;
+exports.StepperVue3 = StepperVue3;

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

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

package/dist/npm/stepper/contants.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NO_ANIMATION = exports.DEFAULT_ANIMATION_DURATION = void 0;
+/**
+ * @hidden
+ */
+exports.DEFAULT_ANIMATION_DURATION = 400;
+/**
+ * @hidden
+ */
+exports.NO_ANIMATION = 0;

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

@@ -0,0 +1,16 @@
+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/npm/stepper/context/StepperContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * @hidden
+ */
+var defaultContext = {
+    linear: false,
+    mode: 'steps',
+    value: 0
+};

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

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