TabPanel: Add iconPosition option

packages/devextreme-angular/src/common/index.ts

@@ -50,6 +50,7 @@ export {
     StoreType,
     StringLengthRule,
     SubmenuShowMode,
+    TabsIconPosition,
     TextBoxPredefinedButton,
     TextEditorButton,
     TextEditorButtonLocation,

packages/devextreme-angular/src/ui/nested/base/tab-panel-options.ts

@@ -91,6 +91,13 @@ export abstract class DxoTabPanelOptions extends NestedOption {
         this._setOption('hoverStateEnabled', value);
     }
 
+    get iconPosition(): string {
+        return this._getOption('iconPosition');
+    }
+    set iconPosition(value: string) {
+        this._setOption('iconPosition', value);
+    }
+
     get itemHoldTimeout(): number {
         return this._getOption('itemHoldTimeout');
     }

packages/devextreme-angular/src/ui/nested/tab-panel-options.ts

@@ -44,6 +44,7 @@ import { DxiItemComponent } from './item-dxi';
         'height',
         'hint',
         'hoverStateEnabled',
+        'iconPosition',
         'itemHoldTimeout',
         'items',
         'itemTemplate',

packages/devextreme-angular/src/ui/tab-panel/index.ts

@@ -208,6 +208,19 @@ export class DxTabPanelComponent extends DxComponent implements OnDestroy, OnCha
     }
 
 
+    /**
+     * [descr:dxTabPanelOptions.iconPosition]
+
+     */
+    @Input()
+    get iconPosition(): string {
+        return this._getOption('iconPosition');
+    }
+    set iconPosition(value: string) {
+        this._setOption('iconPosition', value);
+    }
+
+
     /**
      * [descr:CollectionWidgetOptions.itemHoldTimeout]
 
@@ -614,6 +627,13 @@ export class DxTabPanelComponent extends DxComponent implements OnDestroy, OnCha
      */
     @Output() hoverStateEnabledChange: EventEmitter<boolean>;
 
+    /**
+
+     * This member supports the internal infrastructure and is not intended to be used directly from your code.
+
+     */
+    @Output() iconPositionChange: EventEmitter<string>;
+
     /**
 
      * This member supports the internal infrastructure and is not intended to be used directly from your code.
@@ -787,6 +807,7 @@ export class DxTabPanelComponent extends DxComponent implements OnDestroy, OnCha
             { emit: 'heightChange' },
             { emit: 'hintChange' },
             { emit: 'hoverStateEnabledChange' },
+            { emit: 'iconPositionChange' },
             { emit: 'itemHoldTimeoutChange' },
             { emit: 'itemsChange' },
             { emit: 'itemTemplateChange' },

packages/devextreme-react/src/common/index.ts

@@ -50,6 +50,7 @@ export {
     StoreType,
     StringLengthRule,
     SubmenuShowMode,
+    TabsIconPosition,
     TextBoxPredefinedButton,
     TextEditorButton,
     TextEditorButtonLocation,

packages/devextreme-react/src/form.ts

@@ -681,6 +681,7 @@ type ITabPanelOptionsProps = React.PropsWithChildren<{
   height?: (() => number | string) | number | string;
   hint?: string;
   hoverStateEnabled?: boolean;
+  iconPosition?: "top" | "end" | "bottom" | "start";
   itemHoldTimeout?: number;
   items?: Array<any | dxTabPanelItem | string>;
   itemTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template;

packages/devextreme-react/src/tab-panel.ts

@@ -93,6 +93,14 @@ class TabPanel<TItem = any, TKey = any> extends BaseComponent<React.PropsWithChi
   ]),
   hint: PropTypes.string,
   hoverStateEnabled: PropTypes.bool,
+  iconPosition: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.oneOf([
+      "top",
+      "end",
+      "bottom",
+      "start"])
+  ]),
   itemHoldTimeout: PropTypes.number,
   items: PropTypes.array,
   loop: PropTypes.bool,

packages/devextreme-vue/src/common/index.ts

@@ -50,6 +50,7 @@ export {
     StoreType,
     StringLengthRule,
     SubmenuShowMode,
+    TabsIconPosition,
     TextBoxPredefinedButton,
     TextEditorButton,
     TextEditorButtonLocation,

packages/devextreme-vue/src/form.ts

@@ -756,6 +756,7 @@ const DxTabPanelOptions = createConfigurationComponent({
     "update:height": null,
     "update:hint": null,
     "update:hoverStateEnabled": null,
+    "update:iconPosition": null,
     "update:itemHoldTimeout": null,
     "update:items": null,
     "update:itemTemplate": null,
@@ -800,6 +801,7 @@ const DxTabPanelOptions = createConfigurationComponent({
     height: [Function, Number, String],
     hint: String,
     hoverStateEnabled: Boolean,
+    iconPosition: String,
     itemHoldTimeout: Number,
     items: Array,
     itemTemplate: {},

packages/devextreme-vue/src/tab-panel.ts

@@ -15,6 +15,7 @@ type AccessibleOptions = Pick<Properties,
   "height" |
   "hint" |
   "hoverStateEnabled" |
+  "iconPosition" |
   "itemHoldTimeout" |
   "items" |
   "itemTemplate" |
@@ -63,6 +64,7 @@ const DxTabPanel = createComponent({
     height: [Function, Number, String],
     hint: String,
     hoverStateEnabled: Boolean,
+    iconPosition: String,
     itemHoldTimeout: Number,
     items: Array,
     itemTemplate: {},
@@ -108,6 +110,7 @@ const DxTabPanel = createComponent({
     "update:height": null,
     "update:hint": null,
     "update:hoverStateEnabled": null,
+    "update:iconPosition": null,
     "update:itemHoldTimeout": null,
     "update:items": null,
     "update:itemTemplate": null,

packages/devextreme/js/common.d.ts

@@ -704,6 +704,12 @@ export type StringLengthRule = {
  */
 export type SubmenuShowMode = 'onClick' | 'onHover';
 
