(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
"use strict";

Vue.component('wpcfto_color_gradient', {
    mixins: [window.validationMixin],
    props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value'],
    components: {
      'slider-picker': VueColor.Chrome
    },
    data() {
      return {
        gradient: {
          from: { input_value: '', value: '' },
          to: { input_value: '', value: '' }
        },
        copy_gradient: {}
      };
    },
    template: `
      <div class="wpcfto_generic_field wpcfto_generic_field_color_gradient" :class="field_id">
        <wpcfto_fields_aside_before 
            :fields="fields" 
            :field_label="field_label" 
            :required="fields.required === true">
        </wpcfto_fields_aside_before>
  
        <div class="wpcfto-field-content">
          <div class="wpcfto_color_gradient">
  
            <div class="wpcfto_color_gradient_group" v-for="pos in ['from', 'to']" :key="pos">
              <label :for="field_id + '_' + pos" style="text-transform: capitalize;">{{ pos }}</label>
              <div class="stm_colorpicker_wrapper">
                <span 
                  :style="{ 'background-color': gradient[pos].input_value }" 
                  @click="$refs['field_' + pos].focus()"
                  class="color-swatch"
                  :title="'Click to edit ' + pos + ' color'"
                  tabindex="0"
                  @keydown.enter.prevent="$refs['field_' + pos].focus()"
                  @keydown.space.prevent="$refs['field_' + pos].focus()"
                ></span>
  
                <input 
                  type="text" 
                  :name="pos" 
                  v-model="gradient[pos].input_value" 
                  :ref="'field_' + pos" 
                  :id="field_id + '_' + pos"
                  autocomplete="off"
                  aria-label="'Color input for ' + pos + ' gradient stop'"
                  :required="fields.required === true"
                />
  
                <div>
                  <slider-picker v-model="gradient[pos].value"></slider-picker>
                </div>
              </div>
            </div>
  
            <!-- Hidden input to submit the entire gradient object as JSON -->
            <input
              type="hidden"
              :name="field_name"
              :value="JSON.stringify(gradient)"
              :required="fields.required === true"
            />
          </div>
        </div>
  
        <wpcfto_fields_aside_after :fields="fields"></wpcfto_fields_aside_after>
      </div>
    `,
    created() {
      // Parse field_value if string and valid JSON
      if (typeof this.field_value === 'string' && WpcftoIsJsonString(this.field_value)) {
        this.field_value = JSON.parse(this.field_value);
      }
  
      ['from', 'to'].forEach(pos => {
        const val = this.field_value && this.field_value[pos] ? this.field_value[pos] : '';
        this.gradient[pos] = {
          input_value: val,
          value: val
        };
      });
  
      this.set_copy_gradient();
    },
    methods: {
      vuecolor_to_string(color) {
        if (color.a === 1) {
          return color.hex;
        }
        const { r, g, b, a } = color.rgba;
        return `rgba(${r},${g},${b},${a})`;
      },
      set_copy_gradient() {
        this.copy_gradient = JSON.parse(JSON.stringify(this.gradient));
      }
    },
    watch: {
      gradient: {
        deep: true,
        handler(newGradient) {
          const value = {};
  
          Object.keys(newGradient).forEach(key => {
            if (newGradient[key].input_value !== this.copy_gradient[key].input_value) {
              value[key] = newGradient[key].input_value;
              this.$set(newGradient[key], 'value', value[key]);
            } else {
              value[key] = typeof newGradient[key].value === 'string' 
                ? newGradient[key].value 
                : this.vuecolor_to_string(newGradient[key].value);
  
              this.$set(newGradient[key], 'input_value', value[key]);
            }
          });
  
          this.set_copy_gradient();
          this.$emit('wpcfto-get-value', value);
        }
      }
    }
  });
  
//# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 9324 characters]
},{}]},{},[1])