'use strict';require('./es.object.to-string-6eda7e05.js'),require('./es.regexp.to-string-da3f9988.js');var _typeof=require('./typeof-6b9e62b8.js'),objectSpread2=require('./objectSpread2-56f1d323.js');require('./es.number.constructor-186d326b.js'),require('./es.array.map-8b8b1771.js'),require('./es.json.stringify-06b03d57.js'),require('./web.dom-collections.for-each-a9e9d823.js');var BaseInput=require('./BaseInput-422ea2a4.js'),BaseIcon=require('./BaseIcon-d76fa559.js'),utils=require('./utils-307b9d48.js'),normalizeComponent=require('./normalize-component-a3a558e7.js');require('./classof-b3ccaaa6.js'),require('./well-known-symbol-f1447879.js'),require('./regexp-flags-e93c043d.js'),require('./object-set-prototype-of-17a6e712.js'),require('./es.array.includes-cbacb659.js'),require('./object-keys-1798218f.js'),require('./array-iteration-ec368d38.js'),require('./function-bind-context-6bee5e36.js'),require('./array-species-create-6d7d1ca3.js'),require('./array-method-has-species-support-43b9931e.js'),require('./dom-iterables-e2602b7e.js'),require('./array-method-is-strict-eaf6e6bc.js'),require('./es.array.concat-cf822c2c.js'),require('./create-property-7113990d.js'),require('./index-244a91c7.js'),require('./i18n-2a279d89.js'),require('./regexp-exec-abstract-9fcb71e6.js'),require('./string-multibyte-d552dade.js'),require('./es.string.split-8e95587e.js'),require('./is-regexp-3d2f5c60.js'),require('./es.object.keys-258d7358.js'),require('./unsupportedIterableToArray-40a00645.js'),require('./es.array.join-d5827db6.js'),require('./es.string.replace-0a90b609.js'),require('./es.string.includes-fd50111e.js'),require('./es.array.sort-71ab4282.js');/**
 * A multiline textfield base component
 */

