vue-flow-form-rate-v1/dist/vue-flow-form.common.js

Create conversational conditional-logic forms with Vue.js.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

/*!
  Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
  https://github.com/ditdot-dev/vue-flow-form
  https://www.ditdot.hr/en
*/

// Language data store

var LanguageModel = function LanguageModel(options) {
  this.enterKey = 'Enter';
  this.shiftKey = 'Shift';
  this.ok = 'OK';
  this.continue = 'Continue';
  this.skip = 'Skip';
  this.pressEnter = 'Press :enterKey';
  this.multipleChoiceHelpText = 'Choose as many as you like';
  this.multipleChoiceHelpTextSingle = 'Choose only one answer';
  this.otherPrompt = 'Other';
  this.placeholder = 'Type your answer here...';
  this.submitText = 'Submit';
  this.longTextHelpText = ':shiftKey + :enterKey to make a line break.';
  this.prev = 'Prev';
  this.next = 'Next';
  this.percentCompleted = ':percent% completed';
  this.invalidPrompt = 'Please fill out the field correctly';
  this.thankYouText = 'Thank you!';
  this.successText = 'Your submission has been sent.';
  this.ariaOk = 'Press to continue';
  this.ariaRequired = 'This step is required';
  this.ariaPrev = 'Previous step';
  this.ariaNext = 'Next step';
  this.ariaSubmitText = 'Press to submit';
  this.ariaMultipleChoice = 'Press :letter to select';
  this.ariaTypeAnswer = 'Type your answer here';

  Object.assign(this, options || {});
};

/**
 * Inserts a new CSS class into the language model string to format the :string
 * Use it in a component's v-html directive: v-html="language.formatString(language.languageString)"
 */
LanguageModel.prototype.formatString = function formatString (string) {
    var this$1 = this;

  return string.replace(/:(\w+)/g, function (match, word) {
    if (this$1[word]) {
      return '<span class="f-string-em">' + this$1[word] + '</span>'
    }
      
    return match
  })
};

/*
  Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
  https://github.com/ditdot-dev/vue-flow-form
  https://www.ditdot.hr/en
*/

// Global data store

var QuestionType = Object.freeze({
  Date: 'FlowFormDateType',
  Dropdown: 'FlowFormDropdownType',
  Email: 'FlowFormEmailType',
  LongText: 'FlowFormLongTextType',
  MultipleChoice: 'FlowFormMultipleChoiceType',
  MultiplePictureChoice: 'FlowFormMultiplePictureChoiceType',
  Number: 'FlowFormNumberType',
  Password: 'FlowFormPasswordType',
  Phone: 'FlowFormPhoneType',
  SectionBreak: 'FlowFormSectionBreakType',
  Text: 'FlowFormTextType',
  Url: 'FlowFormUrlType',
  Rate: 'FlowFormRateType'
});

var DropdownOptionBlank = Object.freeze({
  label: '',
  value: '',
  disabled: true
});

var MaskPresets = Object.freeze({
  Date: '##/##/####',
  DateIso: '####-##-##',
  PhoneUs: '(###) ###-####'
});

var ChoiceOption = function ChoiceOption(options) {
  this.label = '';
  this.value = null;
  this.selected = false;
  this.imageSrc = null;
  this.imageAlt = null;

  Object.assign(this, options);
};

ChoiceOption.prototype.choiceLabel = function choiceLabel () {
  return this.label || this.value
};

ChoiceOption.prototype.choiceValue = function choiceValue () {
  // Returns the value if it's anything other than the default (null).
  if (this.value !== null) {
    return this.value
  }

  // Returns any other non-empty property if the value has not been set.
  return this.label || this.imageAlt || this.imageSrc
};

ChoiceOption.prototype.toggle = function toggle () {
  this.selected = !this.selected;
};

var RangeOption = function RangeOption(range) {
  this.value = range;
  this.selected = false;
};

RangeOption.prototype.choiceValue = function choiceValue () {
  return this.value
};

RangeOption.prototype.toggle = function toggle () {
  this.selected = !this.selected;
};

var LinkOption = function LinkOption(options) {
  this.url = '';
  this.text = '';
  this.target = '_blank';

  Object.assign(this, options);
};

var QuestionModel = function QuestionModel(options, ranges) {
  this.id = null;
  this.answer = null;
  this.answered = false;
  this.index = 0;
  this.options = [];
  this.description = '';
  this.className = '';
  this.type = null;
  this.html = null;
  this.required = false;
  this.jump = null;
  this.placeholder = null;
  this.mask = '';
  this.multiple = false;
  this.allowOther = false;
  this.other = null;
  this.language = null;
  this.tagline = null;
  this.title = null;
  this.subtitle = null;
  this.content = null;
  this.inline = false;
  this.helpText = null;
  this.helpTextShow = true;
  this.descriptionLink = [];
  this.min = null;
  this.max = null;
  this.nextStepOnAnswer = false,
  this.range = null;
  this.ranges = [];

  Object.assign(this, options);

  // If it's a range, generate an array of all numbers indicated by the range
  if (this.type === QuestionType.Rate) {
    if ( this.range !== null ) {
      this.ranges = [];
      for (var i = 1; i <= this.range; i++) {
        this.ranges.push(new RangeOption(i));
      }
    }
  }

  // Sets default mask and placeholder value on PhoneType question
  if (this.type === QuestionType.Phone) {
    if (!this.mask) {
      this.mask = MaskPresets.Phone;
    }
    if (!this.placeholder) {
      this.placeholder = this.mask;
    }
  }

  if (this.type === QuestionType.Url) {
    this.mask = null;
  }

  if (this.type === QuestionType.Date && !this.placeholder) {
    this.placeholder = 'yyyy-mm-dd';
  }

  if (this.multiple && !Array.isArray(this.answer)) {
    this.answer = this.answer ? [this.answer] : [];
  }

  this.resetOptions();
};

