import './es.array.filter-9f634d7c.js';
import './es.object.to-string-5a59fbfc.js';
import './es.array.includes-1f433385.js';
import './es.string.includes-53dbb113.js';
import './es.regexp.to-string-784af81c.js';
import { _ as _export } from './export-ecf4b1cb.js';
import { w as whitespaces, s as stringTrim } from './es.number.constructor-16a232f3.js';
import { f as fails, n as normalizeComponent } from './normalize-component-63e8c7a0.js';
import { c as createId, s as sort, h as hasData, _ as _slicedToArray } from './utils-21c04279.js';
import { _ as _defineProperty } from './defineProperty-18999f8e.js';
import { _ as _toConsumableArray } from './toConsumableArray-fb122614.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.object.keys-6369b884.js';
import { i as i18n } from './i18n-e25edebe.js';
import './es.array.concat-9f3136dc.js';
import './es.array.map-093cfbca.js';
import './es.json.stringify-9b0e9796.js';
import './es.array.join-6ca857ff.js';
import './es.array.slice-e9c3dd03.js';
import './es.array.from-3ef944e4.js';
import './es.string.iterator-eb7ab984.js';
import BaseSearch from './BaseSearch-eb4ae1e8.js';
import BaseIcon from './BaseIcon-d03b1fa2.js';
import BaseButton from './BaseButton-16d830a6.js';
import BaseChipsInputField from './BaseChipsInputField-9d9254f8.js';
import BaseChip from './BaseChip-a5109284.js';
import BaseDropDownList from './BaseDropDownList-4893c704.js';
import { n as navigateList } from './navigateList-733ab7c4.js';

var non = '\u200B\u0085\u180E';

// check that a method works with the correct list
// of whitespaces and has a correct name
var stringTrimForced = function (METHOD_NAME) {
  return fails(function () {
    return !!whitespaces[METHOD_NAME]() || non[METHOD_NAME]() != non || whitespaces[METHOD_NAME].name !== METHOD_NAME;
  });
};

var $trim = stringTrim.trim;


// `String.prototype.trim` method
// https://tc39.es/ecma262/#sec-string.prototype.trim
_export({ target: 'String', proto: true, forced: stringTrimForced('trim') }, {
  trim: function trim() {
    return $trim(this);
  }
});

