@fishtank/fishtank-vue/dist/fishtank-vue.common.js

Fish Tank VueJS Component Module

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var Vue = _interopDefault(require('vue'));
var iconsVue = require('@fishtank/icons-vue');
var tslib_1 = require('tslib');
require('core-js/modules/es6.number.constructor');
require('core-js/modules/es6.regexp.to-string');
require('core-js/modules/es6.regexp.split');
require('core-js/modules/web.dom.iterable');
require('core-js/modules/es6.string.fixed');
require('core-js/modules/es6.string.small');
var vueContentLoader = require('vue-content-loader');

var BaseAlert = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-alert"
    }, [_vm.hasIcon ? _c('div', {
      staticClass: "ft-alert__icon"
    }, [_vm._t("icon")], 2) : _vm._e(), _vm._v(" "), _c('div', {
      staticClass: "ft-alert__content"
    }, [_c('div', {
      staticClass: "ft-alert__heading"
    }, [_vm._v(_vm._s(_vm.heading))]), _vm._v(" "), _vm._t("default")], 2)]);
  },
  staticRenderFns: [],
  name: "BaseAlert",
  props: {
    heading: {
      type: String,
      required: true
    }
  },
  computed: {
    hasIcon: function hasIcon() {
      return !!this.$slots.icon;
    }
  }
});

var AlertError = {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseAlert', {
      staticClass: "ft-alert--error",
      attrs: {
        "heading": _vm.heading
      }
    }, [_c('WarningIcon', {
      staticClass: "ft-alert__icon",
      attrs: {
        "slot": "icon",
        "scale": 1
      },
      slot: "icon"
    }), _vm._v(" "), _vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "AlertError",
  components: {
    BaseAlert: BaseAlert,
    WarningIcon: iconsVue.Warning32
  },
  props: {
    heading: {
      type: String,
      required: true
    }
  }
};

var AlertInfo = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseAlert', {
      staticClass: "ft-alert--info",
      attrs: {
        "heading": _vm.heading
      }
    }, [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "AlertInfo",
  components: {
    BaseAlert: BaseAlert
  },
  props: {
    heading: {
      type: String,
      required: true
    }
  }
});

var AlertSuccess = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseAlert', {
      staticClass: "ft-alert--success",
      attrs: {
        "heading": _vm.heading
      }
    }, [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "AlertSuccess",
  components: {
    BaseAlert: BaseAlert
  },
  props: {
    heading: {
      type: String,
      required: true
    }
  }
});

var a11y = Vue.extend({
  created: function created() {
    window.addEventListener('keydown', this.handleFirstTab);
  },
  methods: {
    handleFirstTab: function handleFirstTab(e) {
      if (e.keyCode === 9) {
        document.body.classList.add('user-is-tabbing');
        window.removeEventListener('keydown', this.handleFirstTab);
        window.addEventListener('mousedown', this.handleMouseDownOnce);
      }
    },
    handleMouseDownOnce: function handleMouseDownOnce() {
      document.body.classList.remove('user-is-tabbing');
      window.removeEventListener('mousedown', this.handleMouseDownOnce);
      window.addEventListener('keydown', this.handleFirstTab);
    }
  }
});

var BaseButton = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('button', _vm._g({
      class: {
        'ft-button': true,
        'ft-button--disabled': _vm.disabled,
        'ft-button--block': _vm.block
      },
      attrs: {
        "disabled": _vm.disabled
      }
    }, _vm.listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "BaseButton",
  mixins: [a11y],
  props: {
    disabled: {
      type: Boolean,
      "default": false
    },
    block: {
      type: Boolean,
      "default": false
    }
  },
  computed: {
    listeners: function listeners() {
      var _this = this;

      return tslib_1.__assign({}, this.$listeners, {
        click: function click($event) {
          if (_this.disabled) return;

          _this.$emit("click", $event);
        }
      });
    }
  }
});

var ButtonPrimary = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--primary"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonPrimary",
  components: {
    BaseButton: BaseButton
  }
});

var ButtonSecondary = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--secondary"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonSecondary",
  components: {
    BaseButton: BaseButton
  }
});

var ButtonDestructive = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--destructive"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonDestructive",
  components: {
    BaseButton: BaseButton
  }
});

var ButtonWhite = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--white"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonWhite",
  components: {
    BaseButton: BaseButton
  }
});

var ButtonOutline = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--outline"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonOutline",
  components: {
    BaseButton: BaseButton
  }
});

var ButtonGradient = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('a', {
      staticClass: "ft-button--wrapper",
      class: {
        'ft-button--block': _vm.block
      },
      style: _vm.returnGradientStyle
    }, [_c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--gradient",
      attrs: {
        "block": _vm.block
      }
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2)], 1);
  },
  staticRenderFns: [],
  name: "ButtonGradient",
  components: {
    BaseButton: BaseButton
  },
  props: {
    gradientStart: {
      type: String,
      required: true,
      "default": "#000000"
    },
    gradientEnd: {
      type: String,
      required: true,
      "default": "#000000"
    },
    colorDirection: {
      type: String,
      required: false,
      "default": "to right"
    },
    block: {
      type: Boolean,
      "default": false
    }
  },
  computed: {
    returnGradientStyle: function returnGradientStyle() {
      return "background-image: linear-gradient(" + this.colorDirection + ", " + this.gradientStart + ", " + this.gradientEnd + " );";
    }
  }
});

