(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_spacing', {
    mixins: [window.validationMixin],
    props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value', 'required'],
    data() {
      return {
        spacing: {
          top: '',
          right: '',
          bottom: '',
          left: '',
          unit: this.fields?.units?.[0] || 'px'
        },
        focused: ''
      };
    },
    mounted() {
      // Initialize spacing from field_value, parse JSON if needed
      if (typeof this.field_value === 'string' && WpcftoIsJsonString(this.field_value)) {
        this.spacing = JSON.parse(this.field_value);
      } else if (typeof this.field_value === 'object' && this.field_value !== null) {
        this.spacing = Object.assign({}, this.spacing, this.field_value);
      }
  
      // Ensure unit is set
      if (!this.spacing.unit && this.fields?.units?.length) {
        this.spacing.unit = this.fields.units[0];
      }
    },
    template: `
      <div class="wpcfto_generic_field wpcfto_generic_field_spacing" :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_spacing" role="group" :aria-labelledby="field_id + '_label'">
  
            <div 
              class="wpcfto-spacing-input-wrap" 
              :class="{ focused: focused === 'spacing_top' }"
            >
              <label for="spacing_top"><i class="fa fa-arrow-up" aria-hidden="true"></i> Top</label>
              <input 
                id="spacing_top"
                type="number" 
                name="top" 
                v-model.number="spacing.top" 
                @focus="focused = 'spacing_top'" 
                @blur="focused = ''"
                :required="fields.required === true"
                aria-describedby="spacing_top_desc"
              />
              <span id="spacing_top_desc" class="sr-only">Top spacing value</span>
            </div>
  
            <div 
              class="wpcfto-spacing-input-wrap" 
              :class="{ focused: focused === 'spacing_right' }"
            >
              <label for="spacing_right"><i class="fa fa-arrow-right" aria-hidden="true"></i> Right</label>
              <input 
                id="spacing_right"
                type="number" 
                name="right" 
                v-model.number="spacing.right" 
                @focus="focused = 'spacing_right'" 
                @blur="focused = ''"
                :required="fields.required === true"
                aria-describedby="spacing_right_desc"
              />
              <span id="spacing_right_desc" class="sr-only">Right spacing value</span>
            </div>
  
            <div 
              class="wpcfto-spacing-input-wrap" 
              :class="{ focused: focused === 'spacing_bottom' }"
            >
              <label for="spacing_bottom"><i class="fa fa-arrow-down" aria-hidden="true"></i> Bottom</label>
              <input 
                id="spacing_bottom"
                type="number" 
                name="bottom" 
                v-model.number="spacing.bottom" 
                @focus="focused = 'spacing_bottom'" 
                @blur="focused = ''"
                :required="fields.required === true"
                aria-describedby="spacing_bottom_desc"
              />
              <span id="spacing_bottom_desc" class="sr-only">Bottom spacing value</span>
            </div>
  
            <div 
              class="wpcfto-spacing-input-wrap" 
              :class="{ focused: focused === 'spacing_left' }"
            >
              <label for="spacing_left"><i class="fa fa-arrow-left" aria-hidden="true"></i> Left</label>
              <input 
                id="spacing_left"
                type="number" 
                name="left" 
                v-model.number="spacing.left" 
                @focus="focused = 'spacing_left'" 
                @blur="focused = ''"
                :required="fields.required === true"
                aria-describedby="spacing_left_desc"
              />
              <span id="spacing_left_desc" class="sr-only">Left spacing value</span>
            </div>
  
            <label for="spacing_unit" class="sr-only">Spacing unit</label>
            <select 
              id="spacing_unit"
              name="unit" 
              v-model="spacing.unit"
              :required="fields.required === true"
            >
              <option 
                v-for="option in fields.units" 
                :key="option" 
                :value="option"
              >
                {{ option }}
              </option>
            </select>
          </div>
        </div>
  
        <wpcfto_fields_aside_after :fields="fields"></wpcfto_fields_aside_after>
      </div>
    `,
    watch: {
      spacing: {
        deep: true,
        handler(spacing) {
          this.$emit('wpcfto-get-value', spacing);
        }
      }
    }
  });
  
//# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 6632 characters]
},{}]},{},[1])