pageflow 14.5.1 → 14.5.2

data/app/assets/javascripts/pageflow/dist/ui.js

@@ -0,0 +1,3114 @@
+this.pageflow = this.pageflow || {};
+this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, Backbone, ChildViewContainer, IScroll, jquery_minicolors, wysihtml5, Cocktail) {
+  'use strict';
+
+  Marionette = Marionette && Marionette.hasOwnProperty('default') ? Marionette['default'] : Marionette;
+  _ = _ && _.hasOwnProperty('default') ? _['default'] : _;
+  $ = $ && $.hasOwnProperty('default') ? $['default'] : $;
+  I18n$1 = I18n$1 && I18n$1.hasOwnProperty('default') ? I18n$1['default'] : I18n$1;
+  Backbone = Backbone && Backbone.hasOwnProperty('default') ? Backbone['default'] : Backbone;
+  ChildViewContainer = ChildViewContainer && ChildViewContainer.hasOwnProperty('default') ? ChildViewContainer['default'] : ChildViewContainer;
+  IScroll = IScroll && IScroll.hasOwnProperty('default') ? IScroll['default'] : IScroll;
+  wysihtml5 = wysihtml5 && wysihtml5.hasOwnProperty('default') ? wysihtml5['default'] : wysihtml5;
+  Cocktail = Cocktail && Cocktail.hasOwnProperty('default') ? Cocktail['default'] : Cocktail;
+
+  /*global JST*/
+
+  Marionette.Renderer.render = function (template, data) {
+    if (_.isFunction(template)) {
+      return template(data);
+    }
+
+    if (template.indexOf('templates/') === 0) {
+      template = 'pageflow/editor/' + template;
+    }
+
+    if (!JST[template]) {
+      throw "Template '" + template + "' not found!";
+    }
+
+    return JST[template](data);
+  };
+
+  /**
+   * Returns an array of translation keys based on the `prefixes`
+   * option and the given `keyName`.
+   *
+   * @param {string} keyName
+   *   Suffix to append to prefixes.
+   *
+   * @param {string[]} [options.prefixes]
+   *   Array of translation key prefixes.
+   *
+   * @param {string} [options.fallbackPrefix]
+   *   Optional additional prefix to form a model based translation
+   *   key of the form
+   *   `prefix.fallbackModelI18nKey.propertyName.keyName`.
+   *
+   * @param {string} [options.fallbackModelI18nKey]
+   *   Required if `fallbackPrefix` option is present.
+   *
+   * @return {string[]}
+   * @memberof i18nUtils
+   * @since 12.0
+   */
+
+  function attributeTranslationKeys(attributeName, keyName, options) {
+    var result = [];
+
+    if (options.prefixes) {
+      result = result.concat(_(options.prefixes).map(function (prefix) {
+        return prefix + '.' + attributeName + '.' + keyName;
+      }, this));
+    }
+
+    if (options && options.fallbackPrefix) {
+      result.push(options.fallbackPrefix + '.' + options.fallbackModelI18nKey + '.' + attributeName);
+    }
+
+    return result;
+  }
+  /**
+   * Takes the same parameters as {@link
+   * #i18nutilsattributetranslationkeys attributeTranslationKeys}, but returns the first existing
+   * translation.
+   *
+   * @return {string}
+   * @memberof i18nUtils
+   * @since 12.0
+   */
+
+  function attributeTranslation(attributeName, keyName, options) {
+    return findTranslation(attributeTranslationKeys(attributeName, keyName, options));
+  }
+  /**
+   * Find the first key for which a translation exists and return the
+   * translation.
+   *
+   * @param {string[]} keys
+   *   Translation key candidates.
+   *
+   * @param {string} [options.defaultValue]
+   *   Value to return if none of the keys has a translation. Is
+   *   treated like an HTML translation if html flag is set.
+   *
+   * @param {boolean} [options.html]
+   *   If true, also search for keys ending in '_html' and HTML-escape
+   *   keys that do not end in 'html'
+   *
+   * @memberof i18nUtils
+   * @return {string}
+   */
+
+  function findTranslation(keys, options) {
+    options = options || {};
+
+    if (options.html) {
+      keys = translationKeysWithSuffix(keys, 'html');
+    }
+
+    return _.chain(keys).reverse().reduce(function (result, key) {
+      var unescapedTranslation = I18n$1.t(key, _.extend({}, options, {
+        defaultValue: result
+      }));
+
+      if (!options.html || key.match(/_html$/) || result == unescapedTranslation) {
+        return unescapedTranslation;
+      } else {
+        return $('<div />').text(unescapedTranslation).html();
+      }
+    }, options.defaultValue).value();
+  }
+  /**
+   * Return the first key for which a translation exists. Returns the
+   * first if non of the keys has a translation.
+   *
+   * @param {string[]} keys
+   * Translation key candidates.
+   *
+   * @memberof i18nUtils
+   * @return {string}
+   */
+
+  function findKeyWithTranslation(keys) {
+    var missing = '_not_translated';
+    return _(keys).detect(function (key) {
+      return I18n$1.t(key, {
+        defaultValue: missing
+      }) !== missing;
+    }) || _.first(keys);
+  }
+  function translationKeysWithSuffix(keys, suffix) {
+    return _.chain(keys).map(function (key) {
+      return [key + '_' + suffix, key];
+    }).flatten().value();
+  }
+
+  var i18nUtils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    attributeTranslationKeys: attributeTranslationKeys,
+    attributeTranslation: attributeTranslation,
+    findTranslation: findTranslation,
+    findKeyWithTranslation: findKeyWithTranslation,
+    translationKeysWithSuffix: translationKeysWithSuffix
+  });
+
+  function _arrayWithHoles(arr) {
+    if (Array.isArray(arr)) return arr;
+  }
+
+  function _iterableToArrayLimit(arr, i) {
+    if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _e = undefined;
+
+    try {
+      for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+        _arr.push(_s.value);
+
+        if (i && _arr.length === i) break;
+      }
+    } catch (err) {
+      _d = true;
+      _e = err;
+    } finally {
+      try {
+        if (!_n && _i["return"] != null) _i["return"]();
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+
+    return _arr;
+  }
+
+  function _arrayLikeToArray(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+
+    for (var i = 0, arr2 = new Array(len); i < len; i++) {
+      arr2[i] = arr[i];
+    }
+
+    return arr2;
+  }
+
+  function _unsupportedIterableToArray(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+  }
+
+  function _nonIterableRest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function _slicedToArray(arr, i) {
+    return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+  }
+
+  /**
+   * Create object that can be passed to Marionette ui property from CSS
+   * module object.
+   *
+   * @param {Object} styles
+   *   Class name mapping imported from `.module.css` file.
+   *
+   * @param {...string} classNames
+   *   Keys from the styles object that shall be used in the ui object.
+   *
+   * @return {Object}
+   *
+   * @example
+   *
+   *     // MyView.module.css
+   *
+   *     .container {}
+   *
+   *     // MyView.js
+   *
+   *     import Marionette from 'marionette';
+   *     import {cssModulesUtils} from 'pageflow/ui';
+   *
+   *     import styles from './MyView.module.css';
+   *
+   *     export const MyView = Marionette.ItemView({
+   *       template: () => `
+   *         <div class=${styles.container}></div>
+   *       `,
+   *
+   *       ui: cssModulesUtils.ui(styles, 'container'),
+   *
+   *       onRender() {
+   *         this.ui.container // => JQuery wrapper for container element
+   *       }
+   *     });
+   *
+   * @memberof cssModulesUtils
+   */
+  function ui(styles) {
+    for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      classNames[_key - 1] = arguments[_key];
+    }
+
+    return classNames.reduce(function (result, className) {
+      result[className] = selector(styles, className);
+      return result;
+    }, {});
+  }
+  /**
+   * Create object that can be passed to Marionette events property from CSS
+   * module object.
+   *
+   * @param {Object} styles
+   *   Class name mapping imported from `.module.css` file.
+   *
+   * @param {Object} mapping
+   *   Events mapping using keys from the `styles` instead of CSS class names.
+   *
+   * @return {Object}
+   *
+   * @example
+   *
+   *     // MyView.module.css
+   *
+   *     .addButton {}
+   *
+   *     // MyView.js
+   *
+   *     import Marionette from 'marionette';
+   *     import {cssModulesUtils} from 'pageflow/ui';
+   *
+   *     import styles from './MyView.module.css';
+   *
+   *     export const MyView = Marionette.ItemView({
+   *       template: () => `
+   *         <button class=${styles.addButton}></button>
+   *       `,
+   *
+   *       events: cssModulesUtils.events(styles, {
+   *         'click addButton': () => console.log('clicked add button');
+   *       })
+   *     });
+   *
+   * @memberof cssModulesUtils
+   */
+
+  function events(styles, mapping) {
+    return Object.keys(mapping).reduce(function (result, key) {
+      var _key$split = key.split(' '),
+          _key$split2 = _slicedToArray(_key$split, 2),
+          event = _key$split2[0],
+          className = _key$split2[1];
+
+      result["".concat(event, " ").concat(selector(styles, className))] = mapping[key];
+      return result;
+    }, {});
+  }
+  /**
+   * Generates a CSS selector from a CSS module rule.
+   *
+   * @param {Object} styles
+   *   Class name mapping imported from `.module.css` file.
+   *
+   * @param {String} className
+   *   Key from the `styles` object.
+   *
+   * @return {String} CSS Selector
+   * @memberof cssModulesUtils
+   */
+
+  function selector(styles, className) {
+    var classNames = styles[className];
+
+    if (!classNames) {
+      throw new Error("Unknown class name ".concat(className, " in mapping. Knwon names: ").concat(Object.keys(styles).join(', '), "."));
+    }
+
+    return ".".concat(classNames.replace(/ /g, '.'));
+  }
+
+  var cssModulesUtils = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    ui: ui,
+    events: events,
+    selector: selector
+  });
+
+  // https://github.com/jashkenas/backbone/issues/2601
+
+  function BaseObject(options) {
+    this.initialize.apply(this, arguments);
+  }
+
+  _.extend(BaseObject.prototype, Backbone.Events, {
+    initialize: function initialize(options) {}
+  }); // The self-propagating extend function that Backbone classes use.
+
+
+  BaseObject.extend = Backbone.Model.extend;
+
+  var serverSideValidation = {
+    initialize: function initialize() {
+      var _this = this;
+
+      this.validationErrors = {};
+      this.listenTo(this, 'error', function (model, request) {
+        if (request.status === 422) {
+          _this.validationErrors = JSON.parse(request.responseText).errors;
+
+          _this.trigger('invalid');
+        }
+      });
+      this.listenTo(this, 'sync', function () {
+        _this.validationErrors = {};
+      });
+    }
+  };
+
+  var CollectionView = Marionette.View.extend({
+    initialize: function initialize() {
+      this.rendered = false;
+      this.itemViews = new ChildViewContainer();
+      this.collection.map(this.addItem, this);
+      this.listenTo(this.collection, 'add', this.addItem);
+      this.listenTo(this.collection, 'remove', this.removeItem);
+      this.listenTo(this.collection, 'sort', this.sort);
+
+      if (this.options.loadingViewConstructor) {
+        this.listenTo(this.collection, 'request', function () {
+          this.loading = true;
+          this.togglePlaceHolder();
+        });
+        this.listenTo(this.collection, 'sync', function () {
+          this.loading = false;
+          this.togglePlaceHolder();
+        });
+      }
+    },
+    render: function render() {
+      if (!this.rendered) {
+        this.$el.append(this.itemViews.map(function (itemView) {
+          itemView.$el.data('view', itemView);
+          return itemView.render().el;
+        }));
+        this.togglePlaceHolder();
+        this.rendered = true;
+      }
+
+      return this;
+    },
+    onClose: function onClose() {
+      this.itemViews.call('close');
+      this.closePlaceHolderView();
+    },
+    addItem: function addItem(item) {
+      var view = new this.options.itemViewConstructor(_.extend({
+        model: item
+      }, this.getItemViewOptions(item)));
+      this.itemViews.add(view);
+
+      if (this.rendered) {
+        var index = this.collection.indexOf(item);
+        view.render();
+        view.$el.data('view', view);
+
+        if (index > 0) {
+          this.$el.children().eq(index - 1).after(view.el);
+        } else {
+          this.$el.prepend(view.el);
+        }
+
+        this.togglePlaceHolder();
+      }
+    },
+    removeItem: function removeItem(item) {
+      var view = this.itemViews.findByModel(item);
+
+      if (view) {
+        this.itemViews.remove(view);
+        view.close();
+        this.togglePlaceHolder();
+      }
+    },
+    sort: function sort() {
+      var last = null;
+      this.collection.each(function (item) {
+        var itemView = this.itemViews.findByModel(item);
+        var element;
+
+        if (!itemView) {
+          return;
+        }
+
+        element = itemView.$el;
+
+        if (last) {
+          last.after(element);
+        } else {
+          this.$el.prepend(element);
+        }
+
+        last = element;
+      }, this);
+    },
+    getItemViewOptions: function getItemViewOptions(item) {
+      if (typeof this.options.itemViewOptions === 'function') {
+        return this.options.itemViewOptions(item);
+      } else {
+        return this.options.itemViewOptions || {};
+      }
+    },
+    closePlaceHolderView: function closePlaceHolderView() {
+      if (this.placeHolderView) {
+        this.placeHolderView.close();
+        this.placeHolderView = null;
+      }
+    },
+    togglePlaceHolder: function togglePlaceHolder() {
+      var lastPlaceholderConstructor = this.placeHolderConstructor;
+      this.placeHolderConstructor = this.getPlaceHolderConstructor();
+
+      if (this.itemViews.length || !this.placeHolderConstructor) {
+        this.closePlaceHolderView();
+      } else if (!this.placeHolderView || lastPlaceholderConstructor !== this.placeHolderConstructor) {
+        this.closePlaceHolderView();
+        this.placeHolderView = new this.placeHolderConstructor();
+        this.$el.append(this.placeHolderView.render().el);
+      }
+    },
+    getPlaceHolderConstructor: function getPlaceHolderConstructor() {
+      if (this.loading && this.options.loadingViewConstructor) {
+        return this.options.loadingViewConstructor;
+      } else if (this.options.blankSlateViewConstructor) {
+        return this.options.blankSlateViewConstructor;
+      }
+    }
+  });
+
+  var SortableCollectionView = CollectionView.extend({
+    render: function render() {
+      CollectionView.prototype.render.call(this);
+      this.$el.sortable({
+        connectWith: this.options.connectWith,
+        placeholder: 'sortable-placeholder',
+        forcePlaceholderSize: true,
+        delay: 200,
+        update: _.bind(function (event, ui) {
+          if (ui.item.parent().is(this.el)) {
+            this.updateOrder();
+          }
+        }, this),
+        receive: _.bind(function (event, ui) {
+          var view = ui.item.data('view');
+          this.reindexPositions();
+          this.itemViews.add(view);
+          this.collection.add(view.model);
+        }, this),
+        remove: _.bind(function (event, ui) {
+          var view = ui.item.data('view');
+          this.itemViews.remove(view);
+          this.collection.remove(view.model);
+        }, this)
+      });
+      return this;
+    },
+    addItem: function addItem(item) {
+      if (!this.itemViews.findByModel(item)) {
+        CollectionView.prototype.addItem.call(this, item);
+      }
+    },
+    removeItem: function removeItem(item) {
+      if (this.itemViews.findByModel(item)) {
+        CollectionView.prototype.removeItem.call(this, item);
+      }
+    },
+    updateOrder: function updateOrder() {
+      this.reindexPositions();
+      this.collection.sort();
+      this.collection.saveOrder();
+    },
+    reindexPositions: function reindexPositions() {
+      this.$el.children().each(function (index) {
+        $(this).data('view').model.set('position', index);
+      });
+    }
+  });
+
+  var ConfigurationEditorTabView = Marionette.View.extend({
+    className: 'configuration_editor_tab',
+    initialize: function initialize() {
+      this.inputs = new ChildViewContainer();
+      this.groups = this.options.groups || ConfigurationEditorTabView.groups;
+    },
+    input: function input(propertyName, view, options) {
+      this.view(view, _.extend({
+        placeholderModel: this.options.placeholderModel,
+        propertyName: propertyName,
+        attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
+      }, options || {}));
+    },
+    view: function view(_view, options) {
+      this.inputs.add(new _view(_.extend({
+        model: this.model,
+        parentTab: this.options.tab
+      }, options || {})));
+    },
+    group: function group(name, options) {
+      this.groups.apply(name, this, options);
+    },
+    render: function render() {
+      this.inputs.each(function (input) {
+        this.$el.append(input.render().el);
+      }, this);
+      return this;
+    },
+    onClose: function onClose() {
+      if (this.inputs) {
+        this.inputs.call('close');
+      }
+    }
+  });
+
+  ConfigurationEditorTabView.Groups = function () {
+    var groups = {};
+
+    this.define = function (name, fn) {
+      if (typeof fn !== 'function') {
+        throw 'Group has to be function.';
+      }
+
+      groups[name] = fn;
+    };
+
+    this.apply = function (name, context, options) {
+      if (!(name in groups)) {
+        throw 'Undefined group named "' + name + '".';
+      }
+
+      groups[name].call(context, options || {});
+    };
+  };
+
+  ConfigurationEditorTabView.groups = new ConfigurationEditorTabView.Groups();
+
+  function template(data) {
+  var __p = '';
+  __p += '<div class="tabs_view-scroller">\n  <ul class="tabs_view-headers"></ul>\n</div>\n<div class="tabs_view-container"></div>\n';
+  return __p
+  }
+
+  /*global pageflow*/
+  /**
+   * Switch between different views using tabs.
+   *
+   * @param {Object} [options]
+   *
+   * @param {string} [options.defaultTab]
+   *   Name of the tab to enable by default.
+   *
+   * @param {string[]} [options.translationKeyPrefixes]
+   *   List of prefixes to append tab name to. First exisiting translation is used as label.
+   *
+   * @param {string} [options.fallbackTranslationKeyPrefix]
+   *   Translation key prefix to use if non of the `translationKeyPrefixes` result in an
+   *   existing translation for a tab name.
+   *
+   * @param {string} [options.i18n]
+   *   Legacy alias for `fallbackTranslationKeyPrefix`.
+   *
+   * @class
+   */
+
+  var TabsView = Marionette.Layout.extend(
+  /* @lends TabView.prototype */
+  {
+    template: template,
+    className: 'tabs_view',
+    ui: {
+      headers: '.tabs_view-headers',
+      scroller: '.tabs_view-scroller'
+    },
+    regions: {
+      container: '.tabs_view-container'
+    },
+    events: {
+      'click .tabs_view-headers > li': function clickTabs_viewHeadersLi(event) {
+        this.changeTab($(event.target).data('tab-name'));
+      }
+    },
+    initialize: function initialize() {
+      this.tabFactoryFns = {};
+      this.tabNames = [];
+      this.currentTabName = null;
+
+      this._refreshScrollerOnSideBarResize();
+    },
+    tab: function tab(name, factoryFn) {
+      this.tabFactoryFns[name] = factoryFn;
+      this.tabNames.push(name);
+    },
+    onRender: function onRender() {
+      _.each(this.tabNames, function (name) {
+        var label = findTranslation(this._labelTranslationKeys(name));
+        this.ui.headers.append($('<li />').attr('data-tab-name', name).text(label));
+      }, this);
+
+      this.scroller = new IScroll(this.ui.scroller[0], {
+        scrollX: true,
+        scrollY: false,
+        bounce: false,
+        mouseWheel: true,
+        preventDefault: false
+      });
+      this.changeTab(this.defaultTab());
+    },
+    changeTab: function changeTab(name) {
+      this.container.show(this.tabFactoryFns[name]());
+
+      this._updateActiveHeader(name);
+
+      this.currentTabName = name;
+    },
+    defaultTab: function defaultTab() {
+      if (_.include(this.tabNames, this.options.defaultTab)) {
+        return this.options.defaultTab;
+      } else {
+        return _.first(this.tabNames);
+      }
+    },
+
+    /**
+     * Rerender current tab.
+     */
+    refresh: function refresh() {
+      this.changeTab(this.currentTabName);
+    },
+
+    /**
+     * Adjust tabs scroller to changed width of view.
+     */
+    refreshScroller: function refreshScroller() {
+      this.scroller.refresh();
+    },
+    toggleSpinnerOnTab: function toggleSpinnerOnTab(name, visible) {
+      this.$('[data-tab-name=' + name + ']').toggleClass('spinner', visible);
+    },
+    _labelTranslationKeys: function _labelTranslationKeys(name) {
+      var result = _.map(this.options.translationKeyPrefixes, function (prefix) {
+        return prefix + '.' + name;
+      });
+
+      if (this.options.i18n) {
+        result.push(this.options.i18n + '.' + name);
+      }
+
+      if (this.options.fallbackTranslationKeyPrefix) {
+        result.push(this.options.fallbackTranslationKeyPrefix + '.' + name);
+      }
+
+      return result;
+    },
+    _updateActiveHeader: function _updateActiveHeader(activeTabName) {
+      var scroller = this.scroller;
+      this.ui.headers.children().each(function () {
+        if ($(this).data('tab-name') === activeTabName) {
+          scroller.scrollToElement(this, 200, true);
+          $(this).addClass('active');
+        } else {
+          $(this).removeClass('active');
+        }
+      });
+    },
+    _refreshScrollerOnSideBarResize: function _refreshScrollerOnSideBarResize() {
+      if (pageflow.app) {
+        this.listenTo(pageflow.app, 'resize', function () {
+          this.scroller.refresh();
+        });
+      }
+    }
+  });
+
+  /**
+   * Render a inputs on multiple tabs.
+   *
+   * @param {Object} [options]
+   *
+   * @param {string} [options.model]
+   *   Backbone model to use for input views.
+   *
+   * @param {string} [options.placeholderModel]
+   *   Backbone model to read placeholder values from.
+
+   * @param {string} [options.tab]
+   *   Name of the tab to enable by default.
+   *
+   * @param {string[]} [options.attributeTranslationKeyPrefixes]
+   *   List of prefixes to use in input views for attribute based transltions.
+   *
+   * @param {string[]} [options.tabTranslationKeyPrefixes]
+   *   List of prefixes to append tab name to. First exisiting translation is used as label.
+   *
+   * @param {string} [options.tabTranslationKeyPrefix]
+   *   Prefixes to append tab name to.
+   *
+   * @class
+   */
+
+  var ConfigurationEditorView = Marionette.View.extend({
+    className: 'configuration_editor',
+    initialize: function initialize() {
+      this.tabsView = new TabsView({
+        translationKeyPrefixes: this.options.tabTranslationKeyPrefixes || [this.options.tabTranslationKeyPrefix],
+        fallbackTranslationKeyPrefix: 'pageflow.ui.configuration_editor.tabs',
+        defaultTab: this.options.tab
+      });
+      this.configure();
+    },
+    configure: function configure() {},
+    tab: function tab(name, callbackOrOptions, callback) {
+      callback = callback || callbackOrOptions;
+      var options = callback ? callbackOrOptions : {};
+      this.tabsView.tab(name, _.bind(function () {
+        var tabView = new ConfigurationEditorTabView({
+          model: options.model || this.model,
+          placeholderModel: this.options.placeholderModel,
+          tab: name,
+          attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
+        });
+        callback.call(tabView);
+        return tabView;
+      }, this));
+    },
+
+    /**
+     * Rerender current tab.
+     */
+    refresh: function refresh() {
+      this.tabsView.refresh();
+    },
+
+    /**
+     * Adjust tabs scroller to changed width of view.
+     */
+    refreshScroller: function refreshScroller() {
+      this.tabsView.refreshScroller();
+    },
+    render: function render() {
+      this.$el.append(this.subview(this.tabsView).el);
+      return this;
+    }
+  });
+
+  _.extend(ConfigurationEditorView, {
+    repository: {},
+    register: function register(pageTypeName, prototype) {
+      this.repository[pageTypeName] = ConfigurationEditorView.extend(prototype);
+    }
+  });
+
+  function template$1(data) {
+  var __p = '';
+  __p += '';
+  return __p
+  }
+
+  /**
+   * Base class for table cell views.
+   *
+   * Inside sub classes the name of the column options are available as
+   * `this.options.column`. Override the `update` method to populate the
+   * element.
+   *
+   * @param {Object} [options]
+   *
+   * @param {string} [options.className]
+   *   Class attribute to apply to the cell element.
+   *
+   * @since 12.0
+   */
+
+  var TableCellView = Marionette.ItemView.extend({
+    tagName: 'td',
+    template: template$1,
+    className: function className() {
+      return this.options.className;
+    },
+    onRender: function onRender() {
+      this.listenTo(this.getModel(), 'change:' + this.options.column.name, this.update);
+      this.setupContentBinding();
+      this.update();
+    },
+
+    /**
+     * Override in concrete cell view.
+     */
+    update: function update() {
+      throw 'Not implemented';
+    },
+
+    /**
+     * Returns the column attribute's value in the row model.
+     */
+    attributeValue: function attributeValue() {
+      if (typeof this.options.column.value == 'function') {
+        return this.options.column.value(this.model);
+      } else {
+        return this.getModel().get(this.options.column.name);
+      }
+    },
+    getModel: function getModel() {
+      if (this.options.column.configurationAttribute) {
+        return this.model.configuration;
+      } else {
+        return this.model;
+      }
+    },
+
+    /**
+     * Look up attribute specific translations based on
+     * `attributeTranslationKeyPrefixes` of the the parent `TableView`.
+     *
+     * @param {Object} [options]
+     *   Interpolations to apply to the translation.
+     *
+     * @param {string} [options.defaultValue]
+     *   Fallback value if no translation is found.
+     *
+     * @protected
+     *
+     * @example
+     *
+     * this.attribute.attributeTranslation("cell_title");
+     * // Looks for keys of the form:
+     * // <table_view_translation_key_prefix>.<column_attribute>.cell_title
+     */
+    attributeTranslation: function attributeTranslation(keyName, options) {
+      return findTranslation(this.attributeTranslationKeys(keyName), options);
+    },
+    attributeTranslationKeys: function attributeTranslationKeys(keyName) {
+      return _(this.options.attributeTranslationKeyPrefixes || []).map(function (prefix) {
+        return prefix + '.' + this.options.column.name + '.' + keyName;
+      }, this);
+    },
+
+    /**
+     * Set up content binding to update this view upon change of
+     * specified attribute on this.getModel().
+     *
+     * @param {string} [options.column.contentBinding]
+     *   Name of the attribute to which this cell's update is bound
+     *
+     * @protected
+     */
+    setupContentBinding: function setupContentBinding() {
+      if (this.options.column.contentBinding) {
+        this.listenTo(this.getModel(), 'change:' + this.options.column.contentBinding, this.update);
+        this.update();
+      }
+    }
+  });
+
+  var TableHeaderCellView = TableCellView.extend({
+    tagName: 'th',
+    render: function render() {
+      this.$el.text(this.options.column.headerText || this.attributeTranslation('column_header'));
+      this.$el.data('columnName', this.options.column.name);
+      return this;
+    }
+  });
+
+  var TableRowView = Marionette.View.extend({
+    tagName: 'tr',
+    events: {
+      'click': function click() {
+        if (this.options.selection) {
+          this.options.selection.set(this.selectionAttribute(), this.model);
+        }
+      }
+    },
+    initialize: function initialize() {
+      if (this.options.selection) {
+        this.listenTo(this.options.selection, 'change', this.updateClassName);
+      }
+    },
+    render: function render() {
+      _(this.options.columns).each(function (column) {
+        this.appendSubview(new column.cellView(_.extend({
+          model: this.model,
+          column: column,
+          attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
+        }, column.cellViewOptions || {})));
+      }, this);
+
+      this.updateClassName();
+      return this;
+    },
+    updateClassName: function updateClassName() {
+      this.$el.toggleClass('is_selected', this.isSelected());
+    },
+    isSelected: function isSelected() {
+      return this.options.selection && this.options.selection.get(this.selectionAttribute()) === this.model;
+    },
+    selectionAttribute: function selectionAttribute() {
+      return this.options.selectionAttribute || 'current';
+    }
+  });
+
+  function template$2(data) {
+  var __p = '';
+  __p += '<table>\n  <thead>\n    <tr></tr>\n  </thead>\n  <tbody>\n  </tbody>\n</table>\n';
+  return __p
+  }
+
+  function blankSlateTemplate(data) {
+  var __t, __p = '';
+  __p += '<td colspan="' +
+  ((__t = ( data.colSpan )) == null ? '' : __t) +
+  '">\n  ' +
+  ((__t = ( data.blankSlateText )) == null ? '' : __t) +
+  '\n</td>\n';
+  return __p
+  }
+
+  var TableView = Marionette.ItemView.extend({
+    tagName: 'table',
+    className: 'table_view',
+    template: template$2,
+    ui: {
+      headRow: 'thead tr',
+      body: 'tbody'
+    },
+    onRender: function onRender() {
+      var view = this;
+
+      _(this.options.columns).each(function (column) {
+        this.ui.headRow.append(this.subview(new TableHeaderCellView({
+          column: column,
+          attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
+        })).el);
+      }, this);
+
+      this.subview(new CollectionView({
+        el: this.ui.body,
+        collection: this.collection,
+        itemViewConstructor: TableRowView,
+        itemViewOptions: {
+          columns: this.options.columns,
+          selection: this.options.selection,
+          selectionAttribute: this.options.selectionAttribute,
+          attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
+        },
+        blankSlateViewConstructor: Marionette.ItemView.extend({
+          tagName: 'tr',
+          className: 'blank_slate',
+          template: blankSlateTemplate,
+          serializeData: function serializeData() {
+            return {
+              blankSlateText: view.options.blankSlateText,
+              colSpan: view.options.columns.length
+            };
+          }
+        })
+      }));
+    }
+  });
+
+  function template$3(data) {
+  var __p = '';
+  __p += '<span class="label">\n</span>\n';
+  return __p
+  }
+
+  var TooltipView = Marionette.ItemView.extend({
+    template: template$3,
+    className: 'tooltip',
+    ui: {
+      label: '.label'
+    },
+    hide: function hide() {
+      this.visible = false;
+      clearTimeout(this.timeout);
+      this.$el.removeClass('visible');
+    },
+    show: function show(text, position, options) {
+      options = options || {};
+      this.visible = true;
+      clearTimeout(this.timeout);
+      this.timeout = setTimeout(_.bind(function () {
+        var offsetTop;
+        var offsetLeft;
+        this.ui.label.text(text);
+        this.$el.toggleClass('align_bottom_right', options.align === 'bottom right');
+        this.$el.toggleClass('align_bottom_left', options.align === 'bottom left');
+        this.$el.toggleClass('align_top_center', options.align === 'top center');
+
+        if (options.align === 'bottom right' || options.align === 'bottom left') {
+          offsetTop = 10;
+          offsetLeft = 0;
+        } else if (options.align === 'top center') {
+          offsetTop = -10;
+          offsetLeft = 0;
+        } else {
+          offsetTop = -17;
+          offsetLeft = 10;
+        }
+
+        this.$el.css({
+          top: position.top + offsetTop + 'px',
+          left: position.left + offsetLeft + 'px'
+        });
+        this.$el.addClass('visible');
+      }, this), 200);
+    }
+  });
+
+  /**
+   * Mixin for input views handling common concerns like labels,
+   * inline help, visiblity and disabling.
+   *
+   * ## Label and Inline Help Translations
+   *
+   * By default `#labelText` and `#inlineHelpText` are defined through
+   * translations. If no `attributeTranslationKeyPrefixes` are given,
+   * translation keys for labels and inline help are constructed from
+   * the `i18nKey` of the model and the given `propertyName`
+   * option. Suppose the model's `i18nKey` is "page" and the
+   * `propertyName` option is "title". Then the key
+   *
+   *     activerecord.attributes.page.title
+   *
+   * will be used for the label. And the key
+   *
+   *     pageflow.ui.inline_help.page.title_html
+   *     pageflow.ui.inline_help.page.title
+   *
+   * will be used for the inline help.
+   *
+   * ### Attribute Translation Key Prefixes
+   *
+   * The `attributeTranslationKeyPrefixes` option can be used to supply
+   * an array of scopes in which label and inline help translations
+   * shall be looked up based on the `propertyName` option.
+   *
+   * Suppose the array `['some.attributes', 'fallback.attributes']` is
+   * given as `attributeTranslationKeyPrefixes` option. Then, in the
+   * example above, the first existing translation key is used as label:
+   *
+   *     some.attributes.title.label
+   *     fallback.attributes.title.label
+   *     activerecord.attributes.post.title
+   *
+   * Accordingly, for the inline help:
+   *
+   *     some.attributes.title.inline_help_html
+   *     some.attributes.title.inline_help
+   *     fallback.attributes.title.inline_help_html
+   *     fallback.attributes.title.inline_help
+   *     pageflow.ui.inline_help.post.title_html
+   *     pageflow.ui.inline_help.post.title
+   *
+   * This setup allows to keep all translation keys for an attribute
+   * to share a common prefix:
+   *
+   *     some:
+   *       attributes:
+   *         title:
+   *           label: "Label"
+   *           inline_help: "..."
+   *           inline_help_disabled: "..."
+   *
+   * ### Inline Help for Disabled Inputs
+   *
+   * For each inline help translation key, a separate key with an
+   * `"_disabled"` suffix can be supplied, which provides a help string
+   * that shall be displayed when the input is disabled. More specific
+   * attribute translation key prefixes take precedence over suffixed
+   * keys:
+   *
+   *     some.attributes.title.inline_help_html
+   *     some.attributes.title.inline_help
+   *     some.attributes.title.inline_help_disabled_html
+   *     some.attributes.title.inline_help_disabled
+   *     fallback.attributes.title.inline_help_html
+   *     fallback.attributes.title.inline_help
+   *     fallback.attributes.title.inline_help_disabled_html
+   *     fallback.attributes.title.inline_help_disabled
+   *     pageflow.ui.inline_help.post.title_html
+   *     pageflow.ui.inline_help.post.title
+   *     pageflow.ui.inline_help.post.title_disabled_html
+   *     pageflow.ui.inline_help.post.title_disabled
+   *
+   * @param {string} options
+   *   Common constructor options for all views that include this mixin.
+   *
+   * @param {string} options.propertyName
+   *   Name of the attribute on the model to display and edit.
+   *
+   * @param {string} [options.label]
+   *   Label text for the input.
+   *
+   * @param {string[]} [options.attributeTranslationKeyPrefixes]
+   *   An array of prefixes to lookup translations for labels and
+   *   inline help texts based on attribute names.
+   *
+   * @param {string} [options.additionalInlineHelpText]
+   *   A text that will be appended to the translation based inline
+   *   text.
+   *
+   * @param {string|string[]} [options.disabledBinding]
+   *   Name of an attribute to control whether the input is disabled. If
+   *   the `disabled` and `disabledBinding` options are not set,
+   *   input will be disabled whenever this attribute has a truthy value.
+   *   When multiple attribute names are passed, the function passed to
+   *   the `disabled` option will receive an array of values in the same
+   *   order.
+   *
+   * @param {function|boolean} [options.disabled]
+   *   Render input as disabled. A Function taking the value of the
+   *  `disabledBinding` attribute as parameter. Input will be disabled
+   *  only if function returns `true`.
+   *
+   * @param {any} [options.disabledBindingValue]
+   *   Input will be disabled whenever the value of the `disabledBinding`
+   *   attribute equals the value of this option.
+   *
+   * @param {string|string[]} [options.visibleBinding]
+   *   Name of an attribute to control whether the input is visible. If
+   *   the `visible` and `visibleBindingValue` options are not set,
+   *   input will be visible whenever this attribute has a truthy value.
+   *   When multiple attribute names are passed, the function passed to
+   *   the `visible` option will receive an array of values in the same
+   *   order.
+   *
+   * @param {function|boolean} [options.visible]
+   *   A Function taking the value of the `visibleBinding` attribute as
+   *   parameter. Input will be visible only if function returns `true`.
+   *
+   * @param {any} [options.visibleBindingValue]
+   *   Input will be visible whenever the value of the `visibleBinding`
+   *   attribute equals the value of this option.
+   *
+   * @mixin
+   */
+
+  var inputView = {
+    ui: {
+      label: 'label',
+      labelText: 'label .name',
+      inlineHelp: 'label .inline_help'
+    },
+
+    /**
+     * Returns an array of translation keys based on the
+     * `attributeTranslationKeyPrefixes` option and the given keyName.
+     *
+     * Combined with {@link #i18nutils
+     * i18nUtils.findTranslation}, this can be used inside input views
+     * to obtain additional translations with the same logic as for
+     * labels and inline help texts.
+     *
+     * findTranslation(this.attributeTranslationKeys('default_value'));
+     *
+     * @param {string} keyName
+     * Suffix to append to prefixes.
+     *
+     * @param {string} [options.fallbackPrefix]
+     *   Optional additional prefix to form a model based translation
+     *   key of the form `prefix.modelI18nKey.propertyName.keyName
+     *
+     * @return {string[]}
+     * @since 0.9
+     * @member
+     */
+    attributeTranslationKeys: function attributeTranslationKeys$1(keyName, options) {
+      return attributeTranslationKeys(this.options.propertyName, keyName, _.extend({
+        prefixes: this.options.attributeTranslationKeyPrefixes,
+        fallbackModelI18nKey: this.model.i18nKey
+      }, options || {}));
+    },
+    onRender: function onRender() {
+      this.$el.addClass('input');
+      this.$el.addClass(this.model.modelName + '_' + this.options.propertyName);
+      this.$el.data('inputPropertyName', this.options.propertyName);
+      this.$el.data('labelText', this.labelText());
+      this.$el.data('inlineHelpText', this.inlineHelpText());
+      this.ui.labelText.text(this.labelText());
+      this.updateInlineHelp();
+      this.setLabelFor();
+      this.setupAttributeBinding('disabled', this.updateDisabled);
+      this.setupAttributeBinding('visible', this.updateVisible);
+    },
+
+    /**
+     * The label to display in the form.
+     * @return {string}
+     */
+    labelText: function labelText() {
+      return this.options.label || this.localizedAttributeName();
+    },
+    localizedAttributeName: function localizedAttributeName() {
+      return findTranslation(this.attributeTranslationKeys('label', {
+        fallbackPrefix: 'activerecord.attributes'
+      }));
+    },
+    updateInlineHelp: function updateInlineHelp() {
+      this.ui.inlineHelp.html(this.inlineHelpText());
+
+      if (!this.inlineHelpText()) {
+        this.ui.inlineHelp.hide();
+      }
+    },
+
+    /**
+     * The inline help text for the form field.
+     * @return {string}
+     */
+    inlineHelpText: function inlineHelpText() {
+      var keys = this.attributeTranslationKeys('inline_help', {
+        fallbackPrefix: 'pageflow.ui.inline_help'
+      });
+
+      if (this.isDisabled()) {
+        keys = translationKeysWithSuffix(keys, 'disabled');
+      }
+
+      return _.compact([findTranslation(keys, {
+        defaultValue: '',
+        html: true
+      }), this.options.additionalInlineHelpText]).join(' ');
+    },
+    setLabelFor: function setLabelFor() {
+      if (this.ui.input && this.ui.label.length === 1 && !this.ui.input.attr('id')) {
+        var id = 'input_' + this.model.modelName + '_' + this.options.propertyName;
+        this.ui.input.attr('id', id);
+        this.ui.label.attr('for', id);
+      }
+    },
+    isDisabled: function isDisabled() {
+      return this.getAttributeBoundOption('disabled');
+    },
+    updateDisabled: function updateDisabled() {
+      this.$el.toggleClass('input-disabled', !!this.isDisabled());
+      this.updateInlineHelp();
+
+      if (this.ui.input) {
+        this.updateDisabledAttribute(this.ui.input);
+      }
+    },
+    updateDisabledAttribute: function updateDisabledAttribute(element) {
+      if (this.isDisabled()) {
+        element.attr('disabled', true);
+      } else {
+        element.removeAttr('disabled');
+      }
+    },
+    updateVisible: function updateVisible() {
+      this.$el.toggleClass('input-hidden_via_binding', this.getAttributeBoundOption('visible') === false);
+    },
+    setupAttributeBinding: function setupAttributeBinding(optionName, updateMethod) {
+      var _this = this;
+
+      var binding = this.options["".concat(optionName, "Binding")];
+      var view = this;
+
+      if (binding) {
+        _.flatten([binding]).forEach(function (attribute) {
+          _this.listenTo(_this.model, 'change:' + attribute, update);
+        });
+      }
+
+      update();
+
+      function update() {
+        updateMethod.call(view, view.getAttributeBoundOption(optionName));
+      }
+    },
+    getAttributeBoundOption: function getAttributeBoundOption(optionName) {
+      var _this2 = this;
+
+      var binding = this.options["".concat(optionName, "Binding")];
+      var bindingValueOptionName = "".concat(optionName, "BindingValue");
+      var value = Array.isArray(binding) ? binding.map(function (attribute) {
+        return _this2.model.get(attribute);
+      }) : this.model.get(binding);
+
+      if (bindingValueOptionName in this.options) {
+        return value === this.options[bindingValueOptionName];
+      } else if (typeof this.options[optionName] === 'function') {
+        return !!this.options[optionName](value);
+      } else if (optionName in this.options) {
+        return !!this.options[optionName];
+      } else if (binding) {
+        return !!value;
+      }
+    }
+  };
+
+  function template$4(data) {
+  var __p = '';
+  __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<div class="check_boxes_container" />\n';
+  return __p
+  }
+
+  /**
+   * Input view for attributes storing configuration hashes with boolean values.
+   * See {@link inputView} for further options.
+   *
+   * @param {Object} [options]
+   *
+   * @class
+   */
+
+  var CheckBoxGroupInputView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    template: template$4,
+    className: 'check_box_group_input',
+    events: {
+      'change': 'save'
+    },
+    ui: {
+      label: 'label',
+      container: '.check_boxes_container'
+    },
+    initialize: function initialize() {
+      if (!this.options.texts) {
+        if (!this.options.translationKeys) {
+          var translationKeyPrefix = this.options.translationKeyPrefix || findKeyWithTranslation(this.attributeTranslationKeys('values', {
+            fallbackPrefix: 'activerecord.values'
+          }));
+          this.options.translationKeys = _.map(this.options.values, function (value) {
+            return translationKeyPrefix + '.' + value;
+          }, this);
+        }
+
+        this.options.texts = _.map(this.options.translationKeys, function (key) {
+          return I18n$1.t(key);
+        });
+      }
+    },
+    onRender: function onRender() {
+      this.ui.label.attr('for', this.cid);
+      this.appendOptions();
+      this.load();
+      this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+    },
+    appendOptions: function appendOptions() {
+      _.each(this.options.values, function (value, index) {
+        var option = '<div class="check_box">' + '<label><input type="checkbox" name="' + value + '" />' + this.options.texts[index] + '</label></div>';
+        this.ui.container.append($(option));
+      }, this);
+    },
+    save: function save() {
+      var configured = {};
+
+      _.each(this.ui.container.find('input'), function (input) {
+        configured[$(input).attr('name')] = $(input).prop('checked');
+      });
+
+      this.model.set(this.options.propertyName, configured);
+    },
+    load: function load() {
+      if (!this.isClosed) {
+        _.each(this.options.values, function (value) {
+          this.ui.container.find('input[name="' + value + '"]').prop('checked', this.model.get(this.options.propertyName)[value]);
+        }, this);
+      }
+    }
+  });
+
+  function template$5(data) {
+  var __t, __p = '';
+  __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<a class="original" href="#" download target="_blank">\n  ' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.url_display.link_text') )) == null ? '' : __t) +
+  '\n</a>\n';
+  return __p
+  }
+
+  /**
+   * Display view for a link to a URL, to be used like an input view.
+   * See {@link inputView} for further options
+   *
+   * @param {Object} [options]
+   *
+   * @param {string} [options.propertyName]
+   *   Target URL for link
+   *
+   * @class
+   */
+
+  var UrlDisplayView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    template: template$5,
+    ui: {
+      link: 'a'
+    },
+    modelEvents: {
+      'change': 'update'
+    },
+    events: {
+      'click a': function clickA(event) {
+        // Ensure default is not prevented by parent event listener.
+        event.stopPropagation();
+      }
+    },
+    onRender: function onRender() {
+      this.update();
+    },
+    update: function update() {
+      var url = this.model.get('original_url');
+      this.$el.toggle(this.model.isUploaded() && !_.isEmpty(url));
+      this.ui.link.attr('href', url);
+    }
+  });
+
+  /**
+   * Text based input view that can display a placeholder.
+   *
+   * @param {Object} [options]
+   *
+   * @param {string|function} [options.placeholder]
+   *   Display a placeholder string if the input is blank. Either a
+   *   string or a function taking the model as a first parameter and
+   *   returning a string.
+   *
+   * @param {string} [options.placeholderBinding]
+   *   Name of an attribute. Recompute the placeholder function whenever
+   *   this attribute changes.
+   *
+   * @param {boolean} [options.hidePlaceholderIfDisabled]
+   *   Do not display the placeholder if the input is disabled.
+   *
+   * @param {Backbone.Model} [options.placeholderModel]
+   *   Obtain placeholder by looking up the configured `propertyName`
+   *   inside a given model.
+   */
+  var inputWithPlaceholderText = {
+    onRender: function onRender() {
+      this.updatePlaceholder();
+
+      if (this.options.placeholderBinding) {
+        this.listenTo(this.model, 'change:' + this.options.placeholderBinding, this.updatePlaceholder);
+      }
+    },
+    updateDisabled: function updateDisabled() {
+      this.updatePlaceholder();
+    },
+    updatePlaceholder: function updatePlaceholder() {
+      this.ui.input.attr('placeholder', this.placeholderText());
+    },
+    placeholderText: function placeholderText() {
+      if (!this.isDisabled() || !this.options.hidePlaceholderIfDisabled) {
+        if (this.options.placeholder) {
+          if (typeof this.options.placeholder == 'function') {
+            return this.options.placeholder(this.model);
+          } else {
+            return this.options.placeholder;
+          }
+        } else {
+          return this.placeholderModelValue();
+        }
+      }
+
+      return '';
+    },
+    placeholderModelValue: function placeholderModelValue() {
+      return this.options.placeholderModel && this.options.placeholderModel.get(this.options.propertyName);
+    }
+  };
+
+  var viewWithValidationErrorMessages = {
+    onRender: function onRender() {
+      this.listenTo(this.model, 'invalid sync', this.updateValidationErrorMessages);
+      this.updateValidationErrorMessages();
+    },
+    updateValidationErrorMessages: function updateValidationErrorMessages() {
+      var _this = this;
+
+      var errors = this.model.validationErrors && this.model.validationErrors[this.options.propertyName] || [];
+
+      if (errors.length) {
+        this.validationErrorList = this.validationErrorList || $('<ul class="validation_error_messages" />').appendTo(this.el);
+        this.validationErrorList.html('');
+        errors.forEach(function (error) {
+          return _this.validationErrorList.append("<li>".concat(error, "</li>"));
+        });
+        this.$el.addClass('invalid');
+      } else if (this.validationErrorList) {
+        this.validationErrorList.remove();
+        this.validationErrorList = null;
+        this.$el.removeClass('invalid');
+      }
+    }
+  };
+
+  function template$6(data) {
+  var __p = '';
+  __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" dir="auto" />\n';
+  return __p
+  }
+
+  /**
+   * Input view for a single line of text.
+   *
+   * See {@link inputWithPlaceholderText} for placeholder related
+   * further options.  See {@link inputView} for further options.
+   *
+   * @param {Object} [options]
+   *
+   * @param {boolean} [options.required=false]
+   * Display an error if the input is blank.
+   *
+   * @param {number} [options.maxLength=255]
+   *   Maximum length of characters for this input.  To support legacy
+   *   data which consists of more characters than the specified
+   *   maxLength, the option will only take effect for data which is
+   *   shorter than the specified maxLength.
+   *
+   * @class
+   */
+
+  var TextInputView = Marionette.ItemView.extend({
+    mixins: [inputView, inputWithPlaceholderText, viewWithValidationErrorMessages],
+    template: template$6,
+    ui: {
+      input: 'input'
+    },
+    events: {
+      'change': 'onChange'
+    },
+    onRender: function onRender() {
+      this.load();
+      this.validate();
+      this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+    },
+    onChange: function onChange() {
+      if (this.validate()) {
+        this.save();
+      }
+    },
+    onClose: function onClose() {
+      if (this.validate()) {
+        this.save();
+      }
+    },
+    save: function save() {
+      this.model.set(this.options.propertyName, this.ui.input.val());
+    },
+    load: function load() {
+      var input = this.ui.input;
+      input.val(this.model.get(this.options.propertyName)); // set mysql varchar length as default for non-legacy data
+
+      this.options.maxLength = this.options.maxLength || 255; // do not validate legacy data which length exceeds the specified maximum
+      // for new and maxLength-conforming data: add validation
+
+      this.validateMaxLength = input.val().length <= this.options.maxLength;
+    },
+    validate: function validate() {
+      var input = this.ui.input;
+
+      if (this.options.required && !input.val()) {
+        this.displayValidationError(I18n$1.t('pageflow.ui.views.inputs.text_input_view.required_field'));
+        return false;
+      }
+
+      if (this.validateMaxLength && input.val().length > this.options.maxLength) {
+        this.displayValidationError(I18n$1.t('pageflow.ui.views.inputs.text_input_view.max_characters_exceeded', {
+          max_length: this.options.maxLength
+        }));
+        return false;
+      } else {
+        this.resetValidationError();
+        return true;
+      }
+    },
+    displayValidationError: function displayValidationError(message) {
+      this.$el.addClass('invalid');
+      this.ui.input.attr('title', message);
+    },
+    resetValidationError: function resetValidationError(message) {
+      this.$el.removeClass('invalid');
+      this.ui.input.attr('title', '');
+    }
+  });
+
+  /**
+   * Input view for a color value in hex representation.
+   * See {@link inputView} for further options
+   *
+   * @param {Object} [options]
+   *
+   * @param {string|function} [options.defaultValue]
+   *   Color value to display by default. The corresponding value is not
+   *   stored in the model. Selecting the default value when a different
+   *   value was set before, unsets the attribute in the model.
+   *
+   * @param {string} [options.defaultValueBinding]
+   *   Name of an attribute the default value depends on. If a function
+   *   is used as defaultValue option, it will be passed the value of the
+   *   defaultValueBinding attribute each time it changes. If no
+   *   defaultValue option is set, the value of the defaultValueBinding
+   *   attribute will be used as default value.
+   *
+   * @param {string[]} [options.swatches]
+   *   Preset color values to be displayed inside the picker drop
+   *   down. The default value, if present, is always used as the
+   *   first swatch automatically.
+   *
+   * @class
+   */
+
+  var ColorInputView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    template: template$6,
+    className: 'color_input',
+    ui: {
+      input: 'input'
+    },
+    events: {
+      'mousedown': 'refreshPicker'
+    },
+    onRender: function onRender() {
+      this.ui.input.minicolors({
+        changeDelay: 200,
+        change: _.bind(function (color) {
+          if (color === this.defaultValue()) {
+            this.model.unset(this.options.propertyName);
+          } else {
+            this.model.set(this.options.propertyName, color);
+          }
+        }, this)
+      });
+      this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+
+      if (this.options.defaultValueBinding) {
+        this.listenTo(this.model, 'change:' + this.options.defaultValueBinding, this.updateSettings);
+      }
+
+      this.updateSettings();
+    },
+    updateSettings: function updateSettings() {
+      this.resetSwatchesInStoredSettings();
+      this.ui.input.minicolors('settings', {
+        defaultValue: this.defaultValue(),
+        swatches: this.getSwatches()
+      });
+      this.load();
+    },
+    // see https://github.com/claviska/jquery-minicolors/issues/287
+    resetSwatchesInStoredSettings: function resetSwatchesInStoredSettings() {
+      var settings = this.ui.input.data('minicolors-settings');
+
+      if (settings) {
+        delete settings.swatches;
+        this.ui.input.data('minicolors-settings', settings);
+      }
+    },
+    load: function load() {
+      this.ui.input.minicolors('value', this.model.get(this.options.propertyName) || this.defaultValue());
+      this.$el.toggleClass('is_default', !this.model.has(this.options.propertyName));
+    },
+    refreshPicker: function refreshPicker() {
+      this.ui.input.minicolors('value', {});
+    },
+    getSwatches: function getSwatches() {
+      return _.chain([this.defaultValue(), this.options.swatches]).flatten().uniq().compact().value();
+    },
+    defaultValue: function defaultValue() {
+      var bindingValue;
+
+      if (this.options.defaultValueBinding) {
+        bindingValue = this.model.get(this.options.defaultValueBinding);
+      }
+
+      if (typeof this.options.defaultValue === 'function') {
+        return this.options.defaultValue(bindingValue);
+      } else if ('defaultValue' in this.options) {
+        return this.options.defaultValue;
+      } else {
+        return bindingValue;
+      }
+    }
+  });
+
+  function template$7(data) {
+  var __p = '';
+  __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<select></select>';
+  return __p
+  }
+
+  /**
+   * A drop down with support for grouped items.
+   * See {@link inputView} for further options
+   *
+   * @param {Object} [options]
+   *
+   * @param {string[]} [options.values]
+   *   List of possible values to persist in the attribute.
+   *
+   * @param {string[]} [options.texts]
+   *   List of display texts for drop down items.
+   *
+   * @param {string[]} [options.translationKeys]
+   *   Translation keys to obtain item texts from.
+   *
+   * @param {string[]} [options.translationKeyPrefix]
+   *   Obtain texts for items from translations by appending the item
+   *   value to this prefix separated by a dot. By default the
+   *   [`attributeTranslationKeyPrefixes` option]{@link inputView}
+   *   is used by appending the suffix `.values` to each candidate.
+   *
+   * @param {string[]} [options.groups]
+   *   Array of same length as `values` array, containing the display
+   *   name of a group header each item shall be grouped under.
+   *
+   * @param {Backbone.Model[]} [options.collection]
+   *   Create items for each model in the collection. Use the
+   *   `*Property` options to extract values and texts for each items
+   *   from the models.
+   *
+   * @param {string} [options.valueProperty]
+   *   Attribute to use as item value.
+   *
+   * @param {string} [options.textProperty]
+   *   Attribute to use as item display text.
+   *
+   * @param {string} [options.groupProperty]
+   *   Attribute to use as item group name.
+   *
+   * @param {string} [options.translationKeyProperty]
+   *   Attribute to use as translation key to obtain display text.
+   *
+   * @param {string} [options.groupTranslationKeyProperty]
+   *   Attribute to use as translation key to obtain group name.
+   *
+   * @param {boolean} [options.ensureValueDefined]
+   *   Set the attribute to the first value on view creation.
+   *
+   * @param {boolean} [options.includeBlank]
+   *   Include an item that sets the value of the attribute to a blank
+   *   string.
+   *
+   * @param {string} [options.blankText]
+   *   Display text for the blank item.
+   *
+   * @param {string} [options.blankTranslationKey]
+   *   Translation key to obtain display text for blank item.
+   *
+   * @param {string} [options.placeholderValue]
+   *   Include an item that sets the value of the attribute to a blank
+   *   string and indicate that the attribute is set to a default
+   *   value. Include the display name of the given value, in the
+   *   text. This option can be used if a fallback to the
+   *   `placeholderValue` occurs whenever the attribute is blank.
+   *
+   * @param {Backbone.Model} [options.placeholderModel]
+   *   Behaves like `placeholderValue`, but obtains the value by looking
+   *   up the `propertyName` attribute inside the given model. This
+   *   option can be used if a fallback to the corresponding attribute
+   *   value of the `placeholderModel` occurs whenever the attribute is
+   *   blank.
+   *
+   * @param {function} [options.optionDisabled]
+   *   Receives value and has to return boolean indicating whether
+   *   option is disabled.
+   *
+   * @class
+   */
+
+  var SelectInputView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    template: template$7,
+    events: {
+      'change': 'save'
+    },
+    ui: {
+      select: 'select',
+      input: 'select'
+    },
+    initialize: function initialize() {
+      if (this.options.collection) {
+        this.options.values = _.pluck(this.options.collection, this.options.valueProperty);
+
+        if (this.options.textProperty) {
+          this.options.texts = _.pluck(this.options.collection, this.options.textProperty);
+        } else if (this.options.translationKeyProperty) {
+          this.options.translationKeys = _.pluck(this.options.collection, this.options.translationKeyProperty);
+        }
+
+        if (this.options.groupProperty) {
+          this.options.groups = _.pluck(this.options.collection, this.options.groupProperty);
+        } else if (this.options.groupTranslationKeyProperty) {
+          this.options.groupTanslationKeys = _.pluck(this.options.collection, this.options.groupTranslationKeyProperty);
+        }
+      }
+
+      if (!this.options.texts) {
+        if (!this.options.translationKeys) {
+          var translationKeyPrefix = this.options.translationKeyPrefix || findKeyWithTranslation(this.attributeTranslationKeys('values', {
+            fallbackPrefix: 'activerecord.values'
+          }));
+          this.options.translationKeys = _.map(this.options.values, function (value) {
+            return translationKeyPrefix + '.' + value;
+          }, this);
+        }
+
+        this.options.texts = _.map(this.options.translationKeys, function (key) {
+          return I18n$1.t(key);
+        });
+      }
+
+      if (!this.options.groups) {
+        this.options.groups = _.map(this.options.groupTanslationKeys, function (key) {
+          return I18n$1.t(key);
+        });
+      }
+
+      this.optGroups = {};
+    },
+    onRender: function onRender() {
+      this.appendBlank();
+      this.appendPlaceholder();
+      this.appendOptions();
+      this.load();
+      this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+
+      if (this.options.ensureValueDefined && !this.model.has(this.options.propertyName)) {
+        this.save();
+      }
+    },
+    appendBlank: function appendBlank() {
+      if (!this.options.includeBlank) {
+        return;
+      }
+
+      if (this.options.blankTranslationKey) {
+        this.options.blankText = I18n$1.t(this.options.blankTranslationKey);
+      }
+
+      var option = document.createElement('option');
+      option.value = '';
+      option.text = this.options.blankText || I18n$1.t('pageflow.ui.views.inputs.select_input_view.none');
+      this.ui.select.append(option);
+    },
+    appendPlaceholder: function appendPlaceholder() {
+      if (!this.options.placeholderModel && !this.options.placeholderValue) {
+        return;
+      }
+
+      var placeholderValue = this.options.placeholderValue || this.options.placeholderModel.get(this.options.propertyName);
+      var placeholderIndex = this.options.values.indexOf(placeholderValue);
+
+      if (placeholderIndex >= 0) {
+        var option = document.createElement('option');
+        option.value = '';
+        option.text = I18n$1.t('pageflow.ui.views.inputs.select_input_view.placeholder', {
+          text: this.options.texts[placeholderIndex]
+        });
+        this.ui.select.append(option);
+      }
+    },
+    appendOptions: function appendOptions() {
+      _.each(this.options.values, function (value, index) {
+        var option = document.createElement('option');
+        var group = this.options.groups[index];
+        option.value = value;
+        option.text = this.options.texts[index];
+
+        if (this.options.optionDisabled && this.options.optionDisabled(value)) {
+          option.setAttribute('disabled', true);
+        }
+
+        if (group) {
+          option.setAttribute('data-group', group);
+          this.findOrCreateOptGroup(group).append(option);
+        } else {
+          this.ui.select.append(option);
+        }
+      }, this);
+    },
+    findOrCreateOptGroup: function findOrCreateOptGroup(label) {
+      if (!this.optGroups[label]) {
+        this.optGroups[label] = $('<optgroup />', {
+          label: label
+        }).appendTo(this.ui.select);
+      }
+
+      return this.optGroups[label];
+    },
+    save: function save() {
+      this.model.set(this.options.propertyName, this.ui.select.val());
+    },
+    load: function load() {
+      if (!this.isClosed) {
+        var value = this.model.get(this.options.propertyName);
+
+        if (this.model.has(this.options.propertyName) && this.ui.select.find('option[value="' + value + '"]:not([disabled])').length) {
+          this.ui.select.val(value);
+        } else {
+          this.ui.select.val(this.ui.select.find('option:not([disabled]):first').val());
+        }
+      }
+    }
+  });
+
+  var ExtendedSelectInputView = SelectInputView.extend({
+    className: 'extended_select_input',
+    initialize: function initialize() {
+      SelectInputView.prototype.initialize.apply(this, arguments);
+
+      if (this.options.collection) {
+        if (this.options.descriptionProperty) {
+          this.options.descriptions = _.pluck(this.options.collection, this.options.descriptionProperty);
+        } else if (this.options.descriptionTranslationKeyProperty) {
+          this.options.descriptionTanslationKeys = _.pluck(this.options.collection, this.options.descriptionTranslationKeyProperty);
+        }
+      }
+
+      if (!this.options.descriptions) {
+        this.options.descriptions = _.map(this.options.descriptionTanslationKeys, function (key) {
+          return I18n$1.t(key);
+        });
+      }
+    },
+    onRender: function onRender() {
+      var view = this,
+          options = this.options;
+      SelectInputView.prototype.onRender.apply(this, arguments);
+      $.widget("custom.extendedselectmenu", $.ui.selectmenu, {
+        _renderItem: function _renderItem(ul, item) {
+          var widget = this;
+          var li = $('<li>', {
+            "class": item.value
+          });
+          var container = $('<div>', {
+            "class": 'text-container'
+          }).appendTo(li);
+          var index = options.values.indexOf(item.value);
+
+          if (item.disabled) {
+            li.addClass('ui-state-disabled');
+          }
+
+          if (options.pictogramClass) {
+            $('<span>', {
+              "class": options.pictogramClass
+            }).prependTo(li);
+          }
+
+          $('<p>', {
+            text: item.label,
+            "class": 'item-text'
+          }).appendTo(container);
+          $('<p>', {
+            text: options.descriptions[index],
+            "class": 'item-description'
+          }).appendTo(container);
+
+          if (options.helpLinkClicked) {
+            $('<a>', {
+              href: '#',
+              title: I18n$1.t('pageflow.ui.views.extended_select_input_view.display_help')
+            }).on('click', function () {
+              widget.close();
+              options.helpLinkClicked(item.value);
+              return false;
+            }).appendTo(li);
+          }
+
+          return li.appendTo(ul);
+        },
+        _resizeMenu: function _resizeMenu() {
+          this.menuWrap.addClass('extended_select_input_menu');
+          var menuHeight = this.menu.height(),
+              menuOffset = this.button.offset().top + this.button.outerHeight(),
+              bodyHeight = $('body').height();
+
+          if (menuHeight + menuOffset > bodyHeight) {
+            this.menuWrap.outerHeight(bodyHeight - menuOffset - 5).css({
+              'overflow-y': 'scroll'
+            });
+          } else {
+            this.menuWrap.css({
+              height: 'initial',
+              'overflow-y': 'initial'
+            });
+          }
+        }
+      });
+      this.ui.select.extendedselectmenu({
+        select: view.select.bind(view),
+        width: '100%',
+        position: {
+          my: 'right top',
+          at: 'right bottom'
+        }
+      });
+    },
+    select: function select(event, ui) {
+      this.ui.select.val(ui.item.value);
+      this.save();
+    }
+  });
+
+  function template$8(data) {
+  var __t, __p = '';
+  __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n\n<!-- inline style for wysihtml5 to pick up -->\n<textarea style="width: 100%;" dir="auto"></textarea>\n\n<div class="toolbar">\n  <a data-wysihtml5-command="bold" title="' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.bold') )) == null ? '' : __t) +
+  '"></a>\n  <a data-wysihtml5-command="italic" title="' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.italic') )) == null ? '' : __t) +
+  '"></a>\n  <a data-wysihtml5-command="underline" title="' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.underline') )) == null ? '' : __t) +
+  '"></a>\n  <a data-wysihtml5-command="createLink" class="link_button" title="' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.create_link') )) == null ? '' : __t) +
+  '"></a>\n  <a data-wysihtml5-command="insertOrderedList" title="' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.insert_ordered_list') )) == null ? '' : __t) +
+  '"></a>\n  <a data-wysihtml5-command="insertUnorderedList" title="' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.insert_unordered_list') )) == null ? '' : __t) +
+  '"></a>\n\n  <div data-wysihtml5-dialog="createLink" class="dialog link_dialog" style="display: none;">\n    <div class="link_type_select">\n      <label>\n        <input type="radio" name="link_type" class="url_link_radio_button">\n        ' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.link_type.url') )) == null ? '' : __t) +
+  '\n      </label>\n      <label>\n        <input type="radio" name="link_type" class="fragment_link_radio_button">\n        ' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.link_type.page_link') )) == null ? '' : __t) +
+  '\n      </label>\n    </div>\n    <div class="url_link_panel">\n      <label>\n        <span>\n          ' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.target') )) == null ? '' : __t) +
+  '\n        </span>\n      </label>\n      <input type="text" class="display_url">\n      <div class="open_in_new_tab_section">\n        <label>\n          <input type="checkbox" class="open_in_new_tab">\n          ' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.open_in_new_tab') )) == null ? '' : __t) +
+  '\n        </label>\n        <span class="inline_help">\n          ' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.open_in_new_tab_help') )) == null ? '' : __t) +
+  '\n        </span>\n      </div>\n    </div>\n    <div class="fragment_link_panel">\n      <!-- LinkInputView is inserted here -->\n    </div>\n\n    <!-- wysihtml5 does not handle hidden fields correctly -->\n    <div class="internal">\n      <input type="text" data-wysihtml5-dialog-field="href" class="current_url" value="">\n      <input type="text" data-wysihtml5-dialog-field="target" class="current_target" value="_blank">\n    </div>\n\n    <a class="button" data-wysihtml5-dialog-action="save">\n      ' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.save') )) == null ? '' : __t) +
+  '\n    </a>\n    <a class="button" data-wysihtml5-dialog-action="cancel">\n      ' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.cancel') )) == null ? '' : __t) +
+  '\n    </a>\n\n    <a data-wysihtml5-command="removeLink">' +
+  ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.remove_link') )) == null ? '' : __t) +
+  '</a>\n  </div>\n</div>\n';
+  return __p
+  }
+
+  /**
+   * Input view for multi line text with simple formatting options.
+   * See {@link inputWithPlaceholderText} for placeholder related options.
+   * See {@link inputView} for further options.
+   *
+   * @param {Object} [options]
+   *
+   * @param {string} [options.size="normal"]
+   *   Pass `"short"` to reduce the text area height.
+   *
+   * @param {boolean} [options.disableLinks=false]
+   *   Do not allow links inside the text.
+   *
+   * @param {boolean} [options.disableRichtext=false]
+   *   Do not provide text formatting options.
+   *
+   * @param {Backbone.View} [options.fragmentLinkInputView]
+   *   A view to select an id to use in links which only consist
+   *   of a url fragment. Will receive a model with a `linkId`
+   *   attribute.
+   *
+   * @class
+   */
+
+  var TextAreaInputView = Marionette.ItemView.extend({
+    mixins: [inputView, inputWithPlaceholderText],
+    template: template$8,
+    ui: {
+      input: 'textarea',
+      toolbar: '.toolbar',
+      linkButton: '.link_button',
+      linkDialog: '.link_dialog',
+      urlInput: '.current_url',
+      targetInput: '.current_target',
+      linkTypeSelection: '.link_type_select',
+      urlLinkRadioButton: '.url_link_radio_button',
+      fragmentLinkRadioButton: '.fragment_link_radio_button',
+      urlLinkPanel: '.url_link_panel',
+      displayUrlInput: '.display_url',
+      openInNewTabCheckBox: '.open_in_new_tab',
+      fragmentLinkPanel: '.fragment_link_panel'
+    },
+    events: {
+      'change textarea': 'save',
+      'click .url_link_radio_button': 'showUrlLinkPanel',
+      'click .fragment_link_radio_button': 'showFragmentLinkPanel',
+      'change .open_in_new_tab': 'setTargetFromOpenInNewTabCheckBox',
+      'change .display_url': 'setUrlFromDisplayUrl'
+    },
+    onRender: function onRender() {
+      this.ui.input.addClass(this.options.size);
+      this.load();
+      this.updatePlaceholder();
+      this.editor = new wysihtml5.Editor(this.ui.input[0], {
+        toolbar: this.ui.toolbar[0],
+        autoLink: this.options.disableLinks ? 0 : 1,
+        parserRules: {
+          tags: {
+            em: {
+              unwrap: this.options.disableRichtext ? 1 : 0,
+              rename_tag: "i"
+            },
+            strong: {
+              unwrap: this.options.disableRichtext ? 1 : 0,
+              rename_tag: "b"
+            },
+            u: {
+              unwrap: this.options.disableRichtext ? 1 : 0
+            },
+            b: {
+              unwrap: this.options.disableRichtext ? 1 : 0
+            },
+            i: {
+              unwrap: this.options.disableRichtext ? 1 : 0
+            },
+            ol: {
+              unwrap: this.options.enableLists ? 0 : 1
+            },
+            ul: {
+              unwrap: this.options.enableLists ? 0 : 1
+            },
+            li: {
+              unwrap: this.options.enableLists ? 0 : 1
+            },
+            br: {},
+            a: {
+              unwrap: this.options.disableLinks ? 1 : 0,
+              check_attributes: {
+                href: 'href',
+                target: 'any'
+              },
+              set_attributes: {
+                rel: 'nofollow'
+              }
+            }
+          }
+        }
+      });
+
+      if (this.options.disableRichtext) {
+        this.ui.toolbar.find('a[data-wysihtml5-command="bold"]').hide();
+        this.ui.toolbar.find('a[data-wysihtml5-command="italic"]').hide();
+        this.ui.toolbar.find('a[data-wysihtml5-command="underline"]').hide();
+        this.ui.toolbar.find('a[data-wysihtml5-command="insertOrderedList"]').hide();
+        this.ui.toolbar.find('a[data-wysihtml5-command="insertUnorderedList"]').hide();
+      }
+
+      if (!this.options.enableLists) {
+        this.ui.toolbar.find('a[data-wysihtml5-command="insertOrderedList"]').hide();
+        this.ui.toolbar.find('a[data-wysihtml5-command="insertUnorderedList"]').hide();
+      }
+
+      if (this.options.disableLinks) {
+        this.ui.toolbar.find('a[data-wysihtml5-command="createLink"]').hide();
+      } else {
+        this.setupUrlLinkPanel();
+        this.setupFragmentLinkPanel();
+      }
+
+      this.editor.on('change', _.bind(this.save, this));
+      this.editor.on('aftercommand:composer', _.bind(this.save, this));
+    },
+    onClose: function onClose() {
+      this.editor.fire('destroy:composer');
+    },
+    save: function save() {
+      this.model.set(this.options.propertyName, this.editor.getValue());
+    },
+    load: function load() {
+      this.ui.input.val(this.model.get(this.options.propertyName));
+    },
+    setupUrlLinkPanel: function setupUrlLinkPanel() {
+      this.editor.on('show:dialog', _.bind(function () {
+        this.ui.linkDialog.toggleClass('for_existing_link', this.ui.linkButton.hasClass('wysihtml5-command-active'));
+        var currentUrl = this.ui.urlInput.val();
+
+        if (currentUrl.startsWith('#')) {
+          this.ui.displayUrlInput.val('');
+          this.ui.openInNewTabCheckBox.prop('checked', true);
+        } else {
+          this.ui.displayUrlInput.val(currentUrl);
+          this.ui.openInNewTabCheckBox.prop('checked', this.ui.targetInput.val() !== '_self');
+        }
+      }, this));
+    },
+    setupFragmentLinkPanel: function setupFragmentLinkPanel() {
+      if (this.options.fragmentLinkInputView) {
+        this.fragmentLinkModel = new Backbone.Model();
+        this.listenTo(this.fragmentLinkModel, 'change', function (model, options) {
+          if (!options.skipCurrentUrlUpdate) {
+            this.setInputsFromFragmentLinkModel();
+          }
+        });
+        this.editor.on('show:dialog', _.bind(function () {
+          var currentUrl = this.ui.urlInput.val();
+          var id = currentUrl.startsWith('#') ? currentUrl.substr(1) : null;
+          this.fragmentLinkModel.set('linkId', id, {
+            skipCurrentUrlUpdate: true
+          });
+          this.initLinkTypePanels(!id);
+        }, this));
+        var fragmentLinkInput = new this.options.fragmentLinkInputView({
+          model: this.fragmentLinkModel,
+          propertyName: 'linkId',
+          label: I18n$1.t('pageflow.ui.templates.inputs.text_area_input.target'),
+          hideUnsetButton: true
+        });
+        this.ui.fragmentLinkPanel.append(fragmentLinkInput.render().el);
+      } else {
+        this.ui.linkTypeSelection.hide();
+        this.ui.fragmentLinkPanel.hide();
+      }
+    },
+    initLinkTypePanels: function initLinkTypePanels(isUrlLink) {
+      if (isUrlLink) {
+        this.ui.urlLinkRadioButton.prop('checked', true);
+      } else {
+        this.ui.fragmentLinkRadioButton.prop('checked', true);
+      }
+
+      this.ui.toolbar.toggleClass('fragment_link_panel_active', !isUrlLink);
+    },
+    showUrlLinkPanel: function showUrlLinkPanel() {
+      this.ui.toolbar.removeClass('fragment_link_panel_active');
+      this.setUrlFromDisplayUrl();
+      this.setTargetFromOpenInNewTabCheckBox();
+    },
+    showFragmentLinkPanel: function showFragmentLinkPanel() {
+      this.ui.toolbar.addClass('fragment_link_panel_active');
+      this.setInputsFromFragmentLinkModel();
+    },
+    setInputsFromFragmentLinkModel: function setInputsFromFragmentLinkModel() {
+      this.ui.urlInput.val('#' + (this.fragmentLinkModel.get('linkId') || ''));
+      this.ui.targetInput.val('_self');
+    },
+    setUrlFromDisplayUrl: function setUrlFromDisplayUrl() {
+      this.ui.urlInput.val(this.ui.displayUrlInput.val());
+    },
+    setTargetFromOpenInNewTabCheckBox: function setTargetFromOpenInNewTabCheckBox() {
+      this.ui.targetInput.val(this.ui.openInNewTabCheckBox.is(':checked') ? '_blank' : '_self');
+    }
+  });
+
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
+  function template$9(data) {
+  var __p = '';
+  __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" />\n<div class="validation"></div>\n';
+  return __p
+  }
+
+  /**
+   * Input view for URLs.
+   * See {@link inputView} for further options
+   *
+   * @param {Object} [options]
+   *
+   * @param {string[]} options.supportedHosts
+   *   List of allowed url prefixes.
+   *
+   * @param {boolean} [options.required=false]
+   *   Display an error if the url is blank.
+   *
+   * @param {boolean} [options.permitHttps=false]
+   *   Allow urls with https protocol.
+   *
+   * @class
+   */
+
+  var UrlInputView = Marionette.Layout.extend(
+  /** @lends UrlInputView.prototype */
+  {
+    mixins: [inputView],
+    template: template$9,
+    ui: {
+      input: 'input',
+      validation: '.validation'
+    },
+    events: {
+      'change': 'onChange'
+    },
+    onRender: function onRender() {
+      this.ui.validation.hide();
+      this.load();
+      this.validate();
+    },
+    onChange: function onChange() {
+      var _this = this;
+
+      this.validate().then(function () {
+        return _this.save();
+      }, function () {
+        return _this.saveDisplayProperty();
+      });
+    },
+    saveDisplayProperty: function saveDisplayProperty() {
+      this.model.unset(this.options.propertyName, {
+        silent: true
+      });
+      this.model.set(this.options.displayPropertyName, this.ui.input.val());
+    },
+    save: function save() {
+      var _this2 = this;
+
+      var value = this.ui.input.val();
+      $.when(this.transformPropertyValue(value)).then(function (transformedValue) {
+        var _this2$model$set;
+
+        _this2.model.set((_this2$model$set = {}, _defineProperty(_this2$model$set, _this2.options.displayPropertyName, value), _defineProperty(_this2$model$set, _this2.options.propertyName, transformedValue), _this2$model$set));
+      });
+    },
+    load: function load() {
+      this.ui.input.val(this.model.has(this.options.displayPropertyName) ? this.model.get(this.options.displayPropertyName) : this.model.get(this.options.propertyName));
+      this.onLoad();
+    },
+
+    /**
+     * Override to be notified when the input has been loaded.
+     */
+    onLoad: function onLoad() {},
+
+    /**
+     * Override to validate the untransformed url. Validation error
+     * message can be passed as rejected promise. Progress notifications
+     * are displayed. Only valid urls are stored in the configuration.
+     *
+     * @return Promise
+     */
+    validateUrl: function validateUrl(url) {
+      return $.Deferred().resolve().promise();
+    },
+
+    /**
+     * Override to transform the property value before it is stored.
+     *
+     * @return Promise | String
+     */
+    transformPropertyValue: function transformPropertyValue(value) {
+      return value;
+    },
+
+    /**
+     * Override to change the list of supported host names.
+     */
+    supportedHosts: function supportedHosts() {
+      return this.options.supportedHosts;
+    },
+    // Host names used to be expected to include protocols. Remove
+    // protocols for backwards compatilbity. Since supportedHosts
+    // is supposed to be overridden in subclasses, we do it in a
+    // separate method.
+    supportedHostsWithoutLegacyProtocols: function supportedHostsWithoutLegacyProtocols() {
+      return _.map(this.supportedHosts(), function (host) {
+        return host.replace(/^https?:\/\//, '');
+      });
+    },
+    validate: function validate(success) {
+      var view = this;
+      var options = this.options;
+      var value = this.ui.input.val();
+
+      if (options.required && !value) {
+        displayValidationError(I18n$1.t('pageflow.ui.views.inputs.url_input_view.required_field'));
+      } else if (value && !isValidUrl(value)) {
+        var errorMessage = I18n$1.t('pageflow.ui.views.inputs.url_input_view.url_hint');
+
+        if (options.permitHttps) {
+          errorMessage = I18n$1.t('pageflow.ui.views.inputs.url_input_view.url_hint_https');
+        }
+
+        displayValidationError(errorMessage);
+      } else if (value && !hasSupportedHost(value)) {
+        displayValidationError(I18n$1.t('pageflow.ui.views.inputs.url_input_view.supported_vendors') + _.map(view.supportedHosts(), function (url) {
+          return '<li>' + url + '</li>';
+        }).join(''));
+      } else {
+        return view.validateUrl(value).progress(function (message) {
+          displayValidationPending(message);
+        }).done(function () {
+          resetValidationError();
+        }).fail(function (error) {
+          displayValidationError(error);
+        });
+      }
+
+      return $.Deferred().reject().promise();
+
+      function isValidUrl(url) {
+        return options.permitHttps ? url.match(/^https?:\/\//i) : url.match(/^http:\/\//i);
+      }
+
+      function hasSupportedHost(url) {
+        return _.any(view.supportedHostsWithoutLegacyProtocols(), function (host) {
+          return url.match(new RegExp('^https?://' + host));
+        });
+      }
+
+      function displayValidationError(message) {
+        view.$el.addClass('invalid');
+        view.ui.input.attr('aria-invalid', 'true');
+        view.ui.validation.removeClass('pending').addClass('failed').html(message).show();
+      }
+
+      function displayValidationPending(message) {
+        view.$el.removeClass('invalid');
+        view.ui.input.removeAttr('aria-invalid');
+        view.ui.validation.removeClass('failed').addClass('pending').html(message).show();
+      }
+
+      function resetValidationError(message) {
+        view.$el.removeClass('invalid');
+        view.ui.input.attr('aria-invalid', 'false');
+        view.ui.validation.hide();
+      }
+    }
+  });
+
+  /**
+   * Input view that verifies that a certain URL is reachable via a
+   * proxy. To conform with same origin restrictions, this input view
+   * lets the user enter some url and saves a rewritten url where the
+   * domain is replaced with some path segment.
+   *
+   * That way, when `/example` is setup to proxy requests to
+   * `http://example.com`, the user can enter an url of the form
+   * `http://example.com/some/path` but the string `/example/some/path`
+   * is persisited to the database.
+   *
+   * See {@link inputView} for further options
+   *
+   * @param {Object} options
+   *
+   * @param {string} options.displayPropertyName
+   *   Attribute name to store the url entered by the user.
+   *
+   * @param {Object[]} options.proxies
+   *   List of supported proxies.
+   *
+   * @param {string} options.proxies[].url
+   *   Supported prefix of an url that can be entered by the user.
+   *
+   * @param {string} options.proxies[].base_path
+   *   Path to replace the url prefix with.
+   *
+   * @param {boolean} [options.required=false]
+   *   Display an error if the url is blank.
+   *
+   * @param {boolean} [options.permitHttps=false]
+   *   Allow urls with https protocol.
+   *
+   * @example
+   *
+   * this.input('url, ProxyUrlInputView, {
+   *   proxies: [
+   *     {
+   *       url: 'http://example.com',
+   *       base_path: '/example'
+   *     }
+   *   ]
+   * });
+   *
+   * @class
+   */
+
+  var ProxyUrlInputView = UrlInputView.extend(
+  /** @lends ProxyUrlInputView.prototype */
+  {
+    // @override
+    validateUrl: function validateUrl(url) {
+      var view = this;
+      return $.Deferred(function (deferred) {
+        deferred.notify(I18n$1.t('pageflow.ui.views.inputs.proxy_url_input_view.url_validation'));
+        $.ajax({
+          url: view.rewriteUrl(url),
+          dataType: 'html'
+        }).done(deferred.resolve).fail(function (xhr) {
+          deferred.reject(I18n$1.t('pageflow.ui.views.inputs.proxy_url_input_view.http_error', {
+            status: xhr.status
+          }));
+        });
+      }).promise();
+    },
+    // override
+    transformPropertyValue: function transformPropertyValue(url) {
+      return this.rewriteUrl(url);
+    },
+    // override
+    supportedHosts: function supportedHosts() {
+      return _.pluck(this.options.proxies, 'url');
+    },
+    rewriteUrl: function rewriteUrl(url) {
+      _.each(this.options.proxies, function (proxy) {
+        url = url.replace(new RegExp('^' + proxy.url + '/?'), proxy.base_path + '/');
+      });
+
+      return url;
+    }
+  });
+
+  function template$a(data) {
+  var __p = '';
+  __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<div class="value"></div>\n<div class="slider"></div>\n';
+  return __p
+  }
+
+  /**
+   * A slider for numeric inputs.
+   * See {@link inputView} for options
+   *
+   * @param {Object} [options]
+   *
+   * @class
+   */
+
+  var SliderInputView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    className: 'slider_input',
+    template: template$a,
+    ui: {
+      widget: '.slider',
+      value: '.value'
+    },
+    events: {
+      'slidechange': 'save'
+    },
+    onRender: function onRender() {
+      this.ui.widget.slider({
+        animate: 'fast',
+        min: 'minValue' in this.options ? this.options.minValue : 0,
+        max: 'maxValue' in this.options ? this.options.maxValue : 100
+      });
+      this.load();
+    },
+    updateDisabled: function updateDisabled(disabled) {
+      this.$el.toggleClass('disabled', !!disabled);
+
+      if (disabled) {
+        this.ui.widget.slider('disable');
+      } else {
+        this.ui.widget.slider('enable');
+      }
+    },
+    save: function save() {
+      var value = this.ui.widget.slider('option', 'value');
+      var unit = 'unit' in this.options ? this.options.unit : '%';
+      this.ui.value.text(value + unit);
+      this.model.set(this.options.propertyName, value);
+    },
+    load: function load() {
+      var value;
+
+      if (this.model.has(this.options.propertyName)) {
+        value = this.model.get(this.options.propertyName);
+      } else {
+        value = 'defaultValue' in this.options ? this.options.defaultValue : 0;
+      }
+
+      this.ui.widget.slider('option', 'value', value);
+    }
+  });
+
+  function template$b(data) {
+  var __p = '';
+  __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n\n<textarea></textarea>\n';
+  return __p
+  }
+
+  var JsonInputView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    template: template$b,
+    className: 'json_input',
+    ui: {
+      input: 'textarea'
+    },
+    events: {
+      'change': 'onChange',
+      'keyup': 'validate'
+    },
+    onRender: function onRender() {
+      this.load();
+      this.validate();
+      this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+    },
+    onChange: function onChange() {
+      if (this.validate()) {
+        this.save();
+      }
+    },
+    onClose: function onClose() {
+      if (this.validate()) {
+        this.save();
+      }
+    },
+    save: function save() {
+      this.model.set(this.options.propertyName, this.ui.input.val() ? JSON.parse(this.ui.input.val()) : null);
+    },
+    load: function load() {
+      var input = this.ui.input;
+      var value = this.model.get(this.options.propertyName);
+      input.val(value ? JSON.stringify(value, null, 2) : '');
+    },
+    validate: function validate() {
+      var input = this.ui.input;
+
+      if (input.val() && !this.isValidJson(input.val())) {
+        this.displayValidationError(I18n$1.t('pageflow.ui.views.inputs.json_input_view.invalid'));
+        return false;
+      } else {
+        this.resetValidationError();
+        return true;
+      }
+    },
+    displayValidationError: function displayValidationError(message) {
+      this.$el.addClass('invalid');
+      this.ui.input.attr('title', message);
+    },
+    resetValidationError: function resetValidationError(message) {
+      this.$el.removeClass('invalid');
+      this.ui.input.attr('title', '');
+    },
+    isValidJson: function isValidJson(text) {
+      try {
+        JSON.parse(text);
+        return true;
+      } catch (e) {
+        return false;
+      }
+    }
+  });
+
+  function template$c(data) {
+  var __p = '';
+  __p += '<input type="checkbox" />\n<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>';
+  return __p
+  }
+
+  /**
+   * Input view for boolean values.
+   * See {@link inputView} for further options
+   *
+   * @param {Object} [options]
+   *
+   * @param {boolean} [options.displayUncheckedIfDisabled=false]
+   *   Ignore the attribute value if the input is disabled and display
+   *   an unchecked check box.
+   *
+   * @param {boolean} [options.displayCheckedIfDisabled=false]
+   *   Ignore the attribute value if the input is disabled and display
+   *   an checked check box.
+   *
+   * @param {string} [options.storeInverted]
+   *   Display checked by default and store true in given attribute when
+   *   unchecked. The property name passed to `input` is only used for
+   *   translations.
+   *
+   * @class
+   */
+
+  var CheckBoxInputView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    template: template$c,
+    className: 'check_box_input',
+    events: {
+      'change': 'save'
+    },
+    ui: {
+      input: 'input',
+      label: 'label'
+    },
+    onRender: function onRender() {
+      this.ui.label.attr('for', this.cid);
+      this.ui.input.attr('id', this.cid);
+      this.load();
+      this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+    },
+    updateDisabled: function updateDisabled() {
+      this.load();
+    },
+    save: function save() {
+      if (!this.isDisabled()) {
+        var value = this.ui.input.is(':checked');
+
+        if (this.options.storeInverted) {
+          this.model.set(this.options.storeInverted, !value);
+        } else {
+          this.model.set(this.options.propertyName, value);
+        }
+      }
+    },
+    load: function load() {
+      if (!this.isClosed) {
+        this.ui.input.prop('checked', this.displayValue());
+      }
+    },
+    displayValue: function displayValue() {
+      if (this.isDisabled() && this.options.displayUncheckedIfDisabled) {
+        return false;
+      } else if (this.isDisabled() && this.options.displayCheckedIfDisabled) {
+        return true;
+      } else if (this.options.storeInverted) {
+        return !this.model.get(this.options.storeInverted);
+      } else {
+        return this.model.get(this.options.propertyName);
+      }
+    }
+  });
+
+  /**
+   * Render a separator in a {@link ConfigurationEditorView} tab.
+   *
+   * @example
+   *
+   * this.view(SeparatorView);
+   *
+   * @class
+   */
+
+  var SeparatorView = Marionette.View.extend({
+    className: 'separator'
+  });
+
+  /**
+   * Render an input that is only a label. Can be used to render
+   * additional inline help.
+   *
+   * See {@link inputView} for further options
+   *
+   * @class
+   */
+
+  var LabelOnlyView = Marionette.ItemView.extend({
+    mixins: [inputView],
+    template: function template() {
+      return "\n    <label>\n      <span class=\"name\"></span>\n      <span class=\"inline_help\"></span>\n    </label>\n  ";
+    },
+    ui: {
+      label: 'label'
+    }
+  });
+
+  /**
+   * A table cell mapping column attribute values to a list of
+   * translations.
+   *
+   * ## Attribute Translations
+   *
+   * The following attribute translations are used:
+   *
+   * - `.cell_text.<attribute_value>` - Used as cell content.
+   * - `.cell_text.blank` - Used as cell content if attribute is blank.
+   * - `.cell_title.<attribute_value>` - Used as title attribute.
+   * - `.cell_title.blank` - Used as title attribute if attribute is blank.
+   *
+   * @since 12.0
+   */
+
+  var EnumTableCellView = TableCellView.extend({
+    className: 'enum_table_cell',
+    update: function update() {
+      this.$el.text(this.attributeTranslation('cell_text.' + (this.attributeValue() || 'blank')));
+      this.$el.attr('title', this.attributeTranslation('cell_title.' + (this.attributeValue() || 'blank'), {
+        defaultValue: ''
+      }));
+    }
+  });
+
+  function template$d(data) {
+  var __t, __p = '';
+  __p += '<a class="remove" title="' +
+  ((__t = ( I18n.t('pageflow.editor.templates.row.destroy') )) == null ? '' : __t) +
+  '"></a>\n';
+  return __p
+  }
+
+  /**
+   * A table cell providing a button which destroys the model that the
+   * current row refers to.
+   *
+   * ## Attribute Translations
+   *
+   * The following attribute translation is used:
+   *
+   * - `.cell_title` - Used as title attribute.
+   *
+   * @param {Object} [options]
+   *
+   * @param {function} [options.toggleDeleteButton]
+   *   A function with boolean return value to be called on
+   *   this.getModel(). Delete button will be visible only if the
+   *   function returns a truthy value.
+   *
+   * @param {boolean} [options.invertToggleDeleteButton]
+   *   Invert the return value of `toggleDeleteButton`?
+   *
+   * @since 12.0
+   */
+
+  var DeleteRowTableCellView = TableCellView.extend({
+    className: 'delete_row_table_cell',
+    template: template$d,
+    ui: {
+      removeButton: '.remove'
+    },
+    events: {
+      'click .remove': 'destroy',
+      'click': function click() {
+        return false;
+      }
+    },
+    showButton: function showButton() {
+      if (this.options.toggleDeleteButton) {
+        var context = this.getModel();
+        var toggle = context[this.options.toggleDeleteButton].apply(context);
+
+        if (this.options.invertToggleDeleteButton) {
+          return !toggle;
+        } else {
+          return !!toggle;
+        }
+      } else {
+        return true;
+      }
+    },
+    update: function update() {
+      this.ui.removeButton.toggleClass('remove', this.showButton());
+      this.ui.removeButton.attr('title', this.attributeTranslation('cell_title'));
+    },
+    destroy: function destroy() {
+      this.getModel().destroy();
+    }
+  });
+
+  /**
+   * A table cell representing whether the column attribute is present
+   * on the row model.
+   *
+   * ## Attribute Translations
+   *
+   * The following attribute translations are used:
+   *
+   * - `.cell_title.present` - Used as title attribute if the attribute
+   *   is present. The current attribute value is provided as
+   *   interpolation `%{value}`.
+   * - `.cell_title.blank` - Used as title attribute if the
+   *   attribute is blank.
+   *
+   * @since 12.0
+   */
+
+  var PresenceTableCellView = TableCellView.extend({
+    className: 'presence_table_cell',
+    update: function update() {
+      var isPresent = !!this.attributeValue();
+      this.$el.attr('title', isPresent ? this.attributeTranslation('cell_title.present', {
+        value: this.attributeValue()
+      }) : this.attributeTranslation('cell_title.blank'));
+      this.$el.toggleClass('is_present', isPresent);
+    }
+  });
+
+  /**
+   * A table cell mapping column attribute values to icons.
+   *
+   * ## Attribute Translations
+   *
+   * The following attribute translations are used:
+   *
+   * - `.cell_title.<attribute_value>` - Used as title attribute.
+   * - `.cell_title.blank` - Used as title attribute if attribute is blank.
+   *
+   * @param {Object} [options]
+   *
+   * @param {string[]} [options.icons]
+   *   An array of all possible attribute values to be mapped to HTML
+   *   classes of the same name. A global mapping from those classes to
+   *   icon mixins is provided in
+   *   pageflow/ui/table_cells/icon_table_cell.scss.
+   *
+   * @since 12.0
+   */
+
+  var IconTableCellView = TableCellView.extend({
+    className: 'icon_table_cell',
+    update: function update() {
+      var icon = this.attributeValue();
+      var isPresent = !!this.attributeValue();
+      this.removeExistingIcons();
+      this.$el.attr('title', isPresent ? this.attributeTranslation('cell_title.' + icon, {
+        value: this.attributeValue()
+      }) : this.attributeTranslation('cell_title.blank'));
+      this.$el.addClass(icon);
+    },
+    removeExistingIcons: function removeExistingIcons() {
+      this.$el.removeClass(this.options.icons.join(' '));
+    }
+  });
+
+  /**
+   * A table cell using the row model's value of the column attribute as
+   * text. If attribute value is empty, use most specific default
+   * available.
+   *
+   * @param {Object} [options]
+   *
+   * @param {function|string} [options.column.default]
+   *   A function returning a default value for display if attribute
+   *   value is empty.
+   *
+   * @param {string} [options.column.contentBinding]
+   *   If this is provided, the function `options.column.default`
+   *   receives the values of `options.column.contentBinding` and of
+   *   this.getModel() via its options hash. No-op if
+   *   `options.column.default` is not a function.
+   *
+   * @since 12.0
+   */
+
+  var TextTableCellView = TableCellView.extend({
+    className: 'text_table_cell',
+    update: function update() {
+      this.$el.text(this._updateText());
+    },
+    _updateText: function _updateText() {
+      if (this.attributeValue()) {
+        return this.attributeValue();
+      } else if (typeof this.options.column["default"] === 'function') {
+        var options = {};
+
+        if (this.options.column.contentBinding) {
+          options = {
+            contentBinding: this.options.column.contentBinding,
+            model: this.getModel()
+          };
+        }
+
+        return this.options.column["default"](options);
+      } else if ('default' in this.options.column) {
+        return this.options.column["default"];
+      } else {
+        return I18n$1.t('pageflow.ui.text_table_cell_view.empty');
+      }
+    }
+  });
+
+  var subviewContainer = {
+    subview: function subview(view) {
+      this.subviews = this.subviews || new ChildViewContainer();
+      this.subviews.add(view.render());
+      return view;
+    },
+    appendSubview: function appendSubview(view) {
+      return this.$el.append(this.subview(view).el);
+    },
+    onClose: function onClose() {
+      if (this.subviews) {
+        this.subviews.call('close');
+      }
+    }
+  };
+
+  if (!Marionette.View.prototype.appendSubview) {
+    Cocktail.mixin(Marionette.View, subviewContainer);
+  }
+
+  var tooltipContainer = {
+    events: {
+      'mouseover [data-tooltip]': function mouseoverDataTooltip(event) {
+        if (!this.tooltip.visible) {
+          var target = $(event.currentTarget);
+          var key = target.attr('data-tooltip');
+          var position;
+
+          if (target.data('tooltipAlign') === 'bottom left') {
+            position = {
+              left: target.position().left,
+              top: target.position().top + target.outerHeight()
+            };
+          } else if (target.data('tooltipAlign') === 'bottom right') {
+            position = {
+              left: target.position().left + target.outerWidth(),
+              top: target.position().top + target.outerHeight()
+            };
+          } else if (target.data('tooltipAlign') === 'top center') {
+            position = {
+              left: target.position().left + target.outerWidth() / 2,
+              top: target.position().top + 2
+            };
+          } else {
+            position = {
+              left: target.position().left + target.outerWidth(),
+              top: target.position().top + target.outerHeight() / 2
+            };
+          }
+
+          this.tooltip.show(I18n$1.t(key), position, {
+            align: target.data('tooltipAlign')
+          });
+        }
+      },
+      'mouseleave [data-tooltip]': function mouseleaveDataTooltip() {
+        this.tooltip.hide();
+      }
+    },
+    onRender: function onRender() {
+      this.appendSubview(this.tooltip = new TooltipView());
+    }
+  };
+
+  exports.CheckBoxGroupInputView = CheckBoxGroupInputView;
+  exports.CheckBoxInputView = CheckBoxInputView;
+  exports.CollectionView = CollectionView;
+  exports.ColorInputView = ColorInputView;
+  exports.ConfigurationEditorTabView = ConfigurationEditorTabView;
+  exports.ConfigurationEditorView = ConfigurationEditorView;
+  exports.DeleteRowTableCellView = DeleteRowTableCellView;
+  exports.EnumTableCellView = EnumTableCellView;
+  exports.ExtendedSelectInputView = ExtendedSelectInputView;
+  exports.IconTableCellView = IconTableCellView;
+  exports.JsonInputView = JsonInputView;
+  exports.LabelOnlyView = LabelOnlyView;
+  exports.Object = BaseObject;
+  exports.PresenceTableCellView = PresenceTableCellView;
+  exports.ProxyUrlInputView = ProxyUrlInputView;
+  exports.SelectInputView = SelectInputView;
+  exports.SeparatorView = SeparatorView;
+  exports.SliderInputView = SliderInputView;
+  exports.SortableCollectionView = SortableCollectionView;
+  exports.TableCellView = TableCellView;
+  exports.TableHeaderCellView = TableHeaderCellView;
+  exports.TableRowView = TableRowView;
+  exports.TableView = TableView;
+  exports.TabsView = TabsView;
+  exports.TextAreaInputView = TextAreaInputView;
+  exports.TextInputView = TextInputView;
+  exports.TextTableCellView = TextTableCellView;
+  exports.TooltipView = TooltipView;
+  exports.UrlDisplayView = UrlDisplayView;
+  exports.UrlInputView = UrlInputView;
+  exports.cssModulesUtils = cssModulesUtils;
+  exports.i18nUtils = i18nUtils;
+  exports.inputView = inputView;
+  exports.inputWithPlaceholderText = inputWithPlaceholderText;
+  exports.serverSideValidation = serverSideValidation;
+  exports.subviewContainer = subviewContainer;
+  exports.tooltipContainer = tooltipContainer;
+  exports.viewWithValidationErrorMessages = viewWithValidationErrorMessages;
+
+  return exports;
+
+}({}, Backbone.Marionette, _, jQuery, I18n, Backbone, Backbone.ChildViewContainer, IScroll, jQuery, wysihtml5, Cocktail));