var ButtonFAB = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-button--fab-wrapper"
    }, [_c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--fab",
      style: _vm.returnPrimaryFabColor
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("mainIcon")], 2), _vm._v(" "), _vm.optionsAvailable ? _c('ul', [_c('a', {
      attrs: {
        "href": _vm.optionOneLink
      }
    }, [_c('li', {
      style: _vm.returnSecondaryFabColor
    }, [_vm._t("option1")], 2)]), _vm._v(" "), _c('a', {
      attrs: {
        "href": _vm.optionTwoLink
      }
    }, [_c('li', {
      style: _vm.returnSecondaryFabColor
    }, [_vm._t("option2")], 2)])]) : _vm._e()], 1);
  },
  staticRenderFns: [],
  name: "ButtonFAB",
  components: {
    BaseButton: BaseButton
  },
  props: {
    optionsAvailable: {
      type: Boolean,
      required: true,
      "default": false
    },
    fabColorPrimaryStart: {
      type: String,
      required: true,
      "default": "#0018AB"
    },
    fabColorPrimaryEnd: {
      type: String,
      required: true,
      "default": "#9933CC"
    },
    fabColorSecondary: {
      type: String,
      required: true,
      "default": "#777C7F"
    },
    optionOneLink: {
      type: String,
      required: true,
      "default": " "
    },
    optionTwoLink: {
      type: String,
      required: true,
      "default": " "
    }
  },
  computed: {
    returnPrimaryFabColor: function returnPrimaryFabColor() {
      return "background-image:  linear-gradient( 135deg, " + this.fabColorPrimaryStart + " 0%, " + this.fabColorPrimaryEnd + " 100% ); \n      border-image:  linear-gradient( 135deg, " + this.fabColorPrimaryStart + " 0% , " + this.fabColorPrimaryEnd + " 100% ) 1% ; ";
    },
    returnSecondaryFabColor: function returnSecondaryFabColor() {
      return "background:  " + this.fabColorSecondary + " ;";
    }
  }
});

var ButtonFeatureIcon = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--feature-label"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonFeatureIcon",
  components: {
    BaseButton: BaseButton
  },
  props: {},
  computed: {}
});

var ButtonFeatureLabel = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--feature-label"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("icon"), _vm._v(" "), _c('p', [_vm._t("label")], 2)], 2);
  },
  staticRenderFns: [],
  name: "ButtonFeatureLabel",
  components: {
    BaseButton: BaseButton,
    ButtonFeatureIcon: ButtonFeatureIcon
  }
});

var ButtonOutlineDark = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--outline-dark"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonOutlineDark",
  components: {
    BaseButton: BaseButton
  }
});

var ButtonOutlineSmall = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--outline ft-button--outline-small"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonOutlineSmall",
  components: {
    BaseButton: BaseButton
  }
});

var ButtonOutlineDarkSmall = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('BaseButton', _vm._g(_vm._b({
      staticClass: "ft-button--outline-dark ft-button--outline-small"
    }, 'BaseButton', _vm.$attrs, false), _vm.$listeners), [_vm._t("default")], 2);
  },
  staticRenderFns: [],
  name: "ButtonOutlineDarkSmall",
  components: {
    BaseButton: BaseButton
  }
});

var FishTankCard = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-card"
    }, [_vm.branded ? _c('div', {
      staticClass: "ft-card__brand-stripe",
      class: _vm.branded
    }) : _vm._e(), _vm._v(" "), _c('div', {
      staticClass: "ft-card__container"
    }, [_vm._t("heading", null, {
      headerClass: 'ft-card__heading'
    }), _vm._v(" "), !_vm.$slots.heading && _vm.heading ? _c('div', {
      staticClass: "ft-card__heading"
    }, [_vm._v(" " + _vm._s(_vm.heading) + " ")]) : _vm._e(), _vm._v(" "), _c('div', {
      staticClass: "ft-card__body"
    }, [_vm._t("default")], 2)], 2)]);
  },
  staticRenderFns: [],
  props: {
    heading: {
      type: String,
      required: false,
      "default": undefined
    },
    branded: {
      type: String,
      required: false,
      "default": undefined
    }
  }
});