QuestionModel.prototype.getJumpId = function getJumpId () {
  var nextId = null;

  if (typeof this.jump === 'function') {
    nextId = this.jump.call(this);
  } else if (this.jump[this.answer]) {
    nextId = this.jump[this.answer];
  } else if (this.jump['_other']) {
    nextId = this.jump['_other'];
  }

  return nextId
};

QuestionModel.prototype.setAnswer = function setAnswer (answer) {
  if (this.type === QuestionType.Number && answer !== '' && !isNaN(+answer)) {
    answer = +answer;
  }

  this.answer = answer;
};

QuestionModel.prototype.setIndex = function setIndex (index) {
  if (!this.id) {
    this.id = 'q_' + index;
  }

  this.index = index;
};

QuestionModel.prototype.resetOptions = function resetOptions () {
    var this$1 = this;

  if (this.options) {
    var isArray = Array.isArray(this.answer);
    var numSelected = 0;

    this.options.forEach(function (o) {
      var optionValue = o.choiceValue();

      if (this$1.answer === optionValue || (isArray && this$1.answer.indexOf(optionValue) !== -1)) {
        o.selected = true;
        ++numSelected;
      }
    });

    if (this.allowOther) {
      var otherAnswer = null;

      if (isArray) {
        if (this.answer.length && this.answer.length !== numSelected) {
          otherAnswer = this.answer[this.answer.length - 1];
        }
      } else if (this.options.map(function (o) { return o.choiceValue(); }).indexOf(this.answer) === -1) {
        otherAnswer = this.answer;
      }

      if (otherAnswer !== null) {
        this.other = otherAnswer;
      }
    }
  }
};

/*
  Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
  https://github.com/ditdot-dev/vue-flow-form
  https://www.ditdot.hr/en
*/

var
  isIos = false,
  isMobile = false;

if (typeof navigator !== 'undefined' && typeof document !== 'undefined') {
  // Simple mobile device/tablet detection
  isIos = navigator.userAgent.match(/iphone|ipad|ipod/i) || (navigator.userAgent.indexOf('Mac') !== -1 && 'ontouchend' in document);
  isMobile = isIos || navigator.userAgent.match(/android/i);
}

// Mixin that adds `isMobile` and `isIos` data variables
var IsMobile = {
  data: function data() {
    return {
      isIos: isIos,
      isMobile: isMobile
    }
  }
};

//

var script = {
  name: 'FlowFormBaseType',
  props: {
    language: LanguageModel,
    question: QuestionModel,
    active: Boolean,
    value: [String, Array, Boolean, Number, Object]
  },
  mixins: [
    IsMobile ],
  data: function data() {
    return {
      dirty: false,
      dataValue: null,
      answer: null,
      enterPressed: false,
      allowedChars: null,
      alwaysAllowedKeys: ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace'],
      focused: false,
      canReceiveFocus: false
    }
  },
  mounted: function mounted() {
    if (this.question.answer) {
      this.dataValue = this.answer = this.question.answer;
    } else if (this.question.multiple) {
      this.dataValue = [];
    }
  },
  methods: {
    /**
     * This method can be overriden in custom components to
     * change the answer before going through validation.
     */
    fixAnswer: function fixAnswer(answer) {
      return answer
    },

    getElement: function getElement() {
      var el = this.$refs.input;

      // Sometimes the input is nested so we need to find it
      while (el && el.$el) {
        el = el.$el;
      }

      return el
    },

    setFocus: function setFocus() {
      this.focused = true;
    },

    // eslint-disable-next-line no-unused-vars
    unsetFocus: function unsetFocus($event) {
      this.focused = false;
    },

    focus: function focus() {
      if (!this.focused) {
        var el = this.getElement();

        el && el.focus();
      }
    },

    blur: function blur() {
      var el = this.getElement();

      el && el.blur();
    },

    onKeyDown: function onKeyDown($event) {
      this.enterPressed = false;
      clearTimeout(this.timeoutId);

      if ($event) {
        if ($event.key === 'Enter' && !$event.shiftKey) {
          this.unsetFocus();
        }

        if (this.allowedChars !== null) {
          // Check if the entered character is allowed.
          // We always allow keys from the alwaysAllowedKeys array.
          if (this.alwaysAllowedKeys.indexOf($event.key) === -1 && this.allowedChars.indexOf($event.key) === -1) {
            $event.preventDefault();
          }
        }
      }
    },

    onChange: function onChange($event) {
      this.dirty = true;
      this.dataValue = $event.target.value;

      this.onKeyDown();
      this.setAnswer(this.dataValue);
    },

    onEnter: function onEnter() {
      this._onEnter();
    },

    _onEnter: function _onEnter() {
      this.enterPressed = true;

      this.dataValue = this.fixAnswer(this.dataValue);
      this.setAnswer(this.dataValue);
      this.isValid() ? this.blur() : this.focus();
    },

    setAnswer: function setAnswer(answer) {
      this.question.setAnswer(answer);

      this.answer = this.question.answer;
      this.question.answered = this.isValid();

      this.$emit('input', this.answer);
    },

    showInvalid: function showInvalid() {
      return this.dirty && this.enterPressed && !this.isValid()
    },

    isValid: function isValid() {
      if (!this.question.required && !this.hasValue && this.dirty) {
        return true
      }

      if (this.validate()) {
        return true
      }

      return false
    },

    /**
     * This method validates the input and is meant to be overriden
     * in custom question types.
     */
    validate: function validate() {
      return !this.question.required || this.hasValue
    }
  },

  computed: {
    placeholder: function placeholder() {
      return this.question.placeholder || this.language.placeholder
    },

    hasValue: function hasValue() {
      if (this.dataValue !== null) {
        var v = this.dataValue;

        if (v.trim) {
          // Don't allow empty strings
          return v.trim().length > 0
        }

        if (Array.isArray(v)) {
          // Don't allow empty arrays
          return v.length > 0
        }

        // All other non-null values are allowed to pass through
        return true
      }

      return false
    }
  }
};

