pageflow 17.1.0 → 17.2.0

data/package/ui.js

@@ -6,7 +6,6 @@ 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';
@@ -142,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.
@@ -239,11 +180,8 @@ 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;
   }, {});
@@ -287,12 +225,9 @@ 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;
   }, {});
 }
@@ -310,11 +245,11 @@ function events(styles, mapping) {
  * @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({
@@ -324,6 +259,56 @@ 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
 
@@ -331,30 +316,29 @@ function BaseObject(options) {
   this.initialize.apply(this, arguments);
 }
 _.extend(BaseObject.prototype, Backbone.Events, {
-  initialize: function initialize(options) {}
+  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);
@@ -372,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);
@@ -383,11 +367,11 @@ var CollectionView = Marionette.View.extend({
     }
     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)));
@@ -404,7 +388,7 @@ var CollectionView = Marionette.View.extend({
       this.togglePlaceHolder();
     }
   },
-  removeItem: function removeItem(item) {
+  removeItem: function (item) {
     var view = this.itemViews.findByModel(item);
     if (view) {
       this.itemViews.remove(view);
@@ -412,7 +396,7 @@ var CollectionView = Marionette.View.extend({
       this.togglePlaceHolder();
     }
   },
-  sort: function sort() {
+  sort: function () {
     var last = null;
     this.collection.each(function (item) {
       var itemView = this.itemViews.findByModel(item);
@@ -429,31 +413,36 @@ var CollectionView = Marionette.View.extend({
       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) {
@@ -462,9 +451,8 @@ var CollectionView = Marionette.View.extend({
   }
 });
 
-var SortableCollectionView = CollectionView.extend({
-  render: function render() {
-    var _this = this;
+const SortableCollectionView = CollectionView.extend({
+  render: function () {
     CollectionView.prototype.render.call(this);
     this.sortable = Sortable.create(this.el, {
       group: this.options.connectWith,
@@ -472,125 +460,90 @@ var SortableCollectionView = CollectionView.extend({
       ghostClass: 'sortable-placeholder',
       forceFallback: this.options.forceDraggableFallback,
       fallbackTolerance: 3,
-      onEnd: function onEnd(event) {
-        var item = $(event.item);
-        if (item.parent().is(_this.el)) {
-          _this.updateOrder();
+      onEnd: event => {
+        const item = $(event.item);
+        if (item.parent().is(this.el)) {
+          this.updateOrder();
         }
       },
-      onRemove: function onRemove(event) {
-        var view = $(event.item).data('view');
-        _this.itemViews.remove(view);
-        _this.collection.remove(view.model);
+      onRemove: event => {
+        const view = $(event.item).data('view');
+        this.itemViews.remove(view);
+        this.collection.remove(view.model);
       },
-      onSort: function onSort(event) {
-        if (event.from !== event.to && event.to === _this.el) {
-          var view = $(event.item).data('view');
-          _this.reindexPositions();
-          _this.itemViews.add(view);
-          _this.collection.add(view.model);
-          _this.collection.saveOrder();
+      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;
   },
-  onClose: function onClose() {
+  onClose() {
     CollectionView.prototype.onClose.call(this);
     this.sortable.destroy();
   },
-  disableSorting: function disableSorting() {
+  disableSorting() {
     this.sortable.option('disabled', true);
   },
-  enableSorting: function enableSorting() {
+  enableSorting() {
     this.sortable.option('disabled', false);
   },
-  addItem: function addItem(item) {
+  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);
     });
   }
 });
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-var _excluded = ["ignoreUndefined"];
-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');
     }
@@ -604,10 +557,10 @@ ConfigurationEditorTabView.Groups = function () {
     }
     groups[name] = fn;
   };
-  this.apply = function (name, context) {
-    var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-      ignoreUndefined = _ref.ignoreUndefined,
-      options = _objectWithoutProperties(_ref, _excluded);
+  this.apply = function (name, context, {
+    ignoreUndefined,
+    ...options
+  } = {}) {
     if (!(name in groups)) {
       if (ignoreUndefined) {
         return;
@@ -621,7 +574,7 @@ 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
 }
 
@@ -647,36 +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,
@@ -684,14 +644,22 @@ var TabsView = Marionette.Layout.extend( /* @lends TabView.prototype */{
       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 {
@@ -701,19 +669,23 @@ var TabsView = Marionette.Layout.extend( /* @lends TabView.prototype */{
   /**
    * 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;
     });
@@ -725,23 +697,85 @@ var TabsView = Marionette.Layout.extend( /* @lends TabView.prototype */{
     }
     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';
   }
 });
 
@@ -770,9 +804,9 @@ var TabsView = Marionette.Layout.extend( /* @lends TabView.prototype */{
  *
  * @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',
@@ -780,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,
@@ -798,23 +832,23 @@ var ConfigurationEditorView = Marionette.View.extend({
   /**
    * 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);
   }
 });
@@ -839,13 +873,13 @@ 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();
@@ -853,20 +887,20 @@ var TableCellView = Marionette.ItemView.extend({
   /**
    * 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 {
@@ -891,10 +925,10 @@ 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);
@@ -908,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();
@@ -916,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,
@@ -950,13 +984,13 @@ var TableRowView = Marionette.View.extend({
     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';
   }
 });
@@ -977,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,
@@ -985,7 +1019,7 @@ 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({
@@ -1007,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
@@ -1024,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);
@@ -1065,99 +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 model = this.options["".concat(optionName, "BindingModel")] || this.model;
-    var view = this;
-    if (binding) {
-      _.flatten([binding]).forEach(function (attribute) {
-        _this.listenTo(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 normalize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (value) {
-      return value;
-    };
-    var binding = this.options["".concat(optionName, "Binding")];
-    var model = this.options["".concat(optionName, "BindingModel")] || this.model;
-    var bindingValueOptionName = "".concat(optionName, "BindingValue");
-    var value = Array.isArray(binding) ? binding.map(function (attribute) {
-      return model.get(attribute);
-    }) : 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`]
+    });
   }
 };
 
@@ -1250,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.
@@ -1295,7 +1271,8 @@ var attributeBinding = {
  *
  * @mixin
  */
-var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
+const inputView = {
+  ...attributeBinding,
   ui: {
     label: 'label',
     labelText: 'label .name',
@@ -1323,19 +1300,22 @@ 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);
@@ -1345,15 +1325,15 @@ var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
    * 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();
@@ -1363,7 +1343,7 @@ var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
    * 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'
     });
@@ -1375,34 +1355,34 @@ var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
       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 = '';
@@ -1418,7 +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',
@@ -1429,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', {
@@ -1444,26 +1424,26 @@ var CheckBoxGroupInputView = Marionette.ItemView.extend({
       });
     }
   },
-  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]);
@@ -1491,7 +1471,7 @@ return __p
  *
  * @class
  */
-var UrlDisplayView = Marionette.ItemView.extend({
+const UrlDisplayView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: template$5,
   ui: {
@@ -1501,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() {
+  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.
  *
@@ -1550,84 +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.
@@ -1650,20 +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') {
@@ -1677,25 +1624,22 @@ var inputWithPlaceholderText = {
     }
     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();
@@ -1730,7 +1674,7 @@ return __p
  *
  * @class
  */
-var TextInputView = Marionette.ItemView.extend({
+const TextInputView = Marionette.ItemView.extend({
   mixins: [inputView, inputWithPlaceholderText, viewWithValidationErrorMessages],
   template: template$6,
   ui: {
@@ -1739,25 +1683,25 @@ 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));
 
@@ -1767,7 +1711,7 @@ var TextInputView = Marionette.ItemView.extend({
     // 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'));
@@ -1783,11 +1727,11 @@ 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', '');
   }
@@ -1799,31 +1743,640 @@ __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></spa
 return __p
 }
 
-var FileNameInputView = TextInputView.extend({
+const FileNameInputView = TextInputView.extend({
   template: template$7,
   className: 'file_name_input',
   ui: Object.assign({}, TextInputView.prototype.ui, {
     extension: '.file_name_input-extension'
   }),
-  onRender: function onRender() {
+  onRender: function () {
     TextInputView.prototype.onRender.call(this);
   },
-  save: function save() {
-    var baseName = this.ui.input.val();
-    var extension = this.ui.extension.text();
+  save: function () {
+    const baseName = this.ui.input.val();
+    const extension = this.ui.extension.text();
     this.model.set(this.options.propertyName, baseName + extension);
   },
-  load: function load() {
-    var fullName = this.model.get(this.options.propertyName) || '';
-    var match = fullName.match(/^(.*?)(\.[^.]+)?$/);
-    var baseName = match ? match[1] : fullName;
-    var extension = match && match[2] ? match[2] : '';
+  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;
   }
 });
 
+// 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();
+  }
+
+  // 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);
+      });
+    });
+  }
+
+  // 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
+
+  _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';
@@ -1858,75 +2411,75 @@ return __p
  *   is used as placeholderColor option, it will be passed the value of the
  *   placeholderColorBinding attribute each time it changes.
  *
- * @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.
+ * @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
  */
-var ColorInputView = Marionette.ItemView.extend({
+const ColorInputView = Marionette.ItemView.extend({
   mixins: [inputView, inputWithPlaceholderText],
   template: template$8,
   className: 'color_input',
   ui: {
     input: 'input'
   },
-  events: {
-    'mousedown': 'refreshPicker'
-  },
-  onRender: function onRender() {
+  onRender: function () {
     this.setupAttributeBinding('placeholderColor', this.updatePlaceholderColor);
-    this.ui.input.minicolors({
-      changeDelay: 200,
-      change: _.bind(function (color) {
-        this._saving = true;
-        if (color === this.defaultValue()) {
-          this.model.unset(this.options.propertyName);
-        } else {
-          this.model.set(this.options.propertyName, color);
-        }
-        this._saving = false;
-      }, this)
+    this._colorPicker = new ColorPicker(this.ui.input[0], {
+      alpha: this.options.alpha,
+      defaultValue: this.defaultValue(),
+      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.updateSettings();
+    this.load();
   },
-  updatePlaceholderColor: function updatePlaceholderColor(value) {
-    this.el.style.setProperty('--placeholder-color', value);
+  updatePlaceholderColor(value) {
+    if (this._colorPicker) {
+      this._colorPicker.update({
+        fallbackColor: value
+      });
+    }
   },
-  updateSettings: function updateSettings() {
-    this.resetSwatchesInStoredSettings();
-    this.ui.input.minicolors('settings', {
+  updateSettings: function () {
+    this._colorPicker.update({
       defaultValue: this.defaultValue(),
       swatches: this.getSwatches()
     });
     this.load();
   },
-  // see https://github.com/claviska/jquery-minicolors/issues/287
-  resetSwatchesInStoredSettings: function resetSwatchesInStoredSettings() {
-    var settings = this.ui.input.data('minicolors-settings');
-    if (settings) {
-      delete settings.swatches;
-      this.ui.input.data('minicolors-settings', settings);
-    }
-  },
-  load: function load() {
+  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);
@@ -1938,6 +2491,19 @@ 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;
   }
 });
 
@@ -1953,8 +2519,9 @@ 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.
@@ -2031,7 +2598,7 @@ return __p
  *
  * @class
  */
-var SelectInputView = Marionette.ItemView.extend({
+const SelectInputView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: template$9,
   events: {
@@ -2041,7 +2608,8 @@ 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) {
@@ -2075,7 +2643,7 @@ var SelectInputView = Marionette.ItemView.extend({
     }
     this.optGroups = {};
   },
-  onRender: function onRender() {
+  onRender: function () {
     this.appendBlank();
     this.appendPlaceholder();
     this.appendOptions();
@@ -2085,7 +2653,7 @@ var SelectInputView = Marionette.ItemView.extend({
       this.save();
     }
   },
-  appendBlank: function appendBlank() {
+  appendBlank: function () {
     if (!this.options.includeBlank) {
       return;
     }
@@ -2102,7 +2670,7 @@ var SelectInputView = Marionette.ItemView.extend({
     option.text = blankText;
     this.ui.select.append(option);
   },
-  appendPlaceholder: function appendPlaceholder() {
+  appendPlaceholder: function () {
     if (!this.options.placeholderModel && !this.options.placeholderValue) {
       return;
     }
@@ -2117,7 +2685,7 @@ 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];
@@ -2134,7 +2702,7 @@ var SelectInputView = Marionette.ItemView.extend({
       }
     }, this);
   },
-  findOrCreateOptGroup: function findOrCreateOptGroup(label) {
+  findOrCreateOptGroup: function (label) {
     if (!this.optGroups[label]) {
       this.optGroups[label] = $('<optgroup />', {
         label: label
@@ -2142,15 +2710,15 @@ var SelectInputView = Marionette.ItemView.extend({
     }
     return this.optGroups[label];
   },
-  save: function save() {
-    var value = 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) {
@@ -2164,9 +2732,9 @@ 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) {
@@ -2181,18 +2749,18 @@ var ExtendedSelectInputView = SelectInputView.extend({
       });
     }
   },
-  onRender: function onRender() {
+  onRender: function () {
     var view = this,
       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) {
@@ -2200,16 +2768,16 @@ var ExtendedSelectInputView = SelectInputView.extend({
         }
         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>', {
@@ -2223,7 +2791,7 @@ var ExtendedSelectInputView = SelectInputView.extend({
         }
         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(),
@@ -2249,7 +2817,7 @@ var ExtendedSelectInputView = SelectInputView.extend({
       }
     });
   },
-  select: function select(event, ui) {
+  select: function (event, ui) {
     this.ui.select.val(ui.item.value);
     this.save();
   }
@@ -2312,7 +2880,7 @@ return __p
  *
  * @class
  */
-var TextAreaInputView = Marionette.ItemView.extend({
+const TextAreaInputView = Marionette.ItemView.extend({
   mixins: [inputView, inputWithPlaceholderText],
   template: template$a,
   className: 'text_area_input',
@@ -2338,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();
@@ -2407,16 +2975,26 @@ var TextAreaInputView = Marionette.ItemView.extend({
     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();
@@ -2429,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) {
@@ -2457,7 +3035,7 @@ 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 {
@@ -2465,23 +3043,23 @@ var TextAreaInputView = Marionette.ItemView.extend({
     }
     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');
   }
 });
@@ -2509,7 +3087,7 @@ return __p
  *
  * @class
  */
-var UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype */{
+const UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype */{
   mixins: [inputView],
   template: template$b,
   ui: {
@@ -2519,74 +3097,85 @@ var UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype *
   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) {
-      _this2.model.set(_defineProperty(_defineProperty({}, _this2.options.displayPropertyName, value), _this2.options.propertyName, transformedValue));
+  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();
@@ -2594,7 +3183,7 @@ var UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype *
       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);
@@ -2604,16 +3193,24 @@ var UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype *
       }).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) {
@@ -2633,6 +3230,7 @@ var UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype *
     function resetValidationError(message) {
       view.$el.removeClass('invalid');
       view.ui.input.attr('aria-invalid', 'false');
+      view.ui.validation.text('');
       view.ui.validation.hide();
     }
   }
@@ -2684,9 +3282,9 @@ var UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype *
  *
  * @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'));
@@ -2701,14 +3299,14 @@ var ProxyUrlInputView = UrlInputView.extend( /** @lends ProxyUrlInputView.protot
     }).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 + '/');
     });
@@ -2717,8 +3315,12 @@ var ProxyUrlInputView = UrlInputView.extend( /** @lends ProxyUrlInputView.protot
 });
 
 function template$c(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';
+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
 }
 
@@ -2747,39 +3349,48 @@ 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$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 !== undefined ? 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');
@@ -2787,33 +3398,54 @@ var SliderInputView = Marionette.ItemView.extend({
       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);
   }
 });
@@ -2824,7 +3456,7 @@ __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></spa
 return __p
 }
 
-var JsonInputView = Marionette.ItemView.extend({
+const JsonInputView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: template$d,
   className: 'json_input',
@@ -2835,30 +3467,30 @@ 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'));
@@ -2868,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;
@@ -2913,7 +3545,7 @@ return __p
  *
  * @class
  */
-var CheckBoxInputView = Marionette.ItemView.extend({
+const CheckBoxInputView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: template$e,
   className: 'check_box_input',
@@ -2924,18 +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 {
@@ -2943,12 +3575,12 @@ var CheckBoxInputView = Marionette.ItemView.extend({
       }
     }
   },
-  load: function load() {
+  load: function () {
     if (!this.isClosed) {
       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) {
@@ -2961,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.
  *
@@ -2970,7 +3682,7 @@ var CheckBoxInputView = Marionette.ItemView.extend({
  *
  * @class
  */
-var SeparatorView = Marionette.View.extend({
+const SeparatorView = Marionette.View.extend({
   className: 'separator'
 });
 
@@ -2982,11 +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'
   }
@@ -3007,9 +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: ''
@@ -3047,7 +3762,7 @@ return __p
  *
  * @since 12.0
  */
-var DeleteRowTableCellView = TableCellView.extend({
+const DeleteRowTableCellView = TableCellView.extend({
   className: 'delete_row_table_cell',
   template: template$f,
   ui: {
@@ -3055,11 +3770,11 @@ var DeleteRowTableCellView = TableCellView.extend({
   },
   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);
@@ -3072,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();
   }
 });
@@ -3097,9 +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()
@@ -3120,17 +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();
@@ -3139,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(' '));
   }
 });
 
@@ -3163,15 +3879,15 @@ 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 = {
@@ -3179,27 +3895,27 @@ var TextTableCellView = TableCellView.extend({
           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');
     }
@@ -3209,9 +3925,9 @@ 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');
@@ -3242,13 +3958,13 @@ var tooltipContainer = {
         });
       }
     },
-    '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, FileNameInputView, 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 };