var FishTankCheckbox = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-input-checkbox",
      class: [_vm.value ? 'ft-input-checkbox--checked' : 'ft-input-checkbox--unchecked', {
        'ft-input-checkbox__disabled': _vm.disabled
      }]
    }, [_c('label', {
      staticClass: "ft-input-checkbox__label",
      attrs: {
        "for": _vm.id !== null ? _vm.id : _vm.labelId
      }
    }, [_c('input', _vm._g({
      staticClass: "ft-input-checkbox__native",
      attrs: {
        "id": _vm.id !== null ? _vm.id : _vm.labelId,
        "disabled": _vm.disabled,
        "type": "checkbox"
      },
      domProps: {
        "checked": _vm.isChecked,
        "value": _vm.value
      },
      on: {
        "focus": function focus($event) {
          _vm.isFocused = true;
        },
        "blur": function blur($event) {
          _vm.isFocused = false;
        }
      }
    }, _vm.listeners)), _vm._v(" "), _c('div', {
      class: ['ft-input-checkbox__checkbox', {
        'focused': _vm.isFocused
      }]
    }, [_c('transition', {
      attrs: {
        "name": "ft-transition-scale"
      }
    }, [_vm.isChecked ? _c('CheckboxSelected', {
      key: "{$labelId}+'-ft-svg-selected'",
      staticClass: "ft-svg-selected",
      class: _vm.returnEnabledDisabled
    }) : _vm._e(), _vm._v(" "), !_vm.isChecked ? _c('CheckboxUnselected', {
      key: "{$labelId}+'-ft-svg-unselected'",
      staticClass: "ft-svg-unselected",
      class: _vm.returnEnabledDisabled
    }) : _vm._e()], 1)], 1), _vm._v(" "), _vm.label ? _c('div', {
      staticClass: "ft-input-checkbox__label-content"
    }, [_c('div', {
      staticClass: "ft-input-checkbox__label-content__label"
    }, [_vm._v(_vm._s(_vm.label))]), _vm._v(" "), _vm._t("default")], 2) : _vm._e()])]);
  },
  staticRenderFns: [],
  name: "FishTankCheckbox",
  components: {
    CheckboxSelected: iconsVue.CheckboxSelected24,
    CheckboxUnselected: iconsVue.CheckboxUnselected24
  },
  mixins: [a11y],
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      "default": false
    },
    value: {
      "default": null,
      type: [String, Boolean, Object, Array, Number]
    },
    modelValue: {
      type: [String, Boolean, Object, Array, Number],
      "default": false
    },
    label: {
      type: String,
      required: true
    },
    id: {
      type: String,
      "default": null,
      required: false
    },
    trueValue: {
      "default": true,
      type: [String, Boolean, Object, Array, Number]
    },
    falseValue: {
      "default": false,
      type: [String, Boolean, Object, Array, Number]
    }
  },
  data: function data() {
    return {
      checkProxy: false,
      isFocused: false
    };
  },
  computed: {
    listeners: function listeners() {
      var _this = this;

      return tslib_1.__assign({}, this.$listeners, {
        change: function change($event) {
          if (_this.disabled) return;

          _this.updateInput($event);
        }
      });
    },
    checked: {
      set: function set(val) {
        this.checkProxy = val;
      },
      get: function get() {
        return this.value;
      }
    },
    isChecked: function isChecked() {
      if (this.modelValue instanceof Array) {
        var res = false;
        if (this.modelValue.indexOf(this.value) >= 0) res = !res;
        return res;
      }

      return this.modelValue === this.trueValue;
    },
    labelId: function labelId() {
      return "ft-checkbox-" + this._uid;
    },
    returnEnabledDisabled: function returnEnabledDisabled() {
      return this.disabled ? "ft-input-checkbox__checkbox__disabled" : "ft-input-checkbox__checkbox__enabled";
    }
  },
  methods: {
    updateInput: function updateInput(event) {
      var isChecked = event.target.checked;

      if (this.modelValue instanceof Array) {
        var newValue = this.modelValue.slice();

        if (isChecked) {
          newValue.push(this.value);
        } else {
          newValue.splice(newValue.indexOf(this.value), 1);
        }

        this.$emit('change', newValue);
      } else {
        this.$emit('change', isChecked ? this.trueValue : this.falseValue);
      }
    }
  }
});

var FishTankRadio = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-radio"
    }, [_c('label', {
      staticClass: "ft-radio__label",
      attrs: {
        "for": _vm.id !== null ? _vm.id : _vm.labelId
      }
    }, [_c('input', _vm._g({
      staticClass: "ft-radio__input",
      attrs: {
        "disabled": _vm.disabled,
        "id": _vm.id !== null ? _vm.id : _vm.labelId,
        "type": "radio"
      },
      domProps: {
        "value": _vm.value,
        "checked": _vm.shouldBeChecked
      }
    }, _vm.listeners)), _vm._v(" "), _c('div', {
      staticClass: "ft-radio__icon"
    }), _vm._v(" "), _c('div', {
      staticClass: "ft-radio__label-content"
    }, [_vm._v(" " + _vm._s(_vm.label) + " ")])])]);
  },
  staticRenderFns: [],
  mixins: [a11y],
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    value: {
      type: [String, Boolean, Object, Number],
      "default": null,
      require: true
    },
    disabled: {
      type: Boolean,
      "default": null,
      require: false
    },
    modelValue: {
      type: [String, Boolean, Object, Number],
      "default": "",
      require: true
    },
    label: {
      type: String,
      "default": null,
      required: true
    },
    id: {
      type: String,
      "default": null,
      required: false
    },
    name: {
      type: String,
      "default": "",
      required: true
    }
  },
  computed: {
    shouldBeChecked: function shouldBeChecked() {
      return this.value === this.modelValue;
    },
    listeners: function listeners() {
      var _this = this;

      return tslib_1.__assign({}, this.$listeners, {
        change: function change($event) {
          if (_this.disabled) return;

          _this.$emit("change", _this.value);
        }
      });
    },
    labelId: function labelId() {
      return "ft-radio-" + this._uid;
    }
  }
});

