import { n as normalizeComponent, u as use, r as registerComponent } from './normalize-component-63e8c7a0.js';
import './es.array.includes-1f433385.js';
import BaseButton from './BaseButton-44a621e1.js';
import BaseLoader from './BaseLoader-a5bfc4d9.js';
import { i as i18n } from './i18n-e25edebe.js';
import './export-ecf4b1cb.js';
import './object-keys-a5d351f7.js';
import './es.symbol.description-3b56bced.js';
import './array-species-create-afb281e6.js';
import './set-to-string-tag-452fb9b0.js';
import './array-iteration-dec5536e.js';
import './function-bind-context-b3fabf77.js';
import './utils-21c04279.js';
import './typeof-6c6d8d7a.js';
import './unsupportedIterableToArray-577176bf.js';
import './es.array.join-6ca857ff.js';
import './array-method-is-strict-903f485b.js';
import './es.array.map-093cfbca.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 './is-regexp-5558fd03.js';
import './es.array.slice-e9c3dd03.js';
import './create-property-c00b5c27.js';
import './es.object.to-string-5a59fbfc.js';
import './classof-b10e7604.js';
import './es.regexp.to-string-784af81c.js';
import './es.string.replace-07eeebfe.js';
import './es.string.includes-53dbb113.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';
import './BaseIcon-d03b1fa2.js';
import './es.array.concat-9f3136dc.js';
import './BaseBoxTooltip-e7e1d52e.js';

var script = {
  name: 'BaseEditControl',
  components: {
    BaseButton: BaseButton,
    BaseLoader: BaseLoader
  },
  mixins: [i18n],
  props: {
    /**
     * toggle control buttons
     */
    controls: {
      type: Boolean,
      default: false
    },

    /**
     * disable edit button
     */
    disabled: {
      type: Boolean,
      default: false
    },

    /**
     * set edit mode
     */
    edit: {
      type: Boolean,
      default: false
    },

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

    /**
     * define title
     */
    title: {
      type: String,
      default: 'Title'
    },

    /**
     * define subtitle
     */
    subtitle: {
      type: String,
      default: ''
    },

    /**
     * render title as e.g.: 'h2' | 'h3'
     */
    renderTitleAs: {
      type: String,
      default: 'h2'
    },

    /**
     * define button text<br>
     * could be string or path to i18n json as well
     */
    editButtonText: {
      type: String,
      default: 'Edit'
    },

    /**
     * define button text<br>
     * could be string or path to i18n json as well
     */
    cancelButtonText: {
      type: String,
      default: 'Cancel'
    },

    /**
     * define button text<br>
     * could be string or path to i18n json as well
     */
    saveButtonText: {
      type: String,
      default: ''
    },

    /**
     * decide on buttons presented in edit mode<br>
     *  <b>save</b>: element has a 'save' and 'cancel' button
     *  <b>done</b>: element solely has a 'done' button. this button is also emitting
     *    a 'saved' event when clicked and uses the saveButtonText
     */
    editMode: {
      type: String,
      default: 'save',
      validator: function validator(val) {
        return ['save', 'done'].includes(val);
      }
    }
  },
  computed: {
    /**
     * set icon depending on editMode
     * @returns {string}
     */
    saveButtonIcon: function saveButtonIcon() {
      if (this.isLoading) {
        return '';
      }

      return this.editMode === 'done' ? 'check-mark' : 'save-file';
    },

    /**
     * set default save button text depending on editMode
     * @returns {string}
     */
    saveButtonTextInt: function saveButtonTextInt() {
      return this.saveButtonText || (this.editMode === 'done' ? 'Done' : 'Save');
    }
  },
  watch: {
    edit: {
      handler: function handler(val) {
        if (val) {
          window.addEventListener('keyup', this.escEventHandler);
        } else {
          window.removeEventListener('keyup', this.escEventHandler);
        }
      }
    }
  },
  methods: {
    activate: function activate(event) {
      /**
       * event emitted by click on edit button
       *
       * @type {PointerEvent}
       */
      this.$emit('activated', event);
    },
    cancel: function cancel(event) {
      /**
       * event emitted by click on cancel button
       *
       * @type {PointerEvent}
       */
      this.$emit('canceled', event);
    },
    save: function save(event) {
      /**
       * event emitted by click on save button
       *
       * @type {PointerEvent}
       */
      this.$emit('saved', event);
    },

    /**
     * intercept escape key event and reset edit mode
     */
    escEventHandler: function escEventHandler(e) {
      if (e.key === 'Escape') {
        this.cancel();
      }
    }
  }
};

/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    staticClass: "base-edit-control"
  }, [_vm.title ? _c(_vm.renderTitleAs, {
    tag: "component",
    staticClass: "base-edit-control__title  base-text-fade-out-background"
  }, [_vm._t("default", function () {
    return [_vm._v("\n      " + _vm._s(_vm.title) + "\n      "), _vm.subtitle ? _c('span', {
      staticClass: "base-edit-control__title__additional"
    }, [_vm._v("\n        " + _vm._s(_vm.subtitle) + "\n      ")]) : _vm._e()];
  })], 2) : _vm._e(), _vm._v(" "), _vm.controls ? _c('div', {
    staticClass: "base-edit-control__buttons"
  }, [!_vm.edit ? _c('base-button', {
    staticClass: "base-edit-control__button",
    attrs: {
      "disabled": _vm.disabled,
      "has-background-color": false,
      "icon": !_vm.isLoading ? 'edit' : '',
      "text": _vm.getI18nTerm(_vm.editButtonText)
    },
    on: {
      "clicked": _vm.activate
    }
  }, [_vm.isLoading ? _c('template', {
    slot: "left-of-text"
  }, [_c('span', {
    staticClass: "base-edit-control__loader"
  }, [_c('BaseLoader')], 1)]) : _vm._e()], 2) : _vm._e(), _vm._v(" "), _vm.edit ? _c('base-button', {
    staticClass: "base-edit-control__button",
    attrs: {
      "disabled": _vm.disabled,
      "has-background-color": false,
      "icon": _vm.saveButtonIcon,
      "text": _vm.getI18nTerm(_vm.saveButtonTextInt)
    },
    on: {
      "clicked": _vm.save
    }
  }, [_vm.isLoading ? _c('template', {
    slot: "left-of-text"
  }, [_c('span', {
    staticClass: "base-edit-control__loader"
  }, [_c('BaseLoader')], 1)]) : _vm._e()], 2) : _vm._e(), _vm._v(" "), _vm.editMode === 'save' && _vm.edit ? _c('base-button', {
    staticClass: "base-edit-control__button",
    attrs: {
      "has-background-color": false,
      "icon": "remove",
      "text": _vm.getI18nTerm(_vm.cancelButtonText)
    },
    on: {
      "clicked": _vm.cancel
    }
  }) : _vm._e()], 1) : _vm._e()], 1);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-79a9b246";
/* 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 BaseEditControl = __vue_component__;

var Plugin = {
  install: function install(Vue) {
    registerComponent(Vue, BaseEditControl);
  }
};
use(Plugin);

export { BaseEditControl, Plugin as default };
