(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_link_color', {
    mixins: [window.validationMixin],
    props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value'],
    components: {
      'slider-picker': VueColor.Chrome
    },
    data() {
      return {
        link: {
          regular: { input_value: '', value: '' },
          hover: { input_value: '', value: '' },
          active: { input_value: '', value: '' }
        },
        copy_link: {}
      };
    },
    template: `
      <div class="wpcfto_generic_field wpcfto_generic_field_link_color" :class="field_id">
        <wpcfto_fields_aside_before 
            :fields="fields" 
            :field_label="field_label"
            :class="{ 'wpcfto-required-field': fields.required }"
            :data-field-id="field_id"
            :required="fields.required === true">
        </wpcfto_fields_aside_before>
  
        <div class="wpcfto-field-content">
          <div class="wpcfto_link_color">
  
            <div class="wpcfto_link_color_group" v-for="state in ['regular', 'hover', 'active']" :key="state">
              <label :for="field_id + '_' + state" style="text-transform: capitalize;">{{ state }}</label>
              <div class="stm_colorpicker_wrapper">
                <span 
                  :style="{ 'background-color': link[state].input_value }" 
                  @click="$refs['field_' + state].focus()"
                  class="color-swatch"
                  :title="'Click to edit ' + state + ' color'"
                  tabindex="0"
                  @keydown.enter.prevent="$refs['field_' + state].focus()"
                  @keydown.space.prevent="$refs['field_' + state].focus()"
                ></span>
  
                <input 
                  type="text" 
                  :name="state" 
                  v-model="link[state].input_value" 
                  :ref="'field_' + state" 
                  :id="field_id + '_' + state"
                  autocomplete="off"
                  aria-label="'Color input for ' + state + ' state'"
                  :required="fields.required === true"
                />
  
                <div>
                  <slider-picker v-model="link[state].value"></slider-picker>
                </div>
              </div>
            </div>
  
            <!-- Hidden input to submit the entire color object as JSON -->
            <input
              type="hidden"
              :name="field_name"
              :value="JSON.stringify(link)"
              :required="fields.required === true"
            />
          </div>
        </div>
      </div>
    `,
    created() {
        // Parse field_value if string and valid JSON
        let initial = null;
        if (typeof this.field_value === 'string' && WpcftoIsJsonString(this.field_value)) {
          initial = JSON.parse(this.field_value);
        } else if (typeof this.field_value === 'object' && this.field_value !== null) {
          initial = this.field_value;
        } else if (this.fields && this.fields.value) {
          // Use default value if no field_value
          initial = this.fields.value;
        }
      
        // Initialize link data for each state
        ['regular', 'hover', 'active'].forEach(state => {
          const val = initial && initial[state] ? initial[state] : '';
          this.link[state] = {
            input_value: val,
            value: val
          };
        });
      
        this.set_copy_link();
    },
    methods: {
      vuecolor_to_string(color) {
        // Convert VueColor color object to string (hex or rgba)
        if (color.a === 1) {
          return color.hex;
        }
        const { r, g, b, a } = color.rgba;
        return `rgba(${r},${g},${b},${a})`;
      },
      set_copy_link() {
        // Deep copy current link state for change detection
        this.copy_link = JSON.parse(JSON.stringify(this.link));
      }
    },
    watch: {
      link: {
        deep: true,
        handler(newLink) {
          const value = {};
  
          Object.keys(newLink).forEach(key => {
            if (newLink[key].input_value !== this.copy_link[key].input_value) {
              // If input_value changed, sync value and emit input_value
              value[key] = newLink[key].input_value;
              this.$set(newLink[key], 'value', value[key]);
            } else {
              // Otherwise, convert VueColor object to string and sync input_value
              value[key] = typeof newLink[key].value === 'string' 
                ? newLink[key].value 
                : this.vuecolor_to_string(newLink[key].value);
  
              this.$set(newLink[key], 'input_value', value[key]);
            }
          });
  
          this.set_copy_link();
          this.$emit('wpcfto-get-value', value);
        }
      }
    }
  });
  
  //# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 10676 characters]
  },{}]},{},[1])