function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
    if (typeof shadowMode !== 'boolean') {
        createInjectorSSR = createInjector;
        createInjector = shadowMode;
        shadowMode = false;
    }
    // Vue.extend constructor export interop.
    var options = typeof script === 'function' ? script.options : script;
    // render functions
    if (template && template.render) {
        options.render = template.render;
        options.staticRenderFns = template.staticRenderFns;
        options._compiled = true;
        // functional template
        if (isFunctionalTemplate) {
            options.functional = true;
        }
    }
    // scopedId
    if (scopeId) {
        options._scopeId = scopeId;
    }
    var hook;
    if (moduleIdentifier) {
        // server build
        hook = function (context) {
            // 2.3 injection
            context =
                context || // cached call
                    (this.$vnode && this.$vnode.ssrContext) || // stateful
                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
            // 2.2 with runInNewContext: true
            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
                context = __VUE_SSR_CONTEXT__;
            }
            // inject component styles
            if (style) {
                style.call(this, createInjectorSSR(context));
            }
            // register component module identifier for async chunk inference
            if (context && context._registeredComponents) {
                context._registeredComponents.add(moduleIdentifier);
            }
        };
        // used by ssr in case component is cached and beforeCreate
        // never gets called
        options._ssrRegister = hook;
    }
    else if (style) {
        hook = shadowMode
            ? function (context) {
                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
            }
            : function (context) {
                style.call(this, createInjector(context));
            };
    }
    if (hook) {
        if (options.functional) {
            // register for functional component in vue file
            var originalRender = options.render;
            options.render = function renderWithStyleInjection(h, context) {
                hook.call(context);
                return originalRender(h, context);
            };
        }
        else {
            // inject component registration as beforeCreate hook
            var existing = options.beforeCreate;
            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
        }
    }
    return script;
}

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

  /* style */
  var __vue_inject_styles__ = undefined;
  /* scoped */
  var __vue_scope_id__ = undefined;
  /* module identifier */
  var __vue_module_identifier__ = undefined;
  /* functional template */
  var __vue_is_functional_template__ = undefined;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  var __vue_component__ = /*#__PURE__*/normalizeComponent(
    {},
    __vue_inject_styles__,
    __vue_script__,
    __vue_scope_id__,
    __vue_is_functional_template__,
    __vue_module_identifier__,
    false,
    undefined,
    undefined,
    undefined
  );

//

var script$1 = {
  extends: __vue_component__,
  name: QuestionType.Dropdown,
  computed: {
    answerLabel: function answerLabel() {
      for (var i = 0; i < this.question.options.length; i++) {
        var option = this.question.options[i];

        if (option.choiceValue() === this.dataValue) {
          return option.choiceLabel()
        }
      }

      return this.question.placeholder
    }
  },
   methods: {
    onKeyDownListener: function onKeyDownListener($event) {
      if ($event.key === 'ArrowDown' || $event.key === 'ArrowUp') {
        this.setAnswer(this.dataValue);
      } else if ($event.key === 'Enter' && this.hasValue) {
        this.focused = false;
        this.blur();
      }
    },
    onKeyUpListener: function onKeyUpListener($event) {
      if ($event.key === 'Enter' && this.isValid()) {
        $event.stopPropagation();
        this._onEnter();
        this.$emit('next');
      }
    }
  }
};

/* script */
var __vue_script__$1 = script$1;

