pageflow 17.0.5 → 17.1.0

data/package/ui.js

@@ -3,6 +3,7 @@ import _ from 'underscore';
 import $ from 'jquery';
 import I18n$1 from 'i18n-js';
 import Backbone from 'backbone';
+import Sortable from 'sortablejs';
 import ChildViewContainer from 'backbone.babysitter';
 import IScroll from 'iscroll';
 import 'jquery.minicolors';
@@ -16,15 +17,12 @@ Marionette.Renderer.render = function (template, data) {
   if (_.isFunction(template)) {
     return template(data);
   }
-
   if (template.indexOf('templates/') === 0) {
     template = 'pageflow/editor/' + template;
   }
-
   if (!JST[template]) {
     throw "Template '" + template + "' not found!";
   }
-
   return JST[template](data);
 };
 
@@ -50,22 +48,19 @@ Marionette.Renderer.render = function (template, data) {
  * @memberof i18nUtils
  * @since 12.0
  */
-
 function attributeTranslationKeys(attributeName, keyName, options) {
   var result = [];
-
   if (options.prefixes) {
     result = result.concat(_(options.prefixes).map(function (prefix) {
       return prefix + '.' + attributeName + '.' + keyName;
     }, this));
   }
-
   if (options && options.fallbackPrefix) {
     result.push(options.fallbackPrefix + '.' + options.fallbackModelI18nKey + '.' + attributeName);
   }
-
   return result;
 }
+
 /**
  * Takes the same parameters as {@link
  * #i18nutilsattributetranslationkeys attributeTranslationKeys}, but returns the first existing
@@ -75,10 +70,10 @@ function attributeTranslationKeys(attributeName, keyName, options) {
  * @memberof i18nUtils
  * @since 12.0
  */
-
 function attributeTranslation(attributeName, keyName, options) {
   return findTranslation(attributeTranslationKeys(attributeName, keyName, options));
 }
+
 /**
  * Find the first key for which a translation exists and return the
  * translation.
@@ -97,19 +92,15 @@ function attributeTranslation(attributeName, keyName, options) {
  * @memberof i18nUtils
  * @return {string}
  */
-
 function findTranslation(keys, options) {
   options = options || {};
-
   if (options.html) {
     keys = translationKeysWithSuffix(keys, 'html');
   }
-
   return _.chain(keys).reverse().reduce(function (result, key) {
     var unescapedTranslation = I18n$1.t(key, _.extend({}, options, {
       defaultValue: result
     }));
-
     if (!options.html || key.match(/_html$/) || result == unescapedTranslation) {
       return unescapedTranslation;
     } else {
@@ -117,6 +108,7 @@ function findTranslation(keys, options) {
     }
   }, options.defaultValue).value();
 }
+
 /**
  * Return the first key for which a translation exists. Returns the
  * first if non of the keys has a translation.
@@ -127,7 +119,6 @@ function findTranslation(keys, options) {
  * @memberof i18nUtils
  * @return {string}
  */
-
 function findKeyWithTranslation(keys) {
   var missing = '_not_translated';
   return _(keys).detect(function (key) {
@@ -252,12 +243,12 @@ function ui(styles) {
   for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
     classNames[_key - 1] = arguments[_key];
   }
-
   return classNames.reduce(function (result, className) {
     result[className] = selector(styles, className);
     return result;
   }, {});
 }
+
 /**
  * Create object that can be passed to Marionette events property from CSS
  * module object.
@@ -295,18 +286,17 @@ function ui(styles) {
  *
  * @memberof cssModulesUtils
  */
-
 function events(styles, mapping) {
   return Object.keys(mapping).reduce(function (result, key) {
     var _key$split = key.split(' '),
-        _key$split2 = _slicedToArray(_key$split, 2),
-        event = _key$split2[0],
-        className = _key$split2[1];
-
+      _key$split2 = _slicedToArray(_key$split, 2),
+      event = _key$split2[0],
+      className = _key$split2[1];
     result["".concat(event, " ").concat(selector(styles, className))] = mapping[key];
     return result;
   }, {});
 }
+
 /**
  * Generates a CSS selector from a CSS module rule.
  *
@@ -319,14 +309,11 @@ function events(styles, mapping) {
  * @return {String} CSS Selector
  * @memberof cssModulesUtils
  */
-
 function selector(styles, className) {
   var classNames = styles[className];
-
   if (!classNames) {
     throw new Error("Unknown class name ".concat(className, " in mapping. Knwon names: ").concat(Object.keys(styles).join(', '), "."));
   }
-
   return ".".concat(classNames.replace(/ /g, '.'));
 }
 
@@ -337,28 +324,26 @@ var cssModulesUtils = /*#__PURE__*/Object.freeze({
   selector: selector
 });
 
+// Class-y constructor by github.com/opensas
 // https://github.com/jashkenas/backbone/issues/2601
 
 function BaseObject(options) {
   this.initialize.apply(this, arguments);
 }
-
 _.extend(BaseObject.prototype, Backbone.Events, {
   initialize: function initialize(options) {}
-}); // The self-propagating extend function that Backbone classes use.
-
+});
 
+// The self-propagating extend function that Backbone classes use.
 BaseObject.extend = Backbone.Model.extend;
 
 var serverSideValidation = {
   initialize: function initialize() {
     var _this = this;
-
     this.validationErrors = {};
     this.listenTo(this, 'error', function (model, request) {
       if (request.status === 422) {
         _this.validationErrors = JSON.parse(request.responseText).errors;
-
         _this.trigger('invalid');
       }
     });
@@ -376,7 +361,6 @@ var CollectionView = Marionette.View.extend({
     this.listenTo(this.collection, 'add', this.addItem);
     this.listenTo(this.collection, 'remove', this.removeItem);
     this.listenTo(this.collection, 'sort', this.sort);
-
     if (this.options.loadingViewConstructor) {
       this.listenTo(this.collection, 'request', function () {
         this.loading = true;
@@ -397,7 +381,6 @@ var CollectionView = Marionette.View.extend({
       this.togglePlaceHolder();
       this.rendered = true;
     }
-
     return this;
   },
   onClose: function onClose() {
@@ -409,24 +392,20 @@ var CollectionView = Marionette.View.extend({
       model: item
     }, this.getItemViewOptions(item)));
     this.itemViews.add(view);
-
     if (this.rendered) {
       var index = this.collection.indexOf(item);
       view.render();
       view.$el.data('view', view);
-
       if (index > 0) {
         this.$el.children().eq(index - 1).after(view.el);
       } else {
         this.$el.prepend(view.el);
       }
-
       this.togglePlaceHolder();
     }
   },
   removeItem: function removeItem(item) {
     var view = this.itemViews.findByModel(item);
-
     if (view) {
       this.itemViews.remove(view);
       view.close();
@@ -438,19 +417,15 @@ var CollectionView = Marionette.View.extend({
     this.collection.each(function (item) {
       var itemView = this.itemViews.findByModel(item);
       var element;
-
       if (!itemView) {
         return;
       }
-
       element = itemView.$el;
-
       if (last) {
         last.after(element);
       } else {
         this.$el.prepend(element);
       }
-
       last = element;
     }, this);
   },
@@ -470,7 +445,6 @@ var CollectionView = Marionette.View.extend({
   togglePlaceHolder: function togglePlaceHolder() {
     var lastPlaceholderConstructor = this.placeHolderConstructor;
     this.placeHolderConstructor = this.getPlaceHolderConstructor();
-
     if (this.itemViews.length || !this.placeHolderConstructor) {
       this.closePlaceHolderView();
     } else if (!this.placeHolderView || lastPlaceholderConstructor !== this.placeHolderConstructor) {
@@ -490,31 +464,47 @@ var CollectionView = Marionette.View.extend({
 
 var SortableCollectionView = CollectionView.extend({
   render: function render() {
+    var _this = this;
     CollectionView.prototype.render.call(this);
-    this.$el.sortable({
-      connectWith: this.options.connectWith,
-      placeholder: 'sortable-placeholder',
-      forcePlaceholderSize: true,
-      delay: 200,
-      update: _.bind(function (event, ui) {
-        if (ui.item.parent().is(this.el)) {
-          this.updateOrder();
+    this.sortable = Sortable.create(this.el, {
+      group: this.options.connectWith,
+      animation: 150,
+      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();
         }
-      }, this),
-      receive: _.bind(function (event, ui) {
-        var view = ui.item.data('view');
-        this.reindexPositions();
-        this.itemViews.add(view);
-        this.collection.add(view.model);
-      }, this),
-      remove: _.bind(function (event, ui) {
-        var view = ui.item.data('view');
-        this.itemViews.remove(view);
-        this.collection.remove(view.model);
-      }, this)
+      },
+      onRemove: function onRemove(event) {
+        var 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();
+        }
+      }
     });
     return this;
   },
+  onClose: function onClose() {
+    CollectionView.prototype.onClose.call(this);
+    this.sortable.destroy();
+  },
+  disableSorting: function disableSorting() {
+    this.sortable.option('disabled', true);
+  },
+  enableSorting: function enableSorting() {
+    this.sortable.option('disabled', false);
+  },
   addItem: function addItem(item) {
     if (!this.itemViews.findByModel(item)) {
       CollectionView.prototype.addItem.call(this, item);
@@ -537,6 +527,41 @@ var SortableCollectionView = CollectionView.extend({
   }
 });
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+var _excluded = ["ignoreUndefined"];
 var ConfigurationEditorTabView = Marionette.View.extend({
   className: 'configuration_editor_tab',
   initialize: function initialize() {
@@ -571,27 +596,27 @@ var ConfigurationEditorTabView = Marionette.View.extend({
     }
   }
 });
-
 ConfigurationEditorTabView.Groups = function () {
   var groups = {};
-
   this.define = function (name, fn) {
     if (typeof fn !== 'function') {
       throw 'Group has to be function.';
     }
-
     groups[name] = fn;
   };
-
-  this.apply = function (name, context, options) {
+  this.apply = function (name, context) {
+    var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},
+      ignoreUndefined = _ref.ignoreUndefined,
+      options = _objectWithoutProperties(_ref, _excluded);
     if (!(name in groups)) {
+      if (ignoreUndefined) {
+        return;
+      }
       throw 'Undefined group named "' + name + '".';
     }
-
     groups[name].call(context, options || {});
   };
 };
-
 ConfigurationEditorTabView.groups = new ConfigurationEditorTabView.Groups();
 
 function template(data) {
@@ -601,6 +626,7 @@ return __p
 }
 
 /*global pageflow*/
+
 /**
  * Switch between different views using tabs.
  *
@@ -621,10 +647,7 @@ return __p
  *
  * @class
  */
-
-var TabsView = Marionette.Layout.extend(
-/* @lends TabView.prototype */
-{
+var TabsView = Marionette.Layout.extend( /* @lends TabView.prototype */{
   template: template,
   className: 'tabs_view',
   ui: {
@@ -643,7 +666,6 @@ var TabsView = Marionette.Layout.extend(
     this.tabFactoryFns = {};
     this.tabNames = [];
     this.currentTabName = null;
-
     this._refreshScrollerOnSideBarResize();
   },
   tab: function tab(name, factoryFn) {
@@ -655,7 +677,6 @@ var TabsView = Marionette.Layout.extend(
       var label = findTranslation(this._labelTranslationKeys(name));
       this.ui.headers.append($('<li />').attr('data-tab-name', name).text(label));
     }, this);
-
     this.scroller = new IScroll(this.ui.scroller[0], {
       scrollX: true,
       scrollY: false,
@@ -667,9 +688,7 @@ var TabsView = Marionette.Layout.extend(
   },
   changeTab: function changeTab(name) {
     this.container.show(this.tabFactoryFns[name]());
-
     this._updateActiveHeader(name);
-
     this.currentTabName = name;
   },
   defaultTab: function defaultTab() {
@@ -679,14 +698,12 @@ var TabsView = Marionette.Layout.extend(
       return _.first(this.tabNames);
     }
   },
-
   /**
    * Rerender current tab.
    */
   refresh: function refresh() {
     this.changeTab(this.currentTabName);
   },
-
   /**
    * Adjust tabs scroller to changed width of view.
    */
@@ -700,15 +717,12 @@ var TabsView = Marionette.Layout.extend(
     var result = _.map(this.options.translationKeyPrefixes, function (prefix) {
       return prefix + '.' + name;
     });
-
     if (this.options.i18n) {
       result.push(this.options.i18n + '.' + name);
     }
-
     if (this.options.fallbackTranslationKeyPrefix) {
       result.push(this.options.fallbackTranslationKeyPrefix + '.' + name);
     }
-
     return result;
   },
   _updateActiveHeader: function _updateActiveHeader(activeTabName) {
@@ -756,7 +770,6 @@ var TabsView = Marionette.Layout.extend(
  *
  * @class
  */
-
 var ConfigurationEditorView = Marionette.View.extend({
   className: 'configuration_editor',
   initialize: function initialize() {
@@ -782,14 +795,12 @@ var ConfigurationEditorView = Marionette.View.extend({
       return tabView;
     }, this));
   },
-
   /**
    * Rerender current tab.
    */
   refresh: function refresh() {
     this.tabsView.refresh();
   },
-
   /**
    * Adjust tabs scroller to changed width of view.
    */
@@ -801,7 +812,6 @@ var ConfigurationEditorView = Marionette.View.extend({
     return this;
   }
 });
-
 _.extend(ConfigurationEditorView, {
   repository: {},
   register: function register(pageTypeName, prototype) {
@@ -829,7 +839,6 @@ return __p
  *
  * @since 12.0
  */
-
 var TableCellView = Marionette.ItemView.extend({
   tagName: 'td',
   template: template$1,
@@ -841,14 +850,12 @@ var TableCellView = Marionette.ItemView.extend({
     this.setupContentBinding();
     this.update();
   },
-
   /**
    * Override in concrete cell view.
    */
   update: function update() {
     throw 'Not implemented';
   },
-
   /**
    * Returns the column attribute's value in the row model.
    */
@@ -866,7 +873,6 @@ var TableCellView = Marionette.ItemView.extend({
       return this.model;
     }
   },
-
   /**
    * Look up attribute specific translations based on
    * `attributeTranslationKeyPrefixes` of the the parent `TableView`.
@@ -893,7 +899,6 @@ var TableCellView = Marionette.ItemView.extend({
       return prefix + '.' + this.options.column.name + '.' + keyName;
     }, this);
   },
-
   /**
    * Set up content binding to update this view upon change of
    * specified attribute on this.getModel().
@@ -942,7 +947,6 @@ var TableRowView = Marionette.View.extend({
         attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
       }, column.cellViewOptions || {})));
     }, this);
-
     this.updateClassName();
     return this;
   },
@@ -983,14 +987,12 @@ var TableView = Marionette.ItemView.extend({
   },
   onRender: function onRender() {
     var view = this;
-
     _(this.options.columns).each(function (column) {
       this.ui.headRow.append(this.subview(new TableHeaderCellView({
         column: column,
         attributeTranslationKeyPrefixes: this.options.attributeTranslationKeyPrefixes
       })).el);
     }, this);
-
     this.subview(new CollectionView({
       el: this.ui.body,
       collection: this.collection,
@@ -1044,7 +1046,6 @@ var TooltipView = Marionette.ItemView.extend({
       this.$el.toggleClass('align_bottom_right', options.align === 'bottom right');
       this.$el.toggleClass('align_bottom_left', options.align === 'bottom left');
       this.$el.toggleClass('align_top_center', options.align === 'top center');
-
       if (options.align === 'bottom right' || options.align === 'bottom left') {
         offsetTop = 10;
         offsetLeft = 0;
@@ -1055,7 +1056,6 @@ var TooltipView = Marionette.ItemView.extend({
         offsetTop = -17;
         offsetLeft = 10;
       }
-
       this.$el.css({
         top: position.top + offsetTop + 'px',
         left: position.left + offsetLeft + 'px'
@@ -1123,37 +1123,32 @@ var attributeBinding = {
   },
   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(_this.model, 'change:' + attribute, update);
+        _this.listenTo(model, 'change:' + attribute, update);
       });
     }
-
     update();
-
     function update() {
       updateMethod.call(view, view.getAttributeBoundOption(optionName, normalize));
     }
   },
   getAttributeBoundOption: function getAttributeBoundOption(optionName) {
-    var _this2 = this;
-
     var normalize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function (value) {
       return value;
     };
     var binding = this.options["".concat(optionName, "Binding")];
+    var model = this.options["".concat(optionName, "BindingModel")] || this.model;
     var bindingValueOptionName = "".concat(optionName, "BindingValue");
     var value = Array.isArray(binding) ? binding.map(function (attribute) {
-      return _this2.model.get(attribute);
-    }) : this.model.get(binding);
-
+      return model.get(attribute);
+    }) : model.get(binding);
     if (bindingValueOptionName in this.options) {
       return value === this.options[bindingValueOptionName];
     } else if (typeof this.options[optionName] === 'function') {
@@ -1276,6 +1271,9 @@ var attributeBinding = {
  *   Input will be disabled whenever the value of the `disabledBinding`
  *   attribute equals the value of this option.
  *
+ * @param {Backbone.Model} [options.disabledBindingModel]
+ *   Alternative model to bind to.
+ *
  * @param {string|string[]} [options.visibleBinding]
  *   Name of an attribute to control whether the input is visible. If
  *   the `visible` and `visibleBindingValue` options are not set,
@@ -1292,16 +1290,17 @@ var attributeBinding = {
  *   Input will be visible whenever the value of the `visibleBinding`
  *   attribute equals the value of this option.
  *
+ * @param {Backbone.Model} [options.visibleBindingModel]
+ *   Alternative model to bind to.
+ *
  * @mixin
  */
-
 var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
   ui: {
     label: 'label',
     labelText: 'label .name',
     inlineHelp: 'label .inline_help'
   },
-
   /**
    * Returns an array of translation keys based on the
    * `attributeTranslationKeyPrefixes` option and the given keyName.
@@ -1342,7 +1341,6 @@ var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
     this.setupBooleanAttributeBinding('disabled', this.updateDisabled);
     this.setupBooleanAttributeBinding('visible', this.updateVisible);
   },
-
   /**
    * The label to display in the form.
    * @return {string}
@@ -1357,12 +1355,10 @@ var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
   },
   updateInlineHelp: function updateInlineHelp() {
     this.ui.inlineHelp.html(this.inlineHelpText());
-
     if (!this.inlineHelpText()) {
       this.ui.inlineHelp.hide();
     }
   },
-
   /**
    * The inline help text for the form field.
    * @return {string}
@@ -1371,11 +1367,9 @@ var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
     var keys = this.attributeTranslationKeys('inline_help', {
       fallbackPrefix: 'pageflow.ui.inline_help'
     });
-
     if (this.isDisabled()) {
       keys = translationKeysWithSuffix(keys, 'disabled');
     }
-
     return _.compact([findTranslation(keys, {
       defaultValue: '',
       html: true
@@ -1394,7 +1388,6 @@ var inputView = _objectSpread2(_objectSpread2({}, attributeBinding), {}, {
   updateDisabled: function updateDisabled() {
     this.$el.toggleClass('input-disabled', !!this.isDisabled());
     this.updateInlineHelp();
-
     if (this.ui.input) {
       this.updateDisabledAttribute(this.ui.input);
     }
@@ -1425,7 +1418,6 @@ return __p
  *
  * @class
  */
-
 var CheckBoxGroupInputView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: template$4,
@@ -1447,7 +1439,6 @@ var CheckBoxGroupInputView = Marionette.ItemView.extend({
           return translationKeyPrefix + '.' + value;
         }, this);
       }
-
       this.options.texts = _.map(this.options.translationKeys, function (key) {
         return I18n$1.t(key);
       });
@@ -1467,11 +1458,9 @@ var CheckBoxGroupInputView = Marionette.ItemView.extend({
   },
   save: function save() {
     var configured = {};
-
     _.each(this.ui.container.find('input'), function (input) {
       configured[$(input).attr('name')] = $(input).prop('checked');
     });
-
     this.model.set(this.options.propertyName, configured);
   },
   load: function load() {
@@ -1502,7 +1491,6 @@ return __p
  *
  * @class
  */
-
 var UrlDisplayView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: template$5,
@@ -1522,7 +1510,7 @@ var UrlDisplayView = Marionette.ItemView.extend({
     this.update();
   },
   update: function update() {
-    var url = this.model.get('original_url');
+    var url = this.model.get(this.options.propertyName || 'original_url');
     this.$el.toggle(this.model.isUploaded() && !_.isEmpty(url));
     this.ui.link.attr('href', url);
   }
@@ -1562,7 +1550,6 @@ function _createClass(Constructor, protoProps, staticProps) {
  *
  * @class
  */
-
 var NumberInputView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: function template() {
@@ -1608,11 +1595,9 @@ var NumberInputView = Marionette.ItemView.extend({
     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({
@@ -1630,12 +1615,10 @@ var NumberParser = /*#__PURE__*/function () {
       return d.type === "decimal";
     }).value, "]"));
     this._numeral = new RegExp("[".concat(numerals.join(""), "]"), "g");
-
     this._index = function (d) {
       return index.get(d);
     };
   }
-
   _createClass(NumberParser, [{
     key: "parse",
     value: function parse(string) {
@@ -1643,7 +1626,6 @@ var NumberParser = /*#__PURE__*/function () {
       return string ? +string : NaN;
     }
   }]);
-
   return NumberParser;
 }();
 
@@ -1671,7 +1653,6 @@ var NumberParser = /*#__PURE__*/function () {
 var inputWithPlaceholderText = {
   onRender: function onRender() {
     this.updatePlaceholder();
-
     if (this.options.placeholderBinding) {
       this.listenTo(this.model, 'change:' + this.options.placeholderBinding, this.updatePlaceholder);
     }
@@ -1694,7 +1675,6 @@ var inputWithPlaceholderText = {
         return this.placeholderModelValue();
       }
     }
-
     return '';
   },
   placeholderModelValue: function placeholderModelValue() {
@@ -1709,9 +1689,7 @@ var viewWithValidationErrorMessages = {
   },
   updateValidationErrorMessages: function updateValidationErrorMessages() {
     var _this = this;
-
     var errors = this.model.validationErrors && this.model.validationErrors[this.options.propertyName] || [];
-
     if (errors.length) {
       this.validationErrorList = this.validationErrorList || $('<ul class="validation_error_messages" />').appendTo(this.el);
       this.validationErrorList.html('');
@@ -1752,7 +1730,6 @@ return __p
  *
  * @class
  */
-
 var TextInputView = Marionette.ItemView.extend({
   mixins: [inputView, inputWithPlaceholderText, viewWithValidationErrorMessages],
   template: template$6,
@@ -1782,21 +1759,20 @@ var TextInputView = Marionette.ItemView.extend({
   },
   load: function load() {
     var input = this.ui.input;
-    input.val(this.model.get(this.options.propertyName)); // set mysql varchar length as default for non-legacy data
+    input.val(this.model.get(this.options.propertyName));
 
-    this.options.maxLength = this.options.maxLength || 255; // do not validate legacy data which length exceeds the specified maximum
+    // set mysql varchar length as default for non-legacy data
+    this.options.maxLength = this.options.maxLength || 255;
+    // do not validate legacy data which length exceeds the specified maximum
     // for new and maxLength-conforming data: add validation
-
     this.validateMaxLength = input.val().length <= this.options.maxLength;
   },
   validate: function validate() {
     var input = this.ui.input;
-
     if (this.options.required && !input.val()) {
       this.displayValidationError(I18n$1.t('pageflow.ui.views.inputs.text_input_view.required_field'));
       return false;
     }
-
     if (this.validateMaxLength && input.val().length > this.options.maxLength) {
       this.displayValidationError(I18n$1.t('pageflow.ui.views.inputs.text_input_view.max_characters_exceeded', {
         max_length: this.options.maxLength
@@ -1817,9 +1793,48 @@ var TextInputView = Marionette.ItemView.extend({
   }
 });
 
+function template$7(data) {
+var __p = '';
+__p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<div class="file_name_input-wrapper">\n  <input type="text" dir="auto" />\n  <span class="file_name_input-extension"></span>\n</div>\n';
+return __p
+}
+
+var FileNameInputView = TextInputView.extend({
+  template: template$7,
+  className: 'file_name_input',
+  ui: Object.assign({}, TextInputView.prototype.ui, {
+    extension: '.file_name_input-extension'
+  }),
+  onRender: function onRender() {
+    TextInputView.prototype.onRender.call(this);
+  },
+  save: function save() {
+    var baseName = this.ui.input.val();
+    var 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] : '';
+    this.ui.input.val(baseName);
+    this.ui.extension.text(extension);
+    this.options.maxLength = this.options.maxLength || 255;
+  }
+});
+
+function template$8(data) {
+var __p = '';
+__p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" dir="auto" autocomplete="off" />\n';
+return __p
+}
+
 /**
  * Input view for a color value in hex representation.
- * See {@link inputView} for further options
+ *
+ * See {@link inputWithPlaceholderText} for placeholder related
+ * further options.  See {@link inputView} for further options.
  *
  * @param {Object} [options]
  *
@@ -1835,6 +1850,14 @@ var TextInputView = Marionette.ItemView.extend({
  *   defaultValue option is set, the value of the defaultValueBinding
  *   attribute will be used as default value.
  *
+ * @param {string|function} [options.placeholderColor]
+ *   Color to display in swatch by default.
+ *
+ * @param {string} [options.placeholderColorBinding]
+ *   Name of an attribute the placeholder color depends on. If a function
+ *   is used as placeholderColor option, it will be passed the value of the
+ *   placeholderColorBinding attribute each time it changes.
+ *
  * @param {string[]} [options.swatches]
  *   Preset color values to be displayed inside the picker drop
  *   down. The default value, if present, is always used as the
@@ -1842,10 +1865,9 @@ var TextInputView = Marionette.ItemView.extend({
  *
  * @class
  */
-
 var ColorInputView = Marionette.ItemView.extend({
-  mixins: [inputView],
-  template: template$6,
+  mixins: [inputView, inputWithPlaceholderText],
+  template: template$8,
   className: 'color_input',
   ui: {
     input: 'input'
@@ -1854,28 +1876,28 @@ var ColorInputView = Marionette.ItemView.extend({
     'mousedown': 'refreshPicker'
   },
   onRender: function onRender() {
+    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.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();
   },
+  updatePlaceholderColor: function updatePlaceholderColor(value) {
+    this.el.style.setProperty('--placeholder-color', value);
+  },
   updateSettings: function updateSettings() {
     this.resetSwatchesInStoredSettings();
     this.ui.input.minicolors('settings', {
@@ -1887,7 +1909,6 @@ var ColorInputView = Marionette.ItemView.extend({
   // 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);
@@ -1897,7 +1918,6 @@ var ColorInputView = Marionette.ItemView.extend({
     if (!this._saving) {
       this.ui.input.minicolors('value', this.model.get(this.options.propertyName) || this.defaultValue());
     }
-
     this.$el.toggleClass('is_default', !this.model.has(this.options.propertyName));
   },
   refreshPicker: function refreshPicker() {
@@ -1908,11 +1928,9 @@ var ColorInputView = Marionette.ItemView.extend({
   },
   defaultValue: function defaultValue() {
     var bindingValue;
-
     if (this.options.defaultValueBinding) {
       bindingValue = this.model.get(this.options.defaultValueBinding);
     }
-
     if (typeof this.options.defaultValue === 'function') {
       return this.options.defaultValue(bindingValue);
     } else if ('defaultValue' in this.options) {
@@ -1923,7 +1941,7 @@ var ColorInputView = Marionette.ItemView.extend({
   }
 });
 
-function template$7(data) {
+function template$9(data) {
 var __p = '';
 __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<select></select>';
 return __p
@@ -1938,6 +1956,9 @@ return __p
  * @param {string[]} [options.values]
  *   List of possible values to persist in the attribute.
  *
+ * @param {number} [options.defaultValue]
+ *   Default value to display if property is not set.
+ *
  * @param {string[]} [options.texts]
  *   List of display texts for drop down items.
  *
@@ -1985,7 +2006,10 @@ return __p
  *   Display text for the blank item.
  *
  * @param {string} [options.blankTranslationKey]
- *   Translation key to obtain display text for blank item.
+ *   Translation key to obtain display text for blank item. If neither
+ *   `blankText` nor `blankTranslationKey` are provided, the blank text
+ *   will be determined using `attributeTranslationKeyPrefixes` with
+ *   the suffix `blank`, similar to how labels are determined.
  *
  * @param {string} [options.placeholderValue]
  *   Include an item that sets the value of the attribute to a blank
@@ -2007,10 +2031,9 @@ return __p
  *
  * @class
  */
-
 var SelectInputView = Marionette.ItemView.extend({
   mixins: [inputView],
-  template: template$7,
+  template: template$9,
   events: {
     'change': 'save'
   },
@@ -2021,20 +2044,17 @@ var SelectInputView = Marionette.ItemView.extend({
   initialize: function initialize() {
     if (this.options.collection) {
       this.options.values = _.pluck(this.options.collection, this.options.valueProperty);
-
       if (this.options.textProperty) {
         this.options.texts = _.pluck(this.options.collection, this.options.textProperty);
       } else if (this.options.translationKeyProperty) {
         this.options.translationKeys = _.pluck(this.options.collection, this.options.translationKeyProperty);
       }
-
       if (this.options.groupProperty) {
         this.options.groups = _.pluck(this.options.collection, this.options.groupProperty);
       } else if (this.options.groupTranslationKeyProperty) {
         this.options.groupTanslationKeys = _.pluck(this.options.collection, this.options.groupTranslationKeyProperty);
       }
     }
-
     if (!this.options.texts) {
       if (!this.options.translationKeys) {
         var translationKeyPrefix = this.options.translationKeyPrefix || findKeyWithTranslation(this.attributeTranslationKeys('values', {
@@ -2044,18 +2064,15 @@ var SelectInputView = Marionette.ItemView.extend({
           return translationKeyPrefix + '.' + value;
         }, this);
       }
-
       this.options.texts = _.map(this.options.translationKeys, function (key) {
         return I18n$1.t(key);
       });
     }
-
     if (!this.options.groups) {
       this.options.groups = _.map(this.options.groupTanslationKeys, function (key) {
         return I18n$1.t(key);
       });
     }
-
     this.optGroups = {};
   },
   onRender: function onRender() {
@@ -2064,7 +2081,6 @@ var SelectInputView = Marionette.ItemView.extend({
     this.appendOptions();
     this.load();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
-
     if (this.options.ensureValueDefined && !this.model.has(this.options.propertyName)) {
       this.save();
     }
@@ -2073,24 +2089,25 @@ var SelectInputView = Marionette.ItemView.extend({
     if (!this.options.includeBlank) {
       return;
     }
-
+    var blankText = this.options.blankText;
     if (this.options.blankTranslationKey) {
-      this.options.blankText = I18n$1.t(this.options.blankTranslationKey);
+      blankText = I18n$1.t(this.options.blankTranslationKey);
+    } else if (!blankText) {
+      blankText = findTranslation(this.attributeTranslationKeys('blank'), {
+        defaultValue: I18n$1.t('pageflow.ui.views.inputs.select_input_view.none')
+      });
     }
-
     var option = document.createElement('option');
     option.value = '';
-    option.text = this.options.blankText || I18n$1.t('pageflow.ui.views.inputs.select_input_view.none');
+    option.text = blankText;
     this.ui.select.append(option);
   },
   appendPlaceholder: function appendPlaceholder() {
     if (!this.options.placeholderModel && !this.options.placeholderValue) {
       return;
     }
-
     var placeholderValue = this.options.placeholderValue || this.options.placeholderModel.get(this.options.propertyName);
     var placeholderIndex = this.options.values.indexOf(placeholderValue);
-
     if (placeholderIndex >= 0) {
       var option = document.createElement('option');
       option.value = '';
@@ -2106,11 +2123,9 @@ var SelectInputView = Marionette.ItemView.extend({
       var group = this.options.groups[index];
       option.value = value;
       option.text = this.options.texts[index];
-
       if (this.options.optionDisabled && this.options.optionDisabled(value)) {
         option.setAttribute('disabled', true);
       }
-
       if (group) {
         option.setAttribute('data-group', group);
         this.findOrCreateOptGroup(group).append(option);
@@ -2125,18 +2140,23 @@ var SelectInputView = Marionette.ItemView.extend({
         label: label
       }).appendTo(this.ui.select);
     }
-
     return this.optGroups[label];
   },
   save: function save() {
-    this.model.set(this.options.propertyName, this.ui.select.val());
+    var 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() {
     if (!this.isClosed) {
       var value = this.model.get(this.options.propertyName);
-
       if (this.model.has(this.options.propertyName) && this.ui.select.find('option[value="' + value + '"]:not([disabled])').length) {
         this.ui.select.val(value);
+      } else if ('defaultValue' in this.options) {
+        this.ui.select.val(this.options.defaultValue);
       } else {
         this.ui.select.val(this.ui.select.find('option:not([disabled]):first').val());
       }
@@ -2148,7 +2168,6 @@ var ExtendedSelectInputView = SelectInputView.extend({
   className: 'extended_select_input',
   initialize: function initialize() {
     SelectInputView.prototype.initialize.apply(this, arguments);
-
     if (this.options.collection) {
       if (this.options.descriptionProperty) {
         this.options.descriptions = _.pluck(this.options.collection, this.options.descriptionProperty);
@@ -2156,7 +2175,6 @@ var ExtendedSelectInputView = SelectInputView.extend({
         this.options.descriptionTanslationKeys = _.pluck(this.options.collection, this.options.descriptionTranslationKeyProperty);
       }
     }
-
     if (!this.options.descriptions) {
       this.options.descriptions = _.map(this.options.descriptionTanslationKeys, function (key) {
         return I18n$1.t(key);
@@ -2165,7 +2183,7 @@ var ExtendedSelectInputView = SelectInputView.extend({
   },
   onRender: function onRender() {
     var view = this,
-        options = this.options;
+      options = this.options;
     SelectInputView.prototype.onRender.apply(this, arguments);
     $.widget("custom.extendedselectmenu", $.ui.selectmenu, {
       _renderItem: function _renderItem(ul, item) {
@@ -2177,17 +2195,14 @@ var ExtendedSelectInputView = SelectInputView.extend({
           "class": 'text-container'
         }).appendTo(li);
         var index = options.values.indexOf(item.value);
-
         if (item.disabled) {
           li.addClass('ui-state-disabled');
         }
-
         if (options.pictogramClass) {
           $('<span>', {
             "class": options.pictogramClass
           }).prependTo(li);
         }
-
         $('<p>', {
           text: item.label,
           "class": 'item-text'
@@ -2196,7 +2211,6 @@ var ExtendedSelectInputView = SelectInputView.extend({
           text: options.descriptions[index],
           "class": 'item-description'
         }).appendTo(container);
-
         if (options.helpLinkClicked) {
           $('<a>', {
             href: '#',
@@ -2207,15 +2221,13 @@ var ExtendedSelectInputView = SelectInputView.extend({
             return false;
           }).appendTo(li);
         }
-
         return li.appendTo(ul);
       },
       _resizeMenu: function _resizeMenu() {
         this.menuWrap.addClass('extended_select_input_menu');
         var menuHeight = this.menu.height(),
-            menuOffset = this.button.offset().top + this.button.outerHeight(),
-            bodyHeight = $('body').height();
-
+          menuOffset = this.button.offset().top + this.button.outerHeight(),
+          bodyHeight = $('body').height();
         if (menuHeight + menuOffset > bodyHeight) {
           this.menuWrap.outerHeight(bodyHeight - menuOffset - 5).css({
             'overflow-y': 'scroll'
@@ -2243,7 +2255,7 @@ var ExtendedSelectInputView = SelectInputView.extend({
   }
 });
 
-function template$8(data) {
+function template$a(data) {
 var __t, __p = '';
 __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n\n<!-- inline style for wysihtml5 to pick up -->\n<textarea style="width: 100%;" dir="auto"></textarea>\n\n<div class="toolbar">\n  <a data-wysihtml5-command="bold" title="' +
 ((__t = ( I18n.t('pageflow.ui.templates.inputs.text_area_input.bold') )) == null ? '' : __t) +
@@ -2300,10 +2312,9 @@ return __p
  *
  * @class
  */
-
 var TextAreaInputView = Marionette.ItemView.extend({
   mixins: [inputView, inputWithPlaceholderText],
-  template: template$8,
+  template: template$a,
   className: 'text_area_input',
   ui: {
     input: 'textarea',
@@ -2376,7 +2387,6 @@ var TextAreaInputView = Marionette.ItemView.extend({
         }
       }
     });
-
     if (this.options.disableRichtext) {
       this.ui.toolbar.find('a[data-wysihtml5-command="bold"]').hide();
       this.ui.toolbar.find('a[data-wysihtml5-command="italic"]').hide();
@@ -2384,19 +2394,16 @@ var TextAreaInputView = Marionette.ItemView.extend({
       this.ui.toolbar.find('a[data-wysihtml5-command="insertOrderedList"]').hide();
       this.ui.toolbar.find('a[data-wysihtml5-command="insertUnorderedList"]').hide();
     }
-
     if (!this.options.enableLists) {
       this.ui.toolbar.find('a[data-wysihtml5-command="insertOrderedList"]').hide();
       this.ui.toolbar.find('a[data-wysihtml5-command="insertUnorderedList"]').hide();
     }
-
     if (this.options.disableLinks) {
       this.ui.toolbar.find('a[data-wysihtml5-command="createLink"]').hide();
     } else {
       this.setupUrlLinkPanel();
       this.setupFragmentLinkPanel();
     }
-
     this.editor.on('change', _.bind(this.save, this));
     this.editor.on('aftercommand:composer', _.bind(this.save, this));
   },
@@ -2413,7 +2420,6 @@ var TextAreaInputView = Marionette.ItemView.extend({
     this.editor.on('show:dialog', _.bind(function () {
       this.ui.linkDialog.toggleClass('for_existing_link', this.ui.linkButton.hasClass('wysihtml5-command-active'));
       var currentUrl = this.ui.urlInput.val();
-
       if (currentUrl.startsWith('#')) {
         this.ui.displayUrlInput.val('');
         this.ui.openInNewTabCheckBox.prop('checked', true);
@@ -2457,7 +2463,6 @@ var TextAreaInputView = Marionette.ItemView.extend({
     } else {
       this.ui.fragmentLinkRadioButton.prop('checked', true);
     }
-
     this.ui.toolbar.toggleClass('fragment_link_panel_active', !isUrlLink);
   },
   showUrlLinkPanel: function showUrlLinkPanel() {
@@ -2481,7 +2486,7 @@ var TextAreaInputView = Marionette.ItemView.extend({
   }
 });
 
-function template$9(data) {
+function template$b(data) {
 var __p = '';
 __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n<input type="text" />\n<div class="validation"></div>\n';
 return __p
@@ -2504,12 +2509,9 @@ return __p
  *
  * @class
  */
-
-var UrlInputView = Marionette.Layout.extend(
-/** @lends UrlInputView.prototype */
-{
+var UrlInputView = Marionette.Layout.extend( /** @lends UrlInputView.prototype */{
   mixins: [inputView],
-  template: template$9,
+  template: template$b,
   ui: {
     input: 'input',
     validation: '.validation'
@@ -2524,7 +2526,6 @@ var UrlInputView = Marionette.Layout.extend(
   },
   onChange: function onChange() {
     var _this = this;
-
     this.validate().then(function () {
       return _this.save();
     }, function () {
@@ -2539,24 +2540,19 @@ var UrlInputView = Marionette.Layout.extend(
   },
   save: function save() {
     var _this2 = this;
-
     var value = this.ui.input.val();
     $.when(this.transformPropertyValue(value)).then(function (transformedValue) {
-      var _this2$model$set;
-
-      _this2.model.set((_this2$model$set = {}, _defineProperty(_this2$model$set, _this2.options.displayPropertyName, value), _defineProperty(_this2$model$set, _this2.options.propertyName, transformedValue), _this2$model$set));
+      _this2.model.set(_defineProperty(_defineProperty({}, _this2.options.displayPropertyName, value), _this2.options.propertyName, transformedValue));
     });
   },
   load: function load() {
     this.ui.input.val(this.model.has(this.options.displayPropertyName) ? this.model.get(this.options.displayPropertyName) : this.model.get(this.options.propertyName));
     this.onLoad();
   },
-
   /**
    * Override to be notified when the input has been loaded.
    */
   onLoad: function onLoad() {},
-
   /**
    * Override to validate the untransformed url. Validation error
    * message can be passed as rejected promise. Progress notifications
@@ -2567,7 +2563,6 @@ var UrlInputView = Marionette.Layout.extend(
   validateUrl: function validateUrl(url) {
     return $.Deferred().resolve().promise();
   },
-
   /**
    * Override to transform the property value before it is stored.
    *
@@ -2576,7 +2571,6 @@ var UrlInputView = Marionette.Layout.extend(
   transformPropertyValue: function transformPropertyValue(value) {
     return value;
   },
-
   /**
    * Override to change the list of supported host names.
    */
@@ -2596,16 +2590,13 @@ var UrlInputView = Marionette.Layout.extend(
     var view = this;
     var options = this.options;
     var value = this.ui.input.val();
-
     if (options.required && !value) {
       displayValidationError(I18n$1.t('pageflow.ui.views.inputs.url_input_view.required_field'));
     } else if (value && !isValidUrl(value)) {
       var errorMessage = I18n$1.t('pageflow.ui.views.inputs.url_input_view.url_hint');
-
       if (options.permitHttps) {
         errorMessage = I18n$1.t('pageflow.ui.views.inputs.url_input_view.url_hint_https');
       }
-
       displayValidationError(errorMessage);
     } else if (value && !hasSupportedHost(value)) {
       displayValidationError(I18n$1.t('pageflow.ui.views.inputs.url_input_view.supported_vendors') + _.map(view.supportedHosts(), function (url) {
@@ -2620,31 +2611,25 @@ var UrlInputView = Marionette.Layout.extend(
         displayValidationError(error);
       });
     }
-
     return $.Deferred().reject().promise();
-
     function isValidUrl(url) {
       return options.permitHttps ? url.match(/^https?:\/\//i) : url.match(/^http:\/\//i);
     }
-
     function hasSupportedHost(url) {
       return _.any(view.supportedHostsWithoutLegacyProtocols(), function (host) {
         return url.match(new RegExp('^https?://' + host));
       });
     }
-
     function displayValidationError(message) {
       view.$el.addClass('invalid');
       view.ui.input.attr('aria-invalid', 'true');
       view.ui.validation.removeClass('pending').addClass('failed').html(message).show();
     }
-
     function displayValidationPending(message) {
       view.$el.removeClass('invalid');
       view.ui.input.removeAttr('aria-invalid');
       view.ui.validation.removeClass('failed').addClass('pending').html(message).show();
     }
-
     function resetValidationError(message) {
       view.$el.removeClass('invalid');
       view.ui.input.attr('aria-invalid', 'false');
@@ -2699,10 +2684,7 @@ var UrlInputView = Marionette.Layout.extend(
  *
  * @class
  */
-
-var ProxyUrlInputView = UrlInputView.extend(
-/** @lends ProxyUrlInputView.prototype */
-{
+var ProxyUrlInputView = UrlInputView.extend( /** @lends ProxyUrlInputView.prototype */{
   // @override
   validateUrl: function validateUrl(url) {
     var view = this;
@@ -2730,12 +2712,11 @@ var ProxyUrlInputView = UrlInputView.extend(
     _.each(this.options.proxies, function (proxy) {
       url = url.replace(new RegExp('^' + proxy.url + '/?'), proxy.base_path + '/');
     });
-
     return url;
   }
 });
 
-function template$a(data) {
+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';
 return __p
@@ -2748,7 +2729,7 @@ return __p
  * @param {Object} [options]
  *
  * @param {number} [options.defaultValue]
- *   Defaults value to display if property is not set.
+ *   Default value to display if property is not set.
  *
  * @param {number} [options.minValue=0]
  *   Value when dragging slider to the very left.
@@ -2768,11 +2749,10 @@ return __p
  *
  * @class
  */
-
 var SliderInputView = Marionette.ItemView.extend({
   mixins: [inputView],
   className: 'slider_input',
-  template: template$a,
+  template: template$c,
   ui: {
     widget: '.slider',
     value: '.value'
@@ -2783,7 +2763,6 @@ var SliderInputView = Marionette.ItemView.extend({
   },
   onRender: function onRender() {
     var _this = this;
-
     this.ui.widget.slider({
       animate: 'fast'
     });
@@ -2791,7 +2770,7 @@ var SliderInputView = Marionette.ItemView.extend({
       return _this.updateSliderOption('min', value || 0);
     });
     this.setupAttributeBinding('maxValue', function (value) {
-      return _this.updateSliderOption('max', value || 100);
+      return _this.updateSliderOption('max', value !== undefined ? value : 100);
     });
     this.load();
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
@@ -2802,7 +2781,6 @@ var SliderInputView = Marionette.ItemView.extend({
   },
   updateDisabled: function updateDisabled(disabled) {
     this.$el.toggleClass('disabled', !!disabled);
-
     if (disabled) {
       this.ui.widget.slider('disable');
     } else {
@@ -2811,7 +2789,6 @@ var SliderInputView = Marionette.ItemView.extend({
   },
   handleSlide: function handleSlide(event, ui) {
     this.updateText(ui.value);
-
     if (this.options.saveOnSlide) {
       this.save(event, ui);
     }
@@ -2821,13 +2798,11 @@ var SliderInputView = Marionette.ItemView.extend({
   },
   load: function load() {
     var value;
-
     if (this.model.has(this.options.propertyName)) {
       value = this.model.get(this.options.propertyName);
     } else {
       value = 'defaultValue' in this.options ? this.options.defaultValue : 0;
     }
-
     this.ui.widget.slider('option', 'value', this.clampValue(value));
     this.updateText(value);
   },
@@ -2843,7 +2818,7 @@ var SliderInputView = Marionette.ItemView.extend({
   }
 });
 
-function template$b(data) {
+function template$d(data) {
 var __p = '';
 __p += '<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>\n\n<textarea></textarea>\n';
 return __p
@@ -2851,7 +2826,7 @@ return __p
 
 var JsonInputView = Marionette.ItemView.extend({
   mixins: [inputView],
-  template: template$b,
+  template: template$d,
   className: 'json_input',
   ui: {
     input: 'textarea'
@@ -2885,7 +2860,6 @@ var JsonInputView = Marionette.ItemView.extend({
   },
   validate: function validate() {
     var input = this.ui.input;
-
     if (input.val() && !this.isValidJson(input.val())) {
       this.displayValidationError(I18n$1.t('pageflow.ui.views.inputs.json_input_view.invalid'));
       return false;
@@ -2912,7 +2886,7 @@ var JsonInputView = Marionette.ItemView.extend({
   }
 });
 
-function template$c(data) {
+function template$e(data) {
 var __p = '';
 __p += '<input type="checkbox" />\n<label>\n  <span class="name"></span>\n  <span class="inline_help"></span>\n</label>';
 return __p
@@ -2939,10 +2913,9 @@ return __p
  *
  * @class
  */
-
 var CheckBoxInputView = Marionette.ItemView.extend({
   mixins: [inputView],
-  template: template$c,
+  template: template$e,
   className: 'check_box_input',
   events: {
     'change': 'save'
@@ -2963,7 +2936,6 @@ var CheckBoxInputView = Marionette.ItemView.extend({
   save: function save() {
     if (!this.isDisabled()) {
       var value = this.ui.input.is(':checked');
-
       if (this.options.storeInverted) {
         this.model.set(this.options.storeInverted, !value);
       } else {
@@ -2973,7 +2945,7 @@ var CheckBoxInputView = Marionette.ItemView.extend({
   },
   load: function load() {
     if (!this.isClosed) {
-      this.ui.input.prop('checked', this.displayValue());
+      this.ui.input.prop('checked', !!this.displayValue());
     }
   },
   displayValue: function displayValue() {
@@ -2998,7 +2970,6 @@ var CheckBoxInputView = Marionette.ItemView.extend({
  *
  * @class
  */
-
 var SeparatorView = Marionette.View.extend({
   className: 'separator'
 });
@@ -3011,7 +2982,6 @@ var SeparatorView = Marionette.View.extend({
  *
  * @class
  */
-
 var LabelOnlyView = Marionette.ItemView.extend({
   mixins: [inputView],
   template: function template() {
@@ -3037,7 +3007,6 @@ var LabelOnlyView = Marionette.ItemView.extend({
  *
  * @since 12.0
  */
-
 var EnumTableCellView = TableCellView.extend({
   className: 'enum_table_cell',
   update: function update() {
@@ -3048,7 +3017,7 @@ var EnumTableCellView = TableCellView.extend({
   }
 });
 
-function template$d(data) {
+function template$f(data) {
 var __t, __p = '';
 __p += '<a class="remove" title="' +
 ((__t = ( I18n.t('pageflow.editor.templates.row.destroy') )) == null ? '' : __t) +
@@ -3078,10 +3047,9 @@ return __p
  *
  * @since 12.0
  */
-
 var DeleteRowTableCellView = TableCellView.extend({
   className: 'delete_row_table_cell',
-  template: template$d,
+  template: template$f,
   ui: {
     removeButton: '.remove'
   },
@@ -3095,7 +3063,6 @@ var DeleteRowTableCellView = TableCellView.extend({
     if (this.options.toggleDeleteButton) {
       var context = this.getModel();
       var toggle = context[this.options.toggleDeleteButton].apply(context);
-
       if (this.options.invertToggleDeleteButton) {
         return !toggle;
       } else {
@@ -3130,7 +3097,6 @@ var DeleteRowTableCellView = TableCellView.extend({
  *
  * @since 12.0
  */
-
 var PresenceTableCellView = TableCellView.extend({
   className: 'presence_table_cell',
   update: function update() {
@@ -3162,7 +3128,6 @@ var PresenceTableCellView = TableCellView.extend({
  *
  * @since 12.0
  */
-
 var IconTableCellView = TableCellView.extend({
   className: 'icon_table_cell',
   update: function update() {
@@ -3198,7 +3163,6 @@ var IconTableCellView = TableCellView.extend({
  *
  * @since 12.0
  */
-
 var TextTableCellView = TableCellView.extend({
   className: 'text_table_cell',
   update: function update() {
@@ -3209,14 +3173,12 @@ var TextTableCellView = TableCellView.extend({
       return this.attributeValue();
     } else if (typeof this.options.column["default"] === 'function') {
       var options = {};
-
       if (this.options.column.contentBinding) {
         options = {
           contentBinding: this.options.column.contentBinding,
           model: this.getModel()
         };
       }
-
       return this.options.column["default"](options);
     } else if ('default' in this.options.column) {
       return this.options.column["default"];
@@ -3234,8 +3196,7 @@ var subviewContainer = {
   },
   appendSubview: function appendSubview(view) {
     var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-        to = _ref.to;
-
+      to = _ref.to;
     return (to || this.$el).append(this.subview(view).el);
   },
   onClose: function onClose() {
@@ -3244,7 +3205,6 @@ var subviewContainer = {
     }
   }
 };
-
 if (!Marionette.View.prototype.appendSubview) {
   Cocktail.mixin(Marionette.View, subviewContainer);
 }
@@ -3256,7 +3216,6 @@ var tooltipContainer = {
         var target = $(event.currentTarget);
         var key = target.attr('data-tooltip');
         var position;
-
         if (target.data('tooltipAlign') === 'bottom left') {
           position = {
             left: target.position().left,
@@ -3278,7 +3237,6 @@ var tooltipContainer = {
             top: target.position().top + target.outerHeight() / 2
           };
         }
-
         this.tooltip.show(I18n$1.t(key), position, {
           align: target.data('tooltipAlign')
         });
@@ -3293,4 +3251,4 @@ var tooltipContainer = {
   }
 };
 
-export { CheckBoxGroupInputView, CheckBoxInputView, CollectionView, ColorInputView, ConfigurationEditorTabView, ConfigurationEditorView, DeleteRowTableCellView, EnumTableCellView, ExtendedSelectInputView, IconTableCellView, JsonInputView, LabelOnlyView, NumberInputView, BaseObject as Object, PresenceTableCellView, ProxyUrlInputView, SelectInputView, SeparatorView, SliderInputView, SortableCollectionView, TableCellView, TableHeaderCellView, TableRowView, TableView, TabsView, TextAreaInputView, TextInputView, TextTableCellView, TooltipView, UrlDisplayView, UrlInputView, attributeBinding, cssModulesUtils, i18nUtils, inputView, inputWithPlaceholderText, serverSideValidation, subviewContainer, tooltipContainer, viewWithValidationErrorMessages };
+export { CheckBoxGroupInputView, CheckBoxInputView, CollectionView, ColorInputView, ConfigurationEditorTabView, ConfigurationEditorView, DeleteRowTableCellView, EnumTableCellView, ExtendedSelectInputView, FileNameInputView, IconTableCellView, JsonInputView, LabelOnlyView, NumberInputView, BaseObject as Object, PresenceTableCellView, ProxyUrlInputView, SelectInputView, SeparatorView, SliderInputView, SortableCollectionView, TableCellView, TableHeaderCellView, TableRowView, TableView, TabsView, TextAreaInputView, TextInputView, TextTableCellView, TooltipView, UrlDisplayView, UrlInputView, attributeBinding, cssModulesUtils, i18nUtils, inputView, inputWithPlaceholderText, serverSideValidation, subviewContainer, tooltipContainer, viewWithValidationErrorMessages };