@progress/kendo-vue-layout 3.7.4-dev.202212020747 → 3.7.4-dev.202301091431

package/dist/es/stepper/messages/main.js

@@ -3,9 +3,14 @@ var _a;
  * @hidden
  */
 export var optionalText = 'stepper.optionalText';
+/**
+ * @hidden
+ */
+export var ariaLabel = 'stepper.ariaLabel';
 /**
  * @hidden
  */
 export var messages = (_a = {},
     _a[optionalText] = '(Optional)',
+    _a[ariaLabel] = 'Progressbar',
     _a);

package/dist/es/tilelayout/Tile.d.ts

@@ -12,6 +12,8 @@ export interface TileProps extends TileLayoutItem {
     index: number;
     defaultPosition: TileStrictPosition;
     ignoreDrag?: (event: any) => boolean;
+    tabIndex: number;
+    ariaDescribedBy: string;
 }
 /**
  * @hidden

package/dist/es/tilelayout/Tile.js

@@ -46,7 +46,12 @@ var TileVue2 = {
     reorderable: {
       type: Boolean,
       default: true
-    }
+    },
+    tabIndex: {
+      type: Number,
+      default: 0
+    },
+    ariaDescribedBy: String
   },
   created: function created() {
     this.oldSize = {};
@@ -79,7 +84,8 @@ var TileVue2 = {
   },
   data: function data() {
     return {
-      rtl: false
+      rtl: false,
+      grabbed: false
     };
   },
   mounted: function mounted() {
@@ -192,7 +198,21 @@ var TileVue2 = {
       "class": this.wrapperClass,
       style: {
         height: '100%'
-      }
+      },
+      role: 'listitem',
+      attrs: this.v3 ? undefined : {
+        role: 'listitem',
+        tabIndex: this.$props.tabIndex,
+        "aria-keyshortcuts": 'Enter',
+        "aria-dropeffect": 'execute',
+        "aria-grabbed": this.grabbed ? true : false,
+        "aria-ariaDescribedBy": this.$props.ariaDescribedBy
+      },
+      tabIndex: this.$props.tabIndex,
+      "aria-keyshortcuts": 'Enter',
+      "aria-dropeffect": 'execute',
+      "aria-grabbed": this.grabbed ? true : false,
+      "aria-ariaDescribedBy": this.$props.ariaDescribedBy
     }, [defaultSlots, resizable && resizable !== 'vertical' && h(ResizeHandlers, {
       onPress: this.handlePress,
       on: this.v3 ? undefined : {
@@ -318,6 +338,7 @@ var TileVue2 = {
       }
       dragElement.classList.remove('k-cursor-grab');
       dragElement.classList.add('k-cursor-grabbing');
+      this.grabbed = true;
       var rec = dragElement.getBoundingClientRect();
       this.pressXY = {
         x: e.clientX,
@@ -386,6 +407,7 @@ var TileVue2 = {
         dragElement.style.height = '100%';
         dragElement.classList.remove('k-cursor-grabbing');
         dragElement.classList.add('k-cursor-grab');
+        this.grabbed = false;
       }
     }
   }

package/dist/es/tilelayout/TileLayout.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getListeners, getTemplate, getter, templateRendering, validatePackage } from '@progress/kendo-vue-common';
+import { getListeners, getTemplate, getter, templateRendering, validatePackage, guid } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata';
 import { Tile } from './Tile';
 /**
@@ -114,12 +114,16 @@ var TileLayoutVue2 = {
       dir: this.$props.dir,
       attrs: this.v3 ? undefined : {
         dir: this.$props.dir,
-        id: this.$props.id
+        id: this.$props.id,
+        role: 'list'
       },
       "class": this.wrapperClass,
       style: tileLayoutStyles,
-      id: this.$props.id
+      id: this.$props.id,
+      role: 'list'
     }, [items.map(function (tile, index) {
+      var _this = this;
+      var tileTitleId = tile && tile.id || guid();
       var item = templateRendering.call(this, tile.item, getListeners.call(this));
       var itemContent = getTemplate.call(this, {
         h: h,
@@ -130,13 +134,20 @@ var TileLayoutVue2 = {
       var headerContent = getTemplate.call(this, {
         h: h,
         template: header,
-        defaultRendering: null
+        defaultRendering: null,
+        additionalProps: {
+          id: tileTitleId,
+          headerText: tile.headerText
+        }
       });
       var body = templateRendering.call(this, tile.body, getListeners.call(this));
       var bodyContent = getTemplate.call(this, {
         h: h,
         template: body,
-        defaultRendering: null
+        defaultRendering: null,
+        additionalProps: {
+          bodyText: tile.bodyText
+        }
       });
       return (
         // @ts-ignore function children
@@ -154,7 +165,9 @@ var TileLayoutVue2 = {
             reorderable: tile.reorderable,
             hintClass: tile.hintClass,
             hintStyle: tile.hintStyle,
-            ignoreDrag: this.$props.ignoreDrag
+            ignoreDrag: this.$props.ignoreDrag,
+            "aria-describedby": tileTitleId,
+            "tab-index": tile.tabIndex
           },
           index: index,
           resizable: tile.resizable,
@@ -163,19 +176,29 @@ var TileLayoutVue2 = {
           "class": tile.class,
           hintClass: tile.hintClass,
           hintStyle: tile.hintStyle,
-          ignoreDrag: this.$props.ignoreDrag
+          ignoreDrag: this.$props.ignoreDrag,
+          "aria-describedby": tileTitleId,
+          "tab-index": tile.tabIndex
         }, this.v3 ? function () {
           return [tile.item ? itemContent : [h("div", {
             "class": "k-tilelayout-item-header k-card-header"
           }, [tile.header ? headerContent : h("h5", {
-            "class": 'k-card-title'
+            "class": 'k-card-title',
+            id: tileTitleId,
+            attrs: _this.v3 ? undefined : {
+              id: tileTitleId
+            }
           }, [tile.headerText])]), h("div", {
             "class": 'k-tilelayout-item-body k-card-body'
           }, [tile.body ? bodyContent : tile.bodyText])]];
         } : [tile.item ? itemContent : [h("div", {
           "class": "k-tilelayout-item-header k-card-header"
         }, [tile.header ? headerContent : h("h5", {
-          "class": 'k-card-title'
+          "class": 'k-card-title',
+          id: tileTitleId,
+          attrs: _this.v3 ? undefined : {
+            id: tileTitleId
+          }
         }, [tile.headerText])]), h("div", {
           "class": 'k-tilelayout-item-body k-card-body'
         }, [tile.body ? bodyContent : tile.bodyText])]])

package/dist/es/tilelayout/interfaces/main.d.ts

@@ -48,6 +48,10 @@ export interface TileLayoutItem {
      * ([see example]({% slug tiles_tilelayout %}#toc-custom-rendering)).
      */
     item?: any;