/* template */
var __vue_render__ = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("span", { staticClass: "faux-form" }, [
    _c(
      "select",
      {
        ref: "input",
        attrs: { required: _vm.question.required },
        domProps: { value: _vm.dataValue },
        on: {
          change: _vm.onChange,
          keydown: _vm.onKeyDownListener,
          keyup: _vm.onKeyUpListener
        }
      },
      [
        _vm.question.required
          ? _c(
              "option",
              {
                attrs: {
                  label: " ",
                  value: "",
                  disabled: "",
                  selected: "",
                  hidden: ""
                }
              },
              [_vm._v(" ")]
            )
          : _vm._e(),
        _vm._v(" "),
        _vm._l(_vm.question.options, function(option, index) {
          return _c(
            "option",
            {
              key: "o" + index,
              attrs: { disabled: option.disabled },
              domProps: { value: option.choiceValue() }
            },
            [_vm._v("\n      " + _vm._s(option.choiceLabel()) + "\n    ")]
          )
        })
      ],
      2
    ),
    _vm._v(" "),
    _c("span", [
      _c(
        "span",
        {
          staticClass: "f-empty",
          class: {
            "f-answered": this.question.answer && this.question.answered
          }
        },
        [_vm._v(_vm._s(_vm.answerLabel))]
      ),
      _vm._v(" "),
      _c("span", { staticClass: "f-arrow-down" }, [
        _c(
          "svg",
          {
            attrs: {
              version: "1.1",
              id: "Capa_1",
              xmlns: "http://www.w3.org/2000/svg",
              "xmlns:xlink": "http://www.w3.org/1999/xlink",
              x: "0px",
              y: "0px",
              viewBox: "-163 254.1 284.9 284.9",
              "xml:space": "preserve"
            }
          },
          [
            _c("g", [
              _c("path", {
                attrs: {
                  d:
                    "M119.1,330.6l-14.3-14.3c-1.9-1.9-4.1-2.9-6.6-2.9c-2.5,0-4.7,1-6.6,2.9L-20.5,428.5l-112.2-112.2c-1.9-1.9-4.1-2.9-6.6-2.9c-2.5,0-4.7,0.9-6.6,2.9l-14.3,14.3c-1.9,1.9-2.9,4.1-2.9,6.6c0,2.5,1,4.7,2.9,6.6l133,133c1.9,1.9,4.1,2.9,6.6,2.9s4.7-1,6.6-2.9l133.1-133c1.9-1.9,2.8-4.1,2.8-6.6C121.9,334.7,121,332.5,119.1,330.6z"
                }
              })
            ])
          ]
        )
      ])
    ])
  ])
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;

  /* style */
  var __vue_inject_styles__$1 = undefined;
  /* scoped */
  var __vue_scope_id__$1 = undefined;
  /* module identifier */
  var __vue_module_identifier__$1 = undefined;
  /* functional template */
  var __vue_is_functional_template__$1 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

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

function maskit (value, mask, masked, tokens) {
  if ( masked === void 0 ) masked = true;

  value = value || '';
  mask = mask || '';
  var iMask = 0;
  var iValue = 0;
  var output = '';
  while (iMask < mask.length && iValue < value.length) {
    var cMask = mask[iMask];
    var masker = tokens[cMask];
    var cValue = value[iValue];
    if (masker && !masker.escape) {
      if (masker.pattern.test(cValue)) {
      	output += masker.transform ? masker.transform(cValue) : cValue;
        iMask++;
      }
      iValue++;
    } else {
      if (masker && masker.escape) {
        iMask++; // take the next mask char and treat it as char
        cMask = mask[iMask];
      }
      if (masked) { output += cMask; }
      if (cValue === cMask) { iValue++; } // user typed the same char
      iMask++;
    }
  }

  // fix mask that ends with a char: (#)
  var restOutput = '';
  while (iMask < mask.length && masked) {
    var cMask = mask[iMask];
    if (tokens[cMask]) {
      restOutput = '';
      break
    }
    restOutput += cMask;
    iMask++;
  }

  return output + restOutput
}

function dynamicMask (maskit, masks, tokens) {
  masks = masks.sort(function (a, b) { return a.length - b.length; });
  return function (value, mask, masked) {
    if ( masked === void 0 ) masked = true;

    var i = 0;
    while (i < masks.length) {
      var currentMask = masks[i];
      i++;
      var nextMask = masks[i];
      if (! (nextMask && maskit(value, nextMask, true, tokens).length > currentMask.length) ) {
        return maskit(value, currentMask, masked, tokens)
      }
    }
    return '' // empty masks
  }
}

// Facade to maskit/dynamicMask when mask is String or Array
function masker (value, mask, masked, tokens) {
  if ( masked === void 0 ) masked = true;

  return Array.isArray(mask)
         ? dynamicMask(maskit, mask, tokens)(value, mask, masked, tokens)
         : maskit(value, mask, masked, tokens)
}

var tokens = {
  '#': {pattern: /\d/},
  'X': {pattern: /[0-9a-zA-Z]/},
  'S': {pattern: /[a-zA-Z]/},
  'A': {pattern: /[a-zA-Z]/, transform: function (v) { return v.toLocaleUpperCase(); }},
  'a': {pattern: /[a-zA-Z]/, transform: function (v) { return v.toLocaleLowerCase(); }},
  '!': {escape: true}
};

// https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#The_old-fashioned_way
function event (name) {
  var evt = document.createEvent('Event');
  evt.initEvent(name, true, true);
  return evt
}

function mask (el, binding) {
  var config = binding.value;
  if (Array.isArray(config) || typeof config === 'string') {
    config = {
      mask: config,
      tokens: tokens
    };
  }

  if (el.tagName.toLocaleUpperCase() !== 'INPUT') {
    var els = el.getElementsByTagName('input');
    if (els.length !== 1) {
      throw new Error("v-mask directive requires 1 input, found " + els.length)
    } else {
      el = els[0];
    }
  }

  el.oninput = function (evt) {
    if (!evt.isTrusted) { return } // avoid infinite loop
    /* other properties to try to diferentiate InputEvent of Event (custom)
    InputEvent (native)
      cancelable: false
      isTrusted: true

      composed: true
      isComposing: false
      which: 0

    Event (custom)
      cancelable: true
      isTrusted: false
    */
    // by default, keep cursor at same position as before the mask
    var position = el.selectionEnd;
    // save the character just inserted
    var digit = el.value[position-1];
    el.value = masker(el.value, config.mask, true, config.tokens);
    // if the digit was changed, increment position until find the digit again
    while (position < el.value.length && el.value.charAt(position-1) !== digit) {
      position++;
    }
    if (el === document.activeElement) {
      el.setSelectionRange(position, position);
      setTimeout(function () {
        el.setSelectionRange(position, position);
      }, 0);
    }
    el.dispatchEvent(event('input'));
  };

  var newDisplay = masker(el.value, config.mask, true, config.tokens);
  if (newDisplay !== el.value) {
    el.value = newDisplay;
    el.dispatchEvent(event('input'));
  }
}