var FishTankSwitch = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-switch"
    }, [_c('label', {
      staticClass: "ft-input-checkbox-label",
      attrs: {
        "for": _vm.id !== null ? _vm.id : _vm.labelId
      }
    }, [_c('input', _vm._g({
      attrs: {
        "id": _vm.id !== null ? _vm.id : _vm.labelId,
        "disabled": _vm.disabled,
        "type": "checkbox"
      },
      domProps: {
        "checked": _vm.shouldBeChecked,
        "value": _vm.value
      }
    }, _vm.listeners)), _vm._v(" "), _vm._m(0), _vm._v(" "), _c('div', {
      staticClass: "label-content"
    }, [_vm.label === null ? _vm._t("default") : _c('span', [_vm._v(" " + _vm._s(_vm.label) + " ")])], 2)])]);
  },
  staticRenderFns: [function () {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-input-checkbox-wrap"
    }, [_c('div', {
      staticClass: "ft-input-checkbox-target"
    })]);
  }],
  name: "FishTankSwitch",
  mixins: [a11y],
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      "default": false
    },
    value: {
      "default": null,
      type: [String, Boolean, Object, Array, Number]
    },
    modelValue: {
      type: [String, Boolean, Object, Array, Number],
      "default": false
    },
    label: {
      type: String,
      required: true
    },
    id: {
      type: String,
      "default": null,
      required: false
    },
    trueValue: {
      "default": true,
      type: [String, Boolean, Object, Array, Number]
    },
    falseValue: {
      "default": false,
      type: [String, Boolean, Object, Array, Number]
    }
  },
  computed: {
    shouldBeChecked: function shouldBeChecked() {
      if (this.modelValue instanceof Array) {
        var res = false;
        if (this.modelValue.indexOf(this.value) >= 0) res = !res;
        return res;
      }

      return this.modelValue === this.trueValue;
    },
    listeners: function listeners() {
      var _this = this;

      return tslib_1.__assign({}, this.$listeners, {
        change: function change($event) {
          if (_this.disabled) return;

          _this.updateInput($event);
        }
      });
    },
    labelId: function labelId() {
      return "ft-switch-" + this._uid;
    }
  },
  methods: {
    updateInput: function updateInput(event) {
      var isChecked = event.target.checked;

      if (this.modelValue instanceof Array) {
        var newValue = this.modelValue.slice();

        if (isChecked) {
          newValue.push(this.value);
        } else {
          newValue.splice(newValue.indexOf(this.value), 1);
        }

        this.$emit('change', newValue);
      } else {
        this.$emit('change', isChecked ? this.trueValue : this.falseValue);
      }
    }
  }
});

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

var FishTankTextInput = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-input-text",
      class: {
        'ft-input-text--error': !!_vm.errorMessage
      }
    }, [_vm.label ? _c('div', {
      staticClass: "ft-input-text__label-wrapper"
    }, [_c('label', {
      staticClass: "ft-input-text__label",
      attrs: {
        "for": _vm.labelId
      }
    }, [_vm._v(" " + _vm._s(_vm.label) + " ")]), _vm._v(" "), _c('span', {
      staticClass: "ft-input-text__auxillary-slot"
    }, [_vm._t("auxillary")], 2)]) : _vm._e(), _vm._v(" "), _c('div', {
      staticClass: "ft-input-text__input-wrapper"
    }, [_vm.$slots.leftIcon ? _c('span', {
      staticClass: "ft-input-text__left-icon"
    }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm._v(" "), _vm.type === 'textarea' ? [_c('textarea', _vm._g(_vm._b({
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.textAreaModel,
        expression: "textAreaModel"
      }],
      ref: "input",
      staticClass: "ft-input-text__input ft-input-text__input__textarea",
      style: {
        'height': _vm.textAreafalseHeight + 'px',
        'resize': _vm.resize === false ? 'none' : null,
        'overflowY': _vm.scrollOn ? 'scroll' : 'hidden'
      },
      attrs: {
        "type": _vm.type,
        "id": _vm.labelId
      },
      domProps: _defineProperty({
        "value": _vm.value
      }, "value", _vm.textAreaModel),
      on: {
        "keypress": _vm.getFalseHeight,
        "keydown": function keydown($event) {
          if (!('button' in $event) && _vm._k($event.keyCode, "delete", [8, 46], $event.key, ["Backspace", "Delete"])) {
            return null;
          }

          return _vm.getFalseHeight($event);
        },
        "keyup": [function ($event) {
          if (!('button' in $event) && $event.keyCode !== 90 && $event.keyCode !== 91) {
            return null;
          }

          return _vm.getFalseHeight($event);
        }, function ($event) {
          if (!('button' in $event) && $event.keyCode !== 86 && $event.keyCode !== 91) {
            return null;
          }

          return _vm.getFalseHeight($event);
        }, function ($event) {
          if (!('button' in $event) && $event.keyCode !== 88 && $event.keyCode !== 91) {
            return null;
          }

          return _vm.getFalseHeight($event);
        }, function ($event) {
          if (!('button' in $event) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
            return null;
          }

          return _vm.getFalseHeight($event);
        }, function ($event) {
          if (!('button' in $event) && _vm._k($event.keyCode, "delete", [8, 46], $event.key, ["Backspace", "Delete"])) {
            return null;
          }

          return _vm.getFalseHeight($event);
        }],
        "paste": _vm.getFalseHeight,
        "cut": _vm.getFalseHeight,
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.textAreaModel = $event.target.value;
        }
      }
    }, 'textarea', _vm.$attrs, false), _vm.listeners))] : [_c('input', _vm._g(_vm._b({
      ref: "input",
      staticClass: "ft-input-text__input",
      attrs: {
        "type": _vm.type,
        "id": _vm.labelId
      },
      domProps: {
        "value": _vm.value
      }
    }, 'input', _vm.$attrs, false), _vm.listeners))], _vm._v(" "), _vm.type === 'textarea' ? _c('p', {
      ref: "falseTextarea",
      staticClass: "ft-false-text-area"
    }, [_vm._v("  " + _vm._s(_vm.textAreaModel) + " ")]) : _vm._e(), _vm._v(" "), _vm.showRightIcon ? _c('span', {
      staticClass: "ft-input-text__right-icon"
    }, [_vm._t("rightIcon", [_c('span', {
      staticClass: "ft-input-text__input-clear",
      on: {
        "click": _vm.clearText
      }
    }, [_c('CloseIcon')], 1)])], 2) : _vm._e()], 2), _vm._v(" "), _vm.errorMessage ? _c('div', {
      staticClass: "ft-input-text__error-text"
    }, [_vm._v(" " + _vm._s(_vm.errorMessage) + " ")]) : _vm._e()]);
  },
  staticRenderFns: [],
  components: {
    CloseIcon: iconsVue.Close24
  },
  inheritAttrs: false,
  model: {
    prop: 'modelValue',
    event: 'input'
  },
  props: {
    value: {
      required: false,
      type: String,
      "default": ""
    },
    modelValue: {
      type: [String, Boolean, Object, Array, Number],
      "default": false
    },
    label: {
      required: false,
      type: String,
      "default": undefined
    },
    id: {
      type: String,
      "default": null,
      required: false
    },
    maxheight: {
      type: Number,
      "default": null,
      required: false
    },
    resize: {
      type: Boolean,
      "default": false,
      required: false
    },
    type: {
      required: false,
      "default": "text",
      type: String,
      validator: function validator(value) {
        var textTypes = ["text", "textarea", "password", "email", "search", "number", "tel", "url", "textarea"];
        return textTypes.indexOf(value.toLowerCase()) > -1;
      }
    },
    error: {
      required: false,
      "default": null,
      type: [String, Object],
      validator: function validator(value) {
        if (typeof value === 'string') {
          return true;
        }

        if (value.fullMessage) {
          return true;
        } // eslint-disable-next-line no-console


        console.warn("InputText's `error` prop should be a string or an object with a `fullMessage` string property");
        return false;
      }
    }
  },
  data: function data() {
    return {
      textAreaModel: "",
      textAreafalseHeight: 44,
      scrollOn: false,
      trackFalseHeight: 0
    };
  },
  computed: {
    labelId: function labelId() {
      return "ft-input-" + this._uid;
    },
    showRightIcon: function showRightIcon() {
      return !!this.$slots.rightIcon || this.value && this.value.length > 0;
    },
    errorMessage: function errorMessage() {
      if (!this.error) {
        return undefined;
      }

      if (typeof this.error === "string") {
        return this.error;
      } else if (this.error.fullMessage) {
        return this.error.fullMessage;
      } else {
        return undefined;
      }
    },
    listeners: function listeners() {
      var _this = this;

      return tslib_1.__assign({}, this.$listeners, {
        input: function input($event) {
          _this.updateValue($event.target.value);
        }
      });
    }
  },
  methods: {
    updateValue: function updateValue(value) {
      this.$emit("input", value);
    },
    clearText: function clearText() {
      this.updateValue(undefined);
      this.focusElement(this.$refs.input);
    },
    focusElement: function focusElement(element) {
      element.focus();
    },
    getFalseHeight: function getFalseHeight(e) {
      var _this = this;

      setTimeout(function () {
        _this.$nextTick(function () {
          if (_this.$props.maxheight && _this.$props.maxheight < _this.$refs.falseTextarea.clientHeight) {
            _this.textAreafalseHeight = _this.$props.maxheight;
            if (!_this.scrollOn) _this.scrollOn = true;
            return;
          }

          if (_this.$refs.falseTextarea !== undefined) {
            if (_this.scrollOn) _this.scrollOn = false;
            _this.textAreafalseHeight = _this.$refs.falseTextarea.clientHeight;
          }

          _this.$refs.input.focus();
        });
      }, 100);
    }
  }
});