+/**
+ * @public
+ * @namespace DevExpress.common
+ */
+export type TabsIconPosition = 'top' | 'end' | 'bottom' | 'start';
+
 /**
  * @public
  * @namespace DevExpress.common

packages/devextreme/js/ui/tab_panel.d.ts

@@ -18,6 +18,7 @@ import {
 
 import {
     Position,
+    TabsIconPosition,
 } from '../common';
 
 import CollectionWidget, {
@@ -29,6 +30,11 @@ import {
     dxMultiViewBaseOptions,
 } from './multi_view';
 
+export {
+    Position,
+    TabsIconPosition,
+};
+
 type ItemLike = string | Item | any;
 
 /**
@@ -179,6 +185,12 @@ export interface dxTabPanelOptions<
      * @public
      */
     itemTitleTemplate?: template | ((itemData: TItem, itemIndex: number, itemElement: DxElement) => string | UserDefinedElement);
+    /**
+     * @docid
+     * @default 'start'
+     * @public
+     */
+    iconPosition?: TabsIconPosition;
     /**
      * @docid
      * @type Array<string | dxTabPanelItem | any>

packages/devextreme/js/ui/tab_panel.js

@@ -40,6 +40,13 @@ const TABS_ORIENTATION = {
     vertical: 'vertical',
 };
 
+const ICON_POSITION = {
+    top: 'top',
+    end: 'end',
+    bottom: 'bottom',
+    start: 'start',
+};
+
 const TabPanel = MultiView.inherit({
 
     _getDefaultOptions: function() {
@@ -58,6 +65,8 @@ const TabPanel = MultiView.inherit({
 
             tabsPosition: TABS_POSITION.top,
 
+            iconPosition: ICON_POSITION.start,
+
             onTitleClick: null,
 
             onTitleHold: null,
@@ -237,6 +246,7 @@ const TabPanel = MultiView.inherit({
                 }
             }).bind(this),
             orientation: this._getTabsOrientation(),
+            iconPosition: this.option('iconPosition'),
             _itemAttributes: {
                 class: TABPANEL_TABS_ITEM_CLASS,
             },
@@ -289,6 +299,10 @@ const TabPanel = MultiView.inherit({
         this._tabs.option('orientation', orientation);
     },
 
+    _updateTabsIconPosition(iconPosition) {
+        this._tabs.option({ iconPosition });
+    },
+
     _toggleWrapperFocusedClass(isFocused) {
         this._toggleFocusClass(isFocused, this._$wrapper);
     },
@@ -434,6 +448,9 @@ const TabPanel = MultiView.inherit({
                 this._toggleTabPanelTabsPositionClass();
                 this._updateTabsOrientation();
                 break;
+            case 'iconPosition':
+                this._updateTabsIconPosition(value);
+                break;
             default:
                 this.callBase(args);
         }

packages/devextreme/js/ui/tab_panel_types.d.ts

@@ -1,4 +1,6 @@
 export {
+  Position,
+  TabsIconPosition,
   ContentReadyEvent,
   DisposingEvent,
   InitializedEvent,

packages/devextreme/js/ui/tabs.d.ts

@@ -17,21 +17,17 @@ import CollectionWidget, {
 import {
     Orientation,
     SingleOrMultiple,
+    TabsIconPosition,
 } from '../common';
 
 export type ItemLike = string | Item | any;
 
 export {
     SingleOrMultiple,
     Orientation,
+    TabsIconPosition,
 };
 
-/**
- * @public
- * @namespace DevExpress.ui.dxTabs
- */
-export type IconPosition = 'top' | 'end' | 'bottom' | 'start';
-
 /**
  * @docid _ui_tabs_ContentReadyEvent
  * @public
@@ -149,7 +145,7 @@ export interface dxTabsBaseOptions<
      * @default 'start'
      * @public
      */
