@brightspot/ui 3.0.1-cms-ui-migration.2 → 3.0.1-cms-ui-migration.3

package/src/legacy/tool-ui/src/main/webapp/script/v3/jquery.repeatable.js

@@ -1,2406 +0,0 @@
-/***
-
-Repeatable Inputs
------------------
-
-For the purposes of this code, there are three types of repeatables:
-
-* object = an input that can be repeated (but not collapsed/uncollapsed)
-
-* form = multiple inputs can be repeated (and collapsed/uncollapsed)
-
-* preview = a slideshow, which will have grid view and gallery view
-
-* single = A single input is used instead of an add more button.
-  This is used only when the addButtonText option is set to an empty string
-  and there is a single template and a single input
-  If user presses enter on the input, then a new input is created so the user can add more keywords.
-
-The types have the following things in common:
-
-* They can have a template (or multiple templates) to add new items.
-  An "add item" button is included for each template.
-
-* A remove button is added next to each item item (or in the case of single input,
-  the remove button might be styled to overlay the input).
-
-How removing / restoring works
-------------------------------
-
-When user clicks the "remove" button, the item is not actually removed from the page,
-instead a "toBeRemoved" class is added so the item can be styled to indicate it will be removed,
-the inputs are all set to be disabled so they will not be sent to the backend, and the remove
-button is changed to a restore button.
-
-When user clicks the "restore" button, the "toBeRemoved" class is removed, the inputs
-are no longer disabled, and the restore button is changed to a remove button.
-
-HTML for repeatables
---------------------
-
-The HTML within the repeatable element must conform to these standards:
-
-* It must contain a list (UL or OL) where each item within the list is
-  a repeatable input
-
-* Within the list there should be a template. The template can be one of the list items
-  with classname li.template or a script element with type="text/template".
-
- Acceptable variation for previewable items
- -------------------------------------------
- * The first visible `editable-view` <div> under view switcher will decide the default editing view for previewable items;
- * By default, new items are inserted to the end of list;
-   set global variable 'repeatableInsertFront' to be true to let new *previewable* items inserted to the beginning of the list.
-
-==================================================
-***/
-
-import create from '../../v4/dom/create'
-import ColorRotator from '../../v4/theme/ColorRotator'
-import scrollIntoView from 'scroll-into-view'
-import { tabbable } from 'tabbable'
-;(function ($, win, undef) {
-  var $win = $(win)
-  const tooltips = window.BRIGHTSPOT?.ui.tooltips
-
-  // Counter to use to make sure the browser doesn't cache ajax requests
-  var cacheNonce = 0
-
-  // Defaults to use for repeatables
-  var repeatableDefaults = {
-    addButtonText: 'Add',
-    removeButtonText: 'Remove',
-    restoreButtonText: 'Restore',
-    sortableOptions: {
-      delay: 300,
-    },
-  }
-
-  // Create the jquery plugin .repeatable() (using plugin2)
-  $.plugin2('repeatable', {
-    /**
-     * Default options used by plugin2
-     */
-    _defaultOptions: repeatableDefaults,
-
-    /**
-     * Function called by plugin2 when a new element is added to the page.
-     *
-     * ??? - it appears that a second parameter "options" is supported here,
-     * but we don't seem to be using that
-     *
-     * @param {Element} container
-     * The repeatable element that was added to the page.
-     */
-    _create: function (container) {
-      var plugin = this
-      var $container = $(container)
-      var options = plugin.option()
-      var repeatable
-
-      // Create a copy of the repeatableUtility object
-      // This uses prototypal inheritance so we're not actually copying the entire object
-      // It allows each repeatable instance to have its own object that saves state
-      repeatable = Object.create(repeatableUtility)
-
-      // Initialize the repeatable utility to get things started
-      repeatable.init($container, options)
-      $container.data('repeatable', repeatable)
-
-      // ARIA support
-      // The content selector element comes from object.js so wait for its insertion and
-      // movement of items in the list.
-      const list = container.querySelector(':scope > ol, ul')
-      const label =
-        container.closest('.CIG-row')?.querySelector('.CIG-label label')
-          ?.textContent || ''
-
-      if (list) {
-        const observer = new MutationObserver((records) => {
-          records.forEach((record) => {
-            if (
-              Array.from(record.addedNodes).some((n) => n.nodeName === 'A') ||
-              record.target.nodeName === 'OL'
-            ) {
-              list.querySelectorAll(':scope > li').forEach((item, i) => {
-                const index = ++i
-                item.querySelectorAll(':scope > a, select').forEach((child) => {
-                  const rowFieldName =
-                    child.closest('.CIG-row')?.dataset.fieldName
-                  const rowDisplayName =
-                    child.closest('.CIG-row')?.dataset.fieldDisplayName
-                  const childTitle = child.title
-
-                  const ariaLabel = childTitle
-                    ? `${childTitle} `
-                    : `${
-                        rowDisplayName
-                          ? rowDisplayName
-                          : rowFieldName
-                            ? rowFieldName
-                            : label
-                      } ${index}`
-
-                  child.setAttribute('aria-label', ariaLabel)
-                })
-              })
-            }
-          })
-        })
-        observer.observe(container, {
-          childList: true,
-          subtree: true,
-        })
-
-        if (list.classList?.contains('RTI-list')) {
-          list.querySelectorAll(':scope > li').forEach((item, i) => {
-            const index = ++i
-            item.querySelectorAll(':scope > a, input').forEach((child) => {
-              const rowFieldName = child.closest('.CIG-row')?.dataset.fieldName
-              const rowDisplayName =
-                child.closest('.CIG-row')?.dataset.fieldDisplayName
-              const childTitle = child.title
-
-              const ariaLabel = childTitle
-                ? `${childTitle} `
-                : `${
-                    rowDisplayName
-                      ? rowDisplayName
-                      : rowFieldName
-                        ? rowFieldName
-                        : label
-                  } ${index}`
-
-              child.setAttribute('aria-label', ariaLabel)
-            })
-          })
-        }
-      }
-
-      // Set starting point for additions.
-      if (
-        container.previousElementSibling?.nodeName === 'OL' ||
-        container.previousElementSibling?.nodeName === 'UL'
-      ) {
-        repeatable.ariaIndex = container.previousElementSibling.children.length
-      }
-    },
-
-    /**
-     * Function to add a new item after bulk file upload.
-     * This is called by by some code delivered by the back-end.
-     *
-     * @param {Function} callback
-     * Function to call after the item has been added.
-     * Refer to repeatableUtility.addItem
-     */
-    add: function (callback, noFocus) {
-      var plugin = this
-
-      // In this case, the plugin is called on the add button
-      var $caller = plugin.$caller
-
-      // Not a great way to do this, but leaving this for now.
-      // The callback function modifies the template to insert actual values,
-      // then triggers a change event
-      $caller.closest('.addButton').trigger('click', [callback, noFocus])
-
-      return $caller
-    },
-  })
-
-  /**
-   * Object to initialize and control repeatable inputs.
-   *
-   * This object should not be used directly, instead create a new object for each
-   * repeatable using Object.create and prototypal inheritance.
-   * After creating the new object, call the .init() function.
-   *
-   * @example
-   * myRepeatable = Object.create(repeatableUtility);
-   * myRepeatable.init(element, options);
-   */
-  var repeatableUtility = {
-    /**
-     * Default options
-     */
-    defaults: repeatableDefaults,
-
-    /**
-     * Regex to check if data-preview-field is a method.
-     */
-    methodRegex: '^get[A-Z]+|^is[A-Z]+|^has[A-Z]+',
-
-    ariaIndex: 0,
-
-    /**
-     * Initialize the object and set up the user interface.
-     *
-     * @param {Element|jQuery object|jQuery selector} element
-     * The element that contains the repeatable HTML.
-     *
-     * @param {Object} [options]
-     */
-    init: function (element, options) {
-      var self = this
-      self.cr = new ColorRotator()
-
-      // Save the element for later use
-      self.$element = $(element).first()
-
-      // Set up a place to save other dom elements for later use
-      self.dom = {}
-
-      // Override the default options
-      self.options = $.extend(true, {}, self.defaults, options)
-
-      self.initializingCount = 0
-
-      // Get the various things we will need from the DOM
-      self.initDOM()
-
-      // Set up the event-input-disable functionality
-      self.initInputDisable()
-
-      // Determine which type of repeatable we are dealing with
-      self.initMode()
-
-      // Initialize collection item weights if needed
-      self.modeWeightedInit()
-
-      // For each item initialize it
-      var $items = self.dom.$list.find('> li')
-
-      $items.each(function () {
-        self.initItem(this)
-
-        if (self.modeIsPreview()) {
-          self.itemLoad(this).then(() => {
-            self.initPreview(this)
-          })
-        }
-      })
-
-      if ($items.length === 0 && self.dom.$viewSwitcher) {
-        self.dom.$viewSwitcher.hide()
-      }
-
-      // Create the "Add Item" button(s)
-      self.initAddButton()
-      self.initViewSwitcher()
-
-      self.isInitialized = true
-    },
-
-    /**
-     * Get various things we will need from the DOM and save for later.
-     */
-    initDOM: function () {
-      var self = this
-      var $list
-      var $templates = $()
-
-      // Find the list of inputs (must be in a UL or OL)
-      $list = self.$element.find('> ul, > ol').first()
-      self.dom.$list = $list // save for later use
-
-      // Templates can be in an LI or a SCRIPT element
-      $list
-        .find('> li.template, > template, > script[type="text/template"]')
-        .each(function () {
-          var $template = $(this)
-
-          if ($template.is('li.template')) {
-            $templates = $templates.add($template)
-          } else if ($template.is('template')) {
-            $templates = $templates.add($template[0].content.cloneNode(true))
-          } else {
-            $templates = $templates.add($($template.text()))
-          }
-
-          // Remove the template from the page
-          $template.remove()
-        })
-
-      // Save form for later use
-      self.dom.$form = self.dom.$list.closest('form')
-
-      // Save templates for later use
-      self.dom.$templates = $templates
-    },
-
-    /**
-     * Set up the event-input-disable functionality.
-     * ??? need more info on how this works
-     */
-    initInputDisable: function () {
-      var self = this
-
-      // Mark the input as something that can be locked or disabled
-      self.$element.addClass('event-input-disable')
-
-      // If the "input-disable" event is triggered, then add or remove a class
-      self.$element.bind('input-disable', function (event, disable) {
-        $(event.target)
-          .closest('.inputContainer')
-          .toggleClass('state-disabled', disable)
-      })
-    },
-
-    /**
-     * Determine which type of repeatable we are dealing with:
-     * Sets the "mode" property to one of the following:
-     * form, single, preview
-     *
-     * Note that initDOM() must be called before this is called.
-     *
-     * Also see the following functions:
-     * modeIsPreview(), modeIsSingle(), ...
-     */
-    initMode: function () {
-      var self = this
-      var $templateInputs
-
-      self.mode = 'form'
-
-      // Set to object mode if we are in a repeatableObjectId
-      if (
-        self.$element.hasClass('repeatableObjectId') ||
-        self.$element.hasClass('repeatableDropdown')
-      ) {
-        self.mode = 'object'
-      }
-
-      // Set to single input mode if there is no add button text,
-      // and if there is a single template with a single input
-      $templateInputs = self.dom.$templates
-        .find(':input')
-        .not(':input[name$=".toggle"]')
-      if (
-        !self.options.addButtonText &&
-        self.dom.$templates.length === 1 &&
-        $templateInputs.length === 1
-      ) {
-        self.mode = 'single'
-        return
-      }
-
-      // Set to preview mode
-      if (self.$element.hasClass('repeatableForm-previewable')) {
-        self.mode = 'preview'
-        self.isError = self.$element[0].querySelector('.message-error')
-        if (!window.GALLERY_LIST_VIEW_UI && !self.isError) {
-          self.$element.addClass('is-gridView')
-        }
-        return
-      }
-
-      if (self.$element.hasClass('repeatableForm-weighted')) {
-        self.mode = 'weighted'
-      }
-    },
-
-    /**
-     * Initialize the "Add Item" controls.
-     *
-     * There is a single container for the add item controls,
-     * and within it can be mutiple add buttons (one for each template).
-     *
-     * The text of the add button is defined by a data attribute on the template
-     * and the addButtonText options.
-     */
-    initAddButton: function () {
-      var self = this
-      var $addButtonContainer
-      var $addButtonSelect
-      var tooManyButtons
-
-      // Create the Add Item container
-      //   -- Initialize single input mode if necessary
-      //   -- Create an add button for each template
-      //   -- Set up click event on the add button
-
-      // Create a container where all the "Add Item" buttons will be displayed
-      // First check to see if there is already a div to place them,
-      // if not create a new div at the bottom.
-      $addButtonContainer = self.$element.find('.addButtonContainer')
-      if (!$addButtonContainer.length) {
-        $addButtonContainer = $('<div/>', {
-          class: 'addButtonContainer',
-        }).appendTo(self.$element)
-      }
-
-      // Save the add button container for later use
-      // (in single mode we will add more to it)
-      self.dom.$addButtonContainer = $addButtonContainer
-
-      // If we are in single input mode then we'll do some extra stuff
-      self.modeSingleInitAddButton()
-
-      // Create an "Add Item" link for each template we found,
-      // or if there are too many links create a dropdown
-
-      tooManyButtons = Boolean(self.dom.$templates.length >= 2)
-
-      if (tooManyButtons) {
-        // Create a dropdown to list the available add buttons
-        var $addButtonSelectContainer = $('<span/>', {
-          class: 'addButtonSelectContainer',
-        }).appendTo($addButtonContainer)
-
-        $addButtonSelect = $('<select/>', {
-          class: 'addButtonSelect',
-          'aria-label': 'Type',
-          'data-searchable': true,
-          placeholder:
-            self.dom.$templates.first().attr('data-add') || tooltips.add,
-          on: {
-            change: function () {
-              // Get the selected option
-              var $selected = $addButtonSelect.find(':selected')
-
-              // Get a link to the add button for that option, and click it.
-              // The "addButton" data is saved on the OPTION element.
-              var $button = $selected.data('addButton')
-              if ($button) {
-                // Note: normally I wouldn't simulate a click on the button;
-                // however, there is other pre-existing code that requires that
-                // add button to be there, so we will continue creating the button
-                // and hide it if we have too many buttons to show.
-                $button.click()
-              }
-
-              $addButtonSelect.val('')
-              $addButtonSelectContainer
-                .find('.dropDown-label')
-                .trigger('dropDown-update')
-              $addButtonSelect.blur()
-            },
-          },
-        }).appendTo($addButtonSelectContainer)
-
-        $addButtonSelect.append(
-          $('<option/>', {
-            value: '',
-          }),
-        )
-
-        self.dom.$list[0]
-          .getAttributeNames()
-          .filter((name) => name.startsWith('aria-'))
-          .forEach((name) => {
-            $addButtonSelect.attr(name, self.dom.$list[0].getAttribute(name))
-          })
-      }
-
-      self.dom.$templates.each(function () {
-        var $template = $(this)
-        var itemType =
-          $template.attr('data-type') ||
-          $template.attr('data-type-label') ||
-          $template.attr('data-item-fallback') ||
-          ''
-        var ariaLabel =
-          window.BRIGHTSPOT?.ui.tooltips.add +
-            ' ' +
-            self.dom.$addButtonContainer
-              .closest('.CIG-row')
-              .find('label')
-              .text() || ''
-        var $addButton
-        var addButtonText
-
-        // Check if itemType should be URL
-        if ($template[0]?.firstChild?.classList?.contains('widget-urlsItem')) {
-          itemType = $template[0]?.firstChild?.getAttribute('data-type')
-        }
-
-        // Determine which text to use for the add button
-        addButtonText = itemType
-        if (self.options.addButtonText) {
-          addButtonText =
-            ($template.attr('data-add') || tooltips.add) + ' ' + addButtonText
-          if ($template.attr('data-type')) {
-            ariaLabel = addButtonText
-          }
-        }
-
-        // Add an element for the "Add Button" control
-        $addButton = $('<a/>', {
-          class: 'addButton',
-          'aria-label': ariaLabel,
-          role: 'button',
-          href: '#',
-          text: addButtonText,
-          'data-sortable-item-type': $template.attr('data-sortable-item-type'),
-
-          // Save the template on the add button control so when user
-          // clicks it we will know which template to add
-          // 'data-addButtonTemplate': $template
-        })
-          .on('click keypress', function (event, customCallback, noFocus) {
-            if (event.type === 'keypress' && event.key !== 'Enter') {
-              return
-            }
-            ++self.initializingCount
-
-            // The click event for the add button supports an
-            // optional callback function that will be called after
-            // the new item is added.
-            // Add the new item based on this template
-            self.addItem($template, customCallback, noFocus)
-
-            return false
-          })
-          .toggle(!tooManyButtons) // Hide button if there are too many buttons
-          .appendTo($addButtonContainer)
-
-        self.dom.$list[0]
-          .getAttributeNames()
-          .filter((name) => name.startsWith('aria-') && name !== 'aria-label')
-          .forEach((name) => {
-            $addButton.attr(name, self.dom.$list[0].getAttribute(name))
-          })
-
-        if (tooManyButtons) {
-          $('<option/>', {
-            value: itemType,
-            text: itemType,
-            data: {
-              // Save the add button in a data attribute,
-              // so later when user selects this item we know which
-              // add button should be clicked
-              addButton: $addButton,
-            },
-          }).appendTo($addButtonSelect)
-        }
-      })
-    },
-
-    /**
-     * Initialize an item. This should be called for each list item on the page,
-     * plus it should be called for any new item added to the page.
-     *
-     * @param {Element|jQuery object|jQuery selector} element
-     * The LI element that contains the item HTML.
-     */
-    initItem: function (element) {
-      var self = this
-      var $item = $(element)
-
-      // Set form for dynamic previews if we need it by checking the first item init.
-      // This will delegate the preview to use the data-dynamic-preview
-      // attribute that is updated during a contentState ajax call.
-      if (
-        self.modeIsPreview() &&
-        $item.index() === 0 &&
-        !self.isDynamicPreview
-      ) {
-        var previewField = $item.attr('data-preview-field')
-        if (previewField) {
-          var checkFields = previewField.split('/')
-          for (var i = 0; i < checkFields.length; i++) {
-            if (checkFields[i].match(self.methodRegex)) {
-              self.isDynamicPreview = true
-              break
-            }
-          }
-        }
-      }
-
-      // Create item weight for the item if necessary,
-      // and set up other stuff for mode=weighted
-      self.modeWeightedInitItem($item)
-
-      // Create a the label for the item if necessary.
-      // The label acts as a toggle to show and hide the item,
-      // plus it can load the content of the item from a URL
-      self.initItemLabel($item)
-
-      // Collapse the item unless it has an error message within it
-      // Do not collapse "preview" or "object" mode
-      if (
-        $item.find('.message-error').length === 0 &&
-        $item.find('> .layouts').length === 0 &&
-        !$item.hasClass('expanded') &&
-        !self.modeIsObject()
-      ) {
-        if (
-          !window.GALLERY_LIST_VIEW_UI &&
-          self.modeIsPreview() &&
-          !self.isError
-        ) {
-          $item.addClass('is-gridItem')
-        }
-        self.itemCollapse($item)
-      }
-
-      // An input with ".toggle" in the name will be checked
-      // to tell the backend that it should be saved, but the checkbox will not actually
-      // be shown to the user, so we hid it here
-      $item.find(':input[name$=".toggle"]').hide()
-
-      // Create progress UI if necessary
-      self.initCollectionItemProgress($item)
-
-      // Create toggle UI if necessary
-      self.initCollectionItemToggle($item)
-
-      const $itemLiveRegion = $('<span/>', {
-        class: 'screen-reader-only',
-        'aria-live': 'polite',
-      })
-      $item.append($itemLiveRegion)
-
-      // Add the remove control to the item
-      self.initItemRemove($item)
-    },
-
-    initPreview: function (item) {
-      const previewField = item.dataset.previewField?.split('/')
-
-      if (previewField && previewField.length < 3) {
-        const field = item.querySelector(
-          `:scope > .objectInputs > .inputContainer[data-field="${previewField[0]}"]`,
-        )
-
-        if (field) {
-          field.classList.add('RCIG-previewField')
-          return
-        }
-      }
-
-      // If the preview is via methods on backend there won't be an associated HTML
-      // input so insert an Image for display whose click brings user to List view.
-      const $item = $(item)
-      const $objectInputs = $item.find('.objectInputs')
-
-      if ($objectInputs.length === 0) {
-        return
-      }
-
-      const self = this
-      const preview = create('img')
-
-      item.appendChild(
-        create(
-          'a',
-          {
-            className: 'RCIG-preview',
-            onclick: self.handleExpandClick.bind(self, $item),
-          },
-          preview,
-        ),
-      )
-
-      const updatePreview = () => {
-        preview.src = item.dataset.preview || ''
-      }
-
-      updatePreview()
-      $item.on('change', updatePreview)
-    },
-
-    handleExpandClick: function ($item) {
-      let select = this.$element[0].querySelector(
-        '.repeatablePreviewControls select',
-      )
-      select.selectedIndex = 1
-      if (select.dispatchEvent(new Event('change'))) {
-        this.itemToggle($item)
-        $item[0].scrollIntoView()
-      }
-    },
-
-    /**
-     * Initialize the label for an item.
-     *
-     * @param {Element|jQuery object} element
-     * The item (LI element).
-     */
-    initItemLabel: function (element) {
-      var self = this
-      var $item = $(element)
-      var type = $item.attr('data-type')
-      var label = $item.attr('data-label-html') || $item.attr('data-label')
-      var $label
-      var $existingLabel
-      var labelHtml
-
-      // Do not add a label if  there is no data-type attribute
-      if (!type) {
-        return
-      }
-
-      // The text for the label will be the data type such as "Slideshow Slide"
-      // And if a data-label attribute was provided append it after a colon such as "Slideshow Slide: My Slide"
-      labelHtml = type
-      if (label) {
-        labelHtml += ': ' + label
-      }
-
-      $label = $('<div/>', {
-        class: 'repeatableLabel',
-        tabindex: '0',
-        html: labelHtml,
-
-        // Set up some parameters so the label text will dynamically update based on the input field
-        'data-object-id': $item
-          .find('> input[type="hidden"][name$=".id"]')
-          .val(),
-      })
-        .on('click', function (e) {
-          if (
-            $item[0].matches('.is-removing') ||
-            $item[0].hasAttribute('data-empty')
-          )
-            return
-          if (!self.itemIsGridView($item)) {
-            self.itemToggle($item)
-          } else {
-            self.handleExpandClick($item)
-          }
-        })
-        .keydown(function (event) {
-          if (event.key === 'Enter' || event.key === ' ') {
-            if ($item[0].matches('.is-removing')) return
-            event.preventDefault()
-            $label.trigger('click')
-          }
-        })
-
-      if (!$item.attr('data-disable-dynamic-html')) {
-        $label.attr(
-          'data-dynamic-html',
-          '${toolPageContext.getObjectLabel(content.state.getType())}: ${toolPageContext.createObjectLabelHtml(content)}', // eslint-disable-line no-template-curly-in-string
-        )
-      }
-
-      // If there was already a label on the page remove the repeatableLabel class
-      // so it doesn't conflict with the new label we are creating,
-      // then add this existing label to the new label we are creating.
-      $existingLabel = $item.find(' > .repeatableLabel')
-      if ($existingLabel.length) {
-        $existingLabel.removeClass('repeatableLabel').appendTo($label)
-
-        // Just in case the label has any inputs, make sure clicks on the input do not bubble up
-        // to the label and make it toggle the item
-        $label.find(':input').click(function (e) {
-          e.stopPropagation()
-        })
-      }
-
-      // Add our label to item at the top
-      $item.prepend($label)
-    },
-
-    /**
-     * Initialize the remove button for an individiual item.
-     *
-     * @param {Element|jQuery object} item
-     * The item (LI element).
-     */
-    initItemRemove: function (item) {
-      var self = this
-      var $item = $(item)
-      var $label
-      var $itemLiveRegion = $item.find('.screen-reader-only')
-
-      let inputAriaLabel = ''
-      const cigRow = $item.closest('.CIG-row')
-      if (cigRow.length) {
-        inputAriaLabel = cigRow.find('.CIG-label label').first().text()
-      }
-
-      // Add the remove button to the item
-      var $remove = $('<button/>', {
-        class: 'removeButton',
-        type: 'button',
-        'aria-label': `${tooltips.remove} ${inputAriaLabel}`,
-        title: `${tooltips.remove} ${inputAriaLabel}`,
-        text: self.options.removeButtonText,
-      }).on('click', function (event) {
-        self.removeItemToggle($item)
-
-        if ($item.hasClass('is-removing')) {
-          this.title = `${tooltips.restore} ${inputAriaLabel}`
-          this.setAttribute(
-            'aria-label',
-            `${tooltips.restore} ${inputAriaLabel}`,
-          )
-          $itemLiveRegion.text(tooltips?.removedItem)
-        } else {
-          this.title = `${tooltips.remove} ${inputAriaLabel}`
-          this.setAttribute(
-            'aria-label',
-            `${tooltips.remove} ${inputAriaLabel}`,
-          )
-          $itemLiveRegion.text(tooltips?.restoredItem)
-        }
-      })
-
-      $label = $item.find('.repeatableLabel')
-
-      if ($label && $label[0]) {
-        $remove.insertAfter($label)
-      } else {
-        $remove.appendTo($item)
-      }
-    },
-
-    // Note: Repeatable with progress is not supported in V5 UI.
-    /**
-     * Conditionally initializes the progress information for an individual item.
-     *
-     * @param {Element|jquery object} item
-     * the item (LI element).
-     */
-    initCollectionItemProgress: function (item) {
-      var $item = $(item)
-      var progressFieldValue = $item.attr('data-progress-field-value')
-
-      if (!progressFieldValue) {
-        return
-      }
-
-      $('<div>', {
-        class: 'repeatableLabel-progress',
-      })
-        .append(
-          $('<div>', {
-            class: 'repeatableLabel-progressBar',
-          }).append(
-            $('<div>', {
-              class: 'repeatableLabel-progressFill',
-              style: 'width: ' + progressFieldValue + '%',
-            }),
-          ),
-        )
-        .prepend(
-          $('<div>', {
-            class: 'repeatableLabel-progressLabel',
-            text: progressFieldValue + '% of Target',
-          }),
-        )
-        .appendTo($item)
-    },
-
-    // Note: Repeatable with toggle is not supported in V5 UI.
-    /**
-     * Conditionally initializes the toggle button for an individual item.
-     *
-     * @param {Element|jquery object} item
-     * the item (LI element).
-     */
-    initCollectionItemToggle: function (item) {
-      var self = this
-      var $item = $(item)
-      var toggleField = $item.attr('data-toggle-field')
-      var toggleFieldValue = $item.attr('data-toggle-field-value')
-
-      if (!toggleField) {
-        return
-      }
-
-      // Add the remove button to the item
-      var id = $item.find('> input[type="hidden"][name$=".id"]').val()
-
-      var input = $('<input/>', {
-        id: id + '-toggle',
-        class: 'repeatableLabel-toggle',
-        type: 'checkbox',
-        name: id + '/' + toggleField,
-        value: true,
-      }).on('change', function (event) {
-        // Add/remove weight and recalculate
-        var checked = $(this).is(':checked')
-        var previouslyChecked = $item.attr('data-toggle-field-value') === 'true'
-
-        if (checked !== previouslyChecked) {
-          $item.attr('data-toggle-field-value', checked)
-
-          if (
-            $item.closest('.repeatableForm').hasClass('repeatableForm-weighted')
-          ) {
-            if (checked === true) {
-              self.addCollectionItemWeight($item)
-            } else {
-              self.removeCollectionItemWeight($item)
-            }
-          }
-        }
-      })
-
-      if (toggleFieldValue === 'true') {
-        input.attr('checked', 'checked')
-      }
-
-      input.after(
-        $('<label>', {
-          for: id + '-toggle',
-          class: 'repeatableLabel-toggleLabel',
-        }),
-      )
-
-      input.appendTo($item)
-    },
-
-    //= =================================================
-    // MODE WEIGHTED
-    //= =================================================
-
-    /**
-     * Initialize weighted mode
-     */
-    modeWeightedInit: function () {
-      var self = this
-
-      if (!self.modeIsWeighted()) {
-        return
-      }
-
-      // Set up a listener for when the user drags and drops an item to change the order,
-      // so we can adjust the order of weights
-      self.dom.$list.on('sortable.end', function (event, element) {
-        var $item = $(element)
-
-        // Find the index for the new position of the element
-        var newIndex = $item.index()
-        var oldIndex = $item.data('repeatableIndex')
-        self.repositionCollectionItemWeight(oldIndex, newIndex)
-      })
-
-      var $itemWeightsContainer = self.dom.$list
-        .parent()
-        .find('.repeatableForm-itemWeights')
-      self.collectionItemWeightsCalculated =
-        $itemWeightsContainer.data('calculated')
-
-      // If values are calculated, handle updates from cms-updateContentState event
-      if (self.collectionItemWeightsCalculated) {
-        // TODO: Make this functionality generic, using meta tags or hidden fields
-        self.dom.$form.on(
-          'cms-updateContentState',
-          (function (self) {
-            return function (event, data) {
-              var allDiffs = $.extend(
-                {},
-                data._differences,
-                data._hiddenDifferences,
-              )
-              if (!allDiffs) {
-                return
-              }
-
-              $.each(allDiffs, function (id, fields) {
-                if (fields.length === 0) {
-                  return
-                }
-
-                var $inputs = self.dom.$list.find(
-                  '.objectInputs[data-object-id="' + id + '"]',
-                )
-
-                if (!$inputs) {
-                  return
-                }
-
-                var $item = $inputs.closest('li')
-
-                if (!$item) {
-                  return
-                }
-
-                var weightFieldName = $item.attr('data-weight-field')
-                if (!weightFieldName) {
-                  return
-                }
-
-                var newWeightFieldValue = fields[weightFieldName]
-                if (
-                  newWeightFieldValue &&
-                  $item.data('weight-field-value') !== newWeightFieldValue
-                ) {
-                  $item.data('weight-field-value', newWeightFieldValue)
-                  self.updateCollectionItemWeightData(
-                    $(
-                      self.dom.$list
-                        .siblings('.repeatableForm-itemWeights')
-                        .find('.repeatableForm-itemWeight')
-                        .get($item.index()),
-                    ),
-                    Math.round(newWeightFieldValue * 100),
-                  )
-                  self.fixCollectionItemWeights()
-                }
-
-                var weightMarkersFieldName = $item.attr(
-                  'data-weight-markers-field',
-                )
-                if (!weightMarkersFieldName) {
-                  return
-                }
-
-                var newWeightMarkersFieldValue = fields[weightMarkersFieldName]
-                if (
-                  newWeightMarkersFieldValue &&
-                  $item.data('weight-markers-field-value') !==
-                    newWeightMarkersFieldValue
-                ) {
-                  $item.data(
-                    'weight-markers-field-value',
-                    newWeightMarkersFieldValue,
-                  )
-                  self.setCollectionItemWeightMarkers($item)
-                }
-              })
-            }
-          })(self),
-        )
-      }
-
-      self.initCollectionItemWeightResetButton()
-    },
-
-    /**
-     * Conditionally initializes the weighting display for an individual item.
-     *
-     * @param {Element|jquery object} item
-     * the item (LI element).
-     */
-    modeWeightedInitItem: function (item) {
-      var self = this
-      var $item = $(item)
-
-      var weightFieldName = $item.data('weight-field')
-
-      // Only display field weights if all valid types support collection weights
-      if (!self.modeIsWeighted() || !weightFieldName) {
-        return false
-      }
-
-      $item.on('click', '> .removeButton', function () {
-        var $this = $(this)
-        if (
-          $this.closest('li').hasClass('is-removing') ||
-          $this.closest('li').hasClass('toBeRemoved')
-        ) {
-          self.removeCollectionItemWeight($item)
-        } else {
-          self.addCollectionItemWeight($item)
-        }
-      })
-
-      // Save original index so that we can use this in sortable.end handler
-      $item.data('repeatableIndex', $item.index())
-
-      self.addCollectionItemWeight($item)
-    },
-
-    /**
-     * Adds a weight to the collection for a given item.
-     */
-    addCollectionItemWeight: function (item) {
-      var self = this
-      var $item = $(item)
-      var color = self.getCollectionItemWeightColor($item)
-      var inputName =
-        $item.find('> input[type="hidden"][name$=".id"]').val() +
-        '/' +
-        $item.data('weight-field')
-      var $repeatableWeightLabel = $item.find('> .repeatableLabel-weightLabel')
-
-      var weightFieldValue
-      if ($repeatableWeightLabel.size() === 0) {
-        weightFieldValue = $item.attr('data-weight-field-value')
-
-        $('<div>', {
-          class: 'repeatableLabel-weightLabel',
-        })
-          .append(
-            $('<span>', {
-              class: 'repeatableLabel-color',
-              style: 'background-color: ' + color,
-            }),
-          )
-          .append(
-            $('<input>', {
-              type: 'hidden',
-              name: inputName,
-              value: weightFieldValue,
-            }),
-          )
-          .prependTo($item)
-      } else {
-        weightFieldValue = $item
-          .find('> .repeatableLabel-weightLabel')
-          .find('input')
-          .val()
-      }
-
-      // Only add weight and handle if toggle is true or not available
-      if ($item.attr('data-toggle-field-value') === 'false') {
-        return
-      }
-
-      var $itemWeight = $('<div>', {
-        class: 'repeatableForm-itemWeight',
-        style: 'background-color: ' + color + ';',
-        'data-target': inputName,
-        'data-weight': weightFieldValue,
-      })
-
-      // Filter items that have been toggled off
-      var itemIndex = $item
-        .parent()
-        .children(':not([data-toggle-field-value="false"], .is-removing)')
-        .index($item)
-
-      var $itemWeightContainer = $item
-        .closest('.repeatableForm')
-        .find('> .repeatableForm-itemWeights')
-      if (itemIndex === 0) {
-        $itemWeightContainer.prepend($itemWeight)
-      } else {
-        $itemWeightContainer
-          .children()
-          .eq(itemIndex - 1)
-          .after($itemWeight)
-      }
-
-      self.setCollectionItemWeightMarkers($item)
-
-      // Avoid creating handles if draggable is false
-      if (!self.collectionItemWeightsCalculated) {
-        $itemWeight.prepend(self.createCollectionItemWeightHandle($item))
-      }
-
-      var itemWeightDoubleValue = $itemWeight.attr('data-weight')
-
-      // If item has no data-weight attr, it is a new item,
-      // and should scale other weights against `baseWeight`
-
-      if (self.isInitialized === true || !itemWeightDoubleValue) {
-        var newWeightDouble
-
-        if (!itemWeightDoubleValue) {
-          // new items are added with a weight proportional to the number of items
-          newWeightDouble =
-            Math.round((1 / $itemWeightContainer.children().size()) * 100) / 100
-        } else {
-          // if item exists, use existing weight
-          newWeightDouble = parseFloat(itemWeightDoubleValue)
-        }
-
-        var modifier = 1 - newWeightDouble
-
-        $($itemWeightContainer.children().not($itemWeight)).each(function () {
-          self.updateCollectionItemWeightData(
-            $(this),
-            Math.floor(modifier * $(this).attr('data-weight') * 100),
-          )
-        })
-
-        self.updateCollectionItemWeightData(
-          $itemWeight,
-          (newWeightDouble * 100).toFixed(),
-        )
-        self.fixCollectionItemWeights()
-      } else {
-        self.updateCollectionItemWeightData(
-          $itemWeight,
-          (itemWeightDoubleValue * 100).toFixed(),
-        )
-      }
-    },
-
-    /**
-     * Sets markers to repeatableForm-itemWeight.
-     */
-    setCollectionItemWeightMarkers: function (item) {
-      var self = this
-      var $item = $(item)
-      var $itemWeight = $(
-        self.dom.$list
-          .siblings('.repeatableForm-itemWeights')
-          .find('.repeatableForm-itemWeight')
-          .get($item.index()),
-      )
-
-      $itemWeight.find('.repeatableForm-itemWeight-marker').remove()
-
-      var markerValues = $item.data('weight-markers-field-value')
-      if (markerValues) {
-        Array.prototype.forEach.call(markerValues, function (markerValue, i) {
-          $itemWeight.append(
-            $('<div/>', {
-              class: 'repeatableForm-itemWeight-marker',
-              style: 'left:' + markerValue * 100 + '%;',
-            }),
-          )
-        })
-      }
-    },
-
-    /**
-     * Removes a weight to the collection for a given item.
-     */
-    removeCollectionItemWeight: function (item) {
-      var self = this
-      var $item = $(item)
-
-      var $repeatableForm = self.dom.$list.parent()
-      var $itemWeightsContainer = $repeatableForm.find(
-        '.repeatableForm-itemWeights',
-      )
-
-      $itemWeightsContainer
-        .find(
-          '.repeatableForm-itemWeight[data-target="' +
-            $item.find('.repeatableLabel-weightLabel input').attr('name') +
-            '"]',
-        )
-        .remove()
-
-      var $itemWeights = $repeatableForm.find('.repeatableForm-itemWeight')
-
-      var totalRemainingPercent = 0
-      $itemWeights.each(function (i) {
-        var $itemWeight = $(this)
-        totalRemainingPercent += parseFloat($itemWeight.attr('data-weight'))
-      })
-
-      $itemWeights.each(function (i) {
-        var $itemWeight = $(this)
-        var newDouble =
-          parseFloat($itemWeight.attr('data-weight')) / totalRemainingPercent
-        self.updateCollectionItemWeightData(
-          $itemWeight,
-          Math.round(newDouble * 100),
-        )
-      })
-
-      self.fixCollectionItemWeights()
-    },
-
-    repositionCollectionItemWeight: function (oldIndex, newIndex) {
-      var self = this
-
-      var $weightsContainer = self.dom.$list
-        .parent()
-        .find('.repeatableForm-itemWeights')
-      var $weights = $weightsContainer.children()
-      var $weight = $weights.eq(oldIndex)
-
-      if (newIndex === 0) {
-        $weightsContainer.prepend($weight)
-      } else {
-        $weights.eq(newIndex).after($weight)
-      }
-
-      self.dom.$list.children().each(function () {
-        var $item = $(this)
-        $item.data('repeatableIndex', $item.index())
-      })
-    },
-
-    initCollectionItemWeightResetButton: function () {
-      var self = this
-
-      if (self.collectionItemWeightsCalculated) {
-        return
-      }
-
-      self.dom.$list.parent().prepend(
-        $('<a>', {
-          class: 'repeatableForm-weightResetButton',
-          text: 'Reset Weights',
-          title: tooltips.resetWeights,
-        }).on('click', function () {
-          self.resetCollectionItemWeights()
-          return false
-        }),
-      )
-    },
-
-    /**
-     * Resets the collection item weights with an even distribution.
-     */
-    resetCollectionItemWeights: function () {
-      var self = this
-      var $itemWeights = self.dom.$list
-        .parent()
-        .find('.repeatableForm-itemWeight')
-      var itemWeightsCount = $itemWeights.size()
-
-      if (itemWeightsCount <= 0) {
-        return false
-      }
-
-      var weight = Math.floor(100 / itemWeightsCount)
-
-      $itemWeights.each(function () {
-        self.updateCollectionItemWeightData(this, weight)
-      })
-
-      self.fixCollectionItemWeights()
-    },
-
-    /**
-     * Prevents rounding errors and sum of weights from exceeding 100%.
-     */
-    fixCollectionItemWeights: function () {
-      var self = this
-      var $itemWeights = self.dom.$list
-        .parent()
-        .find('.repeatableForm-itemWeights  > .repeatableForm-itemWeight')
-      var totalPercent = 0
-
-      $itemWeights.each(function (i) {
-        var $itemWeight = $(this)
-        var $itemWeightValue = parseFloat($itemWeight.attr('data-weight'))
-        var $itemWeightPercent = $itemWeightValue * 100
-        totalPercent += $itemWeightPercent
-
-        if (i + 1 === $itemWeights.size() && totalPercent !== 100) {
-          self.updateCollectionItemWeightData(
-            $itemWeight,
-            $itemWeightPercent + 100 - totalPercent,
-          )
-        }
-      })
-    },
-
-    updateCollectionItemWeightData: function (itemWeight, percent) {
-      var self = this
-      var $itemWeight = $(itemWeight)
-      var $repeatableForm = $itemWeight.closest('.repeatableForm')
-      var double = percent / 100
-
-      $itemWeight.css({ flex: double + ' 1 0%' })
-      $itemWeight.attr('data-weight', double)
-
-      var liIndex = $repeatableForm
-        .find('input[name="' + $itemWeight.attr('data-target') + '"]')
-        .closest('li')
-        .index()
-
-      var $repeatableWeightDisplay = $(
-        self.dom.$list.children('li').get(liIndex),
-      ).find('.repeatableLabel-weightLabel')
-      $repeatableWeightDisplay.attr('data-weight-label', percent + '%')
-      $repeatableWeightDisplay.find('input').val(double)
-    },
-
-    /**
-     * Gets a color for an item to represent the item's weight.
-     */
-    getCollectionItemWeightColor: function (item) {
-      var $item = $(item)
-      var weightColor = $item.data('weight-color-field-value')
-
-      if (weightColor) {
-        return weightColor
-      }
-
-      weightColor = this.cr.getNext()
-
-      $item.data('weight-color-field-value', weightColor)
-
-      return weightColor
-    },
-
-    /**
-     * Creates an element that handles dragging to
-     * change the collection item weight field.
-     */
-    createCollectionItemWeightHandle: function (item) {
-      var self = this
-
-      return $('<div>', {
-        class: 'repeatableForm-itemWeightHandle',
-        mousedown: function (event) {
-          event.stopPropagation()
-          $.drag(
-            this,
-            event,
-            function (event, data) {
-              data.originX = event.clientX
-              data.rightElement = $(this).parent()
-              data.leftElement = data.rightElement.prev()
-
-              data.originalRightWeight = parseFloat(
-                data.rightElement.attr('data-weight'),
-              )
-              data.originalLeftWeight = parseFloat(
-                data.leftElement.attr('data-weight'),
-              )
-
-              data.rightIndex = data.rightElement.index()
-              data.leftIndex = data.leftElement.index()
-
-              var $listElements = self.dom.$list.children(
-                ':not([data-toggle-field-value="false"], .is-removing, .toBeRemoved)',
-              )
-
-              data.rightLabel = $($listElements.get(data.rightIndex)).find(
-                '.repeatableLabel-weightLabel',
-              )
-              data.leftLabel = $($listElements.get(data.leftIndex)).find(
-                '.repeatableLabel-weightLabel',
-              )
-
-              data.rightInput = data.rightLabel.find('input')
-              data.leftInput = data.leftLabel.find('input')
-
-              data.totalWidth =
-                data.rightElement.outerWidth() + data.leftElement.outerWidth()
-              data.totalWeightDouble =
-                data.originalRightWeight + data.originalLeftWeight
-            },
-            function (event, data) {
-              var delta = data.originX - event.clientX
-              var deltaPercent = Math.round((delta / data.totalWidth) * 100)
-              var deltaDouble = deltaPercent / 100
-
-              var newLeftWeightDouble =
-                Math.round((data.originalLeftWeight - deltaDouble) * 100) / 100
-              var newRightWeightDouble =
-                Math.round(
-                  (data.totalWeightDouble - newLeftWeightDouble) * 100,
-                ) / 100
-
-              if (newLeftWeightDouble < 0) {
-                newLeftWeightDouble = 0
-                newRightWeightDouble = data.totalWeightDouble
-              }
-
-              if (newRightWeightDouble < 0) {
-                newRightWeightDouble = 0
-                newLeftWeightDouble = data.totalWeightDouble
-              }
-
-              var newLeftWeightPct = Math.max(
-                Math.round(newLeftWeightDouble * 100),
-                0,
-              )
-              var newRightWeightPct = Math.max(
-                Math.round(newRightWeightDouble * 100),
-                0,
-              )
-
-              data.leftElement
-                .css({
-                  flex: newLeftWeightDouble + ' 1 0%',
-                })
-                .attr('data-weight', newLeftWeightDouble)
-
-              data.rightElement
-                .css({
-                  flex: newRightWeightDouble + ' 1 0% ',
-                })
-                .attr('data-weight', newRightWeightDouble)
-
-              // Update input and numerical display
-              data.rightLabel.attr('data-weight-label', newRightWeightPct + '%')
-              data.leftLabel.attr('data-weight-label', newLeftWeightPct + '%')
-
-              data.rightInput.val(newRightWeightDouble)
-              data.leftInput.val(newLeftWeightDouble)
-            },
-            function (event) {
-              // do nothing.
-            },
-          )
-        },
-      })
-    },
-
-    /**
-     * Add a new item to the list, based from a template.
-     *
-     * checks on global variable `repeatableInsertFront` and for class `addToTop`
-     * to decide if to insert new item to the beginning of the list
-     *
-     * @param {Element|jQuery object} template
-     * The template for the new item.
-     *
-     * @param {Function} customCallback
-     * A function to call after the new item has been added.
-     */
-    addItem: function (template, customCallback, noFocus) {
-      var self = this
-      var $template = $(template)
-      var $addedItem
-      var promise
-      var templateUrl
-      var $templateInputs
-
-      // For single input mode, don't add another item if the input is empty
-      if (self.modeIsSingle() && !self.dom.$singleInput.val()) {
-        return false
-      }
-
-      self.$element[0].dispatchEvent(new Event('repeatable.add'))
-
-      if (self.dom.$viewSwitcher) {
-        self.dom.$viewSwitcher.show()
-      }
-
-      // Create a copy of the template to use as the new item
-      $addedItem = $template.clone()
-      $addedItem.removeClass('template')
-
-      // If the template contains inputs that end with ".toggle" then
-      // start by making them checked to tell the backend it should save this item
-      $addedItem.find(':input[name$=".toggle"]').attr('checked', 'checked')
-
-      // Determine if we need to AJAX the template onto the page
-      // (if the template has no input but has a link)
-      templateUrl = $addedItem.find('a').attr('href')
-      $templateInputs = $addedItem.find(':input')
-      if (templateUrl && $templateInputs.length === 0) {
-        // Not sure why, but sending some kind of cache breaker in the data?
-        ++cacheNonce
-
-        promise = $.ajax({
-          cache: false,
-          url: templateUrl,
-          data: { _nonce: cacheNonce },
-        }).always(function (response) {
-          // The response will either be the data (on success), or a jqXHR object (on error)
-          var content =
-            typeof response === 'string' ? response : response.responseText
-
-          // Add the loaded content into the new item
-          $addedItem.html(content)
-        })
-      } else {
-        // We're not loading any data, so we'll create an already
-        // resolved promise to the next step will complete immediately
-        promise = $.Deferred().resolve().promise()
-      }
-
-      ++this.ariaIndex
-      $templateInputs.each((i, element) => {
-        if (element.hasAttribute('aria-label')) {
-          element.setAttribute(
-            'aria-label',
-            `${element.getAttribute('aria-label')} ${this.ariaIndex}`,
-          )
-        }
-      })
-
-      // Run more code after the item has been loaded
-      promise.always(function () {
-        if (self.dom.$list.find('.RCIG-replace').length) {
-          self.dom.$list.find('.RCIG-replace').after($addedItem)
-        } else {
-          // Add the item to the page, prepending if `.addToTop` is present
-          if (self.dom.$list.parent('.addToTop').length) {
-            self.dom.$list.prepend($addedItem)
-          } else {
-            self.dom.$list.append($addedItem)
-            // Scroll to the newly added item.
-            if (self.initializingCount > 1) {
-              var children = self.dom.$list[0].children
-              const targetEl = children[children.length - 1]
-              scrollIntoView(targetEl)
-            }
-          }
-        }
-
-        // If item has no fields add to list item data attribute to indicate
-        if ($addedItem[0].querySelector(':scope > [data-empty]')) {
-          $addedItem[0].dataset.empty = ''
-        }
-
-        // Initialize stuff on the new item
-        // If there was a custom callback provided, call it now.
-        // This is used for example, in Image Upload.
-        // After the image is uploaded a new repeatable item is added,
-        // then the callback inserts values into the template.
-        if (customCallback) {
-          // Call the customcallback funtion, setting "this" to be the element for the new item
-          customCallback.call($addedItem[0])
-        }
-
-        // Note this will collapse the item as well so we will uncollapse it below
-        self.initItem($addedItem)
-
-        if (self.modeIsPreview()) {
-          self.initPreview($addedItem[0])
-        }
-
-        // Make sure it's not collapsed since it's a new item
-        self.itemUncollapse($addedItem)
-
-        // For single input mode, when user enters a value into the input,
-        // we copy that value into the added item, then clear the value
-        // from the original input so the user can enter another value
-        if (self.modeIsSingle()) {
-          $addedItem
-            .find(':input:not([name$=".toggle"])')
-            .val(self.dom.$singleInput.val())
-          self.dom.$singleInput.val('')
-          self.dom.$singleInput.focus()
-        }
-
-        // Adjust the element ids so they don't conflict
-        $addedItem.find('*[id]').attr('id', function (index, attr) {
-          var newAttr
-
-          self.ariaIndex += 1
-
-          newAttr = attr + 'r' + self.ariaIndex
-
-          // Also adjust the LABEL elements that are linked to other inputs
-          $addedItem.find('*[for="' + attr + '"]').attr('for', newAttr)
-
-          // Also adjust the auto-show elements so they show the correct elements
-          $addedItem
-            .find('*[data-show="#' + attr + '"]')
-            .attr('data-show', '#' + newAttr)
-
-          return newAttr
-        })
-
-        // Trigger a custom "create" event for the item
-        // So other code can act on this if necessary
-        $addedItem.trigger('create')
-
-        if ($addedItem[0].parentNode?.matches('.RCIG-list, .RCS-list')) {
-          $addedItem[0].classList.add('is-new-item')
-        }
-
-        // If we are in mode preview, adjust the added item.
-        self.modePreviewAddItem($addedItem)
-
-        $addedItem.trigger('change')
-
-        var currentIndex = $addedItem.index()
-
-        if (win.repeatableInsertFront && self.modeIsPreview()) {
-          // move added item to the beginning
-          self.repositionItem(currentIndex, 0, $addedItem)
-        }
-
-        // Trigger a resize event for the window
-        // Since we have added new content
-        $win.resize()
-
-        // Insert another option to indexer
-        if (self.dom.$indexer) {
-          self.dom.$indexer.find('select').append(
-            $('<option></option>')
-              .val(currentIndex + 1)
-              .html(currentIndex + 1),
-          )
-        }
-
-        // Delay the forced click until content state is finished adding data-additional-query attribute to the DOM, when applicable.
-        function delayClick(input) {
-          const combo = $addedItem[0].querySelector(':scope > .ComboInput')
-
-          if (
-            combo &&
-            (!input.dataset.dynamicPredicate || input.dataset.additionalQuery)
-          ) {
-            combo.click()
-          } else {
-            setTimeout(() => delayClick(input), 10)
-          }
-        }
-
-        // A little hacky but should work fine given how onFind is currently implemented.
-        if (!self.modeIsSingle() && !noFocus) {
-          window.requestAnimationFrame(() => {
-            window.requestAnimationFrame(() => {
-              const first = tabbable($addedItem[0])[0]
-
-              if (first && !first.classList.contains('RCIG-title')) {
-                const input = $addedItem[0].querySelector(
-                  ':scope > input.objectId',
-                )
-
-                if (input) {
-                  delayClick(input)
-                } else {
-                  first.focus()
-                  first.click()
-                }
-              } else if (first) {
-                first.focus()
-              }
-
-              // Handle UrlsWidget input focus
-              const urlsWidgetItem = self.dom.$list[0]?.lastChild
-
-              if (
-                urlsWidgetItem &&
-                urlsWidgetItem.classList.contains('widget-urlsItem')
-              ) {
-                urlsWidgetItem.querySelector('.widget-urlsItemLabel')?.focus()
-              }
-            })
-          })
-        }
-      }) // END promise.always()
-
-      // Return the promise just in case someone wants to do something after the item is added
-      // (but doesn't want to use the callback function)
-      return promise
-    },
-
-    /**
-     * Shortcut function to tell if the mode is 'form'
-     * @returns {Boolean}
-     */
-    modeIsObject: function () {
-      var self = this
-      return self.mode === 'object'
-    },
-
-    /**
-     * Shortcut function to tell if the mode is 'form'
-     * @returns {Boolean}
-     */
-    modeIsForm: function () {
-      var self = this
-      return self.mode === 'form'
-    },
-
-    /**
-     * Shortcut function to tell if the mode is 'single'
-     * @returns {Boolean}
-     */
-    modeIsSingle: function () {
-      var self = this
-      return self.mode === 'single'
-    },
-
-    /**
-     * Shortcut function to tell if the mode is 'preview'
-     * @returns {Boolean}
-     */
-    modeIsPreview: function () {
-      var self = this
-      return self.mode === 'preview'
-    },
-
-    /**
-     * Shortcut function to tell if the mode is 'weighted'
-     * @returns {Boolean}
-     */
-    modeIsWeighted: function () {
-      var self = this
-      return self.mode === 'weighted'
-    },
-
-    /**
-     * Toggle the display of an item (and load the item if necessary).
-     * If the item contains a hidden input with data-form-fields-url attribute,
-     * then that means it has not been loaded yet.
-     * In that case dynamically load the item the first time the item is toggled.
-     *
-     * @param {Element|jQuery object} item
-     * The list item that should be toggled.
-     *
-     * @param {Boolean} [collapseFlag]
-     * Set to true to force the item to collapse.
-     * Set to false to force the item to uncollapse.
-     * If undefined then the item will toggle between collapsed and uncollapsed.
-     */
-    itemToggle: function (item, collapseFlag) {
-      var self = this
-      var $item = $(item)
-      // var deferred
-
-      // Call for textareas to redraw.
-      if ($item.hasClass('is-collapsed')) {
-        $item.find('textarea').each((i, textarea) => {
-          textarea.dispatchEvent(new CustomEvent('change', { bubbles: true }))
-        })
-      }
-
-      // Collapse or uncollapse the item
-      $item.toggleClass('is-collapsed collapsed', collapseFlag)
-      if (!self.itemIsCollapsed($item)) {
-        $item.find('> .objectInputs').css('display', '')
-      } else if (
-        !self.itemIsGridView($item) &&
-        !self.itemIsVerticalView($item)
-      ) {
-        $item.find('> .objectInputs').hide()
-      }
-
-      if (collapseFlag && $item.hasClass('expanded')) {
-        $item.removeClass('expanded')
-      }
-
-      self.$element[0].dispatchEvent(new Event('repeatable.toggle'))
-
-      // Don't do anything if mode=preview
-      if (self.modeIsPreview()) {
-        return
-      }
-
-      // Load the item if necessary,
-      // or if it's already loaded do some stuff immediately
-      if (!self.itemIsCollapsed($item)) {
-        self.itemLoad($item).always(function () {
-          // Trigger the resize event since we changed the item size
-          $item.resize()
-
-          // Trigger a change event on the first input within the item
-          // so other code can do something if necessary
-          const firstInput = $item.find(':input:first')
-          if (firstInput.length) {
-            firstInput.change()
-
-            // The triggered change above adds data-interacted to the inputContainer
-            // (via state.js) once it is expanded, but we don't want that in this case
-            const inputContainer = firstInput.closest('.inputContainer')
-            if (inputContainer.length) {
-              inputContainer.removeAttr('data-interacted')
-            }
-          }
-        })
-      }
-    },
-
-    /**
-     * Collapse an item.
-     *
-     * @param {Element|jQuery object} item
-     * The list item that should be collapsed.
-     */
-    itemCollapse: function (item) {
-      var self = this
-      self.itemToggle(item, true)
-    },
-
-    /**
-     * Uncollapse an item (and load the item if necessary).
-     *
-     * @param {Element|jQuery object} item
-     * The list item that should be uncollapsed.
-     */
-    itemUncollapse: function (item) {
-      var self = this
-      self.itemToggle(item, false)
-    },
-
-    /**
-     * Determine if an item is currently collapsed.
-     *
-     * @param {Element|jQuery object} item
-     * The list item to test.
-     */
-    itemIsCollapsed: function (item) {
-      // var self = this
-      var $item = $(item)
-      return $item.hasClass('is-collapsed') || $item.hasClass('collapsed')
-    },
-
-    /**
-     * Checks an item to determine if it needs to load some dynamic content,
-     * and loads it if necessary.
-     *
-     * @param {Element|jQuery object} item
-     * The item to load.
-     *
-     * @param {Element|jQuery object} [location]
-     * Optional location where to append the loaded content.
-     * If not specified will append the loaded content to the item.
-     *
-     * @returns {Promise}
-     * Returns a promise that tells you when the item is done loading.
-     * You can use this promise even if the item is already on the page
-     * and doesn't need to load anything.
-     *
-     * @example
-     * myRepeatable.itemLoad(element).always(function(){ alert('Item is done loading'); });
-     */
-    itemLoad: function (item, location) {
-      var self = this
-      var $item = $(item)
-      var $location = location ? $(location) : $item
-      var $input
-      var url
-      var data
-
-      // In case we do not need to load anything, we'll create a deferred
-      // promise that is already resolved
-      var promise = $.Deferred().resolve().promise()
-
-      if ($item.data('loaded')) {
-        return promise
-      }
-      // Look for a hidden input that has a data-form-fields-url attribute
-      // which indicates we need to load the form fields fields for this item.
-      // Note after we load the content we will remove data-form-fields-url
-      // so it will only be found and loaded once.
-      $input = $item.find('> input[data-form-fields-url]')
-
-      if ($input.length > 0) {
-        $item.addClass('is-loading')
-
-        // Get the URL to fetch
-        url = $input.attr('data-form-fields-url')
-
-        // Get the data to pass to the URL
-        data = $input.val()
-
-        // remove attr so it won't be loaded again
-        $input.removeAttr('data-form-fields-url')
-
-        // Fetch the content
-        // Override the promise we created by that returned by the ajax call,
-        // so we can pass that back and you can take action when the ajax completes
-        promise = $.ajax({
-          type: 'POST',
-          cache: false,
-          url: url,
-          data: { data: data },
-        }).always(function (response) {
-          $item.removeClass('is-loading')
-
-          // The response will either be the data (on success), or a jqXHR object (on error)
-          var content =
-            typeof response === 'string' ? response : response.responseText
-          var $content = $(content)
-
-          // When ajax completes add the content to the page
-          $input.next('input[name$=".expanded"]').val('true')
-          $content.appendTo($location)
-          $item.data('loaded', true)
-
-          // If the item has already been removed, mark the new content to be removed as well
-          if (self.itemIsRemoved($item)) {
-            // Call the removeItem function again and this time
-            // it will also mark the newly loaded content to be disabled
-            self.removeItem($item)
-          }
-
-          // Trigger some events so other code can know we have added content
-          // and can add more controls to the form we just loaded
-          $location.trigger('create')
-          $location.trigger('load')
-        })
-      }
-
-      // Return a promise so other events can be triggered after the item is loaded
-      return promise
-    },
-
-    /**
-     * Toggle the remove state for an item.
-     * When an item is marked for removal we perform the following steps:
-     * - Add toBeRemoved class on the item.
-     * - Disable all inputs.
-     * - Change remove link text.
-     *
-     * @param {Element|jQuery object} item
-     * The item (LI element).
-     *
-     * @param {Boolean} [removeFlag]
-     * Set to true to force the item to be removed.
-     * Set to false to force the item to be restored.
-     * If undefined then the item will toggle between remove/restore.
-     */
-    removeItemToggle: function (item, removeFlag) {
-      var self = this
-      var $item = $(item)
-      var $removeButton = $item.find('.removeButton')
-      var $searchButton = $item.find('.ContentSelector-search')
-      var $editButton = $item.find('.ContentSelector-edit')
-      var $inputs
-      var $content = $()
-
-      // Define the content where we need to disable inputs and mark toBeRemoved
-      $content = $content.add($item)
-
-      // Find all the input elements except the content summary quick view button
-      // within the content so we can disable them
-      $inputs = $content.find(':input:not(".ContentSummary-info")')
-
-      // If the removeFlag was not specified, determine if it should be true
-      // or false, based on the current class of the item
-      if (removeFlag === undefined) {
-        removeFlag = !$item.is('.is-removing') && !$item.is('.toBeRemoved')
-      }
-
-      if (removeFlag) {
-        // Add the "toBeRemoved" class to the item.
-        $content.addClass('is-removing toBeRemoved')
-
-        // Disable all the inputs within the item so they will not be sent to the backend
-        // when the form is submitted
-        $inputs.each(function () {
-          const $input = $(this)
-
-          // Keep remove button enabled so item can always be restored or removed
-          if ($input.is($removeButton) && $input.parent().is($item)) return
-
-          if ($input.prop('disabled')) {
-            $input.data('already-disabled', true)
-          } else {
-            $input.prop('disabled', true)
-          }
-        })
-
-        $searchButton.addClass('is-disabled')
-        $editButton.addClass('is-disabled')
-
-        $item.find('> .objectInputs').hide()
-
-        // Change the text in the remove button
-        if (self.options.restoreButtonText) {
-          $removeButton.text(self.options.restoreButtonText)
-        }
-
-        self.$element[0].dispatchEvent(new Event('repeatable.remove'))
-      } else {
-        // Remove the "toBeRemoved" class to the item.
-        $content.removeClass('is-removing toBeRemoved')
-
-        // Disable all the inputs within the item so they will not be sent to the backend
-        // when the form is submitted
-        $inputs.each(function () {
-          const $input = $(this)
-
-          if ($input.data('already-disabled')) {
-            $input.removeData('already-disabled')
-          } else {
-            $input.prop('disabled', false)
-          }
-        })
-
-        $searchButton.removeClass('is-disabled')
-        $editButton.removeClass('is-disabled')
-
-        $item.find('> .objectInputs').show()
-
-        // Change the text in the remove button
-        if (self.options.removeButtonText) {
-          $removeButton.text(self.options.removeButtonText)
-        }
-
-        self.$element[0].dispatchEvent(new Event('repeatable.add'))
-      }
-
-      // Trigger a change event to notify other code
-      $item.change()
-    },
-
-    /**
-     * Mark an item to be removed.
-     *
-     * @param {Element|jQuery object} item
-     * The item (LI element).
-     */
-    removeItem: function (item) {
-      var self = this
-      self.removeItemToggle(item, true)
-    },
-
-    /**
-     * Immediately removes an item from
-     * the DOM. Invoked by objectIdResult.jsp.
-     */
-    removeItemImmediately: function (item) {
-      var self = this
-      var $item = $(item)
-
-      if (self.modeIsWeighted) {
-        self.removeCollectionItemWeight($item)
-      }
-
-      $item.remove()
-    },
-
-    /**
-     * Unmark an item to be removed (that is, restore the item).
-     *
-     * @param {Element|jQuery object} item
-     * The item (LI element).
-     */
-    restoreItem: function (item) {
-      var self = this
-      self.removeItemToggle(item, false)
-    },
-
-    /**
-     * Determine if an item is currently removed.
-     *
-     * @param {Element|jQuery object} item
-     * The item (LI element).
-     */
-    itemIsRemoved: function (item) {
-      // var self = this
-      return $(item).hasClass('is-removing') || $(item).hasClass('toBeRemoved')
-    },
-
-    //= =================================================
-    // MODE SINGLE
-    //= =================================================
-
-    /**
-     * Additional initializing for the "Add Item" controls when mode is "single".
-     */
-    modeSingleInitAddButton: function () {
-      var self = this
-      var $input
-      var $toggle
-      var $singleInput
-      var $addButtonContainer = self.dom.$addButtonContainer
-
-      // Only do this for single input mode
-      if (!self.modeIsSingle()) {
-        return
-      }
-
-      // Get the single input from the template, but not the ".toggle" input.
-      // We will also clone the $toggle input later
-      $toggle = self.dom.$templates.find(':input[name$=".toggle"]')
-      $input = self.dom.$templates.find(':input').not($toggle)
-
-      // Make a copy of the input
-      $singleInput = $input.clone()
-
-      // Remove ID if it has it since duplicates not allowed
-      $singleInput.removeAttr('id')
-
-      // When user presses Enter on the input then simulate a click on Add Item button
-      // so another item can be added
-      $singleInput.keydown(function (event) {
-        // Check for Enter key
-        if (event.which === 13) {
-          // TODO: instead of triggering a click on the add button
-          // we should just call the method that the click button calls
-          $addButtonContainer.find('.addButton').trigger('click')
-          return false
-        }
-      })
-
-      // Put a toggle input into the add button container
-      // So it will tell the back-end that this input should be added
-      // ???: this is not checked initially (but is is checked when the new input is added?)
-      $('<input/>', {
-        name: $toggle.attr('name'),
-        type: 'hidden',
-        value: $toggle.attr('value'),
-      }).appendTo($addButtonContainer)
-
-      // Put the copy of the single input into the add button container
-      // so user can type into it and create new items
-      $singleInput.appendTo($addButtonContainer)
-
-      // Save for later use (so we can check if it contains a value)
-      self.dom.$singleInput = $singleInput
-
-      // TODO: determine how these inputs are duplicated when the add button container is clicked...
-    },
-
-    /**
-     * Reposition an item by index
-     */
-    repositionItem: function (oldIndex, newIndex, item) {
-      var self = this
-      var $item = $(item)
-      var $items = self.dom.$list.find('li')
-
-      if (!$item || newIndex === oldIndex || newIndex > $items.length) {
-        return
-      }
-
-      // Remove active item temporarily
-      $item = $item.detach()
-
-      // Add active item in the new position
-      if (newIndex === 0) {
-        // Special case add to the front of the list
-        self.dom.$list.prepend($item)
-      } else {
-        self.dom.$list
-          .find('li')
-          .eq(newIndex - 1)
-          .after($item)
-      }
-    },
-
-    //= =================================================
-    // MODE PREVIEW
-    //= =================================================
-
-    /**
-     * After adding a new item, this function cleans it up for mode=preview.
-     * Create the thumbnail image for the empty item.
-     * The added item will have a complete form, so move the form to the gallery view.
-     */
-    modePreviewAddItem: function (item) {
-      var self = this
-      var $item = $(item)
-
-      if (!self.modeIsPreview()) {
-        return
-      }
-
-      let $galleryViewState
-      const $galleryViewLabel = $(
-        '.view-switcher:enabled + .ComboInput .ComboInput-selected',
-      ).text()
-
-      if ($galleryViewLabel === 'List View') {
-        $galleryViewState = 'list'
-        if (!window.GALLERY_LIST_VIEW_UI) {
-          $item.removeClass('is-gridItem')
-        }
-      } else if ($galleryViewLabel === 'Grid View') {
-        $galleryViewState = 'grid'
-      }
-
-      self.$galleryViewState = $galleryViewState
-
-      $item.addClass('state-new')
-      $item.addClass(`is-${$galleryViewState}Item`)
-
-      // Applies RCIG-previewField class for styling on initial upload
-      let previewField = $item.attr('data-preview-field')
-      if (previewField) {
-        const index = previewField.indexOf('/')
-        if (index > -1) previewField = previewField.substring(0, index)
-        $item
-          .find(
-            `> .objectInputs > .inputContainer[data-field="${previewField}"]`,
-          )
-          .addClass('RCIG-previewField')
-      }
-    },
-
-    initViewSwitcher: function () {
-      var self = this
-      var $container = self.$element
-      var $viewGrid
-      var $viewVertical
-      var $viewSwitcher
-      var $topButtonContainer
-
-      if (!self.modeIsPreview()) {
-        return
-      }
-
-      // Create controls at the top
-      $topButtonContainer = $('<div/>', {
-        class: 'repeatablePreviewControls',
-      }).prependTo($container)
-
-      // Create dropdown to switch between grid view and vertical view
-      var $gridSelected =
-        !window.GALLERY_LIST_VIEW_UI && !self.isError
-          ? "selected='selected'"
-          : ''
-      var $listSelected =
-        window.GALLERY_LIST_VIEW_UI || self.isError ? "selected='selected'" : ''
-      $viewSwitcher = $(
-        '<select class="view-switcher">' +
-          `<option class="view-switcher-grid" ${$gridSelected} value="grid">Grid View</option>` +
-          `<option class="view-switcher-vertical" ${$listSelected} value="vertical">List View</option>` +
-          '</select>',
-      ).appendTo($topButtonContainer)
-
-      self.dom.$viewSwitcher = $viewSwitcher // Save for later
-
-      // The grid view will use the existing UL or OL
-      $viewGrid = self.dom.$list
-      self.dom.$viewGrid = $viewGrid // save for later
-
-      // The vertical view will also use the existing UL or OL as skeleton
-      $viewVertical = self.dom.$list
-      self.dom.$viewVertical = $viewVertical // save for later
-
-      // Switches between vertical and grid views
-      $viewSwitcher.change(function () {
-        if ($viewSwitcher.find('option[value="grid"]').attr('selected')) {
-          $viewSwitcher.find('option[value="grid"]').removeAttr('selected')
-          $viewSwitcher
-            .find('option[value="vertical"]')
-            .attr('selected', 'selected')
-          self.modePreviewShowVertical()
-        } else {
-          $viewSwitcher.find('option[value="vertical"]').removeAttr('selected')
-          $viewSwitcher
-            .find('option[value="grid"]')
-            .attr('selected', 'selected')
-          self.modePreviewShowGrid()
-        }
-      })
-    },
-
-    /**
-     * When in preview mode, show the grid view.
-     */
-    modePreviewShowGrid: function () {
-      var self = this
-
-      if (!self.modeIsPreview()) {
-        return
-      }
-
-      self.dom.$viewGrid.show()
-      self.dom.$viewVertical.find('> li').removeClass('is-listItem')
-      self.dom.$viewGrid.find('> li').addClass('is-gridItem')
-      self.$element.addClass('is-gridView')
-
-      self.dom.$viewGrid.find('> li').each(function () {
-        var $item = $(this)
-        self.itemUncollapse($item)
-      })
-    },
-
-    /**
-     * When in preview mode, show the vertical view.
-     */
-    modePreviewShowVertical: function (activeItem) {
-      var self = this
-
-      if (!self.modeIsPreview()) {
-        return
-      }
-
-      self.dom.$viewVertical.show()
-      self.dom.$viewVertical.find('> li').addClass('is-listItem')
-      self.dom.$viewGrid.find('> li').removeClass('is-gridItem')
-      self.$element.removeClass('is-gridView')
-
-      self.dom.$viewVertical.find('> li').each(function () {
-        var $item = $(this)
-        self.itemCollapse($item)
-      })
-    },
-
-    /**
-     * Determine if an item is an vertical view item
-     *
-     * @param {Element|jQuery object} item
-     * The list item to test.
-     */
-    itemIsVerticalView: function (item) {
-      return item && $(item).hasClass('is-listItem')
-    },
-
-    /**
-     * Determine if an item is a grid view item
-     *
-     * @param {Element|jQuery object} item
-     * The list item to test.
-     */
-    itemIsGridView: function (item) {
-      return item && $(item).hasClass('is-gridItem')
-    },
-  } // END repeatableUtility
-})(jQuery, window)
-
-// Set filename for debugging tools to allow breakpoints even when using a cachebuster
-// # sourceURL=jquery.repeatable.js