@progress/kendo-vue-layout 3.14.2 → 3.15.0-dev.202309281100

package/dist/es/actionsheet/ActionSheet.d.ts

@@ -62,6 +62,22 @@ export interface ActionSheetProps {
      * The CSS classes that will be rendered on the inner ActionSheet element.
      */
     className?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the header section of the ActionSheet element.
+     */
+    headerClassName?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the footer section of the ActionSheet element.
+     */
+    footerClassName?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the content section of the ActionSheet element.
+     */
+    contentClassName?: string;
+    /**
+     * The custom Styles that will be applied on the DOM element that wraps the header section of the ActionSheet element.
+     */
+    headerStyle?: string;
     /**
      * Sets the header content of the ActionSheet either as string that is pointing to a slot template of as render function.
      */

package/dist/es/actionsheet/ActionSheet.js

@@ -41,6 +41,22 @@ var ActionSheetVue2 = {
     subTitle: String,
     title: String,
     className: String,
+    headerClassName: {
+      type: String,
+      default: undefined
+    },
+    contentClassName: {
+      type: String,
+      default: undefined
+    },
+    headerStyle: {
+      type: String,
+      default: undefined
+    },
+    footerClassName: {
+      type: String,
+      default: undefined
+    },
     header: [String, Object, Function],
     content: [String, Object, Function],
     footer: [String, Object, Function],
@@ -71,7 +87,6 @@ var ActionSheetVue2 = {
     }
   },
   updated: function updated() {
-    var _this = this;
     this.element = getRef(this, 'actionSheet');
     if (this.$props.expand && !this.show) {
       this.show = true;
@@ -82,8 +97,9 @@ var ActionSheetVue2 = {
     }
     if (this.element) {
       if (this.$props.navigatable) {
+        var navigatableElements_1 = this.$props.navigatableElements;
         var innerElements = ['.k-actionsheet-footer', '.k-actionsheet-content', '.k-actionsheet-titlebar'].map(function (selector) {
-          return FOCUSABLE_ELEMENTS.concat(_this.$props.navigatableElements).map(function (focusableSelector) {
+          return FOCUSABLE_ELEMENTS.concat(navigatableElements_1).map(function (focusableSelector) {
             return "".concat(selector, " ").concat(focusableSelector);
           });
         });
@@ -101,7 +117,10 @@ var ActionSheetVue2 = {
             }
           }
         });
-        this.navigation.focusElement(this.navigation.first, null);
+        navigatableElements_1.length !== 0 ? this.navigation.focusElement(this.element.querySelector(navigatableElements_1[0]), null)
+        // The above line focuses the first element of the $props.navigatableElements 
+        // if the props is defined. Otherwise, the released logic will be executed 
+        : this.navigation.focusElement(this.navigation.first, null);
       }
     }
   },
@@ -145,7 +164,10 @@ var ActionSheetVue2 = {
       expand = _a.expand,
       tabIndex = _a.tabIndex,
       className = _a.className,
-      animationDuration = _a.animationDuration;
+      animationDuration = _a.animationDuration,
+      headerClassName = _a.headerClassName,
+      contentClassName = _a.contentClassName,
+      footerClassName = _a.footerClassName;
     var header = templateRendering.call(this, this.$props.header, getListeners.call(this));
     var headerContent = getTemplate.call(this, {
       h: h,
@@ -185,7 +207,12 @@ var ActionSheetVue2 = {
       }
     }, [this.$props.header && !title && !subTitle &&
     // @ts-ignore function children
-    h(ActionSheetHeader, this.v3 ? function () {
+    h(ActionSheetHeader, {
+      headerClassName: headerClassName,
+      attrs: this.v3 ? undefined : {
+        headerClassName: headerClassName
+      }
+    }, this.v3 ? function () {
       return [headerContent];
     } : [headerContent]), (title || subTitle) && h("div", {
       "class": "k-actionsheet-titlebar k-text-center"
@@ -285,11 +312,21 @@ var ActionSheetVue2 = {
       });
     }, this)])]) :
     // @ts-ignore function children
-    h(ActionSheetContent, this.v3 ? function () {
+    h(ActionSheetContent, {
+      contentClassName: contentClassName,
+      attrs: this.v3 ? undefined : {
+        contentClassName: contentClassName
+      }
+    }, this.v3 ? function () {
       return [contentTemplate];
     } : [contentTemplate]), this.$props.footer &&
     // @ts-ignore function children
-    h(ActionSheetFooter, this.v3 ? function () {
+    h(ActionSheetFooter, {
+      footerClassName: footerClassName,
+      attrs: this.v3 ? undefined : {
+        footerClassName: footerClassName
+      }
+    }, this.v3 ? function () {
       return [footerContent];
     } : [footerContent])]);
     return this.show && h("div", {
@@ -303,20 +340,18 @@ var ActionSheetVue2 = {
     }), animation ?
     // @ts-ignore function children
     h(Slide, {
-      id: 'test',
+      onExited: this.hideActionSheet,
+      on: this.v3 ? undefined : {
+        "exited": this.hideActionSheet
+      },
+      direction: 'up',
       attrs: this.v3 ? undefined : {
-        id: 'test',
         direction: 'up',
         componentChildStyle: animationStyles || this.bottomPosition,
         transitionEnterDuration: animationDuration,
         transitionExitDuration: animationDuration,
         appear: expand
       },
-      onExited: this.hideActionSheet,
-      on: this.v3 ? undefined : {
-        "exited": this.hideActionSheet
-      },
-      direction: 'up',
       componentChildStyle: animationStyles || this.bottomPosition,
       transitionEnterDuration: animationDuration,
       transitionExitDuration: animationDuration,

package/dist/es/actionsheet/ActionSheetContent.js

@@ -3,12 +3,18 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { getDefaultSlots, classNames } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
 var ActionSheetContentVue2 = {
   name: 'KendoActionSheetContent',
+  props: {
+    contentClassName: {
+      type: String,
+      default: undefined
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -19,8 +25,9 @@ var ActionSheetContentVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
+    var contentClassName = this.$props.contentClassName;
     return h("div", {
-      "class": 'k-actionsheet-content'
+      "class": classNames('k-actionsheet-content', contentClassName)
     }, [defaultSlot]);
   }
 };

package/dist/es/actionsheet/ActionSheetFooter.js

@@ -3,12 +3,18 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
 var ActionSheetFooterVue2 = {
   name: 'KendoActionSheetFooter',
+  props: {
+    footerClassName: {
+      type: String,
+      default: undefined
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -19,8 +25,9 @@ var ActionSheetFooterVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
+    var footerClassName = this.$props.footerClassName;
     return h("div", {
-      "class": 'k-actionsheet-footer'
+      "class": classNames('k-actionsheet-footer', footerClassName)
     }, [defaultSlot]);
   }
 };

package/dist/es/actionsheet/ActionSheetHeader.js

@@ -3,12 +3,22 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
 var ActionSheetHeaderVue2 = {
   name: 'KendoActionSheetHeader',
+  props: {
+    headerClassName: {
+      type: String,
+      default: undefined
+    },
+    headerStyle: {
+      type: String,
+      default: undefined
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -19,8 +29,12 @@ var ActionSheetHeaderVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+      headerStyle = _a.headerStyle,
+      headerClassName = _a.headerClassName;
     return h("div", {
-      "class": 'k-actionsheet-titlebar'
+      style: headerStyle,
+      "class": classNames('k-actionsheet-titlebar', headerClassName)
     }, [defaultSlot]);
   }
 };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1695651715,
+    publishDate: 1695898148,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/actionsheet/ActionSheet.d.ts

@@ -62,6 +62,22 @@ export interface ActionSheetProps {
      * The CSS classes that will be rendered on the inner ActionSheet element.
      */
     className?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the header section of the ActionSheet element.
+     */
+    headerClassName?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the footer section of the ActionSheet element.
+     */
+    footerClassName?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the content section of the ActionSheet element.
+     */
+    contentClassName?: string;
+    /**
+     * The custom Styles that will be applied on the DOM element that wraps the header section of the ActionSheet element.
+     */
+    headerStyle?: string;
     /**
      * Sets the header content of the ActionSheet either as string that is pointing to a slot template of as render function.
      */

package/dist/esm/actionsheet/ActionSheet.js

@@ -41,6 +41,22 @@ var ActionSheetVue2 = {
     subTitle: String,
     title: String,
     className: String,
+    headerClassName: {
+      type: String,
+      default: undefined
+    },
+    contentClassName: {
+      type: String,
+      default: undefined
+    },
+    headerStyle: {
+      type: String,
+      default: undefined
+    },
+    footerClassName: {
+      type: String,
+      default: undefined
+    },
     header: [String, Object, Function],
     content: [String, Object, Function],
     footer: [String, Object, Function],
@@ -71,7 +87,6 @@ var ActionSheetVue2 = {
     }
   },
   updated: function updated() {
-    var _this = this;
     this.element = getRef(this, 'actionSheet');
     if (this.$props.expand && !this.show) {
       this.show = true;
@@ -82,8 +97,9 @@ var ActionSheetVue2 = {
     }
     if (this.element) {
       if (this.$props.navigatable) {
+        var navigatableElements_1 = this.$props.navigatableElements;
         var innerElements = ['.k-actionsheet-footer', '.k-actionsheet-content', '.k-actionsheet-titlebar'].map(function (selector) {
-          return FOCUSABLE_ELEMENTS.concat(_this.$props.navigatableElements).map(function (focusableSelector) {
+          return FOCUSABLE_ELEMENTS.concat(navigatableElements_1).map(function (focusableSelector) {
             return "".concat(selector, " ").concat(focusableSelector);
           });
         });
@@ -101,7 +117,10 @@ var ActionSheetVue2 = {
             }
           }
         });
-        this.navigation.focusElement(this.navigation.first, null);
+        navigatableElements_1.length !== 0 ? this.navigation.focusElement(this.element.querySelector(navigatableElements_1[0]), null)
+        // The above line focuses the first element of the $props.navigatableElements 
+        // if the props is defined. Otherwise, the released logic will be executed 
+        : this.navigation.focusElement(this.navigation.first, null);
       }
     }
   },
@@ -145,7 +164,10 @@ var ActionSheetVue2 = {
       expand = _a.expand,
       tabIndex = _a.tabIndex,
       className = _a.className,
-      animationDuration = _a.animationDuration;
+      animationDuration = _a.animationDuration,
+      headerClassName = _a.headerClassName,
+      contentClassName = _a.contentClassName,
+      footerClassName = _a.footerClassName;
     var header = templateRendering.call(this, this.$props.header, getListeners.call(this));
     var headerContent = getTemplate.call(this, {
       h: h,
@@ -185,7 +207,12 @@ var ActionSheetVue2 = {
       }
     }, [this.$props.header && !title && !subTitle &&
     // @ts-ignore function children
-    h(ActionSheetHeader, this.v3 ? function () {
+    h(ActionSheetHeader, {
+      headerClassName: headerClassName,
+      attrs: this.v3 ? undefined : {
+        headerClassName: headerClassName
+      }
+    }, this.v3 ? function () {
       return [headerContent];
     } : [headerContent]), (title || subTitle) && h("div", {
       "class": "k-actionsheet-titlebar k-text-center"
@@ -285,11 +312,21 @@ var ActionSheetVue2 = {
       });
     }, this)])]) :
     // @ts-ignore function children
-    h(ActionSheetContent, this.v3 ? function () {
+    h(ActionSheetContent, {
+      contentClassName: contentClassName,
+      attrs: this.v3 ? undefined : {
+        contentClassName: contentClassName
+      }
+    }, this.v3 ? function () {
       return [contentTemplate];
     } : [contentTemplate]), this.$props.footer &&
     // @ts-ignore function children
-    h(ActionSheetFooter, this.v3 ? function () {
+    h(ActionSheetFooter, {
+      footerClassName: footerClassName,
+      attrs: this.v3 ? undefined : {
+        footerClassName: footerClassName
+      }
+    }, this.v3 ? function () {
       return [footerContent];
     } : [footerContent])]);
     return this.show && h("div", {
@@ -303,20 +340,18 @@ var ActionSheetVue2 = {
     }), animation ?
     // @ts-ignore function children
     h(Slide, {
-      id: 'test',
+      onExited: this.hideActionSheet,
+      on: this.v3 ? undefined : {
+        "exited": this.hideActionSheet
+      },
+      direction: 'up',
       attrs: this.v3 ? undefined : {
-        id: 'test',
         direction: 'up',
         componentChildStyle: animationStyles || this.bottomPosition,
         transitionEnterDuration: animationDuration,
         transitionExitDuration: animationDuration,
         appear: expand
       },
-      onExited: this.hideActionSheet,
-      on: this.v3 ? undefined : {
-        "exited": this.hideActionSheet
-      },
-      direction: 'up',
       componentChildStyle: animationStyles || this.bottomPosition,
       transitionEnterDuration: animationDuration,
       transitionExitDuration: animationDuration,

package/dist/esm/actionsheet/ActionSheetContent.js

@@ -3,12 +3,18 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { getDefaultSlots, classNames } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
 var ActionSheetContentVue2 = {
   name: 'KendoActionSheetContent',
+  props: {
+    contentClassName: {
+      type: String,
+      default: undefined
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -19,8 +25,9 @@ var ActionSheetContentVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
+    var contentClassName = this.$props.contentClassName;
     return h("div", {
-      "class": 'k-actionsheet-content'
+      "class": classNames('k-actionsheet-content', contentClassName)
     }, [defaultSlot]);
   }
 };

package/dist/esm/actionsheet/ActionSheetFooter.js

@@ -3,12 +3,18 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
 var ActionSheetFooterVue2 = {
   name: 'KendoActionSheetFooter',
+  props: {
+    footerClassName: {
+      type: String,
+      default: undefined
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -19,8 +25,9 @@ var ActionSheetFooterVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
+    var footerClassName = this.$props.footerClassName;
     return h("div", {
-      "class": 'k-actionsheet-footer'
+      "class": classNames('k-actionsheet-footer', footerClassName)
     }, [defaultSlot]);
   }
 };

package/dist/esm/actionsheet/ActionSheetHeader.js

@@ -3,12 +3,22 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getDefaultSlots } from '@progress/kendo-vue-common';
+import { classNames, getDefaultSlots } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
 var ActionSheetHeaderVue2 = {
   name: 'KendoActionSheetHeader',
+  props: {
+    headerClassName: {
+      type: String,
+      default: undefined
+    },
+    headerStyle: {
+      type: String,
+      default: undefined
+    }
+  },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
     var v3 = !!isV3;
@@ -19,8 +29,12 @@ var ActionSheetHeaderVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     var defaultSlot = getDefaultSlots(this);
+    var _a = this.$props,
+      headerStyle = _a.headerStyle,
+      headerClassName = _a.headerClassName;
     return h("div", {
-      "class": 'k-actionsheet-titlebar'
+      style: headerStyle,
+      "class": classNames('k-actionsheet-titlebar', headerClassName)
     }, [defaultSlot]);
   }
 };

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-layout',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1695651715,
+    publishDate: 1695898148,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/npm/actionsheet/ActionSheet.d.ts

@@ -62,6 +62,22 @@ export interface ActionSheetProps {
      * The CSS classes that will be rendered on the inner ActionSheet element.
      */
     className?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the header section of the ActionSheet element.
+     */
+    headerClassName?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the footer section of the ActionSheet element.
+     */
+    footerClassName?: string;
+    /**
+     * The CSS classes that will be rendered on the DOM element that wraps the content section of the ActionSheet element.
+     */
+    contentClassName?: string;
+    /**
+     * The custom Styles that will be applied on the DOM element that wraps the header section of the ActionSheet element.
+     */
+    headerStyle?: string;
     /**
      * Sets the header content of the ActionSheet either as string that is pointing to a slot template of as render function.
      */

package/dist/npm/actionsheet/ActionSheet.js

@@ -47,6 +47,22 @@ var ActionSheetVue2 = {
     subTitle: String,
     title: String,
     className: String,
+    headerClassName: {
+      type: String,
+      default: undefined
+    },
+    contentClassName: {
+      type: String,
+      default: undefined
+    },
+    headerStyle: {
+      type: String,
+      default: undefined
+    },
+    footerClassName: {
+      type: String,
+      default: undefined
+    },
     header: [String, Object, Function],
     content: [String, Object, Function],
     footer: [String, Object, Function],
@@ -77,7 +93,6 @@ var ActionSheetVue2 = {
     }
   },
   updated: function updated() {
-    var _this = this;
     this.element = (0, kendo_vue_common_1.getRef)(this, 'actionSheet');
     if (this.$props.expand && !this.show) {
       this.show = true;
@@ -88,8 +103,9 @@ var ActionSheetVue2 = {
     }
     if (this.element) {
       if (this.$props.navigatable) {
+        var navigatableElements_1 = this.$props.navigatableElements;
         var innerElements = ['.k-actionsheet-footer', '.k-actionsheet-content', '.k-actionsheet-titlebar'].map(function (selector) {
-          return kendo_vue_common_1.FOCUSABLE_ELEMENTS.concat(_this.$props.navigatableElements).map(function (focusableSelector) {
+          return kendo_vue_common_1.FOCUSABLE_ELEMENTS.concat(navigatableElements_1).map(function (focusableSelector) {
             return "".concat(selector, " ").concat(focusableSelector);
           });
         });
@@ -107,7 +123,10 @@ var ActionSheetVue2 = {
             }
           }
         });
-        this.navigation.focusElement(this.navigation.first, null);
+        navigatableElements_1.length !== 0 ? this.navigation.focusElement(this.element.querySelector(navigatableElements_1[0]), null)
+        // The above line focuses the first element of the $props.navigatableElements 
+        // if the props is defined. Otherwise, the released logic will be executed 
+        : this.navigation.focusElement(this.navigation.first, null);
       }
     }
   },
@@ -151,7 +170,10 @@ var ActionSheetVue2 = {
       expand = _a.expand,
       tabIndex = _a.tabIndex,
       className = _a.className,
-      animationDuration = _a.animationDuration;
+      animationDuration = _a.animationDuration,
+      headerClassName = _a.headerClassName,
+      contentClassName = _a.contentClassName,
+      footerClassName = _a.footerClassName;
     var header = kendo_vue_common_1.templateRendering.call(this, this.$props.header, kendo_vue_common_1.getListeners.call(this));
     var headerContent = kendo_vue_common_1.getTemplate.call(this, {
       h: h,
@@ -191,7 +213,12 @@ var ActionSheetVue2 = {
       }
     }, [this.$props.header && !title && !subTitle &&
     // @ts-ignore function children
-    h(ActionSheetHeader_1.ActionSheetHeader, this.v3 ? function () {
+    h(ActionSheetHeader_1.ActionSheetHeader, {
+      headerClassName: headerClassName,
+      attrs: this.v3 ? undefined : {
+        headerClassName: headerClassName
+      }
+    }, this.v3 ? function () {
       return [headerContent];
     } : [headerContent]), (title || subTitle) && h("div", {
       "class": "k-actionsheet-titlebar k-text-center"
@@ -291,11 +318,21 @@ var ActionSheetVue2 = {
       });
     }, this)])]) :
     // @ts-ignore function children
-    h(ActionSheetContent_1.ActionSheetContent, this.v3 ? function () {
+    h(ActionSheetContent_1.ActionSheetContent, {
+      contentClassName: contentClassName,
+      attrs: this.v3 ? undefined : {
+        contentClassName: contentClassName
+      }
+    }, this.v3 ? function () {
       return [contentTemplate];
     } : [contentTemplate]), this.$props.footer &&
     // @ts-ignore function children
-    h(ActionSheetFooter_1.ActionSheetFooter, this.v3 ? function () {
+    h(ActionSheetFooter_1.ActionSheetFooter, {
+      footerClassName: footerClassName,
+      attrs: this.v3 ? undefined : {
+        footerClassName: footerClassName
+      }
+    }, this.v3 ? function () {
       return [footerContent];
     } : [footerContent])]);
     return this.show && h("div", {
@@ -309,20 +346,18 @@ var ActionSheetVue2 = {
     }), animation ?
     // @ts-ignore function children
     h(kendo_vue_animation_1.Slide, {
-      id: 'test',
+      onExited: this.hideActionSheet,
+      on: this.v3 ? undefined : {
+        "exited": this.hideActionSheet
+      },
+      direction: 'up',
       attrs: this.v3 ? undefined : {
-        id: 'test',
         direction: 'up',
         componentChildStyle: animationStyles || this.bottomPosition,
         transitionEnterDuration: animationDuration,
         transitionExitDuration: animationDuration,
         appear: expand
       },
-      onExited: this.hideActionSheet,
-      on: this.v3 ? undefined : {
-        "exited": this.hideActionSheet
-      },
-      direction: 'up',
       componentChildStyle: animationStyles || this.bottomPosition,
       transitionEnterDuration: animationDuration,
       transitionExitDuration: animationDuration,