//

var script$2 = {
  name: 'TheMask',
  props: {
    value: [String, Number],
    mask: {
      type: [String, Array],
      required: true
    },
    masked: { // by default emits the value unformatted, change to true to format with the mask
      type: Boolean,
      default: false // raw
    },
    tokens: {
      type: Object,
      default: function () { return tokens; }
    }
  },
  directives: {mask: mask},
  data: function data () {
    return {
      lastValue: null, // avoid unecessary emit when has no change
      display: this.value
    }
  },
  watch : {
    value: function value (newValue) {
      if (newValue !== this.lastValue) {
        this.display = newValue;
      }
    },
    masked: function masked () {
      this.refresh(this.display);
    }
  },
  computed: {
    config: function config () {
      return {
        mask: this.mask,
        tokens: this.tokens,
        masked: this.masked
      }
    }
  },
  methods: {
    onInput: function onInput (e) {
      if (e.isTrusted) { return } // ignore native event
      this.refresh(e.target.value);
    },

    refresh: function refresh (value) {
      this.display = value;
      var value = masker(value, this.mask, this.masked, this.tokens);
      if (value !== this.lastValue) {
        this.lastValue = value;
        this.$emit('input', value);
      }
    }
  }
};

/* script */
var __vue_script__$2 = script$2;

/* template */
var __vue_render__$1 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("input", {
    directives: [
      {
        name: "mask",
        rawName: "v-mask",
        value: _vm.config,
        expression: "config"
      }
    ],
    attrs: { type: "text" },
    domProps: { value: _vm.display },
    on: { input: _vm.onInput }
  })
};
var __vue_staticRenderFns__$1 = [];
__vue_render__$1._withStripped = true;

  /* style */
  var __vue_inject_styles__$2 = undefined;
  /* scoped */
  var __vue_scope_id__$2 = undefined;
  /* module identifier */
  var __vue_module_identifier__$2 = undefined;
  /* functional template */
  var __vue_is_functional_template__$2 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

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

//

var script$3 = {
  extends: __vue_component__,
  name: QuestionType.Text,
  components: {
    TheMask: __vue_component__$2
  },

  data: function data() {
    return {
      inputType: 'text', 
      canReceiveFocus: true
    }
  }, 

  methods: {
    validate: function validate() {
      var this$1 = this;

      if (this.question.mask && this.hasValue) {
        if (Array.isArray(this.question.mask)) {
          return this.question.mask.some(function (mask) { return mask.length === this$1.dataValue.length; })
        }

        return this.dataValue.length === this.question.mask.length
      }

      return !this.question.required || this.hasValue
    }
  }
};

/* script */
var __vue_script__$3 = script$3;

/* template */
var __vue_render__$2 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "span",
    {
      attrs: {
        "data-placeholder": _vm.inputType === "date" ? _vm.placeholder : null
      }
    },
    [
      _vm.question.mask
        ? _c("the-mask", {
            ref: "input",
            attrs: {
              mask: _vm.question.mask,
              masked: false,
              type: _vm.inputType,
              value: _vm.value,
              required: _vm.question.required,
              placeholder: _vm.placeholder,
              min: _vm.question.min,
              max: _vm.question.max
            },
            on: { change: _vm.onChange },
            nativeOn: {
              keydown: function($event) {
                return _vm.onKeyDown.apply(null, arguments)
              },
              keyup: [
                function($event) {
                  return _vm.onChange.apply(null, arguments)
                },
                function($event) {
                  if (
                    !$event.type.indexOf("key") &&
                    _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
                  ) {
                    return null
                  }
                  $event.preventDefault();
                  return _vm.onEnter.apply(null, arguments)
                },
                function($event) {
                  if (
                    !$event.type.indexOf("key") &&
                    _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")
                  ) {
                    return null
                  }
                  $event.preventDefault();
                  return _vm.onEnter.apply(null, arguments)
                }
              ],
              focus: function($event) {
                return _vm.setFocus.apply(null, arguments)
              },
              blur: function($event) {
                return _vm.unsetFocus.apply(null, arguments)
              }
            }
          })
        : _c("input", {
            ref: "input",
            attrs: {
              type: _vm.inputType,
              required: _vm.question.required,
              min: _vm.question.min,
              max: _vm.question.max,
              placeholder: _vm.placeholder
            },
            domProps: { value: _vm.value },
            on: {
              keydown: _vm.onKeyDown,
              keyup: [
                _vm.onChange,
                function($event) {
                  if (
                    !$event.type.indexOf("key") &&
                    _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
                  ) {
                    return null
                  }
                  $event.preventDefault();
                  return _vm.onEnter.apply(null, arguments)
                },
                function($event) {
                  if (
                    !$event.type.indexOf("key") &&
                    _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")
                  ) {
                    return null
                  }
                  $event.preventDefault();
                  return _vm.onEnter.apply(null, arguments)
                }
              ],
              focus: _vm.setFocus,
              blur: _vm.unsetFocus,
              change: _vm.onChange
            }
          })
    ],
    1
  )
};
var __vue_staticRenderFns__$2 = [];
__vue_render__$2._withStripped = true;

  /* style */
  var __vue_inject_styles__$3 = undefined;
  /* scoped */
  var __vue_scope_id__$3 = undefined;
  /* module identifier */
  var __vue_module_identifier__$3 = undefined;
  /* functional template */
  var __vue_is_functional_template__$3 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

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

