### \n
`);\n\n // Add automation attributes to header buttons and root element\n if (s.attributes) {\n const autoAttr = [{\n btn: $(`${s.availableClass} ${s.availableBtn}`, this.element),\n suffix: (s.availableClass || '').substring(1)// available\n }, {\n btn: $(`${s.selectedClass} ${s.selectedBtnLeft}`, this.element),\n suffix: `${(s.selectedClass || '').substring(1)}-left`// selected-left\n }, {\n btn: $(`${s.selectedClass} ${s.selectedBtnRight}`, this.element),\n suffix: `${(s.selectedClass || '').substring(1)}-right`// selected right\n }, {\n btn: $(`${s.additionalClass} ${s.additionalBtn}`, this.element),\n suffix: (s.additionalClass || '').substring(1)// additional\n }];\n autoAttr.forEach((x) => {\n x.suffix = `swaplist-btn-${x.suffix}`;\n });\n autoAttr.forEach(x => utils.addAttributes(x.btn, this, s.attributes, x.suffix, s.attributesOverride));\n utils.addAttributes(this.element, this, s.attributes, 'swaplist', s.attributesOverride);\n }\n\n // Make top buttons disabled if not draggable\n if (!s.draggable.available) {\n disabledBtnStr = `${s.availableClass} ${s.availableBtn},${s.selectedBtnLeft}`;\n $(disabledBtnStr, this.element).prop('disabled', true);\n }\n if (!s.draggable.selected) {\n disabledBtnStr = `${s.selectedBtnLeft},${s.selectedBtnRight}`;\n if (!s.draggable.available) {\n disabledBtnStr += `,${s.additionalClass} ${s.additionalBtn}`;\n }\n if (!this.isAdditional || !s.draggable.additional) {\n disabledBtnStr += `,${s.availableClass} ${s.availableBtn}`;\n }\n $(disabledBtnStr, this.element).prop('disabled', true);\n $(`${s.additionalClass} ${s.additionalBtn}`, this.element).addClass('is-rotate');\n }\n if (!s.draggable.additional) {\n $(`${s.additionalClass} ${s.additionalBtn},${\n s.selectedBtnRight}`, this.element).prop('disabled', true);\n }\n },\n\n /**\n * When list is Empty force to add css class \"is-multiselect\"\n * @private\n */\n isMultiSelectClass() {\n const s = this.settings;\n const containers = [s.availableClass, s.selectedClass, s.additionalClass];\n\n for (let i = 0, l = containers.length; i < l; i++) {\n const lv = $(`${containers[i]} .listview`, this.element);\n if (!$('li', lv).length) {\n lv.addClass('is-multiselect');\n }\n }\n },\n\n /**\n * Initialize pre selected items\n * @private\n * @param {jQuery|HTMLElement} container container element\n * @returns {void}\n */\n initSelected(container) {\n container = this.isjQuery(container) ? container : $(container, this.element);\n if (container.length) {\n const list = $('.listview', container).data('listview');\n const selected = $('li[selected]', container);\n\n for (let i = 0, l = selected.length; i < l; i++) {\n const li = $(selected[i]);\n li.removeAttr('selected');\n list.select(li);// Select this item\n }\n this.moveElements(container, this.settings.selectedClass);\n }\n },\n\n /**\n * Move Elements\n * @private\n * @param {jQuery[]|HTMLElement} from beginning container\n * @param {jQuery[]|HTMLElement} to ending contaner\n * @returns {void}\n */\n moveElements(from, to) {\n if (to === null) {\n return;\n }\n from = (typeof from !== 'string') ? from : $(from, this.element);\n to = (typeof to !== 'string') ? to : $(to, this.element);\n const list = $('.listview', from).data('listview');\n\n this.clearSelections();\n this.selections.owner = from;\n this.selections.droptarget = to;\n\n if (this.isTouch) {\n if (list.selectedItems) {\n for (let i = 0, l = list.selectedItems.length; i < l; i++) {\n this.selections.items[i] = list.selectedItems[i].closest('li');\n }\n }\n } else {\n this.selections.items = list.selectedItems;\n }\n\n this.setSelectionsItems(this.selections.owner);\n this.unselectElements(list);\n\n if (this.selections.items.length) {\n this.selections.move = {\n items: this.selections.itemsData,\n from: this.getContainer(this.selections.itemsData)\n };\n const result = this.element.triggerHandler('beforeswap', [this.selections.move]);\n if ((typeof result === 'boolean' && !result) || (typeof result === 'string' && result.toLowerCase() === 'false')) {\n return;\n }\n\n const ul = $('ul', to);\n const currentSize = $('li', ul).length;\n const size = this.selections.items.length + currentSize;\n\n if (this.selections.items) {\n const toList = this.getDataList(to);\n for (let i = 0, l = this.selections.items.length; i < l; i++) {\n const selection = $(this.selections.items[i]);\n if (this.isKeepInList(to) && toList.some(item => item.id === selection.data().id)) {\n selection.remove();\n } else {\n const val = this.isKeepInList(from) ? selection.clone() : selection;\n val.attr({ 'aria-posinset': currentSize + i + 1, 'aria-setsize': size }).find('mark.highlight').contents().unwrap();\n ul.append(val);\n }\n }\n }\n\n this.afterUpdate($('.listview', to).data('listview'));\n }\n },\n\n /**\n * Get container info from given list items\n * @private\n * @param {Array} items to get container info.\n * @returns {Object} container info (jQuery container element, css-class)\n */\n getContainer(items) {\n const s = this.settings;\n\n if (typeof items[0] === 'object' && items[0].node) {\n const container = items[0].node.closest('.card');\n let cssClass = '';\n\n if (container.is(s.availableClass)) {\n cssClass = s.availableClass;\n } else if (container.is(s.selectedClass)) {\n cssClass = s.selectedClass;\n } else if (container.is(s.additionalClass)) {\n cssClass = s.additionalClass;\n }\n return { container, class: cssClass };\n }\n return null;\n },\n\n /**\n * Un-select Elements\n * @private\n * @param {jQuery|HTMLElement} list the list\n */\n unselectElements(list) {\n if (list.selectedItems) {\n for (let i = 0, l = list.selectedItems.length; i < l; i++) {\n list.select($(list.selectedItems[i]));\n }\n }\n if (list && list.element) {\n list.element.find('li').attr('aria-selected', false).removeClass('is-selected');\n }\n },\n\n /**\n * Detect browser support for drag-n-drop\n * @private\n * @returns {boolean} whether or not drag-n-drop is supported\n */\n isDragAndDropSupports() {\n const div = document.createElement('div');\n return ('draggable' in div) || ('ondragstart' in div && 'ondrop' in div);\n },\n\n /**\n * Detect browser support for match-media\n * @private\n * @returns {boolean} whether or not matchMedia is supported in this browser\n */\n isMatchMediaSupports() {\n return (typeof window.matchMedia !== 'undefined' || typeof window.msMatchMedia !== 'undefined');\n },\n\n /**\n * Detect browser viewport\n * @private\n * @returns {object} contains width and height\n */\n viewport() {\n let e = window;\n let a = 'inner';\n if (!('innerWidth' in window)) {\n a = 'client';\n e = document.documentElement || document.body;\n }\n return { width: e[`${a}Width`], height: e[`${a}Height`] };\n },\n\n /**\n * Check given [max-width] is true/false\n * @private\n * @param {number} w the current page width\n * @returns {boolean} whether or not the max-width has been matched\n */\n isMaxWidth(w) {\n return ((this.isMatchMediaSupports() && window.matchMedia(`(max-width: ${w}px)`).matches) || this.viewport().width <= w);\n },\n\n /**\n * Make Draggable\n * @private\n */\n makeDraggable() {\n const self = this;\n const ul = $('ul', this.element);\n\n if (this.isDragAndDropSupports) {\n // Use Handle if available\n this.handle = ul.first().attr('data-swap-handle');\n this.handle = (!this.isTouch && $(this.handle, ul).length > 0) ? this.handle : null;\n $(this.handle, ul).addClass('draggable')\n .off('mousedown.swaplist touchstart.swaplist')\n .on('mousedown.swaplist touchstart.swaplist', () => {\n this.selections.isHandle = true;\n })\n .off('mouseup.swaplist touchend.swaplist')\n .on('mouseup.swaplist touchend.swaplist', () => {\n this.selections.isHandle = false;\n });\n\n this.targets = ul.attr({ 'aria-dropeffect': 'none' });\n\n this.items = $('li:not(.is-disabled)', this.element)\n .not('a[href], img')\n .off('selectstart.swaplist')\n .on('selectstart.swaplist', function () {\n if (this.dragDrop) { this.dragDrop(); } // ie9\n return false;\n })\n .end()\n .attr({ draggable: true })\n .addClass(self.handle ? '' : 'draggable');\n }\n },\n\n /**\n * Get Element By Touch In List\n * @private\n * @param {jQuery|HTMLElement} list the list element\n * @param {number} x touch event's x coordinate\n * @param {number} y touch event's y coordinate\n * @returns {jQuery[]} component that was tapped\n */\n getElementByTouchInList(list, x, y) {\n let returns = false;\n const listJq = $(list);\n\n for (let i = 0, l = listJq.length; i < l; i++) {\n const item = $(listJq[i]);\n const offset = item.offset();\n\n if (!(x <= offset.left || x >= offset.left + item.outerWidth() ||\n y <= offset.top || y >= offset.top + item.outerHeight())) {\n returns = item;\n }\n }\n return returns;\n },\n\n /**\n * Drag touch element\n * @private\n * @param {jQuery.Event} e jquery-wrapped `touch` event\n * @param {jQuery[]} elm the element being dragged\n */\n draggTouchElement(e, elm) {\n const orig = e.originalEvent.changedTouches[0];\n elm[0].style.top = `${orig.pageY - this.offset.y}px`;\n elm[0].style.left = `${orig.pageX - this.offset.x}px`;\n },\n\n /**\n * Shorctut for testing whether a modifier key is pressed\n * @private\n * @param {jQuery.Event} e the keypress event\n * @returns {boolean} whether or not a modifier key is pressed\n */\n hasModifier(e) {\n return (e.ctrlKey || e.metaKey || e.shiftKey);\n },\n\n /**\n * Applying dropeffect to the target containers\n * @private\n */\n addDropeffects() {\n if (this.targets) {\n for (let i = 0, l = this.targets.length; i < l; i++) {\n $(this.targets[i]).attr({ 'aria-dropeffect': 'move', tabindex: 0 });\n }\n }\n if (this.selections && this.selections.items) {\n for (let i = 0, l = this.selections.items.length; i < l; i++) {\n $(this.selections.items[i]).attr({ 'aria-grabbed': true, tabindex: 0 });\n }\n }\n },\n\n /**\n * Removing dropeffect from the target containers\n * @private\n */\n clearDropeffects() {\n this.targets.attr({ 'aria-dropeffect': 'none' }).removeAttr('tabindex');\n if (this.selections && this.selections.items) {\n for (let i = 0, l = this.selections.items.length; i < l; i++) {\n const val = $(this.selections.items[i]);\n val.removeAttr(`aria-grabbed${!val.is(':focus') ? ' tabindex' : ''}`);\n }\n }\n },\n\n /**\n * Clear selections\n * @private\n */\n clearSelections() {\n this.selections.items = [];\n this.selections.itemsData = [];\n this.selections.owner = null;\n this.selections.related = null;\n this.selections.droptarget = null;\n this.selections.isInSelection = null;\n this.selections.dragged = null;\n this.selections.placeholder = null;\n this.selections.placeholderTouch = null;\n $('ul, li', this.element).removeClass('over');\n $('#sl-placeholder-container, #sl-placeholder-touch, #sl-placeholder-touch2, #sl-placeholder').remove();\n },\n\n /**\n * Set selections items\n * @private\n * @param {jQuery[]|HTMLElement} container the container element\n */\n setSelectionsItems(container) {\n container = this.isjQuery(container) ? container : $(container, this.element);\n const nodes = $('.listview li', container);\n const containerAPI = container.find('.listview').data('listview');\n let dataList = this.getDataList(container);\n let isFiltered = false;\n if (containerAPI && containerAPI.filteredDataset) {\n dataList = [...containerAPI.filteredDataset];\n isFiltered = true;\n }\n\n for (let i = 0, l = nodes.length; i < l; i++) {\n const li = $(nodes[i]);\n const itemData = dataList[i];\n if (isFiltered) {\n itemData.node = li;\n delete itemData._isFilteredOut;\n }\n if (li.is('.is-selected')) {\n this.selections.itemsData.push(itemData);\n }\n }\n },\n\n /**\n * Init dataset\n * @private\n */\n initDataset() {\n const s = this.settings;\n const containers = [\n { type: 'available', dataset: s.available, class: s.availableClass },\n { type: 'selected', dataset: s.selected, class: s.selectedClass },\n { type: 'additional', dataset: s.additional, class: s.additionalClass }\n ];\n\n this.dataset = { available: [], selected: [] };\n if (this.isAdditional) {\n this.dataset.additional = [];\n }\n\n for (let i = 0, l = containers.length; i < l; i++) {\n const c = containers[i];\n const nodes = $(`${c.class} .listview li`, this.element);\n\n for (let nodeIndex = 0, l2 = nodes.length; nodeIndex < l2; nodeIndex++) {\n let data;\n let value;\n const li = $(nodes[nodeIndex]);\n if (c.dataset) {\n // Make sure it's not reference pointer to data object, make copy of data\n data = JSON.parse(JSON.stringify(c.dataset[nodeIndex]));\n delete data.selected;\n } else {\n data = { text: $.trim($('.swaplist-item-content', li).text()) };\n value = li.attr('data-value');\n if (value) {\n data.value = value;\n }\n }\n if (this.dataset[c.type]) {\n data.node = li;\n this.dataset[c.type].push(data);\n }\n }\n }\n },\n\n /**\n * Get data list\n * @private\n * @param {jQuery[]|HTMLElement} container the container element\n * @returns {object|array} the subset of the dataset desired\n */\n getDataList(container) {\n const s = this.settings;\n const d = this.dataset;\n container = this.isjQuery(container) ? container : $(container, this.element);\n\n if (container.is(s.additionalClass)) {\n return d.additional;\n }\n if (container.is(s.selectedClass)) {\n return d.selected;\n }\n if (container.is(s.availableClass)) {\n return d.available;\n }\n return [];\n },\n\n /**\n * Move an array element position\n * @private\n * @param {array} arr target array to manipulate\n * @param {number} from index to pull from\n * @param {number} to index to move to\n */\n arrayIndexMove(arr, from, to) {\n arr.splice(to, 0, arr.splice(from, 1)[0]);\n },\n\n /**\n * Sync dataset\n * @private\n * @param {jQuery[]} owner element that currently contains the dataset\n * @param {jQuery[]} droptarget element that will receive the dataset\n */\n syncDataset(owner, droptarget) {\n const droptargetNodes = $('.listview li', droptarget);\n const ownerAPI = owner.find('.listview').data('listview');\n const dropTargetAPI = droptarget.find('.listview').data('listview');\n const ownerDataList = this.getDataList(owner);\n const dtDataList = this.getDataList(droptarget);\n const isMoved = (mOwner, mItem) => {\n if (mOwner && mItem) {\n const id = { owner: mOwner.getAttribute('data-id'), item: mItem.getAttribute('data-id') };\n return ((typeof id.owner !== 'undefined') && (typeof id.item !== 'undefined') && (id.owner === id.item));\n }\n return false;\n };\n\n if (owner.is(droptarget)) {\n const syncedList = [];\n for (let i = 0, l = droptargetNodes.length; i < l; i++) {\n const item = droptargetNodes[i];\n for (let ownerIndex = 0, l2 = ownerDataList.length; ownerIndex < l2; ownerIndex++) {\n const ownerItem = ownerDataList[ownerIndex];\n if (isMoved(ownerItem.node[0], item)) {\n syncedList.push(ownerItem);\n break;\n }\n }\n }\n ownerDataList.splice(0, ownerDataList.length);\n for (let i = 0, l = syncedList.length; i < l; i++) {\n ownerDataList.push(syncedList[i]);\n }\n } else {\n for (let i = 0, l = this.selections.items.length; i < l; i++) {\n const item = this.selections.items[i];\n let canLoop = true;\n for (let dtIndex = 0, l2 = droptargetNodes.length; dtIndex < l2 && canLoop; dtIndex++) {\n const droptargetNode = $(droptargetNodes[dtIndex]);\n if (droptargetNode.data().id === item.data().id) {\n for (let ownerIndex = 0, l3 = ownerDataList.length; ownerIndex < l3; ownerIndex++) {\n const ownerItem = ownerDataList[ownerIndex];\n if (isMoved(ownerItem.node[0], item[0])) {\n if (!(this.isKeepInList(droptarget) && dtDataList.some(dt => dt.id === ownerItem.id))) {\n dtDataList.push(ownerItem);\n this.arrayIndexMove(dtDataList, dtDataList.length - 1, dtIndex);\n }\n\n if (!this.isKeepInList(owner)) {\n ownerDataList.splice(ownerIndex, 1);\n }\n\n canLoop = false;\n break;\n }\n }\n }\n }\n }\n }\n\n ownerAPI.updated({ dataset: ownerDataList });\n dropTargetAPI.updated({ dataset: dtDataList });\n this.makeDraggable();\n },\n\n /**\n * Check if a object is jQuery object\n * @private\n * @param {object} obj the object being checked\n * @returns {boolean} whether or not the object is a jQuery selector\n */\n isjQuery(obj) {\n return (obj && (obj instanceof jQuery || obj.constructor.prototype.jquery));\n },\n\n /**\n * Check if the list retains items when moved\n * @private\n * @param {jQuery} list list to be checked\n * @returns {boolean} whether or not the list retains items\n */\n isKeepInList(list) {\n const s = this.settings;\n return (list.is(s.availableClass) && s.keepInList.available) ||\n (list.is(s.selectedClass) && s.keepInList.selected) ||\n (list.is(s.additionalClass) && s.keepInList.additional);\n },\n\n /**\n * Update attributes\n * @private\n * @param {jQuery[]} list the target element to update\n */\n updateAttributes(list) {\n const items = $('li', list);\n\n for (let i = 0, l = items.length; i < l; i++) {\n $(items[i]).attr({ 'aria-posinset': i + 1, 'aria-setsize': l });\n }\n },\n\n /**\n * After update\n * @private\n * @param {jQuery[]} list the target element to change after an update\n */\n afterUpdate(list) {\n const focusIdx = this.selections.droptarget.find('li:focus').index();\n const focusClass = `.card.${this.selections.droptarget[0].classList[1]} li`;\n\n if (list) {\n if (this.selections.placeholder) {\n list.select(this.selections.placeholder);\n this.selections.placeholder.focus();\n }\n this.unselectElements(list);\n this.syncDataset(this.selections.owner, this.selections.droptarget);\n this.updateAttributes($('.listview', this.selections.owner));\n this.updateAttributes($('.listview', this.selections.droptarget));\n if (this.selections.items.length) {\n this.selections.move = $.extend(true, this.selections.move, {\n to: this.getContainer([{ node: this.selections.droptarget.find('li:first') }])\n });\n /**\n * Fires when any bucket has its content changed.\n * @event swapupdate\n * @memberof SwapList\n * @type {object}\n * @property {object} event - The jquery event object\n * @property {array} items - List of items data\n */\n this.element.triggerHandler('swapupdate', [this.selections.move]);\n }\n }\n\n this.selections.items.forEach((elem) => {\n elem.show();\n });\n\n this.clearDropeffects();\n this.clearSelections();\n this.items.removeClass('is-dragging is-dragging-touch');\n\n if (focusIdx >= 0) {\n this.element.find(focusClass).eq(focusIdx).focus();\n }\n },\n\n /**\n * Get items from provided container\n * @private\n * @param {jQuery[]|HTMLElement} container the container being checked\n * @returns {object|array} dataset\n */\n getItems(container) {\n container = this.isjQuery(container) ? container : $(container, this.element);\n return this.getDataList(container);\n },\n\n /**\n * Get the current representative dataset with only the available elements in it.\n * @returns {object|array} dataset\n */\n getAvailable() {\n return this.getDataList(this.settings.availableClass);\n },\n\n /**\n * Get the current representative dataset with only the selected elements in it.\n * @returns {object|array} dataset\n */\n getSelected() {\n return this.getDataList(this.settings.selectedClass);\n },\n\n /**\n * Get the current representative dataset with only the additional elements in it.\n * @returns {object|array} dataset\n */\n getAdditional() {\n return this.getDataList(this.settings.additionalClass);\n },\n\n /**\n * Make selected if dragged element was not selected\n * @private\n * @param {object} list the list to manipulate\n * @param {jQuery[]} target the target to give a \"selected\" state\n * @returns {boolean} whether or not an item was made selected\n */\n draggedMakeSelected(list, target) {\n let isInSelection = false;\n if (!this.selections.isInSelection) {\n // Check if dragged element was selected or not\n if (list.selectedItems) {\n for (let i = 0, l = list.selectedItems.length; i < l; i++) {\n if (target.is(list.selectedItems[i])) {\n isInSelection = true;\n return false;\n }\n }\n }\n if (!isInSelection) {\n list.select(target); // Make selected\n this.selections.isInSelection = true;\n }\n }\n return true;\n },\n\n /**\n * Updates the internal datasets and refresh the ui.\n * @param {object} ds The updated dataset(s) of the form.\n * `{available: [], selected: [], additional: []}`\n * @returns {void}\n */\n updateDataset(ds) {\n const s = this.settings;\n const containers = [\n { type: 'available', dataset: ds.available, class: s.availableClass },\n { type: 'selected', dataset: ds.selected, class: s.selectedClass },\n { type: 'additional', dataset: ds.additional, class: s.additionalClass }\n ];\n\n for (let i = 0, l = containers.length; i < l; i++) {\n const c = containers[i];\n const lv = $(`${c.class} .listview`, this.element);\n const api = lv.data('listview');\n\n if (api) {\n api.deselectItemsBetweenIndexes([0, $('li', lv).length - 1]);\n s[c.type] = c.dataset || [];\n api.loadData(s[c.type]);\n }\n }\n\n this.initDataset();\n this.makeDraggable();\n this.initSelected(s.availableClass);\n this.initSelected(s.additionalClass);\n },\n\n /**\n * Removes event bindings from the swaplist instance.\n * @private\n * @returns {this} component instance\n */\n unbind() {\n this.actionButtons.off('click.swaplist');\n this.containers.off('keydown.swaplist', '.listview');\n this.selectedButtons.off('keydown.swaplist');\n this.element.off('keydown.swaplist', this.tabButtonsStr);\n this.element.off(`${this.dragStart} ${this.dragEnterWhileDragging} ${this.dragOverWhileDragging} ${this.dragEnd}`, this.dragElements);\n\n $('#sl-placeholder-container, #sl-placeholder-touch, #sl-placeholder-touch2, #sl-placeholder').remove();\n return this;\n },\n\n /**\n * Updates this instance of the swaplist component with new settings.\n * @private\n * @param {object} [settings] incoming settings\n * @returns {this} component instance\n */\n updated(settings) {\n if (typeof settings !== 'undefined') {\n this.settings = utils.mergeSettings(this.element, settings, SWAPLIST_DEFAULTS);\n }\n return this\n .unbind()\n .init();\n },\n\n /**\n * Destroys this instance of the swaplist component and removes its link to its base element.\n * @returns {void}\n */\n destroy() {\n this.unbind();\n $.removeData(this.element[0], COMPONENT_NAME);\n },\n\n // Handle Events\n handleEvents() {\n const self = this;\n const settings = self.settings;\n const selections = self.selections;\n\n // TOP BUTTONS =============================================================================\n self.actionButtons.off('click.swaplist').on('click.swaplist', function () {\n const actionButton = $(this);\n const container = actionButton.closest('.card'); // Current list clicked from\n\n let moveTo = null;\n\n if (container.is(settings.availableClass)) { // Move from Available to Selected or Additional\n if (settings.draggable.selected) {\n moveTo = settings.selectedClass;\n } else {\n moveTo = self.isAdditional && settings.draggable.additional ?\n settings.additionalClass : null;\n }\n self.moveElements(settings.availableClass, moveTo);\n } else if (container.is(settings.additionalClass)) {\n // Move from Additional to Selected or Available\n if (settings.draggable.selected) {\n moveTo = settings.selectedClass;\n } else {\n moveTo = settings.draggable.available ? settings.availableClass : null;\n }\n self.moveElements(settings.additionalClass, moveTo);\n } else if (container.is(settings.selectedClass)) {\n // Move from Selected\n if (actionButton.is(settings.selectedBtnLeft)) { // to Available\n self.moveElements(settings.selectedClass, settings.availableClass);\n } else if (actionButton.is(settings.selectedBtnRight)) { // to Additional\n self.moveElements(settings.selectedClass, settings.additionalClass);\n }\n }\n });\n\n // KEYSTROKE ===============================================================================\n // Keydown event to implement selections\n self.containers.on('keydown.swaplist', '.listview', function (e) {\n const container = $(this).closest(self.containers);\n e = e || window.event;\n if (e.keyCode === 77 && self.hasModifier(e)) { // Modifier + M\n if (!container.is(settings.selectedClass) ||\n (container.is(settings.selectedClass) && self.selectedButtons.length === 1)) {\n container.find(self.actionButtons).trigger('click.swaplist');\n } else {\n self.selectedButtons.first().focus();\n }\n e.preventDefault();\n }\n });\n\n // Keydown event to handle selected container\n self.selectedButtons.on('keydown.swaplist', function (e) {\n const btn = $(this);\n let index;\n let move;\n e = e || window.event;\n if (e.keyCode === 13 || e.keyCode === 32) { // Enter or Space\n btn.trigger('click.swaplist');\n e.preventDefault();\n }\n // Left or Right arrow\n if ((e.keyCode === 37 || e.keyCode === 39) && self.selectedButtons.length > 1) {\n index = self.selectedButtons.index(this);\n if (e.keyCode === 37) {\n move = index > 0 ? index - 1 : self.selectedButtons.length - 1;\n } else {\n move = index < self.selectedButtons.length - 1 ? index + 1 : 0;\n }\n self.selectedButtons[move].focus();\n }\n });\n\n self.element.on('keydown.swaplist', self.tabButtonsStr, function (e) {\n const btn = $(this);\n const keyCode = e.keyCode || e.which;\n\n if (keyCode === 9 && !e.shiftKey) { // Tab key\n const card = btn.closest('.card')[0];\n const items = [].slice.call(card.querySelectorAll('li[tabindex]'));\n const itemsLen = items.length;\n let found = false;\n if (itemsLen) {\n items.forEach((item) => {\n const tabindex = parseInt(item.getAttribute('tabindex'), 10);\n if (tabindex !== -1) {\n found = true;\n }\n });\n }\n if (!found) {\n const item = card.querySelector('li');\n if (item) {\n item.setAttribute('tabindex', 0);\n }\n }\n }\n });\n\n // SEARCHFIELD =============================================================================\n self.containers.on('filtered.swaplist', '.listview', () => {\n self.makeDraggable();\n });\n\n // DRAGGABLE ===============================================================================\n self.element\n .on('mousedown.swaplist', self.dragElements, (e) => {\n if (self.handle) {\n const target = $(e.target).closest('li');\n target.attr({ draggable: $(e.target).is('.draggable') });\n }\n e.stopPropagation();\n })\n // Dragstart - initiate dragging\n .on(self.dragStart, self.dragElements, (e) => {\n e.stopImmediatePropagation();\n if (self.handle && !selections.isHandle) {\n e.stopPropagation();\n return;\n }\n let rect;\n let touch;\n let placeholderContainer;\n const target = $(e.target).closest('li');\n const list = $('.listview', target.closest('.card')).data('listview');\n\n // Not in draging area\n if (!list) {\n return;\n }\n\n if (!self.isTouch) {\n self.draggedMakeSelected(list, target);\n }\n\n self.clearSelections(); // Clear selection before fill\n\n selections.owner = target.closest('.card');\n selections.dragged = target;\n selections.draggedIndex = target.index();\n selections.placeholder = target.clone(true);\n selections.placeholder.attr('id', 'sl-placeholder');\n\n self.setSelectionsItems(selections.owner);\n\n selections.items = list.selectedItems;\n\n self.selections.move = {\n items: self.selections.itemsData,\n from: self.getContainer(self.selections.itemsData)\n };\n\n /**\n * Fires before moving an element allowing you to access the draggable item.\n * @event beforeswap\n * @memberof SwapList\n * @type {object}\n * @property {object} event - The jquery event object\n * @property {array} items - List of selected items data\n */\n const result = self.element.triggerHandler('beforeswap', [self.selections.move]);\n if ((typeof result === 'boolean' && !result) || (typeof result === 'string' && result.toLowerCase() === 'false')) {\n selections.dragged = null;\n return;\n }\n\n $(`.${settings.numOfSelectionsClass}`, settings.itemContentTempl).html(selections.items.length);\n $(`.${settings.numOfSelectionsClass}-text`, settings.itemContentTempl).text(Locale.translate('ItemsSelected'));\n self.addDropeffects();\n\n if (!self.isTouch) {\n selections.dragged.addClass('is-dragging');\n e.originalEvent.dataTransfer.setData('text', '');\n\n if (selections.items.length > 1) {\n $(`.${settings.itemContentClass}`, selections.dragged).html(settings.itemContentTempl.html());\n }\n } else {\n rect = target[0].getBoundingClientRect();\n touch = e.originalEvent.changedTouches[0];\n\n // Save offset\n self.offset = {\n x: touch.pageX - rect.left,\n y: touch.pageY - rect.top\n };\n\n for (let i = 0, l = self.containers.length; i < l; i++) {\n self.containers[i].style.zIndex = '1';\n }\n selections.placeholderTouch = selections.dragged.clone(true);\n\n if (selections.items.length > 1 && !$('#sl-placeholder-touch2').length) {\n selections.dragged.clone()\n .addClass('is-dragging-touch').attr('id', 'sl-placeholder-touch2')\n .insertBefore(selections.dragged)\n .hide();\n }\n selections.placeholderTouch.attr('id', 'sl-placeholder-touch').removeClass('is-selected').hide();\n\n // Mobile view with three container(available, selected, additional) prepend to parent\n placeholderContainer = (self.element.is('.one-third') && self.isMaxWidth(766)) ? self.element.parent() : self.element;\n placeholderContainer.prepend('
');\n\n $('#sl-placeholder-container').append(selections.placeholderTouch);\n $('#sl-placeholder-container')[0].style.width = `${selections.owner.width()}px`;\n $('#sl-placeholder-touch')[0].style.width = `${selections.owner.width()}px`;\n\n self.draggTouchElement(e, selections.placeholderTouch);\n }\n e.stopPropagation();\n })\n\n // Dragenter - set that related/droptarget\n .on(self.dragEnterWhileDragging, self.dragElements, (e) => {\n if (!selections.dragged) {\n return;\n }\n self.element.triggerHandler('draggingswap', [selections.move]);\n selections.related = e.target;\n $('ul, li', self.element).removeClass('over');\n $(e.target).closest('ul, li').addClass('over');\n selections.droptarget = $(selections.related).closest('.card');\n $('[aria-grabbed=\"true\"]', self.element).not(selections.dragged).slideUp();\n e.stopPropagation();\n })\n\n // Dragover - allow the drag by preventing default, for touch set related/droptarget\n .on(self.dragOverWhileDragging, self.dragElements, function (e) {\n if (!selections.dragged) {\n return;\n }\n let touch;\n let overItem = $(this);\n const list = $('.listview', selections.dragged.closest('.card')).data('listview');\n\n if (self.isTouch) {\n if (!!self.handle && !selections.isHandle) {\n return;\n }\n\n if (!selections.isInSelection) {\n self.draggedMakeSelected(list, selections.dragged);\n selections.items = list.selectedItems;\n $(`.${settings.numOfSelectionsClass}`, settings.itemContentTempl).html(selections.items.length);\n }\n\n touch = e.originalEvent.touches[0];\n overItem = self.getElementByTouchInList($('ul, li', self.element), touch.pageX, touch.pageY) || overItem;\n\n selections.dragged.addClass('is-dragging');\n selections.placeholderTouch.addClass('is-dragging is-dragging-touch');\n selections.placeholderTouch.show();\n\n $('[aria-grabbed=\"true\"]', self.element)\n .not(selections.dragged)\n .not(selections.placeholderTouch)\n .not('#sl-placeholder-touch2')\n .slideUp();\n\n if (selections.items.length > 1) {\n $(`.${settings.itemContentClass}`, (selections.placeholderTouch.add('#sl-placeholder-touch2')))\n .html(settings.itemContentTempl.html());\n\n $('#sl-placeholder-touch2').show();\n selections.dragged.hide();\n }\n self.draggTouchElement(e, selections.placeholderTouch);\n\n self.element.triggerHandler('draggingswap', [selections.move]);\n selections.related = overItem;\n $('ul, li', this.element).removeClass('over');\n overItem.closest('ul, li').addClass('over');\n selections.droptarget = selections.related.closest('.card');\n }\n e.preventDefault();\n e.stopPropagation();\n })\n\n // Dragend - implement items being validly dropped into targets\n .on(self.dragEnd, self.dragElements, (e) => {\n if (!selections.dragged || !selections.droptarget) {\n return;\n }\n const related = $(selections.related).closest('li');\n const ul = $('ul', selections.droptarget);\n const currentSize = $('li', ul).length;\n const size = selections.items.length + currentSize;\n\n self.unselectElements($('.listview', selections.owner).data('listview'));\n\n $.each(selections.items, (index, val) => {\n val = $(val);\n val.find('mark.highlight').contents().unwrap();\n if (currentSize && !$(selections.related).is('ul')) {\n const isLess = (related.index() < selections.draggedIndex) &&\n (selections.owner.is(selections.droptarget));\n const el = isLess ? val : $(selections.items[(selections.items.length - 1) - index]);\n const posinset = related.index() + (isLess ? index + 1 : index + 2);\n\n val.attr({ 'aria-posinset': posinset, 'aria-setsize': size });\n related[isLess ? 'before' : 'after'](el);\n } else {\n val.attr({ 'aria-posinset': currentSize + index + 1, 'aria-setsize': size });\n ul.append(val);\n }\n val.focus();\n });\n\n if (selections.items.length > 1) {\n $(`.${settings.itemContentClass}`, selections.dragged).html($(`.${settings.itemContentClass}`, selections.placeholder).html());\n if (self.isTouch) {\n selections.dragged.show();\n }\n }\n\n if (self.isTouch) {\n for (let i = 0, l = self.containers.length; i < l; i++) {\n self.containers[i].style.zIndex = '';\n }\n }\n\n self.makeDraggable();\n\n selections.isHandle = null;\n $('[aria-grabbed=\"true\"]', self.element).show();\n self.afterUpdate($('.listview', selections.droptarget).data('listview'));\n e.preventDefault();\n e.stopPropagation();\n });\n } // END: Handle Events ---------------------------------------------------------------------\n\n};\n\nexport { SwapList, COMPONENT_NAME };\n","import { SwapList, COMPONENT_NAME } from './swaplist';\n\n/**\n * jQuery Component Wrapper for SwapList\n * @param {object} [settings] incoming settings\n * @returns {jQuery[]} elements being acted on\n */\n$.fn.swaplist = function (settings) {\n return this.each(function () {\n let instance = $.data(this, COMPONENT_NAME);\n if (instance) {\n instance.updated(settings);\n } else {\n instance = $.data(this, COMPONENT_NAME, new SwapList(this, settings));\n }\n });\n};\n","import { utils } from '../../utils/utils';\n\n// Component Name\nconst COMPONENT_NAME = 'swipe-container';\nconst SWIPE_CONTAINER_DEFAULTS = {\n swipeType: 'reveal'\n};\n\nfunction SwipeAction(element, settings) {\n this.element = $(element);\n this.settings = utils.mergeSettings(this.element[0], settings, SWIPE_CONTAINER_DEFAULTS);\n\n return this.init();\n}\n\nSwipeAction.prototype = {\n init() {\n this.render();\n this.handleEvents();\n },\n\n /**\n * Renders the component\n * @private\n * @returns {void}\n */\n render() {\n this.container = this.element[0].querySelector('.swipe-container');\n this.swipeType = this.settings.swipeType;\n const leftButton = this.element[0].querySelector('.btn-swipe-action-left');\n const rightButton = this.element[0].querySelector('.btn-swipe-action-right');\n\n if (leftButton && this.swipeType === 'reveal') {\n leftButton.setAttribute('tabindex', '-1');\n leftButton.setAttribute('aria-hidden', 'true');\n }\n if (rightButton && this.swipeType === 'reveal') {\n rightButton.setAttribute('tabindex', '-1');\n rightButton.setAttribute('aria-hidden', 'true');\n }\n\n if (leftButton && this.swipeType === 'reveal') {\n this.container.scrollLeft = 85;\n }\n },\n\n /**\n * Sets up component event listeners\n * @private\n * @returns {void}\n */\n handleEvents() {\n let touchstartX = 0;\n let touchendX = 0;\n let lastPercentage = 0;\n\n // Close on click\n if (this.swipeType === 'reveal') {\n this.element.find('.btn-swipe-action-right, .btn-swipe-action-left').on('click.swipe-action', () => {\n this.container.scrollLeft = 85;\n this.element.focus();\n });\n $(this.container).on('scroll.swipe-action', () => {\n this.element.find('.btn-actions')?.data('popupmenu')?.close();\n });\n return;\n }\n\n // For continuous swipe type setup a \"swipe\" event with touch start and end\n this.element.on('touchstart.swipe-action', (e) => {\n touchstartX = e.changedTouches[0].screenX;\n }, { passive: true });\n\n this.element.on('touchend.swipe-action', (e) => {\n touchendX = e.changedTouches[0].screenX;\n let direction = '';\n\n if (touchendX < touchstartX) {\n direction = 'left';\n }\n if (touchendX > touchstartX) {\n direction = 'right';\n }\n if (!direction) {\n return;\n }\n\n this.element.find(`.swipe-action-${direction === 'left' ? 'right' : 'left'} button`).click();\n this.element.find('.btn-actions')?.data('popupmenu')?.close();\n }, { passive: true });\n\n // Treat scroll like swipe as it works on chrome with the magic mouse\n $(this.container).on('scroll.swipe-action', (e) => {\n const eventTarget = e.target;\n const scrollPercentage = 100 * (eventTarget.scrollLeft / (eventTarget.scrollWidth - eventTarget.clientWidth));\n this.element.find('.btn-actions')?.data('popupmenu')?.close();\n\n if (Math.abs(lastPercentage - scrollPercentage) < 1) {\n return;\n }\n lastPercentage = scrollPercentage;\n\n let direction = '';\n if (scrollPercentage === 0) {\n direction = 'right';\n }\n\n if (scrollPercentage > 98) {\n direction = 'left';\n }\n if (!direction) {\n return;\n }\n\n this.element.find(`.swipe-action-${direction === 'left' ? 'right' : 'left'} button`).click();\n });\n },\n\n /**\n * Set the swipe interaction method between continuous and reveal (default)\n * @param {string | null} value The swipe interation type\n */\n set swipeType(value) {\n if (value === 'continuous') {\n this.settings.swipeType = value;\n this.container.classList.add('continuous');\n return;\n }\n\n this.settings.swipeType = 'reveal';\n this.container.classList.remove('continuous');\n },\n\n get swipeType() { return this.settings.swipeType; },\n\n /**\n * Triggers a UI Resync.\n * @param {object} [settings] incoming settings\n * @returns {void}\n */\n updated(settings) {\n if (settings) {\n this.settings = utils.mergeSettings(this.element[0], settings, this.settings);\n }\n this.teardown();\n this.init();\n },\n\n /**\n * @private\n * @returns {void}\n */\n teardown() {\n this.element.find('.btn-swipe-action-right, .btn-swipe-action-left').off('click.swipe-action');\n this.element.off('scroll.swipe-action').off('click.swipe-action');\n this.element.off('touchstart.swipe-action');\n this.element.off('touchend.swipe-action');\n $(this.container).off('scroll.swipe-action');\n },\n\n /**\n * Tears down and removes any added markup and events.\n * @returns {void}\n */\n destroy() {\n this.teardown();\n $.removeData(this.element[0], 'swipeaction');\n },\n};\n\nexport { SwipeAction, COMPONENT_NAME };\n","// eslint-disable-next-line import/named\nimport { SwipeAction, COMPONENT_NAME } from './swipe-action';\n\n/**\n * jQuery component wrapper for the swipe container\n * @param {object} [settings] incoming settings\n * @returns {jQuery[]} elements being acted on\n */\n$.fn.swipeaction = function (settings) {\n return this.each(function () {\n let instance = $.data(this, COMPONENT_NAME);\n if (instance) {\n instance.updated(settings);\n } else {\n instance = $.data(this, COMPONENT_NAME, new SwipeAction(this, settings));\n }\n return instance;\n });\n};\n","import * as debug from '../../utils/debug';\nimport { utils } from '../../utils/utils';\n\n// Component Name\nconst COMPONENT_NAME = 'scrollaction';\n\n// Default ScrollAction Options\nconst SCROLLACTION_DEFAULTS = {\n scrollActionTarget: '.js-scroll-target', // The element to add a class to based on scrolling logic\n classToAdd: 'scrolled-down' // The class added to the target element\n};\n\n/**\n* A component that applies a class based on scroll direction\n* @class ScrollAction\n* @param {string} element The component element.\n* @param {object} [settings] The component settings.\n* @param {string} [scrollActionTarget='.js-scroll-target'] The selector of the element to add the class to.\n* @param {string} [classToAdd ='scrolled-down'] The class name to use when toggling.\n*/\nfunction ScrollAction(element, settings) {\n this.settings = utils.mergeSettings(element, settings, SCROLLACTION_DEFAULTS);\n\n this.element = $(element);\n debug.logTimeStart(COMPONENT_NAME);\n this.init();\n debug.logTimeEnd(COMPONENT_NAME);\n}\n\n// ScrollAction Methods\nScrollAction.prototype = {\n\n init() {\n this.handleEvents();\n },\n\n /**\n * Removes event bindings from the instance.\n * @private\n * @returns {object} The api\n */\n unbind() {\n const s = this.settings;\n this.element.off('scroll.scrollaction');\n if (s) {\n $(s.scrollActionTarget).removeClass(s.classToAdd);\n }\n return this;\n },\n\n /**\n * Resync the UI and Settings.\n * @param {object} settings The settings to apply.\n * @returns {object} The api\n */\n updated(settings) {\n if (typeof settings !== 'undefined') {\n this.settings = utils.mergeSettings(this.element, settings, SCROLLACTION_DEFAULTS);\n }\n return this\n .unbind()\n .init();\n },\n\n /**\n * Destroy this component instance and remove the link from its base element.\n * @returns {void}\n */\n destroy() {\n this.unbind();\n $.removeData(this.element[0], COMPONENT_NAME);\n },\n\n /**\n * Attach Events used by the Control\n * @private\n * @returns {void}\n */\n handleEvents() {\n const s = this.settings;\n this.lastScrollTop = 0;\n\n this.element.on('scroll.scrollaction', () => {\n const scrollTop = this.element.scrollTop();\n\n if (scrollTop > this.lastScrollTop) {\n $(s.scrollActionTarget).addClass(s.classToAdd);\n } else {\n $(s.scrollActionTarget).removeClass(s.classToAdd);\n }\n\n this.lastScrollTop = scrollTop;\n });\n }\n};\n\nexport { ScrollAction, COMPONENT_NAME };\n","import { ScrollAction, COMPONENT_NAME } from './scrollaction';\n\n/**\n * jQuery Component Wrapper for ScrollAction\n * @param {object} [settings] incoming settings\n * @returns {jQuery[]} elements being acted on\n */\n$.fn.scrollaction = function (settings) {\n return this.each(function () {\n let instance = $.data(this, COMPONENT_NAME);\n if (instance) {\n instance.updated(settings);\n } else {\n instance = $.data(this, COMPONENT_NAME, new ScrollAction(this, settings));\n }\n });\n};\n","import { utils } from '../../utils/utils';\nimport { Locale } from '../locale/locale';\n\n// Component Name\nconst COMPONENT_NAME = 'stepchart';\n\n// Default component options\nconst DEFAULT_STEPCHART_OPTIONS = {\n steps: null,\n completed: null,\n inProgress: null,\n iconType: null,\n completedText: null,\n extraText: '',\n completedColor: null,\n allCompletedColor: null,\n inProgressColor: null,\n attributes: null\n};\n\n/**\n * The Step Chart Component is displays visual info on step completion.\n * @class StepChart\n * @constructor\n * @param {jQuery[]|HTMLElement} element The base element\n * @param {object} [settings] incoming settings\n * @param {number} [settings.steps = null] The number of steps to show.\n * @param {number} [settings.completed = null] The number of steps complete (linear).\n * @param {number} [settings.inProgress = null] The number of the in progress step (linear).\n * @param {boolean} [settings.iconType = null] The icon to display fx. 'icon-error', 'icon-success'\n * @param {string} [settings.completedText = null] The completed text or uses a localized 'N of N Steps complete'.\n * You can use {0} and {1} to replace n of n in the string.\n * @param {boolean} [settings.extraText = ''] The additional text to show on the right. Defaults to none. You\n * can use {0} to replace with the steps remaining count and {1} to replace the number of steps.\n * @param {string} [settings.completedColor = null] The color to show completed steps. Defaults to primary color.\n * @param {string} [settings.allCompletedColor = null] The color to steps when all are completed. Defaults to primary color.\n * @param {string} [settings.inProgressColor = null] The color to show in-progress steps. Defaults to ruby02.\n * @param {string|array} [settings.attributes = null] Add extra attributes like id's to the chart elements. For example `attributes: { name: 'id', value: 'my-unique-id' }`\n*/\nfunction StepChart(element, settings) {\n return this.init(element, settings);\n}\n\nStepChart.prototype = {\n\n /**\n * Initialize and render the chart\n * @private\n * @param {jQuery[]|HTMLElement} element The base element\n * @param {object} [settings] incoming settings\n * @returns {this} component instance\n */\n init(element, settings) {\n if (!this.element && element instanceof HTMLElement) {\n this.element = $(element);\n }\n\n if (typeof settings === 'object' || this.settings === undefined) {\n const previousSettings = this.settings || DEFAULT_STEPCHART_OPTIONS;\n this.settings = utils.mergeSettings(this.element[0], settings, previousSettings);\n }\n\n return this.render();\n },\n\n /**\n * Initialize and render the from the options\n * @private\n * @returns {this} component instance\n */\n render() {\n const container = $('
');\n const icon = `\n
\n \n `;\n\n const isEmpty = this.settings.completed === null && this.settings.steps === null;\n if (isEmpty) {\n this.settings.completed = 0;\n this.settings.steps = 1;\n }\n\n if (this.element.attr('data-options')) {\n this.settings = utils.parseSettings(this.element);\n }\n\n if (this.element.children().length > 0) {\n return this;\n }\n\n for (let i = 0; i < this.settings.steps; i++) {\n const step = $('
');\n utils.addAttributes(step, this.settings, this.settings.attributes, `step${i}`);\n\n // Set up ticks\n if (i < this.settings.completed) {\n step.addClass('is-complete');\n\n if (this.settings.completedColor) {\n step.css('background-color', this.settings.completedColor);\n }\n }\n\n if (i === this.settings.inProgress - 1) {\n step.addClass('is-inprogress');\n\n if (this.settings.inProgressColor) {\n step.css('background-color', this.settings.inProgressColor);\n }\n }\n\n container.append(step);\n }\n\n // Set up labels and alerts\n let completedText = this.settings.completedText || Locale.translate('StepsCompleted');\n completedText = completedText.replace('{0}', this.settings.completed);\n completedText = completedText.replace('{1}', this.settings.steps);\n\n if (isEmpty) {\n completedText = Locale ? Locale.translate('NoData') : 'No data available';\n }\n const label = $(`
${completedText} `);\n\n if (this.settings.steps === this.settings.completed) {\n container.addClass('is-complete');\n label.append(icon.replace('{icon-name}', 'icon-success'));\n }\n\n if (this.settings.iconType) {\n label.append(icon.replace('{icon-name}', this.settings.iconType));\n }\n\n if (this.settings.extraText) {\n let extraText = this.settings.extraText;\n extraText = (extraText === '{0} Days Remaining' ? Locale.translate('DaysRemaining') : extraText);\n extraText = (extraText === '{1} Days Overdue' ? Locale.translate('DaysOverdue') : extraText);\n extraText = extraText.replace('{0}', this.settings.steps - this.settings.completed);\n extraText = extraText.replace('{1}', this.settings.completed);\n label.append(`
${extraText} `);\n }\n\n this.element.append(label, container);\n\n // Adjust completed color\n if (this.settings.steps === this.settings.completed && this.settings.allCompletedColor) {\n container.find('.step-chart-step').css('background-color', this.settings.allCompletedColor);\n label.find('.icon').attr('style', `fill: ${this.settings.allCompletedColor}!important`);\n }\n\n // Add automation attributes\n utils.addAttributes(label, this.settings, this.settings.attributes, 'label');\n utils.addAttributes(label.find('.icon'), this.settings, this.settings.attributes, 'icon');\n utils.addAttributes(label.find('.step-chart-label-small'), this.settings, this.settings.attributes, 'label-small');\n\n return this;\n },\n\n /**\n * Handle updated settings and values.\n * @param {object} settings The new settings to use.\n * @returns {object} The api for chaining.\n */\n updated(settings) {\n this.settings = utils.mergeSettings(this.element, settings, this.settings);\n this.element.empty();\n\n return this.render();\n },\n\n /**\n * Tear down and remove.\n * @returns {this} component instance\n */\n teardown() {\n this.element.empty();\n this.settings = null;\n $.removeData(this.element[0], COMPONENT_NAME);\n\n return this;\n },\n\n /**\n * Tear down and remove.\n * @returns {this} component instance\n */\n destroy() {\n this.teardown();\n return this;\n }\n};\n\nexport { StepChart, COMPONENT_NAME };\n","import { StepChart, COMPONENT_NAME } from './stepchart';\n\n/**\n * jQuery Component Wrapper for StepChart\n * @param {object} [settings] incoming settings\n * @returns {jQuery[]} elements being acted on\n */\n$.fn.stepchart = function (settings) {\n return this.each(function () {\n let instance = $.data(this, COMPONENT_NAME);\n if (instance) {\n instance.updated(settings);\n } else {\n instance = $.data(this, COMPONENT_NAME, new StepChart(this, settings));\n instance.destroy = function destroy() {\n this.teardown();\n $.removeData(this.element, COMPONENT_NAME);\n $.removeData(this.element, 'options');\n };\n }\n });\n};\n","import * as debug from '../../utils/debug';\nimport { utils, math } from '../../utils/utils';\nimport { Environment as env } from '../../utils/environment';\nimport { xssUtils } from '../../utils/xss';\nimport { DOM } from '../../utils/dom';\nimport { breakpoints } from '../../utils/breakpoints';\nimport { stringUtils } from '../../utils/string';\nimport { renderLoop, RenderLoopItem } from '../../utils/renderloop';\nimport { Locale } from '../locale/locale';\n\n// jQuery components\nimport '../../utils/lifecycle/lifecycle.jquery';\nimport '../icons/icons.jquery';\nimport '../popupmenu/popupmenu.jquery';\nimport '../tooltip/tooltip.jquery';\n\n// Component Name\nconst COMPONENT_NAME = 'tabs';\n\n// Types of possible Tab containers\nconst tabContainerTypes = ['horizontal', 'vertical', 'module-tabs', 'header-tabs'];\n\n/**\n * @class Tabs\n * @constructor\n * @param {HTMLElement|jQuery[]} element the base element for this component\n * @param {object} settings incoming settings\n *\n * @param {boolean} [settings.addTabButton=false] If set to true, creates a button at the end\n * of the tab list that can be used to add an empty tab and panel\n * @param {function} [settings.addTabButtonCallback=null] if defined as a function, will\n * be used in-place of the default Tab Adding method\n * @param {boolean} [settings.addTabButtonTooltip=false] If set to true, adds tooltip on add tab button\n * @param {boolean} [settings.appMenuTrigger=false] If set to true, will force an App Menu\n * trigger to be present on Non-Vertical Tabs implementatations.\n * @param {string} [settings.appMenuTriggerText] If defined, replaces the default \"Menu\" text used\n * in the app menu trigger.\n * @param {boolean} [settings.appMenuTriggerTextAudible = false] if true, causes an app menu trigger's\n * text content to be visually hidden (but still exists for accessiblity purposes)\n * @param {object} [settings.ajaxOptions] if defined, will be used by any internal\n * Tabs AJAX calls as the desired request settings.\n * @param {function} [settings.beforeActivate] If defined as a function, fires\n * this before a tab is activated to allow a possible \"veto\" of the tab swap (SOHO-5250).\n * @param {string|jQuery} [settings.containerElement=null] Defines a separate element\n * to be used for containing the tab panels. Defaults to a `.tab-panel-container`\n * element that is created if it doesn't already exist.\n * @param {boolean} [settings.changeTabOnHashChange=false] If true, will change the selected\n * tab on invocation based on the URL that exists after the hash.\n * @param {function} [settings.hashChangeCallback=null] If defined as a function,\n * provides an external method for adjusting the current page hash used by these tabs.\n * @param {boolean} [settings.lazyLoad=true] if true, when using full URLs in tab HREFs,\n * or when using Ajax calls, tabs will be loaded as needed instead of the markup\n * all being established at once.\n * @param {boolean} [settings.moduleTabsTooltips=false] if true, will display a tooltip on\n * Module Tabs with cut-off text content.\n * @param {boolean} [settings.multiTabsTooltips=false] if true, will display a tooltip on\n * Multi Tabs with cut-off text content.\n * @param {string} [settings.countsPosition] If defined, it will display the position of counts.\n * @param {function} [settings.source=null] If defined, will serve as a way of pulling\n * in external content to fill tabs.\n * @param {object} [settings.sourceArguments={}] If a source method is defined, this\n * flexible object can be passed into the source method, and augmented with\n * parameters specific to the implementation.\n * @param {boolean} [settings.tabCounts=false] If true, Displays a modifiable count above each tab.\n * @param {boolean} [settings.verticalResponsive=false] If Vertical Tabs & true, will automatically\n * switch to Horizontal Tabs on smaller breakpoints.\n * @param {Array} [settings.attributes=null] If set, adds additional attributes to some tabs and elements.\n * @param {boolean} [settings.sortable=false] If true, tabs can be sortable by drag and drop.\n */\nconst TABS_DEFAULTS = {\n addTabButton: false,\n addTabButtonCallback: null,\n addTabButtonTooltip: false,\n appMenuTrigger: false,\n appMenuTriggerText: undefined,\n appMenuTriggerTextAudible: false,\n ajaxOptions: null,\n beforeActivate: undefined,\n containerElement: null,\n changeTabOnHashChange: false,\n hashChangeCallback: null,\n lazyLoad: true,\n moduleTabsTooltips: false,\n multiTabsTooltips: false,\n countsPosition: undefined,\n source: null,\n sourceArguments: {},\n tabCounts: false,\n verticalResponsive: false,\n attributes: null,\n sortable: false\n};\n\nfunction Tabs(element, settings) {\n this.element = $(element);\n this.settings = utils.mergeSettings(this.element[0], settings, TABS_DEFAULTS);\n debug.logTimeStart(COMPONENT_NAME);\n this.init();\n debug.logTimeEnd(COMPONENT_NAME);\n}\n\nTabs.prototype = {\n\n /**\n * @private\n * @returns {this} component instance\n */\n init() {\n return this\n .setup()\n .build()\n .setupEvents();\n },\n\n /**\n * @private\n * @returns {this} component instance\n */\n setup() {\n // Used by the $(body).resize event to correctly identify the tabs container element\n this.tabsIndex = $('.tab-container').index(this.element);\n this.settings.multiTabsTooltips = this.element.closest('.multitabs-container').length > 0;\n return this;\n },\n\n /**\n * @private\n * @returns {this} component instance\n */\n build() {\n const self = this;\n let tabPanelContainer;\n let moveTabPanelContainer = false;\n const localeExemptions = ['en-US', 'de-DE', 'ja-JP', 'zh-CN', 'zh-Hans', 'zh-TW', 'zh-Hant'];\n\n // Check for a tab panel container immediately after the `.tab-container`\n // element (default as of IDS Enterprise 4.3.0)\n tabPanelContainer = this.element.next('.tab-panel-container');\n\n // Auto-detect and move existing tab-panel containers in key areas, if applicable.\n // Check inside the container first\n if (!tabPanelContainer.length) {\n tabPanelContainer = this.element.children('.tab-panel-container');\n\n if (!this.isVerticalTabs()) {\n moveTabPanelContainer = true;\n }\n }\n\n // Special case for Header Tabs, find the page container and use that as the container\n const bodyPageContainer = $('body > .page-container, .application-menu + .page-container');\n if (this.element.closest('.header').length > 0 && bodyPageContainer.length) {\n tabPanelContainer = bodyPageContainer;\n }\n\n // Special case for Module Tabs, where it's possible for layout reasons for there to be\n // an application menu element adjacent between the Tab list and the Tab Panel container\n if (this.element.next('.application-menu').length) {\n tabPanelContainer = this.element.next().next('.page-container');\n moveTabPanelContainer = false;\n }\n\n // Defining `this.settings.containerElement` ultimately overrides any internal\n // changes to the tab panel container.\n if (this.settings.containerElement && $(this.settings.containerElement).length) {\n tabPanelContainer = $(this.settings.containerElement);\n moveTabPanelContainer = false;\n }\n\n // If a `.tab-panel-container` still doesn't exist, create one.\n if (!tabPanelContainer || !tabPanelContainer.length) {\n tabPanelContainer = $('
');\n moveTabPanelContainer = true;\n }\n\n if (!tabPanelContainer[0].classList.contains('tab-panel-container')) {\n tabPanelContainer[0].classList.add('tab-panel-container');\n }\n if (moveTabPanelContainer) {\n tabPanelContainer.insertAfter(this.element);\n }\n\n this.container = tabPanelContainer;\n\n // Detect the existence of a \"tab-list-container\" element, if applicable.\n // Tab List containers are optional for all tab container types, but mandatory for\n // Composite Form tabs.\n let tablistContainer = this.element.children('.tab-list-container');\n if (!tablistContainer.length && this.isScrollableTabs()) {\n tablistContainer = $('
').prependTo(this.element);\n }\n if (tablistContainer.length) {\n this.tablistContainer = tablistContainer;\n }\n\n // Add a default tabs class of \"horizontal\" if it doesn't already exist\n let noClass = true;\n const closestHeader = this.element.closest('.header');\n tabContainerTypes.forEach((val, i) => {\n if (this.element.hasClass(tabContainerTypes[i])) {\n noClass = false;\n }\n });\n if (noClass) {\n if (closestHeader.length) {\n self.element.addClass('header-tabs');\n } else {\n self.element.addClass('horizontal');\n }\n }\n\n // Build Tab Counts\n if (self.settings.tabCounts) {\n self.element.addClass('has-counts');\n }\n\n // Attach Tablist role and class to the tab headers container\n this.tablist = this.element.children('.tab-list');\n if (!this.tablist.length) {\n // If we have a `.tab-list-container` element, check that before creating markup\n if (this.tablistContainer) {\n this.tablist = this.tablistContainer.children('.tab-list');\n }\n\n // Create and append the `.tab-list` if it still doesn't exist.\n if (!this.tablist.length) {\n this.tablist = $('
');\n if (this.tablistContainer) {\n this.tablist.appendTo(this.tablistContainer);\n } else {\n this.tablist.appendTo(this.element);\n }\n }\n }\n\n // Double-check that the `.tab-list-container` actually contains the `.tab-list`.\n // Move it if necessary.\n if (this.tablistContainer) {\n if (!this.tablist.parent().is(this.tablistContainer)) {\n this.tablistContainer.append(this.tablist);\n }\n\n this.tablistContainer.on('mousewheel.tabs', function (e) {\n if (e.deltaY) {\n this.scrollLeft += e.deltaY;\n }\n });\n }\n\n self.tablist\n .attr({\n class: 'tab-list',\n role: 'tablist'\n });\n\n // Conditionally Change layout classes if veritcal tabs is in responsive\n // mode, and breakpoints match.\n this.checkResponsive(false);\n\n // Handle Focus State, Animated Bar, More Button, Add Tabs Button, and\n // App Menu Button.\n this.renderHelperMarkup();\n\n // for each item in the tabsList...\n self.anchors = self.tablist.children('li:not(.separator)').children('a');\n self.anchors.each(function prepareAnchor() {\n const a = $(this);\n const attrPart = a[0].textContent.toLowerCase().trim().split(' ').join('-');\n\n a.attr({ role: 'tab', 'aria-selected': 'false', tabindex: '-1' })\n .parent().attr('role', 'tab').addClass('tab');\n\n let dismissibleIcon;\n if (a.parent().hasClass('dismissible') && !a.parent().children('.icon').length) {\n dismissibleIcon = $.createIconElement({ icon: 'close', classes: 'icon close' });\n dismissibleIcon.insertAfter(a);\n }\n\n // If attributes are defined, add them to various things\n if (self.settings.attributes) {\n utils.addAttributes(a, self, self.settings.attributes, `${attrPart}-a`);\n if (dismissibleIcon) {\n utils.addAttributes(dismissibleIcon, self, self.settings.attributes, `${attrPart}-close-btn`);\n }\n }\n\n // Find and configure dropdown tabs\n const dd = a.nextAll('ul').first();\n if (dd.length > 0) {\n dd.addClass('dropdown-tab');\n const li = a.parent();\n\n li.addClass('has-popupmenu').popupmenu({\n menu: dd,\n trigger: 'click',\n attachToBody: true,\n attributes: self.settings.attributes\n });\n\n a.removeAttr('role').removeAttr('aria-expanded').removeAttr('aria-selected');\n\n if (!a.parent().children('.icon.icon-more').length) {\n $.createIconElement({ classes: 'icon-more', icon: 'dropdown' }).insertAfter(a);\n }\n }\n\n if (self.settings.tabCounts && $(this).find('.count').length === 0) {\n if ((localeExemptions.includes(Locale.currentLocale.name) && self.settings.countsPosition !== 'bottom') || self.settings.countsPosition === 'top') {\n $(this).prepend('
0 ');\n } else if (self.settings.countsPosition === 'bottom') {\n $(this).append('
0 ');\n } else {\n $(this).append('
0 ');\n }\n }\n\n // Make it possible for Module Tabs to display a tooltip containing their contents\n // if the contents are cut off by ellipsis.\n if (self.settings.moduleTabsTooltips || self.settings.multiTabsTooltips) {\n a.on('beforeshow.toolbar', () => a.data('cutoffTitle') === 'yes').tooltip({\n content: `${a.text().trim()}`\n });\n }\n });\n\n // Build/manage tab panels\n function associateAnchorWithPanel() {\n const a = $(this);\n const li = a.parent();\n const popup = li.data('popupmenu');\n let panel;\n\n // Associated the current one\n let href = a.attr('href');\n\n if (href.substr(0, 1) !== '#') {\n // is an outbound Link\n return;\n }\n\n if (href.substr(0, 2) === '#/') {\n // uses angular LocationStrategy\n // Just to find the panel but these are handled by angular\n href = href.replace('#/', '#');\n }\n\n if (href !== undefined && href !== '#') {\n href = href.replace(/\\//g, '\\\\/');\n panel = $(href);\n\n if (li.is(':not(.has-popupmenu)') && !panel.length) {\n return;\n }\n\n if (self.settings.attributes) {\n const attrPart = a[0].textContent.toLowerCase().trim().split(' ').join('-');\n utils.addAttributes(panel, self, self.settings.attributes, `${attrPart}-panel`);\n }\n\n a.data('panel-link', panel);\n panel.data('tab-link', a);\n self.panels = self.panels.add(panel);\n }\n\n // If dropdown tab, add the contents of the dropdown\n // NOTE: popupmenu items that represent dropdown tabs shouldn't have children,\n // so they aren't accounted for here.\n if (popup) {\n popup.menu.children('li').each(function () {\n const popupLi = $(this);\n const popupA = popupLi.children('a');\n const popupHref = popupA.attr('href');\n const popupPanel = $(popupHref);\n\n popupA.data('panel-link', popupPanel);\n popupPanel.data('tab-link', popupA);\n\n self.panels = self.panels.add(popupPanel);\n self.anchors = self.anchors.add(popupA);\n\n if (!popupLi.hasClass('dismissible')) {\n return;\n }\n\n let popupIcon = popupLi.children('.icon');\n if (!popupIcon.length) {\n popupIcon = $.createIconElement({ icon: 'close', classes: 'icon close' });\n }\n popupIcon.detach().appendTo(popupA);\n }).on('click.popupmenu', '.icon', function iconClickHandler(e) {\n const popupIcon = $(this);\n const popupLi = popupIcon.closest('li');\n\n if (popupLi.is('.dismissible') && popupIcon.is('.icon')) {\n e.preventDefault();\n e.stopPropagation();\n self.closeDismissibleTab(popupLi.children('a').attr('href'));\n }\n });\n }\n }\n\n self.panels = $();\n self.anchors.each(associateAnchorWithPanel);\n self.panels\n .addClass('tab-panel')\n .attr({ role: 'tabpanel' })\n .find('h3:first').attr('tabindex', '0');\n\n self.panels.each(function () {\n const panel = $(this);\n if (!panel.parent().is(self.container)) {\n self.container.append(panel);\n }\n });\n\n const excludes = ':not(.separator):not(.is-disabled):not(.is-hidden)';\n const tabs = this.tablist.children(`li${excludes}`);\n let selected = this.tablist.children(`li.is-selected${excludes}`);\n let selectedAnchor = selected.children('a');\n let hash;\n let matchingTabs;\n\n // Setup a hash for nested tab controls\n self.nestedTabControls = self.panels.find('.tab-container');\n\n if (tabs.length) {\n // If the hashChange setting is on, change the selected tab to the one referenced by the hash\n if (this.settings.changeTabOnHashChange) {\n hash = window.location.hash;\n if (hash && hash.length) {\n matchingTabs = tabs.find(`a[href=\"${hash}\"]`);\n if (matchingTabs.length) {\n selected = matchingTabs.first().parent();\n selectedAnchor = selected.children('a');\n }\n }\n }\n\n // If there is no selected tab, try to find the first available tab (if there are any present)\n if (!selected.length) {\n selected = tabs.not('.add-tab-button, .application-menu-trigger').first();\n selectedAnchor = selected.children('a');\n }\n\n // If there are tabs present, activate the first one\n if (selected.length) {\n this.activate(selectedAnchor.attr('href'), selectedAnchor);\n }\n }\n\n if (this.isModuleTabs() && this.element.children('.toolbar').length) {\n this.element.addClass('has-toolbar');\n }\n\n if (this.isModuleTabs() && tabs.filter('.application-menu-trigger').length > 0) {\n tabs.find('a[tabindex=\"0\"]').attr('tabindex', '-1');\n tabs.filter('.application-menu-trigger').find('a').attr('tabindex', '0');\n }\n\n this.setOverflow();\n\n this.positionFocusState(selectedAnchor);\n\n // Setup Edge Fades\n if (this.tablistContainer) {\n this.tablistContainer.on('scroll.tabs', () => {\n this.renderEdgeFading();\n });\n this.renderEdgeFading();\n }\n\n // Create sortable tabs\n this.createSortable();\n\n // Setup a resize observer on both the tab panel container and the tab list container (if applicable)\n // to auto-refresh the state of the Tabs on resize. ResizeObserver doesn't work in IE.\n if (typeof ResizeObserver !== 'undefined') {\n this.ro = new ResizeObserver(() => {\n $('body').triggerHandler('resize');\n });\n\n this.ro.observe(this.element[0]);\n if (this.containerElement) {\n this.ro.observe(this.containerElement[0]);\n }\n }\n\n // Re-renders focus state of tab indicator after rendering all of the elements\n setTimeout(() => {\n this.positionFocusState();\n }, 100);\n\n return this;\n },\n\n /**\n * Create tabs to be sortable by drag and drop.\n * @private\n * @returns {void}\n */\n createSortable() {\n const self = this;\n const s = this.settings;\n if (!s.sortable) {\n return;\n }\n // Sortable with touch devices, only support to module and vertical tabs.\n if (env.features.touch && !(this.isModuleTabs() || this.isVerticalTabs())) {\n return;\n }\n\n const tablist = this.tablist ? this.tablist[0] : null;\n const tabContainers = $('.tab-panel-container');\n if (tablist) {\n const excludeSel = '.is-disabled, .separator, .application-menu-trigger';\n const excludeEl = [].slice.call(tablist.querySelectorAll(excludeSel));\n excludeEl.forEach(el => el.setAttribute('data-arrange-exclude', 'true'));\n tablist.setAttribute('data-options', '{\"placeholderCssClass\": \"tab arrange-placeholder\", \"useItemDimensions\": \"true\"}');\n\n // Set arrange\n tablist.classList.add('arrange');\n let arrangeApi = this.tablist.data('arrange');\n if (!arrangeApi) {\n arrangeApi = this.tablist.arrange().data('arrange');\n }\n\n const className = 'has-placeholder';\n let tabContainer = null;\n if (!this.isModuleTabs() && !this.isVerticalTabs() && !this.isHeaderTabs()) {\n this.tablist\n .on('beforearrange.tabs', function () {\n tabContainer = $(this).closest('.tab-container')[0];\n })\n .on('draggingarrange.tabs', () => {\n tabContainer?.classList.add(className);\n });\n }\n\n this.tablist.on('dragover.tabs', (e) => {\n e.preventDefault();\n });\n\n tabContainers.on('dragover.tabpanel', (e) => {\n e.preventDefault();\n });\n\n this.tablist.on('drag.tabs', (event) => {\n if ($('.multitabs-section.is-hidden').length) {\n const dragElement = $(event.target);\n const parentElement = dragElement.parents('.multitabs-section');\n\n if (!parentElement.hasClass('alternate')) {\n parentElement.find('.overlay-right').addClass('has-overlay');\n } else {\n parentElement.find('.overlay-left').addClass('has-overlay');\n }\n }\n });\n\n this.tablist.on('dragend.tabs', (event) => {\n const dragElement = $(event.target);\n const targetElement = $(document.elementFromPoint(event.pageX, event.pageY));\n const parentElement = dragElement.parents('.multitabs-section');\n\n parentElement.find('.overlay-left').removeClass('has-overlay');\n parentElement.find('.overlay-right').removeClass('has-overlay');\n\n let targetTabsetName = targetElement.parents('.module-tabs');\n if (dragElement.get(0) !== targetElement.get(0)) {\n if (parentElement[0] === targetElement.parents('.multitabs-section')[0]) {\n $('.multitabs-section').each((index, item) => {\n if (parentElement[0] !== item && $(item).hasClass('is-hidden')) {\n targetTabsetName = $(item).children('.module-tabs');\n }\n });\n }\n }\n\n const selectedTab = dragElement.attr('href').replace('#', '');\n const api = targetTabsetName.data('tabs');\n\n if (api === undefined) {\n return;\n }\n\n const tab = api.getTab(null, dragElement);\n\n if (self.element.parent()[0] === api.element.parent()[0]) {\n return;\n }\n\n const tabMarkup = tab.clone();\n const panelMarkup = self.getPanel(selectedTab).children();\n\n self.remove(selectedTab);\n api.add(selectedTab, {\n name: tabMarkup.children('a').text().trim(),\n content: panelMarkup,\n doActivate: true\n });\n\n if (self.element.children('.tab-list').children().length < 1) {\n self.element.parent().addClass('is-hidden');\n }\n\n if (api.element.children('.tab-list').children().length > 0) {\n api.element.parent().removeClass('is-hidden');\n }\n });\n\n this.tablist.on('arrangeupdate.tabs', () => {\n tabContainer?.classList.remove(className);\n });\n\n this.element.on('aftertabadded.tabs', () => {\n arrangeApi?.updated();\n });\n }\n },\n\n /**\n * Adds/removes helper buttons and accessibility-centric markup, based on Tabs' configuration\n * Designed to be run at any point in the Tabs lifecycle.\n * @private\n * @returns {this} component instance\n */\n renderHelperMarkup() {\n let auxilaryButtonLocation = this.tablistContainer || this.tablist;\n if (this.isModuleTabs()) {\n auxilaryButtonLocation = this.tablist;\n }\n\n this.focusState = this.element.find('.tab-focus-indicator');\n if (!this.focusState.length) {\n this.focusState = $('
').insertBefore(this.tablist);\n }\n\n // Add the markup for the \"More\" button if it doesn't exist.\n if (!this.moreButton) {\n this.moreButton = $();\n }\n\n if (!this.isVerticalTabs()) {\n if (!this.moreButton.length) {\n this.moreButton = auxilaryButtonLocation.next('.tab-more');\n }\n // If we still don't have a More Button, create one\n if (!this.moreButton.length) {\n this.moreButton = $('
').attr({ class: 'tab-more' });\n this.moreButton.append($('
').text(Locale.translate('More')));\n this.moreButton.append($.createIconElement({ classes: 'icon-more', icon: 'dropdown' }));\n }\n\n // Append in the right place based on configuration\n auxilaryButtonLocation.after(this.moreButton);\n } else if (this.moreButton.length) {\n this.moreButton.off().removeData().remove();\n this.moreButton = $();\n }\n\n // Add extra attributes to the more button, if applicable\n if (this.moreButton?.length && this.settings.attributes) {\n utils.addAttributes(this.moreButton, this, this.settings.attributes, 'btn-more');\n }\n\n // Add the application menu Module Tab, if applicable\n let appMenuTrigger = this.tablist.find('.application-menu-trigger');\n if (this.settings.appMenuTrigger === true) {\n // Backwards Compatibility for the original Application Menu codepath.\n if (this.isModuleTabs()) {\n if (!appMenuTrigger.length) {\n const audibleClass = this.settings.appMenuTriggerTextAudible ? ' class=\"audible\"' : '';\n appMenuTrigger = $(`\n \n \n \n \n ${this.settings.appMenuTriggerText || Locale.translate('AppMenuTriggerText')} \n \n \n `);\n this.tablist.prepend(appMenuTrigger);\n }\n } else if (this.isVerticalTabs() && appMenuTrigger.length) {\n appMenuTrigger.off().removeData().remove();\n }\n } else if (appMenuTrigger.length) {\n if (this.isVerticalTabs()) {\n appMenuTrigger.off().removeData().remove();\n } else {\n this.tablist.prepend(appMenuTrigger);\n }\n }\n\n if (appMenuTrigger.length) {\n // Add extra attributes to the App Menu Trigger button, if applicable\n if (this.settings.attributes) {\n utils.addAttributes(appMenuTrigger, this, this.settings.attributes, 'appmenu-trigger-btn');\n }\n\n // Add it to the App Menu's list of triggers to adjust on open/close\n $('#application-menu').data('applicationmenu')?.modifyTriggers([appMenuTrigger.children('a')], null, true);\n }\n\n // Add Tab Button\n if (this.settings.addTabButton) {\n if (!this.addTabButton || !this.addTabButton.length) {\n this.addTabButton = $(`\n
\n + \n ${Locale.translate('AddNewTab')} \n
\n `);\n this.addTabButton.insertAfter(this.moreButton);\n this.element.addClass('has-add-button');\n }\n } else if (this.addTabButton && this.addTabButton.length) {\n this.addTabButton.off().removeData().remove();\n this.addTabButton = undefined;\n this.element.removeClass('has-add-button');\n }\n\n // Add extra attributes to the add button, if applicable\n if (this.addTabButton?.length && this.settings.attributes) {\n utils.addAttributes(this.addTabButton, this, this.settings.attributes, 'btn-add');\n }\n\n // Find a More Actions button, if applicable\n const moreActionsButton = this.element.find('.more-actions-button .btn-actions');\n if (moreActionsButton.length) {\n this.moreActionsBtn = moreActionsButton;\n }\n\n if (this.settings.addTabButtonTooltip) {\n this.addTabButton.tooltip({\n content: Locale.translate('AddNewTab')\n });\n }\n\n return this;\n },\n\n /**\n * Establishes the bound event listeners on all tabs elements\n * @private\n * @returns {this} component instance\n */\n setupEvents() {\n const self = this;\n\n // Clicking the 'a' triggers the click on the 'li'\n function routeAnchorClick(e) {\n const a = $(e.currentTarget);\n\n if (this.wasTapped === true) {\n this.wasTapped = false;\n return;\n }\n\n if (e.type === 'touchend') {\n this.wasTapped = true;\n }\n\n if (a.attr('href').substr(0, 1) !== '#') {\n // is an outbound Link\n return;\n }\n e.preventDefault();\n }\n\n // Some tabs have icons that can be clicked and manipulated\n function handleIconClick(e) {\n const elem = $(this);\n if (elem.is('[disabled]') || elem.parent().hasClass('is-disabled')) {\n return;\n }\n\n const li = $(elem).parent();\n\n if (li.hasClass('dismissible')) {\n e.preventDefault();\n e.stopPropagation();\n self.closeDismissibleTab(li.children('a').attr('href'));\n }\n }\n\n function handleTabBlur() {\n $(this).parent().removeClass('is-focused');\n }\n\n // Any events bound to individual tabs (li) and their anchors (a) are bound\n // to the tablist element so that tabs can be added/removed/hidden/shown without\n // needing to change event bindings.\n this.tablist\n .on('mousedown.tabs', '> li', function (e) {\n self.handleAddFocusData(e, $(this));\n\n if ($(e.target).hasClass('close') && $(e.target).parent().hasClass('has-popupmenu')) {\n const menu = $(this).data('popupmenu').menu;\n const hrefs = [];\n $.each(menu[0].children, (i, li) => {\n hrefs.push(li.children[0].href);\n });\n self.closeDismissibleTabs(hrefs);\n }\n\n // let right click pass through\n if (e.which !== 3 && !$(e.target).hasClass('close')) {\n return self.handleTabClick(e, $(this));\n }\n return false;\n })\n .on('click.tabs', 'a', routeAnchorClick)\n .on('click.tabs', '.icon', handleIconClick)\n .on('focus.tabs', 'a', function (e) {\n return self.handleTabFocus(e, $(this));\n })\n .on('blur.tabs', 'a', handleTabBlur)\n .on('keydown.tabs', 'a', e => this.handleTabKeyDown(e));\n\n // Setup events on Dropdown Tabs\n function dropdownTabEvents(i, tab) {\n const li = $(tab);\n const a = li.children('a');\n const menu = li.data('popupmenu').menu;\n\n // Alt+Del or Alt+Backspace closes a dropdown tab item\n function closeDropdownMenuItem(e) {\n if (!e.altKey || !li.is('.dismissible')) {\n return;\n }\n\n self.closeDismissibleTab(a.attr('href'));\n }\n\n menu.on('keydown.popupmenu', 'a', (e) => {\n switch (e.which) {\n case 27: // escape\n li.addClass('is-selected');\n a.focus();\n break;\n case 8: // backspace (delete on Mac)\n closeDropdownMenuItem(e);\n break;\n case 46: // The actual delete key\n closeDropdownMenuItem(e);\n break;\n default:\n break;\n }\n });\n\n li.on('selected.tabs', function (e, anchor) {\n const popupLi = $(this);\n const href = $(anchor).attr('href');\n\n if (!self.activate(href, $(anchor))) {\n return false;\n }\n\n self.positionFocusState(a);\n\n a.focus();\n self.scrollTabList(popupLi);\n\n popupLi.addClass('is-selected');\n return false;\n });\n }\n\n const ddTabs = self.tablist.find('li').filter('.has-popupmenu');\n ddTabs.each(dropdownTabEvents);\n\n function dismissibleTabEvents(i, tab) {\n const li = $(tab);\n const a = li.children('a');\n\n a.on('keydown.tabs', (e) => {\n self.handleDismissibleTabKeydown(e);\n });\n }\n\n const dismissible = self.tablist.find('li').filter('.dismissible');\n dismissible.each(dismissibleTabEvents);\n\n this.setupHelperMarkupEvents();\n\n this.panels.on('keydown.tabs', (e) => {\n self.handlePanelKeydown(e);\n });\n\n // Check whether or not all of the tabs + more button are de-focused.\n // If true, the focus-state and animated bar need to revert positions\n // back to the currently selected tab.\n this.element.on('focusout.tabs', () => {\n const noFocusedTabs = !$.contains(self.element[0], document.activeElement);\n const noPopupMenusOpen = self.tablist.children('.has-popupmenu.is-open').length === 0;\n\n if (noFocusedTabs && noPopupMenusOpen && !self.moreButton.is('.is-selected, .popup-is-open')) {\n self.hideFocusState();\n }\n }).on('updated.tabs', (e, settings) => {\n self.updated(settings);\n }).on('activated.tabs', (e) => {\n // Stop propagation of the activate event from going higher up into the DOM tree\n e.stopPropagation();\n }).on('add.tabs', (e, newTabId, newTabOptions, newTabIndex) => {\n self.add(newTabId, newTabOptions, newTabIndex);\n })\n .on('remove.tabs', (e, tabId) => {\n self.remove(tabId);\n });\n\n // Check to see if we need to add/remove the more button on resize\n $('body').on(`resize.tabs${this.tabsIndex}`, () => {\n self.handleResize();\n });\n self.handleResize(true);\n\n return this;\n },\n\n /**\n * Adds events associated with elements that are re-renderable during the Tabs lifecycle\n * @private\n */\n setupHelperMarkupEvents() {\n const self = this;\n\n // Setup the \"more\" function\n this.moreButton\n .on('click.tabs', (e) => {\n self.handleMoreButtonClick(e);\n })\n .on('keydown.tabs', (e) => {\n self.handleMoreButtonKeydown(e);\n })\n .on('focus.tabs', (e) => {\n self.handleMoreButtonFocus(e);\n })\n .on('mousedown.tabs', function (e) {\n self.handleAddFocusData(e, $(this));\n });\n\n if (this.settings.addTabButton) {\n this.addTabButton\n .on('click.tabs', () => {\n self.handleAddButton();\n })\n .on('keydown.tabs', (e) => {\n self.handleAddButtonKeydown(e);\n })\n .on('focus.tabs', (e) => {\n self.handleAddButtonFocus(e);\n });\n }\n\n if (this.moreActionsBtn?.length) {\n this.moreActionsBtn\n .on('keydown.tabs', (e) => {\n self.handleMoreActionsButtonKeydown(e);\n });\n }\n },\n\n /**\n * Removes events associated with elements that are re-renderable during the Tabs lifecycle\n * @private\n * @returns {this} component instance\n */\n removeHelperMarkupEvents() {\n if (this.moreButton && this.moreButton.length) {\n this.moreButton\n .off('click.tabs keydown.tabs focus.tabs mousedown.tabs');\n }\n\n if (this.addTabButton && this.addTabButton.length) {\n this.addTabButton\n .off('click.tabs keydown.tabs focus.tabs');\n }\n\n return this;\n },\n\n /**\n * Setup a mousedown event on tabs to determine in the focus handler whether\n * or a not a keystroked cause a change in focus, or a click. Keystroke focus\n * changes cause different visual situations\n * @private\n * @param {$.Event} e incoming focus event\n * @param {jQuery[]} elem element\n * @returns {undefined}\n */\n handleAddFocusData(e, elem) {\n let tab = elem;\n if (tab.is('.is-disabled')) {\n e.preventDefault();\n return false;\n }\n\n if (!tab.is(this.moreButton)) {\n tab = tab.children('a');\n }\n\n this.hideFocusState();\n tab.data('focused-by-click', true);\n return true;\n },\n\n /**\n * Handler for Tab Click\n * @private\n * @param {jQuery.Event} e incoming click event\n * @param {jQuery[]} li list item representing the clicked tab\n * @returns {boolean|undefined} ? // TODO: why?\n */\n handleTabClick(e, li) {\n if (this.element.is('.is-disabled') || (li && (li.is('.is-disabled') || li.is('.separator')))) {\n e.stopPropagation();\n e.preventDefault();\n return false;\n }\n\n const appMenuResult = this.handleAppMenuTabKeydown(e);\n if (!appMenuResult) {\n return true;\n }\n\n let a = li.children('a');\n a.data('focused-by-click', true);\n\n if (this.popupmenu && this.popupmenu.element.hasClass('is-open')) {\n this.popupmenu.close();\n }\n\n // Don't activate a dropdown tab. Clicking triggers the Popupmenu Control attached.\n if (li.is('.has-popupmenu')) {\n this.positionFocusState(a);\n return true;\n }\n\n let href = a.attr('href');\n\n if (li.is('.add-tab-button')) {\n a = this.handleAddButton();\n li = a.parent();\n href = a.attr('href');\n this.element.trigger('tab-added', [a]);\n }\n\n // close tab on middle click\n if (e.which === 2) {\n if (li.is('.dismissible') && $(e.target).is('.close')) {\n this.closeDismissibleTab(href);\n }\n e.preventDefault();\n return true;\n }\n\n if (!this.activate(href, a)) {\n return true;\n }\n this.changeHash(href);\n\n this.focusState?.removeClass('is-visible');\n\n a.focus();\n\n if (this.isScrollableTabs()) {\n this.scrollTabList(li);\n }\n\n // Hide these states\n this.positionFocusState(a);\n\n if (this.settings.lazyLoad === true && this.isURL(href)) {\n return false;\n }\n\n return true;\n },\n\n /**\n * Handler for click events on the \"More Tabs\" popupmenu trigger\n * @private\n * @param {jQuery.event} e Event\n * @returns {boolean|undefined} ?\n */\n handleMoreButtonClick(e) {\n if (this.element.is('.is-disabled') || this.moreButton.is('.is-disabled')) {\n e.preventDefault();\n e.stopPropagation();\n return false;\n }\n\n this.moreButton.data('focused-by-click', true);\n\n if (!(this.hasMoreButton())) {\n e.stopPropagation();\n }\n if (this.moreButton.hasClass('popup-is-open')) {\n this.popupmenu.close();\n this.moreButton.removeClass('popup-is-open');\n } else {\n this.buildPopupMenu();\n }\n\n this.hideFocusState();\n return true;\n },\n\n /**\n * @returns {boolean} true if the \"More Actions\" button is present\n */\n hasMoreActions() {\n const moreActionsBtn = this.element.find('.more-actions-button > .btn-actions');\n return (moreActionsBtn && moreActionsBtn.length > 0);\n },\n\n /**\n * Handler for keydown events on the optional \"More Actions\" button, if it's present.\n * @private\n * @param {jQuery.event} e Event\n * @returns {boolean|undefined} ?\n */\n handleMoreActionsButtonKeydown(e) {\n if (this.element.is('.is-disabled') || this.moreActionsBtn.is('.is-disabled')) {\n e.stopPropagation();\n e.preventDefault();\n return false;\n }\n\n const self = this;\n function openMenu(oldHref) {\n e.preventDefault();\n // setTimeout is used to bypass triggering of the keyboard when\n // self.buildPopupMenu() is invoked.\n setTimeout(() => {\n self.buildPopupMenu(oldHref);\n self.positionFocusState(self.moreButton, true);\n }, 0);\n }\n\n const hasAddButton = this.addTabButton && this.addTabButton.length;\n const allExcludes = ':not(.separator):not(.is-disabled):not(:hidden)';\n const tabs = this.tablist.children(`li${allExcludes}`);\n let targetLi;\n\n switch (e.which) {\n case 37: // left\n case 38: // up\n if (hasAddButton) {\n this.addTabButton.focus();\n } else {\n const last = this.findLastVisibleTab();\n if (this.hasMoreButton()) {\n openMenu(last.attr('href'));\n } else {\n targetLi = last;\n }\n }\n break;\n case 39: // right\n case 40: // down\n targetLi = tabs.first();\n break;\n default:\n break;\n }\n\n if (targetLi) {\n e.preventDefault();\n targetLi.children('a').focus();\n\n if (this.isScrollableTabs()) {\n this.scrollTabList(targetLi);\n }\n }\n\n return true;\n },\n\n /**\n * Handler for click events on the \"More Tabs\" popupmenu trigger\n * @private\n * @param {jQuery.event} e Event\n * @param {jQuery[]} a represents an anchor tag\n * @returns {boolean|undefined} ?\n */\n handleTabFocus(e, a) {\n if (this.element.is('.is-disabled')) {\n e.preventDefault();\n return false;\n }\n\n const li = a.parent();\n const dataFocusedClick = a.data('focused-by-click');\n const focusedByKeyboard = dataFocusedClick === undefined ||\n (dataFocusedClick && dataFocusedClick === false);\n\n $.removeData(a[0], 'focused-by-click');\n\n if (this.isTabOverflowed(li)) {\n this.buildPopupMenu(a.attr('href'));\n this.moreButton.addClass('is-focused');\n this.positionFocusState(this.moreButton);\n } else {\n li.addClass('is-focused');\n this.positionFocusState(a, focusedByKeyboard);\n }\n\n return true;\n },\n\n /**\n * Handler for focus events on the \"More Tabs\" popupmenu trigger\n * @private\n * @param {jQuery.event} e incoming focus event\n * @returns {void}\n */\n handleMoreButtonFocus(e) {\n if (this.element.is('.is-disabled')) {\n e.preventDefault();\n return;\n }\n\n const dataFocusedClick = this.moreButton.data('focused-by-click');\n const focusedByKeyboard = (dataFocusedClick && dataFocusedClick === false);\n\n $.removeData(this.moreButton[0], 'focused-by-click');\n\n this.focusState?.removeClass('is-visible');\n this.positionFocusState(this.moreButton, focusedByKeyboard);\n },\n\n /**\n * Handler for keydown events on Tabs in the list\n * @private\n * @param {jQuery.event} e incoming keydown event\n * @returns {boolean|undefined} ?\n */\n handleTabKeyDown(e) {\n if (this.element.is('.is-disabled')) {\n e.preventDefault();\n return false;\n }\n\n if (e.shiftKey || e.ctrlKey || e.metaKey || (e.altKey && e.which !== 8)) {\n return true;\n }\n\n const self = this;\n const passableKeys = [8, 13, 32];\n\n function isPassableKey() {\n return $.inArray(e.which, passableKeys) > -1;\n }\n\n if ((e.which < 32 && !isPassableKey()) || e.which > 46) {\n return true;\n }\n\n if (isPassableKey()) {\n const appMenuResult = this.handleAppMenuTabKeydown(e);\n if (!appMenuResult) {\n return true;\n }\n }\n\n function openMenu(oldHref) {\n e.preventDefault();\n // setTimeout is used to bypass triggering of the keyboard when\n // self.buildPopupMenu() is invoked.\n setTimeout(() => {\n self.buildPopupMenu(oldHref);\n }, 0);\n }\n\n const allExcludes = ':not(.separator):not(.is-disabled):not(:hidden)';\n let currentLi = $(e.currentTarget).parent();\n let currentA = currentLi.children('a');\n let targetLi;\n const tabs = self.tablist.children(`li${allExcludes}`);\n const isRTL = Locale.isRTL();\n\n function previousTab() {\n let i = tabs.index(currentLi) - 1;\n while (i > -1 && !targetLi) {\n if (tabs.eq(i).is(allExcludes)) {\n return tabs.eq(i);\n }\n i -= 1;\n }\n\n if (self.hasMoreActions()) {\n return self.moreActionsBtn;\n }\n if (self.settings.addTabButton) {\n return self.addTabButton;\n }\n\n const last = self.tablist.children(`li${allExcludes}`).last();\n\n if (self.hasMoreButton() && self.isScrollableTabs()) {\n openMenu(last.find('a').attr('href'));\n }\n\n return last;\n }\n\n function nextTab() {\n let i = tabs.index(currentLi) + 1;\n while (i < tabs.length && !targetLi) {\n if (tabs.eq(i).is(allExcludes)) {\n return tabs.eq(i);\n }\n i++;\n }\n\n const first = self.tablist.children(`li${allExcludes}`).first();\n\n if (self.hasMoreButton() && self.isScrollableTabs()) {\n openMenu(first.find('a').attr('href'));\n return first;\n }\n\n if (self.settings.addTabButton) {\n return self.addTabButton;\n }\n if (self.hasMoreActions()) {\n return self.moreActionsBtn;\n }\n\n return first;\n }\n\n function checkAngularClick() {\n if (currentA.attr('ng-click') || currentA.attr('data-ng-click')) { // Needed to fire the \"Click\" event in Angular situations\n currentA.click();\n }\n }\n\n function activate() {\n if (currentLi.hasClass('has-popupmenu')) {\n currentLi.data('popupmenu').open();\n return;\n }\n\n let href = currentA.attr('href');\n\n if (currentLi.is('.add-tab-button')) {\n currentA = self.handleAddButton();\n currentLi = currentA.parent();\n href = currentA.attr('href');\n self.element.trigger('tab-added', [currentA]);\n }\n\n if (!self.activate(href)) {\n return;\n }\n\n self.changeHash(href);\n checkAngularClick();\n currentA[0].focus();\n self.hideFocusState();\n\n // In the event that the activated tab is a full link that should be followed,\n // the keystroke events need to manually activate the link change. Clicks are handled\n // automatically by the browser.\n self.handleOutboundLink(href);\n }\n\n switch (e.which) {\n case 8:\n if (e.altKey && currentLi.is('.dismissible')) {\n e.preventDefault();\n self.closeDismissibleTab(currentA.attr('href'));\n }\n return true;\n case 13: // Enter\n activate();\n this.positionFocusState();\n return false;\n case 32: // Spacebar\n activate();\n this.positionFocusState();\n return false;\n case 38:\n targetLi = previousTab();\n e.preventDefault();\n break;\n case 37:\n targetLi = isRTL ? nextTab() : previousTab();\n e.preventDefault();\n break;\n case 40:\n targetLi = nextTab();\n e.preventDefault();\n break;\n case 39:\n targetLi = isRTL ? previousTab() : nextTab();\n e.preventDefault();\n break;\n default:\n break;\n }\n\n if (targetLi) {\n const isAddTabButton = targetLi.is('.add-tab-button');\n const isMoreActionsButton = targetLi.is('.btn-actions');\n const focusStateTarget = isAddTabButton || isMoreActionsButton ? targetLi : targetLi.children('a');\n\n // Use the matching option in the popup menu if the target is hidden by overflow.\n if (this.isTabOverflowed(targetLi)) {\n return openMenu(targetLi.children('a').attr('href'));\n }\n\n if (isAddTabButton) {\n self.addTabButton.focus();\n } else if (isMoreActionsButton) {\n self.moreActionsBtn.focus();\n } else {\n focusStateTarget.focus();\n\n if (this.isScrollableTabs()) {\n this.scrollTabList(focusStateTarget);\n self.positionFocusState(focusStateTarget, true);\n }\n }\n }\n\n return true;\n },\n\n /**\n * Handler for keydown events on Dismissible tabs\n * @private\n * @param {jQuery.event} e incoming keydown event\n * @returns {void}\n */\n handleDismissibleTabKeydown(e) {\n const key = e.which;\n let tab = $(e.target);\n\n if (tab.is('a')) {\n tab = tab.parent();\n }\n\n if (e.altKey && key === 46) { // Alt + Del\n if (tab.children('a').is('[disabled]') || tab.hasClass('is-disabled')) {\n return;\n }\n\n e.preventDefault();\n this.closeDismissibleTab(tab.children('a').attr('href'));\n }\n },\n\n /**\n * Handler for keydown events on the \"App Menu\" tab (trigger button for the App Menu)\n * @private\n * @param {jQuery.event} e incoming keydown event\n * @returns {boolean} ?\n */\n handleAppMenuTabKeydown(e) {\n const target = $(e.target);\n const li = target.parent();\n\n if (!(li.is('.application-menu-trigger') || target.is('.application-menu-trigger'))) {\n return true;\n }\n\n // If the tab is an application-menu trigger, open the app menu\n // Used by Module Tabs\n const menu = $('#application-menu');\n if (!menu.length) {\n return false;\n }\n\n e.preventDefault();\n\n // this.hideFocusState();\n\n if (menu.hasClass('is-open')) {\n menu.trigger('close-applicationmenu', [true]);\n return false;\n }\n\n menu.trigger('open-applicationmenu', [true, true]);\n return false;\n },\n\n /**\n * Handler for keydown events on the \"More Tabs\" popupmenu trigger\n * @private\n * @param {jQuery.event} e incoming keydown event\n * @returns {boolean|undefined} ?\n */\n handleMoreButtonKeydown(e) {\n if (this.element.is('.is-disabled')) {\n e.preventDefault();\n return false;\n }\n\n const self = this;\n const isRTL = Locale.isRTL();\n\n function openMenu() {\n e.preventDefault();\n self.buildPopupMenu(self.tablist.find('.is-selected').children('a').attr('href'));\n self.positionFocusState(self.moreButton, true);\n }\n\n function lastTab() {\n e.preventDefault();\n self.findLastVisibleTab();\n }\n\n switch (e.which) {\n case 37: // left\n if (isRTL) {\n openMenu();\n break;\n }\n lastTab();\n break;\n case 38: // up\n lastTab();\n break;\n case 13: // enter\n case 32: // spacebar\n e.preventDefault();\n break;\n case 39: // right\n if (isRTL) {\n lastTab();\n break;\n }\n openMenu();\n break;\n case 40: // down\n openMenu();\n break;\n default:\n break;\n }\n\n return true;\n },\n\n /**\n * Handler for keydown events on the \"More Tabs\" popupmenu trigger\n * @private\n * @param {jQuery.event} e incoming keydown event\n * @returns {void}\n */\n handlePanelKeydown(e) {\n const key = e.which;\n const panel = $(e.target);\n const a = this.anchors.filter(`#${panel.attr('id')}`);\n const tab = this.anchors.filter(`#${panel.attr('id')}`).parent();\n\n if (tab.is('.dismissible')) {\n // Close a Dismissible Tab\n if (e.altKey && key === 46) { // Alt + Delete\n e.preventDefault();\n return this.closeDismissibleTab(a.attr('href'));\n }\n }\n\n // Takes focus away from elements inside a Tab Panel and brings focus to its corresponding Tab\n if ((e.ctrlKey && key === 38) &&\n $.contains(document.activeElement, panel[0])) { // Ctrl + Up Arrow\n e.preventDefault();\n return this.activate(a.attr('href'), a);\n }\n\n return undefined;\n },\n\n /**\n * Trigger event aftertabadded\n * @private\n * @param {string} id The tab id\n * @returns {void}\n */\n triggerEventAfterTabAdded(id) {\n const a = this.anchors.filter(`[href=\"#${id}\"]`);\n this.element.triggerHandler('aftertabadded', [a]);\n },\n\n /**\n * Handles the Add Tab button being clicked\n * @private\n * @returns {boolean|undefined} ?\n */\n handleAddButton() {\n const self = this;\n const cb = this.settings.addTabButtonCallback;\n if (cb && typeof cb === 'function') {\n const newTabId = cb();\n this.triggerEventAfterTabAdded('newTabId');\n return this.anchors.filter(`[href=\"#${newTabId}\"]`);\n }\n\n function makeId() {\n self.idCounter = typeof self.idCounter === 'number' ? self.idCounter : -1;\n self.idCounter++;\n\n return `new-tab-${self.idCounter}`;\n }\n\n function makeName(id) {\n const nameParts = id.toString().split('-');\n nameParts.forEach((val, i) => {\n nameParts[i] = val.charAt(0).toUpperCase() + val.slice(1);\n });\n\n return nameParts.join(' ');\n }\n\n let newIndex = this.tablist.children().index(this.addTabButton);\n let newId = makeId();\n const newName = makeName(newId);\n let settings = {\n name: newName,\n content: ' ',\n isDismissible: true\n };\n\n if (newIndex < 0) {\n newIndex = this.tablist.find('li:not(.separator)').length;\n }\n\n // Allow the opportunity to pass in external settings for the new tab control\n const externalSettings = this.element.triggerHandler('before-tab-added', [newId, settings, newIndex]);\n if (!externalSettings) {\n this.add(newId, settings, newIndex);\n this.triggerEventAfterTabAdded('newId');\n return this.anchors.filter(`[href=\"#${newId}\"]`);\n }\n\n if (externalSettings.newId &&\n externalSettings.newId.length &&\n typeof externalSettings.newId === 'string') {\n newId = externalSettings.newId;\n }\n if (externalSettings.settings &&\n typeof externalSettings.settings === 'object') {\n settings = externalSettings.settings;\n }\n if (!isNaN(externalSettings.newIndex)) {\n newIndex = externalSettings.newIndex;\n }\n\n this.add(newId, settings, newIndex);\n this.triggerEventAfterTabAdded('newId');\n return this.anchors.filter(`[href=\"#${newId}\"]`);\n },\n\n /**\n * @private\n * @param {jQuery.Event} e incoming keydown event\n * @returns {undefined|boolean} ?\n */\n handleAddButtonKeydown(e) {\n if (this.element.is('.is-disabled')) {\n e.preventDefault();\n return false;\n }\n\n const validKeys = [13, 32, 37, 38, 39, 40];\n const key = e.which;\n\n if (validKeys.indexOf(key) < 0) {\n return false;\n }\n\n const self = this;\n const isRTL = Locale.isRTL();\n let targetLi;\n const filter = 'li:not(.separator):not(.is-disabled):not(:hidden)';\n\n function openMenu() {\n e.preventDefault();\n targetLi = self.tablist.find(filter).last();\n\n // setTimeout is used to bypass triggering of the keyboard when\n // self.buildPopupMenu() is invoked.\n setTimeout(() => {\n self.buildPopupMenu(targetLi.children('a').attr('href'));\n self.positionFocusState(self.moreButton, true);\n }, 0);\n }\n\n function firstTab() {\n if (self.hasMoreActions()) {\n self.moreActionsBtn.focus();\n return;\n }\n targetLi = self.tablist.find(filter).first();\n }\n\n switch (key) {\n case 37: // left\n if (isRTL) {\n firstTab();\n break;\n }\n openMenu();\n break;\n case 38: // up\n openMenu();\n break;\n case 13: // enter\n case 32: // spacebar\n e.preventDefault();\n return this.handleAddButton();\n case 39: // right\n if (isRTL) {\n openMenu();\n break;\n }\n firstTab();\n break;\n case 40: // down\n firstTab();\n break;\n default:\n break;\n }\n\n if (targetLi) {\n targetLi.children('a').focus();\n\n if (this.isScrollableTabs) {\n e.preventDefault();\n this.scrollTabList(targetLi);\n }\n }\n return true;\n },\n\n /**\n * @private\n * @returns {void}\n */\n handleAddButtonFocus() {\n const tabs = this.tablist.find('li:not(.separator)');\n tabs.add(this.moreButton).removeClass('is-focused');\n\n this.addTabButton.addClass('is-focused');\n this.positionFocusState(this.addTabButton, true);\n },\n\n /**\n * Resets the visual state of the Tab List and Tab Panel Container to match current width/height and responsive.\n * @param {boolean} ignoreResponsiveCheck if true, doesn't run `this.checkResponsive()`\n * @returns {void}\n */\n handleResize(ignoreResponsiveCheck) {\n if (!ignoreResponsiveCheck) {\n this.checkResponsive(true);\n }\n\n this.setOverflow();\n\n let selected = this.tablist.find('.is-selected');\n if (!selected.length || this.moreButton.is('.is-selected') || this.isTabOverflowed(selected)) {\n selected = this.moreButton;\n }\n\n const appMenuTrigger = this.element.find('.application-menu-trigger');\n if (appMenuTrigger.length > 0 && appMenuTrigger.hasClass('is-focused')) {\n selected = appMenuTrigger.find('a');\n }\n\n if (!selected.length) {\n this.hideFocusState();\n } else {\n this.positionFocusState(selected);\n }\n\n this.handleVerticalTabResize();\n this.renderVisiblePanel();\n this.renderEdgeFading();\n },\n\n /**\n * Checks the window size to determine if a responsive-mode switch is needed.\n * @private\n * @returns {void}\n * @param {boolean} handleRebuild Do a rebuild after handling.\n */\n checkResponsive(handleRebuild) {\n const self = this;\n const classList = self.element[0].classList;\n\n function rebuild() {\n self.removeHelperMarkupEvents();\n self.renderHelperMarkup();\n self.setupHelperMarkupEvents();\n }\n\n function makeResponsive() {\n if (!classList.contains('is-in-responsive-mode')) {\n classList.add('is-in-responsive-mode');\n classList.add('header-tabs');\n if (!classList.contains('is-personalizable')) classList.add('alternate');\n classList.remove('vertical');\n if (handleRebuild) {\n rebuild();\n }\n }\n }\n\n function makeVertical() {\n if (classList.contains('is-in-responsive-mode')) {\n classList.add('vertical');\n classList.remove('is-in-responsive-mode');\n classList.remove('header-tabs');\n classList.remove('alternate');\n if (handleRebuild) {\n rebuild();\n }\n }\n }\n\n // Check for responsive mode for Vertical tabs\n if (this.isResponsiveVerticalTabs()) {\n if (breakpoints.isBelow('phone-to-tablet')) {\n makeResponsive();\n } else {\n makeVertical();\n }\n } else {\n makeVertical();\n }\n },\n\n /**\n * Causes a vertical tabs container to stretch to the height of its parent container\n * @private\n * @returns {void}\n */\n handleVerticalTabResize() {\n if (!this.isVerticalTabs()) {\n return;\n }\n\n // When tabs are full-size (part of a layout) CSS rules should handle this better\n // due to less strange sizing constraints. JS resizing is necessary for nesting.\n if (!this.isNested() || this.isNestedInLayoutTabs() || this.isHidden()) {\n return;\n }\n\n const elemStyle = window.getComputedStyle(this.element[0]);\n const elemOuterHeight = elemStyle.getPropertyValue('height') + elemStyle.getPropertyValue('margin-top') + elemStyle.getPropertyValue('margin-bottom');\n\n this.tablist[0].style.height = elemOuterHeight;\n },\n\n /**\n * Changes the location in the browser address bar to force outbound links.\n * @param {string} href incoming href link\n * @param {boolean} useRelativePath don't prepend the full domain, port,\n * protocol, etc. to the HREF.\n * @returns {void}\n */\n handleOutboundLink(href, useRelativePath) {\n if (href.charAt(0) === '#') {\n return;\n }\n\n if (href.charAt(0) === '/' && (!useRelativePath || useRelativePath === false)) {\n href = window.location.origin + href;\n }\n\n window.location = href;\n },\n\n /**\n * Determines whether or not this tabset currently has a \"More Tabs\" spillover button.\n * @returns {boolean} whether or not the \"More Tabs\" button is currently displayed.\n */\n hasMoreButton() {\n return this.element[0].classList.contains('has-more-button');\n },\n\n /**\n * Determines whether or not this normally \"vertical\" tabset is in an optional \"horizontal\" responsive mode\n * @returns {boolean} whether or not the responsive mode is active.\n */\n isInResponsiveMode() {\n return this.element[0].classList.contains('is-in-responsive-mode');\n },\n\n /**\n * Determines whether or not this tabset is currently operating as Module Tabs\n * @returns {boolean} whether or not this is a Module tabset.\n */\n isModuleTabs() {\n return this.element.hasClass('module-tabs');\n },\n\n /**\n * Determines whether or not this tabset is currently operating as Vertical Tabs\n * @returns {boolean} whether or not this is a Vertical tabset.\n */\n isVerticalTabs() {\n return this.element.hasClass('vertical');\n },\n\n /**\n * Determines whether or not this tabset is Vertical Tabs with a responsive, horizontal capability\n * @returns {boolean} whether or not this is a Vertical tabset.\n */\n isResponsiveVerticalTabs() {\n return this.settings.verticalResponsive === true;\n },\n\n /**\n * Determines whether or not this tabset is currently operating as Header Tabs\n * @returns {boolean} whether or not this is a Header tabset.\n */\n isHeaderTabs() {\n return this.element.hasClass('header-tabs');\n },\n\n /**\n * Determines whether or not this tabset is showing tabs that allow for selection via horizontal scrolling.\n * @returns {boolean} whether or not horizontal scrolling is possible.\n */\n isScrollableTabs() {\n return !this.isModuleTabs() && !this.isVerticalTabs();\n },\n\n /**\n * Determines whether or not this tabset is currently hidden\n * @returns {boolean} whether or not this tabset is hidden.\n */\n isHidden() {\n return this.element.is(':hidden');\n },\n\n /**\n * Determines whether or not this tabset is nested inside a parent Tab Panel\n * @returns {boolean} whether or not this tabset is nested.\n */\n isNested() {\n return this.element.closest('.tab-panel').length;\n },\n\n /**\n * Determines whether or not a particular tab panel is currently the active (displayed) tab panel\n * @param {string} href representing the HTML \"id\" attribute of a corresponding tab panel\n * @returns {boolean} whether or not the tab panel is active.\n */\n isActive(href) {\n if (!href || !href.length || (href.length === 1 && href.indexOf('#') < 1)) {\n return false;\n }\n\n const panel = this.getPanel(href);\n return panel[0].classList.contains('can-show');\n },\n\n /**\n * Determines whether or not this tabset is nested inside a \"Layout\"-style of Tab container\n * @returns {boolean} whether or not this tabset is nested.\n */\n isNestedInLayoutTabs() {\n const nestedInModuleTabs = this.element.closest('.module-tabs').length;\n const nestedInHeaderTabs = this.element.closest('.header-tabs').length;\n const hasTabContainerClass = this.element.closest('.tab-panel-container').length;\n\n return (nestedInModuleTabs > 0 || nestedInHeaderTabs > 0 || hasTabContainerClass > 0);\n },\n\n /**\n * Determines if an object is an HTML List Item representing a tab\n * @param {object} obj incoming object\n * @returns {boolean} whether or not the item is a tab\n */\n isTab(obj) {\n return obj instanceof jQuery && obj.length && obj.is('li.tab');\n },\n\n /**\n * Determines if an object is an HTML Anchor Tag representing a tab's actionable element\n * @param {object} obj incoming object\n * @returns {boolean} whether or not the item is an anchor tag\n */\n isAnchor(obj) {\n return obj instanceof jQuery && obj.length && obj.is('a');\n },\n\n /**\n * Gets a reference to an Anchor tag.\n * @param {string|jQuery} href either a string that can be used as a Tab ID, or an actual jQuery wrapped Anchor Tag.\n * @returns {jQuery} the Anchor tag\n */\n getAnchor(href) {\n if (this.isAnchor(href)) {\n return href;\n }\n\n if (href.indexOf('#') === -1 && href.charAt(0) !== '/') {\n href = `#${href}`;\n }\n\n return this.anchors.filter(`[href=\"${href}\"]`);\n },\n\n /**\n * Gets a reference to a Tab panel.\n * @param {string|jQuery} href either a string that can be used as a Tab ID, or an actual jQuery wrapped Anchor Tag.\n * @returns {jQuery} the Anchor tag\n */\n getPanel(href) {\n if (this.isTab(href)) {\n href = href.children('a');\n }\n\n if (this.isAnchor(href)) {\n href = href.attr('href');\n }\n\n if (!href || href === '' || href === '#') {\n return $();\n }\n\n // uses angular LocationStrategy\n if (href.substr(0, 2) === '#/') {\n href = href.replace('#/', '#');\n }\n return this.panels.filter(`[id=\"${href.replace(/#/g, '')}\"]`);\n },\n\n getMenuItem(href) {\n if (this.isAnchor(href)) {\n href = href.attr('href');\n }\n\n if (href.indexOf('#') === -1) {\n href = `#${href}`;\n }\n return this.moreMenu.children().children().filter(`[data-href=\"${href}\"]`).parent();\n },\n\n /**\n * Takes a tab ID and returns a jquery object containing the previous available tab\n * @param {string} tabId the tab ID\n * @returns {jQuery[]} jQuery-wrapped element reference for the tab\n */\n getPreviousTab(tabId) {\n const tab = this.getTab(null, tabId);\n const filter = 'li:not(.separator):not(:hidden):not(.is-disabled)';\n const tabs = this.tablist.find(filter);\n const idx = tabs.index(tab);\n let target = tabs.eq(idx === 0 ? 1 : idx - 1);\n\n while (target.length && !target.is(filter)) {\n target = tabs.eq(tabs.index(target) - 1);\n }\n\n // Top-level Dropdown Tabs don't have an actual panel associated with them.\n // Get a Dropdown Tab's first child as the target.\n if (target.is('.has-popupmenu')) {\n const menuAPI = target.data('popupmenu');\n if (menuAPI) {\n target = menuAPI.menu.children('li').first();\n }\n }\n\n return target;\n },\n\n /**\n * Takes a tab ID and activates an adjacent available tab\n * @param {object} e event object\n * @param {string} tabId the tab ID\n */\n activateAdjacentTab(e, tabId) {\n const tab = this.doGetTab(e, tabId);\n\n if (typeof e === 'string') {\n tabId = e;\n }\n\n if (tab.is('.is-selected')) {\n if (tab.prevAll('li.tab').not('.hidden').not('.is-disabled').length > 0) {\n this.select($(tab.prevAll('li.tab').not('.hidden').not('.is-disabled')[0]).find('a')[0].hash, true);\n } else if (tab.nextAll('li.tab').not('.hidden').length > 0) {\n this.select($(tab.nextAll('li.tab').not('.hidden').not('.is-disabled')[0]).find('a')[0].hash, true);\n }\n } else {\n this.select($(this.element.find('li.tab.is-selected')[0]).find('a')[0].hash, true);\n }\n },\n\n /**\n * Takes a tab ID and returns a jquery object containing the previous available tab\n * If an optional target Tab (li) is provided, use this to perform activation events\n * @param {string} tabId the tab ID\n * @param {jQuery[]} [target] a reference to the previous tab in the list (before this one)\n * @returns {jQuery[]} potentially-updated target\n */\n activatePreviousTab(tabId, target) {\n const tab = this.getTab(null, tabId);\n\n if (!target || !(target instanceof jQuery)) {\n target = this.getPreviousTab(tabId);\n }\n\n if (!target.length) {\n this.hideFocusState();\n return target;\n }\n\n const a = target.children('a');\n if (tab.is('.is-selected')) {\n if (!this.activate(a.attr('href'), a)) {\n return target;\n }\n a.focus();\n }\n this.positionFocusState(a);\n\n return target;\n },\n\n /**\n * Determines whether or not a string has an outbound URL, instead of a hash (#) that would match up to a Tab ID.\n * @param {string} href a string that may or may not contain a URL\n * @returns {boolean} whether or not the incoming string is a URL\n */\n isURL(href) {\n if (!href || href.indexOf('#') === 0) {\n return false;\n }\n\n return true;\n },\n\n /**\n * Causes a new tab panel to become active. Will also trigger AJAX calls on unloaded tab panels, if necessary.\n * @param {string} href a string that either matches up to a Tab ID, or an outbound link to grab AJAX content from.\n * @param {object} anchor in addition to the ref the anchor object may be passed to avoid extra querying.\n * @returns {void}\n */\n activate(href, anchor) {\n const self = this;\n\n if (self.isURL(href)) {\n return this.callSource(href, anchor, true);\n }\n\n const a = self.getAnchor(href);\n const targetTab = a.parent();\n const targetPanel = self.getPanel(href);\n const targetPanelElem = targetPanel[0];\n const oldTab = self.anchors.parents().filter('.is-selected');\n let oldPanel;\n let selectedStateTarget;\n let activeStateTarget;\n\n // Avoid filter(:visible)\n for (let i = 0; i < self.panels.length; i++) {\n if (self.panels[i].classList.contains('is-visible')) {\n oldPanel = $(self.panels[i]);\n }\n }\n\n if (!oldPanel) {\n oldPanel = self.panels;\n }\n\n // NOTE: Breaking Change as of 4.3.3 - `beforeactivate` to `beforeactivated`\n // See SOHO-5994 for more details\n /**\n * Fires when an attempt at activating a tab is started\n *\n * @event beforeactivated\n * @memberof Tabs\n * @param {jQuery.Event} e event object\n * @param {jQuery} a the tab anchor attempting to activate\n */\n const isCancelled = self.element.trigger('beforeactivated', [a]);\n if (!isCancelled) {\n return false;\n }\n\n function completeActivate(vetoResult) {\n if (targetPanel.length < 1) {\n if (self.settings.source) {\n self.callSource(href, a);\n return true;\n }\n } else {\n oldPanel[0].classList.remove('can-show');\n oldPanel[0].classList.remove('is-visible');\n oldPanel.closeChildren();\n\n /**\n * Fires when a new tab has been activated\n *\n * @event activated\n * @memberof Tabs\n * @param {jQuery.Event} e event object\n * @param {jQuery} a the tab anchor attempting to activate\n */\n self.element.trigger('activated', [a]);\n\n targetPanelElem.classList.add('can-show');\n self.renderVisiblePanel();\n // trigger reflow as display property is none for animation\n // eslint-disable-next-line\n targetPanelElem.offsetHeight;\n\n // Register an `afteractivated` event trigger as a renderLoop callback\n const timer = new RenderLoopItem({\n duration: math.convertDelayToFPS(150),\n timeoutCallback() {\n /**\n * Fires when a new tab has been completely activated, and the activation process is done\n *\n * @event afteractivated\n * @memberof Tabs\n * @param {jQuery.Event} e event object\n * @param {jQuery} a the tab anchor attempting to activate\n */\n self.element.trigger('afteractivated', [a]);\n }\n });\n renderLoop.register(timer);\n\n // Triggers the CSS Animation\n targetPanelElem.classList.add('is-visible');\n }\n\n // Update the currently-selected tab\n self.updateAria(a);\n oldTab.add(self.moreButton).removeClass('is-selected');\n if (targetTab[0]) {\n if (targetTab[0].classList.contains('tab')) {\n selectedStateTarget = targetTab;\n activeStateTarget = targetTab;\n }\n }\n\n const ddMenu = targetTab.parents('.popupmenu');\n let ddTab;\n\n if (ddMenu.length) {\n ddTab = ddMenu.data('trigger');\n if (ddTab.length) {\n selectedStateTarget = ddTab;\n activeStateTarget = ddTab;\n }\n }\n\n if (self.isTabOverflowed(activeStateTarget)) {\n activeStateTarget = self.moreButton;\n selectedStateTarget = self.moreButton;\n }\n\n if (selectedStateTarget) {\n selectedStateTarget.addClass('is-selected');\n }\n\n // Fires a resize on any invoked child toolbars inside the tab panel.\n // Needed to fix issues with Toolbar alignment, since we can't properly detect\n // size on hidden elements.\n const childToolbars = targetPanel.find('.toolbar');\n if (childToolbars.length) {\n childToolbars.each(function () {\n const api = $(this).data('toolbar');\n if (api && typeof api.handleResize === 'function') {\n api.handleResize();\n }\n });\n }\n\n // Automatically refresh all icons inside Tab panels on activation.\n // See SOHO-7313\n utils.fixSVGIcons(targetPanel[0]);\n\n return vetoResult || false;\n }\n\n // Handle an optional, veto-able \"beforeActivate\" callback.\n if (this.settings.beforeActivate && typeof this.settings.beforeActivate === 'function') {\n return this.settings.beforeActivate(oldTab, targetTab, completeActivate);\n }\n\n // Otherwise, simply continue\n return completeActivate(true);\n },\n\n /**\n * Shows/Hides some tabsets' faded edges based on scrolling position, if applicable.\n * @private\n * @returns {undefined}\n */\n renderEdgeFading() {\n if (!this.isScrollableTabs() || !this.tablistContainer) {\n return;\n }\n\n const tablistContainerElem = this.tablistContainer[0];\n const scrollLeft = Math.abs(tablistContainerElem.scrollLeft);\n const scrollWidth = tablistContainerElem.scrollWidth;\n const containerWidth = parseInt(window.getComputedStyle(tablistContainerElem).getPropertyValue('width'), 10);\n\n this.element[0].classList[scrollLeft > 1 ? 'add' : 'remove']('scrolled-right');\n this.element[0].classList[(scrollWidth - scrollLeft - 1) <= containerWidth ? 'remove' : 'add']('scrolled-left');\n },\n\n /**\n * Calls an options-provided source method to fetch content that will be displayed inside a tab.\n * @param {string} href - string representing the target tab to load content under.\n * @param {object} anchor - Reference to the dom object anchor tag.\n * @param {boolean} isURL detects whether or not the URL is actually an external /\n * call, or an ID for an existing tab in the page.\n * @returns {boolean|$.Deferred} true if source call was successful, false for failure/ignore,\n * or a promise object that will fire callbacks in either \"success\" or \"failure\" scenarios.\n */\n callSource(href, anchor, isURL) {\n if ((isURL === undefined || isURL === null || isURL === false) && !this.settings.source) {\n return false;\n }\n if (this.settings.lazyLoad !== true) {\n return false;\n }\n\n const sourceType = typeof this.settings.source;\n const response = (htmlContent) => {\n if (htmlContent === undefined || htmlContent === null) {\n return;\n }\n\n htmlContent = xssUtils.sanitizeHTML(htmlContent);\n\n // Get a new random tab ID for this tab if one can't be derived from the URL string\n if (isURL) {\n const containerId = this.element[0].id || '';\n const id = utils.uniqueId(anchor, 'tab', containerId);\n\n href = `#${id}`;\n // Replace the original URL on this anchor now that we've loaded content.\n anchor[0].setAttribute('href', href);\n }\n\n this.createTabPanel(href, htmlContent, true);\n this.activate(href);\n\n this.element.triggerHandler('complete'); // For Busy Indicator\n this.element.trigger('requestend', [href, htmlContent]);\n };\n\n this.container.triggerHandler('start'); // For Busy Indicator\n this.container.trigger('requeststart');\n\n function handleStringSource(url, options) {\n const opts = $.extend({ dataType: 'html' }, options, {\n url\n });\n\n const request = $.ajax(opts);\n request.done(response);\n return request;\n }\n\n if (isURL) {\n return handleStringSource(href, this.ajaxOptions);\n }\n\n // return _true_ from this source function on if we're just loading straight content\n // return a promise if you'd like to setup async handling.\n if (sourceType === 'function') {\n return this.settings.source(response, href, this.settings.sourceArguments);\n }\n\n if (sourceType === 'string') {\n // Attempt to resolve source as a URL string. Make an $.ajax() call with the URL\n const safeHref = href.replace(/#/g, '');\n let sourceURL = this.settings.source.toString();\n const hasHref = sourceURL.indexOf(safeHref) > -1;\n\n if (!hasHref) {\n let param = `tab=${safeHref}`;\n const paramIndex = sourceURL.indexOf('?');\n const hashIndex = sourceURL.indexOf('#');\n let insertIndex = sourceURL.length;\n\n if (paramIndex < 0) {\n param = `?${param}`;\n if (hashIndex > -1) {\n insertIndex = hashIndex + 1;\n }\n } else {\n param += '&';\n insertIndex = paramIndex + 1;\n }\n\n sourceURL = stringUtils.splice(sourceURL, insertIndex, 0, param);\n }\n\n return handleStringSource(sourceURL, this.ajaxOptions);\n }\n\n return false;\n },\n\n /**\n * @private\n */\n renderVisiblePanel() {\n // Recalculate all components inside of the visible tab to adjust\n // widths/heights/display if necessary\n this.resizeNestedTabs();\n // TJM: Prioritizing performance fix.\n // this.panels.filter(':visible').handleResize();\n },\n\n /**\n *\n * Update the hash in the link.\n * @private\n * @param {HTMLElement} href The Dom Element.\n * @returns {void}\n */\n changeHash(href) {\n if (!this.settings.changeTabOnHashChange) {\n return;\n }\n\n if (!href) {\n href = '';\n }\n\n href.replace(/#/g, '');\n\n const cb = this.settings.hashChangeCallback;\n if (cb && typeof cb === 'function') {\n cb(href);\n } else {\n window.location.hash = href;\n }\n\n /**\n * @event hash-change\n * @memberof Tabs\n * @param {jQuery.Event} e the jQuery event object\n * @param {string} href the new hash fragment for the URL\n */\n this.element.triggerHandler('hash-change', [href]);\n },\n\n /**\n * Updates the aria-related markup on all tab elements\n * @private\n * @param {jQuery} a the 'selected' tab anchor\n */\n updateAria(a) {\n if (!a) {\n return;\n }\n // hide old tabs\n this.anchors.attr({\n 'aria-selected': 'false',\n tabindex: '-1'\n });\n this.moreButton.attr({\n tabindex: '-1'\n });\n\n // show current tab\n if (a.length && this.element.is(':not(.is-disabled)')) {\n a.parent().removeClass('is-selected');\n if (!this.isTabOverflowed(a.parent())) {\n a.attr({\n 'aria-selected': 'true',\n tabindex: '0'\n }).parent().addClass('is-selected');\n } else {\n this.moreButton.attr({\n tabindex: '0'\n });\n }\n }\n },\n\n /**\n * Causes `handleResize()` to be fired on any Tab components that are nested inside of this tab component's panels.\n * @returns {void}\n */\n resizeNestedTabs() {\n this.nestedTabControls.each((i, container) => {\n const c = $(container);\n const api = c.data('tabs');\n\n if (api && api.handleResize && typeof api.handleResize === 'function') {\n api.handleResize(true);\n }\n });\n },\n\n /**\n * Adds a new tab into the list and properly binds all of its events\n * @param {string} tabId a string representing the HTML `id` attribute of the new tab panel.\n * @param {object} options incoming options for the new tab.\n * @param {string} [options.name] the text title of the new tab.\n * @param {Array} [options.attributes] additional attributes needed for the new tab.\n * @param {boolean} [options.doActivate=false] if true, causes the newly-added tab to become activated and focused.\n * @param {boolean} [options.isDismissible=false] if true, causes the tab to become dismissible (closable) with an \"X\" button.\n * @param {boolean} [options.isDropdown=false] if true, causes the tab to become a dropdown tab.\n * @param {string} [options.content] representing HTML markup that will be added inside of the new tab panel.\n * @param {number} [atIndex] if defined, inserts the tab at a particular number index in the tab list. Defaults to the last tab in the list.\n * @returns {this} component instance\n */\n add(tabId, options, atIndex) {\n if (!tabId) {\n return this;\n }\n\n if (!options) {\n options = {};\n }\n\n const startFromZero = this.tablist.find('li').not('.application-menu-trigger, .add-tab-button').length === 0;\n\n // Sanitize\n tabId = `${tabId.replace(/#/g, '')}`;\n options.name = options.name ? options.name.toString() : ' ';\n options.isDismissible = options.isDismissible ? options.isDismissible === true : false;\n options.isDropdown = options.isDropdown ? options.isDropdown === true : false;\n\n function getObjectFromSelector(sourceString) {\n const contentType = typeof sourceString;\n let hasId;\n\n switch (contentType) {\n case 'string':\n hasId = sourceString.match(/^#/g);\n // Text Content or a Selector.\n if (hasId !== null) {\n const obj = $(sourceString);\n sourceString = obj.length ? obj : sourceString;\n }\n // do nothing if it's just a string of text.\n break;\n default:\n break;\n }\n return sourceString;\n }\n\n if (options.content) {\n options.content = getObjectFromSelector(options.content);\n }\n if (options.dropdown) {\n options.dropdown = getObjectFromSelector(options.dropdown);\n }\n\n // Build\n const tabHeaderMarkup = $('
');\n const anchorMarkup = $(`
${xssUtils.escapeHTML(options.name)} `);\n const tabContentMarkup = this.createTabPanel(tabId, options.content);\n let iconMarkup;\n\n tabHeaderMarkup.html(anchorMarkup);\n\n if (options.isDismissible) {\n iconMarkup = $.createIconElement({ icon: 'close', classes: 'close icon' });\n utils.addAttributes(iconMarkup, this, options.attributes, 'close-btn');\n tabHeaderMarkup.addClass('dismissible');\n tabHeaderMarkup.append(iconMarkup);\n }\n\n if (this.settings.tabCounts) {\n anchorMarkup.prepend('
0 ');\n }\n\n if (options.dropdown) {\n // TODO: Need to implement the passing of Dropdown Tab menus into this method.\n }\n\n // Add additional attributes, if applicable.\n // NOTE: Do not add IDs this way.\n let attrs = this.settings.attributes || [];\n if (Array.isArray(options.attributes)) {\n attrs = attrs.concat(options.attributes);\n }\n if (attrs.length) {\n utils.addAttributes(anchorMarkup, this, attrs, `${tabId}-a`);\n utils.addAttributes(tabContentMarkup, this, attrs, `${tabId}-panel`);\n }\n\n function insertIntoTabset(self, targetIndex) {\n let method;\n const tabs = self.tablist.children('li');\n const nonSpecialTabs = tabs.not('.application-menu-trigger, .add-tab-button');\n let finalIndex = tabs.length - 1;\n\n if (!tabs.length) {\n tabHeaderMarkup.appendTo(self.tablist);\n tabContentMarkup.appendTo(self.container);\n return;\n }\n\n const addTabButton = tabs.filter('.add-tab-button');\n const appMenuTrigger = tabs.filter('.application-menu-trigger');\n\n // NOTE: Cannot simply do !targetIndex here because zero is a valid index\n if (targetIndex === undefined || targetIndex === null || isNaN(targetIndex)) {\n targetIndex = tabs.length;\n }\n\n function pastEndOfTabset(index) {\n return index > tabs.length - 1;\n }\n\n function atBeginningOfTabset(index) {\n return index <= 0;\n }\n\n if (tabs.length > nonSpecialTabs.length) {\n if (pastEndOfTabset(targetIndex) && addTabButton && addTabButton.length) {\n targetIndex -= 1;\n }\n\n if (atBeginningOfTabset(targetIndex) && appMenuTrigger && appMenuTrigger.length) {\n targetIndex += 1;\n }\n }\n\n const conditionInsertTabBefore = tabs.eq(targetIndex).length > 0;\n\n finalIndex = conditionInsertTabBefore ? targetIndex : finalIndex;\n\n method = 'insertAfter';\n if (conditionInsertTabBefore) {\n method = 'insertBefore';\n }\n\n tabHeaderMarkup[method](tabs.eq(finalIndex));\n tabContentMarkup.appendTo(self.container);\n }\n\n insertIntoTabset(this, atIndex);\n\n // Add each new part to their respective collections.\n this.panels = $(this.panels.add(tabContentMarkup));\n this.anchors = $(this.anchors.add(anchorMarkup));\n\n // Link the two items via data()\n anchorMarkup.data('panel-link', tabContentMarkup);\n tabContentMarkup.data('tab-link', anchorMarkup);\n // TODO: When Dropdown Tabs can be added/removed, add that here\n\n // Make it possible for Module Tabs to display a tooltip containing their contents\n // if the contents are cut off by ellipsis.\n if (this.settings.moduleTabsTooltips || this.settings.multiTabsTooltips) {\n anchorMarkup.on('beforeshow.toolbar', () => anchorMarkup.data('cutoffTitle') === 'yes').tooltip({\n content: `${anchorMarkup.text().trim()}`\n });\n }\n\n // Recalc tab width before detection of overflow\n if (this.isModuleTabs()) {\n this.adjustModuleTabs();\n }\n\n // Adjust tablist height\n this.setOverflow();\n\n // If started from zero, position the focus state/bar and activate the tab\n if (startFromZero) {\n this.positionFocusState(anchorMarkup);\n if (!this.activate(anchorMarkup.attr('href'))) {\n this.triggerEventAfterTabAdded(tabId);\n return this;\n }\n anchorMarkup.focus();\n }\n\n if (options.doActivate) {\n this.activate(anchorMarkup.attr('href'));\n }\n\n this.triggerEventAfterTabAdded(tabId);\n return this;\n },\n\n /**\n * Removes a tab from the list and cleans up properly\n * NOTE: Does not take advantage of _activatePreviousTab()_ due to specific needs\n * of selecting certain Tabs/Anchors at certain times.\n * @param {string} tabId tab ID that corresponds to a `.tab-panel` element's ID attribute\n * @param {boolean} disableBeforeClose whether or not tab closing can become veteoed\n * @returns {boolean|this} component instance\n */\n remove(tabId, disableBeforeClose) {\n const self = this;\n const targetLi = this.doGetTab(null, tabId);\n\n if (!targetLi || !targetLi.length) {\n return false;\n }\n\n const targetAnchor = targetLi.children('a');\n const targetPanel = this.getPanel(tabId);\n const hasTargetPanel = (targetPanel && targetPanel.length);\n const targetLiIndex = this.tablist.children('li').index(targetLi);\n const notATab = '.application-menu-trigger, .separator, .is-disabled';\n let prevLi = targetLi.prev();\n\n if (!disableBeforeClose) {\n const canClose = this.element.triggerHandler('beforeclose', [targetAnchor]);\n if (canClose === false) {\n return false;\n }\n }\n\n let wasSelected = false;\n\n if (targetAnchor[0]?.href && self.getActiveTab()[0]?.href && targetAnchor[0].href === self.getActiveTab()[0].href) {\n wasSelected = true;\n } else {\n prevLi = $(this.tablist.children('li').not(notATab).filter('.is-selected'));\n }\n\n // Remove these from the collections\n if (hasTargetPanel) {\n this.panels = $(this.panels.not(targetPanel));\n }\n this.anchors = $(this.anchors.not(targetAnchor));\n\n // Destroy Anchor tooltips, if applicable\n if (this.settings.moduleTabsTooltips || this.settings.multiTabsTooltips) {\n targetAnchor.off('beforeshow.toolbar').data('tooltip').destroy();\n }\n\n // Close Dropdown Tabs in a clean fashion\n const popupAPI = targetLi.data('popupmenu');\n if (targetLi.hasClass('has-popupmenu')) {\n if (popupAPI) {\n popupAPI.menu.children('li').each(function () {\n self.remove($(this).children('a').attr('href'));\n });\n popupAPI.destroy();\n }\n }\n\n // If this tab is inside of a Dropdown Tab's menu, detect if it was the last one\n // remaining, and if so, close the entire Dropdown Tab.\n // The actual check on these elements needs to be done AFTER the targetLi is removed\n // from a Dropdown Tab, to accurately check the number of list items remaining.\n // See: _isLastDropdownTabItem()_\n const parentMenu = targetLi.closest('.dropdown-tab');\n const trigger = parentMenu.data('trigger');\n\n // Kill associated events\n targetLi.find('.icon').off().removeData().remove();\n targetLi.off();\n targetAnchor.off();\n\n // Remove Markup\n targetLi.removeData().empty();\n targetLi.remove();\n if (hasTargetPanel) {\n targetPanel.removeData().empty();\n targetPanel.removeData();\n targetPanel.remove();\n }\n\n const menuItem = targetAnchor.data('moremenu-link');\n if (menuItem) {\n menuItem.parent().off().removeData().remove();\n targetAnchor.removeData();\n }\n\n function isLastDropdownTabItem(menu) {\n return menu.length && menu.children('li:not(.separator)').length === 0;\n }\n if (isLastDropdownTabItem(parentMenu)) {\n prevLi = this.getPreviousTab(trigger);\n\n setTimeout(() => {\n self.remove(trigger);\n }, 1);\n }\n\n // Close dropdown tab's menu\n if (trigger && trigger.length) {\n trigger.data('popupmenu').close();\n }\n\n // Recalc tab width before detection of overflow\n if (this.isModuleTabs()) {\n this.adjustModuleTabs();\n }\n\n // Adjust tablist height\n this.setOverflow();\n\n /**\n * Fires when a tab is removed from the tabset\n *\n * @event close\n * @memberof Tabs\n * @param {jQuery.Event} e event object\n * @param {jQuery} targetLi the tab list item being closed\n */\n this.element.trigger('close', [targetLi]);\n\n // If any tabs are left in the list, set the first available tab as the currently selected one.\n let count = targetLiIndex - 1;\n while (count > -1) {\n count = -1;\n if (prevLi.is(notATab)) {\n prevLi = this.tablist.children('li').not(notATab)[0];\n count -= 1;\n }\n }\n\n // If we find nothing, search for ANY available tab\n if (!prevLi || !prevLi.length) {\n prevLi = this.tablist.children('li').not(notATab).first();\n }\n\n // If there's really nothing, kick on out and defocus everything.\n if (!prevLi.length) {\n this.hideFocusState();\n\n this.element.trigger('afterclose', [targetLi]);\n return this;\n }\n\n const a = prevLi.children('a');\n let activateTargetA = a;\n\n this.positionFocusState(a);\n\n if (wasSelected) {\n if (prevLi.is('.has-popupmenu') && prevLi.data('popupmenu')) {\n activateTargetA = prevLi.data('popupmenu').menu.children().first().children('a');\n }\n if (!this.activate(activateTargetA.attr('href'))) {\n return this;\n }\n }\n\n a.focus();\n\n /**\n * Fires after a tab is completely removed from the tabset, and the close process has completed.\n *\n * @event afterclose\n * @memberof Tabs\n * @param {jQuery.Event} e event object\n * @param {jQuery} targetLi the tab list item being closed\n */\n this.element.trigger('afterclose', [targetLi]);\n\n return this;\n },\n\n /**\n * Adds a new tab into the list and properly binds all of its events\n * @param {string} tabId a string representing the HTML `id` attribute of the new tab panel.\n * @param {string} [content] representing HTML markup that will be added inside of the new tab panel.\n * @param {boolean} [doInsert=false] if true, actually appends the new content to the tab panel.\n * @returns {this} component instance\n */\n createTabPanel(tabId, content, doInsert) {\n tabId = tabId.replace(/#/g, '');\n\n // If a jQuery-wrapped element is provided, actually append the element.\n // If content is text/string, simply inline it.\n const markup = $(`
`);\n if (content instanceof $) {\n content = content[0].outerHTML;\n }\n DOM.html(markup[0], content || '', '*');\n\n if (doInsert === true) {\n this.container.append(markup);\n }\n\n this.panels = $(this.panels.add(markup));\n\n return markup;\n },\n\n /**\n * @param {jQuery} tab the tab to be checked for popupmenu items.\n * @returns {jQuery[]} a list of avaiable popupmenu items\n */\n checkPopupMenuItems(tab) {\n function getRemainingMenuItems(popupAPI) {\n if (!popupAPI || !popupAPI.menu) {\n return $();\n }\n const menu = popupAPI.menu;\n const items = menu.children('li');\n\n if (!items.length) {\n popupAPI.destroy();\n return $();\n }\n return items;\n }\n\n if (tab.is('.has-popupmenu')) {\n return getRemainingMenuItems(tab.data('popupmenu'));\n }\n\n const ddTab = tab.closest('.dropdown-tab');\n if (!ddTab.length) {\n return $();\n }\n return getRemainingMenuItems(ddTab.data('popupmenu'));\n },\n\n // @private\n getTab(e, tabId) {\n const self = this;\n const tab = $();\n\n function getTabFromEvent(ev) {\n const t = $(ev.currentTarget);\n if (t.is('.tab')) {\n return t;\n }\n if (t.closest('.tab').length) {\n return t.closest('.tab').first();\n }\n return null;\n }\n\n function getTabFromId(id) {\n if (!id || id === '' || id === '#') {\n return null;\n }\n\n if (id.indexOf('#') === -1) {\n id = `#${id}`;\n }\n\n const anchor = self.anchors.filter(`[href=\"${id}\"]`);\n if (!anchor.length) {\n return null;\n }\n\n return anchor.parent();\n }\n\n // TabId can also be a jQuery object containing a tab.\n if (tabId instanceof $ && tabId.length > 0) {\n if (tabId.is('a')) {\n return tabId.parent();\n }\n return tabId;\n }\n\n if (e) {\n return getTabFromEvent(e);\n }\n if (tabId) {\n return getTabFromId(tabId);\n }\n\n return tab;\n },\n\n // @private\n doGetTab(e, tabId) {\n if (!e && !tabId) { return $(); }\n if (e && !(e instanceof $.Event) && typeof e !== 'string') {\n return $();\n }\n\n if (e) {\n if (typeof e !== 'string') { // jQuery Event\n return this.getTab(e);\n }\n return this.getTab(null, e); // String containing a selector\n }\n\n // Straight to the TabID\n return this.getTab(null, tabId);\n },\n\n /**\n * Hides a tab\n * @param {jQuery.Event} e the jQuery Event\n * @param {string} tabId a string representing the HTML `id` attribute of the new tab panel.\n * @returns {this} component instance\n */\n hide(e, tabId) {\n const tab = this.doGetTab(e, tabId);\n\n this.activateAdjacentTab(e, tabId);\n\n tab.addClass('hidden');\n\n const a = $(this.element.find('li.tab.is-selected')[0]).find('a');\n if (a[0]) {\n this.select(a[0].hash);\n }\n\n this.positionFocusState();\n return this;\n },\n\n /**\n * Shows a tab\n * @param {jQuery.Event} e the jQuery Event\n * @param {string} tabId a string representing the HTML `id` attribute of the new tab panel.\n * @returns {this} component instance\n */\n show(e, tabId) {\n const tab = this.doGetTab(e, tabId);\n\n tab.removeClass('hidden');\n const a = $(this.element.find('li.tab.is-selected')[0]).find('a');\n if (a[0]) {\n this.select(a[0].hash);\n }\n\n this.positionFocusState();\n return this;\n },\n\n /**\n * Disables an individual tab\n * @param {jQuery.Event} e the jQuery Event\n * @param {string} tabId a string representing the HTML `id` attribute of the new tab panel.\n * @returns {this} component instance\n */\n disableTab(e, tabId) {\n const tab = this.doGetTab(e, tabId);\n\n this.activateAdjacentTab(e, tabId);\n\n tab.addClass('is-disabled');\n this.positionFocusState();\n return this;\n },\n\n /**\n * Enables an individual tab\n * @param {jQuery.Event} e the jQuery Event\n * @param {string} tabId a string representing the HTML `id` attribute of the new tab panel.\n * @returns {this} component instance\n */\n enableTab(e, tabId) {\n const tab = this.doGetTab(e, tabId);\n\n tab.removeClass('is-disabled');\n this.positionFocusState();\n return this;\n },\n\n /**\n * Renames a tab and resets the focusable bar/animation.\n * @param {jQuery.Event} e the jQuery Event\n * @param {string} tabId a string representing the HTML `id` attribute of the tab panel.\n * @param {string} name the new tab name\n * @returns {void}\n */\n rename(e, tabId, name) {\n // Backwards compatibility with 4.2.0\n if (e && typeof e === 'string') {\n name = tabId;\n tabId = e;\n }\n\n if (!name) {\n return;\n }\n name = name.toString();\n\n const tab = this.doGetTab(e, tabId);\n const hasCounts = this.settings.tabCounts;\n const hasTooltip = this.settings.moduleTabsTooltips || this.settings.multiTabsTooltips;\n const hasDismissible = tab.hasClass('dismissible');\n const anchor = tab.children('a');\n let count;\n\n if (hasCounts) {\n count = anchor.find('.count').clone();\n }\n\n anchor.text(name);\n\n // Rename the tab inside a currently-open \"More Tabs\" popupmenu, if applicable\n if (this.popupmenu) {\n const moreAnchorSelector = tabId.charAt(0) !== '#' ? `#${tabId}` : tabId;\n const moreAnchor = this.popupmenu.menu.find(`a[href=\"${moreAnchorSelector}\"]`);\n moreAnchor.text(name);\n\n if (hasDismissible) {\n moreAnchor.append($.createIconElement({ icon: 'close', classes: 'icon close' }));\n }\n }\n\n if (hasCounts) {\n anchor.prepend(count);\n }\n\n if (hasTooltip) {\n anchor.data('tooltip').setContent(name.trim());\n }\n\n const doesTabExist = this.tablist.children('li').length < 2 ? tab : undefined;\n\n this.positionFocusState(doesTabExist);\n },\n\n /**\n * For tabs with counts, updates the count and resets the focusable bar/animation\n * @param {jQuery.Event} e the jQuery Event\n * @param {string} tabId a string representing the HTML `id` attribute of the new tab panel.\n * @param {number|string} count the new tab count\n * @returns {void}\n */\n updateCount(e, tabId, count) {\n // Backwards compatibility with 4.2.0\n if (e && typeof e === 'string') {\n count = tabId;\n tabId = e;\n }\n\n if (!this.settings.tabCounts || !count) {\n return;\n }\n\n const tab = this.doGetTab(e, tabId);\n\n tab.children('a').find('.count').text(`${count.toString()} `);\n\n const doesTabExist = this.tablist.children('li').length < 2 ? tab : undefined;\n\n this.positionFocusState(doesTabExist);\n },\n\n /**\n * returns the currently active tab\n * @returns {jQuery} the currently active tab anchor\n */\n getActiveTab() {\n const visible = this.panels.filter(':visible');\n return this.anchors.filter(`[href=\"#${visible.first().attr('id')}\"]`);\n },\n\n /**\n * returns all visible tabs\n * @returns {jQuery[]} all visible tabs\n */\n getVisibleTabs() {\n const self = this;\n let tabHash = $();\n\n this.tablist.find('li:not(.separator):not(.hidden):not(.is-disabled):not(.application-menu-trigger)')\n .each(function tabOverflowIterator() {\n const tab = $(this);\n\n if (!self.isTabOverflowed(tab)) {\n tabHash = tabHash.add(tab);\n }\n });\n\n return tabHash;\n },\n\n /**\n * returns a list of all tabs that are currently in the \"More...\" overflow menu.\n * @returns {jQuery[]} all overflowed tabs\n */\n getOverflowTabs() {\n const self = this;\n let tabHash = $();\n\n this.tablist.find('li:not(.separator):not(.hidden):not(.is-disabled):not(.application-menu-trigger)')\n .each(function tabOverflowIterator() {\n const tab = $(this);\n\n if (self.isTabOverflowed(tab)) {\n tabHash = tabHash.add(tab);\n }\n });\n\n return tabHash;\n },\n\n /**\n * @private\n * @returns {void}\n */\n setOverflow() {\n const self = this;\n const elem = this.element[0];\n const tablist = this.tablist[0];\n const HAS_MORE = 'has-more-button';\n const hasMoreIndex = this.hasMoreButton();\n const isScrollableTabs = this.isScrollableTabs();\n\n function checkModuleTabs() {\n if (self.isModuleTabs()) {\n self.adjustModuleTabs();\n }\n }\n\n // Recalc tab width before detection of overflow\n checkModuleTabs();\n\n let tablistStyle;\n let tablistHeight;\n let tablistContainerScrollWidth;\n let tablistContainerWidth;\n let overflowCondition;\n\n if (isScrollableTabs) {\n tablistContainerScrollWidth = this.tablistContainer[0].scrollWidth;\n tablistContainerWidth = this.tablistContainer[0].offsetWidth;\n overflowCondition = tablistContainerScrollWidth > tablistContainerWidth;\n } else {\n tablistStyle = window.getComputedStyle(tablist, null);\n tablistHeight = parseInt(tablistStyle.getPropertyValue('height'), 10) + 1; // +1 to fix an IE bug\n overflowCondition = tablist.scrollHeight > tablistHeight; // Normal tabs check the height\n }\n\n // Add \"has-more-button\" class if we need it, remove it if we don't\n // Always display the more button on Scrollable Tabs\n if (overflowCondition) {\n if (!hasMoreIndex) {\n elem.classList.add(HAS_MORE);\n checkModuleTabs();\n }\n } else if (hasMoreIndex) {\n elem.classList.remove(HAS_MORE);\n checkModuleTabs();\n }\n\n this.adjustSpilloverNumber();\n },\n\n /**\n * @private\n * @returns {void}\n */\n adjustModuleTabs() {\n const self = this;\n let sizeableTabs = this.tablist.find('li:not(.separator):not(.application-menu-trigger):not(:hidden)');\n const appTrigger = this.tablist.find('.application-menu-trigger');\n const hasAppTrigger = appTrigger.length > 0;\n const tabContainerW = this.tablist.outerWidth();\n const defaultTabSize = 120;\n let visibleTabSize = 120;\n const appTriggerSize = (hasAppTrigger ? appTrigger.outerWidth() : 0);\n\n // Remove overflowed tabs\n sizeableTabs.children('a').removeAttr('style');\n sizeableTabs.removeAttr('style').each(function () {\n const t = $(this);\n if (self.isTabOverflowed(t)) {\n sizeableTabs = sizeableTabs.not(t);\n }\n });\n\n // Resize the more button to fit the entire space if no tabs can show\n // Math: +101 is the padding of the
element\n if (!sizeableTabs.length) {\n visibleTabSize = (tabContainerW - appTriggerSize + 101);\n this.moreButton[0].style.width = `${visibleTabSize}px`;\n return;\n }\n const anchorStyle = window.getComputedStyle(sizeableTabs.eq(0).children()[0]);\n const anchorPadding = parseInt(anchorStyle.paddingLeft, 10) +\n parseInt(anchorStyle.paddingRight, 10);\n\n if (this.moreButton[0].hasAttribute('style')) {\n this.moreButton[0].removeAttribute('style');\n }\n\n // Math explanation:\n // Width of tab container - possible applcation menu trigger\n // Divided by number of visible tabs\n // (doesn't include app menu trigger which shouldn't change size).\n // Minus one (for the left-side border of each tab)\n // visibleTabSize = ((tabContainerW - appTriggerSize) / sizeableTabs.length - 1);\n visibleTabSize = ((tabContainerW - appTriggerSize) / sizeableTabs.length);\n\n if (visibleTabSize < defaultTabSize) {\n visibleTabSize = defaultTabSize;\n }\n\n let a;\n let prevWidth;\n let cutoff = 'no';\n const isSideBySide = this.element.closest('.side-by-side').length === 1;\n\n for (let i = 0; i < sizeableTabs.length; i++) {\n a = sizeableTabs.eq(i).children('a');\n a[0].style.width = '';\n if (this.settings.moduleTabsTooltips === true || this.settings.multiTabsTooltips) {\n cutoff = 'no';\n\n prevWidth = parseInt(window.getComputedStyle(sizeableTabs[i]).width, 10);\n\n if (prevWidth > (visibleTabSize - anchorPadding)) {\n cutoff = 'yes';\n }\n a.data('cutoffTitle', cutoff);\n }\n\n let diff = 0;\n if (env.os.name === 'ios' && env.devicespecs.isMobile && isSideBySide) {\n diff = 25;\n }\n sizeableTabs[i].style.width = `${visibleTabSize - diff}px`;\n a[0].style.width = `${visibleTabSize - diff}px`;\n }\n\n this.adjustSpilloverNumber();\n },\n\n /**\n * @private\n * @returns {void}\n */\n adjustSpilloverNumber() {\n const moreDiv = this.moreButton.find('.more-text');\n const tabs = this.tablist.find('li:not(.separator):not(.hidden):not(.is-disabled):not(.application-menu-trigger)');\n const overflowedTabs = this.getOverflowTabs();\n\n if (tabs.length <= overflowedTabs.length) {\n moreDiv.text(`${Locale.translate('Tabs')}`);\n } else {\n moreDiv.text(`${Locale.translate('More')}`);\n }\n\n let countDiv = this.moreButton.find('.count');\n if (!countDiv.length) {\n countDiv = $('