@sheperd/sheperdsurvey
Version:
Create conversational dnpconditional-logic forms with Vue.js. sssgit
1,654 lines (1,411 loc) • 457 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var require$$0 = require('vue');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
/*!
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 = 'Please choose all that apply';
this.multipleChoiceHelpTextSingle = 'Please 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';
this.errorAllowedFileTypes = 'Invalid file type. Allowed file types: :fileTypes.';
this.errorMaxFileSize = 'File(s) too large. Maximum allowed file size: :size.';
this.errorMinFiles = 'Too few files added. Minimum allowed files: :min.';
this.errorMaxFiles = 'Too many files added. Maximum allowed files: :max.';
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, replacements) {
var this$1$1 = this;
return string.replace(/:(\w+)/g, function (match, word) {
if (this$1$1[word]) {
return '<span class="f-string-em">' + this$1$1[word] + '</span>'
} else if (replacements && replacements[word]) {
return replacements[word]
}
return match
})
};
LanguageModel.prototype.formatFileSize = function formatFileSize (bytes) {
var
units = ['B', 'kB', 'MB', 'GB', 'TB'],
i = bytes > 0 ? Math.floor(Math.log(bytes) / Math.log(1024)) : 0;
return (bytes / Math.pow(1024, i)).toFixed(2) * 1 + ' ' + units[i];
};
/*
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',
File: 'FlowFormFileType',
LongText: 'FlowFormLongTextType',
MultipleChoice: 'FlowFormMultipleChoiceType',
Ranking: 'FlowFormRankingType',
MultiplePictureChoice: 'FlowFormMultiplePictureChoiceType',
Number: 'FlowFormNumberType',
Password: 'FlowFormPasswordType',
Phone: 'FlowFormPhoneType',
SectionBreak: 'FlowFormSectionBreakType',
Text: 'FlowFormTextType',
Url: 'FlowFormUrlType',
Matrix: 'FlowFormMatrixType',
AutoComplete: 'FlowFormAutoCompleteType'
});
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 LinkOption = function LinkOption(options) {
this.url = '';
this.text = '';
this.target = '_blank';
Object.assign(this, options);
};
var MatrixColumn = function MatrixColumn(options) {
this.value = '';
this.label = '';
Object.assign(this, options);
};
var MatrixRow = function MatrixRow(options) {
this.id = '';
this.label = '';
Object.assign(this, options);
};
var QuestionModel = function QuestionModel(options) {
// Make sure the options variable is an object
options = options || {};
this.id = null;
this.answer = null;
this.answerOptionId = 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.maxLength = null;
this.nextStepOnAnswer = false;
this.accept = null;
this.maxSize = null;
this.rows = [];
this.columns = [];
Object.assign(this, options);
// 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.type !== QuestionType.Matrix && this.multiple && !Array.isArray(this.answer)) {
this.answer = this.answer ? [this.answer] : [];
}
// Check if we have an answer already (when we have a pre-filled form)
// and set the answered property accordingly
if (!this.required && typeof options.answer !== 'undefined') {
this.answered = true;
} else if (this.answer && (!this.multiple || this.answer.length)) {
this.answered = true;
}
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.setAnswerOptionId = function setAnswerOptionId (answerOptionId) {
if (this.type === QuestionType.Number && answerOptionId !== '' && !isNaN(+answerOptionId)) {
answerOptionId = +answerOptionId;
}
this.answerOptionId = answerOptionId;
};
QuestionModel.prototype.setIndex = function setIndex (index) {
if (!this.id) {
this.id = 'q_' + index;
}
this.index = index;
};
QuestionModel.prototype.resetOptions = function resetOptions () {
var this$1$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$1.answer === optionValue || (isArray && this$1$1.answer.indexOf(optionValue) !== -1)) {
o.selected = true;
++numSelected;
} else {
o.selected = false;
}
});
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;
}
}
}
};
QuestionModel.prototype.resetAnswer = function resetAnswer () {
this.answered = false;
this.answer = this.multiple ? [] : null;
this.answerOptionId = this.multiple ? [] : null;
this.other = null;
this.resetOptions();
};
QuestionModel.prototype.isMultipleChoiceType = function isMultipleChoiceType () {
return [QuestionType.MultipleChoice, QuestionType.MultiplePictureChoice ].includes(this.type)
};
/*
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$l = {
name: 'FlowFormBaseType',
props: {
language: LanguageModel,
question: QuestionModel,
active: Boolean,
disabled: Boolean,
modelValue: [String, Array, Boolean, Number, Object]
},
mixins: [
IsMobile ],
data: function data() {
return {
dirty: false,
dataValue: null,
dataId: null,
answer: null,
enterPressed: false,
allowedChars: null,
alwaysAllowedKeys: ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace'],
focused: false,
canReceiveFocus: false,
errorMessage: null
}
},
mounted: function mounted() {
if (this.question.answer) {
this.dataValue = this.answer = this.question.answer;
this.dataId = this.answerOptionId = this.question.answerOptionId;
} else if (this.question.multiple || this.question.type == 'FlowFormRankingType') {
this.dataValue = [];
this.dataId = [];
}
},
methods: {
/**
* This method can be overriden in custom components to
* change the answer before going through validation.
*/
fixAnswer: function fixAnswer(answer) {
return answer
},
fixAnswerOptionId: function fixAnswerOptionId(answerOptionId) {
return answerOptionId
},
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.dataId = $event.target.id;
this.onKeyDown();
this.setAnswer(this.dataValue);
this.setAnswerOptionId(this.dataId);
},
onEnter: function onEnter() {
this._onEnter();
},
_onEnter: function _onEnter() {
this.enterPressed = true;
this.dataValue = this.fixAnswer(this.dataValue);
this.dataId = this.fixAnswerOptionId(this.dataId);
this.setAnswer(this.dataValue);
this.setAnswerOptionId(this.dataId);
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('update:modelValue', this.answer);
},
setAnswerOptionId: function setAnswerOptionId(answerOptionId) {
this.question.setAnswerOptionId(answerOptionId);
this.answerOptionId = this.question.answerOptionId;
},
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
}
}
};
script$l.__file = "src/components/QuestionTypes/BaseType.vue";
var script$k = {
extends: script$l,
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() && !this.disabled) {
$event.stopPropagation();
this._onEnter();
this.$emit('next');
}
}
}
};
var _hoisted_1$9 = { class: "faux-form" };
var _hoisted_2$7 = ["value", "required"];
var _hoisted_3$5 = {
key: 0,
label: " ",
value: "",
disabled: "",
selected: "",
hidden: ""
};
var _hoisted_4$5 = ["disabled", "value"];
var _hoisted_5$4 = /*#__PURE__*/require$$0.createElementVNode("span", { class: "f-arrow-down" }, [
/*#__PURE__*/require$$0.createElementVNode("svg", {
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",
style: "",
"xml:space": "preserve"
}, [
/*#__PURE__*/require$$0.createElementVNode("g", null, [
/*#__PURE__*/require$$0.createElementVNode("path", { 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" })
])
])
], -1 /* HOISTED */);
function render$c(_ctx, _cache, $props, $setup, $data, $options) {
return (require$$0.openBlock(), require$$0.createElementBlock("span", _hoisted_1$9, [
require$$0.createElementVNode("select", {
ref: "input",
class: "",
value: _ctx.dataValue,
onChange: _cache[0] || (_cache[0] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return (_ctx.onChange && _ctx.onChange.apply(_ctx, args));
}),
onKeydown: _cache[1] || (_cache[1] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.onKeyDownListener && $options.onKeyDownListener.apply($options, args));
}),
onKeyup: _cache[2] || (_cache[2] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.onKeyUpListener && $options.onKeyUpListener.apply($options, args));
}),
required: _ctx.question.required
}, [
(_ctx.question.required)
? (require$$0.openBlock(), require$$0.createElementBlock("option", _hoisted_3$5, " "))
: require$$0.createCommentVNode("v-if", true),
(require$$0.openBlock(true), require$$0.createElementBlock(require$$0.Fragment, null, require$$0.renderList(_ctx.question.options, function (option, index) {
return (require$$0.openBlock(), require$$0.createElementBlock("option", {
disabled: option.disabled,
value: option.choiceValue(),
key: 'o' + index
}, require$$0.toDisplayString(option.choiceLabel()), 9 /* TEXT, PROPS */, _hoisted_4$5))
}), 128 /* KEYED_FRAGMENT */))
], 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_2$7),
require$$0.createElementVNode("span", null, [
require$$0.createElementVNode("span", {
class: require$$0.normalizeClass(["f-empty", {'f-answered': this.question.answer && this.question.answered}])
}, require$$0.toDisplayString($options.answerLabel), 3 /* TEXT, CLASS */),
_hoisted_5$4
])
]))
}
script$k.render = render$c;
script$k.__file = "src/components/QuestionTypes/DropdownType.vue";
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 commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
function getDefaultExportFromCjs (x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
}
function getAugmentedNamespace(n) {
if (n.__esModule) return n;
var a = Object.defineProperty({}, '__esModule', {value: true});
Object.keys(n).forEach(function (k) {
var d = Object.getOwnPropertyDescriptor(n, k);
Object.defineProperty(a, k, d.get ? d : {
enumerable: true,
get: function () {
return n[k];
}
});
});
return a;
}
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$j = {
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);
}
}
}
};
var _hoisted_1$8 = ["value"];
function render$b(_ctx, _cache, $props, $setup, $data, $options) {
var _directive_mask = require$$0.resolveDirective("mask");
return require$$0.withDirectives((require$$0.openBlock(), require$$0.createElementBlock("input", {
type: "text",
value: $data.display,
onInput: _cache[0] || (_cache[0] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.onInput && $options.onInput.apply($options, args));
})
}, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_1$8)), [
[_directive_mask, $options.config]
])
}
script$j.render = render$b;
script$j.__file = "node_modules/vue-the-mask/src/component.vue";
var script$i = {
extends: script$l,
name: QuestionType.Text,
components: {
TheMask: script$j
},
data: function data() {
return {
inputType: 'text',
canReceiveFocus: true
}
},
methods: {
validate: function validate() {
if (this.question.mask && this.hasValue) {
return this.validateMask()
}
return !this.question.required || this.hasValue
},
validateMask: function validateMask() {
var this$1$1 = this;
if (Array.isArray(this.question.mask)) {
return this.question.mask.some(function (mask) { return mask.length === this$1$1.dataValue.length; })
}
return this.dataValue.length === this.question.mask.length
}
}
};
var _hoisted_1$7 = ["data-placeholder"];
var _hoisted_2$6 = ["type", "value", "required", "min", "max", "placeholder", "maxlength"];
function render$a(_ctx, _cache, $props, $setup, $data, $options) {
var _component_the_mask = require$$0.resolveComponent("the-mask");
return (require$$0.openBlock(), require$$0.createElementBlock("span", {
"data-placeholder": $data.inputType === 'date' ? _ctx.placeholder : null
}, [
(_ctx.question.mask)
? (require$$0.openBlock(), require$$0.createBlock(_component_the_mask, {
key: 0,
ref: "input",
mask: _ctx.question.mask,
masked: false,
type: $data.inputType,
value: _ctx.modelValue,
required: _ctx.question.required,
onKeydown: _ctx.onKeyDown,
onKeyup: [
_ctx.onChange,
require$$0.withKeys(require$$0.withModifiers(_ctx.onEnter, ["prevent"]), ["enter"]),
require$$0.withKeys(require$$0.withModifiers(_ctx.onEnter, ["prevent"]), ["tab"])
],
onFocus: _ctx.setFocus,
onBlur: _ctx.unsetFocus,
placeholder: _ctx.placeholder,
min: _ctx.question.min,
max: _ctx.question.max,
onChange: _ctx.onChange
}, null, 8 /* PROPS */, ["mask", "type", "value", "required", "onKeydown", "onKeyup", "onFocus", "onBlur", "placeholder", "min", "max", "onChange"]))
: (require$$0.openBlock(), require$$0.createElementBlock("input", {
key: 1,
ref: "input",
type: $data.inputType,
value: _ctx.modelValue,
required: _ctx.question.required,
onKeydown: _cache[0] || (_cache[0] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return (_ctx.onKeyDown && _ctx.onKeyDown.apply(_ctx, args));
}),
onKeyup: [
_cache[1] || (_cache[1] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return (_ctx.onChange && _ctx.onChange.apply(_ctx, args));
}),
_cache[2] || (_cache[2] = require$$0.withKeys(require$$0.withModifiers(function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return (_ctx.onEnter && _ctx.onEnter.apply(_ctx, args));
}, ["prevent"]), ["enter"])),
_cache[3] || (_cache[3] = require$$0.withKeys(require$$0.withModifiers(function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return (_ctx.onEnter && _ctx.onEnter.apply(_ctx, args));
}, ["prevent"]), ["tab"]))
],
onFocus: _cache[4] || (_cache[4] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return (_ctx.setFocus && _ctx.setFocus.apply(_ctx, args));
}),
onBlur: _cache[5] || (_cache[5] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return (_ctx.unsetFocus && _ctx.unsetFocus.apply(_ctx, args));
}),
min: _ctx.question.min,
max: _ctx.question.max,
onChange: _cache[6] || (_cache[6] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return (_ctx.onChange && _ctx.onChange.apply(_ctx, args));
}),
placeholder: _ctx.placeholder,
maxlength: _ctx.question.maxLength
}, null, 40 /* PROPS, HYDRATE_EVENTS */, _hoisted_2$6))
], 8 /* PROPS */, _hoisted_1$7))
}
script$i.render = render$a;
script$i.__file = "src/components/QuestionTypes/TextType.vue";
var script$h = {
extends: script$i,
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$h.__file = "src/components/QuestionTypes/EmailType.vue";
var script$g = {
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$1 = this;
var important = this.isHeightImportant ? 'important' : '';
this.height = "auto" + (important ? ' !important' : '');
this.$nextTick(function () {
var contentHeight = this$1$1.$el.scrollHeight + 1;
if (this$1$1.minHeight) {
contentHeight = contentHeight < this$1$1.minHeight ? this$1$1.minHeight : contentHeight;
}
if (this$1$1.maxHeight) {
if (contentHeight > this$1$1.maxHeight) {
contentHeight = this$1$1.maxHeight;
this$1$1.maxHeightScroll = true;
} else {
this$1$1.maxHeightScroll = false;
}
}
var heightVal = contentHeight + 'px';
this$1$1.height = "" + heightVal + (important ? ' !important' : '');
});
return this
}
},
created: function created () {
this.val = this.value;
},
mounted: function mounted () {
this.resize();
}
};
function render$9(_ctx, _cache, $props, $setup, $data, $options) {
return require$$0.withDirectives((require$$0.openBlock(), require$$0.createElementBlock("textarea", {
style: require$$0.normalizeStyle($options.computedStyles),
"onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) { return (($data.val) = $event); }),
onFocus: _cache[1] || (_cache[1] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.resize && $options.resize.apply($options, args));
})
}, null, 36 /* STYLE, HYDRATE_EVENTS */)), [
[require$$0.vModelText, $data.val]
])
}
script$g.render = render$9;
script$g.__file = "node_modules/vue-textarea-autosize/src/components/TextareaAutosize.vue";
var script$f = {
extends: script$l,
name: QuestionType.LongText,
components: {
TextareaAutosize: script$g
},
data: function data () {
return {
canReceiveFocus: true
}
},
mounted: function mounted() {
window.addEventListener('resize', this.onResizeListener);
},
beforeUnmount: function beforeUnmount() {
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() {
this._onEnter();
if (this.isMobile) {
this.focus();
}
}
}
};
function render$8(_ctx, _cache, $props, $setup, $data, $options) {
var _component_textarea_autosize = require$$0.resolveComponent("textarea-autosize");
return (require$$0.openBlock(), require$$0.createElementBlock("span", null, [
require$$0.createVNode(_component_textarea_autosize, {
ref: "input",
rows: "1",
value: _ctx.modelValue,
required: _ctx.question.required,
onKeydown: [
_ctx.onKeyDown,
require$$0.withKeys(require$$0.withModifiers($options.onEnterDown, ["exact"]), ["enter"])
],
onKeyup: [
_ctx.onChange,
require$$0.withKeys(require$$0.withModifiers($options.onEnter, ["exact","prevent"]), ["enter"]),
require$$0.withKeys(require$$0.withModifiers($options.onEnter, ["prevent"]), ["tab"])
],
onFocus: _ctx.setFocus,
onBlur: $options.unsetFocus,
placeholder: _ctx.placeholder,
maxlength: _ctx.question.maxLength
}, null, 8 /* PROPS */, ["value", "required", "onKeydown", "onKeyup", "onFocus", "onBlur", "placeholder", "maxlength"])
]))
}
script$f.render = render$8;
script$f.__file = "src/components/QuestionTypes/LongTextType.vue";
var script$e = {
extends: script$l,
name: QuestionType.MultipleChoice,
data: function data() {
return {
editingOther: false,
hasImages: false
}
},
mounted: function mounted() {
this.addKeyListener();
},
beforeUnmount: function beforeUnmount() {
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.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);
this.setAnswerOptionId(this.dataId);
}
for (var i = 0; i < this.question.options.length; i++) {
var o = this.question.options[i];
//console.log('answer o ',o)
if (o.selected) {
this._toggleAnswer(o);
}
}
}
this._toggleAnswer(option);
},
_toggleAnswer: function _toggleAnswer(option) {
var optionValue = option.choiceValue();
var optionId = option.id;
//console.log(option.id, optionId, 'option id selected')
option.toggle();
if (this.question.multiple) {
this.enterPressed = false;
if (!option.selected) {
this._removeAnswer(optionValue);
this._removeAnswerId(optionId);
} else if (this.dataValue.indexOf(optionValue) === -1) {
this.dataValue.push(optionValue);
this.dataId.push(optionId);
}
//console.log('this dataId', this.dataId)
} else {
this.dataValue = option.selected ? optionValue : null;
this.dataId = option.selected ? optionId : null;
//console.log('this dataId', this.dataId)
}
if (this.isValid() && this.question.nextStepOnAnswer && !this.question.multiple && !this.disabled) {
this.$emit('next');
}
this.setAnswer(this.dataValue);
this.setAnswerOptionId(this.dataId);
},
_removeAnswer: function _removeAnswer(value) {
var index = this.dataValue.indexOf(value);
if (index !== -1) {
this.dataValue.splice(index, 1);
}
},
_removeAnswerId: function _removeAnswerId(value) {
var index = this.dataId.indexOf(value);
if (index !== -1) {
this.dataId.splice(index, 1);
}
},
startEditOther: function startEditOther() {
var this$1$1 = this;
this.editingOther = true;
this.enterPressed = false;
this.$nextTick(function () {
this$1$1.$refs.otherInput.focus();
});
},
onChangeOther: function onChangeOther() {
if (this.editingOther) {
var
value = [],
optionId = [],
self = this;
this.question.options.forEach(function(option) {
if (option.selected) {
if (self.question.multiple) {
value.push(option.choiceValue());
optionId.push(option.id);
} 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.dataId = optionId;
this.setAnswer(this.dataValue);
this.setAnswerOptionId(this.dataId);
}
},
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
}
}
};
var _hoisted_1$6 = { class: "f-radios-wrap" };
var _hoisted_2$5 = ["id", "onClick", "aria-label"];
var _hoisted_3$4 = {
key: 0,
class: "f-image"
};
var _hoisted_4$4 = ["src", "alt"];
var _hoisted_5$3 = { class: "f-label-wrap" };
var _hoisted_6$3 = { class: "f-key" };
var _hoisted_7$3 = {
key: 0,
class: "f-label"
};
var _hoisted_8$3 = ["aria-label"];
var _hoisted_9$3 = { class: "f-label-wrap" };
var _hoisted_10$3 = {
key: 0,
class: "f-key"
};
var _hoisted_11$3 = {
key: 2,
class: "f-selected"
};
var _hoisted_12$3 = { class: "f-label" };
var _hoisted_13$3 = {
key: 3,
class: "f-label"
};
function render$7(_ctx, _cache, $props, $setup, $data, $options) {
return (require$$0.openBlock(), require$$0.createElementBlock("div", _hoisted_1$6, [
require$$0.createElementVNode("ul", {
class: require$$0.normalizeClass(["f-radios", {'f-multiple': _ctx.question.multiple}]),
role: "listbox"
}, [
(require$$0.openBlock(true), require$$0.createElementBlock(require$$0.Fragment, null, require$$0.renderList(_ctx.question.options, function (option, index) {
return (require$$0.openBlock(), require$$0.createElementBlock("li", {
id: option.id,
onClick: require$$0.withModifiers(function ($event) { return ($options.toggleAnswer(option)); }, ["prevent"]),
class: require$$0.normalizeClass({'f-selected': option.selected}),
key: 'm' + index,
"aria-label": $options.getLabel(index),
role: "option"
}, [
($data.hasImages && option.imageSrc)
? (require$$0.openBlock(), require$$0.createElementBlock("span", _hoisted_3$4, [
require$$0.createElementVNode("img", {
src: option.imageSrc,
alt: option.imageAlt
}, null, 8 /* PROPS */, _hoisted_4$4)
]))
: require$$0.createCommentVNode("v-if", true),
require$$0.createElementVNode("div", _hoisted_5$3, [
require$$0.createElementVNode("span", _hoisted_6$3, require$$0.toDisplayString($options.getToggleKey(index)), 1 /* TEXT */),
(option.choiceLabel())
? (require$$0.openBlock(), require$$0.createElementBlock("span", _hoisted_7$3, require$$0.toDisplayString(option.choiceLabel()), 1 /* TEXT */))
: require$$0.createCommentVNode("v-if", true)
])
], 10 /* CLASS, PROPS */, _hoisted_2$5))
}), 128 /* KEYED_FRAGMENT */)),
(!$data.hasImages && _ctx.question.allowOther)
? (require$$0.openBlock(), require$$0.createElementBlock("li", {
key: 0,
class: require$$0.normalizeClass(["f-other", {'f-selected': _ctx.question.other, 'f-focus': $data.editingOther}]),
onClick: _cache[5] || (_cache[5] = require$$0.withModifiers(function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.startEditOther && $options.startEditOther.apply($options, args));
}, ["prevent"])),
"aria-label": _ctx.language.ariaTypeAnswer,
role: "option"
}, [
require$$0.createElementVNode("div", _hoisted_9$3, [
(!$data.editingOther)
? (require$$0.openBlock(), require$$0.createElementBlock("span", _hoisted_10$3, require$$0.toDisplayString($options.getToggleKey(_ctx.question.options.length)), 1 /* TEXT */))
: require$$0.createCommentVNode("v-if", true),
($data.editingOther)
? require$$0.withDirectives((require$$0.openBlock(), require$$0.createElementBlock("input", {
key: 1,
"onUpdate:modelValue": _cache[0] || (_cache[0] = function ($event) { return ((_ctx.question.other) = $event); }),
type: "text",
ref: "otherInput",
onBlur: _cache[1] || (_cache[1] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.stopEditOther && $options.stopEditOther.apply($options, args));
}),
onKeyup: [
_cache[2] || (_cache[2] = require$$0.withKeys(require$$0.withModifiers(function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.stopEditOther && $options.stopEditOther.apply($options, args));
}, ["prevent"]), ["enter"])),
_cache[3] || (_cache[3] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.onChangeOther && $options.onChangeOther.apply($options, args));
})
],
onChange: _cache[4] || (_cache[4] = function () {
var args = [], len = arguments.length;
while ( len-- ) args[ len ] = arguments[ len ];
return ($options.onChangeOther && $options.onChangeOther.apply($options, args));
}),
maxlength: "256"
}, null, 544 /* HYDRATE_EVENTS, NEED_PATCH */)), [
[require$$0.vModelText, _ctx.question.other]
])
: (_ctx.question.other)
? (require$$0.openBlock(), require$$0.createElementBlock("span", _hoisted_11$3, [
require$$0.createElementVNode("span", _hoisted_12$3, require$$0.toDisplayString(_ctx.question.other), 1 /* TEXT */)
]))
: (require$$0.openBlock(), require$$0.createElementBlock("span", _hoisted_13$3, require$$0.toDisplayString(_ctx.language.otherPrompt), 1 /* TEXT */))
])
], 10 /* CLASS, PROPS */, _hoisted_8$3))
: require$$0.createCommentVNode("v-if", true)
], 2 /* CLASS */)
]))
}
script$e.render = render$7;
script$e.__file = "src/components/QuestionTypes/MultipleChoiceType.vue";
var vuedraggable_umd = {exports: {}};
/**!
* Sortable 1.14.0
* @author RubaXa <trash@rubaxa.org>
* @author owenm <owen23355@gmail.com>
* @license MIT
*/
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
var arguments$1 = arguments;
for (var i = 1; i < arguments.length; i++) {
var source = arguments$1[i] != null ? arguments$1[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(functi