var script$4 = {
  extends: __vue_component__$3,
  name: QuestionType.Email,
  data: function data() {
    return {
      inputType: 'email'
    }
  },
  methods: {
    validate: function validate() {
      if (this.hasValue) {
        return /^[^@]+@.+[^.]$/.test(this.dataValue)
      }

      return !this.question.required
    }
  }
};

/* script */
var __vue_script__$4 = script$4;

/* template */

  /* style */
  var __vue_inject_styles__$4 = undefined;
  /* scoped */
  var __vue_scope_id__$4 = undefined;
  /* module identifier */
  var __vue_module_identifier__$4 = undefined;
  /* functional template */
  var __vue_is_functional_template__$4 = undefined;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

  
  var __vue_component__$4 = /*#__PURE__*/normalizeComponent(
    {},
    __vue_inject_styles__$4,
    __vue_script__$4,
    __vue_scope_id__$4,
    __vue_is_functional_template__$4,
    __vue_module_identifier__$4,
    false,
    undefined,
    undefined,
    undefined
  );

//
//
//
//
//
//
//

var script$5 = {
  name: 'TextareaAutosize',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    autosize: {
      type: Boolean,
      default: true
    },
    minHeight: {
      type: [Number],
      'default': null
    },
    maxHeight: {
      type: [Number],
      'default': null
    },
    /*
     * Force !important for style properties
     */
    important: {
      type: [Boolean, Array],
      default: false
    }
  },
  data: function data () {
    return {
      // data property for v-model binding with real textarea tag
      val: null,
      // works when content height becomes more then value of the maxHeight property
      maxHeightScroll: false,
      height: 'auto'
    }
  },
  computed: {
    computedStyles: function computedStyles () {
      if (!this.autosize) { return {} }
      return {
        resize: !this.isResizeImportant ? 'none' : 'none !important',
        height: this.height,
        overflow: this.maxHeightScroll ? 'auto' : (!this.isOverflowImportant ? 'hidden' : 'hidden !important')
      }
    },
    isResizeImportant: function isResizeImportant () {
      var imp = this.important;
      return imp === true || (Array.isArray(imp) && imp.includes('resize'))
    },
    isOverflowImportant: function isOverflowImportant () {
      var imp = this.important;
      return imp === true || (Array.isArray(imp) && imp.includes('overflow'))
    },
    isHeightImportant: function isHeightImportant () {
      var imp = this.important;
      return imp === true || (Array.isArray(imp) && imp.includes('height'))
    }
  },
  watch: {
    value: function value (val) {
      this.val = val;
    },
    val: function val (val$1) {
      this.$nextTick(this.resize);
      this.$emit('input', val$1);
    },
    minHeight: function minHeight () {
      this.$nextTick(this.resize);
    },
    maxHeight: function maxHeight () {
      this.$nextTick(this.resize);
    },
    autosize: function autosize (val) {
      if (val) { this.resize(); }
    }
  },
  methods: {
    resize: function resize () {
      var this$1 = this;

      var important = this.isHeightImportant ? 'important' : '';
      this.height = "auto" + (important ? ' !important' : '');
      this.$nextTick(function () {
        var contentHeight = this$1.$el.scrollHeight + 1;

        if (this$1.minHeight) {
          contentHeight = contentHeight < this$1.minHeight ? this$1.minHeight : contentHeight;
        }

        if (this$1.maxHeight) {
          if (contentHeight > this$1.maxHeight) {
            contentHeight = this$1.maxHeight;
            this$1.maxHeightScroll = true;
          } else {
            this$1.maxHeightScroll = false;
          }
        }

        var heightVal = contentHeight + 'px';
        this$1.height = "" + heightVal + (important ? ' !important' : '');
      });

      return this
    }
  },
  created: function created () {
    this.val = this.value;
  },
  mounted: function mounted () {
    this.resize();
  }
};

/* script */
var __vue_script__$5 = script$5;

/* template */
var __vue_render__$3 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("textarea", {
    directives: [
      { name: "model", rawName: "v-model", value: _vm.val, expression: "val" }
    ],
    style: _vm.computedStyles,
    domProps: { value: _vm.val },
    on: {
      focus: _vm.resize,
      input: function($event) {
        if ($event.target.composing) {
          return
        }
        _vm.val = $event.target.value;
      }
    }
  })
};
var __vue_staticRenderFns__$3 = [];
__vue_render__$3._withStripped = true;

  /* style */
  var __vue_inject_styles__$5 = undefined;
  /* scoped */
  var __vue_scope_id__$5 = undefined;
  /* module identifier */
  var __vue_module_identifier__$5 = undefined;
  /* functional template */
  var __vue_is_functional_template__$5 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

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