var Detachable = {
  name: 'detachable',
  data: function data() {
    return {
      hasDetached: false
    };
  },
  props: {
    attach: {
      type: null,
      default: function _default() {
        return document.body;
      }
    },
    contentClass: {
      default: ''
    }
  },
  watch: {
    attach: function attach() {
      this.hasDetached = false;
      this.initDetach();
    },
    hasContent: 'initDetach'
  },
  mounted: function mounted() {
    !this.lazy && this.initDetach();
  },
  deactivated: function deactivated() {
    this.isActive = false;
  },
  beforeDestroy: function beforeDestroy() {
    if (!this.$refs.content) return; // IE11 Fix

    try {
      this.$refs.content.parentNode.removeChild(this.$refs.content);
    } catch (e) {
      // eslint-disable-next-line no-console
      console.log(e);
    }
  },
  methods: {
    initDetach: function initDetach() {
      if (this._isDestroyed || !this.$refs.content || this.hasDetached || // Leave menu in place if attached
      // and dev has not changed target
      this.attach === '' || // If used as a boolean prop (<v-menu attach>)
      this.attach === true || // If bound to a boolean (<v-menu :attach="true">)
      this.attach === 'attach' // If bound as boolean prop in pug (v-menu(attach))
      ) return;
      var target;

      if (this.attach === false) {
        // Default, detach to app
        target = document.querySelector('[data-app]');
      } else if (typeof this.attach === 'string') {
        // CSS selector
        target = document.querySelector(this.attach);
      } else {
        // DOM Element
        target = this.attach;
      }

      if (!target) {
        // eslint-disable-next-line no-console
        console.warn("Unable to locate target ".concat(this.attach || '[data-app]'), this);
        return;
      }

      target.appendChild(this.$refs.content);
      this.hasDetached = true;
    }
  }
};