var script = {
  name: 'BaseMultilineTextInput',
  components: {
    BaseInput: BaseInput["default"],
    BaseIcon: BaseIcon["default"],
    BaseSwitchButton: function BaseSwitchButton() {
      return Promise.resolve().then(function(){return require('./BaseSwitchButton-c94376f0.js')});
    }
  },
  model: {
    prop: 'input',
    event: 'input'
  },
  props: {
    /**
     * input displayed in the textarea <br>
     *   if tabs are set this needs to be an object with properties corresponding to
     *   tab names
     *
     * @model
     */
    input: {
      type: [Object, String],
      default: ''
    },

    /**
     * set the label for the input component
     */
    label: {
      type: String,
      default: ''
    },

    /**
     * set true if label should be visible
     */
    showLabel: {
      type: Boolean,
      default: true
    },

    /**
     * set input field placeholder
     */
    placeholder: {
      type: String,
      default: ''
    },

    /**
     * set tabs for the input field
     */
    tabs: {
      type: Array,
      default: function _default() {
        return ['default'];
      }
    },

    /**
     * give the possibility to specify what should be displayed in the tabs
     */
    tabLabels: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * set the currently active tab (specify the property of the object not the label)
     */
    activeTab: {
      type: String,
      default: function _default() {
        return this.tabs[0] || 'default';
      }
    },

    /**
     * set a legend for the tabs to be read (for accessibility only, hidden)
     */
    tabsLegend: {
      type: String,
      default: 'Radiogroup'
    },

    /**
     * set id which is used for label + id
     */
    id: {
      type: [String, Number],
      default: ''
    },

    /**
     * set a language (ISO 639-1)
     */
    language: {
      type: String,
      default: ''
    },

    /**
     * mark as required field (currently only used for aria-required)
     */
    required: {
      type: Boolean,
      default: false
    },

    /**
     * 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
    },

    /**
     * set true if input field should be disabled<br>
     * for an example see [BaseInput](#baseinput)
     */
    disabled: {
      type: Boolean,
      default: false
    },

    /**
     * add an error message to be displayed below form field if field is invalid<br>
     * for an example see [BaseInput](#baseinput)
     */
    errorMessage: {
      type: String,
      default: ''
    },

    /**
     * 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: false
    }
  },
  data: function data() {
    return {
      activeTabInt: this.activeTab || 'default',
      fieldContent: {},
      isActive: false
    };
  },
  computed: {
    /**
     * check if an id was provided (to handle label input connection), if not create one
     * @returns {String|string}
     */
    idInt: function idInt() {
      return this.id || utils.c();
    },
    // TODO: refactor component props to already match object necessary for switch component
    switchTabs: function switchTabs() {
      var _this = this;

      return this.tabs.map(function (tab, index) {
        return {
          value: tab,
          label: _this.tabLabels[index] || tab
        };
      });
    },
    inputListeners: function inputListeners() {
      var _this2 = this;

      return objectSpread2.a(objectSpread2.a({}, this.$listeners), {
        input: function input() {
          /**
           * Event emitted on input, passing input string or input object
           *
           * @event input
           * @type {string | Object}
           */
          _this2.$emit('input', _this2.emitFieldContent());
        }
      });
    },
    showFadeOut: function showFadeOut() {
      if (this.$refs && this.$refs.textarea) {
        return !this.isActive && this.$refs.textarea.scrollHeight > this.$refs.textareaWrapper.clientHeight;
      }

      return !this.isActive;
    }
  },
  watch: {
    // watch for input changes from outside
    input: {
      handler: function handler(val) {
        if (_typeof._(val) === 'object' && JSON.stringify(val) !== JSON.stringify(this.fieldContent) || typeof val === 'string' && val !== this.fieldContent[this.activeTabInt]) {
          // if input changes set internal fieldContent variable
          this.setFieldContent(val);
        }
      },
      immediate: true,
      deep: true
    },
    // get updates for active tab from outside
    activeTab: function activeTab(val) {
      this.activeTabInt = val;
    }
  },
  methods: {
    setFieldContent: function setFieldContent(val) {
      var _this3 = this;

      if (this.tabs.length < 2) {
        var propName = this.activeTabInt || 'default';
        this.$set(this.fieldContent, propName, typeof val === 'string' ? val : val[propName]);
      } else {
        this.tabs.forEach(function (tab) {
          return _this3.$set(_this3.fieldContent, tab, val[tab]);
        });
      }
    },
    emitFieldContent: function emitFieldContent() {
      if (_typeof._(this.input) === 'object') {
        return this.fieldContent;
      }

      return this.fieldContent[this.activeTabInt];
    },
    hasText: function hasText(val) {
      return !!this.fieldContent[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('BaseInput', _vm._g({
    staticClass: "base-multiline-text-input",
    attrs: {
      "id": _vm.idInt,
      "is-active": _vm.isActive,
      "label": _vm.label,
      "show-label": _vm.showLabel,
      "placeholder": _vm.placeholder,
      "required": _vm.required,
      "invalid": _vm.invalid,
      "disabled": _vm.disabled,
      "show-error-icon": _vm.showErrorIcon,
      "error-message": _vm.errorMessage,
      "clearable": _vm.clearable,
      "use-fade-out": false
    },
    on: {
      "update:isActive": function updateIsActive($event) {
        _vm.isActive = $event;
      },
      "update:is-active": function updateIsActive($event) {
        _vm.isActive = $event;
      }
    },
    scopedSlots: _vm._u([{
      key: "label-addition",
      fn: function fn() {
        return [_c('div', {
          staticClass: "base-multiline-text-input__additions"
        }, [_vm._t("label-addition"), _vm._v(" "), _vm.tabs && _vm.tabs[0] !== 'default' ? _c('BaseSwitchButton', {
          staticClass: "base-multiline-text-input__tabs",
          attrs: {
            "options": _vm.switchTabs,
            "label": _vm.tabsLegend,
            "active-tab": _vm.activeTab
          },
          scopedSlots: _vm._u([{
            key: "right-of-text",
            fn: function fn(tab) {
              return [_vm.hasText(tab.value) ? _c('BaseIcon', {
                staticClass: "base-multiline-text-input__text-icon",
                attrs: {
                  "name": "text"
                }
              }) : _vm._e()];
            }
          }], null, false, 3542795371),
          model: {
            value: _vm.activeTabInt,
            callback: function callback($$v) {
              _vm.activeTabInt = $$v;
            },
            expression: "activeTabInt"
          }
        }) : _vm._e()], 2)];
      },
      proxy: true
    }, {
      key: "input",
      fn: function fn() {
        return [_c('div', {
          ref: "textareaWrapper",
          class: ['base-multiline-text-input__textarea-wrapper', {
            'base-multiline-text-input__textarea-wrapper__fade-out': _vm.showFadeOut
          }]
        }, [_c('textarea', _vm._g({
          directives: [{
            name: "model",
            rawName: "v-model",
            value: _vm.fieldContent[_vm.activeTabInt],
            expression: "fieldContent[activeTabInt]"
          }],
          ref: "textarea",
          staticClass: "base-multiline-text-input__textarea",
          attrs: {
            "id": _vm.idInt,
            "required": _vm.required,
            "aria-required": _vm.required.toString(),
            "aria-describedby": _vm.idInt,
            "aria-invalid": _vm.invalid.toString(),
            "disabled": _vm.disabled,
            "aria-disabled": _vm.disabled.toString(),
            "placeholder": _vm.placeholder
          },
          domProps: {
            "value": _vm.fieldContent[_vm.activeTabInt]
          },
          on: {
            "keydown": function keydown($event) {
              if (!$event.type.indexOf('key') && _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")) {
                return null;
              }

              _vm.isActive = false;
            },
            "input": function input($event) {
              if ($event.target.composing) {
                return;
              }

              _vm.$set(_vm.fieldContent, _vm.activeTabInt, $event.target.value);
            }
          }
        }, _vm.inputListeners))])];
      },
      proxy: true
    }, {
      key: "input-field-addition-before",
      fn: function fn() {
        return [_vm._t("input-field-addition-before")];
      },
      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")];
      },
      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
    }], null, true),
    model: {
      value: _vm.fieldContent[_vm.activeTabInt],
      callback: function callback($$v) {
        _vm.$set(_vm.fieldContent, _vm.activeTabInt, $$v);
      },
      expression: "fieldContent[activeTabInt]"
    }
  }, _vm.$listeners));
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-51d26ca6";
/* module identifier */

var __vue_module_identifier__ = "data-v-51d26ca6";
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

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

var BaseMultilineTextInput = __vue_component__;exports["default"]=BaseMultilineTextInput;