//

var script$6 = {
  extends: __vue_component__,
  name: QuestionType.LongText,
  components: {
    TextareaAutosize: __vue_component__$5
  },
  data: function data () {
    return {
      canReceiveFocus: true
    }
  },
  mounted: function mounted() {
    window.addEventListener('resize', this.onResizeListener);
  },
  beforeDestroy: function beforeDestroy() {
    window.removeEventListener('resize', this.onResizeListener);
  },
  methods: {
    onResizeListener: function onResizeListener() {
      this.$refs.input.resize();
    },

    unsetFocus: function unsetFocus($event) {
      if ($event || !this.isMobile) {
        this.focused = false;
      }
    },

    onEnterDown: function onEnterDown($event) {
      if (!this.isMobile) {
        $event.preventDefault();
      }
    },

    onEnter: function onEnter() {
      if (!this.isMobile) {
        this._onEnter();
      }
    }
  }
};

/* script */
var __vue_script__$6 = script$6;

/* template */
var __vue_render__$4 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c(
    "span",
    [
      _c("textarea-autosize", {
        ref: "input",
        attrs: {
          rows: "1",
          value: _vm.value,
          required: _vm.question.required,
          placeholder: _vm.placeholder
        },
        nativeOn: {
          keydown: [
            function($event) {
              return _vm.onKeyDown.apply(null, arguments)
            },
            function($event) {
              if (
                !$event.type.indexOf("key") &&
                _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
              ) {
                return null
              }
              if (
                $event.ctrlKey ||
                $event.shiftKey ||
                $event.altKey ||
                $event.metaKey
              ) {
                return null
              }
              return _vm.onEnterDown.apply(null, arguments)
            }
          ],
          keyup: [
            function($event) {
              return _vm.onChange.apply(null, arguments)
            },
            function($event) {
              if (
                !$event.type.indexOf("key") &&
                _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")
              ) {
                return null
              }
              if (
                $event.ctrlKey ||
                $event.shiftKey ||
                $event.altKey ||
                $event.metaKey
              ) {
                return null
              }
              $event.preventDefault();
              return _vm.onEnter.apply(null, arguments)
            },
            function($event) {
              if (
                !$event.type.indexOf("key") &&
                _vm._k($event.keyCode, "tab", 9, $event.key, "Tab")
              ) {
                return null
              }
              $event.preventDefault();
              return _vm.onEnter.apply(null, arguments)
            }
          ],
          focus: function($event) {
            return _vm.setFocus.apply(null, arguments)
          },
          blur: function($event) {
            return _vm.unsetFocus.apply(null, arguments)
          }
        }
      })
    ],
    1
  )
};
var __vue_staticRenderFns__$4 = [];
__vue_render__$4._withStripped = true;

  /* style */
  var __vue_inject_styles__$6 = undefined;
  /* scoped */
  var __vue_scope_id__$6 = undefined;
  /* module identifier */
  var __vue_module_identifier__$6 = undefined;
  /* functional template */
  var __vue_is_functional_template__$6 = false;
  /* style inject */
  
  /* style inject SSR */
  
  /* style inject shadow dom */
  

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

//

var script$7 = {
  extends: __vue_component__,
  name: QuestionType.MultipleChoice,

  data: function data() {
    return {
      editingOther: false,
      hasImages: false
    }
  },

  mounted: function mounted() {
    this.addKeyListener();
  },

  beforeDestroy: function beforeDestroy() {
    this.removeKeyListener();
  },

  watch: {
    active: function active(value) {
      if (value) {
        this.addKeyListener();

        if (this.question.multiple && this.question.answered) {
          this.enterPressed = false;
        }
      } else {
        this.removeKeyListener();
      }
    }
  },

  methods: {
    addKeyListener: function addKeyListener() {
      this.removeKeyListener();
      document.addEventListener('keyup', this.onKeyListener);
    },

    removeKeyListener: function removeKeyListener() {
      document.removeEventListener('keyup', this.onKeyListener);
    },

    /**
     * Listens for keyboard events (A, B, C, ...)
     */
    onKeyListener: function onKeyListener($event) {
      if (this.active && !this.editingOther && $event.key && $event.key.length === 1) {
        var keyCode = $event.key.toUpperCase().charCodeAt(0);

        if (keyCode >= 65 && keyCode <= 90) {
          var index = keyCode - 65;

          if (index > -1) {
            var option = this.question.options[index];

            if (option && !this.question.comments) {
              this.toggleAnswer(option);
            } else if (this.question.allowOther && index === this.question.options.length) {
              this.startEditOther();
            }
          }
        }
      }
    },

    getLabel: function getLabel(index) {
      return this.language.ariaMultipleChoice.replace(':letter', this.getToggleKey(index))
    },

    getToggleKey: function getToggleKey(index) {
      var key = 65 + index;

      if (key <= 90) {
        return String.fromCharCode(key)
      }

      return ''
    },

    toggleAnswer: function toggleAnswer(option) {
      if (!this.question.multiple) {
        if (this.question.allowOther) {
          this.question.other = this.dataValue = null;
          this.setAnswer(this.dataValue);
        }

        for (var i = 0; i < this.question.options.length; i++) {
          var o = this.question.options[i];

          if (o.selected) {
            this._toggleAnswer(o);
          }
        }
      }

      this._toggleAnswer(option);
    },

    _toggleAnswer: function _toggleAnswer(option) {
      var optionValue = option.choiceValue();

      option.toggle();

      if (this.question.multiple) {
        this.enterPressed = false;

        if (!option.selected) {
          this._removeAnswer(optionValue);
        } else if (this.dataValue.indexOf(optionValue) === -1) {
          this.dataValue.push(optionValue);
        }
      } else {
        this.dataValue = option.selected ? optionValue : null;
      }

      if (this.isValid() && this.question.nextStepOnAnswer && !this.question.multiple) {
        this.$emit('next');
      }

      this.setAnswer(this.dataValue);
    },

    _removeAnswer: function _removeAnswer(value) {
      var index = this.dataValue.indexOf(value);

      if (index !== -1) {
        this.dataValue.splice(index, 1);
      }
    },

    startEditOther: function startEditOther() {
      var this$1 = this;

      this.editingOther = true;
      this.enterPressed = false;

      this.$nextTick(function () {
        this$1.$refs.otherInput.focus();
      });
    },

    onChangeOther: function onChangeOther() {
      if (this.editingOther) {
        var
          value = [],
          self = this;

        this.question.options.forEach(function(option) {
          if (option.selected) {
            if (self.question.multiple) {
              value.push(option.choiceValue());
            } else {
              option.toggle();
            }
          }
        });

        if (this.question.other && this.question.multiple) {
          value.push(this.question.other);
        } else if (!this.question.multiple) {
          value = this.question.other;
        }

        this.dataValue = value;
        this.setAnswer(this.dataValue);
      }
    },

    stopEditOther: function stopEditOther() {
      this.editingOther = false;
    }
  },

  computed: {
    hasValue: function hasValue() {
      if (this.question.options.filter(function (o) { return o.selected; }).length) {
        return true
      }

      if (this.question.allowOther) {
        return this.question.other && this.question.other.trim().length > 0
      }

      return false
    }
  }
};

