(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('v-select', VueSelect.VueSelect);

    Vue.component('wpcfto_autocomplete', {
      props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value', 'field_data', 'required'],
      data() {
        return {
          ids: [],
          items: [],
          search: '',
          options: [],
          loading: true,
          itemHovered: null,
          value: '',
          limit: 0
        };
      },
      template: `
        <div class="wpcfto_generic_field wpcfto_generic_field_autocomplete autocomplete">
          <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-autocomplete-search" :class="{loading: loading}">
              <div class="v-select-search" v-if="underLimit()">
                <i class="fa fa-plus-circle"></i>
                <v-select label="title"
                          v-model="search"
                          @input="setSelected($event)"
                          :options="options"
                          @search="onSearch($event)"
                          :placeholder="computedPlaceholder"
                          :clearable="false"
                          :searchable="true"
                          :closeOnSelect="true"
                ></v-select>
              </div>
    
              <ul class="wpcfto-autocomplete" :class="{limited: !underLimit()}">
                <li v-for="(item, index) in items" :key="item.id || index" v-if="typeof item !== 'string'" 
                    :class="{hovered: itemHovered === index}">
                  <div class="item-wrapper">
                    <img v-if="item.image" :src="item.image" class="item-image" />
                    <div class="item-data">
                      <span v-html="item.title" class="item-title"></span>
                      <span v-if="item.excerpt" v-html="item.excerpt" class="item-excerpt"></span>
                    </div>
                  </div>
                  <i class="fa fa-trash-alt" 
                     @click="removeItem(index)" 
                     @mouseover="itemHovered = index" 
                     @mouseleave="itemHovered = null"></i>
                </li>
              </ul>
    
              <input type="hidden"
                :name="field_name"
                :value="serializedValue"
                :required="fields && fields.required === true"
                :disabled="!(fields && fields.required === true) && (!value || (Array.isArray(value) && value.length === 0))"
              />
            </div>
          </div>
    
          <wpcfto_fields_aside_after :fields="fields"></wpcfto_fields_aside_after>
        </div>
      `,
      computed: {
        serializedValue() {
          const v = this.value;
          if (Array.isArray(v)) return v.join(',');
          return v || '';
        },
        computedPlaceholder() {
          // Default placeholder template or fallback
          const template = formipay_admin?.config?.autocomplete?.placeholder || 'Search {field_label}...';
          return template.replace('{field_label}', this.field_label || '');
        }
      },
      created() {
        if (this.field_value) {
          this.getPosts(
            `${stm_wpcfto_ajaxurl}?action=wpcfto_search_posts&nonce=${stm_wpcfto_nonces['wpcfto_search_posts']}&posts_per_page=-1&orderby=post__in&ids=${this.field_value}&post_types=${this.fields.post_type.join(',')}`,
            'items'
          );
        } else {
          this.clearItems();
          this.isLoading(false);
        }
    
        if (typeof this.field_data.limit !== 'undefined' && this.field_data.limit > 0) {
          this.limit = this.field_data.limit;
        } else {
          this.limit = 5; // default limit
        }
        if (!this.field_value) {
          this.value = [];
        }
      },
      mounted() {
        this.$nextTick(() => {
          this.updatePlaceholders();
    
          // Attach event listeners to restore placeholder on blur/focusout/mouseleave
          const autocompleteSearch = this.$el.querySelector('.wpcfto-autocomplete-search');
          if (autocompleteSearch) {
            autocompleteSearch.addEventListener('mouseleave', this.restorePlaceholder);
            autocompleteSearch.addEventListener('blur', this.restorePlaceholder, true);
            autocompleteSearch.addEventListener('focusout', this.restorePlaceholder, true);
          }
        });
      },
      beforeDestroy() {
        // Cleanup event listeners
        const autocompleteSearch = this.$el.querySelector('.wpcfto-autocomplete-search');
        if (autocompleteSearch) {
          autocompleteSearch.removeEventListener('mouseleave', this.restorePlaceholder);
          autocompleteSearch.removeEventListener('blur', this.restorePlaceholder, true);
          autocompleteSearch.removeEventListener('focusout', this.restorePlaceholder, true);
        }
      },
      methods: {
        isLoading(isLoading) {
          this.loading = isLoading;
        },
        setSelected(value) {
          if (value) this.items.push(value);
          this.options = [];
          this.search = '';
        },
        clearItems() {
          this.items = this.items.filter(el => el != null && el !== '');
        },
        underLimit() {
          return this.items.length < this.limit;
        },
        onSearch(search) {
          const exclude = this.ids.join(',');
          const post_types = this.fields.post_type.join(',');
          this.getPosts(
            `${stm_wpcfto_ajaxurl}?action=wpcfto_search_posts&nonce=${stm_wpcfto_nonces['wpcfto_search_posts']}&exclude_ids=${exclude}&s=${encodeURIComponent(search)}&post_types=${post_types}`,
            'options'
          );
        },
        getPosts(url, variable) {
          this.isLoading(true);
          url += `&name=${this.field_name}`;
          this.$http.get(url).then(response => {
            this[variable] = response.body;
            this.clearItems();
            this.isLoading(false);
          });
        },
        updateIds() {
          this.ids = this.items.map(item => item.id);
          this.value = this.ids;
          this.$emit('wpcfto-get-value', this.ids);
        },
        removeItem(index) {
          this.items.splice(index, 1);
        },
        updatePlaceholders() {
          // Scoped to this component root element
          const autocompleteFields = this.$el.closest('.wpcfto-box')?.querySelectorAll('.autocomplete') || [];
    
          autocompleteFields.forEach(field => {
            const labelEl = field.querySelector('.wpcfto-field-aside__label span');
            if (!labelEl) return;
    
            const label = labelEl.textContent || labelEl.innerText || '';
            const placeholderTemplate = formipay_admin?.config?.autocomplete?.placeholder || 'Search {field_label}...';
            const placeholder = placeholderTemplate.replace('{field_label}', label);
    
            const searchInput = field.querySelector('input[type="text"]');
            if (searchInput) {
              searchInput.setAttribute('placeholder', placeholder);
              if (searchInput.parentElement) {
                searchInput.parentElement.setAttribute('data-input-placeholder', placeholder);
              }
            }
          });
        },
        restorePlaceholder(event) {
          const target = event.target;
          if (!target) return;
    
          const parent = target.parentElement;
          if (!parent) return;
    
          const placeholder = parent.getAttribute('data-input-placeholder');
          if (placeholder) {
            setTimeout(() => {
              target.setAttribute('placeholder', placeholder);
            }, 500);
          }
        }
      },
      watch: {
        items() {
          this.updateIds();
        }
      }
    });
    

    //# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 13028 characters]
    },{}]},{},[1])