import './es.object.to-string-5a59fbfc.js';
import { _ as _toConsumableArray } from './toConsumableArray-fb122614.js';
import { _ as _typeof } from './typeof-6c6d8d7a.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.array.includes-1f433385.js';
import './es.number.constructor-16a232f3.js';
import './es.string.includes-53dbb113.js';
import './es.json.stringify-9b0e9796.js';
import { c as createId } from './utils-21c04279.js';
import { n as normalizeComponent } from './normalize-component-63e8c7a0.js';
import './classof-b10e7604.js';
import './export-ecf4b1cb.js';
import './unsupportedIterableToArray-577176bf.js';
import './defineProperty-18999f8e.js';
import './object-keys-a5d351f7.js';
import './object-set-prototype-of-9853ad1a.js';
import './is-regexp-5558fd03.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';
import './es.array.map-093cfbca.js';
import './array-iteration-dec5536e.js';
import './function-bind-context-b3fabf77.js';
import './array-species-create-afb281e6.js';
import './array-method-has-species-support-d96108b0.js';
import './regexp-exec-abstract-04d119fc.js';
import './string-multibyte-88926e02.js';
import './regexp-flags-b5fc4ddb.js';
import './es.string.split-cd1f3afc.js';
import './es.array.slice-e9c3dd03.js';
import './create-property-c00b5c27.js';
import './es.regexp.to-string-784af81c.js';
import './es.string.replace-07eeebfe.js';
import './es.array.sort-92cbfa54.js';
import './web.dom-collections.for-each-917714ef.js';
import './dom-iterables-b6f5ef3b.js';
import './es.object.keys-6369b884.js';

/**
 * A basic text search to filter entries or files
 */

