(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";

var timeout;
var icons = wpcfto_icons_set;

Vue.component('wpcfto_icon_picker', {
    mixins: [window.validationMixin],
  props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value', 'field_data'],
  data() {
    return {
      value: {
        icon: '',
        color: '#000',
        size: 15
      },
      focusOn: false,
      icons: icons,
      hoverPanel: false,
      search: '',
      beforeSelect: '',
      selected: '',
      inited: false
    };
  },
  template: `
    <div class="wpcfto_generic_field wpcfto_generic_field_iconpicker">
      <wpcfto_fields_aside_before :fields="fields" :field_label="field_label"></wpcfto_fields_aside_before>

      <div class="wpcfto-field-content">
        <div class="wpcfto_generic_field__inner">

          <div class="wpcfto_generic_field">
            <label :for="field_id + '_search'">Icon picker</label>
            <input
              ref="picker"
              :id="field_id + '_search'"
              v-model="search"
              @blur="blur"
              @focus="focus"
              type="text"
              class="form-control"
              placeholder="Search an icon"
              autocomplete="off"
              aria-autocomplete="list"
              aria-controls="icon-list"
              role="combobox"
              :aria-expanded="focusOn.toString()"
            />
          </div>

          <wpcfto_color
            v-if="inited"
            :fields="{position: 'bottom'}"
            :field_label="'Icon color'"
            :field_value="value.color"
            @wpcfto-get-value="val => value.color = val"
          ></wpcfto_color>

          <wpcfto_range_slider
            v-if="inited"
            :fields="fields"
            :field_label="'Icon size'"
            :field_name="field_name"
            :field_description="'Icon size set in pixels'"
            :field_id="field_id"
            :field_value="value.size"
            :field_data="{min:1,max:200}"
            :field_input_addon="{label:'px'}"
            @wpcfto-get-value="val => value.size = val"
          ></wpcfto_range_slider>
        </div>

        <transition name="icon-preview-fade">
          <div v-if="focusOn" class="preview-container" role="listbox" id="icon-list">
            <div
              @click="select(undefined)"
              @mouseover="hoverPanel = true"
              @mouseout="hoverPanel = false"
              :class="['previewer', 'rounded', {'custom-shadow-sm': !hoverPanel, 'custom-shadow': hoverPanel}]"
            >
              <div
                v-for="(i, index) in iconsFiltered"
                :key="i.title"
                class="icon-preview"
                role="option"
                :aria-selected="i.title === selected"
                tabindex="0"
                @click.prevent.stop="select(i)"
                @keydown.enter.prevent.stop="select(i)"
                @keydown.space.prevent.stop="select(i)"
              >
                <div :class="['icon-wrapper', 'rounded', 'shadow-sm', {selected: i.title === selected}]">
                  <i :class="i.title"></i>
                </div>
              </div>
            </div>
          </div>
        </transition>

        <div class="icon-preview-wrap">
          <label>Preview</label>
          <div class="icon-preview-inner">
            <i
              v-if="value.icon && value.icon !== ''"
              class="wpcfto_generic_field__iconpicker__icon"
              :class="value.icon"
              :style="{ color: value.color, fontSize: value.size + 'px' }"
              aria-live="polite"
              aria-label="Selected icon preview"
            ></i>
            <span v-else>--</span>
          </div>
        </div>
      </div>
    </div>
  `,
  mounted() {
    if (typeof this.field_value === 'string' && WpcftoIsJsonString(this.field_value)) {
      this.value = JSON.parse(this.field_value);
    } else if (_typeof(this.field_value) === 'object' && this.field_value !== null) {
      this.value = this.field_value;
    }

    if (!this.value.icon) {
      this.value = {
        icon: '',
        color: '#000',
        size: 15
      };
    }

    this.selected = this.value.icon;
    this.inited = true;
  },
  methods: {
    blur() {
      timeout = setTimeout(() => {
        this.focusOn = false;
        // Do not clear icon on blur to avoid losing selection
        // this.value.icon = '';
      }, 100);
    },
    focus() {
      this.focusOn = true;
    },
    select(icon) {
      clearTimeout(timeout);

      if (icon) {
        if (this.search !== this.selected) {
          this.beforeSelect = this.search;
        }
        this.selected = icon.title;
        this.search = icon.title;
      } else {
        // Clear selection if undefined passed
        this.selected = '';
        this.search = '';
      }

      this.focusOn = false;
      this.value.icon = this.selected;
    }
  },
  computed: {
    iconsFiltered() {
      const searchTerm = this.search === this.selected ? this.beforeSelect : this.search;
      const lowerSearch = searchTerm.toLowerCase();

      return this.icons.filter(i =>
        i.title.toLowerCase().includes(lowerSearch) ||
        i.searchTerms.some(t => t.toLowerCase().includes(lowerSearch))
      );
    }
  },
  watch: {
    value: {
      deep: true,
      handler(value) {
        this.$emit('wpcfto-get-value', value);
      }
    }
  }
});

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