import { _ as _defineProperty } from './defineProperty-18999f8e.js';
import { n as normalizeComponent } from './normalize-component-1b2cdbb6.js';
import './es.array.concat-f2cfcc9b.js';
import './es.array.slice-d73dafe0.js';
import BaseIcon from './BaseIcon-bcb4fb2a.js';
import './well-known-symbol-50ce04e7.js';
import './array-species-create-5816b140.js';
import './create-property-57a65091.js';
import './array-method-has-species-support-656e7824.js';
import './es.array.includes-42f5881f.js';
import './object-keys-9554322f.js';
import './es.array.join-0615c07b.js';
import './array-method-is-strict-52649d4d.js';

//
/**
 * Toggle Component
 */

var script = {
  name: 'BaseToggle',
  components: {
    BaseIcon: BaseIcon
  },
  model: {
    prop: 'checked',
    event: 'clicked'
  },
  props: {
    /**
     * specify a descriptive name <br>
     * this will not be displayed but is only there for usability purposes
     */
    name: {
      type: String,
      default: 'baseToggle'
    },

    /**
     * specify label
     */
    label: {
      type: String,
      default: 'baseToggle'
    },

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

    /**
     * checkbox checked or radio button checked can be set from outside, <br>
     * default value depending on type of selector
     *
     * @model
     */
    checked: {
      type: [Boolean, String],
      default: false
    },

    /**
     * specify visibility of the label
     */
    hideLabel: {
      type: Boolean,
      default: false
    },

    /**
     * bind visibility of slot content to components checked state<br>
     */
    bindSlotToState: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      checkedInt: false,
      animate: false
    };
  },
  watch: {
    checked: {
      handler: function handler(val) {
        if (val !== this.checkedInt) {
          this.checkedInt = val;
        }
      },
      immediate: true
    },
    checkedInt: function checkedInt(val) {
      /**
       * event emitted on radio button / checkmark click, <br>
       * emitting input value
       *
       * @type {string | boolean}
       */
      this.$emit('clicked', val);
    }
  }
};

var __vue_script__ = script;
/* template */

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

  var _h = _vm.$createElement;

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

  return _c('div', {
    class: ['base-toggle', {
      'base-toggle--checked': _vm.checkedInt
    }, {
      'base-toggle--disabled': _vm.disabled
    }],
    on: {
      "mouseover": function mouseover($event) {
        _vm.animate = true;
      },
      "mouseleave": function mouseleave($event) {
        _vm.animate = false;
      }
    }
  }, [_c('label', {
    staticClass: "base-toggle__container"
  }, [_c('input', {
    directives: [{
      name: "model",
      rawName: "v-model",
      value: _vm.checkedInt,
      expression: "checkedInt"
    }],
    staticClass: "base-toggle__input",
    attrs: {
      "name": _vm.name,
      "disabled": _vm.disabled,
      "aria-checked": _vm.checkedInt,
      "aria-disabled": _vm.disabled,
      "value": "",
      "type": "checkbox"
    },
    domProps: _defineProperty({
      "checked": _vm.checkedInt
    }, "checked", Array.isArray(_vm.checkedInt) ? _vm._i(_vm.checkedInt, "") > -1 : _vm.checkedInt),
    on: {
      "focus": function focus($event) {
        _vm.animate = true;
      },
      "blur": function blur($event) {
        _vm.animate = false;
      },
      "change": function change($event) {
        var $$a = _vm.checkedInt,
            $$el = $event.target,
            $$c = $$el.checked ? true : false;

        if (Array.isArray($$a)) {
          var $$v = "",
              $$i = _vm._i($$a, $$v);

          if ($$el.checked) {
            $$i < 0 && (_vm.checkedInt = $$a.concat([$$v]));
          } else {
            $$i > -1 && (_vm.checkedInt = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));
          }
        } else {
          _vm.checkedInt = $$c;
        }
      }
    }
  }) , _vm._v(" "), _c('div', {
    staticClass: "base-switch"
  }, [_c('span', {
    class: ['base-switch__control', {
      'base-switch__control--animate': _vm.animate
    }]
  }, [_vm.checkedInt ? _c('base-icon', {
    attrs: {
      "title": _vm.hideLabel ? _vm.label : '',
      "name": "check-mark"
    }
  }) : _vm._e(), _vm._v(" "), !_vm.checkedInt ? _c('base-icon', {
    attrs: {
      "title": _vm.hideLabel ? _vm.label : '',
      "name": "remove"
    }
  }) : _vm._e()], 1)]), _vm._v(" "), !_vm.hideLabel ? _c('span', {
    staticClass: "base-toggle__label"
  }, [_vm._v("\n      " + _vm._s(_vm.label) + "\n    ")]) : _vm._e()]), _vm._v(" "), !!_vm.$slots.default && _vm.checked && _vm.bindSlotToState || !!_vm.$slots.default && !_vm.bindSlotToState ? _c('span', {
    staticClass: "base-toggle__subtext"
  }, [_vm._t("default")], 2) : _vm._e()]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-04c03067";
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

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

var BaseToggle = __vue_component__;

export { BaseToggle as default };