/* script */
var __vue_script__$7 = script$7;

/* template */
var __vue_render__$5 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("div", { staticClass: "f-radios-wrap" }, [
    _c(
      "ul",
      {
        staticClass: "f-radios",
        class: { "f-multiple": _vm.question.multiple },
        attrs: { role: "listbox" }
      },
      [
        _vm._l(_vm.question.options, function(option, index) {
          return _c(
            "li",
            {
              key: "m" + index,
              class: { "f-selected": option.selected },
              attrs: { "aria-label": _vm.getLabel(index), role: "option" },
              on: {
                click: function($event) {
                  $event.preventDefault();
                  return _vm.toggleAnswer(option)
                }
              }
            },
            [
              _vm.hasImages && option.imageSrc
                ? _c("span", { staticClass: "f-image" }, [
                    _c("img", {
                      attrs: { src: option.imageSrc, alt: option.imageAlt }
                    })
                  ])
                : _vm._e(),
              _vm._v(" "),
              _c("div", { staticClass: "f-label-wrap" }, [
                _c("span", { staticClass: "f-key" }, [
                  _vm._v(_vm._s(_vm.getToggleKey(index)))
                ]),
                _vm._v(" "),
                option.choiceLabel()
                  ? _c("span", { staticClass: "f-label" }, [
                      _vm._v(_vm._s(option.choiceLabel()))
                    ])
                  : _vm._e()
              ])
            ]
          )
        }),
        _vm._v(" "),
        !_vm.hasImages && _vm.question.allowOther
          ? _c(
              "li",
              {
                staticClass: "f-other",
                class: {
                  "f-selected": _vm.question.other,
                  "f-focus": _vm.editingOther
                },
                attrs: {
                  "aria-label": _vm.language.ariaTypeAnswer,
                  role: "option"
                },
                on: {
                  click: function($event) {
                    $event.preventDefault();
                    return _vm.startEditOther.apply(null, arguments)
                  }
                }
              },
              [
                _c("div", { staticClass: "f-label-wrap" }, [
                  !_vm.editingOther
                    ? _c("span", { staticClass: "f-key" }, [
                        _vm._v(
                          _vm._s(_vm.getToggleKey(_vm.question.options.length))
                        )
                      ])
                    : _vm._e(),
                  _vm._v(" "),
                  _vm.editingOther
                    ? _c("input", {
                        directives: [
                          {
                            name: "model",
                            rawName: "v-model",
                            value: _vm.question.other,
                            expression: "question.other"
                          }
                        ],
                        ref: "otherInput",
                        attrs: { type: "text", maxlength: "256" },
                        domProps: { value: _vm.question.other },
                        on: {
                          blur: _vm.stopEditOther,
                          keyup: [
                            function($event) {
                              if (
                                !$event.type.indexOf("key") &&
                                _vm._k(
                                  $event.keyCode,
                                  "enter",
                                  13,
                                  $event.key,
                                  "Enter"
                                )
                              ) {
                                return null
                              }
                              $event.preventDefault();
                              return _vm.stopEditOther.apply(null, arguments)
                            },
                            _vm.onChangeOther
                          ],
                          change: _vm.onChangeOther,
                          input: function($event) {
                            if ($event.target.composing) {
                              return
                            }
                            _vm.$set(_vm.question, "other", $event.target.value);
                          }
                        }
                      })
                    : _vm.question.other
                    ? _c("span", { staticClass: "f-selected" }, [
                        _c("span", { staticClass: