@progress/kendo-vue-layout 8.4.0-develop.3 → 8.4.0-develop.5

package/panelbar/PanelBarItem.mjs

@@ -5,14 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as f, createVNode as t, h as g, isVNode as O } from "vue";
-import { classNames as b, Icon as k, getTemplate as I } from "@progress/kendo-vue-common";
+import { defineComponent as I, createVNode as e, h as g, isVNode as O } from "vue";
+import { classNames as k, Icon as f, getTemplate as v } from "@progress/kendo-vue-common";
 import { chevronUpIcon as q, chevronDownIcon as M } from "@progress/kendo-svg-icons";
-import { Reveal as U } from "@progress/kendo-vue-animation";
-function A(e) {
-  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !O(e);
+import { Reveal as A } from "@progress/kendo-vue-animation";
+function U(n) {
+  return typeof n == "function" || Object.prototype.toString.call(n) === "[object Object]" && !O(n);
 }
-const R = /* @__PURE__ */ f({
+const R = /* @__PURE__ */ I({
   name: "KendoPanelBarGroup",
   props: {
     item: Object,
@@ -31,16 +31,16 @@ const R = /* @__PURE__ */ f({
   },
   render() {
     const {
-      item: e,
-      items: o,
-      uniquePrivateKey: d,
-      disabled: r,
+      item: n,
+      items: i,
+      uniquePrivateKey: p,
+      disabled: d,
       expanded: s,
-      animation: i,
-      keepItemsMounted: p
-    } = this.$props, u = {
+      animation: o,
+      keepItemsMounted: c
+    } = this.$props, h = {
       display: "block"
-    }, n = I.call(this, {
+    }, t = v.call(this, {
       h: g,
       template: this.$props.content,
       defaultRendering: null,
@@ -48,31 +48,37 @@ const R = /* @__PURE__ */ f({
         ...this.$props,
         show: this.show
       }
-    }), c = !r && s, l = c || p ? o ? t("ul", {
+    }), l = !d && s, r = l || c ? i ? e("ul", {
       role: "group",
       class: "k-panelbar-group",
       style: {
-        display: p ? this.$data.show ? "block" : "none" : "block"
+        display: c ? this.$data.show ? "block" : "none" : "block"
       }
-    }, [o.map(function(a) {
+    }, [i.map(function(b) {
       return g(D, {
-        ...a,
-        item: e
+        ...b,
+        item: n
       });
-    }, this)]) : this.$props.content ? t("div", {
+    }, this)]) : this.$props.content ? e("div", {
       class: "k-panelbar-content"
-    }, [n]) : null : null;
-    return (i === void 0 || i) && !r ? t(U, {
-      appear: c,
+    }, [t]) : null : null, a = !l && !c && !i && this.$props.content ? e("div", {
+      class: "k-panelbar-content",
+      "aria-hidden": "true",
+      style: {
+        display: "none"
+      }
+    }, [t]) : null;
+    return [(o !== void 0 ? o : !0) && !d ? e(A, {
+      appear: l,
       transitionEnterDuration: 200,
       transitionExitDuration: 200,
-      key: d + "_animation",
-      style: u,
+      key: p + "_animation",
+      style: h,
       onEntering: this.handleEntering,
       onExited: this.handleExited
-    }, A(l) ? l : {
-      default: () => [l]
-    }) : l;
+    }, U(r) ? r : {
+      default: () => [r]
+    }) : r, a];
   },
   methods: {
     handleEntering() {
@@ -82,7 +88,7 @@ const R = /* @__PURE__ */ f({
       this.keepItemsMounted && (this.show = !1);
     }
   }
-}), D = /* @__PURE__ */ f({
+}), D = /* @__PURE__ */ I({
   name: "KendoPanelBarItem",
   props: {
     item: Object,
@@ -119,60 +125,60 @@ const R = /* @__PURE__ */ f({
   },
   render() {
     const {
-      id: e,
-      item: o,
-      icon: d,
-      svgIcon: r,
+      id: n,
+      item: i,
+      icon: p,
+      svgIcon: d,
       items: s,
-      content: i,
-      title: p,
-      uniquePrivateKey: u,
-      disabled: n,
-      selected: c,
-      focused: l,
+      content: o,
+      title: c,
+      uniquePrivateKey: h,
+      disabled: t,
+      selected: l,
+      focused: r,
       expanded: a,
       className: y,
-      level: h,
-      headerClassName: v,
+      level: m,
+      headerClassName: b,
       animation: B,
-      keepItemsMounted: x
-    } = this.$props, m = !!s || !!i, C = b("k-panelbar-item", {
-      "k-panelbar-header": h === 0,
-      "k-panelbar-item": h !== 0,
-      "k-expanded": a && m,
-      "k-disabled": n
-    }, `k-level-${h}`, y), N = b("k-link", {
-      "k-selected": !n && c,
-      "k-focus": l
-    }, v), P = b("k-panelbar-toggle", {
-      "k-panelbar-collapse": a && m,
-      "k-panelbar-expand": !a && m
+      keepItemsMounted: C
+    } = this.$props, u = !!s || !!o, x = k("k-panelbar-item", {
+      "k-panelbar-header": m === 0,
+      "k-panelbar-item": m !== 0,
+      "k-expanded": a && u,
+      "k-disabled": t
+    }, `k-level-${m}`, y), N = k("k-link", {
+      "k-selected": !t && l,
+      "k-focus": r
+    }, b), P = k("k-panelbar-toggle", {
+      "k-panelbar-collapse": a && u,
+      "k-panelbar-expand": !a && u
     }), S = a ? "chevron-up" : "chevron-down", $ = a ? q : M, j = function() {
-      return this.imageUrl ? t("img", {
+      return this.imageUrl ? e("img", {
         role: "presentation",
         class: "k-panelbar-item-icon k-image",
         src: this.imageUrl
-      }, null) : d || r ? t(k, {
-        name: d,
+      }, null) : p || d ? e(f, {
+        name: p,
         class: "k-panelbar-item-icon",
-        icon: r
-      }, null) : this.iconClass ? t(k, {
+        icon: d
+      }, null) : this.iconClass ? e(f, {
         class: "k-panelbar-item-icon " + this.iconClass
       }, null) : null;
-    }.call(this), E = !n && (s || i) ? t(k, {
+    }.call(this), E = !t && (s || o) ? e(f, {
       name: S,
       icon: $,
       class: P
-    }, null) : null, w = s || i ? t(R, {
+    }, null) : null, w = s || o ? e(R, {
       items: s,
-      item: o,
-      content: i,
-      uniquePrivateKey: u,
-      disabled: n,
+      item: i,
+      content: o,
+      uniquePrivateKey: h,
+      disabled: t,
       expanded: a,
       animation: B,
-      keepItemsMounted: x
-    }, null) : null, K = I.call(this, {
+      keepItemsMounted: C
+    }, null) : null, K = v.call(this, {
       h: g,
       template: this.$props.header,
       defaultRendering: null,
@@ -180,35 +186,34 @@ const R = /* @__PURE__ */ f({
         ...this.$props
       }
     });
-    return t("li", {
-      id: e,
-      class: C,
+    return e("li", {
+      id: n,
+      class: x,
       role: "treeitem",
-      "aria-disabled": n,
-      "aria-hidden": !n && !a,
-      "aria-selected": !n && c,
-      "aria-expanded": !n && a && m
-    }, [t("span", {
+      "aria-disabled": t || void 0,
+      "aria-selected": !t && l,
+      "aria-expanded": u ? !t && a : void 0
+    }, [e("span", {
       class: N,
       onClick: this.handleItemClick
-    }, [j, this.$props.header ? K : t("span", {
+    }, [j, this.$props.header ? K : e("span", {
       class: "k-panelbar-item-text"
-    }, [p]), E]), w]);
+    }, [c]), E]), w]);
   },
   methods: {
     handleItemClick() {
       const {
-        disabled: e,
-        id: o
+        disabled: n,
+        id: i
       } = this.$props;
-      e || this.dispatchItemSelect({
+      n || this.dispatchItemSelect({
         uniquePrivateKey: this.$props.uniquePrivateKey,
-        id: o,
+        id: i,
         target: this
       });
     },
-    childFactory(e) {
-      return e;
+    childFactory(n) {
+      return n;
     }
   }
 });

package/splitter/SplitterBar.d.ts

@@ -44,9 +44,9 @@ declare const SplitterBar: import('vue').DefineComponent<import('vue').ExtractPr
     onPrevToggle(event: any): void;
     onNextToggle(event: any): void;
     onKeyDown(event: any): void;
-    previousArrowName(isHorizontal: boolean): "" | "caret-alt-right" | "caret-alt-left" | "caret-alt-up" | "caret-alt-down";
+    previousArrowName(isHorizontal: boolean): "" | "chevron-right" | "chevron-left" | "chevron-up" | "chevron-down";
     previousArrowSVG(isHorizontal: boolean): import('@progress/kendo-svg-icons').SVGIcon;
-    nextArrowName(isHorizontal: boolean): "" | "caret-alt-right" | "caret-alt-left" | "caret-alt-up" | "caret-alt-down";
+    nextArrowName(isHorizontal: boolean): "" | "chevron-right" | "chevron-left" | "chevron-up" | "chevron-down";
     nextArrowSVG(isHorizontal: boolean): import('@progress/kendo-svg-icons').SVGIcon;
 }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     drag: any;

package/splitter/SplitterBar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),i=require("@progress/kendo-vue-common"),u=require("@progress/kendo-vue-intl"),d=require("../messages/main.js"),o=require("@progress/kendo-svg-icons"),b=n.defineComponent({name:"KendoSplitterBar",emits:{drag:null,toggle:null,keyboardresize:null},props:{orientation:{type:String,default:"vertical",validator:function(t){return["vertical","horizontal"].includes(t)}},index:Number,prev:Object,next:Object,isRtl:Boolean},created(){this.draggable=null},computed:{isStatic(){const{prev:t,next:s}=this.$props,e=t.resizable&&s.resizable,l=t.collapsible||s.collapsible;return!e&&!l},isDraggable(){const{prev:t,next:s}=this.$props,e=t.resizable&&s.resizable,l=t.collapsed||s.collapsed;return!!e&&!l},isHorizontal(){return this.$props.orientation==="horizontal"}},inject:{kendoLocalizationService:{default:null}},data(){return{focused:!1}},mounted(){this.$el&&(this.draggable=this.$refs.draggable)},render(){const t=this.isDraggable,s=this.isStatic,e=this.isHorizontal,l=i.classNames("k-splitbar",{"k-focus":this.focused,"k-splitbar-horizontal":e,"k-splitbar-vertical":!e,"k-splitbar-draggable-horizontal":e&&t,"k-splitbar-draggable-vertical":!e&&t,"k-splitbar-static-horizontal":e&&s,"k-splitbar-static-vertical":!e&&s}),r=this.previousArrowName(e),a=this.previousArrowSVG(e),p=this.nextArrowName(e),g=this.nextArrowSVG(e),h=u.provideLocalizationService(this).toLanguageString(d.splitterPaneLabel,d.messages[d.splitterPaneLabel]);return n.createVNode(i.Draggable,{onPress:c=>this.onDrag(c,!0,!1),onDrag:c=>this.onDrag(c,!1,!1),onRelease:c=>this.onDrag(c,!1,!0),ref:"draggable"},{default:()=>[n.createVNode("div",{tabindex:s?-1:0,role:"separator",class:l,style:{touchAction:"none"},onFocusin:this.onFocus,onFocusout:this.onBlur,onDblclick:this.onToggle,onKeydown:this.onKeyDown,"aria-label":h,"aria-orientation":this.isHorizontal?"vertical":"horizontal"},[this.prev.collapsible&&n.createVNode("span",{class:"k-collapse-prev",onClick:this.onPrevToggle},[n.createVNode(i.Icon,{name:r,icon:a,size:"xsmall"},null)]),n.createVNode("div",{class:"k-resize-handle"},null),this.next.collapsible&&n.createVNode("span",{class:"k-collapse-next",onClick:this.onNextToggle},[n.createVNode(i.Icon,{name:p,icon:g,size:"xsmall"},null)])])]})},methods:{onDrag(t,s,e){const l=t,{index:r}=this.$props,a=this.draggable&&this.draggable.element;!e&&l&&l.originalEvent.preventDefault(),a&&!this.isStatic&&this.isDraggable&&this.$emit("drag",l,a,r,s,e)},onFocus(){this.focused=!0},onBlur(){this.focused=!1},onToggle(t){const{index:s,prev:e,next:l}=this.$props;(e.collapsible||l.collapsible)&&this.$emit("toggle",e.collapsible?s:s+1,t)},onPrevToggle(t){const{index:s,prev:e}=this.$props;e.collapsible&&this.$emit("toggle",s,t)},onNextToggle(t){const{index:s,next:e}=this.$props;e.collapsible&&this.$emit("toggle",s+1,t)},onKeyDown(t){const s=t&&t.keyCode,e=this.isHorizontal,{index:l}=this.$props,r=this.draggable&&this.draggable.element,a=(p,g,h)=>{t.preventDefault(),this.$emit("keyboardresize",p,g,h,t)};r&&(s===i.Keys.enter?(t.preventDefault(),this.onToggle(t)):this.isDraggable&&(e&&s===i.Keys.left?a(r,l,-10):e&&s===i.Keys.right?a(r,l,10):!e&&s===i.Keys.up?a(r,l,-10):!e&&s===i.Keys.down&&a(r,l,10)))},previousArrowName(t){const{prev:s}=this.$props,e=s.collapsed;return t&&!e?this.isRtl?"caret-alt-right":"caret-alt-left":t&&e?this.isRtl?"caret-alt-left":"caret-alt-right":!t&&!e?"caret-alt-up":!t&&e?"caret-alt-down":""},previousArrowSVG(t){const{prev:s}=this.$props,e=s.collapsed;return t&&!e?this.isRtl?o.caretAltRightIcon:o.caretAltLeftIcon:t&&e?this.isRtl?o.caretAltLeftIcon:o.caretAltRightIcon:!t&&!e?o.caretAltUpIcon:!t&&e?o.caretAltDownIcon:void 0},nextArrowName(t){const{next:s}=this.$props,e=s.collapsed;return t&&!e?this.isRtl?"caret-alt-left":"caret-alt-right":t&&e?this.isRtl?"caret-alt-right":"caret-alt-left":!t&&!e?"caret-alt-down":!t&&e?"caret-alt-up":""},nextArrowSVG(t){const{next:s}=this.$props,e=s.collapsed;return t&&!e?this.isRtl?o.caretAltLeftIcon:o.caretAltRightIcon:t&&e?this.isRtl?o.caretAltRightIcon:o.caretAltLeftIcon:!t&&!e?o.caretAltDownIcon:!t&&e?o.caretAltUpIcon:void 0}}});exports.SplitterBar=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),l=require("@progress/kendo-vue-common"),d=require("@progress/kendo-vue-intl"),g=require("../messages/main.js"),s=require("@progress/kendo-svg-icons"),f=a.defineComponent({name:"KendoSplitterBar",emits:{drag:null,toggle:null,keyboardresize:null},props:{orientation:{type:String,default:"vertical",validator:function(t){return["vertical","horizontal"].includes(t)}},index:Number,prev:Object,next:Object,isRtl:Boolean},created(){this.draggable=null},computed:{isStatic(){const{prev:t,next:r}=this.$props,e=t.resizable&&r.resizable,o=t.collapsible||r.collapsible;return!e&&!o},isDraggable(){const{prev:t,next:r}=this.$props,e=t.resizable&&r.resizable,o=t.collapsed||r.collapsed;return!!e&&!o},isHorizontal(){return this.$props.orientation==="horizontal"}},inject:{kendoLocalizationService:{default:null}},data(){return{focused:!1}},mounted(){this.$el&&(this.draggable=this.$refs.draggable)},render(){const t=this.isDraggable,r=this.isStatic,e=this.isHorizontal,o=l.classNames("k-splitbar",{"k-focus":this.focused,"k-splitbar-horizontal":e,"k-splitbar-vertical":!e,"k-splitbar-draggable-horizontal":e&&t,"k-splitbar-draggable-vertical":!e&&t,"k-splitbar-static-horizontal":e&&r,"k-splitbar-static-vertical":!e&&r}),n=this.previousArrowName(e),i=this.previousArrowSVG(e),h=this.nextArrowName(e),p=this.nextArrowSVG(e),u=d.provideLocalizationService(this).toLanguageString(g.splitterPaneLabel,g.messages[g.splitterPaneLabel]);return a.createVNode(l.Draggable,{onPress:c=>this.onDrag(c,!0,!1),onDrag:c=>this.onDrag(c,!1,!1),onRelease:c=>this.onDrag(c,!1,!0),ref:"draggable"},{default:()=>[a.createVNode("div",{tabindex:r?-1:0,role:"separator",class:o,style:{touchAction:"none"},onFocusin:this.onFocus,onFocusout:this.onBlur,onDblclick:this.onToggle,onKeydown:this.onKeyDown,"aria-label":u,"aria-orientation":this.isHorizontal?"vertical":"horizontal"},[this.prev.collapsible&&a.createVNode("span",{class:"k-collapse-prev",onClick:this.onPrevToggle},[a.createVNode(l.Icon,{name:n,icon:i,size:"xsmall"},null)]),a.createVNode("div",{class:"k-resize-handle"},null),this.next.collapsible&&a.createVNode("span",{class:"k-collapse-next",onClick:this.onNextToggle},[a.createVNode(l.Icon,{name:h,icon:p,size:"xsmall"},null)])])]})},methods:{onDrag(t,r,e){const o=t,{index:n}=this.$props,i=this.draggable&&this.draggable.element;!e&&o&&o.originalEvent.preventDefault(),i&&!this.isStatic&&this.isDraggable&&this.$emit("drag",o,i,n,r,e)},onFocus(){this.focused=!0},onBlur(){this.focused=!1},onToggle(t){const{index:r,prev:e,next:o}=this.$props;(e.collapsible||o.collapsible)&&this.$emit("toggle",e.collapsible?r:r+1,t)},onPrevToggle(t){const{index:r,prev:e}=this.$props;e.collapsible&&this.$emit("toggle",r,t)},onNextToggle(t){const{index:r,next:e}=this.$props;e.collapsible&&this.$emit("toggle",r+1,t)},onKeyDown(t){const r=t&&t.keyCode,e=this.isHorizontal,{index:o}=this.$props,n=this.draggable&&this.draggable.element,i=(h,p,u)=>{t.preventDefault(),this.$emit("keyboardresize",h,p,u,t)};n&&(r===l.Keys.enter?(t.preventDefault(),this.onToggle(t)):this.isDraggable&&(e&&r===l.Keys.left?i(n,o,-10):e&&r===l.Keys.right?i(n,o,10):!e&&r===l.Keys.up?i(n,o,-10):!e&&r===l.Keys.down&&i(n,o,10)))},previousArrowName(t){const{prev:r}=this.$props,e=r.collapsed;return t&&!e?this.isRtl?"chevron-right":"chevron-left":t&&e?this.isRtl?"chevron-left":"chevron-right":!t&&!e?"chevron-up":!t&&e?"chevron-down":""},previousArrowSVG(t){const{prev:r}=this.$props,e=r.collapsed;if(t&&!e)return this.isRtl?s.chevronRightIcon:s.chevronLeftIcon;if(t&&e)return this.isRtl?s.chevronLeftIcon:s.chevronRightIcon;if(!t&&!e)return s.chevronUpIcon;if(!t&&e)return s.chevronDownIcon},nextArrowName(t){const{next:r}=this.$props,e=r.collapsed;return t&&!e?this.isRtl?"chevron-left":"chevron-right":t&&e?this.isRtl?"chevron-right":"chevron-left":!t&&!e?"chevron-down":!t&&e?"chevron-up":""},nextArrowSVG(t){const{next:r}=this.$props,e=r.collapsed;if(t&&!e)return this.isRtl?s.chevronLeftIcon:s.chevronRightIcon;if(t&&e)return this.isRtl?s.chevronRightIcon:s.chevronLeftIcon;if(!t&&!e)return s.chevronDownIcon;if(!t&&e)return s.chevronUpIcon}}});exports.SplitterBar=f;

package/splitter/SplitterBar.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { defineComponent as v, createVNode as r } from "vue";
-import { Keys as n, classNames as x, Draggable as w, Icon as u } from "@progress/kendo-vue-common";
+import { defineComponent as m, createVNode as n } from "vue";
+import { Keys as a, classNames as x, Draggable as w, Icon as d } from "@progress/kendo-vue-common";
 import { provideLocalizationService as k } from "@progress/kendo-vue-intl";
-import { splitterPaneLabel as b, messages as $ } from "../messages/main.mjs";
-import { caretAltLeftIcon as c, caretAltRightIcon as p, caretAltDownIcon as f, caretAltUpIcon as m } from "@progress/kendo-svg-icons";
-const C = /* @__PURE__ */ v({
+import { splitterPaneLabel as f, messages as $ } from "../messages/main.mjs";
+import { chevronLeftIcon as c, chevronRightIcon as p, chevronDownIcon as b, chevronUpIcon as v } from "@progress/kendo-svg-icons";
+const C = /* @__PURE__ */ m({
   name: "KendoSplitterBar",
   emits: {
     drag: null,
@@ -37,16 +37,16 @@ const C = /* @__PURE__ */ v({
     isStatic() {
       const {
         prev: t,
-        next: s
-      } = this.$props, e = t.resizable && s.resizable, l = t.collapsible || s.collapsible;
-      return !e && !l;
+        next: r
+      } = this.$props, e = t.resizable && r.resizable, s = t.collapsible || r.collapsible;
+      return !e && !s;
     },
     isDraggable() {
       const {
         prev: t,
-        next: s
-      } = this.$props, e = t.resizable && s.resizable, l = t.collapsed || s.collapsed;
-      return !!e && !l;
+        next: r
+      } = this.$props, e = t.resizable && r.resizable, s = t.collapsed || r.collapsed;
+      return !!e && !s;
     },
     isHorizontal() {
       return this.$props.orientation === "horizontal";
@@ -66,25 +66,25 @@ const C = /* @__PURE__ */ v({
     this.$el && (this.draggable = this.$refs.draggable);
   },
   render() {
-    const t = this.isDraggable, s = this.isStatic, e = this.isHorizontal, l = x("k-splitbar", {
+    const t = this.isDraggable, r = this.isStatic, e = this.isHorizontal, s = x("k-splitbar", {
       "k-focus": this.focused,
       "k-splitbar-horizontal": e,
       "k-splitbar-vertical": !e,
       "k-splitbar-draggable-horizontal": e && t,
       "k-splitbar-draggable-vertical": !e && t,
-      "k-splitbar-static-horizontal": e && s,
-      "k-splitbar-static-vertical": !e && s
-    }), i = this.previousArrowName(e), o = this.previousArrowSVG(e), h = this.nextArrowName(e), g = this.nextArrowSVG(e), d = k(this).toLanguageString(b, $[b]);
-    return r(w, {
-      onPress: (a) => this.onDrag(a, !0, !1),
-      onDrag: (a) => this.onDrag(a, !1, !1),
-      onRelease: (a) => this.onDrag(a, !1, !0),
+      "k-splitbar-static-horizontal": e && r,
+      "k-splitbar-static-vertical": !e && r
+    }), i = this.previousArrowName(e), o = this.previousArrowSVG(e), h = this.nextArrowName(e), u = this.nextArrowSVG(e), g = k(this).toLanguageString(f, $[f]);
+    return n(w, {
+      onPress: (l) => this.onDrag(l, !0, !1),
+      onDrag: (l) => this.onDrag(l, !1, !1),
+      onRelease: (l) => this.onDrag(l, !1, !0),
       ref: "draggable"
     }, {
-      default: () => [r("div", {
-        tabindex: s ? -1 : 0,
+      default: () => [n("div", {
+        tabindex: r ? -1 : 0,
         role: "separator",
-        class: l,
+        class: s,
         style: {
           touchAction: "none"
         },
@@ -92,33 +92,33 @@ const C = /* @__PURE__ */ v({
         onFocusout: this.onBlur,
         onDblclick: this.onToggle,
         onKeydown: this.onKeyDown,
-        "aria-label": d,
+        "aria-label": g,
         "aria-orientation": this.isHorizontal ? "vertical" : "horizontal"
-      }, [this.prev.collapsible && r("span", {
+      }, [this.prev.collapsible && n("span", {
         class: "k-collapse-prev",
         onClick: this.onPrevToggle
-      }, [r(u, {
+      }, [n(d, {
         name: i,
         icon: o,
         size: "xsmall"
-      }, null)]), r("div", {
+      }, null)]), n("div", {
         class: "k-resize-handle"
-      }, null), this.next.collapsible && r("span", {
+      }, null), this.next.collapsible && n("span", {
         class: "k-collapse-next",
         onClick: this.onNextToggle
-      }, [r(u, {
+      }, [n(d, {
         name: h,
-        icon: g,
+        icon: u,
         size: "xsmall"
       }, null)])])]
     });
   },
   methods: {
-    onDrag(t, s, e) {
-      const l = t, {
+    onDrag(t, r, e) {
+      const s = t, {
         index: i
       } = this.$props, o = this.draggable && this.draggable.element;
-      !e && l && l.originalEvent.preventDefault(), o && !this.isStatic && this.isDraggable && this.$emit("drag", l, o, i, s, e);
+      !e && s && s.originalEvent.preventDefault(), o && !this.isStatic && this.isDraggable && this.$emit("drag", s, o, i, r, e);
     },
     onFocus() {
       this.focused = !0;
@@ -128,57 +128,71 @@ const C = /* @__PURE__ */ v({
     },
     onToggle(t) {
       const {
-        index: s,
+        index: r,
         prev: e,
-        next: l
+        next: s
       } = this.$props;
-      (e.collapsible || l.collapsible) && this.$emit("toggle", e.collapsible ? s : s + 1, t);
+      (e.collapsible || s.collapsible) && this.$emit("toggle", e.collapsible ? r : r + 1, t);
     },
     onPrevToggle(t) {
       const {
-        index: s,
+        index: r,
         prev: e
       } = this.$props;
-      e.collapsible && this.$emit("toggle", s, t);
+      e.collapsible && this.$emit("toggle", r, t);
     },
     onNextToggle(t) {
       const {
-        index: s,
+        index: r,
         next: e
       } = this.$props;
-      e.collapsible && this.$emit("toggle", s + 1, t);
+      e.collapsible && this.$emit("toggle", r + 1, t);
     },
     onKeyDown(t) {
-      const s = t && t.keyCode, e = this.isHorizontal, {
-        index: l
-      } = this.$props, i = this.draggable && this.draggable.element, o = (h, g, d) => {
-        t.preventDefault(), this.$emit("keyboardresize", h, g, d, t);
+      const r = t && t.keyCode, e = this.isHorizontal, {
+        index: s
+      } = this.$props, i = this.draggable && this.draggable.element, o = (h, u, g) => {
+        t.preventDefault(), this.$emit("keyboardresize", h, u, g, t);
       };
-      i && (s === n.enter ? (t.preventDefault(), this.onToggle(t)) : this.isDraggable && (e && s === n.left ? o(i, l, -10) : e && s === n.right ? o(i, l, 10) : !e && s === n.up ? o(i, l, -10) : !e && s === n.down && o(i, l, 10)));
+      i && (r === a.enter ? (t.preventDefault(), this.onToggle(t)) : this.isDraggable && (e && r === a.left ? o(i, s, -10) : e && r === a.right ? o(i, s, 10) : !e && r === a.up ? o(i, s, -10) : !e && r === a.down && o(i, s, 10)));
     },
     previousArrowName(t) {
       const {
-        prev: s
-      } = this.$props, e = s.collapsed;
-      return t && !e ? this.isRtl ? "caret-alt-right" : "caret-alt-left" : t && e ? this.isRtl ? "caret-alt-left" : "caret-alt-right" : !t && !e ? "caret-alt-up" : !t && e ? "caret-alt-down" : "";
+        prev: r
+      } = this.$props, e = r.collapsed;
+      return t && !e ? this.isRtl ? "chevron-right" : "chevron-left" : t && e ? this.isRtl ? "chevron-left" : "chevron-right" : !t && !e ? "chevron-up" : !t && e ? "chevron-down" : "";
     },
     previousArrowSVG(t) {
       const {
-        prev: s
-      } = this.$props, e = s.collapsed;
-      return t && !e ? this.isRtl ? p : c : t && e ? this.isRtl ? c : p : !t && !e ? m : !t && e ? f : void 0;
+        prev: r
+      } = this.$props, e = r.collapsed;
+      if (t && !e)
+        return this.isRtl ? p : c;
+      if (t && e)
+        return this.isRtl ? c : p;
+      if (!t && !e)
+        return v;
+      if (!t && e)
+        return b;
     },
     nextArrowName(t) {
       const {
-        next: s
-      } = this.$props, e = s.collapsed;
-      return t && !e ? this.isRtl ? "caret-alt-left" : "caret-alt-right" : t && e ? this.isRtl ? "caret-alt-right" : "caret-alt-left" : !t && !e ? "caret-alt-down" : !t && e ? "caret-alt-up" : "";
+        next: r
+      } = this.$props, e = r.collapsed;
+      return t && !e ? this.isRtl ? "chevron-left" : "chevron-right" : t && e ? this.isRtl ? "chevron-right" : "chevron-left" : !t && !e ? "chevron-down" : !t && e ? "chevron-up" : "";
     },
     nextArrowSVG(t) {
       const {
-        next: s
-      } = this.$props, e = s.collapsed;
-      return t && !e ? this.isRtl ? c : p : t && e ? this.isRtl ? p : c : !t && !e ? f : !t && e ? m : void 0;
+        next: r
+      } = this.$props, e = r.collapsed;
+      if (t && !e)
+        return this.isRtl ? c : p;
+      if (t && e)
+        return this.isRtl ? p : c;
+      if (!t && !e)
+        return b;
+      if (!t && e)
+        return v;
     }
   }
 });

package/stepper/Step.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),r=require("@progress/kendo-vue-common"),q=require("@progress/kendo-vue-intl"),k=require("@progress/kendo-svg-icons"),S=require("./contants.js"),b=require("./messages/main.js"),D=t.defineComponent({name:"KendoStep",props:{current:Boolean,disabled:Boolean,icon:String,svgIcon:Object,index:Number,isValid:{type:Boolean,default:void 0},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,successSvgIcon:Object,errorIcon:String,errorSvgIcon:Object,onChange:Function,onFocus:Function},inject:{kendoLocalizationService:{default:null}},computed:{itemClassNames(){const{current:e,disabled:n,focused:i,index:o,isValid:s,optional:d}=this.$props;return{"k-step":!0,"k-step-first":o===0,"k-step-last":this.numOfSteps&&o===this.numOfSteps-1,"k-step-done":o<this.value,"k-step-current":e,"k-step-optional":d,"k-disabled":n,"k-focus":i,"k-step-error":s!==void 0&&!s,"k-step-success":s}},itemStyles(){const{index:e}=this.$props,n=!this.linear||e===this.value-1||e===this.value||e===this.value+1;return{maxWidth:this.isVertical?void 0:`calc(100% / ${this.numOfSteps})`,pointerEvents:n?void 0:"none"}}},watch:{focused(e){this.aElement=this.$refs.aElement,this.aElement&&e&&this.aElement.focus()}},setup(){return{kendoLocalizationService:t.inject("kendoLocalizationService",{})}},render(){const e=r.getDefaultSlots(this),{current:n,disabled:i,focused:o,icon:s,svgIcon:d,index:a,isValid:c,label:l,optional:I,tabIndex:m,text:g,animationDuration:u,item:v,linear:N,mode:V,value:p,successIcon:x,successSvgIcon:C,errorIcon:O,errorSvgIcon:F}=this.$props,y=!N||a===p-1||a===p||a===p+1,B=q.provideLocalizationService(this),$=(f=>B.toLanguageString(f,b.messages[f]))(b.optionalText),z=typeof u=="number"?u:u!==!1?S.DEFAULT_ANIMATION_DURATION:S.NO_ANIMATION,L=c?x||"check-circle":O||"exclamation-circle",j=c?C||k.checkOutlineIcon:F||k.exclamationCircleIcon,h=t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:r.getIconName(L),icon:j,"aria-hidden":"true"},null),A=function(){return V!=="labels"?t.createVNode("span",{class:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:z+"ms"}},[this.getStepIndicatorContent(l,s,d,g,a,c,h)]):null},E=function(){return t.createVNode("span",{class:"k-step-label"},[l&&t.createVNode("span",{class:"k-step-text"},[l]),l&&c!==void 0&&h,I&&t.createVNode("span",{class:"k-step-label-optional"},[$])])};return t.createVNode("li",{class:this.itemClassNames,style:this.itemStyles},[t.createVNode("a",{ref:"aElement",class:"k-step-link",title:l||void 0,onClick:this.handleClick,onFocusin:this.handleFocus,"tab-index":m||(n?0:-1),"aria-current":n?!0:void 0,"aria-disabled":i||!y||void 0,"aria-invalid":c!==void 0&&!c||void 0},[v?e:[A.call(this),E.call(this)]])])},methods:{getStepIndicatorContent(e,n,i,o,s,d,a){return e?n||i?t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:n,icon:i},null):t.createVNode("span",{class:"k-step-indicator-text"},[o||s+1]):d!==void 0?a:n||i?t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:n,icon:i},null):t.createVNode("span",{class:"k-step-indicator-text"},[o||s+1])},focus(){this.$el&&r.focusFirstFocusableChild(this.$el)},handleClick(e){this.disabled||this.$emit("change",{event:e,value:this.index,component:this})},handleFocus(e){this.disabled||this.$emit("focus",e)}}});exports.Step=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),r=require("@progress/kendo-vue-common"),q=require("@progress/kendo-vue-intl"),k=require("@progress/kendo-svg-icons"),S=require("./contants.js"),b=require("./messages/main.js"),D=t.defineComponent({name:"KendoStep",props:{current:Boolean,disabled:Boolean,icon:String,svgIcon:Object,index:Number,isValid:{type:Boolean,default:void 0},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,successSvgIcon:Object,errorIcon:String,errorSvgIcon:Object,onChange:Function,onFocus:Function},inject:{kendoLocalizationService:{default:null}},computed:{itemClassNames(){const{current:e,disabled:n,focused:i,index:o,isValid:s,optional:d}=this.$props;return{"k-step":!0,"k-step-first":o===0,"k-step-last":this.numOfSteps&&o===this.numOfSteps-1,"k-step-done":o<this.value,"k-step-current":e,"k-step-optional":d,"k-disabled":n,"k-focus":i,"k-step-error":s!==void 0&&!s,"k-step-success":s}},itemStyles(){const{index:e}=this.$props,n=!this.linear||e===this.value-1||e===this.value||e===this.value+1;return{maxWidth:this.isVertical?void 0:`calc(100% / ${this.numOfSteps})`,pointerEvents:n?void 0:"none"}}},watch:{focused(e){this.aElement=this.$refs.aElement,this.aElement&&e&&this.aElement.focus()}},setup(){return{kendoLocalizationService:t.inject("kendoLocalizationService",{})}},render(){const e=r.getDefaultSlots(this),{current:n,disabled:i,focused:o,icon:s,svgIcon:d,index:a,isValid:c,label:l,optional:I,tabIndex:m,text:g,animationDuration:u,item:v,linear:N,mode:V,value:p,successIcon:x,successSvgIcon:C,errorIcon:O,errorSvgIcon:F}=this.$props,y=!N||a===p-1||a===p||a===p+1,B=q.provideLocalizationService(this),$=(f=>B.toLanguageString(f,b.messages[f]))(b.optionalText),z=typeof u=="number"?u:u!==!1?S.DEFAULT_ANIMATION_DURATION:S.NO_ANIMATION,L=c?x||"check-circle":O||"exclamation-circle",j=c?C||k.checkIcon:F||k.exclamationCircleIcon,h=t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:r.getIconName(L),icon:j,"aria-hidden":"true"},null),A=function(){return V!=="labels"?t.createVNode("span",{class:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:z+"ms"}},[this.getStepIndicatorContent(l,s,d,g,a,c,h)]):null},E=function(){return t.createVNode("span",{class:"k-step-label"},[l&&t.createVNode("span",{class:"k-step-text"},[l]),l&&c!==void 0&&h,I&&t.createVNode("span",{class:"k-step-label-optional"},[$])])};return t.createVNode("li",{class:this.itemClassNames,style:this.itemStyles},[t.createVNode("a",{ref:"aElement",class:"k-step-link",title:l||void 0,onClick:this.handleClick,onFocusin:this.handleFocus,"tab-index":m||(n?0:-1),"aria-current":n?!0:void 0,"aria-disabled":i||!y||void 0,"aria-invalid":c!==void 0&&!c||void 0},[v?e:[A.call(this),E.call(this)]])])},methods:{getStepIndicatorContent(e,n,i,o,s,d,a){return e?n||i?t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:n,icon:i},null):t.createVNode("span",{class:"k-step-indicator-text"},[o||s+1]):d!==void 0?a:n||i?t.createVNode(r.Icon,{class:"k-step-indicator-icon",name:n,icon:i},null):t.createVNode("span",{class:"k-step-indicator-text"},[o||s+1])},focus(){this.$el&&r.focusFirstFocusableChild(this.$el)},handleClick(e){this.disabled||this.$emit("change",{event:e,value:this.index,component:this})},handleFocus(e){this.disabled||this.$emit("focus",e)}}});exports.Step=D;

package/stepper/Step.mjs

@@ -8,7 +8,7 @@
 import { defineComponent as E, createVNode as n, inject as j } from "vue";
 import { focusFirstFocusableChild as D, Icon as p, getDefaultSlots as V, getIconName as M } from "@progress/kendo-vue-common";
 import { provideLocalizationService as T } from "@progress/kendo-vue-intl";
-import { checkOutlineIcon as w, exclamationCircleIcon as _ } from "@progress/kendo-svg-icons";
+import { checkIcon as w, exclamationCircleIcon as _ } from "@progress/kendo-svg-icons";
 import { DEFAULT_ANIMATION_DURATION as U, NO_ANIMATION as K } from "./contants.mjs";
 import { messages as R, optionalText as W } from "./messages/main.mjs";
 const Y = /* @__PURE__ */ E({