(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_gallery', {
    props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value', 'required'],
    data() {
      return {
        gallery: [],
        media_modal: null
      };
    },
    mounted() {
      // Initialize gallery from field_value (string or array)
      if (typeof this.field_value === 'string' && WpcftoIsJsonString(this.field_value)) {
        this.gallery = JSON.parse(this.field_value);
      } else if (Array.isArray(this.field_value)) {
        this.gallery = this.field_value;
      } else {
        this.gallery = [];
      }
    },
    methods: {
      addImages() {
        this.media_modal = wp.media({
          frame: 'select',
          multiple: true,
          editing: true,
          library: {
            type: ['image']
          }
        });
  
        this.media_modal.on('select', () => {
          const attachments = this.media_modal.state().get('selection').toJSON();
  
          attachments.forEach(attachment => {
            // Use thumbnail if available, fallback to full url
            const imageUrl = (attachment.sizes && attachment.sizes.thumbnail && attachment.sizes.thumbnail.url) || attachment.url;
            this.gallery.push({
              id: attachment.id,
              url: imageUrl
            });
          });
        });
  
        this.media_modal.open();
      },
      removeImage(index) {
        this.gallery.splice(index, 1);
      },
      clearGallery() {
        this.gallery = [];
      }
    },
    watch: {
      gallery: {
        deep: true,
        handler(gallery) {
          const galleryValue = gallery.map(item => item.id);
          this.$emit('wpcfto-get-value', galleryValue);
        }
      }
    },
    template: `
      <div class="wpcfto_generic_field wpcfto_generic_field_gallery" :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_gallery">
            <draggable 
              class="wpcfto_gallery__items"
              :list="gallery"
              group="gallery"
            >
              <div 
                class="wpcfto_gallery__item"
                v-for="(image, index) in gallery"
                :key="image.id || index"
              >
                <i 
                  class="wpcfto_gallery__item_delete fa fa-times" 
                  @click="removeImage(index)"
                  title="Remove image"
                  role="button"
                  tabindex="0"
                  @keydown.enter.prevent="removeImage(index)"
                ></i>
                <img :src="image.url" :alt="field_label + ' image ' + (index + 1)" />
              </div>
            </draggable>
  
            <div class="actions">
              <div class="button" @click="addImages">Add/Edit Gallery</div>
              <div 
                class="button button-remove" 
                v-if="gallery.length > 0" 
                @click="clearGallery"
              >
                Clear Gallery
              </div>
            </div>
          </div>
        </div>
  
        <wpcfto_fields_aside_after :fields="fields"></wpcfto_fields_aside_after>
      </div>
    `
  });
  
//# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 6580 characters]
},{}]},{},[1])