+    /**
+     * Specifies the id of each Tile if needed to be user-defined. By default the id is automatically generated.
+     */
+    id?: any;
     /**
      * Specifies if the user is allowed to resize the TileLayoutItem and in which direction
      * ([see example]({% slug tiles_tilelayout %}#toc-resizing)).
@@ -60,6 +64,10 @@ export interface TileLayoutItem {
      * If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
      */
     reorderable?: boolean;
+    /**
+     * Specifies if the tabIndex of each TileLayout tile if the scenario requires it. Defaults to `0`.
+     */
+    tabIndex?: number;
 }
 /**
  * Specifies the position of each tile.

package/dist/esm/bottomnavigation/BottomNavigationItem.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { packageMetadata } from '../package-metadata.js';
-import { getTemplate, validatePackage } from '@progress/kendo-vue-common';
+import { getTemplate, Icon, validatePackage } from '@progress/kendo-vue-common';
 /**
  * @hidden
  */
@@ -80,7 +80,7 @@ var BottomNavigationItemVue2 = {
         role: 'link',
         id: id,
         tabIndex: tabIndex,
-        "aria-selected": selected,
+        "aria-current": selected,
         "aria-disabled": disabled
       },
       id: id,
@@ -91,10 +91,14 @@ var BottomNavigationItemVue2 = {
         "keydown": this.handleKeyDown
       },
       onKeydown: this.handleKeyDown,
-      "aria-selected": selected,
+      "aria-current": selected,
       "aria-disabled": disabled