var overlayTimeout = null;
var overlay = document.querySelector('.ft-overlay');
var Modal = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-modal__entry-point"
    }, [_c('div', {
      ref: "content",
      staticClass: "ft-modal",
      class: _vm.classObj
    }, [_vm.escapeable ? _c('div', {
      staticClass: "ft-modal__escapable-background",
      on: {
        "click": _vm.close
      }
    }) : _vm._e(), _vm._v(" "), _c('div', {
      staticClass: "ft-modal__container",
      style: _vm.styles
    }, [_c('div', {
      staticClass: "ft-modal__heading"
    }, [_c('div', {
      staticClass: "ft-modal__heading-title-container"
    }, [_vm.$slots.headingIcon ? _c('div', {
      staticClass: "ft-modal__heading-icon-wrapper",
      attrs: {
        "tabindex": "-1"
      }
    }, [_c('div', {
      staticClass: "ft-modal__heading-icon",
      attrs: {
        "tabindex": "-1"
      }
    }, [_vm._t("headingIcon")], 2)]) : _vm._e(), _vm._v(" "), _vm.heading ? _c('div', {
      staticClass: "ft-modal__heading-title"
    }, [_vm._v(" " + _vm._s(_vm.heading) + " ")]) : _vm._e()]), _vm._v(" "), _vm.$slots.headingExtra ? _c('div', {
      staticClass: "ft-modal__heading-extra"
    }, [_vm._t("headingExtra")], 2) : _vm._e(), _vm._v(" "), _c('div', {
      staticClass: "ft-modal__close"
    }, [!_vm.dialog ? _c('span', {
      staticClass: "ft-modal__close-separator"
    }) : _vm._e(), _vm._v(" "), _c('div', {
      staticClass: "ft-modal__close-icon-wrapper"
    }, [_c('Close24', {
      staticClass: "ft-modal__close-icon",
      on: {
        "click": _vm.close
      }
    })], 1)])]), _vm._v(" "), _c('div', {
      staticClass: "ft-modal__body"
    }, [_vm._t("default")], 2), _vm._v(" "), _vm.showFooter ? _c('div', {
      staticClass: "ft-modal__footer"
    }, [_vm.$slots.footer ? _c('div', {
      staticClass: "ft-modal__footer-container"
    }, [_vm._t("footer")], 2) : _vm.$slots.footerLeft || _vm.$slots.footerRight ? _c('div', {
      staticClass: "ft-modal__footer-container"
    }, [_c('div', [_vm._t("footerLeft")], 2), _vm._v(" "), _c('div', [_vm._t("footerRight")], 2)]) : _vm._e()]) : _vm._e()])])]);
  },
  staticRenderFns: [],
  components: {
    Close24: iconsVue.Close24
  },
  mixins: [Detachable],
  model: {
    prop: 'active',
    event: 'change'
  },
  props: {
    heading: {
      type: String,
      required: false,
      "default": undefined
    },
    fixed: {
      type: Boolean,
      required: false,
      "default": false
    },
    dialog: {
      type: Boolean,
      required: false,
      "default": false
    },
    active: {
      type: Boolean,
      required: true
    },
    escapeable: {
      type: Boolean,
      required: false,
      "default": false
    },
    width: {
      type: String,
      required: false,
      "default": undefined
    }
  },
  data: function data() {
    return {
      overlayTransitionDuration: 500 + 150,
      isActive: false
    };
  },
  computed: {
    showFooter: function showFooter() {
      return this.fixed || !!this.$slots.footer || !!this.$slots.footerRight || !!this.$slots.footerLeft;
    },
    styles: function styles() {
      var styles = {};

      if (this.width) {
        styles['max-width'] = this.width;
      }

      return styles;
    },
    classObj: function classObj() {
      var classObj = {
        'ft-modal--active': this.active,
        'ft-modal--fixed': this.fixed,
        'ft-modal--dialog': this.dialog
      }; // This is a bit of a hack, but since our rendered modal doesn't actually appear
      // as a child of the top-level in the DOM, we can't simply allow a user to apply
      // a custom class and have it take effect on the modal styling.  This copies any
      // custom classes from the top-level item onto the actual modal div.

      if (this.$el) {
        var parentClasses = this.$el.className.split(' ').forEach(function (classVal) {
          if (classVal !== "ft-modal__entry-point") {
            classObj[classVal] = true;
          }
        });
      }

      return classObj;
    }
  },
  watch: {
    active: function active(value) {
      this.updateState();
    }
  },
  mounted: function mounted() {
    this.updateState();
  },
  methods: {
    close: function close() {
      this.$emit('change', false);
    },
    open: function open() {
      this.$emit('change', true);
    },
    show: function show() {
      if (this.escapeable) {
        document.addEventListener('keyup', this.escapeListener);
      }

      this.isActive = true;
      this.genOverlay();
    },
    hide: function hide() {
      if (this.escapeable) {
        document.removeEventListener('keyup', this.escapeListener);
      } // Don't remove the overlay unless this modal is currently active


      if (this.isActive) {
        this.isActive = false;
        this.removeOverlay();
      }
    },
    updateState: function updateState() {
      if (this.active) {
        this.show();
      } else {
        this.hide();
      }
    },
    genOverlay: function genOverlay() {
      // If fn is called and timeout is active
      // or overlay already exists
      // cancel removal of overlay and re-add active
      if (overlayTimeout || overlay) {
        this.clearTimeout();
        return overlay ? !!overlay.classList.add('ft-overlay--active') : false;
      }

      if (!overlay) {
        overlay = document.querySelector('.ft-overlay');
      }

      if (!overlay) {
        overlay = document.createElement('div');
      }

      overlay.className = 'ft-overlay';
      this.hideScroll();
      document.body.appendChild(overlay); // eslint-disable-next-line no-unused-expressions

      overlay.clientHeight; // Force repaint

      requestAnimationFrame(function () {
        if (!overlay) return;
        overlay.className += ' ft-overlay--active';
      });
      return true;
    },
    removeOverlay: function removeOverlay() {
      var _this = this;

      if (!overlay) {
        return this.showScroll();
      }

      overlay.classList.remove('ft-overlay--active');
      overlayTimeout = window.setTimeout(function () {
        // IE11 Fix
        try {
          if (overlay && overlay.parentNode) {
            overlay.parentNode.removeChild(overlay);
          }

          overlay = null;

          _this.showScroll();

          _this.clearTimeout();
        } catch (e) {
          // eslint-disable-next-line no-console
          console.log(e);
        }
      }, this.overlayTransitionDuration);
    },
    clearTimeout: function (_clearTimeout) {
      function clearTimeout() {
        return _clearTimeout.apply(this, arguments);
      }

      clearTimeout.toString = function () {
        return _clearTimeout.toString();
      };

      return clearTimeout;
    }(function () {
      if (overlayTimeout) {
        clearTimeout(overlayTimeout);
        overlayTimeout = null;
      }
    }),
    hideScroll: function hideScroll() {
      window.addEventListener('wheel', this.scrollListener);
      window.addEventListener('keydown', this.scrollListener);
    },
    showScroll: function showScroll() {
      document.documentElement.classList.remove('overflow-y-hidden');
      window.removeEventListener('wheel', this.scrollListener);
      window.removeEventListener('keydown', this.scrollListener);
    },
    escapeListener: function escapeListener(e) {
      if (e.keyCode === 27) {
        this.close();
      }
    },
    scrollListener: function scrollListener(e) {
      if (e.type === 'keydown') {
        if (['INPUT', 'TEXTAREA', 'SELECT'].indexOf(e.target.tagName) >= 0) return;
        var keyCodes = {
          up: 38,
          down: 40,
          pageup: 33,
          pagedown: 34
        };
        var up = [keyCodes.up, keyCodes.pageup];
        var down = [keyCodes.down, keyCodes.pagedown];

        if (up.indexOf(e.keyCode) >= 0) {
          e.deltaY = -1;
        } else if (down.indexOf(e.keyCode) >= 0) {
          e.deltaY = 1;
        } else {
          return;
        }
      }

      if (e.target === overlay || e.type !== 'keydown' && e.target === document.body || this.checkPath(e)) e.preventDefault();
    },

    /**
     * Polyfill for Event.prototype.composedPath
     * @param {Event} e
     * @returns Element[]
     */
    composedPath: function composedPath(e) {
      if (e.composedPath) return e.composedPath();
      var path = [];
      var el = e.target;

      while (el) {
        path.push(el);

        if (el.tagName === 'HTML') {
          path.push(document);
          path.push(window);
          return path;
        }

        el = el.parentElement;
      }
    },

    /**
    * @param {Event} e
    * @returns void
    */
    hasScrollbar: function hasScrollbar(el) {
      if (!el || el.nodeType !== Node.ELEMENT_NODE) return false;
      var style = window.getComputedStyle(el);
      return ['auto', 'scroll'].indexOf(style['overflow-y']) >= 0 && el.scrollHeight > el.clientHeight;
    },
    shouldScroll: function shouldScroll(el, delta) {
      if (el.scrollTop === 0 && delta < 0) return true;
      return el.scrollTop + el.clientHeight === el.scrollHeight && delta > 0;
    },
    isInside: function isInside(el, parent) {
      if (el === parent) {
        return true;
      } else if (el === null || el === document.body) {
        return false;
      } else {
        return this.isInside(el.parentNode, parent);
      }
    },

    /**
     * @param {Event} e
     * @returns boolean
     */
    checkPath: function checkPath(e) {
      var path = e.path || this.composedPath(e);
      var delta = e.deltaY || -e.wheelDelta;

      if (e.type === 'keydown' && path[0] === document.body) {
        var dialog = this.$refs.dialog;
        var selected = window.getSelection().anchorNode;

        if (this.hasScrollbar(dialog) && this.isInside(selected, dialog)) {
          return this.shouldScroll(dialog, delta);
        }

        return true;
      }

      for (var index = 0; index < path.length; index++) {
        var el = path[index];
        if (el === document) return true;
        if (el === document.documentElement) return true;
        if (el === this.$refs.content) return true;
        if (this.hasScrollbar(el)) return this.shouldScroll(el, delta);
      }

      return true;
    }
  }
});

