(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 arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; } function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } } function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; } function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } } function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /* global wpforms_gutenberg_form_selector, Choices, JSX, DOM */ /* jshint es3: false, esversion: 6 */ /** * Gutenberg editor block. * * @since 1.8.1 */ var WPForms = window.WPForms || {}; WPForms.FormSelector = WPForms.FormSelector || function (document, window, $) { var _wp = wp, _wp$serverSideRender = _wp.serverSideRender, ServerSideRender = _wp$serverSideRender === void 0 ? wp.components.ServerSideRender : _wp$serverSideRender; var _wp$element = wp.element, createElement = _wp$element.createElement, Fragment = _wp$element.Fragment, useState = _wp$element.useState, createInterpolateElement = _wp$element.createInterpolateElement; var registerBlockType = wp.blocks.registerBlockType; var _ref = wp.blockEditor || wp.editor, InspectorControls = _ref.InspectorControls, InspectorAdvancedControls = _ref.InspectorAdvancedControls, PanelColorSettings = _ref.PanelColorSettings; var _wp$components = wp.components, SelectControl = _wp$components.SelectControl, ToggleControl = _wp$components.ToggleControl, PanelBody = _wp$components.PanelBody, Placeholder = _wp$components.Placeholder, Flex = _wp$components.Flex, FlexBlock = _wp$components.FlexBlock, __experimentalUnitControl = _wp$components.__experimentalUnitControl, TextareaControl = _wp$components.TextareaControl, Button = _wp$components.Button, Modal = _wp$components.Modal; var _wpforms_gutenberg_fo = wpforms_gutenberg_form_selector, strings = _wpforms_gutenberg_fo.strings, defaults = _wpforms_gutenberg_fo.defaults, sizes = _wpforms_gutenberg_fo.sizes, urls = _wpforms_gutenberg_fo.urls, isPro = _wpforms_gutenberg_fo.isPro; var defaultStyleSettings = defaults; var __ = wp.i18n.__; /** * List of forms. * * Default value is localized in FormSelector.php. * * @since 1.8.4 * * @type {Object} */ var formList = wpforms_gutenberg_form_selector.forms; /** * Blocks runtime data. * * @since 1.8.1 * * @type {Object} */ var blocks = {}; /** * Whether it is needed to trigger server rendering. * * @since 1.8.1 * * @type {boolean} */ var triggerServerRender = true; /** * Popup container. * * @since 1.8.3 * * @type {Object} */ var $popup = {}; /** * Track fetch status. * * @since 1.8.4 * * @type {boolean} */ var isFetching = false; /** * Public functions and properties. * * @since 1.8.1 * * @type {Object} */ var app = { /** * Start the engine. * * @since 1.8.1 */ init: function init() { app.initDefaults(); app.registerBlock(); $(app.ready); }, /** * Document ready. * * @since 1.8.1 */ ready: function ready() { app.events(); }, /** * Events. * * @since 1.8.1 */ events: function events() { $(window).on('wpformsFormSelectorEdit', _.debounce(app.blockEdit, 250)).on('wpformsFormSelectorFormLoaded', _.debounce(app.formLoaded, 250)); }, /** * Get fresh list of forms via REST-API. * * @since 1.8.4 * * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-api-fetch/ */ getForms: function getForms() { return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() { var response; return _regeneratorRuntime().wrap(function _callee$(_context) { while (1) switch (_context.prev = _context.next) { case 0: if (!isFetching) { _context.next = 2; break; } return _context.abrupt("return"); case 2: // Set the flag to true indicating a fetch is in progress. isFetching = true; _context.prev = 3; _context.next = 6; return wp.apiFetch({ path: '/wpforms/v1/forms/', method: 'GET', cache: 'no-cache' }); case 6: response = _context.sent; // Update the form list. formList = response.forms; _context.next = 13; break; case 10: _context.prev = 10; _context.t0 = _context["catch"](3); // eslint-disable-next-line no-console console.error(_context.t0); case 13: _context.prev = 13; isFetching = false; return _context.finish(13); case 16: case "end": return _context.stop(); } }, _callee, null, [[3, 10, 13, 16]]); }))(); }, /** * Open builder popup. * * @since 1.6.2 * * @param {string} clientID Block Client ID. */ openBuilderPopup: function openBuilderPopup(clientID) { if ($.isEmptyObject($popup)) { var tmpl = $('#wpforms-gutenberg-popup'); var parent = $('#wpwrap'); parent.after(tmpl); $popup = parent.siblings('#wpforms-gutenberg-popup'); } var url = wpforms_gutenberg_form_selector.get_started_url, $iframe = $popup.find('iframe'); app.builderCloseButtonEvent(clientID); $iframe.attr('src', url); $popup.fadeIn(); }, /** * Close button (inside the form builder) click event. * * @since 1.8.3 * * @param {string} clientID Block Client ID. */ builderCloseButtonEvent: function builderCloseButtonEvent(clientID) { $popup.off('wpformsBuilderInPopupClose').on('wpformsBuilderInPopupClose', function (e, action, formId, formTitle) { if (action !== 'saved' || !formId) { return; } // Insert a new block when a new form is created from the popup to update the form list and attributes. var newBlock = wp.blocks.createBlock('wpforms/form-selector', { formId: formId.toString() // Expects string value, make sure we insert string. }); // eslint-disable-next-line camelcase formList = [{ ID: formId, post_title: formTitle }]; // Insert a new block. wp.data.dispatch('core/block-editor').removeBlock(clientID); wp.data.dispatch('core/block-editor').insertBlocks(newBlock); }); }, /** * Register block. * * @since 1.8.1 */ // eslint-disable-next-line max-lines-per-function registerBlock: function registerBlock() { registerBlockType('wpforms/form-selector', { title: strings.title, description: strings.description, icon: app.getIcon(), keywords: strings.form_keywords, category: 'widgets', attributes: app.getBlockAttributes(), supports: { customClassName: app.hasForms() }, example: { attributes: { preview: true } }, edit: function edit(props) { // Get fresh list of forms. app.getForms(); var attributes = props.attributes; var formOptions = app.getFormOptions(); var handlers = app.getSettingsFieldsHandlers(props); // Store block clientId in attributes. if (!attributes.clientId) { // We just want client ID to update once. // The block editor doesn't have a fixed block ID, so we need to get it on the initial load, but only once. props.setAttributes({ clientId: props.clientId }); } // Main block settings. var jsx = [app.jsxParts.getMainSettings(attributes, handlers, formOptions)]; // Block preview picture. if (!app.hasForms()) { jsx.push(app.jsxParts.getEmptyFormsPreview(props)); return jsx; } var sizeOptions = app.getSizeOptions(); // Form style settings & block content. if (attributes.formId) { jsx.push(app.jsxParts.getStyleSettings(props, handlers, sizeOptions), app.jsxParts.getAdvancedSettings(props, handlers), app.jsxParts.getBlockFormContent(props)); handlers.updateCopyPasteContent(); $(window).trigger('wpformsFormSelectorEdit', [props]); return jsx; } // Block preview picture. if (attributes.preview) { jsx.push(app.jsxParts.getBlockPreview()); return jsx; } // Block placeholder (form selector). jsx.push(app.jsxParts.getBlockPlaceholder(props.attributes, handlers, formOptions)); return jsx; }, save: function save() { return null; } }); }, /** * Init default style settings. * * @since 1.8.1 */ initDefaults: function initDefaults() { ['formId', 'copyPasteJsonValue'].forEach(function (key) { return delete defaultStyleSettings[key]; }); }, /** * Check if site has forms. * * @since 1.8.3 * * @return {boolean} Whether site has at least one form. */ hasForms: function hasForms() { return formList.length >= 1; }, /** * Block JSX parts. * * @since 1.8.1 * * @type {Object} */ jsxParts: { /** * Get main settings JSX code. * * @since 1.8.1 * * @param {Object} attributes Block attributes. * @param {Object} handlers Block event handlers. * @param {Object} formOptions Form selector options. * * @return {JSX.Element} Main setting JSX code. */ getMainSettings: function getMainSettings(attributes, handlers, formOptions) { if (!app.hasForms()) { return app.jsxParts.printEmptyFormsNotice(attributes.clientId); } return /*#__PURE__*/React.createElement(InspectorControls, { key: "wpforms-gutenberg-form-selector-inspector-main-settings" }, /*#__PURE__*/React.createElement(PanelBody, { className: "wpforms-gutenberg-panel", title: strings.form_settings }, /*#__PURE__*/React.createElement(SelectControl, { label: strings.form_selected, value: attributes.formId, options: formOptions, onChange: function onChange(value) { return handlers.attrChange('formId', value); } }), attributes.formId ? /*#__PURE__*/React.createElement("p", { className: "wpforms-gutenberg-form-selector-actions" }, /*#__PURE__*/React.createElement("a", { href: urls.form_url.replace('{ID}', attributes.formId), rel: "noreferrer", target: "_blank" }, strings.form_edit), isPro && /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0\xA0|\xA0\xA0", /*#__PURE__*/React.createElement("a", { href: urls.entries_url.replace('{ID}', attributes.formId), rel: "noreferrer", target: "_blank" }, strings.form_entries))) : null, /*#__PURE__*/React.createElement(ToggleControl, { label: strings.show_title, checked: attributes.displayTitle, onChange: function onChange(value) { return handlers.attrChange('displayTitle', value); } }), /*#__PURE__*/React.createElement(ToggleControl, { label: strings.show_description, checked: attributes.displayDesc, onChange: function onChange(value) { return handlers.attrChange('displayDesc', value); } }), /*#__PURE__*/React.createElement("p", { className: "wpforms-gutenberg-panel-notice" }, /*#__PURE__*/React.createElement("strong", null, strings.panel_notice_head), strings.panel_notice_text, /*#__PURE__*/React.createElement("a", { href: strings.panel_notice_link, rel: "noreferrer", target: "_blank" }, strings.panel_notice_link_text)))); }, /** * Print empty forms notice. * * @since 1.8.3 * * @param {string} clientId Block client ID. * * @return {JSX.Element} Field styles JSX code. */ printEmptyFormsNotice: function printEmptyFormsNotice(clientId) { return /*#__PURE__*/React.createElement(InspectorControls, { key: "wpforms-gutenberg-form-selector-inspector-main-settings" }, /*#__PURE__*/React.createElement(PanelBody, { className: "wpforms-gutenberg-panel", title: strings.form_settings }, /*#__PURE__*/React.createElement("p", { className: "wpforms-gutenberg-panel-notice wpforms-warning wpforms-empty-form-notice", style: { display: 'block' } }, /*#__PURE__*/React.createElement("strong", null, __('You haven’t created a form, yet!', 'wpforms-lite')), __('What are you waiting for?', 'wpforms-lite')), /*#__PURE__*/React.createElement("button", { type: "button", className: "get-started-button components-button is-secondary", onClick: function onClick() { app.openBuilderPopup(clientId); } }, __('Get Started', 'wpforms-lite')))); }, /** * Get Field styles JSX code. * * @since 1.8.1 * * @param {Object} props Block properties. * @param {Object} handlers Block event handlers. * @param {Object} sizeOptions Size selector options. * * @return {Object} Field styles JSX code. */ getFieldStyles: function getFieldStyles(props, handlers, sizeOptions) { // eslint-disable-line max-lines-per-function return /*#__PURE__*/React.createElement(PanelBody, { className: app.getPanelClass(props), title: strings.field_styles }, /*#__PURE__*/React.createElement("p", { className: "wpforms-gutenberg-panel-notice wpforms-use-modern-notice" }, /*#__PURE__*/React.createElement("strong", null, strings.use_modern_notice_head), strings.use_modern_notice_text, " ", /*#__PURE__*/React.createElement("a", { href: strings.use_modern_notice_link, rel: "noreferrer", target: "_blank" }, strings.learn_more)), /*#__PURE__*/React.createElement("p", { className: "wpforms-gutenberg-panel-notice wpforms-warning wpforms-lead-form-notice", style: { display: 'none' } }, /*#__PURE__*/React.createElement("strong", null, strings.lead_forms_panel_notice_head), strings.lead_forms_panel_notice_text), /*#__PURE__*/React.createElement(Flex, { gap: 4, align: "flex-start", className: 'wpforms-gutenberg-form-selector-flex', justify: "space-between" }, /*#__PURE__*/React.createElement(FlexBlock, null, /*#__PURE__*/React.createElement(SelectControl, { label: strings.size, value: props.attributes.fieldSize, options: sizeOptions, onChange: function onChange(value) { return handlers.styleAttrChange('fieldSize', value); } })), /*#__PURE__*/React.createElement(FlexBlock, null, /*#__PURE__*/React.createElement(__experimentalUnitControl, { label: strings.border_radius, value: props.attributes.fieldBorderRadius, isUnitSelectTabbable: true, onChange: function onChange(value) { return handlers.styleAttrChange('fieldBorderRadius', value); } }))), /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-color-picker" }, /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-control-label" }, strings.colors), /*#__PURE__*/React.createElement(PanelColorSettings, { __experimentalIsRenderedInSidebar: true, enableAlpha: true, showTitle: false, className: "wpforms-gutenberg-form-selector-color-panel", colorSettings: [{ value: props.attributes.fieldBackgroundColor, onChange: function onChange(value) { return handlers.styleAttrChange('fieldBackgroundColor', value); }, label: strings.background }, { value: props.attributes.fieldBorderColor, onChange: function onChange(value) { return handlers.styleAttrChange('fieldBorderColor', value); }, label: strings.border }, { value: props.attributes.fieldTextColor, onChange: function onChange(value) { return handlers.styleAttrChange('fieldTextColor', value); }, label: strings.text }] }))); }, /** * Get Label styles JSX code. * * @since 1.8.1 * * @param {Object} props Block properties. * @param {Object} handlers Block event handlers. * @param {Object} sizeOptions Size selector options. * * @return {Object} Label styles JSX code. */ getLabelStyles: function getLabelStyles(props, handlers, sizeOptions) { return /*#__PURE__*/React.createElement(PanelBody, { className: app.getPanelClass(props), title: strings.label_styles }, /*#__PURE__*/React.createElement(SelectControl, { label: strings.size, value: props.attributes.labelSize, className: "wpforms-gutenberg-form-selector-fix-bottom-margin", options: sizeOptions, onChange: function onChange(value) { return handlers.styleAttrChange('labelSize', value); } }), /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-color-picker" }, /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-control-label" }, strings.colors), /*#__PURE__*/React.createElement(PanelColorSettings, { __experimentalIsRenderedInSidebar: true, enableAlpha: true, showTitle: false, className: "wpforms-gutenberg-form-selector-color-panel", colorSettings: [{ value: props.attributes.labelColor, onChange: function onChange(value) { return handlers.styleAttrChange('labelColor', value); }, label: strings.label }, { value: props.attributes.labelSublabelColor, onChange: function onChange(value) { return handlers.styleAttrChange('labelSublabelColor', value); }, label: strings.sublabel_hints.replace('&', '&') }, { value: props.attributes.labelErrorColor, onChange: function onChange(value) { return handlers.styleAttrChange('labelErrorColor', value); }, label: strings.error_message }] }))); }, /** * Get Button styles JSX code. * * @since 1.8.1 * * @param {Object} props Block properties. * @param {Object} handlers Block event handlers. * @param {Object} sizeOptions Size selector options. * * @return {Object} Button styles JSX code. */ getButtonStyles: function getButtonStyles(props, handlers, sizeOptions) { return /*#__PURE__*/React.createElement(PanelBody, { className: app.getPanelClass(props), title: strings.button_styles }, /*#__PURE__*/React.createElement(Flex, { gap: 4, align: "flex-start", className: 'wpforms-gutenberg-form-selector-flex', justify: "space-between" }, /*#__PURE__*/React.createElement(FlexBlock, null, /*#__PURE__*/React.createElement(SelectControl, { label: strings.size, value: props.attributes.buttonSize, options: sizeOptions, onChange: function onChange(value) { return handlers.styleAttrChange('buttonSize', value); } })), /*#__PURE__*/React.createElement(FlexBlock, null, /*#__PURE__*/React.createElement(__experimentalUnitControl, { onChange: function onChange(value) { return handlers.styleAttrChange('buttonBorderRadius', value); }, label: strings.border_radius, isUnitSelectTabbable: true, value: props.attributes.buttonBorderRadius }))), /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-color-picker" }, /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-control-label" }, strings.colors), /*#__PURE__*/React.createElement(PanelColorSettings, { __experimentalIsRenderedInSidebar: true, enableAlpha: true, showTitle: false, className: "wpforms-gutenberg-form-selector-color-panel", colorSettings: [{ value: props.attributes.buttonBackgroundColor, onChange: function onChange(value) { return handlers.styleAttrChange('buttonBackgroundColor', value); }, label: strings.background }, { value: props.attributes.buttonTextColor, onChange: function onChange(value) { return handlers.styleAttrChange('buttonTextColor', value); }, label: strings.text }] }), /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-legend wpforms-button-color-notice" }, strings.button_color_notice))); }, /** * Get Page Indicator styles JSX code. * * @since 1.8.7 * * @param {Object} props Block properties. * @param {Object} handlers Block event handlers. * * @return {Object} Page Indicator styles JSX code. */ getPageIndicatorStyles: function getPageIndicatorStyles(props, handlers) { if (!app.hasPageBreak(formList, props.attributes.formId)) { return null; } return /*#__PURE__*/React.createElement(PanelBody, { className: app.getPanelClass(props), title: strings.other_styles }, /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-color-picker" }, /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-control-label" }, strings.colors), /*#__PURE__*/React.createElement(PanelColorSettings, { __experimentalIsRenderedInSidebar: true, enableAlpha: true, showTitle: false, className: "wpforms-gutenberg-form-selector-color-panel", colorSettings: [{ value: props.attributes.pageBreakColor, onChange: function onChange(value) { return handlers.styleAttrChange('pageBreakColor', value); }, label: strings.page_break }] }))); }, /** * Get style settings JSX code. * * @since 1.8.1 * * @param {Object} props Block properties. * @param {Object} handlers Block event handlers. * @param {Object} sizeOptions Size selector options. * * @return {Object} Inspector controls JSX code. */ getStyleSettings: function getStyleSettings(props, handlers, sizeOptions) { return /*#__PURE__*/React.createElement(InspectorControls, { key: "wpforms-gutenberg-form-selector-style-settings" }, app.jsxParts.getFieldStyles(props, handlers, sizeOptions), app.jsxParts.getLabelStyles(props, handlers, sizeOptions), app.jsxParts.getButtonStyles(props, handlers, sizeOptions), app.jsxParts.getPageIndicatorStyles(props, handlers)); }, /** * Get advanced settings JSX code. * * @since 1.8.1 * * @param {Object} props Block properties. * @param {Object} handlers Block event handlers. * * @return {Object} Inspector advanced controls JSX code. */ getAdvancedSettings: function getAdvancedSettings(props, handlers) { // eslint-disable-next-line react-hooks/rules-of-hooks var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), isOpen = _useState2[0], setOpen = _useState2[1]; var openModal = function openModal() { return setOpen(true); }; var closeModal = function closeModal() { return setOpen(false); }; return /*#__PURE__*/React.createElement(InspectorAdvancedControls, null, /*#__PURE__*/React.createElement("div", { className: app.getPanelClass(props) }, /*#__PURE__*/React.createElement(TextareaControl, { label: strings.copy_paste_settings, rows: "4", spellCheck: "false", value: props.attributes.copyPasteJsonValue, onChange: function onChange(value) { return handlers.pasteSettings(value); } }), /*#__PURE__*/React.createElement("div", { className: "wpforms-gutenberg-form-selector-legend", dangerouslySetInnerHTML: { __html: strings.copy_paste_notice } }), /*#__PURE__*/React.createElement(Button, { className: "wpforms-gutenberg-form-selector-reset-button", onClick: openModal }, strings.reset_style_settings)), isOpen && /*#__PURE__*/React.createElement(Modal, { className: "wpforms-gutenberg-modal", title: strings.reset_style_settings, onRequestClose: closeModal }, /*#__PURE__*/React.createElement("p", null, strings.reset_settings_confirm_text), /*#__PURE__*/React.createElement(Flex, { gap: 3, align: "center", justify: "flex-end" }, /*#__PURE__*/React.createElement(Button, { isSecondary: true, onClick: closeModal }, strings.btn_no), /*#__PURE__*/React.createElement(Button, { isPrimary: true, onClick: function onClick() { closeModal(); handlers.resetSettings(); } }, strings.btn_yes_reset)))); }, /** * Get block content JSX code. * * @since 1.8.1 * * @param {Object} props Block properties. * * @return {JSX.Element} Block content JSX code. */ getBlockFormContent: function getBlockFormContent(props) { if (triggerServerRender) { return /*#__PURE__*/React.createElement(ServerSideRender, { key: "wpforms-gutenberg-form-selector-server-side-renderer", block: "wpforms/form-selector", attributes: props.attributes }); } var clientId = props.clientId; var block = app.getBlockContainer(props); // In the case of empty content, use server side renderer. // This happens when the block is duplicated or converted to a reusable block. if (!block || !block.innerHTML) { triggerServerRender = true; return app.jsxParts.getBlockFormContent(props); } blocks[clientId] = blocks[clientId] || {}; blocks[clientId].blockHTML = block.innerHTML; blocks[clientId].loadedFormId = props.attributes.formId; return /*#__PURE__*/React.createElement(Fragment, { key: "wpforms-gutenberg-form-selector-fragment-form-html" }, /*#__PURE__*/React.createElement("div", { dangerouslySetInnerHTML: { __html: blocks[clientId].blockHTML } })); }, /** * Get block preview JSX code. * * @since 1.8.1 * * @return {JSX.Element} Block preview JSX code. */ getBlockPreview: function getBlockPreview() { return /*#__PURE__*/React.createElement(Fragment, { key: "wpforms-gutenberg-form-selector-fragment-block-preview" }, /*#__PURE__*/React.createElement("img", { src: wpforms_gutenberg_form_selector.block_preview_url, style: { width: '100%' }, alt: "" })); }, /** * Get block empty JSX code. * * @since 1.8.3 * * @param {Object} props Block properties. * @return {JSX.Element} Block empty JSX code. */ getEmptyFormsPreview: function getEmptyFormsPreview(props) { var clientId = props.clientId; return /*#__PURE__*/React.createElement(Fragment, { key: "wpforms-gutenberg-form-selector-fragment-block-empty" }, /*#__PURE__*/React.createElement("div", { className: "wpforms-no-form-preview" }, /*#__PURE__*/React.createElement("img", { src: wpforms_gutenberg_form_selector.block_empty_url, alt: "" }), /*#__PURE__*/React.createElement("p", null, createInterpolateElement(__('You can use WPForms to build contact forms, surveys, payment forms, and more with just a few clicks.', 'wpforms-lite'), { b: /*#__PURE__*/React.createElement("strong", null) })), /*#__PURE__*/React.createElement("button", { type: "button", className: "get-started-button components-button is-primary", onClick: function onClick() { app.openBuilderPopup(clientId); } }, __('Get Started', 'wpforms-lite')), /*#__PURE__*/React.createElement("p", { className: "empty-desc" }, createInterpolateElement(__('Need some help? Check out our comprehensive guide.', 'wpforms-lite'), { // eslint-disable-next-line jsx-a11y/anchor-has-content a: /*#__PURE__*/React.createElement("a", { href: wpforms_gutenberg_form_selector.wpforms_guide, target: "_blank", rel: "noopener noreferrer" }) })), /*#__PURE__*/React.createElement("div", { id: "wpforms-gutenberg-popup", className: "wpforms-builder-popup" }, /*#__PURE__*/React.createElement("iframe", { src: "about:blank", width: "100%", height: "100%", id: "wpforms-builder-iframe", title: "WPForms Builder Popup" })))); }, /** * Get block placeholder (form selector) JSX code. * * @since 1.8.1 * * @param {Object} attributes Block attributes. * @param {Object} handlers Block event handlers. * @param {Object} formOptions Form selector options. * * @return {JSX.Element} Block placeholder JSX code. */ getBlockPlaceholder: function getBlockPlaceholder(attributes, handlers, formOptions) { return /*#__PURE__*/React.createElement(Placeholder, { key: "wpforms-gutenberg-form-selector-wrap", className: "wpforms-gutenberg-form-selector-wrap" }, /*#__PURE__*/React.createElement("img", { src: wpforms_gutenberg_form_selector.logo_url, alt: "" }), /*#__PURE__*/React.createElement(SelectControl, { key: "wpforms-gutenberg-form-selector-select-control", value: attributes.formId, options: formOptions, onChange: function onChange(value) { return handlers.attrChange('formId', value); } })); } }, /** * Determine if the form has a Pagebreak field. * * @since 1.8.7 * * @param {Object} forms The forms' data object. * @param {number|string} formId Form ID. * * @return {boolean} True when the form has a Pagebreak field, false otherwise. */ hasPageBreak: function hasPageBreak(forms, formId) { var _JSON$parse; var currentForm = forms.find(function (form) { return parseInt(form.ID, 10) === parseInt(formId, 10); }); if (!currentForm.post_content) { return false; } var fields = (_JSON$parse = JSON.parse(currentForm.post_content)) === null || _JSON$parse === void 0 ? void 0 : _JSON$parse.fields; return Object.values(fields).some(function (field) { return field.type === 'pagebreak'; }); }, /** * Get Style Settings panel class. * * @since 1.8.1 * * @param {Object} props Block properties. * * @return {string} Style Settings panel class. */ getPanelClass: function getPanelClass(props) { var cssClass = 'wpforms-gutenberg-panel wpforms-block-settings-' + props.clientId; if (!app.isFullStylingEnabled()) { cssClass += ' disabled_panel'; } return cssClass; }, /** * Determine whether the full styling is enabled. * * @since 1.8.1 * * @return {boolean} Whether the full styling is enabled. */ isFullStylingEnabled: function isFullStylingEnabled() { return wpforms_gutenberg_form_selector.is_modern_markup && wpforms_gutenberg_form_selector.is_full_styling; }, /** * Get block container DOM element. * * @since 1.8.1 * * @param {Object} props Block properties. * * @return {Element} Block container. */ getBlockContainer: function getBlockContainer(props) { var blockSelector = "#block-".concat(props.clientId, " > div"); var block = document.querySelector(blockSelector); // For FSE / Gutenberg plugin we need to take a look inside the iframe. if (!block) { var editorCanvas = document.querySelector('iframe[name="editor-canvas"]'); block = editorCanvas && editorCanvas.contentWindow.document.querySelector(blockSelector); } return block; }, /** * Get settings fields event handlers. * * @since 1.8.1 * * @param {Object} props Block properties. * * @return {Object} Object that contains event handlers for the settings fields. */ getSettingsFieldsHandlers: function getSettingsFieldsHandlers(props) { // eslint-disable-line max-lines-per-function return { /** * Field style attribute change event handler. * * @since 1.8.1 * * @param {string} attribute Attribute name. * @param {string} value New attribute value. */ styleAttrChange: function styleAttrChange(attribute, value) { var block = app.getBlockContainer(props), container = block.querySelector("#wpforms-".concat(props.attributes.formId)), property = attribute.replace(/[A-Z]/g, function (letter) { return "-".concat(letter.toLowerCase()); }), setAttr = {}; if (container) { switch (property) { case 'field-size': case 'label-size': case 'button-size': for (var key in sizes[property][value]) { container.style.setProperty("--wpforms-".concat(property, "-").concat(key), sizes[property][value][key]); } break; default: container.style.setProperty("--wpforms-".concat(property), value); } } setAttr[attribute] = value; props.setAttributes(setAttr); triggerServerRender = false; this.updateCopyPasteContent(); $(window).trigger('wpformsFormSelectorStyleAttrChange', [block, props, attribute, value]); }, /** * Field regular attribute change event handler. * * @since 1.8.1 * * @param {string} attribute Attribute name. * @param {string} value New attribute value. */ attrChange: function attrChange(attribute, value) { var setAttr = {}; setAttr[attribute] = value; props.setAttributes(setAttr); triggerServerRender = true; this.updateCopyPasteContent(); }, /** * Reset Form Styles settings to defaults. * * @since 1.8.1 */ resetSettings: function resetSettings() { for (var key in defaultStyleSettings) { this.styleAttrChange(key, defaultStyleSettings[key]); } }, /** * Update content of the "Copy/Paste" fields. * * @since 1.8.1 */ updateCopyPasteContent: function updateCopyPasteContent() { var content = {}; var atts = wp.data.select('core/block-editor').getBlockAttributes(props.clientId); for (var key in defaultStyleSettings) { content[key] = atts[key]; } props.setAttributes({ copyPasteJsonValue: JSON.stringify(content) }); }, /** * Paste settings handler. * * @since 1.8.1 * * @param {string} value New attribute value. */ pasteSettings: function pasteSettings(value) { var pasteAttributes = app.parseValidateJson(value); if (!pasteAttributes) { wp.data.dispatch('core/notices').createErrorNotice(strings.copy_paste_error, { id: 'wpforms-json-parse-error' }); this.updateCopyPasteContent(); return; } pasteAttributes.copyPasteJsonValue = value; props.setAttributes(pasteAttributes); triggerServerRender = true; } }; }, /** * Parse and validate JSON string. * * @since 1.8.1 * * @param {string} value JSON string. * * @return {boolean|object} Parsed JSON object OR false on error. */ parseValidateJson: function parseValidateJson(value) { if (typeof value !== 'string') { return false; } var atts; try { atts = JSON.parse(value); } catch (error) { atts = false; } return atts; }, /** * Get WPForms icon DOM element. * * @since 1.8.1 * * @return {DOM.element} WPForms icon DOM element. */ getIcon: function getIcon() { return createElement('svg', { width: 20, height: 20, viewBox: '0 0 612 612', className: 'dashicon' }, createElement('path', { fill: 'currentColor', d: 'M544,0H68C30.445,0,0,30.445,0,68v476c0,37.556,30.445,68,68,68h476c37.556,0,68-30.444,68-68V68 C612,30.445,581.556,0,544,0z M464.44,68L387.6,120.02L323.34,68H464.44z M288.66,68l-64.26,52.02L147.56,68H288.66z M544,544H68 V68h22.1l136,92.14l79.9-64.6l79.56,64.6l136-92.14H544V544z M114.24,263.16h95.88v-48.28h-95.88V263.16z M114.24,360.4h95.88 v-48.62h-95.88V360.4z M242.76,360.4h255v-48.62h-255V360.4L242.76,360.4z M242.76,263.16h255v-48.28h-255V263.16L242.76,263.16z M368.22,457.3h129.54V408H368.22V457.3z' })); }, /** * Get block attributes. * * @since 1.8.1 * * @return {Object} Block attributes. */ getBlockAttributes: function getBlockAttributes() { // eslint-disable-line max-lines-per-function return { clientId: { type: 'string', default: '' }, formId: { type: 'string', default: defaults.formId }, displayTitle: { type: 'boolean', default: defaults.displayTitle }, displayDesc: { type: 'boolean', default: defaults.displayDesc }, preview: { type: 'boolean' }, fieldSize: { type: 'string', default: defaults.fieldSize }, fieldBorderRadius: { type: 'string', default: defaults.fieldBorderRadius }, fieldBackgroundColor: { type: 'string', default: defaults.fieldBackgroundColor }, fieldBorderColor: { type: 'string', default: defaults.fieldBorderColor }, fieldTextColor: { type: 'string', default: defaults.fieldTextColor }, labelSize: { type: 'string', default: defaults.labelSize }, labelColor: { type: 'string', default: defaults.labelColor }, labelSublabelColor: { type: 'string', default: defaults.labelSublabelColor }, labelErrorColor: { type: 'string', default: defaults.labelErrorColor }, buttonSize: { type: 'string', default: defaults.buttonSize }, buttonBorderRadius: { type: 'string', default: defaults.buttonBorderRadius }, buttonBackgroundColor: { type: 'string', default: defaults.buttonBackgroundColor }, buttonTextColor: { type: 'string', default: defaults.buttonTextColor }, pageBreakColor: { type: 'string', default: defaults.pageBreakColor }, copyPasteJsonValue: { type: 'string', default: defaults.copyPasteJsonValue } }; }, /** * Get form selector options. * * @since 1.8.1 * * @return {Array} Form options. */ getFormOptions: function getFormOptions() { var formOptions = formList.map(function (value) { return { value: value.ID, label: value.post_title }; }); formOptions.unshift({ value: '', label: strings.form_select }); return formOptions; }, /** * Get size selector options. * * @since 1.8.1 * * @return {Array} Size options. */ getSizeOptions: function getSizeOptions() { return [{ label: strings.small, value: 'small' }, { label: strings.medium, value: 'medium' }, { label: strings.large, value: 'large' }]; }, /** * Event `wpformsFormSelectorEdit` handler. * * @since 1.8.1 * * @param {Object} e Event object. * @param {Object} props Block properties. */ blockEdit: function blockEdit(e, props) { var block = app.getBlockContainer(props); if (!block || !block.dataset) { return; } app.initLeadFormSettings(block.parentElement); }, /** * Init Lead Form Settings panels. * * @since 1.8.1 * * @param {Element} block Block element. */ initLeadFormSettings: function initLeadFormSettings(block) { if (!block || !block.dataset) { return; } if (!app.isFullStylingEnabled()) { return; } var clientId = block.dataset.block; var $form = $(block.querySelector('.wpforms-container')); var $panel = $(".wpforms-block-settings-".concat(clientId)); if ($form.hasClass('wpforms-lead-forms-container')) { $panel.addClass('disabled_panel').find('.wpforms-gutenberg-panel-notice.wpforms-lead-form-notice').css('display', 'block'); $panel.find('.wpforms-gutenberg-panel-notice.wpforms-use-modern-notice').css('display', 'none'); return; } $panel.removeClass('disabled_panel').find('.wpforms-gutenberg-panel-notice.wpforms-lead-form-notice').css('display', 'none'); $panel.find('.wpforms-gutenberg-panel-notice.wpforms-use-modern-notice').css('display', null); }, /** * Event `wpformsFormSelectorFormLoaded` handler. * * @since 1.8.1 * * @param {Object} e Event object. */ formLoaded: function formLoaded(e) { app.initLeadFormSettings(e.detail.block); app.updateAccentColors(e.detail); app.loadChoicesJS(e.detail); app.initRichTextField(e.detail.formId); $(e.detail.block).off('click').on('click', app.blockClick); }, /** * Click on the block event handler. * * @since 1.8.1 * * @param {Object} e Event object. */ blockClick: function blockClick(e) { app.initLeadFormSettings(e.currentTarget); }, /** * Update accent colors of some fields in GB block in Modern Markup mode. * * @since 1.8.1 * * @param {Object} detail Event details object. */ updateAccentColors: function updateAccentColors(detail) { if (!wpforms_gutenberg_form_selector.is_modern_markup || !window.WPForms || !window.WPForms.FrontendModern || !detail.block) { return; } var $form = $(detail.block.querySelector("#wpforms-".concat(detail.formId))), FrontendModern = window.WPForms.FrontendModern; FrontendModern.updateGBBlockPageIndicatorColor($form); FrontendModern.updateGBBlockIconChoicesColor($form); FrontendModern.updateGBBlockRatingColor($form); }, /** * Init Modern style Dropdown fields (