import { n as normalizeComponent, u as use, r as registerComponent } from './normalize-component-63e8c7a0.js';
import './es.object.to-string-5a59fbfc.js';
import './es.regexp.to-string-784af81c.js';
import { _ as _typeof } from './typeof-6c6d8d7a.js';
import './i18n-e25edebe.js';
import './es.array.filter-9f634d7c.js';
import { v as vueClickOutside } from './index-b4d779f7.js';
import BaseButton from './BaseButton-44a621e1.js';
import BaseDropDownList from './BaseDropDownList-4893c704.js';
import BaseIcon from './BaseIcon-d03b1fa2.js';
import { n as navigateList } from './navigateList-733ab7c4.js';
import './classof-b10e7604.js';
import './export-ecf4b1cb.js';
import './regexp-flags-b5fc4ddb.js';
import './regexp-exec-abstract-04d119fc.js';
import './string-multibyte-88926e02.js';
import './es.string.split-cd1f3afc.js';
import './is-regexp-5558fd03.js';
import './function-bind-context-b3fabf77.js';
import './array-iteration-dec5536e.js';
import './array-species-create-afb281e6.js';
import './es.array.includes-1f433385.js';
import './object-keys-a5d351f7.js';
import './es.object.keys-6369b884.js';
import './array-method-has-species-support-d96108b0.js';
import './es.symbol.description-3b56bced.js';
import './set-to-string-tag-452fb9b0.js';
import './utils-21c04279.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';
import './es.array.map-093cfbca.js';
import './es.array.slice-e9c3dd03.js';
import './create-property-c00b5c27.js';
import './es.string.replace-07eeebfe.js';
import './es.string.includes-53dbb113.js';
import './es.array.sort-92cbfa54.js';
import './web.dom-collections.for-each-917714ef.js';
import './dom-iterables-b6f5ef3b.js';
import './BaseBoxTooltip-e7e1d52e.js';
import './es.array.from-3ef944e4.js';
import './es.string.iterator-eb7ab984.js';
import './object-set-prototype-of-9853ad1a.js';
import './es.array.concat-9f3136dc.js';

/**
 * An Element to have the functionality of several buttons in one element
 */

