'use strict';require('./es.number.constructor-daccdeab.js'),require('./es.array.from-6c133395.js'),require('./es.string.iterator-97f3177b.js');var BaseIcon=require('./BaseIcon-1ed3bf6e.js'),normalizeComponent=require('./normalize-component-d9981c57.js');require('./export-61511812.js'),require('./object-set-prototype-of-dfa14cf5.js'),require('./es.array.includes-3990bfec.js'),require('./object-keys-12f2c5e5.js'),require('./function-bind-context-e4685306.js'),require('./create-property-240c71a5.js'),require('./classof-819fc780.js'),require('./string-multibyte-a2dff6e3.js'),require('./set-to-string-tag-240bb3b0.js'),require('./es.array.concat-bb8715dc.js'),require('./array-species-create-c414c2ec.js'),require('./array-method-has-species-support-983ac207.js'),require('./es.array.join-88750c41.js'),require('./array-method-is-strict-99341ee3.js');/**
 * Pagination component
 */

var script = {
  name: 'BasePagination',
  components: {
    BaseIcon: BaseIcon["default"]
  },
  model: {
    prop: 'current',
    event: 'set-page'
  },
  props: {
    /**
     * specify total number of pages
     */
    total: {
      type: Number,
      default: null
    },

    /**
     * currently active page number
     *
     * @model
     */
    current: {
      type: Number,
      default: 1
    },

    /**
     * specify if pagination elements should be links - specify a vue link element or
     * set the variable false if element should not be a link
     * (this needs vue-router)<br>
     * currently only vue components (like 'router-link' or 'nuxt-link') are supported!
     */
    useLinkElement: {
      type: [String, Boolean],
      default: false,
      validator: function validator(val) {
        return typeof val === 'boolean' && !val || typeof val === 'string' && val;
      }
    }
  },
  data: function data() {
    return {
      /**
       * currently active page number
       * @type {number}
       */
      active: this.current,

      /**
       * number the displayed pages between '...' should start with
       * (only relevant if not all numbers can be displayed)
       * @type {?number}
       */
      start: null,

      /**
       * number the displayed pages between the '...' should end with
       * (only relevant if not all numbers can be displayed)
       * @type {?number}
       */
      end: null,

      /**
       * total numbers to be displayed before the '...' depending on the width of the
       * pagination element (only relevant if not all numbers can be displayed)
       * @type {number}
       */
      subsetNumber: 7,

      /**
       * max numbers to be displayed
       * @type {number}
       */
      maxNumbers: 10,

      /**
       * an observer to adjust displayed numbers according to component
       * width
       * @type {?ResizeObserver}
       */
      resizeObserver: null
    };
  },
  computed: {
    /**
     * calculate the actual subset page numbers to be displayed
     * @returns {number[]}
     */
    subset: function subset() {
      // check if subset number would exceed total number of items and start
      // array from total - subsetNumber
      var subsetStart = this.start + this.subsetNumber > this.total ? this.total - this.subsetNumber + 1 : this.start;
      return Array.from({
        length: this.subsetNumber
      }, function (v, k) {
        return k + subsetStart;
      });
    },

    /**
     * check if element should be displayed as a link element, otherwise make it a <span>
     * @returns {String|Boolean|string}
     */
    numberElement: function numberElement() {
      return this.useLinkElement ? this.useLinkElement : 'div';
    }
  },
  watch: {
    /**
     * in case
     */
    $route: function $route(to) {
      if (this.useLinkElement && to && to.query && to.query.page && to.query.page !== this.active) {
        this.active = Number(to.query.page);
      }
    },

    /**
     * if active number changes inform parent
     * @param {number} val - the new page number active
     */
    active: function active(val) {
      // check if new number is different from prop value
      if (this.current !== val) {
        /**
         * triggered on page select
         *
         * @event set-page
         * @param {number} val - the new page number
         */
        this.$emit('set-page', val);
      } // adjust the start and end value accordingly (if not all numbers can be displayed)


      this.setStartEnd();
    },

    /**
     * check if parent prop changes
     * @param {number} val - the page number provided by the parent component
     */
    current: function current(val) {
      this.active = val;
    }
  },
  mounted: function mounted() {
    // initialize the start and end variable in case not all numbers can be displayed
    this.setStartEnd(); // add an resize observer

    this.initObserver();
  },
  beforeDestroy: function beforeDestroy() {
    if (this.resizeObserver) this.resizeObserver.unobserve(this.$refs.pagination);
  },
  methods: {
    initObserver: function initObserver() {
      var _this = this;

      // create an observer with the set overflow calc function
      var tempResizeObserver = new ResizeObserver(function () {
        return _this.setStartEnd();
      }); // put it on the relevant element

      tempResizeObserver.observe(this.$refs.pagination); // store it

      this.resizeObserver = tempResizeObserver;
    },

    /**
     * depending on with of the parent element of the pagination calculate
     * how many page numbers can be displayed
     */
    setStartEnd: function setStartEnd() {
      console.log('set start end'); // get parent width

      var parentWidth = this.$parent.$el.clientWidth || this.$parent.clientWidth || window.innerWidth; // set the subset and the max number accordingly

      if (parentWidth < 390) {
        this.subsetNumber = 1;
        this.maxNumbers = 5;
      } else if (parentWidth < 570) {
        this.subsetNumber = 3;
        this.maxNumbers = 8;
      } else if (parentWidth < 710) {
        this.subsetNumber = 5;
      } // calc start and end number from the subset number


      this.start = this.active - this.subsetNumber / 2 > 0 ? this.active - Math.floor(this.subsetNumber / 2) : 1;
      this.end = this.active + this.subsetNumber / 2 < this.total ? this.active + Math.floor(this.subsetNumber / 2) : this.total;
    },

    /**
     * function to set a new page number active
     * @param {number} page - the new page number
     */
    setActivePage: function setActivePage(page) {
      // if new page is not set via url set it here manually
      if (!this.useLinkElement) {
        // set internal variable to new page number
        this.active = page;
      }
    },

    /**
     * get the correct link in case element is a link element
     * @param {number} page - the page number of the element in question
     * @returns {{path: string, query: Object}|string}
     */
    getLinkPath: function getLinkPath(page) {
      // check if router in project and link element is used and set link path accordingly if yes
      if (!!this.useLinkElement && this.$route) {
        return {
          path: this.$route.fullPath,
          query: {
            page: page
          }
        };
      }

      return '';
    }
  }
};/* script */
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('nav', {
    ref: "pagination",
    staticClass: "base-pagination"
  }, [_c(_vm.numberElement, {
    tag: "component",
    class: ['base-pagination__arrow', {
      'base-pagination__arrow-icon-inactive': _vm.active <= 1
    }],
    attrs: {
      "to": !!_vm.useLinkElement ? _vm.getLinkPath(_vm.active - 1 > 0 ? _vm.active - 1 : 1) : false,
      "aria-disabled": _vm.active <= 1,
      "tabindex": _vm.active <= 1 ? -1 : 0,
      "aria-label": "Go to previous page"
    },
    on: {
      "click": function click($event) {
        $event.preventDefault();
        _vm.active - 1 > 0 && !_vm.useLinkElement ? _vm.setActivePage(_vm.active - 1) : false;
      },
      "keydown": function keydown($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        _vm.active - 1 > 0 && !_vm.useLinkElement ? _vm.setActivePage(_vm.active - 1) : false;
      }
    },
    nativeOn: {
      "click": function click($event) {
        $event.preventDefault();
        _vm.active - 1 > 0 && !_vm.useLinkElement ? _vm.setActivePage(_vm.active - 1) : false;
      }
    }
  }, [_c('base-icon', {
    staticClass: "base-pagination__arrow-icon base-pagination__arrow-icon-left",
    attrs: {
      "name": "arrow-left"
    }
  })], 1), _vm._ssrNode(" "), _vm._ssrNode("<div class=\"base-pagination__row\">", "</div>", [_vm.total <= _vm.maxNumbers ? _vm._l(_vm.total, function (n) {
    return _c(_vm.numberElement, {
      key: n,
      tag: "component",
      class: ['base-pagination__number', {
        'base-pagination__number-active': _vm.active === n
      }],
      attrs: {
        "to": _vm.useLinkElement ? _vm.getLinkPath(n) : false,
        "tabindex": !_vm.useLinkElement ? 0 : false,
        "aria-current": _vm.active === n ? 'true' : false,
        "aria-label": (_vm.active === n ? 'Current Page, Page' : 'Go to page') + " " + n
      },
      on: {
        "keydown": function keydown($event) {
          if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
            return null;
          }

          return _vm.setActivePage(n);
        },
        "click": function click($event) {
          $event.preventDefault();
          return _vm.setActivePage(n);
        }
      },
      nativeOn: {
        "click": function click($event) {
          $event.preventDefault();
          return _vm.setActivePage(n);
        }
      }
    }, [_vm._v("\n        " + _vm._s(n) + "\n      ")]);
  }) : [_vm.start !== 1 ? _c(_vm.numberElement, {
    tag: "component",
    class: ['base-pagination__number', {
      'base-pagination__number-active': _vm.active === 1
    }],
    attrs: {
      "to": _vm.useLinkElement ? _vm.getLinkPath(1) : false,
      "tabindex": !_vm.useLinkElement ? 0 : false,
      "aria-current": _vm.active === 1 ? 'true' : false,
      "aria-label": (_vm.active === 1 ? 'Current Page, Page' : 'Go to page') + " " + 1
    },
    on: {
      "keydown": function keydown($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.setActivePage(1);
      },
      "click": function click($event) {
        $event.preventDefault();
        return _vm.setActivePage(1);
      }
    },
    nativeOn: {
      "click": function click($event) {
        $event.preventDefault();
        return _vm.setActivePage(1);
      }
    }
  }, [_vm._v("\n        " + _vm._s(1) + "\n      ")]) : _vm._e(), _vm._ssrNode(" " + (_vm.start > 2 ? "<span class=\"base-pagination__more\">⋯</span>" : "<!---->") + " "), _vm._l(_vm.subset, function (n) {
    return _c(_vm.numberElement, {
      key: n,
      tag: "component",
      class: ['base-pagination__number', {
        'base-pagination__number-active': _vm.active === n
      }],
      attrs: {
        "to": _vm.useLinkElement ? _vm.getLinkPath(n) : false,
        "tabindex": !_vm.useLinkElement ? 0 : false,
        "aria-current": _vm.active === n ? 'true' : false,
        "aria-label": (_vm.active === n ? 'Current Page, Page' : 'Go to page') + " " + n
      },
      on: {
        "keydown": function keydown($event) {
          if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
            return null;
          }

          return _vm.setActivePage(n);
        },
        "click": function click($event) {
          $event.preventDefault();
          return _vm.setActivePage(n);
        }
      },
      nativeOn: {
        "click": function click($event) {
          $event.preventDefault();
          return _vm.setActivePage(n);
        }
      }
    }, [_vm._v("\n        " + _vm._s(n) + "\n      ")]);
  }), _vm._ssrNode(" " + (_vm.end < _vm.total - 1 && _vm.end !== _vm.total - 1 ? "<span class=\"base-pagination__more\">⋯</span>" : "<!---->") + " "), _vm.end - 1 < _vm.total - 1 && _vm.end - 1 !== _vm.total - 1 ? _c(_vm.numberElement, {
    tag: "component",
    class: ['base-pagination__number', {
      'base-pagination__number-active': _vm.active === _vm.total
    }],
    attrs: {
      "to": _vm.useLinkElement ? _vm.getLinkPath(_vm.total) : false,
      "tabindex": !_vm.useLinkElement ? 0 : false,
      "aria-current": _vm.active === _vm.total ? 'true' : false,
      "aria-label": (_vm.active === _vm.total ? 'Current Page, Page' : 'Go to page') + " " + _vm.total
    },
    on: {
      "keydown": function keydown($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.setActivePage(_vm.total);
      },
      "click": function click($event) {
        $event.preventDefault();
        return _vm.setActivePage(_vm.total);
      }
    },
    nativeOn: {
      "click": function click($event) {
        $event.preventDefault();
        return _vm.setActivePage(_vm.total);
      }
    }
  }, [_vm._v("\n        " + _vm._s(_vm.total) + "\n      ")]) : _vm._e()]], 2), _vm._ssrNode(" "), _c(_vm.numberElement, {
    tag: "component",
    class: ['base-pagination__arrow', {
      'base-pagination__arrow-icon-inactive': _vm.active >= _vm.total
    }],
    attrs: {
      "to": !!_vm.useLinkElement ? _vm.getLinkPath(_vm.active + 1 <= _vm.total ? _vm.active + 1 : _vm.total) : false,
      "aria-disabled": _vm.active >= _vm.total,
      "tabindex": _vm.active >= _vm.total ? -1 : 0,
      "aria-label": "Go to next Page"
    },
    on: {
      "click": function click($event) {
        $event.preventDefault();
        _vm.active + 1 <= _vm.total && !_vm.useLinkElement ? _vm.setActivePage(_vm.active + 1) : false;
      },
      "keydown": function keydown($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        _vm.active + 1 <= _vm.total && !_vm.useLinkElement ? _vm.setActivePage(_vm.active + 1) : false;
      }
    },
    nativeOn: {
      "click": function click($event) {
        $event.preventDefault();
        _vm.active + 1 <= _vm.total && !_vm.useLinkElement ? _vm.setActivePage(_vm.active + 1) : false;
      }
    }
  }, [_c('base-icon', {
    staticClass: "base-pagination__arrow-icon base-pagination__arrow-icon-right",
    attrs: {
      "name": "arrow-left"
    }
  })], 1)], 2);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* module identifier */

var __vue_module_identifier__ = "data-v-50547ca3";
/* 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 BasePagination = __vue_component__;exports["default"]=BasePagination;