-    iconPosition?: IconPosition;
+    iconPosition?: TabsIconPosition;
     /**
      * @docid dxTabsOptions.items
      * @type Array<string | dxTabsItem | any>

packages/devextreme/js/ui/tabs.js

@@ -30,17 +30,6 @@ const TABS_WRAPPER_CLASS = 'dx-tabs-wrapper';
 const TABS_STRETCHED_CLASS = 'dx-tabs-stretched';
 const TABS_SCROLLABLE_CLASS = 'dx-tabs-scrollable';
 const TABS_NAV_BUTTONS_CLASS = 'dx-tabs-nav-buttons';
-const TABS_ORIENTATION_CLASS = {
-    vertical: 'dx-tabs-vertical',
-    horizontal: 'dx-tabs-horizontal',
-};
-const TABS_ICON_POSITION_CLASS = {
-    top: 'dx-tabs-icon-position-top',
-    end: 'dx-tabs-icon-position-end',
-    bottom: 'dx-tabs-icon-position-bottom',
-    start: 'dx-tabs-icon-position-start',
-};
-
 const OVERFLOW_HIDDEN_CLASS = 'dx-overflow-hidden';
 
 const TABS_ITEM_CLASS = 'dx-tab';
@@ -56,6 +45,18 @@ const STATE_DISABLED_CLASS = 'dx-state-disabled';
 const FOCUSED_DISABLED_NEXT_TAB_CLASS = 'dx-focused-disabled-next-tab';
 const FOCUSED_DISABLED_PREV_TAB_CLASS = 'dx-focused-disabled-prev-tab';
 
+const TABS_ORIENTATION_CLASS = {
+    vertical: 'dx-tabs-vertical',
+    horizontal: 'dx-tabs-horizontal',
+};
+
+const TABS_ICON_POSITION_CLASS = {
+    top: 'dx-tabs-icon-position-top',
+    end: 'dx-tabs-icon-position-end',
+    bottom: 'dx-tabs-icon-position-bottom',
+    start: 'dx-tabs-icon-position-start',
+};
+
 const TABS_ITEM_DATA_KEY = 'dxTabData';
 
 const BUTTON_NEXT_ICON = 'chevronnext';

packages/devextreme/js/ui/tabs_types.d.ts

@@ -1,7 +1,7 @@
 export {
   SingleOrMultiple,
   Orientation,
-  IconPosition,
+  TabsIconPosition,
   ContentReadyEvent,
   DisposingEvent,
   InitializedEvent,

packages/devextreme/testing/tests/DevExpress.ui.widgets/tabPanel.tests.js

@@ -196,6 +196,14 @@ QUnit.module('options', {
         assert.strictEqual(this.tabWidgetInstance.option('orientation'), TABS_ORIENTATION.vertical, 'option <orientation> of nested tabs widget successfully changed');
     });
 
+    QUnit.test('iconPosition option should be passed to tabs correctly', function(assert) {
+        assert.strictEqual(this.tabWidgetInstance.option('iconPosition'), 'start', 'option <iconPosition> successfully passed to nested tabs widget');
+
+        this.tabPanelInstance.option('iconPosition', 'top');
+
+        assert.strictEqual(this.tabWidgetInstance.option('iconPosition'), 'top', 'option <iconPosition> of nested tabs widget successfully changed');
+    });
+
     QUnit.test('dataSource option test', function(assert) {
         assert.expect(2);
 

packages/devextreme/ts/dx.all.d.ts

@@ -1763,6 +1763,7 @@ declare module DevExpress.common {
     type: 'stringLength';
   };
   export type SubmenuShowMode = 'onClick' | 'onHover';
+  export type TabsIconPosition = 'top' | 'end' | 'bottom' | 'start';
   export type TextBoxPredefinedButton = 'clear';
 
   /**
@@ -25534,6 +25535,10 @@ declare module DevExpress.ui {
           itemIndex: number,
           itemElement: DevExpress.core.DxElement
         ) => string | DevExpress.core.UserDefinedElement);
+    /**
+     * [descr:dxTabPanelOptions.iconPosition]
+     */
+    iconPosition?: DevExpress.common.TabsIconPosition;
     /**
      * [descr:dxTabPanelOptions.items]
      */
@@ -25717,7 +25722,7 @@ declare module DevExpress.ui {
     /**
      * [descr:dxTabsOptions.iconPosition]
      */
-    iconPosition?: DevExpress.ui.dxTabs.IconPosition;
+    iconPosition?: DevExpress.common.TabsIconPosition;
     /**
      * [descr:dxTabsOptions.items]
      */
@@ -30025,7 +30030,6 @@ declare module DevExpress.ui.dxTabPanel {
   export type Item = dxTabPanelItem;
 }
 declare module DevExpress.ui.dxTabs {
-  export type IconPosition = 'top' | 'end' | 'bottom' | 'start';
   export type Item = dxTabsItem;
 }
 declare module DevExpress.ui.dxTileView {

packages/vue2-strategy/src/common/index.ts

@@ -50,6 +50,7 @@ export {
     StoreType,
     StringLengthRule,
     SubmenuShowMode,
+    TabsIconPosition,
     TextBoxPredefinedButton,
     TextEditorButton,
     TextEditorButtonLocation,