var script = {
  name: 'BaseAdvancedSearchRow',
  components: {
    BaseButton: BaseButton,
    BaseDropDownList: BaseDropDownList,
    BaseChip: BaseChip,
    BaseChipsInputField: BaseChipsInputField,
    BaseSearch: BaseSearch,
    BaseIcon: BaseIcon
  },
  mixins: [navigateList, i18n],
  props: {
    /**
     * provide an id for each search row
     */
    searchRowId: {
      type: String,
      default: ''
    },

    /**
     * property to distinguish between one of multiple filter rows
     * and the main search field (where new filters are added) that has
     * a slightly different design and functionality
     */
    isMainSearch: {
      type: Boolean,
      default: false
    },

    /**
     * list of available filters, needs to be an array of objects with the following properties:<br>
     *   <br>
     *    <b>label</b> {string} - the label of the filter (displayed
     *      if not main search) - this prop can be customized by specifying
     *      labelPropertyName.filter<br>
     *    <b>id</b> {string} - the identifier of the filter (displayed
     *      if not main search) - this prop can be customized by specifying
     *      identifierPropertyName.filter<br>
     *    <b>type</b> {('text'|'chips'|'date'|'daterange')} - the filter type<br>
     *    <b>freetext_allowed</b> {boolean} - determines if predetermined options from 'options'
     *      property are used or autocomplete is used
     *    <b>options</b> {Object[]} - for filter type 'chips' the controlled
     *      vocabulary options
     */
    filterList: {
      type: Array,
      default: function _default() {
        return [];
      },
      validator: function validator(val) {
        return !val.length || val.every(function (v) {
          return !!v.type && (v.type !== 'chips' || v.freetext_allowed || !!v.options);
        });
      }
    },

    /**
     * specify a default value for a filter that is set when none of the
     * available filters is selected, should have the following properties:<br>
     *   <br>
     *    <b>label</b> {string} - the label of the filter (displayed
     *      if not main search) - this prop can be customized by specifying
     *      labelPropertyName.filter<br>
     *    <b>id</b> {string} - the identifier of the filter (displayed
     *      if not main search) - this prop can be customized by specifying
     *      identifierPropertyName.filter<br>
     *    <b>type</b> {('text'|'chips'|'date'|'daterange')} - the filter type<br>
     *    <b>freetext_allowed</b> {boolean} - determines if predetermined options from 'options'
     *      property are used or autocomplete is used
     *    <b>options</b> {Object[]} - for filter type 'chips' the controlled
     *      vocabulary options<br>
     *    <b>filter_values</b> {Object[]|string[]|Object} - the values selected - object for date
     *    or array of objects or strings for type 'text' and type 'chips'
     */
    defaultFilter: {
      type: Object,
      default: function _default() {
        return {
          id: 'default',
          label: 'Fulltext',
          type: 'text',
          options: []
        };
      },
      validator: function validator(val) {
        return val.type && (val.type !== 'chips' || val.freetext_allowed || val.options);
      }
    },

    /**
     * the filter currently applied, needs to be an object with the following properties:<br>
     *   <br>
     *    <b>label</b> {string} - the label of the filter (displayed
     *      if not main search) - this prop can be customized by specifying
     *      labelPropertyName.filter<br>
     *    <b>id</b> {string} - the identifier of the filter (displayed
     *      if not main search) - this prop can be customized by specifying
     *      identifierPropertyName.filter<br>
     *    <b>type</b> {('text'|'chips'|'date'|'daterange')} - the filter type<br>
     *    <b>freetext_allowed</b> {boolean} - determines if predetermined options from 'options'
     *      property are used or autocomplete is used
     *    <b>filter_values</b> {Object[]|string[]|Object} - the values selected - object for date
     *      or array of objects or strings for type 'text' and type 'chips'
     */
    appliedFilter: {
      type: [Object, null],
      default: null,
      validator: function validator(val) {
        return val === null || !val.length || ['id', 'type', 'label'].every(function (prop) {
          return Object.keys(val).includes(prop);
        });
      }
    },

    /**
     * provide the component with the fetched autocomplete results
     * (drop down options)<br>
     * this needs to be an object array with the properties specified in
     * `autocompletePropertyNames`
     */
    autocompleteResults: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * flag to set if loader should be shown (for autocomplete requests
     */
    isLoading: {
      type: Boolean,
      default: false
    },

    /**
     * specify a language (ISO 639-1) (used for label if label is language specific object
     * e.g. { de: 'xxx', en: 'yyy' })
     */
    language: {
      type: String,
      default: ''
    },

    /**
     * specify the object property that can be used for identification of filters,
     * autocomplete options and controlled vocabulary options.<br>
     *   Could be a string (used for all of the mentioned objects) or an object with the following
     *   properties:<br>
     *     <b>filter</b>: identifier property name in filter objects<br>
     *     <b>autocompleteOption</b>: identifier property name in autocomplete option objects<br>
     *     <b>controlledVocabularyOption</b>: identifier property name in controlled
     *     vocabulary option objects<br>
     */
    identifierPropertyName: {
      type: [Object, String],
      default: function _default() {
        return {
          filter: 'id',
          autocompleteOption: 'id',
          controlledVocabularyOption: 'id'
        };
      }
    },

    /**
     * specify the object property that should be used for label display of filters,
     * autocomplete options and controlled vocabulary options.<br>
     *   Could be a string (used for all of the mentioned objects) or an object with the following
     *   properties:<br>
     *     <b>filter</b>: label property name in filter objects<br>
     *     <b>autocompleteOption</b>: label property name in autocomplete option objects<br>
     *     <b>controlledVocabularyOption</b>: label property name in controlled
     *     vocabulary option objects<br>
     */
    labelPropertyName: {
      type: [Object, String],
      default: function _default() {
        return {
          filter: 'label',
          autocompleteOption: 'title',
          controlledVocabularyOption: 'label'
        };
      }
    },

    /**
     * autocomplete results need a label and a data property that contains all the actual
     * autocomplete results for that specific category
     * TODO: make category optional
     */
    autocompletePropertyNames: {
      type: Object,
      default: function _default() {
        return {
          label: 'label',
          id: 'id',
          data: 'data'
        };
      },
      // check if all the necessary attributes are included in the provided object
      validator: function validator(val) {
        return ['label', 'id', 'data'].every(function (key) {
          return Object.keys(val).includes(key);
        });
      }
    },

    /**
     * add a place holder for the search input; either just a string or an object with
     * different text for each search type (text, chips, date)
     */
    placeholder: {
      type: [String, Object],
      default: 'Search and discover'
    },

    /**
     * specify informational texts for the component - this needs to be an object with the following
     * properties (if you dont want to display any text leave an empty string:  <br>
     *   <br>
     *     <b>title</b>: text shown as first line on the drop down in filters area<br>
     *     <b>subtext</b>: text shown as second line on the drop down in filters area<br>
     *     <b>availableOptions</b>: text shown with chips options for controlled vocabulary
     *     search<br>
     *     <b>addFilter</b>: text/label used for add filter icon<br>
     *     <b>removeFilter</b>: text/label used for remove filter icon<br>
     *     <b>selectFilterLabel</b>: label (not visible) used for filter chips input field<br>
     *     <b>searchLabel</b>: label (not visible) used for search input field<br>
     *  <br>
     *  The values of this object might be plain text or a key for an i18n file<br>
     * This prop can be ignored when the 'no-options' slot is used.
     */
    advancedSearchText: {
      type: Object,
      default: function _default() {
        return {
          title: 'Advanced Search',
          subtext: 'Select a filter',
          availableOptions: 'Available options',
          addFilter: 'Add filter',
          removeFilter: 'Remove filter',
          selectFilterLabel: 'Select filter',
          searchLabel: 'Search for Entries'
        };
      }
    },

    /**
     * specify informational texts for the drop down - this needs to be an object with the following
     * properties (if you dont want to display any text leave an empty string:  <br>
     *   <br>
     *     <b>autocompleteNoOptions</b>: text shown when no autocomplete options are available<br>
     *     <b>autocompleteOngoing</b>: text shown when an autocomplete search request is ongoing<br>
     *     <b>autocompleteInitial</b>: initial text shown before user started typing<br>
     *     <b>chipsNoOptions</b>: text shown when there are no options for controlled vocabulary
     *        available<br>
     *     <b>chipsMaxOptions</b>: text displayed if more than max number of options that can be
     *        displayed are available (configure via prop maxNumberControlledOptions)<br>
     *     <b>chipsNoMatch</b>: text displayed if string in input does not match any options<br>
     *     <b>chipsOngoing</b>: text shown for chips fetching request ongoing<br>
     *  <br>
     *  The values of this object might be plain text or a key for an i18n file<br>
     */
    dropDownInfoTexts: {
      type: Object,
      default: function _default() {
        return {
          autocompleteNoOptions: 'No matching options found',
          autocompleteOngoing: 'Autocomplete is being fetched...',
          autocompleteInitial: 'Please start typing or select a filter to see options',
          chipsNoOptions: 'No more options available',
          chipsMaxOptions: 'Please start typing to see options',
          chipsNoMatch: 'No matching options were found',
          chipsOngoing: 'Options are being loaded...'
        };
      },
      // checking if all necessary properties are part of the provided object
      validator: function validator(val) {
        return ['autocompleteNoOptions', 'autocompleteOngoing', 'autocompleteInitial', 'chipsNoOptions', 'chipsOngoing', 'chipsMaxOptions', 'chipsNoMatch'].every(function (prop) {
          return Object.keys(val).includes(prop);
        });
      }
    },

    /**
     * define a maximum number of controlled vocabulary options to be displayed
     */
    maxNumberControlledOptions: {
      type: Number,
      default: 100
    },

    /**
     * this prop gives the option to add assistive text for screen readers<br>
     * properties:<br>
     * <b>selectedOption</b>: text read when a selected option is focused (currently only
     *  working for type chips with autocomplete (=freetext_allowed))
     */
    assistiveText: {
      type: Object,
      default: function _default() {
        return {};
      }
    },

    /**
     * if desired the box shadow around the search rows can be deactivated here
     */
    applyBoxShadow: {
      type: Boolean,
      default: true
    },

    /**
     * use this prop to set a delay in ms before date input calender is displayed
     */
    dateFieldDelay: {
      type: Number,
      default: 0
    }
  },
  data: function data() {
    return {
      /**
       * variable containing search text
       * @type {?string|?Object}
       */
      currentInput: '',
      // current filter
      // TODO: a) adjust to actual filter structure

      /**
       * the currently selected filter
       * @type {Filter}
       */
      filter: _objectSpread2(_objectSpread2({}, this.defaultFilter), {}, {
        filter_values: this.setFilterValues(this.defaultFilter)
      }),

      /**
       * the currently active (selected by key navigation) filter
       * @type {?Filter}
       */
      activeFilter: null,

      /**
       * variable to steer filter mobile display fade outs
       * @type {Object}
       * @property {boolean} filterFade.left - left fade out
       * @property {boolean} filterFade.right - right fade out
       */
      filterFade: {
        left: false,
        right: true
      },

      /**
       * for autocomplete drop down navigation - collection level
       * @type {?string}
       */
      activeCollection: '',

      /**
       * switch between arrow use on collection or entry level
       * (true for collection level)
       * @type {boolean}
       */
      collectionSelect: false,

      /**
       * the currently active controlled vocabulary entry
       * @type {?Object|?string}
       */
      activeControlledVocabularyEntry: null,

      /**
       * for autocomplete drop down navigation - single autocomplete option level
       * @type {?Object}
       */
      activeEntry: null,

      /**
       * to control if search field is active (and drop down shown)
       * @type {boolean}
       */
      isActive: false,

      /**
       * store the current filter type to recognize when it changes and only take
       * action e.g. on focusing input field, after it was rendered
       * @type {string}
       */
      currentFilterType: this.appliedFilter ? this.appliedFilter.type : this.defaultFilter.type,

      /**
       * the search input element stored in a variable so it can easily be focused again after
       * option selection
       * @type {?HTMLElement}
       */
      searchInputElement: null,

      /**
       * Mutation observer for handling the focusing of input field after changes
       * @type {?MutationObserver}
       */
      observer: null,

      /**
       * Resize Observer to trigger actions (e.g. drop down columns calculations) when
       * component is resized
       * @type {?ResizeObserver}
       */
      resizeObserver: null,

      /**
       * depending on element size a different slot of BaseInput is used and needs
       * to be passed on to v-slot directive of template element
       * @type {string}
       */
      filterSlotName: 'pre-input-field'
    };
  },
  computed: {
    /**
     * create a row id either taken from externally specified id or
     * via createId function
     */
    internalRowId: function internalRowId() {
      return this.searchRowId || createId();
    },

    /**
     * v-model of BaseChipsInputField provides an array of selected options - do
     * conversion to object and array respectively with this computed variable
     * (this is triggered when deleting the selected filter)
     */
    selectedFilter: {
      /**
       * triggered on deleting a filter via chip 'x'
       * @param {Filter[]} val
       */
      set: function set(val) {
        var newFilter = val.length ? val.pop() : this.defaultFilter; // check if filter was selected - else use the default filter

        this.filter = _objectSpread2(_objectSpread2({}, newFilter), {}, {
          filter_values: this.setFilterValues(newFilter, this.filter)
        });
      },
      get: function get() {
        // return current filter object as array
        return [this.filter];
      }
    },
    displayFilterList: function displayFilterList() {
      var _this = this;

      if (!this.isMainSearch) return this.filterList;
      return this.filterList.filter(function (filter) {
        return filter.id !== _this.defaultFilter.id;
      });
    },

    /**
     * variable to return if autocomplete functionality should be shown (= results fetched
     * and displayed in drop down, how input is handled, etc.)
     * this evaluates to true if type is text or chips with freetext allowed
     * @returns {boolean}
     */
    useAutocompleteFunctionality: function useAutocompleteFunctionality() {
      var type = this.filter.type;
      return type === 'text' || type === 'chips' && this.filter.freetext_allowed;
    },

    /**
     * depending on the filter type get selectedOptions for BaseSearch from filter values
     */
    selectedOptions: {
      /**
       * this is used when a chip is deleted
       * @param {Object[]|string[]} val - the new selected options to be set as filter_values in the
       *  current filter
       */
      set: function set(val) {
        this.$set(this.filter, 'filter_values', _toConsumableArray(val));
      },
      get: function get() {
        /**
         * this variable should only contain values for chips
         * not for date, daterange or text
         * @returns {Object[]|string[]}
         */
        if (this.filter.type === 'chips') {
          return this.filter && this.filter.filter_values ? _toConsumableArray(this.filter.filter_values) : [];
        }

        return [];
      }
    },

    /**
     * in case the filter is a controlled vocabulary filter get the options
     * from the corresponding filter in the filter list
     * @returns {Object[]}
     */
    controlledVocabularyOptions: function controlledVocabularyOptions() {
      var _this2 = this;

      // check first if filter is type controlled vocabulary
      if (this.filter.type === 'chips' && !this.filter.freetext_allowed) {
        // if yes - get the filter from filterList that has all the options
        var currentFilter = this.filterList.find(function (filter) {
          return filter[_this2.identifierPropertyName.filter] === _this2.filter[_this2.identifierPropertyName.filter];
        }); // if one was found return the options

        return currentFilter ? currentFilter.options : [];
      }

      return [];
    },

    /**
     * the actually displayed controlled vocabulary options
     * (filtered for already selected and for the current input string)
     *
     * @returns Object[]
     */
    displayedOptions: function displayedOptions() {
      var _this3 = this;

      if (this.controlledVocabularyOptions) {
        var options = [].concat(this.controlledVocabularyOptions); // remove already selected options if there are any

        if (this.filter.filter_values && this.filter.filter_values.length) {
          options = options.filter(function (option) {
            return !_this3.filter.filter_values.map(function (value) {
              return value[_this3.identifierPropertyName.controlledVocabularyOption];
            }).includes(option[_this3.identifierPropertyName.controlledVocabularyOption]);
          });
        } // only display options matching the current input string


        if (this.currentInput) {
          options = options.filter(function (filter) {
            return filter[_this3.labelPropertyName.filter].toLowerCase().includes(_this3.currentInput.toLowerCase());
          });
        }

        return sort(options, this.labelPropertyName.controlledVocabularyOption, false, this.getLangLabel);
      }

      return [];
    },

    /**
     * filtered autocomplete list, e.g. removing collections with no results
     * and options that were already selected
     * @type {Object[]} resultListInt
     * @returns {Object[]}
     */
    resultListInt: function resultListInt() {
      var _this4 = this;

      if (this.useAutocompleteFunctionality) {
        var resultsToDisplay = this.autocompleteResults; // if a filter is not default filter then only show autocomplete results that
        // have same category as selected text filter

        if (this.filter[this.identifierPropertyName.filter] !== this.defaultFilter[this.identifierPropertyName.filter]) {
          resultsToDisplay = resultsToDisplay.filter(function (section) {
            return section[_this4.autocompletePropertyNames.id] === _this4.filter[_this4.identifierPropertyName.filter];
          });
        } // filter empty collections


        resultsToDisplay = resultsToDisplay.filter(function (section) {
          return section[_this4.autocompletePropertyNames.data] && section[_this4.autocompletePropertyNames.data].length;
        }); // filter options already selected previously

        if (this.selectedOptions && this.selectedOptions.length) {
          var selectedOptionIds = this.selectedOptions.map(function (option) {
            return option[_this4.identifierPropertyName.autocompleteOption];
          });
          return resultsToDisplay.map(function (section) {
            var _ref;

            return _ref = {
              data: section[_this4.autocompletePropertyNames.data].filter(function (entry) {
                return !selectedOptionIds.includes(entry[_this4.identifierPropertyName.autocompleteOption]);
              })
            }, _defineProperty(_ref, _this4.autocompletePropertyNames.id, section[_this4.autocompletePropertyNames.id]), _defineProperty(_ref, _this4.autocompletePropertyNames.label, section[_this4.autocompletePropertyNames.label]), _ref;
          });
        }

        return resultsToDisplay;
      }

      return [];
    },

    /**
     * list of autocomplete results used for determining currently active
     * collection // activity
     * @type {Object} consolidatedResultList
     * @returns {Object}
     */
    consolidatedResultList: function consolidatedResultList() {
      var _this5 = this;

      return this.resultListInt.reduce(function (prev, curr) {
        _this5.$set(prev, curr[_this5.autocompletePropertyNames.id], curr[_this5.autocompletePropertyNames.data]);

        return prev;
      }, {});
    },

    /**
     * function to determine if filter has filter values
     */
    filterHasValues: function filterHasValues() {
      // check if filter is not default filter
      return this.filter[this.identifierPropertyName.filter] !== this.defaultFilter[this.identifierPropertyName.filter] // or has filter values
      || hasData(this.filter.filter_values);
    },

    /**
     * map filter type
     */
    searchType: function searchType() {
      if (this.filter) {
        var type = this.filter.type; // chips input filters that dont allow freetext need to have the type 'controlled'
        // in BaseSearchComponent

        if (type === 'chips' && !this.filter.freetext_allowed) {
          return 'controlled';
        }

        return type;
      }

      return 'text';
    }
  },
  watch: {
    /**
     * watch internal filter object for changes
     */
    filter: {
      handler: function handler(val) {
        if (JSON.stringify(val) !== JSON.stringify(this.appliedFilter)) {
          /**
           * event emitted when the applied filter changes<br>
           *   (possible to use .sync modifier on prop appliedFilter)
           * @event update:applied-filter
           * @property {Filter} val - the new currently applied filter
           */
          this.$emit('update:applied-filter', _objectSpread2({}, val));
        }
      },
      deep: true
    },

    /**
     * watch if applied filter changes from outside
     */
    appliedFilter: {
      /**
       * @param {Filter} val - the currently applied filter as set from outside
       */
      handler: function handler(val) {
        // check if anything actually changed
        if (JSON.stringify(val) !== JSON.stringify(this.filter)) {
          var newFilter = val || this.defaultFilter;
          this.filter = _objectSpread2(_objectSpread2({}, newFilter), {}, {
            // if filter is changed from outside this often means resetting a filter so previous
            // values should not be taken over (=leave second argument of function empty here)
            filter_values: newFilter.filter_values || this.setFilterValues(newFilter)
          }); // check if the new filter has values

          if (val && val.filter_values) {
            // distinguish between date and others to assign to correct variable
            if (val.type.includes('date')) {
              this.currentInput = val.filter_values;
            } else if (val.type === 'text') {
              var _val$filter_values = _slicedToArray(val.filter_values, 1);

              this.currentInput = _val$filter_values[0];
            } else {
              this.currentInput = '';
            }
          } else {
            this.currentInput = '';
          }
        }
      },
      immediate: true
    },

    /**
     * when current input changes emit this to parent component which should
     * do the fetching of autocomplete results (if filter type 'text') or assign
     * the values to filter.filter_values if type is 'date' or 'daterange'
     * @param {string} val - the search string
     */
    currentInput: function currentInput(val) {
      // if filter type is text - just emit for fetching autocomplete results
      if (this.useAutocompleteFunctionality) {
        /**
         * event emitted when input string for text or chips filter changes
         *
         * @event fetch-autocomplete-results
         * @property {string} input - the input string
         * @property {Filter} filter - the filter currently applied
         */
        this.$emit('fetch-autocomplete-results', {
          input: val,
          filter: this.filter
        });
      }
    },

    /**
     * if 'isActive' is set true reset the filterFade (for mobile filter view) to
     * default values
     */
    isActive: function isActive(val) {
      var _this6 = this;

      if (val) {
        // reset filter fade (mobile view)
        this.filterFade = {
          left: false,
          right: true
        };
      } // if isActive becomes false and the drop down closes check for remaining input strings
      // if the filter is chips


      if (!val && this.filter.type === 'chips' && this.currentInput && this.currentInput.trim()) {
        // check if the string can actually be added (freetext options allowed) and that the option
        // was not added previously
        if (this.filter.freetext_allowed && (!this.selectedOptions || !this.selectedOptions.some(function (option) {
          return !option[_this6.identifierPropertyName.autocompleteOption] && option[_this6.labelPropertyName.autocompleteOption] === _this6.currentInput;
        }))) {
          // if this holds true - add the option
          this.addOption(_defineProperty({}, this.labelPropertyName.autocompleteOption, this.currentInput));
        } else {
          // else reset all input
          this.resetAllInput();
        } // if filter type is text and the value was not added in that form yet also add it
        // (which will trigger search)

      } else if (!val && this.filter.type === 'text' && this.currentInput && this.filter.filter_values.join() !== this.currentInput) {
        this.addOption(this.currentInput);
      }
      /**
       * event emitted when input field becomes active / inactive
       * @event is-active
       * @type {boolean}
       */


      this.$emit('is-active', val);
    }
  },
  mounted: function mounted() {
    // get the search input element for later use
    this.getSearchInputElement(); // initialize observers that calculate the number of columns shown for filters
    // and chips options on render and recalculate on resize of element and that handle
    // focusing of the search input on changes

    this.initObservers();
  },
  updated: function updated() {
    // if the filterBox element exists add
    // the listener
    if (this.$refs.filterBox) {
      this.$refs.filterBox.addEventListener('scroll', this.calcFadeOut);
    }
  },
  beforeDestroy: function beforeDestroy() {
    if (this.resizeObserver) this.resizeObserver.unobserve(this.$refs.advancedSearchRow);
  },
  destroyed: function destroyed() {
    // remove event listener again if element exists
    if (this.$refs.filterBox) {
      this.$refs.filterBox.removeEventListener('scroll', this.calcFadeOut);
    }
  },
  methods: {
    /** FILTER ROW RELATED FUNCTIONALITIES */
    // inform parent of click on plus or remove respectively
    addFilterRow: function addFilterRow() {
      /**
       * event emitted when user took action to add filter
       *
       * @event add-filter-row
       * @property {Filter} filter - the filter object in question
       * @property {string} input - the current input
       */
      this.$emit('add-filter-row', {
        filter: this.filter,
        input: this.currentInput
      });
    },
    removeFilter: function removeFilter() {
      if (this.isMainSearch) {
        this.filter = _objectSpread2(_objectSpread2({}, this.defaultFilter), {}, {
          filter_values: this.setFilterValues(this.defaultFilter)
        });
        this.resetAllInput();
      } else {
        /**
         * event emitted when user triggered remove icon on filter row
         *
         * @event remove-filter
         * @property {Filter} filter - the filter to be removed
         */
        this.$emit('remove-filter', this.filter);
      }
    },

    /** FILTER RELATED FUNCTIONALITIES */

    /**
     * set the via click or navigation selected filter as currently
     * active filter
     *
     * @param {Filter} selectedFilter - the selected filter object
     * @property {string} selectedFilter.type - the type of the filter needed
     * to set the default filter values accordingly (array, string, object)
     */
    selectFilter: function selectFilter(selectedFilter) {
      // check if filter actually changed
      if (selectedFilter && this.filter[this.identifierPropertyName.filter] !== selectedFilter[this.identifierPropertyName.filter]) {
        // store the previous filter in a variable
        var previousFilter = this.filter; // store previous input value in a variable (to keep it if new filter type is
        // compatible

        var previousInput = this.currentInput; // set newly selected filter as current filter

        this.filter = _objectSpread2(_objectSpread2({}, selectedFilter), {}, {
          // set filter values separately to be able to keep some values
          filter_values: this.setFilterValues(selectedFilter, previousFilter)
        }); // reset all input variables

        this.resetAllInput();
        this.activeFilter = null; // now restore the input value if it makes sense (=filter type is autocomplete filter and
        // type stays the same or switches to other autocomplete type (chips, text))

        if (['text', 'chips'].includes(selectedFilter.type) && ['text', 'chips'].includes(previousFilter.type) && !(previousFilter.type === 'text' && previousFilter.filter_values[0] === previousInput)) {
          // restore the input value
          this.currentInput = previousInput; // now - if there is an input value and there are no autocomplete results available for
          // the category of the new filter - trigger the autocomplete fetch again

          if ((selectedFilter.type === 'text' || selectedFilter.type === 'chips' && selectedFilter.freetext_allowed) && this.currentInput && !this.autocompleteResults.some(function (category) {
            return category.filter_id === selectedFilter.id;
          })) {
            this.$emit('fetch-autocomplete-results', {
              input: this.currentInput,
              filter: this.filter
            });
          }
        } // if filter type date sync current input


        if (this.filter.type.includes('date')) {
          this.currentInput = this.filter.filter_values;
        }
      }

      if (this.searchInputElement) {
        // in either case - focus on input field again after click on filter
        this.searchInputElement.focus();
      }
    },

    /**
     * @param {KeyboardEvent} event - keyboard event bubbled from
     * filter input field
     */
    navigateFilters: function navigateFilters(event) {
      if (this.filterList.length && this.isActive && this.$refs.dropDown) {
        var currentIndex = this.filterList.indexOf(this.activeFilter);
        var dropDownElement = this.$refs.dropDown.$el; // if filters are out of view - scroll to top to make them visible

        if (this.$refs.filterOption && dropDownElement.scrollTop !== 0) {
          this.$refs.dropDown.$el.scrollTo({
            top: 0
          });
        } // determine if arrow was up or down - true if down, false for up


        var isArrowDown = event.key === 'ArrowDown';
        this.activeFilter = this.navigate(this.filterList, isArrowDown, currentIndex, true);
      }
    },

    /** CONTROLLED VOCABULARY AND AUTOCOMPLETE SELECT RELATED METHODS */

    /**
     * function for setting the currently active collection
     *
     * @param {string} collection - the collection string to set
     * as active collection (triggered when active entry changes)
     */
    setCollection: function setCollection(collection) {
      this.activeCollection = this.activeEntry ? collection : '';
    },

    /**
     * function to add any entry to the BaseSearch selectedChips list (since basically all
     * base search input is handled as chips)
     *
     * @param {Object} entry - the entry to add to the selected list
     * @param {string} collectionId - to set filter after adding from autocomplete a collection id
     *  is needed when option was selected by click
     */
    addOption: function addOption(entry) {
      var _this7 = this;

      var collectionId = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';

      // if option is coming from autocomplete drop down list (=has an id)
      // and currently active filter is not identical
      // with the category of the selected item (if everything is going right this should
      // be 'default') then set the category of the selected item as current filter
      if (this.useAutocompleteFunctionality && entry[this.identifierPropertyName.autocompleteOption] && this.filter[this.identifierPropertyName.filter] !== (this.activeCollection || collectionId || this.defaultFilter[this.identifierPropertyName.filter])) {
        var newFilter = this.filterList.find(function (filter) {
          return filter[_this7.identifierPropertyName.filter] // the filterList SHOULD have the filter included that is displayed as autocomplete option
          // category but if everything fails - use default filter again
          === (_this7.activeCollection || collectionId);
        }) || this.defaultFilter; // since default filter could be other than chips at least safeguard against type 'text'
        // TODO: this assumes filter type is 'text'! needs further handling if other filter
        // types could be default

        var newValue = newFilter[this.identifierPropertyName.filter] === this.defaultFilter[this.identifierPropertyName.filter] ? [].concat(entry[this.labelPropertyName.autocompleteOption]) : [].concat(entry);
        var oldFilterValues = this.filter.filter_values && this.filter.filter_values.length === 1 && typeof this.filter.filter_values[0] === 'string' ? [_defineProperty({}, this.labelPropertyName.autocompleteOption, this.filter.filter_values[0])] : [];
        this.filter = _objectSpread2(_objectSpread2({}, newFilter), {}, {
          // check for filter_values property which does not exist in the filterList filters
          filter_values: oldFilterValues.concat(newValue)
        });
      } else {
        this.$set(this.filter, 'filter_values', this.filter.filter_values.concat(entry));
      } // if filter type is text only use string for search on enter so dont remove the input
      // new addition: also controlled vocabulary input should stay as long as options available


      if (this.filter.type !== 'text' && (this.filter.type !== 'chips' || this.filter.freetext_allowed || !this.displayedOptions.length)) {
        // reset everything
        this.resetAllInput();
      } else {
        // else just empty the previously selected controlled vocabulary entry
        this.activeControlledVocabularyEntry = null;
      } // if filter row is not controlled vocabulary close the filter to be able to see search
      // results


      if (this.filter.type !== 'chips' || this.filter.freetext_allowed) {
        this.isActive = false;
      }
    },

    /**
     * function triggered on BaseSearch keyboard enter. Will add the currently active option or
     * controlled vocabulary option respectively. Or if no option is active the current input text.
     * If there is no active option and no input text then the keyboard enter will be interpreted
     * as a signal to add the filter to a filter array (parent is informed)
     */
    selectOptionOnKeyEnter: function selectOptionOnKeyEnter() {
      var _this8 = this;

      // else check if filter type is chips and there is an active entry in the options list
      if (this.filter.type === 'chips' && this.activeControlledVocabularyEntry) {
        this.addOption(this.activeControlledVocabularyEntry); // if an active entry is present (=selected by key naviagation) add the entry
      } else if (this.useAutocompleteFunctionality && this.activeEntry) {
        this.addOption(this.activeEntry); // check if filter type is text
      } else if (this.filter.type === 'text') {
        var newTextArray = [].concat(this.currentInput);

        if (JSON.stringify(this.filter.filter_values) !== JSON.stringify(newTextArray)) {
          this.$set(this.filter, 'filter_values', [].concat(this.currentInput));
          this.isActive = false;
        } else {
          this.isActive = !this.isActive;
        } // if there is no active entry check if there is input in the search field and
        // add the text input as chip if available, however check if text was already added
        // to avoid duplicates

      } else if (this.filter.type === 'chips' && this.filter.freetext_allowed && this.currentInput && this.currentInput.trim() && (!this.selectedOptions || !this.selectedOptions.some(function (option) {
        return !option[_this8.identifierPropertyName.autocompleteOption] && option[_this8.labelPropertyName.autocompleteOption] === _this8.currentInput;
      }))) {
        this.addOption(_defineProperty({}, this.labelPropertyName.autocompleteOption, this.currentInput)); // if this is main search and there is no current input and filter values are present
        // inform parent that filter can be processed
      } else if (!this.currentInput) {
        this.isActive = !this.isActive;
      }
    },

    /**
     * @param {KeyboardEvent} event - the event triggered by keydown
     */
    handleKeyDownEvent: function handleKeyDownEvent(event) {
      var key = event.key;

      if (!['Tab', 'Enter', ' ', 'Shift'].includes(key)) {
        this.isActive = true;
      } else if (key === ' ' && !this.currentInput) {
        this.isActive = !this.isActive;
        event.preventDefault();
      }
    },

    /** DROP DOWN NAVIGATION */

    /**
     * primary drop down navigation deciding what arrow keys are used for
     * --> could be used for controlled vocabulary or autocomplete options
     * @param {KeyboardEvent} event - the keydown event bubbled from search input field
     */
    navigateDropDown: function navigateDropDown(event) {
      event.preventDefault(); // determine if arrow was up or down - true if down, false for up

      var isArrowDown = event.key === 'ArrowDown'; // if navigation is used to navigate controlled vocabulary options (= are there
      // option specified in the filter?) only use arrow up and down

      if (this.controlledVocabularyOptions && this.controlledVocabularyOptions.length && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
        var currentIndex = this.displayedOptions.indexOf(this.activeControlledVocabularyEntry);
        this.activeControlledVocabularyEntry = this.navigate(this.displayedOptions, isArrowDown, currentIndex, true); // else navigation is used for autocomplete options
      } else {
        this.navigateAutocomplete(event, isArrowDown);
      }
    },

    /**
     * navigation handling complexe autocomplete navigation with possibilities to
     * navigate single entries or collections (switch between collections and entries
     * by using left/right arrow key)
     *
     * @param {KeyboardEvent} event - the keydown event bubbled from search input field
     * @param {boolean} isArrowDown - param passed from navigateDropDown so no need to newly assign
     */
    navigateAutocomplete: function navigateAutocomplete(event, isArrowDown) {
      var _this9 = this;

      // prevent moving of cursor on input line
      event.preventDefault();

      if (this.resultListInt.length) {
        // store key stroked in variable
        var key = event.key; // actions for arrow up or down

        if (key === 'ArrowDown' || key === 'ArrowUp') {
          // if there is no active Collection (could happen due to hover)
          // set the first item in array
          if (!this.activeCollection) {
            this.activeCollection = this.resultListInt[0][this.autocompletePropertyNames.id];
          } // get the index of the currently active collection


          var currentCollectionIndex = this.resultListInt.map(function (section) {
            return section[_this9.autocompletePropertyNames.id];
          }).indexOf(this.activeCollection);
          var currentCollectionArray = this.consolidatedResultList[this.activeCollection]; // depending if arrow was up or down set +/- one to add or subtract
          // generically

          var numberToAdd = isArrowDown ? 1 : -1; // get the index of the currently active entry within a collection

          var currentEntryIndex = currentCollectionArray.indexOf(this.activeEntry); // check if the last or first entry of the options list is reached

          var isWithinListLimit = this.isWithinArrayLimit(this.resultListInt, isArrowDown, currentCollectionIndex + numberToAdd); // check if collection select is active and if not if the arrow action is
          // within the limits of the array

          if (!this.collectionSelect && this.isWithinArrayLimit(currentCollectionArray, isArrowDown, currentEntryIndex + numberToAdd)) {
            // set new active entry
            this.activeEntry = this.navigate(currentCollectionArray, isArrowDown, currentEntryIndex); // since it is allowed to add unknown entries it must be possible to
            // have no active entry when navigating beyond list
          } else if (!this.collectionSelect && !isArrowDown && currentCollectionIndex === 0 && currentEntryIndex === 0) {
            this.activeEntry = null; // if collection select is active or first/last element of the current collection
            // is reached - switch to next/previous collection
          } else if (isWithinListLimit) {
            // set the new active collection
            this.activeCollection = this.resultListInt[currentCollectionIndex + numberToAdd][this.autocompletePropertyNames.id];
            currentCollectionArray = this.consolidatedResultList[this.activeCollection]; // define which element in the newly active collection should appear active
            // if collection select or arrow up - first one otherwise last

            var newItemIndex = isArrowDown || this.collectionSelect ? 0 : currentCollectionArray.length - 1; // set the active entry of the newly set collection

            this.activeEntry = currentCollectionArray[newItemIndex]; // if it is the last entry of the complete list - start from the top
          } else if (!isWithinListLimit && currentCollectionIndex === this.resultListInt.length - 1 && currentEntryIndex === currentCollectionArray.length - 1) {
            this.activeCollection = this.resultListInt[0][this.autocompletePropertyNames.id];
            currentCollectionArray = this.consolidatedResultList[this.activeCollection];
            var _currentCollectionArr = currentCollectionArray;

            var _currentCollectionArr2 = _slicedToArray(_currentCollectionArr, 1);

            this.activeEntry = _currentCollectionArr2[0];
          } else if (!isWithinListLimit && currentCollectionIndex === 0 && currentEntryIndex === -1) {
            this.activeCollection = this.resultListInt[this.resultListInt.length - 1][this.autocompletePropertyNames.id];
            currentCollectionArray = this.consolidatedResultList[this.activeCollection];

            var _currentCollectionArr3 = currentCollectionArray.slice(-1);

            var _currentCollectionArr4 = _slicedToArray(_currentCollectionArr3, 1);

            this.activeEntry = _currentCollectionArr4[0];
          }
        } else if (key === 'ArrowLeft') {
          this.collectionSelect = true;
        } else if (key === 'ArrowRight') {
          this.collectionSelect = false;
        }
      }
    },
    handleDropDownOnTabKey: function handleDropDownOnTabKey(event) {
      // get all input elements
      var inputElements = this.$el.getElementsByTagName('input'); // check if some where found

      if (inputElements) {
        // create an array out of input elements found
        var inputArray = Array.from(inputElements); // get the index of the element the event came from

        var eventInputIndex = inputArray.indexOf(event.target); // check if element is either the last input element and no shift key was used or
        // it is the first element and shift key was used --> if true --> close drop down

        if (!event.shiftKey && eventInputIndex >= inputArray.length - 1 || event.shiftKey && eventInputIndex <= 0) {
          this.isActive = false;
        }
      }
    },

    /**
     * handle the date input after it was validated (necessary to only assign valid date input
     * to filter_values)
     *
     * @param {string|Object} data - the date data in question - either a single string for type
     * 'date' or an object with date_from and date_to for type 'daterange'
     */
    handleDateInput: function handleDateInput(data) {
      // check if filter is actually of type date and the validated value differs from the
      // previously set values
      if (this.filter.type.includes('date') && JSON.stringify(data) !== JSON.stringify(this.filter.filter_values)) {
        this.currentInput = data; // set the filter_values with date values - this will trigger search

        this.$set(this.filter, 'filter_values', this.currentInput);
        this.isActive = false;
      }
    },

    /** OTHERS */

    /**
     * function to set the correct values for filter.filter_values attribute
     *
     * @param {Filter} newFilter - the newly selected filter
     * @param {Filter} previousFilter - the previously set filter
      * @returns {?string|Array|Object} the correct value type for the filter type
     */
    setFilterValues: function setFilterValues(newFilter) {
      var _this10 = this;

      var previousFilter = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
      var previousFilterValues = previousFilter.filter_values;
      var type = newFilter.type;
      var freetextAllowed = newFilter.freetext_allowed;

      if (type === 'date') {
        // map the date from daterange to date if necessary
        return previousFilter.type && previousFilter.type.includes('date') && previousFilterValues ? previousFilterValues.date_from || previousFilterValues.date_to : '';
      }

      if (type === 'daterange') {
        // check if it can be mapped from date to daterange
        if (previousFilter.type.includes('date')) {
          return {
            date_from: previousFilterValues ? previousFilterValues.date_from || previousFilterValues || '' : '',
            date_to: previousFilterValues && previousFilterValues.to ? previousFilterValues.to : ''
          };
        } // else just return empty object


        return {
          date_from: '',
          date_to: ''
        };
      } // check if both are autocomplete chips filters


      if (type === 'chips' && freetextAllowed && previousFilter.type === 'chips' && previousFilter.freetext_allowed) {
        // if both are chips with freetext keep options without id (=not specific entries)
        return previousFilterValues && previousFilterValues.length ? previousFilterValues.filter(function (value) {
          return !value[_this10.identifierPropertyName.autocompleteOption];
        }) : [];
      } // check if previous filter was text and new filter is autocomplete chips


      if (previousFilter.type === 'text' && previousFilterValues && previousFilterValues.length && !!previousFilterValues[0] && type === 'chips' && freetextAllowed) {
        return [_defineProperty({}, this.labelPropertyName.autocompleteOption, previousFilterValues[0])];
      }

      return [];
    },

    /**
     * reset all filter row input and navigational variables
     */
    resetAllInput: function resetAllInput() {
      this.currentInput = '';
      this.activeEntry = null;
      this.activeCollection = '';
      this.activeControlledVocabularyEntry = null;
    },

    /**
     * needed for mobile filter view to determine when to show fade out on filter list
     *
     * @param {Event} event - the event that triggered the recalculation
     */
    calcFadeOut: function calcFadeOut(event) {
      // get the target element
      var scrollElement = event.target; // get the actual scroll position

      var scrollPosition = scrollElement.scrollLeft; // determine the maximum possible scroll position

      var scrollMax = scrollElement.scrollWidth - scrollElement.clientWidth; // set filter fade variables

      this.filterFade = {
        // show fade out left as soon as scroll position is different from 0
        left: scrollPosition !== 0,
        // show fade out right as soon as scroll position is different from maximum position
        right: scrollPosition !== scrollMax
      };
    },

    /**
     * function called on tab keydown on row 'x' or '+' icon
     * @param {KeyboardEvent} event - the keydown event
     */
    onTab: function onTab(event) {
      // check if shift key was pressed on tab keydown (only if not the focus leaves the row)
      if (!event.shiftKey) {
        // if no - set row active to false
        this.isActive = false;
      }
    },
    initObservers: function initObservers() {
      var tempObserver = new MutationObserver(this.filterChangeObserverAction);
      tempObserver.observe(this.$refs.advancedSearchRow, {
        subtree: true,
        childList: true
      });
      this.observer = tempObserver;
      var tempResizeObserver = new ResizeObserver(this.resizeActions);
      tempResizeObserver.observe(this.$refs.advancedSearchRow);
      this.resizeObserver = tempResizeObserver;
    },
    filterChangeObserverAction: function filterChangeObserverAction() {
      this.getSearchInputElement();

      if (this.filter.type !== this.currentFilterType && this.isActive) {
        if (this.searchInputElement) {
          this.searchInputElement.focus();
          this.currentFilterType = this.filter.type;
        }
      }
    },

    /**
     * calculate the number of columns for filters and chips dynamically and
     * use correct slot for selected filter depending on element size
     */
    resizeActions: function resizeActions() {
      // get the components base element
      var searchRowElement = this.$refs.advancedSearchRow;
      var searchElement = this.$refs.baseSearch; // check if it was found

      if (searchElement) {
        // SET COLUMN STYLE
        // get the width of the element
        var searchElementWidth = searchElement.$el.clientWidth; // set a css variable that is responsible for the number of items
        // (subtract 1/4 of elementWidth because of first column): 180px is assumed for each column

        this.$el.style.setProperty('--col-number', Math.floor((searchElementWidth - searchElementWidth / 4) / 180) || 1);
      } // check if it was found


      if (searchRowElement) {
        // SET CORRECT SLOT FOR SELECTED FILTER DISPLAY
        // get the width of the element
        var searchRowElementWidth = searchRowElement.clientWidth;
        this.filterSlotName = searchRowElementWidth >= 500 ? 'pre-input-field' : 'input-field-addition-before';
      }
    },

    /**
     * function to get the current search input element
     */
    getSearchInputElement: function getSearchInputElement() {
      var _this11 = this;

      // get input elements
      var inputElements = document.getElementsByTagName('input'); // check if input elements were found

      if (inputElements && inputElements.length) {
        // if yes - transform HTMLElement list to Array and find the search input element
        this.searchInputElement = Array.from(inputElements).find(function (inputElem) {
          return inputElem.id.includes('search-input') && inputElem.id.includes(_this11.searchRowId);
        });
      }
    }
  }
};

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', {
    ref: "advancedSearchRow",
    staticClass: "base-advanced-search-row"
  }, [_c('BaseSearch', _vm._b({
    ref: "baseSearch",
    class: ['base-advanced-search-row__search', {
      'base-advanced-search-row__search__shadow': _vm.applyBoxShadow
    }],
    attrs: {
      "id": 'search-input-' + _vm.internalRowId,
      "show-pre-input-icon": _vm.isMainSearch && _vm.filter[_vm.identifierPropertyName.filter] === _vm.defaultFilter[_vm.identifierPropertyName.filter],
      "label": _vm.getI18nTerm(_vm.getLangLabel(_vm.advancedSearchText.searchLabel)),
      "type": _vm.searchType,
      "selected-chips": _vm.selectedOptions,
      "loadable": _vm.filter.type === 'text' || _vm.filter.type === 'chips',
      "is-loading": _vm.isLoading,
      "placeholder": _vm.placeholder,
      "drop-down-list-id": 'autocomplete-options-' + _vm.internalRowId,
      "language": _vm.language,
      "identifier-property-name": _vm.useAutocompleteFunctionality ? _vm.identifierPropertyName.autocompleteOption : _vm.identifierPropertyName.controlledVocabularyOption,
      "label-property-name": _vm.useAutocompleteFunctionality ? _vm.labelPropertyName.autocompleteOption : _vm.labelPropertyName.controlledVocabularyOption,
      "is-active": _vm.isActive,
      "set-focus-on-active": false,
      "clearable": false,
      "assistive-text": _vm.assistiveText,
      "date-field-delay": _vm.dateFieldDelay
    },
    on: {
      "update:selectedChips": function updateSelectedChips($event) {
        _vm.selectedOptions = $event;
      },
      "update:selected-chips": function updateSelectedChips($event) {
        _vm.selectedOptions = $event;
      },
      "clicked-outside": function clickedOutside($event) {
        _vm.isActive = false;
      },
      "click": function click($event) {
        _vm.isActive = true;
      },
      "keydown": [_vm.handleKeyDownEvent, 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"]) && _vm._k($event.keyCode, "right", 39, $event.key, ["Right", "ArrowRight"]) && _vm._k($event.keyCode, "left", 37, $event.key, ["Left", "ArrowLeft"])) {
          return null;
        }

        if ('button' in $event && $event.button !== 2) {
          return null;
        }

        if ('button' in $event && $event.button !== 0) {
          return null;
        }

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

        return _vm.handleDropDownOnTabKey.apply(null, arguments);
      }, function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.selectOptionOnKeyEnter.apply(null, arguments);
      }, function ($event) {
        if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) {
          return null;
        }

        _vm.isActive = false;
      }],
      "value-validated": _vm.handleDateInput
    },
    scopedSlots: _vm._u([{
      key: _vm.filterSlotName,
      fn: function fn() {
        return [_c('BaseChipsInputField', {
          class: ['base-advanced-search-row__first-column', {
            'base-advanced-search-row__first-column__small': _vm.filterSlotName === 'input-field-addition-before'
          }, 'base-advanced-search-row__filter-input', {
            'hide': _vm.isMainSearch && _vm.filter[_vm.identifierPropertyName.filter] === _vm.defaultFilter[_vm.identifierPropertyName.filter]
          }, {
            'base-advanced-search-row__filter-input__date': _vm.filter.type.includes('date')
          }],
          attrs: {
            "id": 'filter-select-' + _vm.internalRowId,
            "selected-list": _vm.selectedFilter,
            "allow-multiple-entries": false,
            "allow-unknown-entries": false,
            "allow-dynamic-drop-down-entries": false,
            "linked-list-option": _vm.activeFilter ? "filter-option-" + _vm.activeFilter[_vm.identifierPropertyName.filter] : null,
            "use-form-field-styling": false,
            "show-input-border": false,
            "show-label": false,
            "label": _vm.getI18nTerm(_vm.getLangLabel(_vm.advancedSearchText.selectFilterLabel)),
            "language": _vm.language,
            "drop-down-list-id": 'filter-options-' + _vm.internalRowId,
            "identifier-property-name": _vm.identifierPropertyName.filter,
            "label-property-name": _vm.labelPropertyName.filter,
            "input-class": _vm.filterSlotName === 'input-field-addition-before' ? '' : 'base-advanced-search-row__input-field'
          },
          on: {
            "update:selectedList": function updateSelectedList($event) {
              _vm.selectedFilter = $event;
            },
            "update:selected-list": function updateSelectedList($event) {
              _vm.selectedFilter = $event;
            },
            "click": function click($event) {
              _vm.isActive = true;
            },
            "keydown": [_vm.handleKeyDownEvent, function ($event) {
              if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
                return null;
              }

              return _vm.handleDropDownOnTabKey.apply(null, arguments);
            }, function ($event) {
              if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
                return null;
              }

              return _vm.selectFilter(_vm.activeFilter);
            }, 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;
              }

              return _vm.navigateFilters.apply(null, arguments);
            }]
          },
          scopedSlots: _vm._u([{
            key: "chip",
            fn: function fn(ref) {
              var entry = ref.entry;
              return [_c('span', {
                key: 'chip-' + entry.idInt,
                staticClass: "base-advanced-search-row__selected-filter-label",
                attrs: {
                  "id": entry.idInt
                }
              }, [_vm._v("\n            " + _vm._s("#" + _vm.getLangLabel(entry[_vm.labelPropertyName.filter], true)) + "\n          ")])];
            }
          }])
        })];
      },
      proxy: true
    }, {
      key: "post-input-field",
      fn: function fn() {
        return [!_vm.isMainSearch || _vm.filterHasValues ? _c('button', {
          class: ['base-advanced-search-row__icon-button', {
            'base-advanced-search-row__icon-button__date': _vm.filter.type.includes('date')
          }],
          on: {
            "keydown": function keydown($event) {
              if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
                return null;
              }

              return _vm.onTab.apply(null, arguments);
            },
            "click": function click($event) {
              $event.stopPropagation();
              $event.preventDefault();
              return _vm.removeFilter.apply(null, arguments);
            }
          }
        }, [_c('BaseIcon', {
          staticClass: "base-advanced-search-row__search-row-icon",
          attrs: {
            "title": _vm.getI18nTerm(_vm.getLangLabel(_vm.advancedSearchText.removeFilter)),
            "name": "remove"
          }
        })], 1) : _vm._e()];
      },
      proxy: true
    }, {
      key: "below-input",
      fn: function fn() {
        var _obj;

        return [_vm.isActive ? _c('BaseDropDownList', {
          ref: "dropDown",
          staticClass: "base-advanced-search-row__drop-down-body",
          attrs: {
            "drop-down-options": _vm.resultListInt,
            "active-option": (_obj = {}, _obj[_vm.autocompletePropertyNames.id] = _vm.activeCollection, _obj),
            "list-id": 'autocomplete-options-' + _vm.internalRowId,
            "active-styled": false,
            "has-sub-options": true,
            "display-as-drop-down": false,
            "use-custom-option-active-background-color": true,
            "language": _vm.language,
            "identifier-property-name": _vm.autocompletePropertyNames.id,
            "label-property-name": _vm.autocompletePropertyNames.data,
            "list-body-style": {
              'max-height': '400px',
              'overflow-y': 'auto'
            }
          },
          nativeOn: {
            "touchstart": function touchstart($event) {
              $event.stopPropagation();
            },
            "click": function click($event) {
              $event.stopPropagation();
            }
          },
          scopedSlots: _vm._u([{
            key: "before-list",
            fn: function fn() {
              return [_c('div', {
                staticClass: "base-advanced-search-row__above-list-area\n               base-advanced-search-row__above-list-area-filters\n               base-advanced-search-row__area-padding"
              }, [_c('div', {
                staticClass: "base-advanced-search-row__filter-area-wrapper"
              }, [_c('div', {
                staticClass: "base-advanced-search-row__first-column\n              base-advanced-search-row__filter-area"
              }, [_c('div', {
                staticClass: "base-advanced-search-row__filter-area-header"
              }, [_c('div', {
                staticClass: "base-advanced-search-row__filter-text"
              }, [_vm._v("\n                    " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.advancedSearchText.title))) + "\n                  ")]), _vm._v(" "), _c('div', {
                staticClass: "base-advanced-search-row__filter-subtext"
              }, [_vm._v("\n                    " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.advancedSearchText.subtext))) + "\n                  ")])]), _vm._v(" "), _c('span', {
                staticClass: "base-advanced-search-row__filter-area-close",
                on: {
                  "click": function click($event) {
                    _vm.isActive = false;
                  }
                }
              }, [_c('BaseIcon', {
                staticClass: "rotate-180 base-advanced-search-row__filter-area-close-icon",
                attrs: {
                  "name": "drop-down"
                }
              })], 1)]), _vm._v(" "), _c('div', {
                class: ['base-advanced-search-row__columns', 'base-advanced-search-row__filter-list-wrapper', {
                  'base-advanced-search-row__filter-list-wrapper__fade-right': _vm.filterFade.right
                }, {
                  'base-advanced-search-row__filter-list-wrapper__fade-left': _vm.filterFade.left
                }]
              }, [_c('ul', {
                ref: "filterBox",
                staticClass: "base-advanced-search-row__filter-list",
                attrs: {
                  "id": 'filter-options-' + _vm.internalRowId,
                  "role": "listbox"
                }
              }, _vm._l(_vm.displayFilterList, function (singleFilter, index) {
                return _c('li', {
                  key: index,
                  ref: "filterOption",
                  refInFor: true,
                  staticClass: "base-advanced-search-row__filter base-advanced-search-row__column-item",
                  class: [{
                    'base-advanced-search-row__filter-active': _vm.activeFilter === singleFilter
                  }, {
                    'base-advanced-search-row__filter-selected': _vm.filter && _vm.filter[_vm.identifierPropertyName.filter] === singleFilter[_vm.identifierPropertyName.filter]
                  }],
                  attrs: {
                    "id": "filter-option-" + singleFilter[_vm.identifierPropertyName.filter],
                    "aria-selected": (_vm.filter && _vm.filter[_vm.identifierPropertyName.filter] === singleFilter[_vm.identifierPropertyName.filter]).toString(),
                    "tabindex": "-1",
                    "role": "option"
                  },
                  on: {
                    "click": function click($event) {
                      $event.stopPropagation();
                      return _vm.selectFilter(singleFilter);
                    }
                  }
                }, [_vm._v("\n                    " + _vm._s("#" + singleFilter[_vm.labelPropertyName.filter]) + "\n                  ")]);
              }), 0)])])])];
            },
            proxy: true
          }, {
            key: "option",
            fn: function fn(slotProps) {
              return [!_vm.filter || _vm.useAutocompleteFunctionality ? _c('div', {
                staticClass: "base-advanced-search-row__autocomplete-body"
              }, [slotProps.option[_vm.autocompletePropertyNames.data].length ? _c('div', {
                class: ['base-advanced-search-row__first-column', 'base-advanced-search-row__autocomplete-collection']
              }, [_c('div', {
                staticClass: "base-advanced-search-row__autocomplete-collection-text"
              }, [_vm._v("\n                " + _vm._s(slotProps.option[_vm.autocompletePropertyNames.label]) + "\n              ")])]) : _vm._e(), _vm._v(" "), _c('BaseDropDownList', {
                staticClass: "base-advanced-search-row__autocomplete-options",
                attrs: {
                  "drop-down-options": slotProps.option[_vm.autocompletePropertyNames.data],
                  "active-option": _vm.activeEntry,
                  "display-as-drop-down": false,
                  "list-id": 'autocomplete-options-' + _vm.internalRowId,
                  "language": _vm.language,
                  "identifier-property-name": _vm.identifierPropertyName.autocompleteOption,
                  "label-property-name": _vm.labelPropertyName.autocompleteOption
                },
                on: {
                  "update:activeOption": function updateActiveOption($event) {
                    _vm.activeEntry = $event;
                  },
                  "update:active-option": [function ($event) {
                    _vm.activeEntry = $event;
                  }, function ($event) {
                    return _vm.setCollection(slotProps.option[_vm.autocompletePropertyNames.id]);
                  }],
                  "update:selected-option": function updateSelectedOption($event) {
                    return _vm.addOption($event, slotProps.option[_vm.autocompletePropertyNames.id]);
                  }
                }
              })], 1) : _vm._e()];
            }
          }, _vm.filter.type === 'chips' && !_vm.filter.freetext_allowed ? {
            key: "after-list",
            fn: function fn() {
              return [_c('div', {
                staticClass: "base-advanced-search-row__above-list-area\n               base-advanced-search-row__chips-area\n               base-advanced-search-row__area-padding"
              }, [_c('div', {
                class: ['base-advanced-search-row__chips-row', {
                  'base-advanced-search-row__chips-row__no-options': _vm.filter.type === 'chips' && !_vm.displayedOptions.length
                }]
              }, [_c('div', {
                staticClass: "base-advanced-search-row__controlled-options-title\n                       base-advanced-search-row__first-column"
              }, [_vm._v("\n                " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.advancedSearchText.availableOptions))) + "\n              ")]), _vm._v(" "), _vm.controlledVocabularyOptions && _vm.displayedOptions.length && (_vm.displayedOptions.length <= _vm.maxNumberControlledOptions || _vm.currentInput && _vm.currentInput.length >= 4) ? _c('ul', {
                staticClass: "base-advanced-search-row__chips-list base-advanced-search-row__columns",
                attrs: {
                  "role": "listbox"
                }
              }, _vm._l(_vm.displayedOptions, function (chip) {
                return _c('li', {
                  key: chip[_vm.identifierPropertyName.controlledVocabularyOption],
                  staticClass: "base-advanced-search-row__column-item",
                  attrs: {
                    "value": chip[_vm.labelPropertyName.controlledVocabularyOption],
                    "aria-selected": (_vm.activeControlledVocabularyEntry && chip[_vm.identifierPropertyName.controlledVocabularyOption] === _vm.activeControlledVocabularyEntry[_vm.identifierPropertyName.controlledVocabularyOption] || false).toString(),
                    "role": "option",
                    "tabindex": "0"
                  },
                  on: {
                    "mouseenter": function mouseenter($event) {
                      _vm.activeControlledVocabularyEntry = chip;
                    },
                    "mouseleave": function mouseleave($event) {
                      _vm.activeControlledVocabularyEntry = null;
                    }
                  }
                }, [_c('BaseChip', {
                  staticClass: "base-advanced-search-row__option-chip",
                  attrs: {
                    "is-removable": false,
                    "entry": _vm.getLangLabel(chip[_vm.labelPropertyName.controlledVocabularyOption]),
                    "chip-active": _vm.activeControlledVocabularyEntry && chip[_vm.identifierPropertyName.controlledVocabularyOption] === _vm.activeControlledVocabularyEntry[_vm.identifierPropertyName.controlledVocabularyOption]
                  },
                  on: {
                    "clicked": function clicked($event) {
                      return _vm.addOption(chip);
                    }
                  }
                })], 1);
              }), 0) : _vm.isLoading ? _c('div', {
                staticClass: "base-advanced-search-row__no-options\n                   base-advanced-search-row__area-padding"
              }, [_vm._v("\n                " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.dropDownInfoTexts.chipsOngoing, true))) + "\n              ")]) : _vm.displayedOptions.length > _vm.maxNumberControlledOptions && (!_vm.currentInput || _vm.currentInput.length < 4) ? _c('div', {
                staticClass: "base-advanced-search-row__no-options\n                base-advanced-search-row__area-padding"
              }, [_vm._v("\n                " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.dropDownInfoTexts.chipsMaxOptions, true))) + "\n              ")]) : _vm.currentInput && _vm.currentInput.length && !_vm.displayedOptions.length ? _c('div', {
                staticClass: "base-advanced-search-row__no-options\n                   base-advanced-search-row__area-padding"
              }, [_vm._v("\n                " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.dropDownInfoTexts.chipsNoMatch, true))) + "\n              ")]) : !_vm.displayedOptions.length ? _c('div', {
                staticClass: "base-advanced-search-row__no-options\n                   base-advanced-search-row__area-padding"
              }, [_vm._v("\n                " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.dropDownInfoTexts.chipsNoOptions, true))) + "\n              ")]) : _vm._e()])])];
            },
            proxy: true
          } : null, {
            key: "no-options",
            fn: function fn() {
              return [_c('div', {
                class: ['base-advanced-search-row__no-options', 'base-advanced-search-row__area-padding', {
                  'base-advanced-search-row__no-options-hidden': !_vm.useAutocompleteFunctionality
                }]
              }, [!_vm.currentInput || typeof _vm.currentInput === 'string' && !_vm.currentInput.trim() ? _c('div', [_vm._v("\n              " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.dropDownInfoTexts.autocompleteInitial, true))) + "\n            ")]) : _vm.isLoading ? _c('div', [_vm._v("\n              " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.dropDownInfoTexts.autocompleteOngoing, true))) + "\n            ")]) : _c('div', [_vm._v("\n              " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.dropDownInfoTexts.autocompleteNoOptions, true))) + "\n            ")])])];
            },
            proxy: true
          }], null, true)
        }) : _vm._e()];
      },
      proxy: true
    }], null, true),
    model: {
      value: _vm.currentInput,
      callback: function callback($$v) {
        _vm.currentInput = $$v;
      },
      expression: "currentInput"
    }
  }, 'BaseSearch', _vm.$listeners, false)), _vm._v(" "), _vm.isMainSearch ? _c('BaseButton', {
    class: ['base-advanced-search-row__add-filter-button', {
      'base-advanced-search-row__add-filter-button__shadow': _vm.applyBoxShadow
    }],
    attrs: {
      "icon": "plus",
      "button-style": "row",
      "icon-position": "right"
    },
    on: {
      "clicked": _vm.addFilterRow
    },
    nativeOn: {
      "click": function click($event) {
        $event.stopPropagation();
      }
    },
    scopedSlots: _vm._u([{
      key: "text",
      fn: function fn() {
        return [_c('span', {
          staticClass: "base-advanced-search-row__add-filter-button__text"
        }, [_vm._v("\n        " + _vm._s(_vm.getI18nTerm(_vm.getLangLabel(_vm.advancedSearchText.addFilter))) + "\n      ")])];
      },
      proxy: true
    }], null, false, 1879103160)
  }) : _vm._e()], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-d89d39a0";
/* 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 BaseAdvancedSearchRow = __vue_component__;

export { BaseAdvancedSearchRow as B };
