pageflow 17.1.0 → 17.2.0

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

@@ -1,5 +1,5 @@
 this.pageflow = this.pageflow || {};
-this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, Backbone, ChildViewContainer, IScroll, jquery_minicolors, wysihtml5, jqueryUi, Cocktail) {
+this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, Backbone, ChildViewContainer, IScroll, wysihtml5, jqueryUi, Cocktail) {
   'use strict';
 
   Marionette = Marionette && Marionette.hasOwnProperty('default') ? Marionette['default'] : Marionette;
@@ -143,64 +143,6 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     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.
@@ -240,11 +182,8 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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;
     }, {});
@@ -288,12 +227,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    * @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;
     }, {});
   }
@@ -311,11 +247,11 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    * @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({
@@ -325,6 +261,56 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     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
 
@@ -332,24 +318,23 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     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 = {};
       });
     }
   };
@@ -3004,8 +2989,8 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   Sortable.mount(new AutoScrollPlugin());
   Sortable.mount(Remove, Revert);
 
-  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);
@@ -3023,7 +3008,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         });
       }
     },
-    render: function render() {
+    render: function () {
       if (!this.rendered) {
         this.$el.append(this.itemViews.map(function (itemView) {
           itemView.$el.data('view', itemView);
@@ -3034,11 +3019,11 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
       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)));
@@ -3055,7 +3040,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         this.togglePlaceHolder();
       }
     },
-    removeItem: function removeItem(item) {
+    removeItem: function (item) {
       var view = this.itemViews.findByModel(item);
       if (view) {
         this.itemViews.remove(view);
@@ -3063,7 +3048,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         this.togglePlaceHolder();
       }
     },
-    sort: function sort() {
+    sort: function () {
       var last = null;
       this.collection.each(function (item) {
         var itemView = this.itemViews.findByModel(item);
@@ -3080,31 +3065,36 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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) {
@@ -3113,9 +3103,8 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   });
 
-  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,
@@ -3123,125 +3112,90 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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$1(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$1(source, excluded) {
-    if (source == null) return {};
-    var target = _objectWithoutPropertiesLoose$1(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$1 = ["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');
       }
@@ -3255,10 +3209,10 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
       groups[name] = fn;
     };
-    this.apply = function (name, context) {
-      var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
-        ignoreUndefined = _ref.ignoreUndefined,
-        options = _objectWithoutProperties$1(_ref, _excluded$1);
+    this.apply = function (name, context, {
+      ignoreUndefined,
+      ...options
+    } = {}) {
       if (!(name in groups)) {
         if (ignoreUndefined) {
           return;
@@ -3272,7 +3226,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
 
   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
   }
 
@@ -3298,36 +3252,43 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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,
@@ -3335,14 +3296,22 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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 {
@@ -3352,19 +3321,23 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     /**
      * 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;
       });
@@ -3376,23 +3349,85 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
       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';
     }
   });
 
@@ -3421,9 +3456,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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',
@@ -3431,10 +3466,10 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       });
       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,
@@ -3449,23 +3484,23 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     /**
      * 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);
     }
   });
@@ -3490,13 +3525,13 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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();
@@ -3504,20 +3539,20 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     /**
      * 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 {
@@ -3542,10 +3577,10 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
      * // 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);
@@ -3559,7 +3594,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
      *
      * @protected
      */
-    setupContentBinding: function setupContentBinding() {
+    setupContentBinding: function () {
       if (this.options.column.contentBinding) {
         this.listenTo(this.getModel(), 'change:' + this.options.column.contentBinding, this.update);
         this.update();
@@ -3567,30 +3602,30 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   });
 
-  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,
@@ -3601,13 +3636,13 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       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';
     }
   });
@@ -3628,7 +3663,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   return __p
   }
 
-  var TableView = Marionette.ItemView.extend({
+  const TableView = Marionette.ItemView.extend({
     tagName: 'table',
     className: 'table_view',
     template: template$2,
@@ -3636,7 +3671,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       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({
@@ -3658,7 +3693,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
           tagName: 'tr',
           className: 'blank_slate',
           template: blankSlateTemplate,
-          serializeData: function serializeData() {
+          serializeData: function () {
             return {
               blankSlateText: view.options.blankSlateText,
               colSpan: view.options.columns.length
@@ -3675,18 +3710,18 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   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);
@@ -3716,99 +3751,36 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   });
 
-  function _defineProperty$1(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$1(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$1(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i] != null ? arguments[i] : {};
-
-      if (i % 2) {
-        ownKeys$1(Object(source), true).forEach(function (key) {
-          _defineProperty$1(target, key, source[key]);
-        });
-      } else if (Object.getOwnPropertyDescriptors) {
-        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-      } else {
-        ownKeys$1(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`]
+      });
     }
   };
 
@@ -3901,6 +3873,11 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *   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.
@@ -3946,7 +3923,8 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @mixin
    */
-  var inputView = _objectSpread2$1(_objectSpread2$1({}, attributeBinding), {}, {
+  const inputView = {
+    ...attributeBinding,
     ui: {
       label: 'label',
       labelText: 'label .name',
@@ -3974,19 +3952,22 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
      * @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);
@@ -3996,15 +3977,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
      * 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();
@@ -4014,7 +3995,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
      * 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'
       });
@@ -4026,34 +4007,34 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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 = '';
@@ -4069,7 +4050,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @class
    */
-  var CheckBoxGroupInputView = Marionette.ItemView.extend({
+  const CheckBoxGroupInputView = Marionette.ItemView.extend({
     mixins: [inputView],
     template: template$4,
     className: 'check_box_group_input',
@@ -4080,7 +4061,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       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', {
@@ -4095,26 +4076,26 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         });
       }
     },
-    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]);
@@ -4142,7 +4123,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @class
    */
-  var UrlDisplayView = Marionette.ItemView.extend({
+  const UrlDisplayView = Marionette.ItemView.extend({
     mixins: [inputView],
     template: template$5,
     ui: {
@@ -4152,43 +4133,21 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       '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.
    *
@@ -4201,84 +4160,73 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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.
@@ -4301,20 +4249,20 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *   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') {
@@ -4328,25 +4276,22 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
       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();
@@ -4381,7 +4326,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @class
    */
-  var TextInputView = Marionette.ItemView.extend({
+  const TextInputView = Marionette.ItemView.extend({
     mixins: [inputView, inputWithPlaceholderText, viewWithValidationErrorMessages],
     template: template$6,
     ui: {
@@ -4390,25 +4335,25 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     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));
 
@@ -4418,7 +4363,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       // 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'));
@@ -4434,11 +4379,11 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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', '');
     }
@@ -4450,31 +4395,640 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   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';
@@ -4509,75 +5063,75 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *   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);
@@ -4589,6 +5143,19 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       } 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;
     }
   });
 
@@ -4604,8 +5171,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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.
@@ -4682,7 +5250,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @class
    */
-  var SelectInputView = Marionette.ItemView.extend({
+  const SelectInputView = Marionette.ItemView.extend({
     mixins: [inputView],
     template: template$9,
     events: {
@@ -4692,7 +5260,8 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       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) {
@@ -4726,7 +5295,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
       this.optGroups = {};
     },
-    onRender: function onRender() {
+    onRender: function () {
       this.appendBlank();
       this.appendPlaceholder();
       this.appendOptions();
@@ -4736,7 +5305,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         this.save();
       }
     },
-    appendBlank: function appendBlank() {
+    appendBlank: function () {
       if (!this.options.includeBlank) {
         return;
       }
@@ -4753,7 +5322,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       option.text = blankText;
       this.ui.select.append(option);
     },
-    appendPlaceholder: function appendPlaceholder() {
+    appendPlaceholder: function () {
       if (!this.options.placeholderModel && !this.options.placeholderValue) {
         return;
       }
@@ -4768,7 +5337,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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];
@@ -4785,7 +5354,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         }
       }, this);
     },
-    findOrCreateOptGroup: function findOrCreateOptGroup(label) {
+    findOrCreateOptGroup: function (label) {
       if (!this.optGroups[label]) {
         this.optGroups[label] = $('<optgroup />', {
           label: label
@@ -4793,15 +5362,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
       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) {
@@ -4815,9 +5384,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   });
 
-  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) {
@@ -4832,18 +5401,18 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         });
       }
     },
-    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) {
@@ -4851,16 +5420,16 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
           }
           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>', {
@@ -4874,7 +5443,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
           }
           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(),
@@ -4900,7 +5469,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         }
       });
     },
-    select: function select(event, ui) {
+    select: function (event, ui) {
       this.ui.select.val(ui.item.value);
       this.save();
     }
@@ -4963,7 +5532,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @class
    */
-  var TextAreaInputView = Marionette.ItemView.extend({
+  const TextAreaInputView = Marionette.ItemView.extend({
     mixins: [inputView, inputWithPlaceholderText],
     template: template$a,
     className: 'text_area_input',
@@ -4989,7 +5558,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       '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();
@@ -5058,16 +5627,26 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       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();
@@ -5080,7 +5659,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         }
       }, this));
     },
-    setupFragmentLinkPanel: function setupFragmentLinkPanel() {
+    setupFragmentLinkPanel: function () {
       if (this.options.fragmentLinkInputView) {
         this.fragmentLinkModel = new Backbone.Model();
         this.listenTo(this.fragmentLinkModel, 'change', function (model, options) {
@@ -5108,7 +5687,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         this.ui.fragmentLinkPanel.hide();
       }
     },
-    initLinkTypePanels: function initLinkTypePanels(isUrlLink) {
+    initLinkTypePanels: function (isUrlLink) {
       if (isUrlLink) {
         this.ui.urlLinkRadioButton.prop('checked', true);
       } else {
@@ -5116,23 +5695,23 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }
       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');
     }
   });
@@ -5160,7 +5739,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @class
    */
-  var UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype */{
+  const UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype */{
     mixins: [inputView],
     template: template$b,
     ui: {
@@ -5170,74 +5749,85 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     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$1(_defineProperty$1({}, _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();
@@ -5245,7 +5835,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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);
@@ -5255,16 +5845,24 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         }).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) {
@@ -5284,6 +5882,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       function resetValidationError(message) {
         view.$el.removeClass('invalid');
         view.ui.input.attr('aria-invalid', 'false');
+        view.ui.validation.text('');
         view.ui.validation.hide();
       }
     }
@@ -5335,9 +5934,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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'));
@@ -5352,14 +5951,14 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }).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 + '/');
       });
@@ -5368,8 +5967,12 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   });
 
   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
   }
 
@@ -5398,39 +6001,48 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *   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');
@@ -5438,33 +6050,54 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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);
     }
   });
@@ -5475,7 +6108,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   return __p
   }
 
-  var JsonInputView = Marionette.ItemView.extend({
+  const JsonInputView = Marionette.ItemView.extend({
     mixins: [inputView],
     template: template$d,
     className: 'json_input',
@@ -5486,30 +6119,30 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       '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'));
@@ -5519,15 +6152,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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;
@@ -5564,7 +6197,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @class
    */
-  var CheckBoxInputView = Marionette.ItemView.extend({
+  const CheckBoxInputView = Marionette.ItemView.extend({
     mixins: [inputView],
     template: template$e,
     className: 'check_box_input',
@@ -5575,18 +6208,18 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       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 {
@@ -5594,12 +6227,12 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         }
       }
     },
-    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) {
@@ -5612,6 +6245,86 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     }
   });
 
+  /**
+   * 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.
    *
@@ -5621,7 +6334,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @class
    */
-  var SeparatorView = Marionette.View.extend({
+  const SeparatorView = Marionette.View.extend({
     className: 'separator'
   });
 
@@ -5633,11 +6346,14 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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'
     }
@@ -5658,9 +6374,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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: ''
@@ -5698,7 +6414,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @since 12.0
    */
-  var DeleteRowTableCellView = TableCellView.extend({
+  const DeleteRowTableCellView = TableCellView.extend({
     className: 'delete_row_table_cell',
     template: template$f,
     ui: {
@@ -5706,11 +6422,11 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     },
     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);
@@ -5723,11 +6439,11 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
         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();
     }
   });
@@ -5748,9 +6464,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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()
@@ -5771,17 +6487,18 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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();
@@ -5790,8 +6507,8 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
       }) : 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(' '));
     }
   });
 
@@ -5814,15 +6531,15 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
    *
    * @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 = {
@@ -5830,27 +6547,27 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
             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');
       }
@@ -5860,9 +6577,9 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
     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');
@@ -5893,11 +6610,11 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
           });
         }
       },
-      'mouseleave [data-tooltip]': function mouseleaveDataTooltip() {
+      'mouseleave [data-tooltip]': function () {
         this.tooltip.hide();
       }
     },
-    onRender: function onRender() {
+    onRender: function () {
       this.appendSubview(this.tooltip = new TooltipView());
     }
   };
@@ -5906,6 +6623,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   exports.CheckBoxInputView = CheckBoxInputView;
   exports.CollectionView = CollectionView;
   exports.ColorInputView = ColorInputView;
+  exports.ColorPicker = ColorPicker;
   exports.ConfigurationEditorTabView = ConfigurationEditorTabView;
   exports.ConfigurationEditorView = ConfigurationEditorView;
   exports.DeleteRowTableCellView = DeleteRowTableCellView;
@@ -5919,6 +6637,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   exports.Object = BaseObject;
   exports.PresenceTableCellView = PresenceTableCellView;
   exports.ProxyUrlInputView = ProxyUrlInputView;
+  exports.RadioButtonGroupInputView = RadioButtonGroupInputView;
   exports.SelectInputView = SelectInputView;
   exports.SeparatorView = SeparatorView;
   exports.SliderInputView = SliderInputView;
@@ -5935,6 +6654,7 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
   exports.UrlDisplayView = UrlDisplayView;
   exports.UrlInputView = UrlInputView;
   exports.attributeBinding = attributeBinding;
+  exports.attributeBindingUtils = attributeBindingUtils;
   exports.cssModulesUtils = cssModulesUtils;
   exports.i18nUtils = i18nUtils;
   exports.inputView = inputView;
@@ -5946,4 +6666,4 @@ this.pageflow._uiGlobalInterop = (function (exports, Marionette, _, $, I18n$1, B
 
   return exports;
 
-}({}, Backbone.Marionette, _, jQuery, I18n, Backbone, Backbone.ChildViewContainer, IScroll, jQuery, wysihtml5, jQuery, Cocktail));
+}({}, Backbone.Marionette, _, jQuery, I18n, Backbone, Backbone.ChildViewContainer, IScroll, wysihtml5, jQuery, Cocktail));