(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', {
    props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value', 'required'],
    components: {
      'slider-picker': VueColor.Chrome
    },
    data: function() {
      return {
        input_value: '', // String for input
        position: 'bottom',
        value: {         // Object for picker
          r: 255, g: 255, b: 255, a: 1
        }
      };
    },
    created: function() {
      // Initialize from field_value (string)
      if (typeof this.field_value === 'string' && this.field_value.length) {
        this.input_value = this.field_value;
        this.value = this.parseColorString(this.field_value) || { r: 255, g: 255, b: 255, a: 1 };
      }
      if (this.fields.position) {
        this.position = this.fields.position;
      }
    },
    template: `
      <div class="wpcfto_generic_field wpcfto_generic_field_color">
        <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="stm_colorpicker_wrapper" :class="'picker-position-' + position">
            <span :style="{ 'background-color': input_value }" @click="$refs.field_name.focus()"></span>
            <input type="text"
                   :name="field_name"
                   :placeholder="field_label"
                   :id="field_id"
                   v-model="input_value"
                   ref="field_name"
                   :required="fields.required === true"
            />
            <div>
              <slider-picker :value="value" @input="onPickerInput"></slider-picker>
            </div>
            <a href="#" @click.prevent="clearColor" v-if="input_value" class="wpcfto_generic_field_color__clear">
              <i class="fa fa-times"></i>
            </a>
          </div>
        </div>
        <wpcfto_fields_aside_after :fields="fields"></wpcfto_fields_aside_after>
      </div>
    `,
    watch: {
        input_value: function input_value(value) {
            this.$emit('wpcfto-get-value', value);
            },
            value: function value(_value) {
            if (typeof _value.rgba !== 'undefined') {
                var rgba_color = 'rgba(' + _value.rgba.r + ',' + _value.rgba.g + ',' + _value.rgba.b + ',' + _value.rgba.a + ')';
                this.$set(this, 'input_value', rgba_color);
                this.$emit('wpcfto-get-value', rgba_color);
            }
        }
    },
    methods: {
        parseColorString(str) {
            // Support hex and rgba
            if (str.startsWith('#')) {
              // Convert hex to rgba
              let hex = str.replace('#', '');
              if (hex.length === 3) hex = hex.split('').map(x => x + x).join('');
              const num = parseInt(hex, 16);
              return {
                r: (num >> 16) & 255,
                g: (num >> 8) & 255,
                b: num & 255,
                a: 1
              };
            }
            const rgbaMatch = str.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
            if (rgbaMatch) {
              return {
                r: parseInt(rgbaMatch[1], 10),
                g: parseInt(rgbaMatch[2], 10),
                b: parseInt(rgbaMatch[3], 10),
                a: rgbaMatch[4] !== undefined ? parseFloat(rgbaMatch[4]) : 1
              };
            }
            return null;
        },
        colorObjToString(val) {
            // Always output rgba
            if (!val) return '';
            return `rgba(${val.r},${val.g},${val.b},${val.a})`;
        },
        clearColor() {
            this.input_value = '';
            this.value = { r: 255, g: 255, b: 255, a: 1 }; // Reset picker
        },
        onPickerInput(val) {
            // When the picker changes, update the input
            this.value = val.rgba ? val.rgba : val;
            this.input_value = this.colorObjToString(this.value);
            this.$emit('wpcfto-get-value', this.input_value);
        }
    }
  });
  
  
//# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 6612 characters]
},{}]},{},[1])