var script = {
  name: 'BaseDropButton',
  components: {
    BaseDropDownList: BaseDropDownList,
    BaseButton: BaseButton,
    BaseIcon: BaseIcon
  },
  directives: {
    ClickOutside: vueClickOutside
  },
  mixins: [navigateList],
  props: {
    /**
     * array of button options
     * specify an array with strings naming the action (in case label and icon are handled via slot)
     * or an object with 'action', 'label' and 'icon' ('action' and 'label' may be customized
     * via identifierPropertyName and labelPropertyName respectively)
     */
    buttons: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * specify either a button object or the identifier value of one of the items in
     * the buttons array that should be shown as primary button - always visible<br>
     * in case a string is provided an object with that identifier should be present in the buttons
     * array!
     */
    primaryButton: {
      type: [Object, String],
      default: null
    },

    /**
     * add a description for the exand button - purely for accessibility
     * functionalities
     */
    expandButtonLabel: {
      type: String,
      default: 'Show more Options'
    },

    /**
     * specify a custom buttons array object property that should be used as
     * identifier
     */
    identifierPropertyName: {
      type: String,
      default: 'action'
    },

    /**
     * specify a custom buttons array object property that should be used as
     * label
     */
    labelPropertyName: {
      type: String,
      default: 'label'
    }
  },
  data: function data() {
    return {
      /**
       * handle hiding and showing of drop down options
       * @type {boolean}
       */
      showOptions: false,

      /**
       * the currently active option when navigating via keys
       * @type {?Object}
       */
      activeOption: null,

      /**
       * a variable to steer the css classes for drop down positioning (this way
       * scss variables can still be used)
       * @type {Object}
       * @property {string} dropDownPosition.horizontal - to position drop down 'left' or 'right'
       * @property {string} dropDownPosition.vertical - to position drop down 'top' or 'bottom'
       */
      dropDownPosition: {
        horizontal: 'right',
        vertical: 'bottom'
      },

      /**
       * a variable to add additional styling to the drop down in case there is not enough space
       * to handle positioning with css classes - since used for HTML attribute 'style' either an
       * object with 'transform' property or 'false' so that attribute is not shown
       * @type {boolean|Object}
       */
      dropDownTransformation: false
    };
  },
  computed: {
    /**
     * get the primary button - since prop 'primaryButton' can be either a string with the
     * identifier or the complete object - it is handled here to have the complete object
     * available for primary button
     * @returns {Object}
     */
    primaryButtonInt: function primaryButtonInt() {
      var _this = this;

      // check if a primary button was specififed
      if (this.primaryButton) {
        // if yes - check if it is an object that can be returned readily or
        // alternatively search the buttons array for an object with the specified identifier
        // TODO: what happens if no button with that identifier is found
        return _typeof(this.primaryButton) === 'object' ? this.primaryButton : this.buttons.find(function (button) {
          return _this.primaryButton === button[_this.identifierPropertyName];
        });
      } // if none was specififed just return the first object of the buttons array


      return this.buttons[0];
    },

    /**
     * filter the buttons for the primary button to not have it shown double
     * @returns {Object[]}
     */
    buttonsInt: function buttonsInt() {
      var _this2 = this;

      return this.buttons.filter(function (button) {
        return button[_this2.identifierPropertyName] !== _this2.primaryButtonInt[_this2.identifierPropertyName];
      });
    }
  },
  watch: {
    buttonsInt: function buttonsInt() {
      // if buttons changed the drop down size might have as well - recalculate
      // the position of the drop down
      // this might be obsolete now due to the v-click-outside but still leaving it here in case
      // there might be any other scenario where drop down size changes
      this.calculateDropDownPosition();
    },
    showOptions: function showOptions(val) {
      var _this3 = this;

      if (val) {
        // wait until element is rendered
        this.$nextTick(function () {
          // calculate correct drop down position on drop down opening
          _this3.calculateDropDownPosition();
        });
      } else {
        // reset activeOption on drop down close
        this.activeOption = null;
      }
    }
  },
  mounted: function mounted() {
    if (window) {
      // add an event listener to adjust drop down position to window size
      window.addEventListener('resize', this.calculateDropDownPosition);
    }
  },
  destroyed: function destroyed() {
    window.removeEventListener('resize', this.calculateDropDownPosition);
  },
  methods: {
    /**
     * function triggered on enter key event
     */
    dropDownEnterAction: function dropDownEnterAction() {
      // in case there is an active option - inform parent that action
      // should be triggered
      if (this.activeOption) {
        this.fireAction(this.activeOption[this.identifierPropertyName]);
      } else {
        // else close drop down
        this.showOptions = !this.showOptions;
      }
    },

    /**
     * function triggered on key up or down and tab key
     * @param {KeyboardEvent} event
     */
    navigateOptions: function navigateOptions(event) {
      // check if key was up or down or tab back or forth
      var isArrowDown = event.key === 'ArrowDown' || event.key === 'Tab' && !event.shiftKey; // get the current index needed for navigate function

      var currentIndex = this.buttonsInt.indexOf(this.activeOption); // call mixin navigate function that returns the new active option

      this.activeOption = this.navigate(this.buttonsInt, isArrowDown, currentIndex, true);
    },

    /**
     * function to inform parent that action was triggered (by click or enter)
     * @param {string} actionType
     */
    fireAction: function fireAction(actionType) {
      // close drop down and reset everything
      this.showOptions = false;
      /**
       * fired upon any button click
       *
       * @event clicked
       * @type {string}
       */

      this.$emit('clicked', actionType);
    },

    /**
     * function to calculate correct drop down position within window limits
     */
    calculateDropDownPosition: function calculateDropDownPosition() {
      // check if elements are renderend
      if (this.$refs.dropDown) {
        // use viewport width instead of window width so element is always in view
        // even if window is wider than visible frame
        var windowWidth = window.visualViewport.width; // get drop down position

        var dropElement = this.$refs.dropDown.$el.getBoundingClientRect(); // get parent element position

        var dropAreaPosition = this.$refs.dropArea.getBoundingClientRect(); // get top, bottom, left, and right position for parent element

        var dropAreaStart = dropAreaPosition.x;
        var dropAreaEnd = dropAreaStart + dropAreaPosition.width;
        var dropAreaTop = dropAreaPosition.y;
        var dropAreaBottom = dropAreaTop + dropAreaPosition.height; // check for left/right position
        // check if element has space on the right side

        if (dropAreaStart + dropElement.width >= windowWidth) {
          // if not check if there is enough space on the left side
          if (dropAreaEnd - dropElement.width >= 0) {
            // if yes - position it on the left side
            this.dropDownTransformation = false;
            this.dropDownPosition.horizontal = 'left'; // if not - try to shift gradually until space used up
          } else {
            var moveToLeft = windowWidth - dropAreaStart - dropElement.width; // check if move would put box above window threshold

            if (dropAreaStart + moveToLeft >= 0) {
              // if not move the calculated px
              this.dropDownTransformation = {
                transform: "translate(".concat(moveToLeft, "px, 0px)")
              };
              this.dropDownPosition.horizontal = 'right'; // if yes - only move to window border
            } else {
              this.dropDownTransformation = {
                transform: "translate(-".concat(dropAreaStart, "px, 0px)")
              };
              this.dropDownPosition.horizontal = 'right';
            }
          }
        } else {
          // just set element in standard position
          this.dropDownTransformation = false;
          this.dropDownPosition.horizontal = 'right';
        } // check for top/bottom position
        // check if element has enough space on the bottom


        if (dropAreaBottom + dropElement.height >= window.visualViewport.height) {
          // if not check if there is enough space on the top
          if (dropAreaTop - dropElement.height >= 0) {
            // if yes - position it on the top
            this.dropDownPosition.vertical = 'top';
          }
        } else {
          // just set element in standard position
          this.dropDownPosition.vertical = 'bottom';
        }
      }
    }
  }
};

