@progress/kendo-vue-charts 5.1.0 → 5.2.0-dev.202406141341

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-charts',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1718172557,
+    publishDate: 1718371727,
     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/es/sankey/Sankey.d.ts

@@ -40,6 +40,7 @@ export interface SankeyMethods {
  */
 export interface SankeyComponentData {
     currentTooltip: any | null;
+    currentDir: string | undefined;
 }
 /**
  * @hidden

package/dist/es/sankey/Sankey.js

@@ -15,7 +15,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { validatePackage, getRef, setRef, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { validatePackage, getRef, setRef, templateRendering, getListeners, getDir } from '@progress/kendo-vue-common';
 import { packageMetadata } from './../package-metadata';
 import { loadTheme } from './theme-service';
 import { Sankey as SankeyWidget } from '@progress/kendo-charts';
@@ -49,6 +49,8 @@ var SankeyVue2 = {
       required: true
     },
     disableAutoLayout: Boolean,
+    disableKeyboardNavigation: Boolean,
+    dir: String,
     labels: Object,
     legend: Object,
     links: Object,
@@ -62,7 +64,8 @@ var SankeyVue2 = {
   },
   data: function data() {
     return {
-      currentTooltip: null
+      currentTooltip: null,
+      currentDir: undefined
     };
   },
   watch: {
@@ -90,6 +93,12 @@ var SankeyVue2 = {
     disableAutoLayout: function disableAutoLayout() {
       this.update(this);
     },
+    disableKeyboardNavigation: function disableKeyboardNavigation() {
+      this.update(this);
+    },
+    dir: function dir() {
+      this.update(this);
+    },
     tooltip: function tooltip() {
       this.update(this);
     }
@@ -103,6 +112,7 @@ var SankeyVue2 = {
   },
   mounted: function mounted() {
     this.element = getRef(this, 'element');
+    this.currentDir = getDir(this.element, this.$props.dir);
     this.createSankey(this);
   },
   destroyed: !!isV3 ? undefined : function () {
@@ -165,6 +175,7 @@ var SankeyVue2 = {
         title = _a.title,
         legend = _a.legend,
         disableAutoLayout = _a.disableAutoLayout,
+        disableKeyboardNavigation = _a.disableKeyboardNavigation,
         tooltip = _a.tooltip;
       var data = {
         nodes: dataNodes,
@@ -178,6 +189,8 @@ var SankeyVue2 = {
         title: title,
         legend: legend,
         disableAutoLayout: disableAutoLayout,
+        disableKeyboardNavigation: disableKeyboardNavigation,
+        rtl: this.currentDir === 'rtl',
         tooltip: __assign(__assign({}, defaultTooltipProps), tooltip)
       };
     },
@@ -215,20 +228,27 @@ var SankeyVue2 = {
       offset = _a.offset;
     var toolTipNode = templateRendering.call(this, nodeContent, getListeners.call(this));
     var toolTipLink = templateRendering.call(this, linkContent, getListeners.call(this));
+    var dir = this.$props.dir || this.currentDir;
     var rendering = [h("div", {
       ref: setRef(this, 'element'),
       "class": this.sankeyClasses,
-      style: this.$attrs.style
+      style: this.$attrs.style,
+      dir: dir,
+      attrs: this.v3 ? undefined : {
+        dir: dir
+      }
     }), this.currentTooltip && h(Tooltip, {
       tooltipData: this.currentTooltip.tooltipData,
       attrs: this.v3 ? undefined : {
         tooltipData: this.currentTooltip.tooltipData,
         eventData: this.currentTooltip.eventData,
+        dir: dir,
         offset: offset || 12,
         nodeContent: toolTipNode,
         linkContent: toolTipLink
       },
       eventData: this.currentTooltip.eventData,
+      dir: dir,
       offset: offset || 12,
       nodeContent: toolTipNode,
       linkContent: toolTipLink

package/dist/es/sankey/tooltip.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { getRef, setRef, Icon, getTemplate } from '@progress/kendo-vue-common';
-import { arrowRightIcon } from '@progress/kendo-svg-icons';
+import { arrowLeftIcon, arrowRightIcon } from '@progress/kendo-svg-icons';
 import { provideLocalizationService, IntlService } from '@progress/kendo-vue-intl';
 import { messages, tooltipUnitFormat } from './messages';
 var space = 3;
@@ -105,7 +105,8 @@ var NodeTooltipContent = {
   name: 'NodeTooltipContent',
   props: {
     dataItem: Object,
-    nodeValue: Number
+    nodeValue: Number,
+    dir: String
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -143,7 +144,8 @@ var NodeTooltipContent = {
 var LinkTooltipContent = {
   name: 'LinkTooltipContent',
   props: {
-    dataItem: Object
+    dataItem: Object,
+    dir: String
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -154,10 +156,13 @@ var LinkTooltipContent = {
   },
   render: function render(createElement) {
     var h = gh || createElement;
-    var _a = this.$props.dataItem,
-      source = _a.source,
-      target = _a.target,
-      value = _a.value;
+    var _a = this.$props,
+      dir = _a.dir,
+      dataItem = _a.dataItem;
+    var source = dataItem.source,
+      target = dataItem.target,
+      value = dataItem.value;
+    var arrow = dir === 'rtl' ? arrowLeftIcon : arrowRightIcon;
     return h("div", {
       style: tooltipStyles
     }, [h(Square, {
@@ -171,12 +176,12 @@ var LinkTooltipContent = {
         value: source.label.text
       }
     }), h(Icon, {
-      icon: arrowRightIcon,
+      icon: arrow,
       attrs: this.v3 ? undefined : {
-        icon: arrowRightIcon,
-        name: "arrow-right"
+        icon: arrow,
+        name: arrow.name
       },
-      name: "arrow-right"
+      name: arrow.name
     }), h(Square, {
       color: target.color,
       attrs: this.v3 ? undefined : {
@@ -205,6 +210,7 @@ var TooltipVue2 = {
     tooltipData: Object,
     nodeContent: [String, Object, Function],
     linkContent: [String, Object, Function],
+    dir: String,
     offset: Number
   },
   data: function data() {
@@ -273,6 +279,7 @@ var TooltipVue2 = {
     var _a = this.$props,
       nodeContent = _a.nodeContent,
       linkContent = _a.linkContent,
+      dir = _a.dir,
       _b = _a.eventData,
       dataItem = _b.dataItem,
       nodeValue = _b.nodeValue,
@@ -286,9 +293,11 @@ var TooltipVue2 = {
         dataItem: dataItem,
         attrs: this.v3 ? undefined : {
           dataItem: dataItem,
-          nodeValue: nodeValue
+          nodeValue: nodeValue,
+          dir: dir
         },
-        nodeValue: nodeValue
+        nodeValue: nodeValue,
+        dir: dir
       })
     });
     return h("div", {
@@ -298,7 +307,11 @@ var TooltipVue2 = {
         left: this.left,
         visibility: this.visibility
       },
-      "class": "k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip"
+      "class": "k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip",
+      dir: dir,
+      attrs: this.v3 ? undefined : {
+        dir: dir
+      }
     }, [h("div", {
       "class": "k-tooltip-content"
     }, [content])]);

package/dist/es/sankey/types.d.ts

@@ -1,6 +1,6 @@
-import { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyOptions, SankeyTooltipEvent, SankeyTooltip as SankeyTooltipInterface, SankeyEvent as SankeyWidgetEvent } from '@progress/kendo-charts';
+import { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyFocusHighlight, SankeyNodeLabel, SankeyLinkLabel, SankeyOptions, SankeyTooltipEvent, SankeyTooltip as SankeyTooltipInterface, SankeyEvent as SankeyWidgetEvent } from '@progress/kendo-charts';
 import { Legend, Title } from '../common/property-types';
-export { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyOptions };
+export { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyFocusHighlight, SankeyNodeLabel, SankeyLinkLabel, SankeyOptions };
 import { Sankey } from './Sankey';
 /**
  * The KendoReact Sankey event object.
@@ -38,6 +38,10 @@ export interface TooltipContentProps {
      * The value is available only when the hovered element is a node.
      */
     nodeValue?: number;
+    /**
+     * The `dir` attribute of the Sankey tooltip content component.
+     */
+    dir?: string;
 }
 /**
  * Represents the props of the Sankey tooltip component.
@@ -53,6 +57,10 @@ export interface SankeyTooltipProps {
      * The distance between the tooltip and the mouse pointer in pixels.
      */
     offset: number;
