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

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

function _unsupportedIterableToArray(o, minLen) {
  if (!o) return;
  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
  var n = Object.prototype.toString.call(o).slice(8, -1);
  if (n === "Object" && o.constructor) n = o.constructor.name;
  if (n === "Map" || n === "Set") return Array.from(o);
  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
  if (len == null || len > arr.length) len = arr.length;

  for (var i = 0, arr2 = new Array(len); i < len; i++) {
    arr2[i] = arr[i];
  }

  return arr2;
}

function _iterableToArrayLimit(arr, i) {
  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}
/**
 * @var wpcfto_global_settings
 */


Vue.component('wpcfto_typography', {
  props: ['fields', 'field_label', 'field_name', 'field_id', 'field_value', 'field_data'],
  data: function data() {
    return {
      inited: false,
      google_fonts: wpcfto_global_settings['fonts_list']['google'],
      web_safe_fonts: wpcfto_global_settings['fonts_list']['websafe'],
      variants: wpcfto_global_settings['variants'],
      subsets: wpcfto_global_settings['subsets'],
      align: wpcfto_global_settings['align'],
      translations: wpcfto_global_settings['translations'],
      transform: wpcfto_global_settings['transform'],
      typography: {
        'font-family': '',
        'google-weight': 'regular',
        'font-weight': '400',
        'font-style': 'normal',
        'subset': 'latin',
        'color': '#000',
        'font-size': '14',
        'line-height': '20',
        'text-align': 'left',
        'word-spacing': '0',
        'text-transform': 'normal',
        'letter-spacing': '0',
        'backup-font': '',
        'font-data': {
          'family': '',
          'variants': []
        }
      }
    };
  },
  template: "\n        <div class=\"wpcfto_generic_field wpcfto_generic_field__typography\" v-bind:class=\"field_id\">\n\n            <wpcfto_fields_aside_before :fields=\"fields\" :field_label=\"field_label\"></wpcfto_fields_aside_before>\n            \n            <div class=\"wpcfto-field-content\">\n                <div class=\"wpcfto-typography-fields-wrap\">\n                    <div class=\"row\">\n                        <div class=\"column\">\n                        \n                            <div class=\"column-1\" v-if=\"typography['font-family'].length\">\n                                <div v-if=\"typography['font-family'].length\">\n                                    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\">\n                                    <link :href=\"buildGLink()\" rel=\"stylesheet\">\n                                </div>\n                            </div>\n                \n                            <div class=\"column-50\" v-if=\"notExcluded('font-family')\">\n                                <label class=\"field-label\" v-html=\"translations['font_family']\"></label>                        \n                                <select v-model=\"typography['font-data']\" @change=\"fontChanged()\">\n                                    <option value=\"\">Select font</option>\n                                    <option v-bind:value=\"font\" v-for=\"font in google_fonts\" v-html=\"font.family\"></option>\n                                </select>\n                            </div>        \n                \n                            <div class=\"column-50\" v-if=\"notExcluded('backup-font')\">\n                                <label class=\"field-label\" v-html=\"translations['backup_font_family']\"></label>       \n                                <select v-model=\"typography['backup-font']\">\n                                    <option value=\"\">Select backup font</option>\n                                    <option v-bind:value=\"font\" v-for=\"font in web_safe_fonts\" v-html=\"font\"></option>\n                                </select>\n                            </div>        \n                                 \n                            <div class=\"column-50\" v-if=\"notExcluded('font-weight')\">\n                                <label class=\"field-label\" v-html=\"translations['font_weight']\"></label>     \n                                <select v-model=\"typography['google-weight']\" @change=\"weightChanged()\">\n                                    <option value=\"\">Select font weight</option>\n                                    <option\n                                        v-bind:value=\"variant_key\"\n                                        :disabled=\"isFontWeightDisabled(variant_key)\"\n                                        v-for=\"(variant, variant_key) in variants\" v-html=\"variant\"></option>\n                                </select>\n                            </div>        \n        \n                            <div class=\"column-50\" v-if=\"notExcluded('subset')\">\n                                <label class=\"field-label\" v-html=\"translations['font_subset']\"></label>       \n                                <select v-model=\"typography['subset']\">\n                                    <option value=\"\">Select subset</option>\n                                    <option\n                                        v-bind:value=\"subset_key\"\n                                        :disabled=\"isSubsetDisabled(subset_key)\"\n                                        v-for=\"(subset, subset_key) in subsets\" v-html=\"subset\"></option>\n                                </select>\n                            </div>        \n        \n                            <div class=\"column-50\" v-if=\"notExcluded('text-align')\">\n                                <label class=\"field-label\" v-html=\"translations['text_align']\"></label> \n                                <select v-model=\"typography['text-align']\">\n                                    <option\n                                        v-bind:value=\"align_key\"\n                                        v-for=\"(align_label, align_key) in align\" v-html=\"align_label\"></option>\n                                </select>\n                            </div>        \n        \n                            <div class=\"column-50\">\n                                <div class=\"row\">\n                                    <div class=\"column\">\n                                        <div class=\"column-50\" v-if=\"notExcluded('font-size')\">\n                                            <label>\n                                                <span class=\"field-label\" v-html=\"translations['font_size']\"></span>\n                                                <div class=\"input-group\">\n                                                    <input type=\"number\" class=\"form-control\" v-model=\"typography['font-size']\" min=\"1\">\n                                                    <span class=\"input-group-addon\">px</span>\n                                                </div>                                                \n                                            </label>                                \n                                        </div>\n                                        <div class=\"column-50\" v-if=\"notExcluded('line-height')\">\n                                            <label>\n                                                <span class=\"field-label\" v-html=\"translations['line_height']\"></span>\n                                                <div class=\"input-group\">\n                                                    <input type=\"number\" class=\"form-control\" v-model=\"typography['line-height']\" min=\"0\">\n                                                    <span class=\"input-group-addon\">px</span>\n                                                </div>                                             \n                                            </label>                                   \n                                        </div>\n                                    </div>  \n                                </div>                         \n                            </div>\n        \n                            <div class=\"column-50\">\n                                <div class=\"row\">\n                                    <div class=\"column\">\n                                        <div class=\"column-50\" v-if=\"notExcluded('word-spacing')\">\n                                            <label>\n                                                <span class=\"field-label\" v-html=\"translations['word_spacing']\"></span>\n                                                <div class=\"input-group\">\n                                                    <input type=\"number\" class=\"form-control\" v-model=\"typography['word-spacing']\" min=\"0\">\n                                                    <span class=\"input-group-addon\">px</span>\n                                                </div>\n                                            </label>                                \n                                        </div>\n                                        <div class=\"column-50\" v-if=\"notExcluded('letter-spacing')\">\n                                            <label>\n                                                <span class=\"field-label\" v-html=\"translations['letter_spacing']\"></span>\n                                                <div class=\"input-group\">\n                                                    <input type=\"number\" class=\"form-control\" v-model=\"typography['letter-spacing']\" min=\"0\">\n                                                    <span class=\"input-group-addon\">px</span>\n                                                </div>                                            \n                                            </label>                            \n                                        </div>\n                                    </div>\n                                </div>                          \n                            </div>     \n        \n                            <div class=\"column-50\" v-if=\"notExcluded('color')\">\n                                <label class=\"field-label\" v-html=\"translations['font_color']\"></label> \n                                <wpcfto_color @wpcfto-get-value=\"typography['color'] = $event\"\n                                        :fields=\"{position: 'bottom'}\"\n                                        v-if=\"inited\"\n                                        :field_value=\"typography['color']\">\n                                </wpcfto_color>\n                            </div>            \n                            \n                            <div class=\"column-50\" v-if=\"notExcluded('text-transform')\"> \n                                <label class=\"field-label\" v-html=\"translations['text-transform']\"></label>\n                                <select v-model=\"typography['text-transform']\">\n                                    <option\n                                        v-bind:value=\"transform_key\"\n                                        v-for=\"(transform_label, transform_key) in transform\" v-html=\"transform_label\"></option>\n                                </select>\n                            </div>\n                \n                            <div class=\"column-1\" v-if=\"notExcluded('preview')\">\n                                <div class=\"wpcfto_generic_field__typography__preview\" :style=\"previewStyles()\">\n                                    ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 \u2018?\u2019\u201C!\u201D(%)[#]{@}/&\\<-+\xF7\xD7=>\xAE\xA9$\u20AC\xA3\xA5\xA2:;,.*\n                                </div>            \n                            </div>            \n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <wpcfto_fields_aside_after :fields=\"fields\"></wpcfto_fields_aside_after>\n\n        </div>\n    ",
  mounted: function mounted() {
    if (typeof this.field_value === 'string' && WpcftoIsJsonString(this.field_value)) {
      this.field_value = JSON.parse(this.field_value);
    }

    this.fillTypography();
    this.inited = true;
    this.editVariant();
    this.editSubset();
  },
  methods: {
    fillTypography: function fillTypography() {
      var _this = this;

      var _loop = function _loop() {
        var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 1),
            key = _Object$entries$_i[0];

        var value = _this.field_value[key];

        if (typeof value !== 'undefined') {
          _this.$set(_this.typography, key, value);

          if (key === 'font-family') {
            _this.setGoogleFontFamily(value);
          }

          if (key === 'font-weight') {
            setTimeout(function () {
              _this.$set(_this.typography, 'font-weight', value);

              if (typeof _this.field_value['google-weight'] !== 'undefined') {
                _this.$set(_this.typography, 'google-weight', _this.field_value['google-weight']);
              }
            });
          }
        }
      };

      for (var _i = 0, _Object$entries = Object.entries(_this.typography); _i < _Object$entries.length; _i++) {
        _loop();
      }
    },
    isFontWeightDisabled: function isFontWeightDisabled(variant) {
      if (typeof this.field_data['excluded'] !== 'undefined' && this.field_data['excluded'].includes('font-family')) {
        return false;
      }

      var current_variants = this.typography['font-data']['variants'];
      if (typeof current_variants === 'undefined') return false;
      return !current_variants.includes(variant);
    },
    isSubsetDisabled: function isSubsetDisabled(subset) {
      var current_subsets = this.typography['font-data']['subsets'];
      if (typeof current_subsets === 'undefined') return false;
      return !current_subsets.includes(subset);
    },
    fontChanged: function fontChanged() {
      this.$set(this.typography, 'font-family', this.typography['font-data'].family);
      this.editVariant();
      this.editSubset();
    },
    editVariant: function editVariant() {
      var current_variant = this.typography['google-weight'];
      var current_variants = this.typography['font-data']['variants'];

      if (typeof current_variants !== 'undefined' && !current_variants.includes(current_variant)) {
        if (typeof current_variants[0] !== 'undefined') {
          this.$set(this.typography, 'google-weight', current_variants[0]);
        }

        this.weightChanged();
      }
    },
    editSubset: function editSubset() {
      var current_subset = this.typography['subset'];
      var current_subsets = this.typography['font-data']['subsets'];

      if (typeof current_subsets !== 'undefined' && !current_subsets.includes(current_subset)) {
        this.$set(this.typography, 'subset', current_subsets[0]);
      }
    },
    buildGLink: function buildGLink() {
      var base = 'https://fonts.googleapis.com/css2?family=';
      base += "".concat(this.typography['font-family']);
      var isItalic = this.typography['font-style'] === 'italic';
      base += isItalic ? ':ital,' : ':';
      base += 'wght@';
      if (isItalic) base += '1,';
      base += this.typography['font-weight'];
      base += '&display=swap';
      return base;
    },
    previewStyles: function previewStyles() {
      var typo = this.typography;
      return {
        'font-family': "'".concat(typo['font-family'], "', ").concat(typo['font-data']['category']),
        'color': typo['color'],
        'font-size': typo['font-size'] + 'px',
        'line-height': typo['line-height'] + 'px',
        'letter-spacing': typo['letter-spacing'] + 'px',
        'word-spacing': typo['word-spacing'] + 'px',
        'text-align': typo['text-align'],
        'font-weight': typo['font-weight'],
        'font-style': typo['font-style'],
        'text-transform': typo['text-transform']
      };
    },
    weightChanged: function weightChanged() {
      var typo = this.typography;
      var weight = typo['google-weight'];
      var multiWeight = typeof weight !== 'undefined' ? weight.match(/[a-zA-Z]+|[0-9]+/g) : ['400', 'normal'];

      if (weight === 'regular') {
        this.$set(typo, 'font-weight', 400);
        this.$set(typo, 'font-style', 'normal');
      } else if (weight === 'italic') {
        this.$set(typo, 'font-weight', 400);
        this.$set(typo, 'font-style', 'italic');
      } else if (multiWeight.length === 2) {
        this.$set(typo, 'font-weight', multiWeight[0]);
        this.$set(typo, 'font-style', multiWeight[1]);
      } else {
        this.$set(typo, 'font-weight', weight);
        this.$set(typo, 'font-style', 'normal');
      }
    },
    notExcluded: function notExcluded(option) {
      if (typeof this.field_data['excluded'] === 'undefined') return true;
      var excluded = this.field_data['excluded'];
      return !excluded.includes(option);
    },
    setGoogleFontFamily: function setGoogleFontFamily(font_family) {
      var _this = this;

      _this.google_fonts.forEach(function (value) {
        if (value.family === font_family) {
          _this.$set(_this.typography, 'font-data', value);

          _this.editVariant();

          _this.editSubset();
        }
      });
    }
  },
  watch: {
    typography: {
      deep: true,
      handler: function handler(typography) {
        this.$emit('wpcfto-get-value', typography);
      }
    }
  }
});
//# sourceMappingURL=data:application/json;charset=utf-8;base64,[encoded data, 39156 characters]
},{}]},{},[1])