var FishTankDialogBox = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('Modal', {
      attrs: {
        "active": _vm.active,
        "heading": _vm.heading,
        "width": _vm.width,
        "escapeable": "",
        "dialog": ""
      },
      on: {
        "change": _vm.onChange
      }
    }, [_vm._t("default"), _vm._v(" "), _vm._t("footer", null, {
      slot: "footer"
    }), _vm._v(" "), _vm._t("footerLeft", null, {
      slot: "footerLeft"
    }), _vm._v(" "), _vm._t("footerRight", null, {
      slot: "footerRight"
    })], 2);
  },
  staticRenderFns: [],
  components: {
    Modal: Modal
  },
  model: {
    prop: 'active',
    event: 'change'
  },
  props: {
    active: {
      type: Boolean,
      required: true
    },
    heading: {
      type: String,
      required: false,
      "default": undefined
    },
    width: {
      type: String,
      required: false,
      "default": undefined
    }
  },
  methods: {
    onChange: function onChange(value) {
      this.$emit('change', value);
    }
  }
});

var FishTankTag = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      class: [_vm.$style.wrap],
      attrs: {
        "aria-label": _vm.removable ? "Remove ".concat(_vm.label) : null
      }
    }, [_c('label', {
      class: _vm.$style.label,
      attrs: {
        "for": _vm.id !== null ? _vm.id : _vm.labelId
      }
    }, [_c('input', _vm._g({
      class: [_vm.$style.input],
      attrs: {
        "id": _vm.id !== null ? _vm.id : _vm.labelId,
        "disabled": _vm.disabled,
        "type": "checkbox"
      },
      domProps: {
        "checked": _vm.isChecked,
        "value": _vm.value
      },
      on: {
        "focus": function focus($event) {
          _vm.isFocused = true;
        },
        "blur": function blur($event) {
          _vm.isFocused = false;
        }
      }
    }, _vm.listeners)), _vm._v(" "), _c('div', {
      class: [_vm.$style.tag, _defineProperty({}, _vm.$style.checked, _vm.isChecked), _defineProperty({}, _vm.$style.disabled, _vm.disabled), _defineProperty({}, _vm.$style.hasIcon, _vm.hasIcon), {
        'focused': _vm.isFocused
      }]
    }, [_c('div', {
      class: _vm.$style.labelContent
    }, [_vm.iconPosition === 'left' ? _c('span', {
      class: [_vm.$style.icon, _defineProperty({}, _vm.$style.iconLeft, _vm.iconPosition === 'left')]
    }, [_vm._t("default")], 2) : _vm._e(), _vm._v(" "), _c('span', {
      class: [_vm.$style.labelText]
    }, [_vm._v(" " + _vm._s(_vm.label))]), _vm._v(" "), _vm.iconPosition === 'right' ? _c('span', {
      class: [_vm.$style.icon, _defineProperty({}, _vm.$style.iconRight, _vm.iconPosition === 'right')]
    }, [_vm.removable ? _c('Close24', [_vm._t("default")], 2) : _vm._e()], 1) : _vm._e()])])])]);
  },
  staticRenderFns: [],
  cssModules: {
    "wrap": "FishTankTag__wrap",
    "label": "FishTankTag__label",
    "input": "FishTankTag__input",
    "tag": "FishTankTag__tag",
    "labelText": "FishTankTag__labelText",
    "hasIcon": "FishTankTag__hasIcon",
    "checked": "FishTankTag__checked",
    "disabled": "FishTankTag__disabled",
    "labelContent": "FishTankTag__labelContent",
    "icon": "FishTankTag__icon",
    "iconLeft": "FishTankTag__iconLeft",
    "iconRight": "FishTankTag__iconRight"
  },
  name: "FishTankTag",
  components: {
    Close24: iconsVue.Close24
  },
  mixins: [a11y],
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    disabled: {
      type: Boolean,
      required: false,
      "default": false
    },
    value: {
      "default": null,
      type: [String, Boolean, Object, Array, Number]
    },
    modelValue: {
      type: [String, Boolean, Object, Array, Number],
      "default": false
    },
    label: {
      type: String,
      required: true
    },
    id: {
      type: String,
      "default": null,
      required: false
    },
    trueValue: {
      "default": true,
      type: [String, Boolean, Object, Array, Number]
    },
    falseValue: {
      "default": false,
      type: [String, Boolean, Object, Array, Number]
    },
    removable: {
      type: Boolean,
      required: false,
      "default": false
    },
    iconPosition: {
      type: String,
      "default": 'right',
      required: false
    }
  },
  data: function data() {
    return {
      checkProxy: false,
      isFocused: false
    };
  },
  computed: {
    listeners: function listeners() {
      var _this = this;

      return tslib_1.__assign({}, this.$listeners, {
        change: function change($event) {
          if (_this.disabled) return;

          _this.updateInput($event);
        }
      });
    },
    checked: {
      set: function set(val) {
        this.checkProxy = val;
      },
      get: function get() {
        return this.value;
      }
    },
    isChecked: function isChecked() {
      if (this.modelValue instanceof Array) {
        var res = false;
        if (this.modelValue.indexOf(this.value) >= 0) res = !res;
        return res;
      }

      return this.modelValue === this.trueValue;
    },
    labelId: function labelId() {
      return "fishtang-tag-" + this._uid;
    },
    hasIcon: function hasIcon() {
      if (this.removable || this.$slots["default"]) {
        return true;
      } else {
        return false;
      }
    }
  },
  methods: {
    updateInput: function updateInput(event) {
      var isChecked = event.target.checked;

      if (this.modelValue instanceof Array) {
        var newValue = this.modelValue.slice();

        if (isChecked) {
          newValue.push(this.value);
        } else {
          newValue.splice(newValue.indexOf(this.value), 1);
        }

        this.$emit('change', newValue);
      } else {
        this.$emit('change', isChecked ? this.trueValue : this.falseValue);
      }
    }
  }
});

var FishTankLoaderSpinner = Vue.extend({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "ft-spinner",
      class: [_vm.gradientClass, _vm.spinnerSize, _vm.alignClass],
      attrs: {
        "aria-busy": _vm.busy,
        "role": "alert"
      }
    }, [_c('svg', {
      attrs: {
        "height": "100",
        "width": "100"
      }
    }, [_c('defs', [_c('linearGradient', {
      attrs: {
        "id": _vm.gradientClass,
        "x1": "0%",
        "y1": "0%",
        "x2": "100%",
        "y2": "0%"
      }
    }, [_c('stop', {
      staticClass: "stop-class-1",
      attrs: {
        "offset": "0%"
      }
    }), _vm._v(" "), _c('stop', {
      staticClass: "stop-class-2",
      attrs: {
        "offset": "100%"
      }
    })], 1)], 1), _vm._v(" "), _c('circle', {
      staticClass: "ft-spinner-base",
      attrs: {
        "cx": "50",
        "cy": "50"
      }
    }), _vm._v(" "), _c('circle', {
      staticClass: "ft-spinner-gradient",
      attrs: {
        "cx": "50",
        "cy": "50"
      }
    })])]);
  },
  s