'use strict';Object.defineProperty(exports,'__esModule',{value:true});var normalizeComponent=require('./normalize-component-d9981c57.js');require('./es.object.to-string-f27a75a8.js'),require('./es.regexp.to-string-5606f728.js');var _typeof=require('./typeof-6b9e62b8.js');require('./i18n-68e039d3.js'),require('./es.array.filter-6fabfac0.js');var index=require('./index-9dadef01.js'),BaseButton=require('./BaseButton-0200f360.js'),BaseDropDownList=require('./BaseDropDownList-1d65f819.js'),BaseIcon=require('./BaseIcon-1ed3bf6e.js'),navigateList=require('./navigateList-84064d67.js');require('./classof-819fc780.js'),require('./export-61511812.js'),require('./regexp-flags-abc49c4a.js'),require('./regexp-exec-abstract-216cd44a.js'),require('./string-multibyte-a2dff6e3.js'),require('./es.string.split-98e29ede.js'),require('./is-regexp-d6f1551e.js'),require('./function-bind-context-e4685306.js'),require('./array-iteration-f8b4483d.js'),require('./array-species-create-c414c2ec.js'),require('./es.array.includes-3990bfec.js'),require('./object-keys-12f2c5e5.js'),require('./es.object.keys-c57f02bd.js'),require('./array-method-has-species-support-983ac207.js'),require('./es.symbol.description-bf683260.js'),require('./set-to-string-tag-240bb3b0.js'),require('./utils-2e136d65.js'),require('./unsupportedIterableToArray-40a00645.js'),require('./es.array.join-88750c41.js'),require('./array-method-is-strict-99341ee3.js'),require('./es.array.map-4cfed4ef.js'),require('./create-property-240c71a5.js'),require('./es.string.replace-25e9e098.js'),require('./es.string.includes-ec03e639.js'),require('./es.array.sort-7d68b195.js'),require('./web.dom-collections.for-each-c07b0e22.js'),require('./dom-iterables-e2602b7e.js'),require('./BaseBoxTooltip-59ec05c0.js'),require('./es.array.from-6c133395.js'),require('./es.string.iterator-97f3177b.js'),require('./object-set-prototype-of-dfa14cf5.js'),require('./es.array.concat-bb8715dc.js');/**
 * An Element to have the functionality of several buttons in one element
 */

var script = {
  name: 'BaseDropButton',
  components: {
    BaseDropDownList: BaseDropDownList["default"],
    BaseButton: BaseButton["default"],
    BaseIcon: BaseIcon["default"]
  },
  directives: {
    ClickOutside: index.v
  },
  mixins: [navigateList.n],
  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._ssrNode(" "), _vm.buttonsInt && _vm.buttonsInt.length ? _vm._ssrNode("<div class=\"base-drop-button__options-area\" data-v-1cdeb558>", "</div>", [_vm._ssrNode("<button" + _vm._ssrAttr("aria-expanded", _vm.showOptions.toString()) + _vm._ssrAttr("aria-label", _vm.expandButtonLabel) + " type=\"button\" aria-haspopup=\"listbox\"" + _vm._ssrClass(null, ['base-drop-button__toggle-button', {
    'base-drop-button__toggle-button__active': _vm.showOptions
  }]) + " data-v-1cdeb558>", "</button>", [_c('BaseIcon', {
    class: ['base-drop-button__drop-icon', {
      'base-drop-button__drop-icon__rotated': _vm.showOptions
    }],
    attrs: {
      "name": "drop-down"
    }
  })], 1), _vm._ssrNode(" "), _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()], 2) : _vm._e()], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

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

var __vue_module_identifier__ = "data-v-1cdeb558";
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent.n({
  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) {
    normalizeComponent.r(Vue, BaseDropButton);
  }
};
normalizeComponent.u(Plugin);exports.BaseDropButton=BaseDropButton;exports["default"]=Plugin;