(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_sorter', {
    props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value', 'field_options'],
    data() {
      return {
        columns: []
      };
    },
    template: `
      <div 
        class="wpcfto_generic_field wpcfto_generic_field_sorter" 
        :class="[field_id, 'columns-' + columns.length]"
      >
        <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_sorter">
            <div 
              v-for="(column, column_key) in columns" 
              :id="column.id" 
              class="wpcfto_sorter_single"
              :key="column.id || column_key"
            >
              <h6 v-html="column.name"></h6>
  
              <draggable 
                class="list-group"
                :list="column.options"
                group="list"
                :key="column_key"
                :move="checkMove"
                v-bind="{ forceFallback: true, touchStartThreshold: 1, fallbackOnBody: true }"
                >
                <div 
                    v-for="(element, element_key) in column.options" 
                    :id="element.id" 
                    class="list-group-item"
                    :class="element.class"
                    :key="element.id || element_key"
                    >
                    <i v-if="element.icon" :class="element.icon" aria-hidden="true"></i> {{ element.label }}
                </div>
              </draggable>
            </div>
          </div>
  
          <!-- Hidden input to submit serialized columns data -->
          <input 
            type="hidden" 
            :name="field_name" 
            :value="JSON.stringify(columns)" 
            :required="fields.required === true" 
          />
        </div>
  
        <wpcfto_fields_aside_after :fields="fields"></wpcfto_fields_aside_after>
      </div>
    `,
    mounted() {
      if (typeof this.field_value !== 'undefined') {
        if (typeof this.field_value === 'string' && WpcftoIsJsonString(this.field_value)) {
          this.columns = JSON.parse(this.field_value);
        } else {
          this.columns = this.field_value;
        }
      } else {
        this.columns = this.field_options || [];
      }
  
      if (!this.columns.length) {
        this.columns = this.field_options || [];
      }
  
      this.fillNewOptions();
    },
    methods: {
    checkMove(evt) {
        const draggedElement = evt.draggedContext.element;
        if (draggedElement.class === 'disable') {
            return false; // Prevent move
        }
        return true;
        },
      fillNewOptions() {
        const existingFields = {};
        const configKeys = {};
  
        this.columns.forEach(column => {
          column.options.forEach(field => {
            existingFields[field.id] = field.label;
          });
        });
  
        this.field_options.forEach((column, column_key) => {
          column.options.forEach(field => {
            configKeys[field.id] = field.label;
            if (existingFields[field.id] === undefined) {
              this.columns[column_key].options.push(field);
            }
          });
        });
  
        this.columns.forEach((column, column_key) => {
          column.options = column.options.filter(field => configKeys[field.id] !== undefined);
        });
      }
    },
    watch: {
      columns: {
        deep: true,
        handler(columns) {
          this.$emit('wpcfto-get-value', columns);
        }
      }
    }
  });
  
//# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 7452 characters]
},{}]},{},[1])