pageflow 17.0.5 → 17.2.0

data/package/ui.js

@@ -3,9 +3,9 @@ import _ from 'underscore';
 import $ from 'jquery';
 import I18n$1 from 'i18n-js';
 import Backbone from 'backbone';
+import Sortable from 'sortablejs';
 import ChildViewContainer from 'backbone.babysitter';
 import IScroll from 'iscroll';
-import 'jquery.minicolors';
 import wysihtml5 from 'wysihtml5';
 import 'jquery-ui';
 import Cocktail from 'cocktail';
@@ -16,15 +16,12 @@ 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);
 };
 
@@ -50,22 +47,19 @@ Marionette.Renderer.render = function (template, data) {
  * @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
@@ -75,10 +69,10 @@ function attributeTranslationKeys(attributeName, keyName, options) {
  * @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.
@@ -97,19 +91,15 @@ function attributeTranslation(attributeName, keyName, options) {
  * @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 {
@@ -117,6 +107,7 @@ function findTranslation(keys, options) {
     }
   }, options.defaultValue).value();
 }
+
 /**
  * Return the first key for which a translation exists. Returns the
  * first if non of the keys has a translation.
@@ -127,7 +118,6 @@ function findTranslation(keys, options) {
  * @memberof i18nUtils
  * @return {string}
  */
-
 function findKeyWithTranslation(keys) {
   var missing = '_not_translated';
   return _(keys).detect(function (key) {
@@ -151,64 +141,6 @@ var i18nUtils = /*#__PURE__*/Object.freeze({
   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.
@@ -248,16 +180,13 @@ function _slicedToArray(arr, i) {
  *
  * @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) {
+function ui(styles, ...classNames) {
+  return classNames.reduce((result, className) => {
     result[className] = selector(styles, className);
     return result;
   }, {});
 }
+
 /**
  * Create object that can be passed to Marionette events property from CSS
  * module object.
@@ -295,18 +224,14 @@ function ui(styles) {
  *
  * @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 Object.keys(mapping).reduce((result, key) => {
+    const [event, className] = key.split(' ');
+    result[`${event} ${selector(styles, className)}`] = mapping[key];
     return result;
   }, {});
 }
+
 /**
  * Generates a CSS selector from a CSS module rule.
  *
@@ -319,15 +244,12 @@ function events(styles, mapping) {
  * @return {String} CSS Selector
  * @memberof cssModulesUtils
  */
-
 function selector(styles, className) {
-  var classNames = styles[className];
-
+  const classNames = styles[className];
   if (!classNames) {
-    throw new Error("Unknown class name ".concat(className, " in mapping. Knwon names: ").concat(Object.keys(styles).join(', '), "."));
+    throw new Error(`Unknown class name ${className} in mapping. Knwon names: ${Object.keys(styles).join(', ')}.`);
   }
-
-  return ".".concat(classNames.replace(/ /g, '.'));
+  return `.${classNames.replace(/ /g, '.')}`;
 }
 
 var cssModulesUtils = /*#__PURE__*/Object.freeze({
@@ -337,46 +259,92 @@ var cssModulesUtils = /*#__PURE__*/Object.freeze({
   selector: selector
 });
 
+function setup({
+  binding,
+  model,
+  listener,
+  callback,
+  normalize = value => value,
+  option,
+  bindingValue
+}) {
+  if (binding) {
+    _.flatten([binding]).forEach(attribute => {
+      listener.listenTo(model, 'change:' + attribute, update);
+    });
+  }
+  update();
+  function update() {
+    callback(resolve({
+      binding,
+      model,
+      normalize,
+      option,
+      bindingValue
+    }));
+  }
+}
+function resolve({
+  binding,
+  model,
+  normalize = value => value,
+  option,
+  bindingValue
+}) {
+  const boundValue = Array.isArray(binding) ? binding.map(attribute => model.get(attribute)) : model.get(binding);
+  if (bindingValue !== undefined) {
+    return boundValue === bindingValue;
+  } else if (typeof option === 'function') {
+    return normalize(option(boundValue));
+  } else if (option !== undefined) {
+    return normalize(option);
+  } else if (binding) {
+    return normalize(boundValue);
+  }
+}
+
+var attributeBindingUtils = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  setup: setup,
+  resolve: resolve
+});
+
+// Class-y constructor by github.com/opensas
 // 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.
-
+  initialize: function (options) {}
+});
 
+// The self-propagating extend function that Backbone classes use.
 BaseObject.extend = Backbone.Model.extend;
 
-var serverSideValidation = {
-  initialize: function initialize() {
-    var _this = this;
-
+const serverSideValidation = {
+  initialize() {
     this.validationErrors = {};
-    this.listenTo(this, 'error', function (model, request) {
+    this.listenTo(this, 'error', (model, request) => {
       if (request.status === 422) {
-        _this.validationErrors = JSON.parse(request.responseText).errors;
-
-        _this.trigger('invalid');
+        this.validationErrors = JSON.parse(request.responseText).errors;
+        this.trigger('invalid');
       }
     });
-    this.listenTo(this, 'sync', function () {
-      _this.validationErrors = {};
+    this.listenTo(this, 'sync', () => {
+      this.validationErrors = {};
     });
   }
 };
 
-var CollectionView = Marionette.View.extend({
-  initialize: function initialize() {
+const CollectionView = Marionette.View.extend({
+  initialize: function () {
     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;
@@ -388,7 +356,7 @@ var CollectionView = Marionette.View.extend({
       });
     }
   },
-  render: function render() {
+  render: function () {
     if (!this.rendered) {
       this.$el.append(this.itemViews.map(function (itemView) {
         itemView.$el.data('view', itemView);
@@ -397,89 +365,84 @@ var CollectionView = Marionette.View.extend({
       this.togglePlaceHolder();
       this.rendered = true;
     }
-
     return this;
   },
-  onClose: function onClose() {
+  onClose: function () {
     this.itemViews.call('close');
     this.closePlaceHolderView();
   },
-  addItem: function addItem(item) {
+  addItem: function (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) {
+  removeItem: function (item) {
     var view = this.itemViews.findByModel(item);
-
     if (view) {
       this.itemViews.remove(view);
       view.close();
       this.togglePlaceHolder();
     }
   },
-  sort: function sort() {
+  sort: function () {
     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) {
+  getItemViewOptions: function (item) {
     if (typeof this.options.itemViewOptions === 'function') {
       return this.options.itemViewOptions(item);
     } else {
       return this.options.itemViewOptions || {};
     }
   },
-  closePlaceHolderView: function closePlaceHolderView() {
+  closePlaceHolderView: function () {
     if (this.placeHolderView) {
       this.placeHolderView.close();
       this.placeHolderView = null;
     }
   },
-  togglePlaceHolder: function togglePlaceHolder() {
+  togglePlaceHolder: function () {
     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.placeHolderView = new this.placeHolderConstructor(this.getPlaceHolderViewOptions());
       this.$el.append(this.placeHolderView.render().el);
     }
   },
-  getPlaceHolderConstructor: function getPlaceHolderConstructor() {
+  getPlaceHolderViewOptions: function () {
+    if (this.placeHolderConstructor === this.options.blankSlateViewConstructor) {
+      return this.options.blankSlateViewOptions;
+    }
+  },
+  getPlaceHolderConstructor: function () {
     if (this.loading && this.options.loadingViewConstructor) {
       return this.options.loadingViewConstructor;
     } else if (this.options.blankSlateViewConstructor) {
@@ -488,119 +451,135 @@ var CollectionView = Marionette.View.extend({
   }
 });
 
-var SortableCollectionView = CollectionView.extend({
-  render: function render() {
+const SortableCollectionView = CollectionView.extend({
+  render: function () {
     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.sortable = Sortable.create(this.el, {
+      group: this.options.connectWith,
+      animation: 150,
+      ghostClass: 'sortable-placeholder',
+      forceFallback: this.options.forceDraggableFallback,
+      fallbackTolerance: 3,
+      onEnd: event => {
+        const item = $(event.item);
+        if (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');
+      },
+      onRemove: event => {
+        const view = $(event.item).data('view');
         this.itemViews.remove(view);
         this.collection.remove(view.model);
-      }, this)
+      },
+      onSort: event => {
+        if (event.from !== event.to && event.to === this.el) {
+          const view = $(event.item).data('view');
+          this.reindexPositions();
+          this.itemViews.add(view);
+          this.collection.add(view.model);
+          this.collection.saveOrder();
+        }
+      }
     });
     return this;
   },
-  addItem: function addItem(item) {
+  onClose() {
+    CollectionView.prototype.onClose.call(this);
+    this.sortable.destroy();
+  },
+  disableSorting() {
+    this.sortable.option('disabled', true);
+  },
+  enableSorting() {
+    this.sortable.option('disabled', false);
+  },
+  addItem: function (item) {
     if (!this.itemViews.findByModel(item)) {
       CollectionView.prototype.addItem.call(this, item);
     }
   },
-  removeItem: function removeItem(item) {
+  removeItem: function (item) {
     if (this.itemViews.findByModel(item)) {
       CollectionView.prototype.removeItem.call(this, item);
     }
   },
-  updateOrder: function updateOrder() {
+  updateOrder: function () {
     this.reindexPositions();
     this.collection.sort();
     this.collection.saveOrder();
   },
-  reindexPositions: function reindexPositions() {
+  reindexPositions: function () {
     this.$el.children().each(function (index) {
       $(this).data('view').model.set('position', index);
     });
   }
 });
 
-var ConfigurationEditorTabView = Marionette.View.extend({
+const ConfigurationEditorTabView = Marionette.View.extend({
   className: 'configuration_editor_tab',
-  initialize: function initialize() {
+  initialize: function () {
     this.inputs = new ChildViewContainer();
     this.groups = this.options.groups || ConfigurationEditorTabView.groups;
   },
-  input: function input(propertyName, view, options) {
+  input: function (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({
+  view: function (view, options) {
+    this.inputs.add(new view(_.extend({
       model: this.model,
       parentTab: this.options.tab
     }, options || {})));
   },
-  group: function group(name, options) {
+  group: function (name, options) {
     this.groups.apply(name, this, options);
   },
-  render: function render() {
+  render: function () {
     this.inputs.each(function (input) {
       this.$el.append(input.render().el);
     }, this);
     return this;
   },
-  onClose: function onClose() {
+  onClose: function () {
     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) {
+  this.apply = function (name, context, {
+    ignoreUndefined,
+    ...options
+  } = {}) {
     if (!(name in groups)) {
+      if (ignoreUndefined) {
+        return;
+      }
       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';
+__p += '<div class="tabs_view-scroller">\n  <div class="tabs_view-tabs" role="tablist" aria-orientation="horizontal"></div>\n</div>\n<div class="tabs_view-container"></div>\n';
 return __p
 }
 
 /*global pageflow*/
+
 /**
  * Switch between different views using tabs.
  *
@@ -621,41 +600,43 @@ return __p
  *
  * @class
  */
-
-var TabsView = Marionette.Layout.extend(
-/* @lends TabView.prototype */
-{
-  template: template,
+const TabsView = Marionette.Layout.extend( /* @lends TabView.prototype */{
+  template,
   className: 'tabs_view',
   ui: {
-    headers: '.tabs_view-headers',
-    scroller: '.tabs_view-scroller'
+    tabs: '.tabs_view-tabs',
+    scroller: '.tabs_view-scroller',
+    container: '.tabs_view-container'
   },
   regions: {
     container: '.tabs_view-container'
   },
   events: {
-    'click .tabs_view-headers > li': function clickTabs_viewHeadersLi(event) {
-      this.changeTab($(event.target).data('tab-name'));
+    'click .tabs_view-tab': function (event) {
+      this.changeTab($(event.currentTarget).data('tab-name'));
+    },
+    'keydown .tabs_view-tab': function (event) {
+      this._handleKeyDown(event);
     }
   },
-  initialize: function initialize() {
+  initialize: function () {
     this.tabFactoryFns = {};
     this.tabNames = [];
     this.currentTabName = null;
-
     this._refreshScrollerOnSideBarResize();
   },
-  tab: function tab(name, factoryFn) {
+  tab: function (name, factoryFn) {
     this.tabFactoryFns[name] = factoryFn;
     this.tabNames.push(name);
   },
-  onRender: function onRender() {
+  onRender: function () {
     _.each(this.tabNames, function (name) {
       var label = findTranslation(this._labelTranslationKeys(name));
-      this.ui.headers.append($('<li />').attr('data-tab-name', name).text(label));
+      var tabId = this._tabId(name);
+      var button = $('<button />').attr('type', 'button').attr('role', 'tab').attr('id', tabId).attr('data-tab-name', name).attr('tabindex', '-1').attr('aria-selected', 'false').addClass('tabs_view-tab').text(label);
+      this.ui.tabs.append(button);
     }, this);
-
+    this.ui.container.attr('id', this._panelId()).attr('role', 'tabpanel');
     this.scroller = new IScroll(this.ui.scroller[0], {
       scrollX: true,
       scrollY: false,
@@ -663,71 +644,138 @@ var TabsView = Marionette.Layout.extend(
       mouseWheel: true,
       preventDefault: false
     });
-    this.changeTab(this.defaultTab());
+    this.changeTab(this.defaultTab(), {
+      refresh: true
+    });
   },
-  changeTab: function changeTab(name) {
-    this.container.show(this.tabFactoryFns[name]());
-
-    this._updateActiveHeader(name);
-
+  changeTab: function (name, options = {}) {
+    if (!this.tabFactoryFns[name]) {
+      return;
+    }
+    if (this.currentTabName !== name || options.refresh) {
+      this.container.show(this.tabFactoryFns[name]());
+    }
     this.currentTabName = name;
+    this._updateActiveTab(name, options.focusTab);
+    this._updateActivePanel(name);
   },
-  defaultTab: function defaultTab() {
+  defaultTab: function () {
     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);
+  refresh: function () {
+    if (this.currentTabName) {
+      this.changeTab(this.currentTabName, {
+        refresh: true
+      });
+    }
   },
-
   /**
    * Adjust tabs scroller to changed width of view.
    */
-  refreshScroller: function refreshScroller() {
+  refreshScroller: function () {
     this.scroller.refresh();
   },
-  toggleSpinnerOnTab: function toggleSpinnerOnTab(name, visible) {
+  toggleSpinnerOnTab: function (name, visible) {
     this.$('[data-tab-name=' + name + ']').toggleClass('spinner', visible);
   },
-  _labelTranslationKeys: function _labelTranslationKeys(name) {
+  _labelTranslationKeys: function (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) {
+  _updateActiveTab: function (activeTabName, focusTab) {
     var scroller = this.scroller;
-    this.ui.headers.children().each(function () {
-      if ($(this).data('tab-name') === activeTabName) {
+    var panelId = this._panelId();
+    this.ui.tabs.children().each(function () {
+      var button = $(this);
+      var isActive = button.data('tab-name') === activeTabName;
+      if (isActive) {
         scroller.scrollToElement(this, 200, true);
-        $(this).addClass('active');
+        button.addClass('active');
+        button.attr('aria-selected', 'true');
+        button.attr('aria-controls', panelId);
+        button.attr('tabindex', '0');
+        if (focusTab) {
+          button.focus();
+        }
       } else {
-        $(this).removeClass('active');
+        button.removeClass('active');
+        button.attr('aria-selected', 'false');
+        button.attr('tabindex', '-1');
       }
     });
   },
-  _refreshScrollerOnSideBarResize: function _refreshScrollerOnSideBarResize() {
+  _updateActivePanel: function (activeTabName) {
+    this.ui.container.attr('aria-labelledby', this._tabId(activeTabName));
+  },
+  _handleKeyDown: function (event) {
+    var tabName = $(event.currentTarget).data('tab-name');
+    var nextTabName;
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        nextTabName = this._previousTabName(tabName);
+        break;
+      case 'ArrowRight':
+      case 'ArrowDown':
+        nextTabName = this._nextTabName(tabName);
+        break;
+      case 'Home':
+        nextTabName = _.first(this.tabNames);
+        break;
+      case 'End':
+        nextTabName = _.last(this.tabNames);
+        break;
+      case 'Enter':
+      case ' ':
+        nextTabName = tabName;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    if (nextTabName) {
+      this.changeTab(nextTabName, {
+        focusTab: true
+      });
+    }
+  },
+  _previousTabName: function (currentTabName) {
+    var currentIndex = _.indexOf(this.tabNames, currentTabName);
+    var previousIndex = (currentIndex - 1 + this.tabNames.length) % this.tabNames.length;
+    return this.tabNames[previousIndex];
+  },
+  _nextTabName: function (currentTabName) {
+    var currentIndex = _.indexOf(this.tabNames, currentTabName);
+    var nextIndex = (currentIndex + 1) % this.tabNames.length;
+    return this.tabNames[nextIndex];
+  },
+  _refreshScrollerOnSideBarResize: function () {
     if (pageflow.app) {
       this.listenTo(pageflow.app, 'resize', function () {
         this.scroller.refresh();
       });
     }
+  },
+  _tabId: function (name) {
+    return this.cid + '-tab-' + name;
+  },
+  _panelId: function () {
+    return this.cid + '-panel';
   }
 });
 
@@ -756,10 +804,9 @@ var TabsView = Marionette.Layout.extend(
  *
  * @class
  */
-
-var ConfigurationEditorView = Marionette.View.extend({
+const ConfigurationEditorView = Marionette.View.extend({
   className: 'configuration_editor',
-  initialize: function initialize() {
+  initialize: function () {
     this.tabsView = new TabsView({
       translationKeyPrefixes: this.options.tabTranslationKeyPrefixes || [this.options.tabTranslationKeyPrefix],
       fallbackTranslationKeyPrefix: 'pageflow.ui.configuration_editor.tabs',
@@ -767,10 +814,10 @@ var ConfigurationEditorView = Marionette.View.extend({
     });
     this.configure();
   },
-  configure: function configure() {},
-  tab: function tab(name, callbackOrOptions, callback) {
+  configure: function () {},
+  tab: function (name, callbackOrOptions, callback) {
     callback = callback || callbackOrOptions;
-    var options = callback ? callbackOrOptions : {};
+    const options = callback ? callbackOrOptions : {};
     this.tabsView.tab(name, _.bind(function () {
       var tabView = new ConfigurationEditorTabView({
         model: options.model || this.model,
@@ -782,29 +829,26 @@ var ConfigurationEditorView = Marionette.View.extend({
       return tabView;
     }, this));
   },
-
   /**
    * Rerender current tab.
    */
-  refresh: function refresh() {
+  refresh: function () {
     this.tabsView.refresh();
   },
-
   /**
    * Adjust tabs scroller to changed width of view.
    */
-  refreshScroller: function refreshScroller() {
+  refreshScroller: function () {
     this.tabsView.refreshScroller();
   },
-  render: function render() {
+  render: function () {
     this.$el.append(this.subview(this.tabsView).el);
     return this;
   }
 });
-
 _.extend(ConfigurationEditorView, {
   repository: {},
-  register: function register(pageTypeName, prototype) {
+  register: function (pageTypeName, prototype) {
     this.repository[pageTypeName] = ConfigurationEditorView.extend(prototype);
   }
 });
@@ -829,44 +873,40 @@ return __p
  *
  * @since 12.0
  */
-
-var TableCellView = Marionette.ItemView.extend({
+const TableCellView = Marionette.ItemView.extend({
   tagName: 'td',
   template: template$1,
-  className: function className() {
+  className: function () {
     return this.options.className;
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.listenTo(this.getModel(), 'change:' + this.options.column.name, this.update);
     this.setupContentBinding();
     this.update();
   },
-
   /**
    * Override in concrete cell view.
    */
-  update: function update() {
+  update: function () {
     throw 'Not implemented';
   },
-
   /**
    * Returns the column attribute's value in the row model.
    */
-  attributeValue: function attributeValue() {
+  attributeValue: function () {
     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() {
+  getModel: function () {
     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`.
@@ -885,15 +925,14 @@ var TableCellView = Marionette.ItemView.extend({
    * // Looks for keys of the form:
    * // <table_view_translation_key_prefix>.<column_attribute>.cell_title
    */
-  attributeTranslation: function attributeTranslation(keyName, options) {
+  attributeTranslation: function (keyName, options) {
     return findTranslation(this.attributeTranslationKeys(keyName), options);
   },
-  attributeTranslationKeys: function attributeTranslationKeys(keyName) {
+  attributeTranslationKeys: function (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().
@@ -903,7 +942,7 @@ var TableCellView = Marionette.ItemView.extend({
    *
    * @protected
    */
-  setupContentBinding: function setupContentBinding() {
+  setupContentBinding: function () {
     if (this.options.column.contentBinding) {
       this.listenTo(this.getModel(), 'change:' + this.options.column.contentBinding, this.update);
       this.update();
@@ -911,30 +950,30 @@ var TableCellView = Marionette.ItemView.extend({
   }
 });
 
-var TableHeaderCellView = TableCellView.extend({
+const TableHeaderCellView = TableCellView.extend({
   tagName: 'th',
-  render: function render() {
+  render: function () {
     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({
+const TableRowView = Marionette.View.extend({
   tagName: 'tr',
   events: {
-    'click': function click() {
+    'click': function () {
       if (this.options.selection) {
         this.options.selection.set(this.selectionAttribute(), this.model);
       }
     }
   },
-  initialize: function initialize() {
+  initialize: function () {
     if (this.options.selection) {
       this.listenTo(this.options.selection, 'change', this.updateClassName);
     }
   },
-  render: function render() {
+  render: function () {
     _(this.options.columns).each(function (column) {
       this.appendSubview(new column.cellView(_.extend({
         model: this.model,
@@ -942,17 +981,16 @@ var TableRowView = Marionette.View.extend({
         attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
       }, column.cellViewOptions || {})));
     }, this);
-
     this.updateClassName();
     return this;
   },
-  updateClassName: function updateClassName() {
+  updateClassName: function () {
     this.$el.toggleClass('is_selected', this.isSelected());
   },
-  isSelected: function isSelected() {
+  isSelected: function () {
     return this.options.selection && this.options.selection.get(this.selectionAttribute()) === this.model;
   },
-  selectionAttribute: function selectionAttribute() {
+  selectionAttribute: function () {
     return this.options.selectionAttribute || 'current';
   }
 });
@@ -973,7 +1011,7 @@ __p += '<td colspan="' +
 return __p
 }
 
-var TableView = Marionette.ItemView.extend({
+const TableView = Marionette.ItemView.extend({
   tagName: 'table',
   className: 'table_view',
   template: template$2,
@@ -981,16 +1019,14 @@ var TableView = Marionette.ItemView.extend({
     headRow: 'thead tr',
     body: 'tbody'
   },
-  onRender: function onRender() {
+  onRender: function () {
     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,
@@ -1005,7 +1041,7 @@ var TableView = Marionette.ItemView.extend({
         tagName: 'tr',
         className: 'blank_slate',
         template: blankSlateTemplate,
-        serializeData: function serializeData() {
+        serializeData: function () {
           return {
             blankSlateText: view.options.blankSlateText,
             colSpan: view.options.columns.length
@@ -1022,18 +1058,18 @@ __p += '<span class="label">\n</span>\n';
 return __p
 }
 
-var TooltipView = Marionette.ItemView.extend({
+const TooltipView = Marionette.ItemView.extend({
   template: template$3,
   className: 'tooltip',
   ui: {
     label: '.label'
   },
-  hide: function hide() {
+  hide: function () {
     this.visible = false;
     clearTimeout(this.timeout);
     this.$el.removeClass('visible');
   },
-  show: function show(text, position, options) {
+  show: function (text, position, options) {
     options = options || {};
     this.visible = true;
     clearTimeout(this.timeout);
@@ -1044,7 +1080,6 @@ var TooltipView = Marionette.ItemView.extend({
       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;
@@ -1055,7 +1090,6 @@ var TooltipView = Marionette.ItemView.extend({
         offsetTop = -17;
         offsetLeft = 10;
       }
-
       this.$el.css({
         top: position.top + offsetTop + 'px',
         left: position.left + offsetLeft + 'px'
@@ -1065,104 +1099,36 @@ var TooltipView = Marionette.ItemView.extend({
   }
 });
 
-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 ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
-var attributeBinding = {
-  setupBooleanAttributeBinding: function setupBooleanAttributeBinding(optionName, updateMethod) {
+const attributeBinding = {
+  setupBooleanAttributeBinding(optionName, updateMethod) {
     this.setupAttributeBinding(optionName, updateMethod, Boolean);
   },
-  getBooleanAttributBoundOption: function getBooleanAttributBoundOption(optionName) {
+  getBooleanAttributBoundOption(optionName) {
     return this.getAttributeBoundOption(optionName, Boolean);
   },
-  setupAttributeBinding: function setupAttributeBinding(optionName, updateMethod) {
-    var _this = this;
-
-    var normalize = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (value) {
-      return value;
-    };
-    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, normalize));
-    }
+  setupAttributeBinding(optionName, updateMethod, normalize = value => value) {
+    const binding = this.options[`${optionName}Binding`];
+    const model = this.options[`${optionName}BindingModel`] || this.model;
+    setup({
+      binding,
+      model,
+      listener: this,
+      normalize,
+      option: this.options[optionName],
+      bindingValue: this.options[`${optionName}BindingValue`],
+      callback: value => updateMethod.call(this, value)
+    });
   },
-  getAttributeBoundOption: function getAttributeBoundOption(optionName) {
-    var _this2 = this;
-
-    var normalize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (value) {
-      return value;
-    };
-    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 normalize(this.options[optionName](value));
-    } else if (optionName in this.options) {
-      return normalize(this.options[optionName]);
-    } else if (binding) {
-      return normalize(value);
-    }
+  getAttributeBoundOption(optionName, normalize = value => value) {
+    const binding = this.options[`${optionName}Binding`];
+    const model = this.options[`${optionName}BindingModel`] || this.model;
+    return resolve({
+      binding,
+      model,
+      normalize,
+      option: this.options[optionName],
+      bindingValue: this.options[`${optionName}BindingValue`]
+    });
   }
 };
 
@@ -1255,6 +1221,11 @@ var attributeBinding = {
  *   An array of prefixes to lookup translations for labels and
  *   inline help texts based on attribute names.
  *
+ * @param {string} [options.attributeTranslationPropertyName]
+ *   Use this property name instead of `propertyName` for looking up
+ *   translations. Useful when the property name has been transformed
+ *   but translations should use the original name.
+ *
  * @param {string} [options.additionalInlineHelpText]
  *   A text that will be appended to the translation based inline
  *   text.
@@ -1276,6 +1247,9 @@ var attributeBinding = {
  *   Input will be disabled whenever the value of the `disabledBinding`
  *   attribute equals the value of this option.
  *
+ * @param {Backbone.Model} [options.disabledBindingModel]
+ *   Alternative model to bind to.
+ *
  * @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,
@@ -1292,16 +1266,18 @@ var attributeBinding = {
  *   Input will be visible whenever the value of the `visibleBinding`
  *   attribute equals the value of this option.
  *
+ * @param {Backbone.Model} [options.visibleBindingModel]
+ *   Alternative model to bind to.
+ *
  * @mixin
  */
-
-var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
+const inputView = {
+  ...attributeBinding,
   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.
@@ -1324,92 +1300,89 @@ var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
    * @since 0.9
    * @member
    */
-  attributeTranslationKeys: function attributeTranslationKeys$1(keyName, options) {
-    return attributeTranslationKeys(this.options.propertyName, keyName, _.extend({
+  attributeTranslationKeys: function (keyName, options) {
+    return attributeTranslationKeys(this.options.attributeTranslationPropertyName || this.options.propertyName, keyName, _.extend({
       prefixes: this.options.attributeTranslationKeyPrefixes,
       fallbackModelI18nKey: this.model.i18nKey
     }, options || {}));
   },
-  onRender: function onRender() {
+  onRender: function () {
     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());
+    if (this.options.hideLabel) {
+      this.ui.label.addClass('visually_hidden');
+    }
     this.updateInlineHelp();
     this.setLabelFor();
     this.setupBooleanAttributeBinding('disabled', this.updateDisabled);
     this.setupBooleanAttributeBinding('visible', this.updateVisible);
   },
-
   /**
    * The label to display in the form.
    * @return {string}
    */
-  labelText: function labelText() {
+  labelText: function () {
     return this.options.label || this.localizedAttributeName();
   },
-  localizedAttributeName: function localizedAttributeName() {
+  localizedAttributeName: function () {
     return findTranslation(this.attributeTranslationKeys('label', {
       fallbackPrefix: 'activerecord.attributes'
     }));
   },
-  updateInlineHelp: function updateInlineHelp() {
+  updateInlineHelp: function () {
     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() {
+  inlineHelpText: function () {
     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() {
+  setLabelFor() {
     if (this.ui.input && this.ui.label.length === 1 && !this.ui.input.attr('id')) {
-      var id = 'input_' + this.model.modelName + '_' + this.options.propertyName;
+      const id = 'input_' + this.model.modelName + '_' + this.options.propertyName;
       this.ui.input.attr('id', id);
       this.ui.label.attr('for', id);
     }
   },
-  isDisabled: function isDisabled() {
+  isDisabled: function () {
     return this.getBooleanAttributBoundOption('disabled');
   },
-  updateDisabled: function updateDisabled() {
+  updateDisabled: function () {
     this.$el.toggleClass('input-disabled', !!this.isDisabled());
     this.updateInlineHelp();
-
     if (this.ui.input) {
       this.updateDisabledAttribute(this.ui.input);
     }
   },
-  updateDisabledAttribute: function updateDisabledAttribute(element) {
+  updateDisabledAttribute: function (element) {
     if (this.isDisabled()) {
       element.attr('disabled', true);
     } else {
       element.removeAttr('disabled');
     }
   },
-  updateVisible: function updateVisible() {
+  updateVisible: function () {
     this.$el.toggleClass('hidden_via_binding', this.getBooleanAttributBoundOption('visible') === false);
   }
-});
+};
 
 function template$4(data) {
 var __p = '';
@@ -1425,8 +1398,7 @@ return __p
  *
  * @class
  */
-
-var CheckBoxGroupInputView = Marionette.ItemView.extend({
+const CheckBoxGroupInputView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: template$4,
   className: 'check_box_group_input',
@@ -1437,7 +1409,7 @@ var CheckBoxGroupInputView = Marionette.ItemView.extend({
     label: 'label',
     container: '.check_boxes_container'
   },
-  initialize: function initialize() {
+  initialize: function () {
     if (!this.options.texts) {
       if (!this.options.translationKeys) {
         var translationKeyPrefix = this.options.translationKeyPrefix || findKeyWithTranslation(this.attributeTranslationKeys('values', {
@@ -1447,34 +1419,31 @@ var CheckBoxGroupInputView = Marionette.ItemView.extend({
           return translationKeyPrefix + '.' + value;
         }, this);
       }
-
       this.options.texts = _.map(this.options.translationKeys, function (key) {
         return I18n$1.t(key);
       });
     }
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.ui.label.attr('for', this.cid);
     this.appendOptions();
     this.load();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
-  appendOptions: function appendOptions() {
+  appendOptions: function () {
     _.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() {
+  save: function () {
     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() {
+  load: function () {
     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]);
@@ -1502,8 +1471,7 @@ return __p
  *
  * @class
  */
-
-var UrlDisplayView = Marionette.ItemView.extend({
+const UrlDisplayView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: template$5,
   ui: {
@@ -1513,43 +1481,21 @@ var UrlDisplayView = Marionette.ItemView.extend({
     'change': 'update'
   },
   events: {
-    'click a': function clickA(event) {
+    'click a': function (event) {
       // Ensure default is not prevented by parent event listener.
       event.stopPropagation();
     }
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.update();
   },
-  update: function update() {
-    var url = this.model.get('original_url');
+  update: function () {
+    var url = this.model.get(this.options.propertyName || 'original_url');
     this.$el.toggle(this.model.isUploaded() && !_.isEmpty(url));
     this.ui.link.attr('href', url);
   }
 });
 
-function _classCallCheck(instance, Constructor) {
-  if (!(instance instanceof Constructor)) {
-    throw new TypeError("Cannot call a class as a function");
-  }
-}
-
-function _defineProperties(target, props) {
-  for (var i = 0; i < props.length; i++) {
-    var descriptor = props[i];
-    descriptor.enumerable = descriptor.enumerable || false;
-    descriptor.configurable = true;
-    if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
-  }
-}
-
-function _createClass(Constructor, protoProps, staticProps) {
-  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-  if (staticProps) _defineProperties(Constructor, staticProps);
-  return Constructor;
-}
-
 /**
  * Input view for a number.
  *
@@ -1562,90 +1508,73 @@ function _createClass(Constructor, protoProps, staticProps) {
  *
  * @class
  */
-
-var NumberInputView = Marionette.ItemView.extend({
+const NumberInputView = 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    <input type=\"text\" dir=\"auto\" />\n  ";
-  },
+  template: () => `
+    <label>
+      <span class="name"></span>
+      <span class="inline_help"></span>
+    </label>
+    <input type="text" dir="auto" />
+  `,
   ui: {
     input: 'input'
   },
   events: {
     'change': 'onChange'
   },
-  initialize: function initialize() {
+  initialize() {
     this.parser = new NumberParser(this.options.locale);
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.load();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
-  onChange: function onChange() {
+  onChange: function () {
     this.save();
     this.load();
   },
-  onClose: function onClose() {
+  onClose: function () {
     this.save();
   },
-  save: function save() {
-    var inputValue = this.ui.input.val();
+  save: function () {
+    const inputValue = this.ui.input.val();
     this.model.set(this.options.propertyName, this.parser.parse(inputValue) || 0);
   },
-  load: function load() {
-    var input = this.ui.input;
-    var value = this.model.get(this.options.propertyName) || 0;
+  load: function () {
+    const input = this.ui.input;
+    const value = this.model.get(this.options.propertyName) || 0;
     input.val(value.toLocaleString(this.options.locale, {
       useGrouping: false
     }));
   },
-  displayValidationError: function displayValidationError(message) {
+  displayValidationError: function (message) {
     this.$el.addClass('invalid');
     this.ui.input.attr('title', message);
   },
-  resetValidationError: function resetValidationError(message) {
+  resetValidationError: function (message) {
     this.$el.removeClass('invalid');
     this.ui.input.attr('title', '');
   }
 });
-
-var NumberParser = /*#__PURE__*/function () {
-  function NumberParser(locale) {
-    _classCallCheck(this, NumberParser);
-
-    var format = new Intl.NumberFormat(locale);
-    var parts = format.formatToParts(12345.6);
-    var numerals = Array.from({
+class NumberParser {
+  constructor(locale) {
+    const format = new Intl.NumberFormat(locale);
+    const parts = format.formatToParts(12345.6);
+    const numerals = Array.from({
       length: 10
-    }).map(function (_, i) {
-      return format.format(i);
-    });
-    var index = new Map(numerals.map(function (d, i) {
-      return [d, i];
-    }));
-    this._group = new RegExp("[".concat(parts.find(function (d) {
-      return d.type === "group";
-    }).value, "]"), "g");
-    this._decimal = new RegExp("[".concat(parts.find(function (d) {
-      return d.type === "decimal";
-    }).value, "]"));
-    this._numeral = new RegExp("[".concat(numerals.join(""), "]"), "g");
-
-    this._index = function (d) {
-      return index.get(d);
-    };
+    }).map((_, i) => format.format(i));
+    const index = new Map(numerals.map((d, i) => [d, i]));
+    this._group = new RegExp(`[${parts.find(d => d.type === "group").value}]`, "g");
+    this._decimal = new RegExp(`[${parts.find(d => d.type === "decimal").value}]`);
+    this._numeral = new RegExp(`[${numerals.join("")}]`, "g");
+    this._index = d => index.get(d);
   }
-
-  _createClass(NumberParser, [{
-    key: "parse",
-    value: function parse(string) {
-      string = string.trim().replace(this._group, "").replace(this._decimal, ".").replace(this._numeral, this._index);
-      return string ? +string : NaN;
-    }
-  }]);
-
-  return NumberParser;
-}();
+  parse(string) {
+    string = string.trim().replace(this._group, "").replace(this._decimal, ".").replace(this._numeral, this._index);
+    return string ? +string : NaN;
+  }
+}
 
 /**
  * Text based input view that can display a placeholder.
@@ -1668,21 +1597,20 @@ var NumberParser = /*#__PURE__*/function () {
  *   Obtain placeholder by looking up the configured `propertyName`
  *   inside a given model.
  */
-var inputWithPlaceholderText = {
-  onRender: function onRender() {
+const inputWithPlaceholderText = {
+  onRender: function () {
     this.updatePlaceholder();
-
     if (this.options.placeholderBinding) {
       this.listenTo(this.model, 'change:' + this.options.placeholderBinding, this.updatePlaceholder);
     }
   },
-  updateDisabled: function updateDisabled() {
+  updateDisabled: function () {
     this.updatePlaceholder();
   },
-  updatePlaceholder: function updatePlaceholder() {
+  updatePlaceholder: function () {
     this.ui.input.attr('placeholder', this.placeholderText());
   },
-  placeholderText: function placeholderText() {
+  placeholderText: function () {
     if (!this.isDisabled() || !this.options.hidePlaceholderIfDisabled) {
       if (this.options.placeholder) {
         if (typeof this.options.placeholder == 'function') {
@@ -1694,30 +1622,24 @@ var inputWithPlaceholderText = {
         return this.placeholderModelValue();
       }
     }
-
     return '';
   },
-  placeholderModelValue: function placeholderModelValue() {
+  placeholderModelValue: function () {
     return this.options.placeholderModel && this.options.placeholderModel.get(this.options.propertyName);
   }
 };
 
-var viewWithValidationErrorMessages = {
-  onRender: function onRender() {
+const viewWithValidationErrorMessages = {
+  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] || [];
-
+  updateValidationErrorMessages() {
+    const 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>"));
-      });
+      errors.forEach(error => this.validationErrorList.append(`<li>${error}</li>`));
       this.$el.addClass('invalid');
     } else if (this.validationErrorList) {
       this.validationErrorList.remove();
@@ -1752,8 +1674,7 @@ return __p
  *
  * @class
  */
-
-var TextInputView = Marionette.ItemView.extend({
+const TextInputView = Marionette.ItemView.extend({
   mixins: [inputView, inputWithPlaceholderText, viewWithValidationErrorMessages],
   template: template$6,
   ui: {
@@ -1762,41 +1683,40 @@ var TextInputView = Marionette.ItemView.extend({
   events: {
     'change': 'onChange'
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.load();
     this.validate();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
-  onChange: function onChange() {
+  onChange: function () {
     if (this.validate()) {
       this.save();
     }
   },
-  onClose: function onClose() {
+  onClose: function () {
     if (this.validate()) {
       this.save();
     }
   },
-  save: function save() {
+  save: function () {
     this.model.set(this.options.propertyName, this.ui.input.val());
   },
-  load: function load() {
+  load: function () {
     var input = this.ui.input;
-    input.val(this.model.get(this.options.propertyName)); // set mysql varchar length as default for non-legacy data
+    input.val(this.model.get(this.options.propertyName));
 
-    this.options.maxLength = this.options.maxLength || 255; // do not validate legacy data which length exceeds the specified maximum
+    // 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() {
+  validate: function () {
     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
@@ -1807,112 +1727,763 @@ var TextInputView = Marionette.ItemView.extend({
       return true;
     }
   },
-  displayValidationError: function displayValidationError(message) {
+  displayValidationError: function (message) {
     this.$el.addClass('invalid');
     this.ui.input.attr('title', message);
   },
-  resetValidationError: function resetValidationError(message) {
+  resetValidationError: function (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
- */
+function template$7(data) {
+var __p = '';
+__p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<div class="file_name_input-wrapper">\n  <input type="text" dir="auto" />\n  <span class="file_name_input-extension"></span>\n</div>\n';
+return __p
+}
 
-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) {
-        this._saving = true;
+const FileNameInputView = TextInputView.extend({
+  template: template$7,
+  className: 'file_name_input',
+  ui: Object.assign({}, TextInputView.prototype.ui, {
+    extension: '.file_name_input-extension'
+  }),
+  onRender: function () {
+    TextInputView.prototype.onRender.call(this);
+  },
+  save: function () {
+    const baseName = this.ui.input.val();
+    const extension = this.ui.extension.text();
+    this.model.set(this.options.propertyName, baseName + extension);
+  },
+  load: function () {
+    const fullName = this.model.get(this.options.propertyName) || '';
+    const match = fullName.match(/^(.*?)(\.[^.]+)?$/);
+    const baseName = match ? match[1] : fullName;
+    const extension = match && match[2] ? match[2] : '';
+    this.ui.input.val(baseName);
+    this.ui.extension.text(extension);
+    this.options.maxLength = this.options.maxLength || 255;
+  }
+});
 
-        if (color === this.defaultValue()) {
-          this.model.unset(this.options.propertyName);
-        } else {
-          this.model.set(this.options.propertyName, color);
-        }
+// Inspired by https://github.com/mdbassit/Coloris
+const ctx = typeof OffscreenCanvas !== 'undefined' && new OffscreenCanvas(1, 1).getContext('2d');
+const DEFAULT_DISPLAY_COLOR = {
+  r: 255,
+  g: 255,
+  b: 255,
+  a: 1
+};
+let nextDescriptionId = 0;
+const PICKER_HTML = '<div class="color_picker-gradient" role="application">' + '<div class="color_picker-marker" tabindex="0"></div>' + '</div>' + '<div class="color_picker-hue">' + '<input type="range" min="0" max="360" step="1">' + '<div></div>' + '</div>' + '<div class="color_picker-alpha">' + '<input type="range" min="0" max="100" step="1">' + '<div></div>' + '<span></span>' + '</div>' + '<div class="color_picker-swatches"></div>';
+class ColorPicker {
+  constructor(input, options = {}) {
+    this._input = input;
+    this._colorAreaDims = {};
+    this._alpha = options.alpha || false;
+    this._onChange = options.onChange;
+    this._defaultColor = strToRGBA(options.defaultValue);
+    this._fallbackColor = strToRGBA(options.fallbackColor);
+    this._fallbackColorDescription = options.fallbackColorDescription;
+    this._swatches = options.swatches || [];
+    this._wrapInput();
+    this._createPicker();
+    this._renderSwatches();
+    this._bindEvents();
+    this._updateColor(strToRGBA(this._input.value), {
+      silent: true
+    });
+  }
+  setValue(str) {
+    this._input.value = str || '';
+    this._updateColor(strToRGBA(str), {
+      silent: true
+    });
+  }
+  update(options) {
+    if ('defaultValue' in options) {
+      this._defaultColor = strToRGBA(options.defaultValue);
+    }
+    if ('fallbackColor' in options) {
+      this._fallbackColor = strToRGBA(options.fallbackColor);
+      this._updateColor(this._currentColor, {
+        silent: true
+      });
+    }
+    if (options.swatches) {
+      this._swatches = options.swatches;
+      this._renderSwatches();
+    }
+  }
+  destroy() {
+    this._close();
+    this._unbindEvents();
+    this._picker.remove();
+    this._unwrapInput();
+  }
 
-        this._saving = false;
-      }, this)
+  // Setup
+
+  _createPicker() {
+    this._picker = document.createElement('div');
+    this._picker.className = 'color_picker';
+    this._picker.classList.toggle('color_picker-no_alpha', !this._alpha);
+    this._picker.innerHTML = PICKER_HTML;
+    this._input.parentNode.appendChild(this._picker);
+    this._colorArea = this._picker.querySelector('.color_picker-gradient');
+    this._colorMarker = this._picker.querySelector('.color_picker-marker');
+    this._hueSlider = this._picker.querySelector('.color_picker-hue input');
+    this._hueMarker = this._picker.querySelector('.color_picker-hue div');
+    this._alphaSlider = this._picker.querySelector('.color_picker-alpha input');
+    this._alphaMarker = this._picker.querySelector('.color_picker-alpha div');
+    this._swatchesContainer = this._picker.querySelector('.color_picker-swatches');
+    this._hueSlider.setAttribute('aria-label', I18n$1.t('pageflow.ui.color_picker.hue'));
+    if (this._alpha) {
+      this._alphaSlider.setAttribute('aria-label', I18n$1.t('pageflow.ui.color_picker.opacity'));
+    }
+  }
+  _wrapInput() {
+    const parent = this._input.parentNode;
+    if (!parent.classList.contains('color_picker-field')) {
+      const wrapper = document.createElement('div');
+      wrapper.innerHTML = '<span></span>';
+      parent.insertBefore(wrapper, this._input);
+      wrapper.className = 'color_picker-field';
+      wrapper.appendChild(this._input);
+      if (this._fallbackColorDescription) {
+        this._descriptionElement = document.createElement('span');
+        this._descriptionElement.hidden = true;
+        this._descriptionElement.id = 'color_picker_desc_' + nextDescriptionId++;
+        wrapper.appendChild(this._descriptionElement);
+        this._input.setAttribute('aria-describedby', this._descriptionElement.id);
+      }
+    }
+  }
+  _unwrapInput() {
+    const wrapper = this._input.parentNode;
+    if (wrapper && wrapper.classList.contains('color_picker-field')) {
+      const parent = wrapper.parentNode;
+      parent.insertBefore(this._input, wrapper);
+      parent.removeChild(wrapper);
+    }
+  }
+  _renderSwatches() {
+    const swatches = this._swatches.map(normalizeSwatch).filter(swatch => this._alpha || !isTranslucentSwatch(swatch.value));
+    this._swatchesContainer.textContent = '';
+    this._swatchesContainer.classList.toggle('color_picker-empty', !swatches.length);
+    if (!swatches.length) {
+      return;
+    }
+    groupSwatches(swatches).forEach((group, index) => {
+      if (index > 0) {
+        const divider = document.createElement('span');
+        divider.className = 'color_picker-swatch_divider';
+        this._swatchesContainer.appendChild(divider);
+      }
+      group.swatches.forEach(({
+        value,
+        text
+      }) => {
+        const button = document.createElement('button');
+        button.setAttribute('type', 'button');
+        button.title = text;
+        button.style.color = value;
+        button.textContent = value;
+        this._swatchesContainer.appendChild(button);
+      });
     });
-    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+  }
 
-    if (this.options.defaultValueBinding) {
-      this.listenTo(this.model, 'change:' + this.options.defaultValueBinding, this.updateSettings);
+  // Lifecycle
+
+  _open() {
+    if (this._picker.classList.contains('color_picker-open')) {
+      return;
+    }
+    this._picker.classList.add('color_picker-open');
+    this._updatePosition();
+    this._setColorFromStr(this._input.value);
+    this._addDocListeners();
+  }
+  _close() {
+    if (!this._picker.classList.contains('color_picker-open')) {
+      return;
+    }
+    this._picker.classList.remove('color_picker-open');
+    this._removeDocListeners();
+  }
+  _updatePosition() {
+    const margin = 2;
+    const pickerHeight = this._picker.offsetHeight;
+    const pickerWidth = this._picker.offsetWidth;
+    const inputRect = this._input.getBoundingClientRect();
+    const clipRect = getClipRect(this._input);
+    const spaceBelow = clipRect.bottom - inputRect.bottom;
+    const flipTop = pickerHeight + margin > spaceBelow && pickerHeight + margin <= inputRect.top - clipRect.top;
+    this._picker.classList.toggle('color_picker-top', flipTop);
+    if (flipTop) {
+      this._picker.style.top = 'auto';
+      this._picker.style.bottom = `calc(100% + ${margin}px)`;
+    } else {
+      this._picker.style.top = `calc(100% + ${margin}px)`;
+      this._picker.style.bottom = '';
+    }
+    if (inputRect.left + pickerWidth > clipRect.right) {
+      this._picker.style.left = 'auto';
+      this._picker.style.right = '0';
+    } else {
+      this._picker.style.left = '0';
+      this._picker.style.right = '';
+    }
+    const areaRect = this._colorArea.getBoundingClientRect();
+    this._colorAreaDims = {
+      width: this._colorArea.offsetWidth,
+      height: this._colorArea.offsetHeight,
+      x: areaRect.x + window.scrollX,
+      y: areaRect.y + window.scrollY
+    };
+  }
+
+  // Color interaction
+
+  _setColorFromStr(str, options) {
+    this._updateColor(strToRGBA(str), options);
+    const {
+      h,
+      s,
+      v,
+      a
+    } = rgbaToHSVA(this._displayColor);
+    this._hueSlider.value = h;
+    this._picker.style.color = `hsl(${h}, 100%, 50%)`;
+    this._hueMarker.style.left = `${h / 360 * 100}%`;
+    this._colorMarker.style.left = `${this._colorAreaDims.width * s / 100}px`;
+    this._colorMarker.style.top = `${this._colorAreaDims.height - this._colorAreaDims.height * v / 100}px`;
+    this._alphaSlider.value = a * 100;
+    this._alphaMarker.style.left = `${a * 100}%`;
+  }
+  _moveMarker(event) {
+    let x = event.pageX - this._colorAreaDims.x;
+    let y = event.pageY - this._colorAreaDims.y;
+    this._setMarkerPosition(x, y);
+    event.preventDefault();
+    event.stopPropagation();
+  }
+  _moveMarkerOnKeydown(dx, dy) {
+    let x = this._colorMarker.style.left.replace('px', '') * 1 + dx;
+    let y = this._colorMarker.style.top.replace('px', '') * 1 + dy;
+    this._setMarkerPosition(x, y);
+  }
+  _setHue() {
+    const hue = this._hueSlider.value * 1;
+    const x = this._colorMarker.style.left.replace('px', '') * 1;
+    const y = this._colorMarker.style.top.replace('px', '') * 1;
+    this._picker.style.color = `hsl(${hue}, 100%, 50%)`;
+    this._hueMarker.style.left = `${hue / 360 * 100}%`;
+    this._setColorAtPosition(x, y);
+  }
+  _setAlpha() {
+    const alpha = this._alphaSlider.value / 100;
+    this._alphaMarker.style.left = `${alpha * 100}%`;
+    this._updateColor({
+      a: alpha
+    });
+    this._syncInput();
+  }
+  _setMarkerPosition(x, y) {
+    x = x < 0 ? 0 : x > this._colorAreaDims.width ? this._colorAreaDims.width : x;
+    y = y < 0 ? 0 : y > this._colorAreaDims.height ? this._colorAreaDims.height : y;
+    this._colorMarker.style.left = `${x}px`;
+    this._colorMarker.style.top = `${y}px`;
+    this._setColorAtPosition(x, y);
+    this._colorMarker.focus();
+  }
+  _setColorAtPosition(x, y) {
+    const hsva = {
+      h: this._hueSlider.value * 1,
+      s: x / this._colorAreaDims.width * 100,
+      v: 100 - y / this._colorAreaDims.height * 100,
+      a: this._alphaSlider.value / 100
+    };
+    const rgba = hsvaToRGBA(hsva);
+    this._updateColor(rgba);
+    this._syncInput();
+  }
+  _updateColor(rgba, {
+    silent
+  } = {}) {
+    rgba = rgba || this._defaultColor;
+    if (rgba && !this._alpha) rgba.a = 1;
+    this._currentColor = rgba && {
+      ...this._displayColor,
+      ...rgba
+    };
+    this._displayColor = this._currentColor || this._fallbackColor || DEFAULT_DISPLAY_COLOR;
+    const hex = rgbaToHex(this._displayColor);
+    const opaqueHex = hex.substring(0, 7);
+    this._colorMarker.style.color = opaqueHex;
+    this._alphaMarker.parentNode.style.color = opaqueHex;
+    this._alphaMarker.style.color = hex;
+    const formatted = this._formatHex(this._currentColor);
+    const fallbackHex = this._formatHex(this._fallbackColor);
+    const wrapper = this._input.parentNode;
+    if (wrapper && wrapper.classList.contains('color_picker-field')) {
+      wrapper.style.color = formatted || fallbackHex || '';
+    }
+    if (this._descriptionElement) {
+      this._descriptionElement.textContent = !formatted && fallbackHex ? `${this._fallbackColorDescription}: ${fallbackHex}` : '';
+    }
+
+    // Force repaint the color and alpha gradients (Chrome workaround)
+    this._colorArea.style.display = 'none';
+    this._colorArea.offsetHeight;
+    this._colorArea.style.display = '';
+    this._alphaMarker.nextElementSibling.style.display = 'none';
+    this._alphaMarker.nextElementSibling.offsetHeight;
+    this._alphaMarker.nextElementSibling.style.display = '';
+    if (!silent && this._onChange) this._onChange(formatted);
+  }
+  _syncInput() {
+    this._input.value = this._formatHex(this._currentColor) || '';
+  }
+  _formatHex(rgba) {
+    if (!rgba) return null;
+    const hex = rgbaToHex(rgba);
+    return rgba.a < 1 ? hex : hex.substring(0, 7);
+  }
+  _normalizeInputValue() {
+    const hex = this._formatHex(this._currentColor) || '';
+    if (hex !== this._input.value) {
+      this._input.value = hex;
     }
+  }
+
+  // Event wiring
 
-    this.updateSettings();
+  _bindEvents() {
+    this._onInputClick = () => {
+      this._open();
+    };
+    this._onInputKeydown = event => {
+      if (event.key === 'Enter') {
+        this._normalizeInputValue();
+      }
+      if (this._picker.classList.contains('color_picker-open')) {
+        return;
+      }
+      if (event.key === 'Enter' || event.key === 'ArrowDown' && event.altKey) {
+        this._open();
+        event.stopPropagation();
+      }
+    };
+    this._onPickerMousedown = event => {
+      this._picker.classList.remove('color_picker-keyboard_nav');
+      event.stopPropagation();
+    };
+    this._onAreaPointerdown = event => {
+      event.preventDefault();
+      this._colorArea.setPointerCapture(event.pointerId);
+      this._dragging = true;
+    };
+    this._onAreaPointermove = event => {
+      if (this._dragging) {
+        this._moveMarker(event);
+      }
+    };
+    this._onAreaPointerup = () => {
+      this._dragging = false;
+    };
+    this._onInputEvent = () => {
+      if (this._picker.classList.contains('color_picker-open')) {
+        this._setColorFromStr(this._input.value);
+      } else {
+        this._updateColor(strToRGBA(this._input.value));
+      }
+    };
+    this._onSwatchClick = event => {
+      if (event.target.closest('.color_picker-swatches button')) {
+        this._setColorFromStr(event.target.closest('.color_picker-swatches button').textContent);
+        this._syncInput();
+      }
+    };
+    this._onMarkerKeydown = event => {
+      const movements = {
+        ArrowUp: [0, -1],
+        ArrowDown: [0, 1],
+        ArrowLeft: [-1, 0],
+        ArrowRight: [1, 0]
+      };
+      if (movements[event.key]) {
+        this._moveMarkerOnKeydown(...movements[event.key]);
+        event.preventDefault();
+      }
+    };
+    this._onAreaClick = event => this._moveMarker(event);
+    this._onHueInput = () => this._setHue();
+    this._onAlphaInput = () => this._setAlpha();
+    const wrapper = this._input.parentNode;
+    this._onFocusout = event => {
+      if (event.target === this._input) {
+        this._normalizeInputValue();
+      }
+      if (this._picker.classList.contains('color_picker-open')) {
+        if (event.relatedTarget && !wrapper.contains(event.relatedTarget)) {
+          this._close();
+        }
+      }
+    };
+    this._input.addEventListener('click', this._onInputClick);
+    this._input.addEventListener('keydown', this._onInputKeydown);
+    this._input.addEventListener('input', this._onInputEvent);
+    wrapper.addEventListener('focusout', this._onFocusout);
+    this._picker.addEventListener('mousedown', this._onPickerMousedown);
+    this._colorArea.addEventListener('pointerdown', this._onAreaPointerdown);
+    this._colorArea.addEventListener('pointermove', this._onAreaPointermove);
+    this._colorArea.addEventListener('pointerup', this._onAreaPointerup);
+    this._swatchesContainer.addEventListener('click', this._onSwatchClick);
+    this._colorMarker.addEventListener('keydown', this._onMarkerKeydown);
+    this._colorArea.addEventListener('click', this._onAreaClick);
+    this._hueSlider.addEventListener('input', this._onHueInput);
+    this._alphaSlider.addEventListener('input', this._onAlphaInput);
+  }
+  _unbindEvents() {
+    this._input.removeEventListener('click', this._onInputClick);
+    this._input.removeEventListener('keydown', this._onInputKeydown);
+    this._input.removeEventListener('input', this._onInputEvent);
+    const wrapper = this._input.parentNode;
+    if (wrapper && wrapper.classList.contains('color_picker-field')) {
+      wrapper.removeEventListener('focusout', this._onFocusout);
+    }
+    this._picker.removeEventListener('mousedown', this._onPickerMousedown);
+    this._colorArea.removeEventListener('pointerdown', this._onAreaPointerdown);
+    this._colorArea.removeEventListener('pointermove', this._onAreaPointermove);
+    this._colorArea.removeEventListener('pointerup', this._onAreaPointerup);
+    this._swatchesContainer.removeEventListener('click', this._onSwatchClick);
+    this._colorMarker.removeEventListener('keydown', this._onMarkerKeydown);
+    this._colorArea.removeEventListener('click', this._onAreaClick);
+    this._hueSlider.removeEventListener('input', this._onHueInput);
+    this._alphaSlider.removeEventListener('input', this._onAlphaInput);
+    this._removeDocListeners();
+  }
+  _addDocListeners() {
+    this._onDocMousedown = event => {
+      this._picker.classList.remove('color_picker-keyboard_nav');
+      if (!this._input.parentNode.contains(event.target)) {
+        this._close();
+      }
+    };
+    this._onDocKeydown = event => {
+      if (event.key === 'Escape' || event.key === 'Enter' && event.target.tagName !== 'BUTTON') {
+        this._close();
+        this._input.focus({
+          preventScroll: true
+        });
+        return;
+      }
+      const navKeys = ['Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+      if (navKeys.includes(event.key)) {
+        this._picker.classList.add('color_picker-keyboard_nav');
+      }
+    };
+    document.addEventListener('mousedown', this._onDocMousedown);
+    document.addEventListener('keydown', this._onDocKeydown);
+  }
+  _removeDocListeners() {
+    if (this._onDocMousedown) {
+      document.removeEventListener('mousedown', this._onDocMousedown);
+      document.removeEventListener('keydown', this._onDocKeydown);
+    }
+  }
+}
+function strToRGBA(str) {
+  if (!str) return null;
+  const regex = /^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i;
+  let match, rgba;
+  if (!ctx) {
+    match = regex.exec(str);
+    if (match) {
+      return {
+        r: match[3] * 1,
+        g: match[4] * 1,
+        b: match[5] * 1,
+        a: match[6] * 1 || 1
+      };
+    }
+    if (!/^#[0-9a-f]{3,8}$/i.test(str)) return null;
+    let hex = str.replace('#', '');
+    if (hex.length === 3 || hex.length === 4) {
+      hex = hex.split('').map(c => c + c).join('');
+    }
+    if (hex.length !== 6 && hex.length !== 8) return null;
+    match = hex.match(/.{2}/g).map(h => parseInt(h, 16));
+    return {
+      r: match[0],
+      g: match[1],
+      b: match[2],
+      a: match[3] !== undefined ? match[3] / 255 : 1
+    };
+  }
+  ctx.fillStyle = '#010101';
+  ctx.fillStyle = str;
+  if (ctx.fillStyle === '#010101') {
+    ctx.fillStyle = '#020202';
+    ctx.fillStyle = str;
+    if (ctx.fillStyle === '#020202') return null;
+  }
+  match = regex.exec(ctx.fillStyle);
+  if (match) {
+    rgba = {
+      r: match[3] * 1,
+      g: match[4] * 1,
+      b: match[5] * 1,
+      a: match[6] * 1
+    };
+  } else {
+    match = ctx.fillStyle.replace('#', '').match(/.{2}/g).map(h => parseInt(h, 16));
+    rgba = {
+      r: match[0],
+      g: match[1],
+      b: match[2],
+      a: 1
+    };
+  }
+  return rgba;
+}
+function rgbaToHSVA(rgba) {
+  const red = rgba.r / 255;
+  const green = rgba.g / 255;
+  const blue = rgba.b / 255;
+  const xmax = Math.max(red, green, blue);
+  const xmin = Math.min(red, green, blue);
+  const chroma = xmax - xmin;
+  const value = xmax;
+  let hue = 0;
+  let saturation = 0;
+  if (chroma) {
+    if (xmax === red) {
+      hue = (green - blue) / chroma;
+    }
+    if (xmax === green) {
+      hue = 2 + (blue - red) / chroma;
+    }
+    if (xmax === blue) {
+      hue = 4 + (red - green) / chroma;
+    }
+    if (xmax) {
+      saturation = chroma / xmax;
+    }
+  }
+  hue = Math.floor(hue * 60);
+  return {
+    h: hue < 0 ? hue + 360 : hue,
+    s: Math.round(saturation * 100),
+    v: Math.round(value * 100),
+    a: rgba.a
+  };
+}
+function hsvaToRGBA(hsva) {
+  const saturation = hsva.s / 100;
+  const value = hsva.v / 100;
+  let chroma = saturation * value;
+  let hueBy60 = hsva.h / 60;
+  let x = chroma * (1 - Math.abs(hueBy60 % 2 - 1));
+  let m = value - chroma;
+  chroma = chroma + m;
+  x = x + m;
+  const index = Math.floor(hueBy60) % 6;
+  const red = [chroma, x, m, m, x, chroma][index];
+  const green = [x, chroma, chroma, x, m, m][index];
+  const blue = [m, m, x, chroma, chroma, x][index];
+  return {
+    r: Math.round(red * 255),
+    g: Math.round(green * 255),
+    b: Math.round(blue * 255),
+    a: hsva.a
+  };
+}
+function rgbaToHex(rgba) {
+  let R = rgba.r.toString(16);
+  let G = rgba.g.toString(16);
+  let B = rgba.b.toString(16);
+  let A = Math.round(rgba.a * 255).toString(16);
+  if (rgba.r < 16) {
+    R = '0' + R;
+  }
+  if (rgba.g < 16) {
+    G = '0' + G;
+  }
+  if (rgba.b < 16) {
+    B = '0' + B;
+  }
+  if (rgba.a * 255 < 16) {
+    A = '0' + A;
+  }
+  return '#' + R + G + B + A;
+}
+function getClipRect(element) {
+  const viewport = {
+    top: 0,
+    left: 0,
+    right: document.documentElement.clientWidth,
+    bottom: document.documentElement.clientHeight
+  };
+  let ancestor = element.parentElement;
+  while (ancestor && ancestor !== document.documentElement) {
+    const overflow = getComputedStyle(ancestor).overflow;
+    if (overflow !== 'visible') {
+      const rect = ancestor.getBoundingClientRect();
+      return {
+        top: Math.max(viewport.top, rect.top),
+        left: Math.max(viewport.left, rect.left),
+        right: Math.min(viewport.right, rect.right),
+        bottom: Math.min(viewport.bottom, rect.bottom)
+      };
+    }
+    ancestor = ancestor.parentElement;
+  }
+  return viewport;
+}
+function isTranslucentSwatch(str) {
+  return str.length > 7 && str.slice(-2).toLowerCase() !== 'ff';
+}
+function normalizeSwatch(swatch) {
+  return typeof swatch === 'string' ? {
+    value: swatch,
+    text: swatch
+  } : {
+    value: swatch.value,
+    text: swatch.text || swatch.value,
+    group: swatch.group
+  };
+}
+function groupSwatches(swatches) {
+  const groups = [];
+  const groupsByKey = new Map();
+  swatches.forEach(swatch => {
+    const key = swatch.group || '';
+    let group = groupsByKey.get(key);
+    if (!group) {
+      group = {
+        key,
+        swatches: []
+      };
+      groupsByKey.set(key, group);
+      groups.push(group);
+    }
+    group.swatches.push(swatch);
+  });
+  return groups;
+}
+
+function template$8(data) {
+var __p = '';
+__p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" dir="auto" autocomplete="off" />\n';
+return __p
+}
+
+/**
+ * Input view for a color value in hex representation.
+ *
+ * See {@link inputWithPlaceholderText} for placeholder related
+ * further options.  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|function} [options.placeholderColor]
+ *   Color to display in swatch by default.
+ *
+ * @param {string} [options.placeholderColorBinding]
+ *   Name of an attribute the placeholder color depends on. If a function
+ *   is used as placeholderColor option, it will be passed the value of the
+ *   placeholderColorBinding attribute each time it changes.
+ *
+ * @param {boolean} [options.alpha]
+ *   Allow picking colors with alpha channel. When enabled, translucent
+ *   colors are stored in `#rrggbbaa` format. Fully opaque colors still
+ *   use `#rrggbb`.
+ *
+ * @param {Array<string|{value: string, text: string, group: string}>} [options.swatches]
+ *   Preset colors to be displayed inside the picker drop down. Each
+ *   entry is either a color string or an object with a `value` color,
+ *   a `text` label shown as the swatch's tooltip and an optional
+ *   `group` key. Consecutive swatches with a different `group` are
+ *   separated by a divider in the picker. The default value, if
+ *   present, is always used as the first swatch automatically. Swatches
+ *   are deduplicated by value.
+ *
+ * @class
+ */
+const ColorInputView = Marionette.ItemView.extend({
+  mixins: [inputView, inputWithPlaceholderText],
+  template: template$8,
+  className: 'color_input',
+  ui: {
+    input: 'input'
   },
-  updateSettings: function updateSettings() {
-    this.resetSwatchesInStoredSettings();
-    this.ui.input.minicolors('settings', {
+  onRender: function () {
+    this.setupAttributeBinding('placeholderColor', this.updatePlaceholderColor);
+    this._colorPicker = new ColorPicker(this.ui.input[0], {
+      alpha: this.options.alpha,
       defaultValue: this.defaultValue(),
-      swatches: this.getSwatches()
+      fallbackColor: this.getAttributeBoundOption('placeholderColor'),
+      fallbackColorDescription: this.options.placeholderColorDescription,
+      swatches: this.getSwatches(),
+      onChange: this._debouncedOnChange()
     });
+    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.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);
+  updatePlaceholderColor(value) {
+    if (this._colorPicker) {
+      this._colorPicker.update({
+        fallbackColor: value
+      });
     }
   },
-  load: function load() {
+  updateSettings: function () {
+    this._colorPicker.update({
+      defaultValue: this.defaultValue(),
+      swatches: this.getSwatches()
+    });
+    this.load();
+  },
+  load: function () {
+    var color = this.model.get(this.options.propertyName) || this.defaultValue() || '';
     if (!this._saving) {
-      this.ui.input.minicolors('value', this.model.get(this.options.propertyName) || this.defaultValue());
+      this._colorPicker.setValue(color);
     }
-
     this.$el.toggleClass('is_default', !this.model.has(this.options.propertyName));
   },
-  refreshPicker: function refreshPicker() {
-    this.ui.input.minicolors('value', {});
+  onBeforeClose: function () {
+    this._colorPicker.destroy();
   },
-  getSwatches: function getSwatches() {
-    return _.chain([this.defaultValue(), this.options.swatches]).flatten().uniq().compact().value();
+  getSwatches: function () {
+    return _.chain([this.defaultValue(), this.options.swatches]).flatten().compact().map(swatch => typeof swatch === 'string' ? {
+      value: swatch
+    } : swatch).uniq(swatch => swatch.value).value();
   },
-  defaultValue: function defaultValue() {
+  defaultValue: function () {
     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) {
@@ -1920,10 +2491,23 @@ var ColorInputView = Marionette.ItemView.extend({
     } else {
       return bindingValue;
     }
+  },
+  _debouncedOnChange: function () {
+    const handler = _.bind(this._onChange, this);
+    return this.options.disableChangeDebounce ? handler : _.debounce(handler, 200);
+  },
+  _onChange: function (color) {
+    this._saving = true;
+    if (!color || color === this.defaultValue()) {
+      this.model.unset(this.options.propertyName);
+    } else {
+      this.model.set(this.options.propertyName, color);
+    }
+    this._saving = false;
   }
 });
 
-function template$7(data) {
+function template$9(data) {
 var __p = '';
 __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<select></select>';
 return __p
@@ -1935,8 +2519,12 @@ return __p
  *
  * @param {Object} [options]
  *
- * @param {string[]} [options.values]
- *   List of possible values to persist in the attribute.
+ * @param {string[]|function} [options.values]
+ *   List of possible values to persist in the attribute. Pass a
+ *   function returning the list to defer reading the values.
+ *
+ * @param {number} [options.defaultValue]
+ *   Default value to display if property is not set.
  *
  * @param {string[]} [options.texts]
  *   List of display texts for drop down items.
@@ -1985,7 +2573,10 @@ return __p
  *   Display text for the blank item.
  *
  * @param {string} [options.blankTranslationKey]
- *   Translation key to obtain display text for blank item.
+ *   Translation key to obtain display text for blank item. If neither
+ *   `blankText` nor `blankTranslationKey` are provided, the blank text
+ *   will be determined using `attributeTranslationKeyPrefixes` with
+ *   the suffix `blank`, similar to how labels are determined.
  *
  * @param {string} [options.placeholderValue]
  *   Include an item that sets the value of the attribute to a blank
@@ -2007,10 +2598,9 @@ return __p
  *
  * @class
  */
-
-var SelectInputView = Marionette.ItemView.extend({
+const SelectInputView = Marionette.ItemView.extend({
   mixins: [inputView],
-  template: template$7,
+  template: template$9,
   events: {
     'change': 'save'
   },
@@ -2018,23 +2608,21 @@ var SelectInputView = Marionette.ItemView.extend({
     select: 'select',
     input: 'select'
   },
-  initialize: function initialize() {
+  initialize: function () {
+    this.options.values = _.result(this.options, 'values');
     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', {
@@ -2044,53 +2632,50 @@ var SelectInputView = Marionette.ItemView.extend({
           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() {
+  onRender: function () {
     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() {
+  appendBlank: function () {
     if (!this.options.includeBlank) {
       return;
     }
-
+    var blankText = this.options.blankText;
     if (this.options.blankTranslationKey) {
-      this.options.blankText = I18n$1.t(this.options.blankTranslationKey);
+      blankText = I18n$1.t(this.options.blankTranslationKey);
+    } else if (!blankText) {
+      blankText = findTranslation(this.attributeTranslationKeys('blank'), {
+        defaultValue: I18n$1.t('pageflow.ui.views.inputs.select_input_view.none')
+      });
     }
-
     var option = document.createElement('option');
     option.value = '';
-    option.text = this.options.blankText || I18n$1.t('pageflow.ui.views.inputs.select_input_view.none');
+    option.text = blankText;
     this.ui.select.append(option);
   },
-  appendPlaceholder: function appendPlaceholder() {
+  appendPlaceholder: function () {
     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 = '';
@@ -2100,17 +2685,15 @@ var SelectInputView = Marionette.ItemView.extend({
       this.ui.select.append(option);
     }
   },
-  appendOptions: function appendOptions() {
+  appendOptions: function () {
     _.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);
@@ -2119,24 +2702,29 @@ var SelectInputView = Marionette.ItemView.extend({
       }
     }, this);
   },
-  findOrCreateOptGroup: function findOrCreateOptGroup(label) {
+  findOrCreateOptGroup: function (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());
+  save: function () {
+    const value = this.ui.select.val();
+    if ('defaultValue' in this.options && value === this.options.defaultValue) {
+      this.model.unset(this.options.propertyName);
+    } else {
+      this.model.set(this.options.propertyName, value);
+    }
   },
-  load: function load() {
+  load: function () {
     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 if ('defaultValue' in this.options) {
+        this.ui.select.val(this.options.defaultValue);
       } else {
         this.ui.select.val(this.ui.select.find('option:not([disabled]):first').val());
       }
@@ -2144,11 +2732,10 @@ var SelectInputView = Marionette.ItemView.extend({
   }
 });
 
-var ExtendedSelectInputView = SelectInputView.extend({
+const ExtendedSelectInputView = SelectInputView.extend({
   className: 'extended_select_input',
-  initialize: function initialize() {
+  initialize: function () {
     SelectInputView.prototype.initialize.apply(this, arguments);
-
     if (this.options.collection) {
       if (this.options.descriptionProperty) {
         this.options.descriptions = _.pluck(this.options.collection, this.options.descriptionProperty);
@@ -2156,47 +2743,42 @@ var ExtendedSelectInputView = SelectInputView.extend({
         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() {
+  onRender: function () {
     var view = this,
-        options = this.options;
+      options = this.options;
     SelectInputView.prototype.onRender.apply(this, arguments);
     $.widget("custom.extendedselectmenu", $.ui.selectmenu, {
-      _renderItem: function _renderItem(ul, item) {
+      _renderItem: function (ul, item) {
         var widget = this;
         var li = $('<li>', {
-          "class": item.value
+          class: item.value
         });
         var container = $('<div>', {
-          "class": 'text-container'
+          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
+            class: options.pictogramClass
           }).prependTo(li);
         }
-
         $('<p>', {
           text: item.label,
-          "class": 'item-text'
+          class: 'item-text'
         }).appendTo(container);
         $('<p>', {
           text: options.descriptions[index],
-          "class": 'item-description'
+          class: 'item-description'
         }).appendTo(container);
-
         if (options.helpLinkClicked) {
           $('<a>', {
             href: '#',
@@ -2207,15 +2789,13 @@ var ExtendedSelectInputView = SelectInputView.extend({
             return false;
           }).appendTo(li);
         }
-
         return li.appendTo(ul);
       },
-      _resizeMenu: function _resizeMenu() {
+      _resizeMenu: function () {
         this.menuWrap.addClass('extended_select_input_menu');
         var menuHeight = this.menu.height(),
-            menuOffset = this.button.offset().top + this.button.outerHeight(),
-            bodyHeight = $('body').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'
@@ -2237,13 +2817,13 @@ var ExtendedSelectInputView = SelectInputView.extend({
       }
     });
   },
-  select: function select(event, ui) {
+  select: function (event, ui) {
     this.ui.select.val(ui.item.value);
     this.save();
   }
 });
 
-function template$8(data) {
+function template$a(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) +
@@ -2300,10 +2880,9 @@ return __p
  *
  * @class
  */
-
-var TextAreaInputView = Marionette.ItemView.extend({
+const TextAreaInputView = Marionette.ItemView.extend({
   mixins: [inputView, inputWithPlaceholderText],
-  template: template$8,
+  template: template$a,
   className: 'text_area_input',
   ui: {
     input: 'textarea',
@@ -2327,7 +2906,7 @@ var TextAreaInputView = Marionette.ItemView.extend({
     'change .open_in_new_tab': 'setTargetFromOpenInNewTabCheckBox',
     'change .display_url': 'setUrlFromDisplayUrl'
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.ui.input.addClass(this.options.size);
     this.load();
     this.updatePlaceholder();
@@ -2376,7 +2955,6 @@ var TextAreaInputView = Marionette.ItemView.extend({
         }
       }
     });
-
     if (this.options.disableRichtext) {
       this.ui.toolbar.find('a[data-wysihtml5-command="bold"]').hide();
       this.ui.toolbar.find('a[data-wysihtml5-command="italic"]').hide();
@@ -2384,36 +2962,42 @@ var TextAreaInputView = Marionette.ItemView.extend({
       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() {
+  onClose: function () {
     this.editor.fire('destroy:composer');
   },
-  save: function save() {
+  updateDisabled: function () {
+    inputView.updateDisabled.call(this);
+    if (this.isDisabled()) {
+      this.editor.disable();
+      this.$el.attr('inert', true);
+    } else {
+      this.editor.enable();
+      this.$el.removeAttr('inert');
+    }
+  },
+  save: function () {
     this.model.set(this.options.propertyName, this.editor.getValue());
   },
-  load: function load() {
+  load: function () {
     this.ui.input.val(this.model.get(this.options.propertyName));
   },
-  setupUrlLinkPanel: function setupUrlLinkPanel() {
+  setupUrlLinkPanel: function () {
     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);
@@ -2423,7 +3007,7 @@ var TextAreaInputView = Marionette.ItemView.extend({
       }
     }, this));
   },
-  setupFragmentLinkPanel: function setupFragmentLinkPanel() {
+  setupFragmentLinkPanel: function () {
     if (this.options.fragmentLinkInputView) {
       this.fragmentLinkModel = new Backbone.Model();
       this.listenTo(this.fragmentLinkModel, 'change', function (model, options) {
@@ -2451,37 +3035,36 @@ var TextAreaInputView = Marionette.ItemView.extend({
       this.ui.fragmentLinkPanel.hide();
     }
   },
-  initLinkTypePanels: function initLinkTypePanels(isUrlLink) {
+  initLinkTypePanels: function (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() {
+  showUrlLinkPanel: function () {
     this.ui.toolbar.removeClass('fragment_link_panel_active');
     this.setUrlFromDisplayUrl();
     this.setTargetFromOpenInNewTabCheckBox();
   },
-  showFragmentLinkPanel: function showFragmentLinkPanel() {
+  showFragmentLinkPanel: function () {
     this.ui.toolbar.addClass('fragment_link_panel_active');
     this.setInputsFromFragmentLinkModel();
   },
-  setInputsFromFragmentLinkModel: function setInputsFromFragmentLinkModel() {
+  setInputsFromFragmentLinkModel: function () {
     this.ui.urlInput.val('#' + (this.fragmentLinkModel.get('linkId') || ''));
     this.ui.targetInput.val('_self');
   },
-  setUrlFromDisplayUrl: function setUrlFromDisplayUrl() {
+  setUrlFromDisplayUrl: function () {
     this.ui.urlInput.val(this.ui.displayUrlInput.val());
   },
-  setTargetFromOpenInNewTabCheckBox: function setTargetFromOpenInNewTabCheckBox() {
+  setTargetFromOpenInNewTabCheckBox: function () {
     this.ui.targetInput.val(this.ui.openInNewTabCheckBox.is(':checked') ? '_blank' : '_self');
   }
 });
 
-function template$9(data) {
+function template$b(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
@@ -2504,12 +3087,9 @@ return __p
  *
  * @class
  */
-
-var UrlInputView = Marionette.Layout.extend(
-/** @lends UrlInputView.prototype */
-{
+const UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype */{
   mixins: [inputView],
-  template: template$9,
+  template: template$b,
   ui: {
     input: 'input',
     validation: '.validation'
@@ -2517,95 +3097,95 @@ var UrlInputView = Marionette.Layout.extend(
   events: {
     'change': 'onChange'
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.ui.validation.hide();
     this.load();
     this.validate();
+    this.listenTo(this.model, 'change:' + this.options.displayPropertyName, this.load);
   },
-  onChange: function onChange() {
-    var _this = this;
-
-    this.validate().then(function () {
-      return _this.save();
-    }, function () {
-      return _this.saveDisplayProperty();
-    });
+  onChange: function () {
+    var value = this.ui.input.val();
+    this.validate().then(() => this.save(value), () => this.saveDisplayProperty(value));
   },
-  saveDisplayProperty: function saveDisplayProperty() {
+  saveDisplayProperty: function (value) {
     this.model.unset(this.options.propertyName, {
       silent: true
     });
-    this.model.set(this.options.displayPropertyName, this.ui.input.val());
+    this.model.set(this.options.displayPropertyName, value);
   },
-  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));
+  save: function (value) {
+    $.when(this.transformPropertyValue(value, this.lastValidationResult)).then(transformedValue => {
+      this.model.set({
+        [this.options.displayPropertyName]: value,
+        [this.options.propertyName]: transformedValue
+      });
     });
   },
-  load: function load() {
+  load: function () {
     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() {},
-
+  onLoad: function () {},
   /**
    * 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.
    *
+   * Can optionally return a value when the promise resolves. This
+   * value will be passed to transformPropertyValue as the second
+   * parameter.
+   *
    * @return Promise
    */
-  validateUrl: function validateUrl(url) {
+  validateUrl: function (url) {
     return $.Deferred().resolve().promise();
   },
-
   /**
    * Override to transform the property value before it is stored.
    *
+   * @param {String} value - The URL value to transform
+   * @param {*} validationResult - Optional result returned by validateUrl
    * @return Promise | String
    */
-  transformPropertyValue: function transformPropertyValue(value) {
+  transformPropertyValue: function (value, validationResult) {
     return value;
   },
-
   /**
    * Override to change the list of supported host names.
    */
-  supportedHosts: function supportedHosts() {
+  supportedHosts: function () {
     return this.options.supportedHosts;
   },
+  /**
+   * Override to enable HTTPS URLs by default.
+   * @return {boolean}
+   */
+  permitHttps: function () {
+    return this.options.permitHttps;
+  },
   // 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() {
+  supportedHostsWithoutLegacyProtocols: function () {
     return _.map(this.supportedHosts(), function (host) {
       return host.replace(/^https?:\/\//, '');
     });
   },
-  validate: function validate(success) {
+  validate: function (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) {
+      if (view.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) {
@@ -2613,41 +3193,44 @@ var UrlInputView = Marionette.Layout.extend(
       }).join(''));
     } else {
       return view.validateUrl(value).progress(function (message) {
-        displayValidationPending(message);
-      }).done(function () {
-        resetValidationError();
+        if (!view.isClosed) {
+          displayValidationPending(message);
+        }
+      }).done(function (result) {
+        view.lastValidationResult = result;
+        if (!view.isClosed) {
+          resetValidationError();
+        }
       }).fail(function (error) {
-        displayValidationError(error);
+        view.lastValidationResult = undefined;
+        if (!view.isClosed) {
+          displayValidationError(error);
+        }
       });
     }
-
     return $.Deferred().reject().promise();
-
     function isValidUrl(url) {
-      return options.permitHttps ? url.match(/^https?:\/\//i) : url.match(/^http:\/\//i);
+      return view.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.text('');
       view.ui.validation.hide();
     }
   }
@@ -2699,12 +3282,9 @@ var UrlInputView = Marionette.Layout.extend(
  *
  * @class
  */
-
-var ProxyUrlInputView = UrlInputView.extend(
-/** @lends ProxyUrlInputView.prototype */
-{
+const ProxyUrlInputView = UrlInputView.extend( /** @lends ProxyUrlInputView.prototype */{
   // @override
-  validateUrl: function validateUrl(url) {
+  validateUrl: function (url) {
     var view = this;
     return $.Deferred(function (deferred) {
       deferred.notify(I18n$1.t('pageflow.ui.views.inputs.proxy_url_input_view.url_validation'));
@@ -2719,25 +3299,28 @@ var ProxyUrlInputView = UrlInputView.extend(
     }).promise();
   },
   // override
-  transformPropertyValue: function transformPropertyValue(url) {
+  transformPropertyValue: function (url) {
     return this.rewriteUrl(url);
   },
   // override
-  supportedHosts: function supportedHosts() {
+  supportedHosts: function () {
     return _.pluck(this.options.proxies, 'url');
   },
-  rewriteUrl: function rewriteUrl(url) {
+  rewriteUrl: function (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';
+function template$c(data) {
+var __t, __p = '';
+__p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<div class="slider_wrapper">\n  ';
+ if (data.icon) {__p += '<img class="icon" src="' +
+((__t = ( data.icon )) == null ? '' : __t) +
+'" width="18" height="18" />';
+ }__p += '\n  <div class="value"></div>\n  <div class="slider"></div>\n</div>\n';
 return __p
 }
 
@@ -2748,7 +3331,7 @@ return __p
  * @param {Object} [options]
  *
  * @param {number} [options.defaultValue]
- *   Defaults value to display if property is not set.
+ *   Default value to display if property is not set.
  *
  * @param {number} [options.minValue=0]
  *   Value when dragging slider to the very left.
@@ -2766,92 +3349,116 @@ return __p
  *   Already update the model while dragging the handle - not only after
  *   handle has been released.
  *
+ * @param {string} [options.icon]
+ *   Path to an icon image to display before the label.
+ *
  * @class
  */
-
-var SliderInputView = Marionette.ItemView.extend({
+const SliderInputView = Marionette.ItemView.extend({
   mixins: [inputView],
   className: 'slider_input',
-  template: template$a,
+  template: template$c,
+  serializeData() {
+    return {
+      icon: this.options.icon
+    };
+  },
   ui: {
     widget: '.slider',
     value: '.value'
   },
   events: {
+    'slidestart': 'handleSlideStart',
     'slidechange': 'save',
     'slide': 'handleSlide'
   },
-  onRender: function onRender() {
-    var _this = this;
-
+  onRender: function () {
     this.ui.widget.slider({
       animate: 'fast'
     });
-    this.setupAttributeBinding('minValue', function (value) {
-      return _this.updateSliderOption('min', value || 0);
-    });
-    this.setupAttributeBinding('maxValue', function (value) {
-      return _this.updateSliderOption('max', value || 100);
-    });
+    if (this.options.values) {
+      this.ui.widget.slider('option', 'min', 0);
+      this.ui.widget.slider('option', 'max', this.options.values.length - 1);
+    } else {
+      this.setupAttributeBinding('minValue', value => this.updateSliderOption('min', value || 0));
+      this.setupAttributeBinding('maxValue', value => this.updateSliderOption('max', value !== undefined ? value : 100));
+    }
     this.load();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
-  updateSliderOption: function updateSliderOption(name, value) {
+  updateSliderOption(name, value) {
     this.ui.widget.slider('option', name, value);
     this.updateText(this.ui.widget.slider('value'));
   },
-  updateDisabled: function updateDisabled(disabled) {
+  updateDisabled: function (disabled) {
     this.$el.toggleClass('disabled', !!disabled);
-
     if (disabled) {
       this.ui.widget.slider('disable');
     } else {
       this.ui.widget.slider('enable');
     }
   },
-  handleSlide: function handleSlide(event, ui) {
-    this.updateText(ui.value);
-
+  handleSlideStart() {
+    if (this.options.onInteractionStart) {
+      this.options.onInteractionStart();
+    }
+  },
+  handleSlide(event, ui) {
+    var value = this.options.values ? this.options.values[ui.value] : ui.value;
+    this.updateText(value);
     if (this.options.saveOnSlide) {
       this.save(event, ui);
     }
   },
-  save: function save(event, ui) {
-    this.model.set(this.options.propertyName, ui.value);
+  save: function (event, ui) {
+    if (this.loading) {
+      return;
+    }
+    var value = this.options.values ? this.options.values[ui.value] : ui.value;
+    this.model.set(this.options.propertyName, value);
   },
-  load: function load() {
+  load: function () {
     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', this.clampValue(value));
+    var sliderValue = this.options.values ? this.options.values.indexOf(value) : value;
+    this.loading = true;
+    this.ui.widget.slider('option', 'value', this.clampValue(sliderValue));
+    this.loading = false;
     this.updateText(value);
   },
-  clampValue: function clampValue(value) {
-    var min = this.ui.widget.slider('option', 'min');
-    var max = this.ui.widget.slider('option', 'max');
+  clampValue(value) {
+    const min = this.ui.widget.slider('option', 'min');
+    const max = this.ui.widget.slider('option', 'max');
     return Math.min(max, Math.max(min, value));
   },
-  updateText: function updateText(value) {
-    var unit = 'unit' in this.options ? this.options.unit : '%';
-    var text = 'displayText' in this.options ? this.options.displayText(value) : value + unit;
+  updateText: function (value) {
+    var text;
+    if (this.options.texts) {
+      var index = this.options.values.indexOf(value);
+      text = this.options.texts[index];
+    } else if ('displayText' in this.options) {
+      text = this.options.displayText(value);
+    } else {
+      var unit = 'unit' in this.options ? this.options.unit : '%';
+      text = value + unit;
+    }
     this.ui.value.text(text);
   }
 });
 
-function template$b(data) {
+function template$d(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({
+const JsonInputView = Marionette.ItemView.extend({
   mixins: [inputView],
-  template: template$b,
+  template: template$d,
   className: 'json_input',
   ui: {
     input: 'textarea'
@@ -2860,32 +3467,31 @@ var JsonInputView = Marionette.ItemView.extend({
     'change': 'onChange',
     'keyup': 'validate'
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.load();
     this.validate();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
   },
-  onChange: function onChange() {
+  onChange: function () {
     if (this.validate()) {
       this.save();
     }
   },
-  onClose: function onClose() {
+  onClose: function () {
     if (this.validate()) {
       this.save();
     }
   },
-  save: function save() {
+  save: function () {
     this.model.set(this.options.propertyName, this.ui.input.val() ? JSON.parse(this.ui.input.val()) : null);
   },
-  load: function load() {
+  load: function () {
     var input = this.ui.input;
     var value = this.model.get(this.options.propertyName);
     input.val(value ? JSON.stringify(value, null, 2) : '');
   },
-  validate: function validate() {
+  validate: function () {
     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;
@@ -2894,15 +3500,15 @@ var JsonInputView = Marionette.ItemView.extend({
       return true;
     }
   },
-  displayValidationError: function displayValidationError(message) {
+  displayValidationError: function (message) {
     this.$el.addClass('invalid');
     this.ui.input.attr('title', message);
   },
-  resetValidationError: function resetValidationError(message) {
+  resetValidationError: function (message) {
     this.$el.removeClass('invalid');
     this.ui.input.attr('title', '');
   },
-  isValidJson: function isValidJson(text) {
+  isValidJson: function (text) {
     try {
       JSON.parse(text);
       return true;
@@ -2912,7 +3518,7 @@ var JsonInputView = Marionette.ItemView.extend({
   }
 });
 
-function template$c(data) {
+function template$e(data) {
 var __p = '';
 __p += '<input type="checkbox" />\n<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>';
 return __p
@@ -2939,10 +3545,9 @@ return __p
  *
  * @class
  */
-
-var CheckBoxInputView = Marionette.ItemView.extend({
+const CheckBoxInputView = Marionette.ItemView.extend({
   mixins: [inputView],
-  template: template$c,
+  template: template$e,
   className: 'check_box_input',
   events: {
     'change': 'save'
@@ -2951,19 +3556,18 @@ var CheckBoxInputView = Marionette.ItemView.extend({
     input: 'input',
     label: 'label'
   },
-  onRender: function onRender() {
+  onRender: function () {
     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() {
+  updateDisabled: function () {
     this.load();
   },
-  save: function save() {
+  save: function () {
     if (!this.isDisabled()) {
-      var value = this.ui.input.is(':checked');
-
+      const value = this.ui.input.is(':checked');
       if (this.options.storeInverted) {
         this.model.set(this.options.storeInverted, !value);
       } else {
@@ -2971,12 +3575,12 @@ var CheckBoxInputView = Marionette.ItemView.extend({
       }
     }
   },
-  load: function load() {
+  load: function () {
     if (!this.isClosed) {
-      this.ui.input.prop('checked', this.displayValue());
+      this.ui.input.prop('checked', !!this.displayValue());
     }
   },
-  displayValue: function displayValue() {
+  displayValue: function () {
     if (this.isDisabled() && this.options.displayUncheckedIfDisabled) {
       return false;
     } else if (this.isDisabled() && this.options.displayCheckedIfDisabled) {
@@ -2989,6 +3593,86 @@ var CheckBoxInputView = Marionette.ItemView.extend({
   }
 });
 
+/**
+ * Input view for selecting one value from a small set of options
+ * using radio buttons.
+ * See {@link inputView} for further options.
+ *
+ * @param {Object} [options]
+ *
+ * @param {Array} options.values
+ *   Array of possible values the property can be set to.
+ *
+ * @param {Array} [options.texts]
+ *   Array of display texts for the values. If not provided,
+ *   translations are looked up based on the model's i18nKey.
+ *
+ * @class
+ */
+const RadioButtonGroupInputView = Marionette.ItemView.extend({
+  mixins: [inputView],
+  template: () => `
+    <label>
+      <span class="name"></span>
+      <span class="inline_help"></span>
+    </label>
+  `,
+  className: 'radio_button_input',
+  events: {
+    'change': 'save'
+  },
+  initialize: function () {
+    if (!this.options.texts) {
+      var translationKeyPrefix = findKeyWithTranslation(this.attributeTranslationKeys('values', {
+        fallbackPrefix: 'activerecord.values'
+      }));
+      this.options.texts = _.map(this.options.values, function (value) {
+        return I18n$1.t(translationKeyPrefix + '.' + value);
+      });
+    }
+  },
+  onRender: function () {
+    this.appendOptions();
+    this.load();
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+  },
+  updateDisabled: function () {
+    this.$el.find('input').prop('disabled', this.isDisabled());
+  },
+  save: function () {
+    var index = this.$el.find('input').index(this.$el.find('input:checked'));
+    this.model.set(this.options.propertyName, this.options.values[index]);
+  },
+  appendOptions: function () {
+    _.each(this.options.values, function (value, index) {
+      var id = this.cid + '_' + value;
+      var wrapper = document.createElement('div');
+      wrapper.className = 'radio_button';
+      var input = document.createElement('input');
+      input.type = 'radio';
+      input.name = this.options.propertyName;
+      input.value = value;
+      input.id = id;
+      var label = document.createElement('label');
+      label.htmlFor = id;
+      var nameSpan = document.createElement('span');
+      nameSpan.className = 'name';
+      nameSpan.textContent = this.options.texts[index];
+      label.appendChild(nameSpan);
+      wrapper.appendChild(input);
+      wrapper.appendChild(document.createTextNode(' '));
+      wrapper.appendChild(label);
+      this.$el.append(wrapper);
+    }, this);
+  },
+  load: function () {
+    if (!this.isClosed) {
+      var value = this.model.get(this.options.propertyName);
+      this.$el.find('input[value="' + value + '"]').prop('checked', true);
+    }
+  }
+});
+
 /**
  * Render a separator in a {@link ConfigurationEditorView} tab.
  *
@@ -2998,8 +3682,7 @@ var CheckBoxInputView = Marionette.ItemView.extend({
  *
  * @class
  */
-
-var SeparatorView = Marionette.View.extend({
+const SeparatorView = Marionette.View.extend({
   className: 'separator'
 });
 
@@ -3011,12 +3694,14 @@ var SeparatorView = Marionette.View.extend({
  *
  * @class
  */
-
-var LabelOnlyView = Marionette.ItemView.extend({
+const 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  ";
-  },
+  template: () => `
+    <label>
+      <span class="name"></span>
+      <span class="inline_help"></span>
+    </label>
+  `,
   ui: {
     label: 'label'
   }
@@ -3037,10 +3722,9 @@ var LabelOnlyView = Marionette.ItemView.extend({
  *
  * @since 12.0
  */
-
-var EnumTableCellView = TableCellView.extend({
+const EnumTableCellView = TableCellView.extend({
   className: 'enum_table_cell',
-  update: function update() {
+  update: function () {
     this.$el.text(this.attributeTranslation('cell_text.' + (this.attributeValue() || 'blank')));
     this.$el.attr('title', this.attributeTranslation('cell_title.' + (this.attributeValue() || 'blank'), {
       defaultValue: ''
@@ -3048,7 +3732,7 @@ var EnumTableCellView = TableCellView.extend({
   }
 });
 
-function template$d(data) {
+function template$f(data) {
 var __t, __p = '';
 __p += '<a class="remove" title="' +
 ((__t = ( I18n.t('pageflow.editor.templates.row.destroy') )) == null ? '' : __t) +
@@ -3078,24 +3762,22 @@ return __p
  *
  * @since 12.0
  */
-
-var DeleteRowTableCellView = TableCellView.extend({
+const DeleteRowTableCellView = TableCellView.extend({
   className: 'delete_row_table_cell',
-  template: template$d,
+  template: template$f,
   ui: {
     removeButton: '.remove'
   },
   events: {
     'click .remove': 'destroy',
-    'click': function click() {
+    'click': function () {
       return false;
     }
   },
-  showButton: function showButton() {
+  showButton: function () {
     if (this.options.toggleDeleteButton) {
       var context = this.getModel();
       var toggle = context[this.options.toggleDeleteButton].apply(context);
-
       if (this.options.invertToggleDeleteButton) {
         return !toggle;
       } else {
@@ -3105,11 +3787,11 @@ var DeleteRowTableCellView = TableCellView.extend({
       return true;
     }
   },
-  update: function update() {
+  update: function () {
     this.ui.removeButton.toggleClass('remove', this.showButton());
     this.ui.removeButton.attr('title', this.attributeTranslation('cell_title'));
   },
-  destroy: function destroy() {
+  destroy: function () {
     this.getModel().destroy();
   }
 });
@@ -3130,10 +3812,9 @@ var DeleteRowTableCellView = TableCellView.extend({
  *
  * @since 12.0
  */
-
-var PresenceTableCellView = TableCellView.extend({
+const PresenceTableCellView = TableCellView.extend({
   className: 'presence_table_cell',
-  update: function update() {
+  update: function () {
     var isPresent = !!this.attributeValue();
     this.$el.attr('title', isPresent ? this.attributeTranslation('cell_title.present', {
       value: this.attributeValue()
@@ -3154,18 +3835,18 @@ var PresenceTableCellView = TableCellView.extend({
  *
  * @param {Object} [options]
  *
- * @param {string[]} [options.icons]
+ * @param {string[]|function} [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.
+ *   pageflow/ui/table_cells/icon_table_cell.scss. Pass a function
+ *   returning the array to defer reading the values.
  *
  * @since 12.0
  */
-
-var IconTableCellView = TableCellView.extend({
+const IconTableCellView = TableCellView.extend({
   className: 'icon_table_cell',
-  update: function update() {
+  update: function () {
     var icon = this.attributeValue();
     var isPresent = !!this.attributeValue();
     this.removeExistingIcons();
@@ -3174,8 +3855,8 @@ var IconTableCellView = TableCellView.extend({
     }) : this.attributeTranslation('cell_title.blank'));
     this.$el.addClass(icon);
   },
-  removeExistingIcons: function removeExistingIcons() {
-    this.$el.removeClass(this.options.icons.join(' '));
+  removeExistingIcons: function () {
+    this.$el.removeClass(_.result(this.options, 'icons').join(' '));
   }
 });
 
@@ -3198,65 +3879,59 @@ var IconTableCellView = TableCellView.extend({
  *
  * @since 12.0
  */
-
-var TextTableCellView = TableCellView.extend({
+const TextTableCellView = TableCellView.extend({
   className: 'text_table_cell',
-  update: function update() {
+  update: function () {
     this.$el.text(this._updateText());
   },
-  _updateText: function _updateText() {
+  _updateText: function () {
     if (this.attributeValue()) {
       return this.attributeValue();
-    } else if (typeof this.options.column["default"] === 'function') {
+    } 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);
+      return this.options.column.default(options);
     } else if ('default' in this.options.column) {
-      return this.options.column["default"];
+      return this.options.column.default;
     } else {
       return I18n$1.t('pageflow.ui.text_table_cell_view.empty');
     }
   }
 });
 
-var subviewContainer = {
-  subview: function subview(view) {
+const subviewContainer = {
+  subview: function (view) {
     this.subviews = this.subviews || new ChildViewContainer();
     this.subviews.add(view.render());
     return view;
   },
-  appendSubview: function appendSubview(view) {
-    var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        to = _ref.to;
-
+  appendSubview: function (view, {
+    to
+  } = {}) {
     return (to || this.$el).append(this.subview(view).el);
   },
-  onClose: function onClose() {
+  onClose: function () {
     if (this.subviews) {
       this.subviews.call('close');
     }
   }
 };
-
 if (!Marionette.View.prototype.appendSubview) {
   Cocktail.mixin(Marionette.View, subviewContainer);
 }
 
-var tooltipContainer = {
+const tooltipContainer = {
   events: {
-    'mouseover [data-tooltip]': function mouseoverDataTooltip(event) {
+    'mouseover [data-tooltip]': function (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,
@@ -3278,19 +3953,18 @@ var tooltipContainer = {
             top: target.position().top + target.outerHeight() / 2
           };
         }
-
         this.tooltip.show(I18n$1.t(key), position, {
           align: target.data('tooltipAlign')
         });
       }
     },
-    'mouseleave [data-tooltip]': function mouseleaveDataTooltip() {
+    'mouseleave [data-tooltip]': function () {
       this.tooltip.hide();
     }
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.appendSubview(this.tooltip = new TooltipView());
   }
 };
 
-export { CheckBoxGroupInputView, CheckBoxInputView, CollectionView, ColorInputView, ConfigurationEditorTabView, ConfigurationEditorView, DeleteRowTableCellView, EnumTableCellView, ExtendedSelectInputView, IconTableCellView, JsonInputView, LabelOnlyView, NumberInputView, BaseObject as Object, PresenceTableCellView, ProxyUrlInputView, SelectInputView, SeparatorView, SliderInputView, SortableCollectionView, TableCellView, TableHeaderCellView, TableRowView, TableView, TabsView, TextAreaInputView, TextInputView, TextTableCellView, TooltipView, UrlDisplayView, UrlInputView, attributeBinding, cssModulesUtils, i18nUtils, inputView, inputWithPlaceholderText, serverSideValidation, subviewContainer, tooltipContainer, viewWithValidationErrorMessages };
+export { CheckBoxGroupInputView, CheckBoxInputView, CollectionView, ColorInputView, ColorPicker, ConfigurationEditorTabView, ConfigurationEditorView, DeleteRowTableCellView, EnumTableCellView, ExtendedSelectInputView, FileNameInputView, IconTableCellView, JsonInputView, LabelOnlyView, NumberInputView, BaseObject as Object, PresenceTableCellView, ProxyUrlInputView, RadioButtonGroupInputView, SelectInputView, SeparatorView, SliderInputView, SortableCollectionView, TableCellView, TableHeaderCellView, TableRowView, TableView, TabsView, TextAreaInputView, TextInputView, TextTableCellView, TooltipView, UrlDisplayView, UrlInputView, attributeBinding, attributeBindingUtils, cssModulesUtils, i18nUtils, inputView, inputWithPlaceholderText, serverSideValidation, subviewContainer, tooltipContainer, viewWithValidationErrorMessages };