text: /**
   * DevExtreme (esm/ui/button_group.js)
   * Version: 21.2.5
   * Build date: Mon Jan 17 2022
   *
   * Copyright (c) 2012 - 2022 Developer Express Inc. ALL RIGHTS RESERVED
   * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
   */
  import $ from "../core/renderer";
  import Widget from "./widget/ui.widget";
  import Button from "./button";
  import CollectionWidget from "./collection/ui.collection_widget.edit";
  import registerComponent from "../core/component_registrator";
  import {
      extend
  } from "../core/utils/extend";
  import {
      isDefined,
      isFunction
  } from "../core/utils/type";
  import {
      BindableTemplate
  } from "../core/templates/bindable_template";
  var BUTTON_GROUP_CLASS = "dx-buttongroup";
  var BUTTON_GROUP_WRAPPER_CLASS = BUTTON_GROUP_CLASS + "-wrapper";
  var BUTTON_GROUP_ITEM_CLASS = BUTTON_GROUP_CLASS + "-item";
  var BUTTON_GROUP_FIRST_ITEM_CLASS = BUTTON_GROUP_CLASS + "-first-item";
  var BUTTON_GROUP_LAST_ITEM_CLASS = BUTTON_GROUP_CLASS + "-last-item";
  var BUTTON_GROUP_ITEM_HAS_WIDTH = BUTTON_GROUP_ITEM_CLASS + "-has-width";
  var SHAPE_STANDARD_CLASS = "dx-shape-standard";
  var ButtonCollection = CollectionWidget.inherit({
      _initTemplates() {
          this.callBase();
          this._templateManager.addDefaultTemplates({
              item: new BindableTemplate(($container, data, model) => {
                  this._prepareItemStyles($container);
                  var template = this.option("buttonTemplate");
                  this._createComponent($container, Button, extend({}, model, data, this._getBasicButtonOptions(), {
                      _templateData: this._hasCustomTemplate(template) ? model : {},
                      template: model.template || template
                  }))
              }, ["text", "type", "icon", "disabled", "visible", "hint"], this.option("integrationOptions.watchMethod"))
          })
      },
      _getBasicButtonOptions() {
          return {
              focusStateEnabled: false,
              onClick: null,
              hoverStateEnabled: this.option("hoverStateEnabled"),
              activeStateEnabled: this.option("activeStateEnabled"),
              stylingMode: this.option("stylingMode")
          }
      },
      _getDefaultOptions: function() {
          return extend(this.callBase(), {
              itemTemplateProperty: null
          })
      },
      _hasCustomTemplate(template) {
          return isFunction(template) || this.option("integrationOptions.templates")[template]
      },
      _prepareItemStyles($item) {
          var itemIndex = $item.data("dxItemIndex");
          0 === itemIndex && $item.addClass(BUTTON_GROUP_FIRST_ITEM_CLASS);
          var items = this.option("items");
          items && itemIndex === items.length - 1 && $item.addClass(BUTTON_GROUP_LAST_ITEM_CLASS);
          $item.addClass(SHAPE_STANDARD_CLASS)
      },
      _renderItemContent(args) {
          args.container = $(args.container).parent();
          return this.callBase(args)
      },
      _renderItemContentByNode: function(args, $node) {
          args.container = $(args.container.children().first());
          return this.callBase(args, $node)
      },
      _focusTarget() {
          return this.$element().parent()
      },
      _keyboardEventBindingTarget() {
          return this._focusTarget()
      },
      _refreshContent() {
          this._prepareContent();
          this._renderContent()
      },
      _itemClass: () => BUTTON_GROUP_ITEM_CLASS,
      _itemSelectHandler: function(e) {
          if ("single" === this.option("selectionMode") && this.isItemSelected(e.currentTarget)) {
              return
          }
          this.callBase(e)
      }
  });
  var ButtonGroup = Widget.inherit({
      _getDefaultOptions() {
          return extend(this.callBase(), {
              hoverStateEnabled: true,
              focusStateEnabled: true,
              selectionMode: "single",
              selectedItems: [],
              selectedItemKeys: [],
              stylingMode: "contained",
              keyExpr: "text",
              items: [],
              buttonTemplate: "content",
              onSelectionChanged: null,
              onItemClick: null
          })
      },
      _init() {
          this.callBase();
          this._createItemClickAction()
      },
      _createItemClickAction() {
          this._itemClickAction = this._createActionByOption("onItemClick")
      },
      _initMarkup() {
          this.setAria("role", "group");
          this.$element().addClass(BUTTON_GROUP_CLASS);
          this._renderButtons();
          this._syncSelectionOptions();
          this.callBase()
      },
      _fireSelectionChangeEvent: function(addedItems, removedItems) {
          this._createActionByOption("onSelectionChanged", {
              excludeValidators: ["disabled", "readOnly"]
          })({
              addedItems: addedItems,
              removedItems: removedItems
          })
      },
      _renderButtons() {
          var $buttons = $("<div>").addClass(BUTTON_GROUP_WRAPPER_CLASS).appendTo(this.$element());
          var selectedItems = this.option("selectedItems");
          var options = {
              selectionMode: this.option("selectionMode"),
              items: this.option("items"),
              keyExpr: this.option("keyExpr"),
              buttonTemplate: this.option("buttonTemplate"),
              scrollingEnabled: false,
              selectedItemKeys: this.option("selectedItemKeys"),
              focusStateEnabled: this.option("focusStateEnabled"),
              hoverStateEnabled: this.option("hoverStateEnabled"),
              activeStateEnabled: this.option("activeStateEnabled"),
              stylingMode: this.option("stylingMode"),
              accessKey: this.option("accessKey"),
              tabIndex: this.option("tabIndex"),
              noDataText: "",
              selectionRequired: false,
              onItemRendered: e => {
                  var width = this.option("width");
                  isDefined(width) && $(e.itemElement).addClass(BUTTON_GROUP_ITEM_HAS_WIDTH)
              },
              onSelectionChanged: e => {
                  this._syncSelectionOptions();
                  this._fireSelectionChangeEvent(e.addedItems, e.removedItems)
              },
              onItemClick: e => {
                  this._itemClickAction(e)
              }
          };
          if (isDefined(selectedItems) && selectedItems.length) {
              options.selectedItems = selectedItems
          }
          this._buttonsCollection = this._createComponent($buttons, ButtonCollection, options)
      },
      _syncSelectionOptions() {
          this._setOptionWithoutOptionChange("selectedItems", this._buttonsCollection.option("selectedItems"));
          this._setOptionWithoutOptionChange("selectedItemKeys", this._buttonsCollection.option("selectedItemKeys"))
      },
      _optionChanged(args) {
          switch (args.name) {
              case "stylingMode":
              case "selectionMode":
              case "keyExpr":
              case "buttonTemplate":
              case "items":
              case "activeStateEnabled":
              case "focusStateEnabled":
              case "hoverStateEnabled":
              case "tabIndex":
                  this._invalidate();
                  break;
              case "selectedItemKeys":
              case "selectedItems":
                  this._buttonsCollection.option(args.name, args.value);
                  break;
              case "onItemClick":
                  this._createItemClickAction();
                  break;
              case "onSelectionChanged":
                  break;
              case "width":
                  this.callBase(args);
                  this._buttonsCollection.itemElements().toggleClass(BUTTON_GROUP_ITEM_HAS_WIDTH, !!args.value);
                  break;
              default:
                  this.callBase(args)
          }
      }
  });
  registerComponent("dxButtonGroup", ButtonGroup);
  export default ButtonGroup;
  