var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    directives: [{
      name: "click-outside",
      rawName: "v-click-outside",
      value: function value() {
        return _vm.showOptions = false;
      },
      expression: "() => showOptions = false"
    }],
    staticClass: "base-drop-button"
  }, [_c('BaseButton', {
    class: {
      'base-drop-button__button__multi': _vm.buttonsInt && _vm.buttonsInt.length
    },
    attrs: {
      "text": _vm.primaryButtonInt[_vm.labelPropertyName],
      "icon": _vm.primaryButtonInt.icon || null,
      "icon-size": "large"
    },
    on: {
      "clicked": function clicked($event) {
        return _vm.fireAction(_vm.primaryButtonInt[_vm.identifierPropertyName]);
      }
    },
    scopedSlots: _vm._u([{
      key: "left-of-text",
      fn: function fn() {
        return [_vm._t("left-of-text")];
      },
      proxy: true
    }, {
      key: "right-of-text",
      fn: function fn() {
        return [_vm._t("right-of-text")];
      },
      proxy: true
    }], null, true)
  }), _vm._v(" "), _vm.buttonsInt && _vm.buttonsInt.length ? _c('div', {
    ref: "dropArea",
    staticClass: "base-drop-button__options-area"
  }, [_c('button', {
    class: ['base-drop-button__toggle-button', {
      'base-drop-button__toggle-button__active': _vm.showOptions
    }],
    attrs: {
      "aria-expanded": _vm.showOptions.toString(),
      "aria-label": _vm.expandButtonLabel,
      "type": "button",
      "aria-haspopup": "listbox"
    },
    on: {
      "click": function click($event) {
        $event.preventDefault();
        _vm.showOptions = !_vm.showOptions;
      },
      "keydown": [function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        $event.preventDefault();
        return _vm.dropDownEnterAction.apply(null, arguments);
      }, function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
          return null;
        }

        _vm.activeOption = null;
      }, function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]) && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) {
          return null;
        }

        $event.preventDefault();
        return _vm.navigateOptions.apply(null, arguments);
      }]
    }
  }, [_c('BaseIcon', {
    class: ['base-drop-button__drop-icon', {
      'base-drop-button__drop-icon__rotated': _vm.showOptions
    }],
    attrs: {
      "name": "drop-down"
    }
  })], 1), _vm._v(" "), _vm.showOptions ? _c('BaseDropDownList', {
    ref: "dropDown",
    class: ['base-drop-button__drop-down', "base-drop-button__drop-down__" + _vm.dropDownPosition.horizontal, "base-drop-button__drop-down__" + _vm.dropDownPosition.vertical],
    style: _vm.dropDownTransformation,
    attrs: {
      "drop-down-options": _vm.buttonsInt,
      "active-option": _vm.activeOption,
      "active-styled": false,
      "aria-activedescendant": _vm.activeOption ? "button-" + _vm.activeOption.action : false,
      "identifier-property-name": _vm.identifierPropertyName,
      "label-property-name": _vm.labelPropertyName
    },
    scopedSlots: _vm._u([{
      key: "option",
      fn: function fn(ref) {
        var option = ref.option;
        return [_c('button', {
          class: ['base-drop-button__action', {
            'base-drop-button__action__active': _vm.activeOption && option[_vm.identifierPropertyName] === _vm.activeOption[_vm.identifierPropertyName]
          }],
          attrs: {
            "id": "button-" + option[_vm.identifierPropertyName],
            "type": "button"
          },
          on: {
            "keydown": function keydown($event) {
              if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"]) && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"])) {
                return null;
              }

              $event.preventDefault();
            },
            "click": function click($event) {
              $event.preventDefault();
              return _vm.fireAction(option[_vm.identifierPropertyName]);
            }
          }
        }, [option.icon ? _c('BaseIcon', {
          staticClass: "base-drop-button__action-icon",
          attrs: {
            "name": option.icon
          }
        }) : _vm._e(), _vm._v(" "), _c('span', [_vm._v(_vm._s(option[_vm.labelPropertyName]))])], 1)];
      }
    }], null, false, 3565924434)
  }) : _vm._e()], 1) : _vm._e()], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-1cdeb558";
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

var BaseDropButton = __vue_component__;

var Plugin = {
  install: function install(Vue) {
    registerComponent(Vue, BaseDropButton);
  }
};
use(Plugin);

export { BaseDropButton, Plugin as default };
