/*
 * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
 * This devtool is neither made for production nor for readable output files.
 * It uses "eval()" calls to create a separate source file in the browser devtools.
 * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
 * or disable the default devtool with "devtool: false".
 * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
 */
var BuilderBundle;
/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./node_modules/ejs-browser/lib/ejs.js":
/*!*********************************************!*\
  !*** ./node_modules/ejs-browser/lib/ejs.js ***!
  \*********************************************/
/***/ ((__unused_webpack_module, exports, __webpack_require__) => {

eval("/*\n * EJS Embedded JavaScript templates\n * Copyright 2112 Matthew Eernisse (mde@fleegix.org)\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *         http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n*/\n\n\n\n/**\n * @file Embedded JavaScript templating engine. {@link http://ejs.co}\n * @author Matthew Eernisse <mde@fleegix.org>\n * @author Tiancheng \"Timothy\" Gu <timothygu99@gmail.com>\n * @project EJS\n * @license {@link http://www.apache.org/licenses/LICENSE-2.0 Apache License, Version 2.0}\n */\n\n/**\n * EJS internal functions.\n *\n * Technically this \"module\" lies in the same file as {@link module:ejs}, for\n * the sake of organization all the private functions re grouped into this\n * module.\n *\n * @module ejs-internal\n * @private\n */\n\n/**\n * Embedded JavaScript templating engine.\n *\n * @module ejs\n * @public\n */\n\n\nvar fs = {};\nvar path = {};\nvar utils = __webpack_require__(/*! ./utils */ \"./node_modules/ejs-browser/lib/utils.js\");\n\nvar scopeOptionWarned = false;\n/** @type {string} */\nvar _VERSION_STRING = (__webpack_require__(/*! ../package.json */ \"./node_modules/ejs-browser/package.json\").version);\nvar _DEFAULT_OPEN_DELIMITER = '<';\nvar _DEFAULT_CLOSE_DELIMITER = '>';\nvar _DEFAULT_DELIMITER = '%';\nvar _DEFAULT_LOCALS_NAME = 'locals';\nvar _NAME = 'ejs';\nvar _REGEX_STRING = '(<%%|%%>|<%=|<%-|<%_|<%#|<%|%>|-%>|_%>)';\nvar _OPTS_PASSABLE_WITH_DATA = ['delimiter', 'scope', 'context', 'debug', 'compileDebug',\n  'client', '_with', 'rmWhitespace', 'strict', 'filename', 'async'];\n// We don't allow 'cache' option to be passed in the data obj for\n// the normal `render` call, but this is where Express 2 & 3 put it\n// so we make an exception for `renderFile`\nvar _OPTS_PASSABLE_WITH_DATA_EXPRESS = _OPTS_PASSABLE_WITH_DATA.concat('cache');\nvar _BOM = /^\\uFEFF/;\nvar _JS_IDENTIFIER = /^[a-zA-Z_$][0-9a-zA-Z_$]*$/;\n\n/**\n * EJS template function cache. This can be a LRU object from lru-cache NPM\n * module. By default, it is {@link module:utils.cache}, a simple in-process\n * cache that grows continuously.\n *\n * @type {Cache}\n */\n\nexports.cache = utils.cache;\n\n/**\n * Custom file loader. Useful for template preprocessing or restricting access\n * to a certain part of the filesystem.\n *\n * @type {fileLoader}\n */\n\nexports.fileLoader = fs.readFileSync;\n\n/**\n * Name of the object containing the locals.\n *\n * This variable is overridden by {@link Options}`.localsName` if it is not\n * `undefined`.\n *\n * @type {String}\n * @public\n */\n\nexports.localsName = _DEFAULT_LOCALS_NAME;\n\n/**\n * Promise implementation -- defaults to the native implementation if available\n * This is mostly just for testability\n *\n * @type {PromiseConstructorLike}\n * @public\n */\n\nexports.promiseImpl = (new Function('return this;'))().Promise;\n\n/**\n * Get the path to the included file from the parent file path and the\n * specified path.\n *\n * @param {String}  name     specified path\n * @param {String}  filename parent file path\n * @param {Boolean} [isDir=false] whether the parent file path is a directory\n * @return {String}\n */\nexports.resolveInclude = function(name, filename, isDir) {\n  var dirname = path.dirname;\n  var extname = path.extname;\n  var resolve = path.resolve;\n  var includePath = resolve(isDir ? filename : dirname(filename), name);\n  var ext = extname(name);\n  if (!ext) {\n    includePath += '.ejs';\n  }\n  return includePath;\n};\n\n/**\n * Try to resolve file path on multiple directories\n *\n * @param  {String}        name  specified path\n * @param  {Array<String>} paths list of possible parent directory paths\n * @return {String}\n */\nfunction resolvePaths(name, paths) {\n  var filePath;\n  if (paths.some(function (v) {\n    filePath = exports.resolveInclude(name, v, true);\n    return fs.existsSync(filePath);\n  })) {\n    return filePath;\n  }\n}\n\n/**\n * Get the path to the included file by Options\n *\n * @param  {String}  path    specified path\n * @param  {Options} options compilation options\n * @return {String}\n */\nfunction getIncludePath(path, options) {\n  var includePath;\n  var filePath;\n  var views = options.views;\n  var match = /^[A-Za-z]+:\\\\|^\\//.exec(path);\n\n  // Abs path\n  if (match && match.length) {\n    path = path.replace(/^\\/*/, '');\n    if (Array.isArray(options.root)) {\n      includePath = resolvePaths(path, options.root);\n    } else {\n      includePath = exports.resolveInclude(path, options.root || '/', true);\n    }\n  }\n  // Relative paths\n  else {\n    // Look relative to a passed filename first\n    if (options.filename) {\n      filePath = exports.resolveInclude(path, options.filename);\n      if (fs.existsSync(filePath)) {\n        includePath = filePath;\n      }\n    }\n    // Then look in any views directories\n    if (!includePath && Array.isArray(views)) {\n      includePath = resolvePaths(path, views);\n    }\n    if (!includePath && typeof options.includer !== 'function') {\n      throw new Error('Could not find the include file \"' +\n          options.escapeFunction(path) + '\"');\n    }\n  }\n  return includePath;\n}\n\n/**\n * Get the template from a string or a file, either compiled on-the-fly or\n * read from cache (if enabled), and cache the template if needed.\n *\n * If `template` is not set, the file specified in `options.filename` will be\n * read.\n *\n * If `options.cache` is true, this function reads the file from\n * `options.filename` so it must be set prior to calling this function.\n *\n * @memberof module:ejs-internal\n * @param {Options} options   compilation options\n * @param {String} [template] template source\n * @return {(TemplateFunction|ClientFunction)}\n * Depending on the value of `options.client`, either type might be returned.\n * @static\n */\n\nfunction handleCache(options, template) {\n  var func;\n  var filename = options.filename;\n  var hasTemplate = arguments.length > 1;\n\n  if (options.cache) {\n    if (!filename) {\n      throw new Error('cache option requires a filename');\n    }\n    func = exports.cache.get(filename);\n    if (func) {\n      return func;\n    }\n    if (!hasTemplate) {\n      template = fileLoader(filename).toString().replace(_BOM, '');\n    }\n  }\n  else if (!hasTemplate) {\n    // istanbul ignore if: should not happen at all\n    if (!filename) {\n      throw new Error('Internal EJS error: no file name or template '\n                    + 'provided');\n    }\n    template = fileLoader(filename).toString().replace(_BOM, '');\n  }\n  func = exports.compile(template, options);\n  if (options.cache) {\n    exports.cache.set(filename, func);\n  }\n  return func;\n}\n\n/**\n * Try calling handleCache with the given options and data and call the\n * callback with the result. If an error occurs, call the callback with\n * the error. Used by renderFile().\n *\n * @memberof module:ejs-internal\n * @param {Options} options    compilation options\n * @param {Object} data        template data\n * @param {RenderFileCallback} cb callback\n * @static\n */\n\nfunction tryHandleCache(options, data, cb) {\n  var result;\n  if (!cb) {\n    if (typeof exports.promiseImpl == 'function') {\n      return new exports.promiseImpl(function (resolve, reject) {\n        try {\n          result = handleCache(options)(data);\n          resolve(result);\n        }\n        catch (err) {\n          reject(err);\n        }\n      });\n    }\n    else {\n      throw new Error('Please provide a callback function');\n    }\n  }\n  else {\n    try {\n      result = handleCache(options)(data);\n    }\n    catch (err) {\n      return cb(err);\n    }\n\n    cb(null, result);\n  }\n}\n\n/**\n * fileLoader is independent\n *\n * @param {String} filePath ejs file path.\n * @return {String} The contents of the specified file.\n * @static\n */\n\nfunction fileLoader(filePath){\n  return exports.fileLoader(filePath);\n}\n\n/**\n * Get the template function.\n *\n * If `options.cache` is `true`, then the template is cached.\n *\n * @memberof module:ejs-internal\n * @param {String}  path    path for the specified file\n * @param {Options} options compilation options\n * @return {(TemplateFunction|ClientFunction)}\n * Depending on the value of `options.client`, either type might be returned\n * @static\n */\n\nfunction includeFile(path, options) {\n  var opts = utils.shallowCopy(utils.createNullProtoObjWherePossible(), options);\n  opts.filename = getIncludePath(path, opts);\n  if (typeof options.includer === 'function') {\n    var includerResult = options.includer(path, opts.filename);\n    if (includerResult) {\n      if (includerResult.filename) {\n        opts.filename = includerResult.filename;\n      }\n      if (includerResult.template) {\n        return handleCache(opts, includerResult.template);\n      }\n    }\n  }\n  return handleCache(opts);\n}\n\n/**\n * Re-throw the given `err` in context to the `str` of ejs, `filename`, and\n * `lineno`.\n *\n * @implements {RethrowCallback}\n * @memberof module:ejs-internal\n * @param {Error}  err      Error object\n * @param {String} str      EJS source\n * @param {String} flnm     file name of the EJS file\n * @param {Number} lineno   line number of the error\n * @param {EscapeCallback} esc\n * @static\n */\n\nfunction rethrow(err, str, flnm, lineno, esc) {\n  var lines = str.split('\\n');\n  var start = Math.max(lineno - 3, 0);\n  var end = Math.min(lines.length, lineno + 3);\n  var filename = esc(flnm);\n  // Error context\n  var context = lines.slice(start, end).map(function (line, i){\n    var curr = i + start + 1;\n    return (curr == lineno ? ' >> ' : '    ')\n      + curr\n      + '| '\n      + line;\n  }).join('\\n');\n\n  // Alter exception message\n  err.path = filename;\n  err.message = (filename || 'ejs') + ':'\n    + lineno + '\\n'\n    + context + '\\n\\n'\n    + err.message;\n\n  throw err;\n}\n\nfunction stripSemi(str){\n  return str.replace(/;(\\s*$)/, '$1');\n}\n\n/**\n * Compile the given `str` of ejs into a template function.\n *\n * @param {String}  template EJS template\n *\n * @param {Options} [opts] compilation options\n *\n * @return {(TemplateFunction|ClientFunction)}\n * Depending on the value of `opts.client`, either type might be returned.\n * Note that the return type of the function also depends on the value of `opts.async`.\n * @public\n */\n\nexports.compile = function compile(template, opts) {\n  var templ;\n\n  // v1 compat\n  // 'scope' is 'context'\n  // FIXME: Remove this in a future version\n  if (opts && opts.scope) {\n    if (!scopeOptionWarned){\n      console.warn('`scope` option is deprecated and will be removed in EJS 3');\n      scopeOptionWarned = true;\n    }\n    if (!opts.context) {\n      opts.context = opts.scope;\n    }\n    delete opts.scope;\n  }\n  templ = new Template(template, opts);\n  return templ.compile();\n};\n\n/**\n * Render the given `template` of ejs.\n *\n * If you would like to include options but not data, you need to explicitly\n * call this function with `data` being an empty object or `null`.\n *\n * @param {String}   template EJS template\n * @param {Object}  [data={}] template data\n * @param {Options} [opts={}] compilation and rendering options\n * @return {(String|Promise<String>)}\n * Return value type depends on `opts.async`.\n * @public\n */\n\nexports.render = function (template, d, o) {\n  var data = d || utils.createNullProtoObjWherePossible();\n  var opts = o || utils.createNullProtoObjWherePossible();\n\n  // No options object -- if there are optiony names\n  // in the data, copy them to options\n  if (arguments.length == 2) {\n    utils.shallowCopyFromList(opts, data, _OPTS_PASSABLE_WITH_DATA);\n  }\n\n  return handleCache(opts, template)(data);\n};\n\n/**\n * Render an EJS file at the given `path` and callback `cb(err, str)`.\n *\n * If you would like to include options but not data, you need to explicitly\n * call this function with `data` being an empty object or `null`.\n *\n * @param {String}             path     path to the EJS file\n * @param {Object}            [data={}] template data\n * @param {Options}           [opts={}] compilation and rendering options\n * @param {RenderFileCallback} cb callback\n * @public\n */\n\nexports.renderFile = function () {\n  var args = Array.prototype.slice.call(arguments);\n  var filename = args.shift();\n  var cb;\n  var opts = {filename: filename};\n  var data;\n  var viewOpts;\n\n  // Do we have a callback?\n  if (typeof arguments[arguments.length - 1] == 'function') {\n    cb = args.pop();\n  }\n  // Do we have data/opts?\n  if (args.length) {\n    // Should always have data obj\n    data = args.shift();\n    // Normal passed opts (data obj + opts obj)\n    if (args.length) {\n      // Use shallowCopy so we don't pollute passed in opts obj with new vals\n      utils.shallowCopy(opts, args.pop());\n    }\n    // Special casing for Express (settings + opts-in-data)\n    else {\n      // Express 3 and 4\n      if (data.settings) {\n        // Pull a few things from known locations\n        if (data.settings.views) {\n          opts.views = data.settings.views;\n        }\n        if (data.settings['view cache']) {\n          opts.cache = true;\n        }\n        // Undocumented after Express 2, but still usable, esp. for\n        // items that are unsafe to be passed along with data, like `root`\n        viewOpts = data.settings['view options'];\n        if (viewOpts) {\n          utils.shallowCopy(opts, viewOpts);\n        }\n      }\n      // Express 2 and lower, values set in app.locals, or people who just\n      // want to pass options in their data. NOTE: These values will override\n      // anything previously set in settings  or settings['view options']\n      utils.shallowCopyFromList(opts, data, _OPTS_PASSABLE_WITH_DATA_EXPRESS);\n    }\n    opts.filename = filename;\n  }\n  else {\n    data = utils.createNullProtoObjWherePossible();\n  }\n\n  return tryHandleCache(opts, data, cb);\n};\n\n/**\n * Clear intermediate JavaScript cache. Calls {@link Cache#reset}.\n * @public\n */\n\n/**\n * EJS template class\n * @public\n */\nexports.Template = Template;\n\nexports.clearCache = function () {\n  exports.cache.reset();\n};\n\nfunction Template(text, opts) {\n  opts = opts || utils.createNullProtoObjWherePossible();\n  var options = utils.createNullProtoObjWherePossible();\n  this.templateText = text;\n  /** @type {string | null} */\n  this.mode = null;\n  this.truncate = false;\n  this.currentLine = 1;\n  this.source = '';\n  options.client = opts.client || false;\n  options.escapeFunction = opts.escape || opts.escapeFunction || utils.escapeXML;\n  options.compileDebug = opts.compileDebug !== false;\n  options.debug = !!opts.debug;\n  options.filename = opts.filename;\n  options.openDelimiter = opts.openDelimiter || exports.openDelimiter || _DEFAULT_OPEN_DELIMITER;\n  options.closeDelimiter = opts.closeDelimiter || exports.closeDelimiter || _DEFAULT_CLOSE_DELIMITER;\n  options.delimiter = opts.delimiter || exports.delimiter || _DEFAULT_DELIMITER;\n  options.strict = opts.strict || false;\n  options.context = opts.context;\n  options.cache = opts.cache || false;\n  options.rmWhitespace = opts.rmWhitespace;\n  options.root = opts.root;\n  options.includer = opts.includer;\n  options.outputFunctionName = opts.outputFunctionName;\n  options.localsName = opts.localsName || exports.localsName || _DEFAULT_LOCALS_NAME;\n  options.views = opts.views;\n  options.async = opts.async;\n  options.destructuredLocals = opts.destructuredLocals;\n  options.legacyInclude = typeof opts.legacyInclude != 'undefined' ? !!opts.legacyInclude : true;\n\n  if (options.strict) {\n    options._with = false;\n  }\n  else {\n    options._with = typeof opts._with != 'undefined' ? opts._with : true;\n  }\n\n  this.opts = options;\n\n  this.regex = this.createRegex();\n}\n\nTemplate.modes = {\n  EVAL: 'eval',\n  ESCAPED: 'escaped',\n  RAW: 'raw',\n  COMMENT: 'comment',\n  LITERAL: 'literal'\n};\n\nTemplate.prototype = {\n  createRegex: function () {\n    var str = _REGEX_STRING;\n    var delim = utils.escapeRegExpChars(this.opts.delimiter);\n    var open = utils.escapeRegExpChars(this.opts.openDelimiter);\n    var close = utils.escapeRegExpChars(this.opts.closeDelimiter);\n    str = str.replace(/%/g, delim)\n      .replace(/</g, open)\n      .replace(/>/g, close);\n    return new RegExp(str);\n  },\n\n  compile: function () {\n    /** @type {string} */\n    var src;\n    /** @type {ClientFunction} */\n    var fn;\n    var opts = this.opts;\n    var prepended = '';\n    var appended = '';\n    /** @type {EscapeCallback} */\n    var escapeFn = opts.escapeFunction;\n    /** @type {FunctionConstructor} */\n    var ctor;\n    /** @type {string} */\n    var sanitizedFilename = opts.filename ? JSON.stringify(opts.filename) : 'undefined';\n\n    if (!this.source) {\n      this.generateSource();\n      prepended +=\n        '  var __output = \"\";\\n' +\n        '  function __append(s) { if (s !== undefined && s !== null) __output += s }\\n';\n      if (opts.outputFunctionName) {\n        if (!_JS_IDENTIFIER.test(opts.outputFunctionName)) {\n          throw new Error('outputFunctionName is not a valid JS identifier.');\n        }\n        prepended += '  var ' + opts.outputFunctionName + ' = __append;' + '\\n';\n      }\n      if (opts.localsName && !_JS_IDENTIFIER.test(opts.localsName)) {\n        throw new Error('localsName is not a valid JS identifier.');\n      }\n      if (opts.destructuredLocals && opts.destructuredLocals.length) {\n        var destructuring = '  var __locals = (' + opts.localsName + ' || {}),\\n';\n        for (var i = 0; i < opts.destructuredLocals.length; i++) {\n          var name = opts.destructuredLocals[i];\n          if (!_JS_IDENTIFIER.test(name)) {\n            throw new Error('destructuredLocals[' + i + '] is not a valid JS identifier.');\n          }\n          if (i > 0) {\n            destructuring += ',\\n  ';\n          }\n          destructuring += name + ' = __locals.' + name;\n        }\n        prepended += destructuring + ';\\n';\n      }\n      if (opts._with !== false) {\n        prepended +=  '  with (' + opts.localsName + ' || {}) {' + '\\n';\n        appended += '  }' + '\\n';\n      }\n      appended += '  return __output;' + '\\n';\n      this.source = prepended + this.source + appended;\n    }\n\n    if (opts.compileDebug) {\n      src = 'var __line = 1' + '\\n'\n        + '  , __lines = ' + JSON.stringify(this.templateText) + '\\n'\n        + '  , __filename = ' + sanitizedFilename + ';' + '\\n'\n        + 'try {' + '\\n'\n        + this.source\n        + '} catch (e) {' + '\\n'\n        + '  rethrow(e, __lines, __filename, __line, escapeFn);' + '\\n'\n        + '}' + '\\n';\n    }\n    else {\n      src = this.source;\n    }\n\n    if (opts.client) {\n      src = 'escapeFn = escapeFn || ' + escapeFn.toString() + ';' + '\\n' + src;\n      if (opts.compileDebug) {\n        src = 'rethrow = rethrow || ' + rethrow.toString() + ';' + '\\n' + src;\n      }\n    }\n\n    if (opts.strict) {\n      src = '\"use strict\";\\n' + src;\n    }\n    if (opts.debug) {\n      console.log(src);\n    }\n    if (opts.compileDebug && opts.filename) {\n      src = src + '\\n'\n        + '//# sourceURL=' + sanitizedFilename + '\\n';\n    }\n\n    try {\n      if (opts.async) {\n        // Have to use generated function for this, since in envs without support,\n        // it breaks in parsing\n        try {\n          ctor = (new Function('return (async function(){}).constructor;'))();\n        }\n        catch(e) {\n          if (e instanceof SyntaxError) {\n            throw new Error('This environment does not support async/await');\n          }\n          else {\n            throw e;\n          }\n        }\n      }\n      else {\n        ctor = Function;\n      }\n      fn = new ctor(opts.localsName + ', escapeFn, include, rethrow', src);\n    }\n    catch(e) {\n      // istanbul ignore else\n      if (e instanceof SyntaxError) {\n        if (opts.filename) {\n          e.message += ' in ' + opts.filename;\n        }\n        e.message += ' while compiling ejs\\n\\n';\n        e.message += 'If the above error is not helpful, you may want to try EJS-Lint:\\n';\n        e.message += 'https://github.com/RyanZim/EJS-Lint';\n        if (!opts.async) {\n          e.message += '\\n';\n          e.message += 'Or, if you meant to create an async function, pass `async: true` as an option.';\n        }\n      }\n      throw e;\n    }\n\n    // Return a callable function which will execute the function\n    // created by the source-code, with the passed data as locals\n    // Adds a local `include` function which allows full recursive include\n    var returnedFn = opts.client ? fn : function anonymous(data) {\n      var include = function (path, includeData) {\n        var d = utils.shallowCopy(utils.createNullProtoObjWherePossible(), data);\n        if (includeData) {\n          d = utils.shallowCopy(d, includeData);\n        }\n        return includeFile(path, opts)(d);\n      };\n      return fn.apply(opts.context,\n        [data || utils.createNullProtoObjWherePossible(), escapeFn, include, rethrow]);\n    };\n    if (opts.filename && typeof Object.defineProperty === 'function') {\n      var filename = opts.filename;\n      var basename = path.basename(filename, path.extname(filename));\n      try {\n        Object.defineProperty(returnedFn, 'name', {\n          value: basename,\n          writable: false,\n          enumerable: false,\n          configurable: true\n        });\n      } catch (e) {/* ignore */}\n    }\n    return returnedFn;\n  },\n\n  generateSource: function () {\n    var opts = this.opts;\n\n    if (opts.rmWhitespace) {\n      // Have to use two separate replace here as `^` and `$` operators don't\n      // work well with `\\r` and empty lines don't work well with the `m` flag.\n      this.templateText =\n        this.templateText.replace(/[\\r\\n]+/g, '\\n').replace(/^\\s+|\\s+$/gm, '');\n    }\n\n    // Slurp spaces and tabs before <%_ and after _%>\n    this.templateText =\n      this.templateText.replace(/[ \\t]*<%_/gm, '<%_').replace(/_%>[ \\t]*/gm, '_%>');\n\n    var self = this;\n    var matches = this.parseTemplateText();\n    var d = this.opts.delimiter;\n    var o = this.opts.openDelimiter;\n    var c = this.opts.closeDelimiter;\n\n    if (matches && matches.length) {\n      matches.forEach(function (line, index) {\n        var closing;\n        // If this is an opening tag, check for closing tags\n        // FIXME: May end up with some false positives here\n        // Better to store modes as k/v with openDelimiter + delimiter as key\n        // Then this can simply check against the map\n        if ( line.indexOf(o + d) === 0        // If it is a tag\n          && line.indexOf(o + d + d) !== 0) { // and is not escaped\n          closing = matches[index + 2];\n          if (!(closing == d + c || closing == '-' + d + c || closing == '_' + d + c)) {\n            throw new Error('Could not find matching close tag for \"' + line + '\".');\n          }\n        }\n        self.scanLine(line);\n      });\n    }\n\n  },\n\n  parseTemplateText: function () {\n    var str = this.templateText;\n    var pat = this.regex;\n    var result = pat.exec(str);\n    var arr = [];\n    var firstPos;\n\n    while (result) {\n      firstPos = result.index;\n\n      if (firstPos !== 0) {\n        arr.push(str.substring(0, firstPos));\n        str = str.slice(firstPos);\n      }\n\n      arr.push(result[0]);\n      str = str.slice(result[0].length);\n      result = pat.exec(str);\n    }\n\n    if (str) {\n      arr.push(str);\n    }\n\n    return arr;\n  },\n\n  _addOutput: function (line) {\n    if (this.truncate) {\n      // Only replace single leading linebreak in the line after\n      // -%> tag -- this is the single, trailing linebreak\n      // after the tag that the truncation mode replaces\n      // Handle Win / Unix / old Mac linebreaks -- do the \\r\\n\n      // combo first in the regex-or\n      line = line.replace(/^(?:\\r\\n|\\r|\\n)/, '');\n      this.truncate = false;\n    }\n    if (!line) {\n      return line;\n    }\n\n    // Preserve literal slashes\n    line = line.replace(/\\\\/g, '\\\\\\\\');\n\n    // Convert linebreaks\n    line = line.replace(/\\n/g, '\\\\n');\n    line = line.replace(/\\r/g, '\\\\r');\n\n    // Escape double-quotes\n    // - this will be the delimiter during execution\n    line = line.replace(/\"/g, '\\\\\"');\n    this.source += '    ; __append(\"' + line + '\")' + '\\n';\n  },\n\n  scanLine: function (line) {\n    var self = this;\n    var d = this.opts.delimiter;\n    var o = this.opts.openDelimiter;\n    var c = this.opts.closeDelimiter;\n    var newLineCount = 0;\n\n    newLineCount = (line.split('\\n').length - 1);\n\n    switch (line) {\n    case o + d:\n    case o + d + '_':\n      this.mode = Template.modes.EVAL;\n      break;\n    case o + d + '=':\n      this.mode = Template.modes.ESCAPED;\n      break;\n    case o + d + '-':\n      this.mode = Template.modes.RAW;\n      break;\n    case o + d + '#':\n      this.mode = Template.modes.COMMENT;\n      break;\n    case o + d + d:\n      this.mode = Template.modes.LITERAL;\n      this.source += '    ; __append(\"' + line.replace(o + d + d, o + d) + '\")' + '\\n';\n      break;\n    case d + d + c:\n      this.mode = Template.modes.LITERAL;\n      this.source += '    ; __append(\"' + line.replace(d + d + c, d + c) + '\")' + '\\n';\n      break;\n    case d + c:\n    case '-' + d + c:\n    case '_' + d + c:\n      if (this.mode == Template.modes.LITERAL) {\n        this._addOutput(line);\n      }\n\n      this.mode = null;\n      this.truncate = line.indexOf('-') === 0 || line.indexOf('_') === 0;\n      break;\n    default:\n      // In script mode, depends on type of tag\n      if (this.mode) {\n        // If '//' is found without a line break, add a line break.\n        switch (this.mode) {\n        case Template.modes.EVAL:\n        case Template.modes.ESCAPED:\n        case Template.modes.RAW:\n          if (line.lastIndexOf('//') > line.lastIndexOf('\\n')) {\n            line += '\\n';\n          }\n        }\n        switch (this.mode) {\n        // Just executing code\n        case Template.modes.EVAL:\n          this.source += '    ; ' + line + '\\n';\n          break;\n          // Exec, esc, and output\n        case Template.modes.ESCAPED:\n          this.source += '    ; __append(escapeFn(' + stripSemi(line) + '))' + '\\n';\n          break;\n          // Exec and output\n        case Template.modes.RAW:\n          this.source += '    ; __append(' + stripSemi(line) + ')' + '\\n';\n          break;\n        case Template.modes.COMMENT:\n          // Do nothing\n          break;\n          // Literal <%% mode, append as raw output\n        case Template.modes.LITERAL:\n          this._addOutput(line);\n          break;\n        }\n      }\n      // In string mode, just add the output\n      else {\n        this._addOutput(line);\n      }\n    }\n\n    if (self.opts.compileDebug && newLineCount) {\n      this.currentLine += newLineCount;\n      this.source += '    ; __line = ' + this.currentLine + '\\n';\n    }\n  }\n};\n\n/**\n * Escape characters reserved in XML.\n *\n * This is simply an export of {@link module:utils.escapeXML}.\n *\n * If `markup` is `undefined` or `null`, the empty string is returned.\n *\n * @param {String} markup Input string\n * @return {String} Escaped string\n * @public\n * @func\n * */\nexports.escapeXML = utils.escapeXML;\n\n/**\n * Express.js support.\n *\n * This is an alias for {@link module:ejs.renderFile}, in order to support\n * Express.js out-of-the-box.\n *\n * @func\n */\n\nexports.__express = exports.renderFile;\n\n/**\n * Version of EJS.\n *\n * @readonly\n * @type {String}\n * @public\n */\n\nexports.VERSION = _VERSION_STRING;\n\n/**\n * Name for detection of EJS.\n *\n * @readonly\n * @type {String}\n * @public\n */\n\nexports.name = _NAME;\n\n/* istanbul ignore if */\nif (typeof window != 'undefined') {\n  window.ejs = exports;\n}\n\n\n//# sourceURL=webpack://BuilderBundle/./node_modules/ejs-browser/lib/ejs.js?");

/***/ }),

/***/ "./node_modules/ejs-browser/lib/utils.js":
/*!***********************************************!*\
  !*** ./node_modules/ejs-browser/lib/utils.js ***!
  \***********************************************/
/***/ ((__unused_webpack_module, exports) => {

eval("/*\n * EJS Embedded JavaScript templates\n * Copyright 2112 Matthew Eernisse (mde@fleegix.org)\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *         http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n*/\n\n/**\n * Private utility functions\n * @module utils\n * @private\n */\n\n\n\nvar regExpChars = /[|\\\\{}()[\\]^$+*?.]/g;\nvar hasOwnProperty = Object.prototype.hasOwnProperty;\nvar hasOwn = function (obj, key) { return hasOwnProperty.apply(obj, [key]); };\n\n/**\n * Escape characters reserved in regular expressions.\n *\n * If `string` is `undefined` or `null`, the empty string is returned.\n *\n * @param {String} string Input string\n * @return {String} Escaped string\n * @static\n * @private\n */\nexports.escapeRegExpChars = function (string) {\n  // istanbul ignore if\n  if (!string) {\n    return '';\n  }\n  return String(string).replace(regExpChars, '\\\\$&');\n};\n\nvar _ENCODE_HTML_RULES = {\n  '&': '&amp;',\n  '<': '&lt;',\n  '>': '&gt;',\n  '\"': '&#34;',\n  \"'\": '&#39;'\n};\nvar _MATCH_HTML = /[&<>'\"]/g;\n\nfunction encode_char(c) {\n  return _ENCODE_HTML_RULES[c] || c;\n}\n\n/**\n * Stringified version of constants used by {@link module:utils.escapeXML}.\n *\n * It is used in the process of generating {@link ClientFunction}s.\n *\n * @readonly\n * @type {String}\n */\n\nvar escapeFuncStr =\n  'var _ENCODE_HTML_RULES = {\\n'\n+ '      \"&\": \"&amp;\"\\n'\n+ '    , \"<\": \"&lt;\"\\n'\n+ '    , \">\": \"&gt;\"\\n'\n+ '    , \\'\"\\': \"&#34;\"\\n'\n+ '    , \"\\'\": \"&#39;\"\\n'\n+ '    }\\n'\n+ '  , _MATCH_HTML = /[&<>\\'\"]/g;\\n'\n+ 'function encode_char(c) {\\n'\n+ '  return _ENCODE_HTML_RULES[c] || c;\\n'\n+ '};\\n';\n\n/**\n * Escape characters reserved in XML.\n *\n * If `markup` is `undefined` or `null`, the empty string is returned.\n *\n * @implements {EscapeCallback}\n * @param {String} markup Input string\n * @return {String} Escaped string\n * @static\n * @private\n */\n\nexports.escapeXML = function (markup) {\n  return markup == undefined\n    ? ''\n    : String(markup)\n      .replace(_MATCH_HTML, encode_char);\n};\n\nfunction escapeXMLToString() {\n  return Function.prototype.toString.call(this) + ';\\n' + escapeFuncStr;\n}\n\ntry {\n  if (typeof Object.defineProperty === 'function') {\n  // If the Function prototype is frozen, the \"toString\" property is non-writable. This means that any objects which inherit this property\n  // cannot have the property changed using an assignment. If using strict mode, attempting that will cause an error. If not using strict\n  // mode, attempting that will be silently ignored.\n  // However, we can still explicitly shadow the prototype's \"toString\" property by defining a new \"toString\" property on this object.\n    Object.defineProperty(exports.escapeXML, 'toString', { value: escapeXMLToString });\n  } else {\n    // If Object.defineProperty() doesn't exist, attempt to shadow this property using the assignment operator.\n    exports.escapeXML.toString = escapeXMLToString;\n  }\n} catch (err) {\n  console.warn('Unable to set escapeXML.toString (is the Function prototype frozen?)');\n}\n\n/**\n * Naive copy of properties from one object to another.\n * Does not recurse into non-scalar properties\n * Does not check to see if the property has a value before copying\n *\n * @param  {Object} to   Destination object\n * @param  {Object} from Source object\n * @return {Object}      Destination object\n * @static\n * @private\n */\nexports.shallowCopy = function (to, from) {\n  from = from || {};\n  if ((to !== null) && (to !== undefined)) {\n    for (var p in from) {\n      if (!hasOwn(from, p)) {\n        continue;\n      }\n      if (p === '__proto__' || p === 'constructor') {\n        continue;\n      }\n      to[p] = from[p];\n    }\n  }\n  return to;\n};\n\n/**\n * Naive copy of a list of key names, from one object to another.\n * Only copies property if it is actually defined\n * Does not recurse into non-scalar properties\n *\n * @param  {Object} to   Destination object\n * @param  {Object} from Source object\n * @param  {Array} list List of properties to copy\n * @return {Object}      Destination object\n * @static\n * @private\n */\nexports.shallowCopyFromList = function (to, from, list) {\n  list = list || [];\n  from = from || {};\n  if ((to !== null) && (to !== undefined)) {\n    for (var i = 0; i < list.length; i++) {\n      var p = list[i];\n      if (typeof from[p] != 'undefined') {\n        if (!hasOwn(from, p)) {\n          continue;\n        }\n        if (p === '__proto__' || p === 'constructor') {\n          continue;\n        }\n        to[p] = from[p];\n      }\n    }\n  }\n  return to;\n};\n\n/**\n * Simple in-process cache implementation. Does not implement limits of any\n * sort.\n *\n * @implements {Cache}\n * @static\n * @private\n */\nexports.cache = {\n  _data: {},\n  set: function (key, val) {\n    this._data[key] = val;\n  },\n  get: function (key) {\n    return this._data[key];\n  },\n  remove: function (key) {\n    delete this._data[key];\n  },\n  reset: function () {\n    this._data = {};\n  }\n};\n\n/**\n * Transforms hyphen case variable into camel case.\n *\n * @param {String} string Hyphen case string\n * @return {String} Camel case string\n * @static\n * @private\n */\nexports.hyphenToCamel = function (str) {\n  return str.replace(/-[a-z]/g, function (match) { return match[1].toUpperCase(); });\n};\n\n/**\n * Returns a null-prototype object in runtimes that support it\n *\n * @return {Object} Object, prototype will be set to null where possible\n * @static\n * @private\n */\nexports.createNullProtoObjWherePossible = (function () {\n  if (typeof Object.create == 'function') {\n    return function () {\n      return Object.create(null);\n    };\n  }\n  if (!({__proto__: null} instanceof Object)) {\n    return function () {\n      return {__proto__: null};\n    };\n  }\n  // Not possible, just pass through\n  return function () {\n    return {};\n  };\n})();\n\n\n\n\n//# sourceURL=webpack://BuilderBundle/./node_modules/ejs-browser/lib/utils.js?");

/***/ }),

/***/ "./node_modules/ejs-browser/package.json":
/*!***********************************************!*\
  !*** ./node_modules/ejs-browser/package.json ***!
  \***********************************************/
/***/ ((module) => {

eval("module.exports = /*#__PURE__*/JSON.parse('{\"name\":\"ejs-browser\",\"description\":\"Embedded JavaScript templates\",\"keywords\":[\"template\",\"engine\",\"ejs\"],\"version\":\"3.2.2\",\"author\":\"Matthew Eernisse <mde@fleegix.org> (http://fleegix.org)\",\"license\":\"Apache-2.0\",\"bin\":{\"ejs\":\"./bin/cli.js\"},\"main\":\"./lib/ejs.js\",\"jsdelivr\":\"ejs.min.js\",\"unpkg\":\"ejs.min.js\",\"repository\":{\"type\":\"git\",\"url\":\"git://github.com/mde/ejs.git\"},\"bugs\":\"https://github.com/mde/ejs/issues\",\"homepage\":\"https://github.com/mde/ejs\",\"dependencies\":{\"jake\":\"^10.8.5\"},\"devDependencies\":{\"browserify\":\"^16.5.1\",\"eslint\":\"^6.8.0\",\"git-directory-deploy\":\"^1.5.1\",\"jsdoc\":\"^4.0.2\",\"lru-cache\":\"^4.0.1\",\"mocha\":\"^10.2.0\",\"uglify-js\":\"^3.3.16\"},\"engines\":{\"node\":\">=0.10.0\"},\"scripts\":{\"test\":\"mocha -u tdd\",\"publish\":\"npm publish\"}}');\n\n//# sourceURL=webpack://BuilderBundle/./node_modules/ejs-browser/package.json?");

/***/ }),

/***/ "./src/builder.js":
/*!************************!*\
  !*** ./src/builder.js ***!
  \************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _includes_Builder_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./includes/Builder.js */ \"./src/includes/Builder.js\");\n/* harmony import */ var _includes_WidgetsBox_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./includes/WidgetsBox.js */ \"./src/includes/WidgetsBox.js\");\n/* harmony import */ var _includes_HeadingWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./includes/HeadingWidget.js */ \"./src/includes/HeadingWidget.js\");\n/* harmony import */ var _includes_ParagraphWidget_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./includes/ParagraphWidget.js */ \"./src/includes/ParagraphWidget.js\");\n/* harmony import */ var _includes_WelcomeWidget_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./includes/WelcomeWidget.js */ \"./src/includes/WelcomeWidget.js\");\n/* harmony import */ var _includes_MenuWidget_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./includes/MenuWidget.js */ \"./src/includes/MenuWidget.js\");\n/* harmony import */ var _includes_ListWidget_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./includes/ListWidget.js */ \"./src/includes/ListWidget.js\");\n/* harmony import */ var _includes_ImageWidget_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./includes/ImageWidget.js */ \"./src/includes/ImageWidget.js\");\n/* harmony import */ var _includes_GridWidget_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./includes/GridWidget.js */ \"./src/includes/GridWidget.js\");\n/* harmony import */ var _includes_H1Element_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./includes/H1Element.js */ \"./src/includes/H1Element.js\");\n/* harmony import */ var _includes_PElement_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./includes/PElement.js */ \"./src/includes/PElement.js\");\n/* harmony import */ var _includes_MenuElement_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./includes/MenuElement.js */ \"./src/includes/MenuElement.js\");\n/* harmony import */ var _includes_GridElement_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./includes/GridElement.js */ \"./src/includes/GridElement.js\");\n/* harmony import */ var _includes_CellElement_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./includes/CellElement.js */ \"./src/includes/CellElement.js\");\n/* harmony import */ var _includes_ButtonElement_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./includes/ButtonElement.js */ \"./src/includes/ButtonElement.js\");\n/* harmony import */ var _includes_ButtonWidget_js__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ./includes/ButtonWidget.js */ \"./src/includes/ButtonWidget.js\");\n/* harmony import */ var _includes_VideoElement_js__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ./includes/VideoElement.js */ \"./src/includes/VideoElement.js\");\n/* harmony import */ var _includes_VideoWidget_js__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ./includes/VideoWidget.js */ \"./src/includes/VideoWidget.js\");\n/* harmony import */ var _includes_AlertElement_js__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ./includes/AlertElement.js */ \"./src/includes/AlertElement.js\");\n/* harmony import */ var _includes_AlertWidget_js__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./includes/AlertWidget.js */ \"./src/includes/AlertWidget.js\");\n/* harmony import */ var _includes_TabsManager_js__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./includes/TabsManager.js */ \"./src/includes/TabsManager.js\");\n/* harmony import */ var _includes_UIManager_js__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./includes/UIManager.js */ \"./src/includes/UIManager.js\");\n/* harmony import */ var _includes_BaseElement_js__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! ./includes/BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _includes_TextControl_js__WEBPACK_IMPORTED_MODULE_23__ = __webpack_require__(/*! ./includes/TextControl.js */ \"./src/includes/TextControl.js\");\n/* harmony import */ var _includes_ImageElement_js__WEBPACK_IMPORTED_MODULE_24__ = __webpack_require__(/*! ./includes/ImageElement.js */ \"./src/includes/ImageElement.js\");\n/* harmony import */ var _includes_BaseWidget_js__WEBPACK_IMPORTED_MODULE_25__ = __webpack_require__(/*! ./includes/BaseWidget.js */ \"./src/includes/BaseWidget.js\");\n/* harmony import */ var _includes_ElementFactory_js__WEBPACK_IMPORTED_MODULE_26__ = __webpack_require__(/*! ./includes/ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _includes_LinkElement_js__WEBPACK_IMPORTED_MODULE_27__ = __webpack_require__(/*! ./includes/LinkElement.js */ \"./src/includes/LinkElement.js\");\n/* harmony import */ var _includes_H2Element_js__WEBPACK_IMPORTED_MODULE_28__ = __webpack_require__(/*! ./includes/H2Element.js */ \"./src/includes/H2Element.js\");\n/* harmony import */ var _includes_H3Element_js__WEBPACK_IMPORTED_MODULE_29__ = __webpack_require__(/*! ./includes/H3Element.js */ \"./src/includes/H3Element.js\");\n/* harmony import */ var _includes_H4Element_js__WEBPACK_IMPORTED_MODULE_30__ = __webpack_require__(/*! ./includes/H4Element.js */ \"./src/includes/H4Element.js\");\n/* harmony import */ var _includes_H5Element_js__WEBPACK_IMPORTED_MODULE_31__ = __webpack_require__(/*! ./includes/H5Element.js */ \"./src/includes/H5Element.js\");\n/* harmony import */ var _includes_TextInputElement_js__WEBPACK_IMPORTED_MODULE_32__ = __webpack_require__(/*! ./includes/TextInputElement.js */ \"./src/includes/TextInputElement.js\");\n/* harmony import */ var _includes_ListControl_js__WEBPACK_IMPORTED_MODULE_33__ = __webpack_require__(/*! ./includes/ListControl.js */ \"./src/includes/ListControl.js\");\n/* harmony import */ var _includes_PaddingMarginControl_js__WEBPACK_IMPORTED_MODULE_34__ = __webpack_require__(/*! ./includes/PaddingMarginControl.js */ \"./src/includes/PaddingMarginControl.js\");\n/* harmony import */ var _includes_RSSElement_js__WEBPACK_IMPORTED_MODULE_35__ = __webpack_require__(/*! ./includes/RSSElement.js */ \"./src/includes/RSSElement.js\");\n/* harmony import */ var _includes_RSSWidget_js__WEBPACK_IMPORTED_MODULE_36__ = __webpack_require__(/*! ./includes/RSSWidget.js */ \"./src/includes/RSSWidget.js\");\n/* harmony import */ var _includes_RSSControl_js__WEBPACK_IMPORTED_MODULE_37__ = __webpack_require__(/*! ./includes/RSSControl.js */ \"./src/includes/RSSControl.js\");\n/* harmony import */ var _includes_FontFamilyControl_js__WEBPACK_IMPORTED_MODULE_38__ = __webpack_require__(/*! ./includes/FontFamilyControl.js */ \"./src/includes/FontFamilyControl.js\");\n/* harmony import */ var _includes_FontWeightControl_js__WEBPACK_IMPORTED_MODULE_39__ = __webpack_require__(/*! ./includes/FontWeightControl.js */ \"./src/includes/FontWeightControl.js\");\n/* harmony import */ var _includes_ColorPickerControl_js__WEBPACK_IMPORTED_MODULE_40__ = __webpack_require__(/*! ./includes/ColorPickerControl.js */ \"./src/includes/ColorPickerControl.js\");\n/* harmony import */ var _includes_RichTextControl_js__WEBPACK_IMPORTED_MODULE_41__ = __webpack_require__(/*! ./includes/RichTextControl.js */ \"./src/includes/RichTextControl.js\");\n/* harmony import */ var _includes_BlockElement_js__WEBPACK_IMPORTED_MODULE_42__ = __webpack_require__(/*! ./includes/BlockElement.js */ \"./src/includes/BlockElement.js\");\n/* harmony import */ var _includes_GridControl_js__WEBPACK_IMPORTED_MODULE_43__ = __webpack_require__(/*! ./includes/GridControl.js */ \"./src/includes/GridControl.js\");\n/* harmony import */ var _includes_SettingsTabManager_js__WEBPACK_IMPORTED_MODULE_44__ = __webpack_require__(/*! ./includes/SettingsTabManager.js */ \"./src/includes/SettingsTabManager.js\");\n/* harmony import */ var _includes_CheckboxControl_js__WEBPACK_IMPORTED_MODULE_45__ = __webpack_require__(/*! ./includes/CheckboxControl.js */ \"./src/includes/CheckboxControl.js\");\n/* harmony import */ var _includes_RadiosControl_js__WEBPACK_IMPORTED_MODULE_46__ = __webpack_require__(/*! ./includes/RadiosControl.js */ \"./src/includes/RadiosControl.js\");\n/* harmony import */ var _includes_DropdownControl_js__WEBPACK_IMPORTED_MODULE_47__ = __webpack_require__(/*! ./includes/DropdownControl.js */ \"./src/includes/DropdownControl.js\");\n/* harmony import */ var _includes_SocialIconsElement_js__WEBPACK_IMPORTED_MODULE_48__ = __webpack_require__(/*! ./includes/SocialIconsElement.js */ \"./src/includes/SocialIconsElement.js\");\n/* harmony import */ var _includes_ImageLinkListControl_js__WEBPACK_IMPORTED_MODULE_49__ = __webpack_require__(/*! ./includes/ImageLinkListControl.js */ \"./src/includes/ImageLinkListControl.js\");\n/* harmony import */ var _includes_RangeControl_js__WEBPACK_IMPORTED_MODULE_50__ = __webpack_require__(/*! ./includes/RangeControl.js */ \"./src/includes/RangeControl.js\");\n/* harmony import */ var _includes_SAlert_js__WEBPACK_IMPORTED_MODULE_51__ = __webpack_require__(/*! ./includes/SAlert.js */ \"./src/includes/SAlert.js\");\n/* harmony import */ var _includes_BackgroundControl_js__WEBPACK_IMPORTED_MODULE_52__ = __webpack_require__(/*! ./includes/BackgroundControl.js */ \"./src/includes/BackgroundControl.js\");\n/* harmony import */ var _includes_CarouselBlockElement_js__WEBPACK_IMPORTED_MODULE_53__ = __webpack_require__(/*! ./includes/CarouselBlockElement.js */ \"./src/includes/CarouselBlockElement.js\");\n/* harmony import */ var _includes_DescriptionImageElement_js__WEBPACK_IMPORTED_MODULE_54__ = __webpack_require__(/*! ./includes/DescriptionImageElement.js */ \"./src/includes/DescriptionImageElement.js\");\n/* harmony import */ var _includes_DescriptionImageControl_js__WEBPACK_IMPORTED_MODULE_55__ = __webpack_require__(/*! ./includes/DescriptionImageControl.js */ \"./src/includes/DescriptionImageControl.js\");\n/* harmony import */ var _includes_ImageEffectControl_js__WEBPACK_IMPORTED_MODULE_56__ = __webpack_require__(/*! ./includes/ImageEffectControl.js */ \"./src/includes/ImageEffectControl.js\");\n/* harmony import */ var _includes_LabelElement_js__WEBPACK_IMPORTED_MODULE_57__ = __webpack_require__(/*! ./includes/LabelElement.js */ \"./src/includes/LabelElement.js\");\n/* harmony import */ var _includes_FontSizeControl_js__WEBPACK_IMPORTED_MODULE_58__ = __webpack_require__(/*! ./includes/FontSizeControl.js */ \"./src/includes/FontSizeControl.js\");\n/* harmony import */ var _includes_TextColorControl_js__WEBPACK_IMPORTED_MODULE_59__ = __webpack_require__(/*! ./includes/TextColorControl.js */ \"./src/includes/TextColorControl.js\");\n/* harmony import */ var _includes_LinkColorControl_js__WEBPACK_IMPORTED_MODULE_60__ = __webpack_require__(/*! ./includes/LinkColorControl.js */ \"./src/includes/LinkColorControl.js\");\n/* harmony import */ var _includes_ParagraphSpacingControl_js__WEBPACK_IMPORTED_MODULE_61__ = __webpack_require__(/*! ./includes/ParagraphSpacingControl.js */ \"./src/includes/ParagraphSpacingControl.js\");\n/* harmony import */ var _includes_LineHeightControl_js__WEBPACK_IMPORTED_MODULE_62__ = __webpack_require__(/*! ./includes/LineHeightControl.js */ \"./src/includes/LineHeightControl.js\");\n/* harmony import */ var _includes_LetterSpacingControl_js__WEBPACK_IMPORTED_MODULE_63__ = __webpack_require__(/*! ./includes/LetterSpacingControl.js */ \"./src/includes/LetterSpacingControl.js\");\n/* harmony import */ var _includes_TextDirectionControl_js__WEBPACK_IMPORTED_MODULE_64__ = __webpack_require__(/*! ./includes/TextDirectionControl.js */ \"./src/includes/TextDirectionControl.js\");\n/* harmony import */ var _includes_SelectElement_js__WEBPACK_IMPORTED_MODULE_65__ = __webpack_require__(/*! ./includes/SelectElement.js */ \"./src/includes/SelectElement.js\");\n/* harmony import */ var _includes_SelectControl_js__WEBPACK_IMPORTED_MODULE_66__ = __webpack_require__(/*! ./includes/SelectControl.js */ \"./src/includes/SelectControl.js\");\n/* harmony import */ var _includes_RadioElement_js__WEBPACK_IMPORTED_MODULE_67__ = __webpack_require__(/*! ./includes/RadioElement.js */ \"./src/includes/RadioElement.js\");\n/* harmony import */ var _includes_PricingTableElement_js__WEBPACK_IMPORTED_MODULE_68__ = __webpack_require__(/*! ./includes/PricingTableElement.js */ \"./src/includes/PricingTableElement.js\");\n/* harmony import */ var _includes_PricingTableControl_js__WEBPACK_IMPORTED_MODULE_69__ = __webpack_require__(/*! ./includes/PricingTableControl.js */ \"./src/includes/PricingTableControl.js\");\n/* harmony import */ var _includes_TableElement_js__WEBPACK_IMPORTED_MODULE_70__ = __webpack_require__(/*! ./includes/TableElement.js */ \"./src/includes/TableElement.js\");\n/* harmony import */ var _includes_TableControl_js__WEBPACK_IMPORTED_MODULE_71__ = __webpack_require__(/*! ./includes/TableControl.js */ \"./src/includes/TableControl.js\");\n/* harmony import */ var _includes_YoutubeElement_js__WEBPACK_IMPORTED_MODULE_72__ = __webpack_require__(/*! ./includes/YoutubeElement.js */ \"./src/includes/YoutubeElement.js\");\n/* harmony import */ var _includes_YoutubeControl_js__WEBPACK_IMPORTED_MODULE_73__ = __webpack_require__(/*! ./includes/YoutubeControl.js */ \"./src/includes/YoutubeControl.js\");\n/* harmony import */ var _includes_YoutubeWidget_js__WEBPACK_IMPORTED_MODULE_74__ = __webpack_require__(/*! ./includes/YoutubeWidget.js */ \"./src/includes/YoutubeWidget.js\");\n/* harmony import */ var _includes_CarouselPageElement_js__WEBPACK_IMPORTED_MODULE_75__ = __webpack_require__(/*! ./includes/CarouselPageElement.js */ \"./src/includes/CarouselPageElement.js\");\n/* harmony import */ var _includes_CarouselSettingsControl_js__WEBPACK_IMPORTED_MODULE_76__ = __webpack_require__(/*! ./includes/CarouselSettingsControl.js */ \"./src/includes/CarouselSettingsControl.js\");\n/* harmony import */ var _includes_CarouselSlideElement_js__WEBPACK_IMPORTED_MODULE_77__ = __webpack_require__(/*! ./includes/CarouselSlideElement.js */ \"./src/includes/CarouselSlideElement.js\");\n/* harmony import */ var _includes_CarouselSlideControl_js__WEBPACK_IMPORTED_MODULE_78__ = __webpack_require__(/*! ./includes/CarouselSlideControl.js */ \"./src/includes/CarouselSlideControl.js\");\n/* harmony import */ var _includes_CustomRangeControl_js__WEBPACK_IMPORTED_MODULE_79__ = __webpack_require__(/*! ./includes/CustomRangeControl.js */ \"./src/includes/CustomRangeControl.js\");\n/* harmony import */ var ejs_browser__WEBPACK_IMPORTED_MODULE_80__ = __webpack_require__(/*! ejs-browser */ \"./node_modules/ejs-browser/lib/ejs.js\");\n/* harmony import */ var ejs_browser__WEBPACK_IMPORTED_MODULE_80___default = /*#__PURE__*/__webpack_require__.n(ejs_browser__WEBPACK_IMPORTED_MODULE_80__);\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n//*temporal elements\n\n\n\n\n\n\n\n\n\n\n\n // Importing CarouselSettingsControl\n // Importing CarouselSlideCellElement\n // Importing CarouselSlideControl\n\n// temporal elements*\n\n\n\n// Attach all classes to the global `window` object\nwindow.Builder = _includes_Builder_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"];\nwindow.WidgetsBox = _includes_WidgetsBox_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"];\nwindow.HeadingWidget = _includes_HeadingWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"];\nwindow.ParagraphWidget = _includes_ParagraphWidget_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"];\nwindow.WelcomeWidget = _includes_WelcomeWidget_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"];\nwindow.MenuWidget = _includes_MenuWidget_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"];\nwindow.ListWidget = _includes_ListWidget_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"];\nwindow.ImageWidget = _includes_ImageWidget_js__WEBPACK_IMPORTED_MODULE_7__[\"default\"];\nwindow.GridWidget = _includes_GridWidget_js__WEBPACK_IMPORTED_MODULE_8__[\"default\"];\nwindow.H1Element = _includes_H1Element_js__WEBPACK_IMPORTED_MODULE_9__[\"default\"];\nwindow.PElement = _includes_PElement_js__WEBPACK_IMPORTED_MODULE_10__[\"default\"];\nwindow.MenuElement = _includes_MenuElement_js__WEBPACK_IMPORTED_MODULE_11__[\"default\"];\nwindow.GridElement = _includes_GridElement_js__WEBPACK_IMPORTED_MODULE_12__[\"default\"];\nwindow.CellElement = _includes_CellElement_js__WEBPACK_IMPORTED_MODULE_13__[\"default\"];\nwindow.ButtonElement = _includes_ButtonElement_js__WEBPACK_IMPORTED_MODULE_14__[\"default\"];\nwindow.ButtonWidget = _includes_ButtonWidget_js__WEBPACK_IMPORTED_MODULE_15__[\"default\"];\nwindow.VideoElement = _includes_VideoElement_js__WEBPACK_IMPORTED_MODULE_16__[\"default\"];\nwindow.VideoWidget = _includes_VideoWidget_js__WEBPACK_IMPORTED_MODULE_17__[\"default\"];\nwindow.AlertElement = _includes_AlertElement_js__WEBPACK_IMPORTED_MODULE_18__[\"default\"];\nwindow.AlertWidget = _includes_AlertWidget_js__WEBPACK_IMPORTED_MODULE_19__[\"default\"];\nwindow.TabsManager = _includes_TabsManager_js__WEBPACK_IMPORTED_MODULE_20__[\"default\"];\nwindow.UIManager = _includes_UIManager_js__WEBPACK_IMPORTED_MODULE_21__[\"default\"];\nwindow.BaseElement = _includes_BaseElement_js__WEBPACK_IMPORTED_MODULE_22__[\"default\"];\nwindow.TextControl = _includes_TextControl_js__WEBPACK_IMPORTED_MODULE_23__[\"default\"];\nwindow.ImageElement = _includes_ImageElement_js__WEBPACK_IMPORTED_MODULE_24__[\"default\"];\nwindow.BaseWidget = _includes_BaseWidget_js__WEBPACK_IMPORTED_MODULE_25__[\"default\"];\nwindow.ElementFactory = _includes_ElementFactory_js__WEBPACK_IMPORTED_MODULE_26__[\"default\"];\nwindow.LinkElement = _includes_LinkElement_js__WEBPACK_IMPORTED_MODULE_27__[\"default\"];\nwindow.H2Element = _includes_H2Element_js__WEBPACK_IMPORTED_MODULE_28__[\"default\"];\nwindow.H3Element = _includes_H3Element_js__WEBPACK_IMPORTED_MODULE_29__[\"default\"];\nwindow.H4Element = _includes_H4Element_js__WEBPACK_IMPORTED_MODULE_30__[\"default\"];\nwindow.H5Element = _includes_H5Element_js__WEBPACK_IMPORTED_MODULE_31__[\"default\"];\nwindow.TextInputElement = _includes_TextInputElement_js__WEBPACK_IMPORTED_MODULE_32__[\"default\"];\nwindow.ListControl = _includes_ListControl_js__WEBPACK_IMPORTED_MODULE_33__[\"default\"];\nwindow.PaddingMarginControl = _includes_PaddingMarginControl_js__WEBPACK_IMPORTED_MODULE_34__[\"default\"];\nwindow.RSSElement = _includes_RSSElement_js__WEBPACK_IMPORTED_MODULE_35__[\"default\"];\nwindow.RSSWidget = _includes_RSSWidget_js__WEBPACK_IMPORTED_MODULE_36__[\"default\"];\nwindow.RSSControl = _includes_RSSControl_js__WEBPACK_IMPORTED_MODULE_37__[\"default\"];\nwindow.FontFamilyControl = _includes_FontFamilyControl_js__WEBPACK_IMPORTED_MODULE_38__[\"default\"];\nwindow.FontWeightControl = _includes_FontWeightControl_js__WEBPACK_IMPORTED_MODULE_39__[\"default\"];\nwindow.ColorPickerControl = _includes_ColorPickerControl_js__WEBPACK_IMPORTED_MODULE_40__[\"default\"];\nwindow.RichTextControl = _includes_RichTextControl_js__WEBPACK_IMPORTED_MODULE_41__[\"default\"];\nwindow.BlockElement = _includes_BlockElement_js__WEBPACK_IMPORTED_MODULE_42__[\"default\"];\nwindow.GridControl = _includes_GridControl_js__WEBPACK_IMPORTED_MODULE_43__[\"default\"];\nwindow.SettingsTabManager = _includes_SettingsTabManager_js__WEBPACK_IMPORTED_MODULE_44__[\"default\"];\nwindow.CheckboxControl = _includes_CheckboxControl_js__WEBPACK_IMPORTED_MODULE_45__[\"default\"];\nwindow.RadiosControl = _includes_RadiosControl_js__WEBPACK_IMPORTED_MODULE_46__[\"default\"];\nwindow.DropdownControl = _includes_DropdownControl_js__WEBPACK_IMPORTED_MODULE_47__[\"default\"];\nwindow.SocialIconsElement = _includes_SocialIconsElement_js__WEBPACK_IMPORTED_MODULE_48__[\"default\"];\nwindow.ImageLinkListControl = _includes_ImageLinkListControl_js__WEBPACK_IMPORTED_MODULE_49__[\"default\"];\nwindow.RangeControl = _includes_RangeControl_js__WEBPACK_IMPORTED_MODULE_50__[\"default\"];\nwindow.SAlert = _includes_SAlert_js__WEBPACK_IMPORTED_MODULE_51__[\"default\"];\nwindow.BackgroundControl = _includes_BackgroundControl_js__WEBPACK_IMPORTED_MODULE_52__[\"default\"];\nwindow.CarouselBlockElement = _includes_CarouselBlockElement_js__WEBPACK_IMPORTED_MODULE_53__[\"default\"];\nwindow.DescriptionImageElement = _includes_DescriptionImageElement_js__WEBPACK_IMPORTED_MODULE_54__[\"default\"];\nwindow.DescriptionImageControl = _includes_DescriptionImageControl_js__WEBPACK_IMPORTED_MODULE_55__[\"default\"];\nwindow.ImageEffectControl = _includes_ImageEffectControl_js__WEBPACK_IMPORTED_MODULE_56__[\"default\"];\nwindow.LabelElement = _includes_LabelElement_js__WEBPACK_IMPORTED_MODULE_57__[\"default\"];\nwindow.YoutubeElement = _includes_YoutubeElement_js__WEBPACK_IMPORTED_MODULE_72__[\"default\"];\nwindow.YoutubeControl = _includes_YoutubeControl_js__WEBPACK_IMPORTED_MODULE_73__[\"default\"];\nwindow.YoutubeWidget = _includes_YoutubeWidget_js__WEBPACK_IMPORTED_MODULE_74__[\"default\"];\nwindow.CarouselPageElement = _includes_CarouselPageElement_js__WEBPACK_IMPORTED_MODULE_75__[\"default\"];\nwindow.CarouselSettingsControl = _includes_CarouselSettingsControl_js__WEBPACK_IMPORTED_MODULE_76__[\"default\"]; // Exporting CarouselSettingsControl\nwindow.CarouselSlideElement = _includes_CarouselSlideElement_js__WEBPACK_IMPORTED_MODULE_77__[\"default\"]; // Exporting CarouselSlideCellElement\nwindow.CarouselSlideControl = _includes_CarouselSlideControl_js__WEBPACK_IMPORTED_MODULE_78__[\"default\"]; // Exporting CarouselSlideControl\nwindow.FontSizeControl = _includes_FontSizeControl_js__WEBPACK_IMPORTED_MODULE_58__[\"default\"];\nwindow.TextColorControl = _includes_TextColorControl_js__WEBPACK_IMPORTED_MODULE_59__[\"default\"];\nwindow.LinkColorControl = _includes_LinkColorControl_js__WEBPACK_IMPORTED_MODULE_60__[\"default\"];\nwindow.ParagraphSpacingControl = _includes_ParagraphSpacingControl_js__WEBPACK_IMPORTED_MODULE_61__[\"default\"];\nwindow.LineHeightControl = _includes_LineHeightControl_js__WEBPACK_IMPORTED_MODULE_62__[\"default\"];\nwindow.LetterSpacingControl = _includes_LetterSpacingControl_js__WEBPACK_IMPORTED_MODULE_63__[\"default\"];\nwindow.TextDirectionControl = _includes_TextDirectionControl_js__WEBPACK_IMPORTED_MODULE_64__[\"default\"];\n\n//*temporal elements\nwindow.SelectElement = _includes_SelectElement_js__WEBPACK_IMPORTED_MODULE_65__[\"default\"];\nwindow.SelectControl = _includes_SelectControl_js__WEBPACK_IMPORTED_MODULE_66__[\"default\"];\nwindow.RadioElement = _includes_RadioElement_js__WEBPACK_IMPORTED_MODULE_67__[\"default\"];\nwindow.PricingTableElement = _includes_PricingTableElement_js__WEBPACK_IMPORTED_MODULE_68__[\"default\"];\nwindow.PricingTableControl = _includes_PricingTableControl_js__WEBPACK_IMPORTED_MODULE_69__[\"default\"];\nwindow.TableElement = _includes_TableElement_js__WEBPACK_IMPORTED_MODULE_70__[\"default\"];\nwindow.TableControl = _includes_TableControl_js__WEBPACK_IMPORTED_MODULE_71__[\"default\"];\n// temporal elements*\n\nwindow.CustomRangeControl = _includes_CustomRangeControl_js__WEBPACK_IMPORTED_MODULE_79__[\"default\"];\n\nwindow.ejs = (ejs_browser__WEBPACK_IMPORTED_MODULE_80___default());\n\n//# sourceURL=webpack://BuilderBundle/./src/builder.js?");

/***/ }),

/***/ "./src/includes/AlertElement.js":
/*!**************************************!*\
  !*** ./src/includes/AlertElement.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar AlertElement = /*#__PURE__*/function (_BaseElement) {\n  function AlertElement(template) {\n    var _this;\n    var text = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'This is an alert!';\n    _classCallCheck(this, AlertElement);\n    _this = _callSuper(this, AlertElement); // Call the parent class constructor\n    _this.template = template;\n    _this.text = text;\n    _this.domNode = null;\n    // formats\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: '560',\n      height: '315'\n    };\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n    return _this;\n  }\n  _inherits(AlertElement, _BaseElement);\n  return _createClass(AlertElement, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'AlertElement');\n      }\n\n      // render\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        formats: this.formats\n      });\n\n      // Set styles\n      console.log(this.formats);\n      this.domNode.style.paddingTop = this.getFormat('padding_top', '10px') + 'px';\n      this.domNode.style.paddingRight = this.getFormat('padding_right', '10px') + 'px';\n      this.domNode.style.paddingBottom = this.getFormat('padding_bottom', '10px') + 'px';\n      this.domNode.style.paddingLeft = this.getFormat('padding_left', '10px') + 'px';\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'AlertElement',\n        template: this.template,\n        text: this.text,\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RichTextControl\n      new RichTextControl('Text', this.text, {\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }), new PaddingMarginControl('Padding', {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      }, {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }), new RadiosControl('Brand Type', 'personal_brand', [{\n        label: 'Personal Brand',\n        value: 'personal_brand'\n      }, {\n        label: 'Business Brand',\n        value: 'business_brand'\n      }], {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl('Optimized for mobile', 'Allow the element to display correctly on mobile devices', true, {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new CheckboxControl('Compatibility mode for legacy browser', 'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS', true, {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new AlertElement(data.template, data.text);\n      if (data.formats) {\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('background_image', data.formats.background_image);\n        e.setFormat('background_position', data.formats.background_position);\n        e.setFormat('background_size', data.formats.background_size);\n        e.setFormat('background_repeat', data.formats.background_repeat);\n        e.setFormat('font_family', data.formats.font_family);\n        e.setFormat('font_style', data.formats.font_style);\n        e.setFormat('font_weight', data.formats.font_weight);\n        e.setFormat('font_size', data.formats.font_size);\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AlertElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/AlertElement.js?");

/***/ }),

/***/ "./src/includes/AlertWidget.js":
/*!*************************************!*\
  !*** ./src/includes/AlertWidget.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _AlertElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AlertElement.js */ \"./src/includes/AlertElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar AlertWidget = /*#__PURE__*/function (_BaseWidget) {\n  function AlertWidget() {\n    var _this;\n    _classCallCheck(this, AlertWidget);\n    _this = _callSuper(this, AlertWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add an AlertElement to the widget\n    var alert = new _AlertElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('Alert', 'This is an alert!');\n    _this.elements.push(alert);\n    return _this;\n  }\n  _inherits(AlertWidget, _BaseWidget);\n  return _createClass(AlertWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Alert';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'notification_important';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AlertWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/AlertWidget.js?");

/***/ }),

/***/ "./src/includes/AlignControl.js":
/*!**************************************!*\
  !*** ./src/includes/AlignControl.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar AlignControl = /*#__PURE__*/function () {\n  function AlignControl(label, value, callback) {\n    _classCallCheck(this, AlignControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial /* left | center | right */\n    this.callback = callback; // Callback function to handle input changes\n\n    this.options = [{\n      icon: \"format_align_left\",\n      value: \"left\"\n    }, {\n      icon: \"format_align_justify\",\n      value: \"justify\"\n    }, {\n      icon: \"format_align_center\",\n      value: \"center\"\n    }, {\n      icon: \"format_align_right\",\n      value: \"right\"\n    }];\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(AlignControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      var radioButtons = '';\n\n      // Create the radio buttons\n      this.options.forEach(function (option, index) {\n        var optionId = \"radio_\".concat(_this.id, \"_\").concat(index);\n        radioButtons += \"\\n        <input type=\\\"radio\\\" class=\\\"btn-check\\\" name=\\\"radioButton_\".concat(_this.id, \"\\\" \\n               id=\\\"\").concat(optionId, \"\\\" value=\\\"\").concat(option.value, \"\\\" \\n               \").concat(_this.value === option.value ? 'checked' : '', \">\\n        <label class=\\\"btn btn-outline-primary py-2 builder-radio-btn builder-radio-option fw-bold\\\" for=\\\"\").concat(optionId, \"\\\"><span class=\\\"material-symbols-rounded\\\">\").concat(option.icon, \"</span></label>\\n      \");\n      });\n      this.domNode.innerHTML = \"\\n      <div class=\\\"py-2 px-3 builder-radio-container d-flex flex-row align-items-center justify-content-between gap-3\\\">\\n        <label class=\\\"form-label fw-semibold d-block mb-2 builder-radio-label\\\">\".concat(this.label, \"</label>\\n        <div class=\\\"btn-group builder-radio-group\\\" role=\\\"group\\\" aria-label=\\\"\").concat(this.label, \"\\\">\\n          \").concat(radioButtons, \"\\n        </div>\\n      </div>\\n    \");\n\n      // Add event listeners to all radio buttons\n      var radioInputs = this.domNode.querySelectorAll(\"input[name=\\\"radioButton_\".concat(this.id, \"\\\"]\"));\n      radioInputs.forEach(function (radio) {\n        radio.addEventListener('change', function (e) {\n          _this.value = e.target.value;\n          if (_this.callback && typeof _this.callback.setValue === 'function') {\n            _this.callback.setValue(_this.value);\n          }\n        });\n      });\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var radio = this.domNode.querySelector(\"input[value=\\\"\".concat(newValue, \"\\\"]\"));\n      if (radio) {\n        radio.checked = true;\n\n        // Support both function and object with setValue\n        if (typeof this.callback === 'function') {\n          this.callback(this.value);\n        } else if (this.callback && typeof this.callback.setValue === 'function') {\n          this.callback.setValue(this.value);\n        }\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (AlignControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/AlignControl.js?");

/***/ }),

/***/ "./src/includes/BackgroundControl.js":
/*!*******************************************!*\
  !*** ./src/includes/BackgroundControl.js ***!
  \*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _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 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 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 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; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar BackgroundControl = /*#__PURE__*/function () {\n  function BackgroundControl(label, values, callback) {\n    _classCallCheck(this, BackgroundControl);\n    // Initialize properties\n    this.label = label;\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    this.color = values.color || '';\n    this.image = values.image || '';\n    this.size = values.size || 100;\n    this.position = values.position || \"center\";\n    this.toRepeat = Boolean(values.toRepeat);\n    this.callback = callback;\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    // Render the UI\n    this.render();\n  }\n  return _createClass(BackgroundControl, [{\n    key: \"render\",\n    value: function render() {\n      // Ensure color has # prefix\n      if (this.color && !this.color.startsWith(\"#\")) {\n        this.color = \"#\" + this.color;\n      }\n      this.domNode.innerHTML = \"\\n      <div class=\\\"settings-header mx-3 mt-4\\\">\\n            <div class=\\\"d-flex align-items-center justify-content-between\\\">\\n                <span class=\\\"fw-semibold small text-nowrap\\\">\".concat(this.label, \"</span>\\n                <span class=\\\"d-block mx-3 w-100\\\" style=\\\"height:1px;background-color:rgb(206, 212, 218);\\\"></span>\\n                <span class=\\\"d-flex align-items-center\\\"><span class=\\\"material-symbols-rounded\\\">keyboard_arrow_down</span></span>\\n            </div>\\n      </div>\\n      <div class=\\\"py-2 px-3\\\">\\n        \\n        <div class=\\\"d-flex align-items-center justify-content-between mb-1\\\">\\n          <span class=\\\"me-2\\\">Color:</span>\\n          <input type=\\\"color\\\" class=\\\"form-control form-control-color\\\" id=\\\"BgColor_\").concat(this.id, \"\\\" value=\\\"\").concat(this.color, \"\\\" \\n            title=\\\"Choose a color\\\" style=\\\"width: 30px; height:30px;\\\">\\n        </div>\\n        <div class=\\\"py-2 pe-3 pb-4 d-flex align-items-start\\\">\\n            <div class=\\\"image-preview me-3 d-flex align-items-center shadow-sm border\\\" style=\\\"border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\\\">\\n                <img src=\\\"\").concat(this.image || \"data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTYgMjk2Ij48ZyBpZD0iTGF5ZXJfMS0yIj48cmVjdCB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I2U2ZTZlNjsiLz48cGF0aCBkPSJNMjM2Ljk4LDk5LjQ0Yy0xLjEyLDAtMi4wMi45MS0yLjAyLDIuMDJ2OTMuMzZjMCw0LjktMi4zLDkuMjctNS44NywxMi4xMWwtNDYuMS00Ny4yM2MtLjc1LS43Ny0xLjk3LS44Mi0yLjc4LS4xMmwtMzIuMTgsMjcuOTgtNS43OS01Ljk1Yy0uNzgtLjgtMi4wNi0uODItMi44Ni0uMDQtLjguNzgtLjgyLDIuMDYtLjA0LDIuODZsNy4xMyw3LjMzYy43NS43NywxLjk3LjgyLDIuNzguMTJsMzIuMTgtMjcuOTgsNDQuMDksNDUuMThjLTEuODYuNzktMy45LDEuMjMtNi4wNSwxLjIzaC0xMTIuNjRjLTEuMTIsMC0yLjAyLjktMi4wMiwyLjAycy45MSwyLjAyLDIuMDIsMi4wMmgxMTIuNjRjMTAuNzcsMCwxOS41My04Ljc2LDE5LjUzLTE5LjUzdi05My4zNmMwLTEuMTItLjktMi4wMi0yLjAyLTIuMDJaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0yMzguNDgsNjYuOWMtLjc1LS44My0yLjAzLS45LTIuODYtLjE2bC0xNi45MywxNS4xOEg3Ni4zNmMtMTAuNzcsMC0xOS41Myw4Ljc2LTE5LjUzLDE5LjUzdjkzLjM2YzAsOS4xNiw2LjM2LDE2Ljg2LDE0Ljg5LDE4Ljk1bC0xNC4yMiwxMi43NWMtLjgzLjc0LS45LDIuMDMtLjE2LDIuODYuNC40NS45NS42NywxLjUxLjY3LjQ4LDAsLjk2LS4xNywxLjM1LS41MkwyMzguMzMsNjkuNzZjLjgzLS43NS45LTIuMDMuMTYtMi44NlpNNzYuMzYsODUuOThoMTM3LjgybC04OC4wOSw3OS4wMi0yMS44My0yMi40NWMtLjc2LS43OC0xLjk5LS44Mi0yLjgtLjA5bC00MC41NywzNi40NXYtNzcuNDVjMC04LjU0LDYuOTQtMTUuNDgsMTUuNDgtMTUuNDhaTTYwLjg4LDE5NC44MnYtMTAuNDdsNDEuODMtMzcuNTgsMjAuMzYsMjAuOTQtNDcuNDQsNDIuNTVjLTguMTktLjM5LTE0Ljc1LTcuMTUtMTQuNzUtMTUuNDRaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0xMjIuODMsMTI5LjEzYy04LjE5LDAtMTQuODUtNi42Ni0xNC44NS0xNC44NXM2LjY2LTE0Ljg1LDE0Ljg1LTE0Ljg1LDE0Ljg1LDYuNjYsMTQuODUsMTQuODUtNi42NiwxNC44NS0xNC44NSwxNC44NVpNMTIyLjgzLDEwMy40OGMtNS45NSwwLTEwLjgsNC44NC0xMC44LDEwLjhzNC44NCwxMC44LDEwLjgsMTAuOCwxMC44LTQuODQsMTAuOC0xMC44LTQuODQtMTAuOC0xMC44LTEwLjhaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjwvZz48L3N2Zz4=\", \"\\\" alt=\\\"Preview\\\" class=\\\"img-fluid\\\" style=\\\"max-height: 100px; border-radius: 8px;min-width:100px;\\\"/>\\n            </div>\\n            <div class=\\\"flex-grow-1\\\">\\n                <div class=\\\"mb-3 image-info\\\">\\n                    <small><span class=\\\"fw-semibold\\\">No image selected</span><br>\\n                    <span class=\\\"dimensions\\\"></span><br>\\n                    <span class=\\\"size\\\"></span></small>\\n                </div>\\n                <div class=\\\"btn-group mb-2\\\" role=\\\"group\\\">\\n                    <button data-control=\\\"upload\\\" type=\\\"button\\\" class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center\\\" title=\\\"Upload\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">upload</span>\\n                    </button>\\n                    <button data-control=\\\"reload\\\" type=\\\"button\\\" class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center\\\" title=\\\"Replace\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">sync</span>\\n                    </button>\\n                    <button data-control=\\\"delete\\\" type=\\\"button\\\" class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center small\\\" title=\\\"Remove\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                    </button>\\n                </div>\\n            </div>\\n        </div>\\n        <div class=\\\"d-flex align-items-center justify-content-between mb-3\\\">\\n          <span class=\\\"me-2\\\">Image URL:</span>\\n          <input type=\\\"text\\\" class=\\\"form-control\\\" id=\\\"imageUrl_\").concat(this.id, \"\\\" placeholder=\\\"Enter image URL\\\" value=\\\"\").concat(this.image, \"\\\" \\n            style=\\\"width: 65%; min-width: 120px;\\\">\\n        </div>\\n        <div class=\\\"d-flex align-items-center justify-content-between mb-3\\\">\\n          <span class=\\\"me-2\\\">Size (%):</span>\\n          <div class=\\\"input-group\\\" style=\\\"width: 65%; min-width: 120px;\\\">\\n            <input type=\\\"text\\\" class=\\\"form-control\\\" id=\\\"imageSize_\").concat(this.id, \"\\\" placeholder=\\\"Enter size\\\" value=\\\"\").concat(this.size, \"\\\">\\n            <span class=\\\"input-group-text\\\">%</span>\\n          </div>\\n        </div>\\n        <div class=\\\"mb-3\\\">\\n          <label class=\\\"form-label\\\">Position:</label>\\n          <div class=\\\"position-relative\\\" style=\\\"border: 1px solid #dee2e6; border-radius: 4px; height: 150px; background-color: #f8f9fa;\\\">\\n            <div id=\\\"positionSlider_\").concat(this.id, \"\\\" class=\\\"position-absolute\\\" \\n                 style=\\\"width: 20px; height: 20px; background-color: #0d6efd; border-radius: 50%; cursor: move; transform: translate(-50%, -50%); \\n                        left: \").concat(this.getPositionX(), \"%; top: \").concat(this.getPositionY(), \"%; z-index: 1;\\\">\\n            </div>\\n            <div class=\\\"position-absolute\\\" style=\\\"left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; width: 90%; height: 90%; border-radius: 3px;\\\">\\n            </div>\\n            <div class=\\\"small text-muted position-absolute\\\" style=\\\"top: 5px; left: 10px;\\\">Top-left</div>\\n            <div class=\\\"small text-muted position-absolute\\\" style=\\\"top: 5px; right: 10px;\\\">Top-right</div>\\n            <div class=\\\"small text-muted position-absolute\\\" style=\\\"bottom: 5px; left: 10px;\\\">Bottom-left</div>\\n            <div class=\\\"small text-muted position-absolute\\\" style=\\\"bottom: 5px; right: 10px;\\\">Bottom-right</div>\\n            <div class=\\\"small text-muted position-absolute\\\" style=\\\"top: 50%; left: 50%; transform: translate(-50%, -50%);\\\">Center</div>\\n          </div>\\n        </div>\\n       <div class=\\\"d-flex align-items-center justify-content-between mb-3\\\">\\n        <span class=\\\"me-2\\\">Repeat Image:</span>\\n                <div class=\\\"ms-auto\\\">\\n                    <input type=\\\"checkbox\\\" name=\\\"checkbox\\\" class=\\\"builder-checkbox-modern\\\" id=\\\"imageRepeat_\").concat(this.id, \"\\\" \").concat(this.toRepeat ? \"checked\" : \"\", \" />\\n                    <label class=\\\"toggle-label\\\" for=\\\"imageRepeat_\").concat(this.id, \"\\\"></label>\\n                </div>\\n            </div>\\n      </div>\\n    \");\n\n      // Fetch and update image info\n      if (this.image) {\n        this.updateImageInfo(this.image);\n      }\n\n      // Attach event listeners\n      this.attachEventListeners();\n\n      // Initialize the position slider\n      this.initPositionSlider();\n    }\n  }, {\n    key: \"attachEventListeners\",\n    value: function attachEventListeners() {\n      var _this = this;\n      // Use debounce for color picker to limit the number of updates\n      var colorTimeout;\n      var colorPicker = this.domNode.querySelector(\"#BgColor_\" + this.id);\n      if (colorPicker) {\n        colorPicker.addEventListener(\"input\", function (e) {\n          _this.color = e.target.value;\n\n          // When moving the slider, only update the color locally\n          var previewElement = _this.domNode.querySelector(\".image-preview\");\n          if (previewElement) {\n            previewElement.style.backgroundColor = _this.color;\n          }\n\n          // Delay the callback to the end of the color selection\n          clearTimeout(colorTimeout);\n          colorTimeout = setTimeout(function () {\n            if (_this.callback && typeof _this.callback.setBackground === \"function\") {\n              _this.callback.setBackground(_this.getValues());\n            }\n          }, 100);\n        });\n\n        // Add a handler for the change event for the color picker\n        colorPicker.addEventListener(\"change\", function (e) {\n          clearTimeout(colorTimeout);\n          _this.color = e.target.value;\n          if (_this.callback && typeof _this.callback.setBackground === \"function\") {\n            _this.callback.setBackground(_this.getValues());\n          }\n        });\n      }\n\n      // Similarly for other elements\n      var sizeTimeout;\n      var sizeInput = this.domNode.querySelector(\"#imageSize_\" + this.id);\n      if (sizeInput) {\n        sizeInput.addEventListener(\"input\", function (e) {\n          // Convert the input value to a number\n          var inputValue = e.target.value.trim();\n          _this.size = parseInt(inputValue, 10) || 100;\n          clearTimeout(sizeTimeout);\n          sizeTimeout = setTimeout(function () {\n            if (_this.callback && typeof _this.callback.setBackground === \"function\") {\n              // Pass the converted numeric value\n              _this.callback.setBackground(_this.getValues());\n            }\n          }, 300);\n        });\n      }\n\n      // For image URL\n      var urlTimeout;\n      var urlInput = this.domNode.querySelector(\"#imageUrl_\" + this.id);\n      if (urlInput) {\n        urlInput.addEventListener(\"input\", function (e) {\n          _this.image = e.target.value;\n\n          // Instantly update the preview\n          var previewImg = _this.domNode.querySelector(\".image-preview img\");\n          if (previewImg) {\n            previewImg.src = _this.image || \"data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTYgMjk2Ij48ZyBpZD0iTGF5ZXJfMS0yIj48cmVjdCB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I2U2ZTZlNjsiLz48cGF0aCBkPSJNMjM2Ljk4LDk5LjQ0Yy0xLjEyLDAtMi4wMi45MS0yLjAyLDIuMDJ2OTMuMzZjMCw0LjktMi4zLDkuMjctNS44NywxMi4xMWwtNDYuMS00Ny4yM2MtLjc1LS43Ny0xLjk3LS44Mi0yLjc4LS4xMmwtMzIuMTgsMjcuOTgtNS43OS01Ljk1Yy0uNzgtLjgtMi4wNi0uODItMi44Ni0uMDQtLjguNzgtLjgyLDIuMDYtLjA0LDIuODZsNy4xMyw3LjMzYy43NS43NywxLjk3LjgyLDIuNzguMTJsMzIuMTgtMjcuOTgsNDQuMDksNDUuMThjLTEuODYuNzktMy45LDEuMjMtNi4wNSwxLjIzaC0xMTIuNjRjLTEuMTIsMC0yLjAyLjktMi4wMiwyLjAycy45MSwyLjAyLDIuMDIsMi4wMmgxMTIuNjRjMTAuNzcsMCwxOS41My04Ljc2LDE5LjUzLTE5LjUzdi05My4zNmMwLTEuMTItLjktMi4wMi0yLjAyLTIuMDJaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0yMzguNDgsNjYuOWMtLjc1LS44My0yLjAzLS45LTIuODYtLjE2bC0xNi45MywxNS4xOEg3Ni4zNmMtMTAuNzcsMC0xOS41Myw4Ljc2LTE5LjUzLDE5LjUzdjkzLjM2YzAsOS4xNiw2LjM2LDE2Ljg2LDE0Ljg5LDE4Ljk1bC0xNC4yMiwxMi43NWMtLjgzLjc0LS45LDIuMDMtLjE2LDIuODYuNC40NS45NS42NywxLjUxLjY3LjQ4LDAsLjk2LS4xNywxLjM1LS41MkwyMzguMzMsNjkuNzZjLjgzLS43NS45LTIuMDMuMTYtMi44NlpNNzYuMzYsODUuOThoMTM3LjgybC04OC4wOSw3OS4wMi0yMS44My0yMi40NWMtLjc2LS43OC0xLjk5LS44Mi0yLjgtLjA5bC00MC41NywzNi40NXYtNzcuNDVjMC04LjU0LDYuOTQtMTUuNDgsMTUuNDgtMTUuNDhaTTYwLjg4LDE5NC44MnYtMTAuNDdsNDEuODMtMzcuNTgsMjAuMzYsMjAuOTQtNDcuNDQsNDIuNTVjLTguMTktLjM5LTE0Ljc1LTcuMTUtMTQuNzUtMTUuNDRaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0xMjIuODMsMTI5LjEzYy04LjE5LDAtMTQuODUtNi42Ni0xNC44NS0xNC44NXM2LjY2LTE0Ljg1LDE0Ljg1LTE0Ljg1LDE0Ljg1LDYuNjYsMTQuODUsMTQuODUtNi42NiwxNC44NS0xNC44NSwxNC44NVpNMTIyLjgzLDEwMy40OGMtNS45NSwwLTEwLjgsNC44NC0xMC44LDEwLjhzNC44NCwxMC44LDEwLjgsMTAuOCwxMC44LTQuODQsMTAuOC0xMC44LTQuODQtMTAuOC0xMC44LTEwLjhaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjwvZz48L3N2Zz4=\";\n          }\n          clearTimeout(urlTimeout);\n          urlTimeout = setTimeout(function () {\n            _this.updateImageInfo(_this.image);\n            if (_this.callback && typeof _this.callback.setBackground === \"function\") {\n              _this.callback.setBackground(_this.getValues());\n            }\n          }, 500); // Longer delay for URL\n        });\n      }\n\n      // Upload button\n      var uploadButton = this.domNode.querySelector('[data-control=\"upload\"]');\n      if (uploadButton) {\n        uploadButton.addEventListener(\"click\", function () {\n          _this.browserAndUpload();\n        });\n      }\n\n      // Reload button\n      var reloadButton = this.domNode.querySelector('[data-control=\"reload\"]');\n      if (reloadButton) {\n        reloadButton.addEventListener(\"click\", function () {\n          _this.render();\n        });\n      }\n\n      // Delete button\n      var deleteButton = this.domNode.querySelector('[data-control=\"delete\"]');\n      if (deleteButton) {\n        deleteButton.addEventListener(\"click\", function () {\n          _this.image = \"\";\n          if (_this.callback && typeof _this.callback.setBackground === \"function\") {\n            _this.callback.setBackground(_this.getValues());\n          }\n          var urlInput = _this.domNode.querySelector(\"#imageUrl_\" + _this.id);\n          if (urlInput) urlInput.value = \"\";\n          var previewImg = _this.domNode.querySelector(\".image-preview img\");\n          if (previewImg) {\n            previewImg.src = \"data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTYgMjk2Ij48ZyBpZD0iTGF5ZXJfMS0yIj48cmVjdCB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I2U2ZTZlNjsiLz48cGF0aCBkPSJNMjM2Ljk4LDk5LjQ0Yy0xLjEyLDAtMi4wMi45MS0yLjAyLDIuMDJ2OTMuMzZjMCw0LjktMi4zLDkuMjctNS44NywxMi4xMWwtNDYuMS00Ny4yM2MtLjc1LS43Ny0xLjk3LS44Mi0yLjc4LS4xMmwtMzIuMTgsMjcuOTgtNS43OS01Ljk1Yy0uNzgtLjgtMi4wNi0uODItMi44Ni0uMDQtLjguNzgtLjgyLDIuMDYtLjA0LDIuODZsNy4xMyw3LjMzYy43NS43NywxLjk3LjgyLDIuNzguMTJsMzIuMTgtMjcuOTgsNDQuMDksNDUuMThjLTEuODYuNzktMy45LDEuMjMtNi4wNSwxLjIzaC0xMTIuNjRjLTEuMTIsMC0yLjAyLjktMi4wMiwyLjAycy45MSwyLjAyLDIuMDIsMi4wMmgxMTIuNjRjMTAuNzcsMCwxOS41My04Ljc2LDE5LjUzLTE5LjUzdi05My4zNmMwLTEuMTItLjktMi4wMi0yLjAyLTIuMDJaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0yMzguNDgsNjYuOWMtLjc1LS44My0yLjAzLS45LTIuODYtLjE2bC0xNi45MywxNS4xOEg3Ni4zNmMtMTAuNzcsMC0xOS41Myw4Ljc2LTE5LjUzLDE5LjUzdjkzLjM2YzAsOS4xNiw2LjM2LDE2Ljg2LDE0Ljg5LDE4Ljk1bC0xNC4yMiwxMi43NWMtLjgzLjc0LS45LDIuMDMtLjE2LDIuODYuNC40NS45NS42NywxLjUxLjY3LjQ4LDAsLjk2LS4xNywxLjM1LS41MkwyMzguMzMsNjkuNzZjLjgzLS43NS45LTIuMDMuMTYtMi44NlpNNzYuMzYsODUuOThoMTM3LjgybC04OC4wOSw3OS4wMi0yMS44My0yMi40NWMtLjc2LS43OC0xLjk5LS44Mi0yLjgtLjA5bC00MC41NywzNi40NXYtNzcuNDVjMC04LjU0LDYuOTQtMTUuNDgsMTUuNDgtMTUuNDhaTTYwLjg4LDE5NC44MnYtMTAuNDdsNDEuODMtMzcuNTgsMjAuMzYsMjAuOTQtNDcuNDQsNDIuNTVjLTguMTktLjM5LTE0Ljc1LTcuMTUtMTQuNzUtMTUuNDRaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0xMjIuODMsMTI5LjEzYy04LjE5LDAtMTQuODUtNi42Ni0xNC44NS0xNC44NXM2LjY2LTE0Ljg1LDE0Ljg1LTE0Ljg1LDE0Ljg1LDYuNjYsMTQuODUsMTQuODUtNi42NiwxNC44NS0xNC44NSwxNC44NVpNMTIyLjgzLDEwMy40OGMtNS45NSwwLTEwLjgsNC44NC0xMC44LDEwLjhzNC44NCwxMC44LDEwLjgsMTAuOCwxMC44LTQuODQsMTAuOC0xMC44LTQuODQtMTAuOC0xMC44LTEwLjhaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjwvZz48L3N2Zz4=\";\n          }\n\n          // Reset image info to default\n          var infoContainer = _this.domNode.querySelector(\".image-info\");\n          if (infoContainer) {\n            infoContainer.innerHTML = \"\\n            <small><span class=\\\"fw-semibold\\\">No image selected</span><br>\\n            <span class=\\\"dimensions\\\"></span><br>\\n            <span class=\\\"size\\\"></span></small>\\n          \";\n          }\n        });\n      }\n\n      // Image repeat checkbox\n      var repeatCheckbox = this.domNode.querySelector(\"#imageRepeat_\" + this.id);\n      if (repeatCheckbox) {\n        repeatCheckbox.addEventListener(\"change\", function (e) {\n          _this.toRepeat = e.target.checked;\n          if (_this.callback && typeof _this.callback.setBackground === \"function\") {\n            _this.callback.setBackground(_this.getValues());\n          }\n        });\n      }\n    }\n  }, {\n    key: \"getValues\",\n    value: function getValues() {\n      // Ensure size is always a number\n      var sizeValue = parseInt(this.size, 10) || 100;\n      return {\n        color: this.color,\n        image: this.image,\n        size: sizeValue,\n        // Guaranteed to be a number\n        position: this.getCSSPosition(),\n        // Use CSS position format\n        internalPosition: this.position,\n        // Keep internal position for UI\n        toRepeat: this.toRepeat // Boolean value (true/false)\n      };\n    }\n  }, {\n    key: \"setBackground\",\n    value: function setBackground(values) {\n      if (values.color !== undefined) {\n        this.color = values.color;\n        var colorPicker = this.domNode.querySelector(\"#BgColor_\" + this.id);\n        if (colorPicker) {\n          colorPicker.value = this.color;\n        }\n      }\n      if (values.image !== undefined) {\n        this.image = values.image;\n        var urlInput = this.domNode.querySelector(\"#imageUrl_\" + this.id);\n        if (urlInput) {\n          urlInput.value = this.image;\n        }\n\n        // Update preview\n        var previewImg = this.domNode.querySelector(\".image-preview img\");\n        if (previewImg) {\n          previewImg.src = this.image || \"data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTYgMjk2Ij48ZyBpZD0iTGF5ZXJfMS0yIj48cmVjdCB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I2U2ZTZlNjsiLz48cGF0aCBkPSJNMjM2Ljk4LDk5LjQ0Yy0xLjEyLDAtMi4wMi45MS0yLjAyLDIuMDJ2OTMuMzZjMCw0LjktMi4zLDkuMjctNS44NywxMi4xMWwtNDYuMS00Ny4yM2MtLjc1LS43Ny0xLjk3LS44Mi0yLjc4LS4xMmwtMzIuMTgsMjcuOTgtNS43OS01Ljk1Yy0uNzgtLjgtMi4wNi0uODItMi44Ni0uMDQtLjguNzgtLjgyLDIuMDYtLjA0LDIuODZsNy4xMyw3LjMzYy43NS43NywxLjk3LjgyLDIuNzguMTJsMzIuMTgtMjcuOTgsNDQuMDksNDUuMThjLTEuODYuNzktMy45LDEuMjMtNi4wNSwxLjIzaC0xMTIuNjRjLTEuMTIsMC0yLjAyLjktMi4wMiwyLjAycy45MSwyLjAyLDIuMDIsMi4wMmgxMTIuNjRjMTAuNzcsMCwxOS41My04Ljc2LDE5LjUzLTE5LjUzdi05My4zNmMwLTEuMTItLjktMi4wMi0yLjAyLTIuMDJaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0yMzguNDgsNjYuOWMtLjc1LS44My0yLjAzLS45LTIuODYtLjE2bC0xNi45MywxNS4xOEg3Ni4zNmMtMTAuNzcsMC0xOS41Myw4Ljc2LTE5LjUzLDE5LjUzdjkzLjM2YzAsOS4xNiw2LjM2LDE2Ljg2LDE0Ljg5LDE4Ljk1bC0xNC4yMiwxMi43NWMtLjgzLjc0LS45LDIuMDMtLjE2LDIuODYuNC40NS45NS42NywxLjUxLjY3LjQ4LDAsLjk2LS4xNywxLjM1LS41MkwyMzguMzMsNjkuNzZjLjgzLS43NS45LTIuMDMuMTYtMi44NlpNNzYuMzYsODUuOThoMTM3LjgybC04OC4wOSw3OS4wMi0yMS44My0yMi40NWMtLjc2LS43OC0xLjk5LS44Mi0yLjgtLjA5bC00MC41NywzNi40NXYtNzcuNDVjMC04LjU0LDYuOTQtMTUuNDgsMTUuNDgtMTUuNDhaTTYwLjg4LDE5NC44MnYtMTAuNDdsNDEuODMtMzcuNTgsMjAuMzYsMjAuOTQtNDcuNDQsNDIuNTVjLTguMTktLjM5LTE0Ljc1LTcuMTUtMTQuNzUtMTUuNDRaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0xMjIuODMsMTI5LjEzYy04LjE5LDAtMTQuODUtNi42Ni0xNC44NS0xNC44NXM2LjY2LTE0Ljg1LDE0Ljg1LTE0Ljg1LDE0Ljg1LDYuNjYsMTQuODUsMTQuODUtNi42NiwxNC44NS0xNC44NSwxNC44NVpNMTIyLjgzLDEwMy40OGMtNS45NSwwLTEwLjgsNC44NC0xMC44LDEwLjhzNC44NCwxMC44LDEwLjgsMTAuOCwxMC44LTQuODQsMTAuOC0xMC44LTQuODQtMTAuOC0xMC44LTEwLjhaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjwvZz48L3N2Zz4=\";\n        }\n        if (values.size !== undefined) {\n          // Always convert size value to a number\n          this.size = parseInt(values.size, 10) || 100;\n          var sizeInput = this.domNode.querySelector(\"#imageSize_\" + this.id);\n          if (sizeInput) {\n            sizeInput.value = this.size;\n          }\n        }\n        if (values.position !== undefined) {\n          this.position = values.position;\n\n          // Use the correct slider instead of non-existent element\n          var slider = this.domNode.querySelector(\"#positionSlider_\".concat(this.id));\n          if (slider) {\n            slider.style.left = \"\".concat(this.getPositionX(), \"%\");\n            slider.style.top = \"\".concat(this.getPositionY(), \"%\");\n          }\n        }\n        if (values.toRepeat !== undefined) {\n          this.toRepeat = values.toRepeat;\n          var repeatCheckbox = this.domNode.querySelector(\"#imageRepeat_\" + this.id);\n          if (repeatCheckbox) {\n            repeatCheckbox.checked = this.toRepeat;\n          }\n        }\n      }\n    }\n  }, {\n    key: \"updateImageInfo\",\n    value: function () {\n      var _updateImageInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {\n        var filename, infoContainer, previewImg, validUrl, response, blob, img;\n        return _regeneratorRuntime().wrap(function _callee$(_context) {\n          while (1) switch (_context.prev = _context.next) {\n            case 0:\n              if (!(!url || url.trim() === \"\")) {\n                _context.next = 2;\n                break;\n              }\n              return _context.abrupt(\"return\");\n            case 2:\n              _context.prev = 2;\n              // Extract filename regardless of URL validity\n              filename = url.split(\"/\").pop(); // Set basic information even before trying to fetch\n              infoContainer = this.domNode.querySelector(\".image-info\");\n              if (infoContainer) {\n                infoContainer.innerHTML = \"\\n          <small><span class=\\\"fw-semibold\\\">\".concat(filename, \"</span><br>\\n          <span class=\\\"dimensions\\\">Image path set</span><br>\\n          <span class=\\\"size\\\"></span></small>\\n        \");\n              }\n\n              // Update preview image immediately\n              previewImg = this.domNode.querySelector(\".image-preview img\");\n              if (previewImg) {\n                previewImg.src = url;\n              }\n\n              // Try to get full details if possible\n              _context.prev = 8;\n              // Check if it's an absolute URL\n              validUrl = new URL(url);\n              _context.next = 16;\n              break;\n            case 12:\n              _context.prev = 12;\n              _context.t0 = _context[\"catch\"](8);\n              // For relative URLs, just show basic info\n              console.log(\"Using relative URL path:\", url);\n              return _context.abrupt(\"return\");\n            case 16:\n              _context.next = 18;\n              return fetch(url);\n            case 18:\n              response = _context.sent;\n              if (response.ok) {\n                _context.next = 21;\n                break;\n              }\n              throw new Error(\"HTTP error! Status: \".concat(response.status));\n            case 21:\n              _context.next = 23;\n              return response.blob();\n            case 23:\n              blob = _context.sent;\n              // Create an image element to get dimensions\n              img = new Image();\n              img.src = URL.createObjectURL(blob);\n              img.onload = function () {\n                var dimensions = \"\".concat(img.width, \" x \").concat(img.height, \" px\");\n                var size = \"\".concat((blob.size / 1024).toFixed(2), \" kB\");\n\n                // Update the DOM with the image info\n                if (infoContainer) {\n                  infoContainer.innerHTML = \"\\n            <small><span class=\\\"fw-semibold\\\">\".concat(filename, \"</span><br>\\n            <span class=\\\"dimensions\\\">\").concat(dimensions, \"</span><br>\\n            <span class=\\\"size\\\">\").concat(size, \"</span></small>\\n          \");\n                }\n              };\n              _context.next = 32;\n              break;\n            case 29:\n              _context.prev = 29;\n              _context.t1 = _context[\"catch\"](2);\n              console.log(\"Non-critical error fetching image info:\", _context.t1);\n              // Don't show error for this case, just keep basic info\n            case 32:\n            case \"end\":\n              return _context.stop();\n          }\n        }, _callee, this, [[2, 29], [8, 12]]);\n      }));\n      function updateImageInfo(_x) {\n        return _updateImageInfo.apply(this, arguments);\n      }\n      return updateImageInfo;\n    }()\n  }, {\n    key: \"browserAndUpload\",\n    value: function browserAndUpload() {\n      var _this2 = this;\n      var input = document.createElement(\"input\");\n      input.type = \"file\";\n      input.accept = \"image/*\";\n      input.addEventListener(\"change\", /*#__PURE__*/function () {\n        var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {\n          var file, formData, response, result, urlInput, previewImg;\n          return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n            while (1) switch (_context2.prev = _context2.next) {\n              case 0:\n                file = event.target.files[0];\n                if (!file) {\n                  _context2.next = 21;\n                  break;\n                }\n                formData = new FormData();\n                formData.append(\"file\", file);\n                _context2.prev = 4;\n                _context2.next = 7;\n                return fetch(builder.assetUploadHandler, {\n                  method: \"POST\",\n                  body: formData\n                });\n              case 7:\n                response = _context2.sent;\n                if (!response.ok) {\n                  _context2.next = 15;\n                  break;\n                }\n                _context2.next = 11;\n                return response.json();\n              case 11:\n                result = _context2.sent;\n                if (result.url) {\n                  _this2.image = result.url;\n\n                  // Instead of this.render() update only the needed UI elements\n                  urlInput = _this2.domNode.querySelector(\"#imageUrl_\" + _this2.id);\n                  if (urlInput) {\n                    urlInput.value = _this2.image;\n                  }\n                  previewImg = _this2.domNode.querySelector(\".image-preview img\");\n                  if (previewImg) {\n                    previewImg.src = _this2.image;\n                  }\n\n                  // Update image information\n                  _this2.updateImageInfo(_this2.image);\n                  if (_this2.callback && typeof _this2.callback.setBackground === \"function\") {\n                    _this2.callback.setBackground(_this2.getValues());\n                  }\n                }\n                _context2.next = 16;\n                break;\n              case 15:\n                console.error(\"Upload failed:\", response.statusText);\n              case 16:\n                _context2.next = 21;\n                break;\n              case 18:\n                _context2.prev = 18;\n                _context2.t0 = _context2[\"catch\"](4);\n                console.error(\"Error uploading file:\", _context2.t0);\n              case 21:\n              case \"end\":\n                return _context2.stop();\n            }\n          }, _callee2, null, [[4, 18]]);\n        }));\n        return function (_x2) {\n          return _ref.apply(this, arguments);\n        };\n      }());\n      input.click();\n    }\n  }, {\n    key: \"getPositionX\",\n    value: function getPositionX() {\n      // Convert position string to X coordinate percentage for UI display\n      switch (this.position) {\n        case \"top-left\":\n        case \"bottom-left\":\n        case \"left\":\n          return 25;\n        // Left side\n        case \"top-right\":\n        case \"bottom-right\":\n        case \"right\":\n          return 75;\n        // Right side\n        case \"top\":\n        case \"bottom\":\n        case \"center\":\n        default:\n          return 50;\n        // Center\n      }\n    }\n  }, {\n    key: \"getPositionY\",\n    value: function getPositionY() {\n      // Convert position string to Y coordinate percentage for UI display\n      switch (this.position) {\n        case \"top-left\":\n        case \"top-right\":\n        case \"top\":\n          return 25;\n        // Top side\n        case \"bottom-left\":\n        case \"bottom-right\":\n        case \"bottom\":\n          return 75;\n        // Bottom side\n        case \"left\":\n        case \"right\":\n        case \"center\":\n        default:\n          return 50;\n        // Center\n      }\n    }\n  }, {\n    key: \"getPositionFromCoordinates\",\n    value: function getPositionFromCoordinates(x, y) {\n      // Convert X,Y percentages to position string\n      if (x < 33) {\n        return y < 33 ? \"top-left\" : y > 66 ? \"bottom-left\" : \"left\";\n      } else if (x > 66) {\n        return y < 33 ? \"top-right\" : y > 66 ? \"bottom-right\" : \"right\";\n      } else {\n        return y < 33 ? \"top\" : y > 66 ? \"bottom\" : \"center\";\n      }\n    }\n\n    // Convert position string to valid CSS background-position\n  }, {\n    key: \"getCSSPosition\",\n    value: function getCSSPosition() {\n      // Convert internal position format to valid CSS background-position value\n      switch (this.position) {\n        case \"top-left\":\n          return \"left top\";\n        case \"top-right\":\n          return \"right top\";\n        case \"bottom-left\":\n          return \"left bottom\";\n        case \"bottom-right\":\n          return \"right bottom\";\n        case \"top\":\n          return \"center top\";\n        case \"bottom\":\n          return \"center bottom\";\n        case \"left\":\n          return \"left center\";\n        case \"right\":\n          return \"right center\";\n        case \"center\":\n        default:\n          return \"center center\";\n      }\n    }\n  }, {\n    key: \"initPositionSlider\",\n    value: function initPositionSlider() {\n      var _this3 = this;\n      var slider = this.domNode.querySelector(\"#positionSlider_\".concat(this.id));\n      if (!slider) return;\n      var container = slider.parentElement;\n      var isDragging = false;\n\n      // Get position within container as percentages\n      var getRelativePosition = function getRelativePosition(event) {\n        var rect = container.getBoundingClientRect();\n        var clientX, clientY;\n        if (event.type.includes(\"touch\")) {\n          clientX = event.touches[0].clientX;\n          clientY = event.touches[0].clientY;\n        } else {\n          clientX = event.clientX;\n          clientY = event.clientY;\n        }\n\n        // Calculate position as percentage\n        var x = (clientX - rect.left) / rect.width * 100;\n        var y = (clientY - rect.top) / rect.height * 100;\n\n        // Clamp values between 0 and 100\n        x = Math.max(0, Math.min(100, x));\n        y = Math.max(0, Math.min(100, y));\n        return {\n          x: x,\n          y: y\n        };\n      };\n\n      // Update slider position and trigger callback\n      var updatePosition = function updatePosition(event) {\n        if (!isDragging) return;\n        var position = getRelativePosition(event);\n\n        // Update slider position\n        slider.style.left = \"\".concat(position.x, \"%\");\n        slider.style.top = \"\".concat(position.y, \"%\");\n\n        // Update position based on coordinates\n        _this3.position = _this3.getPositionFromCoordinates(position.x, position.y);\n\n        // Trigger callback\n        if (_this3.callback && typeof _this3.callback.setBackground === \"function\") {\n          _this3.callback.setBackground(_this3.getValues());\n        }\n      };\n\n      // Mouse events\n      slider.addEventListener(\"mousedown\", function (e) {\n        e.preventDefault(); // Prevent text selection during drag\n        isDragging = true;\n      });\n      document.addEventListener(\"mousemove\", updatePosition);\n      document.addEventListener(\"mouseup\", function () {\n        isDragging = false;\n      });\n\n      // Touch events for mobile\n      slider.addEventListener(\"touchstart\", function (e) {\n        isDragging = true;\n      });\n      document.addEventListener(\"touchmove\", updatePosition);\n      document.addEventListener(\"touchend\", function () {\n        isDragging = false;\n      });\n\n      // Allow clicking directly on the container to move slider\n      container.addEventListener(\"click\", function (event) {\n        if (event.target === slider) return; // Don't handle clicks on the slider itself\n\n        var position = getRelativePosition(event);\n\n        // Update slider position\n        slider.style.left = \"\".concat(position.x, \"%\");\n        slider.style.top = \"\".concat(position.y, \"%\");\n\n        // Update position based on coordinates\n        _this3.position = _this3.getPositionFromCoordinates(position.x, position.y);\n\n        // Trigger callback\n        if (_this3.callback && typeof _this3.callback.setBackground === \"function\") {\n          _this3.callback.setBackground(_this3.getValues());\n        }\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BackgroundControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/BackgroundControl.js?");

/***/ }),

/***/ "./src/includes/BaseElement.js":
/*!*************************************!*\
  !*** ./src/includes/BaseElement.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar BaseElement = /*#__PURE__*/function () {\n  function BaseElement() {\n    _classCallCheck(this, BaseElement);\n    this.id = '_' + Math.random().toString(36).substr(2, 9);\n    this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: '560',\n      height: '315'\n    };\n  }\n  return _createClass(BaseElement, [{\n    key: \"getClassName\",\n    value: function getClassName() {\n      return this.constructor.name;\n    }\n  }, {\n    key: \"isDroppable\",\n    value: function isDroppable() {\n      return false;\n    }\n  }, {\n    key: \"canDropInside\",\n    value: function canDropInside() {\n      return false;\n    }\n  }, {\n    key: \"canDropBefore\",\n    value: function canDropBefore() {\n      return false;\n    }\n  }, {\n    key: \"canDropAfter\",\n    value: function canDropAfter() {\n      return false;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      return [\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"renderTemplate\",\n    value: function renderTemplate(template) {\n      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n      return builder.renderTemplate(template, options);\n    }\n  }, {\n    key: \"duplicate\",\n    value: function duplicate() {\n      var cloned = ElementFactory.createElement(this.getData());\n      this.container.insertElementAfter(this, cloned);\n\n      // @todo: dependency\n      builder.selectElement(cloned);\n    }\n  }, {\n    key: \"fadeOut\",\n    value: function fadeOut() {\n      var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 300;\n      var callback = arguments.length > 1 ? arguments[1] : undefined;\n      var element = this.domNode;\n\n      // Get computed height to allow transition from fixed height to 0\n      var computedStyle = getComputedStyle(element);\n      var height = element.offsetHeight;\n      element.style.height = height + 'px';\n      element.style.overflow = 'hidden'; // Prevent content overflow during height transition\n\n      // Set up the transition\n      element.style.transition = \"opacity \".concat(duration, \"ms, transform \").concat(duration, \"ms, height \").concat(duration, \"ms\");\n      element.style.opacity = '1';\n      element.style.transform = 'translateX(0)';\n      var _handleTransitionEnd = function handleTransitionEnd(event) {\n        // Wait for all transitions to complete\n        if (event.propertyName !== 'height') return;\n        element.removeEventListener('transitionend', _handleTransitionEnd);\n        element.style.display = 'none';\n        if (typeof callback === 'function') {\n          callback();\n        }\n      };\n      element.addEventListener('transitionend', _handleTransitionEnd);\n\n      // Trigger animation\n      requestAnimationFrame(function () {\n        void element.offsetWidth; // Force reflow\n        element.style.opacity = '0';\n        element.style.transform = 'translateX(100px)';\n        element.style.height = '0px';\n      });\n    }\n  }, {\n    key: \"fadeIn\",\n    value: function fadeIn() {\n      var duration = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 300;\n      var callback = arguments.length > 1 ? arguments[1] : undefined;\n      var element = this.domNode;\n\n      // Remove any lingering transitionend listeners\n      element.removeEventListener('transitionend', element._fadeInTransitionEnd);\n\n      // Reset display and initial state\n      element.style.display = '';\n      element.style.overflow = 'hidden';\n      element.style.opacity = '0';\n      element.style.transform = 'translateX(100px)';\n      element.style.height = '0px';\n\n      // Force reflow to apply initial styles\n      void element.offsetWidth;\n\n      // Measure full height to transition to\n      var targetHeight = element.scrollHeight;\n\n      // Apply transition styles\n      element.style.transition = \"opacity \".concat(duration, \"ms ease, transform \").concat(duration, \"ms ease, height \").concat(duration, \"ms ease\");\n\n      // Define the transition end handler\n      var _handleTransitionEnd2 = function handleTransitionEnd(event) {\n        if (event.propertyName !== 'height') return;\n        element.removeEventListener('transitionend', _handleTransitionEnd2);\n        element.style.overflow = ''; // Reset overflow\n        element.style.height = ''; // Let height be auto after transition\n\n        if (typeof callback === 'function') {\n          callback();\n        }\n      };\n\n      // Attach and store the handler (to avoid duplicates)\n      element._fadeInTransitionEnd = _handleTransitionEnd2;\n      element.addEventListener('transitionend', _handleTransitionEnd2);\n\n      // Animate to visible state\n      requestAnimationFrame(function () {\n        element.style.opacity = '1';\n        element.style.transform = 'translateX(0)';\n        element.style.height = targetHeight + 'px';\n      });\n    }\n  }, {\n    key: \"remove\",\n    value: function remove() {\n      var _this = this;\n      if (builder.getSelectedElement() === this) {\n        builder.unselect();\n      }\n\n      // remove all effects\n      this.removeHoverHightlight();\n      this.removeSelectedHighlight();\n      this.removeDropHighlight();\n      this.removeContainerHightlight();\n      this.removeContainerDropHightlight();\n      this.fadeOut(300, function () {\n        _this.container.removeElement(_this);\n\n        // remove alement from all\n        builder.uiManager.removeDraggableItem(_this);\n        builder.uiManager.removeElement(_this);\n        builder.uiManager.dragOveringElements = [];\n        builder.uiManager.hoveringElements = [];\n      });\n    }\n  }, {\n    key: \"getFullUrl\",\n    value: function getFullUrl(url) {\n      return builder.getFullUrl(url);\n    }\n\n    /* Matching Position & Size of domNode and the box */\n  }, {\n    key: \"matchingDomNode\",\n    value: function matchingDomNode(box) {\n      var _this2 = this;\n      var setPosSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      //\n      if (!box) {\n        return;\n      }\n      if (!setPosSize) {\n        setPosSize = function setPosSize() {\n          // Get the bounding rect of the domNode inside the iframe\n          var domRect = _this2.domNode.getBoundingClientRect();\n\n          // Get the iframe element that contains the domNode\n          var iframe = _this2.domNode.ownerDocument.defaultView.frameElement;\n          var iframeRect = iframe.getBoundingClientRect();\n\n          // Calculate absolute position of domNode relative to main window\n          var absoluteTop = iframeRect.top + domRect.top;\n          var absoluteLeft = iframeRect.left + domRect.left;\n\n          // Set the hoveringBox's position and size\n          Object.assign(box.style, {\n            position: 'fixed',\n            top: \"\".concat(absoluteTop, \"px\"),\n            left: \"\".concat(absoluteLeft, \"px\"),\n            width: \"\".concat(domRect.width, \"px\"),\n            height: \"\".concat(domRect.height, \"px\")\n          });\n        };\n      }\n      setPosSize();\n\n      //\n      if (!box.events) {\n        // === IFRAME SCROLL & RESIZE ===\n        var iframeWindow = this.domNode.ownerDocument.defaultView;\n        var iframeDocument = this.domNode.ownerDocument;\n        iframeWindow.addEventListener('scroll', function () {\n          setPosSize();\n        }, true);\n        iframeWindow.addEventListener('resize', function () {\n          setPosSize();\n        });\n\n        // Optional: also watch for DOM mutations (e.g., added/removed elements)\n        var mutationObserver = new iframeWindow.MutationObserver(function () {\n          setPosSize();\n        });\n        mutationObserver.observe(iframeDocument.body, {\n          childList: true,\n          subtree: true,\n          attributes: true\n        });\n        box.events = true;\n\n        // Outer Document\n        window.document.addEventListener('scroll', function () {\n          setPosSize();\n        }, true);\n        window.document.addEventListener('resize', function () {\n          setPosSize();\n        });\n      }\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(format, value) {\n      this.formats[format] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(format) {\n      var _this$formats$format;\n      var dValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return (_this$formats$format = this.formats[format]) !== null && _this$formats$format !== void 0 ? _this$formats$format : dValue;\n    }\n\n    /* HOVERING EFFECTS */\n  }, {\n    key: \"addHoverHightlight\",\n    value: function addHoverHightlight() {\n      if (!this.hoveringBox) {\n        this.hoveringBox = document.createElement('div');\n        this.hoveringBox.classList.add('hovering-box');\n\n        //\n        this.hoveringBox.innerHTML = \"\\n                <div class=\\\"hovering-label\\\">\" + this.getClassName() + \"</div>\\n            \";\n\n        // Append it to the body\n        document.body.appendChild(this.hoveringBox);\n      }\n      this.matchingDomNode(this.hoveringBox);\n    }\n  }, {\n    key: \"removeHoverHightlight\",\n    value: function removeHoverHightlight() {\n      if (this.hoveringBox) {\n        this.hoveringBox.remove();\n      }\n      this.hoveringBox = null;\n    }\n\n    /* SELECTED EFFECTS */\n  }, {\n    key: \"addSelectedHighlight\",\n    value: function addSelectedHighlight() {\n      var _this3 = this;\n      // render selected outbound\n      if (!this.selectedBox) {\n        this.selectedBox = document.createElement('div');\n        this.selectedBox.classList.add('selected-box');\n\n        // Append it to the body\n        document.body.appendChild(this.selectedBox);\n\n        //\n        this.matchingDomNode(this.selectedBox);\n      }\n\n      // Render actions\n      if (!this.actionsBox) {\n        this.actionsBox = document.createElement('div');\n        this.actionsBox.classList.add('actions-box');\n        this.actionsBox.classList.add('d-flex');\n        this.actionsBox.classList.add('align-items-center');\n        // Append it to the body\n        document.body.appendChild(this.actionsBox);\n        // \n        this.matchingDomNode(this.actionsBox, function () {\n          if (!_this3.actionsBox) {\n            return;\n          }\n\n          // Get the bounding rect of the domNode inside the iframe\n          var domRect = _this3.domNode.getBoundingClientRect();\n\n          // Get the iframe element that contains the domNode\n          var iframe = _this3.domNode.ownerDocument.defaultView.frameElement;\n          var iframeRect = iframe.getBoundingClientRect();\n\n          // Calculate absolute position of domNode relative to main window\n          var absoluteTop = iframeRect.top + domRect.top;\n          var absoluteLeft = iframeRect.left + domRect.left;\n\n          // Set the hoveringBox's position and size\n          Object.assign(_this3.actionsBox.style, {\n            position: 'fixed',\n            top: \"\".concat(absoluteTop - 38, \"px\"),\n            left: \"\".concat(absoluteLeft, \"px\"),\n            width: \"\".concat(domRect.width, \"px\"),\n            height: \"40px\"\n          });\n        });\n\n        // Label\n        this.actionsBoxLabel = document.createElement('h5');\n        this.actionsBoxLabel.classList.add('ms-2');\n        this.actionsBoxLabel.classList.add('m-0');\n        this.actionsBoxLabel.classList.add('text-light');\n        this.actionsBoxLabel.innerText = this.getClassName();\n        this.actionsBox.appendChild(this.actionsBoxLabel);\n        this.actionsBoxInner = document.createElement('div');\n        this.actionsBoxInner.classList.add('actions-box-inner');\n        this.actionsBoxInner.classList.add('btn-group');\n        this.actionsBoxInner.classList.add('border');\n        this.actionsBoxInner.classList.add('ms-auto');\n        this.actionsBoxInner.classList.add('me-2');\n        this.actionsBoxInner = document.createElement('div');\n        this.actionsBoxInner.classList.add('actions-box-inner');\n        this.actionsBoxInner.classList.add('btn-group');\n        // this.actionsBoxInner.classList.add('border');\n        this.actionsBoxInner.classList.add('ms-auto');\n        this.actionsBoxInner.classList.add('me-1');\n        // Append it to the body\n        this.actionsBox.appendChild(this.actionsBoxInner);\n        this.getActions().forEach(function (action) {\n          var actionButton = document.createElement('button');\n          actionButton.setAttribute('class', 'element-action-item btn btn-light p-1 d-flex align-items-center');\n          actionButton.setAttribute('title', action.label);\n          actionButton.innerHTML = \"\\n                    <span class=\\\"material-symbols-rounded fs-5\\\">\" + action.icon + \"</span>\\n                \";\n          _this3.actionsBoxInner.appendChild(actionButton);\n\n          // events\n          actionButton.addEventListener('click', function () {\n            action.run();\n          });\n        });\n      }\n    }\n  }, {\n    key: \"removeSelectedHighlight\",\n    value: function removeSelectedHighlight() {\n      // remove selected outbound\n      if (this.selectedBox) {\n        this.selectedBox.remove();\n      }\n      this.selectedBox = null;\n\n      // remove selected actions\n      if (this.actionsBox) {\n        this.actionsBox.remove();\n      }\n      this.actionsBox = null;\n    }\n  }, {\n    key: \"getActions\",\n    value: function getActions() {\n      var _this4 = this;\n      var actions = [{\n        icon: 'content_copy',\n        label: 'Copy',\n        run: function run() {\n          _this4.duplicate();\n        }\n      }, {\n        icon: 'delete',\n        label: 'Remove',\n        run: function run() {\n          _this4.remove(); // @todo dependency\n        }\n      }];\n      if (this.container) {\n        actions.unshift({\n          icon: 'arrow_circle_up',\n          label: 'Select Parent',\n          run: function run() {\n            builder.selectElement(_this4.container); // @todo dependency\n          }\n        });\n      }\n      actions.push({\n        icon: 'remove_selection',\n        label: 'Unselect',\n        run: function run() {\n          builder.unselect();\n        }\n      });\n      return actions;\n    }\n\n    /* DROP INSIDE EFFECTS */\n  }, {\n    key: \"addDropBeforeHighlight\",\n    value: function addDropBeforeHighlight() {\n      // remove other effects\n      this.removeDropHighlight();\n      if (!this.dropBeforeBox) {\n        this.dropBeforeBox = document.createElement('div');\n        this.dropBeforeBox.classList.add('drop-before-box');\n\n        // Append it to the body\n        document.body.appendChild(this.dropBeforeBox);\n      }\n      this.matchingDomNode(this.dropBeforeBox);\n    }\n  }, {\n    key: \"addDropAfterHighlight\",\n    value: function addDropAfterHighlight() {\n      // remove other effects\n      this.removeDropHighlight();\n      if (!this.dropAfterBox) {\n        this.dropAfterBox = document.createElement('div');\n        this.dropAfterBox.classList.add('drop-after-box');\n\n        // Append it to the body\n        document.body.appendChild(this.dropAfterBox);\n      }\n      this.matchingDomNode(this.dropAfterBox);\n    }\n  }, {\n    key: \"addDropInsideHighlight\",\n    value: function addDropInsideHighlight() {\n      // remove other effects\n      this.removeDropHighlight();\n      if (!this.dropInsideBox) {\n        this.dropInsideBox = document.createElement('div');\n        this.dropInsideBox.classList.add('drop-inside-box');\n\n        // Append it to the body\n        document.body.appendChild(this.dropInsideBox);\n      }\n      this.matchingDomNode(this.dropInsideBox);\n    }\n  }, {\n    key: \"removeDropHighlight\",\n    value: function removeDropHighlight() {\n      // remove drop inside\n      if (this.dropInsideBox) {\n        this.dropInsideBox.remove();\n      }\n      this.dropInsideBox = null;\n\n      // remove drop before\n      if (this.dropBeforeBox) {\n        this.dropBeforeBox.remove();\n      }\n      this.dropBeforeBox = null;\n\n      // remove drop after\n      if (this.dropAfterBox) {\n        this.dropAfterBox.remove();\n      }\n      this.dropAfterBox = null;\n    }\n  }, {\n    key: \"addContainerHightlight\",\n    value: function addContainerHightlight() {\n      if (!this.containerBox) {\n        this.containerBox = document.createElement('div');\n        this.containerBox.classList.add('container-box');\n\n        // //\n        // this.containerBox.innerHTML = `\n        //     <div class=\"container-label\">`+this.getClassName()+`</div>\n        // `;\n\n        // Append it to the body\n        document.body.appendChild(this.containerBox);\n      }\n      this.matchingDomNode(this.containerBox);\n    }\n  }, {\n    key: \"removeContainerHightlight\",\n    value: function removeContainerHightlight() {\n      if (this.containerBox) {\n        this.containerBox.remove();\n      }\n      this.containerBox = null;\n    }\n  }, {\n    key: \"addContainerDropHightlight\",\n    value: function addContainerDropHightlight() {\n      if (!this.containerDropBox) {\n        this.containerDropBox = document.createElement('div');\n        this.containerDropBox.classList.add('container-drop-box');\n\n        // //\n        // this.containerDropBox.innerHTML = `\n        //     <div class=\"container-label\">`+this.getClassName()+`</div>\n        // `;\n\n        // Append it to the body\n        document.body.appendChild(this.containerDropBox);\n      }\n      this.matchingDomNode(this.containerDropBox);\n    }\n  }, {\n    key: \"removeContainerDropHightlight\",\n    value: function removeContainerDropHightlight() {\n      if (this.containerDropBox) {\n        this.containerDropBox.remove();\n      }\n      this.containerDropBox = null;\n    }\n  }, {\n    key: \"checkIfThePositionIsBefore\",\n    value: function checkIfThePositionIsBefore(clientX, clientY) {\n      var hoveredBlock = this.domNode;\n      var hoveredBlockRect = hoveredBlock.getBoundingClientRect();\n      return clientY < hoveredBlockRect.top + hoveredBlockRect.height / 2;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BaseElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/BaseElement.js?");

/***/ }),

/***/ "./src/includes/BaseWidget.js":
/*!************************************!*\
  !*** ./src/includes/BaseWidget.js ***!
  \************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar BaseWidget = /*#__PURE__*/function () {\n  function BaseWidget() {\n    _classCallCheck(this, BaseWidget);\n    this.domNode = null;\n\n    // Default UI box\n    var widgetDiv = document.createElement('div');\n    widgetDiv.className = 'widget-item';\n    var iconDiv = document.createElement('div');\n    iconDiv.innerHTML = '<span class=\"material-symbols-rounded widget-icon\">' + this.getIcon() + '</span>';\n    iconDiv.className = 'widget-icon-box';\n    widgetDiv.appendChild(iconDiv);\n    var labelDiv = document.createElement('div');\n    labelDiv.className = 'widget-label';\n    labelDiv.textContent = this.getName();\n    widgetDiv.appendChild(labelDiv);\n    this.domNode = widgetDiv;\n  }\n  return _createClass(BaseWidget, [{\n    key: \"getDragAnchor\",\n    value: function getDragAnchor() {\n      return this.domNode;\n    }\n  }, {\n    key: \"removeAfterDrop\",\n    value: function removeAfterDrop() {\n      return false;\n    }\n  }, {\n    key: \"canDropOn\",\n    value: function canDropOn(element) {\n      var can = element.isDroppable();\n\n      // check if there Grid inside this block\n      this.getElements().forEach(function (e) {\n        if (e.getClassName() === 'GridElement' && (element.container.getClassName() === 'CellElement' || element.getClassName() === 'CellElement')) {\n          // if there is a GridElement, then we can drop on it\n          console.warn('This draggable item contains a GridElement. Can drop inside CellElement.');\n          can = false;\n        }\n      });\n\n      // Check if the element can be dropped on this element\n      return can;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BaseWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/BaseWidget.js?");

/***/ }),

/***/ "./src/includes/BlockElement.js":
/*!**************************************!*\
  !*** ./src/includes/BlockElement.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar BlockElement = /*#__PURE__*/function (_BaseElement) {\n  function BlockElement(container) {\n    var _this;\n    _classCallCheck(this, BlockElement);\n    _this = _callSuper(this, BlockElement); // Call the parent class constructor\n    _this.container = container;\n    _this.elements = [];\n    _this.domNode = null;\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat'\n    };\n    _this.template = 'Block';\n    return _this;\n  }\n  _inherits(BlockElement, _BaseElement);\n  return _createClass(BlockElement, [{\n    key: \"isDroppable\",\n    value: function isDroppable() {\n      return true;\n    }\n  }, {\n    key: \"canDropAfter\",\n    value: function canDropAfter() {\n      return true;\n    }\n  }, {\n    key: \"canDropBefore\",\n    value: function canDropBefore() {\n      return true;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', this.getClassName());\n      }\n\n      // render\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        elements: this.elements.map(function (element) {\n          return '<div element-anchor=\"' + element.id + '\">' + element.id + '</div>';\n        })\n      });\n\n      // render elements inside \n      this.elements.forEach(function (element) {\n        var anchor = _this2.domNode.querySelector('[element-anchor=\"' + element.id + '\"]');\n\n        // render block\n        var domNode = element.render();\n\n        // Dome append child\n        anchor.parentNode.insertBefore(domNode, anchor);\n\n        //\n        anchor.remove();\n\n        //\n        builder.uiManager.addElement(element);\n      });\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      // Return the DOM node\n      return this.domNode;\n    }\n  }, {\n    key: \"append\",\n    value: function append(element) {\n      // private\n      // set element container\n      element.container = this;\n      this.elements.push(element);\n    }\n  }, {\n    key: \"appendElements\",\n    value: function appendElements(elements) {\n      var _this3 = this;\n      elements.forEach(function (element) {\n        _this3.append(element);\n      });\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }, {\n    key: \"removeElement\",\n    value: function removeElement(element) {\n      var _this4 = this;\n      this.elements.forEach(function (currentElement) {\n        // if element is one of block element\n        if (currentElement == element) {\n          _this4.elements = _this4.elements.filter(function (el) {\n            return el !== element;\n          });\n\n          // \n          _this4.render();\n\n          // also remove block if block is empty\n          if (!_this4.elements.length) {\n            console.log('Block is empty, removing it');\n            console.log(_this4);\n            console.log('Container:');\n            console.log(_this4.container);\n            _this4.remove();\n          }\n        }\n      });\n    }\n  }, {\n    key: \"insertElementAfter\",\n    value: function insertElementAfter(element, newElement) {\n      var _this5 = this;\n      // set element container\n      newElement.container = this;\n      this.elements.forEach(function (currentElement, i) {\n        // if element is one of the block's elements\n        if (currentElement === element) {\n          _this5.elements.splice(i + 1, 0, newElement);\n          _this5.render();\n          return;\n        }\n      });\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: this.getClassName(),\n        container: this.container,\n        elements: this.elements.map(function (element) {\n          return element.getData();\n        })\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this6 = this;\n      // Block does not have controls\n      return [new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this6.setFormat('background_color', values.color);\n          _this6.setFormat('background_image', values.image);\n          _this6.setFormat('background_position', values.position);\n          _this6.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this6.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this6.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"getDragAnchor\",\n    value: function getDragAnchor() {\n      return this.domNode;\n    }\n  }, {\n    key: \"removeAfterDrop\",\n    value: function removeAfterDrop() {\n      return true;\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new this(data.container);\n      e.appendElements(data.elements.map(_ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement));\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (BlockElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/BlockElement.js?");

/***/ }),

/***/ "./src/includes/Builder.js":
/*!*********************************!*\
  !*** ./src/includes/Builder.js ***!
  \*********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _PageElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PageElement.js */ \"./src/includes/PageElement.js\");\n/* harmony import */ var _UIManager_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./UIManager.js */ \"./src/includes/UIManager.js\");\n/* harmony import */ var _SettingsTabManager_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SettingsTabManager.js */ \"./src/includes/SettingsTabManager.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }\nfunction _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _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 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 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 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; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\nvar Builder = /*#__PURE__*/function () {\n  function Builder(options) {\n    var _options$carousel, _options$carousel2;\n    _classCallCheck(this, Builder);\n    // reuired options\n    this.mainContainer = window.document.querySelector(options.mainContainer);\n    this.settingsContainer = window.document.querySelector(options.settingsContainer);\n    this.widgetsContainer = window.document.querySelector(options.widgetsContainer);\n    this.assetUploadHandler = options.assetUploadHandler;\n    this.aiHandler = options.aiHandler || null;\n\n    // CAROUSEL options\n    this.carousel = (_options$carousel = options.carousel) !== null && _options$carousel !== void 0 ? _options$carousel : false;\n    this.carouselSettingsContainer = window.document.querySelector(options.carouselSettingsContainer) || null;\n    this.carouselElementControlsContainer = window.document.querySelector(options.carouselElementControlsContainer) || null;\n\n    //\n    this.themeUrl = null;\n\n    //\n    this.themConfigs = null;\n    this.templates = {};\n\n    // helpers\n    this.iframe = null;\n\n    // PageElement\n    if (this.carousel) {\n      // If carousel is enabled, use CarouselPageElement\n      this.pageElement = new CarouselPageElement(this);\n    } else {\n      // If carousel is not enabled, use regular PageElement\n      this.pageElement = new _PageElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this);\n    }\n\n    // Initialize parameters\n    this.mode = 'preview';\n    this.selectedElement = null;\n\n    // Initialize UI Manager\n    this.uiManager = new _UIManager_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this);\n\n    //\n    this.carousel = (_options$carousel2 = options.carousel) !== null && _options$carousel2 !== void 0 ? _options$carousel2 : false;\n  }\n  return _createClass(Builder, [{\n    key: \"load\",\n    value: function () {\n      var _load = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(data, themeUrl, callback) {\n        return _regeneratorRuntime().wrap(function _callee$(_context) {\n          while (1) switch (_context.prev = _context.next) {\n            case 0:\n              _context.next = 2;\n              return this.loadThemeConfigs(themeUrl);\n            case 2:\n              _context.next = 4;\n              return this.loadTemplates(themeUrl);\n            case 4:\n              // widgets box\n              console.log(this.widgetsContainer);\n              this.widgetsBox = new WidgetsBox(this.widgetsContainer);\n\n              // load widgets js code\n              _context.next = 8;\n              return this.loadWidgetsJs(themeUrl);\n            case 8:\n              _context.next = 10;\n              return this.initIframe();\n            case 10:\n              _context.next = 12;\n              return this.render();\n            case 12:\n              _context.next = 14;\n              return this.loadDebugCss();\n            case 14:\n              // apply mode: normal or for debugging\n              this.applyMode();\n\n              //  initialize UI manager: for drag and drop, hovering, etc. @todo: clean it up later\n              this.uiManager.init();\n\n              // \n              this.parse(data);\n\n              // render\n              this.render();\n\n              //\n              if (this.carousel) {\n                this.mainContainer.classList.add('builder-carousel');\n              }\n\n              // callback after initialization\n              if (callback) {\n                callback();\n              }\n              if (this.carousel) {\n                // render carousel controls whene loaded\n                this.renderCarouselControls();\n              }\n            case 21:\n            case \"end\":\n              return _context.stop();\n          }\n        }, _callee, this);\n      }));\n      function load(_x, _x2, _x3) {\n        return _load.apply(this, arguments);\n      }\n      return load;\n    }()\n  }, {\n    key: \"loadThemeConfigs\",\n    value: function () {\n      var _loadThemeConfigs = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(themeUrl) {\n        var themeConfigPath, response;\n        return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n          while (1) switch (_context2.prev = _context2.next) {\n            case 0:\n              themeConfigPath = themeUrl + '/index.json';\n              _context2.next = 3;\n              return fetch(themeConfigPath);\n            case 3:\n              response = _context2.sent;\n              if (response.ok) {\n                _context2.next = 7;\n                break;\n              }\n              alert(\"Failed to load theme configs from \".concat(themeConfigPath));\n              throw new Error(\"Failed to load theme configs from \".concat(themeConfigPath));\n            case 7:\n              _context2.next = 9;\n              return response.json();\n            case 9:\n              this.themConfigs = _context2.sent;\n              // set theme url\n              this.themeUrl = themeUrl;\n            case 11:\n            case \"end\":\n              return _context2.stop();\n          }\n        }, _callee2, this);\n      }));\n      function loadThemeConfigs(_x4) {\n        return _loadThemeConfigs.apply(this, arguments);\n      }\n      return loadThemeConfigs;\n    }()\n  }, {\n    key: \"loadTemplates\",\n    value: function () {\n      var _loadTemplates = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(themeUrl) {\n        var _this = this;\n        return _regeneratorRuntime().wrap(function _callee4$(_context4) {\n          while (1) switch (_context4.prev = _context4.next) {\n            case 0:\n              _context4.next = 2;\n              return Promise.all(this.themConfigs.templates.map(/*#__PURE__*/function () {\n                var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3(templateName) {\n                  var html;\n                  return _regeneratorRuntime().wrap(function _callee3$(_context3) {\n                    while (1) switch (_context3.prev = _context3.next) {\n                      case 0:\n                        _context3.next = 2;\n                        return _this.loadHTML(\"\".concat(themeUrl, \"/\").concat(templateName, \".template.html\"));\n                      case 2:\n                        html = _context3.sent;\n                        _this.templates[templateName] = html;\n                      case 4:\n                      case \"end\":\n                        return _context3.stop();\n                    }\n                  }, _callee3);\n                }));\n                return function (_x6) {\n                  return _ref.apply(this, arguments);\n                };\n              }()));\n            case 2:\n            case \"end\":\n              return _context4.stop();\n          }\n        }, _callee4, this);\n      }));\n      function loadTemplates(_x5) {\n        return _loadTemplates.apply(this, arguments);\n      }\n      return loadTemplates;\n    }()\n  }, {\n    key: \"getTemplate\",\n    value: function getTemplate(templateName) {\n      if (!this.templates[templateName]) {\n        alert(\"Template \\\"\".concat(templateName, \"\\\" not found\"));\n        throw new Error(\"Template \\\"\".concat(templateName, \"\\\" not found\"));\n      }\n      return this.templates[templateName];\n    }\n  }, {\n    key: \"loadHTML\",\n    value: function () {\n      var _loadHTML = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(filePath) {\n        var response;\n        return _regeneratorRuntime().wrap(function _callee5$(_context5) {\n          while (1) switch (_context5.prev = _context5.next) {\n            case 0:\n              _context5.next = 2;\n              return fetch(filePath);\n            case 2:\n              response = _context5.sent;\n              if (response.ok) {\n                _context5.next = 6;\n                break;\n              }\n              alert(\"Failed to load HTML template from \".concat(filePath));\n              throw new Error(\"Failed to load HTML template from \".concat(filePath));\n            case 6:\n              _context5.next = 8;\n              return response.text();\n            case 8:\n              return _context5.abrupt(\"return\", _context5.sent);\n            case 9:\n            case \"end\":\n              return _context5.stop();\n          }\n        }, _callee5);\n      }));\n      function loadHTML(_x7) {\n        return _loadHTML.apply(this, arguments);\n      }\n      return loadHTML;\n    }()\n  }, {\n    key: \"loadWidgetsJs\",\n    value: function () {\n      var _loadWidgetsJs = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6(themeUrl) {\n        var themeWidgetsJsPath;\n        return _regeneratorRuntime().wrap(function _callee6$(_context6) {\n          while (1) switch (_context6.prev = _context6.next) {\n            case 0:\n              themeWidgetsJsPath = \"\".concat(themeUrl, \"/widgets/index.js\");\n              return _context6.abrupt(\"return\", new Promise(function (resolve, reject) {\n                var script = document.createElement('script');\n                script.src = themeWidgetsJsPath;\n                script.type = 'module';\n                script.onload = function () {\n                  console.log('Script loaded:', themeWidgetsJsPath);\n                  resolve();\n                };\n                script.onerror = function () {\n                  alert(\"Failed to load widgets from \".concat(themeWidgetsJsPath));\n                  reject(new Error(\"Failed to load script: \".concat(themeWidgetsJsPath)));\n                };\n                document.head.appendChild(script);\n              }));\n            case 2:\n            case \"end\":\n              return _context6.stop();\n          }\n        }, _callee6);\n      }));\n      function loadWidgetsJs(_x8) {\n        return _loadWidgetsJs.apply(this, arguments);\n      }\n      return loadWidgetsJs;\n    }()\n  }, {\n    key: \"initIframe\",\n    value: function () {\n      var _initIframe = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {\n        return _regeneratorRuntime().wrap(function _callee7$(_context7) {\n          while (1) switch (_context7.prev = _context7.next) {\n            case 0:\n              // Create an iframe and append it to the body\n              this.iframe = document.createElement('iframe');\n              this.iframe.style.width = '100%';\n              this.iframe.style.border = 'none';\n              this.iframe.style.backgroundColor = '#FFFFFF';\n              this.mainContainer.appendChild(this.iframe);\n\n              // Access the iframe document\n              this.iframeDoc = this.iframe.contentDocument || this.iframe.contentWindow.document;\n            case 6:\n            case \"end\":\n              return _context7.stop();\n          }\n        }, _callee7, this);\n      }));\n      function initIframe() {\n        return _initIframe.apply(this, arguments);\n      }\n      return initIframe;\n    }()\n  }, {\n    key: \"render\",\n    value: function () {\n      var _render = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {\n        return _regeneratorRuntime().wrap(function _callee8$(_context8) {\n          while (1) switch (_context8.prev = _context8.next) {\n            case 0:\n              // Load and inject the PageElement theme\n              this.pageElement.render();\n\n              // \n              this.uiManager.addElement(this.pageElement);\n            case 2:\n            case \"end\":\n              return _context8.stop();\n          }\n        }, _callee8, this);\n      }));\n      function render() {\n        return _render.apply(this, arguments);\n      }\n      return render;\n    }()\n  }, {\n    key: \"loadCSS\",\n    value: function () {\n      var _loadCSS = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9(cssPath) {\n        var response;\n        return _regeneratorRuntime().wrap(function _callee9$(_context9) {\n          while (1) switch (_context9.prev = _context9.next) {\n            case 0:\n              _context9.next = 2;\n              return fetch(cssPath);\n            case 2:\n              response = _context9.sent;\n              if (response.ok) {\n                _context9.next = 5;\n                break;\n              }\n              throw new Error(\"Failed to load CSS from \".concat(cssPath));\n            case 5:\n              _context9.next = 7;\n              return response.text();\n            case 7:\n              return _context9.abrupt(\"return\", _context9.sent);\n            case 8:\n            case \"end\":\n              return _context9.stop();\n          }\n        }, _callee9);\n      }));\n      function loadCSS(_x9) {\n        return _loadCSS.apply(this, arguments);\n      }\n      return loadCSS;\n    }()\n  }, {\n    key: \"insertElements\",\n    value: function insertElements(elements) {\n      this.pageElement.appendElements(elements);\n      this.pageElement.render();\n    }\n  }, {\n    key: \"clear\",\n    value: function clear() {\n      // clear page\n      this.pageElement.clear();\n    }\n  }, {\n    key: \"parse\",\n    value: function parse(data) {\n      if (this.themConfigs.name !== data.theme) {\n        alert(\"Theme mismatch: expected \" + this.themConfigs.name + \", but got \" + data.theme + \" from parsing data\");\n        console.error(\"Theme mismatch: expected \" + this.themConfigs.name + \", but got \" + data.theme + \" from parsing data: \" + JSON.stringify(data));\n        throw new Error(\"Theme mismatch: expected \" + this.themConfigs.name + \", but got \" + data.theme + \" from parsing data\");\n      }\n      this.pageElement.parse(data);\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return _objectSpread(_objectSpread({}, {\n        theme: this.themConfigs.name\n      }), this.pageElement.getData());\n    }\n  }, {\n    key: \"getHtml\",\n    value: function getHtml() {\n      // Only return the content inside <html> (not including the <html> tag itself)\n      var htmlDoc = this.iframe.contentDocument.documentElement;\n      // Remove builder-helper elements\n      htmlDoc.querySelectorAll('[data-control=\"builder-helper\"]').forEach(function (el) {\n        return el.remove();\n      });\n\n      // remove all contenteditable attributes\n      htmlDoc.querySelectorAll('[contenteditable]').forEach(function (el) {\n        return el.removeAttribute('contenteditable');\n      });\n\n      // Return only the inner HTML of <html>\n      return htmlDoc.outerHTML;\n    }\n  }, {\n    key: \"getSelectedElement\",\n    value: function getSelectedElement() {\n      return this.selectedElement;\n    }\n  }, {\n    key: \"setSelectedElement\",\n    value: function setSelectedElement(element) {\n      this.selectedElement = element;\n    }\n  }, {\n    key: \"selectElement\",\n    value: function selectElement(element) {\n      // unselect\n      this.unselect();\n\n      // set element\n      this.setSelectedElement(element);\n      if (this.carousel) {\n        // render settings box\n        this.renderCarouselElementControls(element);\n      } else {\n        // render settings box\n        this.renderElementControls(element);\n      }\n\n      // Add selected class\n      element.addSelectedHighlight();\n\n      // @todo depenency: open settings tab\n      window.sidebarTabManager.openTab(document.querySelector('[data-tab=\"controls\"]'));\n      if (window.smenu) {\n        window.smenu.openTab(document.querySelector('[data-smenu=\"design\"]'));\n      }\n    }\n  }, {\n    key: \"unselect\",\n    value: function unselect() {\n      if (!this.getSelectedElement()) {\n        return; // no selected > do nothing\n      }\n\n      // remove selected effect\n      this.getSelectedElement().removeSelectedHighlight();\n\n      // @todo depenency: open widgets tab\n      window.sidebarTabManager.openTab(document.querySelector('[data-tab=\"widgets\"]'));\n      if (window.smenu) {\n        window.smenu.openTab(document.querySelector('[data-smenu=\"design\"]'));\n      }\n    }\n  }, {\n    key: \"getMode\",\n    value: function getMode() {\n      return this.mode;\n    }\n  }, {\n    key: \"setMode\",\n    value: function setMode(mode) {\n      this.mode = mode;\n      this.applyMode();\n    }\n  }, {\n    key: \"applyMode\",\n    value: function applyMode() {\n      if (this.getMode() === 'design') {\n        this.iframe.contentDocument.body.classList.add('builder-mode-design');\n      } else {\n        this.iframe.contentDocument.body.classList.remove('builder-mode-design');\n      }\n    }\n  }, {\n    key: \"removeElement\",\n    value: function removeElement(element) {\n      // unselect if the element is selected\n      if (this.getSelectedElement() == element) {\n        this.unselect();\n      }\n\n      // do remove\n      this.pageElement.removeElement(element);\n    }\n  }, {\n    key: \"duplicateElement\",\n    value: function duplicateElement(element) {\n      // do remove\n      this.pageElement.duplicateElement(element);\n    }\n  }, {\n    key: \"renderElementControls\",\n    value: function renderElementControls(element) {\n      var container = this.settingsContainer;\n\n      // \n      container.innerHTML = \"\\n            <div class=\\\"settings-container styles-box shadow-sm rounded-0 bg-white\\\">\\n                <div class=\\\"settings-header d-flex align-items-center py-2 px-3 mb-2\\\">\\n                    <h6 class=\\\"text-start me-auto mb-0 fw-bold\\\">\\n                        \" + element.getClassName() + \"\\n                    </h6>\\n                    <div data-control=\\\"actions\\\" class=\\\"d-flex btn-group\\\">\\n                    </div>\\n                </div>\\n                    \\n                <div data-control=\\\"settings-controls-container\\\">\\n                </div>\\n            </div>\\n        \";\n\n      //\n      var controls = element.getControls();\n\n      // settings header\n      var head = document.createElement('div');\n      head.className = 'settings-header mx-3';\n      head.innerHTML = \"\\n            <div class=\\\"d-flex align-items-center justify-content-between\\\">\\n                <span class=\\\"fw-semibold small\\\">CONFIGURATIONS</span>\\n                <span class=\\\"d-block mx-3 w-100\\\" style=\\\"height:1px;background-color:rgb(206, 212, 218);\\\"></span>\\n                <span class=\\\"d-flex align-items-center\\\"><span class=\\\"material-symbols-rounded\\\">keyboard_arrow_down</span></span>\\n            </div>\\n        \";\n      container.querySelector('[data-control=\"settings-controls-container\"]').appendChild(head);\n\n      // render element controls\n      controls.forEach(function (control) {\n        var controlObj = control.domNode;\n        container.querySelector('[data-control=\"settings-controls-container\"]').appendChild(controlObj);\n\n        //\n        if (control.afterRender) {\n          control.afterRender();\n        }\n      });\n\n      // render head actions\n      element.getActions().forEach(function (action) {\n        var actionButton = document.createElement('button');\n        actionButton.setAttribute('class', 'element-action-item btn btn-light p-1 d-flex align-items-center');\n        actionButton.setAttribute('title', action.label);\n        actionButton.innerHTML = \"\\n                <span class=\\\"material-symbols-rounded\\\">\" + action.icon + \"</span>\\n            \";\n        container.querySelector('[data-control=\"actions\"]').appendChild(actionButton);\n\n        // events\n        actionButton.addEventListener('click', function () {\n          action.run();\n        });\n      });\n    }\n  }, {\n    key: \"loadDebugCss\",\n    value: function loadDebugCss() {\n      var cssContent = \"\\n            [builder-element] {\\n                cursor: pointer;\\n                position: relative;\\n            }\\n\\n            [builder-element]::before {\\n                font-size: 10px!important;\\n            }\\n\\n            [builder-element=\\\"PageElement\\\"] {\\n                min-height: 50px;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"PageElement\\\"] {\\n                display: flex;\\n                flex-direction: column;\\n                gap: 10px;\\n                padding: 30px;\\n                background-color: #f0f0f0;\\n                position: relative;\\n            }\\n\\n            .builder-mode-design [builder-element]::before {\\n                font-family: monospace;\\n                font-size: 90%;\\n                position: absolute;\\n                top: 0;\\n                right: 0;\\n                font-weight: bold;\\n                color: #333;\\n                border: solid 1px #ddd;\\n                padding: 2px 5px;\\n                border-top: none;\\n                border-right: none;\\n\\n                pointer-events: none;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"PageElement\\\"]::before {\\n                content: \\\"PageElement\\\";\\n                pointer-events: none;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"BlockElement\\\"] {\\n                display: flex;\\n                flex-direction: column;\\n                gap: 10px;\\n                padding: 15px;\\n                background-color: #e0e0e0;\\n                border: 1px solid #ccc;\\n                margin-bottom: 10px;\\n                position: relative;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"BlockElement\\\"]::before {\\n                content: \\\"BlockElement\\\";\\n                border-color: #ccc;\\n\\n                pointer-events: none;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"H1Element\\\"] {\\n                padding: 10px;\\n                background-color: #cfdce4;\\n                border: 1px solid #bbb;\\n                position: relative;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"H1Element\\\"]::before {\\n                content: \\\"H1Element\\\";\\n                border-color: #bbb;\\n                font-size: initial;\\n\\n                pointer-events: none;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"PElement\\\"] {\\n                padding: 10px;\\n                background-color: #cfdce4;\\n                border: 1px solid #bbb;\\n                position: relative;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"PElement\\\"]::before {\\n                content: \\\"PElement\\\";\\n                border-color: #bbb;\\n\\n                pointer-events: none;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"MenuElement\\\"] {\\n                padding: 10px;\\n                background-color: #cfdce4;\\n                border: 1px solid #bbb;\\n                position: relative;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"MenuElement\\\"]::before {\\n                content: \\\"MenuElement\\\";\\n                border-color: #bbb;\\n\\n                pointer-events: none;\\n            }\\n            .builder-mode-design [builder-element=\\\"GridElement\\\"] {\\n                gap: 10px;\\n                padding: 10px;\\n                background-color: #ccc;\\n                border: 1px solid #aaa;\\n                margin: 10px 0;\\n                position: relative;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"GridElement\\\"]::before {\\n                content: \\\"GridElement\\\";\\n                border-color: #bbb;\\n\\n                pointer-events: none;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"CellElement\\\"] {\\n                padding: 10px;\\n                background-color: #e0e0e0;\\n                border: 1px solid #aaa;\\n                margin: 10px 0;\\n                position: relative;\\n            }\\n\\n            .builder-mode-design [builder-element=\\\"CellElement\\\"]::before {\\n                content: \\\"CellElement\\\";\\n                border-color: #ccc;\\n\\n                pointer-events: none;\\n            }\\n\\n            [builder-element=\\\"BlockElement\\\"] {\\n                position: relative;\\n            }\\n\\n            /* inside iframe's document */\\n            ::-webkit-scrollbar {\\n                width: 7px;\\n                height: 7px;\\n            }\\n\\n            ::-webkit-scrollbar-thumb {\\n                background: rgba(0, 0, 0, 0.3);\\n                border-radius: 4px;\\n            }\\n\\n            ::-webkit-scrollbar-track {\\n                background: transparent;\\n            }\\n\\n            [contenteditable] {\\n                outline: none!important;\\n            }\\n\\n            [contenteditable]:focus, [contenteditable]::focus-visible {\\n                outline: none!important;\\n            }\\n\\n            input, select {\\n                pointer-events: none;\\n            }\\n\\n            [builder-element=\\\"CarouselSlideElement\\\"],  [builder-element=\\\"CarouselSlideElement\\\"]\\n            {\\n                width: 600px;\\n                height: 100%;\\n                border-right: 1px solid #ddd;\\n            }\\n\\n            [builder-element=\\\"CarouselPageElement\\\"] {\\n                display: flex;\\n            }\\n        \";\n      var style = this.iframeDoc.createElement('style');\n      style.textContent = cssContent;\n      style.setAttribute('data-control', 'builder-helper');\n      this.iframeDoc.head.appendChild(style);\n    }\n  }, {\n    key: \"renderTemplate\",\n    value: function renderTemplate(template) {\n      var _this2 = this;\n      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n      var html = this.getTemplate(template);\n\n      // EJS render\n      html = ejs.render(html, options);\n\n      // Replace src=\"...\"\n      html = html.replace(/src=[\"']([^\"']+)[\"']/gi, function (match, url) {\n        return \"src=\\\"\".concat(_this2.getFullUrl(url), \"\\\"\");\n      });\n\n      // Replace href=\"...\"\n      html = html.replace(/href=[\"']([^\"']+)[\"']/gi, function (match, url) {\n        return \"href=\\\"\".concat(_this2.getFullUrl(url), \"\\\"\");\n      });\n\n      // Replace background:url(...)\n      html = html.replace(/background\\s*:\\s*url\\((['\"]?)([^\"')]+)\\1\\)/gi, function (match, quote, url) {\n        // If no quote was found, default to double quotes\n        var finalQuote = quote || '\"';\n        return \"background:url(\".concat(finalQuote).concat(_this2.getFullUrl(url)).concat(finalQuote, \")\");\n      });\n\n      // Replace background-image:url(...)\n      html = html.replace(/background-image\\s*:\\s*url\\((['\"]?)([^\"')]+)\\1\\)/gi, function (match, quote, url) {\n        // If no quote was found, default to double quotes\n        var finalQuote = quote || '\"';\n        return \"background-image:url(\".concat(finalQuote).concat(_this2.getFullUrl(url)).concat(finalQuote, \")\");\n      });\n      return html;\n    }\n  }, {\n    key: \"getFullUrl\",\n    value: function getFullUrl(url) {\n      if (!/^https?:\\/\\//i.test(url) && !url.startsWith('/') && !url.startsWith('[[') && !url.startsWith('[') && !url.startsWith('{') && !url.startsWith('data:image')) {\n        return this.themeUrl + '/' + url;\n      } else {\n        return url;\n      }\n    }\n  }, {\n    key: \"renderCarouselControls\",\n    value: function renderCarouselControls() {\n      var container = this.carouselSettingsContainer;\n      var element = this.pageElement;\n\n      // \n      container.innerHTML = \"\\n            <div data-control=\\\"settings-controls-container\\\">\\n            </div>\\n        \";\n\n      // Get element controls\n      var controls = element.getControls();\n\n      // render element controls\n      controls.forEach(function (control) {\n        var controlObj = control.domNode;\n        container.querySelector('[data-control=\"settings-controls-container\"]').appendChild(controlObj);\n\n        // \n        if (control.afterRender) {\n          control.afterRender();\n        }\n      });\n\n      // render head actions\n      element.getActions().forEach(function (action) {\n        var actionButton = document.createElement('button');\n        actionButton.setAttribute('class', 'element-action-item btn btn-light p-1 d-flex align-items-center');\n        actionButton.setAttribute('title', action.label);\n        actionButton.innerHTML = \"\\n                <span class=\\\"material-symbols-rounded\\\">\" + action.icon + \"</span>\\n            \";\n        container.querySelector('[data-control=\"actions\"]').appendChild(actionButton);\n\n        // events\n        actionButton.addEventListener('click', function () {\n          action.run();\n        });\n      });\n    }\n  }, {\n    key: \"renderCarouselElementControls\",\n    value: function renderCarouselElementControls(element) {\n      var container = this.carouselElementControlsContainer;\n\n      // \n      container.innerHTML = \"\\n            <div data-control=\\\"carousel-element-controls-container\\\">\\n            </div>\\n        \";\n\n      // Get element controls\n      var controls = element.getControls();\n\n      // render element controls\n      controls.forEach(function (control) {\n        var controlObj = control.domNode;\n        container.querySelector('[data-control=\"carousel-element-controls-container\"]').appendChild(controlObj);\n\n        // \n        if (control.afterRender) {\n          control.afterRender();\n        }\n      });\n\n      // // render head actions\n      // element.getActions().forEach(action => {\n      //     var actionButton = document.createElement('button');\n      //     actionButton.setAttribute('class', 'element-action-item btn btn-light p-1 d-flex align-items-center');\n      //     actionButton.setAttribute('title', action.label);\n      //     actionButton.innerHTML = `\n      //         <span class=\"material-symbols-rounded\">`+action.icon+`</span>\n      //     `;\n\n      //     container.querySelector('[data-control=\"actions\"]').appendChild(actionButton);\n\n      //     // events\n      //     actionButton.addEventListener('click', () => {\n      //         action.run();\n      //     });\n      // });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Builder);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/Builder.js?");

/***/ }),

/***/ "./src/includes/ButtonElement.js":
/*!***************************************!*\
  !*** ./src/includes/ButtonElement.js ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AlignControl.js */ \"./src/includes/AlignControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar ButtonElement = /*#__PURE__*/function (_BaseElement) {\n  function ButtonElement(template, text) {\n    var _this;\n    var url = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '#';\n    _classCallCheck(this, ButtonElement);\n    _this = _callSuper(this, ButtonElement);\n    _this.template = template;\n    _this.text = text;\n    _this.url = url || '#';\n    _this.domNode = null;\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n\n    // formats\n    _this.formats = {\n      font_family: \"inherit\",\n      font_style: null,\n      font_weight: null,\n      font_size: null,\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      text_color: null,\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      margin_top: 0,\n      margin_right: 0,\n      margin_bottom: 0,\n      margin_left: 0,\n      border_radius: 0,\n      border_color: null,\n      border_size: 0,\n      align: 'center'\n    };\n    return _this;\n  }\n  _inherits(ButtonElement, _BaseElement);\n  return _createClass(ButtonElement, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'ButtonElement');\n      }\n\n      // formats\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        url: this.url,\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats) // <-- add this\n      });\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'ButtonElement',\n        template: this.template,\n        text: this.text,\n        url: this.url,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // TextControl\n      new TextControl(\n      // labelText\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }),\n      // TextControl\n      new TextControl(\n      // label\n      'URL',\n      // value\n      this.url,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.url = text || '#';\n          _this3.render();\n        }\n      }),\n      // Font faminly\n      new FontFamilyControl(\n      // label\n      'Font family',\n      // value\n      this.getFormat('font_family'),\n      // callback\n      {\n        // set font family\n        setFontFamily: function setFontFamily(font_family) {\n          _this3.setFormat('font_family', font_family);\n          _this3.render();\n        }\n      }),\n      // Font weight\n      new FontWeightControl(\n      // label\n      'Font weight',\n      // value\n      this.getFormat('font_weight'),\n      // callback\n      {\n        // set font weight\n        setFontWeight: function setFontWeight(font_weight) {\n          _this3.setFormat('font_weight', font_weight);\n          _this3.render();\n        }\n      }),\n      // Text alignment\n      new _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('Alignment', this.getFormat('align', 'center'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('align', value);\n          _this3.render();\n        }\n      }),\n      // Text color\n      new ColorPickerControl(\n      // label\n      'Text color',\n      // value\n      this.getFormat('text_color'),\n      // callback\n      {\n        // set text color\n        setColor: function setColor(text_color) {\n          _this3.setFormat('text_color', text_color);\n          _this3.render();\n        }\n      }), new ColorPickerControl(\n      // label\n      'Border color',\n      // value\n      this.getFormat('border_color'),\n      // callback\n      {\n        // set text color\n        setColor: function setColor(border_color) {\n          _this3.setFormat('border_color', border_color);\n          _this3.render();\n        }\n      }),\n      // border Size\n      new RangeControl(\n      //label\n      'Border Size',\n      // min\n      0,\n      // max\n      10,\n      // unit\n      'px',\n      // step\n      1,\n      // callback\n      function (value) {\n        _this3.setFormat('border_size', value);\n        _this3.render();\n      }),\n      // Correct: pass a function as the last argument\n      new RangeControl('Border Radius', 0, 100, 'px', 2, function (value) {\n        _this3.setFormat('border_radius', value);\n        _this3.render();\n      }),\n      // Padding\n      new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n\n    // Add this method to ButtonElement\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        font_size: function font_size(v) {\n          return v ? \"font-size: \".concat(v, \"px !important;\") : '';\n        },\n        font_family: function font_family(v) {\n          return v ? \"font-family: \".concat(v, \" !important;\") : '';\n        },\n        font_style: function font_style(v) {\n          return v ? \"font-style: \".concat(v, \" !important;\") : '';\n        },\n        font_weight: function font_weight(v) {\n          return v ? \"font-weight: \".concat(v, \" !important;\") : '';\n        },\n        // text_color: v => v ? `color: ${v} !important;` : '',\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        margin_top: function margin_top(v) {\n          return v ? \"margin-top: \".concat(v, \"px !important;\") : '';\n        },\n        margin_right: function margin_right(v) {\n          return v ? \"margin-right: \".concat(v, \"px !important;\") : '';\n        },\n        margin_bottom: function margin_bottom(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        margin_left: function margin_left(v) {\n          return v ? \"margin-left: \".concat(v, \"px !important;\") : '';\n        },\n        border_radius: function border_radius(v) {\n          return v ? \"border-radius: \".concat(v, \"px !important;\") : '';\n        },\n        border_color: function border_color(v) {\n          return v ? \"border-color: \".concat(v, \" !important;\") : '';\n        },\n        border_size: function border_size(v, formats) {\n          if (v && formats.border_color) {\n            return \"border: \".concat(v, \"px solid \").concat(formats.border_color, \" !important;\");\n          } else if (v) {\n            return \"border: \".concat(v, \"px solid !important;\");\n          } else {\n            return '';\n          }\n        },\n        align: function align(v) {\n          return v ? \"text-align: \".concat(v, \" !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new ButtonElement(data.template, data.text, data.url);\n\n      // formats\n      if (data.formats) {\n        e.setFormat('font_family', data.formats.font_family);\n        e.setFormat('font_style', data.formats.font_style);\n        e.setFormat('font_weight', data.formats.font_weight);\n        e.setFormat('font_size', data.formats.font_size);\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('text_color', data.formats.text_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n        e.setFormat('margin_top', data.formats.margin_top);\n        e.setFormat('margin_right', data.formats.margin_right);\n        e.setFormat('margin_bottom', data.formats.margin_bottom);\n        e.setFormat('margin_left', data.formats.margin_left);\n        e.setFormat('border_color', data.formats.border_color);\n        e.setFormat('border_radius', data.formats.border_radius);\n        e.setFormat('background_image', data.formats.background_image);\n        e.setFormat('background_position', data.formats.background_position);\n        e.setFormat('background_size', data.formats.background_size);\n        e.setFormat('background_repeat', data.formats.background_repeat);\n        e.setFormat('border_size', data.formats.border_size);\n        e.setFormat('align', data.formats.align);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ButtonElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ButtonElement.js?");

/***/ }),

/***/ "./src/includes/ButtonWidget.js":
/*!**************************************!*\
  !*** ./src/includes/ButtonWidget.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _ButtonElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ButtonElement.js */ \"./src/includes/ButtonElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar ButtonWidget = /*#__PURE__*/function (_BaseWidget) {\n  function ButtonWidget() {\n    var _this;\n    _classCallCheck(this, ButtonWidget);\n    _this = _callSuper(this, ButtonWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add a ButtonElement to the widget\n    var button = new _ButtonElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('Button', 'Click Me');\n    _this.elements.push(button);\n    return _this;\n  }\n  _inherits(ButtonWidget, _BaseWidget);\n  return _createClass(ButtonWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Button';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'smart_button';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ButtonWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ButtonWidget.js?");

/***/ }),

/***/ "./src/includes/CarouselBlockElement.js":
/*!**********************************************!*\
  !*** ./src/includes/CarouselBlockElement.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BlockElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BlockElement.js */ \"./src/includes/BlockElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar CarouselBlockElement = /*#__PURE__*/function (_BlockElement) {\n  function CarouselBlockElement() {\n    _classCallCheck(this, CarouselBlockElement);\n    return _callSuper(this, CarouselBlockElement, arguments);\n  }\n  _inherits(CarouselBlockElement, _BlockElement);\n  return _createClass(CarouselBlockElement, [{\n    key: \"checkIfThePositionIsBefore\",\n    value: function checkIfThePositionIsBefore(clientX, clientY) {\n      var hoveredBlock = this.domNode;\n      var hoveredBlockRect = hoveredBlock.getBoundingClientRect();\n      return clientX < hoveredBlockRect.left + hoveredBlockRect.width / 2;\n    }\n  }, {\n    key: \"addDropBeforeHighlight\",\n    value: function addDropBeforeHighlight() {\n      // remove other effects\n      this.removeDropHighlight();\n      if (!this.dropBeforeBox) {\n        this.dropBeforeBox = document.createElement('div');\n        this.dropBeforeBox.classList.add('drop-left-box');\n\n        // Append it to the body\n        document.body.appendChild(this.dropBeforeBox);\n      }\n      this.matchingDomNode(this.dropBeforeBox);\n    }\n  }, {\n    key: \"addDropAfterHighlight\",\n    value: function addDropAfterHighlight() {\n      // remove other effects\n      this.removeDropHighlight();\n      if (!this.dropAfterBox) {\n        this.dropAfterBox = document.createElement('div');\n        this.dropAfterBox.classList.add('drop-right-box');\n\n        // Append it to the body\n        document.body.appendChild(this.dropAfterBox);\n      }\n      this.matchingDomNode(this.dropAfterBox);\n    }\n  }]);\n}(_BlockElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CarouselBlockElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/CarouselBlockElement.js?");

/***/ }),

/***/ "./src/includes/CarouselPageElement.js":
/*!*********************************************!*\
  !*** ./src/includes/CarouselPageElement.js ***!
  \*********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _PageElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PageElement.js */ \"./src/includes/PageElement.js\");\n/* harmony import */ var _CarouselSettingsControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CarouselSettingsControl.js */ \"./src/includes/CarouselSettingsControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _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 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 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 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; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar CarouselPageElement = /*#__PURE__*/function (_PageElement) {\n  function CarouselPageElement(builder) {\n    var _this;\n    _classCallCheck(this, CarouselPageElement);\n    _this = _callSuper(this, CarouselPageElement); // Call the parent class constructor\n    _this.builder = builder;\n    _this.blocks = [];\n    _this.iframe = null; // Reference to the iframe\n\n    // formats\n    _this.formats = {\n      font_family: \"inherit\",\n      font_style: null,\n      font_weight: null,\n      font_size: null,\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      text_color: null,\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // Carousel Settings attributes - flat structure\n      socialMedia: 'linkedin',\n      selectedColorsBackground: '#254045',\n      selectedColorsTextColor: '#ffffff',\n      selectedColorsAccent: '#b0c4c1',\n      alternateColors: false,\n      typographySize: 'medium',\n      typographyAlignment: 'center',\n      typographyFontFamily: 'dm-serif-dm-sans',\n      typographyUppercaseTitles: false,\n      typographyCustomFontPairing: false,\n      backgroundElementsEnabled: true,\n      backgroundElementsDesignElement: 'confetti-burst',\n      slidesCounterEnabled: true,\n      slidesCounterStyle: 'filled',\n      slidesCounterRoundness: 50,\n      identityBrandEnabled: true,\n      identityBrandBrandType: 'personal',\n      identityBrandOrientation: 'top',\n      identityBrandHeadshotEnabled: true,\n      identityBrandHeadshotImage: null,\n      identityBrandNameEnabled: true,\n      identityBrandNameValue: 'Fernando',\n      identityBrandHandleEnabled: true,\n      identityBrandHandleValue: 'Founder at uCarousels',\n      identityBrandWebsiteEnabled: true,\n      identityBrandWebsiteValue: 'www.aiCarousels.com',\n      identityBrandShowIntroOutro: true\n    };\n    return _this;\n  }\n  _inherits(CarouselPageElement, _PageElement);\n  return _createClass(CarouselPageElement, [{\n    key: \"isDroppable\",\n    value: function isDroppable() {\n      return true;\n    }\n  }, {\n    key: \"canDropInside\",\n    value: function canDropInside() {\n      return true;\n    }\n  }, {\n    key: \"render\",\n    value: function () {\n      var _render = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {\n        var _this2 = this;\n        var htmlContent, bgImageValue, bgImage, position, size, repeat, bgColor;\n        return _regeneratorRuntime().wrap(function _callee$(_context) {\n          while (1) switch (_context.prev = _context.next) {\n            case 0:\n              if (!this.domNode) {\n                // \n                htmlContent = this.renderTemplate('Page', {\n                  page: '<div builder-element=\"' + this.getClassName() + '\"></div>',\n                  formats: this.formats\n                }); // \n                this.builder.iframeDoc.open();\n                this.builder.iframeDoc.write(htmlContent);\n                this.builder.iframeDoc.close();\n\n                // set page dom\n                this.domNode = this.builder.iframeDoc.body.querySelector('[builder-element=\"' + this.getClassName() + '\"]');\n              }\n\n              // reset domNode\n              while (this.domNode.firstChild) {\n                this.domNode.removeChild(this.domNode.firstChild);\n              }\n\n              //\n              this.blocks.forEach(function (block) {\n                // render block\n                var domNode = block.render();\n\n                // Dome append child\n                _this2.domNode.appendChild(domNode);\n\n                //\n                builder.uiManager.addElement(block);\n                builder.uiManager.addDraggableItem(block);\n              });\n\n              // empty page\n              if (this.blocks.length == 0) {\n                this.domNode.innerHTML = \"\\n                <div style=\\\"display: flex;\\n                    align-items: center;\\n                    justify-content: center;\\n                    height: 100vh;\\n                    background-color: rgba(34,83,159,0.05);\\n                    border: dashed 1px rgba(120, 130, 150, 0.5);\\n                    \\\">\\n                    <svg style=\\\"width: 100px;\\n                        display: inline-block;\\n                        margin: auto;\\n                        opacity: 1;\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" height=\\\"48px\\\" viewBox=\\\"0 -960 960 960\\\" width=\\\"48px\\\" fill=\\\"#808080\\\"><path d=\\\"M345-285q-24 0-42-18t-18-42v-435q0-24 18-42t42-18h435q24 0 42 18t18 42v435q0 24-18 42t-42 18H345Zm0-60h435v-435H345v435ZM149.82-615q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Z\\\"/></svg>\\n                    \\n                </div>\\n            \";\n              }\n\n              // formats\n              this.domNode.style.fontFamily = this.getFormat('font_family');\n              this.domNode.style.fontSize = this.getFormat('font_size');\n              this.domNode.style.fontStyle = this.getFormat('font_style');\n              this.domNode.style.fontWeight = this.getFormat('font_weight');\n              this.domNode.style.backgroundColor = this.getFormat('background_color');\n              this.domNode.style.color = this.getFormat('text_color');\n              this.domNode.style.paddingTop = this.getFormat('padding_top') + 'px';\n              this.domNode.style.paddingRight = this.getFormat('padding_right') + 'px';\n              this.domNode.style.paddingBottom = this.getFormat('padding_bottom') + 'px';\n              this.domNode.style.paddingLeft = this.getFormat('padding_left') + 'px';\n\n              // Debug log applied styles\n              console.log('CarouselPageElement: Applied visual styles:', {\n                fontFamily: this.getFormat('font_family'),\n                fontSize: this.getFormat('font_size'),\n                backgroundColor: this.getFormat('background_color'),\n                color: this.getFormat('text_color')\n              });\n\n              // Apply background image if it exists\n              bgImageValue = this.getFormat('background_image');\n              if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n                bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n                bgImage = this.getFullUrl(bgImage);\n                this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n                // Set background position\n                position = this.getFormat('background_position', 'center');\n                this.domNode.style.backgroundPosition = position;\n\n                // Set background size\n                size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n                if (!isNaN(parseFloat(size)) && isFinite(size)) {\n                  size = parseFloat(size) + '%';\n                }\n                this.domNode.style.backgroundSize = size;\n\n                // Set background repeat\n                repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n                this.domNode.style.backgroundRepeat = repeat;\n              } else {\n                // Explicitly clear background image and related styles\n                this.domNode.style.backgroundImage = \"\";\n                this.domNode.style.backgroundPosition = \"\";\n                this.domNode.style.backgroundSize = \"\";\n                this.domNode.style.backgroundRepeat = \"\";\n              }\n\n              // Apply background color\n              bgColor = this.getFormat('background_color');\n              if (bgColor) {\n                this.domNode.style.backgroundColor = bgColor;\n              }\n            case 19:\n            case \"end\":\n              return _context.stop();\n          }\n        }, _callee, this);\n      }));\n      function render() {\n        return _render.apply(this, arguments);\n      }\n      return render;\n    }()\n  }, {\n    key: \"newBlock\",\n    value: function newBlock() {\n      if (this.builder.carousel) {\n        return new CarouselBlockElement(this);\n      } else {\n        return new BlockElement(this);\n      }\n    }\n  }, {\n    key: \"appendElements\",\n    value: function appendElements(elements) {\n      var _this3 = this;\n      // public\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this3.newBlock();\n        newBlock.append(element);\n        _this3.appendBlock(newBlock);\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"addElementsAfter\",\n    value: function addElementsAfter(elements, referenceBlock) {\n      var _this4 = this;\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this4.newBlock();\n        newBlock.appendElements([element]);\n        var index = _this4.blocks.indexOf(referenceBlock);\n        if (index === -1) {\n          throw new Error('Reference block not found');\n        }\n        _this4.blocks.splice(index + 1, 0, newBlock);\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"addElementsBefore\",\n    value: function addElementsBefore(elements, referenceBlock) {\n      var _this5 = this;\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this5.newBlock();\n        newBlock.appendElements([element]);\n        var index = _this5.blocks.indexOf(referenceBlock);\n        if (index === -1) {\n          throw new Error('Reference block not found');\n        }\n        _this5.blocks.splice(index, 0, newBlock);\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"clear\",\n    value: function clear() {\n      // Remove all blocks\n      this.blocks.forEach(function (block) {\n        block.remove();\n      });\n\n      //\n      this.render();\n    }\n  }, {\n    key: \"appendBlock\",\n    value: function appendBlock(block) {\n      // private\n      // Add block to blocks array and append to page element\n      this.blocks.push(block);\n    }\n  }, {\n    key: \"removeElement\",\n    value: function removeElement(element) {\n      var _this6 = this;\n      // if element is a block of page element\n      this.blocks.forEach(function (block) {\n        if (block == element) {\n          _this6.blocks = _this6.blocks.filter(function (bl) {\n            return bl !== element;\n          });\n\n          //\n          _this6.render();\n        }\n      });\n    }\n  }, {\n    key: \"insertElementAfter\",\n    value: function insertElementAfter(element, newElement) {\n      var _this7 = this;\n      this.blocks.forEach(function (currentElement, i) {\n        // if element is one of the block's elements\n        if (currentElement === element) {\n          _this7.blocks.splice(i + 1, 0, newElement);\n          _this7.render();\n          return;\n        }\n      });\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      // Return JSON encoded representation of the element\n      return {\n        name: this.getClassName(),\n        padding: this.padding,\n        margin: this.margin,\n        elementLists: this.blocks.map(function (block) {\n          return block.elements.map(function (element) {\n            return element.getData();\n          });\n        }),\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"parse\",\n    value: function parse(data) {\n      var _this8 = this;\n      // Set data from JSON representation\n      data.elementLists.forEach(function (elementList) {\n        var elements = elementList.map(ElementFactory.createElement);\n        _this8.appendElements(elements);\n      });\n\n      // formats\n      if (data.formats) {\n        this.setFormat('font_family', data.formats.font_family);\n        this.setFormat('font_style', data.formats.font_style);\n        this.setFormat('font_weight', data.formats.font_weight);\n        this.setFormat('font_size', data.formats.font_size);\n        this.setFormat('background_color', data.formats.background_color);\n        this.setFormat('text_color', data.formats.text_color);\n        this.setFormat('padding_top', data.formats.padding_top);\n        this.setFormat('padding_right', data.formats.padding_right);\n        this.setFormat('padding_bottom', data.formats.padding_bottom);\n        this.setFormat('padding_left', data.formats.padding_left);\n\n        // Carousel settings attributes - flat structure\n        if (data.formats.socialMedia) this.setFormat('socialMedia', data.formats.socialMedia);\n        if (data.formats.selectedColorsBackground) this.setFormat('selectedColorsBackground', data.formats.selectedColorsBackground);\n        if (data.formats.selectedColorsTextColor) this.setFormat('selectedColorsTextColor', data.formats.selectedColorsTextColor);\n        if (data.formats.selectedColorsAccent) this.setFormat('selectedColorsAccent', data.formats.selectedColorsAccent);\n        if (data.formats.alternateColors !== undefined) this.setFormat('alternateColors', data.formats.alternateColors);\n        if (data.formats.typographySize) this.setFormat('typographySize', data.formats.typographySize);\n        if (data.formats.typographyAlignment) this.setFormat('typographyAlignment', data.formats.typographyAlignment);\n        if (data.formats.typographyFontFamily) this.setFormat('typographyFontFamily', data.formats.typographyFontFamily);\n        if (data.formats.typographyUppercaseTitles !== undefined) this.setFormat('typographyUppercaseTitles', data.formats.typographyUppercaseTitles);\n        if (data.formats.typographyCustomFontPairing !== undefined) this.setFormat('typographyCustomFontPairing', data.formats.typographyCustomFontPairing);\n        if (data.formats.backgroundElementsEnabled !== undefined) this.setFormat('backgroundElementsEnabled', data.formats.backgroundElementsEnabled);\n        if (data.formats.backgroundElementsDesignElement) this.setFormat('backgroundElementsDesignElement', data.formats.backgroundElementsDesignElement);\n        if (data.formats.slidesCounterEnabled !== undefined) this.setFormat('slidesCounterEnabled', data.formats.slidesCounterEnabled);\n        if (data.formats.slidesCounterStyle) this.setFormat('slidesCounterStyle', data.formats.slidesCounterStyle);\n        if (data.formats.slidesCounterRoundness !== undefined) this.setFormat('slidesCounterRoundness', data.formats.slidesCounterRoundness);\n        if (data.formats.identityBrandEnabled !== undefined) this.setFormat('identityBrandEnabled', data.formats.identityBrandEnabled);\n        if (data.formats.identityBrandBrandType) this.setFormat('identityBrandBrandType', data.formats.identityBrandBrandType);\n        if (data.formats.identityBrandOrientation) this.setFormat('identityBrandOrientation', data.formats.identityBrandOrientation);\n        if (data.formats.identityBrandHeadshotEnabled !== undefined) this.setFormat('identityBrandHeadshotEnabled', data.formats.identityBrandHeadshotEnabled);\n        if (data.formats.identityBrandHeadshotImage) this.setFormat('identityBrandHeadshotImage', data.formats.identityBrandHeadshotImage);\n        if (data.formats.identityBrandNameEnabled !== undefined) this.setFormat('identityBrandNameEnabled', data.formats.identityBrandNameEnabled);\n        if (data.formats.identityBrandNameValue) this.setFormat('identityBrandNameValue', data.formats.identityBrandNameValue);\n        if (data.formats.identityBrandHandleEnabled !== undefined) this.setFormat('identityBrandHandleEnabled', data.formats.identityBrandHandleEnabled);\n        if (data.formats.identityBrandHandleValue) this.setFormat('identityBrandHandleValue', data.formats.identityBrandHandleValue);\n        if (data.formats.identityBrandWebsiteEnabled !== undefined) this.setFormat('identityBrandWebsiteEnabled', data.formats.identityBrandWebsiteEnabled);\n        if (data.formats.identityBrandWebsiteValue) this.setFormat('identityBrandWebsiteValue', data.formats.identityBrandWebsiteValue);\n        if (data.formats.identityBrandShowIntroOutro !== undefined) this.setFormat('identityBrandShowIntroOutro', data.formats.identityBrandShowIntroOutro);\n      }\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this9 = this;\n      console.log('CarouselPageElement: getControls() called');\n      console.log('CarouselPageElement: Current formats:', this.formats);\n      return [\n      // CarouselPageElement controls\n      new _CarouselSettingsControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]({\n        // Pass all carousel settings attributes - flat structure\n        socialMedia: this.getFormat('socialMedia'),\n        selectedColorsBackground: this.getFormat('selectedColorsBackground'),\n        selectedColorsTextColor: this.getFormat('selectedColorsTextColor'),\n        selectedColorsAccent: this.getFormat('selectedColorsAccent'),\n        alternateColors: this.getFormat('alternateColors'),\n        typographySize: this.getFormat('typographySize'),\n        typographyAlignment: this.getFormat('typographyAlignment'),\n        typographyFontFamily: this.getFormat('typographyFontFamily'),\n        typographyUppercaseTitles: this.getFormat('typographyUppercaseTitles'),\n        typographyCustomFontPairing: this.getFormat('typographyCustomFontPairing'),\n        backgroundElementsEnabled: this.getFormat('backgroundElementsEnabled'),\n        backgroundElementsDesignElement: this.getFormat('backgroundElementsDesignElement'),\n        slidesCounterEnabled: this.getFormat('slidesCounterEnabled'),\n        slidesCounterStyle: this.getFormat('slidesCounterStyle'),\n        slidesCounterRoundness: this.getFormat('slidesCounterRoundness'),\n        identityBrandEnabled: this.getFormat('identityBrandEnabled'),\n        identityBrandBrandType: this.getFormat('identityBrandBrandType'),\n        identityBrandOrientation: this.getFormat('identityBrandOrientation'),\n        identityBrandHeadshotEnabled: this.getFormat('identityBrandHeadshotEnabled'),\n        identityBrandHeadshotImage: this.getFormat('identityBrandHeadshotImage'),\n        identityBrandNameEnabled: this.getFormat('identityBrandNameEnabled'),\n        identityBrandNameValue: this.getFormat('identityBrandNameValue'),\n        identityBrandHandleEnabled: this.getFormat('identityBrandHandleEnabled'),\n        identityBrandHandleValue: this.getFormat('identityBrandHandleValue'),\n        identityBrandWebsiteEnabled: this.getFormat('identityBrandWebsiteEnabled'),\n        identityBrandWebsiteValue: this.getFormat('identityBrandWebsiteValue'),\n        identityBrandShowIntroOutro: this.getFormat('identityBrandShowIntroOutro')\n      }, {\n        setSocialMedia: function setSocialMedia(value) {\n          console.log('CarouselPageElement: setSocialMedia called with:', value);\n          _this9.setFormat('socialMedia', value);\n          _this9.render();\n        },\n        setSelectedColorsBackground: function setSelectedColorsBackground(value) {\n          console.log('CarouselPageElement: setSelectedColorsBackground called with:', value);\n          _this9.setFormat('selectedColorsBackground', value);\n          _this9.setFormat('background_color', value); // Apply to visual background\n          _this9.render();\n        },\n        setSelectedColorsTextColor: function setSelectedColorsTextColor(value) {\n          console.log('CarouselPageElement: setSelectedColorsTextColor called with:', value);\n          _this9.setFormat('selectedColorsTextColor', value);\n          _this9.setFormat('text_color', value); // Apply to visual text color\n          _this9.render();\n        },\n        setSelectedColorsAccent: function setSelectedColorsAccent(value) {\n          _this9.setFormat('selectedColorsAccent', value);\n          _this9.render();\n        },\n        setAlternateColors: function setAlternateColors(value) {\n          _this9.setFormat('alternateColors', value);\n          _this9.render();\n        },\n        setTypographySize: function setTypographySize(value) {\n          console.log('CarouselPageElement: setTypographySize called with:', value);\n          _this9.setFormat('typographySize', value);\n          // Apply font size based on typography size setting\n          var fontSize = value === 'small' ? '14px' : '16px';\n          _this9.setFormat('font_size', fontSize);\n          console.log('CarouselPageElement: Applied font size:', fontSize);\n          _this9.render();\n        },\n        setTypographyAlignment: function setTypographyAlignment(value) {\n          _this9.setFormat('typographyAlignment', value);\n          _this9.render();\n        },\n        setTypographyFontFamily: function setTypographyFontFamily(value) {\n          console.log('CarouselPageElement: setTypographyFontFamily called with:', value);\n          _this9.setFormat('typographyFontFamily', value);\n          // Map typography font families to actual font names\n          var fontMap = {\n            'dm-serif-dm-sans': 'DM Serif Display, serif',\n            'playfair-source-sans': 'Playfair Display, serif',\n            'roboto-slab-roboto': 'Roboto Slab, serif',\n            'merriweather-open-sans': 'Merriweather, serif'\n          };\n          var mappedFont = fontMap[value] || 'inherit';\n          _this9.setFormat('font_family', mappedFont);\n          console.log('CarouselPageElement: Applied font family:', mappedFont);\n          _this9.render();\n        },\n        setTypographyUppercaseTitles: function setTypographyUppercaseTitles(value) {\n          _this9.setFormat('typographyUppercaseTitles', value);\n          _this9.render();\n        },\n        setTypographyCustomFontPairing: function setTypographyCustomFontPairing(value) {\n          _this9.setFormat('typographyCustomFontPairing', value);\n          _this9.render();\n        },\n        setBackgroundElementsEnabled: function setBackgroundElementsEnabled(value) {\n          _this9.setFormat('backgroundElementsEnabled', value);\n          _this9.render();\n        },\n        setBackgroundElementsDesignElement: function setBackgroundElementsDesignElement(value) {\n          _this9.setFormat('backgroundElementsDesignElement', value);\n          _this9.render();\n        },\n        setSlidesCounterEnabled: function setSlidesCounterEnabled(value) {\n          _this9.setFormat('slidesCounterEnabled', value);\n          _this9.render();\n        },\n        setSlidesCounterStyle: function setSlidesCounterStyle(value) {\n          _this9.setFormat('slidesCounterStyle', value);\n          _this9.render();\n        },\n        setSlidesCounterRoundness: function setSlidesCounterRoundness(value) {\n          _this9.setFormat('slidesCounterRoundness', value);\n          _this9.render();\n        },\n        setIdentityBrandEnabled: function setIdentityBrandEnabled(value) {\n          _this9.setFormat('identityBrandEnabled', value);\n          _this9.render();\n        },\n        setIdentityBrandBrandType: function setIdentityBrandBrandType(value) {\n          console.log('CarouselPageElement: setIdentityBrandBrandType called with:', value);\n          _this9.setFormat('identityBrandBrandType', value);\n          _this9.render();\n        },\n        setIdentityBrandOrientation: function setIdentityBrandOrientation(value) {\n          _this9.setFormat('identityBrandOrientation', value);\n          _this9.render();\n        },\n        setIdentityBrandHeadshotEnabled: function setIdentityBrandHeadshotEnabled(value) {\n          _this9.setFormat('identityBrandHeadshotEnabled', value);\n          _this9.render();\n        },\n        setIdentityBrandHeadshotImage: function setIdentityBrandHeadshotImage(value) {\n          _this9.setFormat('identityBrandHeadshotImage', value);\n          _this9.render();\n        },\n        setIdentityBrandNameEnabled: function setIdentityBrandNameEnabled(value) {\n          _this9.setFormat('identityBrandNameEnabled', value);\n          _this9.render();\n        },\n        setIdentityBrandNameValue: function setIdentityBrandNameValue(value) {\n          console.log('CarouselPageElement: setIdentityBrandNameValue called with:', value);\n          _this9.setFormat('identityBrandNameValue', value);\n          _this9.render();\n        },\n        setIdentityBrandHandleEnabled: function setIdentityBrandHandleEnabled(value) {\n          _this9.setFormat('identityBrandHandleEnabled', value);\n          _this9.render();\n        },\n        setIdentityBrandHandleValue: function setIdentityBrandHandleValue(value) {\n          _this9.setFormat('identityBrandHandleValue', value);\n          _this9.render();\n        },\n        setIdentityBrandWebsiteEnabled: function setIdentityBrandWebsiteEnabled(value) {\n          _this9.setFormat('identityBrandWebsiteEnabled', value);\n          _this9.render();\n        },\n        setIdentityBrandWebsiteValue: function setIdentityBrandWebsiteValue(value) {\n          _this9.setFormat('identityBrandWebsiteValue', value);\n          _this9.render();\n        },\n        setIdentityBrandShowIntroOutro: function setIdentityBrandShowIntroOutro(value) {\n          _this9.setFormat('identityBrandShowIntroOutro', value);\n          _this9.render();\n        }\n      })\n\n      // // Font faminly\n      // new FontFamilyControl(\n      //     // label\n      //     'Font family',\n      //     // value\n      //     this.getFormat('font_family'),\n      //     // callback\n      //     {\n      //         // set font family\n      //         setFontFamily: (font_family) => {\n      //             this.setFormat('font_family', font_family);\n\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // // Font weight\n      // new FontWeightControl(\n      //     // label\n      //     'Font weight',\n      //     // value\n      //     this.getFormat('font_weight'),\n      //     // callback\n      //     {\n      //         // set font weight\n      //         setFontWeight: (font_weight) => {\n      //             this.setFormat('font_weight', font_weight);\n\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // // Background color\n      // new ColorPickerControl(\n      //     // label\n      //     'Background color',\n      //     // value\n      //     this.getFormat('background_color'),\n      //     // callback\n      //     {\n      //         // set background color\n      //         setColor: (background_color) => {\n      //             this.setFormat('background_color', background_color);\n\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // // Text color\n      // new ColorPickerControl(\n      //     // label\n      //     'Text color',\n      //     // value\n      //     this.getFormat('text_color'),\n      //     // callback\n      //     {\n      //         // set text color\n      //         setColor: (text_color) => {\n      //             this.setFormat('text_color', text_color);\n\n      //             this.render();\n      //         }\n      //     }\n      // ),\n      //             new BackgroundControl(\n      //     // label\n      //     'Background Settings',\n      //     // values\n      //     {\n      //         color: this.getFormat('background_color', '#ffffff'),\n      //         image: this.getFormat('background_image', ''),\n      //         position: this.getFormat('background_position', 'center'),\n      //         size: this.getFormat('background_size', '100').toString().replace('%', ''),\n      //         toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      //     },\n      //     // callback\n      //     {\n      //         setBackground: (values) => {\n      //             this.setFormat('background_color', values.color);\n      //             this.setFormat('background_image', values.image);\n      //             this.setFormat('background_position', values.position);\n      //             this.setFormat('background_size', parseInt(values.size, 10) || 100);\n      //             this.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // new PaddingMarginControl(\n      //     // label\n      //     'Padding',\n      //     // value\n      //     {\n      //         top: this.getFormat('padding_top', 0),\n      //         right: this.getFormat('padding_right', 0),\n      //         bottom: this.getFormat('padding_bottom', 0),\n      //         left: this.getFormat('padding_left', 0),\n      //     },\n      //     // callback\n      //     {\n      //         setValues: (values) => {\n      //             this.setFormat('padding_top', values.top);\n      //             this.setFormat('padding_right', values.right);\n      //             this.setFormat('padding_bottom', values.bottom);\n      //             this.setFormat('padding_left', values.left);\n\n      //             this.render();\n      //         }\n      //     }\n      // ),\n      //             // CheckboxControl\n      // new CheckboxControl(\n      //     // label\n      //     'Optimized for mobile',\n      //     // descriptoin,\n      //     'Allow the element to display correctly on mobile devices',\n      //     // value\n      //     true,\n      //     // callback\n      //     {\n      //         // set text\n      //         setValue: (value) => {\n      //             alert(value);\n      //         }\n      //     }\n      // ),\n\n      // // CheckboxControl\n      // new CheckboxControl(\n      //     // label\n      //     'Compatibility mode for legacy browser',\n      //     // descriptoin,\n      //     'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      //     // value\n      //     true,\n      //     // callback\n      //     {\n      //         // set text\n      //         setValue: (value) => {\n      //             alert(value);\n      //         }\n      //     }\n      // ),\n      ];\n    }\n  }, {\n    key: \"getActions\",\n    value: function getActions() {\n      return [];\n    }\n  }, {\n    key: \"addContainerHightlight\",\n    value: function addContainerHightlight() {\n      // do nothing\n    }\n  }, {\n    key: \"removeContainerHightlight\",\n    value: function removeContainerHightlight() {\n      // do nothing\n    }\n  }]);\n}(_PageElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CarouselPageElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/CarouselPageElement.js?");

/***/ }),

/***/ "./src/includes/CarouselSettingsControl.js":
/*!*************************************************!*\
  !*** ./src/includes/CarouselSettingsControl.js ***!
  \*************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar CarouselSettingsControl = /*#__PURE__*/function () {\n  function CarouselSettingsControl(values, callbacks) {\n    _classCallCheck(this, CarouselSettingsControl);\n    console.log('CarouselSettingsControl: Constructor called with values:', values);\n    console.log('CarouselSettingsControl: Constructor called with callbacks:', Object.keys(callbacks || {}));\n    this.id = '_' + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.values = values; // Initial values for the carousel settings\n    this.callbacks = callbacks; // Hash of callback functions to handle changes\n\n    // controll attributes - flat structure initialization from passed values\n    this.socialMedia = this.values.socialMedia || 'linkedin';\n    this.selectedColorsBackground = this.values.selectedColorsBackground || '#254045';\n    this.selectedColorsTextColor = this.values.selectedColorsTextColor || '#ffffff';\n    this.selectedColorsAccent = this.values.selectedColorsAccent || '#b0c4c1';\n    this.alternateColors = this.values.alternateColors !== undefined ? this.values.alternateColors : false;\n    this.typographySize = this.values.typographySize || 'medium';\n    this.typographyAlignment = this.values.typographyAlignment || 'center';\n    this.typographyFontFamily = this.values.typographyFontFamily || 'dm-serif-dm-sans';\n    this.typographyUppercaseTitles = this.values.typographyUppercaseTitles !== undefined ? this.values.typographyUppercaseTitles : false;\n    this.typographyCustomFontPairing = this.values.typographyCustomFontPairing !== undefined ? this.values.typographyCustomFontPairing : false;\n    this.backgroundElementsEnabled = this.values.backgroundElementsEnabled !== undefined ? this.values.backgroundElementsEnabled : true;\n    this.backgroundElementsDesignElement = this.values.backgroundElementsDesignElement || 'confetti-burst';\n    this.slidesCounterEnabled = this.values.slidesCounterEnabled !== undefined ? this.values.slidesCounterEnabled : true;\n    this.slidesCounterStyle = this.values.slidesCounterStyle || 'filled';\n    this.slidesCounterRoundness = this.values.slidesCounterRoundness !== undefined ? this.values.slidesCounterRoundness : 50;\n    this.identityBrandEnabled = this.values.identityBrandEnabled !== undefined ? this.values.identityBrandEnabled : true;\n    this.identityBrandBrandType = this.values.identityBrandBrandType || 'personal';\n    this.identityBrandOrientation = this.values.identityBrandOrientation || 'top';\n    this.identityBrandHeadshotEnabled = this.values.identityBrandHeadshotEnabled !== undefined ? this.values.identityBrandHeadshotEnabled : true;\n    this.identityBrandHeadshotImage = this.values.identityBrandHeadshotImage || null;\n    this.identityBrandNameEnabled = this.values.identityBrandNameEnabled !== undefined ? this.values.identityBrandNameEnabled : true;\n    this.identityBrandNameValue = this.values.identityBrandNameValue || 'Fernando';\n    this.identityBrandHandleEnabled = this.values.identityBrandHandleEnabled !== undefined ? this.values.identityBrandHandleEnabled : true;\n    this.identityBrandHandleValue = this.values.identityBrandHandleValue || 'Founder at uCarousels';\n    this.identityBrandWebsiteEnabled = this.values.identityBrandWebsiteEnabled !== undefined ? this.values.identityBrandWebsiteEnabled : true;\n    this.identityBrandWebsiteValue = this.values.identityBrandWebsiteValue || 'www.aiCarousels.com';\n    this.identityBrandShowIntroOutro = this.values.identityBrandShowIntroOutro !== undefined ? this.values.identityBrandShowIntroOutro : true;\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(CarouselSettingsControl, [{\n    key: \"render\",\n    value: function render() {\n      console.log('CarouselSettingsControl: render() called');\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'CarouselSettingsControl');\n      }\n\n      // render control html\n      console.log('CarouselSettingsControl: Rendering template with current values');\n      this.domNode.innerHTML = builder.renderTemplate('CarouselSettingsControl', {\n        // Pass current values to template for initial state - flat structure\n        socialMedia: this.socialMedia,\n        selectedColorsBackground: this.selectedColorsBackground,\n        selectedColorsTextColor: this.selectedColorsTextColor,\n        selectedColorsAccent: this.selectedColorsAccent,\n        alternateColors: this.alternateColors,\n        typographySize: this.typographySize,\n        typographyAlignment: this.typographyAlignment,\n        typographyFontFamily: this.typographyFontFamily,\n        typographyUppercaseTitles: this.typographyUppercaseTitles,\n        typographyCustomFontPairing: this.typographyCustomFontPairing,\n        backgroundElementsEnabled: this.backgroundElementsEnabled,\n        backgroundElementsDesignElement: this.backgroundElementsDesignElement,\n        slidesCounterEnabled: this.slidesCounterEnabled,\n        slidesCounterStyle: this.slidesCounterStyle,\n        slidesCounterRoundness: this.slidesCounterRoundness,\n        identityBrandEnabled: this.identityBrandEnabled,\n        identityBrandBrandType: this.identityBrandBrandType,\n        identityBrandOrientation: this.identityBrandOrientation,\n        identityBrandHeadshotEnabled: this.identityBrandHeadshotEnabled,\n        identityBrandHeadshotImage: this.identityBrandHeadshotImage,\n        identityBrandNameEnabled: this.identityBrandNameEnabled,\n        identityBrandNameValue: this.identityBrandNameValue,\n        identityBrandHandleEnabled: this.identityBrandHandleEnabled,\n        identityBrandHandleValue: this.identityBrandHandleValue,\n        identityBrandWebsiteEnabled: this.identityBrandWebsiteEnabled,\n        identityBrandWebsiteValue: this.identityBrandWebsiteValue,\n        identityBrandShowIntroOutro: this.identityBrandShowIntroOutro\n      });\n\n      // Add event listeners for the controls\n      this.setupEventListeners();\n      console.log('CarouselSettingsControl: render() completed');\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {\n      var _this = this;\n    }\n  }, {\n    key: \"setupEventListeners\",\n    value: function setupEventListeners() {\n      var _this = this;\n\n      // Social Media Select\n      var socialMediaSelect = this.domNode.querySelector('#socialMediaSelect');\n      if (socialMediaSelect) {\n        socialMediaSelect.addEventListener('change', function () {\n          console.log('CarouselSettingsControl: Social Media changed to:', this.value);\n          _this.socialMedia = this.value;\n          if (_this.callbacks && _this.callbacks.setSocialMedia) {\n            console.log('CarouselSettingsControl: Calling setSocialMedia callback');\n            _this.callbacks.setSocialMedia(_this.socialMedia);\n          }\n        });\n      }\n\n      // Color Swatches\n      var colorSwatches = this.domNode.querySelectorAll('.color-swatch');\n      colorSwatches.forEach(function (swatch) {\n        swatch.addEventListener('click', function () {\n          var color = this.getAttribute('data-color');\n          console.log('CarouselSettingsControl: Color swatch clicked, color:', color);\n          // For now, update background color - could be enhanced to select which color property\n          _this.selectedColorsBackground = color;\n          if (_this.callbacks && _this.callbacks.setSelectedColorsBackground) {\n            console.log('CarouselSettingsControl: Calling setSelectedColorsBackground callback');\n            _this.callbacks.setSelectedColorsBackground(color);\n          }\n        });\n      });\n\n      // Alternate Colors\n      var alternateColorsCheckbox = this.domNode.querySelector('#alternateColors');\n      if (alternateColorsCheckbox) {\n        alternateColorsCheckbox.addEventListener('change', function () {\n          _this.alternateColors = this.checked;\n          if (_this.callbacks && _this.callbacks.setAlternateColors) {\n            _this.callbacks.setAlternateColors(_this.alternateColors);\n          }\n        });\n      }\n\n      // Typography Size\n      var sizeRadios = this.domNode.querySelectorAll('input[name=\"sizeRadio\"]');\n      sizeRadios.forEach(function (radio) {\n        radio.addEventListener('change', function () {\n          if (this.checked) {\n            _this.typographySize = this.id === 'sizeSmall' ? 'small' : 'medium';\n            console.log('CarouselSettingsControl: Typography size changed to:', _this.typographySize);\n            if (_this.callbacks && _this.callbacks.setTypographySize) {\n              console.log('CarouselSettingsControl: Calling setTypographySize callback');\n              _this.callbacks.setTypographySize(_this.typographySize);\n            }\n          }\n        });\n      });\n\n      // Typography Alignment\n      var alignmentRadios = this.domNode.querySelectorAll('input[name=\"alignmentRadio\"]');\n      alignmentRadios.forEach(function (radio) {\n        radio.addEventListener('change', function () {\n          if (this.checked) {\n            _this.typographyAlignment = this.id === 'alignLeft' ? 'left' : 'center';\n            if (_this.callbacks && _this.callbacks.setTypographyAlignment) {\n              _this.callbacks.setTypographyAlignment(_this.typographyAlignment);\n            }\n          }\n        });\n      });\n\n      // Font Family\n      var fontSelect = this.domNode.querySelector('#fontSelect');\n      if (fontSelect) {\n        fontSelect.addEventListener('change', function () {\n          console.log('CarouselSettingsControl: Font family changed to:', this.value);\n          _this.typographyFontFamily = this.value;\n          if (_this.callbacks && _this.callbacks.setTypographyFontFamily) {\n            console.log('CarouselSettingsControl: Calling setTypographyFontFamily callback');\n            _this.callbacks.setTypographyFontFamily(_this.typographyFontFamily);\n          }\n        });\n      }\n\n      // Uppercase Titles\n      var uppercaseTitlesCheckbox = this.domNode.querySelector('#uppercaseTitles');\n      if (uppercaseTitlesCheckbox) {\n        uppercaseTitlesCheckbox.addEventListener('change', function () {\n          _this.typographyUppercaseTitles = this.checked;\n          if (_this.callbacks && _this.callbacks.setTypographyUppercaseTitles) {\n            _this.callbacks.setTypographyUppercaseTitles(_this.typographyUppercaseTitles);\n          }\n        });\n      }\n\n      // Custom Font Pairing\n      var customFontPairingCheckbox = this.domNode.querySelector('#customFontPairing');\n      if (customFontPairingCheckbox) {\n        customFontPairingCheckbox.addEventListener('change', function () {\n          _this.typographyCustomFontPairing = this.checked;\n          if (_this.callbacks && _this.callbacks.setTypographyCustomFontPairing) {\n            _this.callbacks.setTypographyCustomFontPairing(_this.typographyCustomFontPairing);\n          }\n        });\n      }\n\n      // Background Elements Enabled\n      var backgroundElementsEnabled = this.domNode.querySelector('#backgroundElementsEnabled');\n      if (backgroundElementsEnabled) {\n        backgroundElementsEnabled.addEventListener('change', function () {\n          _this.backgroundElementsEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setBackgroundElementsEnabled) {\n            _this.callbacks.setBackgroundElementsEnabled(_this.backgroundElementsEnabled);\n          }\n        });\n      }\n\n      // Design Element Select\n      var designElementSelect = this.domNode.querySelector('#designElementSelect');\n      if (designElementSelect) {\n        designElementSelect.addEventListener('change', function () {\n          _this.backgroundElementsDesignElement = this.value;\n          if (_this.callbacks && _this.callbacks.setBackgroundElementsDesignElement) {\n            _this.callbacks.setBackgroundElementsDesignElement(_this.backgroundElementsDesignElement);\n          }\n          console.log('CarouselSettingsControl: Design element changed to:', _this.backgroundElementsDesignElement);\n        });\n      }\n\n      // Slides Counter Enabled\n      var slidesCounterEnabled = this.domNode.querySelector('#slidesCounterEnabled');\n      if (slidesCounterEnabled) {\n        slidesCounterEnabled.addEventListener('change', function () {\n          _this.slidesCounterEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setSlidesCounterEnabled) {\n            _this.callbacks.setSlidesCounterEnabled(_this.slidesCounterEnabled);\n          }\n        });\n      }\n\n      // Slides Counter Style\n      var styleRadios = this.domNode.querySelectorAll('input[name=\"styleRadio\"]');\n      styleRadios.forEach(function (radio) {\n        radio.addEventListener('change', function () {\n          if (this.checked) {\n            _this.slidesCounterStyle = this.id === 'styleRadio1' ? 'filled' : 'outline';\n            if (_this.callbacks && _this.callbacks.setSlidesCounterStyle) {\n              _this.callbacks.setSlidesCounterStyle(_this.slidesCounterStyle);\n            }\n          }\n        });\n      });\n\n      // Roundness Range\n      var roundnessRange = this.domNode.querySelector('#roundnessRange');\n      if (roundnessRange) {\n        roundnessRange.addEventListener('input', function () {\n          _this.slidesCounterRoundness = parseInt(this.value);\n          if (_this.callbacks && _this.callbacks.setSlidesCounterRoundness) {\n            _this.callbacks.setSlidesCounterRoundness(_this.slidesCounterRoundness);\n          }\n        });\n      }\n\n      // Identity & Brand Enabled\n      var identityBrandEnabled = this.domNode.querySelector('#identityBrandEnabled');\n      if (identityBrandEnabled) {\n        identityBrandEnabled.addEventListener('change', function () {\n          _this.identityBrandEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandEnabled) {\n            _this.callbacks.setIdentityBrandEnabled(_this.identityBrandEnabled);\n          }\n        });\n      }\n\n      // Brand Type\n      var brandTypeRadios = this.domNode.querySelectorAll('input[name=\"brandTypeRadio\"]');\n      brandTypeRadios.forEach(function (radio) {\n        radio.addEventListener('change', function () {\n          if (this.checked) {\n            _this.identityBrandBrandType = this.id === 'brandPersonal' ? 'personal' : 'business';\n            console.log('CarouselSettingsControl: Brand type changed to:', _this.identityBrandBrandType);\n            if (_this.callbacks && _this.callbacks.setIdentityBrandBrandType) {\n              console.log('CarouselSettingsControl: Calling setIdentityBrandBrandType callback');\n              _this.callbacks.setIdentityBrandBrandType(_this.identityBrandBrandType);\n            }\n          }\n        });\n      });\n\n      // Orientation\n      var orientationRadios = this.domNode.querySelectorAll('input[name=\"orientationRadio\"]');\n      orientationRadios.forEach(function (radio) {\n        radio.addEventListener('change', function () {\n          if (this.checked) {\n            _this.identityBrandOrientation = this.id === 'orientationTop' ? 'top' : 'bottom';\n            if (_this.callbacks && _this.callbacks.setIdentityBrandOrientation) {\n              _this.callbacks.setIdentityBrandOrientation(_this.identityBrandOrientation);\n            }\n          }\n        });\n      });\n\n      // Headshot Enabled\n      var headshotEnabled = this.domNode.querySelector('#headshotEnabled');\n      if (headshotEnabled) {\n        headshotEnabled.addEventListener('change', function () {\n          _this.identityBrandHeadshotEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandHeadshotEnabled) {\n            _this.callbacks.setIdentityBrandHeadshotEnabled(_this.identityBrandHeadshotEnabled);\n          }\n        });\n      }\n\n      // Name Enabled\n      var nameEnabled = this.domNode.querySelector('#nameEnabled');\n      if (nameEnabled) {\n        nameEnabled.addEventListener('change', function () {\n          _this.identityBrandNameEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandNameEnabled) {\n            _this.callbacks.setIdentityBrandNameEnabled(_this.identityBrandNameEnabled);\n          }\n        });\n      }\n\n      // Name Input\n      var nameInput = this.domNode.querySelector('#nameInput');\n      if (nameInput) {\n        nameInput.addEventListener('input', function () {\n          console.log('CarouselSettingsControl: Name input changed to:', this.value);\n          _this.identityBrandNameValue = this.value;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandNameValue) {\n            console.log('CarouselSettingsControl: Calling setIdentityBrandNameValue callback');\n            _this.callbacks.setIdentityBrandNameValue(_this.identityBrandNameValue);\n          }\n        });\n      }\n\n      // Handle Enabled\n      var handleEnabled = this.domNode.querySelector('#handleEnabled');\n      if (handleEnabled) {\n        handleEnabled.addEventListener('change', function () {\n          _this.identityBrandHandleEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandHandleEnabled) {\n            _this.callbacks.setIdentityBrandHandleEnabled(_this.identityBrandHandleEnabled);\n          }\n        });\n      }\n\n      // Handle Input\n      var handleInput = this.domNode.querySelector('#handleInput');\n      if (handleInput) {\n        handleInput.addEventListener('input', function () {\n          _this.identityBrandHandleValue = this.value;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandHandleValue) {\n            _this.callbacks.setIdentityBrandHandleValue(_this.identityBrandHandleValue);\n          }\n        });\n      }\n\n      // Website Enabled\n      var websiteEnabled = this.domNode.querySelector('#websiteEnabled');\n      if (websiteEnabled) {\n        websiteEnabled.addEventListener('change', function () {\n          _this.identityBrandWebsiteEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandWebsiteEnabled) {\n            _this.callbacks.setIdentityBrandWebsiteEnabled(_this.identityBrandWebsiteEnabled);\n          }\n        });\n      }\n\n      // Website Input\n      var websiteInput = this.domNode.querySelector('#websiteInput');\n      if (websiteInput) {\n        websiteInput.addEventListener('input', function () {\n          _this.identityBrandWebsiteValue = this.value;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandWebsiteValue) {\n            _this.callbacks.setIdentityBrandWebsiteValue(_this.identityBrandWebsiteValue);\n          }\n        });\n      }\n\n      // Show Intro/Outro\n      var showIntroOutro = this.domNode.querySelector('#showIntroOutro');\n      if (showIntroOutro) {\n        showIntroOutro.addEventListener('change', function () {\n          _this.identityBrandShowIntroOutro = this.checked;\n          if (_this.callbacks && _this.callbacks.setIdentityBrandShowIntroOutro) {\n            _this.callbacks.setIdentityBrandShowIntroOutro(_this.identityBrandShowIntroOutro);\n          }\n        });\n      }\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CarouselSettingsControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/CarouselSettingsControl.js?");

/***/ }),

/***/ "./src/includes/CarouselSlideControl.js":
/*!**********************************************!*\
  !*** ./src/includes/CarouselSlideControl.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar CarouselSlideControl = /*#__PURE__*/function () {\n  function CarouselSlideControl(values, callbacks) {\n    _classCallCheck(this, CarouselSlideControl);\n    console.log('CarouselSlideControl: Constructor called with values:', values);\n    console.log('CarouselSlideControl: Constructor called with callbacks:', Object.keys(callbacks || {}));\n    this.id = '_' + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.values = values; // Initial values for the carousel settings\n    this.callbacks = callbacks; // Hash of callback functions to handle changes\n\n    // controll attributes - flat structure initialization from passed values\n\n    // Intro Type Settings\n    this.selectedEmoji = this.values.selectedEmoji || '';\n    this.headshotPosition = this.values.headshotPosition || 'center';\n    this.headshotSize = this.values.headshotSize || 'medium';\n    this.headshotBorderStyle = this.values.headshotBorderStyle || 'circle';\n    this.headshotBorderColor = this.values.headshotBorderColor || '#6f42c1';\n    this.imageType = this.values.imageType || '3d-icon';\n    this.imageDescription = this.values.imageDescription || '';\n\n    // General Settings\n    this.taglineEnabled = this.values.taglineEnabled !== undefined ? this.values.taglineEnabled : true;\n    this.tagline = this.values.tagline || 'And you will read this last';\n    this.titleEnabled = this.values.titleEnabled !== undefined ? this.values.titleEnabled : true;\n    this.titleText = this.values.titleText || 'You will read this first';\n    this.paragraphEnabled = this.values.paragraphEnabled !== undefined ? this.values.paragraphEnabled : true;\n    this.paragraphText = this.values.paragraphText || 'Then you will read this.';\n    this.swipeIndicatorEnabled = this.values.swipeIndicatorEnabled !== undefined ? this.values.swipeIndicatorEnabled : true;\n    this.swipeIndicatorText = this.values.swipeIndicatorText || 'Swipe';\n\n    // Alignment Settings\n    this.imageAlignment = this.values.imageAlignment || 'center';\n\n    // Background Image Settings\n    this.backgroundImageEnabled = this.values.backgroundImageEnabled !== undefined ? this.values.backgroundImageEnabled : false;\n    this.backgroundImageKeywords = this.values.backgroundImageKeywords || '';\n    this.backgroundImageOpacity = this.values.backgroundImageOpacity || 75;\n    this.applyBackgroundToAllSlides = this.values.applyBackgroundToAllSlides !== undefined ? this.values.applyBackgroundToAllSlides : false;\n    // ... initialize other attributes similarly\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(CarouselSlideControl, [{\n    key: \"render\",\n    value: function render() {\n      console.log('CarouselSlideControl: render() called');\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'CarouselSlideControl');\n      }\n\n      // render control html\n      console.log('CarouselSlideControl: Rendering template with current values');\n      this.domNode.innerHTML = builder.renderTemplate('CarouselSlideControl', {\n        // Pass current values to template for initial state - flat structure\n\n        // Intro Type Settings\n        selectedEmoji: this.selectedEmoji,\n        headshotPosition: this.headshotPosition,\n        headshotSize: this.headshotSize,\n        headshotBorderStyle: this.headshotBorderStyle,\n        headshotBorderColor: this.headshotBorderColor,\n        imageType: this.imageType,\n        imageDescription: this.imageDescription,\n        // General Settings\n        taglineEnabled: this.taglineEnabled,\n        tagline: this.tagline,\n        titleEnabled: this.titleEnabled,\n        titleText: this.titleText,\n        paragraphEnabled: this.paragraphEnabled,\n        paragraphText: this.paragraphText,\n        swipeIndicatorEnabled: this.swipeIndicatorEnabled,\n        swipeIndicatorText: this.swipeIndicatorText,\n        // Alignment Settings\n        imageAlignment: this.imageAlignment,\n        // Background Image Settings\n        backgroundImageEnabled: this.backgroundImageEnabled,\n        backgroundImageKeywords: this.backgroundImageKeywords,\n        backgroundImageOpacity: this.backgroundImageOpacity,\n        applyBackgroundToAllSlides: this.applyBackgroundToAllSlides\n      });\n\n      // Add event listeners for the controls\n      this.setupEventListeners();\n      console.log('CarouselSlideControl: render() completed');\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {\n      var _this = this;\n    }\n  }, {\n    key: \"setupEventListeners\",\n    value: function setupEventListeners() {\n      var _this = this;\n\n      // Emoji selection\n      var emojiButtons = this.domNode.querySelectorAll('[data-emoji]');\n      emojiButtons.forEach(function (button) {\n        button.addEventListener('click', function () {\n          _this.selectedEmoji = this.getAttribute('data-emoji');\n          // Remove selected class from all buttons\n          emojiButtons.forEach(function (btn) {\n            return btn.classList.remove('selected');\n          });\n          // Add selected class to clicked button\n          this.classList.add('selected');\n          if (_this.callbacks && _this.callbacks.setSelectedEmoji) {\n            _this.callbacks.setSelectedEmoji(_this.selectedEmoji);\n          }\n        });\n      });\n\n      // Headshot settings\n      var headshotPosition = this.domNode.querySelector('#headshotPosition');\n      if (headshotPosition) {\n        headshotPosition.addEventListener('change', function () {\n          _this.headshotPosition = this.value;\n          if (_this.callbacks && _this.callbacks.setHeadshotPosition) {\n            _this.callbacks.setHeadshotPosition(_this.headshotPosition);\n          }\n        });\n      }\n      var headshotSize = this.domNode.querySelector('#headshotSize');\n      if (headshotSize) {\n        headshotSize.addEventListener('change', function () {\n          _this.headshotSize = this.value;\n          if (_this.callbacks && _this.callbacks.setHeadshotSize) {\n            _this.callbacks.setHeadshotSize(_this.headshotSize);\n          }\n        });\n      }\n      var headshotBorderStyle = this.domNode.querySelector('#headshotBorderStyle');\n      if (headshotBorderStyle) {\n        headshotBorderStyle.addEventListener('change', function () {\n          _this.headshotBorderStyle = this.value;\n          if (_this.callbacks && _this.callbacks.setHeadshotBorderStyle) {\n            _this.callbacks.setHeadshotBorderStyle(_this.headshotBorderStyle);\n          }\n        });\n      }\n      var headshotBorderColor = this.domNode.querySelector('#headshotBorderColor');\n      if (headshotBorderColor) {\n        headshotBorderColor.addEventListener('change', function () {\n          _this.headshotBorderColor = this.value;\n          if (_this.callbacks && _this.callbacks.setHeadshotBorderColor) {\n            _this.callbacks.setHeadshotBorderColor(_this.headshotBorderColor);\n          }\n        });\n      }\n\n      // Image generation settings\n      var imageTypeSelect = this.domNode.querySelector('#imageTypeSelect');\n      if (imageTypeSelect) {\n        imageTypeSelect.addEventListener('change', function () {\n          _this.imageType = this.value;\n          if (_this.callbacks && _this.callbacks.setImageType) {\n            _this.callbacks.setImageType(_this.imageType);\n          }\n        });\n      }\n      var imageDescriptionInput = this.domNode.querySelector('#imageDescriptionInput');\n      if (imageDescriptionInput) {\n        imageDescriptionInput.addEventListener('input', function () {\n          _this.imageDescription = this.value;\n          if (_this.callbacks && _this.callbacks.setImageDescription) {\n            _this.callbacks.setImageDescription(_this.imageDescription);\n          }\n        });\n      }\n\n      // Image alignment\n      var alignmentButtons = this.domNode.querySelectorAll('input[name=\"imageAlignment\"]');\n      alignmentButtons.forEach(function (button) {\n        button.addEventListener('change', function () {\n          if (this.checked) {\n            _this.imageAlignment = this.value;\n            if (_this.callbacks && _this.callbacks.setImageAlignment) {\n              _this.callbacks.setImageAlignment(_this.imageAlignment);\n            }\n          }\n        });\n      });\n\n      // General settings toggles and inputs\n      var taglineToggle = this.domNode.querySelector('#taglineToggle');\n      if (taglineToggle) {\n        taglineToggle.addEventListener('change', function () {\n          _this.taglineEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setTaglineEnabled) {\n            _this.callbacks.setTaglineEnabled(_this.taglineEnabled);\n          }\n        });\n      }\n      var taglineInput = this.domNode.querySelector('#taglineInput');\n      if (taglineInput) {\n        taglineInput.addEventListener('input', function () {\n          _this.tagline = this.value;\n          if (_this.callbacks && _this.callbacks.setTagline) {\n            _this.callbacks.setTagline(_this.tagline);\n          }\n        });\n      }\n      var titleToggle = this.domNode.querySelector('#titleToggle');\n      if (titleToggle) {\n        titleToggle.addEventListener('change', function () {\n          _this.titleEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setTitleEnabled) {\n            _this.callbacks.setTitleEnabled(_this.titleEnabled);\n          }\n        });\n      }\n      var titleInput = this.domNode.querySelector('#titleInput');\n      if (titleInput) {\n        titleInput.addEventListener('input', function () {\n          _this.titleText = this.value;\n          if (_this.callbacks && _this.callbacks.setTitleText) {\n            _this.callbacks.setTitleText(_this.titleText);\n          }\n        });\n      }\n      var paragraphToggle = this.domNode.querySelector('#paragraphToggle');\n      if (paragraphToggle) {\n        paragraphToggle.addEventListener('change', function () {\n          _this.paragraphEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setParagraphEnabled) {\n            _this.callbacks.setParagraphEnabled(_this.paragraphEnabled);\n          }\n        });\n      }\n      var paragraphInput = this.domNode.querySelector('#paragraphInput');\n      if (paragraphInput) {\n        paragraphInput.addEventListener('input', function () {\n          _this.paragraphText = this.value;\n          if (_this.callbacks && _this.callbacks.setParagraphText) {\n            _this.callbacks.setParagraphText(_this.paragraphText);\n          }\n        });\n      }\n      var swipeIndicatorToggle = this.domNode.querySelector('#swipeIndicatorToggle');\n      if (swipeIndicatorToggle) {\n        swipeIndicatorToggle.addEventListener('change', function () {\n          _this.swipeIndicatorEnabled = this.checked;\n          if (_this.callbacks && _this.callbacks.setSwipeIndicatorEnabled) {\n            _this.callbacks.setSwipeIndicatorEnabled(_this.swipeIndicatorEnabled);\n          }\n        });\n      }\n      var swipeIndicatorInput = this.domNode.querySelector('#swipeIndicatorInput');\n      if (swipeIndicatorInput) {\n        swipeIndicatorInput.addEventListener('input', function () {\n          _this.swipeIndicatorText = this.value;\n          if (_this.callbacks && _this.callbacks.setSwipeIndicatorText) {\n            _this.callbacks.setSwipeIndicatorText(_this.swipeIndicatorText);\n          }\n        });\n      }\n\n      // Background image settings\n      var backgroundImageToggle = this.domNode.querySelector('#backgroundImageToggle');\n      if (backgroundImageToggle) {\n        backgroundImageToggle.addEventListener('change', function () {\n          _this.backgroundImageEnabled = this.checked;\n          // Show/hide background image content\n          var content = _this.domNode.querySelector('#backgroundImageContent');\n          if (content) {\n            content.style.display = this.checked ? 'block' : 'none';\n          }\n          if (_this.callbacks && _this.callbacks.setBackgroundImageEnabled) {\n            _this.callbacks.setBackgroundImageEnabled(_this.backgroundImageEnabled);\n          }\n        });\n      }\n      var backgroundImageKeywords = this.domNode.querySelector('#backgroundImageKeywords');\n      if (backgroundImageKeywords) {\n        backgroundImageKeywords.addEventListener('input', function () {\n          _this.backgroundImageKeywords = this.value;\n          if (_this.callbacks && _this.callbacks.setBackgroundImageKeywords) {\n            _this.callbacks.setBackgroundImageKeywords(_this.backgroundImageKeywords);\n          }\n        });\n      }\n      var backgroundImageOpacity = this.domNode.querySelector('#backgroundImageOpacity');\n      if (backgroundImageOpacity) {\n        backgroundImageOpacity.addEventListener('input', function () {\n          _this.backgroundImageOpacity = parseInt(this.value);\n          if (_this.callbacks && _this.callbacks.setBackgroundImageOpacity) {\n            _this.callbacks.setBackgroundImageOpacity(_this.backgroundImageOpacity);\n          }\n        });\n      }\n      var applyToAllSlides = this.domNode.querySelector('#applyToAllSlides');\n      if (applyToAllSlides) {\n        applyToAllSlides.addEventListener('change', function () {\n          _this.applyBackgroundToAllSlides = this.checked;\n          if (_this.callbacks && _this.callbacks.setApplyBackgroundToAllSlides) {\n            _this.callbacks.setApplyBackgroundToAllSlides(_this.applyBackgroundToAllSlides);\n          }\n        });\n      }\n\n      // Button event listeners\n      var generateImageBtn = this.domNode.querySelector('#generateImageBtn');\n      if (generateImageBtn) {\n        generateImageBtn.addEventListener('click', function () {\n          if (_this.callbacks && _this.callbacks.generateImage) {\n            _this.callbacks.generateImage(_this.imageDescription, _this.imageType);\n          }\n        });\n      }\n      var backgroundImageSearchBtn = this.domNode.querySelector('#backgroundImageSearchBtn');\n      if (backgroundImageSearchBtn) {\n        backgroundImageSearchBtn.addEventListener('click', function () {\n          if (_this.callbacks && _this.callbacks.searchBackgroundImage) {\n            _this.callbacks.searchBackgroundImage(_this.backgroundImageKeywords);\n          }\n        });\n      }\n      var backgroundImageGenerateBtn = this.domNode.querySelector('#backgroundImageGenerateBtn');\n      if (backgroundImageGenerateBtn) {\n        backgroundImageGenerateBtn.addEventListener('click', function () {\n          if (_this.callbacks && _this.callbacks.generateBackgroundImage) {\n            _this.callbacks.generateBackgroundImage(_this.backgroundImageKeywords);\n          }\n        });\n      }\n      var backgroundImageUploadBtn = this.domNode.querySelector('#backgroundImageUploadBtn');\n      if (backgroundImageUploadBtn) {\n        backgroundImageUploadBtn.addEventListener('click', function () {\n          if (_this.callbacks && _this.callbacks.uploadBackgroundImage) {\n            _this.callbacks.uploadBackgroundImage();\n          }\n        });\n      }\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CarouselSlideControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/CarouselSlideControl.js?");

/***/ }),

/***/ "./src/includes/CarouselSlideElement.js":
/*!**********************************************!*\
  !*** ./src/includes/CarouselSlideElement.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _GridElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./GridElement.js */ \"./src/includes/GridElement.js\");\n/* harmony import */ var _CarouselSlideControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CarouselSlideControl.js */ \"./src/includes/CarouselSlideControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar CarouselSlideElement = /*#__PURE__*/function (_GridElement) {\n  function CarouselSlideElement(template, text) {\n    var _this;\n    _classCallCheck(this, CarouselSlideElement);\n    _this = _callSuper(this, CarouselSlideElement); // Call the parent class constructor\n    _this.template = template;\n    _this.domNode = null;\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n\n    // formats\n    _this.formats = {\n      font_family: \"inherit\",\n      font_style: null,\n      font_weight: null,\n      font_size: null,\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      text_color: null,\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      margin_top: 0,\n      margin_right: 0,\n      margin_bottom: 0,\n      margin_left: 0,\n      border_radius: 0,\n      content_display: 'flex',\n      content_flex_wrap: 'nowrap',\n      content_justify_content: 'center',\n      content_align_items: null,\n      content_gap: 0,\n      // Intro Type Settings\n      selectedEmoji: '',\n      headshotPosition: 'center',\n      headshotSize: 'medium',\n      headshotBorderStyle: 'circle',\n      headshotBorderColor: '#6f42c1',\n      imageType: '3d-icon',\n      imageDescription: '',\n      // General Settings\n      taglineEnabled: true,\n      tagline: text || 'You will read <br> <span class=\"text-pink  \">this</span> first',\n      titleEnabled: true,\n      titleText: 'And you will read this last',\n      paragraphEnabled: true,\n      paragraphText: 'Then you will read this.',\n      swipeIndicatorEnabled: true,\n      swipeIndicatorText: 'Swipe',\n      // Alignment Settings\n      imageAlignment: 'center',\n      // Background Image Settings\n      backgroundImageEnabled: false,\n      backgroundImageKeywords: '',\n      backgroundImageOpacity: 75,\n      applyBackgroundToAllSlides: false\n    };\n    return _this;\n  }\n  _inherits(CarouselSlideElement, _GridElement);\n  return _createClass(CarouselSlideElement, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      // Dom node should be only on for each element\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', this.getClassName());\n      }\n\n      // reset domNode\n      while (this.domNode.firstChild) {\n        this.domNode.removeChild(this.domNode.firstChild);\n      }\n\n      //\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        cells: this.cells.map(function (cell) {\n          return '<div cell-anchor=\"' + cell.id + '\">' + cell.id + '</div>';\n        }),\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats),\n        contentStyleString: this.getContentStyleString(),\n        // Intro Type Settings\n        selectedEmoji: this.getFormat('selectedEmoji'),\n        headshotPosition: this.getFormat('headshotPosition'),\n        headshotSize: this.getFormat('headshotSize'),\n        headshotBorderStyle: this.getFormat('headshotBorderStyle'),\n        headshotBorderColor: this.getFormat('headshotBorderColor'),\n        imageType: this.getFormat('imageType'),\n        imageDescription: this.getFormat('imageDescription'),\n        // General Settings\n        taglineEnabled: this.getFormat('taglineEnabled'),\n        tagline: this.getFormat('tagline'),\n        titleEnabled: this.getFormat('titleEnabled'),\n        titleText: this.getFormat('titleText'),\n        paragraphEnabled: this.getFormat('paragraphEnabled'),\n        paragraphText: this.getFormat('paragraphText'),\n        swipeIndicatorEnabled: this.getFormat('swipeIndicatorEnabled'),\n        swipeIndicatorText: this.getFormat('swipeIndicatorText'),\n        // Alignment Settings\n        imageAlignment: this.getFormat('imageAlignment'),\n        // Background Image Settings\n        backgroundImageEnabled: this.getFormat('backgroundImageEnabled'),\n        backgroundImageKeywords: this.getFormat('backgroundImageKeywords'),\n        backgroundImageOpacity: this.getFormat('backgroundImageOpacity'),\n        applyBackgroundToAllSlides: this.getFormat('applyBackgroundToAllSlides')\n      });\n\n      // render cells\n      this.cells.forEach(function (cell) {\n        var anchor = _this2.domNode.querySelector('[cell-anchor=\"' + cell.id + '\"]');\n\n        // render block\n        var domNode = cell.render();\n\n        // Dome append child\n        anchor.parentNode.insertBefore(domNode, anchor);\n\n        //\n        builder.uiManager.addElement(cell);\n\n        //\n        anchor.remove();\n      });\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: this.getClassName(),\n        template: this.template,\n        type: this.type,\n        cells: this.cells.map(function (cell) {\n          return cell.getData();\n        }),\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [new _CarouselSlideControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]({\n        // Pass all carousel settings attributes - flat structure\n        // Intro Type Settings\n        selectedEmoji: this.getFormat('selectedEmoji'),\n        headshotPosition: this.getFormat('headshotPosition'),\n        headshotSize: this.getFormat('headshotSize'),\n        headshotBorderStyle: this.getFormat('headshotBorderStyle'),\n        headshotBorderColor: this.getFormat('headshotBorderColor'),\n        imageType: this.getFormat('imageType'),\n        imageDescription: this.getFormat('imageDescription'),\n        // General Settings\n        taglineEnabled: this.getFormat('taglineEnabled'),\n        tagline: this.getFormat('tagline'),\n        titleEnabled: this.getFormat('titleEnabled'),\n        titleText: this.getFormat('titleText'),\n        paragraphEnabled: this.getFormat('paragraphEnabled'),\n        paragraphText: this.getFormat('paragraphText'),\n        swipeIndicatorEnabled: this.getFormat('swipeIndicatorEnabled'),\n        swipeIndicatorText: this.getFormat('swipeIndicatorText'),\n        // Alignment Settings\n        imageAlignment: this.getFormat('imageAlignment'),\n        // Background Image Settings\n        backgroundImageEnabled: this.getFormat('backgroundImageEnabled'),\n        backgroundImageKeywords: this.getFormat('backgroundImageKeywords'),\n        backgroundImageOpacity: this.getFormat('backgroundImageOpacity'),\n        applyBackgroundToAllSlides: this.getFormat('applyBackgroundToAllSlides')\n      }, {\n        // Intro Type Settings Callbacks\n        setSelectedEmoji: function setSelectedEmoji(value) {\n          console.log('CarouselSlideElement: setSelectedEmoji called with:', value);\n          _this3.setFormat('selectedEmoji', value);\n          _this3.render();\n        },\n        setHeadshotPosition: function setHeadshotPosition(value) {\n          console.log('CarouselSlideElement: setHeadshotPosition called with:', value);\n          _this3.setFormat('headshotPosition', value);\n          _this3.render();\n        },\n        setHeadshotSize: function setHeadshotSize(value) {\n          console.log('CarouselSlideElement: setHeadshotSize called with:', value);\n          _this3.setFormat('headshotSize', value);\n          _this3.render();\n        },\n        setHeadshotBorderStyle: function setHeadshotBorderStyle(value) {\n          console.log('CarouselSlideElement: setHeadshotBorderStyle called with:', value);\n          _this3.setFormat('headshotBorderStyle', value);\n          _this3.render();\n        },\n        setHeadshotBorderColor: function setHeadshotBorderColor(value) {\n          console.log('CarouselSlideElement: setHeadshotBorderColor called with:', value);\n          _this3.setFormat('headshotBorderColor', value);\n          _this3.render();\n        },\n        setImageType: function setImageType(value) {\n          console.log('CarouselSlideElement: setImageType called with:', value);\n          _this3.setFormat('imageType', value);\n          _this3.render();\n        },\n        setImageDescription: function setImageDescription(value) {\n          console.log('CarouselSlideElement: setImageDescription called with:', value);\n          _this3.setFormat('imageDescription', value);\n          _this3.render();\n        },\n        // General Settings Callbacks\n        setTaglineEnabled: function setTaglineEnabled(value) {\n          console.log('CarouselSlideElement: setTaglineEnabled called with:', value);\n          _this3.setFormat('taglineEnabled', value);\n          _this3.render();\n        },\n        setTagline: function setTagline(value) {\n          console.log('CarouselSlideElement: setTagline called with:', value);\n          _this3.setFormat('tagline', value);\n          _this3.render();\n        },\n        setTitleEnabled: function setTitleEnabled(value) {\n          console.log('CarouselSlideElement: setTitleEnabled called with:', value);\n          _this3.setFormat('titleEnabled', value);\n          _this3.render();\n        },\n        setTitleText: function setTitleText(value) {\n          console.log('CarouselSlideElement: setTitleText called with:', value);\n          _this3.setFormat('titleText', value);\n          _this3.render();\n        },\n        setParagraphEnabled: function setParagraphEnabled(value) {\n          console.log('CarouselSlideElement: setParagraphEnabled called with:', value);\n          _this3.setFormat('paragraphEnabled', value);\n          _this3.render();\n        },\n        setParagraphText: function setParagraphText(value) {\n          console.log('CarouselSlideElement: setParagraphText called with:', value);\n          _this3.setFormat('paragraphText', value);\n          _this3.render();\n        },\n        setSwipeIndicatorEnabled: function setSwipeIndicatorEnabled(value) {\n          console.log('CarouselSlideElement: setSwipeIndicatorEnabled called with:', value);\n          _this3.setFormat('swipeIndicatorEnabled', value);\n          _this3.render();\n        },\n        setSwipeIndicatorText: function setSwipeIndicatorText(value) {\n          console.log('CarouselSlideElement: setSwipeIndicatorText called with:', value);\n          _this3.setFormat('swipeIndicatorText', value);\n          _this3.render();\n        },\n        // Alignment Settings Callbacks\n        setImageAlignment: function setImageAlignment(value) {\n          console.log('CarouselSlideElement: setImageAlignment called with:', value);\n          _this3.setFormat('imageAlignment', value);\n          _this3.render();\n        },\n        // Background Image Settings Callbacks\n        setBackgroundImageEnabled: function setBackgroundImageEnabled(value) {\n          console.log('CarouselSlideElement: setBackgroundImageEnabled called with:', value);\n          _this3.setFormat('backgroundImageEnabled', value);\n          _this3.render();\n        },\n        setBackgroundImageKeywords: function setBackgroundImageKeywords(value) {\n          console.log('CarouselSlideElement: setBackgroundImageKeywords called with:', value);\n          _this3.setFormat('backgroundImageKeywords', value);\n          _this3.render();\n        },\n        setBackgroundImageOpacity: function setBackgroundImageOpacity(value) {\n          console.log('CarouselSlideElement: setBackgroundImageOpacity called with:', value);\n          _this3.setFormat('backgroundImageOpacity', value);\n          _this3.render();\n        },\n        setApplyBackgroundToAllSlides: function setApplyBackgroundToAllSlides(value) {\n          console.log('CarouselSlideElement: setApplyBackgroundToAllSlides called with:', value);\n          _this3.setFormat('applyBackgroundToAllSlides', value);\n          _this3.render();\n        },\n        // Action Callbacks\n        generateImage: function generateImage(description, type) {\n          console.log('CarouselSlideElement: generateImage called with:', description, type);\n          // TODO: Implement image generation logic\n        },\n        searchBackgroundImage: function searchBackgroundImage(keywords) {\n          console.log('CarouselSlideElement: searchBackgroundImage called with:', keywords);\n          // TODO: Implement background image search logic\n        },\n        generateBackgroundImage: function generateBackgroundImage(keywords) {\n          console.log('CarouselSlideElement: generateBackgroundImage called with:', keywords);\n          // TODO: Implement background image generation logic\n        },\n        uploadBackgroundImage: function uploadBackgroundImage() {\n          console.log('CarouselSlideElement: uploadBackgroundImage called');\n          // TODO: Implement background image upload logic\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var cellClass = eval(data.cells[0].name);\n      var cells = data.cells.map(function (cell) {\n        return cellClass.parse(cell);\n      });\n      var gridElement = new this(data.template);\n      gridElement.appendCells(cells);\n\n      // formats\n      if (data.formats) {\n        // Background properties\n        gridElement.setFormat('background_color', data.formats.background_color);\n        gridElement.setFormat('background_image', data.formats.background_image);\n        gridElement.setFormat('background_position', data.formats.background_position);\n        gridElement.setFormat('background_size', data.formats.background_size);\n        gridElement.setFormat('background_repeat', data.formats.background_repeat);\n\n        // Padding properties\n        gridElement.setFormat('padding_top', data.formats.padding_top);\n        gridElement.setFormat('padding_right', data.formats.padding_right);\n        gridElement.setFormat('padding_bottom', data.formats.padding_bottom);\n        gridElement.setFormat('padding_left', data.formats.padding_left);\n\n        // Content properties\n        gridElement.setFormat('content_display', data.formats.content_display);\n        gridElement.setFormat('content_flex_wrap', data.formats.content_flex_wrap);\n        gridElement.setFormat('content_justify_content', data.formats.content_justify_content);\n        gridElement.setFormat('content_align_items', data.formats.content_align_items);\n        gridElement.setFormat('content_gap', data.formats.content_gap);\n\n        // Intro Type Settings\n        gridElement.setFormat('selectedEmoji', data.formats.selectedEmoji || '');\n        gridElement.setFormat('headshotPosition', data.formats.headshotPosition || 'center');\n        gridElement.setFormat('headshotSize', data.formats.headshotSize || 'medium');\n        gridElement.setFormat('headshotBorderStyle', data.formats.headshotBorderStyle || 'circle');\n        gridElement.setFormat('headshotBorderColor', data.formats.headshotBorderColor || '#6f42c1');\n        gridElement.setFormat('imageType', data.formats.imageType || '3d-icon');\n        gridElement.setFormat('imageDescription', data.formats.imageDescription || '');\n\n        // General Settings\n        gridElement.setFormat('taglineEnabled', data.formats.taglineEnabled !== undefined ? data.formats.taglineEnabled : true);\n        gridElement.setFormat('tagline', data.formats.tagline || 'And you will read this last');\n        gridElement.setFormat('titleEnabled', data.formats.titleEnabled !== undefined ? data.formats.titleEnabled : true);\n        gridElement.setFormat('titleText', data.formats.titleText || 'You will read this first');\n        gridElement.setFormat('paragraphEnabled', data.formats.paragraphEnabled !== undefined ? data.formats.paragraphEnabled : true);\n        gridElement.setFormat('paragraphText', data.formats.paragraphText || 'Then you will read this.');\n        gridElement.setFormat('swipeIndicatorEnabled', data.formats.swipeIndicatorEnabled !== undefined ? data.formats.swipeIndicatorEnabled : true);\n        gridElement.setFormat('swipeIndicatorText', data.formats.swipeIndicatorText || 'Swipe');\n\n        // Alignment Settings\n        gridElement.setFormat('imageAlignment', data.formats.imageAlignment || 'center');\n\n        // Background Image Settings\n        gridElement.setFormat('backgroundImageEnabled', data.formats.backgroundImageEnabled !== undefined ? data.formats.backgroundImageEnabled : false);\n        gridElement.setFormat('backgroundImageKeywords', data.formats.backgroundImageKeywords || '');\n        gridElement.setFormat('backgroundImageOpacity', data.formats.backgroundImageOpacity || 75);\n        gridElement.setFormat('applyBackgroundToAllSlides', data.formats.applyBackgroundToAllSlides !== undefined ? data.formats.applyBackgroundToAllSlides : false);\n      }\n      return gridElement;\n    }\n  }]);\n}(_GridElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CarouselSlideElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/CarouselSlideElement.js?");

/***/ }),

/***/ "./src/includes/CellElement.js":
/*!*************************************!*\
  !*** ./src/includes/CellElement.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _BlockElement_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BlockElement.js */ \"./src/includes/BlockElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _createForOfIteratorHelper(r, e) { var t = \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && \"number\" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError(\"Invalid attempt to iterate non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t[\"return\"] || t[\"return\"](); } finally { if (u) throw o; } } }; }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar CellElement = /*#__PURE__*/function (_BaseElement) {\n  function CellElement(template) {\n    var _this;\n    _classCallCheck(this, CellElement);\n    _this = _callSuper(this, CellElement);\n    _this.template = template;\n    _this.blocks = [];\n    _this.domNode = null;\n    _this.Auto = {\n      heightAuto: false,\n      widthAuto: false\n    };\n\n    // formats\n    _this.formats = {\n      // Background settings\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      // Padding settings\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: '',\n      height: ''\n    };\n    return _this;\n  }\n  _inherits(CellElement, _BaseElement);\n  return _createClass(CellElement, [{\n    key: \"isDroppable\",\n    value: function isDroppable() {\n      return true;\n    }\n  }, {\n    key: \"canDropInside\",\n    value: function canDropInside() {\n      return true;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      // Dom node should be only on for each element\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', this.getClassName());\n      }\n\n      // reset domNode\n      while (this.domNode.firstChild) {\n        this.domNode.removeChild(this.domNode.firstChild);\n      }\n\n      //\n      var html = this.renderTemplate(this.template, {\n        blocks: this.blocks.map(function (block) {\n          return '<div block-anchor=\"' + block.id + '\">' + block.id + '</div>';\n        }),\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats)\n      });\n\n      // Create a temporary container to parse the HTML\n      var temp = document.createElement('div');\n      temp.innerHTML = html;\n\n      // Replace domNode's attributes and content\n      var parsedDiv = temp.firstElementChild;\n\n      // Copy attributes from parsedDiv to domNode\n      var _iterator = _createForOfIteratorHelper(parsedDiv.attributes),\n        _step;\n      try {\n        for (_iterator.s(); !(_step = _iterator.n()).done;) {\n          var attr = _step.value;\n          this.domNode.setAttribute(attr.name, attr.value);\n        }\n\n        // set innerHTML of domNode\n      } catch (err) {\n        _iterator.e(err);\n      } finally {\n        _iterator.f();\n      }\n      this.domNode.innerHTML = parsedDiv.innerHTML;\n\n      // render blocks\n      this.blocks.forEach(function (block) {\n        var anchor = _this2.domNode.querySelector('[block-anchor=\"' + block.id + '\"]');\n\n        // render block\n        var domNode = block.render();\n\n        // Dome append child\n        anchor.parentNode.insertBefore(domNode, anchor);\n\n        //\n        builder.uiManager.addElement(block);\n        builder.uiManager.addDraggableItem(block);\n\n        //\n        anchor.remove();\n      });\n\n      // empty cell\n      if (this.blocks.length == 0) {\n        this.domNode.innerHTML = \"\\n                <div style=\\\"display: flex;\\n                    align-items: center;\\n                    justify-content: center;\\n                    height: 100%;\\n                    min-height: 100px;\\n                    background-color: rgba(34,83,159,0.05);\\n                    border: dashed 1px rgba(120, 130, 150, 0.5);\\n                    \\\">\\n                    <svg style=\\\"width: 100px;\\n                        display: inline-block;\\n                        margin: auto;\\n                        opacity: 1;\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" height=\\\"48px\\\" viewBox=\\\"0 -960 960 960\\\" width=\\\"48px\\\" fill=\\\"#808080\\\"><path d=\\\"M345-285q-24 0-42-18t-18-42v-435q0-24 18-42t42-18h435q24 0 42 18t18 42v435q0 24-18 42t-42 18H345Zm0-60h435v-435H345v435ZM149.82-615q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Z\\\"/></svg>\\n                    \\n                </div>\\n            \";\n      }\n\n      // Apply the styles directly to the DOM node\n      // You can remove or adjust these direct style settings now that we have styleString\n      // formats\n      this.domNode.style.backgroundColor = this.getFormat('background_color');\n      this.domNode.style.paddingTop = this.getFormat('padding_top') + 'px';\n      this.domNode.style.paddingRight = this.getFormat('padding_right') + 'px';\n      this.domNode.style.paddingBottom = this.getFormat('padding_bottom') + 'px';\n      this.domNode.style.paddingLeft = this.getFormat('padding_left') + 'px';\n      if (this.getFormat('width') !== '') {\n        this.domNode.style.width = this.getFormat('width', 'auto') === 'auto' ? 'auto' : this.getFormat('width') + 'px';\n      }\n      if (this.getFormat('height') !== '') {\n        this.domNode.style.height = this.getFormat('height', 'auto') === 'auto' ? 'auto' : this.getFormat('height') + 'px';\n      }\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n\n    // Add getStyleString method similar to GridElement\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        width: function width(v) {\n          return v !== '' ? v === 'auto' ? \"width: auto !important;\" : \"width: \".concat(v, \"px !important;\") : '';\n        },\n        height: function height(v) {\n          return v !== '' ? v === 'auto' ? \"height: auto !important;\" : \"height: \".concat(v, \"px !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }, {\n    key: \"appendBlock\",\n    value: function appendBlock(block) {\n      // private\n      // Add block to blocks array and append to page element\n      this.blocks.push(block);\n    }\n  }, {\n    key: \"newBlock\",\n    value: function newBlock() {\n      return new _BlockElement_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"](this);\n    }\n  }, {\n    key: \"appendElements\",\n    value: function appendElements(elements, referenceBlock) {\n      var _this3 = this;\n      // public\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this3.newBlock(element);\n        newBlock.append(element);\n        _this3.appendBlock(newBlock);\n\n        // set element container\n        _this3.container = _this3;\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"addElementsAfter\",\n    value: function addElementsAfter(elements, referenceBlock) {\n      var _this4 = this;\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this4.newBlock();\n        newBlock.appendElements([element]);\n        var index = _this4.blocks.indexOf(referenceBlock);\n        if (index === -1) {\n          throw new Error('Reference block not found');\n        }\n        _this4.blocks.splice(index + 1, 0, newBlock);\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"addElementsBefore\",\n    value: function addElementsBefore(elements, referenceBlock) {\n      var _this5 = this;\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this5.newBlock();\n        newBlock.appendElements([element]);\n        var index = _this5.blocks.indexOf(referenceBlock);\n        if (index === -1) {\n          throw new Error('Reference block not found');\n        }\n        _this5.blocks.splice(index, 0, newBlock);\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: this.getClassName(),\n        template: this.template,\n        elementLists: this.blocks.map(function (block) {\n          return block.elements.map(function (element) {\n            return element.getData();\n          });\n        }),\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"removeElement\",\n    value: function removeElement(element) {\n      var _this6 = this;\n      // if element is a block of page element\n      this.blocks.forEach(function (block) {\n        if (block == element) {\n          _this6.blocks = _this6.blocks.filter(function (bl) {\n            return bl !== element;\n          });\n\n          //\n          _this6.render();\n        }\n      });\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this7 = this;\n      return [\n      // ...other controls...\n      new PaddingMarginControl('Padding', {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      }, {\n        setValues: function setValues(values) {\n          _this7.setFormat('padding_top', values.top);\n          _this7.setFormat('padding_right', values.right);\n          _this7.setFormat('padding_bottom', values.bottom);\n          _this7.setFormat('padding_left', values.left);\n          _this7.render();\n        }\n      }), new CustomRangeControl('Width', 0, 2000, this.getFormat('width', 'auto') === 'auto', {\n        setValue: function setValue(value, isAuto) {\n          _this7.setFormat('width', isAuto ? 'auto' : value);\n          _this7.render();\n        }\n      }, this.getFormat('width', 'auto') === 'auto' ? 300 : parseInt(this.getFormat('width'), 10) // Pass current value\n      ), new CustomRangeControl('Height', 0, 2000, this.getFormat('height', 'auto') === 'auto', {\n        setValue: function setValue(value, isAuto) {\n          _this7.setFormat('height', isAuto ? 'auto' : value);\n          _this7.render();\n        }\n      }, this.getFormat('height', 'auto') === 'auto' ? 100 : parseInt(this.getFormat('height'), 10) // Pass current value\n      ), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image') ? this.getFullUrl(this.getFormat('background_image')) : '',\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this7.setFormat('background_color', values.color);\n          _this7.setFormat('background_image', values.image);\n          _this7.setFormat('background_position', values.position);\n          _this7.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this7.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this7.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var cell = new this(data.template);\n      if (data.formats) {\n        cell.setFormat('background_color', data.formats.background_color);\n        cell.setFormat('padding_top', data.formats.padding_top);\n        cell.setFormat('padding_right', data.formats.padding_right);\n        cell.setFormat('padding_bottom', data.formats.padding_bottom);\n        cell.setFormat('padding_left', data.formats.padding_left);\n        if (data.formats.width !== '') {\n          cell.setFormat('width', data.formats.width === 'auto' ? 'auto' : data.formats.width + 'px');\n        }\n        if (data.formats.height !== '') {\n          cell.setFormat('height', data.formats.height === 'auto' ? 'auto' : data.formats.height + 'px');\n        }\n        if (data.formats.background_image) {\n          cell.setFormat('background_image', data.formats.background_image);\n        }\n        if (data.formats.background_position) {\n          cell.setFormat('background_position', data.formats.background_position);\n        }\n        if (data.formats.background_repeat) {\n          cell.setFormat('background_repeat', data.formats.background_repeat);\n        }\n      }\n      data.elementLists.forEach(function (elementList) {\n        var elements = elementList.map(_ElementFactory_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].createElement);\n        cell.appendElements(elements);\n      });\n      return cell;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CellElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/CellElement.js?");

/***/ }),

/***/ "./src/includes/CheckboxControl.js":
/*!*****************************************!*\
  !*** ./src/includes/CheckboxControl.js ***!
  \*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar CheckboxControl = /*#__PURE__*/function () {\n  function CheckboxControl(label, description, value, callback) {\n    _classCallCheck(this, CheckboxControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial value of the text input\n    this.description = description; // Description for the checkbox\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(CheckboxControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3 d-flex align-items-center\\\">\\n                <div>\\n                    <label class=\\\"form-label fw-semibold\\\">\" + this.label + \"</label>\\n                    <p class=\\\"mb-0\\\">\" + this.description + \"</p>\\n                </div>\\n                <div class=\\\"ms-auto\\\">\\n                    <input type=\\\"checkbox\\\" name=\\\"checkbox\\\" class=\\\"builder-checkbox-modern\\\" id=\\\"checkbox_\" + this.id + \"\\\" \".concat(this.value ? \"checked\" : \"\", \" />\\n                    <label class=\\\"toggle-label\\\" for=\\\"checkbox_\") + this.id + \"\\\"></label>\\n                </div>\\n            </div>\\n        \";\n\n      // callback....\n      // add event listener to the checkbox\n      var checkbox = this.domNode.querySelector(\"#checkbox_\".concat(this.id));\n      checkbox.addEventListener(\"change\", function (e) {\n        _this.value = e.target.checked;\n\n        // Call the callback with the new value if a callback was provided\n        if (typeof _this.callback === \"function\") {\n          _this.callback(_this.value);\n        }\n      });\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Add a method to programmatically set the checkbox value\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var checkbox = this.domNode.querySelector(\"#checkbox_\".concat(this.id));\n      if (checkbox) {\n        checkbox.checked = this.value;\n\n        // Trigger the callback\n        if (typeof this.callback === \"function\") {\n          this.callback(this.value);\n        }\n      }\n    }\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CheckboxControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/CheckboxControl.js?");

/***/ }),

/***/ "./src/includes/ColorPickerControl.js":
/*!********************************************!*\
  !*** ./src/includes/ColorPickerControl.js ***!
  \********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ColorPickerControl = /*#__PURE__*/function () {\n  function ColorPickerControl(label, color, callback) {\n    _classCallCheck(this, ColorPickerControl);\n    this.id = '_' + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the control\n    this.color = color; // Initial color value\n    this.callback = callback; // Callback function to handle changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(ColorPickerControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <div class=\\\"d-flex align-items-center\\\">\\n                    <label class=\\\"form-label fw-semibold\\\" for=\\\"colorPickerInput\".concat(this.id, \"\\\">\").concat(this.label, \"</label>\\n                    <div id=\\\"colorPickerContainer\").concat(this.id, \"\\\" class=\\\"ms-auto\\\"></div>\\n                </div>\\n            </div>\\n        \");\n      var input = document.createElement(\"input\");\n      input.type = \"color\";\n      input.className = \"form-control form-control-color p-1\";\n      input.value = this.color;\n      input.id = \"colorPickerInput\".concat(this.id);\n\n      // Append the color picker input\n      this.domNode.querySelector(\"#colorPickerContainer\".concat(this.id)).appendChild(input);\n\n      //\n      this.colorInput = input;\n\n      // Add an event listener to handle input changes\n      this.colorInput.addEventListener('input', function (e) {\n        _this.callback.setColor(_this.colorInput.value); // Trigger the callback with the new color\n      });\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ColorPickerControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ColorPickerControl.js?");

/***/ }),

/***/ "./src/includes/CustomRangeControl.js":
/*!********************************************!*\
  !*** ./src/includes/CustomRangeControl.js ***!
  \********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar CustomRangeControl = /*#__PURE__*/function () {\n  function CustomRangeControl(label, min, max, isAuto, callback) {\n    var value = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : '';\n    _classCallCheck(this, CustomRangeControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.min = min; // Minimum value for the range\n    this.max = max; // Maximum value for the range\n    this.isAuto = isAuto; // Flag to indicate if the range is auto-adjusting\n    this.callback = callback; // Callback function to handle input changes\n\n    if (value === '' || value === 'auto') {\n      this.value = 48;\n    } else {\n      this.value = parseInt(value, 10);\n    }\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n    this.setupEventListeners(); // Set up event listeners\n  }\n  return _createClass(CustomRangeControl, [{\n    key: \"render\",\n    value: function render() {\n      this.domNode.innerHTML = \"\\n    <div class=\\\"py-2 px-3\\\">\\n      <div class=\\\"d-flex justify-content-between mb-2 align-items-center\\\">\\n        <h4 class=\\\"form-label fw-semibold mb-0\\\">\".concat(this.label, \"</h4>\\n        <div class=\\\"d-flex align-items-center gap-2 ms-3\\\">\\n          <span class=\\\"form-label mb-0\\\">Fixed</span>\\n          <div class=\\\"ms-auto\\\">\\n            <input type=\\\"checkbox\\\" class=\\\"builder-checkbox-modern\\\" id=\\\"toggle_\").concat(this.id, \"\\\" \").concat(this.isAuto ? 'checked' : '', \" />\\n            <label class=\\\"toggle-label\\\" for=\\\"toggle_\").concat(this.id, \"\\\"></label>\\n          </div>\\n          <span class=\\\"form-label mb-0\\\">Auto</span>\\n        </div>\\n      </div>\\n      <div class=\\\"d-flex justify-content-between align-items-center mb-0 pe-1 me-3\\\">\\n        <p class=\\\"mb-0 me-2\\\">\").concat(this.min, \"px</p>\\n        <p class=\\\"mb-0 pe-2 me-4\\\">\").concat(this.max, \"px</p>\\n      </div>\\n      <div class=\\\"d-flex\\\">\\n        <div class=\\\"flex-grow-1\\\">\\n          <input type=\\\"range\\\" min=\\\"\").concat(this.min, \"\\\" max=\\\"\").concat(this.max, \"\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-range slider w-100\\\" id=\\\"\").concat(this.id, \"_slider\\\" \").concat(this.isAuto ? 'disabled' : '', \">\\n        </div>\\n        <div style=\\\"min-width: 50px; text-align: right;\\\">\\n          <label for=\\\"\").concat(this.id, \"_slider\\\" class=\\\"form-label ms-2 mb-0\\\">\").concat(this.isAuto ? 'auto' : this.value + 'px', \"</label>\\n        </div>\\n      </div>\\n    </div>\");\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      var isAuto = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.isAuto;\n      this.value = newValue;\n      this.isAuto = isAuto;\n      this.render();\n      this.setupEventListeners();\n      if (this.callback && typeof this.callback.setValue === \"function\") {\n        this.callback.setValue(this.value, this.isAuto);\n      }\n    }\n  }, {\n    key: \"setupEventListeners\",\n    value: function setupEventListeners() {\n      var _this = this;\n      var rangeInput = this.domNode.querySelector(\"input[type=\\\"range\\\"]\");\n      var valueLabel = this.domNode.querySelector(\"label[for=\\\"\".concat(this.id, \"_slider\\\"]\"));\n      var autoSwitch = this.domNode.querySelector(\"#toggle_\".concat(this.id));\n\n      // Debounce variables\n      var debounceTimeout = null;\n      var debounceDelay = 50; // milliseconds\n\n      if (rangeInput) {\n        rangeInput.addEventListener(\"input\", function (event) {\n          _this.value = event.target.value;\n          if (valueLabel && !_this.isAuto) {\n            valueLabel.textContent = \"\".concat(_this.value, \"px\");\n          }\n\n          // Debounce the callback\n          if (debounceTimeout) clearTimeout(debounceTimeout);\n          debounceTimeout = setTimeout(function () {\n            if (_this.callback && typeof _this.callback.setValue === \"function\") {\n              _this.callback.setValue(_this.value, _this.isAuto);\n            }\n          }, debounceDelay);\n        });\n      }\n      if (autoSwitch) {\n        autoSwitch.addEventListener(\"change\", function (event) {\n          _this.isAuto = event.target.checked;\n          _this.render();\n          _this.setupEventListeners();\n          if (_this.callback && typeof _this.callback.setValue === \"function\") {\n            _this.callback.setValue(_this.value, _this.isAuto);\n          }\n        });\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CustomRangeControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/CustomRangeControl.js?");

/***/ }),

/***/ "./src/includes/DescriptionImageControl.js":
/*!*************************************************!*\
  !*** ./src/includes/DescriptionImageControl.js ***!
  \*************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _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 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 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 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; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar DescriptionImageControl = /*#__PURE__*/function () {\n  function DescriptionImageControl(label, items, callback) {\n    _classCallCheck(this, DescriptionImageControl);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.items = items; // Initial value of the text input [{image_url, label, url}]\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    // render\n    this.render();\n  }\n  return _createClass(DescriptionImageControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n                <div data-control=\\\"slist-container\\\" class=\\\"list-group\\\"></div>\\n                <div class=\\\"d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-primary btn-sm mt-3 d-flex align-items-center\\\" type=\\\"button\\\" data-control=\\\"add-item\\\">\\n                        <span class=\\\"material-symbols-rounded me-2\\\">add</span>\\n                        Add Item\\n                    </button>\\n                </div>\\n            </div>\\n        \");\n      var listContainer = this.getListContainer();\n\n      // Add event listener for the \"Add Item\" button\n      this.domNode.querySelector('[data-control=\"add-item\"]').addEventListener(\"click\", function () {\n        _this.items.push({\n          image_url: \"image/1_2_placeholder.png\",\n          title: \"\",\n          text: \"\"\n        });\n        _this.render();\n        if (_this.callback) {\n          _this.callback.setItems(_this.items); // Trigger the callback with updated items\n        }\n      });\n\n      // Render each item\n      this.items.forEach(function (item, index) {\n        var listItem = document.createElement(\"div\");\n        listItem.className = \"list-group-item bg-light position-relative\";\n        listItem.innerHTML = \"\\n                <div class=\\\"flex-grow-1\\\">\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"flex: 1;\\\">Image</label>\\n                        <div class=\\\"d-flex align-items-center\\\" style=\\\"flex: 2;\\\">\\n                            <img style=\\\"max-width:100px; height:auto;\\\" src=\\\"\".concat(item.image_url || \"image/1_2_placeholder.png\", \"\\\" />\\n                            <div class=\\\"ms-2\\\">\\n                                <button class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center mb-1\\\" type=\\\"button\\\" data-control=\\\"upload-image\\\" data-index=\\\"\").concat(index, \"\\\">\\n                                    <span class=\\\"material-symbols-rounded\\\">upload</span>\\n                                </button>\\n                                <button class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center\\\" type=\\\"button\\\" data-control=\\\"remove-image\\\" data-index=\\\"\").concat(index, \"\\\">\\n                                    <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                                </button>\\n                            </div>\\n                        </div>\\n                    </div>\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"flex: 1;\\\">Title</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(item.title || \"\", \"\\\" data-index=\\\"\").concat(index, \"\\\" data-field=\\\"title\\\" style=\\\"flex: 2;\\\">\\n                    </div>\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"flex: 1;\\\">Text</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(item.text || \"\", \"\\\" data-index=\\\"\").concat(index, \"\\\" data-field=\\\"text\\\" style=\\\"flex: 2;\\\">\\n                    </div>\\n                </div>\\n                <div class=\\\"mt-2 pt-2 border-top d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-danger btn-sm d-flex align-items-center px-1\\\" type=\\\"button\\\" data-control=\\\"remove-item\\\" data-index=\\\"\").concat(index, \"\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                    </button>\\n                </div>\\n                <div class=\\\"position-absolute bottom-0 start-0 ms-2 mb-2 fw-semibold text-muted opacity-25\\\" style=\\\"z-index: 0; pointer-events: none;font-size: 16px;\\\">\\n                    #\").concat(index + 1, \"\\n                </div>\\n            \");\n\n        // Add image upload handler\n        listItem.querySelector('[data-control=\"upload-image\"]').addEventListener(\"click\", function (e) {\n          var itemIndex = e.target.closest('[data-control=\"upload-image\"]').getAttribute(\"data-index\");\n          _this.browserAndUpload(itemIndex);\n        });\n\n        // Add image remove handler\n        listItem.querySelector('[data-control=\"remove-image\"]').addEventListener(\"click\", function (e) {\n          var itemIndex = e.target.closest('[data-control=\"remove-image\"]').getAttribute(\"data-index\");\n          _this.items[itemIndex].image_url = \"data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTYgMjk2Ij48ZyBpZD0iTGF5ZXJfMS0yIj48cmVjdCB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I2U2ZTZlNjsiLz48cGF0aCBkPSJNMjM2Ljk4LDk5LjQ0Yy0xLjEyLDAtMi4wMi45MS0yLjAyLDIuMDJ2OTMuMzZjMCw0LjktMi4zLDkuMjctNS44NywxMi4xMWwtNDYuMS00Ny4yM2MtLjc1LS43Ny0xLjk3LS44Mi0yLjc4LS4xMmwtMzIuMTgsMjcuOTgtNS43OS01Ljk1Yy0uNzgtLjgtMi4wNi0uODItMi44Ni0uMDQtLjguNzgtLjgyLDIuMDYtLjA0LDIuODZsNy4xMyw3LjMzYy43NS43NywxLjk3LjgyLDIuNzguMTJsMzIuMTgtMjcuOTgsNDQuMDksNDUuMThjLTEuODYuNzktMy45LDEuMjMtNi4wNSwxLjIzaC0xMTIuNjRjLTEuMTIsMC0yLjAyLjktMi4wMiwyLjAycy45MSwyLjAyLDIuMDIsMi4wMmgxMTIuNjRjMTAuNzcsMCwxOS41My04Ljc2LDE5LjUzLTE5LjUzdi05My4zNmMwLTEuMTItLjktMi4wMi0yLjAyLTIuMDJaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0yMzguNDgsNjYuOWMtLjc1LS44My0yLjAzLS45LTIuODYtLjE2bC0xNi45MywxNS4xOEg3Ni4zNmMtMTAuNzcsMC0xOS41Myw4Ljc2LTE5LjUzLDE5LjUzdjkzLjM2YzAsOS4xNiw2LjM2LDE2Ljg2LDE0Ljg5LDE4Ljk1bC0xNC4yMiwxMi43NWMtLjgzLjc0LS45LDIuMDMtLjE2LDIuODYuNC40NS45NS42NywxLjUxLjY3LjQ4LDAsLjk2LS4xNywxLjM1LS41MkwyMzguMzMsNjkuNzZjLjgzLS43NS45LTIuMDMuMTYtMi44NlpNNzYuMzYsODUuOThoMTM3LjgybC04OC4wOSw3OS4wMi0yMS44My0yMi40NWMtLjc2LS43OC0xLjk5LS44Mi0yLjgtLjA5bC00MC41NywzNi40NXYtNzcuNDVjMC04LjU0LDYuOTQtMTUuNDgsMTUuNDgtMTUuNDhaTTYwLjg4LDE5NC44MnYtMTAuNDdsNDEuODMtMzcuNTgsMjAuMzYsMjAuOTQtNDcuNDQsNDIuNTVjLTguMTktLjM5LTE0Ljc1LTcuMTUtMTQuNzUtMTUuNDRaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0xMjIuODMsMTI5LjEzYy04LjE5LDAtMTQuODUtNi42Ni0xNC44NS0xNC44NXM2LjY2LTE0Ljg1LDE0Ljg1LTE0Ljg1LDE0Ljg1LDYuNjYsMTQuODUsMTQuODUtNi42NiwxNC44NS0xNC44NSwxNC44NVpNMTIyLjgzLDEwMy40OGMtNS45NSwwLTEwLjgsNC44NC0xMC44LDEwLjhzNC44NCwxMC44LDEwLjgsMTAuOCwxMC44LTQuODQsMTAuOC0xMC44LTQuODQtMTAuOC0xMC44LTEwLjhaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjwvZz48L3N2Zz4=\";\n          _this.render();\n          if (_this.callback) {\n            _this.callback.setItems(_this.items);\n          }\n        });\n\n        // Add event listeners for input changes\n        listItem.querySelectorAll(\"input\").forEach(function (input) {\n          input.addEventListener(\"input\", function (e) {\n            var field = e.target.getAttribute(\"data-field\");\n            var itemIndex = e.target.getAttribute(\"data-index\");\n            _this.items[itemIndex][field] = e.target.value; // Update the item\n            if (_this.callback) {\n              _this.callback.setItems(_this.items); // Trigger the callback with updated items\n            }\n          });\n        });\n\n        // Add event listener for the \"Remove Item\" button\n        listItem.querySelector('[data-control=\"remove-item\"]').addEventListener(\"click\", function (e) {\n          var itemIndex = e.target.closest('[data-control=\"remove-item\"]').getAttribute(\"data-index\");\n          _this.items.splice(itemIndex, 1); // Remove the item\n          _this.render();\n          if (_this.callback) {\n            _this.callback.setItems(_this.items); // Trigger the callback with updated items\n          }\n        });\n        listContainer.appendChild(listItem);\n      });\n    }\n  }, {\n    key: \"getListContainer\",\n    value: function getListContainer() {\n      return this.domNode.querySelector('[data-control=\"slist-container\"]');\n    }\n\n    // Add this new method to handle file upload\n  }, {\n    key: \"browserAndUpload\",\n    value: function browserAndUpload(itemIndex) {\n      var _this2 = this;\n      var input = document.createElement(\"input\");\n      input.type = \"file\";\n      input.accept = \"image/*\";\n      input.addEventListener(\"change\", /*#__PURE__*/function () {\n        var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {\n          var file, formData, response, result;\n          return _regeneratorRuntime().wrap(function _callee$(_context) {\n            while (1) switch (_context.prev = _context.next) {\n              case 0:\n                file = event.target.files[0];\n                if (!file) {\n                  _context.next = 21;\n                  break;\n                }\n                formData = new FormData();\n                formData.append(\"file\", file);\n                _context.prev = 4;\n                _context.next = 7;\n                return fetch(builder.assetUploadHandler, {\n                  method: \"POST\",\n                  body: formData\n                });\n              case 7:\n                response = _context.sent;\n                if (!response.ok) {\n                  _context.next = 15;\n                  break;\n                }\n                _context.next = 11;\n                return response.json();\n              case 11:\n                result = _context.sent;\n                if (result.url) {\n                  _this2.items[itemIndex].image_url = result.url;\n                  _this2.render();\n                  if (_this2.callback) {\n                    _this2.callback.setItems(_this2.items);\n                  }\n                } else {\n                  console.error(\"Upload failed: No URL returned\");\n                }\n                _context.next = 16;\n                break;\n              case 15:\n                console.error(\"Upload failed:\", response.statusText);\n              case 16:\n                _context.next = 21;\n                break;\n              case 18:\n                _context.prev = 18;\n                _context.t0 = _context[\"catch\"](4);\n                console.error(\"Error uploading file:\", _context.t0);\n              case 21:\n              case \"end\":\n                return _context.stop();\n            }\n          }, _callee, null, [[4, 18]]);\n        }));\n        return function (_x) {\n          return _ref.apply(this, arguments);\n        };\n      }());\n      input.click();\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DescriptionImageControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/DescriptionImageControl.js?");

/***/ }),

/***/ "./src/includes/DescriptionImageElement.js":
/*!*************************************************!*\
  !*** ./src/includes/DescriptionImageElement.js ***!
  \*************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar DescriptionImageElement = /*#__PURE__*/function (_BaseElement) {\n  function DescriptionImageElement(template, items) {\n    var _this2;\n    _classCallCheck(this, DescriptionImageElement);\n    // [{image_url: '', title: '', text: '' }, ]\n    _this2 = _callSuper(this, DescriptionImageElement); // Call the parent class constructor\n    _this2.template = template;\n    _this2.items = items;\n    _this2.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: \"center\",\n      background_size: \"100%\",\n      background_repeat: \"no-repeat\",\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: \"560\",\n      height: \"315\"\n    };\n    return _this2;\n  }\n  _inherits(DescriptionImageElement, _BaseElement);\n  return _createClass(DescriptionImageElement, [{\n    key: \"render\",\n    value: function render() {\n      // create the DOM Node for the Element\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement(\"div\");\n        this.domNode.setAttribute(\"builder-element\", \"DescriptionImageElement\");\n      }\n\n      // render later\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        items: this.items\n      });\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat(\"background_image\");\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat(\"background_position\", \"center\");\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat(\"background_size\", \"100\").toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + \"%\";\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat(\"background_repeat\", \"no-repeat\").toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat(\"background_color\");\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: \"DescriptionImageElement\",\n        template: this.template,\n        // attributes\n        items: this.items\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      var _this = this;\n      return [new DescriptionImageControl(\"Images/Items List\", this.items.map(function (item) {\n        return {\n          image_url: _this.getFullUrl(item.image_url),\n          title: item.title,\n          text: item.text\n        };\n      }), {\n        setItems: function setItems(items) {\n          _this.items = items.map(function (item) {\n            return {\n              // Use _this.getFullUrl instead of this.getFullUrl\n              image_url: item.image_url,\n              title: item.title,\n              text: item.text\n            };\n          });\n          _this.render();\n        }\n      }), new BackgroundControl(\n      // label\n      \"Background Settings\",\n      // values\n      {\n        color: this.getFormat(\"background_color\", \"#ffffff\"),\n        image: this.getFormat(\"background_image\", \"\"),\n        position: this.getFormat(\"background_position\", \"center\"),\n        size: this.getFormat(\"background_size\", \"100\").toString().replace(\"%\", \"\"),\n        toRepeat: this.getFormat(\"background_repeat\", \"no-repeat\") === \"repeat\"\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat(\"background_color\", values.color);\n          _this3.setFormat(\"background_image\", values.image);\n          _this3.setFormat(\"background_position\", values.position);\n          _this3.setFormat(\"background_size\", parseInt(values.size, 10) || 100);\n          _this3.setFormat(\"background_repeat\", values.toRepeat ? \"repeat\" : \"no-repeat\");\n          _this3.render();\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new ButtonElement(data.template, data.text);\n      if (data.formats) {\n        e.setFormat(\"background_color\", data.formats.background_color);\n        e.setFormat(\"background_image\", data.formats.background_image);\n        e.setFormat(\"background_position\", data.formats.background_position);\n        e.setFormat(\"background_size\", data.formats.background_size);\n        e.setFormat(\"background_repeat\", data.formats.background_repeat);\n        e.setFormat(\"font_family\", data.formats.font_family);\n        e.setFormat(\"font_style\", data.formats.font_style);\n        e.setFormat(\"font_weight\", data.formats.font_weight);\n        e.setFormat(\"font_size\", data.formats.font_size);\n        e.setFormat(\"background_color\", data.formats.background_color);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DescriptionImageElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/DescriptionImageElement.js?");

/***/ }),

/***/ "./src/includes/DropdownControl.js":
/*!*****************************************!*\
  !*** ./src/includes/DropdownControl.js ***!
  \*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar DropdownControl = /*#__PURE__*/function () {\n  function DropdownControl(label, value, options, callback) {\n    _classCallCheck(this, DropdownControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the select control\n    this.value = value; // Initial value of the select\n    this.options = options; // Options for the select\n    this.callback = callback; // Callback function to handle selection changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(DropdownControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      var selectOptions = \"\";\n\n      // Create the select options\n      this.options.forEach(function (option) {\n        var isSelected = _this.value === option.value ? 'selected' : '';\n        selectOptions += \"\\n        <option value=\\\"\".concat(option.value, \"\\\" \").concat(isSelected, \">\").concat(option.label, \"</option>\\n      \");\n      });\n      this.domNode.innerHTML = \"<div class=\\\"py-2 px-3 container-fluid builder-select-container\\\">\\n      <label class=\\\"form-label fw-semibold d-block mb-2\\\" for=\\\"select_\".concat(this.id, \"\\\">\").concat(this.label, \"</label>\\n      <select id=\\\"select_\").concat(this.id, \"\\\" class=\\\"form-select py-2 builder-select w-100\\\">\\n        \").concat(selectOptions, \"\\n      </select>\\n    </div>\");\n\n      // Add event listener to the select element\n      var selectElement = this.domNode.querySelector(\"#select_\".concat(this.id));\n      if (selectElement) {\n        selectElement.addEventListener('change', function (e) {\n          var newValue = e.target.value;\n\n          // Update the value\n          _this.value = newValue;\n\n          // Call the callback with the new value if a callback was provided\n          if (typeof _this.callback === 'function') {\n            _this.callback(_this.value);\n          }\n        });\n      }\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var selectElement = this.domNode.querySelector(\"#select_\".concat(this.id));\n      if (selectElement) {\n        selectElement.value = newValue;\n\n        // Trigger the callback\n        if (typeof this.callback === 'function') {\n          this.callback(this.value);\n        }\n      }\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (DropdownControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/DropdownControl.js?");

/***/ }),

/***/ "./src/includes/ElementFactory.js":
/*!****************************************!*\
  !*** ./src/includes/ElementFactory.js ***!
  \****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _PElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PElement.js */ \"./src/includes/PElement.js\");\n/* harmony import */ var _MenuElement_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./MenuElement.js */ \"./src/includes/MenuElement.js\");\n/* harmony import */ var _GridElement_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./GridElement.js */ \"./src/includes/GridElement.js\");\n/* harmony import */ var _H1Element_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./H1Element.js */ \"./src/includes/H1Element.js\");\n/* harmony import */ var _ListElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ListElement.js */ \"./src/includes/ListElement.js\");\n/* harmony import */ var _ImageElement_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ImageElement.js */ \"./src/includes/ImageElement.js\");\n/* harmony import */ var _H3Element_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./H3Element.js */ \"./src/includes/H3Element.js\");\n/* harmony import */ var _H4Element_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./H4Element.js */ \"./src/includes/H4Element.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\n\n\n\n\n\n\n\nvar ElementFactory = /*#__PURE__*/function () {\n  function ElementFactory() {\n    _classCallCheck(this, ElementFactory);\n  }\n  return _createClass(ElementFactory, null, [{\n    key: \"createElement\",\n    value: function createElement(data) {\n      switch (data.name) {\n        case 'PElement':\n          return _PElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].parse(data);\n        case 'MenuElement':\n          return _MenuElement_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].parse(data);\n        case 'GridElement':\n          return _GridElement_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"].parse(data);\n        case 'H1Element':\n          return _H1Element_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"].parse(data);\n        case 'ListElement':\n          return _ListElement_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"].parse(data);\n        case 'ImageElement':\n          return _ImageElement_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"].parse(data);\n        case 'ButtonElement':\n          return ButtonElement.parse(data);\n        case 'VideoElement':\n          return VideoElement.parse(data);\n        case 'AlertElement':\n          return AlertElement.parse(data);\n        case 'H2Element':\n          return H2Element.parse(data);\n        case 'H3Element':\n          return _H3Element_js__WEBPACK_IMPORTED_MODULE_6__[\"default\"].parse(data);\n        case 'H4Element':\n          return _H4Element_js__WEBPACK_IMPORTED_MODULE_7__[\"default\"].parse(data);\n        case 'LinkElement':\n          return LinkElement.parse(data);\n        case 'TextInputElement':\n          return TextInputElement.parse(data);\n        case 'RSSElement':\n          return RSSElement.parse(data);\n        case 'SocialIconsElements':\n          return SocialIconsElement.parse(data);\n        case 'TableElement':\n          return TableElement.parse(data);\n        case 'SelectElement':\n          return SelectElement.parse(data);\n        case 'RadioElement':\n          return RadioElement.parse(data);\n        case 'PricingTableElement':\n          return PricingTableElement.parse(data);\n        case 'DescriptionImageElement':\n          return DescriptionImageElement.parse(data);\n        // * temporal elements \n        case 'TableElement':\n          return TableElement.parse(data);\n        case 'PricingTableElement':\n          return PricingTableElement.parse(data);\n        case 'SelectElement':\n          return SelectElement.parse(data);\n        case 'RadioElement':\n          return RadioElement.parse(data);\n        // temporal elements *\n        case 'ImageEffectControl':\n          return ImageEffectControl.parse(data);\n        case 'CustomRangeControl':\n          return RangeControl.parse(data);\n        case 'FontSizeControl':\n          return FontSizeControl.parse(data);\n        case 'TextColorControl':\n          return TextColorControl.parse(data);\n        case 'LinkColorControl':\n          return LinkColorControl.parse(data);\n        case 'ParagraphSpacingControl':\n          return ParagraphSpacingControl.parse(data);\n        case 'LineHeightControl':\n          return LineHeightControl.parse(data);\n        case 'LetterSpacingControl':\n          return LetterSpacingControl.parse(data);\n        case 'TextDirectionControl':\n          return TextDirectionControl.parse(data);\n        default:\n          console.warn(\"Unknown element name: \".concat(data.name));\n          if (typeof window[data.name] === 'function' && typeof window[data.name] === 'function') {\n            console.warn(\"Try to parse unknow element: \".concat(data.name));\n            return window[data.name].parse(data);\n          } else {\n            alert(\"Unknown element name: \".concat(data.name));\n            throw new Error(\"Unknown element name: \".concat(data));\n          }\n      }\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ElementFactory);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ElementFactory.js?");

/***/ }),

/***/ "./src/includes/FontFamilyControl.js":
/*!*******************************************!*\
  !*** ./src/includes/FontFamilyControl.js ***!
  \*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar FontFamilyControl = /*#__PURE__*/function () {\n  function FontFamilyControl(label, font_family, callback) {\n    _classCallCheck(this, FontFamilyControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    this.label = label;\n    this.font_family = font_family || \"\";\n    this.callback = callback;\n    this.domNode = document.createElement(\"div\");\n    this.render();\n  }\n  return _createClass(FontFamilyControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      var fontList = [{\n        name: \"System (inherit)\",\n        value: \"inherit\"\n      }, {\n        name: \"Arial\",\n        value: \"Arial, Helvetica, sans-serif\"\n      }, {\n        name: \"Verdana\",\n        value: \"Verdana, Geneva, sans-serif\"\n      }, {\n        name: \"Times New Roman\",\n        value: '\"Times New Roman\", Times, serif'\n      }, {\n        name: \"Georgia\",\n        value: 'Georgia, \"Times New Roman\", serif'\n      }, {\n        name: \"Courier New\",\n        value: '\"Courier New\", Courier, monospace'\n      }, {\n        name: \"Trebuchet MS\",\n        value: '\"Trebuchet MS\", Helvetica, sans-serif'\n      }, {\n        name: \"Tahoma\",\n        value: \"Tahoma, Geneva, sans-serif\"\n      }, {\n        name: \"Impact\",\n        value: \"Impact, Charcoal, sans-serif\"\n      }, {\n        name: \"Inter\",\n        value: '\"Inter\", system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif'\n      }, {\n        name: \"Roboto\",\n        value: '\"Roboto\", Arial, sans-serif'\n      }];\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold d-block mb-2\\\">\".concat(this.label, \"</label>\\n                <div id=\\\"fontSelectorContainer_\").concat(this.id, \"\\\"></div>\\n            </div>\\n        \");\n      var select = document.createElement(\"select\");\n      select.className = \"form-select w-100\";\n      var startOption = new Option(\"Select font family\", \"\");\n      select.appendChild(startOption);\n      fontList.forEach(function (font) {\n        var option = document.createElement(\"option\");\n        option.value = font.value;\n        option.textContent = font.name;\n        option.style.fontFamily = font.value;\n        select.appendChild(option);\n      });\n      this.domNode.querySelector(\"#fontSelectorContainer_\".concat(this.id)).appendChild(select);\n      this.fontSelect = select;\n\n      // set initial value (if matches an option)\n      if (this.font_family) {\n        try {\n          this.fontSelect.value = this.font_family;\n        } catch (e) {\n          /* ignore */\n        }\n      }\n\n      // change handler — support function or object with setValue\n      this.fontSelect.addEventListener(\"change\", function (e) {\n        var val = e.target.value;\n        _this.font_family = val;\n        if (typeof _this.callback === \"function\") {\n          _this.callback(val);\n        } else if (_this.callback && typeof _this.callback.setValue === \"function\") {\n          _this.callback.setValue(val);\n        } else if (_this.callback && typeof _this.callback.setFontFamily === \"function\") {\n          _this.callback.setFontFamily(val);\n        } else {\n          console.warn(\"FontFamilyControl: callback is not callable\", _this.callback);\n        }\n      });\n      select.value = \"\";\n    }\n\n    // programmatic setter (keeps UI in sync)\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.font_family = newValue || \"\";\n      if (this.fontSelect) {\n        this.fontSelect.value = this.font_family;\n      }\n      // notify callback like AlignControl does\n      if (typeof this.callback === \"function\") {\n        this.callback(this.font_family);\n      } else if (this.callback && typeof this.callback.setValue === \"function\") {\n        this.callback.setValue(this.font_family);\n      }\n    }\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.font_family;\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {\n      // optional hook if parent needs it\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FontFamilyControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/FontFamilyControl.js?");

/***/ }),

/***/ "./src/includes/FontSizeControl.js":
/*!*****************************************!*\
  !*** ./src/includes/FontSizeControl.js ***!
  \*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar FontSizeControl = /*#__PURE__*/function () {\n  function FontSizeControl(label, value, callback) {\n    _classCallCheck(this, FontSizeControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial /* left | center | right */\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(FontSizeControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"<div class=\\\"py-2 ps-3 pe-3 w-100 d-flex align-items-center justify-content-between\\\">\\n      <label for=\\\"\".concat(this.id, \"\\\" class=\\\"form-label fw-semibold mb-0 me-3\\\">\").concat(this.label, \"</label>\\n\\n      <div class=\\\"input-group flex-nowrap w-25 \\\" role=\\\"group\\\" aria-label=\\\"\").concat(this.label, \"\\\" style=\\\"min-width:125px\\\">\\n        <button class=\\\"btn btn-outline-secondary\\\" role=\\\"reduction\\\" type=\\\"button\\\">-</button>\\n        <input id=\\\"\").concat(this.id, \"\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-control text-center\\\" readonly style=\\\"width:70px;max-width:70px\\\">\\n        <button class=\\\"btn btn-outline-secondary\\\" role=\\\"increment\\\" type=\\\"button\\\">+</button>\\n      </div>\\n    </div>\");\n      var decrease = this.domNode.querySelector('[role=\"reduction\"]');\n      var increase = this.domNode.querySelector('[role=\"increment\"]');\n      var input = this.domNode.querySelector(\"#\".concat(this.id));\n      var changeValue = function changeValue(delta) {\n        var numeric = parseInt(_this.value, 10) || 0;\n        numeric = Math.max(1, numeric + delta);\n        _this.setValue(numeric);\n      };\n      if (decrease) {\n        decrease.addEventListener('click', function (e) {\n          e.preventDefault();\n          changeValue(-1);\n        });\n      }\n      if (increase) {\n        increase.addEventListener('click', function (e) {\n          e.preventDefault();\n          changeValue(1);\n        });\n      }\n\n      // allow direct programmatic update keeping UI in sync\n      this._inputNode = input;\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var input = this.domNode.querySelector('input');\n      if (input) {\n        input.value = this.value;\n      }\n\n      // Support both function and object with setValue\n      if (typeof this.callback === 'function') {\n        this.callback(this.value);\n      } else if (this.callback && typeof this.callback.setValue === 'function') {\n        this.callback.setValue(this.value);\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FontSizeControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/FontSizeControl.js?");

/***/ }),

/***/ "./src/includes/FontWeightControl.js":
/*!*******************************************!*\
  !*** ./src/includes/FontWeightControl.js ***!
  \*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar FontWeightControl = /*#__PURE__*/function () {\n  function FontWeightControl(label, font_weight, callback) {\n    _classCallCheck(this, FontWeightControl);\n    this.id = '_' + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the control\n    this.font_weight = font_weight; // Initial value of the select input\n    this.callback = callback; // Callback function to handle changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(FontWeightControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\" + this.label + \"</label>\\n                <div id=\\\"fontWeightSelectorContainer\\\"></div>\\n            </div>\\n        \";\n      var weightList = [\"normal\", \"bold\", \"lighter\", \"bolder\", \"100\", \"200\", \"300\", \"400\", \"500\", \"600\", \"700\", \"800\", \"900\"];\n      var select = document.createElement(\"select\");\n      select.className = \"form-select\";\n      weightList.forEach(function (weight) {\n        var option = document.createElement(\"option\");\n        option.value = weight;\n        option.textContent = weight;\n        option.style.fontWeight = weight;\n        select.appendChild(option);\n      });\n\n      // Append to the desired container\n      this.domNode.querySelector(\"#fontWeightSelectorContainer\").appendChild(select);\n\n      //\n      this.weightSelect = select;\n\n      // Set current value\n      this.weightSelect.value = this.font_weight;\n\n      // Add an event listener to handle input changes\n      this.weightSelect.addEventListener('change', function (e) {\n        var val = e.target.value;\n        _this.font_weight = val;\n        if (typeof _this.callback === 'function') {\n          _this.callback(val);\n        } else if (_this.callback && typeof _this.callback.setValue === 'function') {\n          _this.callback.setValue(val);\n        } else if (_this.callback && typeof _this.callback.setFontWeight === 'function') {\n          _this.callback.setFontWeight(val);\n        } else {\n          console.warn('FontWeightControl: callback is not callable', _this.callback);\n        }\n      });\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FontWeightControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/FontWeightControl.js?");

/***/ }),

/***/ "./src/includes/GridControl.js":
/*!*************************************!*\
  !*** ./src/includes/GridControl.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar GridControl = /*#__PURE__*/function () {\n  function GridControl(label, values, callback) {\n    _classCallCheck(this, GridControl);\n    // Initialize properties\n    this.label = label;\n    this.getItemCount = values.getItemCount;\n    this.callback = callback;\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n    this.domNode.classList.add(\"grid-control\");\n\n    // render\n    this.render();\n  }\n  return _createClass(GridControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      var itemCount = this.getItemCount();\n\n      // Create box items\n      var items = Array.from({\n        length: itemCount\n      }, function (_, i) {\n        var isLast = i === itemCount - 1;\n        var isFirst = i === 0;\n        return \"\\n            <div data-control=\\\"item\\\" class=\\\"position-relative box-item d-flex align-items-center justify-content-center rounded shadow-sm bg-light text-muted \".concat(isFirst ? \"first-cell\" : \"\", \"\\\">\\n                \").concat(isFirst ? \"\\n                <div class=\\\"position-absolute first-cell-button\\\">\\n                    <button type=\\\"button\\\" class=\\\"btn btn-sm btn-grey add-cell-button\\\" data-control=\\\"add-cell-between\\\" data-index=\\\"0\\\">\\n                        <span class=\\\"add-button-icon\\\">+</span>\\n                    </button>\\n                </div>\\n                \" : \"\", \"\\n                \\n                <span class=\\\"opacity-10 p-1 position-absolute top-0 start-0 m-2 display-6 fw-semibold box-item-number\\\">\").concat(i + 1, \"</span>\\n                \\n                <div class=\\\"position-absolute button-group bottom-0 end-0 m-1\\\">\\n                    \").concat(itemCount > 1 ? \"\\n                        <button data-control=\\\"remove-cell\\\" type=\\\"button\\\" class=\\\"btn btn-sm btn-light d-flex align-items-center p-1\\\" data-index=\\\"\".concat(i, \"\\\">\\n                            <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                        </button>\\n                    \") : \"\", \"\\n                </div>\\n            </div>  \\n            \").concat(!isLast ? \"\\n            <div class=\\\"position-relative cell-spacer\\\">\\n                <button type=\\\"button\\\" class=\\\"btn btn-sm btn-grey add-cell-button position-absolute top-50 start-50 translate-middle\\\" data-control=\\\"add-cell-between\\\" data-index=\\\"\".concat(i + 1, \"\\\">\\n                    <span class=\\\"add-button-icon\\\">+</span>\\n                </button>\\n            </div>\\n            \") : \"\", \"\\n            \").concat(isLast ? \"\\n            <div class=\\\"position-relative last-cell-spacer\\\">\\n                <button type=\\\"button\\\" class=\\\"btn btn-sm btn-grey add-cell-button position-absolute top-50 start-0 translate-middle\\\" data-control=\\\"add-cell\\\" data-index=\\\"\".concat(i + 1, \"\\\">\\n                    <span class=\\\"add-button-icon\\\">+</span>\\n                </button>\\n            </div>\\n            \") : \"\", \"\\n            \");\n      }).join(\"\");\n\n      // Create HTML structure using Bootstrap classes where possible\n      this.domNode.innerHTML = \"\\n      <div class=\\\"py-2 px-3\\\">\\n          <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n          \\n          <div class=\\\"position-relative grid-scroll-wrapper\\\">\\n              <div class=\\\"scroll-container\\\">\\n                  <div class=\\\"d-flex flex-nowrap\\\">\\n                      \").concat(items, \"\\n                  </div>\\n                  <div class=\\\"scroll-spacer\\\"></div>\\n              </div>\\n          </div>\\n          \\n          <div class=\\\"mt-3\\\">\\n              <button data-control=\\\"add-cell\\\" type=\\\"button\\\" class=\\\"btn btn-sm btn-light\\\">\\n                  <span class=\\\"d-flex align-items-center\\\">\\n                      <span class=\\\"material-symbols-rounded\\\">add</span>\\n                      <span>Add Cell</span>\\n                  </span>\\n              </button>\\n          </div>\\n      </div>\\n    \");\n\n      // add cell\n      var addButtons = this.domNode.querySelectorAll('[data-control=\"add-cell\"]');\n      addButtons.forEach(function (addButton) {\n        addButton.addEventListener(\"click\", function () {\n          _this.callback.addCell();\n          setTimeout(function () {\n            _this.render();\n            var scrollContainer = _this.domNode.querySelector(\".scroll-container\");\n            if (scrollContainer) {\n              scrollContainer.scrollLeft = scrollContainer.scrollWidth;\n            }\n          }, 0);\n        });\n      });\n\n      // add cell between\n      var addBetweenButtons = this.domNode.querySelectorAll('[data-control=\"add-cell-between\"]');\n      addBetweenButtons.forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          var index = parseInt(button.getAttribute(\"data-index\"));\n          _this.callback.addCellAt(index);\n          setTimeout(function () {\n            _this.render();\n            var scrollContainer = _this.domNode.querySelector(\".scroll-container\");\n            if (scrollContainer) {\n              scrollContainer.scrollLeft = scrollContainer.scrollWidth;\n            }\n          }, 0);\n        });\n      });\n\n      // Add event handlers for remove buttons\n      var removeButtons = this.domNode.querySelectorAll('[data-control=\"remove-cell\"]');\n      removeButtons.forEach(function (button) {\n        button.addEventListener(\"click\", function () {\n          var index = parseInt(button.getAttribute(\"data-index\"));\n          _this.callback.removeCell(index);\n          _this.render();\n        });\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (GridControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/GridControl.js?");

/***/ }),

/***/ "./src/includes/GridElement.js":
/*!*************************************!*\
  !*** ./src/includes/GridElement.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _CellElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./CellElement.js */ \"./src/includes/CellElement.js\");\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar GridElement = /*#__PURE__*/function (_BaseElement) {\n  function GridElement(template) {\n    var _this;\n    _classCallCheck(this, GridElement);\n    _this = _callSuper(this, GridElement); // Call the parent class constructor\n    _this.template = template;\n    _this.type = null;\n    _this.cells = [];\n    _this.domNode = null;\n    // formats\n    _this.formats = {\n      font_family: \"inherit\",\n      font_style: null,\n      font_weight: null,\n      font_size: null,\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      text_color: null,\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      margin_top: 0,\n      margin_right: 0,\n      margin_bottom: 0,\n      margin_left: 0,\n      border_radius: 0,\n      content_display: 'flex',\n      content_flex_wrap: 'nowrap',\n      content_justify_content: 'center',\n      content_align_items: null,\n      content_gap: 0\n    };\n    return _this;\n  }\n  _inherits(GridElement, _BaseElement);\n  return _createClass(GridElement, [{\n    key: \"getContentStyleString\",\n    value: function getContentStyleString() {\n      var _this2 = this;\n      var styleMap = {\n        content_display: function content_display(v) {\n          return v ? \"display: \".concat(v, \";\") : '';\n        },\n        content_flex_wrap: function content_flex_wrap(v) {\n          return v ? \"flex-wrap: \".concat(v, \";\") : '';\n        },\n        content_justify_content: function content_justify_content(v) {\n          return v ? \"justify-content: \".concat(v, \";\") : '';\n        },\n        content_align_items: function content_align_items(v) {\n          return v ? \"align-items: \".concat(v, \";\") : '';\n        },\n        content_gap: function content_gap(v) {\n          return v !== undefined && v !== null ? \"gap: \".concat(typeof v === 'number' ? v + 'px' : v, \";\") : '';\n        },\n        background_color: function background_color(v, formats) {\n          // Only apply background color if there's no image\n          if (v && !_this2.formats.background_image) {\n            return \"background-color: \".concat(v, \" !important;\");\n          }\n          return '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(_this2.formats[key], _this2.formats);\n      }).join(' ');\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this3 = this;\n      // Dom node should be only on for each element\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        console.log(this.getClassName());\n        this.domNode.setAttribute('builder-element', this.getClassName());\n      }\n\n      // reset domNode\n      while (this.domNode.firstChild) {\n        this.domNode.removeChild(this.domNode.firstChild);\n      }\n\n      //\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        cells: this.cells.map(function (cell) {\n          return '<div cell-anchor=\"' + cell.id + '\">' + cell.id + '</div>';\n        }),\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats),\n        contentStyleString: this.getContentStyleString()\n      });\n\n      // render cells\n      this.cells.forEach(function (cell) {\n        var anchor = _this3.domNode.querySelector('[cell-anchor=\"' + cell.id + '\"]');\n\n        // render block\n        var domNode = cell.render();\n\n        // Dome append child\n        anchor.parentNode.insertBefore(domNode, anchor);\n\n        //\n        builder.uiManager.addElement(cell);\n\n        //\n        anchor.remove();\n      });\n\n      //\n      return this.domNode;\n    }\n\n    // Add getStyleString method\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        font_family: function font_family(v) {\n          return v ? \"font-family: \".concat(v, \" !important;\") : '';\n        },\n        font_style: function font_style(v) {\n          return v ? \"font-style: \".concat(v, \" !important;\") : '';\n        },\n        font_weight: function font_weight(v) {\n          return v ? \"font-weight: \".concat(v, \" !important;\") : '';\n        },\n        font_size: function font_size(v) {\n          return v ? \"font-size: \".concat(v, \"px !important;\") : '';\n        },\n        // text_color: v => v ? `color: ${v} !important;` : '',\n        // Background properties - image first, then color\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        background_color: function background_color(v, formats) {\n          // Only apply background color if there's no image OR explicitly add it as a fallback\n          if (v) {\n            return \"background-color: \".concat(v, \" !important;\");\n          }\n          return '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        margin_top: function margin_top(v) {\n          return v ? \"margin-top: \".concat(v, \"px !important;\") : '';\n        },\n        margin_right: function margin_right(v) {\n          return v ? \"margin-right: \".concat(v, \"px !important;\") : '';\n        },\n        margin_bottom: function margin_bottom(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        margin_left: function margin_left(v) {\n          return v ? \"margin-left: \".concat(v, \"px !important;\") : '';\n        },\n        border_radius: function border_radius(v) {\n          return v ? \"border-radius: \".concat(v, \"px !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref3) {\n        var _ref4 = _slicedToArray(_ref3, 2),\n          key = _ref4[0],\n          fn = _ref4[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }, {\n    key: \"addCell\",\n    value: function addCell() {\n      var cell = new _CellElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this.cells[this.cells.length - 1].template);\n      this.appendCells([cell]);\n    }\n  }, {\n    key: \"append\",\n    value: function append(cell) {\n      // private\n      // set element container\n      cell.container = this;\n      this.cells.push(cell);\n    }\n  }, {\n    key: \"removeCellByIndex\",\n    value: function removeCellByIndex(index) {\n      this.cells.splice(index, 1);\n    }\n  }, {\n    key: \"appendCells\",\n    value: function appendCells(cells) {\n      var _this4 = this;\n      cells.forEach(function (cell) {\n        _this4.append(cell);\n      });\n    }\n  }, {\n    key: \"removeElement\",\n    value: function removeElement(element) {\n      var _this5 = this;\n      this.cells.forEach(function (currentElement) {\n        // if element is one of block element\n        if (currentElement == element) {\n          _this5.cells = _this5.cells.filter(function (el) {\n            return el !== element;\n          });\n\n          // \n          _this5.render();\n\n          // also remove grid if cells is empty\n          if (!_this5.cells.length) {\n            _this5.remove();\n\n            // @todo: dependency\n            builder.unselect();\n          }\n        }\n      });\n    }\n  }, {\n    key: \"insertElementAfter\",\n    value: function insertElementAfter(element, newElement) {\n      var _this6 = this;\n      // set element container\n      newElement.container = this;\n      this.cells.forEach(function (currentElement, i) {\n        // if element is one of the block's elements\n        if (currentElement === element) {\n          _this6.cells.splice(i + 1, 0, newElement);\n          _this6.render();\n          return;\n        }\n      });\n    }\n  }, {\n    key: \"addCellAt\",\n    value: function addCellAt(index) {\n      var newCell = new _CellElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this.cells[index].template);\n      newCell.container = this;\n      if (index === 0) {\n        this.cells.unshift(newCell);\n      } else if (index >= this.cells.length) {\n        this.cells.push(newCell);\n      } else {\n        this.cells.splice(index, 0, newCell);\n      }\n      this.render();\n      return newCell;\n    }\n    // Добавляем метод для удобной настройки центрирования контента\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: this.getClassName(),\n        template: this.template,\n        type: this.type,\n        cells: this.cells.map(function (cell) {\n          return cell.getData();\n        }),\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      if (key === 'padding') {\n        this.formats['padding_top'] = value;\n        this.formats['padding_right'] = value;\n        this.formats['padding_bottom'] = value;\n        this.formats['padding_left'] = value;\n        return;\n      }\n      if (key === 'padding_vertical') {\n        this.formats['padding_top'] = value;\n        this.formats['padding_bottom'] = value;\n        return;\n      }\n      if (key === 'padding_horizontal') {\n        this.formats['padding_right'] = value;\n        this.formats['padding_left'] = value;\n        return;\n      }\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this7 = this;\n      return [new GridControl(\n      // label\n      'Grid Settings',\n      // values\n      {\n        getItemCount: function getItemCount() {\n          return _this7.cells.length;\n        }\n      },\n      // callback\n      {\n        removeCell: function removeCell(index) {\n          _this7.removeCellByIndex(index);\n\n          //\n          _this7.render();\n        },\n        addCell: function addCell() {\n          _this7.addCell();\n\n          //\n          _this7.render();\n        },\n        addCellAt: function addCellAt(index) {\n          _this7.addCellAt(index);\n        }\n      }), new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this7.setFormat('padding_top', values.top);\n          _this7.setFormat('padding_right', values.right);\n          _this7.setFormat('padding_bottom', values.bottom);\n          _this7.setFormat('padding_left', values.left);\n          _this7.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', this.template ? this.template.background_color : ''),\n        image: this.getFormat('background_image') ? this.getFullUrl(this.getFormat('background_image')) : '',\n        position: this.getFormat('background_position', this.template ? this.template.background_position : 'center'),\n        size: this.getFormat('background_size', this.template ? this.template.background_size : '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', this.template ? this.template.background_repeat : 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this7.setFormat('background_color', values.color || '');\n          _this7.setFormat('background_image', values.image || '');\n          _this7.setFormat('background_position', values.position || '');\n          _this7.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this7.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this7.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var cellClass = eval(data.cells[0].name);\n      var cells = data.cells.map(function (cell) {\n        return cellClass.parse(cell);\n      });\n      var gridElement = new this(data.template);\n      gridElement.appendCells(cells);\n\n      // formats\n      if (data.formats) {\n        // Background properties\n        gridElement.setFormat('background_color', data.formats.background_color);\n        gridElement.setFormat('background_image', data.formats.background_image);\n        gridElement.setFormat('background_position', data.formats.background_position);\n        gridElement.setFormat('background_size', data.formats.background_size);\n        gridElement.setFormat('background_repeat', data.formats.background_repeat);\n\n        // Padding properties\n        gridElement.setFormat('padding_top', data.formats.padding_top);\n        gridElement.setFormat('padding_right', data.formats.padding_right);\n        gridElement.setFormat('padding_bottom', data.formats.padding_bottom);\n        gridElement.setFormat('padding_left', data.formats.padding_left);\n\n        // Content properties\n        gridElement.setFormat('content_display', data.formats.content_display);\n        gridElement.setFormat('content_flex_wrap', data.formats.content_flex_wrap);\n        gridElement.setFormat('content_justify_content', data.formats.content_justify_content);\n        gridElement.setFormat('content_align_items', data.formats.content_align_items);\n        gridElement.setFormat('content_gap', data.formats.content_gap);\n      }\n      return gridElement;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (GridElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/GridElement.js?");

/***/ }),

/***/ "./src/includes/GridWidget.js":
/*!************************************!*\
  !*** ./src/includes/GridWidget.js ***!
  \************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _GridElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./GridElement.js */ \"./src/includes/GridElement.js\");\n/* harmony import */ var _CellElement_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CellElement.js */ \"./src/includes/CellElement.js\");\n/* harmony import */ var _PElement_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PElement.js */ \"./src/includes/PElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\n\n\nvar GridWidget = /*#__PURE__*/function (_BaseWidget) {\n  function GridWidget() {\n    var _this;\n    _classCallCheck(this, GridWidget);\n    _this = _callSuper(this, GridWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add a GridElement to the widget\n    var grid = new _GridElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('Grid');\n    var cell_1 = new _CellElement_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('Cell');\n    cell_1.setFormat('width', '50%');\n    var cell_2 = new _CellElement_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('Cell');\n    cell_2.setFormat('width', '50%');\n    grid.cells = [cell_1, cell_2];\n    var cell_p1 = new _PElement_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]('P', 'Inside cell 1');\n    var cell_p2 = new _PElement_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]('P', 'Inside cell 2');\n    // cell_1.appendElements([cell_p1]);\n    // cell_2.appendElements([cell_p2]);\n\n    _this.elements.push(grid);\n    return _this;\n  }\n  _inherits(GridWidget, _BaseWidget);\n  return _createClass(GridWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Grid';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'grid_view';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (GridWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/GridWidget.js?");

/***/ }),

/***/ "./src/includes/H1Element.js":
/*!***********************************!*\
  !*** ./src/includes/H1Element.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AlignControl.js */ \"./src/includes/AlignControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar H1Element = /*#__PURE__*/function (_BaseElement) {\n  function H1Element(template, text) {\n    var _this;\n    _classCallCheck(this, H1Element);\n    _this = _callSuper(this, H1Element);\n    _this.template = template;\n    _this.text = text;\n    _this.domNode = null;\n\n    // formats\n    _this.formats = {\n      font_family: null,\n      font_size: null,\n      text_color: \"#000\",\n      link_color: null,\n      paragraph_spacing: null,\n      line_height: null,\n      letter_spacing: null,\n      text_direction: \"left_to_right\",\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      text_align: 'center' // left, center, right\n    };\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n    return _this;\n  }\n  _inherits(H1Element, _BaseElement);\n  return _createClass(H1Element, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'H1Element');\n      }\n\n      // render\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats) // <-- add this\n      });\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'H1Element',\n        template: this.template,\n        text: this.text,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RichTextControl\n      new RichTextControl(\n      // label\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }),\n      // Padding\n      new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      }), new FontFamilyControl('Font Family', this.getFormat('font_family', 'Arial'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_family', value);\n          _this3.render();\n        }\n      }), new FontWeightControl('Font Weight', this.getFormat('font_weight', 'normal'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_weight', value);\n          _this3.render();\n        }\n      }), new FontSizeControl('Font Size', this.getFormat('font_size', '16px'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_size', value);\n          _this3.render();\n        }\n      }), new TextColorControl('Text Color', this.getFormat('text_color', '#000000'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_color', value);\n          _this3.render();\n        }\n      }), new LinkColorControl('Link Color', this.getFormat('link_color', '#0000EE'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('link_color', value);\n          _this3.render();\n        }\n      }), new _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('Text alignment', this.getFormat('text_align', 'left'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_align', value);\n          _this3.render();\n        }\n      }), new ParagraphSpacingControl('Paragraph Spacing', this.getFormat('paragraph_spacing', null), {\n        setValue: function setValue(value) {\n          _this3.setFormat('paragraph_spacing', value);\n          _this3.render();\n        }\n      }), new LineHeightControl('Line Height', this.getFormat('line_height', '1.2'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('line_height', value);\n          _this3.render();\n        }\n      }), new LetterSpacingControl('Letter Spacing', this.getFormat('letter_spacing', '0'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('letter_spacing', value);\n          _this3.render();\n        }\n      }), new TextDirectionControl('Text Direction', this.getFormat('text_direction', 'left_to_right'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_direction', value);\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n\n    // Add this method\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        font_size: function font_size(v) {\n          return v ? \"font-size: \".concat(v, \"px;\") : '';\n        },\n        font_family: function font_family(v) {\n          if (!v) return '';\n          var escaped = v.replace(/\"/g, '&quot;');\n          return \"font-family: \".concat(escaped, \" !important;\");\n        },\n        link_color: function link_color(v) {\n          return v ? \"--link-color: \".concat(v, \" !important;\") : '';\n        },\n        letter_spacing: function letter_spacing(v) {\n          return v ? \"letter-spacing: \".concat(v, \"px !important;\") : '';\n        },\n        paragraph_spacing: function paragraph_spacing(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        line_height: function line_height(v) {\n          return v ? \"line-height: \".concat(v, \" !important;\") : '';\n        },\n        text_direction: function text_direction(v) {\n          return v === 'right_to_left' ? \"direction: rtl !important;\" : v === 'left_to_right' ? \"direction: ltr !important;\" : '';\n        },\n        font_style: function font_style(v) {\n          return v ? \"font-style: \".concat(v, \" !important;\") : '';\n        },\n        font_weight: function font_weight(v) {\n          return v ? \"font-weight: \".concat(v, \" !important;\") : '';\n        },\n        // text_color: v => v ? `color: ${v} !important;` : '',\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        margin_top: function margin_top(v) {\n          return v ? \"margin-top: \".concat(v, \"px !important;\") : '';\n        },\n        margin_right: function margin_right(v) {\n          return v ? \"margin-right: \".concat(v, \"px !important;\") : '';\n        },\n        margin_bottom: function margin_bottom(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        margin_left: function margin_left(v) {\n          return v ? \"margin-left: \".concat(v, \"px !important;\") : '';\n        },\n        border_radius: function border_radius(v) {\n          return v ? \"border-radius: \".concat(v, \"px !important;\") : '';\n        },\n        border_color: function border_color(v) {\n          return v ? \"border-color: \".concat(v, \" !important;\") : '';\n        },\n        border_size: function border_size(v, formats) {\n          if (v && formats.border_color) {\n            return \"border: \".concat(v, \"px solid \").concat(formats.border_color, \" !important;\");\n          } else if (v) {\n            return \"border: \".concat(v, \"px solid !important;\");\n          } else {\n            return '';\n          }\n        },\n        // left -> start, center -> center, right -> end\n        text_align: function text_align(v) {\n          return v ? \"text-align: \".concat(v, \" !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new H1Element(data.template, data.text);\n\n      // formats\n      if (data.formats) {\n        e.setFormat('font_size', data.formats.font_size);\n        e.setFormat('font_family', data.formats.font_family);\n        e.setFormat('link_color', data.formats.link_color);\n        e.setFormat('paragraph_spacing', data.formats.paragraph_spacing);\n        e.setFormat('line_height', data.formats.line_height);\n        e.setFormat('letter_spacing', data.formats.letter_spacing);\n        e.setFormat('text_direction', data.formats.text_direction);\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n        e.setFormat('text_align', data.formats.text_align);\n        if (data.formats.background_image) {\n          e.setFormat('background_image', data.formats.background_image);\n        }\n        if (data.formats.background_position) {\n          e.setFormat('background_position', data.formats.background_position);\n        }\n        if (data.formats.background_repeat) {\n          e.setFormat('background_repeat', data.formats.background_repeat);\n        }\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (H1Element);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/H1Element.js?");

/***/ }),

/***/ "./src/includes/H2Element.js":
/*!***********************************!*\
  !*** ./src/includes/H2Element.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AlignControl.js */ \"./src/includes/AlignControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar H2Element = /*#__PURE__*/function (_BaseElement) {\n  function H2Element(template, text) {\n    var _this;\n    _classCallCheck(this, H2Element);\n    _this = _callSuper(this, H2Element);\n    _this.template = template;\n    _this.text = text;\n    _this.domNode = null;\n\n    // formats\n    _this.formats = {\n      font_family: null,\n      font_size: null,\n      text_color: \"#000\",\n      link_color: null,\n      paragraph_spacing: null,\n      line_height: null,\n      letter_spacing: null,\n      text_direction: \"left_to_right\",\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      text_align: 'center' // left, center, right\n    };\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n    return _this;\n  }\n  _inherits(H2Element, _BaseElement);\n  return _createClass(H2Element, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'H2Element');\n      }\n\n      // get template html\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats) // <-- added\n      });\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'H2Element',\n        template: this.template,\n        text: this.text,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RichTextControl\n      new RichTextControl(\n      // label\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }),\n      // Padding\n      new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      }), new FontFamilyControl('Font Family', this.getFormat('font_family', 'Arial'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_family', value);\n          _this3.render();\n        }\n      }), new FontWeightControl('Font Weight', this.getFormat('font_weight', 'normal'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_weight', value);\n          _this3.render();\n        }\n      }), new FontSizeControl('Font Size', this.getFormat('font_size', '16px'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_size', value);\n          _this3.render();\n        }\n      }), new TextColorControl('Text Color', this.getFormat('text_color', '#000000'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_color', value);\n          _this3.render();\n        }\n      }), new LinkColorControl('Link Color', this.getFormat('link_color', '#0000EE'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('link_color', value);\n          _this3.render();\n        }\n      }), new _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('Text alignment', this.getFormat('text_align', 'left'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_align', value);\n          _this3.render();\n        }\n      }), new ParagraphSpacingControl('Paragraph Spacing', this.getFormat('paragraph_spacing', null), {\n        setValue: function setValue(value) {\n          _this3.setFormat('paragraph_spacing', value);\n          _this3.render();\n        }\n      }), new LineHeightControl('Line Height', this.getFormat('line_height', '1.2'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('line_height', value);\n          _this3.render();\n        }\n      }), new LetterSpacingControl('Letter Spacing', this.getFormat('letter_spacing', '0'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('letter_spacing', value);\n          _this3.render();\n        }\n      }), new TextDirectionControl('Text Direction', this.getFormat('text_direction', 'left_to_right'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_direction', value);\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        font_size: function font_size(v) {\n          return v ? \"font-size: \".concat(v, \"px;\") : '';\n        },\n        font_family: function font_family(v) {\n          if (!v) return '';\n          var escaped = v.replace(/\"/g, '&quot;');\n          return \"font-family: \".concat(escaped, \" !important;\");\n        },\n        link_color: function link_color(v) {\n          return v ? \"--link-color: \".concat(v, \" !important;\") : '';\n        },\n        letter_spacing: function letter_spacing(v) {\n          return v ? \"letter-spacing: \".concat(v, \"px !important;\") : '';\n        },\n        paragraph_spacing: function paragraph_spacing(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        line_height: function line_height(v) {\n          return v ? \"line-height: \".concat(v, \" !important;\") : '';\n        },\n        text_direction: function text_direction(v) {\n          return v === 'right_to_left' ? \"direction: rtl !important;\" : v === 'left_to_right' ? \"direction: ltr !important;\" : '';\n        },\n        font_style: function font_style(v) {\n          return v ? \"font-style: \".concat(v, \" !important;\") : '';\n        },\n        font_weight: function font_weight(v) {\n          return v ? \"font-weight: \".concat(v, \" !important;\") : '';\n        },\n        // text_color: v => v ? `color: ${v} !important;` : '',\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        margin_top: function margin_top(v) {\n          return v ? \"margin-top: \".concat(v, \"px !important;\") : '';\n        },\n        margin_right: function margin_right(v) {\n          return v ? \"margin-right: \".concat(v, \"px !important;\") : '';\n        },\n        margin_bottom: function margin_bottom(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        margin_left: function margin_left(v) {\n          return v ? \"margin-left: \".concat(v, \"px !important;\") : '';\n        },\n        border_radius: function border_radius(v) {\n          return v ? \"border-radius: \".concat(v, \"px !important;\") : '';\n        },\n        border_color: function border_color(v) {\n          return v ? \"border-color: \".concat(v, \" !important;\") : '';\n        },\n        border_size: function border_size(v, formats) {\n          if (v && formats.border_color) {\n            return \"border: \".concat(v, \"px solid \").concat(formats.border_color, \" !important;\");\n          } else if (v) {\n            return \"border: \".concat(v, \"px solid !important;\");\n          } else {\n            return '';\n          }\n        },\n        // left -> start, center -> center, right -> end\n        text_align: function text_align(v) {\n          return v ? \"text-align: \".concat(v, \" !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new H2Element(data.template, data.text);\n\n      // formats\n      if (data.formats) {\n        e.setFormat('font_size', data.formats.font_size);\n        e.setFormat('font_family', data.formats.font_family);\n        e.setFormat('link_color', data.formats.link_color);\n        e.setFormat('paragraph_spacing', data.formats.paragraph_spacing);\n        e.setFormat('line_height', data.formats.line_height);\n        e.setFormat('letter_spacing', data.formats.letter_spacing);\n        e.setFormat('text_direction', data.formats.text_direction);\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n        e.setFormat('text_align', data.formats.text_align);\n        if (data.formats.background_image) {\n          e.setFormat('background_image', data.formats.background_image);\n        }\n        if (data.formats.background_position) {\n          e.setFormat('background_position', data.formats.background_position);\n        }\n        if (data.formats.background_repeat) {\n          e.setFormat('background_repeat', data.formats.background_repeat);\n        }\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (H2Element);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/H2Element.js?");

/***/ }),

/***/ "./src/includes/H3Element.js":
/*!***********************************!*\
  !*** ./src/includes/H3Element.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AlignControl.js */ \"./src/includes/AlignControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar H3Element = /*#__PURE__*/function (_BaseElement) {\n  function H3Element(template, text) {\n    var _this;\n    _classCallCheck(this, H3Element);\n    _this = _callSuper(this, H3Element);\n    _this.template = template;\n    _this.text = text;\n    _this.domNode = null;\n\n    // formats\n    _this.formats = {\n      font_family: null,\n      font_size: null,\n      text_color: \"#000\",\n      link_color: null,\n      paragraph_spacing: null,\n      line_height: null,\n      letter_spacing: null,\n      text_direction: \"left_to_right\",\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      text_align: 'center' // left, center, right\n    };\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n    return _this;\n  }\n  _inherits(H3Element, _BaseElement);\n  return _createClass(H3Element, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'H3Element');\n      }\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats) // <-- added\n      });\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'H3Element',\n        template: this.template,\n        text: this.text,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RichTextControl\n      new RichTextControl(\n      // label\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }),\n      // Padding\n      new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      }), new FontFamilyControl('Font Family', this.getFormat('font_family', 'Arial'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_family', value);\n          _this3.render();\n        }\n      }),\n      // new FontWeightControl(\n      //     'Font Weight',\n      //     this.getFormat('font_weight', 'normal'),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('font_weight', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // new FontSizeControl(\n      //     'Font Size',\n      //     this.getFormat('font_size', '16px'),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('font_size', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // new TextColorControl(\n      //     'Text Color',\n      //     this.getFormat('text_color', '#000000'),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('text_color', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // new LinkColorControl(\n      //     'Link Color',\n      //     this.getFormat('link_color', '#0000EE'),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('link_color', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // new AlignControl(\n      //     'Text alignment',\n      //     this.getFormat('text_align', 'left'),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('text_align', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // new ParagraphSpacingControl(\n      //     'Paragraph Spacing',\n      //     this.getFormat('paragraph_spacing', null),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('paragraph_spacing', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // new LineHeightControl(\n      //     'Line Height',\n      //     this.getFormat('line_height', '1.2'),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('line_height', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // new LetterSpacingControl(\n      //     'Letter Spacing',\n      //     this.getFormat('letter_spacing', '0'),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('letter_spacing', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n      // new TextDirectionControl(\n      //     'Text Direction',\n      //     this.getFormat('text_direction', 'left_to_right'),\n      //     {\n      //         setValue: (value) => {\n      //             this.setFormat('text_direction', value);\n      //             this.render();\n      //         }\n      //     }\n      // ),\n      //             new BackgroundControl(\n      //     // label\n      //     'Background Settings',\n      //     // values\n      //     {\n      //         color: this.getFormat('background_color', '#ffffff'),\n      //         image: this.getFormat('background_image', ''),\n      //         position: this.getFormat('background_position', 'center'),\n      //         size: this.getFormat('background_size', '100').toString().replace('%', ''),\n      //         toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      //     },\n      //     // callback\n      //     {\n      //         setBackground: (values) => {\n      //             this.setFormat('background_color', values.color);\n      //             this.setFormat('background_image', values.image);\n      //             this.setFormat('background_position', values.position);\n      //             this.setFormat('background_size', parseInt(values.size, 10) || 100);\n      //             this.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n      //             this.render();\n      //         }\n      //     }\n      // ),\n\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        font_size: function font_size(v) {\n          return v ? \"font-size: \".concat(v, \"px;\") : '';\n        },\n        font_family: function font_family(v) {\n          if (!v) return '';\n          var escaped = v.replace(/\"/g, '&quot;');\n          return \"font-family: \".concat(escaped, \" !important;\");\n        },\n        link_color: function link_color(v) {\n          return v ? \"--link-color: \".concat(v, \" !important;\") : '';\n        },\n        letter_spacing: function letter_spacing(v) {\n          return v ? \"letter-spacing: \".concat(v, \"px !important;\") : '';\n        },\n        paragraph_spacing: function paragraph_spacing(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        line_height: function line_height(v) {\n          return v ? \"line-height: \".concat(v, \" !important;\") : '';\n        },\n        text_direction: function text_direction(v) {\n          return v === 'right_to_left' ? \"direction: rtl !important;\" : v === 'left_to_right' ? \"direction: ltr !important;\" : '';\n        },\n        font_style: function font_style(v) {\n          return v ? \"font-style: \".concat(v, \" !important;\") : '';\n        },\n        font_weight: function font_weight(v) {\n          return v ? \"font-weight: \".concat(v, \" !important;\") : '';\n        },\n        // text_color: v => v ? `color: ${v} !important;` : '',\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        margin_top: function margin_top(v) {\n          return v ? \"margin-top: \".concat(v, \"px !important;\") : '';\n        },\n        margin_right: function margin_right(v) {\n          return v ? \"margin-right: \".concat(v, \"px !important;\") : '';\n        },\n        margin_bottom: function margin_bottom(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        margin_left: function margin_left(v) {\n          return v ? \"margin-left: \".concat(v, \"px !important;\") : '';\n        },\n        border_radius: function border_radius(v) {\n          return v ? \"border-radius: \".concat(v, \"px !important;\") : '';\n        },\n        border_color: function border_color(v) {\n          return v ? \"border-color: \".concat(v, \" !important;\") : '';\n        },\n        border_size: function border_size(v, formats) {\n          if (v && formats.border_color) {\n            return \"border: \".concat(v, \"px solid \").concat(formats.border_color, \" !important;\");\n          } else if (v) {\n            return \"border: \".concat(v, \"px solid !important;\");\n          } else {\n            return '';\n          }\n        },\n        // left -> start, center -> center, right -> end\n        text_align: function text_align(v) {\n          return v ? \"text-align: \".concat(v, \" !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new H3Element(data.template, data.text);\n\n      // formats\n      if (data.formats) {\n        e.setFormat('font_size', data.formats.font_size);\n        e.setFormat('font_family', data.formats.font_family);\n        e.setFormat('link_color', data.formats.link_color);\n        e.setFormat('paragraph_spacing', data.formats.paragraph_spacing);\n        e.setFormat('line_height', data.formats.line_height);\n        e.setFormat('letter_spacing', data.formats.letter_spacing);\n        e.setFormat('text_direction', data.formats.text_direction);\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n        e.setFormat('text_align', data.formats.text_align);\n        if (data.formats.background_image) {\n          e.setFormat('background_image', data.formats.background_image);\n        }\n        if (data.formats.background_position) {\n          e.setFormat('background_position', data.formats.background_position);\n        }\n        if (data.formats.background_repeat) {\n          e.setFormat('background_repeat', data.formats.background_repeat);\n        }\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (H3Element);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/H3Element.js?");

/***/ }),

/***/ "./src/includes/H4Element.js":
/*!***********************************!*\
  !*** ./src/includes/H4Element.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AlignControl.js */ \"./src/includes/AlignControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar H4Element = /*#__PURE__*/function (_BaseElement) {\n  function H4Element(template, text) {\n    var _this;\n    _classCallCheck(this, H4Element);\n    _this = _callSuper(this, H4Element);\n    _this.template = template;\n    _this.text = text;\n    _this.domNode = null;\n\n    // formats\n    _this.formats = {\n      font_family: null,\n      font_size: null,\n      text_color: \"#000\",\n      link_color: null,\n      paragraph_spacing: null,\n      line_height: null,\n      letter_spacing: null,\n      text_direction: \"left_to_right\",\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      text_align: 'center' // left, center, right\n    };\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n    return _this;\n  }\n  _inherits(H4Element, _BaseElement);\n  return _createClass(H4Element, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'H4Element');\n      }\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats) // <-- added\n      });\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'H4Element',\n        template: this.template,\n        text: this.text,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RichTextControl\n      new RichTextControl(\n      // label\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }),\n      // Padding\n      new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      }), new FontFamilyControl('Font Family', this.getFormat('font_family', 'Arial'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_family', value);\n          _this3.render();\n        }\n      }), new FontWeightControl('Font Weight', this.getFormat('font_weight', 'normal'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_weight', value);\n          _this3.render();\n        }\n      }), new FontSizeControl('Font Size', this.getFormat('font_size', '16px'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_size', value);\n          _this3.render();\n        }\n      }), new TextColorControl('Text Color', this.getFormat('text_color', '#000000'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_color', value);\n          _this3.render();\n        }\n      }), new LinkColorControl('Link Color', this.getFormat('link_color', '#0000EE'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('link_color', value);\n          _this3.render();\n        }\n      }), new _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('Text alignment', this.getFormat('text_align', 'left'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_align', value);\n          _this3.render();\n        }\n      }), new ParagraphSpacingControl('Paragraph Spacing', this.getFormat('paragraph_spacing', null), {\n        setValue: function setValue(value) {\n          _this3.setFormat('paragraph_spacing', value);\n          _this3.render();\n        }\n      }), new LineHeightControl('Line Height', this.getFormat('line_height', '1.2'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('line_height', value);\n          _this3.render();\n        }\n      }), new LetterSpacingControl('Letter Spacing', this.getFormat('letter_spacing', '0'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('letter_spacing', value);\n          _this3.render();\n        }\n      }), new TextDirectionControl('Text Direction', this.getFormat('text_direction', 'left_to_right'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_direction', value);\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        font_size: function font_size(v) {\n          return v ? \"font-size: \".concat(v, \"px;\") : '';\n        },\n        font_family: function font_family(v) {\n          if (!v) return '';\n          var escaped = v.replace(/\"/g, '&quot;');\n          return \"font-family: \".concat(escaped, \" !important;\");\n        },\n        link_color: function link_color(v) {\n          return v ? \"--link-color: \".concat(v, \" !important;\") : '';\n        },\n        letter_spacing: function letter_spacing(v) {\n          return v ? \"letter-spacing: \".concat(v, \"px !important;\") : '';\n        },\n        paragraph_spacing: function paragraph_spacing(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        line_height: function line_height(v) {\n          return v ? \"line-height: \".concat(v, \" !important;\") : '';\n        },\n        text_direction: function text_direction(v) {\n          return v === 'right_to_left' ? \"direction: rtl !important;\" : v === 'left_to_right' ? \"direction: ltr !important;\" : '';\n        },\n        font_style: function font_style(v) {\n          return v ? \"font-style: \".concat(v, \" !important;\") : '';\n        },\n        font_weight: function font_weight(v) {\n          return v ? \"font-weight: \".concat(v, \" !important;\") : '';\n        },\n        // text_color: v => v ? `color: ${v} !important;` : '',\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        margin_top: function margin_top(v) {\n          return v ? \"margin-top: \".concat(v, \"px !important;\") : '';\n        },\n        margin_right: function margin_right(v) {\n          return v ? \"margin-right: \".concat(v, \"px !important;\") : '';\n        },\n        margin_bottom: function margin_bottom(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        margin_left: function margin_left(v) {\n          return v ? \"margin-left: \".concat(v, \"px !important;\") : '';\n        },\n        border_radius: function border_radius(v) {\n          return v ? \"border-radius: \".concat(v, \"px !important;\") : '';\n        },\n        border_color: function border_color(v) {\n          return v ? \"border-color: \".concat(v, \" !important;\") : '';\n        },\n        border_size: function border_size(v, formats) {\n          if (v && formats.border_color) {\n            return \"border: \".concat(v, \"px solid \").concat(formats.border_color, \" !important;\");\n          } else if (v) {\n            return \"border: \".concat(v, \"px solid !important;\");\n          } else {\n            return '';\n          }\n        },\n        // left -> start, center -> center, right -> end\n        text_align: function text_align(v) {\n          return v ? \"text-align: \".concat(v, \" !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new H4Element(data.template, data.text);\n\n      // formats\n      if (data.formats) {\n        e.setFormat('font_size', data.formats.font_size);\n        e.setFormat('font_family', data.formats.font_family);\n        e.setFormat('link_color', data.formats.link_color);\n        e.setFormat('paragraph_spacing', data.formats.paragraph_spacing);\n        e.setFormat('line_height', data.formats.line_height);\n        e.setFormat('letter_spacing', data.formats.letter_spacing);\n        e.setFormat('text_direction', data.formats.text_direction);\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n        e.setFormat('text_align', data.formats.text_align);\n        if (data.formats.background_image) {\n          e.setFormat('background_image', data.formats.background_image);\n        }\n        if (data.formats.background_position) {\n          e.setFormat('background_position', data.formats.background_position);\n        }\n        if (data.formats.background_repeat) {\n          e.setFormat('background_repeat', data.formats.background_repeat);\n        }\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (H4Element);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/H4Element.js?");

/***/ }),

/***/ "./src/includes/H5Element.js":
/*!***********************************!*\
  !*** ./src/includes/H5Element.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./AlignControl.js */ \"./src/includes/AlignControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar H5Element = /*#__PURE__*/function (_BaseElement) {\n  function H5Element(template, text) {\n    var _this;\n    _classCallCheck(this, H5Element);\n    _this = _callSuper(this, H5Element);\n    _this.template = template;\n    _this.text = text;\n    _this.domNode = null;\n    _this.formats = {\n      font_family: null,\n      font_size: null,\n      text_color: \"#000\",\n      link_color: null,\n      paragraph_spacing: null,\n      line_height: null,\n      letter_spacing: null,\n      text_direction: \"left_to_right\",\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      text_align: 'center' // left, center, right\n    };\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n    return _this;\n  }\n  _inherits(H5Element, _BaseElement);\n  return _createClass(H5Element, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'H5Element');\n      }\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats)\n      });\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'H5Element',\n        template: this.template,\n        text: this.text,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RichTextControl\n      new RichTextControl(\n      // label\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }), new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      }), new FontFamilyControl('Font Family', this.getFormat('font_family', 'Arial'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_family', value);\n          _this3.render();\n        }\n      }), new FontWeightControl('Font Weight', this.getFormat('font_weight', 'normal'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_weight', value);\n          _this3.render();\n        }\n      }), new FontSizeControl('Font Size', this.getFormat('font_size', '16px'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_size', value);\n          _this3.render();\n        }\n      }), new TextColorControl('Text Color', this.getFormat('text_color', '#000000'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_color', value);\n          _this3.render();\n        }\n      }), new LinkColorControl('Link Color', this.getFormat('link_color', '#0000EE'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('link_color', value);\n          _this3.render();\n        }\n      }), new _AlignControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('Text alignment', this.getFormat('text_align', 'left'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_align', value);\n          _this3.render();\n        }\n      }), new ParagraphSpacingControl('Paragraph Spacing', this.getFormat('paragraph_spacing', null), {\n        setValue: function setValue(value) {\n          _this3.setFormat('paragraph_spacing', value);\n          _this3.render();\n        }\n      }), new LineHeightControl('Line Height', this.getFormat('line_height', '1.2'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('line_height', value);\n          _this3.render();\n        }\n      }), new LetterSpacingControl('Letter Spacing', this.getFormat('letter_spacing', '0'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('letter_spacing', value);\n          _this3.render();\n        }\n      }), new TextDirectionControl('Text Direction', this.getFormat('text_direction', 'left_to_right'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_direction', value);\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        font_size: function font_size(v) {\n          return v ? \"font-size: \".concat(v, \"px;\") : '';\n        },\n        font_family: function font_family(v) {\n          if (!v) return '';\n          var escaped = v.replace(/\"/g, '&quot;');\n          return \"font-family: \".concat(escaped, \" !important;\");\n        },\n        link_color: function link_color(v) {\n          return v ? \"--link-color: \".concat(v, \" !important;\") : '';\n        },\n        letter_spacing: function letter_spacing(v) {\n          return v ? \"letter-spacing: \".concat(v, \"px !important;\") : '';\n        },\n        paragraph_spacing: function paragraph_spacing(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        line_height: function line_height(v) {\n          return v ? \"line-height: \".concat(v, \" !important;\") : '';\n        },\n        text_direction: function text_direction(v) {\n          return v === 'right_to_left' ? \"direction: rtl !important;\" : v === 'left_to_right' ? \"direction: ltr !important;\" : '';\n        },\n        font_style: function font_style(v) {\n          return v ? \"font-style: \".concat(v, \" !important;\") : '';\n        },\n        font_weight: function font_weight(v) {\n          return v ? \"font-weight: \".concat(v, \" !important;\") : '';\n        },\n        // text_color: v => v ? `color: ${v} !important;` : '',\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        margin_top: function margin_top(v) {\n          return v ? \"margin-top: \".concat(v, \"px !important;\") : '';\n        },\n        margin_right: function margin_right(v) {\n          return v ? \"margin-right: \".concat(v, \"px !important;\") : '';\n        },\n        margin_bottom: function margin_bottom(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        margin_left: function margin_left(v) {\n          return v ? \"margin-left: \".concat(v, \"px !important;\") : '';\n        },\n        border_radius: function border_radius(v) {\n          return v ? \"border-radius: \".concat(v, \"px !important;\") : '';\n        },\n        border_color: function border_color(v) {\n          return v ? \"border-color: \".concat(v, \" !important;\") : '';\n        },\n        border_size: function border_size(v, formats) {\n          if (v && formats.border_color) {\n            return \"border: \".concat(v, \"px solid \").concat(formats.border_color, \" !important;\");\n          } else if (v) {\n            return \"border: \".concat(v, \"px solid !important;\");\n          } else {\n            return '';\n          }\n        },\n        // left -> start, center -> center, right -> end\n        text_align: function text_align(v) {\n          return v ? \"text-align: \".concat(v, \" !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new H5Element(data.template, data.text);\n      if (data.formats) {\n        e.setFormat('font_size', data.formats.font_size);\n        e.setFormat('font_family', data.formats.font_family);\n        e.setFormat('link_color', data.formats.link_color);\n        e.setFormat('paragraph_spacing', data.formats.paragraph_spacing);\n        e.setFormat('line_height', data.formats.line_height);\n        e.setFormat('letter_spacing', data.formats.letter_spacing);\n        e.setFormat('text_direction', data.formats.text_direction);\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n        e.setFormat('text_align', data.formats.text_align);\n        if (data.formats.background_image) {\n          e.setFormat('background_image', data.formats.background_image);\n        }\n        if (data.formats.background_position) {\n          e.setFormat('background_position', data.formats.background_position);\n        }\n        if (data.formats.background_repeat) {\n          e.setFormat('background_repeat', data.formats.background_repeat);\n        }\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (H5Element);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/H5Element.js?");

/***/ }),

/***/ "./src/includes/HeadingWidget.js":
/*!***************************************!*\
  !*** ./src/includes/HeadingWidget.js ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _H1Element_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./H1Element.js */ \"./src/includes/H1Element.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar HeadingWidget = /*#__PURE__*/function (_BaseWidget) {\n  function HeadingWidget() {\n    var _this;\n    _classCallCheck(this, HeadingWidget);\n    _this = _callSuper(this, HeadingWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add an H1Element to the widget\n    var h1 = new _H1Element_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('H1', 'Heading');\n    _this.elements.push(h1);\n    return _this;\n  }\n  _inherits(HeadingWidget, _BaseWidget);\n  return _createClass(HeadingWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Heading Widget';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'title';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (HeadingWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/HeadingWidget.js?");

/***/ }),

/***/ "./src/includes/ImageControl.js":
/*!**************************************!*\
  !*** ./src/includes/ImageControl.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _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 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 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 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; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ImageControl = /*#__PURE__*/function () {\n  function ImageControl(label, value, callback) {\n    _classCallCheck(this, ImageControl);\n    // Initialize properties\n    this.label = label; // Label for the image control\n    this.value = value.src; // Initial image URL\n    this.alt = value.alt; // Initial alternate text\n    this.callback = callback; // Callback function to handle changes\n\n    this.UploadMode = true; // Initial upload mode\n    this.PasteMode = false; // Initial paste mode\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    // Render control\n    this.render();\n  }\n  return _createClass(ImageControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3 builder-radio-container d-flex flex-column\\\">\\n                <label class=\\\"form-label fw-semibold d-block mb-2 builder-radio-label\\\">Image Mode</label>\\n                <div class=\\\"btn-group builder-radio-group\\\" role=\\\"group\\\" aria-label=\\\"Image Mode\\\">\\n                    <input type=\\\"radio\\\" class=\\\"btn-check\\\" name=\\\"radioButton_Image_Mode\\\" \\n                        id=\\\"Upload_Image\\\" value=\\\"upload\\\" \".concat(this.UploadMode ? 'checked' : '', \">\\n                    <label class=\\\"btn btn-outline-primary py-2 builder-radio-btn builder-radio-option fw-bold\\\" for=\\\"Upload_Image\\\">Upload Image</label>\\n                    \\n                    <input type=\\\"radio\\\" class=\\\"btn-check\\\" name=\\\"radioButton_Image_Mode\\\" \\n                        id=\\\"Paste_Url\\\" value=\\\"paste\\\" \").concat(this.PasteMode ? 'checked' : '', \">\\n                    <label class=\\\"btn btn-outline-primary py-2 builder-radio-btn builder-radio-option fw-bold\\\" for=\\\"Paste_Url\\\">Paste Url</label>\\n                </div>\\n            </div>\\n            \") + (this.UploadMode ? \"\\n            <div class=\\\"py-2 px-3 d-flex align-items-start\\\">\\n                <div class=\\\"image-preview me-3 d-flex align-items-center shadow-sm border\\\" style=\\\"border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);height:100px;\\\">\\n                    <img src=\\\"\".concat(this.value, \"\\\" alt=\\\"Preview\\\" class=\\\"img-fluid\\\" style=\\\"max-height: 100px; border-radius: 8px;min-width:100px;\\\"/>\\n                </div>\\n                <div class=\\\"flex-grow-1\\\">\\n                    <div class=\\\"mb-3 image-info\\\">\\n                        <small><span class=\\\"fw-semibold\\\">Loading...</span><br>\\n                        <span class=\\\"dimensions\\\">-- x -- px</span><br>\\n                        <span class=\\\"size\\\">-- kB</span><small>\\n                    </div>\\n                    <div class=\\\"btn-group mb-2\\\" role=\\\"group\\\">\\n                        <button data-control=\\\"upload\\\" type=\\\"button\\\" class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center\\\" title=\\\"Upload\\\">\\n                            <span class=\\\"material-symbols-rounded\\\">upload</span>\\n                        </button>\\n                        <button data-control=\\\"reload\\\" type=\\\"button\\\" class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center\\\" title=\\\"Replace\\\">\\n                            <span class=\\\"material-symbols-rounded\\\">sync</span>\\n                        </button>\\n                        <button data-control=\\\"delete\\\" type=\\\"button\\\" class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center small\\\" title=\\\"Remove\\\">\\n                            <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                        </button>\\n                    </div>\\n                </div>\\n            </div>\") : \"\\n            <div class=\\\"py-2 px-3 d-flex align-items-start\\\">\\n                <div class=\\\"flex-grow-1\\\">\\n                    <label class=\\\"form-label fw-semibold\\\">Image URL</label>\\n                    <input type=\\\"text\\\" name=\\\"image-url\\\" class=\\\"form-control\\\" placeholder=\\\"Enter image URL\\\" />\\n                </div>\\n            </div>\") + \"\\n            <div class=\\\"py-2 px-3 d-flex align-items-start\\\">\\n                <div class=\\\"flex-grow-1\\\">\\n                    <label class=\\\"form-label fw-semibold\\\">Alternate Text</label>\\n                    <input type=\\\"text\\\" name=\\\"alt-text\\\" class=\\\"form-control\\\" placeholder=\\\"Enter alternate text\\\" />\\n                </div>\\n            </div>\";\n      var uploadRadio = this.domNode.querySelector('#Upload_Image');\n      var pasteRadio = this.domNode.querySelector('#Paste_Url');\n      if (uploadRadio) {\n        uploadRadio.addEventListener('change', function () {\n          return _this.changeMode('upload');\n        });\n      }\n      if (pasteRadio) {\n        pasteRadio.addEventListener('change', function () {\n          return _this.changeMode('paste');\n        });\n      }\n\n      // Set current values\n      var imageInput = this.getImageInput();\n      if (imageInput) imageInput.value = this.value;\n      var altInput = this.getAltInput();\n      if (altInput) altInput.value = this.alt;\n\n      // Fetch and update image info\n      this.updateImageInfo(this.value);\n\n      // Add event listener for the image URL input field\n      if (imageInput) {\n        imageInput.addEventListener('input', function (e) {\n          var newUrl = e.target.value;\n          _this.value = newUrl;\n          _this.updatePreview(newUrl); // Update the preview image\n          _this.callback.setImage(newUrl); // Notify callback of the new image URL\n          _this.updateImageInfo(newUrl); // Update the image information\n        });\n      }\n\n      // Add event listener for the alternate text input field\n      if (altInput) {\n        altInput.addEventListener('input', function (e) {\n          _this.alt = e.target.value; // Update the alt property\n          _this.updateAltText(e.target.value); // Update the alt attribute of the image\n        });\n      }\n\n      // Add event listeners for the buttons\n      var uploadBtn = this.getUploadButton();\n      if (uploadBtn) uploadBtn.addEventListener('click', function () {\n        return _this.browserAndUpload();\n      });\n      var reloadBtn = this.getReloadButton();\n      if (reloadBtn) reloadBtn.addEventListener('click', function () {\n        return _this.render();\n      });\n      var removeBtn = this.getRemoveButton();\n      if (removeBtn) removeBtn.addEventListener('click', function () {\n        var emptyImageUrl = 'data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTYgMjk2Ij48ZyBpZD0iTGF5ZXJfMS0yIj48cmVjdCB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I2U2ZTZlNjsiLz48cGF0aCBkPSJNMjM2Ljk4LDk5LjQ0Yy0xLjEyLDAtMi4wMi45MS0yLjAyLDIuMDJ2OTMuMzZjMCw0LjktMi4zLDkuMjctNS44NywxMi4xMWwtNDYuMS00Ny4yM2MtLjc1LS43Ny0xLjk3LS44Mi0yLjc4LS4xMmwtMzIuMTgsMjcuOTgtNS43OS01Ljk1Yy0uNzgtLjgtMi4wNi0uODItMi44Ni0uMDQtLjguNzgtLjgyLDIuMDYtLjA0LDIuODZsNy4xMyw3LjMzYy43NS43NywxLjk3LjgyLDIuNzguMTJsMzIuMTgtMjcuOTgsNDQuMDksNDUuMThjLTEuODYuNzktMy45LDEuMjMtNi4wNSwxLjIzaC0xMTIuNjRjLTEuMTIsMC0yLjAyLjktMi4wMiwyLjAycy45MSwyLjAyLDIuMDIsMi4wMmgxMTIuNjRjMTAuNzcsMCwxOS41My04Ljc2LDE5LjUzLTE5LjUzdi05My4zNmMwLTEuMTItLjktMi4wMi0yLjAyLTIuMDJaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0yMzguNDgsNjYuOWMtLjc1LS44My0yLjAzLS45LTIuODYtLjE2bC0xNi45MywxNS4xOEg3Ni4zNmMtMTAuNzcsMC0xOS41Myw4Ljc2LTE5LjUzLDE5LjUzdjkzLjM2YzAsOS4xNiw2LjM2LDE2Ljg2LDE0Ljg5LDE4Ljk1bC0xNC4yMiwxMi43NWMtLjgzLjc0LS45LDIuMDMtLjE2LDIuODYuNC40NS45NS42NywxLjUxLjY3LjQ4LDAsLjk2LS4xNywxLjM1LS41MkwyMzguMzMsNjkuNzZjLjgzLS43NS45LTIuMDMuMTYtMi44NlpNNzYuMzYsODUuOThoMTM3LjgybC04OC4wOSw3OS4wMi0yMS44My0yMi40NWMtLjc2LS43OC0xLjk5LS44Mi0yLjgtLjA5bC00MC41NywzNi40NXYtNzcuNDVjMC04LjU0LDYuOTQtMTUuNDgsMTUuNDgtMTUuNDhaTTYwLjg4LDE5NC44MnYtMTAuNDdsNDEuODMtMzcuNTgsMjAuMzYsMjAuOTQtNDcuNDQsNDIuNTVjLTguMTktLjM5LTE0Ljc1LTcuMTUtMTQuNzUtMTUuNDRaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0xMjIuODMsMTI5LjEzYy04LjE5LDAtMTQuODUtNi42Ni0xNC44NS0xNC44NXM2LjY2LTE0Ljg1LDE0Ljg1LTE0Ljg1LDE0Ljg1LDYuNjYsMTQuODUsMTQuODUtNi42NiwxNC44NS0xNC44NSwxNC44NVpNMTIyLjgzLDEwMy40OGMtNS45NSwwLTEwLjgsNC44NC0xMC44LDEwLjhzNC44NCwxMC44LDEwLjgsMTAuOCwxMC44LTQuODQsMTAuOC0xMC44LTQuODQtMTAuOC0xMC44LTEwLjhaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjwvZz48L3N2Zz4=';\n        _this.value = emptyImageUrl; // Update the value property\n        _this.callback.setImage(emptyImageUrl); // Notify callback of the placeholder URL\n        _this.render(); // Re-render the control\n      });\n    }\n  }, {\n    key: \"updateImageInfo\",\n    value: function () {\n      var _updateImageInfo = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {\n        var _this2 = this;\n        var response, blob, filename, img;\n        return _regeneratorRuntime().wrap(function _callee$(_context) {\n          while (1) switch (_context.prev = _context.next) {\n            case 0:\n              if (url) {\n                _context.next = 2;\n                break;\n              }\n              return _context.abrupt(\"return\");\n            case 2:\n              _context.prev = 2;\n              _context.next = 5;\n              return fetch(url);\n            case 5:\n              response = _context.sent;\n              _context.next = 8;\n              return response.blob();\n            case 8:\n              blob = _context.sent;\n              // Extract filename\n              filename = url.split('/').pop(); // Create an image element to get dimensions\n              img = new Image();\n              img.src = URL.createObjectURL(blob);\n              img.onload = function () {\n                var dimensions = \"\".concat(img.width, \" x \").concat(img.height, \" px\");\n                var size = \"\".concat((blob.size / 1024).toFixed(2), \" kB\");\n\n                // Update the DOM with the image info\n                var infoContainer = _this2.domNode.querySelector('.image-info');\n                if (infoContainer) {\n                  infoContainer.innerHTML = \"\\n                        <small><span class=\\\"fw-semibold\\\">\".concat(filename, \"</span><br>\\n                        <span class=\\\"dimensions\\\">\").concat(dimensions, \"</span><br>\\n                        <span class=\\\"size\\\">\").concat(size, \"</span><small>\\n                    \");\n                }\n              };\n              _context.next = 18;\n              break;\n            case 15:\n              _context.prev = 15;\n              _context.t0 = _context[\"catch\"](2);\n              console.error('Error fetching image info:', _context.t0);\n            case 18:\n            case \"end\":\n              return _context.stop();\n          }\n        }, _callee, null, [[2, 15]]);\n      }));\n      function updateImageInfo(_x) {\n        return _updateImageInfo.apply(this, arguments);\n      }\n      return updateImageInfo;\n    }()\n  }, {\n    key: \"browserAndUpload\",\n    value: function browserAndUpload() {\n      var _this3 = this;\n      var input = document.createElement('input');\n      input.type = 'file';\n      input.accept = 'image/*';\n      input.addEventListener('change', /*#__PURE__*/function () {\n        var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {\n          var file, formData, response, result;\n          return _regeneratorRuntime().wrap(function _callee2$(_context2) {\n            while (1) switch (_context2.prev = _context2.next) {\n              case 0:\n                file = event.target.files[0];\n                if (!file) {\n                  _context2.next = 21;\n                  break;\n                }\n                formData = new FormData();\n                formData.append('file', file);\n                _context2.prev = 4;\n                _context2.next = 7;\n                return fetch(builder.assetUploadHandler, {\n                  // @todo: builder dependency\n                  method: 'POST',\n                  body: formData\n                });\n              case 7:\n                response = _context2.sent;\n                if (!response.ok) {\n                  _context2.next = 15;\n                  break;\n                }\n                _context2.next = 11;\n                return response.json();\n              case 11:\n                result = _context2.sent;\n                if (result.url) {\n                  // this.updatePreview(result.url); // Update the image preview\n                  // this.getImageInput().value = result.url; // Update the input field\n                  _this3.value = result.url; // Update the value property\n                  _this3.callback.setImage(result.url); // Notify callback of the new image URL\n                  _this3.render();\n                } else {\n                  console.error('Upload failed: No URL returned');\n                }\n                _context2.next = 16;\n                break;\n              case 15:\n                console.error('Upload failed:', response.statusText);\n              case 16:\n                _context2.next = 21;\n                break;\n              case 18:\n                _context2.prev = 18;\n                _context2.t0 = _context2[\"catch\"](4);\n                console.error('Error uploading file:', _context2.t0);\n              case 21:\n              case \"end\":\n                return _context2.stop();\n            }\n          }, _callee2, null, [[4, 18]]);\n        }));\n        return function (_x2) {\n          return _ref.apply(this, arguments);\n        };\n      }());\n      input.click();\n    }\n  }, {\n    key: \"changeMode\",\n    value: function changeMode(mode) {\n      if (mode === 'upload') {\n        this.UploadMode = true;\n        this.PasteMode = false;\n      } else if (mode === 'paste') {\n        this.UploadMode = false;\n        this.PasteMode = true;\n      }\n      this.render(); // Re-render the control to reflect the mode change\n    }\n  }, {\n    key: \"getImageInput\",\n    value: function getImageInput() {\n      return this.domNode.querySelector('[name=\"image-url\"]');\n    }\n  }, {\n    key: \"getAltInput\",\n    value: function getAltInput() {\n      return this.domNode.querySelector('[name=\"alt-text\"]');\n    }\n  }, {\n    key: \"getUploadButton\",\n    value: function getUploadButton() {\n      return this.domNode.querySelector('[data-control=\"upload\"]');\n    }\n  }, {\n    key: \"getReloadButton\",\n    value: function getReloadButton() {\n      return this.domNode.querySelector('[data-control=\"reload\"]');\n    }\n  }, {\n    key: \"getRemoveButton\",\n    value: function getRemoveButton() {\n      return this.domNode.querySelector('[data-control=\"delete\"]');\n    }\n  }, {\n    key: \"getImage\",\n    value: function getImage() {\n      return this.getImageInput().value;\n    }\n  }, {\n    key: \"updatePreview\",\n    value: function updatePreview(url) {\n      var img = this.domNode.querySelector('.image-preview img');\n      img.src = url; // Update the image source\n    }\n  }, {\n    key: \"updateAltText\",\n    value: function updateAltText(altText) {\n      this.callback.setAlt(altText); // Notify callback of the placeholder URL\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ImageControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ImageControl.js?");

/***/ }),

/***/ "./src/includes/ImageEffectControl.js":
/*!********************************************!*\
  !*** ./src/includes/ImageEffectControl.js ***!
  \********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ImageEffectControl = /*#__PURE__*/function () {\n  function ImageEffectControl(label, value, callback) {\n    _classCallCheck(this, ImageEffectControl);\n    // Initialize properties\n    this.label = label; // Label for the image control\n    this.value = value.src; // Initial image URL\n    this.current_effects = value.current_effects || {}; // Current effects applied to the image\n    this.callback = callback; // Callback function to handle changes\n\n    this.effects = {\n      grayscale: [0, 20, 40, 60, 80, 100],\n      // percentage\n      sepia: [0, 20, 40, 60, 80, 100],\n      // percentage\n      invert: [0, 20, 40, 60, 80, 100],\n      // percentage\n      blur: [0, 1, 2, 3, 4, 5, 10],\n      // px\n      brightness: [100, 75, 50, 125, 150, 200],\n      // percentage\n      contrast: [100, 75, 50, 125, 150, 200],\n      // percentage\n      saturate: [100, 50, 0, 150, 200, 300],\n      // percentage\n      hueRotate: [0, 30, 60, 90, 120, 180, 270],\n      // degrees\n      opacity: [100, 80, 60, 40, 20, 0] // percentage\n    };\n\n    // Effect labels for display\n    this.effectLabels = {\n      grayscale: 'Grayscale',\n      sepia: 'Sepia',\n      invert: 'Invert',\n      blur: 'Blur',\n      brightness: 'Brightness',\n      contrast: 'Contrast',\n      saturate: 'Saturation',\n      hueRotate: 'Hue Rotate',\n      opacity: 'Opacity'\n    };\n\n    // Effect descriptions\n    this.effectDescriptions = {\n      grayscale: '🖌️ Converts the image to black and white, with values from 0% (normal) to 100% (completely grayscale).',\n      sepia: '🏺 Adds a warm, yellowish-brown tone to create a vintage or antique look.',\n      invert: '🔄 Reverses all colors in the image, like a photo negative effect.',\n      blur: '🌫️ Creates a soft focus effect, higher values increase the blurriness.',\n      brightness: '☀️ Adjusts how bright the image appears, 100% is normal, higher values increase brightness.',\n      contrast: '⚖️ Controls the difference between dark and light areas, 100% is normal.',\n      saturate: '🌈 Changes color intensity, 100% is normal, higher values make colors more vivid.',\n      hueRotate: '🎨 Shifts all colors in the image by rotating them around the color wheel.',\n      opacity: '👻 Controls how transparent the image is, 100% is fully visible, 0% is invisible.'\n    };\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n    this.domNode.className = 'ImageEffectControl';\n\n    // Render control\n    this.render();\n  }\n  return _createClass(ImageEffectControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this$current_effects,\n        _this$current_effects2,\n        _this$current_effects3,\n        _this$current_effects4,\n        _this$current_effects5,\n        _this$current_effects6,\n        _this$current_effects7,\n        _this$current_effects8,\n        _this$current_effects9,\n        _this = this;\n      var current = {\n        grayscale: (_this$current_effects = this.current_effects.grayscale) !== null && _this$current_effects !== void 0 ? _this$current_effects : 0,\n        sepia: (_this$current_effects2 = this.current_effects.sepia) !== null && _this$current_effects2 !== void 0 ? _this$current_effects2 : 0,\n        invert: (_this$current_effects3 = this.current_effects.invert) !== null && _this$current_effects3 !== void 0 ? _this$current_effects3 : 0,\n        blur: (_this$current_effects4 = this.current_effects.blur) !== null && _this$current_effects4 !== void 0 ? _this$current_effects4 : 0,\n        brightness: (_this$current_effects5 = this.current_effects.brightness) !== null && _this$current_effects5 !== void 0 ? _this$current_effects5 : 100,\n        contrast: (_this$current_effects6 = this.current_effects.contrast) !== null && _this$current_effects6 !== void 0 ? _this$current_effects6 : 100,\n        saturate: (_this$current_effects7 = this.current_effects.saturate) !== null && _this$current_effects7 !== void 0 ? _this$current_effects7 : 100,\n        hueRotate: (_this$current_effects8 = this.current_effects.hueRotate) !== null && _this$current_effects8 !== void 0 ? _this$current_effects8 : 0,\n        opacity: (_this$current_effects9 = this.current_effects.opacity) !== null && _this$current_effects9 !== void 0 ? _this$current_effects9 : 100\n      };\n      var makeOptions = function makeOptions(effect, values) {\n        return values.map(function (value) {\n          var imgStyle = '';\n          if (effect === 'opacity' && value <= 0) {\n            imgStyle = 'visibility: hidden;';\n          } else {\n            var filterValue = effect === 'hueRotate' ? \"hue-rotate(\".concat(value, \"deg)\") : \"\".concat(effect, \"(\").concat(value).concat(effect === 'blur' ? 'px' : '%', \")\");\n            imgStyle = \"filter: \".concat(filterValue, \";\");\n          }\n          return \"<span class=\\\"ImageEffectControl-thumb\".concat(value == current[effect] ? ' ImageEffectControl-selected' : '', \"\\\">\\n                    <img src=\\\"\").concat(_this.value, \"\\\" \\n                        data-effect=\\\"\").concat(effect, \"\\\" \\n                        data-value=\\\"\").concat(value, \"\\\" \\n                        style=\\\"\").concat(imgStyle, \" width: 56px; height: 56px; border-radius: 6px; cursor: pointer;\\\">\\n                    <div class=\\\"ImageEffectControl-thumbLabel\\\">\").concat(value).concat(effect === 'blur' ? 'px' : effect === 'hueRotate' ? '°' : '%', \"</div>\\n                </span>\");\n        }).join('');\n      };\n\n      // Create accordion panels for each effect\n      var effectPanels = Object.keys(this.effects).map(function (effect) {\n        var currentValue = current[effect];\n        var unit = effect === 'blur' ? 'px' : effect === 'hueRotate' ? '°' : '%';\n\n        // Create thumbnail for currently selected value\n        var currentThumb = \"\\n                <div class=\\\"ImageEffectControl-previewThumb\\\">\\n                    <img src=\\\"\".concat(_this.value, \"\\\" \\n                        style=\\\"filter: \").concat(effect === 'hueRotate' ? 'hue-rotate(' + currentValue + 'deg)' : effect + '(' + currentValue + (effect === 'blur' ? 'px' : '%') + ')', \";\\\"> \\n                </div>\");\n        return \"\\n            <div class=\\\"ImageEffectControl-panel\\\" data-effect=\\\"\".concat(effect, \"\\\">\\n                <input type=\\\"hidden\\\" name=\\\"\").concat(effect, \"\\\" value=\\\"\").concat(currentValue, \"\\\">\\n                \\n                <div class=\\\"ImageEffectControl-header\\\">\\n                    <div class=\\\"ImageEffectControl-name\\\">\").concat(_this.effectLabels[effect], \"</div>\\n                    <div class=\\\"ImageEffectControl-current\\\">\\n                        \").concat(currentThumb, \"\\n                        <div class=\\\"ImageEffectControl-valueDisplay\\\">\\n                            <span class=\\\"ImageEffectControl-valueNumber\\\">\").concat(currentValue, \"</span>\\n                            <span class=\\\"ImageEffectControl-valueUnit\\\">\").concat(unit, \"</span>\\n                        </div>\\n                    </div>\\n                    <div class=\\\"ImageEffectControl-toggle\\\">\\n                        <span class=\\\"ImageEffectControl-arrow\\\"></span>\\n                    </div>\\n                </div>\\n                \\n                <div class=\\\"ImageEffectControl-content\\\">\\n                    <div class=\\\"alert alert-light fst-italic rounded-2 bg-light border-0 mb-3 ImageEffectControl-description\\\">\").concat(_this.effectDescriptions[effect], \"</div>\\n                    <div class=\\\"ImageEffectControl-options\\\" data-effect=\\\"\").concat(effect, \"\\\">\\n                        \").concat(makeOptions(effect, _this.effects[effect]), \"\\n                    </div>\\n                </div>\\n            </div>\");\n      }).join('');\n      this.domNode.innerHTML = \"\\n        <div class=\\\"ImageEffectControl-container\\\">\\n            <label class=\\\"ImageEffectControl-label\\\">\".concat(this.label, \"</label>\\n            \\n            <label class=\\\"ImageEffectControl-previewLabel\\\">Preview</label>\\n            <div class=\\\"ImageEffectControl-preview\\\" style=\\\"background-image: url('\").concat(this.value, \"'); filter: \").concat(this.generateFilterString(current), \";\\\"></div>\\n            \\n            <div class=\\\"ImageEffectControl-actions\\\">\\n                <button type=\\\"button\\\" class=\\\"btn btn-secondary ImageEffectControl-resetBtn\\\">Reset Effects</button>\\n            </div>\\n\\n            <label class=\\\"ImageEffectControl-previewLabel\\\">Effects</label>\\n\\n            <div class=\\\"ImageEffectControl-effectsContainer\\\">\\n                \").concat(effectPanels, \"\\n            </div>\\n        </div>\");\n\n      // Set up event listeners\n      this.setupEffectPanels();\n      this.setupOptionClickHandlers();\n      this.domNode.querySelector('.ImageEffectControl-resetBtn').onclick = function () {\n        return _this.resetEffects();\n      };\n    }\n  }, {\n    key: \"setupEffectPanels\",\n    value: function setupEffectPanels() {\n      var _this2 = this;\n      this.domNode.querySelectorAll('.ImageEffectControl-header').forEach(function (header) {\n        header.addEventListener('click', function () {\n          var panel = header.closest('.ImageEffectControl-panel');\n          var content = panel.querySelector('.ImageEffectControl-content');\n          var arrow = header.querySelector('.ImageEffectControl-arrow');\n\n          // Close all other panels first\n          _this2.domNode.querySelectorAll('.ImageEffectControl-panel').forEach(function (p) {\n            if (p !== panel && p.querySelector('.ImageEffectControl-content').classList.contains('ImageEffectControl-open')) {\n              p.classList.remove('ImageEffectControl-active');\n              p.querySelector('.ImageEffectControl-content').classList.remove('ImageEffectControl-open');\n              p.querySelector('.ImageEffectControl-arrow').classList.remove('ImageEffectControl-open');\n            }\n          });\n\n          // Toggle the active state on the panel\n          panel.classList.toggle('ImageEffectControl-active');\n\n          // Toggle the open class for animation\n          content.classList.toggle('ImageEffectControl-open');\n\n          // Change the arrow direction\n          arrow.classList.toggle('ImageEffectControl-open');\n\n          // Reset animation for thumbnails when reopening a panel\n          if (content.classList.contains('ImageEffectControl-open')) {\n            // Trigger a reflow to restart animations\n            var thumbs = content.querySelectorAll('.ImageEffectControl-thumb');\n            thumbs.forEach(function (thumb) {\n              thumb.style.animation = 'none';\n              thumb.offsetHeight; // Trigger reflow\n              thumb.style.animation = '';\n            });\n          }\n        });\n      });\n    }\n  }, {\n    key: \"setupOptionClickHandlers\",\n    value: function setupOptionClickHandlers() {\n      var _this3 = this;\n      this.domNode.querySelectorAll('.ImageEffectControl-options').forEach(function (optionsDiv) {\n        optionsDiv.addEventListener('click', function (e) {\n          var thumb = e.target.closest('.ImageEffectControl-thumb');\n          if (thumb && thumb.querySelector('img')) {\n            optionsDiv.querySelectorAll('.ImageEffectControl-thumb').forEach(function (span) {\n              span.classList.remove('ImageEffectControl-selected');\n            });\n            thumb.classList.add('ImageEffectControl-selected');\n            var img = thumb.querySelector('img');\n            var effect = img.dataset.effect;\n            var value = parseInt(img.dataset.value, 10);\n\n            // Update hidden input\n            _this3.domNode.querySelector(\"input[name=\".concat(effect, \"]\")).value = value;\n\n            // Update the current value display in header\n            var panel = _this3.domNode.querySelector(\".ImageEffectControl-panel[data-effect=\\\"\".concat(effect, \"\\\"]\"));\n            var valueDisplay = panel.querySelector('.ImageEffectControl-valueNumber');\n            valueDisplay.textContent = value;\n\n            // Update the preview thumbnail in header\n            var previewImg = panel.querySelector('.ImageEffectControl-previewThumb img');\n\n            // Handle 0% opacity specially\n            if (effect === 'opacity' && value <= 0) {\n              previewImg.style.visibility = 'hidden';\n              previewImg.style.filter = '';\n            } else {\n              previewImg.style.visibility = 'visible';\n              previewImg.style.filter = effect === 'hueRotate' ? \"hue-rotate(\".concat(value, \"deg)\") : \"\".concat(effect, \"(\").concat(value).concat(effect === 'blur' ? 'px' : '%', \")\");\n            }\n\n            // Update main preview\n            _this3.updatePreview();\n\n            // Apply changes immediately\n            _this3.setEffects();\n          }\n        });\n      });\n    }\n  }, {\n    key: \"generateFilterString\",\n    value: function generateFilterString(effects) {\n      return \"grayscale(\".concat(effects.grayscale, \"%) sepia(\").concat(effects.sepia, \"%) invert(\").concat(effects.invert, \"%) blur(\").concat(effects.blur, \"px) brightness(\").concat(effects.brightness, \"%) contrast(\").concat(effects.contrast, \"%) saturate(\").concat(effects.saturate, \"%) hue-rotate(\").concat(effects.hueRotate, \"deg) opacity(\").concat(effects.opacity, \"%)\");\n    }\n  }, {\n    key: \"updatePreview\",\n    value: function updatePreview() {\n      var effects = {};\n      this.domNode.querySelectorAll('input[type=\"hidden\"]').forEach(function (input) {\n        effects[input.name] = parseInt(input.value, 10);\n      });\n      var preview = this.domNode.querySelector('.ImageEffectControl-preview');\n\n      // Handle 0% opacity specially\n      if (effects.opacity <= 0) {\n        preview.style.visibility = 'hidden';\n      } else {\n        preview.style.visibility = 'visible';\n        preview.style.filter = this.generateFilterString(effects);\n      }\n    }\n  }, {\n    key: \"resetEffects\",\n    value: function resetEffects() {\n      var _this4 = this;\n      var defaults = {\n        grayscale: 0,\n        sepia: 0,\n        invert: 0,\n        blur: 0,\n        brightness: 100,\n        contrast: 100,\n        saturate: 100,\n        hueRotate: 0,\n        opacity: 100\n      };\n      Object.entries(defaults).forEach(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          effect = _ref2[0],\n          value = _ref2[1];\n        // Update hidden input\n        _this4.domNode.querySelector(\"input[name=\".concat(effect, \"]\")).value = value;\n\n        // Update thumbnail selection\n        var optionsDiv = _this4.domNode.querySelector(\".ImageEffectControl-options[data-effect=\\\"\".concat(effect, \"\\\"]\"));\n        if (optionsDiv) {\n          optionsDiv.querySelectorAll('.ImageEffectControl-thumb').forEach(function (span) {\n            var thumbValue = span.querySelector('img').dataset.value;\n            if (thumbValue == value) {\n              span.classList.add('ImageEffectControl-selected');\n            } else {\n              span.classList.remove('ImageEffectControl-selected');\n            }\n          });\n        }\n\n        // Update current value in header\n        var panel = _this4.domNode.querySelector(\".ImageEffectControl-panel[data-effect=\\\"\".concat(effect, \"\\\"]\"));\n        var valueNumber = panel.querySelector('.ImageEffectControl-valueNumber');\n        valueNumber.textContent = value;\n\n        // Update preview thumbnail\n        var previewImg = panel.querySelector('.ImageEffectControl-previewThumb img');\n        previewImg.style.filter = effect === 'hueRotate' ? \"hue-rotate(\".concat(value, \"deg)\") : \"\".concat(effect, \"(\").concat(value).concat(effect === 'blur' ? 'px' : '%', \")\");\n      });\n\n      // Update preview and apply changes\n      this.updatePreview();\n      this.setEffects();\n    }\n  }, {\n    key: \"setEffects\",\n    value: function setEffects() {\n      var effects = {};\n      this.domNode.querySelectorAll('input[type=\"hidden\"]').forEach(function (input) {\n        effects[input.name] = parseInt(input.value, 10);\n      });\n      this.callback.setEffects(effects);\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ImageEffectControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ImageEffectControl.js?");

/***/ }),

/***/ "./src/includes/ImageElement.js":
/*!**************************************!*\
  !*** ./src/includes/ImageElement.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _AlignControl_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./AlignControl.js */ \"./src/includes/AlignControl.js\");\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _CustomRangeControl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./CustomRangeControl.js */ \"./src/includes/CustomRangeControl.js\");\n/* harmony import */ var _ImageControl_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./ImageControl.js */ \"./src/includes/ImageControl.js\");\n/* harmony import */ var _ImageEffectControl_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./ImageEffectControl.js */ \"./src/includes/ImageEffectControl.js\");\n/* harmony import */ var _PaddingMarginControl_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./PaddingMarginControl.js */ \"./src/includes/PaddingMarginControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\n\n\n\nvar ImageElement = /*#__PURE__*/function (_BaseElement) {\n  function ImageElement(template) {\n    var _this;\n    var src = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMTU2OSA1MTYiPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0ibGluZWFyLWdyYWRpZW50IiB4MT0iNzg0LjUiIHkxPSI2MDEuMDQiIHgyPSI3ODQuNSIgeTI9IjIwNi4wNCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzc0OGRlNiIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzczOGJlNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxnIGlkPSJMYXllcl8xLTIiPjxnIHN0eWxlPSJvcGFjaXR5Oi45OyI+PHJlY3Qgd2lkdGg9IjE1NjkiIGhlaWdodD0iNDA2IiBzdHlsZT0iZmlsbDojOTRhOWU3OyIvPjxwYXRoIGQ9Ik0wLDMxMi45MmMxMS4xOC05LjM2LDUxLjI4LTQwLjMxLDEyNC4yMS00Ny40OSw0MC44Ni00LjAyLDc0LjI5LDEuMTYsOTguMDYsNSw5MC40NiwxNC42MSwxMDkuNCw0My42MywyMzEuNDMsNzYuMjMsMjUuMDQsNi42OSw0NC44NSwxMC45OCw2OS4zLDEwLDQ5LjQyLTEuOTgsODIuNzctMjQuMDUsMTAwLjY4LTM2LjI0LDE0Ni41Ny05OS44NCwxODQuNjEtMTQxLjI3LDI3OS44MS0xNzMuMDksMzAuMjctMTAuMTIsNjguMjEtMjIuNDksMTIyLjkxLTI1LjYyLDU5LjQzLTMuNCwxMjQuOSw0Ljg5LDIyNC44OSwzOS4zNyw3My45NSwyNS41LDIwMi4wMyw3Ny40OSwzMTcuNzIsMTczLjcydjE4MS4yMUgwdi0yMDMuMDhaIiBzdHlsZT0iZmlsbDp1cmwoI2xpbmVhci1ncmFkaWVudCk7Ii8+PGNpcmNsZSBjeD0iNDkzLjUiIGN5PSIxNzguNSIgcj0iNjYuNSIgc3R5bGU9ImZpbGw6I2Q2ZGVmZjsiLz48L2c+PC9nPjwvc3ZnPg==';\n    var alt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';\n    _classCallCheck(this, ImageElement);\n    _this = _callSuper(this, ImageElement);\n    _this.src = src;\n    _this.alt = alt;\n    _this.template = template;\n    _this.domNode = null;\n\n    // formats\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      width: 100,\n      height: 100,\n      max_width: null,\n      max_height: null,\n      align: 'center' // left, center, right\n    };\n    _this.effect = {\n      grayscale: 0,\n      sepia: 0,\n      invert: 0,\n      blur: 0,\n      brightness: 100,\n      contrast: 100,\n      saturate: 100,\n      hueRotate: 0,\n      opacity: 100\n    };\n    return _this;\n  }\n  _inherits(ImageElement, _BaseElement);\n  return _createClass(ImageElement, [{\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var effect = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      var sizeValue = function sizeValue(v) {\n        if (v === '' || v === undefined || v === null) return '';\n        if (v === 'auto') return 'auto';\n        if (typeof v === 'string' && v.trim().endsWith('%')) return v;\n        if (!isNaN(Number(v))) return \"\".concat(Number(v), \"px\");\n        return '';\n      };\n      var styleMap = {\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        width: function width(v) {\n          return v !== '' && v !== undefined ? \"width: \".concat(sizeValue(v), \" !important;\") : '';\n        },\n        height: function height(v) {\n          return v !== '' && v !== undefined ? \"height: \".concat(sizeValue(v), \" !important;\") : '';\n        },\n        max_width: function max_width(v) {\n          return v !== '' && v !== undefined && v !== null ? \"max-width: \".concat(sizeValue(v), \" !important;\") : '';\n        },\n        max_height: function max_height(v) {\n          return v !== '' && v !== undefined && v !== null ? \"max-height: \".concat(sizeValue(v), \" !important;\") : '';\n        },\n        align: function align(v) {\n          if (v === 'center') {\n            return \"\\n                        display: block !important;\\n                        margin-left: auto !important;\\n                        margin-right: auto !important;\\n                        float: none !important;\\n                        text-align: center !important;\\n                        align-self: center !important;\\n                    \";\n          }\n          if (v === 'right') {\n            return \"\\n                        display: block !important;\\n                        margin-left: auto !important;\\n                        margin-right: 0 !important;\\n                        float: none !important;\\n                        text-align: right !important;\\n                        align-self: flex-end !important;\\n                    \";\n          }\n          if (v === 'left') {\n            return \"\\n                        display: block !important;\\n                        margin-left: 0 !important;\\n                        margin-right: auto !important;\\n                        float: none !important;\\n                        text-align: left !important;\\n                        align-self: flex-start !important;\\n                    \";\n          }\n          return '';\n        }\n      };\n      var style = Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n      if (effect) {\n        style += \"filter: grayscale(\".concat(effect.grayscale, \"%) sepia(\").concat(effect.sepia, \"%) invert(\").concat(effect.invert, \"%) blur(\").concat(effect.blur, \"px) brightness(\").concat(effect.brightness, \"%) contrast(\").concat(effect.contrast, \"%) saturate(\").concat(effect.saturate, \"%) hue-rotate(\").concat(effect.hueRotate, \"deg) opacity(\").concat(effect.opacity, \"%);\");\n      }\n      return style;\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'ImageElement');\n      }\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        src: this.src,\n        alt: this.alt,\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats, this.effect)\n      });\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'ImageElement',\n        template: this.template,\n        src: this.src,\n        alt: this.alt,\n        formats: this.formats,\n        effect: this.effect\n      };\n    }\n  }, {\n    key: \"isAutoFormat\",\n    value: function isAutoFormat(key) {\n      return this.formats[key] === 'auto';\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n      this.update();\n    }\n  }, {\n    key: \"update\",\n    value: function update() {\n      if (this.domNode) {\n        this.domNode.innerHTML = this.renderTemplate(this.template, {\n          src: this.src,\n          alt: this.alt,\n          formats: this.formats,\n          styleString: this.getStyleString(this.formats, this.effect)\n        });\n      }\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [new _ImageControl_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"]('Image URL', {\n        src: this.getFullUrl(this.src),\n        alt: this.alt\n      }, {\n        setImage: function setImage(newSrc) {\n          _this2.src = newSrc;\n          _this2.render();\n        },\n        setAlt: function setAlt(alt) {\n          _this2.alt = alt;\n          _this2.render();\n        }\n      }), new _PaddingMarginControl_js__WEBPACK_IMPORTED_MODULE_5__[\"default\"]('Padding', {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      }, {\n        setValues: function setValues(values) {\n          _this2.setFormat('padding_top', values.top);\n          _this2.setFormat('padding_right', values.right);\n          _this2.setFormat('padding_bottom', values.bottom);\n          _this2.setFormat('padding_left', values.left);\n        }\n      }), new _AlignControl_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('Alignment', this.getFormat('align', ''), {\n        setValue: function setValue(value) {\n          _this2.setFormat('align', value);\n        }\n      }), new _CustomRangeControl_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]('Width', 0, 2000, this.isAutoFormat('width'), {\n        setValue: function setValue(value, isAuto) {\n          _this2.setFormat('width', isAuto ? 'auto' : value);\n        }\n      }, this.isAutoFormat('width') ? '' : this.formats.width), new _CustomRangeControl_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]('Height', 0, 2000, this.isAutoFormat('height'), {\n        setValue: function setValue(value, isAuto) {\n          _this2.setFormat('height', isAuto ? 'auto' : value);\n        }\n      }, this.isAutoFormat('height') ? '' : this.formats.height), new _ImageEffectControl_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"]('Image Effects', {\n        src: this.getFullUrl(this.src),\n        current_effects: {\n          grayscale: this.effect.grayscale,\n          sepia: this.effect.sepia,\n          invert: this.effect.invert,\n          blur: this.effect.blur,\n          brightness: this.effect.brightness,\n          contrast: this.effect.contrast,\n          saturate: this.effect.saturate,\n          hueRotate: this.effect.hueRotate,\n          opacity: this.effect.opacity\n        }\n      }, {\n        setEffects: function setEffects(effects) {\n          _this2.effect.grayscale = effects.grayscale || 0;\n          _this2.effect.sepia = effects.sepia || 0;\n          _this2.effect.invert = effects.invert || 0;\n          _this2.effect.blur = effects.blur || 0;\n          _this2.effect.brightness = effects.brightness || 100;\n          _this2.effect.contrast = effects.contrast || 100;\n          _this2.effect.saturate = effects.saturate || 100;\n          _this2.effect.hueRotate = effects.hueRotate || 0;\n          _this2.effect.opacity = effects.opacity;\n          _this2.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', this.template ? this.template.background_color : ''),\n        image: this.getFormat('background_image') ? this.getFullUrl(this.getFormat('background_image')) : '',\n        position: this.getFormat('background_position', this.template ? this.template.background_position : 'center'),\n        size: this.getFormat('background_size', this.template ? this.template.background_size : '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', this.template ? this.template.background_repeat : 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this2.setFormat('background_color', values.color || '');\n          _this2.setFormat('background_image', values.image || '');\n          _this2.setFormat('background_position', values.position || '');\n          _this2.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this2.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this2.render();\n        }\n      }), new CheckboxControl('Optimized for mobile', 'Allow the element to display correctly on mobile devices', true, {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new CheckboxControl('Compatibility mode for legacy browser', 'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS', true, {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var _data$alt;\n      var e = new ImageElement(data.template, data.src, (_data$alt = data.alt) !== null && _data$alt !== void 0 ? _data$alt : '');\n      if (data.formats) {\n        Object.assign(e.formats, data.formats);\n      }\n      if (data.effect) {\n        var _data$effect$grayscal, _data$effect$sepia, _data$effect$invert, _data$effect$blur, _data$effect$brightne, _data$effect$contrast, _data$effect$saturate, _data$effect$hueRotat;\n        e.effect = {\n          grayscale: (_data$effect$grayscal = data.effect.grayscale) !== null && _data$effect$grayscal !== void 0 ? _data$effect$grayscal : 0,\n          sepia: (_data$effect$sepia = data.effect.sepia) !== null && _data$effect$sepia !== void 0 ? _data$effect$sepia : 0,\n          invert: (_data$effect$invert = data.effect.invert) !== null && _data$effect$invert !== void 0 ? _data$effect$invert : 0,\n          blur: (_data$effect$blur = data.effect.blur) !== null && _data$effect$blur !== void 0 ? _data$effect$blur : 0,\n          brightness: (_data$effect$brightne = data.effect.brightness) !== null && _data$effect$brightne !== void 0 ? _data$effect$brightne : 100,\n          contrast: (_data$effect$contrast = data.effect.contrast) !== null && _data$effect$contrast !== void 0 ? _data$effect$contrast : 100,\n          saturate: (_data$effect$saturate = data.effect.saturate) !== null && _data$effect$saturate !== void 0 ? _data$effect$saturate : 100,\n          hueRotate: (_data$effect$hueRotat = data.effect.hueRotate) !== null && _data$effect$hueRotat !== void 0 ? _data$effect$hueRotat : 0,\n          opacity: data.effect.opacity\n        };\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ImageElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ImageElement.js?");

/***/ }),

/***/ "./src/includes/ImageLinkListControl.js":
/*!**********************************************!*\
  !*** ./src/includes/ImageLinkListControl.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _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 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 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 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; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ImageLinkListControl = /*#__PURE__*/function () {\n  function ImageLinkListControl(label, items, callback) {\n    _classCallCheck(this, ImageLinkListControl);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.items = items; // Initial value of the text input [{image_url, label, url}]\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    // render\n    this.render();\n  }\n  return _createClass(ImageLinkListControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n                <div data-control=\\\"slist-container\\\" class=\\\"list-group\\\"></div>\\n                <div class=\\\"d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-primary btn-sm mt-3 d-flex align-items-center\\\" type=\\\"button\\\" data-control=\\\"add-item\\\">\\n                        <span class=\\\"material-symbols-rounded me-2\\\">add</span>\\n                        Add Item\\n                    </button>\\n                </div>\\n            </div>\\n        \");\n      var listContainer = this.getListContainer();\n\n      // Add event listener for the \"Add Item\" button\n      this.domNode.querySelector('[data-control=\"add-item\"]').addEventListener('click', function () {\n        _this.items.push({\n          image_url: 'data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTYgMjk2Ij48ZyBpZD0iTGF5ZXJfMS0yIj48cmVjdCB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I2U2ZTZlNjsiLz48cGF0aCBkPSJNMjM2Ljk4LDk5LjQ0Yy0xLjEyLDAtMi4wMi45MS0yLjAyLDIuMDJ2OTMuMzZjMCw0LjktMi4zLDkuMjctNS44NywxMi4xMWwtNDYuMS00Ny4yM2MtLjc1LS43Ny0xLjk3LS44Mi0yLjc4LS4xMmwtMzIuMTgsMjcuOTgtNS43OS01Ljk1Yy0uNzgtLjgtMi4wNi0uODItMi44Ni0uMDQtLjguNzgtLjgyLDIuMDYtLjA0LDIuODZsNy4xMyw3LjMzYy43NS43NywxLjk3LjgyLDIuNzguMTJsMzIuMTgtMjcuOTgsNDQuMDksNDUuMThjLTEuODYuNzktMy45LDEuMjMtNi4wNSwxLjIzaC0xMTIuNjRjLTEuMTIsMC0yLjAyLjktMi4wMiwyLjAycy45MSwyLjAyLDIuMDIsMi4wMmgxMTIuNjRjMTAuNzcsMCwxOS41My04Ljc2LDE5LjUzLTE5LjUzdi05My4zNmMwLTEuMTItLjktMi4wMi0yLjAyLTIuMDJaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0yMzguNDgsNjYuOWMtLjc1LS44My0yLjAzLS45LTIuODYtLjE2bC0xNi45MywxNS4xOEg3Ni4zNmMtMTAuNzcsMC0xOS41Myw4Ljc2LTE5LjUzLDE5LjUzdjkzLjM2YzAsOS4xNiw2LjM2LDE2Ljg2LDE0Ljg5LDE4Ljk1bC0xNC4yMiwxMi43NWMtLjgzLjc0LS45LDIuMDMtLjE2LDIuODYuNC40NS45NS42NywxLjUxLjY3LjQ4LDAsLjk2LS4xNywxLjM1LS41MkwyMzguMzMsNjkuNzZjLjgzLS43NS45LTIuMDMuMTYtMi44NlpNNzYuMzYsODUuOThoMTM3LjgybC04OC4wOSw3OS4wMi0yMS44My0yMi40NWMtLjc2LS43OC0xLjk5LS44Mi0yLjgtLjA5bC00MC41NywzNi40NXYtNzcuNDVjMC04LjU0LDYuOTQtMTUuNDgsMTUuNDgtMTUuNDhaTTYwLjg4LDE5NC44MnYtMTAuNDdsNDEuODMtMzcuNTgsMjAuMzYsMjAuOTQtNDcuNDQsNDIuNTVjLTguMTktLjM5LTE0Ljc1LTcuMTUtMTQuNzUtMTUuNDRaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0xMjIuODMsMTI5LjEzYy04LjE5LDAtMTQuODUtNi42Ni0xNC44NS0xNC44NXM2LjY2LTE0Ljg1LDE0Ljg1LTE0Ljg1LDE0Ljg1LDYuNjYsMTQuODUsMTQuODUtNi42NiwxNC44NS0xNC44NSwxNC44NVpNMTIyLjgzLDEwMy40OGMtNS45NSwwLTEwLjgsNC44NC0xMC44LDEwLjhzNC44NCwxMC44LDEwLjgsMTAuOCwxMC44LTQuODQsMTAuOC0xMC44LTQuODQtMTAuOC0xMC44LTEwLjhaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjwvZz48L3N2Zz4=',\n          label: '',\n          url: ''\n        });\n        _this.render();\n        if (_this.callback) {\n          _this.callback.setItems(_this.items);\n        }\n      });\n\n      // Render each item\n      this.items.forEach(function (item, index) {\n        var listItem = document.createElement('div');\n        listItem.className = 'list-group-item bg-light position-relative';\n        listItem.innerHTML = \"\\n                <div class=\\\"flex-grow-1\\\">\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"flex: 1;\\\">Image</label>\\n                        <div class=\\\"d-flex align-items-center gap-2\\\" style=\\\"flex: 2;\\\">\\n                            <div style=\\\"width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:#f8f9fa; border:1px solid #e0e0e0; border-radius:8px;\\\">\\n                                <img style=\\\"max-width:40px; max-height:40px; object-fit:contain; border-radius:4px;\\\" src=\\\"\".concat(item.image_url || 'data:image/svg+xml;base64, ...', \"\\\" />\\n                            </div>\\n                            <div class=\\\"d-flex flex-column ms-2 gap-1\\\">\\n                                <button class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center mb-1\\\" type=\\\"button\\\" data-control=\\\"upload-image\\\" data-index=\\\"\").concat(index, \"\\\">\\n                                    <span class=\\\"material-symbols-rounded\\\">upload</span>\\n                                </button>\\n                                <button class=\\\"btn btn-outline-secondary btn-sm d-flex align-items-center\\\" type=\\\"button\\\" data-control=\\\"remove-image\\\" data-index=\\\"\").concat(index, \"\\\">\\n                                    <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                                </button>\\n                            </div>\\n                        </div>\\n                    </div>\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"flex: 1;\\\">Label</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(item.label, \"\\\" data-index=\\\"\").concat(index, \"\\\" data-field=\\\"label\\\" style=\\\"flex: 2;\\\">\\n                    </div>\\n                    <div class=\\\"d-flex align-items-center\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"flex: 1;\\\">URL</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(item.url, \"\\\" data-index=\\\"\").concat(index, \"\\\" data-field=\\\"url\\\" style=\\\"flex: 2;\\\">\\n                    </div>\\n                </div>\\n                <div class=\\\"mt-2 pt-2 border-top d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-danger btn-sm d-flex align-items-center px-1\\\" type=\\\"button\\\" data-control=\\\"remove-item\\\" data-index=\\\"\").concat(index, \"\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                    </button>\\n                </div>\\n                <div class=\\\"position-absolute bottom-0 start-0 ms-2 mb-2 fw-semibold text-muted opacity-25\\\" style=\\\"z-index: 0; pointer-events: none;font-size: 16px;\\\">\\n                    #\").concat(index + 1, \"\\n                </div>\\n            \");\n\n        // Add image upload handler\n        listItem.querySelector('[data-control=\"upload-image\"]').addEventListener('click', function (e) {\n          var itemIndex = e.target.closest('[data-control=\"upload-image\"]').getAttribute('data-index');\n          _this.browserAndUpload(itemIndex);\n        });\n\n        // Add image remove handler\n        listItem.querySelector('[data-control=\"remove-image\"]').addEventListener('click', function (e) {\n          var itemIndex = e.target.closest('[data-control=\"remove-image\"]').getAttribute('data-index');\n          _this.items[itemIndex].image_url = 'data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGlkPSJMYXllcl8yIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOTYgMjk2Ij48ZyBpZD0iTGF5ZXJfMS0yIj48cmVjdCB3aWR0aD0iMjk2IiBoZWlnaHQ9IjI5NiIgc3R5bGU9ImZpbGw6I2U2ZTZlNjsiLz48cGF0aCBkPSJNMjM2Ljk4LDk5LjQ0Yy0xLjEyLDAtMi4wMi45MS0yLjAyLDIuMDJ2OTMuMzZjMCw0LjktMi4zLDkuMjctNS44NywxMi4xMWwtNDYuMS00Ny4yM2MtLjc1LS43Ny0xLjk3LS44Mi0yLjc4LS4xMmwtMzIuMTgsMjcuOTgtNS43OS01Ljk1Yy0uNzgtLjgtMi4wNi0uODItMi44Ni0uMDQtLjguNzgtLjgyLDIuMDYtLjA0LDIuODZsNy4xMyw3LjMzYy43NS43NywxLjk3LjgyLDIuNzguMTJsMzIuMTgtMjcuOTgsNDQuMDksNDUuMThjLTEuODYuNzktMy45LDEuMjMtNi4wNSwxLjIzaC0xMTIuNjRjLTEuMTIsMC0yLjAyLjktMi4wMiwyLjAycy45MSwyLjAyLDIuMDIsMi4wMmgxMTIuNjRjMTAuNzcsMCwxOS41My04Ljc2LDE5LjUzLTE5LjUzdi05My4zNmMwLTEuMTItLjktMi4wMi0yLjAyLTIuMDJaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0yMzguNDgsNjYuOWMtLjc1LS44My0yLjAzLS45LTIuODYtLjE2bC0xNi45MywxNS4xOEg3Ni4zNmMtMTAuNzcsMC0xOS41Myw4Ljc2LTE5LjUzLDE5LjUzdjkzLjM2YzAsOS4xNiw2LjM2LDE2Ljg2LDE0Ljg5LDE4Ljk1bC0xNC4yMiwxMi43NWMtLjgzLjc0LS45LDIuMDMtLjE2LDIuODYuNC40NS45NS42NywxLjUxLjY3LjQ4LDAsLjk2LS4xNywxLjM1LS41MkwyMzguMzMsNjkuNzZjLjgzLS43NS45LTIuMDMuMTYtMi44NlpNNzYuMzYsODUuOThoMTM3LjgybC04OC4wOSw3OS4wMi0yMS44My0yMi40NWMtLjc2LS43OC0xLjk5LS44Mi0yLjgtLjA5bC00MC41NywzNi40NXYtNzcuNDVjMC04LjU0LDYuOTQtMTUuNDgsMTUuNDgtMTUuNDhaTTYwLjg4LDE5NC44MnYtMTAuNDdsNDEuODMtMzcuNTgsMjAuMzYsMjAuOTQtNDcuNDQsNDIuNTVjLTguMTktLjM5LTE0Ljc1LTcuMTUtMTQuNzUtMTUuNDRaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjxwYXRoIGQ9Ik0xMjIuODMsMTI5LjEzYy04LjE5LDAtMTQuODUtNi42Ni0xNC44NS0xNC44NXM2LjY2LTE0Ljg1LDE0Ljg1LTE0Ljg1LDE0Ljg1LDYuNjYsMTQuODUsMTQuODUtNi42NiwxNC44NS0xNC44NSwxNC44NVpNMTIyLjgzLDEwMy40OGMtNS45NSwwLTEwLjgsNC44NC0xMC44LDEwLjhzNC44NCwxMC44LDEwLjgsMTAuOCwxMC44LTQuODQsMTAuOC0xMC44LTQuODQtMTAuOC0xMC44LTEwLjhaIiBzdHlsZT0iZmlsbDpncmF5OyIvPjwvZz48L3N2Zz4=';\n          _this.render();\n          if (_this.callback) {\n            _this.callback.setItems(_this.items);\n          }\n        });\n\n        // Add event listeners for input changes\n        listItem.querySelectorAll('input').forEach(function (input) {\n          input.addEventListener('input', function (e) {\n            var field = e.target.getAttribute('data-field');\n            var itemIndex = e.target.getAttribute('data-index');\n            _this.items[itemIndex][field] = e.target.value; // Update the item\n            if (_this.callback) {\n              _this.callback.setItems(_this.items); // Trigger the callback with updated items\n            }\n          });\n        });\n\n        // Add event listener for the \"Remove Item\" button\n        listItem.querySelector('[data-control=\"remove-item\"]').addEventListener('click', function (e) {\n          var itemIndex = e.target.closest('[data-control=\"remove-item\"]').getAttribute('data-index');\n          _this.items.splice(itemIndex, 1); // Remove the item\n          _this.render();\n          if (_this.callback) {\n            _this.callback.setItems(_this.items); // Trigger the callback with updated items\n          }\n        });\n        listContainer.appendChild(listItem);\n      });\n    }\n  }, {\n    key: \"getListContainer\",\n    value: function getListContainer() {\n      return this.domNode.querySelector('[data-control=\"slist-container\"]');\n    }\n\n    // Add the browserAndUpload method\n  }, {\n    key: \"browserAndUpload\",\n    value: function browserAndUpload(itemIndex) {\n      var _this2 = this;\n      var input = document.createElement('input');\n      input.type = 'file';\n      input.accept = 'image/*';\n      input.addEventListener('change', /*#__PURE__*/function () {\n        var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {\n          var file, formData, response, result;\n          return _regeneratorRuntime().wrap(function _callee$(_context) {\n            while (1) switch (_context.prev = _context.next) {\n              case 0:\n                file = event.target.files[0];\n                if (!file) {\n                  _context.next = 21;\n                  break;\n                }\n                formData = new FormData();\n                formData.append('file', file);\n                _context.prev = 4;\n                _context.next = 7;\n                return fetch(builder.assetUploadHandler, {\n                  method: 'POST',\n                  body: formData\n                });\n              case 7:\n                response = _context.sent;\n                if (!response.ok) {\n                  _context.next = 15;\n                  break;\n                }\n                _context.next = 11;\n                return response.json();\n              case 11:\n                result = _context.sent;\n                if (result.url) {\n                  _this2.items[itemIndex].image_url = result.url;\n                  _this2.render();\n                  if (_this2.callback) {\n                    _this2.callback.setItems(_this2.items);\n                  }\n                } else {\n                  console.error('Upload failed: No URL returned');\n                }\n                _context.next = 16;\n                break;\n              case 15:\n                console.error('Upload failed:', response.statusText);\n              case 16:\n                _context.next = 21;\n                break;\n              case 18:\n                _context.prev = 18;\n                _context.t0 = _context[\"catch\"](4);\n                console.error('Error uploading file:', _context.t0);\n              case 21:\n              case \"end\":\n                return _context.stop();\n            }\n          }, _callee, null, [[4, 18]]);\n        }));\n        return function (_x) {\n          return _ref.apply(this, arguments);\n        };\n      }());\n      input.click();\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ImageLinkListControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ImageLinkListControl.js?");

/***/ }),

/***/ "./src/includes/ImageWidget.js":
/*!*************************************!*\
  !*** ./src/includes/ImageWidget.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _ImageElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ImageElement.js */ \"./src/includes/ImageElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar ImageWidget = /*#__PURE__*/function (_BaseWidget) {\n  function ImageWidget() {\n    var _this;\n    _classCallCheck(this, ImageWidget);\n    _this = _callSuper(this, ImageWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add an ImageElement to the widget\n    var image = new _ImageElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('Image');\n    _this.elements.push(image);\n    return _this;\n  }\n  _inherits(ImageWidget, _BaseWidget);\n  return _createClass(ImageWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Image';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'image';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ImageWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ImageWidget.js?");

/***/ }),

/***/ "./src/includes/LabelElement.js":
/*!**************************************!*\
  !*** ./src/includes/LabelElement.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _RadiosControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./RadiosControl.js */ \"./src/includes/RadiosControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar LabelElement = /*#__PURE__*/function (_BaseElement) {\n  function LabelElement(template, text) {\n    var _this;\n    _classCallCheck(this, LabelElement);\n    _this = _callSuper(this, LabelElement); // Call the parent class constructor\n    _this.template = template;\n    _this.text = text;\n    _this.domNode = null;\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n\n    // formats\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n    return _this;\n  }\n  _inherits(LabelElement, _BaseElement);\n  return _createClass(LabelElement, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', this.getClassName());\n      }\n\n      // render\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        // formats\n        formats: this.formats\n      });\n\n      // formats\n      this.domNode.style.backgroundColor = this.getFormat('background_color');\n      this.domNode.style.paddingTop = this.getFormat('padding_top') + 'px';\n      this.domNode.style.paddingRight = this.getFormat('padding_right') + 'px';\n      this.domNode.style.paddingBottom = this.getFormat('padding_bottom') + 'px';\n      this.domNode.style.paddingLeft = this.getFormat('padding_left') + 'px';\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'LabelElement',\n        template: this.template,\n        text: this.text,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RichTextControl\n      new RichTextControl(\n      // label\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }), new _RadiosControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"](\n      // label\n      'Brand Type',\n      // value\n      'personal_brand',\n      // options\n      [{\n        label: 'Personal Brand',\n        value: 'personal_brand'\n      }, {\n        label: 'Business Brand',\n        value: 'business_brand'\n      }],\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new DropdownControl(\n      // label\n      'Brand Type',\n      // value\n      'personal_brand',\n      // options\n      [{\n        label: 'Personal Brand',\n        value: 'personal_brand'\n      }, {\n        label: 'Business Brand',\n        value: 'business_brand'\n      }],\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new this(data.template, data.text);\n\n      // formats\n      if (data.formats) {\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LabelElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/LabelElement.js?");

/***/ }),

/***/ "./src/includes/LetterSpacingControl.js":
/*!**********************************************!*\
  !*** ./src/includes/LetterSpacingControl.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar LetterSpacingControl = /*#__PURE__*/function () {\n  function LetterSpacingControl(label, value, callback) {\n    _classCallCheck(this, LetterSpacingControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial /* left | center | right */\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(LetterSpacingControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"<div class=\\\"py-2 ps-3 pe-3 w-100 d-flex align-items-center justify-content-between\\\">\\n      <label for=\\\"\".concat(this.id, \"\\\" class=\\\"form-label fw-semibold mb-0 me-3\\\">\").concat(this.label, \"</label>\\n\\n      <div class=\\\"input-group flex-nowrap w-25 \\\" role=\\\"group\\\" aria-label=\\\"\").concat(this.label, \"\\\" style=\\\"min-width:125px\\\">\\n        <button class=\\\"btn btn-outline-secondary\\\" role=\\\"reduction\\\" type=\\\"button\\\">-</button>\\n        <input id=\\\"\").concat(this.id, \"\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-control text-center\\\" readonly style=\\\"width:70px;max-width:70px\\\">\\n        <button class=\\\"btn btn-outline-secondary\\\" role=\\\"increment\\\" type=\\\"button\\\">+</button>\\n      </div>\\n    </div>\");\n      var decrease = this.domNode.querySelector('[role=\"reduction\"]');\n      var increase = this.domNode.querySelector('[role=\"increment\"]');\n      var input = this.domNode.querySelector(\"#\".concat(this.id));\n      var step = 1;\n      var changeValue = function changeValue(delta) {\n        var numeric = parseFloat(_this.value);\n        if (isNaN(numeric)) numeric = 0;\n        numeric = numeric + delta;\n        numeric = Math.max(0, numeric);\n        numeric = Math.round(numeric * 10) / 10;\n        _this.setValue(numeric);\n      };\n      if (decrease) {\n        decrease.addEventListener('click', function (e) {\n          e.preventDefault();\n          changeValue(-step);\n        });\n      }\n      if (increase) {\n        increase.addEventListener('click', function (e) {\n          e.preventDefault();\n          changeValue(step);\n        });\n      }\n\n      // allow direct programmatic update keeping UI in sync\n      this._inputNode = input;\n\n      // normalize initial display\n      // this.setValue(this.value === undefined ? 0 : this.value);\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var input = this.domNode.querySelector('input');\n      if (input) {\n        input.value = this.value;\n      }\n\n      // Support both function and object with setValue\n      if (typeof this.callback === 'function') {\n        this.callback(this.value);\n      } else if (this.callback && typeof this.callback.setValue === 'function') {\n        this.callback.setValue(this.value);\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LetterSpacingControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/LetterSpacingControl.js?");

/***/ }),

/***/ "./src/includes/LineHeightControl.js":
/*!*******************************************!*\
  !*** ./src/includes/LineHeightControl.js ***!
  \*******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar LetterSpacingControl = /*#__PURE__*/function () {\n  function LetterSpacingControl(label, value, callback) {\n    _classCallCheck(this, LetterSpacingControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial /* left | center | right */\n    this.callback = callback; // Callback function to handle input changes\n\n    this.options = [{\n      name: \"Line 1.2\",\n      value: 1.2,\n      icon: \"density_small\"\n    }, {\n      name: \"Line 1.5\",\n      value: 1.5,\n      icon: \"dehaze\"\n    }, {\n      name: \"Line 1.8\",\n      value: 1.8,\n      icon: \"equal\"\n    }, {\n      name: \"Line 2\",\n      value: 2,\n      icon: \"density_large\"\n    }];\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(LetterSpacingControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      // build dropdown using Bootstrap markup so icons render inside options\n      var itemsHtml = this.options.map(function (option) {\n        return \"\\n        <button class=\\\"dropdown-item lh-dropdown-item d-flex align-items-center\\\" type=\\\"button\\\" data-value=\\\"\".concat(option.value, \"\\\">\\n          <span class=\\\"material-symbols-rounded me-2\\\">\").concat(option.icon, \"</span>\\n          <span class=\\\"lh-name\\\">\").concat(option.name, \"</span>\\n        </button>\\n      \");\n      }).join('');\n\n      // compute selected icon/label from options so toggle shows correct icon initially\n      var selectedOpt = this.options.find(function (o) {\n        return String(o.value) === String(_this.value);\n      });\n      var selectedIcon = selectedOpt ? selectedOpt.icon : '';\n      var selectedLabel = selectedOpt ? selectedOpt.name : this.value || 'Select';\n      this.domNode.innerHTML = \"<div class=\\\"py-2 ps-3 pe-3 w-100\\\">\\n    <div class=\\\"d-flex align-items-center justify-content-between\\\">\\n      <label class=\\\"form-label fw-semibold mb-0 me-3\\\">\".concat(this.label, \"</label>\\n\\n      <div class=\\\"dropdown\\\">\\n        <button class=\\\"btn btn-outline-secondary dropdown-toggle d-flex align-items-center\\\" type=\\\"button\\\" id=\\\"dropdownLine_\").concat(this.id, \"\\\" data-bs-toggle=\\\"dropdown\\\" aria-expanded=\\\"false\\\">\\n          <span class=\\\"material-symbols-rounded me-2\\\">\").concat(selectedIcon, \"</span>\\n          <span class=\\\"dropdown-selected\\\">\").concat(selectedLabel, \"</span>\\n        </button>\\n        <div class=\\\"dropdown-menu shadow-sm\\\" aria-labelledby=\\\"dropdownLine_\").concat(this.id, \"\\\">\\n          \").concat(itemsHtml, \"\\n          <div><hr class=\\\"dropdown-divider\\\"></div>\\n          <button class=\\\"dropdown-item lh-dropdown-item d-flex align-items-center\\\" type=\\\"button\\\" data-value=\\\"__custom__\\\">\\n            <span class=\\\"material-symbols-rounded me-2\\\">edit</span>\\n            <span class=\\\"lh-name\\\">Custom</span>\\n          </button>\\n        </div>\\n      </div>\\n    </div>\\n    <div class=\\\"d-flex w-100 justify-content-end my-2\\\" id=\\\"customLineHeight_\").concat(this.id, \"\\\">\\n        <div class=\\\"input-group flex-nowrap w-25\\\" role=\\\"group\\\" aria-label=\\\"\").concat(this.label, \"\\\" style=\\\"min-width:125px\\\">\\n          <button class=\\\"btn btn-outline-secondary\\\" role=\\\"reduction\\\" type=\\\"button\\\">-</button>\\n          <input id=\\\"\").concat(this.id, \"\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-control text-center\\\" readonly style=\\\"width:70px;max-width:70px\\\">\\n          <button class=\\\"btn btn-outline-secondary\\\" role=\\\"increment\\\" type=\\\"button\\\">+</button>\\n        </div>\\n      </div>\\n    </div>\");\n      var decrease = this.domNode.querySelector('[role=\"reduction\"]');\n      var increase = this.domNode.querySelector('[role=\"increment\"]');\n      var input = this.domNode.querySelector(\"#\".concat(this.id));\n      var custom = this.domNode.querySelector(\"#customLineHeight_\".concat(this.id));\n\n      // Simple hide/show functions\n      var showCustom = function showCustom() {\n        if (custom) {\n          custom.style.height = 'auto';\n          custom.style.overflow = 'visible';\n          custom.style.opacity = '1';\n        }\n      };\n      var hideCustom = function hideCustom() {\n        if (custom) {\n          custom.style.height = '0';\n          custom.style.overflow = 'hidden';\n          custom.style.opacity = '0';\n        }\n      };\n\n      // Hide custom area by default\n      hideCustom();\n\n      // wire dropdown items\n      var dropdown = this.domNode.querySelector('.dropdown');\n      if (dropdown) {\n        var menu = dropdown.querySelector('.dropdown-menu');\n        var selectedSpan = dropdown.querySelector('.dropdown-selected');\n        var selectedIconSpan = dropdown.querySelector('.material-symbols-rounded');\n        menu.querySelectorAll('.lh-dropdown-item').forEach(function (opt) {\n          opt.addEventListener('click', function (e) {\n            var val = opt.getAttribute('data-value');\n            if (val === '__custom__') {\n              // Show custom input area\n              showCustom();\n              // Sync input with current value and focus it\n              if (custom) {\n                var customInput = custom.querySelector('input');\n                if (customInput) {\n                  customInput.value = _this.value;\n                  try {\n                    customInput.focus();\n                  } catch (e) {}\n                }\n              }\n            } else {\n              // Hide custom area and set the selected value\n              hideCustom();\n              _this.setValue(parseFloat(val));\n            }\n\n            // Update dropdown toggle label/icon\n            var iconSpan = opt.querySelector('.material-symbols-rounded');\n            if (selectedIconSpan && iconSpan) selectedIconSpan.textContent = iconSpan.textContent;\n            if (selectedSpan) selectedSpan.textContent = opt.querySelector('.lh-name').textContent;\n          });\n        });\n      }\n\n      // Only show custom area if initial value is '__custom__'\n      if (String(this.value) === '__custom__') {\n        showCustom();\n      }\n      var changeValue = function changeValue(delta) {\n        var numeric = parseFloat(_this.value) || 1.0;\n        numeric = Math.max(0.1, +(numeric + delta).toFixed(1));\n        _this.setValue(numeric);\n      };\n      if (decrease) {\n        decrease.addEventListener('click', function (e) {\n          e.preventDefault();\n          changeValue(-0.1);\n        });\n      }\n      if (increase) {\n        increase.addEventListener('click', function (e) {\n          e.preventDefault();\n          changeValue(0.1);\n        });\n      }\n\n      // allow direct programmatic update keeping UI in sync\n      this._inputNode = input;\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var input = this.domNode.querySelector('input');\n      if (input) {\n        input.value = this.value;\n      }\n\n      // Support both function and object with setValue\n      if (typeof this.callback === 'function') {\n        this.callback(this.value);\n      } else if (this.callback && typeof this.callback.setValue === 'function') {\n        this.callback.setValue(this.value);\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LetterSpacingControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/LineHeightControl.js?");

/***/ }),

/***/ "./src/includes/LinkColorControl.js":
/*!******************************************!*\
  !*** ./src/includes/LinkColorControl.js ***!
  \******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar LinkColorControl = /*#__PURE__*/function () {\n  function LinkColorControl(label, value, callback) {\n    _classCallCheck(this, LinkColorControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial /* left | center | right */\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(LinkColorControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"<div class=\\\"py-2 ps-3 pe-3 w-100 d-flex align-items-center justify-content-between\\\">\\n      <label for=\\\"\".concat(this.id, \"\\\" class=\\\"form-label fw-semibold mb-0 me-3\\\">\").concat(this.label, \"</label>\\n\\n        <div class=\\\"d-flex align-items-center ms-auto border border-neutral rounded p-1\\\" style=\\\"gap:8px; min-width:120px\\\">\\n          <input id=\\\"\").concat(this.id, \"_color\\\" type=\\\"color\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-control form-control-color\\\" style=\\\"width:33px;height:33px;padding:0;border:none;\\\">\\n          <input id=\\\"\").concat(this.id, \"_hex\\\" type=\\\"text\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-control border-none text-center\\\" style=\\\"width:90px;max-width:90px\\\" />\\n        </div>\\n    </div>\\n    <style>\\n      #\").concat(this.id, \"_color {\\n        border: none;\\n        padding: 0;\\n        width: 33px;\\n        height: 33px;\\n      }\\n      #\").concat(this.id, \"_hex {\\n        border: none;\\n        text-align: center;\\n        width: 90px;\\n        max-width: 90px;\\n      }\\n      #\").concat(this.id, \"_color:focus {\\n        outline: none;\\n      }\\n      #\").concat(this.id, \"_hex:focus {\\n        outline: none;\\n      }\\n    </style>\\n    \");\n\n      // nodes\n      this.colorInput = this.domNode.querySelector(\"#\".concat(this.id, \"_color\"));\n      this.hexInput = this.domNode.querySelector(\"#\".concat(this.id, \"_hex\"));\n\n      // sync handlers\n      var notify = function notify(val) {\n        _this.value = val;\n        if (typeof _this.callback === \"function\") {\n          _this.callback(val);\n        } else if (_this.callback && typeof _this.callback.setValue === \"function\") {\n          _this.callback.setValue(val);\n        }\n      };\n      this.colorInput.addEventListener(\"input\", function (e) {\n        var v = e.target.value;\n        _this.hexInput.value = v;\n        notify(v);\n      });\n      this.hexInput.addEventListener(\"change\", function (e) {\n        var v = e.target.value.trim();\n        if (!v.startsWith(\"#\")) v = \"#\" + v;\n        // basic validation to 3/6 hex chars\n        if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)) {\n          _this.colorInput.value = v;\n          _this.hexInput.value = v;\n          notify(v);\n        } else {\n          // revert to last known good\n          _this.hexInput.value = _this.value;\n        }\n      });\n\n      // keep UI in sync if value was set programmatically before render\n      // this.setValue(this.value);\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var input = this.domNode.querySelector(\"input\");\n      if (input) {\n        input.value = this.value;\n      }\n\n      // Support both function and object with setValue\n      if (typeof this.callback === \"function\") {\n        this.callback(this.value);\n      } else if (this.callback && typeof this.callback.setValue === \"function\") {\n        this.callback.setValue(this.value);\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LinkColorControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/LinkColorControl.js?");

/***/ }),

/***/ "./src/includes/LinkElement.js":
/*!*************************************!*\
  !*** ./src/includes/LinkElement.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar LinkElement = /*#__PURE__*/function (_BaseElement) {\n  function LinkElement(template, text, url) {\n    var _this;\n    _classCallCheck(this, LinkElement);\n    _this = _callSuper(this, LinkElement); // Call the parent class constructor\n    _this.template = template;\n    _this.text = text;\n    _this.url = url;\n    _this.domNode = null;\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n    return _this;\n  }\n  _inherits(LinkElement, _BaseElement);\n  return _createClass(LinkElement, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'LinkElement');\n      }\n\n      // render\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        url: this.url\n      });\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'LinkElement',\n        template: this.template,\n        text: this.text,\n        url: this.url\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // TextControl\n      new TextControl(\n      // label\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }),\n      // TextControl\n      new TextControl(\n      // label\n      'URL',\n      // value\n      this.url,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.url = text;\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var _data$url;\n      return new LinkElement(data.template, data.text, (_data$url = data.url) !== null && _data$url !== void 0 ? _data$url : '');\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (LinkElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/LinkElement.js?");

/***/ }),

/***/ "./src/includes/ListControl.js":
/*!*************************************!*\
  !*** ./src/includes/ListControl.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ListControl = /*#__PURE__*/function () {\n  function ListControl(label, items, callback) {\n    _classCallCheck(this, ListControl);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.items = items; // Initial value of the text input\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    // // Add an event listener to handle input changes\n    // this.getTextInput().addEventListener('keyup', (e) => {\n    //     this.callback.setText(this.getText()); // Trigger the callback with the new value\n    // });\n\n    // render\n    this.render();\n  }\n  return _createClass(ListControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <div class=\\\"alert alert-light fst-italic rounded-2 bg-light border-0 mb-3\\\">\\uD83C\\uDFA8 Here we can upload your theme to the themes builder for reviewing, testing, and export. \\uD83D\\uDE80</div>\\n                <h4 class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</h4>\\n                <p>You can add/edit/delete list items belows...</p>\\n                <div data-control=\\\"slist-container\\\" class=\\\"list-group\\\"></div>\\n                <div class=\\\"d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-primary btn-sm mt-3 d-flex align-items-center\\\" type=\\\"button\\\" data-control=\\\"add-item\\\">\\n                        <span class=\\\"material-symbols-rounded me-2\\\">add</span>\\n                        Add Item\\n                    </button>\\n                </div>\\n            </div>\\n        \");\n      var listContainer = this.getListContainer();\n\n      // Add event listener for the \"Add Item\" button\n      this.domNode.querySelector('[data-control=\"add-item\"]').addEventListener('click', function () {\n        _this.items.push({\n          icon: null,\n          label: '',\n          url: '',\n          description: ''\n        });\n        _this.render();\n        if (_this.callback) {\n          _this.callback.setItems(_this.items); // Trigger the callback with updated items\n        }\n      });\n\n      // Render each item\n      this.items.forEach(function (item, index) {\n        var listItem = document.createElement('div');\n        listItem.className = 'position-relative';\n        listItem.innerHTML = \"\\n                <div class=\\\"flex-grow-1\\\">\\n                    <div class=\\\"mb-2\\\">\\n                        <label class=\\\"form-label small mb-1 me-2\\\" style=\\\"flex: 1;\\\">Label #\".concat(index + 1, \"</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(item.label, \"\\\" data-index=\\\"\").concat(index, \"\\\" data-field=\\\"label\\\" style=\\\"flex: 2;\\\">\\n                    </div>\\n                    \").concat(item.url !== undefined ? \"\\n                    <div class=\\\"\\\">\\n                        <label class=\\\"form-label small mb-1 me-2\\\" style=\\\"flex: 1;\\\">URL</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\".concat(item.url, \"\\\" data-index=\\\"\").concat(index, \"\\\" data-field=\\\"url\\\" style=\\\"flex: 2;\\\">\\n                    </div>\\n                    \") : '', \"\\n                </div>\\n                <div class=\\\"mt-2 pt-2 d-flex justify-content-end align-items-center d-none\\\">\\n                    <button class=\\\"btn btn-danger d-flex align-items-center btn-sm px-1\\\" type=\\\"button\\\" data-control=\\\"remove-item\\\" data-index=\\\"\").concat(index, \"\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                    </button>\\n                </div>\\n                <div class=\\\"position-absolute top-0 end-0 ms-2 mb-2 d-flex align-items-center\\\">\\n                    <span class=\\\"d-flex align-items-center\\\" type=\\\"button\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                    </span>\\n                    <span class=\\\"fw-semibold text-muted opacity-25 d-none\\\" style=\\\"z-index: 0; pointer-events: none;font-size: 16px;\\\">#\").concat(index + 1, \"</span>\\n                </div>\\n\\n                \").concat(index == 0 ? \"\\n                    <div class=\\\"alert alert-light fst-italic rounded-2 bg-light border-0 mb-3 mt-2\\\">\\n                        \\uD83D\\uDCCD This is the first menu item appearing on the far left of your menu bar \\uD83E\\uDDED\\u2728\\n                    </div>\\n                \" : '', \"\\n\\n                <br>\\n            \");\n\n        // Add event listeners for input changes\n        listItem.querySelectorAll('input').forEach(function (input) {\n          input.addEventListener('input', function (e) {\n            var field = e.target.getAttribute('data-field');\n            var itemIndex = e.target.getAttribute('data-index');\n            _this.items[itemIndex][field] = e.target.value; // Update the item\n            if (_this.callback) {\n              _this.callback.setItems(_this.items); // Trigger the callback with updated items\n            }\n          });\n        });\n\n        // Add event listener for the \"Remove Item\" button\n        listItem.querySelector('[data-control=\"remove-item\"]').addEventListener('click', function (e) {\n          var itemIndex = e.target.closest('[data-control=\"remove-item\"]').getAttribute('data-index');\n          _this.items.splice(itemIndex, 1); // Remove the item\n          _this.render();\n          if (_this.callback) {\n            _this.callback.setItems(_this.items); // Trigger the callback with updated items\n          }\n        });\n        listContainer.appendChild(listItem);\n      });\n    }\n  }, {\n    key: \"getListContainer\",\n    value: function getListContainer() {\n      return this.domNode.querySelector('[data-control=\"slist-container\"]');\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ListControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ListControl.js?");

/***/ }),

/***/ "./src/includes/ListElement.js":
/*!*************************************!*\
  !*** ./src/includes/ListElement.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _ListControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ListControl.js */ \"./src/includes/ListControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar ListElement = /*#__PURE__*/function (_BaseElement) {\n  function ListElement(template, items) {\n    var _this;\n    _classCallCheck(this, ListElement);\n    _this = _callSuper(this, ListElement); // Call the parent class constructor\n    _this.template = template;\n    _this.items = items;\n    _this.domNode = null;\n    // formats\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n    return _this;\n  }\n  _inherits(ListElement, _BaseElement);\n  return _createClass(ListElement, [{\n    key: \"render\",\n    value: function render() {\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'ListElement');\n      }\n\n      // render menu\n      var htmlContent = this.renderTemplate(this.template, {\n        items: this.items,\n        // formats\n        formats: this.formats\n      });\n      this.domNode.innerHTML = htmlContent;\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'ListElement',\n        template: this.template,\n        items: this.items,\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [new _ListControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('List Items', this.items.map(function (item) {\n        return {\n          label: item\n        };\n      }), {\n        setItems: function setItems(items) {\n          _this2.items = items.map(function (item) {\n            return item.label;\n          });\n          _this2.render();\n        }\n      }), new PaddingMarginControl('Padding', {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      }, {\n        setValues: function setValues(values) {\n          _this2.setFormat('padding_top', values.top);\n          _this2.setFormat('padding_right', values.right);\n          _this2.setFormat('padding_bottom', values.bottom);\n          _this2.setFormat('padding_left', values.left);\n          _this2.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this2.setFormat('background_color', values.color);\n          _this2.setFormat('background_image', values.image);\n          _this2.setFormat('background_position', values.position);\n          _this2.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this2.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this2.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new ListElement(data.template, data.items);\n      if (data.formats) {\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ListElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ListElement.js?");

/***/ }),

/***/ "./src/includes/ListWidget.js":
/*!************************************!*\
  !*** ./src/includes/ListWidget.js ***!
  \************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _ListElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ListElement.js */ \"./src/includes/ListElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar ListWidget = /*#__PURE__*/function (_BaseWidget) {\n  function ListWidget() {\n    var _this;\n    _classCallCheck(this, ListWidget);\n    _this = _callSuper(this, ListWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add a ListElement to the widget\n    var list = new _ListElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('List', ['Item 1', 'Item 2', 'Item 3']);\n    _this.elements.push(list);\n    return _this;\n  }\n  _inherits(ListWidget, _BaseWidget);\n  return _createClass(ListWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'List';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'format_list_bulleted';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ListWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ListWidget.js?");

/***/ }),

/***/ "./src/includes/MenuElement.js":
/*!*************************************!*\
  !*** ./src/includes/MenuElement.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar MenuElement = /*#__PURE__*/function (_BaseElement) {\n  function MenuElement(template, items) {\n    var _this;\n    _classCallCheck(this, MenuElement);\n    _this = _callSuper(this, MenuElement); // Call the parent class constructor\n    _this.template = template;\n    _this.items = items;\n    _this.domNode = null;\n    // formats\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n    return _this;\n  }\n  _inherits(MenuElement, _BaseElement);\n  return _createClass(MenuElement, [{\n    key: \"render\",\n    value: function render() {\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'MenuElement');\n      }\n\n      // render menu\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        items: this.items,\n        formats: this.formats\n      });\n\n      // formats\n      this.domNode.style.backgroundColor = this.getFormat('background_color');\n      this.domNode.style.paddingTop = this.getFormat('padding_top') + 'px';\n      this.domNode.style.paddingRight = this.getFormat('padding_right') + 'px';\n      this.domNode.style.paddingBottom = this.getFormat('padding_bottom') + 'px';\n      this.domNode.style.paddingLeft = this.getFormat('padding_left') + 'px';\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'MenuElement',\n        template: this.template,\n        items: this.items,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [new ListControl('List Items', this.items.map(function (item) {\n        return {\n          label: item.text,\n          url: item.url\n        };\n      }), {\n        setItems: function setItems(items) {\n          _this2.items = items.map(function (item) {\n            return {\n              text: item.label,\n              url: item.url\n            };\n          });\n          _this2.render();\n        }\n      }), new PaddingMarginControl('Padding', {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      }, {\n        setValues: function setValues(values) {\n          _this2.setFormat('padding_top', values.top);\n          _this2.setFormat('padding_right', values.right);\n          _this2.setFormat('padding_bottom', values.bottom);\n          _this2.setFormat('padding_left', values.left);\n          _this2.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this2.setFormat('background_color', values.color);\n          _this2.setFormat('background_image', values.image);\n          _this2.setFormat('background_position', values.position);\n          _this2.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this2.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this2.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new MenuElement(data.template, data.items);\n      if (data.formats) {\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MenuElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/MenuElement.js?");

/***/ }),

/***/ "./src/includes/MenuWidget.js":
/*!************************************!*\
  !*** ./src/includes/MenuWidget.js ***!
  \************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _MenuElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./MenuElement.js */ \"./src/includes/MenuElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar MenuWidget = /*#__PURE__*/function (_BaseWidget) {\n  function MenuWidget() {\n    var _this;\n    _classCallCheck(this, MenuWidget);\n    _this = _callSuper(this, MenuWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add elements to the widget\n    var menu = new _MenuElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('Menu', [{\n      url: '#',\n      text: 'Home'\n    }, {\n      url: '#',\n      text: 'About'\n    }, {\n      url: '#',\n      text: 'Contact'\n    }]);\n    _this.elements.push(menu);\n    return _this;\n  }\n  _inherits(MenuWidget, _BaseWidget);\n  return _createClass(MenuWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Menu Bar';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'menu_open';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (MenuWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/MenuWidget.js?");

/***/ }),

/***/ "./src/includes/PElement.js":
/*!**********************************!*\
  !*** ./src/includes/PElement.js ***!
  \**********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BackgroundControl_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BackgroundControl.js */ \"./src/includes/BackgroundControl.js\");\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _RadiosControl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./RadiosControl.js */ \"./src/includes/RadiosControl.js\");\n/* harmony import */ var _TextControl_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./TextControl.js */ \"./src/includes/TextControl.js\");\n/* harmony import */ var _AlignControl_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./AlignControl.js */ \"./src/includes/AlignControl.js\");\n/* harmony import */ var _ParagraphWidget_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ParagraphWidget.js */ \"./src/includes/ParagraphWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\n\n\n\nvar PElement = /*#__PURE__*/function (_BaseElement) {\n  function PElement(template, text) {\n    var _this;\n    _classCallCheck(this, PElement);\n    _this = _callSuper(this, PElement); // Call the parent class constructor\n    _this.template = template;\n    _this.text = text;\n    _this.domNode = null;\n\n    // Inline edit\n    _this.inlineEditParams = ['text'];\n\n    // formats\n    _this.formats = {\n      font_family: null,\n      font_size: null,\n      text_color: null,\n      link_color: null,\n      paragraph_spacing: null,\n      line_height: null,\n      letter_spacing: null,\n      text_direction: \"left_to_right\",\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      text_align: 'center' // left, center, right\n    };\n    return _this;\n  }\n  _inherits(PElement, _BaseElement);\n  return _createClass(PElement, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', this.getClassName());\n      }\n\n      // render\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        text: this.text,\n        formats: this.formats,\n        styleString: this.getStyleString(this.formats)\n      });\n\n      // Inline edit: events\n      this.inlineEditParams.forEach(function (param) {\n        if (!_this2.domNode.querySelector('[inline-edit=\"' + param + '\"]')) {\n          return;\n        }\n\n        // add inline edit attribute\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').setAttribute('contenteditable', 'true');\n        _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').addEventListener('input', function (e) {\n          var content = _this2.domNode.querySelector('[inline-edit=\"' + param + '\"]').innerHTML;\n          _this2.text = content;\n\n          //\n          builder.renderElementControls(_this2);\n        });\n      });\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: this.getClassName(),\n        template: this.template,\n        text: this.text,\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RichTextControl\n      new RichTextControl(\n      // label\n      'Text',\n      // value\n      this.text,\n      // callback\n      {\n        // set text\n        setText: function setText(text) {\n          _this3.text = text;\n          _this3.render();\n        }\n      }), new _RadiosControl_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"](\n      // label\n      'Brand Type',\n      // value\n      'personal_brand',\n      // options\n      [{\n        label: 'Personal Brand',\n        value: 'personal_brand'\n      }, {\n        label: 'Business Brand',\n        value: 'business_brand'\n      }],\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new DropdownControl(\n      // label\n      'Brand Type',\n      // value\n      'personal_brand',\n      // options\n      [{\n        label: 'Personal Brand',\n        value: 'personal_brand'\n      }, {\n        label: 'Business Brand',\n        value: 'business_brand'\n      }],\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new FontFamilyControl('Font Family', this.getFormat('font_family', 'Arial'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_family', value);\n          _this3.render();\n        }\n      }), new FontWeightControl('Font Weight', this.getFormat('font_weight', 'normal'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_weight', value);\n          _this3.render();\n        }\n      }), new FontSizeControl('Font Size', this.getFormat('font_size', '16px'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('font_size', value);\n          _this3.render();\n        }\n      }), new TextColorControl('Text Color', this.getFormat('text_color', '#000000'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_color', value);\n          _this3.render();\n        }\n      }), new LinkColorControl('Link Color', this.getFormat('link_color', '#0000EE'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('link_color', value);\n          _this3.render();\n        }\n      }), new _AlignControl_js__WEBPACK_IMPORTED_MODULE_4__[\"default\"]('Text alignment', this.getFormat('text_align', 'left'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_align', value);\n          _this3.render();\n        }\n      }), new ParagraphSpacingControl('Paragraph Spacing', this.getFormat('paragraph_spacing', null), {\n        setValue: function setValue(value) {\n          _this3.setFormat('paragraph_spacing', value);\n          _this3.render();\n        }\n      }), new LineHeightControl('Line Height', this.getFormat('line_height', '1.2'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('line_height', value);\n          _this3.render();\n        }\n      }), new LetterSpacingControl('Letter Spacing', this.getFormat('letter_spacing', '0'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('letter_spacing', value);\n          _this3.render();\n        }\n      }), new TextDirectionControl('Text Direction', this.getFormat('text_direction', 'left_to_right'), {\n        setValue: function setValue(value) {\n          _this3.setFormat('text_direction', value);\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      })];\n    }\n  }, {\n    key: \"getStyleString\",\n    value: function getStyleString(formats) {\n      var styleMap = {\n        font_size: function font_size(v) {\n          return v ? \"font-size: \".concat(v, \"px;\") : '';\n        },\n        font_family: function font_family(v) {\n          if (!v) return '';\n          var escaped = v.replace(/\"/g, '&quot;');\n          return \"font-family: \".concat(escaped, \" !important;\");\n        },\n        link_color: function link_color(v) {\n          return v ? \"--link-color: \".concat(v, \" !important;\") : '';\n        },\n        letter_spacing: function letter_spacing(v) {\n          return v ? \"letter-spacing: \".concat(v, \"px !important;\") : '';\n        },\n        paragraph_spacing: function paragraph_spacing(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        line_height: function line_height(v) {\n          return v ? \"line-height: \".concat(v, \" !important;\") : '';\n        },\n        text_direction: function text_direction(v) {\n          return v === 'right_to_left' ? \"direction: rtl !important;\" : v === 'left_to_right' ? \"direction: ltr !important;\" : '';\n        },\n        font_style: function font_style(v) {\n          return v ? \"font-style: \".concat(v, \" !important;\") : '';\n        },\n        font_weight: function font_weight(v) {\n          return v ? \"font-weight: \".concat(v, \" !important;\") : '';\n        },\n        // text_color: v => v ? `color: ${v} !important;` : '',\n        background_color: function background_color(v) {\n          return v ? \"background-color: \".concat(v, \" !important;\") : '';\n        },\n        background_image: function background_image(v) {\n          return v ? \"background-image: url('\".concat(v, \"') !important;\") : '';\n        },\n        background_position: function background_position(v) {\n          return v ? \"background-position: \".concat(v, \" !important;\") : '';\n        },\n        background_size: function background_size(v) {\n          return v ? \"background-size: \".concat(v).concat(typeof v === 'number' ? '%' : '', \" !important;\") : '';\n        },\n        background_repeat: function background_repeat(v) {\n          return v ? \"background-repeat: \".concat(v, \" !important;\") : '';\n        },\n        padding_top: function padding_top(v) {\n          return v ? \"padding-top: \".concat(v, \"px !important;\") : '';\n        },\n        padding_right: function padding_right(v) {\n          return v ? \"padding-right: \".concat(v, \"px !important;\") : '';\n        },\n        padding_bottom: function padding_bottom(v) {\n          return v ? \"padding-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        padding_left: function padding_left(v) {\n          return v ? \"padding-left: \".concat(v, \"px !important;\") : '';\n        },\n        margin_top: function margin_top(v) {\n          return v ? \"margin-top: \".concat(v, \"px !important;\") : '';\n        },\n        margin_right: function margin_right(v) {\n          return v ? \"margin-right: \".concat(v, \"px !important;\") : '';\n        },\n        margin_bottom: function margin_bottom(v) {\n          return v ? \"margin-bottom: \".concat(v, \"px !important;\") : '';\n        },\n        margin_left: function margin_left(v) {\n          return v ? \"margin-left: \".concat(v, \"px !important;\") : '';\n        },\n        border_radius: function border_radius(v) {\n          return v ? \"border-radius: \".concat(v, \"px !important;\") : '';\n        },\n        border_color: function border_color(v) {\n          return v ? \"border-color: \".concat(v, \" !important;\") : '';\n        },\n        border_size: function border_size(v, formats) {\n          if (v && formats.border_color) {\n            return \"border: \".concat(v, \"px solid \").concat(formats.border_color, \" !important;\");\n          } else if (v) {\n            return \"border: \".concat(v, \"px solid !important;\");\n          } else {\n            return '';\n          }\n        },\n        // left -> start, center -> center, right -> end\n        text_align: function text_align(v) {\n          return v ? \"text-align: \".concat(v, \" !important;\") : '';\n        }\n      };\n      return Object.entries(styleMap).map(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          fn = _ref2[1];\n        return fn(formats[key], formats);\n      }).join(' ');\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new this(data.template, data.text);\n\n      // formats\n      if (data.formats) {\n        e.setFormat('font_size', data.formats.font_size);\n        e.setFormat('font_family', data.formats.font_family);\n        e.setFormat('link_color', data.formats.link_color);\n        e.setFormat('paragraph_spacing', data.formats.paragraph_spacing);\n        e.setFormat('line_height', data.formats.line_height);\n        e.setFormat('letter_spacing', data.formats.letter_spacing);\n        e.setFormat('text_direction', data.formats.text_direction);\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n        e.setFormat('text_align', data.formats.text_align);\n        if (data.formats.background_image) {\n          e.setFormat('background_image', data.formats.background_image);\n        }\n        if (data.formats.background_position) {\n          e.setFormat('background_position', data.formats.background_position);\n        }\n        if (data.formats.background_repeat) {\n          e.setFormat('background_repeat', data.formats.background_repeat);\n        }\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/PElement.js?");

/***/ }),

/***/ "./src/includes/PaddingMarginControl.js":
/*!**********************************************!*\
  !*** ./src/includes/PaddingMarginControl.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar PaddingMarginControl = /*#__PURE__*/function () {\n  function PaddingMarginControl(label, values, callback) {\n    _classCallCheck(this, PaddingMarginControl);\n    // Initialize properties\n    this.label = label; // Label for the control\n    this.top = values.top; // Top value\n    this.bottom = values.bottom; // Bottom value\n    this.left = values.left; // Left value\n    this.right = values.right; // Right value\n    this.callback = callback; // Callback function to handle changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    // Render the UI\n    this.render();\n  }\n  return _createClass(PaddingMarginControl, [{\n    key: \"render\",\n    value: function render() {\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n              <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n              <div class=\\\"alert alert-light fst-italic rounded-2 bg-light border-0 mb-0\\\">\\n                  \\uD83D\\uDCA1 Use the controls below to set values for each side (Top, Left, Right, Bottom). All values are in pixels (px) \\uD83D\\uDCCF.\\n              </div>\\n\\n              <div class=\\\"d-flex align-items-center\\\">\\n                <div class=\\\"d-flex flex-wrap align-items-center justify-content-between gap-3 py-2 pe-3\\\">\\n                  <div class=\\\"gap-1\\\">\\n                    <label class=\\\"form-label mb-0 me-1\\\">Top</label>\\n                    <div class=\\\"input-group input-group-sm w-auto\\\">\\n                      <button class=\\\"btn btn-light border\\\" data-control=\\\"top-decrease\\\">\\u2212</button>\\n                      <input type=\\\"number\\\" name=\\\"top\\\" class=\\\"form-control text-center no-arrows px-control\\\" value=\\\"\").concat(this.top, \"\\\">\\n                      <span class=\\\"input-group-text d-none\\\">px</span>\\n                      <button class=\\\"btn btn-light border\\\" data-control=\\\"top-increase\\\">+</button>\\n                    </div>\\n                  </div>\\n\\n                  <div class=\\\"gap-1\\\">\\n                    <label class=\\\"form-label mb-0 me-1\\\">Left</label>\\n                    <div class=\\\"input-group input-group-sm w-auto\\\">\\n                      <button class=\\\"btn btn-light border\\\" data-control=\\\"left-decrease\\\">\\u2212</button>\\n                      <input type=\\\"number\\\" name=\\\"left\\\" class=\\\"form-control text-center no-arrows px-control\\\" value=\\\"\").concat(this.left, \"\\\">\\n                      <span class=\\\"input-group-text d-none\\\">px</span>\\n                      <button class=\\\"btn btn-light border\\\" data-control=\\\"left-increase\\\">+</button>\\n                    </div>\\n                  </div>\\n\\n                  <div class=\\\"gap-1\\\">\\n                    <label class=\\\"form-label mb-0 me-1\\\">Right</label>\\n                    <div class=\\\"input-group input-group-sm w-auto\\\">\\n                      <button class=\\\"btn btn-light border\\\" data-control=\\\"right-decrease\\\">\\u2212</button>\\n                      <input type=\\\"number\\\" name=\\\"right\\\" class=\\\"form-control text-center no-arrows px-control\\\" value=\\\"\").concat(this.right, \"\\\">\\n                      <span class=\\\"input-group-text d-none\\\">px</span>\\n                      <button class=\\\"btn btn-light border\\\" data-control=\\\"right-increase\\\">+</button>\\n                    </div>\\n                  </div>\\n\\n                  <div class=\\\"gap-1\\\">\\n                    <label class=\\\"form-label mb-0 me-1\\\">Bottom</label>\\n                    <div class=\\\"input-group input-group-sm w-auto\\\">\\n                      <button class=\\\"btn btn-light border\\\" data-control=\\\"bottom-decrease\\\">\\u2212</button>\\n                      <input type=\\\"number\\\" name=\\\"bottom\\\" class=\\\"form-control text-center no-arrows px-control\\\" value=\\\"\").concat(this.bottom, \"\\\">\\n                      <span class=\\\"input-group-text d-none\\\">px</span>\\n                      <button class=\\\"btn btn-light border\\\" data-control=\\\"bottom-increase\\\">+</button>\\n                    </div>\\n                  </div>\\n                </div>\\n\\n                <div class=\\\"preveww-box\\\">\\n                  <div id=\\\"pmc-preview\\\" style=\\\"margin: 20px auto; width: 80px; height: 80px; position: relative;\\\">\\n                      <div id=\\\"pmc-preview-top\\\" class=\\\"d-none\\\" style=\\\"position: absolute; left: 0; top: 0; width: 100%; background: rgba(52,152,219,0.15); border-top: 2px solid #3498db; text-align: center; font-size: 12px; color: #3498db;\\\"></div>\\n                            <div id=\\\"pmc-preview-bottom\\\" class=\\\"d-none\\\" style=\\\"position: absolute; left: 0; bottom: 0; width: 100%; background: rgba(231,76,60,0.15); border-bottom: 2px solid #e74c3c; text-align: center; font-size: 12px; color: #e74c3c;\\\"></div>\\n                            <div id=\\\"pmc-preview-left\\\" class=\\\"d-none\\\" style=\\\"position: absolute; left: 0; top: 0; height: 100%; background: rgba(46,204,113,0.15); border-left: 2px solid #27ae60; writing-mode: vertical-lr; text-align: center; font-size: 12px; color: #27ae60;\\\"></div>\\n                            <div id=\\\"pmc-preview-right\\\" class=\\\"d-none\\\" style=\\\"position: absolute; right: 0; top: 0; height: 100%; background: rgba(241,196,15,0.15); border-right: 2px solid #f1c40f; writing-mode: vertical-lr; text-align: center; font-size: 12px; color: #f1c40f;\\\"></div>\\n                            <div style=\\\"\\n                              background-color: #e8f0fe; /* or any blue shade you prefer */\\n                              background-image:\\n                                linear-gradient(0deg, rgba(255,255,255,0.3) 1px, transparent 1px),\\n                                linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);\\n                              background-size: 15px 15px;\\n                            \\n                            ;position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; border: 1px dashed #bbb; z-index: 1; pointer-events: none;border-radius: 4px;\\\"></div>\\n                            <div id=\\\"pmc-preview-content\\\" class=\\\"border\\\" style=\\\"position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: 0; background: #f8f9fa; border-radius: 4px; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #888;\\\">\\n                                <span class=\\\"material-symbols-rounded text-muted\\\">\\n                    draw_abstract\\n                    </span>\\n                        </div>\\n                    </div>\\n                </div>\\n              </div>\\n            </div>\\n        \");\n\n      // Attach event listeners for all inputs and buttons\n      this.attachEventListeners();\n      this.updatePreview();\n    }\n  }, {\n    key: \"attachEventListeners\",\n    value: function attachEventListeners() {\n      var _this = this;\n      // Top controls\n      this.domNode.querySelector('[data-control=\"top-increase\"]').addEventListener('click', function () {\n        return _this.updateValue('top', 5);\n      });\n      this.domNode.querySelector('[data-control=\"top-decrease\"]').addEventListener('click', function () {\n        return _this.updateValue('top', -5);\n      });\n      this.domNode.querySelector('[name=\"top\"]').addEventListener('input', function (e) {\n        return _this.setValue('top', e.target.value);\n      });\n\n      // Bottom controls\n      this.domNode.querySelector('[data-control=\"bottom-increase\"]').addEventListener('click', function () {\n        return _this.updateValue('bottom', 5);\n      });\n      this.domNode.querySelector('[data-control=\"bottom-decrease\"]').addEventListener('click', function () {\n        return _this.updateValue('bottom', -5);\n      });\n      this.domNode.querySelector('[name=\"bottom\"]').addEventListener('input', function (e) {\n        return _this.setValue('bottom', e.target.value);\n      });\n\n      // Left controls\n      this.domNode.querySelector('[data-control=\"left-increase\"]').addEventListener('click', function () {\n        return _this.updateValue('left', 5);\n      });\n      this.domNode.querySelector('[data-control=\"left-decrease\"]').addEventListener('click', function () {\n        return _this.updateValue('left', -5);\n      });\n      this.domNode.querySelector('[name=\"left\"]').addEventListener('input', function (e) {\n        return _this.setValue('left', e.target.value);\n      });\n\n      // Right controls\n      this.domNode.querySelector('[data-control=\"right-increase\"]').addEventListener('click', function () {\n        return _this.updateValue('right', 5);\n      });\n      this.domNode.querySelector('[data-control=\"right-decrease\"]').addEventListener('click', function () {\n        return _this.updateValue('right', -5);\n      });\n      this.domNode.querySelector('[name=\"right\"]').addEventListener('input', function (e) {\n        return _this.setValue('right', e.target.value);\n      });\n    }\n  }, {\n    key: \"updateValue\",\n    value: function updateValue(position, delta) {\n      this[position] = Math.max(0, this[position] + delta); // Ensure value is not negative\n      this.domNode.querySelector(\"[name=\\\"\".concat(position, \"\\\"]\")).value = this[position];\n      this.callback.setValues(this.getValues()); // Trigger the callback with updated values\n      this.updatePreview();\n    }\n  }, {\n    key: \"setValue\",\n    value: function setValue(position, value) {\n      this[position] = Math.max(0, parseInt(value) || 0); // Ensure value is not negative\n      this.callback.setValues(this.getValues()); // Trigger the callback with updated values\n      this.updatePreview();\n    }\n  }, {\n    key: \"getValues\",\n    value: function getValues() {\n      return {\n        top: this.top,\n        bottom: this.bottom,\n        left: this.left,\n        right: this.right\n      };\n    }\n  }, {\n    key: \"updatePreview\",\n    value: function updatePreview() {\n      var top = this.top || 0,\n        bottom = this.bottom || 0,\n        left = this.left || 0,\n        right = this.right || 0;\n      var preview = this.domNode.querySelector('#pmc-preview');\n      if (!preview) return;\n      var size = 120;\n      var content = preview.querySelector('#pmc-preview-content');\n      content.style.top = \"\".concat(top, \"px\");\n      content.style.bottom = \"\".concat(bottom, \"px\");\n      content.style.left = \"\".concat(left, \"px\");\n      content.style.right = \"\".concat(right, \"px\");\n\n      // Top\n      var topDiv = preview.querySelector('#pmc-preview-top');\n      topDiv.style.height = \"\".concat(top, \"px\");\n      topDiv.innerText = top > 0 ? \"Top: \".concat(top, \"px\") : '';\n      // Bottom\n      var bottomDiv = preview.querySelector('#pmc-preview-bottom');\n      bottomDiv.style.height = \"\".concat(bottom, \"px\");\n      bottomDiv.innerText = bottom > 0 ? \"Bottom: \".concat(bottom, \"px\") : '';\n      // Left\n      var leftDiv = preview.querySelector('#pmc-preview-left');\n      leftDiv.style.width = \"\".concat(left, \"px\");\n      leftDiv.innerText = left > 0 ? \"Left: \".concat(left, \"px\") : '';\n      // Right\n      var rightDiv = preview.querySelector('#pmc-preview-right');\n      rightDiv.style.width = \"\".concat(right, \"px\");\n      rightDiv.innerText = right > 0 ? \"Right: \".concat(right, \"px\") : '';\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PaddingMarginControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/PaddingMarginControl.js?");

/***/ }),

/***/ "./src/includes/PageElement.js":
/*!*************************************!*\
  !*** ./src/includes/PageElement.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BlockElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BlockElement.js */ \"./src/includes/BlockElement.js\");\n/* harmony import */ var _CarouselBlockElement_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./CarouselBlockElement.js */ \"./src/includes/CarouselBlockElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _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 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 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 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; }\nfunction asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }\nfunction _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"next\", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, \"throw\", n); } _next(void 0); }); }; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\n\nvar PageElement = /*#__PURE__*/function (_BaseElement) {\n  function PageElement(builder) {\n    var _this;\n    _classCallCheck(this, PageElement);\n    _this = _callSuper(this, PageElement); // Call the parent class constructor\n    _this.builder = builder;\n    _this.blocks = [];\n    _this.iframe = null; // Reference to the iframe\n\n    // formats\n    _this.formats = {\n      font_family: \"inherit\",\n      font_style: null,\n      font_weight: null,\n      font_size: null,\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      text_color: null,\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n    return _this;\n  }\n  _inherits(PageElement, _BaseElement);\n  return _createClass(PageElement, [{\n    key: \"isDroppable\",\n    value: function isDroppable() {\n      return true;\n    }\n  }, {\n    key: \"canDropInside\",\n    value: function canDropInside() {\n      return true;\n    }\n  }, {\n    key: \"render\",\n    value: function () {\n      var _render = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {\n        var _this2 = this;\n        var htmlContent, bgImageValue, bgImage, position, size, repeat, bgColor;\n        return _regeneratorRuntime().wrap(function _callee$(_context) {\n          while (1) switch (_context.prev = _context.next) {\n            case 0:\n              if (!this.domNode) {\n                //\n                htmlContent = this.renderTemplate('Page', {\n                  page: '<div builder-element=\"PageElement\"></div>',\n                  formats: this.formats\n                });\n                this.builder.iframeDoc.open();\n                this.builder.iframeDoc.write(htmlContent);\n                this.builder.iframeDoc.close();\n\n                // set page dom\n                this.domNode = this.builder.iframeDoc.body.querySelector('[builder-element=\"PageElement\"]');\n              }\n\n              // reset domNode\n              while (this.domNode.firstChild) {\n                this.domNode.removeChild(this.domNode.firstChild);\n              }\n\n              //\n              this.blocks.forEach(function (block) {\n                // render block\n                var domNode = block.render();\n\n                // Dome append child\n                _this2.domNode.appendChild(domNode);\n\n                //\n                builder.uiManager.addElement(block);\n                builder.uiManager.addDraggableItem(block);\n              });\n\n              // empty cell\n              if (this.blocks.length == 0) {\n                this.domNode.innerHTML = \"\\n                <div data-control=\\\"builder-helper\\\" style=\\\"display: flex;\\n                    align-items: center;\\n                    justify-content: center;\\n                    height: 100vh;\\n                    background-color: rgba(34,83,159,0.05);\\n                    border: dashed 1px rgba(120, 130, 150, 0.5);\\n                    \\\">\\n                    <svg style=\\\"width: 100px;\\n                        display: inline-block;\\n                        margin: auto;\\n                        opacity: 1;\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" height=\\\"48px\\\" viewBox=\\\"0 -960 960 960\\\" width=\\\"48px\\\" fill=\\\"#808080\\\"><path d=\\\"M345-285q-24 0-42-18t-18-42v-435q0-24 18-42t42-18h435q24 0 42 18t18 42v435q0 24-18 42t-42 18H345Zm0-60h435v-435H345v435ZM149.82-615q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm0 165q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Zm165 0q-12.82 0-21.32-8.68-8.5-8.67-8.5-21.5 0-12.82 8.68-21.32 8.67-8.5 21.5-8.5 12.82 0 21.32 8.68 8.5 8.67 8.5 21.5 0 12.82-8.68 21.32-8.67 8.5-21.5 8.5Z\\\"/></svg>\\n                    \\n                </div>\\n            \";\n              }\n\n              // formats\n              this.domNode.style.fontFamily = this.getFormat('font_family');\n              this.domNode.style.fontSize = this.getFormat('font_size');\n              this.domNode.style.fontStyle = this.getFormat('font_style');\n              this.domNode.style.fontWeight = this.getFormat('font_weight');\n              this.domNode.style.backgroundColor = this.getFormat('background_color');\n              this.domNode.style.color = this.getFormat('text_color');\n              this.domNode.style.paddingTop = this.getFormat('padding_top') + 'px';\n              this.domNode.style.paddingRight = this.getFormat('padding_right') + 'px';\n              this.domNode.style.paddingBottom = this.getFormat('padding_bottom') + 'px';\n              this.domNode.style.paddingLeft = this.getFormat('padding_left') + 'px';\n\n              // Apply background image if it exists\n              bgImageValue = this.getFormat('background_image');\n              if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n                bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n                bgImage = this.getFullUrl(bgImage);\n                this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n                // Set background position\n                position = this.getFormat('background_position', 'center');\n                this.domNode.style.backgroundPosition = position;\n\n                // Set background size\n                size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n                if (!isNaN(parseFloat(size)) && isFinite(size)) {\n                  size = parseFloat(size) + '%';\n                }\n                this.domNode.style.backgroundSize = size;\n\n                // Set background repeat\n                repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n                this.domNode.style.backgroundRepeat = repeat;\n              } else {\n                // Explicitly clear background image and related styles\n                this.domNode.style.backgroundImage = \"\";\n                this.domNode.style.backgroundPosition = \"\";\n                this.domNode.style.backgroundSize = \"\";\n                this.domNode.style.backgroundRepeat = \"\";\n              }\n\n              // Apply background color\n              bgColor = this.getFormat('background_color');\n              if (bgColor) {\n                this.domNode.style.backgroundColor = bgColor;\n              }\n            case 18:\n            case \"end\":\n              return _context.stop();\n          }\n        }, _callee, this);\n      }));\n      function render() {\n        return _render.apply(this, arguments);\n      }\n      return render;\n    }()\n  }, {\n    key: \"newBlock\",\n    value: function newBlock() {\n      if (this.builder.carousel) {\n        return new _CarouselBlockElement_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"](this);\n      } else {\n        return new _BlockElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"](this);\n      }\n    }\n  }, {\n    key: \"appendElements\",\n    value: function appendElements(elements) {\n      var _this3 = this;\n      // public\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this3.newBlock();\n        newBlock.append(element);\n        _this3.appendBlock(newBlock);\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"addElementsAfter\",\n    value: function addElementsAfter(elements, referenceBlock) {\n      var _this4 = this;\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this4.newBlock();\n        newBlock.appendElements([element]);\n        var index = _this4.blocks.indexOf(referenceBlock);\n        if (index === -1) {\n          throw new Error('Reference block not found');\n        }\n        _this4.blocks.splice(index + 1, 0, newBlock);\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"addElementsBefore\",\n    value: function addElementsBefore(elements, referenceBlock) {\n      var _this5 = this;\n      var newBlocks = [];\n      elements.forEach(function (element) {\n        var newBlock = _this5.newBlock();\n        newBlock.appendElements([element]);\n        var index = _this5.blocks.indexOf(referenceBlock);\n        if (index === -1) {\n          throw new Error('Reference block not found');\n        }\n        _this5.blocks.splice(index, 0, newBlock);\n        newBlocks.push(newBlock);\n      });\n      return newBlocks;\n    }\n  }, {\n    key: \"clear\",\n    value: function clear() {\n      // Remove all blocks\n      this.blocks.forEach(function (block) {\n        block.remove();\n      });\n\n      //\n      this.render();\n    }\n  }, {\n    key: \"appendBlock\",\n    value: function appendBlock(block) {\n      // private\n      // Add block to blocks array and append to page element\n      this.blocks.push(block);\n    }\n  }, {\n    key: \"removeElement\",\n    value: function removeElement(element) {\n      var _this6 = this;\n      // if element is a block of page element\n      this.blocks.forEach(function (block) {\n        if (block == element) {\n          _this6.blocks = _this6.blocks.filter(function (bl) {\n            return bl !== element;\n          });\n\n          //\n          _this6.render();\n        }\n      });\n    }\n  }, {\n    key: \"insertElementAfter\",\n    value: function insertElementAfter(element, newElement) {\n      var _this7 = this;\n      this.blocks.forEach(function (currentElement, i) {\n        // if element is one of the block's elements\n        if (currentElement === element) {\n          _this7.blocks.splice(i + 1, 0, newElement);\n          _this7.render();\n          return;\n        }\n      });\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      // Return JSON encoded representation of the PageElement\n      return {\n        name: 'PageElement',\n        padding: this.padding,\n        margin: this.margin,\n        elementLists: this.blocks.map(function (block) {\n          return block.elements.map(function (element) {\n            return element.getData();\n          });\n        }),\n        // formats\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"parse\",\n    value: function parse(data) {\n      var _this8 = this;\n      // Set data from JSON representation\n      data.elementLists.forEach(function (elementList) {\n        var elements = elementList.map(_ElementFactory_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"].createElement);\n        _this8.appendElements(elements);\n      });\n\n      // formats\n      if (data.formats) {\n        this.setFormat('font_family', data.formats.font_family);\n        this.setFormat('font_style', data.formats.font_style);\n        this.setFormat('font_weight', data.formats.font_weight);\n        this.setFormat('font_size', data.formats.font_size);\n        this.setFormat('background_color', data.formats.background_color);\n        this.setFormat('text_color', data.formats.text_color);\n        this.setFormat('padding_top', data.formats.padding_top);\n        this.setFormat('padding_right', data.formats.padding_right);\n        this.setFormat('padding_bottom', data.formats.padding_bottom);\n        this.setFormat('padding_left', data.formats.padding_left);\n      }\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this9 = this;\n      return [\n      // Font faminly\n      new FontFamilyControl(\n      // label\n      'Font family',\n      // value\n      this.getFormat('font_family'),\n      // callback\n      {\n        // set font family\n        setFontFamily: function setFontFamily(font_family) {\n          _this9.setFormat('font_family', font_family);\n          _this9.render();\n        }\n      }),\n      // Font weight\n      new FontWeightControl(\n      // label\n      'Font weight',\n      // value\n      this.getFormat('font_weight'),\n      // callback\n      {\n        // set font weight\n        setFontWeight: function setFontWeight(font_weight) {\n          _this9.setFormat('font_weight', font_weight);\n          _this9.render();\n        }\n      }),\n      // Background color\n      new ColorPickerControl(\n      // label\n      'Background color',\n      // value\n      this.getFormat('background_color'),\n      // callback\n      {\n        // set background color\n        setColor: function setColor(background_color) {\n          _this9.setFormat('background_color', background_color);\n          _this9.render();\n        }\n      }),\n      // Text color\n      new ColorPickerControl(\n      // label\n      'Text color',\n      // value\n      this.getFormat('text_color'),\n      // callback\n      {\n        // set text color\n        setColor: function setColor(text_color) {\n          _this9.setFormat('text_color', text_color);\n          _this9.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this9.setFormat('background_color', values.color);\n          _this9.setFormat('background_image', values.image);\n          _this9.setFormat('background_position', values.position);\n          _this9.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this9.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this9.render();\n        }\n      }), new PaddingMarginControl(\n      // label\n      'Padding',\n      // value\n      {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      },\n      // callback\n      {\n        setValues: function setValues(values) {\n          _this9.setFormat('padding_top', values.top);\n          _this9.setFormat('padding_right', values.right);\n          _this9.setFormat('padding_bottom', values.bottom);\n          _this9.setFormat('padding_left', values.left);\n          _this9.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"getActions\",\n    value: function getActions() {\n      return [];\n    }\n  }, {\n    key: \"addContainerHightlight\",\n    value: function addContainerHightlight() {\n      // do nothing\n    }\n  }, {\n    key: \"removeContainerHightlight\",\n    value: function removeContainerHightlight() {\n      // do nothing\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PageElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/PageElement.js?");

/***/ }),

/***/ "./src/includes/ParagraphSpacingControl.js":
/*!*************************************************!*\
  !*** ./src/includes/ParagraphSpacingControl.js ***!
  \*************************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar ParagraphSpacingControl = /*#__PURE__*/function () {\n  function ParagraphSpacingControl(label, value, callback) {\n    _classCallCheck(this, ParagraphSpacingControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial /* left | center | right */\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(ParagraphSpacingControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"<div class=\\\"py-2 ps-3 pe-3 w-100 d-flex align-items-center justify-content-between\\\">\\n      <label for=\\\"\".concat(this.id, \"\\\" class=\\\"form-label fw-semibold mb-0 me-3\\\">\").concat(this.label, \"</label>\\n\\n      <div class=\\\"input-group flex-nowrap w-25 \\\" role=\\\"group\\\" aria-label=\\\"\").concat(this.label, \"\\\" style=\\\"min-width:125px\\\">\\n        <button class=\\\"btn btn-outline-secondary\\\" role=\\\"reduction\\\" type=\\\"button\\\">-</button>\\n        <input id=\\\"\").concat(this.id, \"\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-control text-center\\\" readonly style=\\\"width:70px;max-width:70px\\\">\\n        <button class=\\\"btn btn-outline-secondary\\\" role=\\\"increment\\\" type=\\\"button\\\">+</button>\\n      </div>\\n    </div>\");\n      var decrease = this.domNode.querySelector('[role=\"reduction\"]');\n      var increase = this.domNode.querySelector('[role=\"increment\"]');\n      var input = this.domNode.querySelector(\"#\".concat(this.id));\n      var step = 1;\n      var changeValue = function changeValue(delta) {\n        var numeric = parseFloat(_this.value);\n        if (isNaN(numeric)) numeric = 0;\n        numeric = numeric + delta;\n        numeric = Math.max(0, numeric); // allow 0 and fractional values\n        // round to one decimal to avoid float noise\n        numeric = Math.round(numeric * 10) / 10;\n        _this.setValue(numeric);\n      };\n      if (decrease) {\n        decrease.addEventListener('click', function (e) {\n          e.preventDefault();\n          changeValue(-step);\n        });\n      }\n      if (increase) {\n        increase.addEventListener('click', function (e) {\n          e.preventDefault();\n          changeValue(step);\n        });\n      }\n\n      // allow direct programmatic update keeping UI in sync\n      this._inputNode = input;\n\n      // normalize initial display\n      // this.setValue(this.value === undefined ? 0 : this.value);\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var input = this.domNode.querySelector('input');\n      if (input) {\n        input.value = this.value;\n      }\n\n      // Support both function and object with setValue\n      if (typeof this.callback === 'function') {\n        this.callback(this.value);\n      } else if (this.callback && typeof this.callback.setValue === 'function') {\n        this.callback.setValue(this.value);\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ParagraphSpacingControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ParagraphSpacingControl.js?");

/***/ }),

/***/ "./src/includes/ParagraphWidget.js":
/*!*****************************************!*\
  !*** ./src/includes/ParagraphWidget.js ***!
  \*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _PElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PElement.js */ \"./src/includes/PElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar ParagraphWidget = /*#__PURE__*/function (_BaseWidget) {\n  function ParagraphWidget() {\n    var _this;\n    _classCallCheck(this, ParagraphWidget);\n    _this = _callSuper(this, ParagraphWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add a PElement to the widget\n    var p = new _PElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('P', 'This is a sample paragraph.');\n    _this.elements.push(p);\n    return _this;\n  }\n  _inherits(ParagraphWidget, _BaseWidget);\n  return _createClass(ParagraphWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Paragraph';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'subject';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (ParagraphWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/ParagraphWidget.js?");

/***/ }),

/***/ "./src/includes/PricingTableControl.js":
/*!*********************************************!*\
  !*** ./src/includes/PricingTableControl.js ***!
  \*********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar PricingTableControl = /*#__PURE__*/function () {\n  function PricingTableControl(label, cells, callback) {\n    _classCallCheck(this, PricingTableControl);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.cells = cells; // Initial value of the text input [{title: '', description: '', price: '', duration: '', button: ''}]\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    // render\n    this.render();\n  }\n  return _createClass(PricingTableControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n                <div data-control=\\\"slist-container\\\" class=\\\"list-group\\\"></div>\\n                <div class=\\\"d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-primary btn-sm mt-3 d-flex align-items-center\\\" type=\\\"button\\\" data-control=\\\"add-item\\\">\\n                        <span class=\\\"material-symbols-rounded me-2\\\">add</span>\\n                        Add Cell\\n                    </button>\\n                </div>\\n            </div>\\n        \");\n      var listContainer = this.getListContainer();\n\n      // Add event listener for the \"Add Cell\" button\n      this.domNode.querySelector('[data-control=\"add-item\"]').addEventListener(\"click\", function () {\n        _this.callback.addCell({\n          title: \"\",\n          description: \"\",\n          price: \"\",\n          duration: \"\",\n          button: \"Select\"\n        });\n      });\n\n      // Render each cell\n      this.cells.forEach(function (cell, index) {\n        var listCell = document.createElement(\"div\");\n        listCell.className = \"list-group-item bg-light position-relative\";\n        listCell.innerHTML = \"\\n                <div class=\\\"flex-grow-1\\\">\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"width: 100px;\\\">Title</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\".concat(cell.title, \"\\\" \\n                               data-index=\\\"\").concat(index, \"\\\" data-field=\\\"title\\\" style=\\\"width: 250px;\\\">  \\n                    </div>\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"width: 100px;\\\">Description</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(cell.description, \"\\\" \\n                               data-index=\\\"\").concat(index, \"\\\" data-field=\\\"description\\\" style=\\\"width: 250px;\\\">  \\n                    </div>\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"width: 100px;\\\">Price</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(cell.price, \"\\\" \\n                               data-index=\\\"\").concat(index, \"\\\" data-field=\\\"price\\\" style=\\\"width: 250px;\\\">  \\n                    </div>\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"width: 100px;\\\">Duration</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(cell.duration, \"\\\" \\n                               data-index=\\\"\").concat(index, \"\\\" data-field=\\\"duration\\\" style=\\\"width: 250px;\\\">  \\n                    </div>\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"width: 100px;\\\">Button text</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(cell.button, \"\\\" \\n                               data-index=\\\"\").concat(index, \"\\\" data-field=\\\"button\\\" style=\\\"width: 250px;\\\">  \\n                    </div>\\n                </div>\\n                <div class=\\\"mt-2 pt-2 border-top d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-danger btn-sm d-flex align-items-center px-1\\\" type=\\\"button\\\" data-control=\\\"remove-item\\\" data-index=\\\"\").concat(index, \"\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                    </button>\\n                </div>\\n                <div class=\\\"position-absolute bottom-0 start-0 ms-2 mb-2 fw-semibold text-muted opacity-25\\\" style=\\\"z-index: 0; pointer-events: none;font-size: 16px;\\\">\\n                    #\").concat(index + 1, \"\\n                </div>\\n            \");\n\n        // Add event listeners for input changes\n        listCell.querySelectorAll(\"input\").forEach(function (input) {\n          input.addEventListener(\"input\", function (e) {\n            var field = e.target.getAttribute(\"data-field\");\n            var cellIndex = e.target.getAttribute(\"data-index\");\n            _this.cells[cellIndex][field] = e.target.value; // Update the cell\n            if (_this.callback) {\n              _this.callback.setCells(_this.cells); // Trigger the callback with updated cells\n            }\n          });\n        });\n\n        // Add event listener for the \"Remove cell\" button\n        listCell.querySelector('[data-control=\"remove-item\"]').addEventListener(\"click\", function (e) {\n          var cellIndex = e.target.closest('[data-control=\"remove-item\"]').getAttribute(\"data-index\");\n          _this.cells.splice(cellIndex, 1); // Remove the cell\n          _this.render();\n          if (_this.callback) {\n            _this.callback.setCells(_this.cells); // Trigger the callback with updated cells\n          }\n        });\n        listContainer.appendChild(listCell);\n      });\n    }\n  }, {\n    key: \"getListContainer\",\n    value: function getListContainer() {\n      return this.domNode.querySelector('[data-control=\"slist-container\"]');\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PricingTableControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/PricingTableControl.js?");

/***/ }),

/***/ "./src/includes/PricingTableElement.js":
/*!*********************************************!*\
  !*** ./src/includes/PricingTableElement.js ***!
  \*********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar PricingTableElement = /*#__PURE__*/function (_BaseElement) {\n  function PricingTableElement(template, cells) {\n    var _this2;\n    _classCallCheck(this, PricingTableElement);\n    // [{title: ..., description: ..., price: ..., duration: ..., button: ...}, ]\n    _this2 = _callSuper(this, PricingTableElement); // Call the parent class constructor\n    _this2.template = template;\n    _this2.cells = cells;\n    _this2.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: \"center\",\n      background_size: \"100%\",\n      background_repeat: \"no-repeat\",\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: \"560\",\n      height: \"315\"\n    };\n    return _this2;\n  }\n  _inherits(PricingTableElement, _BaseElement);\n  return _createClass(PricingTableElement, [{\n    key: \"render\",\n    value: function render() {\n      // create the DOM Node for the Element\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement(\"div\");\n        this.domNode.setAttribute(\"builder-element\", \"SocialIconsElement\");\n      }\n\n      // render later\n      var htmlContent = this.renderTemplate(this.template);\n      this.domNode.innerHTML = htmlContent;\n\n      // validate template\n      if (!this.domNode.querySelector(\"CELLS\")) {\n        alert(\"[CELLS] tag missing from the \" + this.template + \" template!\");\n        throw new Error(\"[CELLS] tag missing from the \" + this.template + \" template!\");\n      }\n      // render items\n      var cellstheme = this.domNode.querySelector(\"CELLS\").innerHTML;\n\n      // validate items html\n      if (!cellstheme.includes(\"[[TITLE]]\")) {\n        alert(\"[TITLE] tag missing from the \" + this.template + \" template!\");\n        throw new Error(\"[TITLE] tag missing from the \" + this.template + \" template!\");\n      }\n      if (!cellstheme.includes(\"[[DESCRIPTION]]\")) {\n        alert(\"[DESCRIPTION] tag missing from the \" + this.template + \" template!\");\n        throw new Error(\"[DESCRIPTION] tag missing from the \" + this.template + \" template!\");\n      }\n      if (!cellstheme.includes(\"[[PRICE]]\")) {\n        alert(\"[PRICE] tag missing from the \" + this.template + \" template!\");\n        throw new Error(\"[PRICE] tag missing from the \" + this.template + \" template!\");\n      }\n      if (!cellstheme.includes(\"[[DURATION]]\")) {\n        alert(\"[DURATION] tag missing from the \" + this.template + \" template!\");\n        throw new Error(\"[DURATION] tag missing from the \" + this.template + \" template!\");\n      }\n      if (!cellstheme.includes(\"[[BUTTON]]\")) {\n        alert(\"[BUTTON] tag missing from the \" + this.template + \" template!\");\n        throw new Error(\"[BUTTON] tag missing from the \" + this.template + \" template!\");\n      }\n\n      // render items\n      var cellsHtml = \"\";\n      this.cells.forEach(function (cell) {\n        cellsHtml += cellstheme.replace(\"[[TITLE]]\", cell.title).replace(\"[[DESCRIPTION]]\", cell.description).replace(\"[[PRICE]]\", cell.price).replace(\"[[DURATION]]\", cell.duration).replace(\"[[BUTTON]]\", cell.button);\n      });\n      this.domNode.querySelector(\"CELLS\").outerHTML = cellsHtml;\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat(\"background_image\");\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat(\"background_position\", \"center\");\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat(\"background_size\", \"100\").toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + \"%\";\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat(\"background_repeat\", \"no-repeat\").toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat(\"background_color\");\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: \"PricingTableElement\",\n        template: this.template,\n        // attributes\n        cells: this.cells\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      var _this = this;\n      return [new PricingTableControl(\n      //\n      \"Cells/items list\", this.cells.map(function (cell) {\n        return {\n          title: cell.title,\n          description: cell.description,\n          price: cell.price,\n          duration: cell.duration,\n          button: cell.button\n        };\n      }), {\n        //\n        setCells: function setCells(cells) {\n          _this.cells = cells.map(function (cell) {\n            return {\n              title: cell.title,\n              description: cell.description,\n              price: cell.price,\n              duration: cell.duration,\n              button: cell.button\n            };\n          });\n          _this.render();\n        },\n        addCell: function addCell(cell) {\n          _this.cells.push({\n            title: cell.title || \"\",\n            description: cell.description || \"\",\n            price: cell.price || \"\",\n            duration: cell.duration || \"\",\n            button: cell.button || \"Select\"\n          });\n          _this.render();\n        } // more callbacks\n      }), new BackgroundControl(\n      // label\n      \"Background Settings\",\n      // values\n      {\n        color: this.getFormat(\"background_color\", \"#ffffff\"),\n        image: this.getFormat(\"background_image\", \"\"),\n        position: this.getFormat(\"background_position\", \"center\"),\n        size: this.getFormat(\"background_size\", \"100\").toString().replace(\"%\", \"\"),\n        toRepeat: this.getFormat(\"background_repeat\", \"no-repeat\") === \"repeat\"\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat(\"background_color\", values.color);\n          _this3.setFormat(\"background_image\", values.image);\n          _this3.setFormat(\"background_position\", values.position);\n          _this3.setFormat(\"background_size\", parseInt(values.size, 10) || 100);\n          _this3.setFormat(\"background_repeat\", values.toRepeat ? \"repeat\" : \"no-repeat\");\n          _this3.render();\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new PricingTableElement(data.template, data.cells);\n\n      // formats\n      if (data.formats) {\n        e.setFormat(\"background_color\", data.formats.background_color);\n        e.setFormat(\"background_image\", data.formats.background_image);\n        e.setFormat(\"background_position\", data.formats.background_position);\n        e.setFormat(\"background_size\", data.formats.background_size);\n        e.setFormat(\"background_repeat\", data.formats.background_repeat);\n        e.setFormat(\"font_family\", data.formats.font_family);\n        e.setFormat(\"font_style\", data.formats.font_style);\n        e.setFormat(\"font_weight\", data.formats.font_weight);\n        e.setFormat(\"font_size\", data.formats.font_size);\n        e.setFormat(\"background_color\", data.formats.background_color);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (PricingTableElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/PricingTableElement.js?");

/***/ }),

/***/ "./src/includes/RSSControl.js":
/*!************************************!*\
  !*** ./src/includes/RSSControl.js ***!
  \************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar RSSControl = /*#__PURE__*/function () {\n  function RSSControl(label, values, callback) {\n    _classCallCheck(this, RSSControl);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.url = values.url;\n    this.limit = values.limit || 10;\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(RSSControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n                <div class=\\\"d-flex w-100 mb-2\\\">\\n                    <div class=\\\"pe-2 w-100\\\">\\n                        <input type=\\\"text\\\" name=\\\"url\\\" value=\\\"\\\" class=\\\"form-control\\\" placeholder=\\\"Enter RSS URL\\\"/>\\n                    </div>\\n                </div>\\n                <div class=\\\"\\\">\\n                    <label class=\\\"form-label fw-semibold text-nowrap me-3\\\">Max items</label>\\n                    <div class=\\\"pe-2 w-100\\\">\\n                        <input type=\\\"number\\\" name=\\\"limit\\\" value=\\\"\").concat(this.limit || 10, \"\\\" class=\\\"form-control\\\" placeholder=\\\"Max items\\\"/>\\n                    </div>\\n                </div>\\n                <div class=\\\"mt-3\\\">\\n                    <button data-control=\\\"save\\\" type=\\\"button\\\" class=\\\"btn btn-primary h-100\\\">Save</button>\\n                </div>\\n            </div>\\n        \");\n\n      // Set current values\n      this.getTextInput().value = this.url;\n      this.getLimitInput().value = this.limit;\n\n      // Add event listener to save button\n      this.getSaveButton().addEventListener('click', function () {\n        var url = _this.getTextInput().value.trim();\n        var limit = parseInt(_this.getLimitInput().value.trim(), 10);\n        var rssRegex = /^(http|https):\\/\\/[^\\s$.?#].[^\\s]*$/; // Basic URL validation regex\n\n        if (!url) {\n          alert('URL is required.');\n        } else if (!rssRegex.test(url)) {\n          alert('Please enter a valid RSS URL.');\n        } else if (isNaN(limit) || limit <= 0) {\n          alert('Please enter a valid limit.');\n        } else {\n          _this.url = url;\n          _this.limit = limit;\n          _this.callback.setUrl(url);\n          _this.callback.setLimit(limit);\n        }\n      });\n    }\n  }, {\n    key: \"getTextInput\",\n    value: function getTextInput() {\n      return this.domNode.querySelector('[name=\"url\"]');\n    }\n  }, {\n    key: \"getSaveButton\",\n    value: function getSaveButton() {\n      return this.domNode.querySelector('[data-control=\"save\"]');\n    }\n  }, {\n    key: \"getLimitInput\",\n    value: function getLimitInput() {\n      return this.domNode.querySelector('[name=\"limit\"]');\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RSSControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/RSSControl.js?");

/***/ }),

/***/ "./src/includes/RSSElement.js":
/*!************************************!*\
  !*** ./src/includes/RSSElement.js ***!
  \************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _RSSControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./RSSControl.js */ \"./src/includes/RSSControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar RSSElement = /*#__PURE__*/function (_BaseElement) {\n  function RSSElement(template, url, limit, handler) {\n    var _this;\n    _classCallCheck(this, RSSElement);\n    _this = _callSuper(this, RSSElement);\n    _this.template = template;\n    _this.url = url;\n    _this.limit = limit || 10;\n    _this.handler = handler;\n    _this.domNode = null;\n    // formats\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n    return _this;\n  }\n  _inherits(RSSElement, _BaseElement);\n  return _createClass(RSSElement, [{\n    key: \"render\",\n    value: function render() {\n      var _this$url,\n        _this2 = this;\n      // Dom node should be only on for each element\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'RSSElement');\n      }\n\n      // Render template\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        url: (_this$url = this.url) !== null && _this$url !== void 0 ? _this$url : false,\n        items: false,\n        // formats\n        formats: this.formats\n      });\n      if (this.url) {\n        // Use handler to fetch RSS feed\n        fetch(\"\".concat(this.handler, \"?url=\").concat(encodeURIComponent(this.url))).then(function (response) {\n          if (!response.ok) {\n            throw new Error('Failed to fetch RSS feed.');\n          }\n          return response.json();\n        }).then(function (data) {\n          if (!data.items || !Array.isArray(data.items)) {\n            throw new Error('Invalid RSS feed format.');\n          }\n\n          // Render template with items\n          _this2.domNode.innerHTML = _this2.renderTemplate(_this2.template, {\n            url: _this2.url,\n            items: data.items.slice(0, _this2.limit)\n          });\n        })[\"catch\"](function (error) {\n          console.error(error);\n          placeholder.innerHTML = \"\\n                    <div class=\\\"d-flex flex-column align-items-center justify-content-center text-danger py-5\\\">\\n                        <span class=\\\"material-symbols-rounded\\\" style=\\\"font-size: 48px;\\\">error</span>\\n                        <p class=\\\"mt-2\\\">Failed to load RSS feed. Please check the URL.</p>\\n                        <a href=\\\"https://example.com/rss-help\\\" target=\\\"_blank\\\" class=\\\"text-primary mt-2\\\">See more info</a>\\n                    </div>\\n                \";\n        });\n      }\n\n      // formats\n      this.domNode.style.backgroundColor = this.getFormat('background_color');\n      this.domNode.style.paddingTop = this.getFormat('padding_top') + 'px';\n      this.domNode.style.paddingRight = this.getFormat('padding_right') + 'px';\n      this.domNode.style.paddingBottom = this.getFormat('padding_bottom') + 'px';\n      this.domNode.style.paddingLeft = this.getFormat('padding_left') + 'px';\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'RSSElement',\n        template: this.template,\n        url: this.url,\n        limit: this.limit,\n        handler: this.handler,\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      return [\n      // RSSControl\n      new _RSSControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('RSS URL', {\n        url: this.url,\n        limit: this.limit\n      }, {\n        setUrl: function setUrl(url) {\n          _this3.url = url;\n          _this3.render();\n        },\n        setLimit: function setLimit(limit) {\n          _this3.limit = limit;\n          _this3.render();\n        }\n      }), new PaddingMarginControl('Padding', {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      }, {\n        setValues: function setValues(values) {\n          _this3.setFormat('padding_top', values.top);\n          _this3.setFormat('padding_right', values.right);\n          _this3.setFormat('padding_bottom', values.bottom);\n          _this3.setFormat('padding_left', values.left);\n          _this3.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl('Optimized for mobile', 'Allow the element to display correctly on mobile devices', true, {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new CheckboxControl('Compatibility mode for legacy browser', 'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS', true, {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new RSSElement(data.template, data.url, data.limit, data.handler);\n      if (data.formats) {\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RSSElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/RSSElement.js?");

/***/ }),

/***/ "./src/includes/RSSWidget.js":
/*!***********************************!*\
  !*** ./src/includes/RSSWidget.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar RSSWidget = /*#__PURE__*/function (_BaseWidget) {\n  function RSSWidget() {\n    var _this;\n    _classCallCheck(this, RSSWidget);\n    _this = _callSuper(this, RSSWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add a RSSElement to the widget\n    var rssElement = new RSSElement('RSS', null, 10, 'rss.php');\n    _this.elements.push(rssElement);\n    return _this;\n  }\n  _inherits(RSSWidget, _BaseWidget);\n  return _createClass(RSSWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'RSS';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'rss_feed';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RSSWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/RSSWidget.js?");

/***/ }),

/***/ "./src/includes/RadioElement.js":
/*!**************************************!*\
  !*** ./src/includes/RadioElement.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar RadioElement = /*#__PURE__*/function (_BaseElement) {\n  function RadioElement(template, inputName, items) {\n    var _this;\n    _classCallCheck(this, RadioElement);\n    _this = _callSuper(this, RadioElement);\n    _this.template = template;\n    _this.inputName = inputName;\n    _this.items = items;\n    _this.domNode = null;\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: \"center\",\n      background_size: \"100%\",\n      background_repeat: \"no-repeat\",\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: \"560\",\n      height: \"315\"\n    };\n    return _this;\n  }\n  _inherits(RadioElement, _BaseElement);\n  return _createClass(RadioElement, [{\n    key: \"render\",\n    value: function render() {\n      if (!this.domNode) {\n        this.domNode = document.createElement(\"div\");\n        this.domNode.setAttribute(\"builder-element\", \"RadioElement\");\n      }\n\n      // render radio group\n      var htmlContent = this.renderTemplate(this.template, {\n        items: this.items\n      });\n      this.domNode.innerHTML = htmlContent;\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat(\"background_image\");\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat(\"background_position\", \"center\");\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat(\"background_size\", \"100\").toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + \"%\";\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat(\"background_repeat\", \"no-repeat\").toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat(\"background_color\");\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      // Don't forget to return the DOM node\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: \"RadioElement\",\n        template: this.template,\n        inputName: this.inputName,\n        items: this.items\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [new SelectControl(\"Radio Options\", this.items.map(function (item) {\n        return {\n          label: item.label,\n          value: item.value\n        };\n      }), {\n        setItems: function setItems(items) {\n          _this2.items = items.map(function (item) {\n            return {\n              label: item.label,\n              value: item.value\n            };\n          });\n          _this2.render();\n        },\n        setName: function setName(name) {\n          _this2.inputName = name;\n          _this2.render();\n        }\n      }, this.inputName), new BackgroundControl(\n      // label\n      \"Background Settings\",\n      // values\n      {\n        color: this.getFormat(\"background_color\", \"#ffffff\"),\n        image: this.getFormat(\"background_image\", \"\"),\n        position: this.getFormat(\"background_position\", \"center\"),\n        size: this.getFormat(\"background_size\", \"100\").toString().replace(\"%\", \"\"),\n        toRepeat: this.getFormat(\"background_repeat\", \"no-repeat\") === \"repeat\"\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this2.setFormat(\"background_color\", values.color);\n          _this2.setFormat(\"background_image\", values.image);\n          _this2.setFormat(\"background_position\", values.position);\n          _this2.setFormat(\"background_size\", parseInt(values.size, 10) || 100);\n          _this2.setFormat(\"background_repeat\", values.toRepeat ? \"repeat\" : \"no-repeat\");\n          _this2.render();\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      return new RadioElement(data.template, data.name, data.items);\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RadioElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/RadioElement.js?");

/***/ }),

/***/ "./src/includes/RadiosControl.js":
/*!***************************************!*\
  !*** ./src/includes/RadiosControl.js ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar RadiosControl = /*#__PURE__*/function () {\n  function RadiosControl(label, value, options, callback) {\n    _classCallCheck(this, RadiosControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial value of the text input\n    this.options = options; // Options for the radio buttons\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(RadiosControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      var radioButtons = '';\n\n      // Create the radio buttons\n      this.options.forEach(function (option, index) {\n        var optionId = \"radio_\".concat(_this.id, \"_\").concat(index);\n        radioButtons += \"\\n        <input type=\\\"radio\\\" class=\\\"btn-check\\\" name=\\\"radioButton_\".concat(_this.id, \"\\\" \\n               id=\\\"\").concat(optionId, \"\\\" value=\\\"\").concat(option.value, \"\\\" \\n               \").concat(_this.value === option.value ? 'checked' : '', \">\\n        <label class=\\\"btn btn-outline-primary py-2 builder-radio-btn builder-radio-option fw-bold\\\" for=\\\"\").concat(optionId, \"\\\">\").concat(option.label, \"</label>\\n      \");\n      });\n      this.domNode.innerHTML = \"\\n      <div class=\\\"py-2 px-3 builder-radio-container\\\">\\n        <label class=\\\"form-label fw-semibold d-block mb-2 builder-radio-label\\\">\".concat(this.label, \"</label>\\n        <div class=\\\"btn-group builder-radio-group\\\" role=\\\"group\\\" aria-label=\\\"\").concat(this.label, \"\\\">\\n          \").concat(radioButtons, \"\\n        </div>\\n      </div>\\n    \");\n\n      // Add event listeners to all radio buttons\n      var radioInputs = this.domNode.querySelectorAll(\"input[name=\\\"radioButton_\".concat(this.id, \"\\\"]\"));\n      radioInputs.forEach(function (radio) {\n        radio.addEventListener('change', function (e) {\n          _this.value = e.target.value;\n\n          // Call the callback with the new value if a callback was provided\n          if (typeof _this.callback === 'function') {\n            _this.callback(_this.value);\n          }\n        });\n      });\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var radio = this.domNode.querySelector(\"input[value=\\\"\".concat(newValue, \"\\\"]\"));\n      if (radio) {\n        radio.checked = true;\n\n        // Trigger the callback\n        if (typeof this.callback === 'function') {\n          this.callback(this.value);\n        }\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RadiosControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/RadiosControl.js?");

/***/ }),

/***/ "./src/includes/RangeControl.js":
/*!**************************************!*\
  !*** ./src/includes/RangeControl.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar RangeControl = /*#__PURE__*/function () {\n  function RangeControl(label, min, max, unit, step, callback) {\n    _classCallCheck(this, RangeControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.min = min; // Minimum value for the range\n    this.max = max; // Maximum value for the range\n    this.unit = unit; // Unit for the range value (e.g., px, %, em)\n    this.step = step; // Step value for the range input\n    this.callback = callback; // Callback function to handle input changes\n    this.value = this.min; // Initialize value to min\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n    this.setupEventListeners(); // Set up event listeners\n  }\n  return _createClass(RangeControl, [{\n    key: \"render\",\n    value: function render() {\n      this.domNode.innerHTML = \"\\n      <div class=\\\"py-2 px-3\\\">\\n        <h4 class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</h4>\\n          <div class=\\\"d-flex justify-content-between align-items-center mb-2 me-4\\\">\\n              <p class=\\\"mb-0 me-2\\\">\").concat(this.min).concat(this.unit, \"</p>\\n              <p class=\\\"mb-0 me-2\\\">\").concat(this.max).concat(this.unit, \"</p>\\n          </div>\\n          <div class=\\\"d-flex\\\">\\n              <div class=\\\"flex-grow-1\\\">\\n                <input type=\\\"range\\\" min=\\\"\").concat(this.min, \"\\\" max=\\\"\").concat(this.max, \"\\\" step=\\\"\").concat(this.step, \"\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-range slider w-100\\\" id=\\\"\").concat(this.id, \"\\\">\\n              </div>\\n              <div style=\\\"min-width: 50px; text-align: right;\\\">\\n                <label for=\\\"\").concat(this.id, \"\\\" class=\\\"form-label ms-2 mb-0\\\">\").concat(this.value).concat(this.unit, \"</label>\\n              </div>\\n          </div>\\n      </div>\\n    \");\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var rangeInput = this.domNode.querySelector(\"input[type=\\\"range\\\"]\");\n      var valueLabel = this.domNode.querySelector(\"label[for=\\\"\".concat(this.id, \"\\\"]\"));\n      if (rangeInput) {\n        rangeInput.value = newValue;\n      }\n      if (valueLabel) {\n        valueLabel.textContent = \"\".concat(this.value).concat(this.unit);\n      }\n      this.callback(this.value);\n    }\n  }, {\n    key: \"setupEventListeners\",\n    value: function setupEventListeners() {\n      var _this = this;\n      var rangeInput = this.domNode.querySelector(\"input[type=\\\"range\\\"]\");\n      var valueLabel = this.domNode.querySelector(\"label[for=\\\"\".concat(this.id, \"\\\"]\"));\n\n      // Debounce variables\n      var debounceTimeout = null;\n      var debounceDelay = 100; // milliseconds\n\n      rangeInput.addEventListener(\"input\", function (event) {\n        _this.value = event.target.value;\n        valueLabel.textContent = \"\".concat(_this.value).concat(_this.unit);\n\n        // Debounce the callback\n        if (debounceTimeout) clearTimeout(debounceTimeout);\n        debounceTimeout = setTimeout(function () {\n          _this.callback(_this.value);\n        }, debounceDelay);\n      });\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RangeControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/RangeControl.js?");

/***/ }),

/***/ "./src/includes/RichTextControl.js":
/*!*****************************************!*\
  !*** ./src/includes/RichTextControl.js ***!
  \*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }\nfunction _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _iterableToArray(r) { if (\"undefined\" != typeof Symbol && null != r[Symbol.iterator] || null != r[\"@@iterator\"]) return Array.from(r); }\nfunction _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar RichTextControl = /*#__PURE__*/function () {\n  function RichTextControl(label, value, callback) {\n    _classCallCheck(this, RichTextControl);\n    this.id = '_' + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial value of the text input\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(RichTextControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      var aiButton = '';\n\n      // If AI handler is available, render the AI button\n      if (builder.aiHandler) {\n        aiButton = \"\\n                <div class=\\\"text-end position-relative\\\">\\n                    <div class=\\\"dropdown mt-2 d-inline-block\\\" style=\\\"z-index: 12;\\nposition: absolute;\\nright: 5px;\\ntop: -47px;\\\">\\n                        <button class=\\\"btn ai-btn dropdown-toggle d-flex align-items-center\\\" type=\\\"button\\\" data-bs-toggle=\\\"dropdown\\\" aria-expanded=\\\"false\\\">\\n                            <span class=\\\"smenu-item-icon ai-icon rounded-2 p-0 mb-1\\\">\\n                            <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" width=\\\"1.4em\\\" height=\\\"1.6em\\\" viewBox=\\\"0 0 256 256\\\">\\n                                <defs>\\n                                <linearGradient id=\\\"ai-gradient\\\" x1=\\\"0%\\\" y1=\\\"0%\\\" x2=\\\"100%\\\" y2=\\\"100%\\\">\\n                                    <stop offset=\\\"0%\\\" stop-color=\\\"#4f46e5\\\" />\\n                                    <stop offset=\\\"100%\\\" stop-color=\\\"#a855f7\\\" />\\n                                </linearGradient>\\n                                </defs>\\n                                <path fill=\\\"url(#ai-gradient)\\\" d=\\\"M208 144a15.78 15.78 0 0 1-10.42 14.94L146 178l-19 51.62a15.92 15.92 0 0 1-29.88 0L78 178l-51.62-19a15.92 15.92 0 0 1 0-29.88L78 110l19-51.62a15.92 15.92 0 0 1 29.88 0L146 110l51.62 19A15.78 15.78 0 0 1 208 144m-56-96h16v16a8 8 0 0 0 16 0V48h16a8 8 0 0 0 0-16h-16V16a8 8 0 0 0-16 0v16h-16a8 8 0 0 0 0 16m88 32h-8v-8a8 8 0 0 0-16 0v8h-8a8 8 0 0 0 0 16h8v8a8 8 0 0 0 16 0v-8h8a8 8 0 0 0 0-16\\\"/>\\n                            </svg>\\n                            </span>\\n                        </button>\\n                        <ul class=\\\"dropdown-menu\\\">\\n                            <li><a data-control=\\\"ai\\\" data-text=\\\"Optimize content\\\" class=\\\"dropdown-item\\\" href=\\\"#\\\">Optimize content</a></li>\\n                            <li><a data-control=\\\"ai\\\" data-text=\\\"Rewrite formally\\\" class=\\\"dropdown-item\\\" href=\\\"#\\\">Rewrite formally</a></li>\\n                            <li><a data-control=\\\"ai\\\" data-text=\\\"Rewrite more casually\\\" class=\\\"dropdown-item\\\" href=\\\"#\\\">Rewrite more casually</a></li>\\n                        </ul>\\n                    </div>\\n                </div>\\n            \";\n      }\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3 position-relative\\\">\\n                <div data-control=\\\"ai-effects\\\"></div>\\n                <label class=\\\"form-label fw-semibold\\\">\" + this.label + \"</label>\\n                <textarea name=\\\"text\\\" id=\\\"\" + this.id + \"\\\" class=\\\"form-control\\\"></textarea>\\n\\n                \" + aiButton + \"\\n            </div>\\n        \";\n\n      // set current value\n      this.getTextInput().value = this.value;\n\n      // Add an event listener to handle input changes\n      this.getTextInput().addEventListener('keyup', function (e) {\n        _this2.callback.setText(_this2.getText()); // Trigger the callback with the new value\n      });\n\n      // If AI handler is available, add event listeners to AI buttons\n      if (builder.aiHandler) {\n        //\n        this.domNode.querySelectorAll('[data-control=\"ai\"]').forEach(function (item) {\n          item.addEventListener('click', function (e) {\n            e.preventDefault();\n            var requestText = item.getAttribute('data-text');\n            var originalText = _this2.getText();\n            var aiButton = _this2.domNode.querySelector('.ai-btn'); // Save original text\n            var oButtonText = aiButton.innerHTML; // Save original button text\n\n            _this2.domNode.querySelector('[data-control=\"ai-effects\"]').innerHTML = \"\\n                        <span class=\\\"ai-sparkles\\\">\\n                            <span class=\\\"star star-lg\\\"></span>\\n                            <span class=\\\"star star-sm delay-1\\\"></span>\\n                            <span class=\\\"star star-md delay-2\\\"></span>\\n                        </span>\";\n            aiButton.innerHTML = \"Thinking...\";\n            aiButton.classList.add('loading');\n\n            // Call the AI service to rewrite the text\n            _this2.askAI(originalText, requestText).then(function (rewrittenText) {\n              _this2.getTextInput().value = rewrittenText;\n              console.log(tinymce.get(_this2.id));\n              tinymce.get(_this2.id).setContent(rewrittenText);\n              _this2.callback.setText(rewrittenText); // Trigger the callback with the new value\n\n              aiButton.innerHTML = oButtonText; // Restore original button text\n              aiButton.classList.remove('loading');\n              _this2.domNode.querySelector('[data-control=\"ai-effects\"]').innerHTML = '';\n\n              // highlight the whole .tox-tinymce to add effects that is done\n              var tinymceEditor = _this2.domNode.querySelector('.tox-tinymce');\n              if (tinymceEditor) {\n                tinymceEditor.classList.add('ai-highlight');\n                setTimeout(function () {\n                  tinymceEditor.classList.remove('ai-highlight');\n                }, 1200);\n              }\n            });\n          });\n        });\n      }\n    }\n  }, {\n    key: \"askAI\",\n    value: function askAI(originalText) {\n      var request = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Rewrite formally';\n      // Call your backend ai.php endpoint instead of OpenAI directly\n      return fetch(builder.aiHandler, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({\n          prompt: originalText,\n          request: request\n        })\n      }).then(function (res) {\n        return res.json();\n      }).then(function (data) {\n        if (data.error) {\n          SAlert.show(data.error.message || 'An error occurred while processing your request.' + JSON.stringify(data));\n          return originalText;\n        }\n        if (data.choices && data.choices[0] && data.choices[0].message && data.choices[0].message.content) {\n          return data.choices[0].message.content.trim();\n        }\n        return originalText;\n      })[\"catch\"](function () {\n        alert('Failed to connect to AI service. Please try again later.');\n        return originalText;\n      });\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {\n      var _this = this;\n\n      //\n      tinymce.init(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({\n        license_key: 'gpl',\n        selector: '#' + this.id,\n        height: 200,\n        // height in pixels\n        inline: false,\n        // use inline mode\n        forced_root_block: ' ',\n        enter_compatibility: false,\n        // Disable default Enter block compatibility\n        newline_behavior: 'linebreak',\n        valid_elements: 'br,strong/b,em/i,span[*],u',\n        // Adjust to your needs\n        extended_valid_elements: 'br,span[*]',\n        paste_as_text: true\n      }, \"valid_elements\", '*[*]'), \"br_newline_selector\", 'br'), \"statusbar\", false), \"menubar\", false), \"toolbar\", 'bold italic underline fontsizeselect forecolor backcolor'), \"plugins\", 'lists'), \"branding\", false), \"fontsize_formats\", '8pt 10pt 12pt 14pt 18pt 24pt 36pt'), \"setup\", function setup(editor) {\n        // Listen for keyup event in the editor\n        editor.on('keyup change', function () {\n          // Get the content\n          var content = editor.getContent();\n          var container = document.createElement('div');\n          container.innerHTML = content;\n\n          // Replace <div> with <br> and preserve inner content\n          container.querySelectorAll('div').forEach(function (div) {\n            var br = document.createElement('br');\n            div.replaceWith.apply(div, _toConsumableArray(div.childNodes).concat([br]));\n          });\n          content = container.innerHTML;\n\n          // Sync back to original textarea\n          var textarea = document.getElementById(this.id);\n          textarea.value = content;\n\n          // Optional: You can log or process the value here\n          console.log('Updated textarea value:', textarea.value);\n\n          //\n          _this.callback.setText(_this.getText());\n        });\n      }));\n    }\n  }, {\n    key: \"getTextInput\",\n    value: function getTextInput() {\n      return this.domNode.querySelector('[name=\"text\"]');\n    }\n  }, {\n    key: \"getText\",\n    value: function getText() {\n      return this.getTextInput().value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (RichTextControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/RichTextControl.js?");

/***/ }),

/***/ "./src/includes/SAlert.js":
/*!********************************!*\
  !*** ./src/includes/SAlert.js ***!
  \********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nvar SAlert = {\n  show: function show(message) {\n    // Ensure the alerts wrapper exists\n    var wrapper = document.getElementById('alertsWrapper');\n    if (!wrapper) {\n      wrapper = document.createElement('div');\n      wrapper.id = 'alertsWrapper';\n      wrapper.innerHTML = \"\\n                <!-- Add this modal HTML inside the <body> tag if not already present -->\\n                <div class=\\\"modal fade\\\" id=\\\"SAlertModal\\\" tabindex=\\\"-1\\\" aria-labelledby=\\\"successModalLabel\\\" aria-hidden=\\\"true\\\">\\n                    <div class=\\\"modal-dialog modal-dialog-centered\\\">\\n                        <div class=\\\"modal-content\\\">\\n                            <div class=\\\"modal-header\\\">\\n                                <h5 class=\\\"modal-title d-flex align-items-center text-primary\\\" id=\\\"successModalLabel\\\"><span class=\\\"material-symbols-rounded fs-2\\\">lightbulb</span></h5>\\n                                <button type=\\\"button\\\" class=\\\"btn-close\\\" data-bs-dismiss=\\\"modal\\\" aria-label=\\\"Close\\\"></button>\\n                            </div>\\n                            <div class=\\\"modal-body\\\" id=\\\"SAlertModalBody\\\">\\n                                <!-- Content will be dynamically updated -->\\n                            </div>\\n                            <div class=\\\"modal-footer\\\">\\n                                <button type=\\\"button\\\" class=\\\"btn btn-primary\\\" data-bs-dismiss=\\\"modal\\\">OK</button>\\n                            </div>\\n                        </div>\\n                    </div>\\n                </div>\\n            \";\n      document.body.appendChild(wrapper);\n    }\n    wrapper.querySelector('#SAlertModalBody').innerHTML = message;\n    var modal = new bootstrap.Modal(document.getElementById('SAlertModal'));\n    modal.show();\n  }\n};\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SAlert);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/SAlert.js?");

/***/ }),

/***/ "./src/includes/SelectControl.js":
/*!***************************************!*\
  !*** ./src/includes/SelectControl.js ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar SelectControl = /*#__PURE__*/function () {\n  function SelectControl(label, items, callback) {\n    var inputName = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';\n    _classCallCheck(this, SelectControl);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.items = items; // Initial value of the text input\n    this.callback = callback; // Callback function to handle input changes\n    this.inputName = inputName; // Add name property\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    // render\n    this.render();\n  }\n  return _createClass(SelectControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n                <div class=\\\"mb-3\\\">\\n                    <label class=\\\"form-label fw-semibold small\\\">Element Name</label>\\n                    <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" \\n                           value=\\\"\").concat(this.inputName, \"\\\" data-control=\\\"name-input\\\">\\n                </div>\\n                <div data-control=\\\"slist-container\\\" class=\\\"list-group\\\"></div>\\n                <div class=\\\"d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-primary btn-sm mt-3 d-flex align-items-center\\\" \\n                            type=\\\"button\\\" data-control=\\\"add-item\\\">\\n                        <span class=\\\"material-symbols-rounded me-2\\\">add</span>\\n                        Add Item\\n                    </button>\\n                </div>\\n            </div>\\n        \");\n      var listContainer = this.getListContainer();\n\n      // Add event listener for the \"Add Item\" button\n      this.domNode.querySelector('[data-control=\"add-item\"]').addEventListener(\"click\", function () {\n        _this.items.push({\n          label: \"\",\n          value: \"\"\n        });\n        _this.render();\n        if (_this.callback) {\n          _this.callback.setItems(_this.items); // Trigger the callback with updated items\n        }\n      });\n\n      // Render each item\n      this.items.forEach(function (item, index) {\n        var listItem = document.createElement(\"div\");\n        listItem.className = \"list-group-item bg-light position-relative\";\n        listItem.innerHTML = \"\\n                <div class=\\\"flex-grow-1\\\">\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"flex: 1;\\\">Label</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\".concat(item.label, \"\\\" data-index=\\\"\").concat(index, \"\\\" data-field=\\\"label\\\" style=\\\"flex: 2;\\\">\\n                    </div>\\n                    <div class=\\\"d-flex align-items-center mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold small mb-1 me-2\\\" style=\\\"flex: 1;\\\">Value</label>\\n                        <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" value=\\\"\").concat(item.value, \"\\\" data-index=\\\"\").concat(index, \"\\\" data-field=\\\"value\\\" style=\\\"flex: 2;\\\">\\n                    </div>\\n                </div>\\n                <div class=\\\"mt-2 pt-2 border-top d-flex justify-content-end align-items-center\\\">\\n                    <button class=\\\"btn btn-danger btn-sm d-flex align-items-center px-1\\\" type=\\\"button\\\" data-control=\\\"remove-item\\\" data-index=\\\"\").concat(index, \"\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                    </button>\\n                </div>\\n                <div class=\\\"position-absolute bottom-0 start-0 ms-2 mb-2 fw-semibold text-muted opacity-25\\\" style=\\\"z-index: 0; pointer-events: none;font-size: 16px;\\\">\\n                    #\").concat(index + 1, \"\\n                </div>\\n            \");\n\n        // Add event listeners for input changes\n        listItem.querySelectorAll(\"input\").forEach(function (input) {\n          input.addEventListener(\"input\", function (e) {\n            var field = e.target.getAttribute(\"data-field\");\n            var itemIndex = e.target.getAttribute(\"data-index\");\n            _this.items[itemIndex][field] = e.target.value; // Update the item\n            if (_this.callback) {\n              _this.callback.setItems(_this.items); // Trigger the callback with updated items\n            }\n          });\n        });\n\n        // Add event listener for the \"Remove Item\" button\n        listItem.querySelector('[data-control=\"remove-item\"]').addEventListener(\"click\", function (e) {\n          var itemIndex = e.target.closest('[data-control=\"remove-item\"]').getAttribute(\"data-index\");\n          _this.items.splice(itemIndex, 1); // Remove the item\n          _this.render();\n          if (_this.callback) {\n            _this.callback.setItems(_this.items); // Trigger the callback with updated items\n          }\n        });\n        listContainer.appendChild(listItem);\n      });\n\n      // Add name change handler\n      this.domNode.querySelector('[data-control=\"name-input\"]').addEventListener('input', function (e) {\n        _this.inputName = e.target.value;\n        if (_this.callback && _this.callback.setName) {\n          _this.callback.setName(_this.inputName);\n        }\n      });\n    }\n  }, {\n    key: \"getListContainer\",\n    value: function getListContainer() {\n      return this.domNode.querySelector('[data-control=\"slist-container\"]');\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SelectControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/SelectControl.js?");

/***/ }),

/***/ "./src/includes/SelectElement.js":
/*!***************************************!*\
  !*** ./src/includes/SelectElement.js ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar SelectElement = /*#__PURE__*/function (_BaseElement) {\n  function SelectElement(template, inputName, items) {\n    var _this;\n    _classCallCheck(this, SelectElement);\n    _this = _callSuper(this, SelectElement);\n    _this.template = template;\n    _this.items = items;\n    _this.inputName = inputName;\n    _this.domNode = null;\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: \"center\",\n      background_size: \"100%\",\n      background_repeat: \"no-repeat\",\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: \"560\",\n      height: \"315\"\n    };\n    return _this;\n  }\n  _inherits(SelectElement, _BaseElement);\n  return _createClass(SelectElement, [{\n    key: \"render\",\n    value: function render() {\n      if (!this.domNode) {\n        this.domNode = document.createElement(\"div\");\n        this.domNode.setAttribute(\"builder-element\", \"SelectElement\");\n      }\n\n      // render select\n      var htmlContent = this.renderTemplate(this.template, {\n        items: this.items\n      });\n      this.domNode.innerHTML = htmlContent;\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat(\"background_image\");\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat(\"background_position\", \"center\");\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat(\"background_size\", \"100\").toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + \"%\";\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat(\"background_repeat\", \"no-repeat\").toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat(\"background_color\");\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: \"SelectElement\",\n        template: this.template,\n        inputName: this.inputName,\n        items: this.items\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [new SelectControl(\"Select item list\", this.items.map(function (item) {\n        return {\n          label: item.label,\n          value: item.value\n        };\n      }), {\n        setItems: function setItems(items) {\n          _this2.items = items.map(function (item) {\n            return {\n              label: item.label,\n              value: item.value\n            };\n          });\n          _this2.render();\n        },\n        setName: function setName(name) {\n          _this2.inputName = name;\n          _this2.render();\n        }\n      }, this.inputName // Pass the current inputName as the fourth parameter\n      ), new BackgroundControl(\n      // label\n      \"Background Settings\",\n      // values\n      {\n        color: this.getFormat(\"background_color\", \"#ffffff\"),\n        image: this.getFormat(\"background_image\", \"\"),\n        position: this.getFormat(\"background_position\", \"center\"),\n        size: this.getFormat(\"background_size\", \"100\").toString().replace(\"%\", \"\"),\n        toRepeat: this.getFormat(\"background_repeat\", \"no-repeat\") === \"repeat\"\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this2.setFormat(\"background_color\", values.color);\n          _this2.setFormat(\"background_image\", values.image);\n          _this2.setFormat(\"background_position\", values.position);\n          _this2.setFormat(\"background_size\", parseInt(values.size, 10) || 100);\n          _this2.setFormat(\"background_repeat\", values.toRepeat ? \"repeat\" : \"no-repeat\");\n          _this2.render();\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      return new SelectElement(data.template, data.name, data.items);\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SelectElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/SelectElement.js?");

/***/ }),

/***/ "./src/includes/SettingsTabManager.js":
/*!********************************************!*\
  !*** ./src/includes/SettingsTabManager.js ***!
  \********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var ejs_browser__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ejs-browser */ \"./node_modules/ejs-browser/lib/ejs.js\");\n/* harmony import */ var ejs_browser__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(ejs_browser__WEBPACK_IMPORTED_MODULE_0__);\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\nvar SettingsTabManager = /*#__PURE__*/function () {\n  function SettingsTabManager(container) {\n    _classCallCheck(this, SettingsTabManager);\n    this.container = container;\n    this.tabs = [];\n  }\n  return _createClass(SettingsTabManager, [{\n    key: \"addTab\",\n    value: function addTab(name, label, icon) {\n      this.tabs.push({\n        name: name,\n        label: label,\n        icon: icon\n      });\n    }\n  }, {\n    key: \"openTab\",\n    value: function openTab(tabName) {\n      var _this = this;\n      this.tabs.forEach(function (tab) {\n        if (tab.name === tabName) {\n          _this.container.querySelector('[data-tab=\"' + tab.name + '\"]').classList.add('active');\n          _this.container.querySelector('[data-tab-container=\"' + tab.name + '\"]').style.display = 'block';\n        } else {\n          _this.container.querySelector('[data-tab=\"' + tab.name + '\"]').classList.remove('active');\n          _this.container.querySelector('[data-tab-container=\"' + tab.name + '\"]').style.display = 'none';\n        }\n      });\n    }\n  }, {\n    key: \"getTab\",\n    value: function getTab(tabName) {\n      var tab = this.tabs.find(function (t) {\n        return t.name === tabName;\n      });\n      return {\n        name: tab.name,\n        label: tab.label,\n        icon: tab.icon,\n        container: this.container.querySelector('[data-tab-container=\"' + tab.name + '\"]'),\n        button: this.container.querySelector('[data-tab=\"' + tab.name + '\"]')\n      };\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      this.container.innerHTML = \"\\n            <div class=\\\"builder-sidebar-tabs px-3 py-2 rounded-0 d-flex bg-light border-bottom\\\">\\n                \".concat(this.tabs.map(function (tab, idx) {\n        return \"\\n                    <div class=\\\"tab-item\\\" data-tab=\\\"\".concat(tab.name, \"\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">\").concat(tab.icon, \"</span>\\n                        <!-- <span>\").concat(tab.label, \"</span> -->\\n                    </div>\\n                \");\n      }).join(''), \"\\n            </div>\\n            <div>\\n                \").concat(this.tabs.map(function (tab, idx) {\n        return \"\\n                    <div data-tab-container=\\\"\".concat(tab.name, \"\\\" style=\\\"display: none;\\\">\\n                    </div>\\n                \");\n      }).join(''), \"\\n            </div>\\n        \");\n\n      // \n      this.tabs.forEach(function (tab) {\n        _this2.getTab(tab.name).button.addEventListener('click', function () {\n          _this2.openTab(tab.name);\n        });\n      });\n\n      // @todo\n      document.querySelector('[data-tab=\"styles\"]').addEventListener('click', function () {\n        if (window.smenu) {\n          window.smenu.openTab(document.querySelector('[data-smenu=\"themes\"]'));\n        }\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SettingsTabManager);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/SettingsTabManager.js?");

/***/ }),

/***/ "./src/includes/SocialIconsElement.js":
/*!********************************************!*\
  !*** ./src/includes/SocialIconsElement.js ***!
  \********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar SocialIconsElement = /*#__PURE__*/function (_BaseElement) {\n  function SocialIconsElement(template, items) {\n    var _this2;\n    _classCallCheck(this, SocialIconsElement);\n    // [{image_LINK: '', link: '', label: '' }, ]\n    _this2 = _callSuper(this, SocialIconsElement); // Call the parent class constructor\n    _this2.template = template;\n    _this2.items = items;\n    _this2.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n    return _this2;\n  }\n  _inherits(SocialIconsElement, _BaseElement);\n  return _createClass(SocialIconsElement, [{\n    key: \"render\",\n    value: function render() {\n      // create the DOM Node for the Element\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'SocialIconsElement');\n      }\n\n      // render later\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        items: this.items\n      });\n\n      // // validate template\n      // if (!this.domNode.querySelector('ITEMS')) {\n      //     alert('[ITEMS] tag missing from the '+this.template+' template!');\n      //     throw new Error('[ITEMS] tag missing from the '+this.template+' template!');\n      // }\n      // // render items\n      // const itemTheme = this.domNode.querySelector('ITEMS').innerHTML;\n\n      // // validate items html\n      // if (!itemTheme.includes('[[LINK]]')) {\n      //     alert('[LINK] tag missing from the '+this.template+' template!');\n      //     throw new Error('[LINK] tag missing from the '+this.template+' template!');\n      // }\n      // if (!itemTheme.includes('[[LABEL]]')) {\n      //     alert('[LABEL] tag missing from the '+this.template+' template!');\n      //     throw new Error('[LINK] tag missing from the '+this.template+' template!');\n      // }\n      // if (!itemTheme.includes('[[IMAGE_URL]]')) {\n      //     alert('[IMAGE_URL] tag missing from the '+this.template+' template!');\n      //     throw new Error('[IMAGE_URL] tag missing from the '+this.template+' template!');\n      // }\n\n      // // render items\n      // let itemsHtml = '';\n      // this.items.forEach(item => {\n      //     itemsHtml += itemTheme.replace('[[LINK]]', item.link)\n      //                     .replace('[[IMAGE_URL]]', this.getFullUrl(item.image_url))\n      //                              .replace('[[LABEL]]', item.label);\n      // });\n      // this.domNode.querySelector('ITEMS').outerHTML = itemsHtml;\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'SocialIconsElement',\n        template: this.template,\n        // attributes\n        items: this.items\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this3 = this;\n      var _this = this;\n      return [new ImageLinkListControl(\n      // \n      'Icons/Items List', this.items.map(function (item) {\n        return {\n          image_url: _this.getFullUrl(item.image_url),\n          // transform relative url to absolutes one\n          label: item.label,\n          url: item.link\n          // description: null\n        };\n      }), {\n        // \n        setItems: function setItems(items) {\n          _this.items = items.map(function (item) {\n            return {\n              image_url: item.image_url,\n              label: item.label,\n              link: item.url\n            };\n          });\n          _this.render();\n        } // more callbacks\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this3.setFormat('background_color', values.color);\n          _this3.setFormat('background_image', values.image);\n          _this3.setFormat('background_position', values.position);\n          _this3.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this3.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this3.render();\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      return new SocialIconsElement(data.template, data.items); // \n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SocialIconsElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/SocialIconsElement.js?");

/***/ }),

/***/ "./src/includes/TableControl.js":
/*!**************************************!*\
  !*** ./src/includes/TableControl.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar TableControl = /*#__PURE__*/function () {\n  function TableControl(label, data, callback) {\n    _classCallCheck(this, TableControl);\n    this.label = label;\n    this.headers = data.headers || [];\n    this.rows = data.rows || [];\n    this.callback = callback;\n    this.domNode = document.createElement('div');\n    this.render();\n  }\n  return _createClass(TableControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n                \\n                <!-- Headers Section -->\\n                <div class=\\\"mb-3\\\">\\n                    <label class=\\\"form-label fw-semibold small\\\">Headers</label>\\n                    <div data-control=\\\"headers-container\\\" class=\\\"list-group mb-2\\\"></div>\\n                    <button class=\\\"btn btn-secondary btn-sm d-flex align-items-center\\\" type=\\\"button\\\" data-control=\\\"add-header\\\">\\n                        <span class=\\\"material-symbols-rounded me-2\\\">add</span>\\n                        Add Header\\n                    </button>\\n                </div>\\n\\n                <!-- Rows Section -->\\n                <div>\\n                    <label class=\\\"form-label fw-semibold small\\\">Rows</label>\\n                    <div data-control=\\\"rows-container\\\" class=\\\"list-group mb-2\\\"></div>\\n                    <button class=\\\"btn btn-primary btn-sm d-flex align-items-center\\\" type=\\\"button\\\" data-control=\\\"add-row\\\">\\n                        <span class=\\\"material-symbols-rounded me-2\\\">add</span>\\n                        Add Row\\n                    </button>\\n                </div>\\n            </div>\\n        \");\n\n      // Add Header button handler\n      this.domNode.querySelector('[data-control=\"add-header\"]').addEventListener('click', function () {\n        _this.headers.push({\n          text: 'New Header'\n        });\n\n        // Add a new empty cell to each existing row\n        _this.rows.forEach(function (row) {\n          row.cells.push(''); // Directly push to the cells array\n        });\n        if (_this.callback.setHeaders) {\n          _this.callback.setHeaders(_this.headers);\n        }\n        if (_this.callback.setRows) {\n          _this.callback.setRows(_this.rows); // Also update rows\n        }\n        _this.render();\n      });\n\n      // Add Row button handler\n      this.domNode.querySelector('[data-control=\"add-row\"]').addEventListener('click', function () {\n        var newRow = {\n          cells: Array(_this.headers.length).fill('')\n        };\n        _this.rows.push(newRow);\n        if (_this.callback.setRows) {\n          _this.callback.setRows(_this.rows);\n        }\n        _this.render();\n      });\n\n      // Render Headers\n      var headersContainer = this.domNode.querySelector('[data-control=\"headers-container\"]');\n      this.headers.forEach(function (header, index) {\n        var headerItem = document.createElement('div');\n        headerItem.className = 'list-group-item bg-light';\n        headerItem.innerHTML = \"\\n                <div class=\\\"d-flex align-items-center\\\">\\n                    <input type=\\\"text\\\" class=\\\"form-control form-control-sm me-2\\\" \\n                           value=\\\"\".concat(header.text, \"\\\" data-index=\\\"\").concat(index, \"\\\" data-type=\\\"header\\\">\\n                    <button class=\\\"btn btn-danger btn-sm d-flex align-items-center px-1\\\" \\n                            type=\\\"button\\\" data-control=\\\"remove-header\\\" data-index=\\\"\").concat(index, \"\\\">\\n                        <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                    </button>\\n                </div>\\n            \");\n        headersContainer.appendChild(headerItem);\n      });\n\n      // Render Rows\n      var rowsContainer = this.domNode.querySelector('[data-control=\"rows-container\"]');\n      this.rows.forEach(function (row, rowIndex) {\n        var rowItem = document.createElement('div');\n        // Add rounded class to all items and border-top\n        rowItem.className = 'list-group-item bg-light mb-2 border rounded';\n        var cellsHtml = '';\n        row.cells.forEach(function (cell, cellIndex) {\n          cellsHtml += \"\\n                    <div class=\\\"mb-2\\\">\\n                        <div class=\\\"d-flex align-items-center\\\">\\n                            <input type=\\\"text\\\" class=\\\"form-control form-control-sm\\\" \\n                                   value=\\\"\".concat(cell, \"\\\" data-row=\\\"\").concat(rowIndex, \"\\\" data-cell=\\\"\").concat(cellIndex, \"\\\">\\n                        </div>\\n                    </div>\\n                \");\n        });\n        rowItem.innerHTML = \"\\n                <div class=\\\"mb-2\\\">\\n                    <div class=\\\"d-flex align-items-center justify-content-between mb-2\\\">\\n                        <label class=\\\"form-label fw-semibold mb-0\\\">Row \".concat(rowIndex + 1, \"</label>\\n                        <button class=\\\"btn btn-danger btn-sm d-flex align-items-center px-1\\\" \\n                                type=\\\"button\\\" data-control=\\\"remove-row\\\" data-index=\\\"\").concat(rowIndex, \"\\\">\\n                            <span class=\\\"material-symbols-rounded\\\">delete</span>\\n                        </button>\\n                    </div>\\n                    \").concat(cellsHtml, \"\\n                </div>\\n            \");\n        rowsContainer.appendChild(rowItem);\n      });\n\n      // Add input change handlers for cells\n      this.domNode.querySelectorAll('input').forEach(function (input) {\n        input.addEventListener('input', function (e) {\n          var type = e.target.getAttribute('data-type');\n          if (type === 'header') {\n            var index = parseInt(e.target.getAttribute('data-index'));\n            _this.headers[index].text = e.target.value;\n            if (_this.callback.setHeaders) {\n              _this.callback.setHeaders(_this.headers);\n            }\n          } else {\n            var rowIndex = parseInt(e.target.getAttribute('data-row'));\n            var cellIndex = parseInt(e.target.getAttribute('data-cell'));\n            _this.rows[rowIndex].cells[cellIndex] = e.target.value;\n            if (_this.callback.setRows) {\n              _this.callback.setRows(_this.rows);\n            }\n          }\n        });\n      });\n\n      // Add remove handlers\n      this.domNode.querySelectorAll('[data-control=\"remove-header\"]').forEach(function (button) {\n        button.addEventListener('click', function (e) {\n          var index = parseInt(e.target.closest('button').getAttribute('data-index'));\n          _this.headers.splice(index, 1);\n\n          // Remove corresponding cell from each row\n          _this.rows.forEach(function (row) {\n            row.cells.splice(index, 1);\n          });\n          _this.render();\n          if (_this.callback.setHeaders) {\n            _this.callback.setHeaders(_this.headers);\n          }\n          if (_this.callback.setRows) {\n            _this.callback.setRows(_this.rows);\n          }\n        });\n      });\n      this.domNode.querySelectorAll('[data-control=\"remove-row\"]').forEach(function (button) {\n        button.addEventListener('click', function (e) {\n          var index = parseInt(e.target.closest('button').getAttribute('data-index'));\n          _this.rows.splice(index, 1);\n          _this.render();\n          if (_this.callback.setRows) {\n            _this.callback.setRows(_this.rows);\n          }\n        });\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TableControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/TableControl.js?");

/***/ }),

/***/ "./src/includes/TableElement.js":
/*!**************************************!*\
  !*** ./src/includes/TableElement.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar TableElement = /*#__PURE__*/function (_BaseElement) {\n  function TableElement(template) {\n    var _this;\n    var headers = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];\n    var rows = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];\n    _classCallCheck(this, TableElement);\n    _this = _callSuper(this, TableElement);\n    _this.template = template;\n    _this.headers = headers;\n    _this.rows = rows;\n    _this.domNode = null;\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: \"center\",\n      background_size: \"100%\",\n      background_repeat: \"no-repeat\",\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: \"560\",\n      height: \"315\"\n    };\n    return _this;\n  }\n  _inherits(TableElement, _BaseElement);\n  return _createClass(TableElement, [{\n    key: \"render\",\n    value: function render() {\n      if (!this.domNode) {\n        this.domNode = document.createElement(\"div\");\n        this.domNode.setAttribute(\"builder-element\", \"TableElement\");\n      }\n\n      // render table\n      var htmlContent = this.renderTemplate(this.template, {\n        headers: this.headers,\n        rows: this.rows\n      });\n      this.domNode.innerHTML = htmlContent;\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat(\"background_image\");\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat(\"background_position\", \"center\");\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat(\"background_size\", \"100\").toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + \"%\";\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat(\"background_repeat\", \"no-repeat\").toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat(\"background_color\");\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: \"TableElement\",\n        template: this.template,\n        headers: this.headers,\n        rows: this.rows\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [new TableControl(\"Table Data\", {\n        headers: this.headers,\n        rows: this.rows\n      }, {\n        setHeaders: function setHeaders(headers) {\n          _this2.headers = headers;\n          // Update rows to match header count\n          _this2.rows = _this2.rows.map(function (row) {\n            return {\n              cells: row.cells.slice(0, headers.length).concat(Array(Math.max(0, headers.length - row.cells.length)).fill(\"\"))\n            };\n          });\n          _this2.render();\n        },\n        setRows: function setRows(rows) {\n          _this2.rows = rows;\n          _this2.render();\n        }\n      }), new BackgroundControl(\n      // label\n      \"Background Settings\",\n      // values\n      {\n        color: this.getFormat(\"background_color\", \"#ffffff\"),\n        image: this.getFormat(\"background_image\", \"\"),\n        position: this.getFormat(\"background_position\", \"center\"),\n        size: this.getFormat(\"background_size\", \"100\").toString().replace(\"%\", \"\"),\n        toRepeat: this.getFormat(\"background_repeat\", \"no-repeat\") === \"repeat\"\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this2.setFormat(\"background_color\", values.color);\n          _this2.setFormat(\"background_image\", values.image);\n          _this2.setFormat(\"background_position\", values.position);\n          _this2.setFormat(\"background_size\", parseInt(values.size, 10) || 100);\n          _this2.setFormat(\"background_repeat\", values.toRepeat ? \"repeat\" : \"no-repeat\");\n          _this2.render();\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      return new TableElement(data.template, data.headers, data.rows);\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TableElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/TableElement.js?");

/***/ }),

/***/ "./src/includes/TabsManager.js":
/*!*************************************!*\
  !*** ./src/includes/TabsManager.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar TabsManager = /*#__PURE__*/function () {\n  function TabsManager() {\n    _classCallCheck(this, TabsManager);\n    this.groups = [];\n  }\n  return _createClass(TabsManager, [{\n    key: \"addTab\",\n    value: function addTab(tab, container) {\n      var _this = this;\n      this.groups.push({\n        tab: tab,\n        container: container\n      });\n\n      // event\n      tab.addEventListener('click', function () {\n        _this.openTab(tab);\n      });\n    }\n  }, {\n    key: \"openTab\",\n    value: function openTab(tab) {\n      this.groups.forEach(function (group) {\n        if (group.tab === tab) {\n          group.tab.classList.add('active');\n          group.container.style.display = 'block';\n        } else {\n          group.tab.classList.remove('active');\n          group.container.style.display = 'none';\n        }\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TabsManager);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/TabsManager.js?");

/***/ }),

/***/ "./src/includes/TextColorControl.js":
/*!******************************************!*\
  !*** ./src/includes/TextColorControl.js ***!
  \******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar TextColorControl = /*#__PURE__*/function () {\n  function TextColorControl(label, value, callback) {\n    _classCallCheck(this, TextColorControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial /* left | center | right */\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(TextColorControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"<div class=\\\"py-2 ps-3 pe-3 w-100 d-flex align-items-center justify-content-between\\\">\\n      <label for=\\\"\".concat(this.id, \"\\\" class=\\\"form-label fw-semibold mb-0 me-3\\\">\").concat(this.label, \"</label>\\n\\n        <div class=\\\"d-flex align-items-center ms-auto border border-neutral rounded p-1\\\" style=\\\"gap:8px; min-width:120px\\\">\\n          <input id=\\\"\").concat(this.id, \"_color\\\" type=\\\"color\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-control form-control-color\\\" style=\\\"width:33px;height:33px;padding:0;border:none;\\\">\\n          <input id=\\\"\").concat(this.id, \"_hex\\\" type=\\\"text\\\" value=\\\"\").concat(this.value, \"\\\" class=\\\"form-control border-none text-center\\\" style=\\\"width:90px;max-width:90px\\\" />\\n        </div>\\n    </div>\\n    <style>\\n      #\").concat(this.id, \"_color {\\n        border: none;\\n        padding: 0;\\n        width: 33px;\\n        height: 33px;\\n      }\\n      #\").concat(this.id, \"_hex {\\n        border: none;\\n        text-align: center;\\n        width: 90px;\\n        max-width: 90px;\\n      }\\n    </style>\\n    \");\n\n      // nodes\n      this.colorInput = this.domNode.querySelector(\"#\".concat(this.id, \"_color\"));\n      this.hexInput = this.domNode.querySelector(\"#\".concat(this.id, \"_hex\"));\n\n      // sync handlers\n      var notify = function notify(val) {\n        _this.value = val;\n        if (typeof _this.callback === \"function\") {\n          _this.callback(val);\n        } else if (_this.callback && typeof _this.callback.setValue === \"function\") {\n          _this.callback.setValue(val);\n        }\n      };\n      this.colorInput.addEventListener(\"input\", function (e) {\n        var v = e.target.value;\n        _this.hexInput.value = v;\n        notify(v);\n      });\n      this.hexInput.addEventListener(\"change\", function (e) {\n        var v = e.target.value.trim();\n        if (!v.startsWith(\"#\")) v = \"#\" + v;\n        // basic validation to 3/6 hex chars\n        if (/^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v)) {\n          _this.colorInput.value = v;\n          _this.hexInput.value = v;\n          notify(v);\n        } else {\n          // revert to last known good\n          _this.hexInput.value = _this.value;\n        }\n      });\n\n      // keep UI in sync if value was set programmatically before render\n      // this.setValue(this.value);\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var input = this.domNode.querySelector(\"input\");\n      if (input) {\n        input.value = this.value;\n      }\n\n      // Support both function and object with setValue\n      if (typeof this.callback === \"function\") {\n        this.callback(this.value);\n      } else if (this.callback && typeof this.callback.setValue === \"function\") {\n        this.callback.setValue(this.value);\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TextColorControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/TextColorControl.js?");

/***/ }),

/***/ "./src/includes/TextControl.js":
/*!*************************************!*\
  !*** ./src/includes/TextControl.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar TextControl = /*#__PURE__*/function () {\n  function TextControl(label, value, callback) {\n    _classCallCheck(this, TextControl);\n    this.id = '_' + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial value of the text input\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(TextControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this2 = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\" + this.label + \"</label>\\n                <textarea name=\\\"text\\\" id=\\\"\" + this.id + \"\\\" class=\\\"form-control\\\"></textarea>\\n            </div>\\n        \";\n\n      // set current value\n      this.getTextInput().value = this.value;\n\n      // Add an event listener to handle input changes\n      this.getTextInput().addEventListener('keyup', function (e) {\n        _this2.callback.setText(_this2.getText()); // Trigger the callback with the new value\n      });\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {\n      var _this = this;\n    }\n  }, {\n    key: \"getTextInput\",\n    value: function getTextInput() {\n      return this.domNode.querySelector('[name=\"text\"]');\n    }\n  }, {\n    key: \"getText\",\n    value: function getText() {\n      return this.getTextInput().value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TextControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/TextControl.js?");

/***/ }),

/***/ "./src/includes/TextDirectionControl.js":
/*!**********************************************!*\
  !*** ./src/includes/TextDirectionControl.js ***!
  \**********************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar TextDirectionControl = /*#__PURE__*/function () {\n  function TextDirectionControl(label, value, callback) {\n    _classCallCheck(this, TextDirectionControl);\n    this.id = \"_\" + Math.random().toString(36).substr(2, 9);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.value = value; // Initial /* left | center | right */\n    this.callback = callback; // Callback function to handle input changes\n\n    this.options = [{\n      icon: \"format_textdirection_l_to_r\",\n      value: \"left_to_right\"\n    }, {\n      icon: \"format_textdirection_r_to_l\",\n      value: \"right_to_left\"\n    }];\n\n    // Create the main container element\n    this.domNode = document.createElement(\"div\");\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(TextDirectionControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      var radioButtons = '';\n\n      // Create the radio buttons\n      this.options.forEach(function (option, index) {\n        var optionId = \"radio_\".concat(_this.id, \"_\").concat(index);\n        radioButtons += \"\\n        <input type=\\\"radio\\\" class=\\\"btn-check\\\" name=\\\"radioButton_\".concat(_this.id, \"\\\" \\n               id=\\\"\").concat(optionId, \"\\\" value=\\\"\").concat(option.value, \"\\\" \\n               \").concat(_this.value === option.value ? 'checked' : '', \">\\n        <label class=\\\"btn btn-outline-primary py-2 builder-radio-btn builder-radio-option fw-bold\\\" for=\\\"\").concat(optionId, \"\\\"><span class=\\\"material-symbols-rounded\\\">\").concat(option.icon, \"</span></label>\\n      \");\n      });\n      this.domNode.innerHTML = \"\\n      <div class=\\\"py-2 px-3 builder-radio-container d-flex flex-row align-items-center justify-content-between gap-3\\\">\\n        <label class=\\\"form-label fw-semibold d-block mb-2 builder-radio-label\\\">\".concat(this.label, \"</label>\\n        <div class=\\\"btn-group builder-radio-group\\\" role=\\\"group\\\" aria-label=\\\"\").concat(this.label, \"\\\">\\n          \").concat(radioButtons, \"\\n        </div>\\n      </div>\\n    \");\n\n      // Add event listeners to all radio buttons\n      var radioInputs = this.domNode.querySelectorAll(\"input[name=\\\"radioButton_\".concat(this.id, \"\\\"]\"));\n      radioInputs.forEach(function (radio) {\n        radio.addEventListener('change', function (e) {\n          _this.value = e.target.value;\n\n          // support function or object with setValue\n          if (typeof _this.callback === 'function') {\n            _this.callback(_this.value);\n          } else if (_this.callback && typeof _this.callback.setValue === 'function') {\n            _this.callback.setValue(_this.value);\n          }\n        });\n      });\n\n      // // notify initial value (optional, remove if undesired)\n      // if (this.value) {\n      //   if (typeof this.callback === 'function') {\n      //     this.callback(this.value);\n      //   } else if (this.callback && typeof this.callback.setValue === 'function') {\n      //     this.callback.setValue(this.value);\n      //   }\n      // }\n    }\n  }, {\n    key: \"afterRender\",\n    value: function afterRender() {}\n\n    // Method to set value programmatically\n  }, {\n    key: \"setValue\",\n    value: function setValue(newValue) {\n      this.value = newValue;\n      var radio = this.domNode.querySelector(\"input[value=\\\"\".concat(newValue, \"\\\"]\"));\n      if (radio) {\n        radio.checked = true;\n      }\n\n      // Support both function and object with setValue\n      if (typeof this.callback === 'function') {\n        this.callback(this.value);\n      } else if (this.callback && typeof this.callback.setValue === 'function') {\n        this.callback.setValue(this.value);\n      }\n    }\n\n    // Method to get current value\n  }, {\n    key: \"getValue\",\n    value: function getValue() {\n      return this.value;\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TextDirectionControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/TextDirectionControl.js?");

/***/ }),

/***/ "./src/includes/TextInputElement.js":
/*!******************************************!*\
  !*** ./src/includes/TextInputElement.js ***!
  \******************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _TextControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./TextControl.js */ \"./src/includes/TextControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar TextInputElement = /*#__PURE__*/function (_BaseElement) {\n  function TextInputElement(template, inputName, inputValue, placeholder) {\n    var _this;\n    _classCallCheck(this, TextInputElement);\n    _this = _callSuper(this, TextInputElement); // Call the parent class constructor\n    _this.template = template;\n    _this.inputName = inputName;\n    _this.inputValue = inputValue;\n    _this.placeholder = placeholder;\n    _this.domNode = null;\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n    return _this;\n  }\n  _inherits(TextInputElement, _BaseElement);\n  return _createClass(TextInputElement, [{\n    key: \"render\",\n    value: function render() {\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'TextInputElement');\n      }\n\n      //\n      var htmlContent = this.renderTemplate(this.template);\n      this.domNode.innerHTML = htmlContent.replace('[[NAME]]', this.inputName);\n      this.domNode.innerHTML = this.domNode.innerHTML.replace('[[VALUE]]', this.inputValue);\n      this.domNode.innerHTML = this.domNode.innerHTML.replace('[[PLACEHOLDER]]', this.placeholder);\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'TextInputElement',\n        template: this.template,\n        inputName: this.inputName,\n        inputValue: this.inputValue,\n        placeholder: this.placeholder\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [\n      // TextControl\n      new _TextControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"](\n      // label\n      'Name',\n      // value\n      this.inputName,\n      // callback\n      {\n        // set name\n        setText: function setText(inputName) {\n          _this2.inputName = inputName;\n          _this2.render();\n        }\n      }),\n      // TextControl\n      new _TextControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"](\n      // label\n      'Value',\n      // value\n      this.inputValue,\n      // callback\n      {\n        // set value\n        setText: function setText(inputValue) {\n          _this2.inputValue = inputValue;\n          _this2.render();\n        }\n      }),\n      // TextControl\n      new _TextControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"](\n      // label\n      'Placeholder',\n      // value\n      this.placeholder,\n      // callback\n      {\n        // set text\n        setText: function setText(placeholder) {\n          _this2.placeholder = placeholder;\n          _this2.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this2.setFormat('background_color', values.color);\n          _this2.setFormat('background_image', values.image);\n          _this2.setFormat('background_position', values.position);\n          _this2.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this2.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this2.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      return new TextInputElement(data.template, data.inputName, data.inputValue, data.placeholder);\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (TextInputElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/TextInputElement.js?");

/***/ }),

/***/ "./src/includes/UIManager.js":
/*!***********************************!*\
  !*** ./src/includes/UIManager.js ***!
  \***********************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BlockElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BlockElement.js */ \"./src/includes/BlockElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\n\nvar UIManager = /*#__PURE__*/function () {\n  function UIManager(builder) {\n    _classCallCheck(this, UIManager);\n    this.builder = builder;\n    this.elements = [];\n    this.hoveringElements = [];\n    this.dragOveringElements = [];\n    this.draggableItems = [];\n    this.draggingItem = null;\n  }\n  return _createClass(UIManager, [{\n    key: \"init\",\n    value: function init() {\n      var _this = this;\n      this.builder.pageElement.domNode.addEventListener('mouseover', function (e) {\n        e.preventDefault();\n        _this.mouseover(_this.builder.pageElement);\n      });\n      this.builder.pageElement.domNode.addEventListener('mouseout', function (e) {\n        e.preventDefault();\n        _this.mouseout(_this.builder.pageElement);\n      });\n    }\n  }, {\n    key: \"addElement\",\n    value: function addElement(element) {\n      this.elements.push(element);\n      this.handleElementEvents(element);\n    }\n  }, {\n    key: \"handleElementEvents\",\n    value: function handleElementEvents(element) {\n      var _this2 = this;\n      if (!element.eventHandled) {\n        element.domNode.addEventListener('mouseover', function (e) {\n          e.preventDefault();\n          _this2.mouseover(element);\n        });\n        element.domNode.addEventListener('mouseout', function (e) {\n          e.preventDefault();\n          _this2.mouseout(element);\n        });\n\n        // Droppable elements\n        if (element.isDroppable()) {\n          // dragover event\n          element.domNode.addEventListener('dragover', function (e) {\n            e.preventDefault();\n            _this2.dragOver(element, e);\n          });\n\n          // dragleave event\n          element.domNode.addEventListener('dragleave', function () {\n            _this2.dragLeave(element);\n          });\n\n          // Drop draggable element\n          element.domNode.addEventListener('drop', function (e) {\n            e.preventDefault();\n            _this2.drop(element, e);\n          });\n        }\n\n        // Select element\n        element.domNode.addEventListener('click', function (e) {\n          e.preventDefault();\n          var topElement = _this2.getTopHoveringElement();\n\n          // only click on top element\n          if (topElement != element) {\n            return;\n          }\n\n          //\n          _this2.builder.selectElement(topElement);\n        });\n        element.eventHandled = true;\n      }\n    }\n  }, {\n    key: \"mouseover\",\n    value: function mouseover(element) {\n      var _this3 = this;\n      this.addHoveringElement(element);\n\n      // Only add a hover highlight to the last nested element.\n      this.hoveringElements.forEach(function (el) {\n        if (el == _this3.getTopHoveringElement()) {\n          el.addHoverHightlight();\n        } else {\n          el.removeHoverHightlight();\n        }\n      });\n\n      //\n      if (element.container) {\n        // Add hover highlight to its container\n        element.container.addContainerHightlight();\n      }\n    }\n  }, {\n    key: \"mouseout\",\n    value: function mouseout(element) {\n      this.removeHoveringElement(element);\n      element.removeHoverHightlight();\n\n      //\n      if (element.container) {\n        // Remove hover highlight to its container\n        element.container.removeContainerHightlight();\n      }\n    }\n  }, {\n    key: \"addHoveringElement\",\n    value: function addHoveringElement(element) {\n      this.hoveringElements.push(element);\n    }\n  }, {\n    key: \"removeHoveringElement\",\n    value: function removeHoveringElement(element) {\n      this.hoveringElements = this.hoveringElements.filter(function (e) {\n        return e !== element;\n      });\n    }\n  }, {\n    key: \"getTopHoveringElement\",\n    value: function getTopHoveringElement() {\n      return this.hoveringElements[0];\n    }\n  }, {\n    key: \"getTopHDraggableElement\",\n    value: function getTopHDraggableElement() {\n      return this.draggableItems[0];\n    }\n  }, {\n    key: \"getDroppableElements\",\n    value: function getDroppableElements() {\n      return this.elements.filter(function (element) {\n        return element.isDroppable();\n      });\n    }\n  }, {\n    key: \"addDragOveringElement\",\n    value: function addDragOveringElement(element) {\n      this.dragOveringElements.push(element);\n    }\n  }, {\n    key: \"removeDragOveringElement\",\n    value: function removeDragOveringElement(element) {\n      this.dragOveringElements = this.dragOveringElements.filter(function (e) {\n        return e !== element;\n      });\n    }\n  }, {\n    key: \"dragOver\",\n    value: function dragOver(element, e) {\n      var draggableItem = this.draggingItem;\n      this.addDragOveringElement(element);\n\n      // Get top drag overing element\n      var topElement = this.getTopDragOveringElement(draggableItem);\n\n      // return if not hover element\n      if (element != topElement) {\n        return;\n      }\n\n      // check if the element can drop before or after\n      if (topElement.canDropAfter() || topElement.canDropBefore()) {\n        if (topElement.checkIfThePositionIsBefore(e.clientX, e.clientY)) {\n          if (topElement.canDropBefore()) {\n            // Cursor is in the top half of the hovered block\n            topElement.addDropBeforeHighlight();\n          }\n        } else {\n          if (topElement.canDropAfter()) {\n            // Cursor is in the bottom half of the hovered block\n            topElement.addDropAfterHighlight();\n          }\n        }\n\n        //\n        if (element.container) {\n          // Add hover highlight to its container\n          element.container.addContainerDropHightlight();\n          if (element.container.container) {\n            // Add hover highlight to its container\n            element.container.container.addContainerDropHightlight();\n          }\n        }\n      }\n\n      // Check if the element can drop inside\n      else if (topElement.canDropInside()) {\n        topElement.addDropInsideHighlight();\n\n        //\n        if (element.container) {\n          // Add hover highlight to its container\n          element.container.addContainerDropHightlight();\n          if (element.container.container) {\n            // Add hover highlight to its container\n            element.container.container.addContainerDropHightlight();\n          }\n        }\n      }\n    }\n  }, {\n    key: \"drop\",\n    value: function drop(element, e) {\n      var draggableItem = this.draggingItem;\n      if (!draggableItem) {\n        console.warn('No draggable item to drop');\n        return;\n      }\n      var topElement = this.getTopDragOveringElement(draggableItem);\n\n      // remove dropover highlight\n      topElement.removeDropHighlight();\n\n      // release the dragging item\n      this.draggingItem = null;\n\n      // return if current element is not top one to drop\n      if (topElement != element || !draggableItem) {\n        return;\n      }\n\n      // check if the element can drop before or after\n      if (topElement.canDropAfter() || topElement.canDropBefore()) {\n        if (topElement.checkIfThePositionIsBefore(e.clientX, e.clientY)) {\n          if (topElement.canDropBefore()) {\n            // Cursor is in the top half of the hovered block\n            this.addElementsBefore(topElement.container, topElement, draggableItem.renderElements());\n          }\n        } else {\n          if (topElement.canDropAfter()) {\n            // Cursor is in the bottom half of the hovered block\n            this.addElementsAfter(topElement.container, topElement, draggableItem.renderElements());\n          }\n        }\n\n        //\n        if (topElement.container) {\n          // Add hover highlight to its container\n          topElement.container.removeContainerDropHightlight();\n          if (topElement.container.container) {\n            // Add hover highlight to its container\n            topElement.container.container.removeContainerDropHightlight();\n          }\n        }\n\n        // remove current element\n        if (draggableItem.removeAfterDrop()) {\n          // remove \n          draggableItem.remove();\n        }\n      }\n\n      // Check if the element can drop inside\n      else if (topElement.canDropInside()) {\n        var newBlocks = topElement.appendElements(draggableItem.renderElements());\n\n        //\n        topElement.render();\n\n        // effects\n        newBlocks.forEach(function (block) {\n          block.fadeIn();\n        });\n\n        //\n        if (topElement.container) {\n          // Add hover highlight to its container\n          topElement.container.removeContainerDropHightlight();\n          if (topElement.container.container) {\n            // Add hover highlight to its container\n            topElement.container.container.removeContainerDropHightlight();\n          }\n        }\n\n        // remove current element\n        if (draggableItem.removeAfterDrop()) {\n          // remove\n          draggableItem.remove();\n        }\n      }\n    }\n  }, {\n    key: \"addElementsAfter\",\n    value: function addElementsAfter(container, referenceBlock, elements) {\n      var newBlocks = container.addElementsAfter(elements, referenceBlock);\n      container.render();\n\n      // effects\n      newBlocks.forEach(function (block) {\n        block.fadeIn();\n      });\n    }\n  }, {\n    key: \"addElementsBefore\",\n    value: function addElementsBefore(container, referenceBlock, elements) {\n      var newBlocks = container.addElementsBefore(elements, referenceBlock);\n      container.render();\n\n      // effects\n      newBlocks.forEach(function (block) {\n        block.fadeIn();\n      });\n    }\n  }, {\n    key: \"dragLeave\",\n    value: function dragLeave(element) {\n      this.removeDragOveringElement(element);\n\n      // just remove the drop highlight\n      element.removeDropHighlight();\n\n      //\n      if (element.container) {\n        // Add hover highlight to its container\n        element.container.removeContainerDropHightlight();\n        if (element.container.container) {\n          // Add hover highlight to its container\n          element.container.container.removeContainerDropHightlight();\n        }\n      }\n    }\n  }, {\n    key: \"getTopDragOveringElement\",\n    value: function getTopDragOveringElement(draggableItem) {\n      // return this.dragOveringElements.find(e => draggableItem.canDropOn(e));\n      return this.dragOveringElements[0];\n    }\n  }, {\n    key: \"addDraggableItem\",\n    value: function addDraggableItem(draggableItem) {\n      var _this4 = this;\n      this.draggableItems.push(draggableItem);\n\n      //\n      draggableItem.getDragAnchor().setAttribute('draggable', true);\n\n      // handle dragstart event\n      draggableItem.getDragAnchor().addEventListener('dragstart', function (e) {\n        if (_this4.draggingItem != null) {\n          return;\n        }\n        _this4.dragStart(draggableItem);\n      });\n    }\n  }, {\n    key: \"removeDraggableItem\",\n    value: function removeDraggableItem(object) {\n      this.draggableItems = this.draggableItems.filter(function (e) {\n        return e !== object;\n      });\n    }\n  }, {\n    key: \"getDraggableItemByIndex\",\n    value: function getDraggableItemByIndex(index) {\n      return this.draggableItems[index];\n    }\n  }, {\n    key: \"dragStart\",\n    value: function dragStart(draggableItem) {\n      this.draggingItem = draggableItem;\n\n      // clear drag over elements\n      this.dragOveringElements = [];\n    }\n  }, {\n    key: \"removeElement\",\n    value: function removeElement(element) {\n      this.elements = this.elements.filter(function (e) {\n        return e !== element;\n      });\n      this.removeDragOveringElement(element);\n      this.removeHoveringElement(element);\n      this.removeDraggableItem(element);\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (UIManager);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/UIManager.js?");

/***/ }),

/***/ "./src/includes/VideoElement.js":
/*!**************************************!*\
  !*** ./src/includes/VideoElement.js ***!
  \**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\nvar VideoElement = /*#__PURE__*/function (_BaseElement) {\n  function VideoElement(template, src) {\n    var _this;\n    _classCallCheck(this, VideoElement);\n    _this = _callSuper(this, VideoElement);\n    _this.template = template;\n    _this.src = src;\n    _this.domNode = null;\n    // formats\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0\n    };\n    return _this;\n  }\n  _inherits(VideoElement, _BaseElement);\n  return _createClass(VideoElement, [{\n    key: \"render\",\n    value: function render() {\n      if (!this.domNode) {\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', 'VideoElement');\n      }\n\n      // render template\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        src: this.src,\n        // formats\n        formats: this.formats\n      });\n\n      // formats\n      this.domNode.style.backgroundColor = this.getFormat('background_color');\n      this.domNode.style.paddingTop = this.getFormat('padding_top') + 'px';\n      this.domNode.style.paddingRight = this.getFormat('padding_right') + 'px';\n      this.domNode.style.paddingBottom = this.getFormat('padding_bottom') + 'px';\n      this.domNode.style.paddingLeft = this.getFormat('padding_left') + 'px';\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n\n      //\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: 'VideoElement',\n        template: this.template,\n        src: this.src,\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [\n      // ...existing controls for src if any...\n      new PaddingMarginControl('Padding', {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      }, {\n        setValues: function setValues(values) {\n          _this2.setFormat('padding_top', values.top);\n          _this2.setFormat('padding_right', values.right);\n          _this2.setFormat('padding_bottom', values.bottom);\n          _this2.setFormat('padding_left', values.left);\n          _this2.render();\n        }\n      }),\n      // ...other controls...\n\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Optimized for mobile',\n      // descriptoin,\n      'Allow the element to display correctly on mobile devices',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl(\n      // label\n      'Compatibility mode for legacy browser',\n      // descriptoin,\n      'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS',\n      // value\n      true,\n      // callback\n      {\n        // set text\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new VideoElement(data.template, data.src);\n      if (data.formats) {\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (VideoElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/VideoElement.js?");

/***/ }),

/***/ "./src/includes/VideoWidget.js":
/*!*************************************!*\
  !*** ./src/includes/VideoWidget.js ***!
  \*************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _VideoElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./VideoElement.js */ \"./src/includes/VideoElement.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\nvar VideoWidget = /*#__PURE__*/function (_BaseWidget) {\n  function VideoWidget() {\n    var _this;\n    _classCallCheck(this, VideoWidget);\n    _this = _callSuper(this, VideoWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add a VideoElement to the widget\n    var video = new _VideoElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('Video', 'https://media.w3.org/2010/05/sintel/trailer.mp4');\n    _this.elements.push(video);\n    return _this;\n  }\n  _inherits(VideoWidget, _BaseWidget);\n  return _createClass(VideoWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Video Widget';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'videocam';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (VideoWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/VideoWidget.js?");

/***/ }),

/***/ "./src/includes/WelcomeWidget.js":
/*!***************************************!*\
  !*** ./src/includes/WelcomeWidget.js ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _PElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./PElement.js */ \"./src/includes/PElement.js\");\n/* harmony import */ var _H1Element_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./H1Element.js */ \"./src/includes/H1Element.js\");\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\n\n\nvar WelcomeWidget = /*#__PURE__*/function (_BaseWidget) {\n  function WelcomeWidget() {\n    var _this;\n    _classCallCheck(this, WelcomeWidget);\n    _this = _callSuper(this, WelcomeWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add elements to the widget\n    var h1 = new _H1Element_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('H1', 'Welcome!');\n    var p = new _PElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]('P', 'This is a welcome message!');\n    _this.elements.push(h1, p);\n    return _this;\n  }\n  _inherits(WelcomeWidget, _BaseWidget);\n  return _createClass(WelcomeWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Welcome Widget';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'history_edu';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_2__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_3__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (WelcomeWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/WelcomeWidget.js?");

/***/ }),

/***/ "./src/includes/WidgetsBox.js":
/*!************************************!*\
  !*** ./src/includes/WidgetsBox.js ***!
  \************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }\nfunction _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.\"); }\nfunction _unsupportedIterableToArray(r, a) { if (r) { if (\"string\" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return \"Object\" === t && r.constructor && (t = r.constructor.name), \"Map\" === t || \"Set\" === t ? Array.from(r) : \"Arguments\" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }\nfunction _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }\nfunction _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; } }\nfunction _arrayWithHoles(r) { if (Array.isArray(r)) return r; }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar WidgetsBox = /*#__PURE__*/function () {\n  function WidgetsBox(container) {\n    _classCallCheck(this, WidgetsBox);\n    this.container = container;\n    this.widgetGroups = {};\n    this.widgetItemsContainer;\n  }\n  return _createClass(WidgetsBox, [{\n    key: \"addWidget\",\n    value: function addWidget(widget) {\n      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n      if (typeof options.group === 'undefined') {\n        options.group = 'Basic';\n      }\n      console.log(options.group);\n      if (typeof this.widgetGroups[options.group] === 'undefined') {\n        this.widgetGroups[options.group] = [];\n      }\n      if (typeof options.index === 'number' && options.index >= 0 && options.index <= this.widgetGroups[options.group].length) {\n        this.widgetGroups[options.group].splice(options.index, 0, widget);\n      } else {\n        this.widgetGroups[options.group].push(widget);\n      }\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      if (!this.widgetItemsContainer) {\n        var wrapper = document.createElement('div');\n        wrapper.innerHTML = \"\\n                <div class=\\\"widgets-box shadow-sm rounded-0 bg-light\\\">\\n                    <div class=\\\"widget-header w-100 p-3\\\">\\n                        <div class=\\\"alert alert-light fst-italic rounded-2 bg-light border-0 mb-0\\\">\\n                            \\u2728 Just drag & drop the widget \\uD83D\\uDC47 into the page content to insert!\\n                        </div>\\n                    </div>\\n                    <div class=\\\"widget-items\\\"></div>\\n                </div>\\n            \";\n        this.widgetItemsContainer = wrapper.querySelector('.widget-items');\n        this.container.appendChild(wrapper);\n      }\n\n      //\n      this.widgetItemsContainer.innerHTML = ''; // Clear previous content\n\n      Object.entries(this.widgetGroups).forEach(function (_ref) {\n        var _ref2 = _slicedToArray(_ref, 2),\n          key = _ref2[0],\n          widgets = _ref2[1];\n        var groupDom = document.createElement('div');\n        groupDom.innerHTML = \"\\n                <div class=\\\"widgets-group\\\">\\n                    <div class=\\\"widget-group-header w-100 px-3 d-flex justify-content-between align-items-center cursor-pointer\\\">\\n                        <h6 class=\\\"widget-group-title mb-0 text-nowrap\\\">\".concat(key, \"</h6>\\n                        <hr class=\\\"mx-3 w-100\\\">\\n                        <span class=\\\"material-symbols-rounded toggle-icon\\\" style=\\\"cursor:pointer;\\\">expand_more</span>\\n                    </div>\\n                    <div class=\\\"widget-items-container\\\"><div class=\\\"widget-group-items\\\"></div></div>\\n                </div>\\n            \");\n        var header = groupDom.querySelector('.widget-group-header');\n        var toggleIcon = groupDom.querySelector('.toggle-icon');\n        var groupContent = groupDom.querySelector('.widget-group-items');\n        var groupContainer = groupDom.querySelector('.widget-items-container');\n\n        // Initially collapsed\n        // groupContainer.style.display = 'none';\n\n        // Toggle functionality\n        header.addEventListener('click', function () {\n          var isCollapsed = groupContainer.style.display === 'none';\n          if (isCollapsed) {\n            groupContainer.style.display = 'block';\n            toggleIcon.textContent = 'expand_less';\n            // Smooth scroll to this group\n            groupDom.scrollIntoView({\n              behavior: 'smooth',\n              block: 'start'\n            });\n          } else {\n            groupContainer.style.display = 'none';\n            toggleIcon.textContent = 'expand_more';\n          }\n        });\n        widgets.forEach(function (widget) {\n          groupContent.appendChild(widget.domNode);\n          builder.uiManager.addDraggableItem(widget);\n        });\n        _this.widgetItemsContainer.appendChild(groupDom);\n      });\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (WidgetsBox);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/WidgetsBox.js?");

/***/ }),

/***/ "./src/includes/YoutubeControl.js":
/*!****************************************!*\
  !*** ./src/includes/YoutubeControl.js ***!
  \****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nvar YoutubeControl = /*#__PURE__*/function () {\n  function YoutubeControl(label, values, callback) {\n    _classCallCheck(this, YoutubeControl);\n    // Initialize properties\n    this.label = label; // Label for the text control\n    this.url = values.url;\n    this.callback = callback; // Callback function to handle input changes\n\n    // Create the main container element\n    this.domNode = document.createElement('div');\n\n    //\n    this.render(); // Call the render method to create the UI\n  }\n  return _createClass(YoutubeControl, [{\n    key: \"render\",\n    value: function render() {\n      var _this = this;\n      this.domNode.innerHTML = \"\\n            <div class=\\\"py-2 px-3\\\">\\n                <label class=\\\"form-label fw-semibold\\\">\".concat(this.label, \"</label>\\n                <div class=\\\"d-flex w-100 mb-2\\\">\\n                    <div class=\\\"pe-2 w-100\\\">\\n                        <input type=\\\"text\\\" name=\\\"url\\\" value=\\\"\\\" class=\\\"form-control\\\" placeholder=\\\"Enter YouTube URL\\\"/>\\n                    </div>\\n                </div>\\n                <div class=\\\"mt-3\\\">\\n                    <button data-control=\\\"save\\\" type=\\\"button\\\" class=\\\"btn btn-primary h-100\\\">Save</button>\\n                </div>\\n            </div>\\n        \");\n\n      // Set current values\n      this.getTextInput().value = this.url;\n\n      // Add event listener to save button\n      this.getSaveButton().addEventListener('click', function () {\n        var url = _this.getTextInput().value.trim();\n        if (!url) {\n          alert('URL is required.');\n        } else {\n          _this.url = url;\n          _this.callback.setUrl(url);\n        }\n      });\n    }\n  }, {\n    key: \"getTextInput\",\n    value: function getTextInput() {\n      return this.domNode.querySelector('[name=\"url\"]');\n    }\n  }, {\n    key: \"getSaveButton\",\n    value: function getSaveButton() {\n      return this.domNode.querySelector('[data-control=\"save\"]');\n    }\n  }]);\n}();\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (YoutubeControl);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/YoutubeControl.js?");

/***/ }),

/***/ "./src/includes/YoutubeElement.js":
/*!****************************************!*\
  !*** ./src/includes/YoutubeElement.js ***!
  \****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _BaseElement_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./BaseElement.js */ \"./src/includes/BaseElement.js\");\n/* harmony import */ var _YoutubeControl_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./YoutubeControl.js */ \"./src/includes/YoutubeControl.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar YoutubeElement = /*#__PURE__*/function (_BaseElement) {\n  function YoutubeElement(template, url) {\n    var _this;\n    _classCallCheck(this, YoutubeElement);\n    _this = _callSuper(this, YoutubeElement);\n    _this.template = template;\n    _this.url = url;\n    _this.domNode = null;\n\n    // formats\n    _this.formats = {\n      background_color: null,\n      background_image: null,\n      background_position: 'center',\n      background_size: '100%',\n      background_repeat: 'no-repeat',\n      padding_top: 0,\n      padding_right: 0,\n      padding_bottom: 0,\n      padding_left: 0,\n      // size settings\n      width: '560',\n      height: '315'\n    };\n    return _this;\n  }\n  _inherits(YoutubeElement, _BaseElement);\n  return _createClass(YoutubeElement, [{\n    key: \"getYouTubeVideoId\",\n    value: function getYouTubeVideoId() {\n      if (!this.url) {\n        return null;\n      }\n      var url = this.url;\n      try {\n        var parsedUrl = new URL(url);\n\n        // Handle shortened URLs like youtu.be/VIDEO_ID\n        if (parsedUrl.hostname === 'youtu.be') {\n          return parsedUrl.pathname.slice(1); // remove the leading \"/\"\n        }\n\n        // Handle regular youtube.com links\n        if (parsedUrl.hostname.includes('youtube.com')) {\n          return parsedUrl.searchParams.get('v') || null;\n        }\n        return null;\n      } catch (error) {\n        return null;\n      }\n    }\n  }, {\n    key: \"render\",\n    value: function render() {\n      var _this$getYouTubeVideo;\n      // Dom node should be only on for each element\n      if (!this.domNode) {\n        // New native DOM Node\n        this.domNode = document.createElement('div');\n        this.domNode.setAttribute('builder-element', this.getClassName());\n      }\n\n      // Validate URL\n      if (this.url && !this.getYouTubeVideoId()) {\n        alert('Invalid YouTube URL. Please provide a valid URL.');\n        return this.domNode; // Return empty node if URL is invalid\n      }\n\n      // Render template\n      this.domNode.innerHTML = this.renderTemplate(this.template, {\n        youtubeID: (_this$getYouTubeVideo = this.getYouTubeVideoId()) !== null && _this$getYouTubeVideo !== void 0 ? _this$getYouTubeVideo : false,\n        // formats\n        formats: this.formats\n      });\n\n      // formats\n      this.domNode.style.backgroundColor = this.getFormat('background_color');\n      this.domNode.style.paddingTop = this.getFormat('padding_top') + 'px';\n      this.domNode.style.paddingRight = this.getFormat('padding_right') + 'px';\n      this.domNode.style.paddingBottom = this.getFormat('padding_bottom') + 'px';\n      this.domNode.style.paddingLeft = this.getFormat('padding_left') + 'px';\n      if (this.domNode.querySelector('iframe')) {\n        this.domNode.querySelector('iframe').setAttribute('width', this.getFormat('width'));\n        this.domNode.querySelector('iframe').setAttribute('height', this.getFormat('height'));\n      }\n\n      // Apply background image if it exists\n      var bgImageValue = this.getFormat('background_image');\n      if (bgImageValue && bgImageValue.toString().trim() !== \"\") {\n        var bgImage = bgImageValue.toString().replace(/\\s*!important\\s*/, \"\").trim();\n        bgImage = this.getFullUrl(bgImage);\n        this.domNode.style.backgroundImage = \"url('\".concat(bgImage, \"')\");\n\n        // Set background position\n        var position = this.getFormat('background_position', 'center');\n        this.domNode.style.backgroundPosition = position;\n\n        // Set background size\n        var size = this.getFormat('background_size', '100').toString().replace(/\\s*!important\\s*/, \"\").trim();\n        if (!isNaN(parseFloat(size)) && isFinite(size)) {\n          size = parseFloat(size) + '%';\n        }\n        this.domNode.style.backgroundSize = size;\n\n        // Set background repeat\n        var repeat = this.getFormat('background_repeat', 'no-repeat').toString();\n        this.domNode.style.backgroundRepeat = repeat;\n      } else {\n        // Explicitly clear background image and related styles\n        this.domNode.style.backgroundImage = \"\";\n        this.domNode.style.backgroundPosition = \"\";\n        this.domNode.style.backgroundSize = \"\";\n        this.domNode.style.backgroundRepeat = \"\";\n      }\n\n      // Apply background color\n      var bgColor = this.getFormat('background_color');\n      if (bgColor) {\n        this.domNode.style.backgroundColor = bgColor;\n      }\n      return this.domNode;\n    }\n  }, {\n    key: \"getData\",\n    value: function getData() {\n      return {\n        name: this.getClassName(),\n        template: this.template,\n        url: this.url,\n        formats: this.formats\n      };\n    }\n  }, {\n    key: \"setFormat\",\n    value: function setFormat(key, value) {\n      this.formats[key] = value;\n    }\n  }, {\n    key: \"getFormat\",\n    value: function getFormat(key) {\n      var defaultValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;\n      return this.formats[key] !== undefined ? this.formats[key] : defaultValue;\n    }\n  }, {\n    key: \"getControls\",\n    value: function getControls() {\n      var _this2 = this;\n      return [\n      // YoutubeControl\n      new _YoutubeControl_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]('Youtube URL', {\n        url: this.url\n      }, {\n        setUrl: function setUrl(url) {\n          _this2.url = url;\n          _this2.render();\n        }\n      }), new CustomRangeControl('Width', 0, 2000, this.getFormat('width', 'auto') === 'auto', {\n        setValue: function setValue(value, isAuto) {\n          _this2.setFormat('width', isAuto ? 'auto' : value);\n          _this2.render();\n        }\n      }, this.getFormat('width', 'auto') === 'auto' ? 300 : parseInt(this.getFormat('width'), 10) // Pass current value\n      ), new CustomRangeControl('Height', 0, 2000, this.getFormat('height', 'auto') === 'auto', {\n        setValue: function setValue(value, isAuto) {\n          _this2.setFormat('height', isAuto ? 'auto' : value);\n          _this2.render();\n        }\n      }, this.getFormat('height', 'auto') === 'auto' ? 100 : parseInt(this.getFormat('height'), 10) // Pass current value\n      ), new PaddingMarginControl('Padding', {\n        top: this.getFormat('padding_top', 0),\n        right: this.getFormat('padding_right', 0),\n        bottom: this.getFormat('padding_bottom', 0),\n        left: this.getFormat('padding_left', 0)\n      }, {\n        setValues: function setValues(values) {\n          _this2.setFormat('padding_top', values.top);\n          _this2.setFormat('padding_right', values.right);\n          _this2.setFormat('padding_bottom', values.bottom);\n          _this2.setFormat('padding_left', values.left);\n          _this2.render();\n        }\n      }), new BackgroundControl(\n      // label\n      'Background Settings',\n      // values\n      {\n        color: this.getFormat('background_color', '#ffffff'),\n        image: this.getFormat('background_image', ''),\n        position: this.getFormat('background_position', 'center'),\n        size: this.getFormat('background_size', '100').toString().replace('%', ''),\n        toRepeat: this.getFormat('background_repeat', 'no-repeat') === 'repeat'\n      },\n      // callback\n      {\n        setBackground: function setBackground(values) {\n          _this2.setFormat('background_color', values.color);\n          _this2.setFormat('background_image', values.image);\n          _this2.setFormat('background_position', values.position);\n          _this2.setFormat('background_size', parseInt(values.size, 10) || 100);\n          _this2.setFormat('background_repeat', values.toRepeat ? 'repeat' : 'no-repeat');\n          _this2.render();\n        }\n      }),\n      // CheckboxControl\n      new CheckboxControl('Optimized for mobile', 'Allow the element to display correctly on mobile devices', true, {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      }), new CheckboxControl('Compatibility mode for legacy browser', 'Render compatible HTML for older browser like IE, Opera notice that in certain cases, it might generate JS and make sure your browser supports JS', true, {\n        setValue: function setValue(value) {\n          alert(value);\n        }\n      })];\n    }\n  }], [{\n    key: \"parse\",\n    value: function parse(data) {\n      var e = new this(data.template, data.url);\n      if (data.formats) {\n        e.setFormat('background_color', data.formats.background_color);\n        e.setFormat('padding_top', data.formats.padding_top);\n        e.setFormat('padding_right', data.formats.padding_right);\n        e.setFormat('padding_bottom', data.formats.padding_bottom);\n        e.setFormat('padding_left', data.formats.padding_left);\n        e.setFormat('width', data.formats.width || '560');\n        e.setFormat('height', data.formats.height || '315');\n        if (data.formats.background_image) {\n          e.setFormat('background_image', data.formats.background_image);\n        }\n        if (data.formats.background_position) {\n          e.setFormat('background_position', data.formats.background_position);\n        }\n        if (data.formats.background_repeat) {\n          e.setFormat('background_repeat', data.formats.background_repeat);\n        }\n      }\n      return e;\n    }\n  }]);\n}(_BaseElement_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (YoutubeElement);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/YoutubeElement.js?");

/***/ }),

/***/ "./src/includes/YoutubeWidget.js":
/*!***************************************!*\
  !*** ./src/includes/YoutubeWidget.js ***!
  \***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _ElementFactory_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./ElementFactory.js */ \"./src/includes/ElementFactory.js\");\n/* harmony import */ var _BaseWidget_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./BaseWidget.js */ \"./src/includes/BaseWidget.js\");\nfunction _typeof(o) { \"@babel/helpers - typeof\"; return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o; }, _typeof(o); }\nfunction _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError(\"Cannot call a class as a function\"); }\nfunction _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, \"value\" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }\nfunction _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, \"prototype\", { writable: !1 }), e; }\nfunction _toPropertyKey(t) { var i = _toPrimitive(t, \"string\"); return \"symbol\" == _typeof(i) ? i : i + \"\"; }\nfunction _toPrimitive(t, r) { if (\"object\" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || \"default\"); if (\"object\" != _typeof(i)) return i; throw new TypeError(\"@@toPrimitive must return a primitive value.\"); } return (\"string\" === r ? String : Number)(t); }\nfunction _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }\nfunction _possibleConstructorReturn(t, e) { if (e && (\"object\" == _typeof(e) || \"function\" == typeof e)) return e; if (void 0 !== e) throw new TypeError(\"Derived constructors may only return object or undefined\"); return _assertThisInitialized(t); }\nfunction _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); return e; }\nfunction _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }\nfunction _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }\nfunction _inherits(t, e) { if (\"function\" != typeof e && null !== e) throw new TypeError(\"Super expression must either be null or a function\"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, \"prototype\", { writable: !1 }), e && _setPrototypeOf(t, e); }\nfunction _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }\n\n\nvar YoutubeWidget = /*#__PURE__*/function (_BaseWidget) {\n  function YoutubeWidget() {\n    var _this;\n    _classCallCheck(this, YoutubeWidget);\n    _this = _callSuper(this, YoutubeWidget); // Call the parent class constructor\n    _this.elements = [];\n\n    // Add a RSSElement to the widget\n    var rssElement = new YoutubeElement('Youtube', null);\n    _this.elements.push(rssElement);\n    return _this;\n  }\n  _inherits(YoutubeWidget, _BaseWidget);\n  return _createClass(YoutubeWidget, [{\n    key: \"getName\",\n    value: function getName() {\n      return 'Youtube';\n    }\n  }, {\n    key: \"getIcon\",\n    value: function getIcon() {\n      return 'youtube_activity';\n    }\n  }, {\n    key: \"getElements\",\n    value: function getElements() {\n      // Return the elements\n      return this.elements;\n    }\n  }, {\n    key: \"renderElements\",\n    value: function renderElements() {\n      // Clone all elements and return the cloned ones\n      return this.elements.map(function (element) {\n        var data = element.getData();\n        return _ElementFactory_js__WEBPACK_IMPORTED_MODULE_0__[\"default\"].createElement(data);\n      });\n    }\n  }]);\n}(_BaseWidget_js__WEBPACK_IMPORTED_MODULE_1__[\"default\"]);\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (YoutubeWidget);\n\n//# sourceURL=webpack://BuilderBundle/./src/includes/YoutubeWidget.js?");

/***/ })

/******/ 	});
/************************************************************************/
/******/ 	// The module cache
/******/ 	var __webpack_module_cache__ = {};
/******/ 	
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/ 		// Check if module is in cache
/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
/******/ 		if (cachedModule !== undefined) {
/******/ 			return cachedModule.exports;
/******/ 		}
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = __webpack_module_cache__[moduleId] = {
/******/ 			// no module.id needed
/******/ 			// no module.loaded needed
/******/ 			exports: {}
/******/ 		};
/******/ 	
/******/ 		// Execute the module function
/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/ 	
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/ 	
/************************************************************************/
/******/ 	/* webpack/runtime/compat get default export */
/******/ 	(() => {
/******/ 		// getDefaultExport function for compatibility with non-harmony modules
/******/ 		__webpack_require__.n = (module) => {
/******/ 			var getter = module && module.__esModule ?
/******/ 				() => (module['default']) :
/******/ 				() => (module);
/******/ 			__webpack_require__.d(getter, { a: getter });
/******/ 			return getter;
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/define property getters */
/******/ 	(() => {
/******/ 		// define getter functions for harmony exports
/******/ 		__webpack_require__.d = (exports, definition) => {
/******/ 			for(var key in definition) {
/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ 				}
/******/ 			}
/******/ 		};
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
/******/ 	(() => {
/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ 	})();
/******/ 	
/******/ 	/* webpack/runtime/make namespace object */
/******/ 	(() => {
/******/ 		// define __esModule on exports
/******/ 		__webpack_require__.r = (exports) => {
/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ 			}
/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
/******/ 		};
/******/ 	})();
/******/ 	
/************************************************************************/
/******/ 	
/******/ 	// startup
/******/ 	// Load entry module and return exports
/******/ 	// This entry module can't be inlined because the eval devtool is used.
/******/ 	var __webpack_exports__ = __webpack_require__("./src/builder.js");
/******/ 	BuilderBundle = __webpack_exports__;
/******/ 	
/******/ })()
;