@3t-transform/threeteeui 0.0.4 → 0.0.5

package/dist/esm/toolbar-b147a3aa.js

@@ -0,0 +1,862 @@
+import { a6 as ListBase, aO as each, $, d as registerComponent, W as Widget, e as extend, S as devices, L as isMaterial, b4 as ChildDefaultTemplate, aa as Button, ae as Popover, as as getHeight, a7 as setHeight, b2 as DataHelperMixin, K as getWindow, aZ as ListSearch, aw as domAdapter, b0 as compileGetter, b5 as ToolbarBase, b6 as deferRender, Y as getWidth, g as getOuterWidth, b7 as grep } from './ui.popover-0c8f8d79.js';
+
+/**
+ * DevExtreme (esm/ui/toolbar/ui.toolbar.menu.js)
+ * Version: 22.1.6
+ * Build date: Tue Oct 18 2022
+ *
+ * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
+ * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
+ */
+var TOOLBAR_MENU_ACTION_CLASS = "dx-toolbar-menu-action";
+var TOOLBAR_HIDDEN_BUTTON_CLASS = "dx-toolbar-hidden-button";
+var TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS = "dx-toolbar-hidden-button-group";
+var TOOLBAR_MENU_SECTION_CLASS = "dx-toolbar-menu-section";
+var TOOLBAR_MENU_LAST_SECTION_CLASS = "dx-toolbar-menu-last-section";
+var ToolbarMenu = ListBase.inherit({
+    _activeStateUnit: "." + TOOLBAR_MENU_ACTION_CLASS,
+    _initMarkup: function() {
+        this._renderSections();
+        this.callBase();
+    },
+    _getSections: function() {
+        return this._itemContainer().children()
+    },
+    _itemElements: function() {
+        return this._getSections().children(this._itemSelector())
+    },
+    _renderSections: function() {
+        var that = this;
+        var $container = this._itemContainer();
+        each(["before", "center", "after", "menu"], (function() {
+            var sectionName = "_$" + this + "Section";
+            var $section = that[sectionName];
+            if (!$section) {
+                that[sectionName] = $section = $("<div>").addClass(TOOLBAR_MENU_SECTION_CLASS);
+            }
+            $section.appendTo($container);
+        }));
+    },
+    _renderItems: function() {
+        this.callBase.apply(this, arguments);
+        this._updateSections();
+    },
+    _updateSections: function() {
+        var $sections = this.$element().find("." + TOOLBAR_MENU_SECTION_CLASS);
+        $sections.removeClass(TOOLBAR_MENU_LAST_SECTION_CLASS);
+        $sections.not(":empty").eq(-1).addClass(TOOLBAR_MENU_LAST_SECTION_CLASS);
+    },
+    _renderItem: function(index, item, itemContainer, $after) {
+        var location = item.location || "menu";
+        var $container = this["_$" + location + "Section"];
+        var itemElement = this.callBase(index, item, $container, $after);
+        if (this._getItemTemplateName({
+                itemData: item
+            })) {
+            itemElement.addClass("dx-toolbar-menu-custom");
+        }
+        if ("menu" === location || "dxButton" === item.widget || "dxButtonGroup" === item.widget || item.isAction) {
+            itemElement.addClass(TOOLBAR_MENU_ACTION_CLASS);
+        }
+        if ("dxButton" === item.widget) {
+            itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_CLASS);
+        }
+        if ("dxButtonGroup" === item.widget) {
+            itemElement.addClass(TOOLBAR_HIDDEN_BUTTON_GROUP_CLASS);
+        }
+        itemElement.addClass(item.cssClass);
+        return itemElement
+    },
+    _getItemTemplateName: function(args) {
+        var template = this.callBase(args);
+        var data = args.itemData;
+        var menuTemplate = data && data.menuItemTemplate;
+        return menuTemplate || template
+    },
+    _itemClickHandler: function(e, args, config) {
+        if ($(e.target).closest("." + TOOLBAR_MENU_ACTION_CLASS).length) {
+            this.callBase(e, args, config);
+        }
+    },
+    _clean: function() {
+        this._getSections().empty();
+        this.callBase();
+    }
+});
+registerComponent("dxToolbarMenu", ToolbarMenu);
+
+/**
+ * DevExtreme (esm/ui/toolbar/ui.toolbar.utils.js)
+ * Version: 22.1.6
+ * Build date: Tue Oct 18 2022
+ *
+ * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
+ * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
+ */
+var BUTTON_GROUP_CLASS = "dx-buttongroup";
+var TOOLBAR_ITEMS = ["dxAutocomplete", "dxButton", "dxCheckBox", "dxDateBox", "dxMenu", "dxSelectBox", "dxTabs", "dxTextBox", "dxButtonGroup", "dxDropDownButton"];
+var getItemInstance = function($element) {
+    var itemData = $element.data && $element.data();
+    var dxComponents = itemData && itemData.dxComponents;
+    var widgetName = dxComponents && dxComponents[0];
+    return widgetName && itemData[widgetName]
+};
+function toggleItemFocusableElementTabIndex(context, item) {
+    var _itemData$options;
+    if (!context) {
+        return
+    }
+    var $item = context._findItemElementByItem(item);
+    if (!$item.length) {
+        return
+    }
+    var itemData = context._getItemData($item);
+    var isItemNotFocusable = !!(null !== (_itemData$options = itemData.options) && void 0 !== _itemData$options && _itemData$options.disabled || itemData.disabled || context.option("disabled"));
+    var {
+        widget: widget
+    } = itemData;
+    if (widget && -1 !== TOOLBAR_ITEMS.indexOf(widget)) {
+        var $widget = $item.find(widget.toLowerCase().replace("dx", ".dx-"));
+        if ($widget.length) {
+            var _itemInstance$_focusT, _itemData$options2;
+            var itemInstance = getItemInstance($widget);
+            var $focusTarget = "dxDropDownButton" === widget ? itemInstance._focusTarget().find(".".concat(BUTTON_GROUP_CLASS)) : (null === itemInstance || void 0 === itemInstance ? void 0 : null === (_itemInstance$_focusT = itemInstance._focusTarget) || void 0 === _itemInstance$_focusT ? void 0 : _itemInstance$_focusT.call(itemInstance)) || $(itemInstance.element());
+            var tabIndex = null === (_itemData$options2 = itemData.options) || void 0 === _itemData$options2 ? void 0 : _itemData$options2.tabIndex;
+            if (isItemNotFocusable) {
+                $focusTarget.attr("tabIndex", -1);
+            } else {
+                $focusTarget.attr("tabIndex", tabIndex ? tabIndex : 0);
+            }
+        }
+    }
+}
+
+/**
+ * DevExtreme (esm/ui/drop_down_menu.js)
+ * Version: 22.1.6
+ * Build date: Tue Oct 18 2022
+ *
+ * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
+ * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
+ */
+var window = getWindow();
+var DROP_DOWN_MENU_CLASS = "dx-dropdownmenu";
+var DROP_DOWN_MENU_POPUP_CLASS = "dx-dropdownmenu-popup";
+var DROP_DOWN_MENU_POPUP_WRAPPER_CLASS = "dx-dropdownmenu-popup-wrapper";
+var DROP_DOWN_MENU_LIST_CLASS = "dx-dropdownmenu-list";
+var DROP_DOWN_MENU_BUTTON_CLASS = "dx-dropdownmenu-button";
+var POPUP_OPTION_MAP = {
+    popupWidth: "width",
+    popupHeight: "height",
+    popupMaxHeight: "maxHeight",
+    popupAutoResizeEnabled: "autoResizeEnabled"
+};
+var BUTTON_OPTION_MAP = {
+    buttonIcon: "icon",
+    buttonText: "text",
+    buttonWidth: "width",
+    buttonHeight: "height",
+    buttonTemplate: "template"
+};
+var DropDownMenu = Widget.inherit({
+    _supportedKeys: function() {
+        var extension = {};
+        if (!this.option("opened") || !this._list.option("focusedElement")) {
+            extension = this._button._supportedKeys();
+        }
+        return extend(this.callBase(), extension, {
+            tab: function() {
+                this._popup && this._popup.hide();
+            }
+        })
+    },
+    _getDefaultOptions: function() {
+        return extend(this.callBase(), {
+            items: [],
+            onItemClick: null,
+            dataSource: null,
+            itemTemplate: "item",
+            buttonText: "",
+            buttonIcon: "overflow",
+            buttonWidth: void 0,
+            buttonHeight: void 0,
+            buttonTemplate: "content",
+            onButtonClick: null,
+            usePopover: false,
+            popupWidth: "auto",
+            popupHeight: "auto",
+            activeStateEnabled: true,
+            hoverStateEnabled: true,
+            opened: false,
+            selectionMode: "none",
+            selectedItemKeys: [],
+            deferRendering: false,
+            popupPosition: {
+                my: "top center",
+                at: "bottom center",
+                collision: "fit flip",
+                offset: {
+                    v: 1
+                }
+            },
+            popupAnimation: void 0,
+            onItemRendered: null,
+            menuWidget: ListSearch,
+            popupMaxHeight: void 0,
+            closeOnClick: true,
+            useInkRipple: false,
+            container: void 0,
+            popupAutoResizeEnabled: false
+        })
+    },
+    _defaultOptionsRules: function() {
+        return this.callBase().concat([{
+            device: {
+                platform: "ios"
+            },
+            options: {
+                usePopover: true
+            }
+        }, {
+            device: {
+                platform: "generic"
+            },
+            options: {
+                popupPosition: {
+                    offset: {
+                        v: 4
+                    }
+                }
+            }
+        }, {
+            device: function() {
+                return "desktop" === devices.real().deviceType && !devices.isSimulator()
+            },
+            options: {
+                focusStateEnabled: true
+            }
+        }, {
+            device: {
+                platform: "android"
+            },
+            options: {
+                popupPosition: {
+                    my: "top " + (this.option("rtlEnabled") ? "left" : "right"),
+                    at: "top " + (this.option("rtlEnabled") ? "left" : "right"),
+                    collision: "flipfit"
+                },
+                popupAnimation: {
+                    show: {
+                        type: "pop",
+                        duration: 200,
+                        from: {
+                            scale: 0
+                        },
+                        to: {
+                            scale: 1
+                        }
+                    },
+                    hide: {
+                        type: "pop",
+                        duration: 200,
+                        from: {
+                            scale: 1
+                        },
+                        to: {
+                            scale: 0
+                        }
+                    }
+                }
+            }
+        }, {
+            device: function() {
+                return isMaterial()
+            },
+            options: {
+                useInkRipple: true
+            }
+        }])
+    },
+    _initOptions: function(options) {
+        if ("android" === devices.current().platform) {
+            if (!options.popupPosition) {
+                options.popupPosition = {
+                    at: (options.usePopover ? "bottom " : "top ") + (options.rtlEnabled ? "left" : "right")
+                };
+            }
+        }
+        this.callBase(options);
+    },
+    _dataSourceOptions: function() {
+        return {
+            paginate: false
+        }
+    },
+    _init: function() {
+        this.callBase();
+        this.$element().addClass(DROP_DOWN_MENU_CLASS);
+        this._initDataSource();
+        this._initItemClickAction();
+        this._initButtonClickAction();
+    },
+    _initItemClickAction: function() {
+        this._itemClickAction = this._createActionByOption("onItemClick");
+    },
+    _initButtonClickAction: function() {
+        this._buttonClickAction = this._createActionByOption("onButtonClick");
+    },
+    _initTemplates: function() {
+        this._templateManager.addDefaultTemplates({
+            content: new ChildDefaultTemplate("content")
+        });
+        this.callBase();
+    },
+    _initMarkup: function() {
+        this._renderButton();
+        this.callBase();
+    },
+    _render: function() {
+        this.callBase();
+        this.setAria({
+            role: "menubar",
+            haspopup: true,
+            expanded: this.option("opened")
+        });
+    },
+    _renderContentImpl: function() {
+        if (this.option("opened")) {
+            this._renderPopup();
+        }
+    },
+    _clean: function() {
+        this._cleanFocusState();
+        if (this._popup) {
+            this._popup.$element().remove();
+            delete this._$popup;
+        }
+    },
+    _renderButton: function() {
+        var $button = this.$element().addClass(DROP_DOWN_MENU_BUTTON_CLASS);
+        var config = this._buttonOptions();
+        this._button = this._createComponent($button, Button, config);
+    },
+    _toggleActiveState: function($element, value, e) {
+        this._button._toggleActiveState($element, value, e);
+    },
+    _buttonOptions: function() {
+        return {
+            text: this.option("buttonText"),
+            icon: this.option("buttonIcon"),
+            width: this.option("buttonWidth"),
+            height: this.option("buttonHeight"),
+            useInkRipple: this.option("useInkRipple"),
+            template: this.option("buttonTemplate"),
+            hoverStateEnabled: false,
+            focusStateEnabled: false,
+            onClick: function(e) {
+                this.option("opened", !this.option("opened"));
+                this._buttonClickAction(e);
+            }.bind(this)
+        }
+    },
+    _toggleMenuVisibility: function(opened) {
+        var state = void 0 === opened ? !this._popup.option("visible") : opened;
+        if (opened) {
+            this._renderPopup();
+        }
+        this._popup.toggle(state);
+        this.setAria("expanded", state);
+    },
+    _renderPopup: function() {
+        if (this._$popup) {
+            return
+        }
+        var $popup = this._$popup = $("<div>").appendTo(this.$element());
+        var config = this._popupOptions();
+        this._popup = this._createComponent($popup, Popover, config);
+    },
+    _popupOptions: function() {
+        var usePopup = !this.option("usePopover");
+        return {
+            onInitialized: function(args) {
+                args.component.$wrapper().addClass(DROP_DOWN_MENU_POPUP_WRAPPER_CLASS).toggleClass(DROP_DOWN_MENU_POPUP_CLASS, usePopup);
+            },
+            deferRendering: false,
+            contentTemplate: function(contentElement) {
+                this._renderList(contentElement);
+            }.bind(this),
+            position: this.option("popupPosition"),
+            animation: this.option("popupAnimation"),
+            onOptionChanged: function(args) {
+                if ("visible" === args.name) {
+                    this.option("opened", args.value);
+                }
+            }.bind(this),
+            target: this.$element(),
+            height: this.option("popupHeight"),
+            width: this.option("popupWidth"),
+            maxHeight: this.option("popupMaxHeight"),
+            container: this.option("container"),
+            autoResizeEnabled: this.option("popupAutoResizeEnabled")
+        }
+    },
+    _renderList: function(contentElement) {
+        var $content = $(contentElement);
+        var listConfig = this._listOptions();
+        $content.addClass(DROP_DOWN_MENU_LIST_CLASS);
+        this._list = this._createComponent($content, this.option("menuWidget"), listConfig);
+        this._list._getAriaTarget = function() {
+            return this.$element()
+        }.bind(this);
+        this._setListDataSource();
+        var listMaxHeight = .5 * getHeight(window);
+        if (getHeight($content) > listMaxHeight) {
+            setHeight($content, listMaxHeight);
+        }
+    },
+    _itemOptionChanged: function(item, property, value) {
+        var _this$_list;
+        null === (_this$_list = this._list) || void 0 === _this$_list ? void 0 : _this$_list._itemOptionChanged(item, property, value);
+        toggleItemFocusableElementTabIndex(this._list, item);
+    },
+    _listOptions: function() {
+        return {
+            pageLoadMode: "scrollBottom",
+            indicateLoading: false,
+            noDataText: "",
+            selectionMode: this.option("selectionMode"),
+            selectedItemKeys: this.option("selectedItemKeys"),
+            itemTemplate: this.option("itemTemplate"),
+            onItemClick: function(e) {
+                if (this.option("closeOnClick")) {
+                    this.option("opened", false);
+                }
+                this._itemClickAction(e);
+            }.bind(this),
+            tabIndex: -1,
+            focusStateEnabled: this.option("focusStateEnabled"),
+            activeStateEnabled: this.option("activeStateEnabled"),
+            onItemRendered: this.option("onItemRendered"),
+            _itemAttributes: {
+                role: "menuitem"
+            }
+        }
+    },
+    _setListDataSource: function() {
+        if (this._list) {
+            this._list.option("dataSource", this._dataSource || this.option("items"));
+        }
+        delete this._deferRendering;
+    },
+    _getKeyboardListeners() {
+        return this.callBase().concat([this._list])
+    },
+    _toggleVisibility: function(visible) {
+        this.callBase(visible);
+        this._button.option("visible", visible);
+    },
+    _optionChanged: function(args) {
+        var name = args.name;
+        var value = args.value;
+        switch (name) {
+            case "items":
+            case "dataSource":
+                if (this.option("deferRendering") && !this.option("opened")) {
+                    this._deferRendering = true;
+                } else {
+                    this._refreshDataSource();
+                    this._setListDataSource();
+                }
+                break;
+            case "itemTemplate":
+                if (this._list) {
+                    this._list.option(name, this._getTemplate(value));
+                }
+                break;
+            case "onItemClick":
+                this._initItemClickAction();
+                break;
+            case "onButtonClick":
+                this._buttonClickAction();
+                break;
+            case "buttonIcon":
+            case "buttonText":
+            case "buttonWidth":
+            case "buttonHeight":
+            case "buttonTemplate":
+                this._button.option(BUTTON_OPTION_MAP[name], value);
+                this._renderPopup();
+                break;
+            case "popupWidth":
+            case "popupHeight":
+            case "popupMaxHeight":
+            case "popupAutoResizeEnabled":
+                this._popup.option(POPUP_OPTION_MAP[name], value);
+                break;
+            case "usePopover":
+            case "menuWidget":
+            case "useInkRipple":
+                this._invalidate();
+                break;
+            case "focusStateEnabled":
+            case "activeStateEnabled":
+                if (this._list) {
+                    this._list.option(name, value);
+                }
+                this.callBase(args);
+                break;
+            case "selectionMode":
+            case "selectedItemKeys":
+            case "onItemRendered":
+                if (this._list) {
+                    this._list.option(name, value);
+                }
+                break;
+            case "opened":
+                if (this._deferRendering) {
+                    this._refreshDataSource();
+                    this._setListDataSource();
+                }
+                this._toggleMenuVisibility(value);
+                this._updateFocusableItemsTabIndex();
+                break;
+            case "deferRendering":
+            case "popupPosition":
+            case "closeOnClick":
+                break;
+            case "container":
+                this._popup && this._popup.option(args.name, args.value);
+                break;
+            case "disabled":
+                if (this._list) {
+                    this._updateFocusableItemsTabIndex();
+                }
+                break;
+            default:
+                this.callBase(args);
+        }
+    },
+    _updateFocusableItemsTabIndex() {
+        this.option("items").forEach(item => toggleItemFocusableElementTabIndex(this._list, item));
+    },
+    open: function() {
+        this.option("opened", true);
+    },
+    close: function() {
+        this.option("opened", false);
+    }
+}).include(DataHelperMixin);
+registerComponent("dxDropDownMenu", DropDownMenu);
+
+/**
+ * DevExtreme (esm/ui/toolbar/ui.toolbar.drop_down_menu.js)
+ * Version: 22.1.6
+ * Build date: Tue Oct 18 2022
+ *
+ * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
+ * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
+ */
+var MENU_INVISIBLE_CLASS = "dx-state-invisible";
+var TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS = "dx-toolbar-menu-container";
+var POPOVER_BOUNDARY_OFFSET = 10;
+class ToolbarDropDownMenu {
+    constructor(toolbar) {
+        this._toolbar = toolbar;
+    }
+    render() {
+        if (!this._hasVisibleMenuItems()) {
+            return
+        }
+        this._renderMenuButtonContainer();
+        var $menu = $("<div>").appendTo(this._dropDownMenuContainer());
+        this._dropDownMenu = this._toolbar._createComponent($menu, DropDownMenu, this._dropDownMenuOptions());
+        this.renderMenuItems();
+    }
+    renderMenuItems() {
+        if (!this._dropDownMenu) {
+            this.render();
+        }
+        this._dropDownMenu && this._dropDownMenu.option("items", this._getMenuItems());
+        if (this._dropDownMenu && !this._dropDownMenu.option("items").length) {
+            this._dropDownMenu.close();
+        }
+    }
+    _renderMenuButtonContainer() {
+        var $afterSection = this._toolbar._$afterSection;
+        this._$menuButtonContainer = $("<div>").appendTo($afterSection).addClass(this._toolbar._buttonClass()).addClass(TOOLBAR_DROP_DOWN_MENU_CONTAINER_CLASS);
+    }
+    _getMenuItemTemplate() {
+        return this._toolbar._getTemplateByOption("menuItemTemplate")
+    }
+    _dropDownMenuOptions() {
+        var itemClickAction = this._toolbar._createActionByOption("onItemClick");
+        var topAndBottomOffset = 2 * POPOVER_BOUNDARY_OFFSET;
+        return {
+            disabled: this._toolbar.option("disabled"),
+            itemTemplate: this._getMenuItemTemplate.bind(this),
+            onItemClick: function(e) {
+                itemClickAction(e);
+            }.bind(this),
+            deferRendering: true,
+            container: this._toolbar.option("menuContainer"),
+            popupMaxHeight: "android" === devices.current().platform ? domAdapter.getDocumentElement().clientHeight - topAndBottomOffset : void 0,
+            menuWidget: ToolbarMenu,
+            onOptionChanged: _ref => {
+                var {
+                    name: name,
+                    value: value
+                } = _ref;
+                if ("opened" === name) {
+                    this._toolbar.option("overflowMenuVisible", value);
+                }
+                if ("items" === name) {
+                    this._updateMenuVisibility(value);
+                }
+            },
+            popupPosition: {
+                at: "bottom right",
+                my: "top right"
+            }
+        }
+    }
+    _updateMenuVisibility(menuItems) {
+        var items = menuItems || this._getMenuItems();
+        var isMenuVisible = items.length && this._hasVisibleMenuItems(items);
+        this._toggleMenuVisibility(isMenuVisible);
+    }
+    _getMenuItems() {
+        return this._toolbar._getMenuItems()
+    }
+    _hasVisibleMenuItems(items) {
+        var menuItems = items || this._toolbar.option("items");
+        var result = false;
+        var optionGetter = compileGetter("visible");
+        var overflowGetter = compileGetter("locateInMenu");
+        each(menuItems, (function(index, item) {
+            var itemVisible = optionGetter(item, {
+                functionsAsIs: true
+            });
+            var itemOverflow = overflowGetter(item, {
+                functionsAsIs: true
+            });
+            if (false !== itemVisible && ("auto" === itemOverflow || "always" === itemOverflow) || "menu" === item.location) {
+                result = true;
+            }
+        }));
+        return result
+    }
+    _toggleMenuVisibility(value) {
+        if (!this._dropDownMenuContainer()) {
+            return
+        }
+        this._dropDownMenuContainer().toggleClass(MENU_INVISIBLE_CLASS, !value);
+    }
+    _dropDownMenuContainer() {
+        return this._$menuButtonContainer
+    }
+    widgetOption(name, value) {
+        this._dropDownMenu && this._dropDownMenu.option(name, value);
+    }
+    itemOption(item, property, value) {
+        if ("disabled" === property || "options.disabled" === property) {
+            var _this$_dropDownMenu;
+            null === (_this$_dropDownMenu = this._dropDownMenu) || void 0 === _this$_dropDownMenu ? void 0 : _this$_dropDownMenu._itemOptionChanged(item, property, value);
+        } else {
+            this.renderMenuItems();
+        }
+    }
+}
+
+/**
+ * DevExtreme (esm/ui/toolbar.js)
+ * Version: 22.1.6
+ * Build date: Tue Oct 18 2022
+ *
+ * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
+ * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
+ */
+var TOOLBAR_AUTO_HIDE_ITEM_CLASS = "dx-toolbar-item-auto-hide";
+var TOOLBAR_AUTO_HIDE_TEXT_CLASS = "dx-toolbar-text-auto-hide";
+var TOOLBAR_HIDDEN_ITEM = "dx-toolbar-item-invisible";
+var Toolbar = ToolbarBase.inherit({
+    _getDefaultOptions: function() {
+        return extend(this.callBase(), {
+            menuItemTemplate: "menuItem",
+            menuContainer: void 0,
+            overflowMenuVisible: false
+        })
+    },
+    updateDimensions: function() {
+        this._dimensionChanged();
+    },
+    _dimensionChanged: function(dimension) {
+        if ("height" === dimension) {
+            return
+        }
+        this.callBase();
+        this._menu.renderMenuItems();
+    },
+    _initTemplates: function() {
+        this.callBase();
+        this._templateManager.addDefaultTemplates({
+            actionSheetItem: new ChildDefaultTemplate("item")
+        });
+    },
+    _initMarkup: function() {
+        this.callBase();
+        this._updateFocusableItemsTabIndex();
+        this._renderMenu();
+    },
+    _postProcessRenderItems: function() {
+        this._hideOverflowItems();
+        this._menu._updateMenuVisibility();
+        this.callBase();
+        deferRender(() => {
+            this._menu.renderMenuItems();
+        });
+    },
+    _renderItem: function(index, item, itemContainer, $after) {
+        var itemElement = this.callBase(index, item, itemContainer, $after);
+        if ("auto" === item.locateInMenu) {
+            itemElement.addClass(TOOLBAR_AUTO_HIDE_ITEM_CLASS);
+        }
+        if ("dxButton" === item.widget && "inMenu" === item.showText) {
+            itemElement.toggleClass(TOOLBAR_AUTO_HIDE_TEXT_CLASS);
+        }
+        return itemElement
+    },
+    _getItemsWidth: function() {
+        return this._getSummaryItemsWidth([this._$beforeSection, this._$centerSection, this._$afterSection])
+    },
+    _hideOverflowItems: function(elementWidth) {
+        var overflowItems = this.$element().find("." + TOOLBAR_AUTO_HIDE_ITEM_CLASS);
+        if (!overflowItems.length) {
+            return
+        }
+        elementWidth = elementWidth || getWidth(this.$element());
+        $(overflowItems).removeClass(TOOLBAR_HIDDEN_ITEM);
+        var itemsWidth = this._getItemsWidth();
+        while (overflowItems.length && elementWidth < itemsWidth) {
+            var $item = overflowItems.eq(-1);
+            itemsWidth -= getOuterWidth($item);
+            $item.addClass(TOOLBAR_HIDDEN_ITEM);
+            overflowItems.splice(-1, 1);
+        }
+    },
+    _getMenuItems: function() {
+        var that = this;
+        var menuItems = grep(this.option("items") || [], (function(item) {
+            return that._isMenuItem(item)
+        }));
+        var $hiddenItems = this._itemContainer().children("." + TOOLBAR_AUTO_HIDE_ITEM_CLASS + "." + TOOLBAR_HIDDEN_ITEM).not(".dx-state-invisible");
+        this._restoreItems = this._restoreItems || [];
+        var overflowItems = [].slice.call($hiddenItems).map(item => {
+            var itemData = that._getItemData(item);
+            var $itemContainer = $(item);
+            var $itemMarkup = $itemContainer.children();
+            return extend({
+                menuItemTemplate: function() {
+                    that._restoreItems.push({
+                        container: $itemContainer,
+                        item: $itemMarkup
+                    });
+                    var $container = $("<div>").addClass(TOOLBAR_AUTO_HIDE_ITEM_CLASS);
+                    return $container.append($itemMarkup)
+                }
+            }, itemData)
+        });
+        return [...overflowItems, ...menuItems]
+    },
+    _getToolbarItems: function() {
+        var that = this;
+        return grep(this.option("items") || [], (function(item) {
+            return !that._isMenuItem(item)
+        }))
+    },
+    _renderMenu: function() {
+        this._renderMenuStrategy();
+        deferRender(() => {
+            this._menu.render();
+        });
+    },
+    _renderMenuStrategy: function() {
+        if (!this._menu) {
+            this._menu = new ToolbarDropDownMenu(this);
+        }
+    },
+    _arrangeItems: function() {
+        if (this.$element().is(":hidden")) {
+            return
+        }
+        this._$centerSection.css({
+            margin: "0 auto",
+            float: "none"
+        });
+        each(this._restoreItems || [], (function(_, obj) {
+            $(obj.container).append(obj.item);
+        }));
+        this._restoreItems = [];
+        var elementWidth = getWidth(this.$element());
+        this._hideOverflowItems(elementWidth);
+        this.callBase(elementWidth);
+    },
+    _itemOptionChanged: function(item, property, value) {
+        if (this._isMenuItem(item)) {
+            this._menu.itemOption(item, property, value);
+        } else if (this._isToolbarItem(item)) {
+            this.callBase(item, property, value);
+        } else {
+            this.callBase(item, property, value);
+            this._menu.renderMenuItems();
+        }
+        if ("disabled" === property || "options.disabled" === property) {
+            toggleItemFocusableElementTabIndex(this, item);
+        }
+        if ("location" === property) {
+            this.repaint();
+        }
+    },
+    _updateFocusableItemsTabIndex() {
+        this._getToolbarItems().forEach(item => toggleItemFocusableElementTabIndex(this, item));
+    },
+    _isMenuItem: function(itemData) {
+        return "menu" === itemData.location || "always" === itemData.locateInMenu
+    },
+    _isToolbarItem: function(itemData) {
+        return void 0 === itemData.location || "never" === itemData.locateInMenu
+    },
+    _optionChanged: function(args) {
+        var {
+            name: name,
+            value: value
+        } = args;
+        switch (name) {
+            case "menuItemTemplate":
+                this._changeMenuOption("itemTemplate", this._getTemplate(value));
+                break;
+            case "onItemClick":
+                this._changeMenuOption(name, value);
+                this.callBase.apply(this, arguments);
+                break;
+            case "menuContainer":
+                this._changeMenuOption("container", value);
+                break;
+            case "overflowMenuVisible":
+                this._changeMenuOption("opened", value);
+                break;
+            case "disabled":
+                this._changeMenuOption("disabled", value);
+                this.callBase.apply(this, arguments);
+                this._updateFocusableItemsTabIndex();
+                break;
+            default:
+                this.callBase.apply(this, arguments);
+        }
+    },
+    _changeMenuOption: function(name, value) {
+        this._menu.widgetOption(name, value);
+    }
+});
+registerComponent("dxToolbar", Toolbar);
+
+export { Toolbar as T };