+    /**
+     * The `dir` attribute of the Sankey tooltip.
+     */
+    dir?: string;
     /**
      * The tooltip data of the Sankey component.
      */
@@ -132,6 +140,14 @@ export interface SankeyProps {
      * If set to `true`, the Sankey component will not perform automatic layout.
      */
     disableAutoLayout?: boolean;
+    /**
+     * If set to `true`, the Sankey keyboard navigation will be disabled.
+     */
+    disableKeyboardNavigation?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
     /**
      * Fires when the mouse pointer enters a node. Similar to the `mouseenter` event.
      */

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-charts',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1718172557,
+    publishDate: 1718371727,
     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/sankey/Sankey.d.ts

@@ -40,6 +40,7 @@ export interface SankeyMethods {
  */
 export interface SankeyComponentData {
     currentTooltip: any | null;
+    currentDir: string | undefined;
 }
 /**
  * @hidden

package/dist/esm/sankey/Sankey.js

@@ -15,7 +15,7 @@ import * as Vue from 'vue';
 var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
-import { validatePackage, getRef, setRef, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { validatePackage, getRef, setRef, templateRendering, getListeners, getDir } from '@progress/kendo-vue-common';
 import { packageMetadata } from './../package-metadata.js';
 import { loadTheme } from './theme-service.js';
 import { Sankey as SankeyWidget } from '@progress/kendo-charts';
@@ -49,6 +49,8 @@ var SankeyVue2 = {
       required: true
     },
     disableAutoLayout: Boolean,
+    disableKeyboardNavigation: Boolean,
+    dir: String,
     labels: Object,
     legend: Object,
     links: Object,
@@ -62,7 +64,8 @@ var SankeyVue2 = {
   },
   data: function data() {
     return {
-      currentTooltip: null
+      currentTooltip: null,
+      currentDir: undefined
     };
   },
   watch: {
@@ -90,6 +93,12 @@ var SankeyVue2 = {
     disableAutoLayout: function disableAutoLayout() {
       this.update(this);
     },
+    disableKeyboardNavigation: function disableKeyboardNavigation() {
+      this.update(this);
+    },
+    dir: function dir() {
+      this.update(this);
+    },
     tooltip: function tooltip() {
       this.update(this);
     }
@@ -103,6 +112,7 @@ var SankeyVue2 = {
   },
   mounted: function mounted() {
     this.element = getRef(this, 'element');
+    this.currentDir = getDir(this.element, this.$props.dir);
     this.createSankey(this);
   },
   destroyed: !!isV3 ? undefined : function () {
@@ -165,6 +175,7 @@ var SankeyVue2 = {
         title = _a.title,
         legend = _a.legend,
         disableAutoLayout = _a.disableAutoLayout,
+        disableKeyboardNavigation = _a.disableKeyboardNavigation,
         tooltip = _a.tooltip;
       var data = {
         nodes: dataNodes,
@@ -178,6 +189,8 @@ var SankeyVue2 = {
         title: title,
         legend: legend,
         disableAutoLayout: disableAutoLayout,
+        disableKeyboardNavigation: disableKeyboardNavigation,
+        rtl: this.currentDir === 'rtl',
         tooltip: __assign(__assign({}, defaultTooltipProps), tooltip)
       };
     },
@@ -215,20 +228,27 @@ var SankeyVue2 = {
       offset = _a.offset;
     var toolTipNode = templateRendering.call(this, nodeContent, getListeners.call(this));
     var toolTipLink = templateRendering.call(this, linkContent, getListeners.call(this));
+    var dir = this.$props.dir || this.currentDir;
     var rendering = [h("div", {
       ref: setRef(this, 'element'),
       "class": this.sankeyClasses,
-      style: this.$attrs.style
+      style: this.$attrs.style,
+      dir: dir,
+      attrs: this.v3 ? undefined : {
+        dir: dir
+      }
     }), this.currentTooltip && h(Tooltip, {
       tooltipData: this.currentTooltip.tooltipData,
       attrs: this.v3 ? undefined : {
         tooltipData: this.currentTooltip.tooltipData,
         eventData: this.currentTooltip.eventData,
+        dir: dir,
         offset: offset || 12,
         nodeContent: toolTipNode,
         linkContent: toolTipLink
       },
       eventData: this.currentTooltip.eventData,
+      dir: dir,
       offset: offset || 12,
       nodeContent: toolTipNode,
       linkContent: toolTipLink

package/dist/esm/sankey/tooltip.js

@@ -16,7 +16,7 @@ var allVue = Vue;
 var gh = allVue.h;
 var isV3 = allVue.version && allVue.version[0] === '3';
 import { getRef, setRef, Icon, getTemplate } from '@progress/kendo-vue-common';
-import { arrowRightIcon } from '@progress/kendo-svg-icons';
+import { arrowLeftIcon, arrowRightIcon } from '@progress/kendo-svg-icons';
 import { provideLocalizationService, IntlService } from '@progress/kendo-vue-intl';
 import { messages, tooltipUnitFormat } from './messages.js';
 var space = 3;
@@ -105,7 +105,8 @@ var NodeTooltipContent = {
   name: 'NodeTooltipContent',
   props: {
     dataItem: Object,
-    nodeValue: Number
+    nodeValue: Number,
+    dir: String
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -143,7 +144,8 @@ var NodeTooltipContent = {
 var LinkTooltipContent = {
   name: 'LinkTooltipContent',
   props: {
-    dataItem: Object
+    dataItem: Object,
+    dir: String
   },
   // @ts-ignore
   setup: !isV3 ? undefined : function () {
@@ -154,10 +156,13 @@ var LinkTooltipContent = {
   },
   render: function render(createElement) {
     var h = gh || createElement;
-    var _a = this.$props.dataItem,
-      source = _a.source,
-      target = _a.target,
-      value = _a.value;
+    var _a = this.$props,
+      dir = _a.dir,
+      dataItem = _a.dataItem;
+    var source = dataItem.source,
+      target = dataItem.target,
+      value = dataItem.value;
+    var arrow = dir === 'rtl' ? arrowLeftIcon : arrowRightIcon;
     return h("div", {
       style: tooltipStyles
     }, [h(Square, {
@@ -171,12 +176,12 @@ var LinkTooltipContent = {
         value: source.label.text
       }
     }), h(Icon, {
-      icon: arrowRightIcon,
+      icon: arrow,
       attrs: this.v3 ? undefined : {
-        icon: arrowRightIcon,
-        name: "arrow-right"
+        icon: arrow,
+        name: arrow.name
       },
-      name: "arrow-right"
+      name: arrow.name
     }), h(Square, {
       color: target.color,
       attrs: this.v3 ? undefined : {
@@ -205,6 +210,7 @@ var TooltipVue2 = {
     tooltipData: Object,
     nodeContent: [String, Object, Function],
     linkContent: [String, Object, Function],
+    dir: String,
     offset: Number
   },
   data: function data() {
@@ -273,6 +279,7 @@ var TooltipVue2 = {
     var _a = this.$props,
       nodeContent = _a.nodeContent,
       linkContent = _a.linkContent,
+      dir = _a.dir,
       _b = _a.eventData,
       dataItem = _b.dataItem,
       nodeValue = _b.nodeValue,
@@ -286,9 +293,11 @@ var TooltipVue2 = {
         dataItem: dataItem,
         attrs: this.v3 ? undefined : {
           dataItem: dataItem,
-          nodeValue: nodeValue
+          nodeValue: nodeValue,
+          dir: dir
         },
-        nodeValue: nodeValue
+        nodeValue: nodeValue,
+        dir: dir
       })
     });
     return h("div", {
@@ -298,7 +307,11 @@ var TooltipVue2 = {
         left: this.left,
         visibility: this.visibility
       },
-      "class": "k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip"
+      "class": "k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip",
+      dir: dir,
+      attrs: this.v3 ? undefined : {
+        dir: dir
+      }
     }, [h("div", {
       "class": "k-tooltip-content"
     }, [content])]);

package/dist/esm/sankey/types.d.ts

@@ -1,6 +1,6 @@
-import { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyOptions, SankeyTooltipEvent, SankeyTooltip as SankeyTooltipInterface, SankeyEvent as SankeyWidgetEvent } from '@progress/kendo-charts';
+import { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyFocusHighlight, SankeyNodeLabel, SankeyLinkLabel, SankeyOptions, SankeyTooltipEvent, SankeyTooltip as SankeyTooltipInterface, SankeyEvent as SankeyWidgetEvent } from '@progress/kendo-charts';
 import { Legend, Title } from '../common/property-types';
-export { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyOptions };
+export { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyFocusHighlight, SankeyNodeLabel, SankeyLinkLabel, SankeyOptions };
 import { Sankey } from './Sankey';
 /**
  * The KendoReact Sankey event object.
@@ -38,6 +38,10 @@ export interface TooltipContentProps {
      * The value is available only when the hovered element is a node.
      */
     nodeValue?: number;
+    /**
+     * The `dir` attribute of the Sankey tooltip content component.
+     */
+    dir?: string;
 }
 /**
  * Represents the props of the Sankey tooltip component.
@@ -53,6 +57,10 @@ export interface SankeyTooltipProps {
      * The distance between the tooltip and the mouse pointer in pixels.
      */
     offset: number;
+    /**
+     * The `dir` attribute of the Sankey tooltip.
+     */
+    dir?: string;
     /**
      * The tooltip data of the Sankey component.
      */
@@ -132,6 +140,14 @@ export interface SankeyProps {
      * If set to `true`, the Sankey component will not perform automatic layout.
      */
     disableAutoLayout?: boolean;
+    /**
+     * If set to `true`, the Sankey keyboard navigation will be disabled.
+     */
+    disableKeyboardNavigation?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
     /**
      * Fires when the mouse pointer enters a node. Similar to the `mouseenter` event.
      */

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-vue-charts',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1718172557,
+    publishDate: 1718371727,
     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/sankey/Sankey.d.ts

@@ -40,6 +40,7 @@ export interface SankeyMethods {
  */
 export interface SankeyComponentData {
     currentTooltip: any | null;
+    currentDir: string | undefined;
 }
 /**
  * @hidden

package/dist/npm/sankey/Sankey.js

@@ -55,6 +55,8 @@ var SankeyVue2 = {
       required: true
     },
     disableAutoLayout: Boolean,
+    disableKeyboardNavigation: Boolean,
+    dir: String,
     labels: Object,
     legend: Object,
     links: Object,
@@ -68,7 +70,8 @@ var SankeyVue2 = {
   },
   data: function data() {
     return {
-      currentTooltip: null
+      currentTooltip: null,
+      currentDir: undefined
     };
   },
   watch: {
@@ -96,6 +99,12 @@ var SankeyVue2 = {
     disableAutoLayout: function disableAutoLayout() {
       this.update(this);
     },
+    disableKeyboardNavigation: function disableKeyboardNavigation() {
+      this.update(this);
+    },
+    dir: function dir() {
+      this.update(this);
+    },
     tooltip: function tooltip() {
       this.update(this);
     }
@@ -109,6 +118,7 @@ var SankeyVue2 = {
   },
   mounted: function mounted() {
     this.element = (0, kendo_vue_common_1.getRef)(this, 'element');
+    this.currentDir = (0, kendo_vue_common_1.getDir)(this.element, this.$props.dir);
     this.createSankey(this);
   },
   destroyed: !!isV3 ? undefined : function () {
@@ -171,6 +181,7 @@ var SankeyVue2 = {
         title = _a.title,
         legend = _a.legend,
         disableAutoLayout = _a.disableAutoLayout,
+        disableKeyboardNavigation = _a.disableKeyboardNavigation,
         tooltip = _a.tooltip;
       var data = {
         nodes: dataNodes,
@@ -184,6 +195,8 @@ var SankeyVue2 = {
         title: title,
         legend: legend,
         disableAutoLayout: disableAutoLayout,
+        disableKeyboardNavigation: disableKeyboardNavigation,
+        rtl: this.currentDir === 'rtl',
         tooltip: __assign(__assign({}, defaultTooltipProps), tooltip)
       };
     },
@@ -221,20 +234,27 @@ var SankeyVue2 = {
       offset = _a.offset;
     var toolTipNode = kendo_vue_common_1.templateRendering.call(this, nodeContent, kendo_vue_common_1.getListeners.call(this));
     var toolTipLink = kendo_vue_common_1.templateRendering.call(this, linkContent, kendo_vue_common_1.getListeners.call(this));
+    var dir = this.$props.dir || this.currentDir;
     var rendering = [h("div", {
       ref: (0, kendo_vue_common_1.setRef)(this, 'element'),
       "class": this.sankeyClasses,
-      style: this.$attrs.style
+      style: this.$attrs.style,
+      dir: dir,
+      attrs: this.v3 ? undefined : {
+        dir: dir
+      }
     }), this.currentTooltip && h(tooltip_1.Tooltip, {
       tooltipData: this.currentTooltip.tooltipData,
       attrs: this.v3 ? undefined : {
         tooltipData: this.currentTooltip.tooltipData,
         eventData: this.currentTooltip.eventData,
+        dir: dir,
         offset: offset || 12,
         nodeContent: toolTipNode,
         linkContent: toolTipLink
       },
       eventData: this.currentTooltip.eventData,
+      dir: dir,
       offset: offset || 12,
       nodeContent: toolTipNode,
       linkContent: toolTipLink