var script = {
  name: 'BaseSearch',
  components: {
    BaseIcon: function BaseIcon() {
      return import('./BaseIcon-d03b1fa2.js').then(function (m) {
        return m.default || m;
      });
    },
    BaseChipsInputField: function BaseChipsInputField() {
      return import('./BaseChipsInputField-0ca1def4.js').then(function (m) {
        return m.default || m;
      });
    },
    BaseInput: function BaseInput() {
      return import('./BaseInput-f47a3498.js').then(function (m) {
        return m.default || m;
      });
    },
    BaseDateInput: function BaseDateInput() {
      return import('./BaseDateInput-c98d9266.js').then(function (m) {
        return m.default || m;
      });
    }
  },
  model: {
    prop: 'input',
    event: 'input'
  },
  props: {
    /**
     * set input value from outside <br>
     *   for type daterange this needs to be an object with
     *   date`_`from and date`_`to properties!
     *
     * @model
     */
    input: {
      type: [String, Object],
      default: ''
    },

    /**
     * if input type is chips this is the prop to
     * pass selected options (chips)<br>
     *  you may use the .sync modifier on this prop
     */
    selectedChips: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * placeholder to show for input; either just a string or an object with
     * different text for each search type (text, chips, date)
     */
    placeholder: {
      type: [String, Object],
      default: 'Search your works and events'
    },

    /**
     * label connected with input (will not be visible but for usability!)
     */
    label: {
      type: String,
      default: 'Search'
    },

    /**
     * define if the magnifier glass (in front of input field) should be shown
     */
    showPreInputIcon: {
      type: Boolean,
      default: true
    },

    /**
     * specify the id of a linked drop down list
     */
    dropDownListId: {
      type: String,
      default: ''
    },

    /**
     * specify a field id for identification of the input field
     * if none is specified an internal id will be assigned
     */
    id: {
      type: String,
      default: ''
    },

    /**
     * specify the type of input field <br>
     * @values: text, chips, controlled, date, daterange
     */
    type: {
      type: String,
      default: 'text',
      validator: function validator(val) {
        return ['text', 'chips', 'controlled', 'date', 'daterange'].includes(val);
      }
    },

    /**
     * specify a linked list option (e.g. drop down) <br>
     *   (will be used in aria-activedescendant attribute)
     */
    linkedListOption: {
      type: String,
      default: null
    },

    /**
     * if true space is reserved for a loader that can be activated
     * with the 'isLoading' prop
     */
    loadable: {
      type: Boolean,
      default: false
    },

    /**
     * is loading indicator - showing loader if true
     */
    isLoading: {
      type: Boolean,
      default: false
    },

    /**
     * set the language (ISO 639-1)
     */
    language: {
      type: String,
      default: 'en',
      validator: function validator(val) {
        return !val || val.length === 2;
      }
    },

    /**
     * specify the object property that should be used as identifier (only needed
     * for type 'chips'
     */
    identifierPropertyName: {
      type: String,
      default: 'id'
    },

    /**
     * specify the object property that should be used as value to be displayed (only needed
     * for type 'chips'
     */
    labelPropertyName: {
      type: String,
      default: 'label'
    },

    /**
     * mark the form field as invalid and ideally also provide an error message
     * to display below the form field<br>
     * for an example see [BaseInput](#baseinput)
     */
    invalid: {
      type: Boolean,
      default: false
    },

    /**
     * define if error icon should be shown<br>
     * for an example see [BaseInput](#baseinput)
     */
    showErrorIcon: {
      type: Boolean,
      default: true
    },

    /**
     * if true a remove icon will be shown allowing to remove
     * all input at once<br>
     * for an example see [BaseInput](#baseinput)
     */
    clearable: {
      type: Boolean,
      default: true
    },

    /**
     * set active state from outside
     */
    isActive: {
      type: Boolean,
      default: false
    },

    /**
     * use this prop to deactivate automatic setting of focus as soon as input element
     * becomes active - this might require external handling of focus setting!
     */
    setFocusOnActive: {
      type: Boolean,
      default: true
    },

    /**
     * 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)
     */
    assistiveText: {
      type: Object,
      default: function _default() {
        return {};
      }
    },

    /**
     * use this prop to set a delay in ms before date input calender is displayed
     */
    dateFieldDelay: {
      type: Number,
      default: 0
    }
  },
  data: function data() {
    return {
      /**
       * internal handling of the input active state
       * @type {boolean}
       */
      isActiveInt: false,

      /**
       * internal handling of text input --> for 'chips' and 'text'
       * (separated from dateInputInt to preserve the input when switching type)
       * @type {string}
       */
      textInputInt: '',

      /**
       * internal handling of date input (separated from textInputInt to preserve
       * the input when switching type)
       * @type {string|Object}
       */
      dateInputInt: '',

      /**
       * internal handling of selected chips for type 'chips'
       * @type {Array}
       */
      selectedChipsInt: []
    };
  },
  computed: {
    /**
     * compute and import only the component necessary for the respective type selected
     * @returns {null|(function(): Promise<HTMLElement>)|string}
     */
    inputComponent: function inputComponent() {
      if (this.type === 'text') {
        return 'BaseInput';
      }

      if (this.isFieldTypeChips) {
        return 'BaseChipsInputField';
      }

      if (this.type === 'date' || this.type === 'daterange') {
        return 'BaseDateInput';
      }

      return null;
    },

    /**
     * compute the inputInt used for BaseInput v-model
     * this can either be a string or an object - also this is used to
     * convert dates between 'daterange' and 'date'
     */
    inputInt: {
      /**
       * set either textInputInt or dateInputInt depending on the type
       * @param {string|{date_to: string, date_from: string}} val - depending on the type
       * this is a date string, text string or an Object for 'daterange' with the following
       * properties:
       * @property {string} val.date_from
       * @property {string} val.date_to
       */
      set: function set(val) {
        if (this.type === 'date') {
          this.dateInputInt = val;
          /**
           * inform parent of changed input values (v-model)
           *
           * @event input
           * @type {(string|Object)}
           */

          this.$emit('input', this.dateInputInt);
        } else if (this.type === 'daterange') {
          this.dateInputInt = _objectSpread2({}, val);
          this.$emit('input', this.dateInputInt);
        } else {
          this.textInputInt = val;
          this.$emit('input', this.textInputInt);
        }
      },

      /**
       * get inputInt according to search type
       * @returns {string|{date_to: string, date_from: string}}
       */
      get: function get() {
        // for date or daterange use dateInputInt and use correct type
        // this preserves the date when switching between date and daterange btw
        if (this.type === 'date') {
          return this.dateInputInt.date_from || this.dateInputInt;
        }

        if (this.type === 'daterange') {
          return _typeof(this.dateInputInt) === 'object' ? this.dateInputInt : {
            date_from: this.dateInputInt,
            date_to: ''
          };
        } // everything else just return the textInputInt string
        // this preserves the text switching between chips and text


        return this.textInputInt;
      }
    },

    /**
     * to easily access the type needed for BaseDateInput in case type
     * is 'date' or 'daterange'
     * @returns {string|boolean}
     */
    dateFieldType: function dateFieldType() {
      if (this.type === 'date') {
        return 'single';
      }

      if (this.type === 'daterange') {
        return 'daterange';
      } // if type is neither 'date' or 'daterange' set the element attribute to false
      // so it does not show up in the rendered HTML


      return false;
    },

    /**
     * compute adaptions necessary for BaseDateInput since this component currently
     * only has 3 languages to choose from
     * @returns {string}
     */
    languageInt: function languageInt() {
      // adaptions for date input since only 'de', 'en', 'fr' available atm
      if (this.type === 'date' || this.type === 'daterange') {
        return ['de', 'en', 'fr'].includes(this.language) ? this.language : 'en';
      }

      return this.language;
    },

    /**
     * determine if type is 'chips'
     * @returns {boolean}
     */
    isFieldTypeChips: function isFieldTypeChips() {
      return this.type === 'chips' || this.type === 'controlled';
    },

    /**
     * internally used id - eiter provided by props or created internally with utils function
     * @returns {string}
     */
    idInt: function idInt() {
      return this.id || createId();
    },
    placeholderInt: function placeholderInt() {
      if (typeof this.placeholder === 'string') {
        return this.placeholder;
      }

      if (this.type.includes('date')) {
        return this.placeholder.date;
      }

      if (this.type === 'controlled') {
        return this.placeholder.chips;
      }

      return this.placeholder[this.type];
    }
  },
  watch: {
    /**
     * watch input prop to sync with inputInt
     * @param {string|{date_from: string, date_to: string}} val
     */
    input: {
      handler: function handler(val) {
        // if value is empty clear all input (to be able to reset the component completely)
        if (!val) {
          this.textInputInt = '';
          this.dateInputInt = this.type === 'daterange' ? {
            date_from: '',
            date_to: ''
          } : ''; // else if input is not matching internal input update
        } else if (val !== this.inputInt) {
          this.inputInt = val;
        }
      },
      immediate: true
    },

    /**
     * watch inputInt to sync with parent input
     * @param {string|{date_from: string, date_to: string}} val
     */
    inputInt: function inputInt(val) {
      if (val !== this.input) {
        this.$emit('input', val);
      }
    },

    /**
     * watch selectedChips prop to sync with selectedChipsInt
     * @param {Object[]} val
     */
    selectedChips: {
      handler: function handler(val) {
        if (JSON.stringify(val) !== JSON.stringify(this.selectedChipsInt)) {
          this.selectedChipsInt = _toConsumableArray(val);
        }
      },
      immediate: true
    },

    /**
     * watch selectedChipsInt to sync with selectedChips prop provided by parent
     * @param {Object[]} val
     */
    selectedChipsInt: function selectedChipsInt(val) {
      if (JSON.stringify(val) !== JSON.stringify(this.selectedChips)) {
        /**
         * inform parent of changes in selected chips
         *
         * @event update:selected-chips
         * @type {Array}
         */
        this.$emit('update:selected-chips', val);
      }
    },

    /**
     * sync internal active state with parent
     */
    isActive: {
      handler: function handler(val) {
        if (val !== this.isActiveInt) {
          this.isActiveInt = val;
        }
      },
      immediate: true
    },

    /**
     * propagate internal active state changes to parent
     */
    isActiveInt: function isActiveInt(val) {
      if (val !== this.isActive) {
        /**
         * to keep active state of component in sync
         *
         * @event update:is-active
         * @type {boolean}
         */
        this.$emit('update:is-active', val);
      }
    }
  }
};

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', {
    staticClass: "base-search"
  }, [_c(_vm.inputComponent, _vm._g({
    tag: "component",
    staticClass: "base-search__input",
    attrs: {
      "id": _vm.idInt,
      "selected-list": _vm.selectedChipsInt,
      "is-active": _vm.isActiveInt,
      "type": _vm.dateFieldType,
      "show-label": false,
      "use-form-field-styling": false,
      "show-input-border": false,
      "label": _vm.label,
      "placeholder": _vm.placeholderInt,
      "linked-list-option": _vm.linkedListOption,
      "drop-down-list-id": _vm.dropDownListId || false.toString(),
      "is-loading": _vm.isLoading,
      "clearable": _vm.clearable,
      "invalid": _vm.invalid,
      "show-error-icon": _vm.showErrorIcon,
      "language": _vm.languageInt,
      "allow-unknown-entries": _vm.type === 'chips',
      "loadable": _vm.loadable,
      "chips-editable": _vm.type === 'chips',
      "label-property-name": _vm.isFieldTypeChips ? _vm.labelPropertyName : false,
      "identifier-property-name": _vm.isFieldTypeChips ? _vm.identifierPropertyName : false,
      "set-focus-on-active": _vm.setFocusOnActive,
      "add-selected-entry-directly": true,
      "assistive-text": _vm.isFieldTypeChips ? _vm.assistiveText : false,
      "is-active-delay": _vm.dateFieldDelay,
      "input-class": "base-search__input-field",
      "field-type": "search"
    },
    on: {
      "update:selectedList": function updateSelectedList($event) {
        _vm.selectedChipsInt = $event;
      },
      "update:selected-list": function updateSelectedList($event) {
        _vm.selectedChipsInt = $event;
      },
      "update:isActive": function updateIsActive($event) {
        _vm.isActiveInt = $event;
      },
      "update:is-active": function updateIsActive($event) {
        _vm.isActiveInt = $event;
      }
    },
    scopedSlots: _vm._u([{
      key: "pre-input-field",
      fn: function fn() {
        return [_vm._t("pre-input-field")];
      },
      proxy: true
    }, {
      key: "input-field-addition-before",
      fn: function fn() {
        return [_vm._t("input-field-addition-before")];
      },
      proxy: true
    }, {
      key: "input-field-inline-before",
      fn: function fn() {
        return [_c('div', {
          class: [_vm.dateFieldType && _vm.showPreInputIcon ? 'base-search__spacing-date' : 'base-search__spacing']
        }), _vm._v(" "), _vm._t("input-field-inline-before", function () {
          return [_vm.showPreInputIcon ? _c('BaseIcon', {
            class: ['base-search__magnifier-icon', {
              'base-search__magnifier-icon__date': !!_vm.dateFieldType
            }, {
              'base-search__magnifier-icon__active': _vm.isActiveInt
            }],
            attrs: {
              "name": "magnifier"
            }
          }) : _vm._e()];
        })];
      },
      proxy: true
    }, {
      key: "input-field-addition-after",
      fn: function fn() {
        return [_vm._t("input-field-addition-after")];
      },
      proxy: true
    }, {
      key: "post-input-field",
      fn: function fn() {
        return [_vm._t("post-input-field"), _vm._v(" "), _c('div', {
          class: {
            'base-search__spacing': _vm.dateFieldType
          }
        })];
      },
      proxy: true
    }, {
      key: "error-icon",
      fn: function fn() {
        return [_vm._t("error-icon")];
      },
      proxy: true
    }, {
      key: "remove-icon",
      fn: function fn() {
        return [_vm._t("remove-icon")];
      },
      proxy: true
    }, {
      key: "below-input",
      fn: function fn() {
        return [_vm._t("below-input")];
      },
      proxy: true
    }], null, true),
    model: {
      value: _vm.inputInt,
      callback: function callback($$v) {
        _vm.inputInt = $$v;
      },
      expression: "inputInt"
    }
  }, _vm.$listeners))], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

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

export { BaseSearch as default };