-    }, [this.$props.item ? content : [icon && h("span", {
-      "class": "k-bottom-nav-item-icon k-icon k-i-".concat(icon)
+    }, [this.$props.item ? content : [icon && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon
+      },
+      "class": "k-bottom-nav-item-icon"
     }), text && h("span", {
       "class": 'k-bottom-nav-item-text',
       style: {

package/dist/esm/drawer/DrawerItem.js

@@ -15,7 +15,9 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getTabIndex, getDefaultSlots } from '@progress/kendo-vue-common';
+import { getTabIndex, getDefaultSlots, Icon } from '@progress/kendo-vue-common';
+import { provideLocalizationService } from '@progress/kendo-vue-intl';
+import { separatorAriaMessage, messages } from '../messages/main.js';
 /**
  * @hidden
  */
@@ -37,6 +39,9 @@ var DrawerItemVue2 = {
   inject: {
     kendoDrawer: {
       default: null
+    },
+    kendoLocalizationService: {
+      default: null
     }
   },
   computed: {
@@ -73,30 +78,38 @@ var DrawerItemVue2 = {
       expanded = _b.expanded,
       mini = _b.mini,
       item = _b.item;
+    var ariaLabelSeparator = provideLocalizationService(this).toLanguageString(separatorAriaMessage, messages[separatorAriaMessage]);
     return separator ? h("li", {
       "class": 'k-drawer-item k-drawer-separator',
-      role: "presentation",
+      role: "separator",
       attrs: this.v3 ? undefined : {
-        role: "presentation"
-      }
+        role: "separator",
+        "aria-label": ariaLabelSeparator
+      },
+      "aria-label": ariaLabelSeparator
     }) : h("li", {
       "class": this.itemClassNames,
-      role: "option",
+      role: "menuitem",
       attrs: this.v3 ? undefined : {
-        role: "option",
-        "aria-selected": selected,
+        role: "menuitem",
+        "aria-label": text,
+        "aria-current": selected,
         "aria-disabled": disabled,
         tabindex: getTabIndex(tabIndex, disabled)
       },
-      "aria-selected": selected,
+      "aria-label": text,
+      "aria-current": selected,
       "aria-disabled": disabled,
       onClick: this.handleClick,
       on: this.v3 ? undefined : {
         "click": this.handleClick
       },
       tabindex: getTabIndex(tabIndex, disabled)
-    }, [!item ? [icon && h("span", {
-      "class": 'k-icon ' + icon
+    }, [!item ? [icon && h(Icon, {
+      name: icon,
+      attrs: this.v3 ? undefined : {
+        name: icon
+      }
     }), !expanded && mini ? null : h("span", {
       "class": 'k-item-text'
     }, [text])] : defaultSlot]);

package/dist/esm/drawer/DrawerNavigation.js

@@ -125,9 +125,9 @@ var DrawerNavigationVue2 = {
     var drawerAnimation = expanded ? mode === 'push' ? expandPush : expandOverlay : mode === 'push' ? collapsePush : dir === 'ltr' && position === 'start' || dir === 'rtl' && position === 'end' ? mini ? collapseOverlayMini : collapseOverlay : mini ? collapseOverlayMini : collapseOverlayRtl;
     var drawerItems = items && h("ul", {
       "class": 'k-drawer-items',
-      role: "listbox",
+      role: "menu",
       attrs: this.v3 ? undefined : {
-        role: "listbox",
+        role: "menu",
         title: "drawer-list",
         "aria-expanded": expanded
       },

package/dist/esm/expansionpanel/ExpansionPanel.js

@@ -3,7 +3,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { getTabIndex, validatePackage, Keys, getDefaultSlots, templateRendering, getListeners, getTemplate } from '@progress/kendo-vue-common';
+import { getTabIndex, validatePackage, Keys, getDefaultSlots, templateRendering, getListeners, getTemplate, Icon } from '@progress/kendo-vue-common';
 import { packageMetadata } from '../package-metadata.js';
 /**
  * @hidden
@@ -38,17 +38,20 @@ var ExpansionPanelVue2 = {
         'k-disabled': disabled
       };
     },
+    expandIconName: function expandIconName() {
+      var _a = this.$props,
+        expanded = _a.expanded,
+        expandIcon = _a.expandIcon,
+        collapseIcon = _a.collapseIcon;
+      return !expanded && !expandIcon ? 'chevron-down' : expanded && !collapseIcon ? 'chevron-up' : '';
+    },
     expandIconClass: function expandIconClass() {
       var _a;
       var _b = this.$props,
         expanded = _b.expanded,
         expandIcon = _b.expandIcon,
         collapseIcon = _b.collapseIcon;
-      return _a = {
-        'k-icon': true,
-        'k-i-chevron-down': !expanded && !expandIcon,
-        'k-i-chevron-up': expanded && !collapseIcon
-      }, _a[expandIcon] = !expanded && Boolean(expandIcon), _a[collapseIcon] = expanded && Boolean(collapseIcon), _a;
+      return _a = {}, _a[expandIcon] = !expanded && Boolean(expandIcon), _a[collapseIcon] = expanded && Boolean(collapseIcon), _a;
     }
   },
   data: function data() {
@@ -132,7 +135,11 @@ var ExpansionPanelVue2 = {
       "class": "k-spacer"
     }), subtitleToRender, h("span", {
       "class": "k-expander-indicator"
-    }, [h("span", {
+    }, [h(Icon, {
+      name: this.expandIconName,
+      attrs: this.v3 ? undefined : {
+        name: this.expandIconName
+      },
       "class": this.expandIconClass
     })])]), defaultSlots]);
   },

package/dist/esm/menu/components/MenuItemArrow.d.ts

@@ -23,15 +23,15 @@ export interface MenuItemArrowProps {
 /**
  * @hidden
  */
-export declare const downArrowClass = "k-i-caret-alt-down";
+export declare const downArrowClass = "caret-alt-down";
 /**
  * @hidden
  */
-export declare const rightArrowClass = "k-i-caret-alt-right";
+export declare const rightArrowClass = "caret-alt-right";
 /**
  * @hidden
  */
-export declare const leftArrowClass = "k-i-caret-alt-left";
+export declare const leftArrowClass = "caret-alt-left";
 /**
  * @hidden
  */

package/dist/esm/menu/components/MenuItemArrow.js

@@ -7,15 +7,15 @@ import { getChildrenPosition } from '../utils/misc.js';
 /**
  * @hidden
  */
-export var downArrowClass = 'k-i-caret-alt-down';
+export var downArrowClass = 'caret-alt-down';
 /**
  * @hidden
  */
-export var rightArrowClass = 'k-i-caret-alt-right';
+export var rightArrowClass = 'caret-alt-right';
 /**
  * @hidden
  */
-export var leftArrowClass = 'k-i-caret-alt-left';
+export var leftArrowClass = 'caret-alt-left';
 /**
  * @hidden
  */
@@ -36,9 +36,13 @@ var MenuItemArrowVue2 = {
   render: function render(createElement) {
     var h = gh || createElement;
     return h("span", {
-      "class": "k-menu-expand-arrow"
+      "class": "k-menu-expand-arrow",
+      "aria-hidden": "true",
+      attrs: this.v3 ? undefined : {
+        "aria-hidden": "true"
+      }
     }, [h("span", {
-      "class": this.getArrowClassName(),
+      "class": this.getArrowName(),
       role: "presentation",
       attrs: this.v3 ? undefined : {
         role: "presentation"
@@ -46,12 +50,9 @@ var MenuItemArrowVue2 = {
     })]);
   },
   methods: {
-    getArrowClassName: function getArrowClassName() {
-      var _a;
+    getArrowName: function getArrowName() {
       var childrenPosition = getChildrenPosition(this.$props.itemId, this.$props.verticalMenu === true, this.$props.dir === 'rtl');
-      return _a = {
-        'k-icon': true
-      }, _a[downArrowClass] = childrenPosition === 'downward', _a[rightArrowClass] = childrenPosition === 'rightward', _a[leftArrowClass] = childrenPosition === 'leftward', _a;
+      return childrenPosition === 'downward' ? downArrowClass : childrenPosition === 'rightward' ? rightArrowClass : childrenPosition === 'leftward' ? leftArrowClass : '';
     }
   }
 };

package/dist/esm/menu/components/MenuItemInternal.js

@@ -4,7 +4,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 var ref = allVue.ref;
-import { classNames, guid, getTemplate, setRef, getRef } from '@progress/kendo-vue-common';
+import { classNames, guid, getTemplate, setRef, getRef, Icon } from '@progress/kendo-vue-common';
 import { Popup } from '@progress/kendo-vue-popup';
 import { shouldOpenItem, isFirstItemFromSiblings } from '../utils/itemsIdsUtils.js';
 import { getPopupSettings, convertBoolDirectionToString, getDOMElementId } from '../utils/misc.js';
@@ -157,11 +157,10 @@ var MenuItemInternalVue2 = {
       })]);
     };
     var renderMenuIconIfApplicable = function renderMenuIconIfApplicable() {
-      return this.$props.item.icon ? h("span", {
-        "class": "k-icon k-i-".concat(this.$props.item.icon),
-        role: "presentation",
+      return this.$props.item.icon ? h(Icon, {
+        name: this.$props.item.icon,
         attrs: this.v3 ? undefined : {
-          role: "presentation"
+          name: this.$props.item.icon
         },
         key: "0"
       }) : null;

package/dist/esm/messages/main.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @hidden
+ */
+export declare const separatorAriaMessage = "drawer.separatorAriaMessage";
+/**
+ * @hidden
+ */
+export declare const splitterPaneLabel = "splitter.splitterPaneLabel";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "drawer.separatorAriaMessage": string;
+    "splitter.splitterPaneLabel": string;
+};

package/dist/esm/messages/main.js

@@ -0,0 +1,16 @@
+var _a;
+/**
+ * @hidden
+ */
+export var separatorAriaMessage = 'drawer.separatorAriaMessage';
+/**
+ * @hidden
+ */
+export var splitterPaneLabel = 'splitter.splitterPaneLabel';
+/**
+ * @hidden
+ */
+export var messages = (_a = {},
+    _a[separatorAriaMessage] = 'Separator',
+    _a[splitterPaneLabel] = 'Splitter pane',
+    _a);

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: 1669966527,
+    publishDate: 1673273592,
     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/panelbar/PanelBarItem.js

@@ -15,7 +15,8 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { classNames, getTemplate } from '@progress/kendo-vue-common';
+import { classNames, getTemplate, Icon } from '@progress/kendo-vue-common';
+import { chevronUpIcon, chevronDownIcon } from '@progress/kendo-svg-icons';
 import { PanelBarGroup } from './PanelBarGroup.js';
 /**
  * @hidden
@@ -93,7 +94,9 @@ var PanelBarItemVue2 = {
       'k-selected': !disabled && selected,
       'k-focus': focused
     }, headerClassName);
-    var panelBarItemArrowClassName = classNames('k-panelbar-toggle', 'k-icon', (_a = {}, _a['k-i-chevron-up'] = expanded && hasContent, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-i-chevron-down'] = !expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
+    var panelBarItemArrowClassName = classNames('k-panelbar-toggle', (_a = {}, _a['k-panelbar-collapse'] = expanded && hasContent, _a['k-panelbar-expand'] = !expanded && hasContent, _a));
+    var itemIconName = expanded ? 'chevron-up' : 'chevron-down';
+    var itemIconSVG = expanded ? chevronUpIcon : chevronDownIcon;
     var iconElement = function iconElement() {
       if (this.imageUrl) {
         return h("img", {
@@ -106,27 +109,28 @@ var PanelBarItemVue2 = {
           src: this.imageUrl
         });
       } else if (icon) {
-        var iconClasses = classNames('k-panelbar-item-icon', 'k-icon', 'k-i-' + icon);
-        return h("span", {
-          role: "presentation",
+        return h(Icon, {
+          name: icon,
           attrs: this.v3 ? undefined : {
-            role: "presentation"
+            name: icon
           },
-          "class": iconClasses
+          "class": 'k-panelbar-item-icon'
         });
       } else if (this.iconClass) {
-        return h("span", {
-          role: "presentation",
-          attrs: this.v3 ? undefined : {
-            role: "presentation"
-          },
+        return h(Icon, {
           "class": 'k-panelbar-item-icon ' + this.iconClass
         });
       }
       return null;
     };
     var iconRender = iconElement.call(this);
-    var arrow = !disabled && (items || content) ? h("span", {
+    var arrow = !disabled && (items || content) ? h(Icon, {
+      name: itemIconName,
+      attrs: this.v3 ? undefined : {
+        name: itemIconName,
+        icon: itemIconSVG
+      },
+      icon: itemIconSVG,
       "class": panelBarItemArrowClassName
     }) : null;
     var group = items || content ? h(PanelBarGroup, {