\n * @license MIT\n */\nfunction ownKeys(object, enumerableOnly) {\n var keys = Object.keys(object);\n\n if (Object.getOwnPropertySymbols) {\n var symbols = Object.getOwnPropertySymbols(object);\n\n if (enumerableOnly) {\n symbols = symbols.filter(function (sym) {\n return Object.getOwnPropertyDescriptor(object, sym).enumerable;\n });\n }\n\n keys.push.apply(keys, symbols);\n }\n\n return keys;\n}\n\nfunction _objectSpread2(target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i] != null ? arguments[i] : {};\n\n if (i % 2) {\n ownKeys(Object(source), true).forEach(function (key) {\n _defineProperty(target, key, source[key]);\n });\n } else if (Object.getOwnPropertyDescriptors) {\n Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));\n } else {\n ownKeys(Object(source)).forEach(function (key) {\n Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));\n });\n }\n }\n\n return target;\n}\n\nfunction _typeof(obj) {\n \"@babel/helpers - typeof\";\n\n if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") {\n _typeof = function (obj) {\n return typeof obj;\n };\n } else {\n _typeof = function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n };\n }\n\n return _typeof(obj);\n}\n\nfunction _defineProperty(obj, key, value) {\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n\n return obj;\n}\n\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n\n return target;\n };\n\n return _extends.apply(this, arguments);\n}\n\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n\n return target;\n}\n\nfunction _objectWithoutProperties(source, excluded) {\n if (source == null) return {};\n\n var target = _objectWithoutPropertiesLoose(source, excluded);\n\n var key, i;\n\n if (Object.getOwnPropertySymbols) {\n var sourceSymbolKeys = Object.getOwnPropertySymbols(source);\n\n for (i = 0; i < sourceSymbolKeys.length; i++) {\n key = sourceSymbolKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;\n target[key] = source[key];\n }\n }\n\n return target;\n}\n\nfunction _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n}\n\nfunction _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) return _arrayLikeToArray(arr);\n}\n\nfunction _iterableToArray(iter) {\n if (typeof Symbol !== \"undefined\" && iter[Symbol.iterator] != null || iter[\"@@iterator\"] != null) return Array.from(iter);\n}\n\nfunction _unsupportedIterableToArray(o, minLen) {\n if (!o) return;\n if (typeof o === \"string\") return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === \"Object\" && o.constructor) n = o.constructor.name;\n if (n === \"Map\" || n === \"Set\") return Array.from(o);\n if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);\n}\n\nfunction _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length) len = arr.length;\n\n for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n\n return arr2;\n}\n\nfunction _nonIterableSpread() {\n throw new TypeError(\"Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}\n\nvar version = \"1.14.0\";\n\nfunction userAgent(pattern) {\n if (typeof window !== 'undefined' && window.navigator) {\n return !! /*@__PURE__*/navigator.userAgent.match(pattern);\n }\n}\n\nvar IE11OrLess = userAgent(/(?:Trident.*rv[ :]?11\\.|msie|iemobile|Windows Phone)/i);\nvar Edge = userAgent(/Edge/i);\nvar FireFox = userAgent(/firefox/i);\nvar Safari = userAgent(/safari/i) && !userAgent(/chrome/i) && !userAgent(/android/i);\nvar IOS = userAgent(/iP(ad|od|hone)/i);\nvar ChromeForAndroid = userAgent(/chrome/i) && userAgent(/android/i);\n\nvar captureMode = {\n capture: false,\n passive: false\n};\n\nfunction on(el, event, fn) {\n el.addEventListener(event, fn, !IE11OrLess && captureMode);\n}\n\nfunction off(el, event, fn) {\n el.removeEventListener(event, fn, !IE11OrLess && captureMode);\n}\n\nfunction matches(\n/**HTMLElement*/\nel,\n/**String*/\nselector) {\n if (!selector) return;\n selector[0] === '>' && (selector = selector.substring(1));\n\n if (el) {\n try {\n if (el.matches) {\n return el.matches(selector);\n } else if (el.msMatchesSelector) {\n return el.msMatchesSelector(selector);\n } else if (el.webkitMatchesSelector) {\n return el.webkitMatchesSelector(selector);\n }\n } catch (_) {\n return false;\n }\n }\n\n return false;\n}\n\nfunction getParentOrHost(el) {\n return el.host && el !== document && el.host.nodeType ? el.host : el.parentNode;\n}\n\nfunction closest(\n/**HTMLElement*/\nel,\n/**String*/\nselector,\n/**HTMLElement*/\nctx, includeCTX) {\n if (el) {\n ctx = ctx || document;\n\n do {\n if (selector != null && (selector[0] === '>' ? el.parentNode === ctx && matches(el, selector) : matches(el, selector)) || includeCTX && el === ctx) {\n return el;\n }\n\n if (el === ctx) break;\n /* jshint boss:true */\n } while (el = getParentOrHost(el));\n }\n\n return null;\n}\n\nvar R_SPACE = /\\s+/g;\n\nfunction toggleClass(el, name, state) {\n if (el && name) {\n if (el.classList) {\n el.classList[state ? 'add' : 'remove'](name);\n } else {\n var className = (' ' + el.className + ' ').replace(R_SPACE, ' ').replace(' ' + name + ' ', ' ');\n el.className = (className + (state ? ' ' + name : '')).replace(R_SPACE, ' ');\n }\n }\n}\n\nfunction css(el, prop, val) {\n var style = el && el.style;\n\n if (style) {\n if (val === void 0) {\n if (document.defaultView && document.defaultView.getComputedStyle) {\n val = document.defaultView.getComputedStyle(el, '');\n } else if (el.currentStyle) {\n val = el.currentStyle;\n }\n\n return prop === void 0 ? val : val[prop];\n } else {\n if (!(prop in style) && prop.indexOf('webkit') === -1) {\n prop = '-webkit-' + prop;\n }\n\n style[prop] = val + (typeof val === 'string' ? '' : 'px');\n }\n }\n}\n\nfunction matrix(el, selfOnly) {\n var appliedTransforms = '';\n\n if (typeof el === 'string') {\n appliedTransforms = el;\n } else {\n do {\n var transform = css(el, 'transform');\n\n if (transform && transform !== 'none') {\n appliedTransforms = transform + ' ' + appliedTransforms;\n }\n /* jshint boss:true */\n\n } while (!selfOnly && (el = el.parentNode));\n }\n\n var matrixFn = window.DOMMatrix || window.WebKitCSSMatrix || window.CSSMatrix || window.MSCSSMatrix;\n /*jshint -W056 */\n\n return matrixFn && new matrixFn(appliedTransforms);\n}\n\nfunction find(ctx, tagName, iterator) {\n if (ctx) {\n var list = ctx.getElementsByTagName(tagName),\n i = 0,\n n = list.length;\n\n if (iterator) {\n for (; i < n; i++) {\n iterator(list[i], i);\n }\n }\n\n return list;\n }\n\n return [];\n}\n\nfunction getWindowScrollingElement() {\n var scrollingElement = document.scrollingElement;\n\n if (scrollingElement) {\n return scrollingElement;\n } else {\n return document.documentElement;\n }\n}\n/**\n * Returns the \"bounding client rect\" of given element\n * @param {HTMLElement} el The element whose boundingClientRect is wanted\n * @param {[Boolean]} relativeToContainingBlock Whether the rect should be relative to the containing block of (including) the container\n * @param {[Boolean]} relativeToNonStaticParent Whether the rect should be relative to the relative parent of (including) the contaienr\n * @param {[Boolean]} undoScale Whether the container's scale() should be undone\n * @param {[HTMLElement]} container The parent the element will be placed in\n * @return {Object} The boundingClientRect of el, with specified adjustments\n */\n\n\nfunction getRect(el, relativeToContainingBlock, relativeToNonStaticParent, undoScale, container) {\n if (!el.getBoundingClientRect && el !== window) return;\n var elRect, top, left, bottom, right, height, width;\n\n if (el !== window && el.parentNode && el !== getWindowScrollingElement()) {\n elRect = el.getBoundingClientRect();\n top = elRect.top;\n left = elRect.left;\n bottom = elRect.bottom;\n right = elRect.right;\n height = elRect.height;\n width = elRect.width;\n } else {\n top = 0;\n left = 0;\n bottom = window.innerHeight;\n right = window.innerWidth;\n height = window.innerHeight;\n width = window.innerWidth;\n }\n\n if ((relativeToContainingBlock || relativeToNonStaticParent) && el !== window) {\n // Adjust for translate()\n container = container || el.parentNode; // solves #1123 (see: https://stackoverflow.com/a/37953806/6088312)\n // Not needed on <= IE11\n\n if (!IE11OrLess) {\n do {\n if (container && container.getBoundingClientRect && (css(container, 'transform') !== 'none' || relativeToNonStaticParent && css(container, 'position') !== 'static')) {\n var containerRect = container.getBoundingClientRect(); // Set relative to edges of padding box of container\n\n top -= containerRect.top + parseInt(css(container, 'border-top-width'));\n left -= containerRect.left + parseInt(css(container, 'border-left-width'));\n bottom = top + elRect.height;\n right = left + elRect.width;\n break;\n }\n /* jshint boss:true */\n\n } while (container = container.parentNode);\n }\n }\n\n if (undoScale && el !== window) {\n // Adjust for scale()\n var elMatrix = matrix(container || el),\n scaleX = elMatrix && elMatrix.a,\n scaleY = elMatrix && elMatrix.d;\n\n if (elMatrix) {\n top /= scaleY;\n left /= scaleX;\n width /= scaleX;\n height /= scaleY;\n bottom = top + height;\n right = left + width;\n }\n }\n\n return {\n top: top,\n left: left,\n bottom: bottom,\n right: right,\n width: width,\n height: height\n };\n}\n/**\n * Checks if a side of an element is scrolled past a side of its parents\n * @param {HTMLElement} el The element who's side being scrolled out of view is in question\n * @param {String} elSide Side of the element in question ('top', 'left', 'right', 'bottom')\n * @param {String} parentSide Side of the parent in question ('top', 'left', 'right', 'bottom')\n * @return {HTMLElement} The parent scroll element that the el's side is scrolled past, or null if there is no such element\n */\n\n\nfunction isScrolledPast(el, elSide, parentSide) {\n var parent = getParentAutoScrollElement(el, true),\n elSideVal = getRect(el)[elSide];\n /* jshint boss:true */\n\n while (parent) {\n var parentSideVal = getRect(parent)[parentSide],\n visible = void 0;\n\n if (parentSide === 'top' || parentSide === 'left') {\n visible = elSideVal >= parentSideVal;\n } else {\n visible = elSideVal <= parentSideVal;\n }\n\n if (!visible) return parent;\n if (parent === getWindowScrollingElement()) break;\n parent = getParentAutoScrollElement(parent, false);\n }\n\n return false;\n}\n/**\n * Gets nth child of el, ignoring hidden children, sortable's elements (does not ignore clone if it's visible)\n * and non-draggable elements\n * @param {HTMLElement} el The parent element\n * @param {Number} childNum The index of the child\n * @param {Object} options Parent Sortable's options\n * @return {HTMLElement} The child at index childNum, or null if not found\n */\n\n\nfunction getChild(el, childNum, options, includeDragEl) {\n var currentChild = 0,\n i = 0,\n children = el.children;\n\n while (i < children.length) {\n if (children[i].style.display !== 'none' && children[i] !== Sortable.ghost && (includeDragEl || children[i] !== Sortable.dragged) && closest(children[i], options.draggable, el, false)) {\n if (currentChild === childNum) {\n return children[i];\n }\n\n currentChild++;\n }\n\n i++;\n }\n\n return null;\n}\n/**\n * Gets the last child in the el, ignoring ghostEl or invisible elements (clones)\n * @param {HTMLElement} el Parent element\n * @param {selector} selector Any other elements that should be ignored\n * @return {HTMLElement} The last child, ignoring ghostEl\n */\n\n\nfunction lastChild(el, selector) {\n var last = el.lastElementChild;\n\n while (last && (last === Sortable.ghost || css(last, 'display') === 'none' || selector && !matches(last, selector))) {\n last = last.previousElementSibling;\n }\n\n return last || null;\n}\n/**\n * Returns the index of an element within its parent for a selected set of\n * elements\n * @param {HTMLElement} el\n * @param {selector} selector\n * @return {number}\n */\n\n\nfunction index(el, selector) {\n var index = 0;\n\n if (!el || !el.parentNode) {\n return -1;\n }\n /* jshint boss:true */\n\n\n while (el = el.previousElementSibling) {\n if (el.nodeName.toUpperCase() !== 'TEMPLATE' && el !== Sortable.clone && (!selector || matches(el, selector))) {\n index++;\n }\n }\n\n return index;\n}\n/**\n * Returns the scroll offset of the given element, added with all the scroll offsets of parent elements.\n * The value is returned in real pixels.\n * @param {HTMLElement} el\n * @return {Array} Offsets in the format of [left, top]\n */\n\n\nfunction getRelativeScrollOffset(el) {\n var offsetLeft = 0,\n offsetTop = 0,\n winScroller = getWindowScrollingElement();\n\n if (el) {\n do {\n var elMatrix = matrix(el),\n scaleX = elMatrix.a,\n scaleY = elMatrix.d;\n offsetLeft += el.scrollLeft * scaleX;\n offsetTop += el.scrollTop * scaleY;\n } while (el !== winScroller && (el = el.parentNode));\n }\n\n return [offsetLeft, offsetTop];\n}\n/**\n * Returns the index of the object within the given array\n * @param {Array} arr Array that may or may not hold the object\n * @param {Object} obj An object that has a key-value pair unique to and identical to a key-value pair in the object you want to find\n * @return {Number} The index of the object in the array, or -1\n */\n\n\nfunction indexOfObject(arr, obj) {\n for (var i in arr) {\n if (!arr.hasOwnProperty(i)) continue;\n\n for (var key in obj) {\n if (obj.hasOwnProperty(key) && obj[key] === arr[i][key]) return Number(i);\n }\n }\n\n return -1;\n}\n\nfunction getParentAutoScrollElement(el, includeSelf) {\n // skip to window\n if (!el || !el.getBoundingClientRect) return getWindowScrollingElement();\n var elem = el;\n var gotSelf = false;\n\n do {\n // we don't need to get elem css if it isn't even overflowing in the first place (performance)\n if (elem.clientWidth < elem.scrollWidth || elem.clientHeight < elem.scrollHeight) {\n var elemCSS = css(elem);\n\n if (elem.clientWidth < elem.scrollWidth && (elemCSS.overflowX == 'auto' || elemCSS.overflowX == 'scroll') || elem.clientHeight < elem.scrollHeight && (elemCSS.overflowY == 'auto' || elemCSS.overflowY == 'scroll')) {\n if (!elem.getBoundingClientRect || elem === document.body) return getWindowScrollingElement();\n if (gotSelf || includeSelf) return elem;\n gotSelf = true;\n }\n }\n /* jshint boss:true */\n\n } while (elem = elem.parentNode);\n\n return getWindowScrollingElement();\n}\n\nfunction extend(dst, src) {\n if (dst && src) {\n for (var key in src) {\n if (src.hasOwnProperty(key)) {\n dst[key] = src[key];\n }\n }\n }\n\n return dst;\n}\n\nfunction isRectEqual(rect1, rect2) {\n return Math.round(rect1.top) === Math.round(rect2.top) && Math.round(rect1.left) === Math.round(rect2.left) && Math.round(rect1.height) === Math.round(rect2.height) && Math.round(rect1.width) === Math.round(rect2.width);\n}\n\nvar _throttleTimeout;\n\nfunction throttle(callback, ms) {\n return function () {\n if (!_throttleTimeout) {\n var args = arguments,\n _this = this;\n\n if (args.length === 1) {\n callback.call(_this, args[0]);\n } else {\n callback.apply(_this, args);\n }\n\n _throttleTimeout = setTimeout(function () {\n _throttleTimeout = void 0;\n }, ms);\n }\n };\n}\n\nfunction cancelThrottle() {\n clearTimeout(_throttleTimeout);\n _throttleTimeout = void 0;\n}\n\nfunction scrollBy(el, x, y) {\n el.scrollLeft += x;\n el.scrollTop += y;\n}\n\nfunction clone(el) {\n var Polymer = window.Polymer;\n var $ = window.jQuery || window.Zepto;\n\n if (Polymer && Polymer.dom) {\n return Polymer.dom(el).cloneNode(true);\n } else if ($) {\n return $(el).clone(true)[0];\n } else {\n return el.cloneNode(true);\n }\n}\n\nfunction setRect(el, rect) {\n css(el, 'position', 'absolute');\n css(el, 'top', rect.top);\n css(el, 'left', rect.left);\n css(el, 'width', rect.width);\n css(el, 'height', rect.height);\n}\n\nfunction unsetRect(el) {\n css(el, 'position', '');\n css(el, 'top', '');\n css(el, 'left', '');\n css(el, 'width', '');\n css(el, 'height', '');\n}\n\nvar expando = 'Sortable' + new Date().getTime();\n\nfunction AnimationStateManager() {\n var animationStates = [],\n animationCallbackId;\n return {\n captureAnimationState: function captureAnimationState() {\n animationStates = [];\n if (!this.options.animation) return;\n var children = [].slice.call(this.el.children);\n children.forEach(function (child) {\n if (css(child, 'display') === 'none' || child === Sortable.ghost) return;\n animationStates.push({\n target: child,\n rect: getRect(child)\n });\n\n var fromRect = _objectSpread2({}, animationStates[animationStates.length - 1].rect); // If animating: compensate for current animation\n\n\n if (child.thisAnimationDuration) {\n var childMatrix = matrix(child, true);\n\n if (childMatrix) {\n fromRect.top -= childMatrix.f;\n fromRect.left -= childMatrix.e;\n }\n }\n\n child.fromRect = fromRect;\n });\n },\n addAnimationState: function addAnimationState(state) {\n animationStates.push(state);\n },\n removeAnimationState: function removeAnimationState(target) {\n animationStates.splice(indexOfObject(animationStates, {\n target: target\n }), 1);\n },\n animateAll: function animateAll(callback) {\n var _this = this;\n\n if (!this.options.animation) {\n clearTimeout(animationCallbackId);\n if (typeof callback === 'function') callback();\n return;\n }\n\n var animating = false,\n animationTime = 0;\n animationStates.forEach(function (state) {\n var time = 0,\n target = state.target,\n fromRect = target.fromRect,\n toRect = getRect(target),\n prevFromRect = target.prevFromRect,\n prevToRect = target.prevToRect,\n animatingRect = state.rect,\n targetMatrix = matrix(target, true);\n\n if (targetMatrix) {\n // Compensate for current animation\n toRect.top -= targetMatrix.f;\n toRect.left -= targetMatrix.e;\n }\n\n target.toRect = toRect;\n\n if (target.thisAnimationDuration) {\n // Could also check if animatingRect is between fromRect and toRect\n if (isRectEqual(prevFromRect, toRect) && !isRectEqual(fromRect, toRect) && // Make sure animatingRect is on line between toRect & fromRect\n (animatingRect.top - toRect.top) / (animatingRect.left - toRect.left) === (fromRect.top - toRect.top) / (fromRect.left - toRect.left)) {\n // If returning to same place as started from animation and on same axis\n time = calculateRealTime(animatingRect, prevFromRect, prevToRect, _this.options);\n }\n } // if fromRect != toRect: animate\n\n\n if (!isRectEqual(toRect, fromRect)) {\n target.prevFromRect = fromRect;\n target.prevToRect = toRect;\n\n if (!time) {\n time = _this.options.animation;\n }\n\n _this.animate(target, animatingRect, toRect, time);\n }\n\n if (time) {\n animating = true;\n animationTime = Math.max(animationTime, time);\n clearTimeout(target.animationResetTimer);\n target.animationResetTimer = setTimeout(function () {\n target.animationTime = 0;\n target.prevFromRect = null;\n target.fromRect = null;\n target.prevToRect = null;\n target.thisAnimationDuration = null;\n }, time);\n target.thisAnimationDuration = time;\n }\n });\n clearTimeout(animationCallbackId);\n\n if (!animating) {\n if (typeof callback === 'function') callback();\n } else {\n animationCallbackId = setTimeout(function () {\n if (typeof callback === 'function') callback();\n }, animationTime);\n }\n\n animationStates = [];\n },\n animate: function animate(target, currentRect, toRect, duration) {\n if (duration) {\n css(target, 'transition', '');\n css(target, 'transform', '');\n var elMatrix = matrix(this.el),\n scaleX = elMatrix && elMatrix.a,\n scaleY = elMatrix && elMatrix.d,\n translateX = (currentRect.left - toRect.left) / (scaleX || 1),\n translateY = (currentRect.top - toRect.top) / (scaleY || 1);\n target.animatingX = !!translateX;\n target.animatingY = !!translateY;\n css(target, 'transform', 'translate3d(' + translateX + 'px,' + translateY + 'px,0)');\n this.forRepaintDummy = repaint(target); // repaint\n\n css(target, 'transition', 'transform ' + duration + 'ms' + (this.options.easing ? ' ' + this.options.easing : ''));\n css(target, 'transform', 'translate3d(0,0,0)');\n typeof target.animated === 'number' && clearTimeout(target.animated);\n target.animated = setTimeout(function () {\n css(target, 'transition', '');\n css(target, 'transform', '');\n target.animated = false;\n target.animatingX = false;\n target.animatingY = false;\n }, duration);\n }\n }\n };\n}\n\nfunction repaint(target) {\n return target.offsetWidth;\n}\n\nfunction calculateRealTime(animatingRect, fromRect, toRect, options) {\n return Math.sqrt(Math.pow(fromRect.top - animatingRect.top, 2) + Math.pow(fromRect.left - animatingRect.left, 2)) / Math.sqrt(Math.pow(fromRect.top - toRect.top, 2) + Math.pow(fromRect.left - toRect.left, 2)) * options.animation;\n}\n\nvar plugins = [];\nvar defaults = {\n initializeByDefault: true\n};\nvar PluginManager = {\n mount: function mount(plugin) {\n // Set default static properties\n for (var option in defaults) {\n if (defaults.hasOwnProperty(option) && !(option in plugin)) {\n plugin[option] = defaults[option];\n }\n }\n\n plugins.forEach(function (p) {\n if (p.pluginName === plugin.pluginName) {\n throw \"Sortable: Cannot mount plugin \".concat(plugin.pluginName, \" more than once\");\n }\n });\n plugins.push(plugin);\n },\n pluginEvent: function pluginEvent(eventName, sortable, evt) {\n var _this = this;\n\n this.eventCanceled = false;\n\n evt.cancel = function () {\n _this.eventCanceled = true;\n };\n\n var eventNameGlobal = eventName + 'Global';\n plugins.forEach(function (plugin) {\n if (!sortable[plugin.pluginName]) return; // Fire global events if it exists in this sortable\n\n if (sortable[plugin.pluginName][eventNameGlobal]) {\n sortable[plugin.pluginName][eventNameGlobal](_objectSpread2({\n sortable: sortable\n }, evt));\n } // Only fire plugin event if plugin is enabled in this sortable,\n // and plugin has event defined\n\n\n if (sortable.options[plugin.pluginName] && sortable[plugin.pluginName][eventName]) {\n sortable[plugin.pluginName][eventName](_objectSpread2({\n sortable: sortable\n }, evt));\n }\n });\n },\n initializePlugins: function initializePlugins(sortable, el, defaults, options) {\n plugins.forEach(function (plugin) {\n var pluginName = plugin.pluginName;\n if (!sortable.options[pluginName] && !plugin.initializeByDefault) return;\n var initialized = new plugin(sortable, el, sortable.options);\n initialized.sortable = sortable;\n initialized.options = sortable.options;\n sortable[pluginName] = initialized; // Add default options from plugin\n\n _extends(defaults, initialized.defaults);\n });\n\n for (var option in sortable.options) {\n if (!sortable.options.hasOwnProperty(option)) continue;\n var modified = this.modifyOption(sortable, option, sortable.options[option]);\n\n if (typeof modified !== 'undefined') {\n sortable.options[option] = modified;\n }\n }\n },\n getEventProperties: function getEventProperties(name, sortable) {\n var eventProperties = {};\n plugins.forEach(function (plugin) {\n if (typeof plugin.eventProperties !== 'function') return;\n\n _extends(eventProperties, plugin.eventProperties.call(sortable[plugin.pluginName], name));\n });\n return eventProperties;\n },\n modifyOption: function modifyOption(sortable, name, value) {\n var modifiedValue;\n plugins.forEach(function (plugin) {\n // Plugin must exist on the Sortable\n if (!sortable[plugin.pluginName]) return; // If static option listener exists for this option, call in the context of the Sortable's instance of this plugin\n\n if (plugin.optionListeners && typeof plugin.optionListeners[name] === 'function') {\n modifiedValue = plugin.optionListeners[name].call(sortable[plugin.pluginName], value);\n }\n });\n return modifiedValue;\n }\n};\n\nfunction dispatchEvent(_ref) {\n var sortable = _ref.sortable,\n rootEl = _ref.rootEl,\n name = _ref.name,\n targetEl = _ref.targetEl,\n cloneEl = _ref.cloneEl,\n toEl = _ref.toEl,\n fromEl = _ref.fromEl,\n oldIndex = _ref.oldIndex,\n newIndex = _ref.newIndex,\n oldDraggableIndex = _ref.oldDraggableIndex,\n newDraggableIndex = _ref.newDraggableIndex,\n originalEvent = _ref.originalEvent,\n putSortable = _ref.putSortable,\n extraEventProperties = _ref.extraEventProperties;\n sortable = sortable || rootEl && rootEl[expando];\n if (!sortable) return;\n var evt,\n options = sortable.options,\n onName = 'on' + name.charAt(0).toUpperCase() + name.substr(1); // Support for new CustomEvent feature\n\n if (window.CustomEvent && !IE11OrLess && !Edge) {\n evt = new CustomEvent(name, {\n bubbles: true,\n cancelable: true\n });\n } else {\n evt = document.createEvent('Event');\n evt.initEvent(name, true, true);\n }\n\n evt.to = toEl || rootEl;\n evt.from = fromEl || rootEl;\n evt.item = targetEl || rootEl;\n evt.clone = cloneEl;\n evt.oldIndex = oldIndex;\n evt.newIndex = newIndex;\n evt.oldDraggableIndex = oldDraggableIndex;\n evt.newDraggableIndex = newDraggableIndex;\n evt.originalEvent = originalEvent;\n evt.pullMode = putSortable ? putSortable.lastPutMode : undefined;\n\n var allEventProperties = _objectSpread2(_objectSpread2({}, extraEventProperties), PluginManager.getEventProperties(name, sortable));\n\n for (var option in allEventProperties) {\n evt[option] = allEventProperties[option];\n }\n\n if (rootEl) {\n rootEl.dispatchEvent(evt);\n }\n\n if (options[onName]) {\n options[onName].call(sortable, evt);\n }\n}\n\nvar _excluded = [\"evt\"];\n\nvar pluginEvent = function pluginEvent(eventName, sortable) {\n var _ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {},\n originalEvent = _ref.evt,\n data = _objectWithoutProperties(_ref, _excluded);\n\n PluginManager.pluginEvent.bind(Sortable)(eventName, sortable, _objectSpread2({\n dragEl: dragEl,\n parentEl: parentEl,\n ghostEl: ghostEl,\n rootEl: rootEl,\n nextEl: nextEl,\n lastDownEl: lastDownEl,\n cloneEl: cloneEl,\n cloneHidden: cloneHidden,\n dragStarted: moved,\n putSortable: putSortable,\n activeSortable: Sortable.active,\n originalEvent: originalEvent,\n oldIndex: oldIndex,\n oldDraggableIndex: oldDraggableIndex,\n newIndex: newIndex,\n newDraggableIndex: newDraggableIndex,\n hideGhostForTarget: _hideGhostForTarget,\n unhideGhostForTarget: _unhideGhostForTarget,\n cloneNowHidden: function cloneNowHidden() {\n cloneHidden = true;\n },\n cloneNowShown: function cloneNowShown() {\n cloneHidden = false;\n },\n dispatchSortableEvent: function dispatchSortableEvent(name) {\n _dispatchEvent({\n sortable: sortable,\n name: name,\n originalEvent: originalEvent\n });\n }\n }, data));\n};\n\nfunction _dispatchEvent(info) {\n dispatchEvent(_objectSpread2({\n putSortable: putSortable,\n cloneEl: cloneEl,\n targetEl: dragEl,\n rootEl: rootEl,\n oldIndex: oldIndex,\n oldDraggableIndex: oldDraggableIndex,\n newIndex: newIndex,\n newDraggableIndex: newDraggableIndex\n }, info));\n}\n\nvar dragEl,\n parentEl,\n ghostEl,\n rootEl,\n nextEl,\n lastDownEl,\n cloneEl,\n cloneHidden,\n oldIndex,\n newIndex,\n oldDraggableIndex,\n newDraggableIndex,\n activeGroup,\n putSortable,\n awaitingDragStarted = false,\n ignoreNextClick = false,\n sortables = [],\n tapEvt,\n touchEvt,\n lastDx,\n lastDy,\n tapDistanceLeft,\n tapDistanceTop,\n moved,\n lastTarget,\n lastDirection,\n pastFirstInvertThresh = false,\n isCircumstantialInvert = false,\n targetMoveDistance,\n // For positioning ghost absolutely\nghostRelativeParent,\n ghostRelativeParentInitialScroll = [],\n // (left, top)\n_silent = false,\n savedInputChecked = [];\n/** @const */\n\nvar documentExists = typeof document !== 'undefined',\n PositionGhostAbsolutely = IOS,\n CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float',\n // This will not pass for IE9, because IE9 DnD only works on anchors\nsupportDraggable = documentExists && !ChromeForAndroid && !IOS && 'draggable' in document.createElement('div'),\n supportCssPointerEvents = function () {\n if (!documentExists) return; // false when <= IE11\n\n if (IE11OrLess) {\n return false;\n }\n\n var el = document.createElement('x');\n el.style.cssText = 'pointer-events:auto';\n return el.style.pointerEvents === 'auto';\n}(),\n _detectDirection = function _detectDirection(el, options) {\n var elCSS = css(el),\n elWidth = parseInt(elCSS.width) - parseInt(elCSS.paddingLeft) - parseInt(elCSS.paddingRight) - parseInt(elCSS.borderLeftWidth) - parseInt(elCSS.borderRightWidth),\n child1 = getChild(el, 0, options),\n child2 = getChild(el, 1, options),\n firstChildCSS = child1 && css(child1),\n secondChildCSS = child2 && css(child2),\n firstChildWidth = firstChildCSS && parseInt(firstChildCSS.marginLeft) + parseInt(firstChildCSS.marginRight) + getRect(child1).width,\n secondChildWidth = secondChildCSS && parseInt(secondChildCSS.marginLeft) + parseInt(secondChildCSS.marginRight) + getRect(child2).width;\n\n if (elCSS.display === 'flex') {\n return elCSS.flexDirection === 'column' || elCSS.flexDirection === 'column-reverse' ? 'vertical' : 'horizontal';\n }\n\n if (elCSS.display === 'grid') {\n return elCSS.gridTemplateColumns.split(' ').length <= 1 ? 'vertical' : 'horizontal';\n }\n\n if (child1 && firstChildCSS[\"float\"] && firstChildCSS[\"float\"] !== 'none') {\n var touchingSideChild2 = firstChildCSS[\"float\"] === 'left' ? 'left' : 'right';\n return child2 && (secondChildCSS.clear === 'both' || secondChildCSS.clear === touchingSideChild2) ? 'vertical' : 'horizontal';\n }\n\n return child1 && (firstChildCSS.display === 'block' || firstChildCSS.display === 'flex' || firstChildCSS.display === 'table' || firstChildCSS.display === 'grid' || firstChildWidth >= elWidth && elCSS[CSSFloatProperty] === 'none' || child2 && elCSS[CSSFloatProperty] === 'none' && firstChildWidth + secondChildWidth > elWidth) ? 'vertical' : 'horizontal';\n},\n _dragElInRowColumn = function _dragElInRowColumn(dragRect, targetRect, vertical) {\n var dragElS1Opp = vertical ? dragRect.left : dragRect.top,\n dragElS2Opp = vertical ? dragRect.right : dragRect.bottom,\n dragElOppLength = vertical ? dragRect.width : dragRect.height,\n targetS1Opp = vertical ? targetRect.left : targetRect.top,\n targetS2Opp = vertical ? targetRect.right : targetRect.bottom,\n targetOppLength = vertical ? targetRect.width : targetRect.height;\n return dragElS1Opp === targetS1Opp || dragElS2Opp === targetS2Opp || dragElS1Opp + dragElOppLength / 2 === targetS1Opp + targetOppLength / 2;\n},\n\n/**\n * Detects first nearest empty sortable to X and Y position using emptyInsertThreshold.\n * @param {Number} x X position\n * @param {Number} y Y position\n * @return {HTMLElement} Element of the first found nearest Sortable\n */\n_detectNearestEmptySortable = function _detectNearestEmptySortable(x, y) {\n var ret;\n sortables.some(function (sortable) {\n var threshold = sortable[expando].options.emptyInsertThreshold;\n if (!threshold || lastChild(sortable)) return;\n var rect = getRect(sortable),\n insideHorizontally = x >= rect.left - threshold && x <= rect.right + threshold,\n insideVertically = y >= rect.top - threshold && y <= rect.bottom + threshold;\n\n if (insideHorizontally && insideVertically) {\n return ret = sortable;\n }\n });\n return ret;\n},\n _prepareGroup = function _prepareGroup(options) {\n function toFn(value, pull) {\n return function (to, from, dragEl, evt) {\n var sameGroup = to.options.group.name && from.options.group.name && to.options.group.name === from.options.group.name;\n\n if (value == null && (pull || sameGroup)) {\n // Default pull value\n // Default pull and put value if same group\n return true;\n } else if (value == null || value === false) {\n return false;\n } else if (pull && value === 'clone') {\n return value;\n } else if (typeof value === 'function') {\n return toFn(value(to, from, dragEl, evt), pull)(to, from, dragEl, evt);\n } else {\n var otherGroup = (pull ? to : from).options.group.name;\n return value === true || typeof value === 'string' && value === otherGroup || value.join && value.indexOf(otherGroup) > -1;\n }\n };\n }\n\n var group = {};\n var originalGroup = options.group;\n\n if (!originalGroup || _typeof(originalGroup) != 'object') {\n originalGroup = {\n name: originalGroup\n };\n }\n\n group.name = originalGroup.name;\n group.checkPull = toFn(originalGroup.pull, true);\n group.checkPut = toFn(originalGroup.put);\n group.revertClone = originalGroup.revertClone;\n options.group = group;\n},\n _hideGhostForTarget = function _hideGhostForTarget() {\n if (!supportCssPointerEvents && ghostEl) {\n css(ghostEl, 'display', 'none');\n }\n},\n _unhideGhostForTarget = function _unhideGhostForTarget() {\n if (!supportCssPointerEvents && ghostEl) {\n css(ghostEl, 'display', '');\n }\n}; // #1184 fix - Prevent click event on fallback if dragged but item not changed position\n\n\nif (documentExists) {\n document.addEventListener('click', function (evt) {\n if (ignoreNextClick) {\n evt.preventDefault();\n evt.stopPropagation && evt.stopPropagation();\n evt.stopImmediatePropagation && evt.stopImmediatePropagation();\n ignoreNextClick = false;\n return false;\n }\n }, true);\n}\n\nvar nearestEmptyInsertDetectEvent = function nearestEmptyInsertDetectEvent(evt) {\n if (dragEl) {\n evt = evt.touches ? evt.touches[0] : evt;\n\n var nearest = _detectNearestEmptySortable(evt.clientX, evt.clientY);\n\n if (nearest) {\n // Create imitation event\n var event = {};\n\n for (var i in evt) {\n if (evt.hasOwnProperty(i)) {\n event[i] = evt[i];\n }\n }\n\n event.target = event.rootEl = nearest;\n event.preventDefault = void 0;\n event.stopPropagation = void 0;\n\n nearest[expando]._onDragOver(event);\n }\n }\n};\n\nvar _checkOutsideTargetEl = function _checkOutsideTargetEl(evt) {\n if (dragEl) {\n dragEl.parentNode[expando]._isOutsideThisEl(evt.target);\n }\n};\n/**\n * @class Sortable\n * @param {HTMLElement} el\n * @param {Object} [options]\n */\n\n\nfunction Sortable(el, options) {\n if (!(el && el.nodeType && el.nodeType === 1)) {\n throw \"Sortable: `el` must be an HTMLElement, not \".concat({}.toString.call(el));\n }\n\n this.el = el; // root element\n\n this.options = options = _extends({}, options); // Export instance\n\n el[expando] = this;\n var defaults = {\n group: null,\n sort: true,\n disabled: false,\n store: null,\n handle: null,\n draggable: /^[uo]l$/i.test(el.nodeName) ? '>li' : '>*',\n swapThreshold: 1,\n // percentage; 0 <= x <= 1\n invertSwap: false,\n // invert always\n invertedSwapThreshold: null,\n // will be set to same as swapThreshold if default\n removeCloneOnHide: true,\n direction: function direction() {\n return _detectDirection(el, this.options);\n },\n ghostClass: 'sortable-ghost',\n chosenClass: 'sortable-chosen',\n dragClass: 'sortable-drag',\n ignore: 'a, img',\n filter: null,\n preventOnFilter: true,\n animation: 0,\n easing: null,\n setData: function setData(dataTransfer, dragEl) {\n dataTransfer.setData('Text', dragEl.textContent);\n },\n dropBubble: false,\n dragoverBubble: false,\n dataIdAttr: 'data-id',\n delay: 0,\n delayOnTouchOnly: false,\n touchStartThreshold: (Number.parseInt ? Number : window).parseInt(window.devicePixelRatio, 10) || 1,\n forceFallback: false,\n fallbackClass: 'sortable-fallback',\n fallbackOnBody: false,\n fallbackTolerance: 0,\n fallbackOffset: {\n x: 0,\n y: 0\n },\n supportPointer: Sortable.supportPointer !== false && 'PointerEvent' in window && !Safari,\n emptyInsertThreshold: 5\n };\n PluginManager.initializePlugins(this, el, defaults); // Set default options\n\n for (var name in defaults) {\n !(name in options) && (options[name] = defaults[name]);\n }\n\n _prepareGroup(options); // Bind all private methods\n\n\n for (var fn in this) {\n if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {\n this[fn] = this[fn].bind(this);\n }\n } // Setup drag mode\n\n\n this.nativeDraggable = options.forceFallback ? false : supportDraggable;\n\n if (this.nativeDraggable) {\n // Touch start threshold cannot be greater than the native dragstart threshold\n this.options.touchStartThreshold = 1;\n } // Bind events\n\n\n if (options.supportPointer) {\n on(el, 'pointerdown', this._onTapStart);\n } else {\n on(el, 'mousedown', this._onTapStart);\n on(el, 'touchstart', this._onTapStart);\n }\n\n if (this.nativeDraggable) {\n on(el, 'dragover', this);\n on(el, 'dragenter', this);\n }\n\n sortables.push(this.el); // Restore sorting\n\n options.store && options.store.get && this.sort(options.store.get(this) || []); // Add animation state manager\n\n _extends(this, AnimationStateManager());\n}\n\nSortable.prototype =\n/** @lends Sortable.prototype */\n{\n constructor: Sortable,\n _isOutsideThisEl: function _isOutsideThisEl(target) {\n if (!this.el.contains(target) && target !== this.el) {\n lastTarget = null;\n }\n },\n _getDirection: function _getDirection(evt, target) {\n return typeof this.options.direction === 'function' ? this.options.direction.call(this, evt, target, dragEl) : this.options.direction;\n },\n _onTapStart: function _onTapStart(\n /** Event|TouchEvent */\n evt) {\n if (!evt.cancelable) return;\n\n var _this = this,\n el = this.el,\n options = this.options,\n preventOnFilter = options.preventOnFilter,\n type = evt.type,\n touch = evt.touches && evt.touches[0] || evt.pointerType && evt.pointerType === 'touch' && evt,\n target = (touch || evt).target,\n originalTarget = evt.target.shadowRoot && (evt.path && evt.path[0] || evt.composedPath && evt.composedPath()[0]) || target,\n filter = options.filter;\n\n _saveInputCheckedState(el); // Don't trigger start event when an element is been dragged, otherwise the evt.oldindex always wrong when set option.group.\n\n\n if (dragEl) {\n return;\n }\n\n if (/mousedown|pointerdown/.test(type) && evt.button !== 0 || options.disabled) {\n return; // only left button and enabled\n } // cancel dnd if original target is content editable\n\n\n if (originalTarget.isContentEditable) {\n return;\n } // Safari ignores further event handling after mousedown\n\n\n if (!this.nativeDraggable && Safari && target && target.tagName.toUpperCase() === 'SELECT') {\n return;\n }\n\n target = closest(target, options.draggable, el, false);\n\n if (target && target.animated) {\n return;\n }\n\n if (lastDownEl === target) {\n // Ignoring duplicate `down`\n return;\n } // Get the index of the dragged element within its parent\n\n\n oldIndex = index(target);\n oldDraggableIndex = index(target, options.draggable); // Check filter\n\n if (typeof filter === 'function') {\n if (filter.call(this, evt, target, this)) {\n _dispatchEvent({\n sortable: _this,\n rootEl: originalTarget,\n name: 'filter',\n targetEl: target,\n toEl: el,\n fromEl: el\n });\n\n pluginEvent('filter', _this, {\n evt: evt\n });\n preventOnFilter && evt.cancelable && evt.preventDefault();\n return; // cancel dnd\n }\n } else if (filter) {\n filter = filter.split(',').some(function (criteria) {\n criteria = closest(originalTarget, criteria.trim(), el, false);\n\n if (criteria) {\n _dispatchEvent({\n sortable: _this,\n rootEl: criteria,\n name: 'filter',\n targetEl: target,\n fromEl: el,\n toEl: el\n });\n\n pluginEvent('filter', _this, {\n evt: evt\n });\n return true;\n }\n });\n\n if (filter) {\n preventOnFilter && evt.cancelable && evt.preventDefault();\n return; // cancel dnd\n }\n }\n\n if (options.handle && !closest(originalTarget, options.handle, el, false)) {\n return;\n } // Prepare `dragstart`\n\n\n this._prepareDragStart(evt, touch, target);\n },\n _prepareDragStart: function _prepareDragStart(\n /** Event */\n evt,\n /** Touch */\n touch,\n /** HTMLElement */\n target) {\n var _this = this,\n el = _this.el,\n options = _this.options,\n ownerDocument = el.ownerDocument,\n dragStartFn;\n\n if (target && !dragEl && target.parentNode === el) {\n var dragRect = getRect(target);\n rootEl = el;\n dragEl = target;\n parentEl = dragEl.parentNode;\n nextEl = dragEl.nextSibling;\n lastDownEl = target;\n activeGroup = options.group;\n Sortable.dragged = dragEl;\n tapEvt = {\n target: dragEl,\n clientX: (touch || evt).clientX,\n clientY: (touch || evt).clientY\n };\n tapDistanceLeft = tapEvt.clientX - dragRect.left;\n tapDistanceTop = tapEvt.clientY - dragRect.top;\n this._lastX = (touch || evt).clientX;\n this._lastY = (touch || evt).clientY;\n dragEl.style['will-change'] = 'all';\n\n dragStartFn = function dragStartFn() {\n pluginEvent('delayEnded', _this, {\n evt: evt\n });\n\n if (Sortable.eventCanceled) {\n _this._onDrop();\n\n return;\n } // Delayed drag has been triggered\n // we can re-enable the events: touchmove/mousemove\n\n\n _this._disableDelayedDragEvents();\n\n if (!FireFox && _this.nativeDraggable) {\n dragEl.draggable = true;\n } // Bind the events: dragstart/dragend\n\n\n _this._triggerDragStart(evt, touch); // Drag start event\n\n\n _dispatchEvent({\n sortable: _this,\n name: 'choose',\n originalEvent: evt\n }); // Chosen item\n\n\n toggleClass(dragEl, options.chosenClass, true);\n }; // Disable \"draggable\"\n\n\n options.ignore.split(',').forEach(function (criteria) {\n find(dragEl, criteria.trim(), _disableDraggable);\n });\n on(ownerDocument, 'dragover', nearestEmptyInsertDetectEvent);\n on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent);\n on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent);\n on(ownerDocument, 'mouseup', _this._onDrop);\n on(ownerDocument, 'touchend', _this._onDrop);\n on(ownerDocument, 'touchcancel', _this._onDrop); // Make dragEl draggable (must be before delay for FireFox)\n\n if (FireFox && this.nativeDraggable) {\n this.options.touchStartThreshold = 4;\n dragEl.draggable = true;\n }\n\n pluginEvent('delayStart', this, {\n evt: evt\n }); // Delay is impossible for native DnD in Edge or IE\n\n if (options.delay && (!options.delayOnTouchOnly || touch) && (!this.nativeDraggable || !(Edge || IE11OrLess))) {\n if (Sortable.eventCanceled) {\n this._onDrop();\n\n return;\n } // If the user moves the pointer or let go the click or touch\n // before the delay has been reached:\n // disable the delayed drag\n\n\n on(ownerDocument, 'mouseup', _this._disableDelayedDrag);\n on(ownerDocument, 'touchend', _this._disableDelayedDrag);\n on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);\n on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler);\n on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler);\n options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler);\n _this._dragStartTimer = setTimeout(dragStartFn, options.delay);\n } else {\n dragStartFn();\n }\n }\n },\n _delayedDragTouchMoveHandler: function _delayedDragTouchMoveHandler(\n /** TouchEvent|PointerEvent **/\n e) {\n var touch = e.touches ? e.touches[0] : e;\n\n if (Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1))) {\n this._disableDelayedDrag();\n }\n },\n _disableDelayedDrag: function _disableDelayedDrag() {\n dragEl && _disableDraggable(dragEl);\n clearTimeout(this._dragStartTimer);\n\n this._disableDelayedDragEvents();\n },\n _disableDelayedDragEvents: function _disableDelayedDragEvents() {\n var ownerDocument = this.el.ownerDocument;\n off(ownerDocument, 'mouseup', this._disableDelayedDrag);\n off(ownerDocument, 'touchend', this._disableDelayedDrag);\n off(ownerDocument, 'touchcancel', this._disableDelayedDrag);\n off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler);\n off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler);\n off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler);\n },\n _triggerDragStart: function _triggerDragStart(\n /** Event */\n evt,\n /** Touch */\n touch) {\n touch = touch || evt.pointerType == 'touch' && evt;\n\n if (!this.nativeDraggable || touch) {\n if (this.options.supportPointer) {\n on(document, 'pointermove', this._onTouchMove);\n } else if (touch) {\n on(document, 'touchmove', this._onTouchMove);\n } else {\n on(document, 'mousemove', this._onTouchMove);\n }\n } else {\n on(dragEl, 'dragend', this);\n on(rootEl, 'dragstart', this._onDragStart);\n }\n\n try {\n if (document.selection) {\n // Timeout neccessary for IE9\n _nextTick(function () {\n document.selection.empty();\n });\n } else {\n window.getSelection().removeAllRanges();\n }\n } catch (err) {}\n },\n _dragStarted: function _dragStarted(fallback, evt) {\n\n awaitingDragStarted = false;\n\n if (rootEl && dragEl) {\n pluginEvent('dragStarted', this, {\n evt: evt\n });\n\n if (this.nativeDraggable) {\n on(document, 'dragover', _checkOutsideTargetEl);\n }\n\n var options = this.options; // Apply effect\n\n !fallback && toggleClass(dragEl, options.dragClass, false);\n toggleClass(dragEl, options.ghostClass, true);\n Sortable.active = this;\n fallback && this._appendGhost(); // Drag start event\n\n _dispatchEvent({\n sortable: this,\n name: 'start',\n originalEvent: evt\n });\n } else {\n this._nulling();\n }\n },\n _emulateDragOver: function _emulateDragOver() {\n if (touchEvt) {\n this._lastX = touchEvt.clientX;\n this._lastY = touchEvt.clientY;\n\n _hideGhostForTarget();\n\n var target = document.elementFromPoint(touchEvt.clientX, touchEvt.clientY);\n var parent = target;\n\n while (target && target.shadowRoot) {\n target = target.shadowRoot.elementFromPoint(touchEvt.clientX, touchEvt.clientY);\n if (target === parent) break;\n parent = target;\n }\n\n dragEl.parentNode[expando]._isOutsideThisEl(target);\n\n if (parent) {\n do {\n if (parent[expando]) {\n var inserted = void 0;\n inserted = parent[expando]._onDragOver({\n clientX: touchEvt.clientX,\n clientY: touchEvt.clientY,\n target: target,\n rootEl: parent\n });\n\n if (inserted && !this.options.dragoverBubble) {\n break;\n }\n }\n\n target = parent; // store last element\n }\n /* jshint boss:true */\n while (parent = parent.parentNode);\n }\n\n _unhideGhostForTarget();\n }\n },\n _onTouchMove: function _onTouchMove(\n /**TouchEvent*/\n evt) {\n if (tapEvt) {\n var options = this.options,\n fallbackTolerance = options.fallbackTolerance,\n fallbackOffset = options.fallbackOffset,\n touch = evt.touches ? evt.touches[0] : evt,\n ghostMatrix = ghostEl && matrix(ghostEl, true),\n scaleX = ghostEl && ghostMatrix && ghostMatrix.a,\n scaleY = ghostEl && ghostMatrix && ghostMatrix.d,\n relativeScrollOffset = PositionGhostAbsolutely && ghostRelativeParent && getRelativeScrollOffset(ghostRelativeParent),\n dx = (touch.clientX - tapEvt.clientX + fallbackOffset.x) / (scaleX || 1) + (relativeScrollOffset ? relativeScrollOffset[0] - ghostRelativeParentInitialScroll[0] : 0) / (scaleX || 1),\n dy = (touch.clientY - tapEvt.clientY + fallbackOffset.y) / (scaleY || 1) + (relativeScrollOffset ? relativeScrollOffset[1] - ghostRelativeParentInitialScroll[1] : 0) / (scaleY || 1); // only set the status to dragging, when we are actually dragging\n\n if (!Sortable.active && !awaitingDragStarted) {\n if (fallbackTolerance && Math.max(Math.abs(touch.clientX - this._lastX), Math.abs(touch.clientY - this._lastY)) < fallbackTolerance) {\n return;\n }\n\n this._onDragStart(evt, true);\n }\n\n if (ghostEl) {\n if (ghostMatrix) {\n ghostMatrix.e += dx - (lastDx || 0);\n ghostMatrix.f += dy - (lastDy || 0);\n } else {\n ghostMatrix = {\n a: 1,\n b: 0,\n c: 0,\n d: 1,\n e: dx,\n f: dy\n };\n }\n\n var cssMatrix = \"matrix(\".concat(ghostMatrix.a, \",\").concat(ghostMatrix.b, \",\").concat(ghostMatrix.c, \",\").concat(ghostMatrix.d, \",\").concat(ghostMatrix.e, \",\").concat(ghostMatrix.f, \")\");\n css(ghostEl, 'webkitTransform', cssMatrix);\n css(ghostEl, 'mozTransform', cssMatrix);\n css(ghostEl, 'msTransform', cssMatrix);\n css(ghostEl, 'transform', cssMatrix);\n lastDx = dx;\n lastDy = dy;\n touchEvt = touch;\n }\n\n evt.cancelable && evt.preventDefault();\n }\n },\n _appendGhost: function _appendGhost() {\n // Bug if using scale(): https://stackoverflow.com/questions/2637058\n // Not being adjusted for\n if (!ghostEl) {\n var container = this.options.fallbackOnBody ? document.body : rootEl,\n rect = getRect(dragEl, true, PositionGhostAbsolutely, true, container),\n options = this.options; // Position absolutely\n\n if (PositionGhostAbsolutely) {\n // Get relatively positioned parent\n ghostRelativeParent = container;\n\n while (css(ghostRelativeParent, 'position') === 'static' && css(ghostRelativeParent, 'transform') === 'none' && ghostRelativeParent !== document) {\n ghostRelativeParent = ghostRelativeParent.parentNode;\n }\n\n if (ghostRelativeParent !== document.body && ghostRelativeParent !== document.documentElement) {\n if (ghostRelativeParent === document) ghostRelativeParent = getWindowScrollingElement();\n rect.top += ghostRelativeParent.scrollTop;\n rect.left += ghostRelativeParent.scrollLeft;\n } else {\n ghostRelativeParent = getWindowScrollingElement();\n }\n\n ghostRelativeParentInitialScroll = getRelativeScrollOffset(ghostRelativeParent);\n }\n\n ghostEl = dragEl.cloneNode(true);\n toggleClass(ghostEl, options.ghostClass, false);\n toggleClass(ghostEl, options.fallbackClass, true);\n toggleClass(ghostEl, options.dragClass, true);\n css(ghostEl, 'transition', '');\n css(ghostEl, 'transform', '');\n css(ghostEl, 'box-sizing', 'border-box');\n css(ghostEl, 'margin', 0);\n css(ghostEl, 'top', rect.top);\n css(ghostEl, 'left', rect.left);\n css(ghostEl, 'width', rect.width);\n css(ghostEl, 'height', rect.height);\n css(ghostEl, 'opacity', '0.8');\n css(ghostEl, 'position', PositionGhostAbsolutely ? 'absolute' : 'fixed');\n css(ghostEl, 'zIndex', '100000');\n css(ghostEl, 'pointerEvents', 'none');\n Sortable.ghost = ghostEl;\n container.appendChild(ghostEl); // Set transform-origin\n\n css(ghostEl, 'transform-origin', tapDistanceLeft / parseInt(ghostEl.style.width) * 100 + '% ' + tapDistanceTop / parseInt(ghostEl.style.height) * 100 + '%');\n }\n },\n _onDragStart: function _onDragStart(\n /**Event*/\n evt,\n /**boolean*/\n fallback) {\n var _this = this;\n\n var dataTransfer = evt.dataTransfer;\n var options = _this.options;\n pluginEvent('dragStart', this, {\n evt: evt\n });\n\n if (Sortable.eventCanceled) {\n this._onDrop();\n\n return;\n }\n\n pluginEvent('setupClone', this);\n\n if (!Sortable.eventCanceled) {\n cloneEl = clone(dragEl);\n cloneEl.draggable = false;\n cloneEl.style['will-change'] = '';\n\n this._hideClone();\n\n toggleClass(cloneEl, this.options.chosenClass, false);\n Sortable.clone = cloneEl;\n } // #1143: IFrame support workaround\n\n\n _this.cloneId = _nextTick(function () {\n pluginEvent('clone', _this);\n if (Sortable.eventCanceled) return;\n\n if (!_this.options.removeCloneOnHide) {\n rootEl.insertBefore(cloneEl, dragEl);\n }\n\n _this._hideClone();\n\n _dispatchEvent({\n sortable: _this,\n name: 'clone'\n });\n });\n !fallback && toggleClass(dragEl, options.dragClass, true); // Set proper drop events\n\n if (fallback) {\n ignoreNextClick = true;\n _this._loopId = setInterval(_this._emulateDragOver, 50);\n } else {\n // Undo what was set in _prepareDragStart before drag started\n off(document, 'mouseup', _this._onDrop);\n off(document, 'touchend', _this._onDrop);\n off(document, 'touchcancel', _this._onDrop);\n\n if (dataTransfer) {\n dataTransfer.effectAllowed = 'move';\n options.setData && options.setData.call(_this, dataTransfer, dragEl);\n }\n\n on(document, 'drop', _this); // #1276 fix:\n\n css(dragEl, 'transform', 'translateZ(0)');\n }\n\n awaitingDragStarted = true;\n _this._dragStartId = _nextTick(_this._dragStarted.bind(_this, fallback, evt));\n on(document, 'selectstart', _this);\n moved = true;\n\n if (Safari) {\n css(document.body, 'user-select', 'none');\n }\n },\n // Returns true - if no further action is needed (either inserted or another condition)\n _onDragOver: function _onDragOver(\n /**Event*/\n evt) {\n var el = this.el,\n target = evt.target,\n dragRect,\n targetRect,\n revert,\n options = this.options,\n group = options.group,\n activeSortable = Sortable.active,\n isOwner = activeGroup === group,\n canSort = options.sort,\n fromSortable = putSortable || activeSortable,\n vertical,\n _this = this,\n completedFired = false;\n\n if (_silent) return;\n\n function dragOverEvent(name, extra) {\n pluginEvent(name, _this, _objectSpread2({\n evt: evt,\n isOwner: isOwner,\n axis: vertical ? 'vertical' : 'horizontal',\n revert: revert,\n dragRect: dragRect,\n targetRect: targetRect,\n canSort: canSort,\n fromSortable: fromSortable,\n target: target,\n completed: completed,\n onMove: function onMove(target, after) {\n return _onMove(rootEl, el, dragEl, dragRect, target, getRect(target), evt, after);\n },\n changed: changed\n }, extra));\n } // Capture animation state\n\n\n function capture() {\n dragOverEvent('dragOverAnimationCapture');\n\n _this.captureAnimationState();\n\n if (_this !== fromSortable) {\n fromSortable.captureAnimationState();\n }\n } // Return invocation when dragEl is inserted (or completed)\n\n\n function completed(insertion) {\n dragOverEvent('dragOverCompleted', {\n insertion: insertion\n });\n\n if (insertion) {\n // Clones must be hidden before folding animation to capture dragRectAbsolute properly\n if (isOwner) {\n activeSortable._hideClone();\n } else {\n activeSortable._showClone(_this);\n }\n\n if (_this !== fromSortable) {\n // Set ghost class to new sortable's ghost class\n toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : activeSortable.options.ghostClass, false);\n toggleClass(dragEl, options.ghostClass, true);\n }\n\n if (putSortable !== _this && _this !== Sortable.active) {\n putSortable = _this;\n } else if (_this === Sortable.active && putSortable) {\n putSortable = null;\n } // Animation\n\n\n if (fromSortable === _this) {\n _this._ignoreWhileAnimating = target;\n }\n\n _this.animateAll(function () {\n dragOverEvent('dragOverAnimationComplete');\n _this._ignoreWhileAnimating = null;\n });\n\n if (_this !== fromSortable) {\n fromSortable.animateAll();\n fromSortable._ignoreWhileAnimating = null;\n }\n } // Null lastTarget if it is not inside a previously swapped element\n\n\n if (target === dragEl && !dragEl.animated || target === el && !target.animated) {\n lastTarget = null;\n } // no bubbling and not fallback\n\n\n if (!options.dragoverBubble && !evt.rootEl && target !== document) {\n dragEl.parentNode[expando]._isOutsideThisEl(evt.target); // Do not detect for empty insert if already inserted\n\n\n !insertion && nearestEmptyInsertDetectEvent(evt);\n }\n\n !options.dragoverBubble && evt.stopPropagation && evt.stopPropagation();\n return completedFired = true;\n } // Call when dragEl has been inserted\n\n\n function changed() {\n newIndex = index(dragEl);\n newDraggableIndex = index(dragEl, options.draggable);\n\n _dispatchEvent({\n sortable: _this,\n name: 'change',\n toEl: el,\n newIndex: newIndex,\n newDraggableIndex: newDraggableIndex,\n originalEvent: evt\n });\n }\n\n if (evt.preventDefault !== void 0) {\n evt.cancelable && evt.preventDefault();\n }\n\n target = closest(target, options.draggable, el, true);\n dragOverEvent('dragOver');\n if (Sortable.eventCanceled) return completedFired;\n\n if (dragEl.contains(evt.target) || target.animated && target.animatingX && target.animatingY || _this._ignoreWhileAnimating === target) {\n return completed(false);\n }\n\n ignoreNextClick = false;\n\n if (activeSortable && !options.disabled && (isOwner ? canSort || (revert = parentEl !== rootEl) // Reverting item into the original list\n : putSortable === this || (this.lastPutMode = activeGroup.checkPull(this, activeSortable, dragEl, evt)) && group.checkPut(this, activeSortable, dragEl, evt))) {\n vertical = this._getDirection(evt, target) === 'vertical';\n dragRect = getRect(dragEl);\n dragOverEvent('dragOverValid');\n if (Sortable.eventCanceled) return completedFired;\n\n if (revert) {\n parentEl = rootEl; // actualization\n\n capture();\n\n this._hideClone();\n\n dragOverEvent('revert');\n\n if (!Sortable.eventCanceled) {\n if (nextEl) {\n rootEl.insertBefore(dragEl, nextEl);\n } else {\n rootEl.appendChild(dragEl);\n }\n }\n\n return completed(true);\n }\n\n var elLastChild = lastChild(el, options.draggable);\n\n if (!elLastChild || _ghostIsLast(evt, vertical, this) && !elLastChild.animated) {\n // Insert to end of list\n // If already at end of list: Do not insert\n if (elLastChild === dragEl) {\n return completed(false);\n } // if there is a last element, it is the target\n\n\n if (elLastChild && el === evt.target) {\n target = elLastChild;\n }\n\n if (target) {\n targetRect = getRect(target);\n }\n\n if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, !!target) !== false) {\n capture();\n el.appendChild(dragEl);\n parentEl = el; // actualization\n\n changed();\n return completed(true);\n }\n } else if (elLastChild && _ghostIsFirst(evt, vertical, this)) {\n // Insert to start of list\n var firstChild = getChild(el, 0, options, true);\n\n if (firstChild === dragEl) {\n return completed(false);\n }\n\n target = firstChild;\n targetRect = getRect(target);\n\n if (_onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, false) !== false) {\n capture();\n el.insertBefore(dragEl, firstChild);\n parentEl = el; // actualization\n\n changed();\n return completed(true);\n }\n } else if (target.parentNode === el) {\n targetRect = getRect(target);\n var direction = 0,\n targetBeforeFirstSwap,\n differentLevel = dragEl.parentNode !== el,\n differentRowCol = !_dragElInRowColumn(dragEl.animated && dragEl.toRect || dragRect, target.animated && target.toRect || targetRect, vertical),\n side1 = vertical ? 'top' : 'left',\n scrolledPastTop = isScrolledPast(target, 'top', 'top') || isScrolledPast(dragEl, 'top', 'top'),\n scrollBefore = scrolledPastTop ? scrolledPastTop.scrollTop : void 0;\n\n if (lastTarget !== target) {\n targetBeforeFirstSwap = targetRect[side1];\n pastFirstInvertThresh = false;\n isCircumstantialInvert = !differentRowCol && options.invertSwap || differentLevel;\n }\n\n direction = _getSwapDirection(evt, target, targetRect, vertical, differentRowCol ? 1 : options.swapThreshold, options.invertedSwapThreshold == null ? options.swapThreshold : options.invertedSwapThreshold, isCircumstantialInvert, lastTarget === target);\n var sibling;\n\n if (direction !== 0) {\n // Check if target is beside dragEl in respective direction (ignoring hidden elements)\n var dragIndex = index(dragEl);\n\n do {\n dragIndex -= direction;\n sibling = parentEl.children[dragIndex];\n } while (sibling && (css(sibling, 'display') === 'none' || sibling === ghostEl));\n } // If dragEl is already beside target: Do not insert\n\n\n if (direction === 0 || sibling === target) {\n return completed(false);\n }\n\n lastTarget = target;\n lastDirection = direction;\n var nextSibling = target.nextElementSibling,\n after = false;\n after = direction === 1;\n\n var moveVector = _onMove(rootEl, el, dragEl, dragRect, target, targetRect, evt, after);\n\n if (moveVector !== false) {\n if (moveVector === 1 || moveVector === -1) {\n after = moveVector === 1;\n }\n\n _silent = true;\n setTimeout(_unsilent, 30);\n capture();\n\n if (after && !nextSibling) {\n el.appendChild(dragEl);\n } else {\n target.parentNode.insertBefore(dragEl, after ? nextSibling : target);\n } // Undo chrome's scroll adjustment (has no effect on other browsers)\n\n\n if (scrolledPastTop) {\n scrollBy(scrolledPastTop, 0, scrollBefore - scrolledPastTop.scrollTop);\n }\n\n parentEl = dragEl.parentNode; // actualization\n // must be done before animation\n\n if (targetBeforeFirstSwap !== undefined && !isCircumstantialInvert) {\n targetMoveDistance = Math.abs(targetBeforeFirstSwap - getRect(target)[side1]);\n }\n\n changed();\n return completed(true);\n }\n }\n\n if (el.contains(dragEl)) {\n return completed(false);\n }\n }\n\n return false;\n },\n _ignoreWhileAnimating: null,\n _offMoveEvents: function _offMoveEvents() {\n off(document, 'mousemove', this._onTouchMove);\n off(document, 'touchmove', this._onTouchMove);\n off(document, 'pointermove', this._onTouchMove);\n off(document, 'dragover', nearestEmptyInsertDetectEvent);\n off(document, 'mousemove', nearestEmptyInsertDetectEvent);\n off(document, 'touchmove', nearestEmptyInsertDetectEvent);\n },\n _offUpEvents: function _offUpEvents() {\n var ownerDocument = this.el.ownerDocument;\n off(ownerDocument, 'mouseup', this._onDrop);\n off(ownerDocument, 'touchend', this._onDrop);\n off(ownerDocument, 'pointerup', this._onDrop);\n off(ownerDocument, 'touchcancel', this._onDrop);\n off(document, 'selectstart', this);\n },\n _onDrop: function _onDrop(\n /**Event*/\n evt) {\n var el = this.el,\n options = this.options; // Get the index of the dragged element within its parent\n\n newIndex = index(dragEl);\n newDraggableIndex = index(dragEl, options.draggable);\n pluginEvent('drop', this, {\n evt: evt\n });\n parentEl = dragEl && dragEl.parentNode; // Get again after plugin event\n\n newIndex = index(dragEl);\n newDraggableIndex = index(dragEl, options.draggable);\n\n if (Sortable.eventCanceled) {\n this._nulling();\n\n return;\n }\n\n awaitingDragStarted = false;\n isCircumstantialInvert = false;\n pastFirstInvertThresh = false;\n clearInterval(this._loopId);\n clearTimeout(this._dragStartTimer);\n\n _cancelNextTick(this.cloneId);\n\n _cancelNextTick(this._dragStartId); // Unbind events\n\n\n if (this.nativeDraggable) {\n off(document, 'drop', this);\n off(el, 'dragstart', this._onDragStart);\n }\n\n this._offMoveEvents();\n\n this._offUpEvents();\n\n if (Safari) {\n css(document.body, 'user-select', '');\n }\n\n css(dragEl, 'transform', '');\n\n if (evt) {\n if (moved) {\n evt.cancelable && evt.preventDefault();\n !options.dropBubble && evt.stopPropagation();\n }\n\n ghostEl && ghostEl.parentNode && ghostEl.parentNode.removeChild(ghostEl);\n\n if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') {\n // Remove clone(s)\n cloneEl && cloneEl.parentNode && cloneEl.parentNode.removeChild(cloneEl);\n }\n\n if (dragEl) {\n if (this.nativeDraggable) {\n off(dragEl, 'dragend', this);\n }\n\n _disableDraggable(dragEl);\n\n dragEl.style['will-change'] = ''; // Remove classes\n // ghostClass is added in dragStarted\n\n if (moved && !awaitingDragStarted) {\n toggleClass(dragEl, putSortable ? putSortable.options.ghostClass : this.options.ghostClass, false);\n }\n\n toggleClass(dragEl, this.options.chosenClass, false); // Drag stop event\n\n _dispatchEvent({\n sortable: this,\n name: 'unchoose',\n toEl: parentEl,\n newIndex: null,\n newDraggableIndex: null,\n originalEvent: evt\n });\n\n if (rootEl !== parentEl) {\n if (newIndex >= 0) {\n // Add event\n _dispatchEvent({\n rootEl: parentEl,\n name: 'add',\n toEl: parentEl,\n fromEl: rootEl,\n originalEvent: evt\n }); // Remove event\n\n\n _dispatchEvent({\n sortable: this,\n name: 'remove',\n toEl: parentEl,\n originalEvent: evt\n }); // drag from one list and drop into another\n\n\n _dispatchEvent({\n rootEl: parentEl,\n name: 'sort',\n toEl: parentEl,\n fromEl: rootEl,\n originalEvent: evt\n });\n\n _dispatchEvent({\n sortable: this,\n name: 'sort',\n toEl: parentEl,\n originalEvent: evt\n });\n }\n\n putSortable && putSortable.save();\n } else {\n if (newIndex !== oldIndex) {\n if (newIndex >= 0) {\n // drag & drop within the same list\n _dispatchEvent({\n sortable: this,\n name: 'update',\n toEl: parentEl,\n originalEvent: evt\n });\n\n _dispatchEvent({\n sortable: this,\n name: 'sort',\n toEl: parentEl,\n originalEvent: evt\n });\n }\n }\n }\n\n if (Sortable.active) {\n /* jshint eqnull:true */\n if (newIndex == null || newIndex === -1) {\n newIndex = oldIndex;\n newDraggableIndex = oldDraggableIndex;\n }\n\n _dispatchEvent({\n sortable: this,\n name: 'end',\n toEl: parentEl,\n originalEvent: evt\n }); // Save sorting\n\n\n this.save();\n }\n }\n }\n\n this._nulling();\n },\n _nulling: function _nulling() {\n pluginEvent('nulling', this);\n rootEl = dragEl = parentEl = ghostEl = nextEl = cloneEl = lastDownEl = cloneHidden = tapEvt = touchEvt = moved = newIndex = newDraggableIndex = oldIndex = oldDraggableIndex = lastTarget = lastDirection = putSortable = activeGroup = Sortable.dragged = Sortable.ghost = Sortable.clone = Sortable.active = null;\n savedInputChecked.forEach(function (el) {\n el.checked = true;\n });\n savedInputChecked.length = lastDx = lastDy = 0;\n },\n handleEvent: function handleEvent(\n /**Event*/\n evt) {\n switch (evt.type) {\n case 'drop':\n case 'dragend':\n this._onDrop(evt);\n\n break;\n\n case 'dragenter':\n case 'dragover':\n if (dragEl) {\n this._onDragOver(evt);\n\n _globalDragOver(evt);\n }\n\n break;\n\n case 'selectstart':\n evt.preventDefault();\n break;\n }\n },\n\n /**\n * Serializes the item into an array of string.\n * @returns {String[]}\n */\n toArray: function toArray() {\n var order = [],\n el,\n children = this.el.children,\n i = 0,\n n = children.length,\n options = this.options;\n\n for (; i < n; i++) {\n el = children[i];\n\n if (closest(el, options.draggable, this.el, false)) {\n order.push(el.getAttribute(options.dataIdAttr) || _generateId(el));\n }\n }\n\n return order;\n },\n\n /**\n * Sorts the elements according to the array.\n * @param {String[]} order order of the items\n */\n sort: function sort(order, useAnimation) {\n var items = {},\n rootEl = this.el;\n this.toArray().forEach(function (id, i) {\n var el = rootEl.children[i];\n\n if (closest(el, this.options.draggable, rootEl, false)) {\n items[id] = el;\n }\n }, this);\n useAnimation && this.captureAnimationState();\n order.forEach(function (id) {\n if (items[id]) {\n rootEl.removeChild(items[id]);\n rootEl.appendChild(items[id]);\n }\n });\n useAnimation && this.animateAll();\n },\n\n /**\n * Save the current sorting\n */\n save: function save() {\n var store = this.options.store;\n store && store.set && store.set(this);\n },\n\n /**\n * For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.\n * @param {HTMLElement} el\n * @param {String} [selector] default: `options.draggable`\n * @returns {HTMLElement|null}\n */\n closest: function closest$1(el, selector) {\n return closest(el, selector || this.options.draggable, this.el, false);\n },\n\n /**\n * Set/get option\n * @param {string} name\n * @param {*} [value]\n * @returns {*}\n */\n option: function option(name, value) {\n var options = this.options;\n\n if (value === void 0) {\n return options[name];\n } else {\n var modifiedValue = PluginManager.modifyOption(this, name, value);\n\n if (typeof modifiedValue !== 'undefined') {\n options[name] = modifiedValue;\n } else {\n options[name] = value;\n }\n\n if (name === 'group') {\n _prepareGroup(options);\n }\n }\n },\n\n /**\n * Destroy\n */\n destroy: function destroy() {\n pluginEvent('destroy', this);\n var el = this.el;\n el[expando] = null;\n off(el, 'mousedown', this._onTapStart);\n off(el, 'touchstart', this._onTapStart);\n off(el, 'pointerdown', this._onTapStart);\n\n if (this.nativeDraggable) {\n off(el, 'dragover', this);\n off(el, 'dragenter', this);\n } // Remove draggable attributes\n\n\n Array.prototype.forEach.call(el.querySelectorAll('[draggable]'), function (el) {\n el.removeAttribute('draggable');\n });\n\n this._onDrop();\n\n this._disableDelayedDragEvents();\n\n sortables.splice(sortables.indexOf(this.el), 1);\n this.el = el = null;\n },\n _hideClone: function _hideClone() {\n if (!cloneHidden) {\n pluginEvent('hideClone', this);\n if (Sortable.eventCanceled) return;\n css(cloneEl, 'display', 'none');\n\n if (this.options.removeCloneOnHide && cloneEl.parentNode) {\n cloneEl.parentNode.removeChild(cloneEl);\n }\n\n cloneHidden = true;\n }\n },\n _showClone: function _showClone(putSortable) {\n if (putSortable.lastPutMode !== 'clone') {\n this._hideClone();\n\n return;\n }\n\n if (cloneHidden) {\n pluginEvent('showClone', this);\n if (Sortable.eventCanceled) return; // show clone at dragEl or original position\n\n if (dragEl.parentNode == rootEl && !this.options.group.revertClone) {\n rootEl.insertBefore(cloneEl, dragEl);\n } else if (nextEl) {\n rootEl.insertBefore(cloneEl, nextEl);\n } else {\n rootEl.appendChild(cloneEl);\n }\n\n if (this.options.group.revertClone) {\n this.animate(dragEl, cloneEl);\n }\n\n css(cloneEl, 'display', '');\n cloneHidden = false;\n }\n }\n};\n\nfunction _globalDragOver(\n/**Event*/\nevt) {\n if (evt.dataTransfer) {\n evt.dataTransfer.dropEffect = 'move';\n }\n\n evt.cancelable && evt.preventDefault();\n}\n\nfunction _onMove(fromEl, toEl, dragEl, dragRect, targetEl, targetRect, originalEvent, willInsertAfter) {\n var evt,\n sortable = fromEl[expando],\n onMoveFn = sortable.options.onMove,\n retVal; // Support for new CustomEvent feature\n\n if (window.CustomEvent && !IE11OrLess && !Edge) {\n evt = new CustomEvent('move', {\n bubbles: true,\n cancelable: true\n });\n } else {\n evt = document.createEvent('Event');\n evt.initEvent('move', true, true);\n }\n\n evt.to = toEl;\n evt.from = fromEl;\n evt.dragged = dragEl;\n evt.draggedRect = dragRect;\n evt.related = targetEl || toEl;\n evt.relatedRect = targetRect || getRect(toEl);\n evt.willInsertAfter = willInsertAfter;\n evt.originalEvent = originalEvent;\n fromEl.dispatchEvent(evt);\n\n if (onMoveFn) {\n retVal = onMoveFn.call(sortable, evt, originalEvent);\n }\n\n return retVal;\n}\n\nfunction _disableDraggable(el) {\n el.draggable = false;\n}\n\nfunction _unsilent() {\n _silent = false;\n}\n\nfunction _ghostIsFirst(evt, vertical, sortable) {\n var rect = getRect(getChild(sortable.el, 0, sortable.options, true));\n var spacer = 10;\n return vertical ? evt.clientX < rect.left - spacer || evt.clientY < rect.top && evt.clientX < rect.right : evt.clientY < rect.top - spacer || evt.clientY < rect.bottom && evt.clientX < rect.left;\n}\n\nfunction _ghostIsLast(evt, vertical, sortable) {\n var rect = getRect(lastChild(sortable.el, sortable.options.draggable));\n var spacer = 10;\n return vertical ? evt.clientX > rect.right + spacer || evt.clientX <= rect.right && evt.clientY > rect.bottom && evt.clientX >= rect.left : evt.clientX > rect.right && evt.clientY > rect.top || evt.clientX <= rect.right && evt.clientY > rect.bottom + spacer;\n}\n\nfunction _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, invertedSwapThreshold, invertSwap, isLastTarget) {\n var mouseOnAxis = vertical ? evt.clientY : evt.clientX,\n targetLength = vertical ? targetRect.height : targetRect.width,\n targetS1 = vertical ? targetRect.top : targetRect.left,\n targetS2 = vertical ? targetRect.bottom : targetRect.right,\n invert = false;\n\n if (!invertSwap) {\n // Never invert or create dragEl shadow when target movemenet causes mouse to move past the end of regular swapThreshold\n if (isLastTarget && targetMoveDistance < targetLength * swapThreshold) {\n // multiplied only by swapThreshold because mouse will already be inside target by (1 - threshold) * targetLength / 2\n // check if past first invert threshold on side opposite of lastDirection\n if (!pastFirstInvertThresh && (lastDirection === 1 ? mouseOnAxis > targetS1 + targetLength * invertedSwapThreshold / 2 : mouseOnAxis < targetS2 - targetLength * invertedSwapThreshold / 2)) {\n // past first invert threshold, do not restrict inverted threshold to dragEl shadow\n pastFirstInvertThresh = true;\n }\n\n if (!pastFirstInvertThresh) {\n // dragEl shadow (target move distance shadow)\n if (lastDirection === 1 ? mouseOnAxis < targetS1 + targetMoveDistance // over dragEl shadow\n : mouseOnAxis > targetS2 - targetMoveDistance) {\n return -lastDirection;\n }\n } else {\n invert = true;\n }\n } else {\n // Regular\n if (mouseOnAxis > targetS1 + targetLength * (1 - swapThreshold) / 2 && mouseOnAxis < targetS2 - targetLength * (1 - swapThreshold) / 2) {\n return _getInsertDirection(target);\n }\n }\n }\n\n invert = invert || invertSwap;\n\n if (invert) {\n // Invert of regular\n if (mouseOnAxis < targetS1 + targetLength * invertedSwapThreshold / 2 || mouseOnAxis > targetS2 - targetLength * invertedSwapThreshold / 2) {\n return mouseOnAxis > targetS1 + targetLength / 2 ? 1 : -1;\n }\n }\n\n return 0;\n}\n/**\n * Gets the direction dragEl must be swapped relative to target in order to make it\n * seem that dragEl has been \"inserted\" into that element's position\n * @param {HTMLElement} target The target whose position dragEl is being inserted at\n * @return {Number} Direction dragEl must be swapped\n */\n\n\nfunction _getInsertDirection(target) {\n if (index(dragEl) < index(target)) {\n return 1;\n } else {\n return -1;\n }\n}\n/**\n * Generate id\n * @param {HTMLElement} el\n * @returns {String}\n * @private\n */\n\n\nfunction _generateId(el) {\n var str = el.tagName + el.className + el.src + el.href + el.textContent,\n i = str.length,\n sum = 0;\n\n while (i--) {\n sum += str.charCodeAt(i);\n }\n\n return sum.toString(36);\n}\n\nfunction _saveInputCheckedState(root) {\n savedInputChecked.length = 0;\n var inputs = root.getElementsByTagName('input');\n var idx = inputs.length;\n\n while (idx--) {\n var el = inputs[idx];\n el.checked && savedInputChecked.push(el);\n }\n}\n\nfunction _nextTick(fn) {\n return setTimeout(fn, 0);\n}\n\nfunction _cancelNextTick(id) {\n return clearTimeout(id);\n} // Fixed #973:\n\n\nif (documentExists) {\n on(document, 'touchmove', function (evt) {\n if ((Sortable.active || awaitingDragStarted) && evt.cancelable) {\n evt.preventDefault();\n }\n });\n} // Export utils\n\n\nSortable.utils = {\n on: on,\n off: off,\n css: css,\n find: find,\n is: function is(el, selector) {\n return !!closest(el, selector, el, false);\n },\n extend: extend,\n throttle: throttle,\n closest: closest,\n toggleClass: toggleClass,\n clone: clone,\n index: index,\n nextTick: _nextTick,\n cancelNextTick: _cancelNextTick,\n detectDirection: _detectDirection,\n getChild: getChild\n};\n/**\n * Get the Sortable instance of an element\n * @param {HTMLElement} element The element\n * @return {Sortable|undefined} The instance of Sortable\n */\n\nSortable.get = function (element) {\n return element[expando];\n};\n/**\n * Mount a plugin to Sortable\n * @param {...SortablePlugin|SortablePlugin[]} plugins Plugins being mounted\n */\n\n\nSortable.mount = function () {\n for (var _len = arguments.length, plugins = new Array(_len), _key = 0; _key < _len; _key++) {\n plugins[_key] = arguments[_key];\n }\n\n if (plugins[0].constructor === Array) plugins = plugins[0];\n plugins.forEach(function (plugin) {\n if (!plugin.prototype || !plugin.prototype.constructor) {\n throw \"Sortable: Mounted plugin must be a constructor function, not \".concat({}.toString.call(plugin));\n }\n\n if (plugin.utils) Sortable.utils = _objectSpread2(_objectSpread2({}, Sortable.utils), plugin.utils);\n PluginManager.mount(plugin);\n });\n};\n/**\n * Create sortable instance\n * @param {HTMLElement} el\n * @param {Object} [options]\n */\n\n\nSortable.create = function (el, options) {\n return new Sortable(el, options);\n}; // Export\n\n\nSortable.version = version;\n\nvar autoScrolls = [],\n scrollEl,\n scrollRootEl,\n scrolling = false,\n lastAutoScrollX,\n lastAutoScrollY,\n touchEvt$1,\n pointerElemChangedInterval;\n\nfunction AutoScrollPlugin() {\n function AutoScroll() {\n this.defaults = {\n scroll: true,\n forceAutoScrollFallback: false,\n scrollSensitivity: 30,\n scrollSpeed: 10,\n bubbleScroll: true\n }; // Bind all private methods\n\n for (var fn in this) {\n if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {\n this[fn] = this[fn].bind(this);\n }\n }\n }\n\n AutoScroll.prototype = {\n dragStarted: function dragStarted(_ref) {\n var originalEvent = _ref.originalEvent;\n\n if (this.sortable.nativeDraggable) {\n on(document, 'dragover', this._handleAutoScroll);\n } else {\n if (this.options.supportPointer) {\n on(document, 'pointermove', this._handleFallbackAutoScroll);\n } else if (originalEvent.touches) {\n on(document, 'touchmove', this._handleFallbackAutoScroll);\n } else {\n on(document, 'mousemove', this._handleFallbackAutoScroll);\n }\n }\n },\n dragOverCompleted: function dragOverCompleted(_ref2) {\n var originalEvent = _ref2.originalEvent;\n\n // For when bubbling is canceled and using fallback (fallback 'touchmove' always reached)\n if (!this.options.dragOverBubble && !originalEvent.rootEl) {\n this._handleAutoScroll(originalEvent);\n }\n },\n drop: function drop() {\n if (this.sortable.nativeDraggable) {\n off(document, 'dragover', this._handleAutoScroll);\n } else {\n off(document, 'pointermove', this._handleFallbackAutoScroll);\n off(document, 'touchmove', this._handleFallbackAutoScroll);\n off(document, 'mousemove', this._handleFallbackAutoScroll);\n }\n\n clearPointerElemChangedInterval();\n clearAutoScrolls();\n cancelThrottle();\n },\n nulling: function nulling() {\n touchEvt$1 = scrollRootEl = scrollEl = scrolling = pointerElemChangedInterval = lastAutoScrollX = lastAutoScrollY = null;\n autoScrolls.length = 0;\n },\n _handleFallbackAutoScroll: function _handleFallbackAutoScroll(evt) {\n this._handleAutoScroll(evt, true);\n },\n _handleAutoScroll: function _handleAutoScroll(evt, fallback) {\n var _this = this;\n\n var x = (evt.touches ? evt.touches[0] : evt).clientX,\n y = (evt.touches ? evt.touches[0] : evt).clientY,\n elem = document.elementFromPoint(x, y);\n touchEvt$1 = evt; // IE does not seem to have native autoscroll,\n // Edge's autoscroll seems too conditional,\n // MACOS Safari does not have autoscroll,\n // Firefox and Chrome are good\n\n if (fallback || this.options.forceAutoScrollFallback || Edge || IE11OrLess || Safari) {\n autoScroll(evt, this.options, elem, fallback); // Listener for pointer element change\n\n var ogElemScroller = getParentAutoScrollElement(elem, true);\n\n if (scrolling && (!pointerElemChangedInterval || x !== lastAutoScrollX || y !== lastAutoScrollY)) {\n pointerElemChangedInterval && clearPointerElemChangedInterval(); // Detect for pointer elem change, emulating native DnD behaviour\n\n pointerElemChangedInterval = setInterval(function () {\n var newElem = getParentAutoScrollElement(document.elementFromPoint(x, y), true);\n\n if (newElem !== ogElemScroller) {\n ogElemScroller = newElem;\n clearAutoScrolls();\n }\n\n autoScroll(evt, _this.options, newElem, fallback);\n }, 10);\n lastAutoScrollX = x;\n lastAutoScrollY = y;\n }\n } else {\n // if DnD is enabled (and browser has good autoscrolling), first autoscroll will already scroll, so get parent autoscroll of first autoscroll\n if (!this.options.bubbleScroll || getParentAutoScrollElement(elem, true) === getWindowScrollingElement()) {\n clearAutoScrolls();\n return;\n }\n\n autoScroll(evt, this.options, getParentAutoScrollElement(elem, false), false);\n }\n }\n };\n return _extends(AutoScroll, {\n pluginName: 'scroll',\n initializeByDefault: true\n });\n}\n\nfunction clearAutoScrolls() {\n autoScrolls.forEach(function (autoScroll) {\n clearInterval(autoScroll.pid);\n });\n autoScrolls = [];\n}\n\nfunction clearPointerElemChangedInterval() {\n clearInterval(pointerElemChangedInterval);\n}\n\nvar autoScroll = throttle(function (evt, options, rootEl, isFallback) {\n // Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=505521\n if (!options.scroll) return;\n var x = (evt.touches ? evt.touches[0] : evt).clientX,\n y = (evt.touches ? evt.touches[0] : evt).clientY,\n sens = options.scrollSensitivity,\n speed = options.scrollSpeed,\n winScroller = getWindowScrollingElement();\n var scrollThisInstance = false,\n scrollCustomFn; // New scroll root, set scrollEl\n\n if (scrollRootEl !== rootEl) {\n scrollRootEl = rootEl;\n clearAutoScrolls();\n scrollEl = options.scroll;\n scrollCustomFn = options.scrollFn;\n\n if (scrollEl === true) {\n scrollEl = getParentAutoScrollElement(rootEl, true);\n }\n }\n\n var layersOut = 0;\n var currentParent = scrollEl;\n\n do {\n var el = currentParent,\n rect = getRect(el),\n top = rect.top,\n bottom = rect.bottom,\n left = rect.left,\n right = rect.right,\n width = rect.width,\n height = rect.height,\n canScrollX = void 0,\n canScrollY = void 0,\n scrollWidth = el.scrollWidth,\n scrollHeight = el.scrollHeight,\n elCSS = css(el),\n scrollPosX = el.scrollLeft,\n scrollPosY = el.scrollTop;\n\n if (el === winScroller) {\n canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll' || elCSS.overflowX === 'visible');\n canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll' || elCSS.overflowY === 'visible');\n } else {\n canScrollX = width < scrollWidth && (elCSS.overflowX === 'auto' || elCSS.overflowX === 'scroll');\n canScrollY = height < scrollHeight && (elCSS.overflowY === 'auto' || elCSS.overflowY === 'scroll');\n }\n\n var vx = canScrollX && (Math.abs(right - x) <= sens && scrollPosX + width < scrollWidth) - (Math.abs(left - x) <= sens && !!scrollPosX);\n var vy = canScrollY && (Math.abs(bottom - y) <= sens && scrollPosY + height < scrollHeight) - (Math.abs(top - y) <= sens && !!scrollPosY);\n\n if (!autoScrolls[layersOut]) {\n for (var i = 0; i <= layersOut; i++) {\n if (!autoScrolls[i]) {\n autoScrolls[i] = {};\n }\n }\n }\n\n if (autoScrolls[layersOut].vx != vx || autoScrolls[layersOut].vy != vy || autoScrolls[layersOut].el !== el) {\n autoScrolls[layersOut].el = el;\n autoScrolls[layersOut].vx = vx;\n autoScrolls[layersOut].vy = vy;\n clearInterval(autoScrolls[layersOut].pid);\n\n if (vx != 0 || vy != 0) {\n scrollThisInstance = true;\n /* jshint loopfunc:true */\n\n autoScrolls[layersOut].pid = setInterval(function () {\n // emulate drag over during autoscroll (fallback), emulating native DnD behaviour\n if (isFallback && this.layer === 0) {\n Sortable.active._onTouchMove(touchEvt$1); // To move ghost if it is positioned absolutely\n\n }\n\n var scrollOffsetY = autoScrolls[this.layer].vy ? autoScrolls[this.layer].vy * speed : 0;\n var scrollOffsetX = autoScrolls[this.layer].vx ? autoScrolls[this.layer].vx * speed : 0;\n\n if (typeof scrollCustomFn === 'function') {\n if (scrollCustomFn.call(Sortable.dragged.parentNode[expando], scrollOffsetX, scrollOffsetY, evt, touchEvt$1, autoScrolls[this.layer].el) !== 'continue') {\n return;\n }\n }\n\n scrollBy(autoScrolls[this.layer].el, scrollOffsetX, scrollOffsetY);\n }.bind({\n layer: layersOut\n }), 24);\n }\n }\n\n layersOut++;\n } while (options.bubbleScroll && currentParent !== winScroller && (currentParent = getParentAutoScrollElement(currentParent, false)));\n\n scrolling = scrollThisInstance; // in case another function catches scrolling as false in between when it is not\n}, 30);\n\nvar drop = function drop(_ref) {\n var originalEvent = _ref.originalEvent,\n putSortable = _ref.putSortable,\n dragEl = _ref.dragEl,\n activeSortable = _ref.activeSortable,\n dispatchSortableEvent = _ref.dispatchSortableEvent,\n hideGhostForTarget = _ref.hideGhostForTarget,\n unhideGhostForTarget = _ref.unhideGhostForTarget;\n if (!originalEvent) return;\n var toSortable = putSortable || activeSortable;\n hideGhostForTarget();\n var touch = originalEvent.changedTouches && originalEvent.changedTouches.length ? originalEvent.changedTouches[0] : originalEvent;\n var target = document.elementFromPoint(touch.clientX, touch.clientY);\n unhideGhostForTarget();\n\n if (toSortable && !toSortable.el.contains(target)) {\n dispatchSortableEvent('spill');\n this.onSpill({\n dragEl: dragEl,\n putSortable: putSortable\n });\n }\n};\n\nfunction Revert() {}\n\nRevert.prototype = {\n startIndex: null,\n dragStart: function dragStart(_ref2) {\n var oldDraggableIndex = _ref2.oldDraggableIndex;\n this.startIndex = oldDraggableIndex;\n },\n onSpill: function onSpill(_ref3) {\n var dragEl = _ref3.dragEl,\n putSortable = _ref3.putSortable;\n this.sortable.captureAnimationState();\n\n if (putSortable) {\n putSortable.captureAnimationState();\n }\n\n var nextSibling = getChild(this.sortable.el, this.startIndex, this.options);\n\n if (nextSibling) {\n this.sortable.el.insertBefore(dragEl, nextSibling);\n } else {\n this.sortable.el.appendChild(dragEl);\n }\n\n this.sortable.animateAll();\n\n if (putSortable) {\n putSortable.animateAll();\n }\n },\n drop: drop\n};\n\n_extends(Revert, {\n pluginName: 'revertOnSpill'\n});\n\nfunction Remove() {}\n\nRemove.prototype = {\n onSpill: function onSpill(_ref4) {\n var dragEl = _ref4.dragEl,\n putSortable = _ref4.putSortable;\n var parentSortable = putSortable || this.sortable;\n parentSortable.captureAnimationState();\n dragEl.parentNode && dragEl.parentNode.removeChild(dragEl);\n parentSortable.animateAll();\n },\n drop: drop\n};\n\n_extends(Remove, {\n pluginName: 'removeOnSpill'\n});\n\nvar lastSwapEl;\n\nfunction SwapPlugin() {\n function Swap() {\n this.defaults = {\n swapClass: 'sortable-swap-highlight'\n };\n }\n\n Swap.prototype = {\n dragStart: function dragStart(_ref) {\n var dragEl = _ref.dragEl;\n lastSwapEl = dragEl;\n },\n dragOverValid: function dragOverValid(_ref2) {\n var completed = _ref2.completed,\n target = _ref2.target,\n onMove = _ref2.onMove,\n activeSortable = _ref2.activeSortable,\n changed = _ref2.changed,\n cancel = _ref2.cancel;\n if (!activeSortable.options.swap) return;\n var el = this.sortable.el,\n options = this.options;\n\n if (target && target !== el) {\n var prevSwapEl = lastSwapEl;\n\n if (onMove(target) !== false) {\n toggleClass(target, options.swapClass, true);\n lastSwapEl = target;\n } else {\n lastSwapEl = null;\n }\n\n if (prevSwapEl && prevSwapEl !== lastSwapEl) {\n toggleClass(prevSwapEl, options.swapClass, false);\n }\n }\n\n changed();\n completed(true);\n cancel();\n },\n drop: function drop(_ref3) {\n var activeSortable = _ref3.activeSortable,\n putSortable = _ref3.putSortable,\n dragEl = _ref3.dragEl;\n var toSortable = putSortable || this.sortable;\n var options = this.options;\n lastSwapEl && toggleClass(lastSwapEl, options.swapClass, false);\n\n if (lastSwapEl && (options.swap || putSortable && putSortable.options.swap)) {\n if (dragEl !== lastSwapEl) {\n toSortable.captureAnimationState();\n if (toSortable !== activeSortable) activeSortable.captureAnimationState();\n swapNodes(dragEl, lastSwapEl);\n toSortable.animateAll();\n if (toSortable !== activeSortable) activeSortable.animateAll();\n }\n }\n },\n nulling: function nulling() {\n lastSwapEl = null;\n }\n };\n return _extends(Swap, {\n pluginName: 'swap',\n eventProperties: function eventProperties() {\n return {\n swapItem: lastSwapEl\n };\n }\n });\n}\n\nfunction swapNodes(n1, n2) {\n var p1 = n1.parentNode,\n p2 = n2.parentNode,\n i1,\n i2;\n if (!p1 || !p2 || p1.isEqualNode(n2) || p2.isEqualNode(n1)) return;\n i1 = index(n1);\n i2 = index(n2);\n\n if (p1.isEqualNode(p2) && i1 < i2) {\n i2++;\n }\n\n p1.insertBefore(n2, p1.children[i1]);\n p2.insertBefore(n1, p2.children[i2]);\n}\n\nvar multiDragElements = [],\n multiDragClones = [],\n lastMultiDragSelect,\n // for selection with modifier key down (SHIFT)\nmultiDragSortable,\n initialFolding = false,\n // Initial multi-drag fold when drag started\nfolding = false,\n // Folding any other time\ndragStarted = false,\n dragEl$1,\n clonesFromRect,\n clonesHidden;\n\nfunction MultiDragPlugin() {\n function MultiDrag(sortable) {\n // Bind all private methods\n for (var fn in this) {\n if (fn.charAt(0) === '_' && typeof this[fn] === 'function') {\n this[fn] = this[fn].bind(this);\n }\n }\n\n if (sortable.options.supportPointer) {\n on(document, 'pointerup', this._deselectMultiDrag);\n } else {\n on(document, 'mouseup', this._deselectMultiDrag);\n on(document, 'touchend', this._deselectMultiDrag);\n }\n\n on(document, 'keydown', this._checkKeyDown);\n on(document, 'keyup', this._checkKeyUp);\n this.defaults = {\n selectedClass: 'sortable-selected',\n multiDragKey: null,\n setData: function setData(dataTransfer, dragEl) {\n var data = '';\n\n if (multiDragElements.length && multiDragSortable === sortable) {\n multiDragElements.forEach(function (multiDragElement, i) {\n data += (!i ? '' : ', ') + multiDragElement.textContent;\n });\n } else {\n data = dragEl.textContent;\n }\n\n dataTransfer.setData('Text', data);\n }\n };\n }\n\n MultiDrag.prototype = {\n multiDragKeyDown: false,\n isMultiDrag: false,\n delayStartGlobal: function delayStartGlobal(_ref) {\n var dragged = _ref.dragEl;\n dragEl$1 = dragged;\n },\n delayEnded: function delayEnded() {\n this.isMultiDrag = ~multiDragElements.indexOf(dragEl$1);\n },\n setupClone: function setupClone(_ref2) {\n var sortable = _ref2.sortable,\n cancel = _ref2.cancel;\n if (!this.isMultiDrag) return;\n\n for (var i = 0; i < multiDragElements.length; i++) {\n multiDragClones.push(clone(multiDragElements[i]));\n multiDragClones[i].sortableIndex = multiDragElements[i].sortableIndex;\n multiDragClones[i].draggable = false;\n multiDragClones[i].style['will-change'] = '';\n toggleClass(multiDragClones[i], this.options.selectedClass, false);\n multiDragElements[i] === dragEl$1 && toggleClass(multiDragClones[i], this.options.chosenClass, false);\n }\n\n sortable._hideClone();\n\n cancel();\n },\n clone: function clone(_ref3) {\n var sortable = _ref3.sortable,\n rootEl = _ref3.rootEl,\n dispatchSortableEvent = _ref3.dispatchSortableEvent,\n cancel = _ref3.cancel;\n if (!this.isMultiDrag) return;\n\n if (!this.options.removeCloneOnHide) {\n if (multiDragElements.length && multiDragSortable === sortable) {\n insertMultiDragClones(true, rootEl);\n dispatchSortableEvent('clone');\n cancel();\n }\n }\n },\n showClone: function showClone(_ref4) {\n var cloneNowShown = _ref4.cloneNowShown,\n rootEl = _ref4.rootEl,\n cancel = _ref4.cancel;\n if (!this.isMultiDrag) return;\n insertMultiDragClones(false, rootEl);\n multiDragClones.forEach(function (clone) {\n css(clone, 'display', '');\n });\n cloneNowShown();\n clonesHidden = false;\n cancel();\n },\n hideClone: function hideClone(_ref5) {\n var _this = this;\n\n var sortable = _ref5.sortable,\n cloneNowHidden = _ref5.cloneNowHidden,\n cancel = _ref5.cancel;\n if (!this.isMultiDrag) return;\n multiDragClones.forEach(function (clone) {\n css(clone, 'display', 'none');\n\n if (_this.options.removeCloneOnHide && clone.parentNode) {\n clone.parentNode.removeChild(clone);\n }\n });\n cloneNowHidden();\n clonesHidden = true;\n cancel();\n },\n dragStartGlobal: function dragStartGlobal(_ref6) {\n var sortable = _ref6.sortable;\n\n if (!this.isMultiDrag && multiDragSortable) {\n multiDragSortable.multiDrag._deselectMultiDrag();\n }\n\n multiDragElements.forEach(function (multiDragElement) {\n multiDragElement.sortableIndex = index(multiDragElement);\n }); // Sort multi-drag elements\n\n multiDragElements = multiDragElements.sort(function (a, b) {\n return a.sortableIndex - b.sortableIndex;\n });\n dragStarted = true;\n },\n dragStarted: function dragStarted(_ref7) {\n var _this2 = this;\n\n var sortable = _ref7.sortable;\n if (!this.isMultiDrag) return;\n\n if (this.options.sort) {\n // Capture rects,\n // hide multi drag elements (by positioning them absolute),\n // set multi drag elements rects to dragRect,\n // show multi drag elements,\n // animate to rects,\n // unset rects & remove from DOM\n sortable.captureAnimationState();\n\n if (this.options.animation) {\n multiDragElements.forEach(function (multiDragElement) {\n if (multiDragElement === dragEl$1) return;\n css(multiDragElement, 'position', 'absolute');\n });\n var dragRect = getRect(dragEl$1, false, true, true);\n multiDragElements.forEach(function (multiDragElement) {\n if (multiDragElement === dragEl$1) return;\n setRect(multiDragElement, dragRect);\n });\n folding = true;\n initialFolding = true;\n }\n }\n\n sortable.animateAll(function () {\n folding = false;\n initialFolding = false;\n\n if (_this2.options.animation) {\n multiDragElements.forEach(function (multiDragElement) {\n unsetRect(multiDragElement);\n });\n } // Remove all auxiliary multidrag items from el, if sorting enabled\n\n\n if (_this2.options.sort) {\n removeMultiDragElements();\n }\n });\n },\n dragOver: function dragOver(_ref8) {\n var target = _ref8.target,\n completed = _ref8.completed,\n cancel = _ref8.cancel;\n\n if (folding && ~multiDragElements.indexOf(target)) {\n completed(false);\n cancel();\n }\n },\n revert: function revert(_ref9) {\n var fromSortable = _ref9.fromSortable,\n rootEl = _ref9.rootEl,\n sortable = _ref9.sortable,\n dragRect = _ref9.dragRect;\n\n if (multiDragElements.length > 1) {\n // Setup unfold animation\n multiDragElements.forEach(function (multiDragElement) {\n sortable.addAnimationState({\n target: multiDragElement,\n rect: folding ? getRect(multiDragElement) : dragRect\n });\n unsetRect(multiDragElement);\n multiDragElement.fromRect = dragRect;\n fromSortable.removeAnimationState(multiDragElement);\n });\n folding = false;\n insertMultiDragElements(!this.options.removeCloneOnHide, rootEl);\n }\n },\n dragOverCompleted: function dragOverCompleted(_ref10) {\n var sortable = _ref10.sortable,\n isOwner = _ref10.isOwner,\n insertion = _ref10.insertion,\n activeSortable = _ref10.activeSortable,\n parentEl = _ref10.parentEl,\n putSortable = _ref10.putSortable;\n var options = this.options;\n\n if (insertion) {\n // Clones must be hidden before folding animation to capture dragRectAbsolute properly\n if (isOwner) {\n activeSortable._hideClone();\n }\n\n initialFolding = false; // If leaving sort:false root, or already folding - Fold to new location\n\n if (options.animation && multiDragElements.length > 1 && (folding || !isOwner && !activeSortable.options.sort && !putSortable)) {\n // Fold: Set all multi drag elements's rects to dragEl's rect when multi-drag elements are invisible\n var dragRectAbsolute = getRect(dragEl$1, false, true, true);\n multiDragElements.forEach(function (multiDragElement) {\n if (multiDragElement === dragEl$1) return;\n setRect(multiDragElement, dragRectAbsolute); // Move element(s) to end of parentEl so that it does not interfere with multi-drag clones insertion if they are inserted\n // while folding, and so that we can capture them again because old sortable will no longer be fromSortable\n\n parentEl.appendChild(multiDragElement);\n });\n folding = true;\n } // Clones must be shown (and check to remove multi drags) after folding when interfering multiDragElements are moved out\n\n\n if (!isOwner) {\n // Only remove if not folding (folding will remove them anyways)\n if (!folding) {\n removeMultiDragElements();\n }\n\n if (multiDragElements.length > 1) {\n var clonesHiddenBefore = clonesHidden;\n\n activeSortable._showClone(sortable); // Unfold animation for clones if showing from hidden\n\n\n if (activeSortable.options.animation && !clonesHidden && clonesHiddenBefore) {\n multiDragClones.forEach(function (clone) {\n activeSortable.addAnimationState({\n target: clone,\n rect: clonesFromRect\n });\n clone.fromRect = clonesFromRect;\n clone.thisAnimationDuration = null;\n });\n }\n } else {\n activeSortable._showClone(sortable);\n }\n }\n }\n },\n dragOverAnimationCapture: function dragOverAnimationCapture(_ref11) {\n var dragRect = _ref11.dragRect,\n isOwner = _ref11.isOwner,\n activeSortable = _ref11.activeSortable;\n multiDragElements.forEach(function (multiDragElement) {\n multiDragElement.thisAnimationDuration = null;\n });\n\n if (activeSortable.options.animation && !isOwner && activeSortable.multiDrag.isMultiDrag) {\n clonesFromRect = _extends({}, dragRect);\n var dragMatrix = matrix(dragEl$1, true);\n clonesFromRect.top -= dragMatrix.f;\n clonesFromRect.left -= dragMatrix.e;\n }\n },\n dragOverAnimationComplete: function dragOverAnimationComplete() {\n if (folding) {\n folding = false;\n removeMultiDragElements();\n }\n },\n drop: function drop(_ref12) {\n var evt = _ref12.originalEvent,\n rootEl = _ref12.rootEl,\n parentEl = _ref12.parentEl,\n sortable = _ref12.sortable,\n dispatchSortableEvent = _ref12.dispatchSortableEvent,\n oldIndex = _ref12.oldIndex,\n putSortable = _ref12.putSortable;\n var toSortable = putSortable || this.sortable;\n if (!evt) return;\n var options = this.options,\n children = parentEl.children; // Multi-drag selection\n\n if (!dragStarted) {\n if (options.multiDragKey && !this.multiDragKeyDown) {\n this._deselectMultiDrag();\n }\n\n toggleClass(dragEl$1, options.selectedClass, !~multiDragElements.indexOf(dragEl$1));\n\n if (!~multiDragElements.indexOf(dragEl$1)) {\n multiDragElements.push(dragEl$1);\n dispatchEvent({\n sortable: sortable,\n rootEl: rootEl,\n name: 'select',\n targetEl: dragEl$1,\n originalEvt: evt\n }); // Modifier activated, select from last to dragEl\n\n if (evt.shiftKey && lastMultiDragSelect && sortable.el.contains(lastMultiDragSelect)) {\n var lastIndex = index(lastMultiDragSelect),\n currentIndex = index(dragEl$1);\n\n if (~lastIndex && ~currentIndex && lastIndex !== currentIndex) {\n // Must include lastMultiDragSelect (select it), in case modified selection from no selection\n // (but previous selection existed)\n var n, i;\n\n if (currentIndex > lastIndex) {\n i = lastIndex;\n n = currentIndex;\n } else {\n i = currentIndex;\n n = lastIndex + 1;\n }\n\n for (; i < n; i++) {\n if (~multiDragElements.indexOf(children[i])) continue;\n toggleClass(children[i], options.selectedClass, true);\n multiDragElements.push(children[i]);\n dispatchEvent({\n sortable: sortable,\n rootEl: rootEl,\n name: 'select',\n targetEl: children[i],\n originalEvt: evt\n });\n }\n }\n } else {\n lastMultiDragSelect = dragEl$1;\n }\n\n multiDragSortable = toSortable;\n } else {\n multiDragElements.splice(multiDragElements.indexOf(dragEl$1), 1);\n lastMultiDragSelect = null;\n dispatchEvent({\n sortable: sortable,\n rootEl: rootEl,\n name: 'deselect',\n targetEl: dragEl$1,\n originalEvt: evt\n });\n }\n } // Multi-drag drop\n\n\n if (dragStarted && this.isMultiDrag) {\n folding = false; // Do not \"unfold\" after around dragEl if reverted\n\n if ((parentEl[expando].options.sort || parentEl !== rootEl) && multiDragElements.length > 1) {\n var dragRect = getRect(dragEl$1),\n multiDragIndex = index(dragEl$1, ':not(.' + this.options.selectedClass + ')');\n if (!initialFolding && options.animation) dragEl$1.thisAnimationDuration = null;\n toSortable.captureAnimationState();\n\n if (!initialFolding) {\n if (options.animation) {\n dragEl$1.fromRect = dragRect;\n multiDragElements.forEach(function (multiDragElement) {\n multiDragElement.thisAnimationDuration = null;\n\n if (multiDragElement !== dragEl$1) {\n var rect = folding ? getRect(multiDragElement) : dragRect;\n multiDragElement.fromRect = rect; // Prepare unfold animation\n\n toSortable.addAnimationState({\n target: multiDragElement,\n rect: rect\n });\n }\n });\n } // Multi drag elements are not necessarily removed from the DOM on drop, so to reinsert\n // properly they must all be removed\n\n\n removeMultiDragElements();\n multiDragElements.forEach(function (multiDragElement) {\n if (children[multiDragIndex]) {\n parentEl.insertBefore(multiDragElement, children[multiDragIndex]);\n } else {\n parentEl.appendChild(multiDragElement);\n }\n\n multiDragIndex++;\n }); // If initial folding is done, the elements may have changed position because they are now\n // unfolding around dragEl, even though dragEl may not have his index changed, so update event\n // must be fired here as Sortable will not.\n\n if (oldIndex === index(dragEl$1)) {\n var update = false;\n multiDragElements.forEach(function (multiDragElement) {\n if (multiDragElement.sortableIndex !== index(multiDragElement)) {\n update = true;\n return;\n }\n });\n\n if (update) {\n dispatchSortableEvent('update');\n }\n }\n } // Must be done after capturing individual rects (scroll bar)\n\n\n multiDragElements.forEach(function (multiDragElement) {\n unsetRect(multiDragElement);\n });\n toSortable.animateAll();\n }\n\n multiDragSortable = toSortable;\n } // Remove clones if necessary\n\n\n if (rootEl === parentEl || putSortable && putSortable.lastPutMode !== 'clone') {\n multiDragClones.forEach(function (clone) {\n clone.parentNode && clone.parentNode.removeChild(clone);\n });\n }\n },\n nullingGlobal: function nullingGlobal() {\n this.isMultiDrag = dragStarted = false;\n multiDragClones.length = 0;\n },\n destroyGlobal: function destroyGlobal() {\n this._deselectMultiDrag();\n\n off(document, 'pointerup', this._deselectMultiDrag);\n off(document, 'mouseup', this._deselectMultiDrag);\n off(document, 'touchend', this._deselectMultiDrag);\n off(document, 'keydown', this._checkKeyDown);\n off(document, 'keyup', this._checkKeyUp);\n },\n _deselectMultiDrag: function _deselectMultiDrag(evt) {\n if (typeof dragStarted !== \"undefined\" && dragStarted) return; // Only deselect if selection is in this sortable\n\n if (multiDragSortable !== this.sortable) return; // Only deselect if target is not item in this sortable\n\n if (evt && closest(evt.target, this.options.draggable, this.sortable.el, false)) return; // Only deselect if left click\n\n if (evt && evt.button !== 0) return;\n\n while (multiDragElements.length) {\n var el = multiDragElements[0];\n toggleClass(el, this.options.selectedClass, false);\n multiDragElements.shift();\n dispatchEvent({\n sortable: this.sortable,\n rootEl: this.sortable.el,\n name: 'deselect',\n targetEl: el,\n originalEvt: evt\n });\n }\n },\n _checkKeyDown: function _checkKeyDown(evt) {\n if (evt.key === this.options.multiDragKey) {\n this.multiDragKeyDown = true;\n }\n },\n _checkKeyUp: function _checkKeyUp(evt) {\n if (evt.key === this.options.multiDragKey) {\n this.multiDragKeyDown = false;\n }\n }\n };\n return _extends(MultiDrag, {\n // Static methods & properties\n pluginName: 'multiDrag',\n utils: {\n /**\n * Selects the provided multi-drag item\n * @param {HTMLElement} el The element to be selected\n */\n select: function select(el) {\n var sortable = el.parentNode[expando];\n if (!sortable || !sortable.options.multiDrag || ~multiDragElements.indexOf(el)) return;\n\n if (multiDragSortable && multiDragSortable !== sortable) {\n multiDragSortable.multiDrag._deselectMultiDrag();\n\n multiDragSortable = sortable;\n }\n\n toggleClass(el, sortable.options.selectedClass, true);\n multiDragElements.push(el);\n },\n\n /**\n * Deselects the provided multi-drag item\n * @param {HTMLElement} el The element to be deselected\n */\n deselect: function deselect(el) {\n var sortable = el.parentNode[expando],\n index = multiDragElements.indexOf(el);\n if (!sortable || !sortable.options.multiDrag || !~index) return;\n toggleClass(el, sortable.options.selectedClass, false);\n multiDragElements.splice(index, 1);\n }\n },\n eventProperties: function eventProperties() {\n var _this3 = this;\n\n var oldIndicies = [],\n newIndicies = [];\n multiDragElements.forEach(function (multiDragElement) {\n oldIndicies.push({\n multiDragElement: multiDragElement,\n index: multiDragElement.sortableIndex\n }); // multiDragElements will already be sorted if folding\n\n var newIndex;\n\n if (folding && multiDragElement !== dragEl$1) {\n newIndex = -1;\n } else if (folding) {\n newIndex = index(multiDragElement, ':not(.' + _this3.options.selectedClass + ')');\n } else {\n newIndex = index(multiDragElement);\n }\n\n newIndicies.push({\n multiDragElement: multiDragElement,\n index: newIndex\n });\n });\n return {\n items: _toConsumableArray(multiDragElements),\n clones: [].concat(multiDragClones),\n oldIndicies: oldIndicies,\n newIndicies: newIndicies\n };\n },\n optionListeners: {\n multiDragKey: function multiDragKey(key) {\n key = key.toLowerCase();\n\n if (key === 'ctrl') {\n key = 'Control';\n } else if (key.length > 1) {\n key = key.charAt(0).toUpperCase() + key.substr(1);\n }\n\n return key;\n }\n }\n });\n}\n\nfunction insertMultiDragElements(clonesInserted, rootEl) {\n multiDragElements.forEach(function (multiDragElement, i) {\n var target = rootEl.children[multiDragElement.sortableIndex + (clonesInserted ? Number(i) : 0)];\n\n if (target) {\n rootEl.insertBefore(multiDragElement, target);\n } else {\n rootEl.appendChild(multiDragElement);\n }\n });\n}\n/**\n * Insert multi-drag clones\n * @param {[Boolean]} elementsInserted Whether the multi-drag elements are inserted\n * @param {HTMLElement} rootEl\n */\n\n\nfunction insertMultiDragClones(elementsInserted, rootEl) {\n multiDragClones.forEach(function (clone, i) {\n var target = rootEl.children[clone.sortableIndex + (elementsInserted ? Number(i) : 0)];\n\n if (target) {\n rootEl.insertBefore(clone, target);\n } else {\n rootEl.appendChild(clone);\n }\n });\n}\n\nfunction removeMultiDragElements() {\n multiDragElements.forEach(function (multiDragElement) {\n if (multiDragElement === dragEl$1) return;\n multiDragElement.parentNode && multiDragElement.parentNode.removeChild(multiDragElement);\n });\n}\n\nSortable.mount(new AutoScrollPlugin());\nSortable.mount(Remove, Revert);\n\nexport default Sortable;\nexport { MultiDragPlugin as MultiDrag, Sortable, SwapPlugin as Swap };\n", "export class FetchResponse {\n constructor (response) {\n this.response = response\n }\n\n get statusCode () {\n return this.response.status\n }\n\n get redirected () {\n return this.response.redirected\n }\n\n get ok () {\n return this.response.ok\n }\n\n get unauthenticated () {\n return this.statusCode === 401\n }\n\n get unprocessableEntity () {\n return this.statusCode === 422\n }\n\n get authenticationURL () {\n return this.response.headers.get('WWW-Authenticate')\n }\n\n get contentType () {\n const contentType = this.response.headers.get('Content-Type') || ''\n\n return contentType.replace(/;.*$/, '')\n }\n\n get headers () {\n return this.response.headers\n }\n\n get html () {\n if (this.contentType.match(/^(application|text)\\/(html|xhtml\\+xml)$/)) {\n return this.text\n }\n\n return Promise.reject(new Error(`Expected an HTML response but got \"${this.contentType}\" instead`))\n }\n\n get json () {\n if (this.contentType.match(/^application\\/.*json$/)) {\n return this.responseJson || (this.responseJson = this.response.json())\n }\n\n return Promise.reject(new Error(`Expected a JSON response but got \"${this.contentType}\" instead`))\n }\n\n get text () {\n return this.responseText || (this.responseText = this.response.text())\n }\n\n get isTurboStream () {\n return this.contentType.match(/^text\\/vnd\\.turbo-stream\\.html/)\n }\n\n async renderTurboStream () {\n if (this.isTurboStream) {\n if (window.Turbo) {\n await window.Turbo.renderStreamMessage(await this.text)\n } else {\n console.warn('You must set `window.Turbo = Turbo` to automatically process Turbo Stream events with request.js')\n }\n } else {\n return Promise.reject(new Error(`Expected a Turbo Stream response but got \"${this.contentType}\" instead`))\n }\n }\n}\n", "export class RequestInterceptor {\n static register (interceptor) {\n this.interceptor = interceptor\n }\n\n static get () {\n return this.interceptor\n }\n\n static reset () {\n this.interceptor = undefined\n }\n}\n", "export function getCookie (name) {\n const cookies = document.cookie ? document.cookie.split('; ') : []\n const prefix = `${encodeURIComponent(name)}=`\n const cookie = cookies.find(cookie => cookie.startsWith(prefix))\n\n if (cookie) {\n const value = cookie.split('=').slice(1).join('=')\n\n if (value) {\n return decodeURIComponent(value)\n }\n }\n}\n\nexport function compact (object) {\n const result = {}\n\n for (const key in object) {\n const value = object[key]\n if (value !== undefined) {\n result[key] = value\n }\n }\n\n return result\n}\n\nexport function metaContent (name) {\n const element = document.head.querySelector(`meta[name=\"${name}\"]`)\n return element && element.content\n}\n\nexport function stringEntriesFromFormData (formData) {\n return [...formData].reduce((entries, [name, value]) => {\n return entries.concat(typeof value === 'string' ? [[name, value]] : [])\n }, [])\n}\n\nexport function mergeEntries (searchParams, entries) {\n for (const [name, value] of entries) {\n if (value instanceof window.File) continue\n\n if (searchParams.has(name)) {\n searchParams.delete(name)\n searchParams.set(name, value)\n } else {\n searchParams.append(name, value)\n }\n }\n}\n", "import { FetchResponse } from './fetch_response'\nimport { RequestInterceptor } from './request_interceptor'\nimport { getCookie, compact, metaContent, stringEntriesFromFormData, mergeEntries } from './lib/utils'\n\nexport class FetchRequest {\n constructor (method, url, options = {}) {\n this.method = method\n this.options = options\n this.originalUrl = url.toString()\n }\n\n async perform () {\n try {\n const requestInterceptor = RequestInterceptor.get()\n if (requestInterceptor) {\n await requestInterceptor(this)\n }\n } catch (error) {\n console.error(error)\n }\n\n const response = new FetchResponse(await window.fetch(this.url, this.fetchOptions))\n\n if (response.unauthenticated && response.authenticationURL) {\n return Promise.reject(window.location.href = response.authenticationURL)\n }\n\n if (response.ok && response.isTurboStream) {\n await response.renderTurboStream()\n }\n\n return response\n }\n\n addHeader (key, value) {\n const headers = this.additionalHeaders\n headers[key] = value\n this.options.headers = headers\n }\n\n get fetchOptions () {\n return {\n method: this.method.toUpperCase(),\n headers: this.headers,\n body: this.formattedBody,\n signal: this.signal,\n credentials: 'same-origin',\n redirect: this.redirect\n }\n }\n\n get headers () {\n return compact(\n Object.assign({\n 'X-Requested-With': 'XMLHttpRequest',\n 'X-CSRF-Token': this.csrfToken,\n 'Content-Type': this.contentType,\n Accept: this.accept\n },\n this.additionalHeaders)\n )\n }\n\n get csrfToken () {\n return getCookie(metaContent('csrf-param')) || metaContent('csrf-token')\n }\n\n get contentType () {\n if (this.options.contentType) {\n return this.options.contentType\n } else if (this.body == null || this.body instanceof window.FormData) {\n return undefined\n } else if (this.body instanceof window.File) {\n return this.body.type\n }\n\n return 'application/json'\n }\n\n get accept () {\n switch (this.responseKind) {\n case 'html':\n return 'text/html, application/xhtml+xml'\n case 'turbo-stream':\n return 'text/vnd.turbo-stream.html, text/html, application/xhtml+xml'\n case 'json':\n return 'application/json, application/vnd.api+json'\n default:\n return '*/*'\n }\n }\n\n get body () {\n return this.options.body\n }\n\n get query () {\n const originalQuery = (this.originalUrl.split('?')[1] || '').split('#')[0]\n const params = new URLSearchParams(originalQuery)\n\n let requestQuery = this.options.query\n if (requestQuery instanceof window.FormData) {\n requestQuery = stringEntriesFromFormData(requestQuery)\n } else if (requestQuery instanceof window.URLSearchParams) {\n requestQuery = requestQuery.entries()\n } else {\n requestQuery = Object.entries(requestQuery || {})\n }\n\n mergeEntries(params, requestQuery)\n\n const query = params.toString()\n return (query.length > 0 ? `?${query}` : '')\n }\n\n get url () {\n return (this.originalUrl.split('?')[0]).split('#')[0] + this.query\n }\n\n get responseKind () {\n return this.options.responseKind || 'html'\n }\n\n get signal () {\n return this.options.signal\n }\n\n get redirect () {\n return this.options.redirect || 'follow'\n }\n\n get additionalHeaders () {\n return this.options.headers || {}\n }\n\n get formattedBody () {\n const bodyIsAString = Object.prototype.toString.call(this.body) === '[object String]'\n const contentTypeIsJson = this.headers['Content-Type'] === 'application/json'\n\n if (contentTypeIsJson && !bodyIsAString) {\n return JSON.stringify(this.body)\n }\n\n return this.body\n }\n}\n", "import { FetchRequest } from './fetch_request'\n\nasync function get (url, options) {\n const request = new FetchRequest('get', url, options)\n return request.perform()\n}\n\nasync function post (url, options) {\n const request = new FetchRequest('post', url, options)\n return request.perform()\n}\n\nasync function put (url, options) {\n const request = new FetchRequest('put', url, options)\n return request.perform()\n}\n\nasync function patch (url, options) {\n const request = new FetchRequest('patch', url, options)\n return request.perform()\n}\n\nasync function destroy (url, options) {\n const request = new FetchRequest('delete', url, options)\n return request.perform()\n}\n\nexport { get, post, put, patch, destroy }\n", "import { Controller } from \"@hotwired/stimulus\"\nimport Sortable from \"sortablejs\"\nimport { put } from \"@rails/request.js\"\n\nexport default class extends Controller {\n static values = { url: String }\n\n connect() {\n this.sortable = Sortable.create(this.element, {\n animation: 150,\n group: 'nested',\n onEnd: this.updatePosition.bind(this)\n })\n }\n async updatePosition(event) {\n // console.log(event.from)\n // console.log(event.to)\n const response = await put(`${this.urlValue}`, {\n body: JSON.stringify({\n old_parent_sgid: event.from.dataset.sgid,\n new_parent_sgid: event.to.dataset.sgid,\n sgid: event.item.dataset.sgid,\n position: event.newIndex + 1\n })\n })\n if (response.ok) {\n console.log(event.item.dataset.sgid)\n }\n }\n\n}\n", "import { Controller } from \"@hotwired/stimulus\"\n\n// Connects to data-controller=\"numbers\"\nexport default class extends Controller {\n static targets = [\"count\"]\n connect() {\n console.log(\"connecting to numbers\", this.element)\n }\n decrement() {\n console.log('decrement count')\n this.countTarget.stepDown();\n this.countTarget.dispatchEvent(new Event(\"change\"));\n }\n increment() {\n console.log('increment count')\n this.countTarget.stepUp();\n this.countTarget.dispatchEvent(new Event(\"change\"));\n }\n\n}\n", "import { Controller } from \"@hotwired/stimulus\"\n\n// Connects to data-controller=\"prices\"\nexport default class extends Controller {\n static targets = [\"checkbox\", \"options\"]\n connect() {\n // console.log(\"connecting to prices\", this.element)\n // console.log('optionsTarget', this.optionsTarget)\n }\n\n check(event) {\n // console.log(this.checkboxTarget.checked)\n // console.log(event.target.checked)\n // console.log(event.target.id)\n // console.log(event.target.value)\n this.request = new Request(event.target.dataset.pricesUrl);\n this.fetchPrices(this.request);\n }\n\n fetchPrices(request) {\n fetch(request)\n .then((response) => {\n if (response.status == 200) {\n response.text().then((text) => this.optionsTarget.innerHTML = text);\n } else {\n console.log(\"Couldn't load data\");\n }\n })\n }\n\n\n\n}\n", "import { Controller } from \"@hotwired/stimulus\"\n\n// solution for integrating tinyMCE with stimulus from here:\n// https://dev.to/djchadderton/making-tinymce-work-with-rails-turbolinks-and-stimulus-2ooa\n\n// the fix for the deprecated root_block false from here:\n// https://github.com/tinymce/tinymce/discussions/7342\n\n// Import TinyMCE\nimport tinymce from \"tinymce/tinymce\"\n\n// fails to load dom/model.js otherwise\nimport \"tinymce/models/dom\"\n\n// Import icons\nimport 'tinymce/icons/default/icons'\n\n// Import theme\nimport 'tinymce/themes/silver/theme';\n\n// skin is imported through manage.css in asset/stylesheets\n// Import skin\n// import 'tinymce/skins/ui/oxide/skin.min.css';\n\n// Import plugins\n\n// import 'tinymce/plugins/advlist';\n// import 'tinymce/plugins/anchor';\n// import 'tinymce/plugins/autolink';\nimport 'tinymce/plugins/autoresize';\n// import 'tinymce/plugins/autosave';\n// import 'tinymce/plugins/bbcode';\nimport 'tinymce/plugins/charmap';\nimport 'tinymce/plugins/code';\n// import 'tinymce/plugins/codesample';\n// import 'tinymce/plugins/colorpicker';\n// import 'tinymce/plugins/contextmenu';\n// import 'tinymce/plugins/directionality';\n// import 'tinymce/plugins/emoticons';\n// import 'tinymce/plugins/fullpage';\n// import 'tinymce/plugins/fullscreen';\n// import 'tinymce/plugins/help';\n// import 'tinymce/plugins/hr';\n// import 'tinymce/plugins/image';\n// import 'tinymce/plugins/imagetools';\n// import 'tinymce/plugins/insertdatetime';\n// import 'tinymce/plugins/legacyoutput';\nimport 'tinymce/plugins/link';\nimport 'tinymce/plugins/lists';\n// import 'tinymce/plugins/media';\n// import 'tinymce/plugins/nonbreaking';\n// import 'tinymce/plugins/noneditable';\n// import 'tinymce/plugins/pagebreak';\n// import 'tinymce/plugins/paste';\n// import 'tinymce/plugins/preview';\n// import 'tinymce/plugins/print';\n// import 'tinymce/plugins/quickbars';\n// import 'tinymce/plugins/save';\n// import 'tinymce/plugins/searchreplace';\n// import 'tinymce/plugins/spellchecker';\n// import 'tinymce/plugins/tabfocus';\nimport 'tinymce/plugins/table';\n// import 'tinymce/plugins/template';\n// import 'tinymce/plugins/textcolor';\n// import 'tinymce/plugins/textpattern';\n// import 'tinymce/plugins/toc';\n// import 'tinymce/plugins/visualblocks';\n// import 'tinymce/plugins/visualchars';\nimport 'tinymce/plugins/wordcount';\n\n\nexport default class extends Controller {\n static targets = ['input']\n\n connect() {\n let config = Object.assign({ target: this.inputTarget }, this.defaults)\n tinymce.init(config)\n }\n\n disconnect() {\n tinymce.remove()\n // this does not disconnect the editor instance\n // if (!this.preview) {\n // console.log('disconnecting tinymce editor instance')\n // tinymce.remove()\n // }\n }\n\n // get preview() {\n // return (\n // document.documentElement.hasAttribute('data-turbolinks-preview') ||\n // document.documentElement.hasAttribute('data-turbo-preview')\n // )\n // }\n\n initialize() {\n let _this = this;\n this.defaults = {\n setup: function (editor) {\n editor.on(\"PostProcess\", function (ed) {\n ed.content = _this.removeOuterParagraphTags(ed.content);\n ed.content = _this.removeOuterNonBreakingSpaces(ed.content);\n })\n },\n promotion: false,\n content_css: false,\n skin: false,\n // forced_root_block: \"p\",\n paste_as_text: true,\n menubar: true,\n inline: true,\n toolbar: [\n 'save | undo redo | bold italic underline strikethrough superscript | formatselect blockquote numlist bullist | alignleft aligncenter alignright | link hr charmap code | table'\n ],\n mobile: {\n toolbar: [\n 'save | undo redo | styles | bold italic underline strikethrough superscript | formatselect blockquote numlist bullist | alignleft aligncenter alignright | link hr charmap code | table'\n ]\n },\n plugins: 'link lists charmap table code autoresize wordcount',\n style_formats: [\n // { title: 'Heading 1', format: 'h1' },\n // { title: 'Heading 2', format: 'h2' },\n { title: 'Heading 3', format: 'h3' },\n { title: 'Heading 4', format: 'h4' },\n { title: 'Heading 5', format: 'h5' },\n { title: 'Heading 6', format: 'h6' },\n { title: 'Paragraph', format: 'p' }\n ],\n max_height: 700,\n default_link_target: '_blank',\n link_title: false,\n autoresize_bottom_margin: 10,\n link_context_toolbar: true,\n relative_urls: false,\n browser_spellcheck: true,\n element_format: 'html',\n // invalid_elements: ['span'],\n // content_style: 'html { font-family: Roboto, sans-serif; line-height: 1.5; }'\n }\n }\n\n removeOuterParagraphTags(html) {\n if (html.startsWith(\"\")) {\n var count = (html.match(/
/g) || []).length;\n // console.log(count);\n // if the only p tag is the root block, remove it\n if (count == 1) {\n // Remove the first p tag at the beginning of the string.\n html = html.replace(/
/, \"\");\n // And remove the closing p tag at the end of the string.\n html = html.replace(/<\\/p>$/, \"\");\n }\n }\n return html;\n }\n\n removeOuterNonBreakingSpaces(html) {\n if (html.startsWith(\" \")) {\n html = html.replace(/ /, \"\");\n html = html.replace(/<\\/p>$/, \"\");\n }\n if (html.endsWith(\" \")) {\n html = html.replace(/ $/, \"\");\n }\n return html;\n }\n\n}\n", "// Exports the \"dom\" model for usage with module loaders\n// Usage:\n// CommonJS:\n// require('tinymce/models/dom')\n// ES2015:\n// import 'tinymce/models/dom'\nrequire('./model.js');", "tinymce.IconManager.add('default', {\n icons: {\n 'accessibility-check': '',\n 'action-next': '',\n 'action-prev': '',\n 'addtag': '',\n 'align-center': '',\n 'align-justify': '',\n 'align-left': '',\n 'align-none': '',\n 'align-right': '',\n 'arrow-left': '',\n 'arrow-right': '',\n 'bold': '',\n 'bookmark': '',\n 'border-style': '',\n 'border-width': '',\n 'brightness': '',\n 'browse': '',\n 'cancel': '',\n 'cell-background-color': '',\n 'cell-border-color': '',\n 'change-case': '',\n 'character-count': '',\n 'checklist-rtl': '',\n 'checklist': '',\n 'checkmark': '',\n 'chevron-down': '',\n 'chevron-left': '',\n 'chevron-right': '',\n 'chevron-up': '',\n 'close': '',\n 'code-sample': '',\n 'color-levels': '',\n 'color-picker': '',\n 'color-swatch-remove-color': '',\n 'color-swatch': '',\n 'comment-add': '',\n 'comment': '',\n 'contrast': '',\n 'copy': '',\n 'crop': '',\n 'cut-column': '',\n 'cut-row': '',\n 'cut': '',\n 'document-properties': '',\n 'drag': '',\n 'duplicate-column': '',\n 'duplicate-row': '',\n 'duplicate': '',\n 'edit-block': '',\n 'edit-image': '',\n 'embed-page': '',\n 'embed': '',\n 'emoji': '',\n 'export': '',\n 'fill': '',\n 'flip-horizontally': '',\n 'flip-vertically': '',\n 'footnote': '',\n 'format-painter': '',\n 'format': '',\n 'fullscreen': '',\n 'gallery': '',\n 'gamma': '',\n 'help': '',\n 'highlight-bg-color': '',\n 'home': '',\n 'horizontal-rule': '',\n 'image-options': '',\n 'image': '',\n 'indent': '',\n 'info': '',\n 'insert-character': '',\n 'insert-time': '',\n 'invert': '',\n 'italic': '',\n 'language': '',\n 'line-height': '',\n 'line': '',\n 'link': '',\n 'list-bull-circle': '',\n 'list-bull-default': '',\n 'list-bull-square': '',\n 'list-num-default-rtl': '',\n 'list-num-default': '',\n 'list-num-lower-alpha-rtl': '',\n 'list-num-lower-alpha': '',\n 'list-num-lower-greek-rtl': '',\n 'list-num-lower-greek': '',\n 'list-num-lower-roman-rtl': '',\n 'list-num-lower-roman': '',\n 'list-num-upper-alpha-rtl': '',\n 'list-num-upper-alpha': '',\n 'list-num-upper-roman-rtl': '',\n 'list-num-upper-roman': '',\n 'lock': '',\n 'ltr': '',\n 'more-drawer': '',\n 'new-document': '',\n 'new-tab': '',\n 'non-breaking': '',\n 'notice': '',\n 'ordered-list-rtl': '',\n 'ordered-list': '',\n 'orientation': '',\n 'outdent': '',\n 'page-break': '',\n 'paragraph': '',\n 'paste-column-after': '',\n 'paste-column-before': '',\n 'paste-row-after': '',\n 'paste-row-before': '',\n 'paste-text': '',\n 'paste': '',\n 'permanent-pen': '',\n 'plus': '',\n 'preferences': '',\n 'preview': '',\n 'print': '',\n 'quote': '',\n 'redo': '',\n 'reload': '',\n 'remove-formatting': '',\n 'remove': '',\n 'resize-handle': '',\n 'resize': '',\n 'restore-draft': '',\n 'rotate-left': '',\n 'rotate-right': '',\n 'rtl': '',\n 'save': '',\n 'search': '',\n 'select-all': '',\n 'selected': '',\n 'settings': '',\n 'sharpen': '',\n 'sourcecode': '',\n 'spell-check': '',\n 'strike-through': '',\n 'subscript': '',\n 'superscript': '',\n 'table-caption': '',\n 'table-cell-classes': '',\n 'table-cell-properties': '',\n 'table-cell-select-all': '',\n 'table-cell-select-inner': '',\n 'table-classes': '',\n 'table-delete-column': '',\n 'table-delete-row': '',\n 'table-delete-table': '',\n 'table-insert-column-after': '',\n 'table-insert-column-before': '',\n 'table-insert-row-above': '',\n 'table-insert-row-after': '',\n 'table-left-header': '',\n 'table-merge-cells': '',\n 'table-row-numbering-rtl': '',\n 'table-row-numbering': '',\n 'table-row-properties': '',\n 'table-split-cells': '',\n 'table-top-header': '',\n 'table': '',\n 'template': '',\n 'temporary-placeholder': '',\n 'text-color': '',\n 'toc': '',\n 'translate': '',\n 'typography': '',\n 'underline': '',\n 'undo': '',\n 'unlink': '',\n 'unlock': '',\n 'unordered-list': '',\n 'unselected': '',\n 'upload': '',\n 'user': '',\n 'vertical-align': '',\n 'visualblocks': '',\n 'visualchars': '',\n 'warning': '',\n 'zoom-in': '',\n 'zoom-out': '',\n }\n});", "/**\n * TinyMCE version 6.3.1 (2022-12-06)\n */\n\n(function () {\n 'use strict';\n\n const getPrototypeOf$2 = Object.getPrototypeOf;\n const hasProto = (v, constructor, predicate) => {\n var _a;\n if (predicate(v, constructor.prototype)) {\n return true;\n } else {\n return ((_a = v.constructor) === null || _a === void 0 ? void 0 : _a.name) === constructor.name;\n }\n };\n const typeOf = x => {\n const t = typeof x;\n if (x === null) {\n return 'null';\n } else if (t === 'object' && Array.isArray(x)) {\n return 'array';\n } else if (t === 'object' && hasProto(x, String, (o, proto) => proto.isPrototypeOf(o))) {\n return 'string';\n } else {\n return t;\n }\n };\n const isType$1 = type => value => typeOf(value) === type;\n const isSimpleType = type => value => typeof value === type;\n const eq$1 = t => a => t === a;\n const is$2 = (value, constructor) => isObject(value) && hasProto(value, constructor, (o, proto) => getPrototypeOf$2(o) === proto);\n const isString = isType$1('string');\n const isObject = isType$1('object');\n const isPlainObject = value => is$2(value, Object);\n const isArray = isType$1('array');\n const isNull = eq$1(null);\n const isBoolean = isSimpleType('boolean');\n const isUndefined = eq$1(undefined);\n const isNullable = a => a === null || a === undefined;\n const isNonNullable = a => !isNullable(a);\n const isFunction = isSimpleType('function');\n const isNumber = isSimpleType('number');\n const isArrayOf = (value, pred) => {\n if (isArray(value)) {\n for (let i = 0, len = value.length; i < len; ++i) {\n if (!pred(value[i])) {\n return false;\n }\n }\n return true;\n }\n return false;\n };\n\n const noop = () => {\n };\n const noarg = f => () => f();\n const compose = (fa, fb) => {\n return (...args) => {\n return fa(fb.apply(null, args));\n };\n };\n const compose1 = (fbc, fab) => a => fbc(fab(a));\n const constant$1 = value => {\n return () => {\n return value;\n };\n };\n const identity = x => {\n return x;\n };\n const tripleEquals = (a, b) => {\n return a === b;\n };\n function curry(fn, ...initialArgs) {\n return (...restArgs) => {\n const all = initialArgs.concat(restArgs);\n return fn.apply(null, all);\n };\n }\n const not = f => t => !f(t);\n const die = msg => {\n return () => {\n throw new Error(msg);\n };\n };\n const apply$1 = f => {\n return f();\n };\n const never = constant$1(false);\n const always = constant$1(true);\n\n var global$a = tinymce.util.Tools.resolve('tinymce.ThemeManager');\n\n class Optional {\n constructor(tag, value) {\n this.tag = tag;\n this.value = value;\n }\n static some(value) {\n return new Optional(true, value);\n }\n static none() {\n return Optional.singletonNone;\n }\n fold(onNone, onSome) {\n if (this.tag) {\n return onSome(this.value);\n } else {\n return onNone();\n }\n }\n isSome() {\n return this.tag;\n }\n isNone() {\n return !this.tag;\n }\n map(mapper) {\n if (this.tag) {\n return Optional.some(mapper(this.value));\n } else {\n return Optional.none();\n }\n }\n bind(binder) {\n if (this.tag) {\n return binder(this.value);\n } else {\n return Optional.none();\n }\n }\n exists(predicate) {\n return this.tag && predicate(this.value);\n }\n forall(predicate) {\n return !this.tag || predicate(this.value);\n }\n filter(predicate) {\n if (!this.tag || predicate(this.value)) {\n return this;\n } else {\n return Optional.none();\n }\n }\n getOr(replacement) {\n return this.tag ? this.value : replacement;\n }\n or(replacement) {\n return this.tag ? this : replacement;\n }\n getOrThunk(thunk) {\n return this.tag ? this.value : thunk();\n }\n orThunk(thunk) {\n return this.tag ? this : thunk();\n }\n getOrDie(message) {\n if (!this.tag) {\n throw new Error(message !== null && message !== void 0 ? message : 'Called getOrDie on None');\n } else {\n return this.value;\n }\n }\n static from(value) {\n return isNonNullable(value) ? Optional.some(value) : Optional.none();\n }\n getOrNull() {\n return this.tag ? this.value : null;\n }\n getOrUndefined() {\n return this.value;\n }\n each(worker) {\n if (this.tag) {\n worker(this.value);\n }\n }\n toArray() {\n return this.tag ? [this.value] : [];\n }\n toString() {\n return this.tag ? `some(${ this.value })` : 'none()';\n }\n }\n Optional.singletonNone = new Optional(false);\n\n const nativeSlice = Array.prototype.slice;\n const nativeIndexOf = Array.prototype.indexOf;\n const nativePush = Array.prototype.push;\n const rawIndexOf = (ts, t) => nativeIndexOf.call(ts, t);\n const indexOf = (xs, x) => {\n const r = rawIndexOf(xs, x);\n return r === -1 ? Optional.none() : Optional.some(r);\n };\n const contains$2 = (xs, x) => rawIndexOf(xs, x) > -1;\n const exists = (xs, pred) => {\n for (let i = 0, len = xs.length; i < len; i++) {\n const x = xs[i];\n if (pred(x, i)) {\n return true;\n }\n }\n return false;\n };\n const range$2 = (num, f) => {\n const r = [];\n for (let i = 0; i < num; i++) {\n r.push(f(i));\n }\n return r;\n };\n const chunk$1 = (array, size) => {\n const r = [];\n for (let i = 0; i < array.length; i += size) {\n const s = nativeSlice.call(array, i, i + size);\n r.push(s);\n }\n return r;\n };\n const map$2 = (xs, f) => {\n const len = xs.length;\n const r = new Array(len);\n for (let i = 0; i < len; i++) {\n const x = xs[i];\n r[i] = f(x, i);\n }\n return r;\n };\n const each$1 = (xs, f) => {\n for (let i = 0, len = xs.length; i < len; i++) {\n const x = xs[i];\n f(x, i);\n }\n };\n const eachr = (xs, f) => {\n for (let i = xs.length - 1; i >= 0; i--) {\n const x = xs[i];\n f(x, i);\n }\n };\n const partition$3 = (xs, pred) => {\n const pass = [];\n const fail = [];\n for (let i = 0, len = xs.length; i < len; i++) {\n const x = xs[i];\n const arr = pred(x, i) ? pass : fail;\n arr.push(x);\n }\n return {\n pass,\n fail\n };\n };\n const filter$2 = (xs, pred) => {\n const r = [];\n for (let i = 0, len = xs.length; i < len; i++) {\n const x = xs[i];\n if (pred(x, i)) {\n r.push(x);\n }\n }\n return r;\n };\n const foldr = (xs, f, acc) => {\n eachr(xs, (x, i) => {\n acc = f(acc, x, i);\n });\n return acc;\n };\n const foldl = (xs, f, acc) => {\n each$1(xs, (x, i) => {\n acc = f(acc, x, i);\n });\n return acc;\n };\n const findUntil = (xs, pred, until) => {\n for (let i = 0, len = xs.length; i < len; i++) {\n const x = xs[i];\n if (pred(x, i)) {\n return Optional.some(x);\n } else if (until(x, i)) {\n break;\n }\n }\n return Optional.none();\n };\n const find$5 = (xs, pred) => {\n return findUntil(xs, pred, never);\n };\n const findIndex$1 = (xs, pred) => {\n for (let i = 0, len = xs.length; i < len; i++) {\n const x = xs[i];\n if (pred(x, i)) {\n return Optional.some(i);\n }\n }\n return Optional.none();\n };\n const flatten = xs => {\n const r = [];\n for (let i = 0, len = xs.length; i < len; ++i) {\n if (!isArray(xs[i])) {\n throw new Error('Arr.flatten item ' + i + ' was not an array, input: ' + xs);\n }\n nativePush.apply(r, xs[i]);\n }\n return r;\n };\n const bind$3 = (xs, f) => flatten(map$2(xs, f));\n const forall = (xs, pred) => {\n for (let i = 0, len = xs.length; i < len; ++i) {\n const x = xs[i];\n if (pred(x, i) !== true) {\n return false;\n }\n }\n return true;\n };\n const reverse = xs => {\n const r = nativeSlice.call(xs, 0);\n r.reverse();\n return r;\n };\n const difference = (a1, a2) => filter$2(a1, x => !contains$2(a2, x));\n const mapToObject = (xs, f) => {\n const r = {};\n for (let i = 0, len = xs.length; i < len; i++) {\n const x = xs[i];\n r[String(x)] = f(x, i);\n }\n return r;\n };\n const pure$2 = x => [x];\n const sort = (xs, comparator) => {\n const copy = nativeSlice.call(xs, 0);\n copy.sort(comparator);\n return copy;\n };\n const get$h = (xs, i) => i >= 0 && i < xs.length ? Optional.some(xs[i]) : Optional.none();\n const head = xs => get$h(xs, 0);\n const last$1 = xs => get$h(xs, xs.length - 1);\n const from = isFunction(Array.from) ? Array.from : x => nativeSlice.call(x);\n const findMap = (arr, f) => {\n for (let i = 0; i < arr.length; i++) {\n const r = f(arr[i], i);\n if (r.isSome()) {\n return r;\n }\n }\n return Optional.none();\n };\n\n const keys = Object.keys;\n const hasOwnProperty$1 = Object.hasOwnProperty;\n const each = (obj, f) => {\n const props = keys(obj);\n for (let k = 0, len = props.length; k < len; k++) {\n const i = props[k];\n const x = obj[i];\n f(x, i);\n }\n };\n const map$1 = (obj, f) => {\n return tupleMap(obj, (x, i) => ({\n k: i,\n v: f(x, i)\n }));\n };\n const tupleMap = (obj, f) => {\n const r = {};\n each(obj, (x, i) => {\n const tuple = f(x, i);\n r[tuple.k] = tuple.v;\n });\n return r;\n };\n const objAcc = r => (x, i) => {\n r[i] = x;\n };\n const internalFilter = (obj, pred, onTrue, onFalse) => {\n each(obj, (x, i) => {\n (pred(x, i) ? onTrue : onFalse)(x, i);\n });\n };\n const bifilter = (obj, pred) => {\n const t = {};\n const f = {};\n internalFilter(obj, pred, objAcc(t), objAcc(f));\n return {\n t,\n f\n };\n };\n const filter$1 = (obj, pred) => {\n const t = {};\n internalFilter(obj, pred, objAcc(t), noop);\n return t;\n };\n const mapToArray = (obj, f) => {\n const r = [];\n each(obj, (value, name) => {\n r.push(f(value, name));\n });\n return r;\n };\n const find$4 = (obj, pred) => {\n const props = keys(obj);\n for (let k = 0, len = props.length; k < len; k++) {\n const i = props[k];\n const x = obj[i];\n if (pred(x, i, obj)) {\n return Optional.some(x);\n }\n }\n return Optional.none();\n };\n const values = obj => {\n return mapToArray(obj, identity);\n };\n const get$g = (obj, key) => {\n return has$2(obj, key) ? Optional.from(obj[key]) : Optional.none();\n };\n const has$2 = (obj, key) => hasOwnProperty$1.call(obj, key);\n const hasNonNullableKey = (obj, key) => has$2(obj, key) && obj[key] !== undefined && obj[key] !== null;\n\n const is$1 = (lhs, rhs, comparator = tripleEquals) => lhs.exists(left => comparator(left, rhs));\n const equals = (lhs, rhs, comparator = tripleEquals) => lift2(lhs, rhs, comparator).getOr(lhs.isNone() && rhs.isNone());\n const cat = arr => {\n const r = [];\n const push = x => {\n r.push(x);\n };\n for (let i = 0; i < arr.length; i++) {\n arr[i].each(push);\n }\n return r;\n };\n const sequence = arr => {\n const r = [];\n for (let i = 0; i < arr.length; i++) {\n const x = arr[i];\n if (x.isSome()) {\n r.push(x.getOrDie());\n } else {\n return Optional.none();\n }\n }\n return Optional.some(r);\n };\n const lift2 = (oa, ob, f) => oa.isSome() && ob.isSome() ? Optional.some(f(oa.getOrDie(), ob.getOrDie())) : Optional.none();\n const lift3 = (oa, ob, oc, f) => oa.isSome() && ob.isSome() && oc.isSome() ? Optional.some(f(oa.getOrDie(), ob.getOrDie(), oc.getOrDie())) : Optional.none();\n const mapFrom = (a, f) => a !== undefined && a !== null ? Optional.some(f(a)) : Optional.none();\n const someIf = (b, a) => b ? Optional.some(a) : Optional.none();\n\n const addToEnd = (str, suffix) => {\n return str + suffix;\n };\n const removeFromStart = (str, numChars) => {\n return str.substring(numChars);\n };\n\n const checkRange = (str, substr, start) => substr === '' || str.length >= substr.length && str.substr(start, start + substr.length) === substr;\n const removeLeading = (str, prefix) => {\n return startsWith(str, prefix) ? removeFromStart(str, prefix.length) : str;\n };\n const ensureTrailing = (str, suffix) => {\n return endsWith(str, suffix) ? str : addToEnd(str, suffix);\n };\n const contains$1 = (str, substr, start = 0, end) => {\n const idx = str.indexOf(substr, start);\n if (idx !== -1) {\n return isUndefined(end) ? true : idx + substr.length <= end;\n } else {\n return false;\n }\n };\n const startsWith = (str, prefix) => {\n return checkRange(str, prefix, 0);\n };\n const endsWith = (str, suffix) => {\n return checkRange(str, suffix, str.length - suffix.length);\n };\n const blank = r => s => s.replace(r, '');\n const trim$1 = blank(/^\\s+|\\s+$/g);\n const isNotEmpty = s => s.length > 0;\n const isEmpty = s => !isNotEmpty(s);\n\n const isSupported$1 = dom => dom.style !== undefined && isFunction(dom.style.getPropertyValue);\n\n const fromHtml$2 = (html, scope) => {\n const doc = scope || document;\n const div = doc.createElement('div');\n div.innerHTML = html;\n if (!div.hasChildNodes() || div.childNodes.length > 1) {\n const message = 'HTML does not have a single root node';\n console.error(message, html);\n throw new Error(message);\n }\n return fromDom(div.childNodes[0]);\n };\n const fromTag = (tag, scope) => {\n const doc = scope || document;\n const node = doc.createElement(tag);\n return fromDom(node);\n };\n const fromText = (text, scope) => {\n const doc = scope || document;\n const node = doc.createTextNode(text);\n return fromDom(node);\n };\n const fromDom = node => {\n if (node === null || node === undefined) {\n throw new Error('Node cannot be null or undefined');\n }\n return { dom: node };\n };\n const fromPoint = (docElm, x, y) => Optional.from(docElm.dom.elementFromPoint(x, y)).map(fromDom);\n const SugarElement = {\n fromHtml: fromHtml$2,\n fromTag,\n fromText,\n fromDom,\n fromPoint\n };\n\n const Global = typeof window !== 'undefined' ? window : Function('return this;')();\n\n const path$1 = (parts, scope) => {\n let o = scope !== undefined && scope !== null ? scope : Global;\n for (let i = 0; i < parts.length && o !== undefined && o !== null; ++i) {\n o = o[parts[i]];\n }\n return o;\n };\n const resolve = (p, scope) => {\n const parts = p.split('.');\n return path$1(parts, scope);\n };\n\n const unsafe = (name, scope) => {\n return resolve(name, scope);\n };\n const getOrDie$1 = (name, scope) => {\n const actual = unsafe(name, scope);\n if (actual === undefined || actual === null) {\n throw new Error(name + ' not available on this browser');\n }\n return actual;\n };\n\n const getPrototypeOf$1 = Object.getPrototypeOf;\n const sandHTMLElement = scope => {\n return getOrDie$1('HTMLElement', scope);\n };\n const isPrototypeOf = x => {\n const scope = resolve('ownerDocument.defaultView', x);\n return isObject(x) && (sandHTMLElement(scope).prototype.isPrototypeOf(x) || /^HTML\\w*Element$/.test(getPrototypeOf$1(x).constructor.name));\n };\n\n const DOCUMENT = 9;\n const DOCUMENT_FRAGMENT = 11;\n const ELEMENT = 1;\n const TEXT = 3;\n\n const name$3 = element => {\n const r = element.dom.nodeName;\n return r.toLowerCase();\n };\n const type$1 = element => element.dom.nodeType;\n const isType = t => element => type$1(element) === t;\n const isHTMLElement = element => isElement$1(element) && isPrototypeOf(element.dom);\n const isElement$1 = isType(ELEMENT);\n const isText = isType(TEXT);\n const isDocument = isType(DOCUMENT);\n const isDocumentFragment = isType(DOCUMENT_FRAGMENT);\n const isTag = tag => e => isElement$1(e) && name$3(e) === tag;\n\n const is = (element, selector) => {\n const dom = element.dom;\n if (dom.nodeType !== ELEMENT) {\n return false;\n } else {\n const elem = dom;\n if (elem.matches !== undefined) {\n return elem.matches(selector);\n } else if (elem.msMatchesSelector !== undefined) {\n return elem.msMatchesSelector(selector);\n } else if (elem.webkitMatchesSelector !== undefined) {\n return elem.webkitMatchesSelector(selector);\n } else if (elem.mozMatchesSelector !== undefined) {\n return elem.mozMatchesSelector(selector);\n } else {\n throw new Error('Browser lacks native selectors');\n }\n }\n };\n const bypassSelector = dom => dom.nodeType !== ELEMENT && dom.nodeType !== DOCUMENT && dom.nodeType !== DOCUMENT_FRAGMENT || dom.childElementCount === 0;\n const all$3 = (selector, scope) => {\n const base = scope === undefined ? document : scope.dom;\n return bypassSelector(base) ? [] : map$2(base.querySelectorAll(selector), SugarElement.fromDom);\n };\n const one = (selector, scope) => {\n const base = scope === undefined ? document : scope.dom;\n return bypassSelector(base) ? Optional.none() : Optional.from(base.querySelector(selector)).map(SugarElement.fromDom);\n };\n\n const eq = (e1, e2) => e1.dom === e2.dom;\n const contains = (e1, e2) => {\n const d1 = e1.dom;\n const d2 = e2.dom;\n return d1 === d2 ? false : d1.contains(d2);\n };\n\n const owner$4 = element => SugarElement.fromDom(element.dom.ownerDocument);\n const documentOrOwner = dos => isDocument(dos) ? dos : owner$4(dos);\n const documentElement = element => SugarElement.fromDom(documentOrOwner(element).dom.documentElement);\n const defaultView = element => SugarElement.fromDom(documentOrOwner(element).dom.defaultView);\n const parent = element => Optional.from(element.dom.parentNode).map(SugarElement.fromDom);\n const parentElement = element => Optional.from(element.dom.parentElement).map(SugarElement.fromDom);\n const offsetParent = element => Optional.from(element.dom.offsetParent).map(SugarElement.fromDom);\n const nextSibling = element => Optional.from(element.dom.nextSibling).map(SugarElement.fromDom);\n const children = element => map$2(element.dom.childNodes, SugarElement.fromDom);\n const child$2 = (element, index) => {\n const cs = element.dom.childNodes;\n return Optional.from(cs[index]).map(SugarElement.fromDom);\n };\n const firstChild = element => child$2(element, 0);\n const spot = (element, offset) => ({\n element,\n offset\n });\n const leaf = (element, offset) => {\n const cs = children(element);\n return cs.length > 0 && offset < cs.length ? spot(cs[offset], 0) : spot(element, offset);\n };\n\n const isShadowRoot = dos => isDocumentFragment(dos) && isNonNullable(dos.dom.host);\n const supported = isFunction(Element.prototype.attachShadow) && isFunction(Node.prototype.getRootNode);\n const isSupported = constant$1(supported);\n const getRootNode = supported ? e => SugarElement.fromDom(e.dom.getRootNode()) : documentOrOwner;\n const getContentContainer = dos => isShadowRoot(dos) ? dos : SugarElement.fromDom(documentOrOwner(dos).dom.body);\n const isInShadowRoot = e => getShadowRoot(e).isSome();\n const getShadowRoot = e => {\n const r = getRootNode(e);\n return isShadowRoot(r) ? Optional.some(r) : Optional.none();\n };\n const getShadowHost = e => SugarElement.fromDom(e.dom.host);\n const getOriginalEventTarget = event => {\n if (isSupported() && isNonNullable(event.target)) {\n const el = SugarElement.fromDom(event.target);\n if (isElement$1(el) && isOpenShadowHost(el)) {\n if (event.composed && event.composedPath) {\n const composedPath = event.composedPath();\n if (composedPath) {\n return head(composedPath);\n }\n }\n }\n }\n return Optional.from(event.target);\n };\n const isOpenShadowHost = element => isNonNullable(element.dom.shadowRoot);\n\n const inBody = element => {\n const dom = isText(element) ? element.dom.parentNode : element.dom;\n if (dom === undefined || dom === null || dom.ownerDocument === null) {\n return false;\n }\n const doc = dom.ownerDocument;\n return getShadowRoot(SugarElement.fromDom(dom)).fold(() => doc.body.contains(dom), compose1(inBody, getShadowHost));\n };\n const body = () => getBody(SugarElement.fromDom(document));\n const getBody = doc => {\n const b = doc.dom.body;\n if (b === null || b === undefined) {\n throw new Error('Body is not available yet');\n }\n return SugarElement.fromDom(b);\n };\n\n const rawSet = (dom, key, value) => {\n if (isString(value) || isBoolean(value) || isNumber(value)) {\n dom.setAttribute(key, value + '');\n } else {\n console.error('Invalid call to Attribute.set. Key ', key, ':: Value ', value, ':: Element ', dom);\n throw new Error('Attribute value was not simple');\n }\n };\n const set$9 = (element, key, value) => {\n rawSet(element.dom, key, value);\n };\n const setAll$1 = (element, attrs) => {\n const dom = element.dom;\n each(attrs, (v, k) => {\n rawSet(dom, k, v);\n });\n };\n const get$f = (element, key) => {\n const v = element.dom.getAttribute(key);\n return v === null ? undefined : v;\n };\n const getOpt = (element, key) => Optional.from(get$f(element, key));\n const has$1 = (element, key) => {\n const dom = element.dom;\n return dom && dom.hasAttribute ? dom.hasAttribute(key) : false;\n };\n const remove$7 = (element, key) => {\n element.dom.removeAttribute(key);\n };\n const clone$2 = element => foldl(element.dom.attributes, (acc, attr) => {\n acc[attr.name] = attr.value;\n return acc;\n }, {});\n\n const internalSet = (dom, property, value) => {\n if (!isString(value)) {\n console.error('Invalid call to CSS.set. Property ', property, ':: Value ', value, ':: Element ', dom);\n throw new Error('CSS value must be a string: ' + value);\n }\n if (isSupported$1(dom)) {\n dom.style.setProperty(property, value);\n }\n };\n const internalRemove = (dom, property) => {\n if (isSupported$1(dom)) {\n dom.style.removeProperty(property);\n }\n };\n const set$8 = (element, property, value) => {\n const dom = element.dom;\n internalSet(dom, property, value);\n };\n const setAll = (element, css) => {\n const dom = element.dom;\n each(css, (v, k) => {\n internalSet(dom, k, v);\n });\n };\n const setOptions = (element, css) => {\n const dom = element.dom;\n each(css, (v, k) => {\n v.fold(() => {\n internalRemove(dom, k);\n }, value => {\n internalSet(dom, k, value);\n });\n });\n };\n const get$e = (element, property) => {\n const dom = element.dom;\n const styles = window.getComputedStyle(dom);\n const r = styles.getPropertyValue(property);\n return r === '' && !inBody(element) ? getUnsafeProperty(dom, property) : r;\n };\n const getUnsafeProperty = (dom, property) => isSupported$1(dom) ? dom.style.getPropertyValue(property) : '';\n const getRaw = (element, property) => {\n const dom = element.dom;\n const raw = getUnsafeProperty(dom, property);\n return Optional.from(raw).filter(r => r.length > 0);\n };\n const getAllRaw = element => {\n const css = {};\n const dom = element.dom;\n if (isSupported$1(dom)) {\n for (let i = 0; i < dom.style.length; i++) {\n const ruleName = dom.style.item(i);\n css[ruleName] = dom.style[ruleName];\n }\n }\n return css;\n };\n const isValidValue = (tag, property, value) => {\n const element = SugarElement.fromTag(tag);\n set$8(element, property, value);\n const style = getRaw(element, property);\n return style.isSome();\n };\n const remove$6 = (element, property) => {\n const dom = element.dom;\n internalRemove(dom, property);\n if (is$1(getOpt(element, 'style').map(trim$1), '')) {\n remove$7(element, 'style');\n }\n };\n const reflow = e => e.dom.offsetWidth;\n\n const Dimension = (name, getOffset) => {\n const set = (element, h) => {\n if (!isNumber(h) && !h.match(/^[0-9]+$/)) {\n throw new Error(name + '.set accepts only positive integer values. Value was ' + h);\n }\n const dom = element.dom;\n if (isSupported$1(dom)) {\n dom.style[name] = h + 'px';\n }\n };\n const get = element => {\n const r = getOffset(element);\n if (r <= 0 || r === null) {\n const css = get$e(element, name);\n return parseFloat(css) || 0;\n }\n return r;\n };\n const getOuter = get;\n const aggregate = (element, properties) => foldl(properties, (acc, property) => {\n const val = get$e(element, property);\n const value = val === undefined ? 0 : parseInt(val, 10);\n return isNaN(value) ? acc : acc + value;\n }, 0);\n const max = (element, value, properties) => {\n const cumulativeInclusions = aggregate(element, properties);\n const absoluteMax = value > cumulativeInclusions ? value - cumulativeInclusions : 0;\n return absoluteMax;\n };\n return {\n set,\n get,\n getOuter,\n aggregate,\n max\n };\n };\n\n const api$2 = Dimension('height', element => {\n const dom = element.dom;\n return inBody(element) ? dom.getBoundingClientRect().height : dom.offsetHeight;\n });\n const get$d = element => api$2.get(element);\n const getOuter$2 = element => api$2.getOuter(element);\n const setMax$1 = (element, value) => {\n const inclusions = [\n 'margin-top',\n 'border-top-width',\n 'padding-top',\n 'padding-bottom',\n 'border-bottom-width',\n 'margin-bottom'\n ];\n const absMax = api$2.max(element, value, inclusions);\n set$8(element, 'max-height', absMax + 'px');\n };\n\n const r$1 = (left, top) => {\n const translate = (x, y) => r$1(left + x, top + y);\n return {\n left,\n top,\n translate\n };\n };\n const SugarPosition = r$1;\n\n const boxPosition = dom => {\n const box = dom.getBoundingClientRect();\n return SugarPosition(box.left, box.top);\n };\n const firstDefinedOrZero = (a, b) => {\n if (a !== undefined) {\n return a;\n } else {\n return b !== undefined ? b : 0;\n }\n };\n const absolute$3 = element => {\n const doc = element.dom.ownerDocument;\n const body = doc.body;\n const win = doc.defaultView;\n const html = doc.documentElement;\n if (body === element.dom) {\n return SugarPosition(body.offsetLeft, body.offsetTop);\n }\n const scrollTop = firstDefinedOrZero(win === null || win === void 0 ? void 0 : win.pageYOffset, html.scrollTop);\n const scrollLeft = firstDefinedOrZero(win === null || win === void 0 ? void 0 : win.pageXOffset, html.scrollLeft);\n const clientTop = firstDefinedOrZero(html.clientTop, body.clientTop);\n const clientLeft = firstDefinedOrZero(html.clientLeft, body.clientLeft);\n return viewport$1(element).translate(scrollLeft - clientLeft, scrollTop - clientTop);\n };\n const viewport$1 = element => {\n const dom = element.dom;\n const doc = dom.ownerDocument;\n const body = doc.body;\n if (body === dom) {\n return SugarPosition(body.offsetLeft, body.offsetTop);\n }\n if (!inBody(element)) {\n return SugarPosition(0, 0);\n }\n return boxPosition(dom);\n };\n\n const api$1 = Dimension('width', element => element.dom.offsetWidth);\n const set$7 = (element, h) => api$1.set(element, h);\n const get$c = element => api$1.get(element);\n const getOuter$1 = element => api$1.getOuter(element);\n const setMax = (element, value) => {\n const inclusions = [\n 'margin-left',\n 'border-left-width',\n 'padding-left',\n 'padding-right',\n 'border-right-width',\n 'margin-right'\n ];\n const absMax = api$1.max(element, value, inclusions);\n set$8(element, 'max-width', absMax + 'px');\n };\n\n const cached = f => {\n let called = false;\n let r;\n return (...args) => {\n if (!called) {\n called = true;\n r = f.apply(null, args);\n }\n return r;\n };\n };\n\n const DeviceType = (os, browser, userAgent, mediaMatch) => {\n const isiPad = os.isiOS() && /ipad/i.test(userAgent) === true;\n const isiPhone = os.isiOS() && !isiPad;\n const isMobile = os.isiOS() || os.isAndroid();\n const isTouch = isMobile || mediaMatch('(pointer:coarse)');\n const isTablet = isiPad || !isiPhone && isMobile && mediaMatch('(min-device-width:768px)');\n const isPhone = isiPhone || isMobile && !isTablet;\n const iOSwebview = browser.isSafari() && os.isiOS() && /safari/i.test(userAgent) === false;\n const isDesktop = !isPhone && !isTablet && !iOSwebview;\n return {\n isiPad: constant$1(isiPad),\n isiPhone: constant$1(isiPhone),\n isTablet: constant$1(isTablet),\n isPhone: constant$1(isPhone),\n isTouch: constant$1(isTouch),\n isAndroid: os.isAndroid,\n isiOS: os.isiOS,\n isWebView: constant$1(iOSwebview),\n isDesktop: constant$1(isDesktop)\n };\n };\n\n const firstMatch = (regexes, s) => {\n for (let i = 0; i < regexes.length; i++) {\n const x = regexes[i];\n if (x.test(s)) {\n return x;\n }\n }\n return undefined;\n };\n const find$3 = (regexes, agent) => {\n const r = firstMatch(regexes, agent);\n if (!r) {\n return {\n major: 0,\n minor: 0\n };\n }\n const group = i => {\n return Number(agent.replace(r, '$' + i));\n };\n return nu$d(group(1), group(2));\n };\n const detect$4 = (versionRegexes, agent) => {\n const cleanedAgent = String(agent).toLowerCase();\n if (versionRegexes.length === 0) {\n return unknown$3();\n }\n return find$3(versionRegexes, cleanedAgent);\n };\n const unknown$3 = () => {\n return nu$d(0, 0);\n };\n const nu$d = (major, minor) => {\n return {\n major,\n minor\n };\n };\n const Version = {\n nu: nu$d,\n detect: detect$4,\n unknown: unknown$3\n };\n\n const detectBrowser$1 = (browsers, userAgentData) => {\n return findMap(userAgentData.brands, uaBrand => {\n const lcBrand = uaBrand.brand.toLowerCase();\n return find$5(browsers, browser => {\n var _a;\n return lcBrand === ((_a = browser.brand) === null || _a === void 0 ? void 0 : _a.toLowerCase());\n }).map(info => ({\n current: info.name,\n version: Version.nu(parseInt(uaBrand.version, 10), 0)\n }));\n });\n };\n\n const detect$3 = (candidates, userAgent) => {\n const agent = String(userAgent).toLowerCase();\n return find$5(candidates, candidate => {\n return candidate.search(agent);\n });\n };\n const detectBrowser = (browsers, userAgent) => {\n return detect$3(browsers, userAgent).map(browser => {\n const version = Version.detect(browser.versionRegexes, userAgent);\n return {\n current: browser.name,\n version\n };\n });\n };\n const detectOs = (oses, userAgent) => {\n return detect$3(oses, userAgent).map(os => {\n const version = Version.detect(os.versionRegexes, userAgent);\n return {\n current: os.name,\n version\n };\n });\n };\n\n const normalVersionRegex = /.*?version\\/\\ ?([0-9]+)\\.([0-9]+).*/;\n const checkContains = target => {\n return uastring => {\n return contains$1(uastring, target);\n };\n };\n const browsers = [\n {\n name: 'Edge',\n versionRegexes: [/.*?edge\\/ ?([0-9]+)\\.([0-9]+)$/],\n search: uastring => {\n return contains$1(uastring, 'edge/') && contains$1(uastring, 'chrome') && contains$1(uastring, 'safari') && contains$1(uastring, 'applewebkit');\n }\n },\n {\n name: 'Chromium',\n brand: 'Chromium',\n versionRegexes: [\n /.*?chrome\\/([0-9]+)\\.([0-9]+).*/,\n normalVersionRegex\n ],\n search: uastring => {\n return contains$1(uastring, 'chrome') && !contains$1(uastring, 'chromeframe');\n }\n },\n {\n name: 'IE',\n versionRegexes: [\n /.*?msie\\ ?([0-9]+)\\.([0-9]+).*/,\n /.*?rv:([0-9]+)\\.([0-9]+).*/\n ],\n search: uastring => {\n return contains$1(uastring, 'msie') || contains$1(uastring, 'trident');\n }\n },\n {\n name: 'Opera',\n versionRegexes: [\n normalVersionRegex,\n /.*?opera\\/([0-9]+)\\.([0-9]+).*/\n ],\n search: checkContains('opera')\n },\n {\n name: 'Firefox',\n versionRegexes: [/.*?firefox\\/\\ ?([0-9]+)\\.([0-9]+).*/],\n search: checkContains('firefox')\n },\n {\n name: 'Safari',\n versionRegexes: [\n normalVersionRegex,\n /.*?cpu os ([0-9]+)_([0-9]+).*/\n ],\n search: uastring => {\n return (contains$1(uastring, 'safari') || contains$1(uastring, 'mobile/')) && contains$1(uastring, 'applewebkit');\n }\n }\n ];\n const oses = [\n {\n name: 'Windows',\n search: checkContains('win'),\n versionRegexes: [/.*?windows\\ nt\\ ?([0-9]+)\\.([0-9]+).*/]\n },\n {\n name: 'iOS',\n search: uastring => {\n return contains$1(uastring, 'iphone') || contains$1(uastring, 'ipad');\n },\n versionRegexes: [\n /.*?version\\/\\ ?([0-9]+)\\.([0-9]+).*/,\n /.*cpu os ([0-9]+)_([0-9]+).*/,\n /.*cpu iphone os ([0-9]+)_([0-9]+).*/\n ]\n },\n {\n name: 'Android',\n search: checkContains('android'),\n versionRegexes: [/.*?android\\ ?([0-9]+)\\.([0-9]+).*/]\n },\n {\n name: 'macOS',\n search: checkContains('mac os x'),\n versionRegexes: [/.*?mac\\ os\\ x\\ ?([0-9]+)_([0-9]+).*/]\n },\n {\n name: 'Linux',\n search: checkContains('linux'),\n versionRegexes: []\n },\n {\n name: 'Solaris',\n search: checkContains('sunos'),\n versionRegexes: []\n },\n {\n name: 'FreeBSD',\n search: checkContains('freebsd'),\n versionRegexes: []\n },\n {\n name: 'ChromeOS',\n search: checkContains('cros'),\n versionRegexes: [/.*?chrome\\/([0-9]+)\\.([0-9]+).*/]\n }\n ];\n const PlatformInfo = {\n browsers: constant$1(browsers),\n oses: constant$1(oses)\n };\n\n const edge = 'Edge';\n const chromium = 'Chromium';\n const ie = 'IE';\n const opera = 'Opera';\n const firefox = 'Firefox';\n const safari = 'Safari';\n const unknown$2 = () => {\n return nu$c({\n current: undefined,\n version: Version.unknown()\n });\n };\n const nu$c = info => {\n const current = info.current;\n const version = info.version;\n const isBrowser = name => () => current === name;\n return {\n current,\n version,\n isEdge: isBrowser(edge),\n isChromium: isBrowser(chromium),\n isIE: isBrowser(ie),\n isOpera: isBrowser(opera),\n isFirefox: isBrowser(firefox),\n isSafari: isBrowser(safari)\n };\n };\n const Browser = {\n unknown: unknown$2,\n nu: nu$c,\n edge: constant$1(edge),\n chromium: constant$1(chromium),\n ie: constant$1(ie),\n opera: constant$1(opera),\n firefox: constant$1(firefox),\n safari: constant$1(safari)\n };\n\n const windows = 'Windows';\n const ios = 'iOS';\n const android = 'Android';\n const linux = 'Linux';\n const macos = 'macOS';\n const solaris = 'Solaris';\n const freebsd = 'FreeBSD';\n const chromeos = 'ChromeOS';\n const unknown$1 = () => {\n return nu$b({\n current: undefined,\n version: Version.unknown()\n });\n };\n const nu$b = info => {\n const current = info.current;\n const version = info.version;\n const isOS = name => () => current === name;\n return {\n current,\n version,\n isWindows: isOS(windows),\n isiOS: isOS(ios),\n isAndroid: isOS(android),\n isMacOS: isOS(macos),\n isLinux: isOS(linux),\n isSolaris: isOS(solaris),\n isFreeBSD: isOS(freebsd),\n isChromeOS: isOS(chromeos)\n };\n };\n const OperatingSystem = {\n unknown: unknown$1,\n nu: nu$b,\n windows: constant$1(windows),\n ios: constant$1(ios),\n android: constant$1(android),\n linux: constant$1(linux),\n macos: constant$1(macos),\n solaris: constant$1(solaris),\n freebsd: constant$1(freebsd),\n chromeos: constant$1(chromeos)\n };\n\n const detect$2 = (userAgent, userAgentDataOpt, mediaMatch) => {\n const browsers = PlatformInfo.browsers();\n const oses = PlatformInfo.oses();\n const browser = userAgentDataOpt.bind(userAgentData => detectBrowser$1(browsers, userAgentData)).orThunk(() => detectBrowser(browsers, userAgent)).fold(Browser.unknown, Browser.nu);\n const os = detectOs(oses, userAgent).fold(OperatingSystem.unknown, OperatingSystem.nu);\n const deviceType = DeviceType(os, browser, userAgent, mediaMatch);\n return {\n browser,\n os,\n deviceType\n };\n };\n const PlatformDetection = { detect: detect$2 };\n\n const mediaMatch = query => window.matchMedia(query).matches;\n let platform = cached(() => PlatformDetection.detect(navigator.userAgent, Optional.from(navigator.userAgentData), mediaMatch));\n const detect$1 = () => platform();\n\n const mkEvent = (target, x, y, stop, prevent, kill, raw) => ({\n target,\n x,\n y,\n stop,\n prevent,\n kill,\n raw\n });\n const fromRawEvent$1 = rawEvent => {\n const target = SugarElement.fromDom(getOriginalEventTarget(rawEvent).getOr(rawEvent.target));\n const stop = () => rawEvent.stopPropagation();\n const prevent = () => rawEvent.preventDefault();\n const kill = compose(prevent, stop);\n return mkEvent(target, rawEvent.clientX, rawEvent.clientY, stop, prevent, kill, rawEvent);\n };\n const handle = (filter, handler) => rawEvent => {\n if (filter(rawEvent)) {\n handler(fromRawEvent$1(rawEvent));\n }\n };\n const binder = (element, event, filter, handler, useCapture) => {\n const wrapped = handle(filter, handler);\n element.dom.addEventListener(event, wrapped, useCapture);\n return { unbind: curry(unbind, element, event, wrapped, useCapture) };\n };\n const bind$2 = (element, event, filter, handler) => binder(element, event, filter, handler, false);\n const capture$1 = (element, event, filter, handler) => binder(element, event, filter, handler, true);\n const unbind = (element, event, handler, useCapture) => {\n element.dom.removeEventListener(event, handler, useCapture);\n };\n\n const before$1 = (marker, element) => {\n const parent$1 = parent(marker);\n parent$1.each(v => {\n v.dom.insertBefore(element.dom, marker.dom);\n });\n };\n const after$2 = (marker, element) => {\n const sibling = nextSibling(marker);\n sibling.fold(() => {\n const parent$1 = parent(marker);\n parent$1.each(v => {\n append$2(v, element);\n });\n }, v => {\n before$1(v, element);\n });\n };\n const prepend$1 = (parent, element) => {\n const firstChild$1 = firstChild(parent);\n firstChild$1.fold(() => {\n append$2(parent, element);\n }, v => {\n parent.dom.insertBefore(element.dom, v.dom);\n });\n };\n const append$2 = (parent, element) => {\n parent.dom.appendChild(element.dom);\n };\n const appendAt = (parent, element, index) => {\n child$2(parent, index).fold(() => {\n append$2(parent, element);\n }, v => {\n before$1(v, element);\n });\n };\n\n const append$1 = (parent, elements) => {\n each$1(elements, x => {\n append$2(parent, x);\n });\n };\n\n const empty = element => {\n element.dom.textContent = '';\n each$1(children(element), rogue => {\n remove$5(rogue);\n });\n };\n const remove$5 = element => {\n const dom = element.dom;\n if (dom.parentNode !== null) {\n dom.parentNode.removeChild(dom);\n }\n };\n\n const get$b = _DOC => {\n const doc = _DOC !== undefined ? _DOC.dom : document;\n const x = doc.body.scrollLeft || doc.documentElement.scrollLeft;\n const y = doc.body.scrollTop || doc.documentElement.scrollTop;\n return SugarPosition(x, y);\n };\n const to = (x, y, _DOC) => {\n const doc = _DOC !== undefined ? _DOC.dom : document;\n const win = doc.defaultView;\n if (win) {\n win.scrollTo(x, y);\n }\n };\n\n const get$a = _win => {\n const win = _win === undefined ? window : _win;\n if (detect$1().browser.isFirefox()) {\n return Optional.none();\n } else {\n return Optional.from(win.visualViewport);\n }\n };\n const bounds$1 = (x, y, width, height) => ({\n x,\n y,\n width,\n height,\n right: x + width,\n bottom: y + height\n });\n const getBounds$3 = _win => {\n const win = _win === undefined ? window : _win;\n const doc = win.document;\n const scroll = get$b(SugarElement.fromDom(doc));\n return get$a(win).fold(() => {\n const html = win.document.documentElement;\n const width = html.clientWidth;\n const height = html.clientHeight;\n return bounds$1(scroll.left, scroll.top, width, height);\n }, visualViewport => bounds$1(Math.max(visualViewport.pageLeft, scroll.left), Math.max(visualViewport.pageTop, scroll.top), visualViewport.width, visualViewport.height));\n };\n\n const getDocument = () => SugarElement.fromDom(document);\n\n const walkUp = (navigation, doc) => {\n const frame = navigation.view(doc);\n return frame.fold(constant$1([]), f => {\n const parent = navigation.owner(f);\n const rest = walkUp(navigation, parent);\n return [f].concat(rest);\n });\n };\n const pathTo = (element, navigation) => {\n const d = navigation.owner(element);\n const paths = walkUp(navigation, d);\n return Optional.some(paths);\n };\n\n const view = doc => {\n var _a;\n const element = doc.dom === document ? Optional.none() : Optional.from((_a = doc.dom.defaultView) === null || _a === void 0 ? void 0 : _a.frameElement);\n return element.map(SugarElement.fromDom);\n };\n const owner$3 = element => owner$4(element);\n\n var Navigation = /*#__PURE__*/Object.freeze({\n __proto__: null,\n view: view,\n owner: owner$3\n });\n\n const find$2 = element => {\n const doc = getDocument();\n const scroll = get$b(doc);\n const path = pathTo(element, Navigation);\n return path.fold(curry(absolute$3, element), frames => {\n const offset = viewport$1(element);\n const r = foldr(frames, (b, a) => {\n const loc = viewport$1(a);\n return {\n left: b.left + loc.left,\n top: b.top + loc.top\n };\n }, {\n left: 0,\n top: 0\n });\n return SugarPosition(r.left + offset.left + scroll.left, r.top + offset.top + scroll.top);\n });\n };\n\n const pointed = (point, width, height) => ({\n point,\n width,\n height\n });\n const rect = (x, y, width, height) => ({\n x,\n y,\n width,\n height\n });\n const bounds = (x, y, width, height) => ({\n x,\n y,\n width,\n height,\n right: x + width,\n bottom: y + height\n });\n const box$1 = element => {\n const xy = absolute$3(element);\n const w = getOuter$1(element);\n const h = getOuter$2(element);\n return bounds(xy.left, xy.top, w, h);\n };\n const absolute$2 = element => {\n const position = find$2(element);\n const width = getOuter$1(element);\n const height = getOuter$2(element);\n return bounds(position.left, position.top, width, height);\n };\n const win = () => getBounds$3(window);\n\n const value$4 = value => {\n const applyHelper = fn => fn(value);\n const constHelper = constant$1(value);\n const outputHelper = () => output;\n const output = {\n tag: true,\n inner: value,\n fold: (_onError, onValue) => onValue(value),\n isValue: always,\n isError: never,\n map: mapper => Result.value(mapper(value)),\n mapError: outputHelper,\n bind: applyHelper,\n exists: applyHelper,\n forall: applyHelper,\n getOr: constHelper,\n or: outputHelper,\n getOrThunk: constHelper,\n orThunk: outputHelper,\n getOrDie: constHelper,\n each: fn => {\n fn(value);\n },\n toOptional: () => Optional.some(value)\n };\n return output;\n };\n const error$1 = error => {\n const outputHelper = () => output;\n const output = {\n tag: false,\n inner: error,\n fold: (onError, _onValue) => onError(error),\n isValue: never,\n isError: always,\n map: outputHelper,\n mapError: mapper => Result.error(mapper(error)),\n bind: outputHelper,\n exists: never,\n forall: always,\n getOr: identity,\n or: identity,\n getOrThunk: apply$1,\n orThunk: apply$1,\n getOrDie: die(String(error)),\n each: noop,\n toOptional: Optional.none\n };\n return output;\n };\n const fromOption = (optional, err) => optional.fold(() => error$1(err), value$4);\n const Result = {\n value: value$4,\n error: error$1,\n fromOption\n };\n\n var SimpleResultType;\n (function (SimpleResultType) {\n SimpleResultType[SimpleResultType['Error'] = 0] = 'Error';\n SimpleResultType[SimpleResultType['Value'] = 1] = 'Value';\n }(SimpleResultType || (SimpleResultType = {})));\n const fold$1 = (res, onError, onValue) => res.stype === SimpleResultType.Error ? onError(res.serror) : onValue(res.svalue);\n const partition$2 = results => {\n const values = [];\n const errors = [];\n each$1(results, obj => {\n fold$1(obj, err => errors.push(err), val => values.push(val));\n });\n return {\n values,\n errors\n };\n };\n const mapError = (res, f) => {\n if (res.stype === SimpleResultType.Error) {\n return {\n stype: SimpleResultType.Error,\n serror: f(res.serror)\n };\n } else {\n return res;\n }\n };\n const map = (res, f) => {\n if (res.stype === SimpleResultType.Value) {\n return {\n stype: SimpleResultType.Value,\n svalue: f(res.svalue)\n };\n } else {\n return res;\n }\n };\n const bind$1 = (res, f) => {\n if (res.stype === SimpleResultType.Value) {\n return f(res.svalue);\n } else {\n return res;\n }\n };\n const bindError = (res, f) => {\n if (res.stype === SimpleResultType.Error) {\n return f(res.serror);\n } else {\n return res;\n }\n };\n const svalue = v => ({\n stype: SimpleResultType.Value,\n svalue: v\n });\n const serror = e => ({\n stype: SimpleResultType.Error,\n serror: e\n });\n const toResult$1 = res => fold$1(res, Result.error, Result.value);\n const fromResult$1 = res => res.fold(serror, svalue);\n const SimpleResult = {\n fromResult: fromResult$1,\n toResult: toResult$1,\n svalue,\n partition: partition$2,\n serror,\n bind: bind$1,\n bindError,\n map,\n mapError,\n fold: fold$1\n };\n\n const field$2 = (key, newKey, presence, prop) => ({\n tag: 'field',\n key,\n newKey,\n presence,\n prop\n });\n const customField$1 = (newKey, instantiator) => ({\n tag: 'custom',\n newKey,\n instantiator\n });\n const fold = (value, ifField, ifCustom) => {\n switch (value.tag) {\n case 'field':\n return ifField(value.key, value.newKey, value.presence, value.prop);\n case 'custom':\n return ifCustom(value.newKey, value.instantiator);\n }\n };\n\n const shallow$1 = (old, nu) => {\n return nu;\n };\n const deep = (old, nu) => {\n const bothObjects = isPlainObject(old) && isPlainObject(nu);\n return bothObjects ? deepMerge(old, nu) : nu;\n };\n const baseMerge = merger => {\n return (...objects) => {\n if (objects.length === 0) {\n throw new Error(`Can't merge zero objects`);\n }\n const ret = {};\n for (let j = 0; j < objects.length; j++) {\n const curObject = objects[j];\n for (const key in curObject) {\n if (has$2(curObject, key)) {\n ret[key] = merger(ret[key], curObject[key]);\n }\n }\n }\n return ret;\n };\n };\n const deepMerge = baseMerge(deep);\n const merge$1 = baseMerge(shallow$1);\n\n const required$2 = () => ({\n tag: 'required',\n process: {}\n });\n const defaultedThunk = fallbackThunk => ({\n tag: 'defaultedThunk',\n process: fallbackThunk\n });\n const defaulted$1 = fallback => defaultedThunk(constant$1(fallback));\n const asOption = () => ({\n tag: 'option',\n process: {}\n });\n const mergeWithThunk = baseThunk => ({\n tag: 'mergeWithThunk',\n process: baseThunk\n });\n const mergeWith = base => mergeWithThunk(constant$1(base));\n\n const mergeValues$1 = (values, base) => values.length > 0 ? SimpleResult.svalue(deepMerge(base, merge$1.apply(undefined, values))) : SimpleResult.svalue(base);\n const mergeErrors$1 = errors => compose(SimpleResult.serror, flatten)(errors);\n const consolidateObj = (objects, base) => {\n const partition = SimpleResult.partition(objects);\n return partition.errors.length > 0 ? mergeErrors$1(partition.errors) : mergeValues$1(partition.values, base);\n };\n const consolidateArr = objects => {\n const partitions = SimpleResult.partition(objects);\n return partitions.errors.length > 0 ? mergeErrors$1(partitions.errors) : SimpleResult.svalue(partitions.values);\n };\n const ResultCombine = {\n consolidateObj,\n consolidateArr\n };\n\n const formatObj = input => {\n return isObject(input) && keys(input).length > 100 ? ' removed due to size' : JSON.stringify(input, null, 2);\n };\n const formatErrors = errors => {\n const es = errors.length > 10 ? errors.slice(0, 10).concat([{\n path: [],\n getErrorInfo: constant$1('... (only showing first ten failures)')\n }]) : errors;\n return map$2(es, e => {\n return 'Failed path: (' + e.path.join(' > ') + ')\\n' + e.getErrorInfo();\n });\n };\n\n const nu$a = (path, getErrorInfo) => {\n return SimpleResult.serror([{\n path,\n getErrorInfo\n }]);\n };\n const missingRequired = (path, key, obj) => nu$a(path, () => 'Could not find valid *required* value for \"' + key + '\" in ' + formatObj(obj));\n const missingKey = (path, key) => nu$a(path, () => 'Choice schema did not contain choice key: \"' + key + '\"');\n const missingBranch = (path, branches, branch) => nu$a(path, () => 'The chosen schema: \"' + branch + '\" did not exist in branches: ' + formatObj(branches));\n const unsupportedFields = (path, unsupported) => nu$a(path, () => 'There are unsupported fields: [' + unsupported.join(', ') + '] specified');\n const custom = (path, err) => nu$a(path, constant$1(err));\n\n const value$3 = validator => {\n const extract = (path, val) => {\n return SimpleResult.bindError(validator(val), err => custom(path, err));\n };\n const toString = constant$1('val');\n return {\n extract,\n toString\n };\n };\n const anyValue$1 = value$3(SimpleResult.svalue);\n\n const requiredAccess = (path, obj, key, bundle) => get$g(obj, key).fold(() => missingRequired(path, key, obj), bundle);\n const fallbackAccess = (obj, key, fallback, bundle) => {\n const v = get$g(obj, key).getOrThunk(() => fallback(obj));\n return bundle(v);\n };\n const optionAccess = (obj, key, bundle) => bundle(get$g(obj, key));\n const optionDefaultedAccess = (obj, key, fallback, bundle) => {\n const opt = get$g(obj, key).map(val => val === true ? fallback(obj) : val);\n return bundle(opt);\n };\n const extractField = (field, path, obj, key, prop) => {\n const bundle = av => prop.extract(path.concat([key]), av);\n const bundleAsOption = optValue => optValue.fold(() => SimpleResult.svalue(Optional.none()), ov => {\n const result = prop.extract(path.concat([key]), ov);\n return SimpleResult.map(result, Optional.some);\n });\n switch (field.tag) {\n case 'required':\n return requiredAccess(path, obj, key, bundle);\n case 'defaultedThunk':\n return fallbackAccess(obj, key, field.process, bundle);\n case 'option':\n return optionAccess(obj, key, bundleAsOption);\n case 'defaultedOptionThunk':\n return optionDefaultedAccess(obj, key, field.process, bundleAsOption);\n case 'mergeWithThunk': {\n return fallbackAccess(obj, key, constant$1({}), v => {\n const result = deepMerge(field.process(obj), v);\n return bundle(result);\n });\n }\n }\n };\n const extractFields = (path, obj, fields) => {\n const success = {};\n const errors = [];\n for (const field of fields) {\n fold(field, (key, newKey, presence, prop) => {\n const result = extractField(presence, path, obj, key, prop);\n SimpleResult.fold(result, err => {\n errors.push(...err);\n }, res => {\n success[newKey] = res;\n });\n }, (newKey, instantiator) => {\n success[newKey] = instantiator(obj);\n });\n }\n return errors.length > 0 ? SimpleResult.serror(errors) : SimpleResult.svalue(success);\n };\n const valueThunk = getDelegate => {\n const extract = (path, val) => getDelegate().extract(path, val);\n const toString = () => getDelegate().toString();\n return {\n extract,\n toString\n };\n };\n const getSetKeys = obj => keys(filter$1(obj, isNonNullable));\n const objOfOnly = fields => {\n const delegate = objOf(fields);\n const fieldNames = foldr(fields, (acc, value) => {\n return fold(value, key => deepMerge(acc, { [key]: true }), constant$1(acc));\n }, {});\n const extract = (path, o) => {\n const keys = isBoolean(o) ? [] : getSetKeys(o);\n const extra = filter$2(keys, k => !hasNonNullableKey(fieldNames, k));\n return extra.length === 0 ? delegate.extract(path, o) : unsupportedFields(path, extra);\n };\n return {\n extract,\n toString: delegate.toString\n };\n };\n const objOf = values => {\n const extract = (path, o) => extractFields(path, o, values);\n const toString = () => {\n const fieldStrings = map$2(values, value => fold(value, (key, _okey, _presence, prop) => key + ' -> ' + prop.toString(), (newKey, _instantiator) => 'state(' + newKey + ')'));\n return 'obj{\\n' + fieldStrings.join('\\n') + '}';\n };\n return {\n extract,\n toString\n };\n };\n const arrOf = prop => {\n const extract = (path, array) => {\n const results = map$2(array, (a, i) => prop.extract(path.concat(['[' + i + ']']), a));\n return ResultCombine.consolidateArr(results);\n };\n const toString = () => 'array(' + prop.toString() + ')';\n return {\n extract,\n toString\n };\n };\n const oneOf = (props, rawF) => {\n const f = rawF !== undefined ? rawF : identity;\n const extract = (path, val) => {\n const errors = [];\n for (const prop of props) {\n const res = prop.extract(path, val);\n if (res.stype === SimpleResultType.Value) {\n return {\n stype: SimpleResultType.Value,\n svalue: f(res.svalue)\n };\n }\n errors.push(res);\n }\n return ResultCombine.consolidateArr(errors);\n };\n const toString = () => 'oneOf(' + map$2(props, prop => prop.toString()).join(', ') + ')';\n return {\n extract,\n toString\n };\n };\n const setOf$1 = (validator, prop) => {\n const validateKeys = (path, keys) => arrOf(value$3(validator)).extract(path, keys);\n const extract = (path, o) => {\n const keys$1 = keys(o);\n const validatedKeys = validateKeys(path, keys$1);\n return SimpleResult.bind(validatedKeys, validKeys => {\n const schema = map$2(validKeys, vk => {\n return field$2(vk, vk, required$2(), prop);\n });\n return objOf(schema).extract(path, o);\n });\n };\n const toString = () => 'setOf(' + prop.toString() + ')';\n return {\n extract,\n toString\n };\n };\n const thunk = (_desc, processor) => {\n const getP = cached(processor);\n const extract = (path, val) => getP().extract(path, val);\n const toString = () => getP().toString();\n return {\n extract,\n toString\n };\n };\n const arrOfObj = compose(arrOf, objOf);\n\n const anyValue = constant$1(anyValue$1);\n const typedValue = (validator, expectedType) => value$3(a => {\n const actualType = typeof a;\n return validator(a) ? SimpleResult.svalue(a) : SimpleResult.serror(`Expected type: ${ expectedType } but got: ${ actualType }`);\n });\n const number = typedValue(isNumber, 'number');\n const string = typedValue(isString, 'string');\n const boolean = typedValue(isBoolean, 'boolean');\n const functionProcessor = typedValue(isFunction, 'function');\n const isPostMessageable = val => {\n if (Object(val) !== val) {\n return true;\n }\n switch ({}.toString.call(val).slice(8, -1)) {\n case 'Boolean':\n case 'Number':\n case 'String':\n case 'Date':\n case 'RegExp':\n case 'Blob':\n case 'FileList':\n case 'ImageData':\n case 'ImageBitmap':\n case 'ArrayBuffer':\n return true;\n case 'Array':\n case 'Object':\n return Object.keys(val).every(prop => isPostMessageable(val[prop]));\n default:\n return false;\n }\n };\n const postMessageable = value$3(a => {\n if (isPostMessageable(a)) {\n return SimpleResult.svalue(a);\n } else {\n return SimpleResult.serror('Expected value to be acceptable for sending via postMessage');\n }\n });\n\n const chooseFrom = (path, input, branches, ch) => {\n const fields = get$g(branches, ch);\n return fields.fold(() => missingBranch(path, branches, ch), vp => vp.extract(path.concat(['branch: ' + ch]), input));\n };\n const choose$2 = (key, branches) => {\n const extract = (path, input) => {\n const choice = get$g(input, key);\n return choice.fold(() => missingKey(path, key), chosen => chooseFrom(path, input, branches, chosen));\n };\n const toString = () => 'chooseOn(' + key + '). Possible values: ' + keys(branches);\n return {\n extract,\n toString\n };\n };\n\n const arrOfVal = () => arrOf(anyValue$1);\n const valueOf = validator => value$3(v => validator(v).fold(SimpleResult.serror, SimpleResult.svalue));\n const setOf = (validator, prop) => setOf$1(v => SimpleResult.fromResult(validator(v)), prop);\n const extractValue = (label, prop, obj) => {\n const res = prop.extract([label], obj);\n return SimpleResult.mapError(res, errs => ({\n input: obj,\n errors: errs\n }));\n };\n const asRaw = (label, prop, obj) => SimpleResult.toResult(extractValue(label, prop, obj));\n const getOrDie = extraction => {\n return extraction.fold(errInfo => {\n throw new Error(formatError(errInfo));\n }, identity);\n };\n const asRawOrDie$1 = (label, prop, obj) => getOrDie(asRaw(label, prop, obj));\n const formatError = errInfo => {\n return 'Errors: \\n' + formatErrors(errInfo.errors).join('\\n') + '\\n\\nInput object: ' + formatObj(errInfo.input);\n };\n const choose$1 = (key, branches) => choose$2(key, map$1(branches, objOf));\n const thunkOf = (desc, schema) => thunk(desc, schema);\n\n const field$1 = field$2;\n const customField = customField$1;\n const validateEnum = values => valueOf(value => contains$2(values, value) ? Result.value(value) : Result.error(`Unsupported value: \"${ value }\", choose one of \"${ values.join(', ') }\".`));\n const required$1 = key => field$1(key, key, required$2(), anyValue());\n const requiredOf = (key, schema) => field$1(key, key, required$2(), schema);\n const requiredNumber = key => requiredOf(key, number);\n const requiredString = key => requiredOf(key, string);\n const requiredStringEnum = (key, values) => field$1(key, key, required$2(), validateEnum(values));\n const requiredBoolean = key => requiredOf(key, boolean);\n const requiredFunction = key => requiredOf(key, functionProcessor);\n const forbid = (key, message) => field$1(key, key, asOption(), value$3(_v => SimpleResult.serror('The field: ' + key + ' is forbidden. ' + message)));\n const requiredObjOf = (key, objSchema) => field$1(key, key, required$2(), objOf(objSchema));\n const requiredArrayOfObj = (key, objFields) => field$1(key, key, required$2(), arrOfObj(objFields));\n const requiredArrayOf = (key, schema) => field$1(key, key, required$2(), arrOf(schema));\n const option$3 = key => field$1(key, key, asOption(), anyValue());\n const optionOf = (key, schema) => field$1(key, key, asOption(), schema);\n const optionNumber = key => optionOf(key, number);\n const optionString = key => optionOf(key, string);\n const optionStringEnum = (key, values) => optionOf(key, validateEnum(values));\n const optionFunction = key => optionOf(key, functionProcessor);\n const optionArrayOf = (key, schema) => optionOf(key, arrOf(schema));\n const optionObjOf = (key, objSchema) => optionOf(key, objOf(objSchema));\n const optionObjOfOnly = (key, objSchema) => optionOf(key, objOfOnly(objSchema));\n const defaulted = (key, fallback) => field$1(key, key, defaulted$1(fallback), anyValue());\n const defaultedOf = (key, fallback, schema) => field$1(key, key, defaulted$1(fallback), schema);\n const defaultedNumber = (key, fallback) => defaultedOf(key, fallback, number);\n const defaultedString = (key, fallback) => defaultedOf(key, fallback, string);\n const defaultedStringEnum = (key, fallback, values) => defaultedOf(key, fallback, validateEnum(values));\n const defaultedBoolean = (key, fallback) => defaultedOf(key, fallback, boolean);\n const defaultedFunction = (key, fallback) => defaultedOf(key, fallback, functionProcessor);\n const defaultedPostMsg = (key, fallback) => defaultedOf(key, fallback, postMessageable);\n const defaultedArrayOf = (key, fallback, schema) => defaultedOf(key, fallback, arrOf(schema));\n const defaultedObjOf = (key, fallback, objSchema) => defaultedOf(key, fallback, objOf(objSchema));\n\n const Cell = initial => {\n let value = initial;\n const get = () => {\n return value;\n };\n const set = v => {\n value = v;\n };\n return {\n get,\n set\n };\n };\n\n const generate$7 = cases => {\n if (!isArray(cases)) {\n throw new Error('cases must be an array');\n }\n if (cases.length === 0) {\n throw new Error('there must be at least one case');\n }\n const constructors = [];\n const adt = {};\n each$1(cases, (acase, count) => {\n const keys$1 = keys(acase);\n if (keys$1.length !== 1) {\n throw new Error('one and only one name per case');\n }\n const key = keys$1[0];\n const value = acase[key];\n if (adt[key] !== undefined) {\n throw new Error('duplicate key detected:' + key);\n } else if (key === 'cata') {\n throw new Error('cannot have a case named cata (sorry)');\n } else if (!isArray(value)) {\n throw new Error('case arguments must be an array');\n }\n constructors.push(key);\n adt[key] = (...args) => {\n const argLength = args.length;\n if (argLength !== value.length) {\n throw new Error('Wrong number of arguments to case ' + key + '. Expected ' + value.length + ' (' + value + '), got ' + argLength);\n }\n const match = branches => {\n const branchKeys = keys(branches);\n if (constructors.length !== branchKeys.length) {\n throw new Error('Wrong number of arguments to match. Expected: ' + constructors.join(',') + '\\nActual: ' + branchKeys.join(','));\n }\n const allReqd = forall(constructors, reqKey => {\n return contains$2(branchKeys, reqKey);\n });\n if (!allReqd) {\n throw new Error('Not all branches were specified when using match. Specified: ' + branchKeys.join(', ') + '\\nRequired: ' + constructors.join(', '));\n }\n return branches[key].apply(null, args);\n };\n return {\n fold: (...foldArgs) => {\n if (foldArgs.length !== cases.length) {\n throw new Error('Wrong number of arguments to fold. Expected ' + cases.length + ', got ' + foldArgs.length);\n }\n const target = foldArgs[count];\n return target.apply(null, args);\n },\n match,\n log: label => {\n console.log(label, {\n constructors,\n constructor: key,\n params: args\n });\n }\n };\n };\n });\n return adt;\n };\n const Adt = { generate: generate$7 };\n\n Adt.generate([\n {\n bothErrors: [\n 'error1',\n 'error2'\n ]\n },\n {\n firstError: [\n 'error1',\n 'value2'\n ]\n },\n {\n secondError: [\n 'value1',\n 'error2'\n ]\n },\n {\n bothValues: [\n 'value1',\n 'value2'\n ]\n }\n ]);\n const partition$1 = results => {\n const errors = [];\n const values = [];\n each$1(results, result => {\n result.fold(err => {\n errors.push(err);\n }, value => {\n values.push(value);\n });\n });\n return {\n errors,\n values\n };\n };\n\n const exclude$1 = (obj, fields) => {\n const r = {};\n each(obj, (v, k) => {\n if (!contains$2(fields, k)) {\n r[k] = v;\n }\n });\n return r;\n };\n\n const wrap$2 = (key, value) => ({ [key]: value });\n const wrapAll$1 = keyvalues => {\n const r = {};\n each$1(keyvalues, kv => {\n r[kv.key] = kv.value;\n });\n return r;\n };\n\n const exclude = (obj, fields) => exclude$1(obj, fields);\n const wrap$1 = (key, value) => wrap$2(key, value);\n const wrapAll = keyvalues => wrapAll$1(keyvalues);\n const mergeValues = (values, base) => {\n return values.length === 0 ? Result.value(base) : Result.value(deepMerge(base, merge$1.apply(undefined, values)));\n };\n const mergeErrors = errors => Result.error(flatten(errors));\n const consolidate = (objs, base) => {\n const partitions = partition$1(objs);\n return partitions.errors.length > 0 ? mergeErrors(partitions.errors) : mergeValues(partitions.values, base);\n };\n\n const ensureIsRoot = isRoot => isFunction(isRoot) ? isRoot : never;\n const ancestor$2 = (scope, transform, isRoot) => {\n let element = scope.dom;\n const stop = ensureIsRoot(isRoot);\n while (element.parentNode) {\n element = element.parentNode;\n const el = SugarElement.fromDom(element);\n const transformed = transform(el);\n if (transformed.isSome()) {\n return transformed;\n } else if (stop(el)) {\n break;\n }\n }\n return Optional.none();\n };\n const closest$4 = (scope, transform, isRoot) => {\n const current = transform(scope);\n const stop = ensureIsRoot(isRoot);\n return current.orThunk(() => stop(scope) ? Optional.none() : ancestor$2(scope, transform, stop));\n };\n\n const isSource = (component, simulatedEvent) => eq(component.element, simulatedEvent.event.target);\n\n const defaultEventHandler = {\n can: always,\n abort: never,\n run: noop\n };\n const nu$9 = parts => {\n if (!hasNonNullableKey(parts, 'can') && !hasNonNullableKey(parts, 'abort') && !hasNonNullableKey(parts, 'run')) {\n throw new Error('EventHandler defined by: ' + JSON.stringify(parts, null, 2) + ' does not have can, abort, or run!');\n }\n return {\n ...defaultEventHandler,\n ...parts\n };\n };\n const all$2 = (handlers, f) => (...args) => foldl(handlers, (acc, handler) => acc && f(handler).apply(undefined, args), true);\n const any = (handlers, f) => (...args) => foldl(handlers, (acc, handler) => acc || f(handler).apply(undefined, args), false);\n const read$2 = handler => isFunction(handler) ? {\n can: always,\n abort: never,\n run: handler\n } : handler;\n const fuse$1 = handlers => {\n const can = all$2(handlers, handler => handler.can);\n const abort = any(handlers, handler => handler.abort);\n const run = (...args) => {\n each$1(handlers, handler => {\n handler.run.apply(undefined, args);\n });\n };\n return {\n can,\n abort,\n run\n };\n };\n\n const constant = constant$1;\n const touchstart = constant('touchstart');\n const touchmove = constant('touchmove');\n const touchend = constant('touchend');\n const touchcancel = constant('touchcancel');\n const mousedown = constant('mousedown');\n const mousemove = constant('mousemove');\n const mouseout = constant('mouseout');\n const mouseup = constant('mouseup');\n const mouseover = constant('mouseover');\n const focusin = constant('focusin');\n const focusout = constant('focusout');\n const keydown = constant('keydown');\n const keyup = constant('keyup');\n const input = constant('input');\n const change = constant('change');\n const click = constant('click');\n const transitioncancel = constant('transitioncancel');\n const transitionend = constant('transitionend');\n const transitionstart = constant('transitionstart');\n const selectstart = constant('selectstart');\n\n const prefixName = name => constant$1('alloy.' + name);\n const alloy = { tap: prefixName('tap') };\n const focus$4 = prefixName('focus');\n const postBlur = prefixName('blur.post');\n const postPaste = prefixName('paste.post');\n const receive = prefixName('receive');\n const execute$5 = prefixName('execute');\n const focusItem = prefixName('focus.item');\n const tap = alloy.tap;\n const longpress = prefixName('longpress');\n const sandboxClose = prefixName('sandbox.close');\n const typeaheadCancel = prefixName('typeahead.cancel');\n const systemInit = prefixName('system.init');\n const documentTouchmove = prefixName('system.touchmove');\n const documentTouchend = prefixName('system.touchend');\n const windowScroll = prefixName('system.scroll');\n const windowResize = prefixName('system.resize');\n const attachedToDom = prefixName('system.attached');\n const detachedFromDom = prefixName('system.detached');\n const dismissRequested = prefixName('system.dismissRequested');\n const repositionRequested = prefixName('system.repositionRequested');\n const focusShifted = prefixName('focusmanager.shifted');\n const slotVisibility = prefixName('slotcontainer.visibility');\n const changeTab = prefixName('change.tab');\n const dismissTab = prefixName('dismiss.tab');\n const highlight$1 = prefixName('highlight');\n const dehighlight$1 = prefixName('dehighlight');\n\n const emit = (component, event) => {\n dispatchWith(component, component.element, event, {});\n };\n const emitWith = (component, event, properties) => {\n dispatchWith(component, component.element, event, properties);\n };\n const emitExecute = component => {\n emit(component, execute$5());\n };\n const dispatch = (component, target, event) => {\n dispatchWith(component, target, event, {});\n };\n const dispatchWith = (component, target, event, properties) => {\n const data = {\n target,\n ...properties\n };\n component.getSystem().triggerEvent(event, target, data);\n };\n const retargetAndDispatchWith = (component, target, eventName, properties) => {\n const data = {\n ...properties,\n target\n };\n component.getSystem().triggerEvent(eventName, target, data);\n };\n const dispatchEvent = (component, target, event, simulatedEvent) => {\n component.getSystem().triggerEvent(event, target, simulatedEvent.event);\n };\n\n const derive$2 = configs => wrapAll(configs);\n const abort = (name, predicate) => {\n return {\n key: name,\n value: nu$9({ abort: predicate })\n };\n };\n const can = (name, predicate) => {\n return {\n key: name,\n value: nu$9({ can: predicate })\n };\n };\n const preventDefault = name => {\n return {\n key: name,\n value: nu$9({\n run: (component, simulatedEvent) => {\n simulatedEvent.event.prevent();\n }\n })\n };\n };\n const run$1 = (name, handler) => {\n return {\n key: name,\n value: nu$9({ run: handler })\n };\n };\n const runActionExtra = (name, action, extra) => {\n return {\n key: name,\n value: nu$9({\n run: (component, simulatedEvent) => {\n action.apply(undefined, [\n component,\n simulatedEvent\n ].concat(extra));\n }\n })\n };\n };\n const runOnName = name => {\n return handler => run$1(name, handler);\n };\n const runOnSourceName = name => {\n return handler => ({\n key: name,\n value: nu$9({\n run: (component, simulatedEvent) => {\n if (isSource(component, simulatedEvent)) {\n handler(component, simulatedEvent);\n }\n }\n })\n });\n };\n const redirectToUid = (name, uid) => {\n return run$1(name, (component, simulatedEvent) => {\n component.getSystem().getByUid(uid).each(redirectee => {\n dispatchEvent(redirectee, redirectee.element, name, simulatedEvent);\n });\n });\n };\n const redirectToPart = (name, detail, partName) => {\n const uid = detail.partUids[partName];\n return redirectToUid(name, uid);\n };\n const runWithTarget = (name, f) => {\n return run$1(name, (component, simulatedEvent) => {\n const ev = simulatedEvent.event;\n const target = component.getSystem().getByDom(ev.target).getOrThunk(() => {\n const closest = closest$4(ev.target, el => component.getSystem().getByDom(el).toOptional(), never);\n return closest.getOr(component);\n });\n f(component, target, simulatedEvent);\n });\n };\n const cutter = name => {\n return run$1(name, (component, simulatedEvent) => {\n simulatedEvent.cut();\n });\n };\n const stopper = name => {\n return run$1(name, (component, simulatedEvent) => {\n simulatedEvent.stop();\n });\n };\n const runOnSource = (name, f) => {\n return runOnSourceName(name)(f);\n };\n const runOnAttached = runOnSourceName(attachedToDom());\n const runOnDetached = runOnSourceName(detachedFromDom());\n const runOnInit = runOnSourceName(systemInit());\n const runOnExecute$1 = runOnName(execute$5());\n\n const fromHtml$1 = (html, scope) => {\n const doc = scope || document;\n const div = doc.createElement('div');\n div.innerHTML = html;\n return children(SugarElement.fromDom(div));\n };\n\n const get$9 = element => element.dom.innerHTML;\n const set$6 = (element, content) => {\n const owner = owner$4(element);\n const docDom = owner.dom;\n const fragment = SugarElement.fromDom(docDom.createDocumentFragment());\n const contentElements = fromHtml$1(content, docDom);\n append$1(fragment, contentElements);\n empty(element);\n append$2(element, fragment);\n };\n const getOuter = element => {\n const container = SugarElement.fromTag('div');\n const clone = SugarElement.fromDom(element.dom.cloneNode(true));\n append$2(container, clone);\n return get$9(container);\n };\n\n const clone$1 = (original, isDeep) => SugarElement.fromDom(original.dom.cloneNode(isDeep));\n const shallow = original => clone$1(original, false);\n\n const getHtml = element => {\n if (isShadowRoot(element)) {\n return '#shadow-root';\n } else {\n const clone = shallow(element);\n return getOuter(clone);\n }\n };\n\n const element = elem => getHtml(elem);\n\n const isRecursive = (component, originator, target) => eq(originator, component.element) && !eq(originator, target);\n const events$i = derive$2([can(focus$4(), (component, simulatedEvent) => {\n const event = simulatedEvent.event;\n const originator = event.originator;\n const target = event.target;\n if (isRecursive(component, originator, target)) {\n console.warn(focus$4() + ' did not get interpreted by the desired target. ' + '\\nOriginator: ' + element(originator) + '\\nTarget: ' + element(target) + '\\nCheck the ' + focus$4() + ' event handlers');\n return false;\n } else {\n return true;\n }\n })]);\n\n var DefaultEvents = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$i\n });\n\n let unique = 0;\n const generate$6 = prefix => {\n const date = new Date();\n const time = date.getTime();\n const random = Math.floor(Math.random() * 1000000000);\n unique++;\n return prefix + '_' + random + unique + String(time);\n };\n\n const prefix$1 = constant$1('alloy-id-');\n const idAttr$1 = constant$1('data-alloy-id');\n\n const prefix = prefix$1();\n const idAttr = idAttr$1();\n const write = (label, elem) => {\n const id = generate$6(prefix + label);\n writeOnly(elem, id);\n return id;\n };\n const writeOnly = (elem, uid) => {\n Object.defineProperty(elem.dom, idAttr, {\n value: uid,\n writable: true\n });\n };\n const read$1 = elem => {\n const id = isElement$1(elem) ? elem.dom[idAttr] : null;\n return Optional.from(id);\n };\n const generate$5 = prefix => generate$6(prefix);\n\n const make$8 = identity;\n\n const NoContextApi = getComp => {\n const getMessage = event => `The component must be in a context to execute: ${ event }` + (getComp ? '\\n' + element(getComp().element) + ' is not in context.' : '');\n const fail = event => () => {\n throw new Error(getMessage(event));\n };\n const warn = event => () => {\n console.warn(getMessage(event));\n };\n return {\n debugInfo: constant$1('fake'),\n triggerEvent: warn('triggerEvent'),\n triggerFocus: warn('triggerFocus'),\n triggerEscape: warn('triggerEscape'),\n broadcast: warn('broadcast'),\n broadcastOn: warn('broadcastOn'),\n broadcastEvent: warn('broadcastEvent'),\n build: fail('build'),\n buildOrPatch: fail('buildOrPatch'),\n addToWorld: fail('addToWorld'),\n removeFromWorld: fail('removeFromWorld'),\n addToGui: fail('addToGui'),\n removeFromGui: fail('removeFromGui'),\n getByUid: fail('getByUid'),\n getByDom: fail('getByDom'),\n isConnected: never\n };\n };\n const singleton$1 = NoContextApi();\n\n const markAsBehaviourApi = (f, apiName, apiFunction) => {\n const delegate = apiFunction.toString();\n const endIndex = delegate.indexOf(')') + 1;\n const openBracketIndex = delegate.indexOf('(');\n const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\\s*/);\n f.toFunctionAnnotation = () => ({\n name: apiName,\n parameters: cleanParameters(parameters.slice(0, 1).concat(parameters.slice(3)))\n });\n return f;\n };\n const cleanParameters = parameters => map$2(parameters, p => endsWith(p, '/*') ? p.substring(0, p.length - '/*'.length) : p);\n const markAsExtraApi = (f, extraName) => {\n const delegate = f.toString();\n const endIndex = delegate.indexOf(')') + 1;\n const openBracketIndex = delegate.indexOf('(');\n const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\\s*/);\n f.toFunctionAnnotation = () => ({\n name: extraName,\n parameters: cleanParameters(parameters)\n });\n return f;\n };\n const markAsSketchApi = (f, apiFunction) => {\n const delegate = apiFunction.toString();\n const endIndex = delegate.indexOf(')') + 1;\n const openBracketIndex = delegate.indexOf('(');\n const parameters = delegate.substring(openBracketIndex + 1, endIndex - 1).split(/,\\s*/);\n f.toFunctionAnnotation = () => ({\n name: 'OVERRIDE',\n parameters: cleanParameters(parameters.slice(1))\n });\n return f;\n };\n\n const premadeTag = generate$6('alloy-premade');\n const premade$1 = comp => {\n Object.defineProperty(comp.element.dom, premadeTag, {\n value: comp.uid,\n writable: true\n });\n return wrap$1(premadeTag, comp);\n };\n const isPremade = element => has$2(element.dom, premadeTag);\n const getPremade = spec => get$g(spec, premadeTag);\n const makeApi = f => markAsSketchApi((component, ...rest) => f(component.getApis(), component, ...rest), f);\n\n const NoState = { init: () => nu$8({ readState: constant$1('No State required') }) };\n const nu$8 = spec => spec;\n\n const generateFrom$1 = (spec, all) => {\n const schema = map$2(all, a => optionObjOf(a.name(), [\n required$1('config'),\n defaulted('state', NoState)\n ]));\n const validated = asRaw('component.behaviours', objOf(schema), spec.behaviours).fold(errInfo => {\n throw new Error(formatError(errInfo) + '\\nComplete spec:\\n' + JSON.stringify(spec, null, 2));\n }, identity);\n return {\n list: all,\n data: map$1(validated, optBlobThunk => {\n const output = optBlobThunk.map(blob => ({\n config: blob.config,\n state: blob.state.init(blob.config)\n }));\n return constant$1(output);\n })\n };\n };\n const getBehaviours$3 = bData => bData.list;\n const getData$2 = bData => bData.data;\n\n const byInnerKey = (data, tuple) => {\n const r = {};\n each(data, (detail, key) => {\n each(detail, (value, indexKey) => {\n const chain = get$g(r, indexKey).getOr([]);\n r[indexKey] = chain.concat([tuple(key, value)]);\n });\n });\n return r;\n };\n\n const nu$7 = s => ({\n classes: isUndefined(s.classes) ? [] : s.classes,\n attributes: isUndefined(s.attributes) ? {} : s.attributes,\n styles: isUndefined(s.styles) ? {} : s.styles\n });\n const merge = (defnA, mod) => ({\n ...defnA,\n attributes: {\n ...defnA.attributes,\n ...mod.attributes\n },\n styles: {\n ...defnA.styles,\n ...mod.styles\n },\n classes: defnA.classes.concat(mod.classes)\n });\n\n const combine$2 = (info, baseMod, behaviours, base) => {\n const modsByBehaviour = { ...baseMod };\n each$1(behaviours, behaviour => {\n modsByBehaviour[behaviour.name()] = behaviour.exhibit(info, base);\n });\n const byAspect = byInnerKey(modsByBehaviour, (name, modification) => ({\n name,\n modification\n }));\n const combineObjects = objects => foldr(objects, (b, a) => ({\n ...a.modification,\n ...b\n }), {});\n const combinedClasses = foldr(byAspect.classes, (b, a) => a.modification.concat(b), []);\n const combinedAttributes = combineObjects(byAspect.attributes);\n const combinedStyles = combineObjects(byAspect.styles);\n return nu$7({\n classes: combinedClasses,\n attributes: combinedAttributes,\n styles: combinedStyles\n });\n };\n\n const sortKeys = (label, keyName, array, order) => {\n try {\n const sorted = sort(array, (a, b) => {\n const aKey = a[keyName];\n const bKey = b[keyName];\n const aIndex = order.indexOf(aKey);\n const bIndex = order.indexOf(bKey);\n if (aIndex === -1) {\n throw new Error('The ordering for ' + label + ' does not have an entry for ' + aKey + '.\\nOrder specified: ' + JSON.stringify(order, null, 2));\n }\n if (bIndex === -1) {\n throw new Error('The ordering for ' + label + ' does not have an entry for ' + bKey + '.\\nOrder specified: ' + JSON.stringify(order, null, 2));\n }\n if (aIndex < bIndex) {\n return -1;\n } else if (bIndex < aIndex) {\n return 1;\n } else {\n return 0;\n }\n });\n return Result.value(sorted);\n } catch (err) {\n return Result.error([err]);\n }\n };\n\n const uncurried = (handler, purpose) => ({\n handler,\n purpose\n });\n const curried = (handler, purpose) => ({\n cHandler: handler,\n purpose\n });\n const curryArgs = (descHandler, extraArgs) => curried(curry.apply(undefined, [descHandler.handler].concat(extraArgs)), descHandler.purpose);\n const getCurried = descHandler => descHandler.cHandler;\n\n const behaviourTuple = (name, handler) => ({\n name,\n handler\n });\n const nameToHandlers = (behaviours, info) => {\n const r = {};\n each$1(behaviours, behaviour => {\n r[behaviour.name()] = behaviour.handlers(info);\n });\n return r;\n };\n const groupByEvents = (info, behaviours, base) => {\n const behaviourEvents = {\n ...base,\n ...nameToHandlers(behaviours, info)\n };\n return byInnerKey(behaviourEvents, behaviourTuple);\n };\n const combine$1 = (info, eventOrder, behaviours, base) => {\n const byEventName = groupByEvents(info, behaviours, base);\n return combineGroups(byEventName, eventOrder);\n };\n const assemble = rawHandler => {\n const handler = read$2(rawHandler);\n return (component, simulatedEvent, ...rest) => {\n const args = [\n component,\n simulatedEvent\n ].concat(rest);\n if (handler.abort.apply(undefined, args)) {\n simulatedEvent.stop();\n } else if (handler.can.apply(undefined, args)) {\n handler.run.apply(undefined, args);\n }\n };\n };\n const missingOrderError = (eventName, tuples) => Result.error(['The event (' + eventName + ') has more than one behaviour that listens to it.\\nWhen this occurs, you must ' + 'specify an event ordering for the behaviours in your spec (e.g. [ \"listing\", \"toggling\" ]).\\nThe behaviours that ' + 'can trigger it are: ' + JSON.stringify(map$2(tuples, c => c.name), null, 2)]);\n const fuse = (tuples, eventOrder, eventName) => {\n const order = eventOrder[eventName];\n if (!order) {\n return missingOrderError(eventName, tuples);\n } else {\n return sortKeys('Event: ' + eventName, 'name', tuples, order).map(sortedTuples => {\n const handlers = map$2(sortedTuples, tuple => tuple.handler);\n return fuse$1(handlers);\n });\n }\n };\n const combineGroups = (byEventName, eventOrder) => {\n const r = mapToArray(byEventName, (tuples, eventName) => {\n const combined = tuples.length === 1 ? Result.value(tuples[0].handler) : fuse(tuples, eventOrder, eventName);\n return combined.map(handler => {\n const assembled = assemble(handler);\n const purpose = tuples.length > 1 ? filter$2(eventOrder[eventName], o => exists(tuples, t => t.name === o)).join(' > ') : tuples[0].name;\n return wrap$1(eventName, uncurried(assembled, purpose));\n });\n });\n return consolidate(r, {});\n };\n\n const baseBehaviour = 'alloy.base.behaviour';\n const schema$z = objOf([\n field$1('dom', 'dom', required$2(), objOf([\n required$1('tag'),\n defaulted('styles', {}),\n defaulted('classes', []),\n defaulted('attributes', {}),\n option$3('value'),\n option$3('innerHtml')\n ])),\n required$1('components'),\n required$1('uid'),\n defaulted('events', {}),\n defaulted('apis', {}),\n field$1('eventOrder', 'eventOrder', mergeWith({\n [execute$5()]: [\n 'disabling',\n baseBehaviour,\n 'toggling',\n 'typeaheadevents'\n ],\n [focus$4()]: [\n baseBehaviour,\n 'focusing',\n 'keying'\n ],\n [systemInit()]: [\n baseBehaviour,\n 'disabling',\n 'toggling',\n 'representing'\n ],\n [input()]: [\n baseBehaviour,\n 'representing',\n 'streaming',\n 'invalidating'\n ],\n [detachedFromDom()]: [\n baseBehaviour,\n 'representing',\n 'item-events',\n 'tooltipping'\n ],\n [mousedown()]: [\n 'focusing',\n baseBehaviour,\n 'item-type-events'\n ],\n [touchstart()]: [\n 'focusing',\n baseBehaviour,\n 'item-type-events'\n ],\n [mouseover()]: [\n 'item-type-events',\n 'tooltipping'\n ],\n [receive()]: [\n 'receiving',\n 'reflecting',\n 'tooltipping'\n ]\n }), anyValue()),\n option$3('domModification')\n ]);\n const toInfo = spec => asRaw('custom.definition', schema$z, spec);\n const toDefinition = detail => ({\n ...detail.dom,\n uid: detail.uid,\n domChildren: map$2(detail.components, comp => comp.element)\n });\n const toModification = detail => detail.domModification.fold(() => nu$7({}), nu$7);\n const toEvents = info => info.events;\n\n const read = (element, attr) => {\n const value = get$f(element, attr);\n return value === undefined || value === '' ? [] : value.split(' ');\n };\n const add$4 = (element, attr, id) => {\n const old = read(element, attr);\n const nu = old.concat([id]);\n set$9(element, attr, nu.join(' '));\n return true;\n };\n const remove$4 = (element, attr, id) => {\n const nu = filter$2(read(element, attr), v => v !== id);\n if (nu.length > 0) {\n set$9(element, attr, nu.join(' '));\n } else {\n remove$7(element, attr);\n }\n return false;\n };\n\n const supports = element => element.dom.classList !== undefined;\n const get$8 = element => read(element, 'class');\n const add$3 = (element, clazz) => add$4(element, 'class', clazz);\n const remove$3 = (element, clazz) => remove$4(element, 'class', clazz);\n\n const add$2 = (element, clazz) => {\n if (supports(element)) {\n element.dom.classList.add(clazz);\n } else {\n add$3(element, clazz);\n }\n };\n const cleanClass = element => {\n const classList = supports(element) ? element.dom.classList : get$8(element);\n if (classList.length === 0) {\n remove$7(element, 'class');\n }\n };\n const remove$2 = (element, clazz) => {\n if (supports(element)) {\n const classList = element.dom.classList;\n classList.remove(clazz);\n } else {\n remove$3(element, clazz);\n }\n cleanClass(element);\n };\n const has = (element, clazz) => supports(element) && element.dom.classList.contains(clazz);\n\n const add$1 = (element, classes) => {\n each$1(classes, x => {\n add$2(element, x);\n });\n };\n const remove$1 = (element, classes) => {\n each$1(classes, x => {\n remove$2(element, x);\n });\n };\n const hasAll = (element, classes) => forall(classes, clazz => has(element, clazz));\n const getNative = element => {\n const classList = element.dom.classList;\n const r = new Array(classList.length);\n for (let i = 0; i < classList.length; i++) {\n const item = classList.item(i);\n if (item !== null) {\n r[i] = item;\n }\n }\n return r;\n };\n const get$7 = element => supports(element) ? getNative(element) : get$8(element);\n\n const get$6 = element => element.dom.value;\n const set$5 = (element, value) => {\n if (value === undefined) {\n throw new Error('Value.set was undefined');\n }\n element.dom.value = value;\n };\n\n const determineObsoleted = (parent, index, oldObsoleted) => {\n const newObsoleted = child$2(parent, index);\n return newObsoleted.map(newObs => {\n const elemChanged = oldObsoleted.exists(o => !eq(o, newObs));\n if (elemChanged) {\n const oldTag = oldObsoleted.map(name$3).getOr('span');\n const marker = SugarElement.fromTag(oldTag);\n before$1(newObs, marker);\n return marker;\n } else {\n return newObs;\n }\n });\n };\n const ensureInDom = (parent, child, obsoleted) => {\n obsoleted.fold(() => append$2(parent, child), obs => {\n if (!eq(obs, child)) {\n before$1(obs, child);\n remove$5(obs);\n }\n });\n };\n const patchChildrenWith = (parent, nu, f) => {\n const builtChildren = map$2(nu, f);\n const currentChildren = children(parent);\n each$1(currentChildren.slice(builtChildren.length), remove$5);\n return builtChildren;\n };\n const patchSpecChild = (parent, index, spec, build) => {\n const oldObsoleted = child$2(parent, index);\n const childComp = build(spec, oldObsoleted);\n const obsoleted = determineObsoleted(parent, index, oldObsoleted);\n ensureInDom(parent, childComp.element, obsoleted);\n return childComp;\n };\n const patchSpecChildren = (parent, specs, build) => patchChildrenWith(parent, specs, (spec, index) => patchSpecChild(parent, index, spec, build));\n const patchDomChildren = (parent, nodes) => patchChildrenWith(parent, nodes, (node, index) => {\n const optObsoleted = child$2(parent, index);\n ensureInDom(parent, node, optObsoleted);\n return node;\n });\n\n const diffKeyValueSet = (newObj, oldObj) => {\n const newKeys = keys(newObj);\n const oldKeys = keys(oldObj);\n const toRemove = difference(oldKeys, newKeys);\n const toSet = bifilter(newObj, (v, k) => {\n return !has$2(oldObj, k) || v !== oldObj[k];\n }).t;\n return {\n toRemove,\n toSet\n };\n };\n const reconcileToDom = (definition, obsoleted) => {\n const {\n class: clazz,\n style,\n ...existingAttributes\n } = clone$2(obsoleted);\n const {\n toSet: attrsToSet,\n toRemove: attrsToRemove\n } = diffKeyValueSet(definition.attributes, existingAttributes);\n const updateAttrs = () => {\n each$1(attrsToRemove, a => remove$7(obsoleted, a));\n setAll$1(obsoleted, attrsToSet);\n };\n const existingStyles = getAllRaw(obsoleted);\n const {\n toSet: stylesToSet,\n toRemove: stylesToRemove\n } = diffKeyValueSet(definition.styles, existingStyles);\n const updateStyles = () => {\n each$1(stylesToRemove, s => remove$6(obsoleted, s));\n setAll(obsoleted, stylesToSet);\n };\n const existingClasses = get$7(obsoleted);\n const classesToRemove = difference(existingClasses, definition.classes);\n const classesToAdd = difference(definition.classes, existingClasses);\n const updateClasses = () => {\n add$1(obsoleted, classesToAdd);\n remove$1(obsoleted, classesToRemove);\n };\n const updateHtml = html => {\n set$6(obsoleted, html);\n };\n const updateChildren = () => {\n const children = definition.domChildren;\n patchDomChildren(obsoleted, children);\n };\n const updateValue = () => {\n const valueElement = obsoleted;\n const value = definition.value.getOrUndefined();\n if (value !== get$6(valueElement)) {\n set$5(valueElement, value !== null && value !== void 0 ? value : '');\n }\n };\n updateAttrs();\n updateClasses();\n updateStyles();\n definition.innerHtml.fold(updateChildren, updateHtml);\n updateValue();\n return obsoleted;\n };\n\n const introduceToDom = definition => {\n const subject = SugarElement.fromTag(definition.tag);\n setAll$1(subject, definition.attributes);\n add$1(subject, definition.classes);\n setAll(subject, definition.styles);\n definition.innerHtml.each(html => set$6(subject, html));\n const children = definition.domChildren;\n append$1(subject, children);\n definition.value.each(value => {\n set$5(subject, value);\n });\n return subject;\n };\n const attemptPatch = (definition, obsoleted) => {\n try {\n const e = reconcileToDom(definition, obsoleted);\n return Optional.some(e);\n } catch (err) {\n return Optional.none();\n }\n };\n const hasMixedChildren = definition => definition.innerHtml.isSome() && definition.domChildren.length > 0;\n const renderToDom = (definition, optObsoleted) => {\n const canBePatched = candidate => name$3(candidate) === definition.tag && !hasMixedChildren(definition) && !isPremade(candidate);\n const elem = optObsoleted.filter(canBePatched).bind(obsoleted => attemptPatch(definition, obsoleted)).getOrThunk(() => introduceToDom(definition));\n writeOnly(elem, definition.uid);\n return elem;\n };\n\n const getBehaviours$2 = spec => {\n const behaviours = get$g(spec, 'behaviours').getOr({});\n return bind$3(keys(behaviours), name => {\n const behaviour = behaviours[name];\n return isNonNullable(behaviour) ? [behaviour.me] : [];\n });\n };\n const generateFrom = (spec, all) => generateFrom$1(spec, all);\n const generate$4 = spec => {\n const all = getBehaviours$2(spec);\n return generateFrom(spec, all);\n };\n\n const getDomDefinition = (info, bList, bData) => {\n const definition = toDefinition(info);\n const infoModification = toModification(info);\n const baseModification = { 'alloy.base.modification': infoModification };\n const modification = bList.length > 0 ? combine$2(bData, baseModification, bList, definition) : infoModification;\n return merge(definition, modification);\n };\n const getEvents = (info, bList, bData) => {\n const baseEvents = { 'alloy.base.behaviour': toEvents(info) };\n return combine$1(bData, info.eventOrder, bList, baseEvents).getOrDie();\n };\n const build$2 = (spec, obsoleted) => {\n const getMe = () => me;\n const systemApi = Cell(singleton$1);\n const info = getOrDie(toInfo(spec));\n const bBlob = generate$4(spec);\n const bList = getBehaviours$3(bBlob);\n const bData = getData$2(bBlob);\n const modDefinition = getDomDefinition(info, bList, bData);\n const item = renderToDom(modDefinition, obsoleted);\n const events = getEvents(info, bList, bData);\n const subcomponents = Cell(info.components);\n const connect = newApi => {\n systemApi.set(newApi);\n };\n const disconnect = () => {\n systemApi.set(NoContextApi(getMe));\n };\n const syncComponents = () => {\n const children$1 = children(item);\n const subs = bind$3(children$1, child => systemApi.get().getByDom(child).fold(() => [], pure$2));\n subcomponents.set(subs);\n };\n const config = behaviour => {\n const b = bData;\n const f = isFunction(b[behaviour.name()]) ? b[behaviour.name()] : () => {\n throw new Error('Could not find ' + behaviour.name() + ' in ' + JSON.stringify(spec, null, 2));\n };\n return f();\n };\n const hasConfigured = behaviour => isFunction(bData[behaviour.name()]);\n const getApis = () => info.apis;\n const readState = behaviourName => bData[behaviourName]().map(b => b.state.readState()).getOr('not enabled');\n const me = {\n uid: spec.uid,\n getSystem: systemApi.get,\n config,\n hasConfigured,\n spec,\n readState,\n getApis,\n connect,\n disconnect,\n element: item,\n syncComponents,\n components: subcomponents.get,\n events\n };\n return me;\n };\n\n const buildSubcomponents = (spec, obsoleted) => {\n const components = get$g(spec, 'components').getOr([]);\n return obsoleted.fold(() => map$2(components, build$1), obs => map$2(components, (c, i) => {\n return buildOrPatch(c, child$2(obs, i));\n }));\n };\n const buildFromSpec = (userSpec, obsoleted) => {\n const {\n events: specEvents,\n ...spec\n } = make$8(userSpec);\n const components = buildSubcomponents(spec, obsoleted);\n const completeSpec = {\n ...spec,\n events: {\n ...DefaultEvents,\n ...specEvents\n },\n components\n };\n return Result.value(build$2(completeSpec, obsoleted));\n };\n const text$2 = textContent => {\n const element = SugarElement.fromText(textContent);\n return external$1({ element });\n };\n const external$1 = spec => {\n const extSpec = asRawOrDie$1('external.component', objOfOnly([\n required$1('element'),\n option$3('uid')\n ]), spec);\n const systemApi = Cell(NoContextApi());\n const connect = newApi => {\n systemApi.set(newApi);\n };\n const disconnect = () => {\n systemApi.set(NoContextApi(() => me));\n };\n const uid = extSpec.uid.getOrThunk(() => generate$5('external'));\n writeOnly(extSpec.element, uid);\n const me = {\n uid,\n getSystem: systemApi.get,\n config: Optional.none,\n hasConfigured: never,\n connect,\n disconnect,\n getApis: () => ({}),\n element: extSpec.element,\n spec,\n readState: constant$1('No state'),\n syncComponents: noop,\n components: constant$1([]),\n events: {}\n };\n return premade$1(me);\n };\n const uids = generate$5;\n const isSketchSpec$1 = spec => has$2(spec, 'uid');\n const buildOrPatch = (spec, obsoleted) => getPremade(spec).getOrThunk(() => {\n const userSpecWithUid = isSketchSpec$1(spec) ? spec : {\n uid: uids(''),\n ...spec\n };\n return buildFromSpec(userSpecWithUid, obsoleted).getOrDie();\n });\n const build$1 = spec => buildOrPatch(spec, Optional.none());\n const premade = premade$1;\n\n var ClosestOrAncestor = (is, ancestor, scope, a, isRoot) => {\n if (is(scope, a)) {\n return Optional.some(scope);\n } else if (isFunction(isRoot) && isRoot(scope)) {\n return Optional.none();\n } else {\n return ancestor(scope, a, isRoot);\n }\n };\n\n const ancestor$1 = (scope, predicate, isRoot) => {\n let element = scope.dom;\n const stop = isFunction(isRoot) ? isRoot : never;\n while (element.parentNode) {\n element = element.parentNode;\n const el = SugarElement.fromDom(element);\n if (predicate(el)) {\n return Optional.some(el);\n } else if (stop(el)) {\n break;\n }\n }\n return Optional.none();\n };\n const closest$3 = (scope, predicate, isRoot) => {\n const is = (s, test) => test(s);\n return ClosestOrAncestor(is, ancestor$1, scope, predicate, isRoot);\n };\n const child$1 = (scope, predicate) => {\n const pred = node => predicate(SugarElement.fromDom(node));\n const result = find$5(scope.dom.childNodes, pred);\n return result.map(SugarElement.fromDom);\n };\n const descendant$1 = (scope, predicate) => {\n const descend = node => {\n for (let i = 0; i < node.childNodes.length; i++) {\n const child = SugarElement.fromDom(node.childNodes[i]);\n if (predicate(child)) {\n return Optional.some(child);\n }\n const res = descend(node.childNodes[i]);\n if (res.isSome()) {\n return res;\n }\n }\n return Optional.none();\n };\n return descend(scope.dom);\n };\n\n const closest$2 = (scope, predicate, isRoot) => closest$3(scope, predicate, isRoot).isSome();\n\n const ancestor = (scope, selector, isRoot) => ancestor$1(scope, e => is(e, selector), isRoot);\n const child = (scope, selector) => child$1(scope, e => is(e, selector));\n const descendant = (scope, selector) => one(selector, scope);\n const closest$1 = (scope, selector, isRoot) => {\n const is$1 = (element, selector) => is(element, selector);\n return ClosestOrAncestor(is$1, ancestor, scope, selector, isRoot);\n };\n\n const attribute = 'aria-controls';\n const find$1 = queryElem => {\n const dependent = closest$3(queryElem, elem => {\n if (!isElement$1(elem)) {\n return false;\n }\n const id = get$f(elem, 'id');\n return id !== undefined && id.indexOf(attribute) > -1;\n });\n return dependent.bind(dep => {\n const id = get$f(dep, 'id');\n const dos = getRootNode(dep);\n return descendant(dos, `[${ attribute }=\"${ id }\"]`);\n });\n };\n const manager = () => {\n const ariaId = generate$6(attribute);\n const link = elem => {\n set$9(elem, attribute, ariaId);\n };\n const unlink = elem => {\n remove$7(elem, attribute);\n };\n return {\n id: ariaId,\n link,\n unlink\n };\n };\n\n const isAriaPartOf = (component, queryElem) => find$1(queryElem).exists(owner => isPartOf$1(component, owner));\n const isPartOf$1 = (component, queryElem) => closest$2(queryElem, el => eq(el, component.element), never) || isAriaPartOf(component, queryElem);\n\n const unknown = 'unknown';\n var EventConfiguration;\n (function (EventConfiguration) {\n EventConfiguration[EventConfiguration['STOP'] = 0] = 'STOP';\n EventConfiguration[EventConfiguration['NORMAL'] = 1] = 'NORMAL';\n EventConfiguration[EventConfiguration['LOGGING'] = 2] = 'LOGGING';\n }(EventConfiguration || (EventConfiguration = {})));\n const eventConfig = Cell({});\n const makeEventLogger = (eventName, initialTarget) => {\n const sequence = [];\n const startTime = new Date().getTime();\n return {\n logEventCut: (_name, target, purpose) => {\n sequence.push({\n outcome: 'cut',\n target,\n purpose\n });\n },\n logEventStopped: (_name, target, purpose) => {\n sequence.push({\n outcome: 'stopped',\n target,\n purpose\n });\n },\n logNoParent: (_name, target, purpose) => {\n sequence.push({\n outcome: 'no-parent',\n target,\n purpose\n });\n },\n logEventNoHandlers: (_name, target) => {\n sequence.push({\n outcome: 'no-handlers-left',\n target\n });\n },\n logEventResponse: (_name, target, purpose) => {\n sequence.push({\n outcome: 'response',\n purpose,\n target\n });\n },\n write: () => {\n const finishTime = new Date().getTime();\n if (contains$2([\n 'mousemove',\n 'mouseover',\n 'mouseout',\n systemInit()\n ], eventName)) {\n return;\n }\n console.log(eventName, {\n event: eventName,\n time: finishTime - startTime,\n target: initialTarget.dom,\n sequence: map$2(sequence, s => {\n if (!contains$2([\n 'cut',\n 'stopped',\n 'response'\n ], s.outcome)) {\n return s.outcome;\n } else {\n return '{' + s.purpose + '} ' + s.outcome + ' at (' + element(s.target) + ')';\n }\n })\n });\n }\n };\n };\n const processEvent = (eventName, initialTarget, f) => {\n const status = get$g(eventConfig.get(), eventName).orThunk(() => {\n const patterns = keys(eventConfig.get());\n return findMap(patterns, p => eventName.indexOf(p) > -1 ? Optional.some(eventConfig.get()[p]) : Optional.none());\n }).getOr(EventConfiguration.NORMAL);\n switch (status) {\n case EventConfiguration.NORMAL:\n return f(noLogger());\n case EventConfiguration.LOGGING: {\n const logger = makeEventLogger(eventName, initialTarget);\n const output = f(logger);\n logger.write();\n return output;\n }\n case EventConfiguration.STOP:\n return true;\n }\n };\n const path = [\n 'alloy/data/Fields',\n 'alloy/debugging/Debugging'\n ];\n const getTrace = () => {\n const err = new Error();\n if (err.stack !== undefined) {\n const lines = err.stack.split('\\n');\n return find$5(lines, line => line.indexOf('alloy') > 0 && !exists(path, p => line.indexOf(p) > -1)).getOr(unknown);\n } else {\n return unknown;\n }\n };\n const ignoreEvent = {\n logEventCut: noop,\n logEventStopped: noop,\n logNoParent: noop,\n logEventNoHandlers: noop,\n logEventResponse: noop,\n write: noop\n };\n const monitorEvent = (eventName, initialTarget, f) => processEvent(eventName, initialTarget, f);\n const noLogger = constant$1(ignoreEvent);\n\n const menuFields = constant$1([\n required$1('menu'),\n required$1('selectedMenu')\n ]);\n const itemFields = constant$1([\n required$1('item'),\n required$1('selectedItem')\n ]);\n constant$1(objOf(itemFields().concat(menuFields())));\n const itemSchema$3 = constant$1(objOf(itemFields()));\n\n const _initSize = requiredObjOf('initSize', [\n required$1('numColumns'),\n required$1('numRows')\n ]);\n const itemMarkers = () => requiredOf('markers', itemSchema$3());\n const tieredMenuMarkers = () => requiredObjOf('markers', [required$1('backgroundMenu')].concat(menuFields()).concat(itemFields()));\n const markers$1 = required => requiredObjOf('markers', map$2(required, required$1));\n const onPresenceHandler = (label, fieldName, presence) => {\n getTrace();\n return field$1(fieldName, fieldName, presence, valueOf(f => Result.value((...args) => {\n return f.apply(undefined, args);\n })));\n };\n const onHandler = fieldName => onPresenceHandler('onHandler', fieldName, defaulted$1(noop));\n const onKeyboardHandler = fieldName => onPresenceHandler('onKeyboardHandler', fieldName, defaulted$1(Optional.none));\n const onStrictHandler = fieldName => onPresenceHandler('onHandler', fieldName, required$2());\n const onStrictKeyboardHandler = fieldName => onPresenceHandler('onKeyboardHandler', fieldName, required$2());\n const output$1 = (name, value) => customField(name, constant$1(value));\n const snapshot = name => customField(name, identity);\n const initSize = constant$1(_initSize);\n\n const nu$6 = (x, y, bubble, direction, placement, boundsRestriction, labelPrefix, alwaysFit = false) => ({\n x,\n y,\n bubble,\n direction,\n placement,\n restriction: boundsRestriction,\n label: `${ labelPrefix }-${ placement }`,\n alwaysFit\n });\n\n const adt$a = Adt.generate([\n { southeast: [] },\n { southwest: [] },\n { northeast: [] },\n { northwest: [] },\n { south: [] },\n { north: [] },\n { east: [] },\n { west: [] }\n ]);\n const cata$2 = (subject, southeast, southwest, northeast, northwest, south, north, east, west) => subject.fold(southeast, southwest, northeast, northwest, south, north, east, west);\n const cataVertical = (subject, south, middle, north) => subject.fold(south, south, north, north, south, north, middle, middle);\n const cataHorizontal = (subject, east, middle, west) => subject.fold(east, west, east, west, middle, middle, east, west);\n const southeast$3 = adt$a.southeast;\n const southwest$3 = adt$a.southwest;\n const northeast$3 = adt$a.northeast;\n const northwest$3 = adt$a.northwest;\n const south$3 = adt$a.south;\n const north$3 = adt$a.north;\n const east$3 = adt$a.east;\n const west$3 = adt$a.west;\n\n const cycleBy = (value, delta, min, max) => {\n const r = value + delta;\n if (r > max) {\n return min;\n } else if (r < min) {\n return max;\n } else {\n return r;\n }\n };\n const clamp = (value, min, max) => Math.min(Math.max(value, min), max);\n\n const getRestriction = (anchor, restriction) => {\n switch (restriction) {\n case 1:\n return anchor.x;\n case 0:\n return anchor.x + anchor.width;\n case 2:\n return anchor.y;\n case 3:\n return anchor.y + anchor.height;\n }\n };\n const boundsRestriction = (anchor, restrictions) => mapToObject([\n 'left',\n 'right',\n 'top',\n 'bottom'\n ], dir => get$g(restrictions, dir).map(restriction => getRestriction(anchor, restriction)));\n const adjustBounds = (bounds$1, restriction, bubbleOffset) => {\n const applyRestriction = (dir, current) => restriction[dir].map(pos => {\n const isVerticalAxis = dir === 'top' || dir === 'bottom';\n const offset = isVerticalAxis ? bubbleOffset.top : bubbleOffset.left;\n const comparator = dir === 'left' || dir === 'top' ? Math.max : Math.min;\n const newPos = comparator(pos, current) + offset;\n return isVerticalAxis ? clamp(newPos, bounds$1.y, bounds$1.bottom) : clamp(newPos, bounds$1.x, bounds$1.right);\n }).getOr(current);\n const adjustedLeft = applyRestriction('left', bounds$1.x);\n const adjustedTop = applyRestriction('top', bounds$1.y);\n const adjustedRight = applyRestriction('right', bounds$1.right);\n const adjustedBottom = applyRestriction('bottom', bounds$1.bottom);\n return bounds(adjustedLeft, adjustedTop, adjustedRight - adjustedLeft, adjustedBottom - adjustedTop);\n };\n\n const labelPrefix$2 = 'layout';\n const eastX$1 = anchor => anchor.x;\n const middleX$1 = (anchor, element) => anchor.x + anchor.width / 2 - element.width / 2;\n const westX$1 = (anchor, element) => anchor.x + anchor.width - element.width;\n const northY$2 = (anchor, element) => anchor.y - element.height;\n const southY$2 = anchor => anchor.y + anchor.height;\n const centreY$1 = (anchor, element) => anchor.y + anchor.height / 2 - element.height / 2;\n const eastEdgeX$1 = anchor => anchor.x + anchor.width;\n const westEdgeX$1 = (anchor, element) => anchor.x - element.width;\n const southeast$2 = (anchor, element, bubbles) => nu$6(eastX$1(anchor), southY$2(anchor), bubbles.southeast(), southeast$3(), 'southeast', boundsRestriction(anchor, {\n left: 1,\n top: 3\n }), labelPrefix$2);\n const southwest$2 = (anchor, element, bubbles) => nu$6(westX$1(anchor, element), southY$2(anchor), bubbles.southwest(), southwest$3(), 'southwest', boundsRestriction(anchor, {\n right: 0,\n top: 3\n }), labelPrefix$2);\n const northeast$2 = (anchor, element, bubbles) => nu$6(eastX$1(anchor), northY$2(anchor, element), bubbles.northeast(), northeast$3(), 'northeast', boundsRestriction(anchor, {\n left: 1,\n bottom: 2\n }), labelPrefix$2);\n const northwest$2 = (anchor, element, bubbles) => nu$6(westX$1(anchor, element), northY$2(anchor, element), bubbles.northwest(), northwest$3(), 'northwest', boundsRestriction(anchor, {\n right: 0,\n bottom: 2\n }), labelPrefix$2);\n const north$2 = (anchor, element, bubbles) => nu$6(middleX$1(anchor, element), northY$2(anchor, element), bubbles.north(), north$3(), 'north', boundsRestriction(anchor, { bottom: 2 }), labelPrefix$2);\n const south$2 = (anchor, element, bubbles) => nu$6(middleX$1(anchor, element), southY$2(anchor), bubbles.south(), south$3(), 'south', boundsRestriction(anchor, { top: 3 }), labelPrefix$2);\n const east$2 = (anchor, element, bubbles) => nu$6(eastEdgeX$1(anchor), centreY$1(anchor, element), bubbles.east(), east$3(), 'east', boundsRestriction(anchor, { left: 0 }), labelPrefix$2);\n const west$2 = (anchor, element, bubbles) => nu$6(westEdgeX$1(anchor, element), centreY$1(anchor, element), bubbles.west(), west$3(), 'west', boundsRestriction(anchor, { right: 1 }), labelPrefix$2);\n const all$1 = () => [\n southeast$2,\n southwest$2,\n northeast$2,\n northwest$2,\n south$2,\n north$2,\n east$2,\n west$2\n ];\n const allRtl$1 = () => [\n southwest$2,\n southeast$2,\n northwest$2,\n northeast$2,\n south$2,\n north$2,\n east$2,\n west$2\n ];\n const aboveOrBelow = () => [\n northeast$2,\n northwest$2,\n southeast$2,\n southwest$2,\n north$2,\n south$2\n ];\n const aboveOrBelowRtl = () => [\n northwest$2,\n northeast$2,\n southwest$2,\n southeast$2,\n north$2,\n south$2\n ];\n const belowOrAbove = () => [\n southeast$2,\n southwest$2,\n northeast$2,\n northwest$2,\n south$2,\n north$2\n ];\n const belowOrAboveRtl = () => [\n southwest$2,\n southeast$2,\n northwest$2,\n northeast$2,\n south$2,\n north$2\n ];\n\n const chooseChannels = (channels, message) => message.universal ? channels : filter$2(channels, ch => contains$2(message.channels, ch));\n const events$h = receiveConfig => derive$2([run$1(receive(), (component, message) => {\n const channelMap = receiveConfig.channels;\n const channels = keys(channelMap);\n const receivingData = message;\n const targetChannels = chooseChannels(channels, receivingData);\n each$1(targetChannels, ch => {\n const channelInfo = channelMap[ch];\n const channelSchema = channelInfo.schema;\n const data = asRawOrDie$1('channel[' + ch + '] data\\nReceiver: ' + element(component.element), channelSchema, receivingData.data);\n channelInfo.onReceive(component, data);\n });\n })]);\n\n var ActiveReceiving = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$h\n });\n\n var ReceivingSchema = [requiredOf('channels', setOf(Result.value, objOfOnly([\n onStrictHandler('onReceive'),\n defaulted('schema', anyValue())\n ])))];\n\n const executeEvent = (bConfig, bState, executor) => runOnExecute$1(component => {\n executor(component, bConfig, bState);\n });\n const loadEvent = (bConfig, bState, f) => runOnInit((component, _simulatedEvent) => {\n f(component, bConfig, bState);\n });\n const create$5 = (schema, name, active, apis, extra, state) => {\n const configSchema = objOfOnly(schema);\n const schemaSchema = optionObjOf(name, [optionObjOfOnly('config', schema)]);\n return doCreate(configSchema, schemaSchema, name, active, apis, extra, state);\n };\n const createModes$1 = (modes, name, active, apis, extra, state) => {\n const configSchema = modes;\n const schemaSchema = optionObjOf(name, [optionOf('config', modes)]);\n return doCreate(configSchema, schemaSchema, name, active, apis, extra, state);\n };\n const wrapApi = (bName, apiFunction, apiName) => {\n const f = (component, ...rest) => {\n const args = [component].concat(rest);\n return component.config({ name: constant$1(bName) }).fold(() => {\n throw new Error('We could not find any behaviour configuration for: ' + bName + '. Using API: ' + apiName);\n }, info => {\n const rest = Array.prototype.slice.call(args, 1);\n return apiFunction.apply(undefined, [\n component,\n info.config,\n info.state\n ].concat(rest));\n });\n };\n return markAsBehaviourApi(f, apiName, apiFunction);\n };\n const revokeBehaviour = name => ({\n key: name,\n value: undefined\n });\n const doCreate = (configSchema, schemaSchema, name, active, apis, extra, state) => {\n const getConfig = info => hasNonNullableKey(info, name) ? info[name]() : Optional.none();\n const wrappedApis = map$1(apis, (apiF, apiName) => wrapApi(name, apiF, apiName));\n const wrappedExtra = map$1(extra, (extraF, extraName) => markAsExtraApi(extraF, extraName));\n const me = {\n ...wrappedExtra,\n ...wrappedApis,\n revoke: curry(revokeBehaviour, name),\n config: spec => {\n const prepared = asRawOrDie$1(name + '-config', configSchema, spec);\n return {\n key: name,\n value: {\n config: prepared,\n me,\n configAsRaw: cached(() => asRawOrDie$1(name + '-config', configSchema, spec)),\n initialConfig: spec,\n state\n }\n };\n },\n schema: constant$1(schemaSchema),\n exhibit: (info, base) => {\n return lift2(getConfig(info), get$g(active, 'exhibit'), (behaviourInfo, exhibitor) => {\n return exhibitor(base, behaviourInfo.config, behaviourInfo.state);\n }).getOrThunk(() => nu$7({}));\n },\n name: constant$1(name),\n handlers: info => {\n return getConfig(info).map(behaviourInfo => {\n const getEvents = get$g(active, 'events').getOr(() => ({}));\n return getEvents(behaviourInfo.config, behaviourInfo.state);\n }).getOr({});\n }\n };\n return me;\n };\n\n const derive$1 = capabilities => wrapAll(capabilities);\n const simpleSchema = objOfOnly([\n required$1('fields'),\n required$1('name'),\n defaulted('active', {}),\n defaulted('apis', {}),\n defaulted('state', NoState),\n defaulted('extra', {})\n ]);\n const create$4 = data => {\n const value = asRawOrDie$1('Creating behaviour: ' + data.name, simpleSchema, data);\n return create$5(value.fields, value.name, value.active, value.apis, value.extra, value.state);\n };\n const modeSchema = objOfOnly([\n required$1('branchKey'),\n required$1('branches'),\n required$1('name'),\n defaulted('active', {}),\n defaulted('apis', {}),\n defaulted('state', NoState),\n defaulted('extra', {})\n ]);\n const createModes = data => {\n const value = asRawOrDie$1('Creating behaviour: ' + data.name, modeSchema, data);\n return createModes$1(choose$1(value.branchKey, value.branches), value.name, value.active, value.apis, value.extra, value.state);\n };\n const revoke = constant$1(undefined);\n\n const Receiving = create$4({\n fields: ReceivingSchema,\n name: 'receiving',\n active: ActiveReceiving\n });\n\n const exhibit$6 = (base, posConfig) => nu$7({\n classes: [],\n styles: posConfig.useFixed() ? {} : { position: 'relative' }\n });\n\n var ActivePosition = /*#__PURE__*/Object.freeze({\n __proto__: null,\n exhibit: exhibit$6\n });\n\n const focus$3 = element => element.dom.focus();\n const blur$1 = element => element.dom.blur();\n const hasFocus = element => {\n const root = getRootNode(element).dom;\n return element.dom === root.activeElement;\n };\n const active$1 = (root = getDocument()) => Optional.from(root.dom.activeElement).map(SugarElement.fromDom);\n const search = element => active$1(getRootNode(element)).filter(e => element.dom.contains(e.dom));\n\n const preserve$1 = (f, container) => {\n const dos = getRootNode(container);\n const refocus = active$1(dos).bind(focused => {\n const hasFocus = elem => eq(focused, elem);\n return hasFocus(container) ? Optional.some(container) : descendant$1(container, hasFocus);\n });\n const result = f(container);\n refocus.each(oldFocus => {\n active$1(dos).filter(newFocus => eq(newFocus, oldFocus)).fold(() => {\n focus$3(oldFocus);\n }, noop);\n });\n return result;\n };\n\n const NuPositionCss = (position, left, top, right, bottom) => {\n const toPx = num => num + 'px';\n return {\n position,\n left: left.map(toPx),\n top: top.map(toPx),\n right: right.map(toPx),\n bottom: bottom.map(toPx)\n };\n };\n const toOptions = position => ({\n ...position,\n position: Optional.some(position.position)\n });\n const applyPositionCss = (element, position) => {\n setOptions(element, toOptions(position));\n };\n\n const adt$9 = Adt.generate([\n { none: [] },\n {\n relative: [\n 'x',\n 'y',\n 'width',\n 'height'\n ]\n },\n {\n fixed: [\n 'x',\n 'y',\n 'width',\n 'height'\n ]\n }\n ]);\n const positionWithDirection = (posName, decision, x, y, width, height) => {\n const decisionRect = decision.rect;\n const decisionX = decisionRect.x - x;\n const decisionY = decisionRect.y - y;\n const decisionWidth = decisionRect.width;\n const decisionHeight = decisionRect.height;\n const decisionRight = width - (decisionX + decisionWidth);\n const decisionBottom = height - (decisionY + decisionHeight);\n const left = Optional.some(decisionX);\n const top = Optional.some(decisionY);\n const right = Optional.some(decisionRight);\n const bottom = Optional.some(decisionBottom);\n const none = Optional.none();\n return cata$2(decision.direction, () => NuPositionCss(posName, left, top, none, none), () => NuPositionCss(posName, none, top, right, none), () => NuPositionCss(posName, left, none, none, bottom), () => NuPositionCss(posName, none, none, right, bottom), () => NuPositionCss(posName, left, top, none, none), () => NuPositionCss(posName, left, none, none, bottom), () => NuPositionCss(posName, left, top, none, none), () => NuPositionCss(posName, none, top, right, none));\n };\n const reposition = (origin, decision) => origin.fold(() => {\n const decisionRect = decision.rect;\n return NuPositionCss('absolute', Optional.some(decisionRect.x), Optional.some(decisionRect.y), Optional.none(), Optional.none());\n }, (x, y, width, height) => {\n return positionWithDirection('absolute', decision, x, y, width, height);\n }, (x, y, width, height) => {\n return positionWithDirection('fixed', decision, x, y, width, height);\n });\n const toBox = (origin, element) => {\n const rel = curry(find$2, element);\n const position = origin.fold(rel, rel, () => {\n const scroll = get$b();\n return find$2(element).translate(-scroll.left, -scroll.top);\n });\n const width = getOuter$1(element);\n const height = getOuter$2(element);\n return bounds(position.left, position.top, width, height);\n };\n const viewport = (origin, getBounds) => getBounds.fold(() => origin.fold(win, win, bounds), b => origin.fold(b, b, () => {\n const bounds$1 = b();\n const pos = translate$2(origin, bounds$1.x, bounds$1.y);\n return bounds(pos.left, pos.top, bounds$1.width, bounds$1.height);\n }));\n const translate$2 = (origin, x, y) => {\n const pos = SugarPosition(x, y);\n const removeScroll = () => {\n const outerScroll = get$b();\n return pos.translate(-outerScroll.left, -outerScroll.top);\n };\n return origin.fold(constant$1(pos), constant$1(pos), removeScroll);\n };\n const cata$1 = (subject, onNone, onRelative, onFixed) => subject.fold(onNone, onRelative, onFixed);\n adt$9.none;\n const relative$1 = adt$9.relative;\n const fixed$1 = adt$9.fixed;\n\n const anchor = (anchorBox, origin) => ({\n anchorBox,\n origin\n });\n const box = (anchorBox, origin) => anchor(anchorBox, origin);\n\n const placementAttribute = 'data-alloy-placement';\n const setPlacement$1 = (element, placement) => {\n set$9(element, placementAttribute, placement);\n };\n const getPlacement = element => getOpt(element, placementAttribute);\n const reset$2 = element => remove$7(element, placementAttribute);\n\n const adt$8 = Adt.generate([\n { fit: ['reposition'] },\n {\n nofit: [\n 'reposition',\n 'visibleW',\n 'visibleH',\n 'isVisible'\n ]\n }\n ]);\n const determinePosition = (box, bounds) => {\n const {\n x: boundsX,\n y: boundsY,\n right: boundsRight,\n bottom: boundsBottom\n } = bounds;\n const {x, y, right, bottom, width, height} = box;\n const xInBounds = x >= boundsX && x <= boundsRight;\n const yInBounds = y >= boundsY && y <= boundsBottom;\n const originInBounds = xInBounds && yInBounds;\n const rightInBounds = right <= boundsRight && right >= boundsX;\n const bottomInBounds = bottom <= boundsBottom && bottom >= boundsY;\n const sizeInBounds = rightInBounds && bottomInBounds;\n const visibleW = Math.min(width, x >= boundsX ? boundsRight - x : right - boundsX);\n const visibleH = Math.min(height, y >= boundsY ? boundsBottom - y : bottom - boundsY);\n return {\n originInBounds,\n sizeInBounds,\n visibleW,\n visibleH\n };\n };\n const calcReposition = (box, bounds$1) => {\n const {\n x: boundsX,\n y: boundsY,\n right: boundsRight,\n bottom: boundsBottom\n } = bounds$1;\n const {x, y, width, height} = box;\n const maxX = Math.max(boundsX, boundsRight - width);\n const maxY = Math.max(boundsY, boundsBottom - height);\n const restrictedX = clamp(x, boundsX, maxX);\n const restrictedY = clamp(y, boundsY, maxY);\n const restrictedWidth = Math.min(restrictedX + width, boundsRight) - restrictedX;\n const restrictedHeight = Math.min(restrictedY + height, boundsBottom) - restrictedY;\n return bounds(restrictedX, restrictedY, restrictedWidth, restrictedHeight);\n };\n const calcMaxSizes = (direction, box, bounds) => {\n const upAvailable = constant$1(box.bottom - bounds.y);\n const downAvailable = constant$1(bounds.bottom - box.y);\n const maxHeight = cataVertical(direction, downAvailable, downAvailable, upAvailable);\n const westAvailable = constant$1(box.right - bounds.x);\n const eastAvailable = constant$1(bounds.right - box.x);\n const maxWidth = cataHorizontal(direction, eastAvailable, eastAvailable, westAvailable);\n return {\n maxWidth,\n maxHeight\n };\n };\n const attempt = (candidate, width, height, bounds$1) => {\n const bubble = candidate.bubble;\n const bubbleOffset = bubble.offset;\n const adjustedBounds = adjustBounds(bounds$1, candidate.restriction, bubbleOffset);\n const newX = candidate.x + bubbleOffset.left;\n const newY = candidate.y + bubbleOffset.top;\n const box = bounds(newX, newY, width, height);\n const {originInBounds, sizeInBounds, visibleW, visibleH} = determinePosition(box, adjustedBounds);\n const fits = originInBounds && sizeInBounds;\n const fittedBox = fits ? box : calcReposition(box, adjustedBounds);\n const isPartlyVisible = fittedBox.width > 0 && fittedBox.height > 0;\n const {maxWidth, maxHeight} = calcMaxSizes(candidate.direction, fittedBox, bounds$1);\n const reposition = {\n rect: fittedBox,\n maxHeight,\n maxWidth,\n direction: candidate.direction,\n placement: candidate.placement,\n classes: {\n on: bubble.classesOn,\n off: bubble.classesOff\n },\n layout: candidate.label,\n testY: newY\n };\n return fits || candidate.alwaysFit ? adt$8.fit(reposition) : adt$8.nofit(reposition, visibleW, visibleH, isPartlyVisible);\n };\n const attempts = (element, candidates, anchorBox, elementBox, bubbles, bounds) => {\n const panelWidth = elementBox.width;\n const panelHeight = elementBox.height;\n const attemptBestFit = (layout, reposition, visibleW, visibleH, isVisible) => {\n const next = layout(anchorBox, elementBox, bubbles, element, bounds);\n const attemptLayout = attempt(next, panelWidth, panelHeight, bounds);\n return attemptLayout.fold(constant$1(attemptLayout), (newReposition, newVisibleW, newVisibleH, newIsVisible) => {\n const improved = isVisible === newIsVisible ? newVisibleH > visibleH || newVisibleW > visibleW : !isVisible && newIsVisible;\n return improved ? attemptLayout : adt$8.nofit(reposition, visibleW, visibleH, isVisible);\n });\n };\n const abc = foldl(candidates, (b, a) => {\n const bestNext = curry(attemptBestFit, a);\n return b.fold(constant$1(b), bestNext);\n }, adt$8.nofit({\n rect: anchorBox,\n maxHeight: elementBox.height,\n maxWidth: elementBox.width,\n direction: southeast$3(),\n placement: 'southeast',\n classes: {\n on: [],\n off: []\n },\n layout: 'none',\n testY: anchorBox.y\n }, -1, -1, false));\n return abc.fold(identity, identity);\n };\n\n const singleton = doRevoke => {\n const subject = Cell(Optional.none());\n const revoke = () => subject.get().each(doRevoke);\n const clear = () => {\n revoke();\n subject.set(Optional.none());\n };\n const isSet = () => subject.get().isSome();\n const get = () => subject.get();\n const set = s => {\n revoke();\n subject.set(Optional.some(s));\n };\n return {\n clear,\n isSet,\n get,\n set\n };\n };\n const destroyable = () => singleton(s => s.destroy());\n const unbindable = () => singleton(s => s.unbind());\n const value$2 = () => {\n const subject = singleton(noop);\n const on = f => subject.get().each(f);\n return {\n ...subject,\n on\n };\n };\n\n const filter = always;\n const bind = (element, event, handler) => bind$2(element, event, filter, handler);\n const capture = (element, event, handler) => capture$1(element, event, filter, handler);\n const fromRawEvent = fromRawEvent$1;\n\n const properties = [\n 'top',\n 'bottom',\n 'right',\n 'left'\n ];\n const timerAttr = 'data-alloy-transition-timer';\n const isTransitioning$1 = (element, transition) => hasAll(element, transition.classes);\n const shouldApplyTransitionCss = (transition, decision, lastPlacement) => {\n return lastPlacement.exists(placer => {\n const mode = transition.mode;\n return mode === 'all' ? true : placer[mode] !== decision[mode];\n });\n };\n const hasChanges = (position, intermediate) => {\n const round = value => parseFloat(value).toFixed(3);\n return find$4(intermediate, (value, key) => {\n const newValue = position[key].map(round);\n const val = value.map(round);\n return !equals(newValue, val);\n }).isSome();\n };\n const getTransitionDuration = element => {\n const get = name => {\n const style = get$e(element, name);\n const times = style.split(/\\s*,\\s*/);\n return filter$2(times, isNotEmpty);\n };\n const parse = value => {\n if (isString(value) && /^[\\d.]+/.test(value)) {\n const num = parseFloat(value);\n return endsWith(value, 'ms') ? num : num * 1000;\n } else {\n return 0;\n }\n };\n const delay = get('transition-delay');\n const duration = get('transition-duration');\n return foldl(duration, (acc, dur, i) => {\n const time = parse(delay[i]) + parse(dur);\n return Math.max(acc, time);\n }, 0);\n };\n const setupTransitionListeners = (element, transition) => {\n const transitionEnd = unbindable();\n const transitionCancel = unbindable();\n let timer;\n const isSourceTransition = e => {\n var _a;\n const pseudoElement = (_a = e.raw.pseudoElement) !== null && _a !== void 0 ? _a : '';\n return eq(e.target, element) && isEmpty(pseudoElement) && contains$2(properties, e.raw.propertyName);\n };\n const transitionDone = e => {\n if (isNullable(e) || isSourceTransition(e)) {\n transitionEnd.clear();\n transitionCancel.clear();\n const type = e === null || e === void 0 ? void 0 : e.raw.type;\n if (isNullable(type) || type === transitionend()) {\n clearTimeout(timer);\n remove$7(element, timerAttr);\n remove$1(element, transition.classes);\n }\n }\n };\n const transitionStart = bind(element, transitionstart(), e => {\n if (isSourceTransition(e)) {\n transitionStart.unbind();\n transitionEnd.set(bind(element, transitionend(), transitionDone));\n transitionCancel.set(bind(element, transitioncancel(), transitionDone));\n }\n });\n const duration = getTransitionDuration(element);\n requestAnimationFrame(() => {\n timer = setTimeout(transitionDone, duration + 17);\n set$9(element, timerAttr, timer);\n });\n };\n const startTransitioning = (element, transition) => {\n add$1(element, transition.classes);\n getOpt(element, timerAttr).each(timerId => {\n clearTimeout(parseInt(timerId, 10));\n remove$7(element, timerAttr);\n });\n setupTransitionListeners(element, transition);\n };\n const applyTransitionCss = (element, origin, position, transition, decision, lastPlacement) => {\n const shouldTransition = shouldApplyTransitionCss(transition, decision, lastPlacement);\n if (shouldTransition || isTransitioning$1(element, transition)) {\n set$8(element, 'position', position.position);\n const rect = toBox(origin, element);\n const intermediatePosition = reposition(origin, {\n ...decision,\n rect\n });\n const intermediateCssOptions = mapToObject(properties, prop => intermediatePosition[prop]);\n if (hasChanges(position, intermediateCssOptions)) {\n setOptions(element, intermediateCssOptions);\n if (shouldTransition) {\n startTransitioning(element, transition);\n }\n reflow(element);\n }\n } else {\n remove$1(element, transition.classes);\n }\n };\n\n const elementSize = p => ({\n width: getOuter$1(p),\n height: getOuter$2(p)\n });\n const layout = (anchorBox, element, bubbles, options) => {\n remove$6(element, 'max-height');\n remove$6(element, 'max-width');\n const elementBox = elementSize(element);\n return attempts(element, options.preference, anchorBox, elementBox, bubbles, options.bounds);\n };\n const setClasses = (element, decision) => {\n const classInfo = decision.classes;\n remove$1(element, classInfo.off);\n add$1(element, classInfo.on);\n };\n const setHeight = (element, decision, options) => {\n const maxHeightFunction = options.maxHeightFunction;\n maxHeightFunction(element, decision.maxHeight);\n };\n const setWidth = (element, decision, options) => {\n const maxWidthFunction = options.maxWidthFunction;\n maxWidthFunction(element, decision.maxWidth);\n };\n const position$2 = (element, decision, options) => {\n const positionCss = reposition(options.origin, decision);\n options.transition.each(transition => {\n applyTransitionCss(element, options.origin, positionCss, transition, decision, options.lastPlacement);\n });\n applyPositionCss(element, positionCss);\n };\n const setPlacement = (element, decision) => {\n setPlacement$1(element, decision.placement);\n };\n\n const setMaxHeight = (element, maxHeight) => {\n setMax$1(element, Math.floor(maxHeight));\n };\n const anchored = constant$1((element, available) => {\n setMaxHeight(element, available);\n setAll(element, {\n 'overflow-x': 'hidden',\n 'overflow-y': 'auto'\n });\n });\n const expandable$1 = constant$1((element, available) => {\n setMaxHeight(element, available);\n });\n\n const defaultOr = (options, key, dephault) => options[key] === undefined ? dephault : options[key];\n const simple = (anchor, element, bubble, layouts, lastPlacement, getBounds, overrideOptions, transition) => {\n const maxHeightFunction = defaultOr(overrideOptions, 'maxHeightFunction', anchored());\n const maxWidthFunction = defaultOr(overrideOptions, 'maxWidthFunction', noop);\n const anchorBox = anchor.anchorBox;\n const origin = anchor.origin;\n const options = {\n bounds: viewport(origin, getBounds),\n origin,\n preference: layouts,\n maxHeightFunction,\n maxWidthFunction,\n lastPlacement,\n transition\n };\n return go(anchorBox, element, bubble, options);\n };\n const go = (anchorBox, element, bubble, options) => {\n const decision = layout(anchorBox, element, bubble, options);\n position$2(element, decision, options);\n setPlacement(element, decision);\n setClasses(element, decision);\n setHeight(element, decision, options);\n setWidth(element, decision, options);\n return {\n layout: decision.layout,\n placement: decision.placement\n };\n };\n\n const allAlignments = [\n 'valignCentre',\n 'alignLeft',\n 'alignRight',\n 'alignCentre',\n 'top',\n 'bottom',\n 'left',\n 'right',\n 'inset'\n ];\n const nu$5 = (xOffset, yOffset, classes, insetModifier = 1) => {\n const insetXOffset = xOffset * insetModifier;\n const insetYOffset = yOffset * insetModifier;\n const getClasses = prop => get$g(classes, prop).getOr([]);\n const make = (xDelta, yDelta, alignmentsOn) => {\n const alignmentsOff = difference(allAlignments, alignmentsOn);\n return {\n offset: SugarPosition(xDelta, yDelta),\n classesOn: bind$3(alignmentsOn, getClasses),\n classesOff: bind$3(alignmentsOff, getClasses)\n };\n };\n return {\n southeast: () => make(-xOffset, yOffset, [\n 'top',\n 'alignLeft'\n ]),\n southwest: () => make(xOffset, yOffset, [\n 'top',\n 'alignRight'\n ]),\n south: () => make(-xOffset / 2, yOffset, [\n 'top',\n 'alignCentre'\n ]),\n northeast: () => make(-xOffset, -yOffset, [\n 'bottom',\n 'alignLeft'\n ]),\n northwest: () => make(xOffset, -yOffset, [\n 'bottom',\n 'alignRight'\n ]),\n north: () => make(-xOffset / 2, -yOffset, [\n 'bottom',\n 'alignCentre'\n ]),\n east: () => make(xOffset, -yOffset / 2, [\n 'valignCentre',\n 'left'\n ]),\n west: () => make(-xOffset, -yOffset / 2, [\n 'valignCentre',\n 'right'\n ]),\n insetNortheast: () => make(insetXOffset, insetYOffset, [\n 'top',\n 'alignLeft',\n 'inset'\n ]),\n insetNorthwest: () => make(-insetXOffset, insetYOffset, [\n 'top',\n 'alignRight',\n 'inset'\n ]),\n insetNorth: () => make(-insetXOffset / 2, insetYOffset, [\n 'top',\n 'alignCentre',\n 'inset'\n ]),\n insetSoutheast: () => make(insetXOffset, -insetYOffset, [\n 'bottom',\n 'alignLeft',\n 'inset'\n ]),\n insetSouthwest: () => make(-insetXOffset, -insetYOffset, [\n 'bottom',\n 'alignRight',\n 'inset'\n ]),\n insetSouth: () => make(-insetXOffset / 2, -insetYOffset, [\n 'bottom',\n 'alignCentre',\n 'inset'\n ]),\n insetEast: () => make(-insetXOffset, -insetYOffset / 2, [\n 'valignCentre',\n 'right',\n 'inset'\n ]),\n insetWest: () => make(insetXOffset, -insetYOffset / 2, [\n 'valignCentre',\n 'left',\n 'inset'\n ])\n };\n };\n const fallback = () => nu$5(0, 0, {});\n\n const nu$4 = identity;\n\n const onDirection = (isLtr, isRtl) => element => getDirection(element) === 'rtl' ? isRtl : isLtr;\n const getDirection = element => get$e(element, 'direction') === 'rtl' ? 'rtl' : 'ltr';\n\n var AttributeValue;\n (function (AttributeValue) {\n AttributeValue['TopToBottom'] = 'toptobottom';\n AttributeValue['BottomToTop'] = 'bottomtotop';\n }(AttributeValue || (AttributeValue = {})));\n const Attribute = 'data-alloy-vertical-dir';\n const isBottomToTopDir = el => closest$2(el, current => isElement$1(current) && get$f(current, 'data-alloy-vertical-dir') === AttributeValue.BottomToTop);\n\n const schema$y = () => optionObjOf('layouts', [\n required$1('onLtr'),\n required$1('onRtl'),\n option$3('onBottomLtr'),\n option$3('onBottomRtl')\n ]);\n const get$5 = (elem, info, defaultLtr, defaultRtl, defaultBottomLtr, defaultBottomRtl, dirElement) => {\n const isBottomToTop = dirElement.map(isBottomToTopDir).getOr(false);\n const customLtr = info.layouts.map(ls => ls.onLtr(elem));\n const customRtl = info.layouts.map(ls => ls.onRtl(elem));\n const ltr = isBottomToTop ? info.layouts.bind(ls => ls.onBottomLtr.map(f => f(elem))).or(customLtr).getOr(defaultBottomLtr) : customLtr.getOr(defaultLtr);\n const rtl = isBottomToTop ? info.layouts.bind(ls => ls.onBottomRtl.map(f => f(elem))).or(customRtl).getOr(defaultBottomRtl) : customRtl.getOr(defaultRtl);\n const f = onDirection(ltr, rtl);\n return f(elem);\n };\n\n const placement$4 = (component, anchorInfo, origin) => {\n const hotspot = anchorInfo.hotspot;\n const anchorBox = toBox(origin, hotspot.element);\n const layouts = get$5(component.element, anchorInfo, belowOrAbove(), belowOrAboveRtl(), aboveOrBelow(), aboveOrBelowRtl(), Optional.some(anchorInfo.hotspot.element));\n return Optional.some(nu$4({\n anchorBox,\n bubble: anchorInfo.bubble.getOr(fallback()),\n overrides: anchorInfo.overrides,\n layouts,\n placer: Optional.none()\n }));\n };\n var HotspotAnchor = [\n required$1('hotspot'),\n option$3('bubble'),\n defaulted('overrides', {}),\n schema$y(),\n output$1('placement', placement$4)\n ];\n\n const placement$3 = (component, anchorInfo, origin) => {\n const pos = translate$2(origin, anchorInfo.x, anchorInfo.y);\n const anchorBox = bounds(pos.left, pos.top, anchorInfo.width, anchorInfo.height);\n const layouts = get$5(component.element, anchorInfo, all$1(), allRtl$1(), all$1(), allRtl$1(), Optional.none());\n return Optional.some(nu$4({\n anchorBox,\n bubble: anchorInfo.bubble,\n overrides: anchorInfo.overrides,\n layouts,\n placer: Optional.none()\n }));\n };\n var MakeshiftAnchor = [\n required$1('x'),\n required$1('y'),\n defaulted('height', 0),\n defaulted('width', 0),\n defaulted('bubble', fallback()),\n defaulted('overrides', {}),\n schema$y(),\n output$1('placement', placement$3)\n ];\n\n const adt$7 = Adt.generate([\n { screen: ['point'] },\n {\n absolute: [\n 'point',\n 'scrollLeft',\n 'scrollTop'\n ]\n }\n ]);\n const toFixed = pos => pos.fold(identity, (point, scrollLeft, scrollTop) => point.translate(-scrollLeft, -scrollTop));\n const toAbsolute = pos => pos.fold(identity, identity);\n const sum = points => foldl(points, (b, a) => b.translate(a.left, a.top), SugarPosition(0, 0));\n const sumAsFixed = positions => {\n const points = map$2(positions, toFixed);\n return sum(points);\n };\n const sumAsAbsolute = positions => {\n const points = map$2(positions, toAbsolute);\n return sum(points);\n };\n const screen = adt$7.screen;\n const absolute$1 = adt$7.absolute;\n\n const getOffset = (component, origin, anchorInfo) => {\n const win = defaultView(anchorInfo.root).dom;\n const hasSameOwner = frame => {\n const frameOwner = owner$4(frame);\n const compOwner = owner$4(component.element);\n return eq(frameOwner, compOwner);\n };\n return Optional.from(win.frameElement).map(SugarElement.fromDom).filter(hasSameOwner).map(absolute$3);\n };\n const getRootPoint = (component, origin, anchorInfo) => {\n const doc = owner$4(component.element);\n const outerScroll = get$b(doc);\n const offset = getOffset(component, origin, anchorInfo).getOr(outerScroll);\n return absolute$1(offset, outerScroll.left, outerScroll.top);\n };\n\n const getBox = (left, top, width, height) => {\n const point = screen(SugarPosition(left, top));\n return Optional.some(pointed(point, width, height));\n };\n const calcNewAnchor = (optBox, rootPoint, anchorInfo, origin, elem) => optBox.map(box => {\n const points = [\n rootPoint,\n box.point\n ];\n const topLeft = cata$1(origin, () => sumAsAbsolute(points), () => sumAsAbsolute(points), () => sumAsFixed(points));\n const anchorBox = rect(topLeft.left, topLeft.top, box.width, box.height);\n const layoutsLtr = anchorInfo.showAbove ? aboveOrBelow() : belowOrAbove();\n const layoutsRtl = anchorInfo.showAbove ? aboveOrBelowRtl() : belowOrAboveRtl();\n const layouts = get$5(elem, anchorInfo, layoutsLtr, layoutsRtl, layoutsLtr, layoutsRtl, Optional.none());\n return nu$4({\n anchorBox,\n bubble: anchorInfo.bubble.getOr(fallback()),\n overrides: anchorInfo.overrides,\n layouts,\n placer: Optional.none()\n });\n });\n\n const placement$2 = (component, anchorInfo, origin) => {\n const rootPoint = getRootPoint(component, origin, anchorInfo);\n return anchorInfo.node.filter(inBody).bind(target => {\n const rect = target.dom.getBoundingClientRect();\n const nodeBox = getBox(rect.left, rect.top, rect.width, rect.height);\n const elem = anchorInfo.node.getOr(component.element);\n return calcNewAnchor(nodeBox, rootPoint, anchorInfo, origin, elem);\n });\n };\n var NodeAnchor = [\n required$1('node'),\n required$1('root'),\n option$3('bubble'),\n schema$y(),\n defaulted('overrides', {}),\n defaulted('showAbove', false),\n output$1('placement', placement$2)\n ];\n\n const zeroWidth = '\\uFEFF';\n const nbsp = '\\xA0';\n\n const create$3 = (start, soffset, finish, foffset) => ({\n start,\n soffset,\n finish,\n foffset\n });\n const SimRange = { create: create$3 };\n\n const adt$6 = Adt.generate([\n { before: ['element'] },\n {\n on: [\n 'element',\n 'offset'\n ]\n },\n { after: ['element'] }\n ]);\n const cata = (subject, onBefore, onOn, onAfter) => subject.fold(onBefore, onOn, onAfter);\n const getStart$1 = situ => situ.fold(identity, identity, identity);\n const before = adt$6.before;\n const on$1 = adt$6.on;\n const after$1 = adt$6.after;\n const Situ = {\n before,\n on: on$1,\n after: after$1,\n cata,\n getStart: getStart$1\n };\n\n const adt$5 = Adt.generate([\n { domRange: ['rng'] },\n {\n relative: [\n 'startSitu',\n 'finishSitu'\n ]\n },\n {\n exact: [\n 'start',\n 'soffset',\n 'finish',\n 'foffset'\n ]\n }\n ]);\n const exactFromRange = simRange => adt$5.exact(simRange.start, simRange.soffset, simRange.finish, simRange.foffset);\n const getStart = selection => selection.match({\n domRange: rng => SugarElement.fromDom(rng.startContainer),\n relative: (startSitu, _finishSitu) => Situ.getStart(startSitu),\n exact: (start, _soffset, _finish, _foffset) => start\n });\n const domRange = adt$5.domRange;\n const relative = adt$5.relative;\n const exact = adt$5.exact;\n const getWin = selection => {\n const start = getStart(selection);\n return defaultView(start);\n };\n const range$1 = SimRange.create;\n const SimSelection = {\n domRange,\n relative,\n exact,\n exactFromRange,\n getWin,\n range: range$1\n };\n\n const setStart = (rng, situ) => {\n situ.fold(e => {\n rng.setStartBefore(e.dom);\n }, (e, o) => {\n rng.setStart(e.dom, o);\n }, e => {\n rng.setStartAfter(e.dom);\n });\n };\n const setFinish = (rng, situ) => {\n situ.fold(e => {\n rng.setEndBefore(e.dom);\n }, (e, o) => {\n rng.setEnd(e.dom, o);\n }, e => {\n rng.setEndAfter(e.dom);\n });\n };\n const relativeToNative = (win, startSitu, finishSitu) => {\n const range = win.document.createRange();\n setStart(range, startSitu);\n setFinish(range, finishSitu);\n return range;\n };\n const exactToNative = (win, start, soffset, finish, foffset) => {\n const rng = win.document.createRange();\n rng.setStart(start.dom, soffset);\n rng.setEnd(finish.dom, foffset);\n return rng;\n };\n const toRect = rect => ({\n left: rect.left,\n top: rect.top,\n right: rect.right,\n bottom: rect.bottom,\n width: rect.width,\n height: rect.height\n });\n const getFirstRect$1 = rng => {\n const rects = rng.getClientRects();\n const rect = rects.length > 0 ? rects[0] : rng.getBoundingClientRect();\n return rect.width > 0 || rect.height > 0 ? Optional.some(rect).map(toRect) : Optional.none();\n };\n const getBounds$2 = rng => {\n const rect = rng.getBoundingClientRect();\n return rect.width > 0 || rect.height > 0 ? Optional.some(rect).map(toRect) : Optional.none();\n };\n\n const adt$4 = Adt.generate([\n {\n ltr: [\n 'start',\n 'soffset',\n 'finish',\n 'foffset'\n ]\n },\n {\n rtl: [\n 'start',\n 'soffset',\n 'finish',\n 'foffset'\n ]\n }\n ]);\n const fromRange = (win, type, range) => type(SugarElement.fromDom(range.startContainer), range.startOffset, SugarElement.fromDom(range.endContainer), range.endOffset);\n const getRanges = (win, selection) => selection.match({\n domRange: rng => {\n return {\n ltr: constant$1(rng),\n rtl: Optional.none\n };\n },\n relative: (startSitu, finishSitu) => {\n return {\n ltr: cached(() => relativeToNative(win, startSitu, finishSitu)),\n rtl: cached(() => Optional.some(relativeToNative(win, finishSitu, startSitu)))\n };\n },\n exact: (start, soffset, finish, foffset) => {\n return {\n ltr: cached(() => exactToNative(win, start, soffset, finish, foffset)),\n rtl: cached(() => Optional.some(exactToNative(win, finish, foffset, start, soffset)))\n };\n }\n });\n const doDiagnose = (win, ranges) => {\n const rng = ranges.ltr();\n if (rng.collapsed) {\n const reversed = ranges.rtl().filter(rev => rev.collapsed === false);\n return reversed.map(rev => adt$4.rtl(SugarElement.fromDom(rev.endContainer), rev.endOffset, SugarElement.fromDom(rev.startContainer), rev.startOffset)).getOrThunk(() => fromRange(win, adt$4.ltr, rng));\n } else {\n return fromRange(win, adt$4.ltr, rng);\n }\n };\n const diagnose = (win, selection) => {\n const ranges = getRanges(win, selection);\n return doDiagnose(win, ranges);\n };\n const asLtrRange = (win, selection) => {\n const diagnosis = diagnose(win, selection);\n return diagnosis.match({\n ltr: (start, soffset, finish, foffset) => {\n const rng = win.document.createRange();\n rng.setStart(start.dom, soffset);\n rng.setEnd(finish.dom, foffset);\n return rng;\n },\n rtl: (start, soffset, finish, foffset) => {\n const rng = win.document.createRange();\n rng.setStart(finish.dom, foffset);\n rng.setEnd(start.dom, soffset);\n return rng;\n }\n });\n };\n adt$4.ltr;\n adt$4.rtl;\n\n const descendants = (scope, selector) => all$3(selector, scope);\n\n const makeRange = (start, soffset, finish, foffset) => {\n const doc = owner$4(start);\n const rng = doc.dom.createRange();\n rng.setStart(start.dom, soffset);\n rng.setEnd(finish.dom, foffset);\n return rng;\n };\n const after = (start, soffset, finish, foffset) => {\n const r = makeRange(start, soffset, finish, foffset);\n const same = eq(start, finish) && soffset === foffset;\n return r.collapsed && !same;\n };\n\n const getNativeSelection = win => Optional.from(win.getSelection());\n const readRange = selection => {\n if (selection.rangeCount > 0) {\n const firstRng = selection.getRangeAt(0);\n const lastRng = selection.getRangeAt(selection.rangeCount - 1);\n return Optional.some(SimRange.create(SugarElement.fromDom(firstRng.startContainer), firstRng.startOffset, SugarElement.fromDom(lastRng.endContainer), lastRng.endOffset));\n } else {\n return Optional.none();\n }\n };\n const doGetExact = selection => {\n if (selection.anchorNode === null || selection.focusNode === null) {\n return readRange(selection);\n } else {\n const anchor = SugarElement.fromDom(selection.anchorNode);\n const focus = SugarElement.fromDom(selection.focusNode);\n return after(anchor, selection.anchorOffset, focus, selection.focusOffset) ? Optional.some(SimRange.create(anchor, selection.anchorOffset, focus, selection.focusOffset)) : readRange(selection);\n }\n };\n const getExact = win => getNativeSelection(win).filter(sel => sel.rangeCount > 0).bind(doGetExact);\n const getFirstRect = (win, selection) => {\n const rng = asLtrRange(win, selection);\n return getFirstRect$1(rng);\n };\n const getBounds$1 = (win, selection) => {\n const rng = asLtrRange(win, selection);\n return getBounds$2(rng);\n };\n\n const NodeValue = (is, name) => {\n const get = element => {\n if (!is(element)) {\n throw new Error('Can only get ' + name + ' value of a ' + name + ' node');\n }\n return getOption(element).getOr('');\n };\n const getOption = element => is(element) ? Optional.from(element.dom.nodeValue) : Optional.none();\n const set = (element, value) => {\n if (!is(element)) {\n throw new Error('Can only set raw ' + name + ' value of a ' + name + ' node');\n }\n element.dom.nodeValue = value;\n };\n return {\n get,\n getOption,\n set\n };\n };\n\n const api = NodeValue(isText, 'text');\n const get$4 = element => api.get(element);\n\n const point = (element, offset) => ({\n element,\n offset\n });\n const descendOnce$1 = (element, offset) => {\n const children$1 = children(element);\n if (children$1.length === 0) {\n return point(element, offset);\n } else if (offset < children$1.length) {\n return point(children$1[offset], 0);\n } else {\n const last = children$1[children$1.length - 1];\n const len = isText(last) ? get$4(last).length : children(last).length;\n return point(last, len);\n }\n };\n\n const descendOnce = (element, offset) => isText(element) ? point(element, offset) : descendOnce$1(element, offset);\n const getAnchorSelection = (win, anchorInfo) => {\n const getSelection = anchorInfo.getSelection.getOrThunk(() => () => getExact(win));\n return getSelection().map(sel => {\n const modStart = descendOnce(sel.start, sel.soffset);\n const modFinish = descendOnce(sel.finish, sel.foffset);\n return SimSelection.range(modStart.element, modStart.offset, modFinish.element, modFinish.offset);\n });\n };\n const placement$1 = (component, anchorInfo, origin) => {\n const win = defaultView(anchorInfo.root).dom;\n const rootPoint = getRootPoint(component, origin, anchorInfo);\n const selectionBox = getAnchorSelection(win, anchorInfo).bind(sel => {\n const optRect = getBounds$1(win, SimSelection.exactFromRange(sel)).orThunk(() => {\n const x = SugarElement.fromText(zeroWidth);\n before$1(sel.start, x);\n const rect = getFirstRect(win, SimSelection.exact(x, 0, x, 1));\n remove$5(x);\n return rect;\n });\n return optRect.bind(rawRect => getBox(rawRect.left, rawRect.top, rawRect.width, rawRect.height));\n });\n const targetElement = getAnchorSelection(win, anchorInfo).bind(sel => isElement$1(sel.start) ? Optional.some(sel.start) : parentElement(sel.start));\n const elem = targetElement.getOr(component.element);\n return calcNewAnchor(selectionBox, rootPoint, anchorInfo, origin, elem);\n };\n var SelectionAnchor = [\n option$3('getSelection'),\n required$1('root'),\n option$3('bubble'),\n schema$y(),\n defaulted('overrides', {}),\n defaulted('showAbove', false),\n output$1('placement', placement$1)\n ];\n\n const labelPrefix$1 = 'link-layout';\n const eastX = anchor => anchor.x + anchor.width;\n const westX = (anchor, element) => anchor.x - element.width;\n const northY$1 = (anchor, element) => anchor.y - element.height + anchor.height;\n const southY$1 = anchor => anchor.y;\n const southeast$1 = (anchor, element, bubbles) => nu$6(eastX(anchor), southY$1(anchor), bubbles.southeast(), southeast$3(), 'southeast', boundsRestriction(anchor, {\n left: 0,\n top: 2\n }), labelPrefix$1);\n const southwest$1 = (anchor, element, bubbles) => nu$6(westX(anchor, element), southY$1(anchor), bubbles.southwest(), southwest$3(), 'southwest', boundsRestriction(anchor, {\n right: 1,\n top: 2\n }), labelPrefix$1);\n const northeast$1 = (anchor, element, bubbles) => nu$6(eastX(anchor), northY$1(anchor, element), bubbles.northeast(), northeast$3(), 'northeast', boundsRestriction(anchor, {\n left: 0,\n bottom: 3\n }), labelPrefix$1);\n const northwest$1 = (anchor, element, bubbles) => nu$6(westX(anchor, element), northY$1(anchor, element), bubbles.northwest(), northwest$3(), 'northwest', boundsRestriction(anchor, {\n right: 1,\n bottom: 3\n }), labelPrefix$1);\n const all = () => [\n southeast$1,\n southwest$1,\n northeast$1,\n northwest$1\n ];\n const allRtl = () => [\n southwest$1,\n southeast$1,\n northwest$1,\n northeast$1\n ];\n\n const placement = (component, submenuInfo, origin) => {\n const anchorBox = toBox(origin, submenuInfo.item.element);\n const layouts = get$5(component.element, submenuInfo, all(), allRtl(), all(), allRtl(), Optional.none());\n return Optional.some(nu$4({\n anchorBox,\n bubble: fallback(),\n overrides: submenuInfo.overrides,\n layouts,\n placer: Optional.none()\n }));\n };\n var SubmenuAnchor = [\n required$1('item'),\n schema$y(),\n defaulted('overrides', {}),\n output$1('placement', placement)\n ];\n\n var AnchorSchema = choose$1('type', {\n selection: SelectionAnchor,\n node: NodeAnchor,\n hotspot: HotspotAnchor,\n submenu: SubmenuAnchor,\n makeshift: MakeshiftAnchor\n });\n\n const TransitionSchema = [\n requiredArrayOf('classes', string),\n defaultedStringEnum('mode', 'all', [\n 'all',\n 'layout',\n 'placement'\n ])\n ];\n const PositionSchema = [\n defaulted('useFixed', never),\n option$3('getBounds')\n ];\n const PlacementSchema = [\n requiredOf('anchor', AnchorSchema),\n optionObjOf('transition', TransitionSchema)\n ];\n\n const getFixedOrigin = () => {\n const html = document.documentElement;\n return fixed$1(0, 0, html.clientWidth, html.clientHeight);\n };\n const getRelativeOrigin = component => {\n const position = absolute$3(component.element);\n const bounds = component.element.dom.getBoundingClientRect();\n return relative$1(position.left, position.top, bounds.width, bounds.height);\n };\n const place = (component, origin, anchoring, getBounds, placee, lastPlace, transition) => {\n const anchor = box(anchoring.anchorBox, origin);\n return simple(anchor, placee.element, anchoring.bubble, anchoring.layouts, lastPlace, getBounds, anchoring.overrides, transition);\n };\n const position$1 = (component, posConfig, posState, placee, placementSpec) => {\n positionWithin(component, posConfig, posState, placee, placementSpec, Optional.none());\n };\n const positionWithin = (component, posConfig, posState, placee, placementSpec, boxElement) => {\n const boundsBox = boxElement.map(box$1);\n return positionWithinBounds(component, posConfig, posState, placee, placementSpec, boundsBox);\n };\n const positionWithinBounds = (component, posConfig, posState, placee, placementSpec, bounds) => {\n const placeeDetail = asRawOrDie$1('placement.info', objOf(PlacementSchema), placementSpec);\n const anchorage = placeeDetail.anchor;\n const element = placee.element;\n const placeeState = posState.get(placee.uid);\n preserve$1(() => {\n set$8(element, 'position', 'fixed');\n const oldVisibility = getRaw(element, 'visibility');\n set$8(element, 'visibility', 'hidden');\n const origin = posConfig.useFixed() ? getFixedOrigin() : getRelativeOrigin(component);\n const placer = anchorage.placement;\n const getBounds = bounds.map(constant$1).or(posConfig.getBounds);\n placer(component, anchorage, origin).each(anchoring => {\n const doPlace = anchoring.placer.getOr(place);\n const newState = doPlace(component, origin, anchoring, getBounds, placee, placeeState, placeeDetail.transition);\n posState.set(placee.uid, newState);\n });\n oldVisibility.fold(() => {\n remove$6(element, 'visibility');\n }, vis => {\n set$8(element, 'visibility', vis);\n });\n if (getRaw(element, 'left').isNone() && getRaw(element, 'top').isNone() && getRaw(element, 'right').isNone() && getRaw(element, 'bottom').isNone() && is$1(getRaw(element, 'position'), 'fixed')) {\n remove$6(element, 'position');\n }\n }, element);\n };\n const getMode = (component, pConfig, _pState) => pConfig.useFixed() ? 'fixed' : 'absolute';\n const reset$1 = (component, pConfig, posState, placee) => {\n const element = placee.element;\n each$1([\n 'position',\n 'left',\n 'right',\n 'top',\n 'bottom'\n ], prop => remove$6(element, prop));\n reset$2(element);\n posState.clear(placee.uid);\n };\n\n var PositionApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n position: position$1,\n positionWithin: positionWithin,\n positionWithinBounds: positionWithinBounds,\n getMode: getMode,\n reset: reset$1\n });\n\n const init$g = () => {\n let state = {};\n const set = (id, data) => {\n state[id] = data;\n };\n const get = id => get$g(state, id);\n const clear = id => {\n if (isNonNullable(id)) {\n delete state[id];\n } else {\n state = {};\n }\n };\n return nu$8({\n readState: () => state,\n clear,\n set,\n get\n });\n };\n\n var PositioningState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init$g\n });\n\n const Positioning = create$4({\n fields: PositionSchema,\n name: 'positioning',\n active: ActivePosition,\n apis: PositionApis,\n state: PositioningState\n });\n\n const isConnected = comp => comp.getSystem().isConnected();\n const fireDetaching = component => {\n emit(component, detachedFromDom());\n const children = component.components();\n each$1(children, fireDetaching);\n };\n const fireAttaching = component => {\n const children = component.components();\n each$1(children, fireAttaching);\n emit(component, attachedToDom());\n };\n const virtualAttach = (parent, child) => {\n parent.getSystem().addToWorld(child);\n if (inBody(parent.element)) {\n fireAttaching(child);\n }\n };\n const virtualDetach = comp => {\n fireDetaching(comp);\n comp.getSystem().removeFromWorld(comp);\n };\n const attach$1 = (parent, child) => {\n append$2(parent.element, child.element);\n };\n const detachChildren$1 = component => {\n each$1(component.components(), childComp => remove$5(childComp.element));\n empty(component.element);\n component.syncComponents();\n };\n const replaceChildren = (component, newSpecs, buildNewChildren) => {\n const subs = component.components();\n detachChildren$1(component);\n const newChildren = buildNewChildren(newSpecs);\n const deleted = difference(subs, newChildren);\n each$1(deleted, comp => {\n fireDetaching(comp);\n component.getSystem().removeFromWorld(comp);\n });\n each$1(newChildren, childComp => {\n if (!isConnected(childComp)) {\n component.getSystem().addToWorld(childComp);\n attach$1(component, childComp);\n if (inBody(component.element)) {\n fireAttaching(childComp);\n }\n } else {\n attach$1(component, childComp);\n }\n });\n component.syncComponents();\n };\n const virtualReplaceChildren = (component, newSpecs, buildNewChildren) => {\n const subs = component.components();\n const existingComps = bind$3(newSpecs, spec => getPremade(spec).toArray());\n each$1(subs, childComp => {\n if (!contains$2(existingComps, childComp)) {\n virtualDetach(childComp);\n }\n });\n const newChildren = buildNewChildren(newSpecs);\n const deleted = difference(subs, newChildren);\n each$1(deleted, deletedComp => {\n if (isConnected(deletedComp)) {\n virtualDetach(deletedComp);\n }\n });\n each$1(newChildren, childComp => {\n if (!isConnected(childComp)) {\n virtualAttach(component, childComp);\n }\n });\n component.syncComponents();\n };\n\n const attach = (parent, child) => {\n attachWith(parent, child, append$2);\n };\n const attachWith = (parent, child, insertion) => {\n parent.getSystem().addToWorld(child);\n insertion(parent.element, child.element);\n if (inBody(parent.element)) {\n fireAttaching(child);\n }\n parent.syncComponents();\n };\n const doDetach = component => {\n fireDetaching(component);\n remove$5(component.element);\n component.getSystem().removeFromWorld(component);\n };\n const detach = component => {\n const parent$1 = parent(component.element).bind(p => component.getSystem().getByDom(p).toOptional());\n doDetach(component);\n parent$1.each(p => {\n p.syncComponents();\n });\n };\n const detachChildren = component => {\n const subs = component.components();\n each$1(subs, doDetach);\n empty(component.element);\n component.syncComponents();\n };\n const attachSystem = (element, guiSystem) => {\n attachSystemWith(element, guiSystem, append$2);\n };\n const attachSystemAfter = (element, guiSystem) => {\n attachSystemWith(element, guiSystem, after$2);\n };\n const attachSystemWith = (element, guiSystem, inserter) => {\n inserter(element, guiSystem.element);\n const children$1 = children(guiSystem.element);\n each$1(children$1, child => {\n guiSystem.getByDom(child).each(fireAttaching);\n });\n };\n const detachSystem = guiSystem => {\n const children$1 = children(guiSystem.element);\n each$1(children$1, child => {\n guiSystem.getByDom(child).each(fireDetaching);\n });\n remove$5(guiSystem.element);\n };\n\n const rebuild = (sandbox, sConfig, sState, data) => {\n sState.get().each(_data => {\n detachChildren(sandbox);\n });\n const point = sConfig.getAttachPoint(sandbox);\n attach(point, sandbox);\n const built = sandbox.getSystem().build(data);\n attach(sandbox, built);\n sState.set(built);\n return built;\n };\n const open$1 = (sandbox, sConfig, sState, data) => {\n const newState = rebuild(sandbox, sConfig, sState, data);\n sConfig.onOpen(sandbox, newState);\n return newState;\n };\n const setContent = (sandbox, sConfig, sState, data) => sState.get().map(() => rebuild(sandbox, sConfig, sState, data));\n const openWhileCloaked = (sandbox, sConfig, sState, data, transaction) => {\n cloak(sandbox, sConfig);\n open$1(sandbox, sConfig, sState, data);\n transaction();\n decloak(sandbox, sConfig);\n };\n const close$1 = (sandbox, sConfig, sState) => {\n sState.get().each(data => {\n detachChildren(sandbox);\n detach(sandbox);\n sConfig.onClose(sandbox, data);\n sState.clear();\n });\n };\n const isOpen$1 = (_sandbox, _sConfig, sState) => sState.isOpen();\n const isPartOf = (sandbox, sConfig, sState, queryElem) => isOpen$1(sandbox, sConfig, sState) && sState.get().exists(data => sConfig.isPartOf(sandbox, data, queryElem));\n const getState$2 = (_sandbox, _sConfig, sState) => sState.get();\n const store = (sandbox, cssKey, attr, newValue) => {\n getRaw(sandbox.element, cssKey).fold(() => {\n remove$7(sandbox.element, attr);\n }, v => {\n set$9(sandbox.element, attr, v);\n });\n set$8(sandbox.element, cssKey, newValue);\n };\n const restore = (sandbox, cssKey, attr) => {\n getOpt(sandbox.element, attr).fold(() => remove$6(sandbox.element, cssKey), oldValue => set$8(sandbox.element, cssKey, oldValue));\n };\n const cloak = (sandbox, sConfig, _sState) => {\n const sink = sConfig.getAttachPoint(sandbox);\n set$8(sandbox.element, 'position', Positioning.getMode(sink));\n store(sandbox, 'visibility', sConfig.cloakVisibilityAttr, 'hidden');\n };\n const hasPosition = element => exists([\n 'top',\n 'left',\n 'right',\n 'bottom'\n ], pos => getRaw(element, pos).isSome());\n const decloak = (sandbox, sConfig, _sState) => {\n if (!hasPosition(sandbox.element)) {\n remove$6(sandbox.element, 'position');\n }\n restore(sandbox, 'visibility', sConfig.cloakVisibilityAttr);\n };\n\n var SandboxApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n cloak: cloak,\n decloak: decloak,\n open: open$1,\n openWhileCloaked: openWhileCloaked,\n close: close$1,\n isOpen: isOpen$1,\n isPartOf: isPartOf,\n getState: getState$2,\n setContent: setContent\n });\n\n const events$g = (sandboxConfig, sandboxState) => derive$2([run$1(sandboxClose(), (sandbox, _simulatedEvent) => {\n close$1(sandbox, sandboxConfig, sandboxState);\n })]);\n\n var ActiveSandbox = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$g\n });\n\n var SandboxSchema = [\n onHandler('onOpen'),\n onHandler('onClose'),\n required$1('isPartOf'),\n required$1('getAttachPoint'),\n defaulted('cloakVisibilityAttr', 'data-precloak-visibility')\n ];\n\n const init$f = () => {\n const contents = value$2();\n const readState = constant$1('not-implemented');\n return nu$8({\n readState,\n isOpen: contents.isSet,\n clear: contents.clear,\n set: contents.set,\n get: contents.get\n });\n };\n\n var SandboxState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init$f\n });\n\n const Sandboxing = create$4({\n fields: SandboxSchema,\n name: 'sandboxing',\n active: ActiveSandbox,\n apis: SandboxApis,\n state: SandboxState\n });\n\n const dismissPopups = constant$1('dismiss.popups');\n const repositionPopups = constant$1('reposition.popups');\n const mouseReleased = constant$1('mouse.released');\n\n const schema$x = objOfOnly([\n defaulted('isExtraPart', never),\n optionObjOf('fireEventInstead', [defaulted('event', dismissRequested())])\n ]);\n const receivingChannel$1 = rawSpec => {\n const detail = asRawOrDie$1('Dismissal', schema$x, rawSpec);\n return {\n [dismissPopups()]: {\n schema: objOfOnly([required$1('target')]),\n onReceive: (sandbox, data) => {\n if (Sandboxing.isOpen(sandbox)) {\n const isPart = Sandboxing.isPartOf(sandbox, data.target) || detail.isExtraPart(sandbox, data.target);\n if (!isPart) {\n detail.fireEventInstead.fold(() => Sandboxing.close(sandbox), fe => emit(sandbox, fe.event));\n }\n }\n }\n }\n };\n };\n\n const schema$w = objOfOnly([\n optionObjOf('fireEventInstead', [defaulted('event', repositionRequested())]),\n requiredFunction('doReposition')\n ]);\n const receivingChannel = rawSpec => {\n const detail = asRawOrDie$1('Reposition', schema$w, rawSpec);\n return {\n [repositionPopups()]: {\n onReceive: sandbox => {\n if (Sandboxing.isOpen(sandbox)) {\n detail.fireEventInstead.fold(() => detail.doReposition(sandbox), fe => emit(sandbox, fe.event));\n }\n }\n }\n };\n };\n\n const onLoad$5 = (component, repConfig, repState) => {\n repConfig.store.manager.onLoad(component, repConfig, repState);\n };\n const onUnload$2 = (component, repConfig, repState) => {\n repConfig.store.manager.onUnload(component, repConfig, repState);\n };\n const setValue$3 = (component, repConfig, repState, data) => {\n repConfig.store.manager.setValue(component, repConfig, repState, data);\n };\n const getValue$3 = (component, repConfig, repState) => repConfig.store.manager.getValue(component, repConfig, repState);\n const getState$1 = (component, repConfig, repState) => repState;\n\n var RepresentApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n onLoad: onLoad$5,\n onUnload: onUnload$2,\n setValue: setValue$3,\n getValue: getValue$3,\n getState: getState$1\n });\n\n const events$f = (repConfig, repState) => {\n const es = repConfig.resetOnDom ? [\n runOnAttached((comp, _se) => {\n onLoad$5(comp, repConfig, repState);\n }),\n runOnDetached((comp, _se) => {\n onUnload$2(comp, repConfig, repState);\n })\n ] : [loadEvent(repConfig, repState, onLoad$5)];\n return derive$2(es);\n };\n\n var ActiveRepresenting = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$f\n });\n\n const memory$1 = () => {\n const data = Cell(null);\n const readState = () => ({\n mode: 'memory',\n value: data.get()\n });\n const isNotSet = () => data.get() === null;\n const clear = () => {\n data.set(null);\n };\n return nu$8({\n set: data.set,\n get: data.get,\n isNotSet,\n clear,\n readState\n });\n };\n const manual = () => {\n const readState = noop;\n return nu$8({ readState });\n };\n const dataset = () => {\n const dataByValue = Cell({});\n const dataByText = Cell({});\n const readState = () => ({\n mode: 'dataset',\n dataByValue: dataByValue.get(),\n dataByText: dataByText.get()\n });\n const clear = () => {\n dataByValue.set({});\n dataByText.set({});\n };\n const lookup = itemString => get$g(dataByValue.get(), itemString).orThunk(() => get$g(dataByText.get(), itemString));\n const update = items => {\n const currentDataByValue = dataByValue.get();\n const currentDataByText = dataByText.get();\n const newDataByValue = {};\n const newDataByText = {};\n each$1(items, item => {\n newDataByValue[item.value] = item;\n get$g(item, 'meta').each(meta => {\n get$g(meta, 'text').each(text => {\n newDataByText[text] = item;\n });\n });\n });\n dataByValue.set({\n ...currentDataByValue,\n ...newDataByValue\n });\n dataByText.set({\n ...currentDataByText,\n ...newDataByText\n });\n };\n return nu$8({\n readState,\n lookup,\n update,\n clear\n });\n };\n const init$e = spec => spec.store.manager.state(spec);\n\n var RepresentState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n memory: memory$1,\n dataset: dataset,\n manual: manual,\n init: init$e\n });\n\n const setValue$2 = (component, repConfig, repState, data) => {\n const store = repConfig.store;\n repState.update([data]);\n store.setValue(component, data);\n repConfig.onSetValue(component, data);\n };\n const getValue$2 = (component, repConfig, repState) => {\n const store = repConfig.store;\n const key = store.getDataKey(component);\n return repState.lookup(key).getOrThunk(() => store.getFallbackEntry(key));\n };\n const onLoad$4 = (component, repConfig, repState) => {\n const store = repConfig.store;\n store.initialValue.each(data => {\n setValue$2(component, repConfig, repState, data);\n });\n };\n const onUnload$1 = (component, repConfig, repState) => {\n repState.clear();\n };\n var DatasetStore = [\n option$3('initialValue'),\n required$1('getFallbackEntry'),\n required$1('getDataKey'),\n required$1('setValue'),\n output$1('manager', {\n setValue: setValue$2,\n getValue: getValue$2,\n onLoad: onLoad$4,\n onUnload: onUnload$1,\n state: dataset\n })\n ];\n\n const getValue$1 = (component, repConfig, _repState) => repConfig.store.getValue(component);\n const setValue$1 = (component, repConfig, _repState, data) => {\n repConfig.store.setValue(component, data);\n repConfig.onSetValue(component, data);\n };\n const onLoad$3 = (component, repConfig, _repState) => {\n repConfig.store.initialValue.each(data => {\n repConfig.store.setValue(component, data);\n });\n };\n var ManualStore = [\n required$1('getValue'),\n defaulted('setValue', noop),\n option$3('initialValue'),\n output$1('manager', {\n setValue: setValue$1,\n getValue: getValue$1,\n onLoad: onLoad$3,\n onUnload: noop,\n state: NoState.init\n })\n ];\n\n const setValue = (component, repConfig, repState, data) => {\n repState.set(data);\n repConfig.onSetValue(component, data);\n };\n const getValue = (component, repConfig, repState) => repState.get();\n const onLoad$2 = (component, repConfig, repState) => {\n repConfig.store.initialValue.each(initVal => {\n if (repState.isNotSet()) {\n repState.set(initVal);\n }\n });\n };\n const onUnload = (component, repConfig, repState) => {\n repState.clear();\n };\n var MemoryStore = [\n option$3('initialValue'),\n output$1('manager', {\n setValue,\n getValue,\n onLoad: onLoad$2,\n onUnload,\n state: memory$1\n })\n ];\n\n var RepresentSchema = [\n defaultedOf('store', { mode: 'memory' }, choose$1('mode', {\n memory: MemoryStore,\n manual: ManualStore,\n dataset: DatasetStore\n })),\n onHandler('onSetValue'),\n defaulted('resetOnDom', false)\n ];\n\n const Representing = create$4({\n fields: RepresentSchema,\n name: 'representing',\n active: ActiveRepresenting,\n apis: RepresentApis,\n extra: {\n setValueFrom: (component, source) => {\n const value = Representing.getValue(source);\n Representing.setValue(component, value);\n }\n },\n state: RepresentState\n });\n\n const field = (name, forbidden) => defaultedObjOf(name, {}, map$2(forbidden, f => forbid(f.name(), 'Cannot configure ' + f.name() + ' for ' + name)).concat([customField('dump', identity)]));\n const get$3 = data => data.dump;\n const augment = (data, original) => ({\n ...derive$1(original),\n ...data.dump\n });\n const SketchBehaviours = {\n field,\n augment,\n get: get$3\n };\n\n const _placeholder = 'placeholder';\n const adt$3 = Adt.generate([\n {\n single: [\n 'required',\n 'valueThunk'\n ]\n },\n {\n multiple: [\n 'required',\n 'valueThunks'\n ]\n }\n ]);\n const isSubstituted = spec => has$2(spec, 'uiType');\n const subPlaceholder = (owner, detail, compSpec, placeholders) => {\n if (owner.exists(o => o !== compSpec.owner)) {\n return adt$3.single(true, constant$1(compSpec));\n }\n return get$g(placeholders, compSpec.name).fold(() => {\n throw new Error('Unknown placeholder component: ' + compSpec.name + '\\nKnown: [' + keys(placeholders) + ']\\nNamespace: ' + owner.getOr('none') + '\\nSpec: ' + JSON.stringify(compSpec, null, 2));\n }, newSpec => newSpec.replace());\n };\n const scan = (owner, detail, compSpec, placeholders) => {\n if (isSubstituted(compSpec) && compSpec.uiType === _placeholder) {\n return subPlaceholder(owner, detail, compSpec, placeholders);\n } else {\n return adt$3.single(false, constant$1(compSpec));\n }\n };\n const substitute = (owner, detail, compSpec, placeholders) => {\n const base = scan(owner, detail, compSpec, placeholders);\n return base.fold((req, valueThunk) => {\n const value = isSubstituted(compSpec) ? valueThunk(detail, compSpec.config, compSpec.validated) : valueThunk(detail);\n const childSpecs = get$g(value, 'components').getOr([]);\n const substituted = bind$3(childSpecs, c => substitute(owner, detail, c, placeholders));\n return [{\n ...value,\n components: substituted\n }];\n }, (req, valuesThunk) => {\n if (isSubstituted(compSpec)) {\n const values = valuesThunk(detail, compSpec.config, compSpec.validated);\n const preprocessor = compSpec.validated.preprocess.getOr(identity);\n return preprocessor(values);\n } else {\n return valuesThunk(detail);\n }\n });\n };\n const substituteAll = (owner, detail, components, placeholders) => bind$3(components, c => substitute(owner, detail, c, placeholders));\n const oneReplace = (label, replacements) => {\n let called = false;\n const used = () => called;\n const replace = () => {\n if (called) {\n throw new Error('Trying to use the same placeholder more than once: ' + label);\n }\n called = true;\n return replacements;\n };\n const required = () => replacements.fold((req, _) => req, (req, _) => req);\n return {\n name: constant$1(label),\n required,\n used,\n replace\n };\n };\n const substitutePlaces = (owner, detail, components, placeholders) => {\n const ps = map$1(placeholders, (ph, name) => oneReplace(name, ph));\n const outcome = substituteAll(owner, detail, components, ps);\n each(ps, p => {\n if (p.used() === false && p.required()) {\n throw new Error('Placeholder: ' + p.name() + ' was not found in components list\\nNamespace: ' + owner.getOr('none') + '\\nComponents: ' + JSON.stringify(detail.components, null, 2));\n }\n });\n return outcome;\n };\n const single$2 = adt$3.single;\n const multiple = adt$3.multiple;\n const placeholder = constant$1(_placeholder);\n\n const adt$2 = Adt.generate([\n { required: ['data'] },\n { external: ['data'] },\n { optional: ['data'] },\n { group: ['data'] }\n ]);\n const fFactory = defaulted('factory', { sketch: identity });\n const fSchema = defaulted('schema', []);\n const fName = required$1('name');\n const fPname = field$1('pname', 'pname', defaultedThunk(typeSpec => ''), anyValue());\n const fGroupSchema = customField('schema', () => [option$3('preprocess')]);\n const fDefaults = defaulted('defaults', constant$1({}));\n const fOverrides = defaulted('overrides', constant$1({}));\n const requiredSpec = objOf([\n fFactory,\n fSchema,\n fName,\n fPname,\n fDefaults,\n fOverrides\n ]);\n const externalSpec = objOf([\n fFactory,\n fSchema,\n fName,\n fDefaults,\n fOverrides\n ]);\n const optionalSpec = objOf([\n fFactory,\n fSchema,\n fName,\n fPname,\n fDefaults,\n fOverrides\n ]);\n const groupSpec = objOf([\n fFactory,\n fGroupSchema,\n fName,\n required$1('unit'),\n fPname,\n fDefaults,\n fOverrides\n ]);\n const asNamedPart = part => {\n return part.fold(Optional.some, Optional.none, Optional.some, Optional.some);\n };\n const name$2 = part => {\n const get = data => data.name;\n return part.fold(get, get, get, get);\n };\n const asCommon = part => {\n return part.fold(identity, identity, identity, identity);\n };\n const convert = (adtConstructor, partSchema) => spec => {\n const data = asRawOrDie$1('Converting part type', partSchema, spec);\n return adtConstructor(data);\n };\n const required = convert(adt$2.required, requiredSpec);\n const external = convert(adt$2.external, externalSpec);\n const optional = convert(adt$2.optional, optionalSpec);\n const group = convert(adt$2.group, groupSpec);\n const original = constant$1('entirety');\n\n var PartType = /*#__PURE__*/Object.freeze({\n __proto__: null,\n required: required,\n external: external,\n optional: optional,\n group: group,\n asNamedPart: asNamedPart,\n name: name$2,\n asCommon: asCommon,\n original: original\n });\n\n const combine = (detail, data, partSpec, partValidated) => deepMerge(data.defaults(detail, partSpec, partValidated), partSpec, { uid: detail.partUids[data.name] }, data.overrides(detail, partSpec, partValidated));\n const subs = (owner, detail, parts) => {\n const internals = {};\n const externals = {};\n each$1(parts, part => {\n part.fold(data => {\n internals[data.pname] = single$2(true, (detail, partSpec, partValidated) => data.factory.sketch(combine(detail, data, partSpec, partValidated)));\n }, data => {\n const partSpec = detail.parts[data.name];\n externals[data.name] = constant$1(data.factory.sketch(combine(detail, data, partSpec[original()]), partSpec));\n }, data => {\n internals[data.pname] = single$2(false, (detail, partSpec, partValidated) => data.factory.sketch(combine(detail, data, partSpec, partValidated)));\n }, data => {\n internals[data.pname] = multiple(true, (detail, _partSpec, _partValidated) => {\n const units = detail[data.name];\n return map$2(units, u => data.factory.sketch(deepMerge(data.defaults(detail, u, _partValidated), u, data.overrides(detail, u))));\n });\n });\n });\n return {\n internals: constant$1(internals),\n externals: constant$1(externals)\n };\n };\n\n const generate$3 = (owner, parts) => {\n const r = {};\n each$1(parts, part => {\n asNamedPart(part).each(np => {\n const g = doGenerateOne(owner, np.pname);\n r[np.name] = config => {\n const validated = asRawOrDie$1('Part: ' + np.name + ' in ' + owner, objOf(np.schema), config);\n return {\n ...g,\n config,\n validated\n };\n };\n });\n });\n return r;\n };\n const doGenerateOne = (owner, pname) => ({\n uiType: placeholder(),\n owner,\n name: pname\n });\n const generateOne$1 = (owner, pname, config) => ({\n uiType: placeholder(),\n owner,\n name: pname,\n config,\n validated: {}\n });\n const schemas = parts => bind$3(parts, part => part.fold(Optional.none, Optional.some, Optional.none, Optional.none).map(data => requiredObjOf(data.name, data.schema.concat([snapshot(original())]))).toArray());\n const names = parts => map$2(parts, name$2);\n const substitutes = (owner, detail, parts) => subs(owner, detail, parts);\n const components$1 = (owner, detail, internals) => substitutePlaces(Optional.some(owner), detail, detail.components, internals);\n const getPart = (component, detail, partKey) => {\n const uid = detail.partUids[partKey];\n return component.getSystem().getByUid(uid).toOptional();\n };\n const getPartOrDie = (component, detail, partKey) => getPart(component, detail, partKey).getOrDie('Could not find part: ' + partKey);\n const getParts = (component, detail, partKeys) => {\n const r = {};\n const uids = detail.partUids;\n const system = component.getSystem();\n each$1(partKeys, pk => {\n r[pk] = constant$1(system.getByUid(uids[pk]));\n });\n return r;\n };\n const getAllParts = (component, detail) => {\n const system = component.getSystem();\n return map$1(detail.partUids, (pUid, _k) => constant$1(system.getByUid(pUid)));\n };\n const getAllPartNames = detail => keys(detail.partUids);\n const getPartsOrDie = (component, detail, partKeys) => {\n const r = {};\n const uids = detail.partUids;\n const system = component.getSystem();\n each$1(partKeys, pk => {\n r[pk] = constant$1(system.getByUid(uids[pk]).getOrDie());\n });\n return r;\n };\n const defaultUids = (baseUid, partTypes) => {\n const partNames = names(partTypes);\n return wrapAll(map$2(partNames, pn => ({\n key: pn,\n value: baseUid + '-' + pn\n })));\n };\n const defaultUidsSchema = partTypes => field$1('partUids', 'partUids', mergeWithThunk(spec => defaultUids(spec.uid, partTypes)), anyValue());\n\n var AlloyParts = /*#__PURE__*/Object.freeze({\n __proto__: null,\n generate: generate$3,\n generateOne: generateOne$1,\n schemas: schemas,\n names: names,\n substitutes: substitutes,\n components: components$1,\n defaultUids: defaultUids,\n defaultUidsSchema: defaultUidsSchema,\n getAllParts: getAllParts,\n getAllPartNames: getAllPartNames,\n getPart: getPart,\n getPartOrDie: getPartOrDie,\n getParts: getParts,\n getPartsOrDie: getPartsOrDie\n });\n\n const base = (partSchemas, partUidsSchemas) => {\n const ps = partSchemas.length > 0 ? [requiredObjOf('parts', partSchemas)] : [];\n return ps.concat([\n required$1('uid'),\n defaulted('dom', {}),\n defaulted('components', []),\n snapshot('originalSpec'),\n defaulted('debug.sketcher', {})\n ]).concat(partUidsSchemas);\n };\n const asRawOrDie = (label, schema, spec, partSchemas, partUidsSchemas) => {\n const baseS = base(partSchemas, partUidsSchemas);\n return asRawOrDie$1(label + ' [SpecSchema]', objOfOnly(baseS.concat(schema)), spec);\n };\n\n const single$1 = (owner, schema, factory, spec) => {\n const specWithUid = supplyUid(spec);\n const detail = asRawOrDie(owner, schema, specWithUid, [], []);\n return factory(detail, specWithUid);\n };\n const composite$1 = (owner, schema, partTypes, factory, spec) => {\n const specWithUid = supplyUid(spec);\n const partSchemas = schemas(partTypes);\n const partUidsSchema = defaultUidsSchema(partTypes);\n const detail = asRawOrDie(owner, schema, specWithUid, partSchemas, [partUidsSchema]);\n const subs = substitutes(owner, detail, partTypes);\n const components = components$1(owner, detail, subs.internals());\n return factory(detail, components, specWithUid, subs.externals());\n };\n const hasUid = spec => has$2(spec, 'uid');\n const supplyUid = spec => {\n return hasUid(spec) ? spec : {\n ...spec,\n uid: generate$5('uid')\n };\n };\n\n const isSketchSpec = spec => {\n return spec.uid !== undefined;\n };\n const singleSchema = objOfOnly([\n required$1('name'),\n required$1('factory'),\n required$1('configFields'),\n defaulted('apis', {}),\n defaulted('extraApis', {})\n ]);\n const compositeSchema = objOfOnly([\n required$1('name'),\n required$1('factory'),\n required$1('configFields'),\n required$1('partFields'),\n defaulted('apis', {}),\n defaulted('extraApis', {})\n ]);\n const single = rawConfig => {\n const config = asRawOrDie$1('Sketcher for ' + rawConfig.name, singleSchema, rawConfig);\n const sketch = spec => single$1(config.name, config.configFields, config.factory, spec);\n const apis = map$1(config.apis, makeApi);\n const extraApis = map$1(config.extraApis, (f, k) => markAsExtraApi(f, k));\n return {\n name: config.name,\n configFields: config.configFields,\n sketch,\n ...apis,\n ...extraApis\n };\n };\n const composite = rawConfig => {\n const config = asRawOrDie$1('Sketcher for ' + rawConfig.name, compositeSchema, rawConfig);\n const sketch = spec => composite$1(config.name, config.configFields, config.partFields, config.factory, spec);\n const parts = generate$3(config.name, config.partFields);\n const apis = map$1(config.apis, makeApi);\n const extraApis = map$1(config.extraApis, (f, k) => markAsExtraApi(f, k));\n return {\n name: config.name,\n partFields: config.partFields,\n configFields: config.configFields,\n sketch,\n parts,\n ...apis,\n ...extraApis\n };\n };\n\n const inside = target => isTag('input')(target) && get$f(target, 'type') !== 'radio' || isTag('textarea')(target);\n\n const getCurrent = (component, composeConfig, _composeState) => composeConfig.find(component);\n\n var ComposeApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n getCurrent: getCurrent\n });\n\n const ComposeSchema = [required$1('find')];\n\n const Composing = create$4({\n fields: ComposeSchema,\n name: 'composing',\n apis: ComposeApis\n });\n\n const nativeDisabled = [\n 'input',\n 'button',\n 'textarea',\n 'select'\n ];\n const onLoad$1 = (component, disableConfig, disableState) => {\n const f = disableConfig.disabled() ? disable : enable;\n f(component, disableConfig);\n };\n const hasNative = (component, config) => config.useNative === true && contains$2(nativeDisabled, name$3(component.element));\n const nativeIsDisabled = component => has$1(component.element, 'disabled');\n const nativeDisable = component => {\n set$9(component.element, 'disabled', 'disabled');\n };\n const nativeEnable = component => {\n remove$7(component.element, 'disabled');\n };\n const ariaIsDisabled = component => get$f(component.element, 'aria-disabled') === 'true';\n const ariaDisable = component => {\n set$9(component.element, 'aria-disabled', 'true');\n };\n const ariaEnable = component => {\n set$9(component.element, 'aria-disabled', 'false');\n };\n const disable = (component, disableConfig, _disableState) => {\n disableConfig.disableClass.each(disableClass => {\n add$2(component.element, disableClass);\n });\n const f = hasNative(component, disableConfig) ? nativeDisable : ariaDisable;\n f(component);\n disableConfig.onDisabled(component);\n };\n const enable = (component, disableConfig, _disableState) => {\n disableConfig.disableClass.each(disableClass => {\n remove$2(component.element, disableClass);\n });\n const f = hasNative(component, disableConfig) ? nativeEnable : ariaEnable;\n f(component);\n disableConfig.onEnabled(component);\n };\n const isDisabled = (component, disableConfig) => hasNative(component, disableConfig) ? nativeIsDisabled(component) : ariaIsDisabled(component);\n const set$4 = (component, disableConfig, disableState, disabled) => {\n const f = disabled ? disable : enable;\n f(component, disableConfig);\n };\n\n var DisableApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n enable: enable,\n disable: disable,\n isDisabled: isDisabled,\n onLoad: onLoad$1,\n set: set$4\n });\n\n const exhibit$5 = (base, disableConfig) => nu$7({ classes: disableConfig.disabled() ? disableConfig.disableClass.toArray() : [] });\n const events$e = (disableConfig, disableState) => derive$2([\n abort(execute$5(), (component, _simulatedEvent) => isDisabled(component, disableConfig)),\n loadEvent(disableConfig, disableState, onLoad$1)\n ]);\n\n var ActiveDisable = /*#__PURE__*/Object.freeze({\n __proto__: null,\n exhibit: exhibit$5,\n events: events$e\n });\n\n var DisableSchema = [\n defaultedFunction('disabled', never),\n defaulted('useNative', true),\n option$3('disableClass'),\n onHandler('onDisabled'),\n onHandler('onEnabled')\n ];\n\n const Disabling = create$4({\n fields: DisableSchema,\n name: 'disabling',\n active: ActiveDisable,\n apis: DisableApis\n });\n\n const dehighlightAllExcept = (component, hConfig, hState, skip) => {\n const highlighted = descendants(component.element, '.' + hConfig.highlightClass);\n each$1(highlighted, h => {\n const shouldSkip = exists(skip, skipComp => eq(skipComp.element, h));\n if (!shouldSkip) {\n remove$2(h, hConfig.highlightClass);\n component.getSystem().getByDom(h).each(target => {\n hConfig.onDehighlight(component, target);\n emit(target, dehighlight$1());\n });\n }\n });\n };\n const dehighlightAll = (component, hConfig, hState) => dehighlightAllExcept(component, hConfig, hState, []);\n const dehighlight = (component, hConfig, hState, target) => {\n if (isHighlighted(component, hConfig, hState, target)) {\n remove$2(target.element, hConfig.highlightClass);\n hConfig.onDehighlight(component, target);\n emit(target, dehighlight$1());\n }\n };\n const highlight = (component, hConfig, hState, target) => {\n dehighlightAllExcept(component, hConfig, hState, [target]);\n if (!isHighlighted(component, hConfig, hState, target)) {\n add$2(target.element, hConfig.highlightClass);\n hConfig.onHighlight(component, target);\n emit(target, highlight$1());\n }\n };\n const highlightFirst = (component, hConfig, hState) => {\n getFirst(component, hConfig).each(firstComp => {\n highlight(component, hConfig, hState, firstComp);\n });\n };\n const highlightLast = (component, hConfig, hState) => {\n getLast(component, hConfig).each(lastComp => {\n highlight(component, hConfig, hState, lastComp);\n });\n };\n const highlightAt = (component, hConfig, hState, index) => {\n getByIndex(component, hConfig, hState, index).fold(err => {\n throw err;\n }, firstComp => {\n highlight(component, hConfig, hState, firstComp);\n });\n };\n const highlightBy = (component, hConfig, hState, predicate) => {\n const candidates = getCandidates(component, hConfig);\n const targetComp = find$5(candidates, predicate);\n targetComp.each(c => {\n highlight(component, hConfig, hState, c);\n });\n };\n const isHighlighted = (component, hConfig, hState, queryTarget) => has(queryTarget.element, hConfig.highlightClass);\n const getHighlighted = (component, hConfig, _hState) => descendant(component.element, '.' + hConfig.highlightClass).bind(e => component.getSystem().getByDom(e).toOptional());\n const getByIndex = (component, hConfig, hState, index) => {\n const items = descendants(component.element, '.' + hConfig.itemClass);\n return Optional.from(items[index]).fold(() => Result.error(new Error('No element found with index ' + index)), component.getSystem().getByDom);\n };\n const getFirst = (component, hConfig, _hState) => descendant(component.element, '.' + hConfig.itemClass).bind(e => component.getSystem().getByDom(e).toOptional());\n const getLast = (component, hConfig, _hState) => {\n const items = descendants(component.element, '.' + hConfig.itemClass);\n const last = items.length > 0 ? Optional.some(items[items.length - 1]) : Optional.none();\n return last.bind(c => component.getSystem().getByDom(c).toOptional());\n };\n const getDelta$2 = (component, hConfig, hState, delta) => {\n const items = descendants(component.element, '.' + hConfig.itemClass);\n const current = findIndex$1(items, item => has(item, hConfig.highlightClass));\n return current.bind(selected => {\n const dest = cycleBy(selected, delta, 0, items.length - 1);\n return component.getSystem().getByDom(items[dest]).toOptional();\n });\n };\n const getPrevious = (component, hConfig, hState) => getDelta$2(component, hConfig, hState, -1);\n const getNext = (component, hConfig, hState) => getDelta$2(component, hConfig, hState, +1);\n const getCandidates = (component, hConfig, _hState) => {\n const items = descendants(component.element, '.' + hConfig.itemClass);\n return cat(map$2(items, i => component.getSystem().getByDom(i).toOptional()));\n };\n\n var HighlightApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n dehighlightAll: dehighlightAll,\n dehighlight: dehighlight,\n highlight: highlight,\n highlightFirst: highlightFirst,\n highlightLast: highlightLast,\n highlightAt: highlightAt,\n highlightBy: highlightBy,\n isHighlighted: isHighlighted,\n getHighlighted: getHighlighted,\n getFirst: getFirst,\n getLast: getLast,\n getPrevious: getPrevious,\n getNext: getNext,\n getCandidates: getCandidates\n });\n\n var HighlightSchema = [\n required$1('highlightClass'),\n required$1('itemClass'),\n onHandler('onHighlight'),\n onHandler('onDehighlight')\n ];\n\n const Highlighting = create$4({\n fields: HighlightSchema,\n name: 'highlighting',\n apis: HighlightApis\n });\n\n const BACKSPACE = [8];\n const TAB = [9];\n const ENTER = [13];\n const ESCAPE = [27];\n const SPACE = [32];\n const LEFT = [37];\n const UP = [38];\n const RIGHT = [39];\n const DOWN = [40];\n\n const cyclePrev = (values, index, predicate) => {\n const before = reverse(values.slice(0, index));\n const after = reverse(values.slice(index + 1));\n return find$5(before.concat(after), predicate);\n };\n const tryPrev = (values, index, predicate) => {\n const before = reverse(values.slice(0, index));\n return find$5(before, predicate);\n };\n const cycleNext = (values, index, predicate) => {\n const before = values.slice(0, index);\n const after = values.slice(index + 1);\n return find$5(after.concat(before), predicate);\n };\n const tryNext = (values, index, predicate) => {\n const after = values.slice(index + 1);\n return find$5(after, predicate);\n };\n\n const inSet = keys => event => {\n const raw = event.raw;\n return contains$2(keys, raw.which);\n };\n const and = preds => event => forall(preds, pred => pred(event));\n const isShift = event => {\n const raw = event.raw;\n return raw.shiftKey === true;\n };\n const isControl = event => {\n const raw = event.raw;\n return raw.ctrlKey === true;\n };\n const isNotShift = not(isShift);\n\n const rule = (matches, action) => ({\n matches,\n classification: action\n });\n const choose = (transitions, event) => {\n const transition = find$5(transitions, t => t.matches(event));\n return transition.map(t => t.classification);\n };\n\n const reportFocusShifting = (component, prevFocus, newFocus) => {\n const noChange = prevFocus.exists(p => newFocus.exists(n => eq(n, p)));\n if (!noChange) {\n emitWith(component, focusShifted(), {\n prevFocus,\n newFocus\n });\n }\n };\n const dom$2 = () => {\n const get = component => search(component.element);\n const set = (component, focusee) => {\n const prevFocus = get(component);\n component.getSystem().triggerFocus(focusee, component.element);\n const newFocus = get(component);\n reportFocusShifting(component, prevFocus, newFocus);\n };\n return {\n get,\n set\n };\n };\n const highlights = () => {\n const get = component => Highlighting.getHighlighted(component).map(item => item.element);\n const set = (component, element) => {\n const prevFocus = get(component);\n component.getSystem().getByDom(element).fold(noop, item => {\n Highlighting.highlight(component, item);\n });\n const newFocus = get(component);\n reportFocusShifting(component, prevFocus, newFocus);\n };\n return {\n get,\n set\n };\n };\n\n var FocusInsideModes;\n (function (FocusInsideModes) {\n FocusInsideModes['OnFocusMode'] = 'onFocus';\n FocusInsideModes['OnEnterOrSpaceMode'] = 'onEnterOrSpace';\n FocusInsideModes['OnApiMode'] = 'onApi';\n }(FocusInsideModes || (FocusInsideModes = {})));\n\n const typical = (infoSchema, stateInit, getKeydownRules, getKeyupRules, optFocusIn) => {\n const schema = () => infoSchema.concat([\n defaulted('focusManager', dom$2()),\n defaultedOf('focusInside', 'onFocus', valueOf(val => contains$2([\n 'onFocus',\n 'onEnterOrSpace',\n 'onApi'\n ], val) ? Result.value(val) : Result.error('Invalid value for focusInside'))),\n output$1('handler', me),\n output$1('state', stateInit),\n output$1('sendFocusIn', optFocusIn)\n ]);\n const processKey = (component, simulatedEvent, getRules, keyingConfig, keyingState) => {\n const rules = getRules(component, simulatedEvent, keyingConfig, keyingState);\n return choose(rules, simulatedEvent.event).bind(rule => rule(component, simulatedEvent, keyingConfig, keyingState));\n };\n const toEvents = (keyingConfig, keyingState) => {\n const onFocusHandler = keyingConfig.focusInside !== FocusInsideModes.OnFocusMode ? Optional.none() : optFocusIn(keyingConfig).map(focusIn => run$1(focus$4(), (component, simulatedEvent) => {\n focusIn(component, keyingConfig, keyingState);\n simulatedEvent.stop();\n }));\n const tryGoInsideComponent = (component, simulatedEvent) => {\n const isEnterOrSpace = inSet(SPACE.concat(ENTER))(simulatedEvent.event);\n if (keyingConfig.focusInside === FocusInsideModes.OnEnterOrSpaceMode && isEnterOrSpace && isSource(component, simulatedEvent)) {\n optFocusIn(keyingConfig).each(focusIn => {\n focusIn(component, keyingConfig, keyingState);\n simulatedEvent.stop();\n });\n }\n };\n const keyboardEvents = [\n run$1(keydown(), (component, simulatedEvent) => {\n processKey(component, simulatedEvent, getKeydownRules, keyingConfig, keyingState).fold(() => {\n tryGoInsideComponent(component, simulatedEvent);\n }, _ => {\n simulatedEvent.stop();\n });\n }),\n run$1(keyup(), (component, simulatedEvent) => {\n processKey(component, simulatedEvent, getKeyupRules, keyingConfig, keyingState).each(_ => {\n simulatedEvent.stop();\n });\n })\n ];\n return derive$2(onFocusHandler.toArray().concat(keyboardEvents));\n };\n const me = {\n schema,\n processKey,\n toEvents\n };\n return me;\n };\n\n const create$2 = cyclicField => {\n const schema = [\n option$3('onEscape'),\n option$3('onEnter'),\n defaulted('selector', '[data-alloy-tabstop=\"true\"]:not(:disabled)'),\n defaulted('firstTabstop', 0),\n defaulted('useTabstopAt', always),\n option$3('visibilitySelector')\n ].concat([cyclicField]);\n const isVisible = (tabbingConfig, element) => {\n const target = tabbingConfig.visibilitySelector.bind(sel => closest$1(element, sel)).getOr(element);\n return get$d(target) > 0;\n };\n const findInitial = (component, tabbingConfig) => {\n const tabstops = descendants(component.element, tabbingConfig.selector);\n const visibles = filter$2(tabstops, elem => isVisible(tabbingConfig, elem));\n return Optional.from(visibles[tabbingConfig.firstTabstop]);\n };\n const findCurrent = (component, tabbingConfig) => tabbingConfig.focusManager.get(component).bind(elem => closest$1(elem, tabbingConfig.selector));\n const isTabstop = (tabbingConfig, element) => isVisible(tabbingConfig, element) && tabbingConfig.useTabstopAt(element);\n const focusIn = (component, tabbingConfig, _tabbingState) => {\n findInitial(component, tabbingConfig).each(target => {\n tabbingConfig.focusManager.set(component, target);\n });\n };\n const goFromTabstop = (component, tabstops, stopIndex, tabbingConfig, cycle) => cycle(tabstops, stopIndex, elem => isTabstop(tabbingConfig, elem)).fold(() => tabbingConfig.cyclic ? Optional.some(true) : Optional.none(), target => {\n tabbingConfig.focusManager.set(component, target);\n return Optional.some(true);\n });\n const go = (component, _simulatedEvent, tabbingConfig, cycle) => {\n const tabstops = descendants(component.element, tabbingConfig.selector);\n return findCurrent(component, tabbingConfig).bind(tabstop => {\n const optStopIndex = findIndex$1(tabstops, curry(eq, tabstop));\n return optStopIndex.bind(stopIndex => goFromTabstop(component, tabstops, stopIndex, tabbingConfig, cycle));\n });\n };\n const goBackwards = (component, simulatedEvent, tabbingConfig) => {\n const navigate = tabbingConfig.cyclic ? cyclePrev : tryPrev;\n return go(component, simulatedEvent, tabbingConfig, navigate);\n };\n const goForwards = (component, simulatedEvent, tabbingConfig) => {\n const navigate = tabbingConfig.cyclic ? cycleNext : tryNext;\n return go(component, simulatedEvent, tabbingConfig, navigate);\n };\n const execute = (component, simulatedEvent, tabbingConfig) => tabbingConfig.onEnter.bind(f => f(component, simulatedEvent));\n const exit = (component, simulatedEvent, tabbingConfig) => tabbingConfig.onEscape.bind(f => f(component, simulatedEvent));\n const getKeydownRules = constant$1([\n rule(and([\n isShift,\n inSet(TAB)\n ]), goBackwards),\n rule(inSet(TAB), goForwards),\n rule(and([\n isNotShift,\n inSet(ENTER)\n ]), execute)\n ]);\n const getKeyupRules = constant$1([rule(inSet(ESCAPE), exit)]);\n return typical(schema, NoState.init, getKeydownRules, getKeyupRules, () => Optional.some(focusIn));\n };\n\n var AcyclicType = create$2(customField('cyclic', never));\n\n var CyclicType = create$2(customField('cyclic', always));\n\n const doDefaultExecute = (component, _simulatedEvent, focused) => {\n dispatch(component, focused, execute$5());\n return Optional.some(true);\n };\n const defaultExecute = (component, simulatedEvent, focused) => {\n const isComplex = inside(focused) && inSet(SPACE)(simulatedEvent.event);\n return isComplex ? Optional.none() : doDefaultExecute(component, simulatedEvent, focused);\n };\n const stopEventForFirefox = (_component, _simulatedEvent) => Optional.some(true);\n\n const schema$v = [\n defaulted('execute', defaultExecute),\n defaulted('useSpace', false),\n defaulted('useEnter', true),\n defaulted('useControlEnter', false),\n defaulted('useDown', false)\n ];\n const execute$4 = (component, simulatedEvent, executeConfig) => executeConfig.execute(component, simulatedEvent, component.element);\n const getKeydownRules$5 = (component, _simulatedEvent, executeConfig, _executeState) => {\n const spaceExec = executeConfig.useSpace && !inside(component.element) ? SPACE : [];\n const enterExec = executeConfig.useEnter ? ENTER : [];\n const downExec = executeConfig.useDown ? DOWN : [];\n const execKeys = spaceExec.concat(enterExec).concat(downExec);\n return [rule(inSet(execKeys), execute$4)].concat(executeConfig.useControlEnter ? [rule(and([\n isControl,\n inSet(ENTER)\n ]), execute$4)] : []);\n };\n const getKeyupRules$5 = (component, _simulatedEvent, executeConfig, _executeState) => executeConfig.useSpace && !inside(component.element) ? [rule(inSet(SPACE), stopEventForFirefox)] : [];\n var ExecutionType = typical(schema$v, NoState.init, getKeydownRules$5, getKeyupRules$5, () => Optional.none());\n\n const flatgrid$1 = () => {\n const dimensions = value$2();\n const setGridSize = (numRows, numColumns) => {\n dimensions.set({\n numRows,\n numColumns\n });\n };\n const getNumRows = () => dimensions.get().map(d => d.numRows);\n const getNumColumns = () => dimensions.get().map(d => d.numColumns);\n return nu$8({\n readState: () => dimensions.get().map(d => ({\n numRows: String(d.numRows),\n numColumns: String(d.numColumns)\n })).getOr({\n numRows: '?',\n numColumns: '?'\n }),\n setGridSize,\n getNumRows,\n getNumColumns\n });\n };\n const init$d = spec => spec.state(spec);\n\n var KeyingState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n flatgrid: flatgrid$1,\n init: init$d\n });\n\n const useH = movement => (component, simulatedEvent, config, state) => {\n const move = movement(component.element);\n return use(move, component, simulatedEvent, config, state);\n };\n const west$1 = (moveLeft, moveRight) => {\n const movement = onDirection(moveLeft, moveRight);\n return useH(movement);\n };\n const east$1 = (moveLeft, moveRight) => {\n const movement = onDirection(moveRight, moveLeft);\n return useH(movement);\n };\n const useV = move => (component, simulatedEvent, config, state) => use(move, component, simulatedEvent, config, state);\n const use = (move, component, simulatedEvent, config, state) => {\n const outcome = config.focusManager.get(component).bind(focused => move(component.element, focused, config, state));\n return outcome.map(newFocus => {\n config.focusManager.set(component, newFocus);\n return true;\n });\n };\n const north$1 = useV;\n const south$1 = useV;\n const move$1 = useV;\n\n const isHidden$1 = dom => dom.offsetWidth <= 0 && dom.offsetHeight <= 0;\n const isVisible = element => !isHidden$1(element.dom);\n\n const locate = (candidates, predicate) => findIndex$1(candidates, predicate).map(index => ({\n index,\n candidates\n }));\n\n const locateVisible = (container, current, selector) => {\n const predicate = x => eq(x, current);\n const candidates = descendants(container, selector);\n const visible = filter$2(candidates, isVisible);\n return locate(visible, predicate);\n };\n const findIndex = (elements, target) => findIndex$1(elements, elem => eq(target, elem));\n\n const withGrid = (values, index, numCols, f) => {\n const oldRow = Math.floor(index / numCols);\n const oldColumn = index % numCols;\n return f(oldRow, oldColumn).bind(address => {\n const newIndex = address.row * numCols + address.column;\n return newIndex >= 0 && newIndex < values.length ? Optional.some(values[newIndex]) : Optional.none();\n });\n };\n const cycleHorizontal$1 = (values, index, numRows, numCols, delta) => withGrid(values, index, numCols, (oldRow, oldColumn) => {\n const onLastRow = oldRow === numRows - 1;\n const colsInRow = onLastRow ? values.length - oldRow * numCols : numCols;\n const newColumn = cycleBy(oldColumn, delta, 0, colsInRow - 1);\n return Optional.some({\n row: oldRow,\n column: newColumn\n });\n });\n const cycleVertical$1 = (values, index, numRows, numCols, delta) => withGrid(values, index, numCols, (oldRow, oldColumn) => {\n const newRow = cycleBy(oldRow, delta, 0, numRows - 1);\n const onLastRow = newRow === numRows - 1;\n const colsInRow = onLastRow ? values.length - newRow * numCols : numCols;\n const newCol = clamp(oldColumn, 0, colsInRow - 1);\n return Optional.some({\n row: newRow,\n column: newCol\n });\n });\n const cycleRight$1 = (values, index, numRows, numCols) => cycleHorizontal$1(values, index, numRows, numCols, +1);\n const cycleLeft$1 = (values, index, numRows, numCols) => cycleHorizontal$1(values, index, numRows, numCols, -1);\n const cycleUp$1 = (values, index, numRows, numCols) => cycleVertical$1(values, index, numRows, numCols, -1);\n const cycleDown$1 = (values, index, numRows, numCols) => cycleVertical$1(values, index, numRows, numCols, +1);\n\n const schema$u = [\n required$1('selector'),\n defaulted('execute', defaultExecute),\n onKeyboardHandler('onEscape'),\n defaulted('captureTab', false),\n initSize()\n ];\n const focusIn$3 = (component, gridConfig, _gridState) => {\n descendant(component.element, gridConfig.selector).each(first => {\n gridConfig.focusManager.set(component, first);\n });\n };\n const findCurrent$1 = (component, gridConfig) => gridConfig.focusManager.get(component).bind(elem => closest$1(elem, gridConfig.selector));\n const execute$3 = (component, simulatedEvent, gridConfig, _gridState) => findCurrent$1(component, gridConfig).bind(focused => gridConfig.execute(component, simulatedEvent, focused));\n const doMove$2 = cycle => (element, focused, gridConfig, gridState) => locateVisible(element, focused, gridConfig.selector).bind(identified => cycle(identified.candidates, identified.index, gridState.getNumRows().getOr(gridConfig.initSize.numRows), gridState.getNumColumns().getOr(gridConfig.initSize.numColumns)));\n const handleTab = (_component, _simulatedEvent, gridConfig) => gridConfig.captureTab ? Optional.some(true) : Optional.none();\n const doEscape$1 = (component, simulatedEvent, gridConfig) => gridConfig.onEscape(component, simulatedEvent);\n const moveLeft$3 = doMove$2(cycleLeft$1);\n const moveRight$3 = doMove$2(cycleRight$1);\n const moveNorth$1 = doMove$2(cycleUp$1);\n const moveSouth$1 = doMove$2(cycleDown$1);\n const getKeydownRules$4 = constant$1([\n rule(inSet(LEFT), west$1(moveLeft$3, moveRight$3)),\n rule(inSet(RIGHT), east$1(moveLeft$3, moveRight$3)),\n rule(inSet(UP), north$1(moveNorth$1)),\n rule(inSet(DOWN), south$1(moveSouth$1)),\n rule(and([\n isShift,\n inSet(TAB)\n ]), handleTab),\n rule(and([\n isNotShift,\n inSet(TAB)\n ]), handleTab),\n rule(inSet(SPACE.concat(ENTER)), execute$3)\n ]);\n const getKeyupRules$4 = constant$1([\n rule(inSet(ESCAPE), doEscape$1),\n rule(inSet(SPACE), stopEventForFirefox)\n ]);\n var FlatgridType = typical(schema$u, flatgrid$1, getKeydownRules$4, getKeyupRules$4, () => Optional.some(focusIn$3));\n\n const horizontal = (container, selector, current, delta) => {\n const isDisabledButton = candidate => name$3(candidate) === 'button' && get$f(candidate, 'disabled') === 'disabled';\n const tryCycle = (initial, index, candidates) => {\n const newIndex = cycleBy(index, delta, 0, candidates.length - 1);\n if (newIndex === initial) {\n return Optional.none();\n } else {\n return isDisabledButton(candidates[newIndex]) ? tryCycle(initial, newIndex, candidates) : Optional.from(candidates[newIndex]);\n }\n };\n return locateVisible(container, current, selector).bind(identified => {\n const index = identified.index;\n const candidates = identified.candidates;\n return tryCycle(index, index, candidates);\n });\n };\n\n const schema$t = [\n required$1('selector'),\n defaulted('getInitial', Optional.none),\n defaulted('execute', defaultExecute),\n onKeyboardHandler('onEscape'),\n defaulted('executeOnMove', false),\n defaulted('allowVertical', true)\n ];\n const findCurrent = (component, flowConfig) => flowConfig.focusManager.get(component).bind(elem => closest$1(elem, flowConfig.selector));\n const execute$2 = (component, simulatedEvent, flowConfig) => findCurrent(component, flowConfig).bind(focused => flowConfig.execute(component, simulatedEvent, focused));\n const focusIn$2 = (component, flowConfig, _state) => {\n flowConfig.getInitial(component).orThunk(() => descendant(component.element, flowConfig.selector)).each(first => {\n flowConfig.focusManager.set(component, first);\n });\n };\n const moveLeft$2 = (element, focused, info) => horizontal(element, info.selector, focused, -1);\n const moveRight$2 = (element, focused, info) => horizontal(element, info.selector, focused, +1);\n const doMove$1 = movement => (component, simulatedEvent, flowConfig, flowState) => movement(component, simulatedEvent, flowConfig, flowState).bind(() => flowConfig.executeOnMove ? execute$2(component, simulatedEvent, flowConfig) : Optional.some(true));\n const doEscape = (component, simulatedEvent, flowConfig) => flowConfig.onEscape(component, simulatedEvent);\n const getKeydownRules$3 = (_component, _se, flowConfig, _flowState) => {\n const westMovers = LEFT.concat(flowConfig.allowVertical ? UP : []);\n const eastMovers = RIGHT.concat(flowConfig.allowVertical ? DOWN : []);\n return [\n rule(inSet(westMovers), doMove$1(west$1(moveLeft$2, moveRight$2))),\n rule(inSet(eastMovers), doMove$1(east$1(moveLeft$2, moveRight$2))),\n rule(inSet(ENTER), execute$2),\n rule(inSet(SPACE), execute$2)\n ];\n };\n const getKeyupRules$3 = constant$1([\n rule(inSet(SPACE), stopEventForFirefox),\n rule(inSet(ESCAPE), doEscape)\n ]);\n var FlowType = typical(schema$t, NoState.init, getKeydownRules$3, getKeyupRules$3, () => Optional.some(focusIn$2));\n\n const toCell = (matrix, rowIndex, columnIndex) => Optional.from(matrix[rowIndex]).bind(row => Optional.from(row[columnIndex]).map(cell => ({\n rowIndex,\n columnIndex,\n cell\n })));\n const cycleHorizontal = (matrix, rowIndex, startCol, deltaCol) => {\n const row = matrix[rowIndex];\n const colsInRow = row.length;\n const newColIndex = cycleBy(startCol, deltaCol, 0, colsInRow - 1);\n return toCell(matrix, rowIndex, newColIndex);\n };\n const cycleVertical = (matrix, colIndex, startRow, deltaRow) => {\n const nextRowIndex = cycleBy(startRow, deltaRow, 0, matrix.length - 1);\n const colsInNextRow = matrix[nextRowIndex].length;\n const nextColIndex = clamp(colIndex, 0, colsInNextRow - 1);\n return toCell(matrix, nextRowIndex, nextColIndex);\n };\n const moveHorizontal = (matrix, rowIndex, startCol, deltaCol) => {\n const row = matrix[rowIndex];\n const colsInRow = row.length;\n const newColIndex = clamp(startCol + deltaCol, 0, colsInRow - 1);\n return toCell(matrix, rowIndex, newColIndex);\n };\n const moveVertical = (matrix, colIndex, startRow, deltaRow) => {\n const nextRowIndex = clamp(startRow + deltaRow, 0, matrix.length - 1);\n const colsInNextRow = matrix[nextRowIndex].length;\n const nextColIndex = clamp(colIndex, 0, colsInNextRow - 1);\n return toCell(matrix, nextRowIndex, nextColIndex);\n };\n const cycleRight = (matrix, startRow, startCol) => cycleHorizontal(matrix, startRow, startCol, +1);\n const cycleLeft = (matrix, startRow, startCol) => cycleHorizontal(matrix, startRow, startCol, -1);\n const cycleUp = (matrix, startRow, startCol) => cycleVertical(matrix, startCol, startRow, -1);\n const cycleDown = (matrix, startRow, startCol) => cycleVertical(matrix, startCol, startRow, +1);\n const moveLeft$1 = (matrix, startRow, startCol) => moveHorizontal(matrix, startRow, startCol, -1);\n const moveRight$1 = (matrix, startRow, startCol) => moveHorizontal(matrix, startRow, startCol, +1);\n const moveUp$1 = (matrix, startRow, startCol) => moveVertical(matrix, startCol, startRow, -1);\n const moveDown$1 = (matrix, startRow, startCol) => moveVertical(matrix, startCol, startRow, +1);\n\n const schema$s = [\n requiredObjOf('selectors', [\n required$1('row'),\n required$1('cell')\n ]),\n defaulted('cycles', true),\n defaulted('previousSelector', Optional.none),\n defaulted('execute', defaultExecute)\n ];\n const focusIn$1 = (component, matrixConfig, _state) => {\n const focused = matrixConfig.previousSelector(component).orThunk(() => {\n const selectors = matrixConfig.selectors;\n return descendant(component.element, selectors.cell);\n });\n focused.each(cell => {\n matrixConfig.focusManager.set(component, cell);\n });\n };\n const execute$1 = (component, simulatedEvent, matrixConfig) => search(component.element).bind(focused => matrixConfig.execute(component, simulatedEvent, focused));\n const toMatrix = (rows, matrixConfig) => map$2(rows, row => descendants(row, matrixConfig.selectors.cell));\n const doMove = (ifCycle, ifMove) => (element, focused, matrixConfig) => {\n const move = matrixConfig.cycles ? ifCycle : ifMove;\n return closest$1(focused, matrixConfig.selectors.row).bind(inRow => {\n const cellsInRow = descendants(inRow, matrixConfig.selectors.cell);\n return findIndex(cellsInRow, focused).bind(colIndex => {\n const allRows = descendants(element, matrixConfig.selectors.row);\n return findIndex(allRows, inRow).bind(rowIndex => {\n const matrix = toMatrix(allRows, matrixConfig);\n return move(matrix, rowIndex, colIndex).map(next => next.cell);\n });\n });\n });\n };\n const moveLeft = doMove(cycleLeft, moveLeft$1);\n const moveRight = doMove(cycleRight, moveRight$1);\n const moveNorth = doMove(cycleUp, moveUp$1);\n const moveSouth = doMove(cycleDown, moveDown$1);\n const getKeydownRules$2 = constant$1([\n rule(inSet(LEFT), west$1(moveLeft, moveRight)),\n rule(inSet(RIGHT), east$1(moveLeft, moveRight)),\n rule(inSet(UP), north$1(moveNorth)),\n rule(inSet(DOWN), south$1(moveSouth)),\n rule(inSet(SPACE.concat(ENTER)), execute$1)\n ]);\n const getKeyupRules$2 = constant$1([rule(inSet(SPACE), stopEventForFirefox)]);\n var MatrixType = typical(schema$s, NoState.init, getKeydownRules$2, getKeyupRules$2, () => Optional.some(focusIn$1));\n\n const schema$r = [\n required$1('selector'),\n defaulted('execute', defaultExecute),\n defaulted('moveOnTab', false)\n ];\n const execute = (component, simulatedEvent, menuConfig) => menuConfig.focusManager.get(component).bind(focused => menuConfig.execute(component, simulatedEvent, focused));\n const focusIn = (component, menuConfig, _state) => {\n descendant(component.element, menuConfig.selector).each(first => {\n menuConfig.focusManager.set(component, first);\n });\n };\n const moveUp = (element, focused, info) => horizontal(element, info.selector, focused, -1);\n const moveDown = (element, focused, info) => horizontal(element, info.selector, focused, +1);\n const fireShiftTab = (component, simulatedEvent, menuConfig, menuState) => menuConfig.moveOnTab ? move$1(moveUp)(component, simulatedEvent, menuConfig, menuState) : Optional.none();\n const fireTab = (component, simulatedEvent, menuConfig, menuState) => menuConfig.moveOnTab ? move$1(moveDown)(component, simulatedEvent, menuConfig, menuState) : Optional.none();\n const getKeydownRules$1 = constant$1([\n rule(inSet(UP), move$1(moveUp)),\n rule(inSet(DOWN), move$1(moveDown)),\n rule(and([\n isShift,\n inSet(TAB)\n ]), fireShiftTab),\n rule(and([\n isNotShift,\n inSet(TAB)\n ]), fireTab),\n rule(inSet(ENTER), execute),\n rule(inSet(SPACE), execute)\n ]);\n const getKeyupRules$1 = constant$1([rule(inSet(SPACE), stopEventForFirefox)]);\n var MenuType = typical(schema$r, NoState.init, getKeydownRules$1, getKeyupRules$1, () => Optional.some(focusIn));\n\n const schema$q = [\n onKeyboardHandler('onSpace'),\n onKeyboardHandler('onEnter'),\n onKeyboardHandler('onShiftEnter'),\n onKeyboardHandler('onLeft'),\n onKeyboardHandler('onRight'),\n onKeyboardHandler('onTab'),\n onKeyboardHandler('onShiftTab'),\n onKeyboardHandler('onUp'),\n onKeyboardHandler('onDown'),\n onKeyboardHandler('onEscape'),\n defaulted('stopSpaceKeyup', false),\n option$3('focusIn')\n ];\n const getKeydownRules = (component, simulatedEvent, specialInfo) => [\n rule(inSet(SPACE), specialInfo.onSpace),\n rule(and([\n isNotShift,\n inSet(ENTER)\n ]), specialInfo.onEnter),\n rule(and([\n isShift,\n inSet(ENTER)\n ]), specialInfo.onShiftEnter),\n rule(and([\n isShift,\n inSet(TAB)\n ]), specialInfo.onShiftTab),\n rule(and([\n isNotShift,\n inSet(TAB)\n ]), specialInfo.onTab),\n rule(inSet(UP), specialInfo.onUp),\n rule(inSet(DOWN), specialInfo.onDown),\n rule(inSet(LEFT), specialInfo.onLeft),\n rule(inSet(RIGHT), specialInfo.onRight),\n rule(inSet(SPACE), specialInfo.onSpace)\n ];\n const getKeyupRules = (component, simulatedEvent, specialInfo) => [\n ...specialInfo.stopSpaceKeyup ? [rule(inSet(SPACE), stopEventForFirefox)] : [],\n rule(inSet(ESCAPE), specialInfo.onEscape)\n ];\n var SpecialType = typical(schema$q, NoState.init, getKeydownRules, getKeyupRules, specialInfo => specialInfo.focusIn);\n\n const acyclic = AcyclicType.schema();\n const cyclic = CyclicType.schema();\n const flow = FlowType.schema();\n const flatgrid = FlatgridType.schema();\n const matrix = MatrixType.schema();\n const execution = ExecutionType.schema();\n const menu = MenuType.schema();\n const special = SpecialType.schema();\n\n var KeyboardBranches = /*#__PURE__*/Object.freeze({\n __proto__: null,\n acyclic: acyclic,\n cyclic: cyclic,\n flow: flow,\n flatgrid: flatgrid,\n matrix: matrix,\n execution: execution,\n menu: menu,\n special: special\n });\n\n const isFlatgridState = keyState => hasNonNullableKey(keyState, 'setGridSize');\n const Keying = createModes({\n branchKey: 'mode',\n branches: KeyboardBranches,\n name: 'keying',\n active: {\n events: (keyingConfig, keyingState) => {\n const handler = keyingConfig.handler;\n return handler.toEvents(keyingConfig, keyingState);\n }\n },\n apis: {\n focusIn: (component, keyConfig, keyState) => {\n keyConfig.sendFocusIn(keyConfig).fold(() => {\n component.getSystem().triggerFocus(component.element, component.element);\n }, sendFocusIn => {\n sendFocusIn(component, keyConfig, keyState);\n });\n },\n setGridSize: (component, keyConfig, keyState, numRows, numColumns) => {\n if (!isFlatgridState(keyState)) {\n console.error('Layout does not support setGridSize');\n } else {\n keyState.setGridSize(numRows, numColumns);\n }\n }\n },\n state: KeyingState\n });\n\n const withoutReuse = (parent, data) => {\n preserve$1(() => {\n replaceChildren(parent, data, () => map$2(data, parent.getSystem().build));\n }, parent.element);\n };\n const withReuse = (parent, data) => {\n preserve$1(() => {\n virtualReplaceChildren(parent, data, () => {\n return patchSpecChildren(parent.element, data, parent.getSystem().buildOrPatch);\n });\n }, parent.element);\n };\n\n const virtualReplace = (component, replacee, replaceeIndex, childSpec) => {\n virtualDetach(replacee);\n const child = patchSpecChild(component.element, replaceeIndex, childSpec, component.getSystem().buildOrPatch);\n virtualAttach(component, child);\n component.syncComponents();\n };\n const insert = (component, insertion, childSpec) => {\n const child = component.getSystem().build(childSpec);\n attachWith(component, child, insertion);\n };\n const replace = (component, replacee, replaceeIndex, childSpec) => {\n detach(replacee);\n insert(component, (p, c) => appendAt(p, c, replaceeIndex), childSpec);\n };\n const set$3 = (component, replaceConfig, replaceState, data) => {\n const replacer = replaceConfig.reuseDom ? withReuse : withoutReuse;\n return replacer(component, data);\n };\n const append = (component, replaceConfig, replaceState, appendee) => {\n insert(component, append$2, appendee);\n };\n const prepend = (component, replaceConfig, replaceState, prependee) => {\n insert(component, prepend$1, prependee);\n };\n const remove = (component, replaceConfig, replaceState, removee) => {\n const children = contents(component);\n const foundChild = find$5(children, child => eq(removee.element, child.element));\n foundChild.each(detach);\n };\n const contents = (component, _replaceConfig) => component.components();\n const replaceAt = (component, replaceConfig, replaceState, replaceeIndex, replacer) => {\n const children = contents(component);\n return Optional.from(children[replaceeIndex]).map(replacee => {\n replacer.fold(() => detach(replacee), r => {\n const replacer = replaceConfig.reuseDom ? virtualReplace : replace;\n replacer(component, replacee, replaceeIndex, r);\n });\n return replacee;\n });\n };\n const replaceBy = (component, replaceConfig, replaceState, replaceePred, replacer) => {\n const children = contents(component);\n return findIndex$1(children, replaceePred).bind(replaceeIndex => replaceAt(component, replaceConfig, replaceState, replaceeIndex, replacer));\n };\n\n var ReplaceApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n append: append,\n prepend: prepend,\n remove: remove,\n replaceAt: replaceAt,\n replaceBy: replaceBy,\n set: set$3,\n contents: contents\n });\n\n const Replacing = create$4({\n fields: [defaultedBoolean('reuseDom', true)],\n name: 'replacing',\n apis: ReplaceApis\n });\n\n const events$d = (name, eventHandlers) => {\n const events = derive$2(eventHandlers);\n return create$4({\n fields: [required$1('enabled')],\n name,\n active: { events: constant$1(events) }\n });\n };\n const config = (name, eventHandlers) => {\n const me = events$d(name, eventHandlers);\n return {\n key: name,\n value: {\n config: {},\n me,\n configAsRaw: constant$1({}),\n initialConfig: {},\n state: NoState\n }\n };\n };\n\n const focus$2 = (component, focusConfig) => {\n if (!focusConfig.ignore) {\n focus$3(component.element);\n focusConfig.onFocus(component);\n }\n };\n const blur = (component, focusConfig) => {\n if (!focusConfig.ignore) {\n blur$1(component.element);\n }\n };\n const isFocused = component => hasFocus(component.element);\n\n var FocusApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n focus: focus$2,\n blur: blur,\n isFocused: isFocused\n });\n\n const exhibit$4 = (base, focusConfig) => {\n const mod = focusConfig.ignore ? {} : { attributes: { tabindex: '-1' } };\n return nu$7(mod);\n };\n const events$c = focusConfig => derive$2([run$1(focus$4(), (component, simulatedEvent) => {\n focus$2(component, focusConfig);\n simulatedEvent.stop();\n })].concat(focusConfig.stopMousedown ? [run$1(mousedown(), (_, simulatedEvent) => {\n simulatedEvent.event.prevent();\n })] : []));\n\n var ActiveFocus = /*#__PURE__*/Object.freeze({\n __proto__: null,\n exhibit: exhibit$4,\n events: events$c\n });\n\n var FocusSchema = [\n onHandler('onFocus'),\n defaulted('stopMousedown', false),\n defaulted('ignore', false)\n ];\n\n const Focusing = create$4({\n fields: FocusSchema,\n name: 'focusing',\n active: ActiveFocus,\n apis: FocusApis\n });\n\n const SetupBehaviourCellState = initialState => {\n const init = () => {\n const cell = Cell(initialState);\n const get = () => cell.get();\n const set = newState => cell.set(newState);\n const clear = () => cell.set(initialState);\n const readState = () => cell.get();\n return {\n get,\n set,\n clear,\n readState\n };\n };\n return { init };\n };\n\n const updateAriaState = (component, toggleConfig, toggleState) => {\n const ariaInfo = toggleConfig.aria;\n ariaInfo.update(component, ariaInfo, toggleState.get());\n };\n const updateClass = (component, toggleConfig, toggleState) => {\n toggleConfig.toggleClass.each(toggleClass => {\n if (toggleState.get()) {\n add$2(component.element, toggleClass);\n } else {\n remove$2(component.element, toggleClass);\n }\n });\n };\n const set$2 = (component, toggleConfig, toggleState, state) => {\n const initialState = toggleState.get();\n toggleState.set(state);\n updateClass(component, toggleConfig, toggleState);\n updateAriaState(component, toggleConfig, toggleState);\n if (initialState !== state) {\n toggleConfig.onToggled(component, state);\n }\n };\n const toggle$2 = (component, toggleConfig, toggleState) => {\n set$2(component, toggleConfig, toggleState, !toggleState.get());\n };\n const on = (component, toggleConfig, toggleState) => {\n set$2(component, toggleConfig, toggleState, true);\n };\n const off = (component, toggleConfig, toggleState) => {\n set$2(component, toggleConfig, toggleState, false);\n };\n const isOn = (component, toggleConfig, toggleState) => toggleState.get();\n const onLoad = (component, toggleConfig, toggleState) => {\n set$2(component, toggleConfig, toggleState, toggleConfig.selected);\n };\n\n var ToggleApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n onLoad: onLoad,\n toggle: toggle$2,\n isOn: isOn,\n on: on,\n off: off,\n set: set$2\n });\n\n const exhibit$3 = () => nu$7({});\n const events$b = (toggleConfig, toggleState) => {\n const execute = executeEvent(toggleConfig, toggleState, toggle$2);\n const load = loadEvent(toggleConfig, toggleState, onLoad);\n return derive$2(flatten([\n toggleConfig.toggleOnExecute ? [execute] : [],\n [load]\n ]));\n };\n\n var ActiveToggle = /*#__PURE__*/Object.freeze({\n __proto__: null,\n exhibit: exhibit$3,\n events: events$b\n });\n\n const updatePressed = (component, ariaInfo, status) => {\n set$9(component.element, 'aria-pressed', status);\n if (ariaInfo.syncWithExpanded) {\n updateExpanded(component, ariaInfo, status);\n }\n };\n const updateSelected = (component, ariaInfo, status) => {\n set$9(component.element, 'aria-selected', status);\n };\n const updateChecked = (component, ariaInfo, status) => {\n set$9(component.element, 'aria-checked', status);\n };\n const updateExpanded = (component, ariaInfo, status) => {\n set$9(component.element, 'aria-expanded', status);\n };\n\n var ToggleSchema = [\n defaulted('selected', false),\n option$3('toggleClass'),\n defaulted('toggleOnExecute', true),\n onHandler('onToggled'),\n defaultedOf('aria', { mode: 'none' }, choose$1('mode', {\n pressed: [\n defaulted('syncWithExpanded', false),\n output$1('update', updatePressed)\n ],\n checked: [output$1('update', updateChecked)],\n expanded: [output$1('update', updateExpanded)],\n selected: [output$1('update', updateSelected)],\n none: [output$1('update', noop)]\n }))\n ];\n\n const Toggling = create$4({\n fields: ToggleSchema,\n name: 'toggling',\n active: ActiveToggle,\n apis: ToggleApis,\n state: SetupBehaviourCellState(false)\n });\n\n const pointerEvents = () => {\n const onClick = (component, simulatedEvent) => {\n simulatedEvent.stop();\n emitExecute(component);\n };\n return [\n run$1(click(), onClick),\n run$1(tap(), onClick),\n cutter(touchstart()),\n cutter(mousedown())\n ];\n };\n const events$a = optAction => {\n const executeHandler = action => runOnExecute$1((component, simulatedEvent) => {\n action(component);\n simulatedEvent.stop();\n });\n return derive$2(flatten([\n optAction.map(executeHandler).toArray(),\n pointerEvents()\n ]));\n };\n\n const hoverEvent = 'alloy.item-hover';\n const focusEvent = 'alloy.item-focus';\n const toggledEvent = 'alloy.item-toggled';\n const onHover = item => {\n if (search(item.element).isNone() || Focusing.isFocused(item)) {\n if (!Focusing.isFocused(item)) {\n Focusing.focus(item);\n }\n emitWith(item, hoverEvent, { item });\n }\n };\n const onFocus$1 = item => {\n emitWith(item, focusEvent, { item });\n };\n const onToggled = (item, state) => {\n emitWith(item, toggledEvent, {\n item,\n state\n });\n };\n const hover = constant$1(hoverEvent);\n const focus$1 = constant$1(focusEvent);\n const toggled = constant$1(toggledEvent);\n\n const getItemRole = detail => detail.toggling.map(toggling => toggling.exclusive ? 'menuitemradio' : 'menuitemcheckbox').getOr('menuitem');\n const getTogglingSpec = tConfig => ({\n aria: { mode: 'checked' },\n ...filter$1(tConfig, (_value, name) => name !== 'exclusive'),\n onToggled: (component, state) => {\n if (isFunction(tConfig.onToggled)) {\n tConfig.onToggled(component, state);\n }\n onToggled(component, state);\n }\n });\n const builder$2 = detail => ({\n dom: detail.dom,\n domModification: {\n ...detail.domModification,\n attributes: {\n 'role': getItemRole(detail),\n ...detail.domModification.attributes,\n 'aria-haspopup': detail.hasSubmenu,\n ...detail.hasSubmenu ? { 'aria-expanded': false } : {}\n }\n },\n behaviours: SketchBehaviours.augment(detail.itemBehaviours, [\n detail.toggling.fold(Toggling.revoke, tConfig => Toggling.config(getTogglingSpec(tConfig))),\n Focusing.config({\n ignore: detail.ignoreFocus,\n stopMousedown: detail.ignoreFocus,\n onFocus: component => {\n onFocus$1(component);\n }\n }),\n Keying.config({ mode: 'execution' }),\n Representing.config({\n store: {\n mode: 'memory',\n initialValue: detail.data\n }\n }),\n config('item-type-events', [\n ...pointerEvents(),\n run$1(mouseover(), onHover),\n run$1(focusItem(), Focusing.focus)\n ])\n ]),\n components: detail.components,\n eventOrder: detail.eventOrder\n });\n const schema$p = [\n required$1('data'),\n required$1('components'),\n required$1('dom'),\n defaulted('hasSubmenu', false),\n option$3('toggling'),\n SketchBehaviours.field('itemBehaviours', [\n Toggling,\n Focusing,\n Keying,\n Representing\n ]),\n defaulted('ignoreFocus', false),\n defaulted('domModification', {}),\n output$1('builder', builder$2),\n defaulted('eventOrder', {})\n ];\n\n const builder$1 = detail => ({\n dom: detail.dom,\n components: detail.components,\n events: derive$2([stopper(focusItem())])\n });\n const schema$o = [\n required$1('dom'),\n required$1('components'),\n output$1('builder', builder$1)\n ];\n\n const owner$2 = constant$1('item-widget');\n const parts$h = constant$1([required({\n name: 'widget',\n overrides: detail => {\n return {\n behaviours: derive$1([Representing.config({\n store: {\n mode: 'manual',\n getValue: _component => {\n return detail.data;\n },\n setValue: noop\n }\n })])\n };\n }\n })]);\n\n const builder = detail => {\n const subs = substitutes(owner$2(), detail, parts$h());\n const components = components$1(owner$2(), detail, subs.internals());\n const focusWidget = component => getPart(component, detail, 'widget').map(widget => {\n Keying.focusIn(widget);\n return widget;\n });\n const onHorizontalArrow = (component, simulatedEvent) => inside(simulatedEvent.event.target) ? Optional.none() : (() => {\n if (detail.autofocus) {\n simulatedEvent.setSource(component.element);\n return Optional.none();\n } else {\n return Optional.none();\n }\n })();\n return {\n dom: detail.dom,\n components,\n domModification: detail.domModification,\n events: derive$2([\n runOnExecute$1((component, simulatedEvent) => {\n focusWidget(component).each(_widget => {\n simulatedEvent.stop();\n });\n }),\n run$1(mouseover(), onHover),\n run$1(focusItem(), (component, _simulatedEvent) => {\n if (detail.autofocus) {\n focusWidget(component);\n } else {\n Focusing.focus(component);\n }\n })\n ]),\n behaviours: SketchBehaviours.augment(detail.widgetBehaviours, [\n Representing.config({\n store: {\n mode: 'memory',\n initialValue: detail.data\n }\n }),\n Focusing.config({\n ignore: detail.ignoreFocus,\n onFocus: component => {\n onFocus$1(component);\n }\n }),\n Keying.config({\n mode: 'special',\n focusIn: detail.autofocus ? component => {\n focusWidget(component);\n } : revoke(),\n onLeft: onHorizontalArrow,\n onRight: onHorizontalArrow,\n onEscape: (component, simulatedEvent) => {\n if (!Focusing.isFocused(component) && !detail.autofocus) {\n Focusing.focus(component);\n return Optional.some(true);\n } else if (detail.autofocus) {\n simulatedEvent.setSource(component.element);\n return Optional.none();\n } else {\n return Optional.none();\n }\n }\n })\n ])\n };\n };\n const schema$n = [\n required$1('uid'),\n required$1('data'),\n required$1('components'),\n required$1('dom'),\n defaulted('autofocus', false),\n defaulted('ignoreFocus', false),\n SketchBehaviours.field('widgetBehaviours', [\n Representing,\n Focusing,\n Keying\n ]),\n defaulted('domModification', {}),\n defaultUidsSchema(parts$h()),\n output$1('builder', builder)\n ];\n\n const itemSchema$2 = choose$1('type', {\n widget: schema$n,\n item: schema$p,\n separator: schema$o\n });\n const configureGrid = (detail, movementInfo) => ({\n mode: 'flatgrid',\n selector: '.' + detail.markers.item,\n initSize: {\n numColumns: movementInfo.initSize.numColumns,\n numRows: movementInfo.initSize.numRows\n },\n focusManager: detail.focusManager\n });\n const configureMatrix = (detail, movementInfo) => ({\n mode: 'matrix',\n selectors: {\n row: movementInfo.rowSelector,\n cell: '.' + detail.markers.item\n },\n previousSelector: movementInfo.previousSelector,\n focusManager: detail.focusManager\n });\n const configureMenu = (detail, movementInfo) => ({\n mode: 'menu',\n selector: '.' + detail.markers.item,\n moveOnTab: movementInfo.moveOnTab,\n focusManager: detail.focusManager\n });\n const parts$g = constant$1([group({\n factory: {\n sketch: spec => {\n const itemInfo = asRawOrDie$1('menu.spec item', itemSchema$2, spec);\n return itemInfo.builder(itemInfo);\n }\n },\n name: 'items',\n unit: 'item',\n defaults: (detail, u) => {\n return has$2(u, 'uid') ? u : {\n ...u,\n uid: generate$5('item')\n };\n },\n overrides: (detail, u) => {\n return {\n type: u.type,\n ignoreFocus: detail.fakeFocus,\n domModification: { classes: [detail.markers.item] }\n };\n }\n })]);\n const schema$m = constant$1([\n required$1('value'),\n required$1('items'),\n required$1('dom'),\n required$1('components'),\n defaulted('eventOrder', {}),\n field('menuBehaviours', [\n Highlighting,\n Representing,\n Composing,\n Keying\n ]),\n defaultedOf('movement', {\n mode: 'menu',\n moveOnTab: true\n }, choose$1('mode', {\n grid: [\n initSize(),\n output$1('config', configureGrid)\n ],\n matrix: [\n output$1('config', configureMatrix),\n required$1('rowSelector'),\n defaulted('previousSelector', Optional.none)\n ],\n menu: [\n defaulted('moveOnTab', true),\n output$1('config', configureMenu)\n ]\n })),\n itemMarkers(),\n defaulted('fakeFocus', false),\n defaulted('focusManager', dom$2()),\n onHandler('onHighlight'),\n onHandler('onDehighlight')\n ]);\n\n const focus = constant$1('alloy.menu-focus');\n\n const deselectOtherRadioItems = (menu, item) => {\n const checkedRadioItems = descendants(menu.element, '[role=\"menuitemradio\"][aria-checked=\"true\"]');\n each$1(checkedRadioItems, ele => {\n if (!eq(ele, item.element)) {\n menu.getSystem().getByDom(ele).each(c => {\n Toggling.off(c);\n });\n }\n });\n };\n const make$7 = (detail, components, _spec, _externals) => ({\n uid: detail.uid,\n dom: detail.dom,\n markers: detail.markers,\n behaviours: augment(detail.menuBehaviours, [\n Highlighting.config({\n highlightClass: detail.markers.selectedItem,\n itemClass: detail.markers.item,\n onHighlight: detail.onHighlight,\n onDehighlight: detail.onDehighlight\n }),\n Representing.config({\n store: {\n mode: 'memory',\n initialValue: detail.value\n }\n }),\n Composing.config({ find: Optional.some }),\n Keying.config(detail.movement.config(detail, detail.movement))\n ]),\n events: derive$2([\n run$1(focus$1(), (menu, simulatedEvent) => {\n const event = simulatedEvent.event;\n menu.getSystem().getByDom(event.target).each(item => {\n Highlighting.highlight(menu, item);\n simulatedEvent.stop();\n emitWith(menu, focus(), {\n menu,\n item\n });\n });\n }),\n run$1(hover(), (menu, simulatedEvent) => {\n const item = simulatedEvent.event.item;\n Highlighting.highlight(menu, item);\n }),\n run$1(toggled(), (menu, simulatedEvent) => {\n const {item, state} = simulatedEvent.event;\n if (state && get$f(item.element, 'role') === 'menuitemradio') {\n deselectOtherRadioItems(menu, item);\n }\n })\n ]),\n components,\n eventOrder: detail.eventOrder,\n domModification: { attributes: { role: 'menu' } }\n });\n\n const Menu = composite({\n name: 'Menu',\n configFields: schema$m(),\n partFields: parts$g(),\n factory: make$7\n });\n\n const transpose$1 = obj => tupleMap(obj, (v, k) => ({\n k: v,\n v: k\n }));\n const trace = (items, byItem, byMenu, finish) => get$g(byMenu, finish).bind(triggerItem => get$g(items, triggerItem).bind(triggerMenu => {\n const rest = trace(items, byItem, byMenu, triggerMenu);\n return Optional.some([triggerMenu].concat(rest));\n })).getOr([]);\n const generate$2 = (menus, expansions) => {\n const items = {};\n each(menus, (menuItems, menu) => {\n each$1(menuItems, item => {\n items[item] = menu;\n });\n });\n const byItem = expansions;\n const byMenu = transpose$1(expansions);\n const menuPaths = map$1(byMenu, (_triggerItem, submenu) => [submenu].concat(trace(items, byItem, byMenu, submenu)));\n return map$1(items, menu => get$g(menuPaths, menu).getOr([menu]));\n };\n\n const init$c = () => {\n const expansions = Cell({});\n const menus = Cell({});\n const paths = Cell({});\n const primary = value$2();\n const directory = Cell({});\n const clear = () => {\n expansions.set({});\n menus.set({});\n paths.set({});\n primary.clear();\n };\n const isClear = () => primary.get().isNone();\n const setMenuBuilt = (menuName, built) => {\n menus.set({\n ...menus.get(),\n [menuName]: {\n type: 'prepared',\n menu: built\n }\n });\n };\n const setContents = (sPrimary, sMenus, sExpansions, dir) => {\n primary.set(sPrimary);\n expansions.set(sExpansions);\n menus.set(sMenus);\n directory.set(dir);\n const sPaths = generate$2(dir, sExpansions);\n paths.set(sPaths);\n };\n const getTriggeringItem = menuValue => find$4(expansions.get(), (v, _k) => v === menuValue);\n const getTriggerData = (menuValue, getItemByValue, path) => getPreparedMenu(menuValue).bind(menu => getTriggeringItem(menuValue).bind(triggeringItemValue => getItemByValue(triggeringItemValue).map(triggeredItem => ({\n triggeredMenu: menu,\n triggeringItem: triggeredItem,\n triggeringPath: path\n }))));\n const getTriggeringPath = (itemValue, getItemByValue) => {\n const extraPath = filter$2(lookupItem(itemValue).toArray(), menuValue => getPreparedMenu(menuValue).isSome());\n return get$g(paths.get(), itemValue).bind(path => {\n const revPath = reverse(extraPath.concat(path));\n const triggers = bind$3(revPath, (menuValue, menuIndex) => getTriggerData(menuValue, getItemByValue, revPath.slice(0, menuIndex + 1)).fold(() => is$1(primary.get(), menuValue) ? [] : [Optional.none()], data => [Optional.some(data)]));\n return sequence(triggers);\n });\n };\n const expand = itemValue => get$g(expansions.get(), itemValue).map(menu => {\n const current = get$g(paths.get(), itemValue).getOr([]);\n return [menu].concat(current);\n });\n const collapse = itemValue => get$g(paths.get(), itemValue).bind(path => path.length > 1 ? Optional.some(path.slice(1)) : Optional.none());\n const refresh = itemValue => get$g(paths.get(), itemValue);\n const getPreparedMenu = menuValue => lookupMenu(menuValue).bind(extractPreparedMenu);\n const lookupMenu = menuValue => get$g(menus.get(), menuValue);\n const lookupItem = itemValue => get$g(expansions.get(), itemValue);\n const otherMenus = path => {\n const menuValues = directory.get();\n return difference(keys(menuValues), path);\n };\n const getPrimary = () => primary.get().bind(getPreparedMenu);\n const getMenus = () => menus.get();\n return {\n setMenuBuilt,\n setContents,\n expand,\n refresh,\n collapse,\n lookupMenu,\n lookupItem,\n otherMenus,\n getPrimary,\n getMenus,\n clear,\n isClear,\n getTriggeringPath\n };\n };\n const extractPreparedMenu = prep => prep.type === 'prepared' ? Optional.some(prep.menu) : Optional.none();\n const LayeredState = {\n init: init$c,\n extractPreparedMenu\n };\n\n const onMenuItemHighlightedEvent = generate$6('tiered-menu-item-highlight');\n const onMenuItemDehighlightedEvent = generate$6('tiered-menu-item-dehighlight');\n\n var HighlightOnOpen;\n (function (HighlightOnOpen) {\n HighlightOnOpen[HighlightOnOpen['HighlightMenuAndItem'] = 0] = 'HighlightMenuAndItem';\n HighlightOnOpen[HighlightOnOpen['HighlightJustMenu'] = 1] = 'HighlightJustMenu';\n HighlightOnOpen[HighlightOnOpen['HighlightNone'] = 2] = 'HighlightNone';\n }(HighlightOnOpen || (HighlightOnOpen = {})));\n\n const make$6 = (detail, _rawUiSpec) => {\n const submenuParentItems = value$2();\n const buildMenus = (container, primaryName, menus) => map$1(menus, (spec, name) => {\n const makeSketch = () => Menu.sketch({\n ...spec,\n value: name,\n markers: detail.markers,\n fakeFocus: detail.fakeFocus,\n onHighlight: (menuComp, itemComp) => {\n const highlightData = {\n menuComp,\n itemComp\n };\n emitWith(menuComp, onMenuItemHighlightedEvent, highlightData);\n },\n onDehighlight: (menuComp, itemComp) => {\n const dehighlightData = {\n menuComp,\n itemComp\n };\n emitWith(menuComp, onMenuItemDehighlightedEvent, dehighlightData);\n },\n focusManager: detail.fakeFocus ? highlights() : dom$2()\n });\n return name === primaryName ? {\n type: 'prepared',\n menu: container.getSystem().build(makeSketch())\n } : {\n type: 'notbuilt',\n nbMenu: makeSketch\n };\n });\n const layeredState = LayeredState.init();\n const setup = container => {\n const componentMap = buildMenus(container, detail.data.primary, detail.data.menus);\n const directory = toDirectory();\n layeredState.setContents(detail.data.primary, componentMap, detail.data.expansions, directory);\n return layeredState.getPrimary();\n };\n const getItemValue = item => Representing.getValue(item).value;\n const getItemByValue = (_container, menus, itemValue) => findMap(menus, menu => {\n if (!menu.getSystem().isConnected()) {\n return Optional.none();\n }\n const candidates = Highlighting.getCandidates(menu);\n return find$5(candidates, c => getItemValue(c) === itemValue);\n });\n const toDirectory = _container => map$1(detail.data.menus, (data, _menuName) => bind$3(data.items, item => item.type === 'separator' ? [] : [item.data.value]));\n const setActiveMenu = Highlighting.highlight;\n const setActiveMenuAndItem = (container, menu) => {\n setActiveMenu(container, menu);\n Highlighting.getHighlighted(menu).orThunk(() => Highlighting.getFirst(menu)).each(item => {\n if (detail.fakeFocus) {\n Highlighting.highlight(menu, item);\n } else {\n dispatch(container, item.element, focusItem());\n }\n });\n };\n const getMenus = (state, menuValues) => cat(map$2(menuValues, mv => state.lookupMenu(mv).bind(prep => prep.type === 'prepared' ? Optional.some(prep.menu) : Optional.none())));\n const closeOthers = (container, state, path) => {\n const others = getMenus(state, state.otherMenus(path));\n each$1(others, o => {\n remove$1(o.element, [detail.markers.backgroundMenu]);\n if (!detail.stayInDom) {\n Replacing.remove(container, o);\n }\n });\n };\n const getSubmenuParents = container => submenuParentItems.get().getOrThunk(() => {\n const r = {};\n const items = descendants(container.element, `.${ detail.markers.item }`);\n const parentItems = filter$2(items, i => get$f(i, 'aria-haspopup') === 'true');\n each$1(parentItems, i => {\n container.getSystem().getByDom(i).each(itemComp => {\n const key = getItemValue(itemComp);\n r[key] = itemComp;\n });\n });\n submenuParentItems.set(r);\n return r;\n });\n const updateAriaExpansions = (container, path) => {\n const parentItems = getSubmenuParents(container);\n each(parentItems, (v, k) => {\n const expanded = contains$2(path, k);\n set$9(v.element, 'aria-expanded', expanded);\n });\n };\n const updateMenuPath = (container, state, path) => Optional.from(path[0]).bind(latestMenuName => state.lookupMenu(latestMenuName).bind(menuPrep => {\n if (menuPrep.type === 'notbuilt') {\n return Optional.none();\n } else {\n const activeMenu = menuPrep.menu;\n const rest = getMenus(state, path.slice(1));\n each$1(rest, r => {\n add$2(r.element, detail.markers.backgroundMenu);\n });\n if (!inBody(activeMenu.element)) {\n Replacing.append(container, premade(activeMenu));\n }\n remove$1(activeMenu.element, [detail.markers.backgroundMenu]);\n setActiveMenuAndItem(container, activeMenu);\n closeOthers(container, state, path);\n return Optional.some(activeMenu);\n }\n }));\n let ExpandHighlightDecision;\n (function (ExpandHighlightDecision) {\n ExpandHighlightDecision[ExpandHighlightDecision['HighlightSubmenu'] = 0] = 'HighlightSubmenu';\n ExpandHighlightDecision[ExpandHighlightDecision['HighlightParent'] = 1] = 'HighlightParent';\n }(ExpandHighlightDecision || (ExpandHighlightDecision = {})));\n const buildIfRequired = (container, menuName, menuPrep) => {\n if (menuPrep.type === 'notbuilt') {\n const menu = container.getSystem().build(menuPrep.nbMenu());\n layeredState.setMenuBuilt(menuName, menu);\n return menu;\n } else {\n return menuPrep.menu;\n }\n };\n const expandRight = (container, item, decision = ExpandHighlightDecision.HighlightSubmenu) => {\n if (item.hasConfigured(Disabling) && Disabling.isDisabled(item)) {\n return Optional.some(item);\n } else {\n const value = getItemValue(item);\n return layeredState.expand(value).bind(path => {\n updateAriaExpansions(container, path);\n return Optional.from(path[0]).bind(menuName => layeredState.lookupMenu(menuName).bind(activeMenuPrep => {\n const activeMenu = buildIfRequired(container, menuName, activeMenuPrep);\n if (!inBody(activeMenu.element)) {\n Replacing.append(container, premade(activeMenu));\n }\n detail.onOpenSubmenu(container, item, activeMenu, reverse(path));\n if (decision === ExpandHighlightDecision.HighlightSubmenu) {\n Highlighting.highlightFirst(activeMenu);\n return updateMenuPath(container, layeredState, path);\n } else {\n Highlighting.dehighlightAll(activeMenu);\n return Optional.some(item);\n }\n }));\n });\n }\n };\n const collapseLeft = (container, item) => {\n const value = getItemValue(item);\n return layeredState.collapse(value).bind(path => {\n updateAriaExpansions(container, path);\n return updateMenuPath(container, layeredState, path).map(activeMenu => {\n detail.onCollapseMenu(container, item, activeMenu);\n return activeMenu;\n });\n });\n };\n const updateView = (container, item) => {\n const value = getItemValue(item);\n return layeredState.refresh(value).bind(path => {\n updateAriaExpansions(container, path);\n return updateMenuPath(container, layeredState, path);\n });\n };\n const onRight = (container, item) => inside(item.element) ? Optional.none() : expandRight(container, item, ExpandHighlightDecision.HighlightSubmenu);\n const onLeft = (container, item) => inside(item.element) ? Optional.none() : collapseLeft(container, item);\n const onEscape = (container, item) => collapseLeft(container, item).orThunk(() => detail.onEscape(container, item).map(() => container));\n const keyOnItem = f => (container, simulatedEvent) => {\n return closest$1(simulatedEvent.getSource(), `.${ detail.markers.item }`).bind(target => container.getSystem().getByDom(target).toOptional().bind(item => f(container, item).map(always)));\n };\n const events = derive$2([\n run$1(focus(), (tmenu, simulatedEvent) => {\n const item = simulatedEvent.event.item;\n layeredState.lookupItem(getItemValue(item)).each(() => {\n const menu = simulatedEvent.event.menu;\n Highlighting.highlight(tmenu, menu);\n const value = getItemValue(simulatedEvent.event.item);\n layeredState.refresh(value).each(path => closeOthers(tmenu, layeredState, path));\n });\n }),\n runOnExecute$1((component, simulatedEvent) => {\n const target = simulatedEvent.event.target;\n component.getSystem().getByDom(target).each(item => {\n const itemValue = getItemValue(item);\n if (itemValue.indexOf('collapse-item') === 0) {\n collapseLeft(component, item);\n }\n expandRight(component, item, ExpandHighlightDecision.HighlightSubmenu).fold(() => {\n detail.onExecute(component, item);\n }, noop);\n });\n }),\n runOnAttached((container, _simulatedEvent) => {\n setup(container).each(primary => {\n Replacing.append(container, premade(primary));\n detail.onOpenMenu(container, primary);\n if (detail.highlightOnOpen === HighlightOnOpen.HighlightMenuAndItem) {\n setActiveMenuAndItem(container, primary);\n } else if (detail.highlightOnOpen === HighlightOnOpen.HighlightJustMenu) {\n setActiveMenu(container, primary);\n }\n });\n }),\n run$1(onMenuItemHighlightedEvent, (tmenuComp, se) => {\n detail.onHighlightItem(tmenuComp, se.event.menuComp, se.event.itemComp);\n }),\n run$1(onMenuItemDehighlightedEvent, (tmenuComp, se) => {\n detail.onDehighlightItem(tmenuComp, se.event.menuComp, se.event.itemComp);\n }),\n ...detail.navigateOnHover ? [run$1(hover(), (tmenu, simulatedEvent) => {\n const item = simulatedEvent.event.item;\n updateView(tmenu, item);\n expandRight(tmenu, item, ExpandHighlightDecision.HighlightParent);\n detail.onHover(tmenu, item);\n })] : []\n ]);\n const getActiveItem = container => Highlighting.getHighlighted(container).bind(Highlighting.getHighlighted);\n const collapseMenuApi = container => {\n getActiveItem(container).each(currentItem => {\n collapseLeft(container, currentItem);\n });\n };\n const highlightPrimary = container => {\n layeredState.getPrimary().each(primary => {\n setActiveMenuAndItem(container, primary);\n });\n };\n const extractMenuFromContainer = container => Optional.from(container.components()[0]).filter(comp => get$f(comp.element, 'role') === 'menu');\n const repositionMenus = container => {\n const maybeActivePrimary = layeredState.getPrimary().bind(primary => getActiveItem(container).bind(currentItem => {\n const itemValue = getItemValue(currentItem);\n const allMenus = values(layeredState.getMenus());\n const preparedMenus = cat(map$2(allMenus, LayeredState.extractPreparedMenu));\n return layeredState.getTriggeringPath(itemValue, v => getItemByValue(container, preparedMenus, v));\n }).map(triggeringPath => ({\n primary,\n triggeringPath\n })));\n maybeActivePrimary.fold(() => {\n extractMenuFromContainer(container).each(primaryMenu => {\n detail.onRepositionMenu(container, primaryMenu, []);\n });\n }, ({primary, triggeringPath}) => {\n detail.onRepositionMenu(container, primary, triggeringPath);\n });\n };\n const apis = {\n collapseMenu: collapseMenuApi,\n highlightPrimary,\n repositionMenus\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n markers: detail.markers,\n behaviours: augment(detail.tmenuBehaviours, [\n Keying.config({\n mode: 'special',\n onRight: keyOnItem(onRight),\n onLeft: keyOnItem(onLeft),\n onEscape: keyOnItem(onEscape),\n focusIn: (container, _keyInfo) => {\n layeredState.getPrimary().each(primary => {\n dispatch(container, primary.element, focusItem());\n });\n }\n }),\n Highlighting.config({\n highlightClass: detail.markers.selectedMenu,\n itemClass: detail.markers.menu\n }),\n Composing.config({\n find: container => {\n return Highlighting.getHighlighted(container);\n }\n }),\n Replacing.config({})\n ]),\n eventOrder: detail.eventOrder,\n apis,\n events\n };\n };\n const collapseItem$1 = constant$1('collapse-item');\n\n const tieredData = (primary, menus, expansions) => ({\n primary,\n menus,\n expansions\n });\n const singleData = (name, menu) => ({\n primary: name,\n menus: wrap$1(name, menu),\n expansions: {}\n });\n const collapseItem = text => ({\n value: generate$6(collapseItem$1()),\n meta: { text }\n });\n const tieredMenu = single({\n name: 'TieredMenu',\n configFields: [\n onStrictKeyboardHandler('onExecute'),\n onStrictKeyboardHandler('onEscape'),\n onStrictHandler('onOpenMenu'),\n onStrictHandler('onOpenSubmenu'),\n onHandler('onRepositionMenu'),\n onHandler('onCollapseMenu'),\n defaulted('highlightOnOpen', HighlightOnOpen.HighlightMenuAndItem),\n requiredObjOf('data', [\n required$1('primary'),\n required$1('menus'),\n required$1('expansions')\n ]),\n defaulted('fakeFocus', false),\n onHandler('onHighlightItem'),\n onHandler('onDehighlightItem'),\n onHandler('onHover'),\n tieredMenuMarkers(),\n required$1('dom'),\n defaulted('navigateOnHover', true),\n defaulted('stayInDom', false),\n field('tmenuBehaviours', [\n Keying,\n Highlighting,\n Composing,\n Replacing\n ]),\n defaulted('eventOrder', {})\n ],\n apis: {\n collapseMenu: (apis, tmenu) => {\n apis.collapseMenu(tmenu);\n },\n highlightPrimary: (apis, tmenu) => {\n apis.highlightPrimary(tmenu);\n },\n repositionMenus: (apis, tmenu) => {\n apis.repositionMenus(tmenu);\n }\n },\n factory: make$6,\n extraApis: {\n tieredData,\n singleData,\n collapseItem\n }\n });\n\n const makeMenu = (detail, menuSandbox, placementSpec, menuSpec, getBounds) => {\n const lazySink = () => detail.lazySink(menuSandbox);\n const layouts = menuSpec.type === 'horizontal' ? {\n layouts: {\n onLtr: () => belowOrAbove(),\n onRtl: () => belowOrAboveRtl()\n }\n } : {};\n const isFirstTierSubmenu = triggeringPaths => triggeringPaths.length === 2;\n const getSubmenuLayouts = triggeringPaths => isFirstTierSubmenu(triggeringPaths) ? layouts : {};\n return tieredMenu.sketch({\n dom: { tag: 'div' },\n data: menuSpec.data,\n markers: menuSpec.menu.markers,\n highlightOnOpen: menuSpec.menu.highlightOnOpen,\n fakeFocus: menuSpec.menu.fakeFocus,\n onEscape: () => {\n Sandboxing.close(menuSandbox);\n detail.onEscape.map(handler => handler(menuSandbox));\n return Optional.some(true);\n },\n onExecute: () => {\n return Optional.some(true);\n },\n onOpenMenu: (tmenu, menu) => {\n Positioning.positionWithinBounds(lazySink().getOrDie(), menu, placementSpec, getBounds());\n },\n onOpenSubmenu: (tmenu, item, submenu, triggeringPaths) => {\n const sink = lazySink().getOrDie();\n Positioning.position(sink, submenu, {\n anchor: {\n type: 'submenu',\n item,\n ...getSubmenuLayouts(triggeringPaths)\n }\n });\n },\n onRepositionMenu: (tmenu, primaryMenu, submenuTriggers) => {\n const sink = lazySink().getOrDie();\n Positioning.positionWithinBounds(sink, primaryMenu, placementSpec, getBounds());\n each$1(submenuTriggers, st => {\n const submenuLayouts = getSubmenuLayouts(st.triggeringPath);\n Positioning.position(sink, st.triggeredMenu, {\n anchor: {\n type: 'submenu',\n item: st.triggeringItem,\n ...submenuLayouts\n }\n });\n });\n }\n });\n };\n const factory$o = (detail, spec) => {\n const isPartOfRelated = (sandbox, queryElem) => {\n const related = detail.getRelated(sandbox);\n return related.exists(rel => isPartOf$1(rel, queryElem));\n };\n const setContent = (sandbox, thing) => {\n Sandboxing.setContent(sandbox, thing);\n };\n const showAt = (sandbox, thing, placementSpec) => {\n showWithin(sandbox, thing, placementSpec, Optional.none());\n };\n const showWithin = (sandbox, thing, placementSpec, boxElement) => {\n showWithinBounds(sandbox, thing, placementSpec, () => boxElement.map(elem => box$1(elem)));\n };\n const showWithinBounds = (sandbox, thing, placementSpec, getBounds) => {\n const sink = detail.lazySink(sandbox).getOrDie();\n Sandboxing.openWhileCloaked(sandbox, thing, () => Positioning.positionWithinBounds(sink, sandbox, placementSpec, getBounds()));\n Representing.setValue(sandbox, Optional.some({\n mode: 'position',\n config: placementSpec,\n getBounds\n }));\n };\n const showMenuAt = (sandbox, placementSpec, menuSpec) => {\n showMenuWithinBounds(sandbox, placementSpec, menuSpec, Optional.none);\n };\n const showMenuWithinBounds = (sandbox, placementSpec, menuSpec, getBounds) => {\n const menu = makeMenu(detail, sandbox, placementSpec, menuSpec, getBounds);\n Sandboxing.open(sandbox, menu);\n Representing.setValue(sandbox, Optional.some({\n mode: 'menu',\n menu\n }));\n };\n const hide = sandbox => {\n if (Sandboxing.isOpen(sandbox)) {\n Representing.setValue(sandbox, Optional.none());\n Sandboxing.close(sandbox);\n }\n };\n const getContent = sandbox => Sandboxing.getState(sandbox);\n const reposition = sandbox => {\n if (Sandboxing.isOpen(sandbox)) {\n Representing.getValue(sandbox).each(state => {\n switch (state.mode) {\n case 'menu':\n Sandboxing.getState(sandbox).each(tieredMenu.repositionMenus);\n break;\n case 'position':\n const sink = detail.lazySink(sandbox).getOrDie();\n Positioning.positionWithinBounds(sink, sandbox, state.config, state.getBounds());\n break;\n }\n });\n }\n };\n const apis = {\n setContent,\n showAt,\n showWithin,\n showWithinBounds,\n showMenuAt,\n showMenuWithinBounds,\n hide,\n getContent,\n reposition,\n isOpen: Sandboxing.isOpen\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n behaviours: augment(detail.inlineBehaviours, [\n Sandboxing.config({\n isPartOf: (sandbox, data, queryElem) => {\n return isPartOf$1(data, queryElem) || isPartOfRelated(sandbox, queryElem);\n },\n getAttachPoint: sandbox => {\n return detail.lazySink(sandbox).getOrDie();\n },\n onOpen: sandbox => {\n detail.onShow(sandbox);\n },\n onClose: sandbox => {\n detail.onHide(sandbox);\n }\n }),\n Representing.config({\n store: {\n mode: 'memory',\n initialValue: Optional.none()\n }\n }),\n Receiving.config({\n channels: {\n ...receivingChannel$1({\n isExtraPart: spec.isExtraPart,\n ...detail.fireDismissalEventInstead.map(fe => ({ fireEventInstead: { event: fe.event } })).getOr({})\n }),\n ...receivingChannel({\n ...detail.fireRepositionEventInstead.map(fe => ({ fireEventInstead: { event: fe.event } })).getOr({}),\n doReposition: reposition\n })\n }\n })\n ]),\n eventOrder: detail.eventOrder,\n apis\n };\n };\n const InlineView = single({\n name: 'InlineView',\n configFields: [\n required$1('lazySink'),\n onHandler('onShow'),\n onHandler('onHide'),\n optionFunction('onEscape'),\n field('inlineBehaviours', [\n Sandboxing,\n Representing,\n Receiving\n ]),\n optionObjOf('fireDismissalEventInstead', [defaulted('event', dismissRequested())]),\n optionObjOf('fireRepositionEventInstead', [defaulted('event', repositionRequested())]),\n defaulted('getRelated', Optional.none),\n defaulted('isExtraPart', never),\n defaulted('eventOrder', Optional.none)\n ],\n factory: factory$o,\n apis: {\n showAt: (apis, component, anchor, thing) => {\n apis.showAt(component, anchor, thing);\n },\n showWithin: (apis, component, anchor, thing, boxElement) => {\n apis.showWithin(component, anchor, thing, boxElement);\n },\n showWithinBounds: (apis, component, anchor, thing, bounds) => {\n apis.showWithinBounds(component, anchor, thing, bounds);\n },\n showMenuAt: (apis, component, anchor, menuSpec) => {\n apis.showMenuAt(component, anchor, menuSpec);\n },\n showMenuWithinBounds: (apis, component, anchor, menuSpec, bounds) => {\n apis.showMenuWithinBounds(component, anchor, menuSpec, bounds);\n },\n hide: (apis, component) => {\n apis.hide(component);\n },\n isOpen: (apis, component) => apis.isOpen(component),\n getContent: (apis, component) => apis.getContent(component),\n setContent: (apis, component, thing) => {\n apis.setContent(component, thing);\n },\n reposition: (apis, component) => {\n apis.reposition(component);\n }\n }\n });\n\n var global$9 = tinymce.util.Tools.resolve('tinymce.util.Delay');\n\n const factory$n = detail => {\n const events = events$a(detail.action);\n const tag = detail.dom.tag;\n const lookupAttr = attr => get$g(detail.dom, 'attributes').bind(attrs => get$g(attrs, attr));\n const getModAttributes = () => {\n if (tag === 'button') {\n const type = lookupAttr('type').getOr('button');\n const roleAttrs = lookupAttr('role').map(role => ({ role })).getOr({});\n return {\n type,\n ...roleAttrs\n };\n } else {\n const role = lookupAttr('role').getOr('button');\n return { role };\n }\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components: detail.components,\n events,\n behaviours: SketchBehaviours.augment(detail.buttonBehaviours, [\n Focusing.config({}),\n Keying.config({\n mode: 'execution',\n useSpace: true,\n useEnter: true\n })\n ]),\n domModification: { attributes: getModAttributes() },\n eventOrder: detail.eventOrder\n };\n };\n const Button = single({\n name: 'Button',\n factory: factory$n,\n configFields: [\n defaulted('uid', undefined),\n required$1('dom'),\n defaulted('components', []),\n SketchBehaviours.field('buttonBehaviours', [\n Focusing,\n Keying\n ]),\n option$3('action'),\n option$3('role'),\n defaulted('eventOrder', {})\n ]\n });\n\n const record = spec => {\n const uid = isSketchSpec(spec) && hasNonNullableKey(spec, 'uid') ? spec.uid : generate$5('memento');\n const get = anyInSystem => anyInSystem.getSystem().getByUid(uid).getOrDie();\n const getOpt = anyInSystem => anyInSystem.getSystem().getByUid(uid).toOptional();\n const asSpec = () => ({\n ...spec,\n uid\n });\n return {\n get,\n getOpt,\n asSpec\n };\n };\n\n var global$8 = tinymce.util.Tools.resolve('tinymce.util.I18n');\n\n const rtlTransform = {\n 'indent': true,\n 'outdent': true,\n 'table-insert-column-after': true,\n 'table-insert-column-before': true,\n 'paste-column-after': true,\n 'paste-column-before': true,\n 'unordered-list': true,\n 'list-bull-circle': true,\n 'list-bull-default': true,\n 'list-bull-square': true\n };\n const defaultIconName = 'temporary-placeholder';\n const defaultIcon = icons => () => get$g(icons, defaultIconName).getOr('!not found!');\n const getIconName = (name, icons) => {\n const lcName = name.toLowerCase();\n if (global$8.isRtl()) {\n const rtlName = ensureTrailing(lcName, '-rtl');\n return has$2(icons, rtlName) ? rtlName : lcName;\n } else {\n return lcName;\n }\n };\n const lookupIcon = (name, icons) => get$g(icons, getIconName(name, icons));\n const get$2 = (name, iconProvider) => {\n const icons = iconProvider();\n return lookupIcon(name, icons).getOrThunk(defaultIcon(icons));\n };\n const getOr = (name, iconProvider, fallbackIcon) => {\n const icons = iconProvider();\n return lookupIcon(name, icons).or(fallbackIcon).getOrThunk(defaultIcon(icons));\n };\n const needsRtlTransform = iconName => global$8.isRtl() ? has$2(rtlTransform, iconName) : false;\n const addFocusableBehaviour = () => config('add-focusable', [runOnAttached(comp => {\n child(comp.element, 'svg').each(svg => set$9(svg, 'focusable', 'false'));\n })]);\n const renderIcon$2 = (spec, iconName, icons, fallbackIcon) => {\n var _a, _b;\n const rtlIconClasses = needsRtlTransform(iconName) ? ['tox-icon--flip'] : [];\n const iconHtml = get$g(icons, getIconName(iconName, icons)).or(fallbackIcon).getOrThunk(defaultIcon(icons));\n return {\n dom: {\n tag: spec.tag,\n attributes: (_a = spec.attributes) !== null && _a !== void 0 ? _a : {},\n classes: spec.classes.concat(rtlIconClasses),\n innerHtml: iconHtml\n },\n behaviours: derive$1([\n ...(_b = spec.behaviours) !== null && _b !== void 0 ? _b : [],\n addFocusableBehaviour()\n ])\n };\n };\n const render$3 = (iconName, spec, iconProvider, fallbackIcon = Optional.none()) => renderIcon$2(spec, iconName, iconProvider(), fallbackIcon);\n const renderFirst = (iconNames, spec, iconProvider) => {\n const icons = iconProvider();\n const iconName = find$5(iconNames, name => has$2(icons, getIconName(name, icons)));\n return renderIcon$2(spec, iconName.getOr(defaultIconName), icons, Optional.none());\n };\n\n const notificationIconMap = {\n success: 'checkmark',\n error: 'warning',\n err: 'error',\n warning: 'warning',\n warn: 'warning',\n info: 'info'\n };\n const factory$m = detail => {\n const memBannerText = record({\n dom: {\n tag: 'p',\n innerHtml: detail.translationProvider(detail.text)\n },\n behaviours: derive$1([Replacing.config({})])\n });\n const renderPercentBar = percent => ({\n dom: {\n tag: 'div',\n classes: ['tox-bar'],\n styles: { width: `${ percent }%` }\n }\n });\n const renderPercentText = percent => ({\n dom: {\n tag: 'div',\n classes: ['tox-text'],\n innerHtml: `${ percent }%`\n }\n });\n const memBannerProgress = record({\n dom: {\n tag: 'div',\n classes: detail.progress ? [\n 'tox-progress-bar',\n 'tox-progress-indicator'\n ] : ['tox-progress-bar']\n },\n components: [\n {\n dom: {\n tag: 'div',\n classes: ['tox-bar-container']\n },\n components: [renderPercentBar(0)]\n },\n renderPercentText(0)\n ],\n behaviours: derive$1([Replacing.config({})])\n });\n const updateProgress = (comp, percent) => {\n if (comp.getSystem().isConnected()) {\n memBannerProgress.getOpt(comp).each(progress => {\n Replacing.set(progress, [\n {\n dom: {\n tag: 'div',\n classes: ['tox-bar-container']\n },\n components: [renderPercentBar(percent)]\n },\n renderPercentText(percent)\n ]);\n });\n }\n };\n const updateText = (comp, text) => {\n if (comp.getSystem().isConnected()) {\n const banner = memBannerText.get(comp);\n Replacing.set(banner, [text$2(text)]);\n }\n };\n const apis = {\n updateProgress,\n updateText\n };\n const iconChoices = flatten([\n detail.icon.toArray(),\n detail.level.toArray(),\n detail.level.bind(level => Optional.from(notificationIconMap[level])).toArray()\n ]);\n const memButton = record(Button.sketch({\n dom: {\n tag: 'button',\n classes: [\n 'tox-notification__dismiss',\n 'tox-button',\n 'tox-button--naked',\n 'tox-button--icon'\n ]\n },\n components: [render$3('close', {\n tag: 'div',\n classes: ['tox-icon'],\n attributes: { 'aria-label': detail.translationProvider('Close') }\n }, detail.iconProvider)],\n action: comp => {\n detail.onAction(comp);\n }\n }));\n const notificationIconSpec = renderFirst(iconChoices, {\n tag: 'div',\n classes: ['tox-notification__icon']\n }, detail.iconProvider);\n const notificationBodySpec = {\n dom: {\n tag: 'div',\n classes: ['tox-notification__body']\n },\n components: [memBannerText.asSpec()],\n behaviours: derive$1([Replacing.config({})])\n };\n const components = [\n notificationIconSpec,\n notificationBodySpec\n ];\n return {\n uid: detail.uid,\n dom: {\n tag: 'div',\n attributes: { role: 'alert' },\n classes: detail.level.map(level => [\n 'tox-notification',\n 'tox-notification--in',\n `tox-notification--${ level }`\n ]).getOr([\n 'tox-notification',\n 'tox-notification--in'\n ])\n },\n behaviours: derive$1([\n Focusing.config({}),\n config('notification-events', [run$1(focusin(), comp => {\n memButton.getOpt(comp).each(Focusing.focus);\n })])\n ]),\n components: components.concat(detail.progress ? [memBannerProgress.asSpec()] : []).concat(!detail.closeButton ? [] : [memButton.asSpec()]),\n apis\n };\n };\n const Notification = single({\n name: 'Notification',\n factory: factory$m,\n configFields: [\n option$3('level'),\n required$1('progress'),\n option$3('icon'),\n required$1('onAction'),\n required$1('text'),\n required$1('iconProvider'),\n required$1('translationProvider'),\n defaultedBoolean('closeButton', true)\n ],\n apis: {\n updateProgress: (apis, comp, percent) => {\n apis.updateProgress(comp, percent);\n },\n updateText: (apis, comp, text) => {\n apis.updateText(comp, text);\n }\n }\n });\n\n var NotificationManagerImpl = (editor, extras, uiMothership) => {\n const sharedBackstage = extras.backstage.shared;\n const getBounds = () => {\n const contentArea = box$1(SugarElement.fromDom(editor.getContentAreaContainer()));\n const win$1 = win();\n const x = clamp(win$1.x, contentArea.x, contentArea.right);\n const y = clamp(win$1.y, contentArea.y, contentArea.bottom);\n const right = Math.max(contentArea.right, win$1.right);\n const bottom = Math.max(contentArea.bottom, win$1.bottom);\n return Optional.some(bounds(x, y, right - x, bottom - y));\n };\n const open = (settings, closeCallback) => {\n const close = () => {\n closeCallback();\n InlineView.hide(notificationWrapper);\n };\n const notification = build$1(Notification.sketch({\n text: settings.text,\n level: contains$2([\n 'success',\n 'error',\n 'warning',\n 'warn',\n 'info'\n ], settings.type) ? settings.type : undefined,\n progress: settings.progressBar === true,\n icon: settings.icon,\n closeButton: settings.closeButton,\n onAction: close,\n iconProvider: sharedBackstage.providers.icons,\n translationProvider: sharedBackstage.providers.translate\n }));\n const notificationWrapper = build$1(InlineView.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-notifications-container']\n },\n lazySink: sharedBackstage.getSink,\n fireDismissalEventInstead: {},\n ...sharedBackstage.header.isPositionedAtTop() ? {} : { fireRepositionEventInstead: {} }\n }));\n uiMothership.add(notificationWrapper);\n if (isNumber(settings.timeout) && settings.timeout > 0) {\n global$9.setEditorTimeout(editor, () => {\n close();\n }, settings.timeout);\n }\n const reposition = () => {\n const notificationSpec = premade(notification);\n const anchorOverrides = { maxHeightFunction: expandable$1() };\n const allNotifications = editor.notificationManager.getNotifications();\n if (allNotifications[0] === thisNotification) {\n const anchor = {\n ...sharedBackstage.anchors.banner(),\n overrides: anchorOverrides\n };\n InlineView.showWithinBounds(notificationWrapper, notificationSpec, { anchor }, getBounds);\n } else {\n indexOf(allNotifications, thisNotification).each(idx => {\n const previousNotification = allNotifications[idx - 1].getEl();\n const nodeAnchor = {\n type: 'node',\n root: body(),\n node: Optional.some(SugarElement.fromDom(previousNotification)),\n overrides: anchorOverrides,\n layouts: {\n onRtl: () => [south$2],\n onLtr: () => [south$2]\n }\n };\n InlineView.showWithinBounds(notificationWrapper, notificationSpec, { anchor: nodeAnchor }, getBounds);\n });\n }\n };\n const thisNotification = {\n close,\n reposition,\n text: nuText => {\n Notification.updateText(notification, nuText);\n },\n settings,\n getEl: () => notification.element.dom,\n progressBar: {\n value: percent => {\n Notification.updateProgress(notification, percent);\n }\n }\n };\n return thisNotification;\n };\n const close = notification => {\n notification.close();\n };\n const getArgs = notification => {\n return notification.settings;\n };\n return {\n open,\n close,\n getArgs\n };\n };\n\n var global$7 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');\n\n var global$6 = tinymce.util.Tools.resolve('tinymce.EditorManager');\n\n var global$5 = tinymce.util.Tools.resolve('tinymce.Env');\n\n var ToolbarMode$1;\n (function (ToolbarMode) {\n ToolbarMode['default'] = 'wrap';\n ToolbarMode['floating'] = 'floating';\n ToolbarMode['sliding'] = 'sliding';\n ToolbarMode['scrolling'] = 'scrolling';\n }(ToolbarMode$1 || (ToolbarMode$1 = {})));\n var ToolbarLocation$1;\n (function (ToolbarLocation) {\n ToolbarLocation['auto'] = 'auto';\n ToolbarLocation['top'] = 'top';\n ToolbarLocation['bottom'] = 'bottom';\n }(ToolbarLocation$1 || (ToolbarLocation$1 = {})));\n const option$2 = name => editor => editor.options.get(name);\n const wrapOptional = fn => editor => Optional.from(fn(editor));\n const register$e = editor => {\n const isPhone = global$5.deviceType.isPhone();\n const isMobile = global$5.deviceType.isTablet() || isPhone;\n const registerOption = editor.options.register;\n const stringOrFalseProcessor = value => isString(value) || value === false;\n const stringOrNumberProcessor = value => isString(value) || isNumber(value);\n registerOption('skin', {\n processor: value => isString(value) || value === false,\n default: 'oxide'\n });\n registerOption('skin_url', { processor: 'string' });\n registerOption('height', {\n processor: stringOrNumberProcessor,\n default: Math.max(editor.getElement().offsetHeight, 400)\n });\n registerOption('width', {\n processor: stringOrNumberProcessor,\n default: global$7.DOM.getStyle(editor.getElement(), 'width')\n });\n registerOption('min_height', {\n processor: 'number',\n default: 100\n });\n registerOption('min_width', { processor: 'number' });\n registerOption('max_height', { processor: 'number' });\n registerOption('max_width', { processor: 'number' });\n registerOption('style_formats', { processor: 'object[]' });\n registerOption('style_formats_merge', {\n processor: 'boolean',\n default: false\n });\n registerOption('style_formats_autohide', {\n processor: 'boolean',\n default: false\n });\n registerOption('line_height_formats', {\n processor: 'string',\n default: '1 1.1 1.2 1.3 1.4 1.5 2'\n });\n registerOption('font_family_formats', {\n processor: 'string',\n default: 'Andale Mono=andale mono,monospace;' + 'Arial=arial,helvetica,sans-serif;' + 'Arial Black=arial black,sans-serif;' + 'Book Antiqua=book antiqua,palatino,serif;' + 'Comic Sans MS=comic sans ms,sans-serif;' + 'Courier New=courier new,courier,monospace;' + 'Georgia=georgia,palatino,serif;' + 'Helvetica=helvetica,arial,sans-serif;' + 'Impact=impact,sans-serif;' + 'Symbol=symbol;' + 'Tahoma=tahoma,arial,helvetica,sans-serif;' + 'Terminal=terminal,monaco,monospace;' + 'Times New Roman=times new roman,times,serif;' + 'Trebuchet MS=trebuchet ms,geneva,sans-serif;' + 'Verdana=verdana,geneva,sans-serif;' + 'Webdings=webdings;' + 'Wingdings=wingdings,zapf dingbats'\n });\n registerOption('font_size_formats', {\n processor: 'string',\n default: '8pt 10pt 12pt 14pt 18pt 24pt 36pt'\n });\n registerOption('block_formats', {\n processor: 'string',\n default: 'Paragraph=p;' + 'Heading 1=h1;' + 'Heading 2=h2;' + 'Heading 3=h3;' + 'Heading 4=h4;' + 'Heading 5=h5;' + 'Heading 6=h6;' + 'Preformatted=pre'\n });\n registerOption('content_langs', { processor: 'object[]' });\n registerOption('removed_menuitems', {\n processor: 'string',\n default: ''\n });\n registerOption('menubar', {\n processor: value => isString(value) || isBoolean(value),\n default: !isPhone\n });\n registerOption('menu', {\n processor: 'object',\n default: {}\n });\n registerOption('toolbar', {\n processor: value => {\n if (isBoolean(value) || isString(value) || isArray(value)) {\n return {\n value,\n valid: true\n };\n } else {\n return {\n valid: false,\n message: 'Must be a boolean, string or array.'\n };\n }\n },\n default: true\n });\n range$2(9, num => {\n registerOption('toolbar' + (num + 1), { processor: 'string' });\n });\n registerOption('toolbar_mode', {\n processor: 'string',\n default: isMobile ? 'scrolling' : 'floating'\n });\n registerOption('toolbar_groups', {\n processor: 'object',\n default: {}\n });\n registerOption('toolbar_location', {\n processor: 'string',\n default: ToolbarLocation$1.auto\n });\n registerOption('toolbar_persist', {\n processor: 'boolean',\n default: false\n });\n registerOption('toolbar_sticky', {\n processor: 'boolean',\n default: editor.inline\n });\n registerOption('toolbar_sticky_offset', {\n processor: 'number',\n default: 0\n });\n registerOption('fixed_toolbar_container', {\n processor: 'string',\n default: ''\n });\n registerOption('fixed_toolbar_container_target', { processor: 'object' });\n registerOption('file_picker_callback', { processor: 'function' });\n registerOption('file_picker_validator_handler', { processor: 'function' });\n registerOption('file_picker_types', { processor: 'string' });\n registerOption('typeahead_urls', {\n processor: 'boolean',\n default: true\n });\n registerOption('anchor_top', {\n processor: stringOrFalseProcessor,\n default: '#top'\n });\n registerOption('anchor_bottom', {\n processor: stringOrFalseProcessor,\n default: '#bottom'\n });\n registerOption('draggable_modal', {\n processor: 'boolean',\n default: false\n });\n registerOption('statusbar', {\n processor: 'boolean',\n default: true\n });\n registerOption('elementpath', {\n processor: 'boolean',\n default: true\n });\n registerOption('branding', {\n processor: 'boolean',\n default: true\n });\n registerOption('promotion', {\n processor: 'boolean',\n default: true\n });\n registerOption('resize', {\n processor: value => value === 'both' || isBoolean(value),\n default: !global$5.deviceType.isTouch()\n });\n registerOption('sidebar_show', { processor: 'string' });\n };\n const isReadOnly = option$2('readonly');\n const getHeightOption = option$2('height');\n const getWidthOption = option$2('width');\n const getMinWidthOption = wrapOptional(option$2('min_width'));\n const getMinHeightOption = wrapOptional(option$2('min_height'));\n const getMaxWidthOption = wrapOptional(option$2('max_width'));\n const getMaxHeightOption = wrapOptional(option$2('max_height'));\n const getUserStyleFormats = wrapOptional(option$2('style_formats'));\n const shouldMergeStyleFormats = option$2('style_formats_merge');\n const shouldAutoHideStyleFormats = option$2('style_formats_autohide');\n const getContentLanguages = option$2('content_langs');\n const getRemovedMenuItems = option$2('removed_menuitems');\n const getToolbarMode = option$2('toolbar_mode');\n const getToolbarGroups = option$2('toolbar_groups');\n const getToolbarLocation = option$2('toolbar_location');\n const fixedContainerSelector = option$2('fixed_toolbar_container');\n const fixedToolbarContainerTarget = option$2('fixed_toolbar_container_target');\n const isToolbarPersist = option$2('toolbar_persist');\n const getStickyToolbarOffset = option$2('toolbar_sticky_offset');\n const getMenubar = option$2('menubar');\n const getToolbar = option$2('toolbar');\n const getFilePickerCallback = option$2('file_picker_callback');\n const getFilePickerValidatorHandler = option$2('file_picker_validator_handler');\n const getFilePickerTypes = option$2('file_picker_types');\n const useTypeaheadUrls = option$2('typeahead_urls');\n const getAnchorTop = option$2('anchor_top');\n const getAnchorBottom = option$2('anchor_bottom');\n const isDraggableModal$1 = option$2('draggable_modal');\n const useStatusBar = option$2('statusbar');\n const useElementPath = option$2('elementpath');\n const useBranding = option$2('branding');\n const getResize = option$2('resize');\n const getPasteAsText = option$2('paste_as_text');\n const getSidebarShow = option$2('sidebar_show');\n const promotionEnabled = option$2('promotion');\n const isSkinDisabled = editor => editor.options.get('skin') === false;\n const isMenubarEnabled = editor => editor.options.get('menubar') !== false;\n const getSkinUrl = editor => {\n const skinUrl = editor.options.get('skin_url');\n if (isSkinDisabled(editor)) {\n return skinUrl;\n } else {\n if (skinUrl) {\n return editor.documentBaseURI.toAbsolute(skinUrl);\n } else {\n const skin = editor.options.get('skin');\n return global$6.baseURL + '/skins/ui/' + skin;\n }\n }\n };\n const getLineHeightFormats = editor => editor.options.get('line_height_formats').split(' ');\n const isToolbarEnabled = editor => {\n const toolbar = getToolbar(editor);\n const isToolbarString = isString(toolbar);\n const isToolbarObjectArray = isArray(toolbar) && toolbar.length > 0;\n return !isMultipleToolbars(editor) && (isToolbarObjectArray || isToolbarString || toolbar === true);\n };\n const getMultipleToolbarsOption = editor => {\n const toolbars = range$2(9, num => editor.options.get('toolbar' + (num + 1)));\n const toolbarArray = filter$2(toolbars, isString);\n return someIf(toolbarArray.length > 0, toolbarArray);\n };\n const isMultipleToolbars = editor => getMultipleToolbarsOption(editor).fold(() => {\n const toolbar = getToolbar(editor);\n return isArrayOf(toolbar, isString) && toolbar.length > 0;\n }, always);\n const isToolbarLocationBottom = editor => getToolbarLocation(editor) === ToolbarLocation$1.bottom;\n const fixedContainerTarget = editor => {\n var _a;\n if (!editor.inline) {\n return Optional.none();\n }\n const selector = (_a = fixedContainerSelector(editor)) !== null && _a !== void 0 ? _a : '';\n if (selector.length > 0) {\n return descendant(body(), selector);\n }\n const element = fixedToolbarContainerTarget(editor);\n if (isNonNullable(element)) {\n return Optional.some(SugarElement.fromDom(element));\n }\n return Optional.none();\n };\n const useFixedContainer = editor => editor.inline && fixedContainerTarget(editor).isSome();\n const getUiContainer = editor => {\n const fixedContainer = fixedContainerTarget(editor);\n return fixedContainer.getOrThunk(() => getContentContainer(getRootNode(SugarElement.fromDom(editor.getElement()))));\n };\n const isDistractionFree = editor => editor.inline && !isMenubarEnabled(editor) && !isToolbarEnabled(editor) && !isMultipleToolbars(editor);\n const isStickyToolbar = editor => {\n const isStickyToolbar = editor.options.get('toolbar_sticky');\n return (isStickyToolbar || editor.inline) && !useFixedContainer(editor) && !isDistractionFree(editor);\n };\n const getMenus = editor => {\n const menu = editor.options.get('menu');\n return map$1(menu, menu => ({\n ...menu,\n items: menu.items\n }));\n };\n\n var Options = /*#__PURE__*/Object.freeze({\n __proto__: null,\n get ToolbarMode () { return ToolbarMode$1; },\n get ToolbarLocation () { return ToolbarLocation$1; },\n register: register$e,\n getSkinUrl: getSkinUrl,\n isReadOnly: isReadOnly,\n isSkinDisabled: isSkinDisabled,\n getHeightOption: getHeightOption,\n getWidthOption: getWidthOption,\n getMinWidthOption: getMinWidthOption,\n getMinHeightOption: getMinHeightOption,\n getMaxWidthOption: getMaxWidthOption,\n getMaxHeightOption: getMaxHeightOption,\n getUserStyleFormats: getUserStyleFormats,\n shouldMergeStyleFormats: shouldMergeStyleFormats,\n shouldAutoHideStyleFormats: shouldAutoHideStyleFormats,\n getLineHeightFormats: getLineHeightFormats,\n getContentLanguages: getContentLanguages,\n getRemovedMenuItems: getRemovedMenuItems,\n isMenubarEnabled: isMenubarEnabled,\n isMultipleToolbars: isMultipleToolbars,\n isToolbarEnabled: isToolbarEnabled,\n isToolbarPersist: isToolbarPersist,\n getMultipleToolbarsOption: getMultipleToolbarsOption,\n getUiContainer: getUiContainer,\n useFixedContainer: useFixedContainer,\n getToolbarMode: getToolbarMode,\n isDraggableModal: isDraggableModal$1,\n isDistractionFree: isDistractionFree,\n isStickyToolbar: isStickyToolbar,\n getStickyToolbarOffset: getStickyToolbarOffset,\n getToolbarLocation: getToolbarLocation,\n isToolbarLocationBottom: isToolbarLocationBottom,\n getToolbarGroups: getToolbarGroups,\n getMenus: getMenus,\n getMenubar: getMenubar,\n getToolbar: getToolbar,\n getFilePickerCallback: getFilePickerCallback,\n getFilePickerTypes: getFilePickerTypes,\n useTypeaheadUrls: useTypeaheadUrls,\n getAnchorTop: getAnchorTop,\n getAnchorBottom: getAnchorBottom,\n getFilePickerValidatorHandler: getFilePickerValidatorHandler,\n useStatusBar: useStatusBar,\n useElementPath: useElementPath,\n promotionEnabled: promotionEnabled,\n useBranding: useBranding,\n getResize: getResize,\n getPasteAsText: getPasteAsText,\n getSidebarShow: getSidebarShow\n });\n\n const autocompleteSelector = '[data-mce-autocompleter]';\n const detect = elm => closest$1(elm, autocompleteSelector);\n const findIn = elm => descendant(elm, autocompleteSelector);\n\n const setup$e = (api, editor) => {\n const redirectKeyToItem = (item, e) => {\n emitWith(item, keydown(), { raw: e });\n };\n const getItem = () => api.getMenu().bind(Highlighting.getHighlighted);\n editor.on('keydown', e => {\n const keyCode = e.which;\n if (!api.isActive()) {\n return;\n }\n if (api.isMenuOpen()) {\n if (keyCode === 13) {\n getItem().each(emitExecute);\n e.preventDefault();\n } else if (keyCode === 40) {\n getItem().fold(() => {\n api.getMenu().each(Highlighting.highlightFirst);\n }, item => {\n redirectKeyToItem(item, e);\n });\n e.preventDefault();\n e.stopImmediatePropagation();\n } else if (keyCode === 37 || keyCode === 38 || keyCode === 39) {\n getItem().each(item => {\n redirectKeyToItem(item, e);\n e.preventDefault();\n e.stopImmediatePropagation();\n });\n }\n } else {\n if (keyCode === 13 || keyCode === 38 || keyCode === 40) {\n api.cancelIfNecessary();\n }\n }\n });\n editor.on('NodeChange', e => {\n if (api.isActive() && !api.isProcessingAction() && detect(SugarElement.fromDom(e.element)).isNone()) {\n api.cancelIfNecessary();\n }\n });\n };\n const AutocompleterEditorEvents = { setup: setup$e };\n\n var ItemResponse;\n (function (ItemResponse) {\n ItemResponse[ItemResponse['CLOSE_ON_EXECUTE'] = 0] = 'CLOSE_ON_EXECUTE';\n ItemResponse[ItemResponse['BUBBLE_TO_SANDBOX'] = 1] = 'BUBBLE_TO_SANDBOX';\n }(ItemResponse || (ItemResponse = {})));\n var ItemResponse$1 = ItemResponse;\n\n const navClass = 'tox-menu-nav__js';\n const selectableClass = 'tox-collection__item';\n const colorClass = 'tox-swatch';\n const presetClasses = {\n normal: navClass,\n color: colorClass\n };\n const tickedClass = 'tox-collection__item--enabled';\n const groupHeadingClass = 'tox-collection__group-heading';\n const iconClass = 'tox-collection__item-icon';\n const textClass = 'tox-collection__item-label';\n const accessoryClass = 'tox-collection__item-accessory';\n const caretClass = 'tox-collection__item-caret';\n const checkmarkClass = 'tox-collection__item-checkmark';\n const activeClass = 'tox-collection__item--active';\n const containerClass = 'tox-collection__item-container';\n const containerColumnClass = 'tox-collection__item-container--column';\n const containerRowClass = 'tox-collection__item-container--row';\n const containerAlignRightClass = 'tox-collection__item-container--align-right';\n const containerAlignLeftClass = 'tox-collection__item-container--align-left';\n const containerValignTopClass = 'tox-collection__item-container--valign-top';\n const containerValignMiddleClass = 'tox-collection__item-container--valign-middle';\n const containerValignBottomClass = 'tox-collection__item-container--valign-bottom';\n const classForPreset = presets => get$g(presetClasses, presets).getOr(navClass);\n\n const forMenu = presets => {\n if (presets === 'color') {\n return 'tox-swatches';\n } else {\n return 'tox-menu';\n }\n };\n const classes = presets => ({\n backgroundMenu: 'tox-background-menu',\n selectedMenu: 'tox-selected-menu',\n selectedItem: 'tox-collection__item--active',\n hasIcons: 'tox-menu--has-icons',\n menu: forMenu(presets),\n tieredMenu: 'tox-tiered-menu'\n });\n\n const markers = presets => {\n const menuClasses = classes(presets);\n return {\n backgroundMenu: menuClasses.backgroundMenu,\n selectedMenu: menuClasses.selectedMenu,\n menu: menuClasses.menu,\n selectedItem: menuClasses.selectedItem,\n item: classForPreset(presets)\n };\n };\n const dom$1 = (hasIcons, columns, presets) => {\n const menuClasses = classes(presets);\n return {\n tag: 'div',\n classes: flatten([\n [\n menuClasses.menu,\n `tox-menu-${ columns }-column`\n ],\n hasIcons ? [menuClasses.hasIcons] : []\n ])\n };\n };\n const components = [Menu.parts.items({})];\n const part = (hasIcons, columns, presets) => {\n const menuClasses = classes(presets);\n const d = {\n tag: 'div',\n classes: flatten([[menuClasses.tieredMenu]])\n };\n return {\n dom: d,\n markers: markers(presets)\n };\n };\n\n const schema$l = constant$1([\n option$3('data'),\n defaulted('inputAttributes', {}),\n defaulted('inputStyles', {}),\n defaulted('tag', 'input'),\n defaulted('inputClasses', []),\n onHandler('onSetValue'),\n defaulted('styles', {}),\n defaulted('eventOrder', {}),\n field('inputBehaviours', [\n Representing,\n Focusing\n ]),\n defaulted('selectOnFocus', true)\n ]);\n const focusBehaviours = detail => derive$1([Focusing.config({\n onFocus: !detail.selectOnFocus ? noop : component => {\n const input = component.element;\n const value = get$6(input);\n input.dom.setSelectionRange(0, value.length);\n }\n })]);\n const behaviours = detail => ({\n ...focusBehaviours(detail),\n ...augment(detail.inputBehaviours, [Representing.config({\n store: {\n mode: 'manual',\n ...detail.data.map(data => ({ initialValue: data })).getOr({}),\n getValue: input => {\n return get$6(input.element);\n },\n setValue: (input, data) => {\n const current = get$6(input.element);\n if (current !== data) {\n set$5(input.element, data);\n }\n }\n },\n onSetValue: detail.onSetValue\n })])\n });\n const dom = detail => ({\n tag: detail.tag,\n attributes: {\n type: 'text',\n ...detail.inputAttributes\n },\n styles: detail.inputStyles,\n classes: detail.inputClasses\n });\n\n const factory$l = (detail, _spec) => ({\n uid: detail.uid,\n dom: dom(detail),\n components: [],\n behaviours: behaviours(detail),\n eventOrder: detail.eventOrder\n });\n const Input = single({\n name: 'Input',\n configFields: schema$l(),\n factory: factory$l\n });\n\n const refetchTriggerEvent = generate$6('refetch-trigger-event');\n const redirectMenuItemInteractionEvent = generate$6('redirect-menu-item-interaction');\n\n const menuSearcherClass = 'tox-menu__searcher';\n const findWithinSandbox = sandboxComp => {\n return descendant(sandboxComp.element, `.${ menuSearcherClass }`).bind(inputElem => sandboxComp.getSystem().getByDom(inputElem).toOptional());\n };\n const findWithinMenu = findWithinSandbox;\n const restoreState = (inputComp, searcherState) => {\n Representing.setValue(inputComp, searcherState.fetchPattern);\n inputComp.element.dom.selectionStart = searcherState.selectionStart;\n inputComp.element.dom.selectionEnd = searcherState.selectionEnd;\n };\n const saveState = inputComp => {\n const fetchPattern = Representing.getValue(inputComp);\n const selectionStart = inputComp.element.dom.selectionStart;\n const selectionEnd = inputComp.element.dom.selectionEnd;\n return {\n fetchPattern,\n selectionStart,\n selectionEnd\n };\n };\n const setActiveDescendant = (inputComp, active) => {\n getOpt(active.element, 'id').each(id => set$9(inputComp.element, 'aria-activedescendant', id));\n };\n const renderMenuSearcher = spec => {\n const handleByBrowser = (comp, se) => {\n se.cut();\n return Optional.none();\n };\n const handleByHighlightedItem = (comp, se) => {\n const eventData = {\n interactionEvent: se.event,\n eventType: se.event.raw.type\n };\n emitWith(comp, redirectMenuItemInteractionEvent, eventData);\n return Optional.some(true);\n };\n const customSearcherEventsName = 'searcher-events';\n return {\n dom: {\n tag: 'div',\n classes: [selectableClass]\n },\n components: [Input.sketch({\n inputClasses: [\n menuSearcherClass,\n 'tox-textfield'\n ],\n inputAttributes: {\n ...spec.placeholder.map(placeholder => ({ placeholder: spec.i18n(placeholder) })).getOr({}),\n 'type': 'search',\n 'aria-autocomplete': 'list'\n },\n inputBehaviours: derive$1([\n config(customSearcherEventsName, [\n run$1(input(), inputComp => {\n emit(inputComp, refetchTriggerEvent);\n }),\n run$1(keydown(), (inputComp, se) => {\n if (se.event.raw.key === 'Escape') {\n se.stop();\n }\n })\n ]),\n Keying.config({\n mode: 'special',\n onLeft: handleByBrowser,\n onRight: handleByBrowser,\n onSpace: handleByBrowser,\n onEnter: handleByHighlightedItem,\n onEscape: handleByHighlightedItem,\n onUp: handleByHighlightedItem,\n onDown: handleByHighlightedItem\n })\n ]),\n eventOrder: {\n keydown: [\n customSearcherEventsName,\n Keying.name()\n ]\n }\n })]\n };\n };\n\n const searchResultsClass = 'tox-collection--results__js';\n const augmentWithAria = item => {\n var _a;\n if (item.dom) {\n return {\n ...item,\n dom: {\n ...item.dom,\n attributes: {\n ...(_a = item.dom.attributes) !== null && _a !== void 0 ? _a : {},\n 'id': generate$6('aria-item-search-result-id'),\n 'aria-selected': 'false'\n }\n }\n };\n } else {\n return item;\n }\n };\n\n const chunk = (rowDom, numColumns) => items => {\n const chunks = chunk$1(items, numColumns);\n return map$2(chunks, c => ({\n dom: rowDom,\n components: c\n }));\n };\n const forSwatch = columns => ({\n dom: {\n tag: 'div',\n classes: [\n 'tox-menu',\n 'tox-swatches-menu'\n ]\n },\n components: [{\n dom: {\n tag: 'div',\n classes: ['tox-swatches']\n },\n components: [Menu.parts.items({\n preprocess: columns !== 'auto' ? chunk({\n tag: 'div',\n classes: ['tox-swatches__row']\n }, columns) : identity\n })]\n }]\n });\n const forToolbar = columns => ({\n dom: {\n tag: 'div',\n classes: [\n 'tox-menu',\n 'tox-collection',\n 'tox-collection--toolbar',\n 'tox-collection--toolbar-lg'\n ]\n },\n components: [Menu.parts.items({\n preprocess: chunk({\n tag: 'div',\n classes: ['tox-collection__group']\n }, columns)\n })]\n });\n const preprocessCollection = (items, isSeparator) => {\n const allSplits = [];\n let currentSplit = [];\n each$1(items, (item, i) => {\n if (isSeparator(item, i)) {\n if (currentSplit.length > 0) {\n allSplits.push(currentSplit);\n }\n currentSplit = [];\n if (has$2(item.dom, 'innerHtml') || item.components && item.components.length > 0) {\n currentSplit.push(item);\n }\n } else {\n currentSplit.push(item);\n }\n });\n if (currentSplit.length > 0) {\n allSplits.push(currentSplit);\n }\n return map$2(allSplits, s => ({\n dom: {\n tag: 'div',\n classes: ['tox-collection__group']\n },\n components: s\n }));\n };\n const insertItemsPlaceholder = (columns, initItems, onItem) => {\n return Menu.parts.items({\n preprocess: rawItems => {\n const enrichedItems = map$2(rawItems, onItem);\n if (columns !== 'auto' && columns > 1) {\n return chunk({\n tag: 'div',\n classes: ['tox-collection__group']\n }, columns)(enrichedItems);\n } else {\n return preprocessCollection(enrichedItems, (_item, i) => initItems[i].type === 'separator');\n }\n }\n });\n };\n const forCollection = (columns, initItems, _hasIcons = true) => ({\n dom: {\n tag: 'div',\n classes: [\n 'tox-menu',\n 'tox-collection'\n ].concat(columns === 1 ? ['tox-collection--list'] : ['tox-collection--grid'])\n },\n components: [insertItemsPlaceholder(columns, initItems, identity)]\n });\n const forCollectionWithSearchResults = (columns, initItems, _hasIcons = true) => {\n const ariaControlsSearchResults = generate$6('aria-controls-search-results');\n return {\n dom: {\n tag: 'div',\n classes: [\n 'tox-menu',\n 'tox-collection',\n searchResultsClass\n ].concat(columns === 1 ? ['tox-collection--list'] : ['tox-collection--grid']),\n attributes: { id: ariaControlsSearchResults }\n },\n components: [insertItemsPlaceholder(columns, initItems, augmentWithAria)]\n };\n };\n const forCollectionWithSearchField = (columns, initItems, searchField) => {\n const ariaControlsSearchResults = generate$6('aria-controls-search-results');\n return {\n dom: {\n tag: 'div',\n classes: [\n 'tox-menu',\n 'tox-collection'\n ].concat(columns === 1 ? ['tox-collection--list'] : ['tox-collection--grid'])\n },\n components: [\n renderMenuSearcher({\n i18n: global$8.translate,\n placeholder: searchField.placeholder\n }),\n {\n dom: {\n tag: 'div',\n classes: [\n ...columns === 1 ? ['tox-collection--list'] : ['tox-collection--grid'],\n searchResultsClass\n ],\n attributes: { id: ariaControlsSearchResults }\n },\n components: [insertItemsPlaceholder(columns, initItems, augmentWithAria)]\n }\n ]\n };\n };\n const forHorizontalCollection = (initItems, _hasIcons = true) => ({\n dom: {\n tag: 'div',\n classes: [\n 'tox-collection',\n 'tox-collection--horizontal'\n ]\n },\n components: [Menu.parts.items({ preprocess: items => preprocessCollection(items, (_item, i) => initItems[i].type === 'separator') })]\n });\n\n const menuHasIcons = xs => exists(xs, item => 'icon' in item && item.icon !== undefined);\n const handleError = error => {\n console.error(formatError(error));\n console.log(error);\n return Optional.none();\n };\n const createHorizontalPartialMenuWithAlloyItems = (value, _hasIcons, items, _columns, _menuLayout) => {\n const structure = forHorizontalCollection(items);\n return {\n value,\n dom: structure.dom,\n components: structure.components,\n items\n };\n };\n const createPartialMenuWithAlloyItems = (value, hasIcons, items, columns, menuLayout) => {\n const getNormalStructure = () => {\n if (menuLayout.menuType !== 'searchable') {\n return forCollection(columns, items);\n } else {\n return menuLayout.searchMode.searchMode === 'search-with-field' ? forCollectionWithSearchField(columns, items, menuLayout.searchMode) : forCollectionWithSearchResults(columns, items);\n }\n };\n if (menuLayout.menuType === 'color') {\n const structure = forSwatch(columns);\n return {\n value,\n dom: structure.dom,\n components: structure.components,\n items\n };\n } else if (menuLayout.menuType === 'normal' && columns === 'auto') {\n const structure = forCollection(columns, items);\n return {\n value,\n dom: structure.dom,\n components: structure.components,\n items\n };\n } else if (menuLayout.menuType === 'normal' || menuLayout.menuType === 'searchable') {\n const structure = getNormalStructure();\n return {\n value,\n dom: structure.dom,\n components: structure.components,\n items\n };\n } else if (menuLayout.menuType === 'listpreview' && columns !== 'auto') {\n const structure = forToolbar(columns);\n return {\n value,\n dom: structure.dom,\n components: structure.components,\n items\n };\n } else {\n return {\n value,\n dom: dom$1(hasIcons, columns, menuLayout.menuType),\n components: components,\n items\n };\n }\n };\n\n const type = requiredString('type');\n const name$1 = requiredString('name');\n const label = requiredString('label');\n const text$1 = requiredString('text');\n const title = requiredString('title');\n const icon = requiredString('icon');\n const value$1 = requiredString('value');\n const fetch$1 = requiredFunction('fetch');\n const getSubmenuItems = requiredFunction('getSubmenuItems');\n const onAction = requiredFunction('onAction');\n const onItemAction = requiredFunction('onItemAction');\n const onSetup = defaultedFunction('onSetup', () => noop);\n const optionalName = optionString('name');\n const optionalText = optionString('text');\n const optionalIcon = optionString('icon');\n const optionalTooltip = optionString('tooltip');\n const optionalLabel = optionString('label');\n const optionalShortcut = optionString('shortcut');\n const optionalSelect = optionFunction('select');\n const active = defaultedBoolean('active', false);\n const borderless = defaultedBoolean('borderless', false);\n const enabled = defaultedBoolean('enabled', true);\n const primary = defaultedBoolean('primary', false);\n const defaultedColumns = num => defaulted('columns', num);\n const defaultedMeta = defaulted('meta', {});\n const defaultedOnAction = defaultedFunction('onAction', noop);\n const defaultedType = type => defaultedString('type', type);\n const generatedName = namePrefix => field$1('name', 'name', defaultedThunk(() => generate$6(`${ namePrefix }-name`)), string);\n const generatedValue = valuePrefix => field$1('value', 'value', defaultedThunk(() => generate$6(`${ valuePrefix }-value`)), anyValue());\n\n const separatorMenuItemSchema = objOf([\n type,\n optionalText\n ]);\n const createSeparatorMenuItem = spec => asRaw('separatormenuitem', separatorMenuItemSchema, spec);\n\n const autocompleterItemSchema = objOf([\n defaultedType('autocompleteitem'),\n active,\n enabled,\n defaultedMeta,\n value$1,\n optionalText,\n optionalIcon\n ]);\n const createSeparatorItem = spec => asRaw('Autocompleter.Separator', separatorMenuItemSchema, spec);\n const createAutocompleterItem = spec => asRaw('Autocompleter.Item', autocompleterItemSchema, spec);\n\n const baseToolbarButtonFields = [\n enabled,\n optionalTooltip,\n optionalIcon,\n optionalText,\n onSetup\n ];\n const toolbarButtonSchema = objOf([\n type,\n onAction\n ].concat(baseToolbarButtonFields));\n const createToolbarButton = spec => asRaw('toolbarbutton', toolbarButtonSchema, spec);\n\n const baseToolbarToggleButtonFields = [active].concat(baseToolbarButtonFields);\n const toggleButtonSchema = objOf(baseToolbarToggleButtonFields.concat([\n type,\n onAction\n ]));\n const createToggleButton = spec => asRaw('ToggleButton', toggleButtonSchema, spec);\n\n const contextBarFields = [\n defaultedFunction('predicate', never),\n defaultedStringEnum('scope', 'node', [\n 'node',\n 'editor'\n ]),\n defaultedStringEnum('position', 'selection', [\n 'node',\n 'selection',\n 'line'\n ])\n ];\n\n const contextButtonFields = baseToolbarButtonFields.concat([\n defaultedType('contextformbutton'),\n primary,\n onAction,\n customField('original', identity)\n ]);\n const contextToggleButtonFields = baseToolbarToggleButtonFields.concat([\n defaultedType('contextformbutton'),\n primary,\n onAction,\n customField('original', identity)\n ]);\n const launchButtonFields = baseToolbarButtonFields.concat([defaultedType('contextformbutton')]);\n const launchToggleButtonFields = baseToolbarToggleButtonFields.concat([defaultedType('contextformtogglebutton')]);\n const toggleOrNormal = choose$1('type', {\n contextformbutton: contextButtonFields,\n contextformtogglebutton: contextToggleButtonFields\n });\n const contextFormSchema = objOf([\n defaultedType('contextform'),\n defaultedFunction('initValue', constant$1('')),\n optionalLabel,\n requiredArrayOf('commands', toggleOrNormal),\n optionOf('launch', choose$1('type', {\n contextformbutton: launchButtonFields,\n contextformtogglebutton: launchToggleButtonFields\n }))\n ].concat(contextBarFields));\n const createContextForm = spec => asRaw('ContextForm', contextFormSchema, spec);\n\n const contextToolbarSchema = objOf([\n defaultedType('contexttoolbar'),\n requiredString('items')\n ].concat(contextBarFields));\n const createContextToolbar = spec => asRaw('ContextToolbar', contextToolbarSchema, spec);\n\n const cardImageFields = [\n type,\n requiredString('src'),\n optionString('alt'),\n defaultedArrayOf('classes', [], string)\n ];\n const cardImageSchema = objOf(cardImageFields);\n\n const cardTextFields = [\n type,\n text$1,\n optionalName,\n defaultedArrayOf('classes', ['tox-collection__item-label'], string)\n ];\n const cardTextSchema = objOf(cardTextFields);\n\n const itemSchema$1 = valueThunk(() => choose$2('type', {\n cardimage: cardImageSchema,\n cardtext: cardTextSchema,\n cardcontainer: cardContainerSchema\n }));\n const cardContainerSchema = objOf([\n type,\n defaultedString('direction', 'horizontal'),\n defaultedString('align', 'left'),\n defaultedString('valign', 'middle'),\n requiredArrayOf('items', itemSchema$1)\n ]);\n\n const commonMenuItemFields = [\n enabled,\n optionalText,\n optionalShortcut,\n generatedValue('menuitem'),\n defaultedMeta\n ];\n\n const cardMenuItemSchema = objOf([\n type,\n optionalLabel,\n requiredArrayOf('items', itemSchema$1),\n onSetup,\n defaultedOnAction\n ].concat(commonMenuItemFields));\n const createCardMenuItem = spec => asRaw('cardmenuitem', cardMenuItemSchema, spec);\n\n const choiceMenuItemSchema = objOf([\n type,\n active,\n optionalIcon\n ].concat(commonMenuItemFields));\n const createChoiceMenuItem = spec => asRaw('choicemenuitem', choiceMenuItemSchema, spec);\n\n const baseFields = [\n type,\n requiredString('fancytype'),\n defaultedOnAction\n ];\n const insertTableFields = [defaulted('initData', {})].concat(baseFields);\n const colorSwatchFields = [defaultedObjOf('initData', {}, [\n defaultedBoolean('allowCustomColors', true),\n defaultedString('storageKey', 'default'),\n optionArrayOf('colors', anyValue())\n ])].concat(baseFields);\n const fancyMenuItemSchema = choose$1('fancytype', {\n inserttable: insertTableFields,\n colorswatch: colorSwatchFields\n });\n const createFancyMenuItem = spec => asRaw('fancymenuitem', fancyMenuItemSchema, spec);\n\n const menuItemSchema = objOf([\n type,\n onSetup,\n defaultedOnAction,\n optionalIcon\n ].concat(commonMenuItemFields));\n const createMenuItem = spec => asRaw('menuitem', menuItemSchema, spec);\n\n const nestedMenuItemSchema = objOf([\n type,\n getSubmenuItems,\n onSetup,\n optionalIcon\n ].concat(commonMenuItemFields));\n const createNestedMenuItem = spec => asRaw('nestedmenuitem', nestedMenuItemSchema, spec);\n\n const toggleMenuItemSchema = objOf([\n type,\n optionalIcon,\n active,\n onSetup,\n onAction\n ].concat(commonMenuItemFields));\n const createToggleMenuItem = spec => asRaw('togglemenuitem', toggleMenuItemSchema, spec);\n\n const detectSize = (comp, margin, selectorClass) => {\n const descendants$1 = descendants(comp.element, '.' + selectorClass);\n if (descendants$1.length > 0) {\n const columnLength = findIndex$1(descendants$1, c => {\n const thisTop = c.dom.getBoundingClientRect().top;\n const cTop = descendants$1[0].dom.getBoundingClientRect().top;\n return Math.abs(thisTop - cTop) > margin;\n }).getOr(descendants$1.length);\n return Optional.some({\n numColumns: columnLength,\n numRows: Math.ceil(descendants$1.length / columnLength)\n });\n } else {\n return Optional.none();\n }\n };\n\n const namedEvents = (name, handlers) => derive$1([config(name, handlers)]);\n const unnamedEvents = handlers => namedEvents(generate$6('unnamed-events'), handlers);\n const SimpleBehaviours = {\n namedEvents,\n unnamedEvents\n };\n\n const ExclusivityChannel = generate$6('tooltip.exclusive');\n const ShowTooltipEvent = generate$6('tooltip.show');\n const HideTooltipEvent = generate$6('tooltip.hide');\n\n const hideAllExclusive = (component, _tConfig, _tState) => {\n component.getSystem().broadcastOn([ExclusivityChannel], {});\n };\n const setComponents = (component, tConfig, tState, specs) => {\n tState.getTooltip().each(tooltip => {\n if (tooltip.getSystem().isConnected()) {\n Replacing.set(tooltip, specs);\n }\n });\n };\n\n var TooltippingApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n hideAllExclusive: hideAllExclusive,\n setComponents: setComponents\n });\n\n const events$9 = (tooltipConfig, state) => {\n const hide = comp => {\n state.getTooltip().each(p => {\n detach(p);\n tooltipConfig.onHide(comp, p);\n state.clearTooltip();\n });\n state.clearTimer();\n };\n const show = comp => {\n if (!state.isShowing()) {\n hideAllExclusive(comp);\n const sink = tooltipConfig.lazySink(comp).getOrDie();\n const popup = comp.getSystem().build({\n dom: tooltipConfig.tooltipDom,\n components: tooltipConfig.tooltipComponents,\n events: derive$2(tooltipConfig.mode === 'normal' ? [\n run$1(mouseover(), _ => {\n emit(comp, ShowTooltipEvent);\n }),\n run$1(mouseout(), _ => {\n emit(comp, HideTooltipEvent);\n })\n ] : []),\n behaviours: derive$1([Replacing.config({})])\n });\n state.setTooltip(popup);\n attach(sink, popup);\n tooltipConfig.onShow(comp, popup);\n Positioning.position(sink, popup, { anchor: tooltipConfig.anchor(comp) });\n }\n };\n return derive$2(flatten([\n [\n run$1(ShowTooltipEvent, comp => {\n state.resetTimer(() => {\n show(comp);\n }, tooltipConfig.delay);\n }),\n run$1(HideTooltipEvent, comp => {\n state.resetTimer(() => {\n hide(comp);\n }, tooltipConfig.delay);\n }),\n run$1(receive(), (comp, message) => {\n const receivingData = message;\n if (!receivingData.universal) {\n if (contains$2(receivingData.channels, ExclusivityChannel)) {\n hide(comp);\n }\n }\n }),\n runOnDetached(comp => {\n hide(comp);\n })\n ],\n tooltipConfig.mode === 'normal' ? [\n run$1(focusin(), comp => {\n emit(comp, ShowTooltipEvent);\n }),\n run$1(postBlur(), comp => {\n emit(comp, HideTooltipEvent);\n }),\n run$1(mouseover(), comp => {\n emit(comp, ShowTooltipEvent);\n }),\n run$1(mouseout(), comp => {\n emit(comp, HideTooltipEvent);\n })\n ] : [\n run$1(highlight$1(), (comp, _se) => {\n emit(comp, ShowTooltipEvent);\n }),\n run$1(dehighlight$1(), comp => {\n emit(comp, HideTooltipEvent);\n })\n ]\n ]));\n };\n\n var ActiveTooltipping = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$9\n });\n\n var TooltippingSchema = [\n required$1('lazySink'),\n required$1('tooltipDom'),\n defaulted('exclusive', true),\n defaulted('tooltipComponents', []),\n defaulted('delay', 300),\n defaultedStringEnum('mode', 'normal', [\n 'normal',\n 'follow-highlight'\n ]),\n defaulted('anchor', comp => ({\n type: 'hotspot',\n hotspot: comp,\n layouts: {\n onLtr: constant$1([\n south$2,\n north$2,\n southeast$2,\n northeast$2,\n southwest$2,\n northwest$2\n ]),\n onRtl: constant$1([\n south$2,\n north$2,\n southeast$2,\n northeast$2,\n southwest$2,\n northwest$2\n ])\n }\n })),\n onHandler('onHide'),\n onHandler('onShow')\n ];\n\n const init$b = () => {\n const timer = value$2();\n const popup = value$2();\n const clearTimer = () => {\n timer.on(clearTimeout);\n };\n const resetTimer = (f, delay) => {\n clearTimer();\n timer.set(setTimeout(f, delay));\n };\n const readState = constant$1('not-implemented');\n return nu$8({\n getTooltip: popup.get,\n isShowing: popup.isSet,\n setTooltip: popup.set,\n clearTooltip: popup.clear,\n clearTimer,\n resetTimer,\n readState\n });\n };\n\n var TooltippingState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init$b\n });\n\n const Tooltipping = create$4({\n fields: TooltippingSchema,\n name: 'tooltipping',\n active: ActiveTooltipping,\n state: TooltippingState,\n apis: TooltippingApis\n });\n\n const escape = text => text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n\n const ReadOnlyChannel = 'silver.readonly';\n const ReadOnlyDataSchema = objOf([requiredBoolean('readonly')]);\n const broadcastReadonly = (uiRefs, readonly) => {\n const outerContainer = uiRefs.mainUi.outerContainer;\n const target = outerContainer.element;\n const motherships = [\n uiRefs.mainUi.mothership,\n ...uiRefs.uiMotherships\n ];\n if (readonly) {\n each$1(motherships, m => {\n m.broadcastOn([dismissPopups()], { target });\n });\n }\n each$1(motherships, m => {\n m.broadcastOn([ReadOnlyChannel], { readonly });\n });\n };\n const setupReadonlyModeSwitch = (editor, uiRefs) => {\n editor.on('init', () => {\n if (editor.mode.isReadOnly()) {\n broadcastReadonly(uiRefs, true);\n }\n });\n editor.on('SwitchMode', () => broadcastReadonly(uiRefs, editor.mode.isReadOnly()));\n if (isReadOnly(editor)) {\n editor.mode.set('readonly');\n }\n };\n const receivingConfig = () => Receiving.config({\n channels: {\n [ReadOnlyChannel]: {\n schema: ReadOnlyDataSchema,\n onReceive: (comp, data) => {\n Disabling.set(comp, data.readonly);\n }\n }\n }\n });\n\n const item = disabled => Disabling.config({\n disabled,\n disableClass: 'tox-collection__item--state-disabled'\n });\n const button = disabled => Disabling.config({ disabled });\n const splitButton = disabled => Disabling.config({\n disabled,\n disableClass: 'tox-tbtn--disabled'\n });\n const toolbarButton = disabled => Disabling.config({\n disabled,\n disableClass: 'tox-tbtn--disabled',\n useNative: false\n });\n const DisablingConfigs = {\n item,\n button,\n splitButton,\n toolbarButton\n };\n\n const runWithApi = (info, comp) => {\n const api = info.getApi(comp);\n return f => {\n f(api);\n };\n };\n const onControlAttached = (info, editorOffCell) => runOnAttached(comp => {\n const run = runWithApi(info, comp);\n run(api => {\n const onDestroy = info.onSetup(api);\n if (isFunction(onDestroy)) {\n editorOffCell.set(onDestroy);\n }\n });\n });\n const onControlDetached = (getApi, editorOffCell) => runOnDetached(comp => runWithApi(getApi, comp)(editorOffCell.get()));\n\n const onMenuItemExecute = (info, itemResponse) => runOnExecute$1((comp, simulatedEvent) => {\n runWithApi(info, comp)(info.onAction);\n if (!info.triggersSubmenu && itemResponse === ItemResponse$1.CLOSE_ON_EXECUTE) {\n if (comp.getSystem().isConnected()) {\n emit(comp, sandboxClose());\n }\n simulatedEvent.stop();\n }\n });\n const menuItemEventOrder = {\n [execute$5()]: [\n 'disabling',\n 'alloy.base.behaviour',\n 'toggling',\n 'item-events'\n ]\n };\n\n const componentRenderPipeline = cat;\n const renderCommonItem = (spec, structure, itemResponse, providersBackstage) => {\n const editorOffCell = Cell(noop);\n return {\n type: 'item',\n dom: structure.dom,\n components: componentRenderPipeline(structure.optComponents),\n data: spec.data,\n eventOrder: menuItemEventOrder,\n hasSubmenu: spec.triggersSubmenu,\n itemBehaviours: derive$1([\n config('item-events', [\n onMenuItemExecute(spec, itemResponse),\n onControlAttached(spec, editorOffCell),\n onControlDetached(spec, editorOffCell)\n ]),\n DisablingConfigs.item(() => !spec.enabled || providersBackstage.isDisabled()),\n receivingConfig(),\n Replacing.config({})\n ].concat(spec.itemBehaviours))\n };\n };\n const buildData = source => ({\n value: source.value,\n meta: {\n text: source.text.getOr(''),\n ...source.meta\n }\n });\n\n const convertText = source => {\n const isMac = global$5.os.isMacOS() || global$5.os.isiOS();\n const mac = {\n alt: '\\u2325',\n ctrl: '\\u2303',\n shift: '\\u21E7',\n meta: '\\u2318',\n access: '\\u2303\\u2325'\n };\n const other = {\n meta: 'Ctrl',\n access: 'Shift+Alt'\n };\n const replace = isMac ? mac : other;\n const shortcut = source.split('+');\n const updated = map$2(shortcut, segment => {\n const search = segment.toLowerCase().trim();\n return has$2(replace, search) ? replace[search] : segment;\n });\n return isMac ? updated.join('') : updated.join('+');\n };\n\n const renderIcon$1 = (name, icons, classes = [iconClass]) => render$3(name, {\n tag: 'div',\n classes\n }, icons);\n const renderText = text => ({\n dom: {\n tag: 'div',\n classes: [textClass]\n },\n components: [text$2(global$8.translate(text))]\n });\n const renderHtml = (html, classes) => ({\n dom: {\n tag: 'div',\n classes,\n innerHtml: html\n }\n });\n const renderStyledText = (style, text) => ({\n dom: {\n tag: 'div',\n classes: [textClass]\n },\n components: [{\n dom: {\n tag: style.tag,\n styles: style.styles\n },\n components: [text$2(global$8.translate(text))]\n }]\n });\n const renderShortcut = shortcut => ({\n dom: {\n tag: 'div',\n classes: [accessoryClass]\n },\n components: [text$2(convertText(shortcut))]\n });\n const renderCheckmark = icons => renderIcon$1('checkmark', icons, [checkmarkClass]);\n const renderSubmenuCaret = icons => renderIcon$1('chevron-right', icons, [caretClass]);\n const renderDownwardsCaret = icons => renderIcon$1('chevron-down', icons, [caretClass]);\n const renderContainer = (container, components) => {\n const directionClass = container.direction === 'vertical' ? containerColumnClass : containerRowClass;\n const alignClass = container.align === 'left' ? containerAlignLeftClass : containerAlignRightClass;\n const getValignClass = () => {\n switch (container.valign) {\n case 'top':\n return containerValignTopClass;\n case 'middle':\n return containerValignMiddleClass;\n case 'bottom':\n return containerValignBottomClass;\n }\n };\n return {\n dom: {\n tag: 'div',\n classes: [\n containerClass,\n directionClass,\n alignClass,\n getValignClass()\n ]\n },\n components\n };\n };\n const renderImage = (src, classes, alt) => ({\n dom: {\n tag: 'img',\n classes,\n attributes: {\n src,\n alt: alt.getOr('')\n }\n }\n });\n\n const renderColorStructure = (item, providerBackstage, fallbackIcon) => {\n const colorPickerCommand = 'custom';\n const removeColorCommand = 'remove';\n const itemText = item.ariaLabel;\n const itemValue = item.value;\n const iconSvg = item.iconContent.map(name => getOr(name, providerBackstage.icons, fallbackIcon));\n const getDom = () => {\n const common = colorClass;\n const icon = iconSvg.getOr('');\n const attributes = itemText.map(text => ({ title: providerBackstage.translate(text) })).getOr({});\n const baseDom = {\n tag: 'div',\n attributes,\n classes: [common]\n };\n if (itemValue === colorPickerCommand) {\n return {\n ...baseDom,\n tag: 'button',\n classes: [\n ...baseDom.classes,\n 'tox-swatches__picker-btn'\n ],\n innerHtml: icon\n };\n } else if (itemValue === removeColorCommand) {\n return {\n ...baseDom,\n classes: [\n ...baseDom.classes,\n 'tox-swatch--remove'\n ],\n innerHtml: icon\n };\n } else if (isNonNullable(itemValue)) {\n return {\n ...baseDom,\n attributes: {\n ...baseDom.attributes,\n 'data-mce-color': itemValue\n },\n styles: { 'background-color': itemValue },\n innerHtml: icon\n };\n } else {\n return baseDom;\n }\n };\n return {\n dom: getDom(),\n optComponents: []\n };\n };\n const renderItemDomStructure = ariaLabel => {\n const domTitle = ariaLabel.map(label => ({ attributes: { title: global$8.translate(label) } })).getOr({});\n return {\n tag: 'div',\n classes: [\n navClass,\n selectableClass\n ],\n ...domTitle\n };\n };\n const renderNormalItemStructure = (info, providersBackstage, renderIcons, fallbackIcon) => {\n const iconSpec = {\n tag: 'div',\n classes: [iconClass]\n };\n const renderIcon = iconName => render$3(iconName, iconSpec, providersBackstage.icons, fallbackIcon);\n const renderEmptyIcon = () => Optional.some({ dom: iconSpec });\n const leftIcon = renderIcons ? info.iconContent.map(renderIcon).orThunk(renderEmptyIcon) : Optional.none();\n const checkmark = info.checkMark;\n const textRender = Optional.from(info.meta).fold(() => renderText, meta => has$2(meta, 'style') ? curry(renderStyledText, meta.style) : renderText);\n const content = info.htmlContent.fold(() => info.textContent.map(textRender), html => Optional.some(renderHtml(html, [textClass])));\n const menuItem = {\n dom: renderItemDomStructure(info.ariaLabel),\n optComponents: [\n leftIcon,\n content,\n info.shortcutContent.map(renderShortcut),\n checkmark,\n info.caret\n ]\n };\n return menuItem;\n };\n const renderItemStructure = (info, providersBackstage, renderIcons, fallbackIcon = Optional.none()) => {\n if (info.presets === 'color') {\n return renderColorStructure(info, providersBackstage, fallbackIcon);\n } else {\n return renderNormalItemStructure(info, providersBackstage, renderIcons, fallbackIcon);\n }\n };\n\n const tooltipBehaviour = (meta, sharedBackstage) => get$g(meta, 'tooltipWorker').map(tooltipWorker => [Tooltipping.config({\n lazySink: sharedBackstage.getSink,\n tooltipDom: {\n tag: 'div',\n classes: ['tox-tooltip-worker-container']\n },\n tooltipComponents: [],\n anchor: comp => ({\n type: 'submenu',\n item: comp,\n overrides: { maxHeightFunction: expandable$1 }\n }),\n mode: 'follow-highlight',\n onShow: (component, _tooltip) => {\n tooltipWorker(elm => {\n Tooltipping.setComponents(component, [external$1({ element: SugarElement.fromDom(elm) })]);\n });\n }\n })]).getOr([]);\n const encodeText = text => global$7.DOM.encode(text);\n const replaceText = (text, matchText) => {\n const translated = global$8.translate(text);\n const encoded = encodeText(translated);\n if (matchText.length > 0) {\n const escapedMatchRegex = new RegExp(escape(matchText), 'gi');\n return encoded.replace(escapedMatchRegex, match => `${ match }`);\n } else {\n return encoded;\n }\n };\n const renderAutocompleteItem = (spec, matchText, useText, presets, onItemValueHandler, itemResponse, sharedBackstage, renderIcons = true) => {\n const structure = renderItemStructure({\n presets,\n textContent: Optional.none(),\n htmlContent: useText ? spec.text.map(text => replaceText(text, matchText)) : Optional.none(),\n ariaLabel: spec.text,\n iconContent: spec.icon,\n shortcutContent: Optional.none(),\n checkMark: Optional.none(),\n caret: Optional.none(),\n value: spec.value\n }, sharedBackstage.providers, renderIcons, spec.icon);\n return renderCommonItem({\n data: buildData(spec),\n enabled: spec.enabled,\n getApi: constant$1({}),\n onAction: _api => onItemValueHandler(spec.value, spec.meta),\n onSetup: constant$1(noop),\n triggersSubmenu: false,\n itemBehaviours: tooltipBehaviour(spec.meta, sharedBackstage)\n }, structure, itemResponse, sharedBackstage.providers);\n };\n\n const render$2 = (items, extras) => map$2(items, item => {\n switch (item.type) {\n case 'cardcontainer':\n return renderContainer(item, render$2(item.items, extras));\n case 'cardimage':\n return renderImage(item.src, item.classes, item.alt);\n case 'cardtext':\n const shouldHighlight = item.name.exists(name => contains$2(extras.cardText.highlightOn, name));\n const matchText = shouldHighlight ? Optional.from(extras.cardText.matchText).getOr('') : '';\n return renderHtml(replaceText(item.text, matchText), item.classes);\n }\n });\n const renderCardMenuItem = (spec, itemResponse, sharedBackstage, extras) => {\n const getApi = component => ({\n isEnabled: () => !Disabling.isDisabled(component),\n setEnabled: state => {\n Disabling.set(component, !state);\n each$1(descendants(component.element, '*'), elm => {\n component.getSystem().getByDom(elm).each(comp => {\n if (comp.hasConfigured(Disabling)) {\n Disabling.set(comp, !state);\n }\n });\n });\n }\n });\n const structure = {\n dom: renderItemDomStructure(spec.label),\n optComponents: [Optional.some({\n dom: {\n tag: 'div',\n classes: [\n containerClass,\n containerRowClass\n ]\n },\n components: render$2(spec.items, extras)\n })]\n };\n return renderCommonItem({\n data: buildData({\n text: Optional.none(),\n ...spec\n }),\n enabled: spec.enabled,\n getApi,\n onAction: spec.onAction,\n onSetup: spec.onSetup,\n triggersSubmenu: false,\n itemBehaviours: Optional.from(extras.itemBehaviours).getOr([])\n }, structure, itemResponse, sharedBackstage.providers);\n };\n\n const renderChoiceItem = (spec, useText, presets, onItemValueHandler, isSelected, itemResponse, providersBackstage, renderIcons = true) => {\n const getApi = component => ({\n setActive: state => {\n Toggling.set(component, state);\n },\n isActive: () => Toggling.isOn(component),\n isEnabled: () => !Disabling.isDisabled(component),\n setEnabled: state => Disabling.set(component, !state)\n });\n const structure = renderItemStructure({\n presets,\n textContent: useText ? spec.text : Optional.none(),\n htmlContent: Optional.none(),\n ariaLabel: spec.text,\n iconContent: spec.icon,\n shortcutContent: useText ? spec.shortcut : Optional.none(),\n checkMark: useText ? Optional.some(renderCheckmark(providersBackstage.icons)) : Optional.none(),\n caret: Optional.none(),\n value: spec.value\n }, providersBackstage, renderIcons);\n return deepMerge(renderCommonItem({\n data: buildData(spec),\n enabled: spec.enabled,\n getApi,\n onAction: _api => onItemValueHandler(spec.value),\n onSetup: api => {\n api.setActive(isSelected);\n return noop;\n },\n triggersSubmenu: false,\n itemBehaviours: []\n }, structure, itemResponse, providersBackstage), {\n toggling: {\n toggleClass: tickedClass,\n toggleOnExecute: false,\n selected: spec.active,\n exclusive: true\n }\n });\n };\n\n const parts$f = generate$3(owner$2(), parts$h());\n\n const hexColour = value => ({ value });\n const shorthandRegex = /^#?([a-f\\d])([a-f\\d])([a-f\\d])$/i;\n const longformRegex = /^#?([a-f\\d]{2})([a-f\\d]{2})([a-f\\d]{2})$/i;\n const isHexString = hex => shorthandRegex.test(hex) || longformRegex.test(hex);\n const normalizeHex = hex => removeLeading(hex, '#').toUpperCase();\n const fromString$1 = hex => isHexString(hex) ? Optional.some({ value: normalizeHex(hex) }) : Optional.none();\n const getLongForm = hex => {\n const hexString = hex.value.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);\n return { value: hexString };\n };\n const extractValues = hex => {\n const longForm = getLongForm(hex);\n const splitForm = longformRegex.exec(longForm.value);\n return splitForm === null ? [\n 'FFFFFF',\n 'FF',\n 'FF',\n 'FF'\n ] : splitForm;\n };\n const toHex = component => {\n const hex = component.toString(16);\n return (hex.length === 1 ? '0' + hex : hex).toUpperCase();\n };\n const fromRgba = rgbaColour => {\n const value = toHex(rgbaColour.red) + toHex(rgbaColour.green) + toHex(rgbaColour.blue);\n return hexColour(value);\n };\n\n const min = Math.min;\n const max = Math.max;\n const round$1 = Math.round;\n const rgbRegex = /^\\s*rgb\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*\\)\\s*$/i;\n const rgbaRegex = /^\\s*rgba\\s*\\(\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d+)\\s*,\\s*(\\d?(?:\\.\\d+)?)\\s*\\)\\s*$/i;\n const rgbaColour = (red, green, blue, alpha) => ({\n red,\n green,\n blue,\n alpha\n });\n const isRgbaComponent = value => {\n const num = parseInt(value, 10);\n return num.toString() === value && num >= 0 && num <= 255;\n };\n const fromHsv = hsv => {\n let r;\n let g;\n let b;\n const hue = (hsv.hue || 0) % 360;\n let saturation = hsv.saturation / 100;\n let brightness = hsv.value / 100;\n saturation = max(0, min(saturation, 1));\n brightness = max(0, min(brightness, 1));\n if (saturation === 0) {\n r = g = b = round$1(255 * brightness);\n return rgbaColour(r, g, b, 1);\n }\n const side = hue / 60;\n const chroma = brightness * saturation;\n const x = chroma * (1 - Math.abs(side % 2 - 1));\n const match = brightness - chroma;\n switch (Math.floor(side)) {\n case 0:\n r = chroma;\n g = x;\n b = 0;\n break;\n case 1:\n r = x;\n g = chroma;\n b = 0;\n break;\n case 2:\n r = 0;\n g = chroma;\n b = x;\n break;\n case 3:\n r = 0;\n g = x;\n b = chroma;\n break;\n case 4:\n r = x;\n g = 0;\n b = chroma;\n break;\n case 5:\n r = chroma;\n g = 0;\n b = x;\n break;\n default:\n r = g = b = 0;\n }\n r = round$1(255 * (r + match));\n g = round$1(255 * (g + match));\n b = round$1(255 * (b + match));\n return rgbaColour(r, g, b, 1);\n };\n const fromHex = hexColour => {\n const result = extractValues(hexColour);\n const red = parseInt(result[1], 16);\n const green = parseInt(result[2], 16);\n const blue = parseInt(result[3], 16);\n return rgbaColour(red, green, blue, 1);\n };\n const fromStringValues = (red, green, blue, alpha) => {\n const r = parseInt(red, 10);\n const g = parseInt(green, 10);\n const b = parseInt(blue, 10);\n const a = parseFloat(alpha);\n return rgbaColour(r, g, b, a);\n };\n const fromString = rgbaString => {\n if (rgbaString === 'transparent') {\n return Optional.some(rgbaColour(0, 0, 0, 0));\n }\n const rgbMatch = rgbRegex.exec(rgbaString);\n if (rgbMatch !== null) {\n return Optional.some(fromStringValues(rgbMatch[1], rgbMatch[2], rgbMatch[3], '1'));\n }\n const rgbaMatch = rgbaRegex.exec(rgbaString);\n if (rgbaMatch !== null) {\n return Optional.some(fromStringValues(rgbaMatch[1], rgbaMatch[2], rgbaMatch[3], rgbaMatch[4]));\n }\n return Optional.none();\n };\n const toString = rgba => `rgba(${ rgba.red },${ rgba.green },${ rgba.blue },${ rgba.alpha })`;\n const red = rgbaColour(255, 0, 0, 1);\n\n const fireSkinLoaded$1 = editor => {\n editor.dispatch('SkinLoaded');\n };\n const fireSkinLoadError$1 = (editor, error) => {\n editor.dispatch('SkinLoadError', error);\n };\n const fireResizeEditor = editor => {\n editor.dispatch('ResizeEditor');\n };\n const fireResizeContent = (editor, e) => {\n editor.dispatch('ResizeContent', e);\n };\n const fireScrollContent = (editor, e) => {\n editor.dispatch('ScrollContent', e);\n };\n const fireTextColorChange = (editor, data) => {\n editor.dispatch('TextColorChange', data);\n };\n const fireAfterProgressState = (editor, state) => {\n editor.dispatch('AfterProgressState', { state });\n };\n const fireResolveName = (editor, node) => editor.dispatch('ResolveName', {\n name: node.nodeName.toLowerCase(),\n target: node\n });\n const fireToggleToolbarDrawer = (editor, state) => {\n editor.dispatch('ToggleToolbarDrawer', { state });\n };\n\n var global$4 = tinymce.util.Tools.resolve('tinymce.util.LocalStorage');\n\n const cacheStorage = {};\n const ColorCache = (storageId, max = 10) => {\n const storageString = global$4.getItem(storageId);\n const localstorage = isString(storageString) ? JSON.parse(storageString) : [];\n const prune = list => {\n const diff = max - list.length;\n return diff < 0 ? list.slice(0, max) : list;\n };\n const cache = prune(localstorage);\n const add = key => {\n indexOf(cache, key).each(remove);\n cache.unshift(key);\n if (cache.length > max) {\n cache.pop();\n }\n global$4.setItem(storageId, JSON.stringify(cache));\n };\n const remove = idx => {\n cache.splice(idx, 1);\n };\n const state = () => cache.slice(0);\n return {\n add,\n state\n };\n };\n const getCacheForId = id => get$g(cacheStorage, id).getOrThunk(() => {\n const storageId = `tinymce-custom-colors-${ id }`;\n const currentData = global$4.getItem(storageId);\n if (isNullable(currentData)) {\n const legacyDefault = global$4.getItem('tinymce-custom-colors');\n global$4.setItem(storageId, isNonNullable(legacyDefault) ? legacyDefault : '[]');\n }\n const storage = ColorCache(storageId, 10);\n cacheStorage[id] = storage;\n return storage;\n });\n const getCurrentColors = id => map$2(getCacheForId(id).state(), color => ({\n type: 'choiceitem',\n text: color,\n icon: 'checkmark',\n value: color\n }));\n const addColor = (id, color) => {\n getCacheForId(id).add(color);\n };\n\n const hsvColour = (hue, saturation, value) => ({\n hue,\n saturation,\n value\n });\n const fromRgb = rgbaColour => {\n let h = 0;\n let s = 0;\n let v = 0;\n const r = rgbaColour.red / 255;\n const g = rgbaColour.green / 255;\n const b = rgbaColour.blue / 255;\n const minRGB = Math.min(r, Math.min(g, b));\n const maxRGB = Math.max(r, Math.max(g, b));\n if (minRGB === maxRGB) {\n v = minRGB;\n return hsvColour(0, 0, v * 100);\n }\n const d = r === minRGB ? g - b : b === minRGB ? r - g : b - r;\n h = r === minRGB ? 3 : b === minRGB ? 1 : 5;\n h = 60 * (h - d / (maxRGB - minRGB));\n s = (maxRGB - minRGB) / maxRGB;\n v = maxRGB;\n return hsvColour(Math.round(h), Math.round(s * 100), Math.round(v * 100));\n };\n\n const hexToHsv = hex => fromRgb(fromHex(hex));\n const hsvToHex = hsv => fromRgba(fromHsv(hsv));\n const anyToHex = color => fromString$1(color).orThunk(() => fromString(color).map(fromRgba)).getOrThunk(() => {\n const canvas = document.createElement('canvas');\n canvas.height = 1;\n canvas.width = 1;\n const canvasContext = canvas.getContext('2d');\n canvasContext.clearRect(0, 0, canvas.width, canvas.height);\n canvasContext.fillStyle = '#FFFFFF';\n canvasContext.fillStyle = color;\n canvasContext.fillRect(0, 0, 1, 1);\n const rgba = canvasContext.getImageData(0, 0, 1, 1).data;\n const r = rgba[0];\n const g = rgba[1];\n const b = rgba[2];\n const a = rgba[3];\n return fromRgba(rgbaColour(r, g, b, a));\n });\n\n const foregroundId = 'forecolor';\n const backgroundId = 'hilitecolor';\n const calcCols = colors => Math.max(5, Math.ceil(Math.sqrt(colors)));\n const mapColors = colorMap => {\n const colors = [];\n for (let i = 0; i < colorMap.length; i += 2) {\n colors.push({\n text: colorMap[i + 1],\n value: '#' + anyToHex(colorMap[i]).value,\n icon: 'checkmark',\n type: 'choiceitem'\n });\n }\n return colors;\n };\n const option$1 = name => editor => editor.options.get(name);\n const fallbackColor = '#000000';\n const register$d = editor => {\n const registerOption = editor.options.register;\n const colorProcessor = value => {\n if (isArrayOf(value, isString)) {\n return {\n value: mapColors(value),\n valid: true\n };\n } else {\n return {\n valid: false,\n message: 'Must be an array of strings.'\n };\n }\n };\n registerOption('color_map', {\n processor: colorProcessor,\n default: [\n '#BFEDD2',\n 'Light Green',\n '#FBEEB8',\n 'Light Yellow',\n '#F8CAC6',\n 'Light Red',\n '#ECCAFA',\n 'Light Purple',\n '#C2E0F4',\n 'Light Blue',\n '#2DC26B',\n 'Green',\n '#F1C40F',\n 'Yellow',\n '#E03E2D',\n 'Red',\n '#B96AD9',\n 'Purple',\n '#3598DB',\n 'Blue',\n '#169179',\n 'Dark Turquoise',\n '#E67E23',\n 'Orange',\n '#BA372A',\n 'Dark Red',\n '#843FA1',\n 'Dark Purple',\n '#236FA1',\n 'Dark Blue',\n '#ECF0F1',\n 'Light Gray',\n '#CED4D9',\n 'Medium Gray',\n '#95A5A6',\n 'Gray',\n '#7E8C8D',\n 'Dark Gray',\n '#34495E',\n 'Navy Blue',\n '#000000',\n 'Black',\n '#ffffff',\n 'White'\n ]\n });\n registerOption('color_map_background', { processor: colorProcessor });\n registerOption('color_map_foreground', { processor: colorProcessor });\n registerOption('color_cols', {\n processor: 'number',\n default: calcCols(getColors$2(editor, 'default').length)\n });\n registerOption('color_cols_foreground', {\n processor: 'number',\n default: calcCols(getColors$2(editor, foregroundId).length)\n });\n registerOption('color_cols_background', {\n processor: 'number',\n default: calcCols(getColors$2(editor, backgroundId).length)\n });\n registerOption('custom_colors', {\n processor: 'boolean',\n default: true\n });\n registerOption('color_default_foreground', {\n processor: 'string',\n default: fallbackColor\n });\n registerOption('color_default_background', {\n processor: 'string',\n default: fallbackColor\n });\n };\n const getColorCols$1 = (editor, id) => {\n if (id === foregroundId) {\n return option$1('color_cols_foreground')(editor);\n } else if (id === backgroundId) {\n return option$1('color_cols_background')(editor);\n } else {\n return option$1('color_cols')(editor);\n }\n };\n const hasCustomColors$1 = option$1('custom_colors');\n const getColors$2 = (editor, id) => {\n if (id === foregroundId && editor.options.isSet('color_map_foreground')) {\n return option$1('color_map_foreground')(editor);\n } else if (id === backgroundId && editor.options.isSet('color_map_background')) {\n return option$1('color_map_background')(editor);\n } else {\n return option$1('color_map')(editor);\n }\n };\n const getDefaultForegroundColor = option$1('color_default_foreground');\n const getDefaultBackgroundColor = option$1('color_default_background');\n\n const getCurrentColor = (editor, format) => {\n const cssRgbValue = get$e(SugarElement.fromDom(editor.selection.getStart()), format === 'hilitecolor' ? 'background-color' : 'color');\n return fromString(cssRgbValue).map(rgba => '#' + fromRgba(rgba).value);\n };\n const applyFormat = (editor, format, value) => {\n editor.undoManager.transact(() => {\n editor.focus();\n editor.formatter.apply(format, { value });\n editor.nodeChanged();\n });\n };\n const removeFormat = (editor, format) => {\n editor.undoManager.transact(() => {\n editor.focus();\n editor.formatter.remove(format, { value: null }, undefined, true);\n editor.nodeChanged();\n });\n };\n const registerCommands = editor => {\n editor.addCommand('mceApplyTextcolor', (format, value) => {\n applyFormat(editor, format, value);\n });\n editor.addCommand('mceRemoveTextcolor', format => {\n removeFormat(editor, format);\n });\n };\n const getAdditionalColors = hasCustom => {\n const type = 'choiceitem';\n const remove = {\n type,\n text: 'Remove color',\n icon: 'color-swatch-remove-color',\n value: 'remove'\n };\n const custom = {\n type,\n text: 'Custom color',\n icon: 'color-picker',\n value: 'custom'\n };\n return hasCustom ? [\n remove,\n custom\n ] : [remove];\n };\n const applyColor = (editor, format, value, onChoice) => {\n if (value === 'custom') {\n const dialog = colorPickerDialog(editor);\n dialog(colorOpt => {\n colorOpt.each(color => {\n addColor(format, color);\n editor.execCommand('mceApplyTextcolor', format, color);\n onChoice(color);\n });\n }, getCurrentColor(editor, format).getOr(fallbackColor));\n } else if (value === 'remove') {\n onChoice('');\n editor.execCommand('mceRemoveTextcolor', format);\n } else {\n onChoice(value);\n editor.execCommand('mceApplyTextcolor', format, value);\n }\n };\n const getColors$1 = (colors, id, hasCustom) => colors.concat(getCurrentColors(id).concat(getAdditionalColors(hasCustom)));\n const getFetch$1 = (colors, id, hasCustom) => callback => {\n callback(getColors$1(colors, id, hasCustom));\n };\n const setIconColor = (splitButtonApi, name, newColor) => {\n const id = name === 'forecolor' ? 'tox-icon-text-color__color' : 'tox-icon-highlight-bg-color__color';\n splitButtonApi.setIconFill(id, newColor);\n };\n const registerTextColorButton = (editor, name, format, tooltip, lastColor) => {\n editor.ui.registry.addSplitButton(name, {\n tooltip,\n presets: 'color',\n icon: name === 'forecolor' ? 'text-color' : 'highlight-bg-color',\n select: value => {\n const optCurrentHex = getCurrentColor(editor, format);\n return is$1(optCurrentHex, value.toUpperCase());\n },\n columns: getColorCols$1(editor, format),\n fetch: getFetch$1(getColors$2(editor, format), format, hasCustomColors$1(editor)),\n onAction: _splitButtonApi => {\n applyColor(editor, format, lastColor.get(), noop);\n },\n onItemAction: (_splitButtonApi, value) => {\n applyColor(editor, format, value, newColor => {\n lastColor.set(newColor);\n fireTextColorChange(editor, {\n name,\n color: newColor\n });\n });\n },\n onSetup: splitButtonApi => {\n setIconColor(splitButtonApi, name, lastColor.get());\n const handler = e => {\n if (e.name === name) {\n setIconColor(splitButtonApi, e.name, e.color);\n }\n };\n editor.on('TextColorChange', handler);\n return () => {\n editor.off('TextColorChange', handler);\n };\n }\n });\n };\n const registerTextColorMenuItem = (editor, name, format, text) => {\n editor.ui.registry.addNestedMenuItem(name, {\n text,\n icon: name === 'forecolor' ? 'text-color' : 'highlight-bg-color',\n getSubmenuItems: () => [{\n type: 'fancymenuitem',\n fancytype: 'colorswatch',\n initData: { storageKey: format },\n onAction: data => {\n applyColor(editor, format, data.value, noop);\n }\n }]\n });\n };\n const colorPickerDialog = editor => (callback, value) => {\n let isValid = false;\n const onSubmit = api => {\n const data = api.getData();\n const hex = data.colorpicker;\n if (isValid) {\n callback(Optional.from(hex));\n api.close();\n } else {\n editor.windowManager.alert(editor.translate([\n 'Invalid hex color code: {0}',\n hex\n ]));\n }\n };\n const onAction = (_api, details) => {\n if (details.name === 'hex-valid') {\n isValid = details.value;\n }\n };\n const initialData = { colorpicker: value };\n editor.windowManager.open({\n title: 'Color Picker',\n size: 'normal',\n body: {\n type: 'panel',\n items: [{\n type: 'colorpicker',\n name: 'colorpicker',\n label: 'Color'\n }]\n },\n buttons: [\n {\n type: 'cancel',\n name: 'cancel',\n text: 'Cancel'\n },\n {\n type: 'submit',\n name: 'save',\n text: 'Save',\n primary: true\n }\n ],\n initialData,\n onAction,\n onSubmit,\n onClose: noop,\n onCancel: () => {\n callback(Optional.none());\n }\n });\n };\n const register$c = editor => {\n registerCommands(editor);\n const fallbackColorForeground = getDefaultForegroundColor(editor);\n const fallbackColorBackground = getDefaultBackgroundColor(editor);\n const lastForeColor = Cell(fallbackColorForeground);\n const lastBackColor = Cell(fallbackColorBackground);\n registerTextColorButton(editor, 'forecolor', 'forecolor', 'Text color', lastForeColor);\n registerTextColorButton(editor, 'backcolor', 'hilitecolor', 'Background color', lastBackColor);\n registerTextColorMenuItem(editor, 'forecolor', 'forecolor', 'Text color');\n registerTextColorMenuItem(editor, 'backcolor', 'hilitecolor', 'Background color');\n };\n\n const createPartialChoiceMenu = (value, items, onItemValueHandler, columns, presets, itemResponse, select, providersBackstage) => {\n const hasIcons = menuHasIcons(items);\n const presetItemTypes = presets !== 'color' ? 'normal' : 'color';\n const alloyItems = createChoiceItems(items, onItemValueHandler, columns, presetItemTypes, itemResponse, select, providersBackstage);\n const menuLayout = { menuType: presets };\n return createPartialMenuWithAlloyItems(value, hasIcons, alloyItems, columns, menuLayout);\n };\n const createChoiceItems = (items, onItemValueHandler, columns, itemPresets, itemResponse, select, providersBackstage) => cat(map$2(items, item => {\n if (item.type === 'choiceitem') {\n return createChoiceMenuItem(item).fold(handleError, d => Optional.some(renderChoiceItem(d, columns === 1, itemPresets, onItemValueHandler, select(d.value), itemResponse, providersBackstage, menuHasIcons(items))));\n } else {\n return Optional.none();\n }\n }));\n\n const deriveMenuMovement = (columns, presets) => {\n const menuMarkers = markers(presets);\n if (columns === 1) {\n return {\n mode: 'menu',\n moveOnTab: true\n };\n } else if (columns === 'auto') {\n return {\n mode: 'grid',\n selector: '.' + menuMarkers.item,\n initSize: {\n numColumns: 1,\n numRows: 1\n }\n };\n } else {\n const rowClass = presets === 'color' ? 'tox-swatches__row' : 'tox-collection__group';\n return {\n mode: 'matrix',\n rowSelector: '.' + rowClass,\n previousSelector: menu => {\n return presets === 'color' ? descendant(menu.element, '[aria-checked=true]') : Optional.none();\n }\n };\n }\n };\n const deriveCollectionMovement = (columns, presets) => {\n if (columns === 1) {\n return {\n mode: 'menu',\n moveOnTab: false,\n selector: '.tox-collection__item'\n };\n } else if (columns === 'auto') {\n return {\n mode: 'flatgrid',\n selector: '.' + 'tox-collection__item',\n initSize: {\n numColumns: 1,\n numRows: 1\n }\n };\n } else {\n return {\n mode: 'matrix',\n selectors: {\n row: presets === 'color' ? '.tox-swatches__row' : '.tox-collection__group',\n cell: presets === 'color' ? `.${ colorClass }` : `.${ selectableClass }`\n }\n };\n }\n };\n\n const renderColorSwatchItem = (spec, backstage) => {\n const items = getColorItems(spec, backstage);\n const columns = backstage.colorinput.getColorCols(spec.initData.storageKey);\n const presets = 'color';\n const menuSpec = createPartialChoiceMenu(generate$6('menu-value'), items, value => {\n spec.onAction({ value });\n }, columns, presets, ItemResponse$1.CLOSE_ON_EXECUTE, never, backstage.shared.providers);\n const widgetSpec = {\n ...menuSpec,\n markers: markers(presets),\n movement: deriveMenuMovement(columns, presets)\n };\n return {\n type: 'widget',\n data: { value: generate$6('widget-id') },\n dom: {\n tag: 'div',\n classes: ['tox-fancymenuitem']\n },\n autofocus: true,\n components: [parts$f.widget(Menu.sketch(widgetSpec))]\n };\n };\n const getColorItems = (spec, backstage) => {\n const useCustomColors = spec.initData.allowCustomColors && backstage.colorinput.hasCustomColors();\n return spec.initData.colors.fold(() => getColors$1(backstage.colorinput.getColors(spec.initData.storageKey), spec.initData.storageKey, useCustomColors), colors => colors.concat(getAdditionalColors(useCustomColors)));\n };\n\n const cellOverEvent = generate$6('cell-over');\n const cellExecuteEvent = generate$6('cell-execute');\n const makeCell = (row, col, labelId) => {\n const emitCellOver = c => emitWith(c, cellOverEvent, {\n row,\n col\n });\n const emitExecute = c => emitWith(c, cellExecuteEvent, {\n row,\n col\n });\n const onClick = (c, se) => {\n se.stop();\n emitExecute(c);\n };\n return build$1({\n dom: {\n tag: 'div',\n attributes: {\n role: 'button',\n ['aria-labelledby']: labelId\n }\n },\n behaviours: derive$1([\n config('insert-table-picker-cell', [\n run$1(mouseover(), Focusing.focus),\n run$1(execute$5(), emitExecute),\n run$1(click(), onClick),\n run$1(tap(), onClick)\n ]),\n Toggling.config({\n toggleClass: 'tox-insert-table-picker__selected',\n toggleOnExecute: false\n }),\n Focusing.config({ onFocus: emitCellOver })\n ])\n });\n };\n const makeCells = (labelId, numRows, numCols) => {\n const cells = [];\n for (let i = 0; i < numRows; i++) {\n const row = [];\n for (let j = 0; j < numCols; j++) {\n row.push(makeCell(i, j, labelId));\n }\n cells.push(row);\n }\n return cells;\n };\n const selectCells = (cells, selectedRow, selectedColumn, numRows, numColumns) => {\n for (let i = 0; i < numRows; i++) {\n for (let j = 0; j < numColumns; j++) {\n Toggling.set(cells[i][j], i <= selectedRow && j <= selectedColumn);\n }\n }\n };\n const makeComponents = cells => bind$3(cells, cellRow => map$2(cellRow, premade));\n const makeLabelText = (row, col) => text$2(`${ col }x${ row }`);\n const renderInsertTableMenuItem = spec => {\n const numRows = 10;\n const numColumns = 10;\n const sizeLabelId = generate$6('size-label');\n const cells = makeCells(sizeLabelId, numRows, numColumns);\n const emptyLabelText = makeLabelText(0, 0);\n const memLabel = record({\n dom: {\n tag: 'span',\n classes: ['tox-insert-table-picker__label'],\n attributes: { id: sizeLabelId }\n },\n components: [emptyLabelText],\n behaviours: derive$1([Replacing.config({})])\n });\n return {\n type: 'widget',\n data: { value: generate$6('widget-id') },\n dom: {\n tag: 'div',\n classes: ['tox-fancymenuitem']\n },\n autofocus: true,\n components: [parts$f.widget({\n dom: {\n tag: 'div',\n classes: ['tox-insert-table-picker']\n },\n components: makeComponents(cells).concat(memLabel.asSpec()),\n behaviours: derive$1([\n config('insert-table-picker', [\n runOnAttached(c => {\n Replacing.set(memLabel.get(c), [emptyLabelText]);\n }),\n runWithTarget(cellOverEvent, (c, t, e) => {\n const {row, col} = e.event;\n selectCells(cells, row, col, numRows, numColumns);\n Replacing.set(memLabel.get(c), [makeLabelText(row + 1, col + 1)]);\n }),\n runWithTarget(cellExecuteEvent, (c, _, e) => {\n const {row, col} = e.event;\n spec.onAction({\n numRows: row + 1,\n numColumns: col + 1\n });\n emit(c, sandboxClose());\n })\n ]),\n Keying.config({\n initSize: {\n numRows,\n numColumns\n },\n mode: 'flatgrid',\n selector: '[role=\"button\"]'\n })\n ])\n })]\n };\n };\n\n const fancyMenuItems = {\n inserttable: renderInsertTableMenuItem,\n colorswatch: renderColorSwatchItem\n };\n const renderFancyMenuItem = (spec, backstage) => get$g(fancyMenuItems, spec.fancytype).map(render => render(spec, backstage));\n\n const renderNestedItem = (spec, itemResponse, providersBackstage, renderIcons = true, downwardsCaret = false) => {\n const caret = downwardsCaret ? renderDownwardsCaret(providersBackstage.icons) : renderSubmenuCaret(providersBackstage.icons);\n const getApi = component => ({\n isEnabled: () => !Disabling.isDisabled(component),\n setEnabled: state => Disabling.set(component, !state)\n });\n const structure = renderItemStructure({\n presets: 'normal',\n iconContent: spec.icon,\n textContent: spec.text,\n htmlContent: Optional.none(),\n ariaLabel: spec.text,\n caret: Optional.some(caret),\n checkMark: Optional.none(),\n shortcutContent: spec.shortcut\n }, providersBackstage, renderIcons);\n return renderCommonItem({\n data: buildData(spec),\n getApi,\n enabled: spec.enabled,\n onAction: noop,\n onSetup: spec.onSetup,\n triggersSubmenu: true,\n itemBehaviours: []\n }, structure, itemResponse, providersBackstage);\n };\n\n const renderNormalItem = (spec, itemResponse, providersBackstage, renderIcons = true) => {\n const getApi = component => ({\n isEnabled: () => !Disabling.isDisabled(component),\n setEnabled: state => Disabling.set(component, !state)\n });\n const structure = renderItemStructure({\n presets: 'normal',\n iconContent: spec.icon,\n textContent: spec.text,\n htmlContent: Optional.none(),\n ariaLabel: spec.text,\n caret: Optional.none(),\n checkMark: Optional.none(),\n shortcutContent: spec.shortcut\n }, providersBackstage, renderIcons);\n return renderCommonItem({\n data: buildData(spec),\n getApi,\n enabled: spec.enabled,\n onAction: spec.onAction,\n onSetup: spec.onSetup,\n triggersSubmenu: false,\n itemBehaviours: []\n }, structure, itemResponse, providersBackstage);\n };\n\n const renderSeparatorItem = spec => ({\n type: 'separator',\n dom: {\n tag: 'div',\n classes: [\n selectableClass,\n groupHeadingClass\n ]\n },\n components: spec.text.map(text$2).toArray()\n });\n\n const renderToggleMenuItem = (spec, itemResponse, providersBackstage, renderIcons = true) => {\n const getApi = component => ({\n setActive: state => {\n Toggling.set(component, state);\n },\n isActive: () => Toggling.isOn(component),\n isEnabled: () => !Disabling.isDisabled(component),\n setEnabled: state => Disabling.set(component, !state)\n });\n const structure = renderItemStructure({\n iconContent: spec.icon,\n textContent: spec.text,\n htmlContent: Optional.none(),\n ariaLabel: spec.text,\n checkMark: Optional.some(renderCheckmark(providersBackstage.icons)),\n caret: Optional.none(),\n shortcutContent: spec.shortcut,\n presets: 'normal',\n meta: spec.meta\n }, providersBackstage, renderIcons);\n return deepMerge(renderCommonItem({\n data: buildData(spec),\n enabled: spec.enabled,\n getApi,\n onAction: spec.onAction,\n onSetup: spec.onSetup,\n triggersSubmenu: false,\n itemBehaviours: []\n }, structure, itemResponse, providersBackstage), {\n toggling: {\n toggleClass: tickedClass,\n toggleOnExecute: false,\n selected: spec.active\n }\n });\n };\n\n const autocomplete = renderAutocompleteItem;\n const separator$3 = renderSeparatorItem;\n const normal = renderNormalItem;\n const nested = renderNestedItem;\n const toggle$1 = renderToggleMenuItem;\n const fancy = renderFancyMenuItem;\n const card = renderCardMenuItem;\n\n const getCoupled = (component, coupleConfig, coupleState, name) => coupleState.getOrCreate(component, coupleConfig, name);\n const getExistingCoupled = (component, coupleConfig, coupleState, name) => coupleState.getExisting(component, coupleConfig, name);\n\n var CouplingApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n getCoupled: getCoupled,\n getExistingCoupled: getExistingCoupled\n });\n\n var CouplingSchema = [requiredOf('others', setOf(Result.value, anyValue()))];\n\n const init$a = () => {\n const coupled = {};\n const lookupCoupled = (coupleConfig, coupledName) => {\n const available = keys(coupleConfig.others);\n if (available.length === 0) {\n throw new Error('Cannot find any known coupled components');\n } else {\n return get$g(coupled, coupledName);\n }\n };\n const getOrCreate = (component, coupleConfig, name) => {\n return lookupCoupled(coupleConfig, name).getOrThunk(() => {\n const builder = get$g(coupleConfig.others, name).getOrDie('No information found for coupled component: ' + name);\n const spec = builder(component);\n const built = component.getSystem().build(spec);\n coupled[name] = built;\n return built;\n });\n };\n const getExisting = (component, coupleConfig, name) => {\n return lookupCoupled(coupleConfig, name).orThunk(() => {\n get$g(coupleConfig.others, name).getOrDie('No information found for coupled component: ' + name);\n return Optional.none();\n });\n };\n const readState = constant$1({});\n return nu$8({\n readState,\n getExisting,\n getOrCreate\n });\n };\n\n var CouplingState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init$a\n });\n\n const Coupling = create$4({\n fields: CouplingSchema,\n name: 'coupling',\n apis: CouplingApis,\n state: CouplingState\n });\n\n const nu$3 = baseFn => {\n let data = Optional.none();\n let callbacks = [];\n const map = f => nu$3(nCallback => {\n get(data => {\n nCallback(f(data));\n });\n });\n const get = nCallback => {\n if (isReady()) {\n call(nCallback);\n } else {\n callbacks.push(nCallback);\n }\n };\n const set = x => {\n if (!isReady()) {\n data = Optional.some(x);\n run(callbacks);\n callbacks = [];\n }\n };\n const isReady = () => data.isSome();\n const run = cbs => {\n each$1(cbs, call);\n };\n const call = cb => {\n data.each(x => {\n setTimeout(() => {\n cb(x);\n }, 0);\n });\n };\n baseFn(set);\n return {\n get,\n map,\n isReady\n };\n };\n const pure$1 = a => nu$3(callback => {\n callback(a);\n });\n const LazyValue = {\n nu: nu$3,\n pure: pure$1\n };\n\n const errorReporter = err => {\n setTimeout(() => {\n throw err;\n }, 0);\n };\n const make$5 = run => {\n const get = callback => {\n run().then(callback, errorReporter);\n };\n const map = fab => {\n return make$5(() => run().then(fab));\n };\n const bind = aFutureB => {\n return make$5(() => run().then(v => aFutureB(v).toPromise()));\n };\n const anonBind = futureB => {\n return make$5(() => run().then(() => futureB.toPromise()));\n };\n const toLazy = () => {\n return LazyValue.nu(get);\n };\n const toCached = () => {\n let cache = null;\n return make$5(() => {\n if (cache === null) {\n cache = run();\n }\n return cache;\n });\n };\n const toPromise = run;\n return {\n map,\n bind,\n anonBind,\n toLazy,\n toCached,\n toPromise,\n get\n };\n };\n const nu$2 = baseFn => {\n return make$5(() => new Promise(baseFn));\n };\n const pure = a => {\n return make$5(() => Promise.resolve(a));\n };\n const Future = {\n nu: nu$2,\n pure\n };\n\n const suffix = constant$1('sink');\n const partType$1 = constant$1(optional({\n name: suffix(),\n overrides: constant$1({\n dom: { tag: 'div' },\n behaviours: derive$1([Positioning.config({ useFixed: always })]),\n events: derive$2([\n cutter(keydown()),\n cutter(mousedown()),\n cutter(click())\n ])\n })\n }));\n\n const getAnchor = (detail, component) => {\n const hotspot = detail.getHotspot(component).getOr(component);\n const type = 'hotspot';\n const overrides = detail.getAnchorOverrides();\n return detail.layouts.fold(() => ({\n type,\n hotspot,\n overrides\n }), layouts => ({\n type,\n hotspot,\n overrides,\n layouts\n }));\n };\n const fetch = (detail, mapFetch, component) => {\n const fetcher = detail.fetch;\n return fetcher(component).map(mapFetch);\n };\n const openF = (detail, mapFetch, anchor, component, sandbox, externals, highlightOnOpen) => {\n const futureData = fetch(detail, mapFetch, component);\n const getLazySink = getSink(component, detail);\n return futureData.map(tdata => tdata.bind(data => Optional.from(tieredMenu.sketch({\n ...externals.menu(),\n uid: generate$5(''),\n data,\n highlightOnOpen,\n onOpenMenu: (tmenu, menu) => {\n const sink = getLazySink().getOrDie();\n Positioning.position(sink, menu, { anchor });\n Sandboxing.decloak(sandbox);\n },\n onOpenSubmenu: (tmenu, item, submenu) => {\n const sink = getLazySink().getOrDie();\n Positioning.position(sink, submenu, {\n anchor: {\n type: 'submenu',\n item\n }\n });\n Sandboxing.decloak(sandbox);\n },\n onRepositionMenu: (tmenu, primaryMenu, submenuTriggers) => {\n const sink = getLazySink().getOrDie();\n Positioning.position(sink, primaryMenu, { anchor });\n each$1(submenuTriggers, st => {\n Positioning.position(sink, st.triggeredMenu, {\n anchor: {\n type: 'submenu',\n item: st.triggeringItem\n }\n });\n });\n },\n onEscape: () => {\n Focusing.focus(component);\n Sandboxing.close(sandbox);\n return Optional.some(true);\n }\n }))));\n };\n const open = (detail, mapFetch, hotspot, sandbox, externals, onOpenSync, highlightOnOpen) => {\n const anchor = getAnchor(detail, hotspot);\n const processed = openF(detail, mapFetch, anchor, hotspot, sandbox, externals, highlightOnOpen);\n return processed.map(tdata => {\n tdata.fold(() => {\n if (Sandboxing.isOpen(sandbox)) {\n Sandboxing.close(sandbox);\n }\n }, data => {\n Sandboxing.cloak(sandbox);\n Sandboxing.open(sandbox, data);\n onOpenSync(sandbox);\n });\n return sandbox;\n });\n };\n const close = (detail, mapFetch, component, sandbox, _externals, _onOpenSync, _highlightOnOpen) => {\n Sandboxing.close(sandbox);\n return Future.pure(sandbox);\n };\n const togglePopup = (detail, mapFetch, hotspot, externals, onOpenSync, highlightOnOpen) => {\n const sandbox = Coupling.getCoupled(hotspot, 'sandbox');\n const showing = Sandboxing.isOpen(sandbox);\n const action = showing ? close : open;\n return action(detail, mapFetch, hotspot, sandbox, externals, onOpenSync, highlightOnOpen);\n };\n const matchWidth = (hotspot, container, useMinWidth) => {\n const menu = Composing.getCurrent(container).getOr(container);\n const buttonWidth = get$c(hotspot.element);\n if (useMinWidth) {\n set$8(menu.element, 'min-width', buttonWidth + 'px');\n } else {\n set$7(menu.element, buttonWidth);\n }\n };\n const getSink = (anyInSystem, sinkDetail) => anyInSystem.getSystem().getByUid(sinkDetail.uid + '-' + suffix()).map(internalSink => () => Result.value(internalSink)).getOrThunk(() => sinkDetail.lazySink.fold(() => () => Result.error(new Error('No internal sink is specified, nor could an external sink be found')), lazySinkFn => () => lazySinkFn(anyInSystem)));\n const doRepositionMenus = sandbox => {\n Sandboxing.getState(sandbox).each(tmenu => {\n tieredMenu.repositionMenus(tmenu);\n });\n };\n const makeSandbox$1 = (detail, hotspot, extras) => {\n const ariaControls = manager();\n const onOpen = (component, menu) => {\n const anchor = getAnchor(detail, hotspot);\n ariaControls.link(hotspot.element);\n if (detail.matchWidth) {\n matchWidth(anchor.hotspot, menu, detail.useMinWidth);\n }\n detail.onOpen(anchor, component, menu);\n if (extras !== undefined && extras.onOpen !== undefined) {\n extras.onOpen(component, menu);\n }\n };\n const onClose = (component, menu) => {\n ariaControls.unlink(hotspot.element);\n if (extras !== undefined && extras.onClose !== undefined) {\n extras.onClose(component, menu);\n }\n };\n const lazySink = getSink(hotspot, detail);\n return {\n dom: {\n tag: 'div',\n classes: detail.sandboxClasses,\n attributes: {\n id: ariaControls.id,\n role: 'listbox'\n }\n },\n behaviours: SketchBehaviours.augment(detail.sandboxBehaviours, [\n Representing.config({\n store: {\n mode: 'memory',\n initialValue: hotspot\n }\n }),\n Sandboxing.config({\n onOpen,\n onClose,\n isPartOf: (container, data, queryElem) => {\n return isPartOf$1(data, queryElem) || isPartOf$1(hotspot, queryElem);\n },\n getAttachPoint: () => {\n return lazySink().getOrDie();\n }\n }),\n Composing.config({\n find: sandbox => {\n return Sandboxing.getState(sandbox).bind(menu => Composing.getCurrent(menu));\n }\n }),\n Receiving.config({\n channels: {\n ...receivingChannel$1({ isExtraPart: never }),\n ...receivingChannel({ doReposition: doRepositionMenus })\n }\n })\n ])\n };\n };\n const repositionMenus = comp => {\n const sandbox = Coupling.getCoupled(comp, 'sandbox');\n doRepositionMenus(sandbox);\n };\n\n const sandboxFields = () => [\n defaulted('sandboxClasses', []),\n SketchBehaviours.field('sandboxBehaviours', [\n Composing,\n Receiving,\n Sandboxing,\n Representing\n ])\n ];\n\n const schema$k = constant$1([\n required$1('dom'),\n required$1('fetch'),\n onHandler('onOpen'),\n onKeyboardHandler('onExecute'),\n defaulted('getHotspot', Optional.some),\n defaulted('getAnchorOverrides', constant$1({})),\n schema$y(),\n field('dropdownBehaviours', [\n Toggling,\n Coupling,\n Keying,\n Focusing\n ]),\n required$1('toggleClass'),\n defaulted('eventOrder', {}),\n option$3('lazySink'),\n defaulted('matchWidth', false),\n defaulted('useMinWidth', false),\n option$3('role')\n ].concat(sandboxFields()));\n const parts$e = constant$1([\n external({\n schema: [\n tieredMenuMarkers(),\n defaulted('fakeFocus', false)\n ],\n name: 'menu',\n defaults: detail => {\n return { onExecute: detail.onExecute };\n }\n }),\n partType$1()\n ]);\n\n const factory$k = (detail, components, _spec, externals) => {\n const lookupAttr = attr => get$g(detail.dom, 'attributes').bind(attrs => get$g(attrs, attr));\n const switchToMenu = sandbox => {\n Sandboxing.getState(sandbox).each(tmenu => {\n tieredMenu.highlightPrimary(tmenu);\n });\n };\n const togglePopup$1 = (dropdownComp, onOpenSync, highlightOnOpen) => {\n return togglePopup(detail, identity, dropdownComp, externals, onOpenSync, highlightOnOpen);\n };\n const action = component => {\n const onOpenSync = switchToMenu;\n togglePopup$1(component, onOpenSync, HighlightOnOpen.HighlightMenuAndItem).get(noop);\n };\n const apis = {\n expand: comp => {\n if (!Toggling.isOn(comp)) {\n togglePopup$1(comp, noop, HighlightOnOpen.HighlightNone).get(noop);\n }\n },\n open: comp => {\n if (!Toggling.isOn(comp)) {\n togglePopup$1(comp, noop, HighlightOnOpen.HighlightMenuAndItem).get(noop);\n }\n },\n refetch: comp => {\n const optSandbox = Coupling.getExistingCoupled(comp, 'sandbox');\n return optSandbox.fold(() => {\n return togglePopup$1(comp, noop, HighlightOnOpen.HighlightMenuAndItem).map(noop);\n }, sandboxComp => {\n return open(detail, identity, comp, sandboxComp, externals, noop, HighlightOnOpen.HighlightMenuAndItem).map(noop);\n });\n },\n isOpen: Toggling.isOn,\n close: comp => {\n if (Toggling.isOn(comp)) {\n togglePopup$1(comp, noop, HighlightOnOpen.HighlightMenuAndItem).get(noop);\n }\n },\n repositionMenus: comp => {\n if (Toggling.isOn(comp)) {\n repositionMenus(comp);\n }\n }\n };\n const triggerExecute = (comp, _se) => {\n emitExecute(comp);\n return Optional.some(true);\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: augment(detail.dropdownBehaviours, [\n Toggling.config({\n toggleClass: detail.toggleClass,\n aria: { mode: 'expanded' }\n }),\n Coupling.config({\n others: {\n sandbox: hotspot => {\n return makeSandbox$1(detail, hotspot, {\n onOpen: () => Toggling.on(hotspot),\n onClose: () => Toggling.off(hotspot)\n });\n }\n }\n }),\n Keying.config({\n mode: 'special',\n onSpace: triggerExecute,\n onEnter: triggerExecute,\n onDown: (comp, _se) => {\n if (Dropdown.isOpen(comp)) {\n const sandbox = Coupling.getCoupled(comp, 'sandbox');\n switchToMenu(sandbox);\n } else {\n Dropdown.open(comp);\n }\n return Optional.some(true);\n },\n onEscape: (comp, _se) => {\n if (Dropdown.isOpen(comp)) {\n Dropdown.close(comp);\n return Optional.some(true);\n } else {\n return Optional.none();\n }\n }\n }),\n Focusing.config({})\n ]),\n events: events$a(Optional.some(action)),\n eventOrder: {\n ...detail.eventOrder,\n [execute$5()]: [\n 'disabling',\n 'toggling',\n 'alloy.base.behaviour'\n ]\n },\n apis,\n domModification: {\n attributes: {\n 'aria-haspopup': 'true',\n ...detail.role.fold(() => ({}), role => ({ role })),\n ...detail.dom.tag === 'button' ? { type: lookupAttr('type').getOr('button') } : {}\n }\n }\n };\n };\n const Dropdown = composite({\n name: 'Dropdown',\n configFields: schema$k(),\n partFields: parts$e(),\n factory: factory$k,\n apis: {\n open: (apis, comp) => apis.open(comp),\n refetch: (apis, comp) => apis.refetch(comp),\n expand: (apis, comp) => apis.expand(comp),\n close: (apis, comp) => apis.close(comp),\n isOpen: (apis, comp) => apis.isOpen(comp),\n repositionMenus: (apis, comp) => apis.repositionMenus(comp)\n }\n });\n\n const identifyMenuLayout = searchMode => {\n switch (searchMode.searchMode) {\n case 'no-search': {\n return { menuType: 'normal' };\n }\n default: {\n return {\n menuType: 'searchable',\n searchMode\n };\n }\n }\n };\n const handleRefetchTrigger = originalSandboxComp => {\n const dropdown = Representing.getValue(originalSandboxComp);\n const optSearcherState = findWithinSandbox(originalSandboxComp).map(saveState);\n Dropdown.refetch(dropdown).get(() => {\n const newSandboxComp = Coupling.getCoupled(dropdown, 'sandbox');\n optSearcherState.each(searcherState => findWithinSandbox(newSandboxComp).each(inputComp => restoreState(inputComp, searcherState)));\n });\n };\n const handleRedirectToMenuItem = (sandboxComp, se) => {\n getActiveMenuItemFrom(sandboxComp).each(activeItem => {\n retargetAndDispatchWith(sandboxComp, activeItem.element, se.event.eventType, se.event.interactionEvent);\n });\n };\n const getActiveMenuItemFrom = sandboxComp => {\n return Sandboxing.getState(sandboxComp).bind(Highlighting.getHighlighted).bind(Highlighting.getHighlighted);\n };\n const getSearchResults = activeMenuComp => {\n return has(activeMenuComp.element, searchResultsClass) ? Optional.some(activeMenuComp.element) : descendant(activeMenuComp.element, '.' + searchResultsClass);\n };\n const updateAriaOnHighlight = (tmenuComp, menuComp, itemComp) => {\n findWithinMenu(tmenuComp).each(inputComp => {\n setActiveDescendant(inputComp, itemComp);\n const optActiveResults = getSearchResults(menuComp);\n optActiveResults.each(resultsElem => {\n getOpt(resultsElem, 'id').each(controlledId => set$9(inputComp.element, 'aria-controls', controlledId));\n });\n });\n set$9(itemComp.element, 'aria-selected', 'true');\n };\n const updateAriaOnDehighlight = (tmenuComp, menuComp, itemComp) => {\n set$9(itemComp.element, 'aria-selected', 'false');\n };\n const focusSearchField = tmenuComp => {\n findWithinMenu(tmenuComp).each(searcherComp => Focusing.focus(searcherComp));\n };\n const getSearchPattern = dropdownComp => {\n const optSandboxComp = Coupling.getExistingCoupled(dropdownComp, 'sandbox');\n return optSandboxComp.bind(findWithinSandbox).map(saveState).map(state => state.fetchPattern).getOr('');\n };\n\n var FocusMode;\n (function (FocusMode) {\n FocusMode[FocusMode['ContentFocus'] = 0] = 'ContentFocus';\n FocusMode[FocusMode['UiFocus'] = 1] = 'UiFocus';\n }(FocusMode || (FocusMode = {})));\n const createMenuItemFromBridge = (item, itemResponse, backstage, menuHasIcons, isHorizontalMenu) => {\n const providersBackstage = backstage.shared.providers;\n const parseForHorizontalMenu = menuitem => !isHorizontalMenu ? menuitem : {\n ...menuitem,\n shortcut: Optional.none(),\n icon: menuitem.text.isSome() ? Optional.none() : menuitem.icon\n };\n switch (item.type) {\n case 'menuitem':\n return createMenuItem(item).fold(handleError, d => Optional.some(normal(parseForHorizontalMenu(d), itemResponse, providersBackstage, menuHasIcons)));\n case 'nestedmenuitem':\n return createNestedMenuItem(item).fold(handleError, d => Optional.some(nested(parseForHorizontalMenu(d), itemResponse, providersBackstage, menuHasIcons, isHorizontalMenu)));\n case 'togglemenuitem':\n return createToggleMenuItem(item).fold(handleError, d => Optional.some(toggle$1(parseForHorizontalMenu(d), itemResponse, providersBackstage, menuHasIcons)));\n case 'separator':\n return createSeparatorMenuItem(item).fold(handleError, d => Optional.some(separator$3(d)));\n case 'fancymenuitem':\n return createFancyMenuItem(item).fold(handleError, d => fancy(d, backstage));\n default: {\n console.error('Unknown item in general menu', item);\n return Optional.none();\n }\n }\n };\n const createAutocompleteItems = (items, matchText, onItemValueHandler, columns, itemResponse, sharedBackstage, highlightOn) => {\n const renderText = columns === 1;\n const renderIcons = !renderText || menuHasIcons(items);\n return cat(map$2(items, item => {\n switch (item.type) {\n case 'separator':\n return createSeparatorItem(item).fold(handleError, d => Optional.some(separator$3(d)));\n case 'cardmenuitem':\n return createCardMenuItem(item).fold(handleError, d => Optional.some(card({\n ...d,\n onAction: api => {\n d.onAction(api);\n onItemValueHandler(d.value, d.meta);\n }\n }, itemResponse, sharedBackstage, {\n itemBehaviours: tooltipBehaviour(d.meta, sharedBackstage),\n cardText: {\n matchText,\n highlightOn\n }\n })));\n case 'autocompleteitem':\n default:\n return createAutocompleterItem(item).fold(handleError, d => Optional.some(autocomplete(d, matchText, renderText, 'normal', onItemValueHandler, itemResponse, sharedBackstage, renderIcons)));\n }\n }));\n };\n const createPartialMenu = (value, items, itemResponse, backstage, isHorizontalMenu, searchMode) => {\n const hasIcons = menuHasIcons(items);\n const alloyItems = cat(map$2(items, item => {\n const itemHasIcon = i => isHorizontalMenu ? !has$2(i, 'text') : hasIcons;\n const createItem = i => createMenuItemFromBridge(i, itemResponse, backstage, itemHasIcon(i), isHorizontalMenu);\n if (item.type === 'nestedmenuitem' && item.getSubmenuItems().length <= 0) {\n return createItem({\n ...item,\n enabled: false\n });\n } else {\n return createItem(item);\n }\n }));\n const menuLayout = identifyMenuLayout(searchMode);\n const createPartial = isHorizontalMenu ? createHorizontalPartialMenuWithAlloyItems : createPartialMenuWithAlloyItems;\n return createPartial(value, hasIcons, alloyItems, 1, menuLayout);\n };\n const createTieredDataFrom = partialMenu => tieredMenu.singleData(partialMenu.value, partialMenu);\n const createInlineMenuFrom = (partialMenu, columns, focusMode, presets) => {\n const movement = deriveMenuMovement(columns, presets);\n const menuMarkers = markers(presets);\n return {\n data: createTieredDataFrom({\n ...partialMenu,\n movement,\n menuBehaviours: SimpleBehaviours.unnamedEvents(columns !== 'auto' ? [] : [runOnAttached((comp, _se) => {\n detectSize(comp, 4, menuMarkers.item).each(({numColumns, numRows}) => {\n Keying.setGridSize(comp, numRows, numColumns);\n });\n })])\n }),\n menu: {\n markers: markers(presets),\n fakeFocus: focusMode === FocusMode.ContentFocus\n }\n };\n };\n\n const getAutocompleterRange = (dom, initRange) => {\n return detect(SugarElement.fromDom(initRange.startContainer)).map(elm => {\n const range = dom.createRng();\n range.selectNode(elm.dom);\n return range;\n });\n };\n const register$b = (editor, sharedBackstage) => {\n const processingAction = Cell(false);\n const activeState = Cell(false);\n const autocompleter = build$1(InlineView.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-autocompleter']\n },\n components: [],\n fireDismissalEventInstead: {},\n inlineBehaviours: derive$1([config('dismissAutocompleter', [run$1(dismissRequested(), () => cancelIfNecessary())])]),\n lazySink: sharedBackstage.getSink\n }));\n const isMenuOpen = () => InlineView.isOpen(autocompleter);\n const isActive = activeState.get;\n const hideIfNecessary = () => {\n if (isMenuOpen()) {\n InlineView.hide(autocompleter);\n }\n };\n const getMenu = () => InlineView.getContent(autocompleter).bind(tmenu => {\n return get$h(tmenu.components(), 0);\n });\n const cancelIfNecessary = () => editor.execCommand('mceAutocompleterClose');\n const getCombinedItems = matches => {\n const columns = findMap(matches, m => Optional.from(m.columns)).getOr(1);\n return bind$3(matches, match => {\n const choices = match.items;\n return createAutocompleteItems(choices, match.matchText, (itemValue, itemMeta) => {\n const nr = editor.selection.getRng();\n getAutocompleterRange(editor.dom, nr).each(range => {\n const autocompleterApi = {\n hide: () => cancelIfNecessary(),\n reload: fetchOptions => {\n hideIfNecessary();\n editor.execCommand('mceAutocompleterReload', false, { fetchOptions });\n }\n };\n processingAction.set(true);\n match.onAction(autocompleterApi, range, itemValue, itemMeta);\n processingAction.set(false);\n });\n }, columns, ItemResponse$1.BUBBLE_TO_SANDBOX, sharedBackstage, match.highlightOn);\n });\n };\n const display = (lookupData, items) => {\n findIn(SugarElement.fromDom(editor.getBody())).each(element => {\n const columns = findMap(lookupData, ld => Optional.from(ld.columns)).getOr(1);\n InlineView.showMenuAt(autocompleter, {\n anchor: {\n type: 'node',\n root: SugarElement.fromDom(editor.getBody()),\n node: Optional.from(element)\n }\n }, createInlineMenuFrom(createPartialMenuWithAlloyItems('autocompleter-value', true, items, columns, { menuType: 'normal' }), columns, FocusMode.ContentFocus, 'normal'));\n });\n getMenu().each(Highlighting.highlightFirst);\n };\n const updateDisplay = lookupData => {\n const combinedItems = getCombinedItems(lookupData);\n if (combinedItems.length > 0) {\n display(lookupData, combinedItems);\n } else {\n hideIfNecessary();\n }\n };\n editor.on('AutocompleterStart', ({lookupData}) => {\n activeState.set(true);\n processingAction.set(false);\n updateDisplay(lookupData);\n });\n editor.on('AutocompleterUpdate', ({lookupData}) => updateDisplay(lookupData));\n editor.on('AutocompleterEnd', () => {\n hideIfNecessary();\n activeState.set(false);\n processingAction.set(false);\n });\n const autocompleterUiApi = {\n cancelIfNecessary,\n isMenuOpen,\n isActive,\n isProcessingAction: processingAction.get,\n getMenu\n };\n AutocompleterEditorEvents.setup(autocompleterUiApi, editor);\n };\n const Autocompleter = { register: register$b };\n\n const closest = (scope, selector, isRoot) => closest$1(scope, selector, isRoot).isSome();\n\n const DelayedFunction = (fun, delay) => {\n let ref = null;\n const schedule = (...args) => {\n ref = setTimeout(() => {\n fun.apply(null, args);\n ref = null;\n }, delay);\n };\n const cancel = () => {\n if (ref !== null) {\n clearTimeout(ref);\n ref = null;\n }\n };\n return {\n cancel,\n schedule\n };\n };\n\n const SIGNIFICANT_MOVE = 5;\n const LONGPRESS_DELAY = 400;\n const getTouch = event => {\n const raw = event.raw;\n if (raw.touches === undefined || raw.touches.length !== 1) {\n return Optional.none();\n }\n return Optional.some(raw.touches[0]);\n };\n const isFarEnough = (touch, data) => {\n const distX = Math.abs(touch.clientX - data.x);\n const distY = Math.abs(touch.clientY - data.y);\n return distX > SIGNIFICANT_MOVE || distY > SIGNIFICANT_MOVE;\n };\n const monitor = settings => {\n const startData = value$2();\n const longpressFired = Cell(false);\n const longpress$1 = DelayedFunction(event => {\n settings.triggerEvent(longpress(), event);\n longpressFired.set(true);\n }, LONGPRESS_DELAY);\n const handleTouchstart = event => {\n getTouch(event).each(touch => {\n longpress$1.cancel();\n const data = {\n x: touch.clientX,\n y: touch.clientY,\n target: event.target\n };\n longpress$1.schedule(event);\n longpressFired.set(false);\n startData.set(data);\n });\n return Optional.none();\n };\n const handleTouchmove = event => {\n longpress$1.cancel();\n getTouch(event).each(touch => {\n startData.on(data => {\n if (isFarEnough(touch, data)) {\n startData.clear();\n }\n });\n });\n return Optional.none();\n };\n const handleTouchend = event => {\n longpress$1.cancel();\n const isSame = data => eq(data.target, event.target);\n return startData.get().filter(isSame).map(_data => {\n if (longpressFired.get()) {\n event.prevent();\n return false;\n } else {\n return settings.triggerEvent(tap(), event);\n }\n });\n };\n const handlers = wrapAll([\n {\n key: touchstart(),\n value: handleTouchstart\n },\n {\n key: touchmove(),\n value: handleTouchmove\n },\n {\n key: touchend(),\n value: handleTouchend\n }\n ]);\n const fireIfReady = (event, type) => get$g(handlers, type).bind(handler => handler(event));\n return { fireIfReady };\n };\n\n const isDangerous = event => {\n const keyEv = event.raw;\n return keyEv.which === BACKSPACE[0] && !contains$2([\n 'input',\n 'textarea'\n ], name$3(event.target)) && !closest(event.target, '[contenteditable=\"true\"]');\n };\n const setup$d = (container, rawSettings) => {\n const settings = {\n stopBackspace: true,\n ...rawSettings\n };\n const pointerEvents = [\n 'touchstart',\n 'touchmove',\n 'touchend',\n 'touchcancel',\n 'gesturestart',\n 'mousedown',\n 'mouseup',\n 'mouseover',\n 'mousemove',\n 'mouseout',\n 'click'\n ];\n const tapEvent = monitor(settings);\n const simpleEvents = map$2(pointerEvents.concat([\n 'selectstart',\n 'input',\n 'contextmenu',\n 'change',\n 'transitionend',\n 'transitioncancel',\n 'drag',\n 'dragstart',\n 'dragend',\n 'dragenter',\n 'dragleave',\n 'dragover',\n 'drop',\n 'keyup'\n ]), type => bind(container, type, event => {\n tapEvent.fireIfReady(event, type).each(tapStopped => {\n if (tapStopped) {\n event.kill();\n }\n });\n const stopped = settings.triggerEvent(type, event);\n if (stopped) {\n event.kill();\n }\n }));\n const pasteTimeout = value$2();\n const onPaste = bind(container, 'paste', event => {\n tapEvent.fireIfReady(event, 'paste').each(tapStopped => {\n if (tapStopped) {\n event.kill();\n }\n });\n const stopped = settings.triggerEvent('paste', event);\n if (stopped) {\n event.kill();\n }\n pasteTimeout.set(setTimeout(() => {\n settings.triggerEvent(postPaste(), event);\n }, 0));\n });\n const onKeydown = bind(container, 'keydown', event => {\n const stopped = settings.triggerEvent('keydown', event);\n if (stopped) {\n event.kill();\n } else if (settings.stopBackspace && isDangerous(event)) {\n event.prevent();\n }\n });\n const onFocusIn = bind(container, 'focusin', event => {\n const stopped = settings.triggerEvent('focusin', event);\n if (stopped) {\n event.kill();\n }\n });\n const focusoutTimeout = value$2();\n const onFocusOut = bind(container, 'focusout', event => {\n const stopped = settings.triggerEvent('focusout', event);\n if (stopped) {\n event.kill();\n }\n focusoutTimeout.set(setTimeout(() => {\n settings.triggerEvent(postBlur(), event);\n }, 0));\n });\n const unbind = () => {\n each$1(simpleEvents, e => {\n e.unbind();\n });\n onKeydown.unbind();\n onFocusIn.unbind();\n onFocusOut.unbind();\n onPaste.unbind();\n pasteTimeout.on(clearTimeout);\n focusoutTimeout.on(clearTimeout);\n };\n return { unbind };\n };\n\n const derive = (rawEvent, rawTarget) => {\n const source = get$g(rawEvent, 'target').getOr(rawTarget);\n return Cell(source);\n };\n\n const fromSource = (event, source) => {\n const stopper = Cell(false);\n const cutter = Cell(false);\n const stop = () => {\n stopper.set(true);\n };\n const cut = () => {\n cutter.set(true);\n };\n return {\n stop,\n cut,\n isStopped: stopper.get,\n isCut: cutter.get,\n event,\n setSource: source.set,\n getSource: source.get\n };\n };\n const fromExternal = event => {\n const stopper = Cell(false);\n const stop = () => {\n stopper.set(true);\n };\n return {\n stop,\n cut: noop,\n isStopped: stopper.get,\n isCut: never,\n event,\n setSource: die('Cannot set source of a broadcasted event'),\n getSource: die('Cannot get source of a broadcasted event')\n };\n };\n\n const adt$1 = Adt.generate([\n { stopped: [] },\n { resume: ['element'] },\n { complete: [] }\n ]);\n const doTriggerHandler = (lookup, eventType, rawEvent, target, source, logger) => {\n const handler = lookup(eventType, target);\n const simulatedEvent = fromSource(rawEvent, source);\n return handler.fold(() => {\n logger.logEventNoHandlers(eventType, target);\n return adt$1.complete();\n }, handlerInfo => {\n const descHandler = handlerInfo.descHandler;\n const eventHandler = getCurried(descHandler);\n eventHandler(simulatedEvent);\n if (simulatedEvent.isStopped()) {\n logger.logEventStopped(eventType, handlerInfo.element, descHandler.purpose);\n return adt$1.stopped();\n } else if (simulatedEvent.isCut()) {\n logger.logEventCut(eventType, handlerInfo.element, descHandler.purpose);\n return adt$1.complete();\n } else {\n return parent(handlerInfo.element).fold(() => {\n logger.logNoParent(eventType, handlerInfo.element, descHandler.purpose);\n return adt$1.complete();\n }, parent => {\n logger.logEventResponse(eventType, handlerInfo.element, descHandler.purpose);\n return adt$1.resume(parent);\n });\n }\n });\n };\n const doTriggerOnUntilStopped = (lookup, eventType, rawEvent, rawTarget, source, logger) => doTriggerHandler(lookup, eventType, rawEvent, rawTarget, source, logger).fold(always, parent => doTriggerOnUntilStopped(lookup, eventType, rawEvent, parent, source, logger), never);\n const triggerHandler = (lookup, eventType, rawEvent, target, logger) => {\n const source = derive(rawEvent, target);\n return doTriggerHandler(lookup, eventType, rawEvent, target, source, logger);\n };\n const broadcast = (listeners, rawEvent, _logger) => {\n const simulatedEvent = fromExternal(rawEvent);\n each$1(listeners, listener => {\n const descHandler = listener.descHandler;\n const handler = getCurried(descHandler);\n handler(simulatedEvent);\n });\n return simulatedEvent.isStopped();\n };\n const triggerUntilStopped = (lookup, eventType, rawEvent, logger) => triggerOnUntilStopped(lookup, eventType, rawEvent, rawEvent.target, logger);\n const triggerOnUntilStopped = (lookup, eventType, rawEvent, rawTarget, logger) => {\n const source = derive(rawEvent, rawTarget);\n return doTriggerOnUntilStopped(lookup, eventType, rawEvent, rawTarget, source, logger);\n };\n\n const eventHandler = (element, descHandler) => ({\n element,\n descHandler\n });\n const broadcastHandler = (id, handler) => ({\n id,\n descHandler: handler\n });\n const EventRegistry = () => {\n const registry = {};\n const registerId = (extraArgs, id, events) => {\n each(events, (v, k) => {\n const handlers = registry[k] !== undefined ? registry[k] : {};\n handlers[id] = curryArgs(v, extraArgs);\n registry[k] = handlers;\n });\n };\n const findHandler = (handlers, elem) => read$1(elem).bind(id => get$g(handlers, id)).map(descHandler => eventHandler(elem, descHandler));\n const filterByType = type => get$g(registry, type).map(handlers => mapToArray(handlers, (f, id) => broadcastHandler(id, f))).getOr([]);\n const find = (isAboveRoot, type, target) => get$g(registry, type).bind(handlers => closest$4(target, elem => findHandler(handlers, elem), isAboveRoot));\n const unregisterId = id => {\n each(registry, (handlersById, _eventName) => {\n if (has$2(handlersById, id)) {\n delete handlersById[id];\n }\n });\n };\n return {\n registerId,\n unregisterId,\n filterByType,\n find\n };\n };\n\n const Registry = () => {\n const events = EventRegistry();\n const components = {};\n const readOrTag = component => {\n const elem = component.element;\n return read$1(elem).getOrThunk(() => write('uid-', component.element));\n };\n const failOnDuplicate = (component, tagId) => {\n const conflict = components[tagId];\n if (conflict === component) {\n unregister(component);\n } else {\n throw new Error('The tagId \"' + tagId + '\" is already used by: ' + element(conflict.element) + '\\nCannot use it for: ' + element(component.element) + '\\n' + 'The conflicting element is' + (inBody(conflict.element) ? ' ' : ' not ') + 'already in the DOM');\n }\n };\n const register = component => {\n const tagId = readOrTag(component);\n if (hasNonNullableKey(components, tagId)) {\n failOnDuplicate(component, tagId);\n }\n const extraArgs = [component];\n events.registerId(extraArgs, tagId, component.events);\n components[tagId] = component;\n };\n const unregister = component => {\n read$1(component.element).each(tagId => {\n delete components[tagId];\n events.unregisterId(tagId);\n });\n };\n const filter = type => events.filterByType(type);\n const find = (isAboveRoot, type, target) => events.find(isAboveRoot, type, target);\n const getById = id => get$g(components, id);\n return {\n find,\n filter,\n register,\n unregister,\n getById\n };\n };\n\n const factory$j = detail => {\n const {attributes, ...domWithoutAttributes} = detail.dom;\n return {\n uid: detail.uid,\n dom: {\n tag: 'div',\n attributes: {\n role: 'presentation',\n ...attributes\n },\n ...domWithoutAttributes\n },\n components: detail.components,\n behaviours: get$3(detail.containerBehaviours),\n events: detail.events,\n domModification: detail.domModification,\n eventOrder: detail.eventOrder\n };\n };\n const Container = single({\n name: 'Container',\n factory: factory$j,\n configFields: [\n defaulted('components', []),\n field('containerBehaviours', []),\n defaulted('events', {}),\n defaulted('domModification', {}),\n defaulted('eventOrder', {})\n ]\n });\n\n const takeover = root => {\n const isAboveRoot = el => parent(root.element).fold(always, parent => eq(el, parent));\n const registry = Registry();\n const lookup = (eventName, target) => registry.find(isAboveRoot, eventName, target);\n const domEvents = setup$d(root.element, {\n triggerEvent: (eventName, event) => {\n return monitorEvent(eventName, event.target, logger => triggerUntilStopped(lookup, eventName, event, logger));\n }\n });\n const systemApi = {\n debugInfo: constant$1('real'),\n triggerEvent: (eventName, target, data) => {\n monitorEvent(eventName, target, logger => triggerOnUntilStopped(lookup, eventName, data, target, logger));\n },\n triggerFocus: (target, originator) => {\n read$1(target).fold(() => {\n focus$3(target);\n }, _alloyId => {\n monitorEvent(focus$4(), target, logger => {\n triggerHandler(lookup, focus$4(), {\n originator,\n kill: noop,\n prevent: noop,\n target\n }, target, logger);\n return false;\n });\n });\n },\n triggerEscape: (comp, simulatedEvent) => {\n systemApi.triggerEvent('keydown', comp.element, simulatedEvent.event);\n },\n getByUid: uid => {\n return getByUid(uid);\n },\n getByDom: elem => {\n return getByDom(elem);\n },\n build: build$1,\n buildOrPatch: buildOrPatch,\n addToGui: c => {\n add(c);\n },\n removeFromGui: c => {\n remove(c);\n },\n addToWorld: c => {\n addToWorld(c);\n },\n removeFromWorld: c => {\n removeFromWorld(c);\n },\n broadcast: message => {\n broadcast$1(message);\n },\n broadcastOn: (channels, message) => {\n broadcastOn(channels, message);\n },\n broadcastEvent: (eventName, event) => {\n broadcastEvent(eventName, event);\n },\n isConnected: always\n };\n const addToWorld = component => {\n component.connect(systemApi);\n if (!isText(component.element)) {\n registry.register(component);\n each$1(component.components(), addToWorld);\n systemApi.triggerEvent(systemInit(), component.element, { target: component.element });\n }\n };\n const removeFromWorld = component => {\n if (!isText(component.element)) {\n each$1(component.components(), removeFromWorld);\n registry.unregister(component);\n }\n component.disconnect();\n };\n const add = component => {\n attach(root, component);\n };\n const remove = component => {\n detach(component);\n };\n const destroy = () => {\n domEvents.unbind();\n remove$5(root.element);\n };\n const broadcastData = data => {\n const receivers = registry.filter(receive());\n each$1(receivers, receiver => {\n const descHandler = receiver.descHandler;\n const handler = getCurried(descHandler);\n handler(data);\n });\n };\n const broadcast$1 = message => {\n broadcastData({\n universal: true,\n data: message\n });\n };\n const broadcastOn = (channels, message) => {\n broadcastData({\n universal: false,\n channels,\n data: message\n });\n };\n const broadcastEvent = (eventName, event) => {\n const listeners = registry.filter(eventName);\n return broadcast(listeners, event);\n };\n const getByUid = uid => registry.getById(uid).fold(() => Result.error(new Error('Could not find component with uid: \"' + uid + '\" in system.')), Result.value);\n const getByDom = elem => {\n const uid = read$1(elem).getOr('not found');\n return getByUid(uid);\n };\n addToWorld(root);\n return {\n root,\n element: root.element,\n destroy,\n add,\n remove,\n getByUid,\n getByDom,\n addToWorld,\n removeFromWorld,\n broadcast: broadcast$1,\n broadcastOn,\n broadcastEvent\n };\n };\n\n const renderBar = (spec, backstage) => ({\n dom: {\n tag: 'div',\n classes: [\n 'tox-bar',\n 'tox-form__controls-h-stack'\n ]\n },\n components: map$2(spec.items, backstage.interpreter)\n });\n\n const schema$j = constant$1([\n defaulted('prefix', 'form-field'),\n field('fieldBehaviours', [\n Composing,\n Representing\n ])\n ]);\n const parts$d = constant$1([\n optional({\n schema: [required$1('dom')],\n name: 'label'\n }),\n optional({\n factory: {\n sketch: spec => {\n return {\n uid: spec.uid,\n dom: {\n tag: 'span',\n styles: { display: 'none' },\n attributes: { 'aria-hidden': 'true' },\n innerHtml: spec.text\n }\n };\n }\n },\n schema: [required$1('text')],\n name: 'aria-descriptor'\n }),\n required({\n factory: {\n sketch: spec => {\n const excludeFactory = exclude(spec, ['factory']);\n return spec.factory.sketch(excludeFactory);\n }\n },\n schema: [required$1('factory')],\n name: 'field'\n })\n ]);\n\n const factory$i = (detail, components, _spec, _externals) => {\n const behaviours = augment(detail.fieldBehaviours, [\n Composing.config({\n find: container => {\n return getPart(container, detail, 'field');\n }\n }),\n Representing.config({\n store: {\n mode: 'manual',\n getValue: field => {\n return Composing.getCurrent(field).bind(Representing.getValue);\n },\n setValue: (field, value) => {\n Composing.getCurrent(field).each(current => {\n Representing.setValue(current, value);\n });\n }\n }\n })\n ]);\n const events = derive$2([runOnAttached((component, _simulatedEvent) => {\n const ps = getParts(component, detail, [\n 'label',\n 'field',\n 'aria-descriptor'\n ]);\n ps.field().each(field => {\n const id = generate$6(detail.prefix);\n ps.label().each(label => {\n set$9(label.element, 'for', id);\n set$9(field.element, 'id', id);\n });\n ps['aria-descriptor']().each(descriptor => {\n const descriptorId = generate$6(detail.prefix);\n set$9(descriptor.element, 'id', descriptorId);\n set$9(field.element, 'aria-describedby', descriptorId);\n });\n });\n })]);\n const apis = {\n getField: container => getPart(container, detail, 'field'),\n getLabel: container => getPart(container, detail, 'label')\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours,\n events,\n apis\n };\n };\n const FormField = composite({\n name: 'FormField',\n configFields: schema$j(),\n partFields: parts$d(),\n factory: factory$i,\n apis: {\n getField: (apis, comp) => apis.getField(comp),\n getLabel: (apis, comp) => apis.getLabel(comp)\n }\n });\n\n const exhibit$2 = (base, tabConfig) => nu$7({\n attributes: wrapAll([{\n key: tabConfig.tabAttr,\n value: 'true'\n }])\n });\n\n var ActiveTabstopping = /*#__PURE__*/Object.freeze({\n __proto__: null,\n exhibit: exhibit$2\n });\n\n var TabstopSchema = [defaulted('tabAttr', 'data-alloy-tabstop')];\n\n const Tabstopping = create$4({\n fields: TabstopSchema,\n name: 'tabstopping',\n active: ActiveTabstopping\n });\n\n var global$3 = tinymce.util.Tools.resolve('tinymce.html.Entities');\n\n const renderFormFieldWith = (pLabel, pField, extraClasses, extraBehaviours) => {\n const spec = renderFormFieldSpecWith(pLabel, pField, extraClasses, extraBehaviours);\n return FormField.sketch(spec);\n };\n const renderFormField = (pLabel, pField) => renderFormFieldWith(pLabel, pField, [], []);\n const renderFormFieldSpecWith = (pLabel, pField, extraClasses, extraBehaviours) => ({\n dom: renderFormFieldDomWith(extraClasses),\n components: pLabel.toArray().concat([pField]),\n fieldBehaviours: derive$1(extraBehaviours)\n });\n const renderFormFieldDom = () => renderFormFieldDomWith([]);\n const renderFormFieldDomWith = extraClasses => ({\n tag: 'div',\n classes: ['tox-form__group'].concat(extraClasses)\n });\n const renderLabel$2 = (label, providersBackstage) => FormField.parts.label({\n dom: {\n tag: 'label',\n classes: ['tox-label']\n },\n components: [text$2(providersBackstage.translate(label))]\n });\n\n const formChangeEvent = generate$6('form-component-change');\n const formCloseEvent = generate$6('form-close');\n const formCancelEvent = generate$6('form-cancel');\n const formActionEvent = generate$6('form-action');\n const formSubmitEvent = generate$6('form-submit');\n const formBlockEvent = generate$6('form-block');\n const formUnblockEvent = generate$6('form-unblock');\n const formTabChangeEvent = generate$6('form-tabchange');\n const formResizeEvent = generate$6('form-resize');\n\n const renderCollection = (spec, providersBackstage, initialData) => {\n const pLabel = spec.label.map(label => renderLabel$2(label, providersBackstage));\n const runOnItem = f => (comp, se) => {\n closest$1(se.event.target, '[data-collection-item-value]').each(target => {\n f(comp, se, target, get$f(target, 'data-collection-item-value'));\n });\n };\n const setContents = (comp, items) => {\n const htmlLines = map$2(items, item => {\n const itemText = global$8.translate(item.text);\n const textContent = spec.columns === 1 ? `${ itemText }
` : '';\n const iconContent = `${ item.icon }
`;\n const mapItemName = {\n '_': ' ',\n ' - ': ' ',\n '-': ' '\n };\n const ariaLabel = itemText.replace(/\\_| \\- |\\-/g, match => mapItemName[match]);\n const disabledClass = providersBackstage.isDisabled() ? ' tox-collection__item--state-disabled' : '';\n return `${ iconContent }${ textContent }
`;\n });\n const chunks = spec.columns !== 'auto' && spec.columns > 1 ? chunk$1(htmlLines, spec.columns) : [htmlLines];\n const html = map$2(chunks, ch => `${ ch.join('') }
`);\n set$6(comp.element, html.join(''));\n };\n const onClick = runOnItem((comp, se, tgt, itemValue) => {\n se.stop();\n if (!providersBackstage.isDisabled()) {\n emitWith(comp, formActionEvent, {\n name: spec.name,\n value: itemValue\n });\n }\n });\n const collectionEvents = [\n run$1(mouseover(), runOnItem((comp, se, tgt) => {\n focus$3(tgt);\n })),\n run$1(click(), onClick),\n run$1(tap(), onClick),\n run$1(focusin(), runOnItem((comp, se, tgt) => {\n descendant(comp.element, '.' + activeClass).each(currentActive => {\n remove$2(currentActive, activeClass);\n });\n add$2(tgt, activeClass);\n })),\n run$1(focusout(), runOnItem(comp => {\n descendant(comp.element, '.' + activeClass).each(currentActive => {\n remove$2(currentActive, activeClass);\n });\n })),\n runOnExecute$1(runOnItem((comp, se, tgt, itemValue) => {\n emitWith(comp, formActionEvent, {\n name: spec.name,\n value: itemValue\n });\n }))\n ];\n const iterCollectionItems = (comp, applyAttributes) => map$2(descendants(comp.element, '.tox-collection__item'), applyAttributes);\n const pField = FormField.parts.field({\n dom: {\n tag: 'div',\n classes: ['tox-collection'].concat(spec.columns !== 1 ? ['tox-collection--grid'] : ['tox-collection--list'])\n },\n components: [],\n factory: { sketch: identity },\n behaviours: derive$1([\n Disabling.config({\n disabled: providersBackstage.isDisabled,\n onDisabled: comp => {\n iterCollectionItems(comp, childElm => {\n add$2(childElm, 'tox-collection__item--state-disabled');\n set$9(childElm, 'aria-disabled', true);\n });\n },\n onEnabled: comp => {\n iterCollectionItems(comp, childElm => {\n remove$2(childElm, 'tox-collection__item--state-disabled');\n remove$7(childElm, 'aria-disabled');\n });\n }\n }),\n receivingConfig(),\n Replacing.config({}),\n Representing.config({\n store: {\n mode: 'memory',\n initialValue: initialData.getOr([])\n },\n onSetValue: (comp, items) => {\n setContents(comp, items);\n if (spec.columns === 'auto') {\n detectSize(comp, 5, 'tox-collection__item').each(({numRows, numColumns}) => {\n Keying.setGridSize(comp, numRows, numColumns);\n });\n }\n emit(comp, formResizeEvent);\n }\n }),\n Tabstopping.config({}),\n Keying.config(deriveCollectionMovement(spec.columns, 'normal')),\n config('collection-events', collectionEvents)\n ]),\n eventOrder: {\n [execute$5()]: [\n 'disabling',\n 'alloy.base.behaviour',\n 'collection-events'\n ]\n }\n });\n const extraClasses = ['tox-form__group--collection'];\n return renderFormFieldWith(pLabel, pField, extraClasses, []);\n };\n\n const ariaElements = [\n 'input',\n 'textarea'\n ];\n const isAriaElement = elem => {\n const name = name$3(elem);\n return contains$2(ariaElements, name);\n };\n const markValid = (component, invalidConfig) => {\n const elem = invalidConfig.getRoot(component).getOr(component.element);\n remove$2(elem, invalidConfig.invalidClass);\n invalidConfig.notify.each(notifyInfo => {\n if (isAriaElement(component.element)) {\n set$9(component.element, 'aria-invalid', false);\n }\n notifyInfo.getContainer(component).each(container => {\n set$6(container, notifyInfo.validHtml);\n });\n notifyInfo.onValid(component);\n });\n };\n const markInvalid = (component, invalidConfig, invalidState, text) => {\n const elem = invalidConfig.getRoot(component).getOr(component.element);\n add$2(elem, invalidConfig.invalidClass);\n invalidConfig.notify.each(notifyInfo => {\n if (isAriaElement(component.element)) {\n set$9(component.element, 'aria-invalid', true);\n }\n notifyInfo.getContainer(component).each(container => {\n set$6(container, text);\n });\n notifyInfo.onInvalid(component, text);\n });\n };\n const query = (component, invalidConfig, _invalidState) => invalidConfig.validator.fold(() => Future.pure(Result.value(true)), validatorInfo => validatorInfo.validate(component));\n const run = (component, invalidConfig, invalidState) => {\n invalidConfig.notify.each(notifyInfo => {\n notifyInfo.onValidate(component);\n });\n return query(component, invalidConfig).map(valid => {\n if (component.getSystem().isConnected()) {\n return valid.fold(err => {\n markInvalid(component, invalidConfig, invalidState, err);\n return Result.error(err);\n }, v => {\n markValid(component, invalidConfig);\n return Result.value(v);\n });\n } else {\n return Result.error('No longer in system');\n }\n });\n };\n const isInvalid = (component, invalidConfig) => {\n const elem = invalidConfig.getRoot(component).getOr(component.element);\n return has(elem, invalidConfig.invalidClass);\n };\n\n var InvalidateApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n markValid: markValid,\n markInvalid: markInvalid,\n query: query,\n run: run,\n isInvalid: isInvalid\n });\n\n const events$8 = (invalidConfig, invalidState) => invalidConfig.validator.map(validatorInfo => derive$2([run$1(validatorInfo.onEvent, component => {\n run(component, invalidConfig, invalidState).get(identity);\n })].concat(validatorInfo.validateOnLoad ? [runOnAttached(component => {\n run(component, invalidConfig, invalidState).get(noop);\n })] : []))).getOr({});\n\n var ActiveInvalidate = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$8\n });\n\n var InvalidateSchema = [\n required$1('invalidClass'),\n defaulted('getRoot', Optional.none),\n optionObjOf('notify', [\n defaulted('aria', 'alert'),\n defaulted('getContainer', Optional.none),\n defaulted('validHtml', ''),\n onHandler('onValid'),\n onHandler('onInvalid'),\n onHandler('onValidate')\n ]),\n optionObjOf('validator', [\n required$1('validate'),\n defaulted('onEvent', 'input'),\n defaulted('validateOnLoad', true)\n ])\n ];\n\n const Invalidating = create$4({\n fields: InvalidateSchema,\n name: 'invalidating',\n active: ActiveInvalidate,\n apis: InvalidateApis,\n extra: {\n validation: validator => {\n return component => {\n const v = Representing.getValue(component);\n return Future.pure(validator(v));\n };\n }\n }\n });\n\n const exhibit$1 = () => nu$7({\n styles: {\n '-webkit-user-select': 'none',\n 'user-select': 'none',\n '-ms-user-select': 'none',\n '-moz-user-select': '-moz-none'\n },\n attributes: { unselectable: 'on' }\n });\n const events$7 = () => derive$2([abort(selectstart(), always)]);\n\n var ActiveUnselecting = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$7,\n exhibit: exhibit$1\n });\n\n const Unselecting = create$4({\n fields: [],\n name: 'unselecting',\n active: ActiveUnselecting\n });\n\n const renderPanelButton = (spec, sharedBackstage) => Dropdown.sketch({\n dom: spec.dom,\n components: spec.components,\n toggleClass: 'mce-active',\n dropdownBehaviours: derive$1([\n DisablingConfigs.button(sharedBackstage.providers.isDisabled),\n receivingConfig(),\n Unselecting.config({}),\n Tabstopping.config({})\n ]),\n layouts: spec.layouts,\n sandboxClasses: ['tox-dialog__popups'],\n lazySink: sharedBackstage.getSink,\n fetch: comp => Future.nu(callback => spec.fetch(callback)).map(items => Optional.from(createTieredDataFrom(deepMerge(createPartialChoiceMenu(generate$6('menu-value'), items, value => {\n spec.onItemAction(comp, value);\n }, spec.columns, spec.presets, ItemResponse$1.CLOSE_ON_EXECUTE, never, sharedBackstage.providers), { movement: deriveMenuMovement(spec.columns, spec.presets) })))),\n parts: { menu: part(false, 1, spec.presets) }\n });\n\n const colorInputChangeEvent = generate$6('color-input-change');\n const colorSwatchChangeEvent = generate$6('color-swatch-change');\n const colorPickerCancelEvent = generate$6('color-picker-cancel');\n const renderColorInput = (spec, sharedBackstage, colorInputBackstage, initialData) => {\n const pField = FormField.parts.field({\n factory: Input,\n inputClasses: ['tox-textfield'],\n data: initialData,\n onSetValue: c => Invalidating.run(c).get(noop),\n inputBehaviours: derive$1([\n Disabling.config({ disabled: sharedBackstage.providers.isDisabled }),\n receivingConfig(),\n Tabstopping.config({}),\n Invalidating.config({\n invalidClass: 'tox-textbox-field-invalid',\n getRoot: comp => parentElement(comp.element),\n notify: {\n onValid: comp => {\n const val = Representing.getValue(comp);\n emitWith(comp, colorInputChangeEvent, { color: val });\n }\n },\n validator: {\n validateOnLoad: false,\n validate: input => {\n const inputValue = Representing.getValue(input);\n if (inputValue.length === 0) {\n return Future.pure(Result.value(true));\n } else {\n const span = SugarElement.fromTag('span');\n set$8(span, 'background-color', inputValue);\n const res = getRaw(span, 'background-color').fold(() => Result.error('blah'), _ => Result.value(inputValue));\n return Future.pure(res);\n }\n }\n }\n })\n ]),\n selectOnFocus: false\n });\n const pLabel = spec.label.map(label => renderLabel$2(label, sharedBackstage.providers));\n const emitSwatchChange = (colorBit, value) => {\n emitWith(colorBit, colorSwatchChangeEvent, { value });\n };\n const onItemAction = (comp, value) => {\n memColorButton.getOpt(comp).each(colorBit => {\n if (value === 'custom') {\n colorInputBackstage.colorPicker(valueOpt => {\n valueOpt.fold(() => emit(colorBit, colorPickerCancelEvent), value => {\n emitSwatchChange(colorBit, value);\n addColor(spec.storageKey, value);\n });\n }, '#ffffff');\n } else if (value === 'remove') {\n emitSwatchChange(colorBit, '');\n } else {\n emitSwatchChange(colorBit, value);\n }\n });\n };\n const memColorButton = record(renderPanelButton({\n dom: {\n tag: 'span',\n attributes: { 'aria-label': sharedBackstage.providers.translate('Color swatch') }\n },\n layouts: {\n onRtl: () => [\n southwest$2,\n southeast$2,\n south$2\n ],\n onLtr: () => [\n southeast$2,\n southwest$2,\n south$2\n ]\n },\n components: [],\n fetch: getFetch$1(colorInputBackstage.getColors(spec.storageKey), spec.storageKey, colorInputBackstage.hasCustomColors()),\n columns: colorInputBackstage.getColorCols(spec.storageKey),\n presets: 'color',\n onItemAction\n }, sharedBackstage));\n return FormField.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-form__group']\n },\n components: pLabel.toArray().concat([{\n dom: {\n tag: 'div',\n classes: ['tox-color-input']\n },\n components: [\n pField,\n memColorButton.asSpec()\n ]\n }]),\n fieldBehaviours: derive$1([config('form-field-events', [\n run$1(colorInputChangeEvent, (comp, se) => {\n memColorButton.getOpt(comp).each(colorButton => {\n set$8(colorButton.element, 'background-color', se.event.color);\n });\n emitWith(comp, formChangeEvent, { name: spec.name });\n }),\n run$1(colorSwatchChangeEvent, (comp, se) => {\n FormField.getField(comp).each(field => {\n Representing.setValue(field, se.event.value);\n Composing.getCurrent(comp).each(Focusing.focus);\n });\n }),\n run$1(colorPickerCancelEvent, (comp, _se) => {\n FormField.getField(comp).each(_field => {\n Composing.getCurrent(comp).each(Focusing.focus);\n });\n })\n ])])\n });\n };\n\n const labelPart = optional({\n schema: [required$1('dom')],\n name: 'label'\n });\n const edgePart = name => optional({\n name: '' + name + '-edge',\n overrides: detail => {\n const action = detail.model.manager.edgeActions[name];\n return action.fold(() => ({}), a => ({\n events: derive$2([\n runActionExtra(touchstart(), (comp, se, d) => a(comp, d), [detail]),\n runActionExtra(mousedown(), (comp, se, d) => a(comp, d), [detail]),\n runActionExtra(mousemove(), (comp, se, det) => {\n if (det.mouseIsDown.get()) {\n a(comp, det);\n }\n }, [detail])\n ])\n }));\n }\n });\n const tlEdgePart = edgePart('top-left');\n const tedgePart = edgePart('top');\n const trEdgePart = edgePart('top-right');\n const redgePart = edgePart('right');\n const brEdgePart = edgePart('bottom-right');\n const bedgePart = edgePart('bottom');\n const blEdgePart = edgePart('bottom-left');\n const ledgePart = edgePart('left');\n const thumbPart = required({\n name: 'thumb',\n defaults: constant$1({ dom: { styles: { position: 'absolute' } } }),\n overrides: detail => {\n return {\n events: derive$2([\n redirectToPart(touchstart(), detail, 'spectrum'),\n redirectToPart(touchmove(), detail, 'spectrum'),\n redirectToPart(touchend(), detail, 'spectrum'),\n redirectToPart(mousedown(), detail, 'spectrum'),\n redirectToPart(mousemove(), detail, 'spectrum'),\n redirectToPart(mouseup(), detail, 'spectrum')\n ])\n };\n }\n });\n const spectrumPart = required({\n schema: [customField('mouseIsDown', () => Cell(false))],\n name: 'spectrum',\n overrides: detail => {\n const modelDetail = detail.model;\n const model = modelDetail.manager;\n const setValueFrom = (component, simulatedEvent) => model.getValueFromEvent(simulatedEvent).map(value => model.setValueFrom(component, detail, value));\n return {\n behaviours: derive$1([\n Keying.config({\n mode: 'special',\n onLeft: spectrum => model.onLeft(spectrum, detail),\n onRight: spectrum => model.onRight(spectrum, detail),\n onUp: spectrum => model.onUp(spectrum, detail),\n onDown: spectrum => model.onDown(spectrum, detail)\n }),\n Focusing.config({})\n ]),\n events: derive$2([\n run$1(touchstart(), setValueFrom),\n run$1(touchmove(), setValueFrom),\n run$1(mousedown(), setValueFrom),\n run$1(mousemove(), (spectrum, se) => {\n if (detail.mouseIsDown.get()) {\n setValueFrom(spectrum, se);\n }\n })\n ])\n };\n }\n });\n var SliderParts = [\n labelPart,\n ledgePart,\n redgePart,\n tedgePart,\n bedgePart,\n tlEdgePart,\n trEdgePart,\n blEdgePart,\n brEdgePart,\n thumbPart,\n spectrumPart\n ];\n\n const _sliderChangeEvent = 'slider.change.value';\n const sliderChangeEvent = constant$1(_sliderChangeEvent);\n const isTouchEvent$2 = evt => evt.type.indexOf('touch') !== -1;\n const getEventSource = simulatedEvent => {\n const evt = simulatedEvent.event.raw;\n if (isTouchEvent$2(evt)) {\n const touchEvent = evt;\n return touchEvent.touches !== undefined && touchEvent.touches.length === 1 ? Optional.some(touchEvent.touches[0]).map(t => SugarPosition(t.clientX, t.clientY)) : Optional.none();\n } else {\n const mouseEvent = evt;\n return mouseEvent.clientX !== undefined ? Optional.some(mouseEvent).map(me => SugarPosition(me.clientX, me.clientY)) : Optional.none();\n }\n };\n\n const t = 'top', r = 'right', b = 'bottom', l = 'left';\n const minX = detail => detail.model.minX;\n const minY = detail => detail.model.minY;\n const min1X = detail => detail.model.minX - 1;\n const min1Y = detail => detail.model.minY - 1;\n const maxX = detail => detail.model.maxX;\n const maxY = detail => detail.model.maxY;\n const max1X = detail => detail.model.maxX + 1;\n const max1Y = detail => detail.model.maxY + 1;\n const range = (detail, max, min) => max(detail) - min(detail);\n const xRange = detail => range(detail, maxX, minX);\n const yRange = detail => range(detail, maxY, minY);\n const halfX = detail => xRange(detail) / 2;\n const halfY = detail => yRange(detail) / 2;\n const step = detail => detail.stepSize;\n const snap = detail => detail.snapToGrid;\n const snapStart = detail => detail.snapStart;\n const rounded = detail => detail.rounded;\n const hasEdge = (detail, edgeName) => detail[edgeName + '-edge'] !== undefined;\n const hasLEdge = detail => hasEdge(detail, l);\n const hasREdge = detail => hasEdge(detail, r);\n const hasTEdge = detail => hasEdge(detail, t);\n const hasBEdge = detail => hasEdge(detail, b);\n const currentValue = detail => detail.model.value.get();\n\n const xyValue = (x, y) => ({\n x,\n y\n });\n const fireSliderChange$3 = (component, value) => {\n emitWith(component, sliderChangeEvent(), { value });\n };\n const setToTLEdgeXY = (edge, detail) => {\n fireSliderChange$3(edge, xyValue(min1X(detail), min1Y(detail)));\n };\n const setToTEdge = (edge, detail) => {\n fireSliderChange$3(edge, min1Y(detail));\n };\n const setToTEdgeXY = (edge, detail) => {\n fireSliderChange$3(edge, xyValue(halfX(detail), min1Y(detail)));\n };\n const setToTREdgeXY = (edge, detail) => {\n fireSliderChange$3(edge, xyValue(max1X(detail), min1Y(detail)));\n };\n const setToREdge = (edge, detail) => {\n fireSliderChange$3(edge, max1X(detail));\n };\n const setToREdgeXY = (edge, detail) => {\n fireSliderChange$3(edge, xyValue(max1X(detail), halfY(detail)));\n };\n const setToBREdgeXY = (edge, detail) => {\n fireSliderChange$3(edge, xyValue(max1X(detail), max1Y(detail)));\n };\n const setToBEdge = (edge, detail) => {\n fireSliderChange$3(edge, max1Y(detail));\n };\n const setToBEdgeXY = (edge, detail) => {\n fireSliderChange$3(edge, xyValue(halfX(detail), max1Y(detail)));\n };\n const setToBLEdgeXY = (edge, detail) => {\n fireSliderChange$3(edge, xyValue(min1X(detail), max1Y(detail)));\n };\n const setToLEdge = (edge, detail) => {\n fireSliderChange$3(edge, min1X(detail));\n };\n const setToLEdgeXY = (edge, detail) => {\n fireSliderChange$3(edge, xyValue(min1X(detail), halfY(detail)));\n };\n\n const reduceBy = (value, min, max, step) => {\n if (value < min) {\n return value;\n } else if (value > max) {\n return max;\n } else if (value === min) {\n return min - 1;\n } else {\n return Math.max(min, value - step);\n }\n };\n const increaseBy = (value, min, max, step) => {\n if (value > max) {\n return value;\n } else if (value < min) {\n return min;\n } else if (value === max) {\n return max + 1;\n } else {\n return Math.min(max, value + step);\n }\n };\n const capValue = (value, min, max) => Math.max(min, Math.min(max, value));\n const snapValueOf = (value, min, max, step, snapStart) => snapStart.fold(() => {\n const initValue = value - min;\n const extraValue = Math.round(initValue / step) * step;\n return capValue(min + extraValue, min - 1, max + 1);\n }, start => {\n const remainder = (value - start) % step;\n const adjustment = Math.round(remainder / step);\n const rawSteps = Math.floor((value - start) / step);\n const maxSteps = Math.floor((max - start) / step);\n const numSteps = Math.min(maxSteps, rawSteps + adjustment);\n const r = start + numSteps * step;\n return Math.max(start, r);\n });\n const findOffsetOf = (value, min, max) => Math.min(max, Math.max(value, min)) - min;\n const findValueOf = args => {\n const {min, max, range, value, step, snap, snapStart, rounded, hasMinEdge, hasMaxEdge, minBound, maxBound, screenRange} = args;\n const capMin = hasMinEdge ? min - 1 : min;\n const capMax = hasMaxEdge ? max + 1 : max;\n if (value < minBound) {\n return capMin;\n } else if (value > maxBound) {\n return capMax;\n } else {\n const offset = findOffsetOf(value, minBound, maxBound);\n const newValue = capValue(offset / screenRange * range + min, capMin, capMax);\n if (snap && newValue >= min && newValue <= max) {\n return snapValueOf(newValue, min, max, step, snapStart);\n } else if (rounded) {\n return Math.round(newValue);\n } else {\n return newValue;\n }\n }\n };\n const findOffsetOfValue$2 = args => {\n const {min, max, range, value, hasMinEdge, hasMaxEdge, maxBound, maxOffset, centerMinEdge, centerMaxEdge} = args;\n if (value < min) {\n return hasMinEdge ? 0 : centerMinEdge;\n } else if (value > max) {\n return hasMaxEdge ? maxBound : centerMaxEdge;\n } else {\n return (value - min) / range * maxOffset;\n }\n };\n\n const top = 'top', right = 'right', bottom = 'bottom', left = 'left', width = 'width', height = 'height';\n const getBounds = component => component.element.dom.getBoundingClientRect();\n const getBoundsProperty = (bounds, property) => bounds[property];\n const getMinXBounds = component => {\n const bounds = getBounds(component);\n return getBoundsProperty(bounds, left);\n };\n const getMaxXBounds = component => {\n const bounds = getBounds(component);\n return getBoundsProperty(bounds, right);\n };\n const getMinYBounds = component => {\n const bounds = getBounds(component);\n return getBoundsProperty(bounds, top);\n };\n const getMaxYBounds = component => {\n const bounds = getBounds(component);\n return getBoundsProperty(bounds, bottom);\n };\n const getXScreenRange = component => {\n const bounds = getBounds(component);\n return getBoundsProperty(bounds, width);\n };\n const getYScreenRange = component => {\n const bounds = getBounds(component);\n return getBoundsProperty(bounds, height);\n };\n const getCenterOffsetOf = (componentMinEdge, componentMaxEdge, spectrumMinEdge) => (componentMinEdge + componentMaxEdge) / 2 - spectrumMinEdge;\n const getXCenterOffSetOf = (component, spectrum) => {\n const componentBounds = getBounds(component);\n const spectrumBounds = getBounds(spectrum);\n const componentMinEdge = getBoundsProperty(componentBounds, left);\n const componentMaxEdge = getBoundsProperty(componentBounds, right);\n const spectrumMinEdge = getBoundsProperty(spectrumBounds, left);\n return getCenterOffsetOf(componentMinEdge, componentMaxEdge, spectrumMinEdge);\n };\n const getYCenterOffSetOf = (component, spectrum) => {\n const componentBounds = getBounds(component);\n const spectrumBounds = getBounds(spectrum);\n const componentMinEdge = getBoundsProperty(componentBounds, top);\n const componentMaxEdge = getBoundsProperty(componentBounds, bottom);\n const spectrumMinEdge = getBoundsProperty(spectrumBounds, top);\n return getCenterOffsetOf(componentMinEdge, componentMaxEdge, spectrumMinEdge);\n };\n\n const fireSliderChange$2 = (spectrum, value) => {\n emitWith(spectrum, sliderChangeEvent(), { value });\n };\n const findValueOfOffset$1 = (spectrum, detail, left) => {\n const args = {\n min: minX(detail),\n max: maxX(detail),\n range: xRange(detail),\n value: left,\n step: step(detail),\n snap: snap(detail),\n snapStart: snapStart(detail),\n rounded: rounded(detail),\n hasMinEdge: hasLEdge(detail),\n hasMaxEdge: hasREdge(detail),\n minBound: getMinXBounds(spectrum),\n maxBound: getMaxXBounds(spectrum),\n screenRange: getXScreenRange(spectrum)\n };\n return findValueOf(args);\n };\n const setValueFrom$2 = (spectrum, detail, value) => {\n const xValue = findValueOfOffset$1(spectrum, detail, value);\n const sliderVal = xValue;\n fireSliderChange$2(spectrum, sliderVal);\n return xValue;\n };\n const setToMin$2 = (spectrum, detail) => {\n const min = minX(detail);\n fireSliderChange$2(spectrum, min);\n };\n const setToMax$2 = (spectrum, detail) => {\n const max = maxX(detail);\n fireSliderChange$2(spectrum, max);\n };\n const moveBy$2 = (direction, spectrum, detail) => {\n const f = direction > 0 ? increaseBy : reduceBy;\n const xValue = f(currentValue(detail), minX(detail), maxX(detail), step(detail));\n fireSliderChange$2(spectrum, xValue);\n return Optional.some(xValue);\n };\n const handleMovement$2 = direction => (spectrum, detail) => moveBy$2(direction, spectrum, detail).map(always);\n const getValueFromEvent$2 = simulatedEvent => {\n const pos = getEventSource(simulatedEvent);\n return pos.map(p => p.left);\n };\n const findOffsetOfValue$1 = (spectrum, detail, value, minEdge, maxEdge) => {\n const minOffset = 0;\n const maxOffset = getXScreenRange(spectrum);\n const centerMinEdge = minEdge.bind(edge => Optional.some(getXCenterOffSetOf(edge, spectrum))).getOr(minOffset);\n const centerMaxEdge = maxEdge.bind(edge => Optional.some(getXCenterOffSetOf(edge, spectrum))).getOr(maxOffset);\n const args = {\n min: minX(detail),\n max: maxX(detail),\n range: xRange(detail),\n value,\n hasMinEdge: hasLEdge(detail),\n hasMaxEdge: hasREdge(detail),\n minBound: getMinXBounds(spectrum),\n minOffset,\n maxBound: getMaxXBounds(spectrum),\n maxOffset,\n centerMinEdge,\n centerMaxEdge\n };\n return findOffsetOfValue$2(args);\n };\n const findPositionOfValue$1 = (slider, spectrum, value, minEdge, maxEdge, detail) => {\n const offset = findOffsetOfValue$1(spectrum, detail, value, minEdge, maxEdge);\n return getMinXBounds(spectrum) - getMinXBounds(slider) + offset;\n };\n const setPositionFromValue$2 = (slider, thumb, detail, edges) => {\n const value = currentValue(detail);\n const pos = findPositionOfValue$1(slider, edges.getSpectrum(slider), value, edges.getLeftEdge(slider), edges.getRightEdge(slider), detail);\n const thumbRadius = get$c(thumb.element) / 2;\n set$8(thumb.element, 'left', pos - thumbRadius + 'px');\n };\n const onLeft$2 = handleMovement$2(-1);\n const onRight$2 = handleMovement$2(1);\n const onUp$2 = Optional.none;\n const onDown$2 = Optional.none;\n const edgeActions$2 = {\n 'top-left': Optional.none(),\n 'top': Optional.none(),\n 'top-right': Optional.none(),\n 'right': Optional.some(setToREdge),\n 'bottom-right': Optional.none(),\n 'bottom': Optional.none(),\n 'bottom-left': Optional.none(),\n 'left': Optional.some(setToLEdge)\n };\n\n var HorizontalModel = /*#__PURE__*/Object.freeze({\n __proto__: null,\n setValueFrom: setValueFrom$2,\n setToMin: setToMin$2,\n setToMax: setToMax$2,\n findValueOfOffset: findValueOfOffset$1,\n getValueFromEvent: getValueFromEvent$2,\n findPositionOfValue: findPositionOfValue$1,\n setPositionFromValue: setPositionFromValue$2,\n onLeft: onLeft$2,\n onRight: onRight$2,\n onUp: onUp$2,\n onDown: onDown$2,\n edgeActions: edgeActions$2\n });\n\n const fireSliderChange$1 = (spectrum, value) => {\n emitWith(spectrum, sliderChangeEvent(), { value });\n };\n const findValueOfOffset = (spectrum, detail, top) => {\n const args = {\n min: minY(detail),\n max: maxY(detail),\n range: yRange(detail),\n value: top,\n step: step(detail),\n snap: snap(detail),\n snapStart: snapStart(detail),\n rounded: rounded(detail),\n hasMinEdge: hasTEdge(detail),\n hasMaxEdge: hasBEdge(detail),\n minBound: getMinYBounds(spectrum),\n maxBound: getMaxYBounds(spectrum),\n screenRange: getYScreenRange(spectrum)\n };\n return findValueOf(args);\n };\n const setValueFrom$1 = (spectrum, detail, value) => {\n const yValue = findValueOfOffset(spectrum, detail, value);\n const sliderVal = yValue;\n fireSliderChange$1(spectrum, sliderVal);\n return yValue;\n };\n const setToMin$1 = (spectrum, detail) => {\n const min = minY(detail);\n fireSliderChange$1(spectrum, min);\n };\n const setToMax$1 = (spectrum, detail) => {\n const max = maxY(detail);\n fireSliderChange$1(spectrum, max);\n };\n const moveBy$1 = (direction, spectrum, detail) => {\n const f = direction > 0 ? increaseBy : reduceBy;\n const yValue = f(currentValue(detail), minY(detail), maxY(detail), step(detail));\n fireSliderChange$1(spectrum, yValue);\n return Optional.some(yValue);\n };\n const handleMovement$1 = direction => (spectrum, detail) => moveBy$1(direction, spectrum, detail).map(always);\n const getValueFromEvent$1 = simulatedEvent => {\n const pos = getEventSource(simulatedEvent);\n return pos.map(p => {\n return p.top;\n });\n };\n const findOffsetOfValue = (spectrum, detail, value, minEdge, maxEdge) => {\n const minOffset = 0;\n const maxOffset = getYScreenRange(spectrum);\n const centerMinEdge = minEdge.bind(edge => Optional.some(getYCenterOffSetOf(edge, spectrum))).getOr(minOffset);\n const centerMaxEdge = maxEdge.bind(edge => Optional.some(getYCenterOffSetOf(edge, spectrum))).getOr(maxOffset);\n const args = {\n min: minY(detail),\n max: maxY(detail),\n range: yRange(detail),\n value,\n hasMinEdge: hasTEdge(detail),\n hasMaxEdge: hasBEdge(detail),\n minBound: getMinYBounds(spectrum),\n minOffset,\n maxBound: getMaxYBounds(spectrum),\n maxOffset,\n centerMinEdge,\n centerMaxEdge\n };\n return findOffsetOfValue$2(args);\n };\n const findPositionOfValue = (slider, spectrum, value, minEdge, maxEdge, detail) => {\n const offset = findOffsetOfValue(spectrum, detail, value, minEdge, maxEdge);\n return getMinYBounds(spectrum) - getMinYBounds(slider) + offset;\n };\n const setPositionFromValue$1 = (slider, thumb, detail, edges) => {\n const value = currentValue(detail);\n const pos = findPositionOfValue(slider, edges.getSpectrum(slider), value, edges.getTopEdge(slider), edges.getBottomEdge(slider), detail);\n const thumbRadius = get$d(thumb.element) / 2;\n set$8(thumb.element, 'top', pos - thumbRadius + 'px');\n };\n const onLeft$1 = Optional.none;\n const onRight$1 = Optional.none;\n const onUp$1 = handleMovement$1(-1);\n const onDown$1 = handleMovement$1(1);\n const edgeActions$1 = {\n 'top-left': Optional.none(),\n 'top': Optional.some(setToTEdge),\n 'top-right': Optional.none(),\n 'right': Optional.none(),\n 'bottom-right': Optional.none(),\n 'bottom': Optional.some(setToBEdge),\n 'bottom-left': Optional.none(),\n 'left': Optional.none()\n };\n\n var VerticalModel = /*#__PURE__*/Object.freeze({\n __proto__: null,\n setValueFrom: setValueFrom$1,\n setToMin: setToMin$1,\n setToMax: setToMax$1,\n findValueOfOffset: findValueOfOffset,\n getValueFromEvent: getValueFromEvent$1,\n findPositionOfValue: findPositionOfValue,\n setPositionFromValue: setPositionFromValue$1,\n onLeft: onLeft$1,\n onRight: onRight$1,\n onUp: onUp$1,\n onDown: onDown$1,\n edgeActions: edgeActions$1\n });\n\n const fireSliderChange = (spectrum, value) => {\n emitWith(spectrum, sliderChangeEvent(), { value });\n };\n const sliderValue = (x, y) => ({\n x,\n y\n });\n const setValueFrom = (spectrum, detail, value) => {\n const xValue = findValueOfOffset$1(spectrum, detail, value.left);\n const yValue = findValueOfOffset(spectrum, detail, value.top);\n const val = sliderValue(xValue, yValue);\n fireSliderChange(spectrum, val);\n return val;\n };\n const moveBy = (direction, isVerticalMovement, spectrum, detail) => {\n const f = direction > 0 ? increaseBy : reduceBy;\n const xValue = isVerticalMovement ? currentValue(detail).x : f(currentValue(detail).x, minX(detail), maxX(detail), step(detail));\n const yValue = !isVerticalMovement ? currentValue(detail).y : f(currentValue(detail).y, minY(detail), maxY(detail), step(detail));\n fireSliderChange(spectrum, sliderValue(xValue, yValue));\n return Optional.some(xValue);\n };\n const handleMovement = (direction, isVerticalMovement) => (spectrum, detail) => moveBy(direction, isVerticalMovement, spectrum, detail).map(always);\n const setToMin = (spectrum, detail) => {\n const mX = minX(detail);\n const mY = minY(detail);\n fireSliderChange(spectrum, sliderValue(mX, mY));\n };\n const setToMax = (spectrum, detail) => {\n const mX = maxX(detail);\n const mY = maxY(detail);\n fireSliderChange(spectrum, sliderValue(mX, mY));\n };\n const getValueFromEvent = simulatedEvent => getEventSource(simulatedEvent);\n const setPositionFromValue = (slider, thumb, detail, edges) => {\n const value = currentValue(detail);\n const xPos = findPositionOfValue$1(slider, edges.getSpectrum(slider), value.x, edges.getLeftEdge(slider), edges.getRightEdge(slider), detail);\n const yPos = findPositionOfValue(slider, edges.getSpectrum(slider), value.y, edges.getTopEdge(slider), edges.getBottomEdge(slider), detail);\n const thumbXRadius = get$c(thumb.element) / 2;\n const thumbYRadius = get$d(thumb.element) / 2;\n set$8(thumb.element, 'left', xPos - thumbXRadius + 'px');\n set$8(thumb.element, 'top', yPos - thumbYRadius + 'px');\n };\n const onLeft = handleMovement(-1, false);\n const onRight = handleMovement(1, false);\n const onUp = handleMovement(-1, true);\n const onDown = handleMovement(1, true);\n const edgeActions = {\n 'top-left': Optional.some(setToTLEdgeXY),\n 'top': Optional.some(setToTEdgeXY),\n 'top-right': Optional.some(setToTREdgeXY),\n 'right': Optional.some(setToREdgeXY),\n 'bottom-right': Optional.some(setToBREdgeXY),\n 'bottom': Optional.some(setToBEdgeXY),\n 'bottom-left': Optional.some(setToBLEdgeXY),\n 'left': Optional.some(setToLEdgeXY)\n };\n\n var TwoDModel = /*#__PURE__*/Object.freeze({\n __proto__: null,\n setValueFrom: setValueFrom,\n setToMin: setToMin,\n setToMax: setToMax,\n getValueFromEvent: getValueFromEvent,\n setPositionFromValue: setPositionFromValue,\n onLeft: onLeft,\n onRight: onRight,\n onUp: onUp,\n onDown: onDown,\n edgeActions: edgeActions\n });\n\n const SliderSchema = [\n defaulted('stepSize', 1),\n defaulted('onChange', noop),\n defaulted('onChoose', noop),\n defaulted('onInit', noop),\n defaulted('onDragStart', noop),\n defaulted('onDragEnd', noop),\n defaulted('snapToGrid', false),\n defaulted('rounded', true),\n option$3('snapStart'),\n requiredOf('model', choose$1('mode', {\n x: [\n defaulted('minX', 0),\n defaulted('maxX', 100),\n customField('value', spec => Cell(spec.mode.minX)),\n required$1('getInitialValue'),\n output$1('manager', HorizontalModel)\n ],\n y: [\n defaulted('minY', 0),\n defaulted('maxY', 100),\n customField('value', spec => Cell(spec.mode.minY)),\n required$1('getInitialValue'),\n output$1('manager', VerticalModel)\n ],\n xy: [\n defaulted('minX', 0),\n defaulted('maxX', 100),\n defaulted('minY', 0),\n defaulted('maxY', 100),\n customField('value', spec => Cell({\n x: spec.mode.minX,\n y: spec.mode.minY\n })),\n required$1('getInitialValue'),\n output$1('manager', TwoDModel)\n ]\n })),\n field('sliderBehaviours', [\n Keying,\n Representing\n ]),\n customField('mouseIsDown', () => Cell(false))\n ];\n\n const sketch$2 = (detail, components, _spec, _externals) => {\n const getThumb = component => getPartOrDie(component, detail, 'thumb');\n const getSpectrum = component => getPartOrDie(component, detail, 'spectrum');\n const getLeftEdge = component => getPart(component, detail, 'left-edge');\n const getRightEdge = component => getPart(component, detail, 'right-edge');\n const getTopEdge = component => getPart(component, detail, 'top-edge');\n const getBottomEdge = component => getPart(component, detail, 'bottom-edge');\n const modelDetail = detail.model;\n const model = modelDetail.manager;\n const refresh = (slider, thumb) => {\n model.setPositionFromValue(slider, thumb, detail, {\n getLeftEdge,\n getRightEdge,\n getTopEdge,\n getBottomEdge,\n getSpectrum\n });\n };\n const setValue = (slider, newValue) => {\n modelDetail.value.set(newValue);\n const thumb = getThumb(slider);\n refresh(slider, thumb);\n };\n const changeValue = (slider, newValue) => {\n setValue(slider, newValue);\n const thumb = getThumb(slider);\n detail.onChange(slider, thumb, newValue);\n return Optional.some(true);\n };\n const resetToMin = slider => {\n model.setToMin(slider, detail);\n };\n const resetToMax = slider => {\n model.setToMax(slider, detail);\n };\n const choose = slider => {\n const fireOnChoose = () => {\n getPart(slider, detail, 'thumb').each(thumb => {\n const value = modelDetail.value.get();\n detail.onChoose(slider, thumb, value);\n });\n };\n const wasDown = detail.mouseIsDown.get();\n detail.mouseIsDown.set(false);\n if (wasDown) {\n fireOnChoose();\n }\n };\n const onDragStart = (slider, simulatedEvent) => {\n simulatedEvent.stop();\n detail.mouseIsDown.set(true);\n detail.onDragStart(slider, getThumb(slider));\n };\n const onDragEnd = (slider, simulatedEvent) => {\n simulatedEvent.stop();\n detail.onDragEnd(slider, getThumb(slider));\n choose(slider);\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: augment(detail.sliderBehaviours, [\n Keying.config({\n mode: 'special',\n focusIn: slider => {\n return getPart(slider, detail, 'spectrum').map(Keying.focusIn).map(always);\n }\n }),\n Representing.config({\n store: {\n mode: 'manual',\n getValue: _ => {\n return modelDetail.value.get();\n },\n setValue\n }\n }),\n Receiving.config({ channels: { [mouseReleased()]: { onReceive: choose } } })\n ]),\n events: derive$2([\n run$1(sliderChangeEvent(), (slider, simulatedEvent) => {\n changeValue(slider, simulatedEvent.event.value);\n }),\n runOnAttached((slider, _simulatedEvent) => {\n const getInitial = modelDetail.getInitialValue();\n modelDetail.value.set(getInitial);\n const thumb = getThumb(slider);\n refresh(slider, thumb);\n const spectrum = getSpectrum(slider);\n detail.onInit(slider, thumb, spectrum, modelDetail.value.get());\n }),\n run$1(touchstart(), onDragStart),\n run$1(touchend(), onDragEnd),\n run$1(mousedown(), onDragStart),\n run$1(mouseup(), onDragEnd)\n ]),\n apis: {\n resetToMin,\n resetToMax,\n setValue,\n refresh\n },\n domModification: { styles: { position: 'relative' } }\n };\n };\n\n const Slider = composite({\n name: 'Slider',\n configFields: SliderSchema,\n partFields: SliderParts,\n factory: sketch$2,\n apis: {\n setValue: (apis, slider, value) => {\n apis.setValue(slider, value);\n },\n resetToMin: (apis, slider) => {\n apis.resetToMin(slider);\n },\n resetToMax: (apis, slider) => {\n apis.resetToMax(slider);\n },\n refresh: (apis, slider) => {\n apis.refresh(slider);\n }\n }\n });\n\n const fieldsUpdate = generate$6('rgb-hex-update');\n const sliderUpdate = generate$6('slider-update');\n const paletteUpdate = generate$6('palette-update');\n\n const sliderFactory = (translate, getClass) => {\n const spectrum = Slider.parts.spectrum({\n dom: {\n tag: 'div',\n classes: [getClass('hue-slider-spectrum')],\n attributes: { role: 'presentation' }\n }\n });\n const thumb = Slider.parts.thumb({\n dom: {\n tag: 'div',\n classes: [getClass('hue-slider-thumb')],\n attributes: { role: 'presentation' }\n }\n });\n return Slider.sketch({\n dom: {\n tag: 'div',\n classes: [getClass('hue-slider')],\n attributes: { role: 'presentation' }\n },\n rounded: false,\n model: {\n mode: 'y',\n getInitialValue: constant$1(0)\n },\n components: [\n spectrum,\n thumb\n ],\n sliderBehaviours: derive$1([Focusing.config({})]),\n onChange: (slider, _thumb, value) => {\n emitWith(slider, sliderUpdate, { value });\n }\n });\n };\n\n const owner$1 = 'form';\n const schema$i = [field('formBehaviours', [Representing])];\n const getPartName$1 = name => '';\n const sketch$1 = fSpec => {\n const parts = (() => {\n const record = [];\n const field = (name, config) => {\n record.push(name);\n return generateOne$1(owner$1, getPartName$1(name), config);\n };\n return {\n field,\n record: constant$1(record)\n };\n })();\n const spec = fSpec(parts);\n const partNames = parts.record();\n const fieldParts = map$2(partNames, n => required({\n name: n,\n pname: getPartName$1(n)\n }));\n return composite$1(owner$1, schema$i, fieldParts, make$4, spec);\n };\n const toResult = (o, e) => o.fold(() => Result.error(e), Result.value);\n const make$4 = (detail, components) => ({\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: augment(detail.formBehaviours, [Representing.config({\n store: {\n mode: 'manual',\n getValue: form => {\n const resPs = getAllParts(form, detail);\n return map$1(resPs, (resPThunk, pName) => resPThunk().bind(v => {\n const opt = Composing.getCurrent(v);\n return toResult(opt, new Error(`Cannot find a current component to extract the value from for form part '${ pName }': ` + element(v.element)));\n }).map(Representing.getValue));\n },\n setValue: (form, values) => {\n each(values, (newValue, key) => {\n getPart(form, detail, key).each(wrapper => {\n Composing.getCurrent(wrapper).each(field => {\n Representing.setValue(field, newValue);\n });\n });\n });\n }\n }\n })]),\n apis: {\n getField: (form, key) => {\n return getPart(form, detail, key).bind(Composing.getCurrent);\n }\n }\n });\n const Form = {\n getField: makeApi((apis, component, key) => apis.getField(component, key)),\n sketch: sketch$1\n };\n\n const validInput = generate$6('valid-input');\n const invalidInput = generate$6('invalid-input');\n const validatingInput = generate$6('validating-input');\n const translatePrefix = 'colorcustom.rgb.';\n const rgbFormFactory = (translate, getClass, onValidHexx, onInvalidHexx) => {\n const invalidation = (label, isValid) => Invalidating.config({\n invalidClass: getClass('invalid'),\n notify: {\n onValidate: comp => {\n emitWith(comp, validatingInput, { type: label });\n },\n onValid: comp => {\n emitWith(comp, validInput, {\n type: label,\n value: Representing.getValue(comp)\n });\n },\n onInvalid: comp => {\n emitWith(comp, invalidInput, {\n type: label,\n value: Representing.getValue(comp)\n });\n }\n },\n validator: {\n validate: comp => {\n const value = Representing.getValue(comp);\n const res = isValid(value) ? Result.value(true) : Result.error(translate('aria.input.invalid'));\n return Future.pure(res);\n },\n validateOnLoad: false\n }\n });\n const renderTextField = (isValid, name, label, description, data) => {\n const helptext = translate(translatePrefix + 'range');\n const pLabel = FormField.parts.label({\n dom: {\n tag: 'label',\n attributes: { 'aria-label': description }\n },\n components: [text$2(label)]\n });\n const pField = FormField.parts.field({\n data,\n factory: Input,\n inputAttributes: {\n type: 'text',\n ...name === 'hex' ? { 'aria-live': 'polite' } : {}\n },\n inputClasses: [getClass('textfield')],\n inputBehaviours: derive$1([\n invalidation(name, isValid),\n Tabstopping.config({})\n ]),\n onSetValue: input => {\n if (Invalidating.isInvalid(input)) {\n const run = Invalidating.run(input);\n run.get(noop);\n }\n }\n });\n const comps = [\n pLabel,\n pField\n ];\n const concats = name !== 'hex' ? [FormField.parts['aria-descriptor']({ text: helptext })] : [];\n const components = comps.concat(concats);\n return {\n dom: {\n tag: 'div',\n attributes: { role: 'presentation' }\n },\n components\n };\n };\n const copyRgbToHex = (form, rgba) => {\n const hex = fromRgba(rgba);\n Form.getField(form, 'hex').each(hexField => {\n if (!Focusing.isFocused(hexField)) {\n Representing.setValue(form, { hex: hex.value });\n }\n });\n return hex;\n };\n const copyRgbToForm = (form, rgb) => {\n const red = rgb.red;\n const green = rgb.green;\n const blue = rgb.blue;\n Representing.setValue(form, {\n red,\n green,\n blue\n });\n };\n const memPreview = record({\n dom: {\n tag: 'div',\n classes: [getClass('rgba-preview')],\n styles: { 'background-color': 'white' },\n attributes: { role: 'presentation' }\n }\n });\n const updatePreview = (anyInSystem, hex) => {\n memPreview.getOpt(anyInSystem).each(preview => {\n set$8(preview.element, 'background-color', '#' + hex.value);\n });\n };\n const factory = () => {\n const state = {\n red: Cell(Optional.some(255)),\n green: Cell(Optional.some(255)),\n blue: Cell(Optional.some(255)),\n hex: Cell(Optional.some('ffffff'))\n };\n const copyHexToRgb = (form, hex) => {\n const rgb = fromHex(hex);\n copyRgbToForm(form, rgb);\n setValueRgb(rgb);\n };\n const get = prop => state[prop].get();\n const set = (prop, value) => {\n state[prop].set(value);\n };\n const getValueRgb = () => get('red').bind(red => get('green').bind(green => get('blue').map(blue => rgbaColour(red, green, blue, 1))));\n const setValueRgb = rgb => {\n const red = rgb.red;\n const green = rgb.green;\n const blue = rgb.blue;\n set('red', Optional.some(red));\n set('green', Optional.some(green));\n set('blue', Optional.some(blue));\n };\n const onInvalidInput = (form, simulatedEvent) => {\n const data = simulatedEvent.event;\n if (data.type !== 'hex') {\n set(data.type, Optional.none());\n } else {\n onInvalidHexx(form);\n }\n };\n const onValidHex = (form, value) => {\n onValidHexx(form);\n const hex = hexColour(value);\n set('hex', Optional.some(value));\n const rgb = fromHex(hex);\n copyRgbToForm(form, rgb);\n setValueRgb(rgb);\n emitWith(form, fieldsUpdate, { hex });\n updatePreview(form, hex);\n };\n const onValidRgb = (form, prop, value) => {\n const val = parseInt(value, 10);\n set(prop, Optional.some(val));\n getValueRgb().each(rgb => {\n const hex = copyRgbToHex(form, rgb);\n emitWith(form, fieldsUpdate, { hex });\n updatePreview(form, hex);\n });\n };\n const isHexInputEvent = data => data.type === 'hex';\n const onValidInput = (form, simulatedEvent) => {\n const data = simulatedEvent.event;\n if (isHexInputEvent(data)) {\n onValidHex(form, data.value);\n } else {\n onValidRgb(form, data.type, data.value);\n }\n };\n const formPartStrings = key => ({\n label: translate(translatePrefix + key + '.label'),\n description: translate(translatePrefix + key + '.description')\n });\n const redStrings = formPartStrings('red');\n const greenStrings = formPartStrings('green');\n const blueStrings = formPartStrings('blue');\n const hexStrings = formPartStrings('hex');\n return deepMerge(Form.sketch(parts => ({\n dom: {\n tag: 'form',\n classes: [getClass('rgb-form')],\n attributes: { 'aria-label': translate('aria.color.picker') }\n },\n components: [\n parts.field('red', FormField.sketch(renderTextField(isRgbaComponent, 'red', redStrings.label, redStrings.description, 255))),\n parts.field('green', FormField.sketch(renderTextField(isRgbaComponent, 'green', greenStrings.label, greenStrings.description, 255))),\n parts.field('blue', FormField.sketch(renderTextField(isRgbaComponent, 'blue', blueStrings.label, blueStrings.description, 255))),\n parts.field('hex', FormField.sketch(renderTextField(isHexString, 'hex', hexStrings.label, hexStrings.description, 'ffffff'))),\n memPreview.asSpec()\n ],\n formBehaviours: derive$1([\n Invalidating.config({ invalidClass: getClass('form-invalid') }),\n config('rgb-form-events', [\n run$1(validInput, onValidInput),\n run$1(invalidInput, onInvalidInput),\n run$1(validatingInput, onInvalidInput)\n ])\n ])\n })), {\n apis: {\n updateHex: (form, hex) => {\n Representing.setValue(form, { hex: hex.value });\n copyHexToRgb(form, hex);\n updatePreview(form, hex);\n }\n }\n });\n };\n const rgbFormSketcher = single({\n factory,\n name: 'RgbForm',\n configFields: [],\n apis: {\n updateHex: (apis, form, hex) => {\n apis.updateHex(form, hex);\n }\n },\n extraApis: {}\n });\n return rgbFormSketcher;\n };\n\n const paletteFactory = (_translate, getClass) => {\n const spectrumPart = Slider.parts.spectrum({\n dom: {\n tag: 'canvas',\n attributes: { role: 'presentation' },\n classes: [getClass('sv-palette-spectrum')]\n }\n });\n const thumbPart = Slider.parts.thumb({\n dom: {\n tag: 'div',\n attributes: { role: 'presentation' },\n classes: [getClass('sv-palette-thumb')],\n innerHtml: ``\n }\n });\n const setColour = (canvas, rgba) => {\n const {width, height} = canvas;\n const ctx = canvas.getContext('2d');\n if (ctx === null) {\n return;\n }\n ctx.fillStyle = rgba;\n ctx.fillRect(0, 0, width, height);\n const grdWhite = ctx.createLinearGradient(0, 0, width, 0);\n grdWhite.addColorStop(0, 'rgba(255,255,255,1)');\n grdWhite.addColorStop(1, 'rgba(255,255,255,0)');\n ctx.fillStyle = grdWhite;\n ctx.fillRect(0, 0, width, height);\n const grdBlack = ctx.createLinearGradient(0, 0, 0, height);\n grdBlack.addColorStop(0, 'rgba(0,0,0,0)');\n grdBlack.addColorStop(1, 'rgba(0,0,0,1)');\n ctx.fillStyle = grdBlack;\n ctx.fillRect(0, 0, width, height);\n };\n const setPaletteHue = (slider, hue) => {\n const canvas = slider.components()[0].element.dom;\n const hsv = hsvColour(hue, 100, 100);\n const rgba = fromHsv(hsv);\n setColour(canvas, toString(rgba));\n };\n const setPaletteThumb = (slider, hex) => {\n const hsv = fromRgb(fromHex(hex));\n Slider.setValue(slider, {\n x: hsv.saturation,\n y: 100 - hsv.value\n });\n };\n const factory = _detail => {\n const getInitialValue = constant$1({\n x: 0,\n y: 0\n });\n const onChange = (slider, _thumb, value) => {\n emitWith(slider, paletteUpdate, { value });\n };\n const onInit = (_slider, _thumb, spectrum, _value) => {\n setColour(spectrum.element.dom, toString(red));\n };\n const sliderBehaviours = derive$1([\n Composing.config({ find: Optional.some }),\n Focusing.config({})\n ]);\n return Slider.sketch({\n dom: {\n tag: 'div',\n attributes: { role: 'presentation' },\n classes: [getClass('sv-palette')]\n },\n model: {\n mode: 'xy',\n getInitialValue\n },\n rounded: false,\n components: [\n spectrumPart,\n thumbPart\n ],\n onChange,\n onInit,\n sliderBehaviours\n });\n };\n const saturationBrightnessPaletteSketcher = single({\n factory,\n name: 'SaturationBrightnessPalette',\n configFields: [],\n apis: {\n setHue: (_apis, slider, hue) => {\n setPaletteHue(slider, hue);\n },\n setThumb: (_apis, slider, hex) => {\n setPaletteThumb(slider, hex);\n }\n },\n extraApis: {}\n });\n return saturationBrightnessPaletteSketcher;\n };\n\n const makeFactory = (translate, getClass) => {\n const factory = detail => {\n const rgbForm = rgbFormFactory(translate, getClass, detail.onValidHex, detail.onInvalidHex);\n const sbPalette = paletteFactory(translate, getClass);\n const hueSliderToDegrees = hue => (100 - hue) / 100 * 360;\n const hueDegreesToSlider = hue => 100 - hue / 360 * 100;\n const state = {\n paletteRgba: Cell(red),\n paletteHue: Cell(0)\n };\n const memSlider = record(sliderFactory(translate, getClass));\n const memPalette = record(sbPalette.sketch({}));\n const memRgb = record(rgbForm.sketch({}));\n const updatePalette = (anyInSystem, _hex, hue) => {\n memPalette.getOpt(anyInSystem).each(palette => {\n sbPalette.setHue(palette, hue);\n });\n };\n const updateFields = (anyInSystem, hex) => {\n memRgb.getOpt(anyInSystem).each(form => {\n rgbForm.updateHex(form, hex);\n });\n };\n const updateSlider = (anyInSystem, _hex, hue) => {\n memSlider.getOpt(anyInSystem).each(slider => {\n Slider.setValue(slider, hueDegreesToSlider(hue));\n });\n };\n const updatePaletteThumb = (anyInSystem, hex) => {\n memPalette.getOpt(anyInSystem).each(palette => {\n sbPalette.setThumb(palette, hex);\n });\n };\n const updateState = (hex, hue) => {\n const rgba = fromHex(hex);\n state.paletteRgba.set(rgba);\n state.paletteHue.set(hue);\n };\n const runUpdates = (anyInSystem, hex, hue, updates) => {\n updateState(hex, hue);\n each$1(updates, update => {\n update(anyInSystem, hex, hue);\n });\n };\n const onPaletteUpdate = () => {\n const updates = [updateFields];\n return (form, simulatedEvent) => {\n const value = simulatedEvent.event.value;\n const oldHue = state.paletteHue.get();\n const newHsv = hsvColour(oldHue, value.x, 100 - value.y);\n const newHex = hsvToHex(newHsv);\n runUpdates(form, newHex, oldHue, updates);\n };\n };\n const onSliderUpdate = () => {\n const updates = [\n updatePalette,\n updateFields\n ];\n return (form, simulatedEvent) => {\n const hue = hueSliderToDegrees(simulatedEvent.event.value);\n const oldRgb = state.paletteRgba.get();\n const oldHsv = fromRgb(oldRgb);\n const newHsv = hsvColour(hue, oldHsv.saturation, oldHsv.value);\n const newHex = hsvToHex(newHsv);\n runUpdates(form, newHex, hue, updates);\n };\n };\n const onFieldsUpdate = () => {\n const updates = [\n updatePalette,\n updateSlider,\n updatePaletteThumb\n ];\n return (form, simulatedEvent) => {\n const hex = simulatedEvent.event.hex;\n const hsv = hexToHsv(hex);\n runUpdates(form, hex, hsv.hue, updates);\n };\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components: [\n memPalette.asSpec(),\n memSlider.asSpec(),\n memRgb.asSpec()\n ],\n behaviours: derive$1([\n config('colour-picker-events', [\n run$1(fieldsUpdate, onFieldsUpdate()),\n run$1(paletteUpdate, onPaletteUpdate()),\n run$1(sliderUpdate, onSliderUpdate())\n ]),\n Composing.config({ find: comp => memRgb.getOpt(comp) }),\n Keying.config({ mode: 'acyclic' })\n ])\n };\n };\n const colourPickerSketcher = single({\n name: 'ColourPicker',\n configFields: [\n required$1('dom'),\n defaulted('onValidHex', noop),\n defaulted('onInvalidHex', noop)\n ],\n factory\n });\n return colourPickerSketcher;\n };\n\n const self = () => Composing.config({ find: Optional.some });\n const memento$1 = mem => Composing.config({ find: mem.getOpt });\n const childAt = index => Composing.config({ find: comp => child$2(comp.element, index).bind(element => comp.getSystem().getByDom(element).toOptional()) });\n const ComposingConfigs = {\n self,\n memento: memento$1,\n childAt\n };\n\n const processors = objOf([\n defaulted('preprocess', identity),\n defaulted('postprocess', identity)\n ]);\n const memento = (mem, rawProcessors) => {\n const ps = asRawOrDie$1('RepresentingConfigs.memento processors', processors, rawProcessors);\n return Representing.config({\n store: {\n mode: 'manual',\n getValue: comp => {\n const other = mem.get(comp);\n const rawValue = Representing.getValue(other);\n return ps.postprocess(rawValue);\n },\n setValue: (comp, rawValue) => {\n const newValue = ps.preprocess(rawValue);\n const other = mem.get(comp);\n Representing.setValue(other, newValue);\n }\n }\n });\n };\n const withComp = (optInitialValue, getter, setter) => Representing.config({\n store: {\n mode: 'manual',\n ...optInitialValue.map(initialValue => ({ initialValue })).getOr({}),\n getValue: getter,\n setValue: setter\n }\n });\n const withElement = (initialValue, getter, setter) => withComp(initialValue, c => getter(c.element), (c, v) => setter(c.element, v));\n const domValue = optInitialValue => withElement(optInitialValue, get$6, set$5);\n const domHtml = optInitialValue => withElement(optInitialValue, get$9, set$6);\n const memory = initialValue => Representing.config({\n store: {\n mode: 'memory',\n initialValue\n }\n });\n const RepresentingConfigs = {\n memento,\n withElement,\n withComp,\n domValue,\n domHtml,\n memory\n };\n\n const english = {\n 'colorcustom.rgb.red.label': 'R',\n 'colorcustom.rgb.red.description': 'Red component',\n 'colorcustom.rgb.green.label': 'G',\n 'colorcustom.rgb.green.description': 'Green component',\n 'colorcustom.rgb.blue.label': 'B',\n 'colorcustom.rgb.blue.description': 'Blue component',\n 'colorcustom.rgb.hex.label': '#',\n 'colorcustom.rgb.hex.description': 'Hex color code',\n 'colorcustom.rgb.range': 'Range 0 to 255',\n 'aria.color.picker': 'Color Picker',\n 'aria.input.invalid': 'Invalid input'\n };\n const translate$1 = providerBackstage => key => {\n return providerBackstage.translate(english[key]);\n };\n const renderColorPicker = (_spec, providerBackstage, initialData) => {\n const getClass = key => 'tox-' + key;\n const colourPickerFactory = makeFactory(translate$1(providerBackstage), getClass);\n const onValidHex = form => {\n emitWith(form, formActionEvent, {\n name: 'hex-valid',\n value: true\n });\n };\n const onInvalidHex = form => {\n emitWith(form, formActionEvent, {\n name: 'hex-valid',\n value: false\n });\n };\n const memPicker = record(colourPickerFactory.sketch({\n dom: {\n tag: 'div',\n classes: [getClass('color-picker-container')],\n attributes: { role: 'presentation' }\n },\n onValidHex,\n onInvalidHex\n }));\n return {\n dom: { tag: 'div' },\n components: [memPicker.asSpec()],\n behaviours: derive$1([\n RepresentingConfigs.withComp(initialData, comp => {\n const picker = memPicker.get(comp);\n const optRgbForm = Composing.getCurrent(picker);\n const optHex = optRgbForm.bind(rgbForm => {\n const formValues = Representing.getValue(rgbForm);\n return formValues.hex;\n });\n return optHex.map(hex => '#' + hex).getOr('');\n }, (comp, newValue) => {\n const pattern = /^#([a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?)/;\n const valOpt = Optional.from(pattern.exec(newValue)).bind(matches => get$h(matches, 1));\n const picker = memPicker.get(comp);\n const optRgbForm = Composing.getCurrent(picker);\n optRgbForm.fold(() => {\n console.log('Can not find form');\n }, rgbForm => {\n Representing.setValue(rgbForm, { hex: valOpt.getOr('') });\n Form.getField(rgbForm, 'hex').each(hexField => {\n emit(hexField, input());\n });\n });\n }),\n ComposingConfigs.self()\n ])\n };\n };\n\n var global$2 = tinymce.util.Tools.resolve('tinymce.Resource');\n\n const isOldCustomEditor = spec => has$2(spec, 'init');\n const renderCustomEditor = spec => {\n const editorApi = value$2();\n const memReplaced = record({ dom: { tag: spec.tag } });\n const initialValue = value$2();\n return {\n dom: {\n tag: 'div',\n classes: ['tox-custom-editor']\n },\n behaviours: derive$1([\n config('custom-editor-events', [runOnAttached(component => {\n memReplaced.getOpt(component).each(ta => {\n (isOldCustomEditor(spec) ? spec.init(ta.element.dom) : global$2.load(spec.scriptId, spec.scriptUrl).then(init => init(ta.element.dom, spec.settings))).then(ea => {\n initialValue.on(cvalue => {\n ea.setValue(cvalue);\n });\n initialValue.clear();\n editorApi.set(ea);\n });\n });\n })]),\n RepresentingConfigs.withComp(Optional.none(), () => editorApi.get().fold(() => initialValue.get().getOr(''), ed => ed.getValue()), (component, value) => {\n editorApi.get().fold(() => initialValue.set(value), ed => ed.setValue(value));\n }),\n ComposingConfigs.self()\n ]),\n components: [memReplaced.asSpec()]\n };\n };\n\n var global$1 = tinymce.util.Tools.resolve('tinymce.util.Tools');\n\n const filterByExtension = (files, providersBackstage) => {\n const allowedImageFileTypes = global$1.explode(providersBackstage.getOption('images_file_types'));\n const isFileInAllowedTypes = file => exists(allowedImageFileTypes, type => endsWith(file.name.toLowerCase(), `.${ type.toLowerCase() }`));\n return filter$2(from(files), isFileInAllowedTypes);\n };\n const renderDropZone = (spec, providersBackstage, initialData) => {\n const stopper = (_, se) => {\n se.stop();\n };\n const sequence = actions => (comp, se) => {\n each$1(actions, a => {\n a(comp, se);\n });\n };\n const onDrop = (comp, se) => {\n var _a;\n if (!Disabling.isDisabled(comp)) {\n const transferEvent = se.event.raw;\n handleFiles(comp, (_a = transferEvent.dataTransfer) === null || _a === void 0 ? void 0 : _a.files);\n }\n };\n const onSelect = (component, simulatedEvent) => {\n const input = simulatedEvent.event.raw.target;\n handleFiles(component, input.files);\n };\n const handleFiles = (component, files) => {\n if (files) {\n Representing.setValue(component, filterByExtension(files, providersBackstage));\n emitWith(component, formChangeEvent, { name: spec.name });\n }\n };\n const memInput = record({\n dom: {\n tag: 'input',\n attributes: {\n type: 'file',\n accept: 'image/*'\n },\n styles: { display: 'none' }\n },\n behaviours: derive$1([config('input-file-events', [\n cutter(click()),\n cutter(tap())\n ])])\n });\n const renderField = s => ({\n uid: s.uid,\n dom: {\n tag: 'div',\n classes: ['tox-dropzone-container']\n },\n behaviours: derive$1([\n RepresentingConfigs.memory(initialData.getOr([])),\n ComposingConfigs.self(),\n Disabling.config({}),\n Toggling.config({\n toggleClass: 'dragenter',\n toggleOnExecute: false\n }),\n config('dropzone-events', [\n run$1('dragenter', sequence([\n stopper,\n Toggling.toggle\n ])),\n run$1('dragleave', sequence([\n stopper,\n Toggling.toggle\n ])),\n run$1('dragover', stopper),\n run$1('drop', sequence([\n stopper,\n onDrop\n ])),\n run$1(change(), onSelect)\n ])\n ]),\n components: [{\n dom: {\n tag: 'div',\n classes: ['tox-dropzone'],\n styles: {}\n },\n components: [\n {\n dom: { tag: 'p' },\n components: [text$2(providersBackstage.translate('Drop an image here'))]\n },\n Button.sketch({\n dom: {\n tag: 'button',\n styles: { position: 'relative' },\n classes: [\n 'tox-button',\n 'tox-button--secondary'\n ]\n },\n components: [\n text$2(providersBackstage.translate('Browse for an image')),\n memInput.asSpec()\n ],\n action: comp => {\n const inputComp = memInput.get(comp);\n inputComp.element.dom.click();\n },\n buttonBehaviours: derive$1([\n Tabstopping.config({}),\n DisablingConfigs.button(providersBackstage.isDisabled),\n receivingConfig()\n ])\n })\n ]\n }]\n });\n const pLabel = spec.label.map(label => renderLabel$2(label, providersBackstage));\n const pField = FormField.parts.field({ factory: { sketch: renderField } });\n return renderFormFieldWith(pLabel, pField, ['tox-form__group--stretched'], []);\n };\n\n const renderGrid = (spec, backstage) => ({\n dom: {\n tag: 'div',\n classes: [\n 'tox-form__grid',\n `tox-form__grid--${ spec.columns }col`\n ]\n },\n components: map$2(spec.items, backstage.interpreter)\n });\n\n const beforeObject = generate$6('alloy-fake-before-tabstop');\n const afterObject = generate$6('alloy-fake-after-tabstop');\n const craftWithClasses = classes => {\n return {\n dom: {\n tag: 'div',\n styles: {\n width: '1px',\n height: '1px',\n outline: 'none'\n },\n attributes: { tabindex: '0' },\n classes\n },\n behaviours: derive$1([\n Focusing.config({ ignore: true }),\n Tabstopping.config({})\n ])\n };\n };\n const craft = spec => {\n return {\n dom: {\n tag: 'div',\n classes: ['tox-navobj']\n },\n components: [\n craftWithClasses([beforeObject]),\n spec,\n craftWithClasses([afterObject])\n ],\n behaviours: derive$1([ComposingConfigs.childAt(1)])\n };\n };\n const triggerTab = (placeholder, shiftKey) => {\n emitWith(placeholder, keydown(), {\n raw: {\n which: 9,\n shiftKey\n }\n });\n };\n const onFocus = (container, targetComp) => {\n const target = targetComp.element;\n if (has(target, beforeObject)) {\n triggerTab(container, true);\n } else if (has(target, afterObject)) {\n triggerTab(container, false);\n }\n };\n const isPseudoStop = element => {\n return closest(element, [\n '.' + beforeObject,\n '.' + afterObject\n ].join(','), never);\n };\n\n const getDynamicSource = initialData => {\n const cachedValue = Cell(initialData.getOr(''));\n return {\n getValue: _frameComponent => cachedValue.get(),\n setValue: (frameComponent, html) => {\n if (cachedValue.get() !== html) {\n set$9(frameComponent.element, 'srcdoc', html);\n }\n cachedValue.set(html);\n }\n };\n };\n const renderIFrame = (spec, providersBackstage, initialData) => {\n const isSandbox = spec.sandboxed;\n const isTransparent = spec.transparent;\n const baseClass = 'tox-dialog__iframe';\n const attributes = {\n ...spec.label.map(title => ({ title })).getOr({}),\n ...initialData.map(html => ({ srcdoc: html })).getOr({}),\n ...isSandbox ? { sandbox: 'allow-scripts allow-same-origin' } : {}\n };\n const sourcing = getDynamicSource(initialData);\n const pLabel = spec.label.map(label => renderLabel$2(label, providersBackstage));\n const factory = newSpec => craft({\n uid: newSpec.uid,\n dom: {\n tag: 'iframe',\n attributes,\n classes: isTransparent ? [baseClass] : [\n baseClass,\n `${ baseClass }--opaque`\n ]\n },\n behaviours: derive$1([\n Tabstopping.config({}),\n Focusing.config({}),\n RepresentingConfigs.withComp(initialData, sourcing.getValue, sourcing.setValue)\n ])\n });\n const pField = FormField.parts.field({ factory: { sketch: factory } });\n return renderFormFieldWith(pLabel, pField, ['tox-form__group--stretched'], []);\n };\n\n const image = image => new Promise((resolve, reject) => {\n const loaded = () => {\n destroy();\n resolve(image);\n };\n const listeners = [\n bind(image, 'load', loaded),\n bind(image, 'error', () => {\n destroy();\n reject('Unable to load data from image: ' + image.dom.src);\n })\n ];\n const destroy = () => each$1(listeners, l => l.unbind());\n if (image.dom.complete) {\n loaded();\n }\n });\n\n const calculateImagePosition = (panelWidth, panelHeight, imageWidth, imageHeight, zoom) => {\n const width = imageWidth * zoom;\n const height = imageHeight * zoom;\n const left = Math.max(0, panelWidth / 2 - width / 2);\n const top = Math.max(0, panelHeight / 2 - height / 2);\n return {\n left: left.toString() + 'px',\n top: top.toString() + 'px',\n width: width.toString() + 'px',\n height: height.toString() + 'px'\n };\n };\n const zoomToFit = (panel, width, height) => {\n const panelW = get$c(panel);\n const panelH = get$d(panel);\n return Math.min(panelW / width, panelH / height, 1);\n };\n const renderImagePreview = (spec, initialData) => {\n const cachedData = Cell(initialData.getOr({ url: '' }));\n const memImage = record({\n dom: {\n tag: 'img',\n classes: ['tox-imagepreview__image'],\n attributes: initialData.map(data => ({ src: data.url })).getOr({})\n }\n });\n const memContainer = record({\n dom: {\n tag: 'div',\n classes: ['tox-imagepreview__container'],\n attributes: { role: 'presentation' }\n },\n components: [memImage.asSpec()]\n });\n const setValue = (frameComponent, data) => {\n const translatedData = { url: data.url };\n data.zoom.each(z => translatedData.zoom = z);\n data.cachedWidth.each(z => translatedData.cachedWidth = z);\n data.cachedHeight.each(z => translatedData.cachedHeight = z);\n cachedData.set(translatedData);\n const applyFramePositioning = () => {\n const {cachedWidth, cachedHeight, zoom} = translatedData;\n if (!isUndefined(cachedWidth) && !isUndefined(cachedHeight)) {\n if (isUndefined(zoom)) {\n const z = zoomToFit(frameComponent.element, cachedWidth, cachedHeight);\n translatedData.zoom = z;\n }\n const position = calculateImagePosition(get$c(frameComponent.element), get$d(frameComponent.element), cachedWidth, cachedHeight, translatedData.zoom);\n memContainer.getOpt(frameComponent).each(container => {\n setAll(container.element, position);\n });\n }\n };\n memImage.getOpt(frameComponent).each(imageComponent => {\n const img = imageComponent.element;\n if (data.url !== get$f(img, 'src')) {\n set$9(img, 'src', data.url);\n remove$2(frameComponent.element, 'tox-imagepreview__loaded');\n }\n applyFramePositioning();\n image(img).then(img => {\n if (frameComponent.getSystem().isConnected()) {\n add$2(frameComponent.element, 'tox-imagepreview__loaded');\n translatedData.cachedWidth = img.dom.naturalWidth;\n translatedData.cachedHeight = img.dom.naturalHeight;\n applyFramePositioning();\n }\n });\n });\n };\n const styles = {};\n spec.height.each(h => styles.height = h);\n const fakeValidatedData = initialData.map(d => ({\n url: d.url,\n zoom: Optional.from(d.zoom),\n cachedWidth: Optional.from(d.cachedWidth),\n cachedHeight: Optional.from(d.cachedHeight)\n }));\n return {\n dom: {\n tag: 'div',\n classes: ['tox-imagepreview'],\n styles,\n attributes: { role: 'presentation' }\n },\n components: [memContainer.asSpec()],\n behaviours: derive$1([\n ComposingConfigs.self(),\n RepresentingConfigs.withComp(fakeValidatedData, () => cachedData.get(), setValue)\n ])\n };\n };\n\n const renderLabel$1 = (spec, backstageShared) => {\n const label = {\n dom: {\n tag: 'label',\n classes: ['tox-label']\n },\n components: [text$2(backstageShared.providers.translate(spec.label))]\n };\n const comps = map$2(spec.items, backstageShared.interpreter);\n return {\n dom: {\n tag: 'div',\n classes: ['tox-form__group']\n },\n components: [\n label,\n ...comps\n ],\n behaviours: derive$1([\n ComposingConfigs.self(),\n Replacing.config({}),\n RepresentingConfigs.domHtml(Optional.none()),\n Keying.config({ mode: 'acyclic' })\n ])\n };\n };\n\n const internalToolbarButtonExecute = generate$6('toolbar.button.execute');\n const onToolbarButtonExecute = info => runOnExecute$1((comp, _simulatedEvent) => {\n runWithApi(info, comp)(itemApi => {\n emitWith(comp, internalToolbarButtonExecute, { buttonApi: itemApi });\n info.onAction(itemApi);\n });\n });\n const toolbarButtonEventOrder = {\n [execute$5()]: [\n 'disabling',\n 'alloy.base.behaviour',\n 'toggling',\n 'toolbar-button-events'\n ]\n };\n\n const renderIcon = (iconName, iconsProvider, behaviours) => render$3(iconName, {\n tag: 'span',\n classes: [\n 'tox-icon',\n 'tox-tbtn__icon-wrap'\n ],\n behaviours\n }, iconsProvider);\n const renderIconFromPack = (iconName, iconsProvider) => renderIcon(iconName, iconsProvider, []);\n const renderReplaceableIconFromPack = (iconName, iconsProvider) => renderIcon(iconName, iconsProvider, [Replacing.config({})]);\n const renderLabel = (text, prefix, providersBackstage) => ({\n dom: {\n tag: 'span',\n classes: [`${ prefix }__select-label`]\n },\n components: [text$2(providersBackstage.translate(text))],\n behaviours: derive$1([Replacing.config({})])\n });\n\n const updateMenuText = generate$6('update-menu-text');\n const updateMenuIcon = generate$6('update-menu-icon');\n const renderCommonDropdown = (spec, prefix, sharedBackstage) => {\n const editorOffCell = Cell(noop);\n const optMemDisplayText = spec.text.map(text => record(renderLabel(text, prefix, sharedBackstage.providers)));\n const optMemDisplayIcon = spec.icon.map(iconName => record(renderReplaceableIconFromPack(iconName, sharedBackstage.providers.icons)));\n const onLeftOrRightInMenu = (comp, se) => {\n const dropdown = Representing.getValue(comp);\n Focusing.focus(dropdown);\n emitWith(dropdown, 'keydown', { raw: se.event.raw });\n Dropdown.close(dropdown);\n return Optional.some(true);\n };\n const role = spec.role.fold(() => ({}), role => ({ role }));\n const tooltipAttributes = spec.tooltip.fold(() => ({}), tooltip => {\n const translatedTooltip = sharedBackstage.providers.translate(tooltip);\n return {\n 'title': translatedTooltip,\n 'aria-label': translatedTooltip\n };\n });\n const iconSpec = render$3('chevron-down', {\n tag: 'div',\n classes: [`${ prefix }__select-chevron`]\n }, sharedBackstage.providers.icons);\n const memDropdown = record(Dropdown.sketch({\n ...spec.uid ? { uid: spec.uid } : {},\n ...role,\n dom: {\n tag: 'button',\n classes: [\n prefix,\n `${ prefix }--select`\n ].concat(map$2(spec.classes, c => `${ prefix }--${ c }`)),\n attributes: { ...tooltipAttributes }\n },\n components: componentRenderPipeline([\n optMemDisplayIcon.map(mem => mem.asSpec()),\n optMemDisplayText.map(mem => mem.asSpec()),\n Optional.some(iconSpec)\n ]),\n matchWidth: true,\n useMinWidth: true,\n onOpen: (anchor, dropdownComp, tmenuComp) => {\n if (spec.searchable) {\n focusSearchField(tmenuComp);\n }\n },\n dropdownBehaviours: derive$1([\n ...spec.dropdownBehaviours,\n DisablingConfigs.button(() => spec.disabled || sharedBackstage.providers.isDisabled()),\n receivingConfig(),\n Unselecting.config({}),\n Replacing.config({}),\n config('dropdown-events', [\n onControlAttached(spec, editorOffCell),\n onControlDetached(spec, editorOffCell)\n ]),\n config('menubutton-update-display-text', [\n run$1(updateMenuText, (comp, se) => {\n optMemDisplayText.bind(mem => mem.getOpt(comp)).each(displayText => {\n Replacing.set(displayText, [text$2(sharedBackstage.providers.translate(se.event.text))]);\n });\n }),\n run$1(updateMenuIcon, (comp, se) => {\n optMemDisplayIcon.bind(mem => mem.getOpt(comp)).each(displayIcon => {\n Replacing.set(displayIcon, [renderReplaceableIconFromPack(se.event.icon, sharedBackstage.providers.icons)]);\n });\n })\n ])\n ]),\n eventOrder: deepMerge(toolbarButtonEventOrder, {\n mousedown: [\n 'focusing',\n 'alloy.base.behaviour',\n 'item-type-events',\n 'normal-dropdown-events'\n ]\n }),\n sandboxBehaviours: derive$1([\n Keying.config({\n mode: 'special',\n onLeft: onLeftOrRightInMenu,\n onRight: onLeftOrRightInMenu\n }),\n config('dropdown-sandbox-events', [\n run$1(refetchTriggerEvent, (originalSandboxComp, se) => {\n handleRefetchTrigger(originalSandboxComp);\n se.stop();\n }),\n run$1(redirectMenuItemInteractionEvent, (sandboxComp, se) => {\n handleRedirectToMenuItem(sandboxComp, se);\n se.stop();\n })\n ])\n ]),\n lazySink: sharedBackstage.getSink,\n toggleClass: `${ prefix }--active`,\n parts: {\n menu: {\n ...part(false, spec.columns, spec.presets),\n fakeFocus: spec.searchable,\n onHighlightItem: updateAriaOnHighlight,\n onCollapseMenu: (tmenuComp, itemCompCausingCollapse, nowActiveMenuComp) => {\n Highlighting.getHighlighted(nowActiveMenuComp).each(itemComp => {\n updateAriaOnHighlight(tmenuComp, nowActiveMenuComp, itemComp);\n });\n },\n onDehighlightItem: updateAriaOnDehighlight\n }\n },\n fetch: comp => Future.nu(curry(spec.fetch, comp))\n }));\n return memDropdown.asSpec();\n };\n\n const isMenuItemReference = item => isString(item);\n const isSeparator$2 = item => item.type === 'separator';\n const isExpandingMenuItem = item => has$2(item, 'getSubmenuItems');\n const separator$2 = { type: 'separator' };\n const unwrapReferences = (items, menuItems) => {\n const realItems = foldl(items, (acc, item) => {\n if (isMenuItemReference(item)) {\n if (item === '') {\n return acc;\n } else if (item === '|') {\n return acc.length > 0 && !isSeparator$2(acc[acc.length - 1]) ? acc.concat([separator$2]) : acc;\n } else if (has$2(menuItems, item.toLowerCase())) {\n return acc.concat([menuItems[item.toLowerCase()]]);\n } else {\n return acc;\n }\n } else {\n return acc.concat([item]);\n }\n }, []);\n if (realItems.length > 0 && isSeparator$2(realItems[realItems.length - 1])) {\n realItems.pop();\n }\n return realItems;\n };\n const getFromExpandingItem = (item, menuItems) => {\n const submenuItems = item.getSubmenuItems();\n const rest = expand(submenuItems, menuItems);\n const newMenus = deepMerge(rest.menus, { [item.value]: rest.items });\n const newExpansions = deepMerge(rest.expansions, { [item.value]: item.value });\n return {\n item,\n menus: newMenus,\n expansions: newExpansions\n };\n };\n const generateValueIfRequired = item => {\n const itemValue = get$g(item, 'value').getOrThunk(() => generate$6('generated-menu-item'));\n return deepMerge({ value: itemValue }, item);\n };\n const expand = (items, menuItems) => {\n const realItems = unwrapReferences(isString(items) ? items.split(' ') : items, menuItems);\n return foldr(realItems, (acc, item) => {\n if (isExpandingMenuItem(item)) {\n const itemWithValue = generateValueIfRequired(item);\n const newData = getFromExpandingItem(itemWithValue, menuItems);\n return {\n menus: deepMerge(acc.menus, newData.menus),\n items: [\n newData.item,\n ...acc.items\n ],\n expansions: deepMerge(acc.expansions, newData.expansions)\n };\n } else {\n return {\n ...acc,\n items: [\n item,\n ...acc.items\n ]\n };\n }\n }, {\n menus: {},\n expansions: {},\n items: []\n });\n };\n\n const getSearchModeForField = settings => {\n return settings.search.fold(() => ({ searchMode: 'no-search' }), searchSettings => ({\n searchMode: 'search-with-field',\n placeholder: searchSettings.placeholder\n }));\n };\n const getSearchModeForResults = settings => {\n return settings.search.fold(() => ({ searchMode: 'no-search' }), _ => ({ searchMode: 'search-with-results' }));\n };\n const build = (items, itemResponse, backstage, settings) => {\n const primary = generate$6('primary-menu');\n const data = expand(items, backstage.shared.providers.menuItems());\n if (data.items.length === 0) {\n return Optional.none();\n }\n const mainMenuSearchMode = getSearchModeForField(settings);\n const mainMenu = createPartialMenu(primary, data.items, itemResponse, backstage, settings.isHorizontalMenu, mainMenuSearchMode);\n const submenuSearchMode = getSearchModeForResults(settings);\n const submenus = map$1(data.menus, (menuItems, menuName) => createPartialMenu(menuName, menuItems, itemResponse, backstage, false, submenuSearchMode));\n const menus = deepMerge(submenus, wrap$1(primary, mainMenu));\n return Optional.from(tieredMenu.tieredData(primary, menus, data.expansions));\n };\n\n const isSingleListItem = item => !has$2(item, 'items');\n const dataAttribute = 'data-value';\n const fetchItems = (dropdownComp, name, items, selectedValue) => map$2(items, item => {\n if (!isSingleListItem(item)) {\n return {\n type: 'nestedmenuitem',\n text: item.text,\n getSubmenuItems: () => fetchItems(dropdownComp, name, item.items, selectedValue)\n };\n } else {\n return {\n type: 'togglemenuitem',\n text: item.text,\n value: item.value,\n active: item.value === selectedValue,\n onAction: () => {\n Representing.setValue(dropdownComp, item.value);\n emitWith(dropdownComp, formChangeEvent, { name });\n Focusing.focus(dropdownComp);\n }\n };\n }\n });\n const findItemByValue = (items, value) => findMap(items, item => {\n if (!isSingleListItem(item)) {\n return findItemByValue(item.items, value);\n } else {\n return someIf(item.value === value, item);\n }\n });\n const renderListBox = (spec, backstage, initialData) => {\n const providersBackstage = backstage.shared.providers;\n const initialItem = initialData.bind(value => findItemByValue(spec.items, value)).orThunk(() => head(spec.items).filter(isSingleListItem));\n const pLabel = spec.label.map(label => renderLabel$2(label, providersBackstage));\n const pField = FormField.parts.field({\n dom: {},\n factory: {\n sketch: sketchSpec => renderCommonDropdown({\n uid: sketchSpec.uid,\n text: initialItem.map(item => item.text),\n icon: Optional.none(),\n tooltip: spec.label,\n role: Optional.none(),\n fetch: (comp, callback) => {\n const items = fetchItems(comp, spec.name, spec.items, Representing.getValue(comp));\n callback(build(items, ItemResponse$1.CLOSE_ON_EXECUTE, backstage, {\n isHorizontalMenu: false,\n search: Optional.none()\n }));\n },\n onSetup: constant$1(noop),\n getApi: constant$1({}),\n columns: 1,\n presets: 'normal',\n classes: [],\n dropdownBehaviours: [\n Tabstopping.config({}),\n RepresentingConfigs.withComp(initialItem.map(item => item.value), comp => get$f(comp.element, dataAttribute), (comp, data) => {\n findItemByValue(spec.items, data).each(item => {\n set$9(comp.element, dataAttribute, item.value);\n emitWith(comp, updateMenuText, { text: item.text });\n });\n })\n ]\n }, 'tox-listbox', backstage.shared)\n }\n });\n const listBoxWrap = {\n dom: {\n tag: 'div',\n classes: ['tox-listboxfield']\n },\n components: [pField]\n };\n return FormField.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-form__group']\n },\n components: flatten([\n pLabel.toArray(),\n [listBoxWrap]\n ]),\n fieldBehaviours: derive$1([Disabling.config({\n disabled: constant$1(!spec.enabled),\n onDisabled: comp => {\n FormField.getField(comp).each(Disabling.disable);\n },\n onEnabled: comp => {\n FormField.getField(comp).each(Disabling.enable);\n }\n })])\n });\n };\n\n const renderPanel = (spec, backstage) => ({\n dom: {\n tag: 'div',\n classes: spec.classes\n },\n components: map$2(spec.items, backstage.shared.interpreter)\n });\n\n const factory$h = (detail, _spec) => {\n const options = map$2(detail.options, option => ({\n dom: {\n tag: 'option',\n value: option.value,\n innerHtml: option.text\n }\n }));\n const initialValues = detail.data.map(v => wrap$1('initialValue', v)).getOr({});\n return {\n uid: detail.uid,\n dom: {\n tag: 'select',\n classes: detail.selectClasses,\n attributes: detail.selectAttributes\n },\n components: options,\n behaviours: augment(detail.selectBehaviours, [\n Focusing.config({}),\n Representing.config({\n store: {\n mode: 'manual',\n getValue: select => {\n return get$6(select.element);\n },\n setValue: (select, newValue) => {\n const found = find$5(detail.options, opt => opt.value === newValue);\n if (found.isSome()) {\n set$5(select.element, newValue);\n }\n },\n ...initialValues\n }\n })\n ])\n };\n };\n const HtmlSelect = single({\n name: 'HtmlSelect',\n configFields: [\n required$1('options'),\n field('selectBehaviours', [\n Focusing,\n Representing\n ]),\n defaulted('selectClasses', []),\n defaulted('selectAttributes', {}),\n option$3('data')\n ],\n factory: factory$h\n });\n\n const renderSelectBox = (spec, providersBackstage, initialData) => {\n const translatedOptions = map$2(spec.items, item => ({\n text: providersBackstage.translate(item.text),\n value: item.value\n }));\n const pLabel = spec.label.map(label => renderLabel$2(label, providersBackstage));\n const pField = FormField.parts.field({\n dom: {},\n ...initialData.map(data => ({ data })).getOr({}),\n selectAttributes: { size: spec.size },\n options: translatedOptions,\n factory: HtmlSelect,\n selectBehaviours: derive$1([\n Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() }),\n Tabstopping.config({}),\n config('selectbox-change', [run$1(change(), (component, _) => {\n emitWith(component, formChangeEvent, { name: spec.name });\n })])\n ])\n });\n const chevron = spec.size > 1 ? Optional.none() : Optional.some(render$3('chevron-down', {\n tag: 'div',\n classes: ['tox-selectfield__icon-js']\n }, providersBackstage.icons));\n const selectWrap = {\n dom: {\n tag: 'div',\n classes: ['tox-selectfield']\n },\n components: flatten([\n [pField],\n chevron.toArray()\n ])\n };\n return FormField.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-form__group']\n },\n components: flatten([\n pLabel.toArray(),\n [selectWrap]\n ]),\n fieldBehaviours: derive$1([\n Disabling.config({\n disabled: () => !spec.enabled || providersBackstage.isDisabled(),\n onDisabled: comp => {\n FormField.getField(comp).each(Disabling.disable);\n },\n onEnabled: comp => {\n FormField.getField(comp).each(Disabling.enable);\n }\n }),\n receivingConfig()\n ])\n });\n };\n\n const schema$h = constant$1([\n defaulted('field1Name', 'field1'),\n defaulted('field2Name', 'field2'),\n onStrictHandler('onLockedChange'),\n markers$1(['lockClass']),\n defaulted('locked', false),\n SketchBehaviours.field('coupledFieldBehaviours', [\n Composing,\n Representing\n ])\n ]);\n const getField = (comp, detail, partName) => getPart(comp, detail, partName).bind(Composing.getCurrent);\n const coupledPart = (selfName, otherName) => required({\n factory: FormField,\n name: selfName,\n overrides: detail => {\n return {\n fieldBehaviours: derive$1([config('coupled-input-behaviour', [run$1(input(), me => {\n getField(me, detail, otherName).each(other => {\n getPart(me, detail, 'lock').each(lock => {\n if (Toggling.isOn(lock)) {\n detail.onLockedChange(me, other, lock);\n }\n });\n });\n })])])\n };\n }\n });\n const parts$c = constant$1([\n coupledPart('field1', 'field2'),\n coupledPart('field2', 'field1'),\n required({\n factory: Button,\n schema: [required$1('dom')],\n name: 'lock',\n overrides: detail => {\n return {\n buttonBehaviours: derive$1([Toggling.config({\n selected: detail.locked,\n toggleClass: detail.markers.lockClass,\n aria: { mode: 'pressed' }\n })])\n };\n }\n })\n ]);\n\n const factory$g = (detail, components, _spec, _externals) => ({\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: SketchBehaviours.augment(detail.coupledFieldBehaviours, [\n Composing.config({ find: Optional.some }),\n Representing.config({\n store: {\n mode: 'manual',\n getValue: comp => {\n const parts = getPartsOrDie(comp, detail, [\n 'field1',\n 'field2'\n ]);\n return {\n [detail.field1Name]: Representing.getValue(parts.field1()),\n [detail.field2Name]: Representing.getValue(parts.field2())\n };\n },\n setValue: (comp, value) => {\n const parts = getPartsOrDie(comp, detail, [\n 'field1',\n 'field2'\n ]);\n if (hasNonNullableKey(value, detail.field1Name)) {\n Representing.setValue(parts.field1(), value[detail.field1Name]);\n }\n if (hasNonNullableKey(value, detail.field2Name)) {\n Representing.setValue(parts.field2(), value[detail.field2Name]);\n }\n }\n }\n })\n ]),\n apis: {\n getField1: component => getPart(component, detail, 'field1'),\n getField2: component => getPart(component, detail, 'field2'),\n getLock: component => getPart(component, detail, 'lock')\n }\n });\n const FormCoupledInputs = composite({\n name: 'FormCoupledInputs',\n configFields: schema$h(),\n partFields: parts$c(),\n factory: factory$g,\n apis: {\n getField1: (apis, component) => apis.getField1(component),\n getField2: (apis, component) => apis.getField2(component),\n getLock: (apis, component) => apis.getLock(component)\n }\n });\n\n const formatSize = size => {\n const unitDec = {\n '': 0,\n 'px': 0,\n 'pt': 1,\n 'mm': 1,\n 'pc': 2,\n 'ex': 2,\n 'em': 2,\n 'ch': 2,\n 'rem': 2,\n 'cm': 3,\n 'in': 4,\n '%': 4\n };\n const maxDecimal = unit => unit in unitDec ? unitDec[unit] : 1;\n let numText = size.value.toFixed(maxDecimal(size.unit));\n if (numText.indexOf('.') !== -1) {\n numText = numText.replace(/\\.?0*$/, '');\n }\n return numText + size.unit;\n };\n const parseSize = sizeText => {\n const numPattern = /^\\s*(\\d+(?:\\.\\d+)?)\\s*(|cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%)\\s*$/;\n const match = numPattern.exec(sizeText);\n if (match !== null) {\n const value = parseFloat(match[1]);\n const unit = match[2];\n return Result.value({\n value,\n unit\n });\n } else {\n return Result.error(sizeText);\n }\n };\n const convertUnit = (size, unit) => {\n const inInch = {\n '': 96,\n 'px': 96,\n 'pt': 72,\n 'cm': 2.54,\n 'pc': 12,\n 'mm': 25.4,\n 'in': 1\n };\n const supported = u => has$2(inInch, u);\n if (size.unit === unit) {\n return Optional.some(size.value);\n } else if (supported(size.unit) && supported(unit)) {\n if (inInch[size.unit] === inInch[unit]) {\n return Optional.some(size.value);\n } else {\n return Optional.some(size.value / inInch[size.unit] * inInch[unit]);\n }\n } else {\n return Optional.none();\n }\n };\n const noSizeConversion = _input => Optional.none();\n const ratioSizeConversion = (scale, unit) => size => convertUnit(size, unit).map(value => ({\n value: value * scale,\n unit\n }));\n const makeRatioConverter = (currentFieldText, otherFieldText) => {\n const cValue = parseSize(currentFieldText).toOptional();\n const oValue = parseSize(otherFieldText).toOptional();\n return lift2(cValue, oValue, (cSize, oSize) => convertUnit(cSize, oSize.unit).map(val => oSize.value / val).map(r => ratioSizeConversion(r, oSize.unit)).getOr(noSizeConversion)).getOr(noSizeConversion);\n };\n\n const renderSizeInput = (spec, providersBackstage) => {\n let converter = noSizeConversion;\n const ratioEvent = generate$6('ratio-event');\n const makeIcon = iconName => render$3(iconName, {\n tag: 'span',\n classes: [\n 'tox-icon',\n 'tox-lock-icon__' + iconName\n ]\n }, providersBackstage.icons);\n const pLock = FormCoupledInputs.parts.lock({\n dom: {\n tag: 'button',\n classes: [\n 'tox-lock',\n 'tox-button',\n 'tox-button--naked',\n 'tox-button--icon'\n ],\n attributes: { title: providersBackstage.translate(spec.label.getOr('Constrain proportions')) }\n },\n components: [\n makeIcon('lock'),\n makeIcon('unlock')\n ],\n buttonBehaviours: derive$1([\n Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() }),\n receivingConfig(),\n Tabstopping.config({})\n ])\n });\n const formGroup = components => ({\n dom: {\n tag: 'div',\n classes: ['tox-form__group']\n },\n components\n });\n const getFieldPart = isField1 => FormField.parts.field({\n factory: Input,\n inputClasses: ['tox-textfield'],\n inputBehaviours: derive$1([\n Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() }),\n receivingConfig(),\n Tabstopping.config({}),\n config('size-input-events', [\n run$1(focusin(), (component, _simulatedEvent) => {\n emitWith(component, ratioEvent, { isField1 });\n }),\n run$1(change(), (component, _simulatedEvent) => {\n emitWith(component, formChangeEvent, { name: spec.name });\n })\n ])\n ]),\n selectOnFocus: false\n });\n const getLabel = label => ({\n dom: {\n tag: 'label',\n classes: ['tox-label']\n },\n components: [text$2(providersBackstage.translate(label))]\n });\n const widthField = FormCoupledInputs.parts.field1(formGroup([\n FormField.parts.label(getLabel('Width')),\n getFieldPart(true)\n ]));\n const heightField = FormCoupledInputs.parts.field2(formGroup([\n FormField.parts.label(getLabel('Height')),\n getFieldPart(false)\n ]));\n return FormCoupledInputs.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-form__group']\n },\n components: [{\n dom: {\n tag: 'div',\n classes: ['tox-form__controls-h-stack']\n },\n components: [\n widthField,\n heightField,\n formGroup([\n getLabel(nbsp),\n pLock\n ])\n ]\n }],\n field1Name: 'width',\n field2Name: 'height',\n locked: true,\n markers: { lockClass: 'tox-locked' },\n onLockedChange: (current, other, _lock) => {\n parseSize(Representing.getValue(current)).each(size => {\n converter(size).each(newSize => {\n Representing.setValue(other, formatSize(newSize));\n });\n });\n },\n coupledFieldBehaviours: derive$1([\n Disabling.config({\n disabled: () => !spec.enabled || providersBackstage.isDisabled(),\n onDisabled: comp => {\n FormCoupledInputs.getField1(comp).bind(FormField.getField).each(Disabling.disable);\n FormCoupledInputs.getField2(comp).bind(FormField.getField).each(Disabling.disable);\n FormCoupledInputs.getLock(comp).each(Disabling.disable);\n },\n onEnabled: comp => {\n FormCoupledInputs.getField1(comp).bind(FormField.getField).each(Disabling.enable);\n FormCoupledInputs.getField2(comp).bind(FormField.getField).each(Disabling.enable);\n FormCoupledInputs.getLock(comp).each(Disabling.enable);\n }\n }),\n receivingConfig(),\n config('size-input-events2', [run$1(ratioEvent, (component, simulatedEvent) => {\n const isField1 = simulatedEvent.event.isField1;\n const optCurrent = isField1 ? FormCoupledInputs.getField1(component) : FormCoupledInputs.getField2(component);\n const optOther = isField1 ? FormCoupledInputs.getField2(component) : FormCoupledInputs.getField1(component);\n const value1 = optCurrent.map(Representing.getValue).getOr('');\n const value2 = optOther.map(Representing.getValue).getOr('');\n converter = makeRatioConverter(value1, value2);\n })])\n ])\n });\n };\n\n const renderSlider = (spec, providerBackstage, initialData) => {\n const labelPart = Slider.parts.label({\n dom: {\n tag: 'label',\n classes: ['tox-label']\n },\n components: [text$2(providerBackstage.translate(spec.label))]\n });\n const spectrum = Slider.parts.spectrum({\n dom: {\n tag: 'div',\n classes: ['tox-slider__rail'],\n attributes: { role: 'presentation' }\n }\n });\n const thumb = Slider.parts.thumb({\n dom: {\n tag: 'div',\n classes: ['tox-slider__handle'],\n attributes: { role: 'presentation' }\n }\n });\n return Slider.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-slider'],\n attributes: { role: 'presentation' }\n },\n model: {\n mode: 'x',\n minX: spec.min,\n maxX: spec.max,\n getInitialValue: constant$1(initialData.getOrThunk(() => (Math.abs(spec.max) - Math.abs(spec.min)) / 2))\n },\n components: [\n labelPart,\n spectrum,\n thumb\n ],\n sliderBehaviours: derive$1([\n ComposingConfigs.self(),\n Focusing.config({})\n ]),\n onChoose: (component, thumb, value) => {\n emitWith(component, formChangeEvent, {\n name: spec.name,\n value\n });\n }\n });\n };\n\n const renderTable = (spec, providersBackstage) => {\n const renderTh = text => ({\n dom: {\n tag: 'th',\n innerHtml: providersBackstage.translate(text)\n }\n });\n const renderHeader = header => ({\n dom: { tag: 'thead' },\n components: [{\n dom: { tag: 'tr' },\n components: map$2(header, renderTh)\n }]\n });\n const renderTd = text => ({\n dom: {\n tag: 'td',\n innerHtml: providersBackstage.translate(text)\n }\n });\n const renderTr = row => ({\n dom: { tag: 'tr' },\n components: map$2(row, renderTd)\n });\n const renderRows = rows => ({\n dom: { tag: 'tbody' },\n components: map$2(rows, renderTr)\n });\n return {\n dom: {\n tag: 'table',\n classes: ['tox-dialog__table']\n },\n components: [\n renderHeader(spec.header),\n renderRows(spec.cells)\n ],\n behaviours: derive$1([\n Tabstopping.config({}),\n Focusing.config({})\n ])\n };\n };\n\n const renderTextField = (spec, providersBackstage) => {\n const pLabel = spec.label.map(label => renderLabel$2(label, providersBackstage));\n const baseInputBehaviours = [\n Disabling.config({ disabled: () => spec.disabled || providersBackstage.isDisabled() }),\n receivingConfig(),\n Keying.config({\n mode: 'execution',\n useEnter: spec.multiline !== true,\n useControlEnter: spec.multiline === true,\n execute: comp => {\n emit(comp, formSubmitEvent);\n return Optional.some(true);\n }\n }),\n config('textfield-change', [\n run$1(input(), (component, _) => {\n emitWith(component, formChangeEvent, { name: spec.name });\n }),\n run$1(postPaste(), (component, _) => {\n emitWith(component, formChangeEvent, { name: spec.name });\n })\n ]),\n Tabstopping.config({})\n ];\n const validatingBehaviours = spec.validation.map(vl => Invalidating.config({\n getRoot: input => {\n return parentElement(input.element);\n },\n invalidClass: 'tox-invalid',\n validator: {\n validate: input => {\n const v = Representing.getValue(input);\n const result = vl.validator(v);\n return Future.pure(result === true ? Result.value(v) : Result.error(result));\n },\n validateOnLoad: vl.validateOnLoad\n }\n })).toArray();\n const placeholder = spec.placeholder.fold(constant$1({}), p => ({ placeholder: providersBackstage.translate(p) }));\n const inputMode = spec.inputMode.fold(constant$1({}), mode => ({ inputmode: mode }));\n const inputAttributes = {\n ...placeholder,\n ...inputMode\n };\n const pField = FormField.parts.field({\n tag: spec.multiline === true ? 'textarea' : 'input',\n ...spec.data.map(data => ({ data })).getOr({}),\n inputAttributes,\n inputClasses: [spec.classname],\n inputBehaviours: derive$1(flatten([\n baseInputBehaviours,\n validatingBehaviours\n ])),\n selectOnFocus: false,\n factory: Input\n });\n const extraClasses = spec.flex ? ['tox-form__group--stretched'] : [];\n const extraClasses2 = extraClasses.concat(spec.maximized ? ['tox-form-group--maximize'] : []);\n const extraBehaviours = [\n Disabling.config({\n disabled: () => spec.disabled || providersBackstage.isDisabled(),\n onDisabled: comp => {\n FormField.getField(comp).each(Disabling.disable);\n },\n onEnabled: comp => {\n FormField.getField(comp).each(Disabling.enable);\n }\n }),\n receivingConfig()\n ];\n return renderFormFieldWith(pLabel, pField, extraClasses2, extraBehaviours);\n };\n const renderInput = (spec, providersBackstage, initialData) => renderTextField({\n name: spec.name,\n multiline: false,\n label: spec.label,\n inputMode: spec.inputMode,\n placeholder: spec.placeholder,\n flex: false,\n disabled: !spec.enabled,\n classname: 'tox-textfield',\n validation: Optional.none(),\n maximized: spec.maximized,\n data: initialData\n }, providersBackstage);\n const renderTextarea = (spec, providersBackstage, initialData) => renderTextField({\n name: spec.name,\n multiline: true,\n label: spec.label,\n inputMode: Optional.none(),\n placeholder: spec.placeholder,\n flex: true,\n disabled: !spec.enabled,\n classname: 'tox-textarea',\n validation: Optional.none(),\n maximized: spec.maximized,\n data: initialData\n }, providersBackstage);\n\n const events$6 = (streamConfig, streamState) => {\n const streams = streamConfig.stream.streams;\n const processor = streams.setup(streamConfig, streamState);\n return derive$2([\n run$1(streamConfig.event, processor),\n runOnDetached(() => streamState.cancel())\n ].concat(streamConfig.cancelEvent.map(e => [run$1(e, () => streamState.cancel())]).getOr([])));\n };\n\n var ActiveStreaming = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$6\n });\n\n const first = (fn, rate) => {\n let timer = null;\n const cancel = () => {\n if (!isNull(timer)) {\n clearTimeout(timer);\n timer = null;\n }\n };\n const throttle = (...args) => {\n if (isNull(timer)) {\n timer = setTimeout(() => {\n timer = null;\n fn.apply(null, args);\n }, rate);\n }\n };\n return {\n cancel,\n throttle\n };\n };\n const last = (fn, rate) => {\n let timer = null;\n const cancel = () => {\n if (!isNull(timer)) {\n clearTimeout(timer);\n timer = null;\n }\n };\n const throttle = (...args) => {\n cancel();\n timer = setTimeout(() => {\n timer = null;\n fn.apply(null, args);\n }, rate);\n };\n return {\n cancel,\n throttle\n };\n };\n\n const throttle = _config => {\n const state = Cell(null);\n const readState = () => ({ timer: state.get() !== null ? 'set' : 'unset' });\n const setTimer = t => {\n state.set(t);\n };\n const cancel = () => {\n const t = state.get();\n if (t !== null) {\n t.cancel();\n }\n };\n return nu$8({\n readState,\n setTimer,\n cancel\n });\n };\n const init$9 = spec => spec.stream.streams.state(spec);\n\n var StreamingState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n throttle: throttle,\n init: init$9\n });\n\n const setup$c = (streamInfo, streamState) => {\n const sInfo = streamInfo.stream;\n const throttler = last(streamInfo.onStream, sInfo.delay);\n streamState.setTimer(throttler);\n return (component, simulatedEvent) => {\n throttler.throttle(component, simulatedEvent);\n if (sInfo.stopEvent) {\n simulatedEvent.stop();\n }\n };\n };\n var StreamingSchema = [\n requiredOf('stream', choose$1('mode', {\n throttle: [\n required$1('delay'),\n defaulted('stopEvent', true),\n output$1('streams', {\n setup: setup$c,\n state: throttle\n })\n ]\n })),\n defaulted('event', 'input'),\n option$3('cancelEvent'),\n onStrictHandler('onStream')\n ];\n\n const Streaming = create$4({\n fields: StreamingSchema,\n name: 'streaming',\n active: ActiveStreaming,\n state: StreamingState\n });\n\n const setValueFromItem = (model, input, item) => {\n const itemData = Representing.getValue(item);\n Representing.setValue(input, itemData);\n setCursorAtEnd(input);\n };\n const setSelectionOn = (input, f) => {\n const el = input.element;\n const value = get$6(el);\n const node = el.dom;\n if (get$f(el, 'type') !== 'number') {\n f(node, value);\n }\n };\n const setCursorAtEnd = input => {\n setSelectionOn(input, (node, value) => node.setSelectionRange(value.length, value.length));\n };\n const setSelectionToEnd = (input, startOffset) => {\n setSelectionOn(input, (node, value) => node.setSelectionRange(startOffset, value.length));\n };\n const attemptSelectOver = (model, input, item) => {\n if (!model.selectsOver) {\n return Optional.none();\n } else {\n const currentValue = Representing.getValue(input);\n const inputDisplay = model.getDisplayText(currentValue);\n const itemValue = Representing.getValue(item);\n const itemDisplay = model.getDisplayText(itemValue);\n return itemDisplay.indexOf(inputDisplay) === 0 ? Optional.some(() => {\n setValueFromItem(model, input, item);\n setSelectionToEnd(input, inputDisplay.length);\n }) : Optional.none();\n }\n };\n\n const itemExecute = constant$1('alloy.typeahead.itemexecute');\n\n const make$3 = (detail, components, spec, externals) => {\n const navigateList = (comp, simulatedEvent, highlighter) => {\n detail.previewing.set(false);\n const sandbox = Coupling.getCoupled(comp, 'sandbox');\n if (Sandboxing.isOpen(sandbox)) {\n Composing.getCurrent(sandbox).each(menu => {\n Highlighting.getHighlighted(menu).fold(() => {\n highlighter(menu);\n }, () => {\n dispatchEvent(sandbox, menu.element, 'keydown', simulatedEvent);\n });\n });\n } else {\n const onOpenSync = sandbox => {\n Composing.getCurrent(sandbox).each(highlighter);\n };\n open(detail, mapFetch(comp), comp, sandbox, externals, onOpenSync, HighlightOnOpen.HighlightMenuAndItem).get(noop);\n }\n };\n const focusBehaviours$1 = focusBehaviours(detail);\n const mapFetch = comp => tdata => tdata.map(data => {\n const menus = values(data.menus);\n const items = bind$3(menus, menu => filter$2(menu.items, item => item.type === 'item'));\n const repState = Representing.getState(comp);\n repState.update(map$2(items, item => item.data));\n return data;\n });\n const getActiveMenu = sandboxComp => Composing.getCurrent(sandboxComp);\n const typeaheadCustomEvents = 'typeaheadevents';\n const behaviours = [\n Focusing.config({}),\n Representing.config({\n onSetValue: detail.onSetValue,\n store: {\n mode: 'dataset',\n getDataKey: comp => get$6(comp.element),\n getFallbackEntry: itemString => ({\n value: itemString,\n meta: {}\n }),\n setValue: (comp, data) => {\n set$5(comp.element, detail.model.getDisplayText(data));\n },\n ...detail.initialData.map(d => wrap$1('initialValue', d)).getOr({})\n }\n }),\n Streaming.config({\n stream: {\n mode: 'throttle',\n delay: detail.responseTime,\n stopEvent: false\n },\n onStream: (component, _simulatedEvent) => {\n const sandbox = Coupling.getCoupled(component, 'sandbox');\n const focusInInput = Focusing.isFocused(component);\n if (focusInInput) {\n if (get$6(component.element).length >= detail.minChars) {\n const previousValue = getActiveMenu(sandbox).bind(activeMenu => Highlighting.getHighlighted(activeMenu).map(Representing.getValue));\n detail.previewing.set(true);\n const onOpenSync = _sandbox => {\n getActiveMenu(sandbox).each(activeMenu => {\n previousValue.fold(() => {\n if (detail.model.selectsOver) {\n Highlighting.highlightFirst(activeMenu);\n }\n }, pv => {\n Highlighting.highlightBy(activeMenu, item => {\n const itemData = Representing.getValue(item);\n return itemData.value === pv.value;\n });\n Highlighting.getHighlighted(activeMenu).orThunk(() => {\n Highlighting.highlightFirst(activeMenu);\n return Optional.none();\n });\n });\n });\n };\n open(detail, mapFetch(component), component, sandbox, externals, onOpenSync, HighlightOnOpen.HighlightJustMenu).get(noop);\n }\n }\n },\n cancelEvent: typeaheadCancel()\n }),\n Keying.config({\n mode: 'special',\n onDown: (comp, simulatedEvent) => {\n navigateList(comp, simulatedEvent, Highlighting.highlightFirst);\n return Optional.some(true);\n },\n onEscape: comp => {\n const sandbox = Coupling.getCoupled(comp, 'sandbox');\n if (Sandboxing.isOpen(sandbox)) {\n Sandboxing.close(sandbox);\n return Optional.some(true);\n }\n return Optional.none();\n },\n onUp: (comp, simulatedEvent) => {\n navigateList(comp, simulatedEvent, Highlighting.highlightLast);\n return Optional.some(true);\n },\n onEnter: comp => {\n const sandbox = Coupling.getCoupled(comp, 'sandbox');\n const sandboxIsOpen = Sandboxing.isOpen(sandbox);\n if (sandboxIsOpen && !detail.previewing.get()) {\n return getActiveMenu(sandbox).bind(activeMenu => Highlighting.getHighlighted(activeMenu)).map(item => {\n emitWith(comp, itemExecute(), { item });\n return true;\n });\n } else {\n const currentValue = Representing.getValue(comp);\n emit(comp, typeaheadCancel());\n detail.onExecute(sandbox, comp, currentValue);\n if (sandboxIsOpen) {\n Sandboxing.close(sandbox);\n }\n return Optional.some(true);\n }\n }\n }),\n Toggling.config({\n toggleClass: detail.markers.openClass,\n aria: { mode: 'expanded' }\n }),\n Coupling.config({\n others: {\n sandbox: hotspot => {\n return makeSandbox$1(detail, hotspot, {\n onOpen: () => Toggling.on(hotspot),\n onClose: () => Toggling.off(hotspot)\n });\n }\n }\n }),\n config(typeaheadCustomEvents, [\n runOnAttached(typeaheadComp => {\n detail.lazyTypeaheadComp.set(Optional.some(typeaheadComp));\n }),\n runOnDetached(_typeaheadComp => {\n detail.lazyTypeaheadComp.set(Optional.none());\n }),\n runOnExecute$1(comp => {\n const onOpenSync = noop;\n togglePopup(detail, mapFetch(comp), comp, externals, onOpenSync, HighlightOnOpen.HighlightMenuAndItem).get(noop);\n }),\n run$1(itemExecute(), (comp, se) => {\n const sandbox = Coupling.getCoupled(comp, 'sandbox');\n setValueFromItem(detail.model, comp, se.event.item);\n emit(comp, typeaheadCancel());\n detail.onItemExecute(comp, sandbox, se.event.item, Representing.getValue(comp));\n Sandboxing.close(sandbox);\n setCursorAtEnd(comp);\n })\n ].concat(detail.dismissOnBlur ? [run$1(postBlur(), typeahead => {\n const sandbox = Coupling.getCoupled(typeahead, 'sandbox');\n if (search(sandbox.element).isNone()) {\n Sandboxing.close(sandbox);\n }\n })] : []))\n ];\n const eventOrder = {\n [detachedFromDom()]: [\n Representing.name(),\n Streaming.name(),\n typeaheadCustomEvents\n ],\n ...detail.eventOrder\n };\n return {\n uid: detail.uid,\n dom: dom(deepMerge(detail, {\n inputAttributes: {\n 'role': 'combobox',\n 'aria-autocomplete': 'list',\n 'aria-haspopup': 'true'\n }\n })),\n behaviours: {\n ...focusBehaviours$1,\n ...augment(detail.typeaheadBehaviours, behaviours)\n },\n eventOrder\n };\n };\n\n const schema$g = constant$1([\n option$3('lazySink'),\n required$1('fetch'),\n defaulted('minChars', 5),\n defaulted('responseTime', 1000),\n onHandler('onOpen'),\n defaulted('getHotspot', Optional.some),\n defaulted('getAnchorOverrides', constant$1({})),\n defaulted('layouts', Optional.none()),\n defaulted('eventOrder', {}),\n defaultedObjOf('model', {}, [\n defaulted('getDisplayText', itemData => itemData.meta !== undefined && itemData.meta.text !== undefined ? itemData.meta.text : itemData.value),\n defaulted('selectsOver', true),\n defaulted('populateFromBrowse', true)\n ]),\n onHandler('onSetValue'),\n onKeyboardHandler('onExecute'),\n onHandler('onItemExecute'),\n defaulted('inputClasses', []),\n defaulted('inputAttributes', {}),\n defaulted('inputStyles', {}),\n defaulted('matchWidth', true),\n defaulted('useMinWidth', false),\n defaulted('dismissOnBlur', true),\n markers$1(['openClass']),\n option$3('initialData'),\n field('typeaheadBehaviours', [\n Focusing,\n Representing,\n Streaming,\n Keying,\n Toggling,\n Coupling\n ]),\n customField('lazyTypeaheadComp', () => Cell(Optional.none)),\n customField('previewing', () => Cell(true))\n ].concat(schema$l()).concat(sandboxFields()));\n const parts$b = constant$1([external({\n schema: [tieredMenuMarkers()],\n name: 'menu',\n overrides: detail => {\n return {\n fakeFocus: true,\n onHighlightItem: (_tmenu, menu, item) => {\n if (!detail.previewing.get()) {\n detail.lazyTypeaheadComp.get().each(input => {\n if (detail.model.populateFromBrowse) {\n setValueFromItem(detail.model, input, item);\n }\n });\n } else {\n detail.lazyTypeaheadComp.get().each(input => {\n attemptSelectOver(detail.model, input, item).fold(() => {\n if (detail.model.selectsOver) {\n Highlighting.dehighlight(menu, item);\n detail.previewing.set(true);\n } else {\n detail.previewing.set(false);\n }\n }, selectOverTextInInput => {\n selectOverTextInInput();\n detail.previewing.set(false);\n });\n });\n }\n },\n onExecute: (_menu, item) => {\n return detail.lazyTypeaheadComp.get().map(typeahead => {\n emitWith(typeahead, itemExecute(), { item });\n return true;\n });\n },\n onHover: (menu, item) => {\n detail.previewing.set(false);\n detail.lazyTypeaheadComp.get().each(input => {\n if (detail.model.populateFromBrowse) {\n setValueFromItem(detail.model, input, item);\n }\n });\n }\n };\n }\n })]);\n\n const Typeahead = composite({\n name: 'Typeahead',\n configFields: schema$g(),\n partFields: parts$b(),\n factory: make$3\n });\n\n const wrap = delegate => {\n const toCached = () => {\n return wrap(delegate.toCached());\n };\n const bindFuture = f => {\n return wrap(delegate.bind(resA => resA.fold(err => Future.pure(Result.error(err)), a => f(a))));\n };\n const bindResult = f => {\n return wrap(delegate.map(resA => resA.bind(f)));\n };\n const mapResult = f => {\n return wrap(delegate.map(resA => resA.map(f)));\n };\n const mapError = f => {\n return wrap(delegate.map(resA => resA.mapError(f)));\n };\n const foldResult = (whenError, whenValue) => {\n return delegate.map(res => res.fold(whenError, whenValue));\n };\n const withTimeout = (timeout, errorThunk) => {\n return wrap(Future.nu(callback => {\n let timedOut = false;\n const timer = setTimeout(() => {\n timedOut = true;\n callback(Result.error(errorThunk()));\n }, timeout);\n delegate.get(result => {\n if (!timedOut) {\n clearTimeout(timer);\n callback(result);\n }\n });\n }));\n };\n return {\n ...delegate,\n toCached,\n bindFuture,\n bindResult,\n mapResult,\n mapError,\n foldResult,\n withTimeout\n };\n };\n const nu$1 = worker => {\n return wrap(Future.nu(worker));\n };\n const value = value => {\n return wrap(Future.pure(Result.value(value)));\n };\n const error = error => {\n return wrap(Future.pure(Result.error(error)));\n };\n const fromResult = result => {\n return wrap(Future.pure(result));\n };\n const fromFuture = future => {\n return wrap(future.map(Result.value));\n };\n const fromPromise = promise => {\n return nu$1(completer => {\n promise.then(value => {\n completer(Result.value(value));\n }, error => {\n completer(Result.error(error));\n });\n });\n };\n const FutureResult = {\n nu: nu$1,\n wrap,\n pure: value,\n value,\n error,\n fromResult,\n fromFuture,\n fromPromise\n };\n\n const getMenuButtonApi = component => ({\n isEnabled: () => !Disabling.isDisabled(component),\n setEnabled: state => Disabling.set(component, !state),\n setActive: state => {\n const elm = component.element;\n if (state) {\n add$2(elm, 'tox-tbtn--enabled');\n set$9(elm, 'aria-pressed', true);\n } else {\n remove$2(elm, 'tox-tbtn--enabled');\n remove$7(elm, 'aria-pressed');\n }\n },\n isActive: () => has(component.element, 'tox-tbtn--enabled')\n });\n const renderMenuButton = (spec, prefix, backstage, role) => {\n return renderCommonDropdown({\n text: spec.text,\n icon: spec.icon,\n tooltip: spec.tooltip,\n searchable: spec.search.isSome(),\n role,\n fetch: (dropdownComp, callback) => {\n const fetchContext = { pattern: spec.search.isSome() ? getSearchPattern(dropdownComp) : '' };\n spec.fetch(items => {\n callback(build(items, ItemResponse$1.CLOSE_ON_EXECUTE, backstage, {\n isHorizontalMenu: false,\n search: spec.search\n }));\n }, fetchContext);\n },\n onSetup: spec.onSetup,\n getApi: getMenuButtonApi,\n columns: 1,\n presets: 'normal',\n classes: [],\n dropdownBehaviours: [Tabstopping.config({})]\n }, prefix, backstage.shared);\n };\n const getFetch = (items, getButton, backstage) => {\n const getMenuItemAction = item => api => {\n const newValue = !api.isActive();\n api.setActive(newValue);\n item.storage.set(newValue);\n backstage.shared.getSink().each(sink => {\n getButton().getOpt(sink).each(orig => {\n focus$3(orig.element);\n emitWith(orig, formActionEvent, {\n name: item.name,\n value: item.storage.get()\n });\n });\n });\n };\n const getMenuItemSetup = item => api => {\n api.setActive(item.storage.get());\n };\n return success => {\n success(map$2(items, item => {\n const text = item.text.fold(() => ({}), text => ({ text }));\n return {\n type: item.type,\n active: false,\n ...text,\n onAction: getMenuItemAction(item),\n onSetup: getMenuItemSetup(item)\n };\n }));\n };\n };\n\n const renderCommonSpec = (spec, actionOpt, extraBehaviours = [], dom, components, providersBackstage) => {\n const action = actionOpt.fold(() => ({}), action => ({ action }));\n const common = {\n buttonBehaviours: derive$1([\n DisablingConfigs.button(() => !spec.enabled || providersBackstage.isDisabled()),\n receivingConfig(),\n Tabstopping.config({}),\n config('button press', [\n preventDefault('click'),\n preventDefault('mousedown')\n ])\n ].concat(extraBehaviours)),\n eventOrder: {\n click: [\n 'button press',\n 'alloy.base.behaviour'\n ],\n mousedown: [\n 'button press',\n 'alloy.base.behaviour'\n ]\n },\n ...action\n };\n const domFinal = deepMerge(common, { dom });\n return deepMerge(domFinal, { components });\n };\n const renderIconButtonSpec = (spec, action, providersBackstage, extraBehaviours = []) => {\n const tooltipAttributes = spec.tooltip.map(tooltip => ({\n 'aria-label': providersBackstage.translate(tooltip),\n 'title': providersBackstage.translate(tooltip)\n })).getOr({});\n const dom = {\n tag: 'button',\n classes: ['tox-tbtn'],\n attributes: tooltipAttributes\n };\n const icon = spec.icon.map(iconName => renderIconFromPack(iconName, providersBackstage.icons));\n const components = componentRenderPipeline([icon]);\n return renderCommonSpec(spec, action, extraBehaviours, dom, components, providersBackstage);\n };\n const calculateClassesFromButtonType = buttonType => {\n switch (buttonType) {\n case 'primary':\n return ['tox-button'];\n case 'toolbar':\n return ['tox-tbtn'];\n case 'secondary':\n default:\n return [\n 'tox-button',\n 'tox-button--secondary'\n ];\n }\n };\n const renderButtonSpec = (spec, action, providersBackstage, extraBehaviours = [], extraClasses = []) => {\n const translatedText = providersBackstage.translate(spec.text);\n const icon = spec.icon.map(iconName => renderIconFromPack(iconName, providersBackstage.icons));\n const components = [icon.getOrThunk(() => text$2(translatedText))];\n const buttonType = spec.buttonType.getOr(!spec.primary && !spec.borderless ? 'secondary' : 'primary');\n const baseClasses = calculateClassesFromButtonType(buttonType);\n const classes = [\n ...baseClasses,\n ...icon.isSome() ? ['tox-button--icon'] : [],\n ...spec.borderless ? ['tox-button--naked'] : [],\n ...extraClasses\n ];\n const dom = {\n tag: 'button',\n classes,\n attributes: { title: translatedText }\n };\n return renderCommonSpec(spec, action, extraBehaviours, dom, components, providersBackstage);\n };\n const renderButton = (spec, action, providersBackstage, extraBehaviours = [], extraClasses = []) => {\n const buttonSpec = renderButtonSpec(spec, Optional.some(action), providersBackstage, extraBehaviours, extraClasses);\n return Button.sketch(buttonSpec);\n };\n const getAction = (name, buttonType) => comp => {\n if (buttonType === 'custom') {\n emitWith(comp, formActionEvent, {\n name,\n value: {}\n });\n } else if (buttonType === 'submit') {\n emit(comp, formSubmitEvent);\n } else if (buttonType === 'cancel') {\n emit(comp, formCancelEvent);\n } else {\n console.error('Unknown button type: ', buttonType);\n }\n };\n const isMenuFooterButtonSpec = (spec, buttonType) => buttonType === 'menu';\n const isNormalFooterButtonSpec = (spec, buttonType) => buttonType === 'custom' || buttonType === 'cancel' || buttonType === 'submit';\n const renderFooterButton = (spec, buttonType, backstage) => {\n if (isMenuFooterButtonSpec(spec, buttonType)) {\n const getButton = () => memButton;\n const menuButtonSpec = spec;\n const fixedSpec = {\n ...spec,\n type: 'menubutton',\n search: Optional.none(),\n onSetup: api => {\n api.setEnabled(spec.enabled);\n return noop;\n },\n fetch: getFetch(menuButtonSpec.items, getButton, backstage)\n };\n const memButton = record(renderMenuButton(fixedSpec, 'tox-tbtn', backstage, Optional.none()));\n return memButton.asSpec();\n } else if (isNormalFooterButtonSpec(spec, buttonType)) {\n const action = getAction(spec.name, buttonType);\n const buttonSpec = {\n ...spec,\n borderless: false\n };\n return renderButton(buttonSpec, action, backstage.shared.providers, []);\n } else {\n console.error('Unknown footer button type: ', buttonType);\n throw new Error('Unknown footer button type');\n }\n };\n const renderDialogButton = (spec, providersBackstage) => {\n const action = getAction(spec.name, 'custom');\n return renderFormField(Optional.none(), FormField.parts.field({\n factory: Button,\n ...renderButtonSpec(spec, Optional.some(action), providersBackstage, [\n RepresentingConfigs.memory(''),\n ComposingConfigs.self()\n ])\n }));\n };\n\n const separator$1 = { type: 'separator' };\n const toMenuItem = target => ({\n type: 'menuitem',\n value: target.url,\n text: target.title,\n meta: { attach: target.attach },\n onAction: noop\n });\n const staticMenuItem = (title, url) => ({\n type: 'menuitem',\n value: url,\n text: title,\n meta: { attach: undefined },\n onAction: noop\n });\n const toMenuItems = targets => map$2(targets, toMenuItem);\n const filterLinkTargets = (type, targets) => filter$2(targets, target => target.type === type);\n const filteredTargets = (type, targets) => toMenuItems(filterLinkTargets(type, targets));\n const headerTargets = linkInfo => filteredTargets('header', linkInfo.targets);\n const anchorTargets = linkInfo => filteredTargets('anchor', linkInfo.targets);\n const anchorTargetTop = linkInfo => Optional.from(linkInfo.anchorTop).map(url => staticMenuItem('', url)).toArray();\n const anchorTargetBottom = linkInfo => Optional.from(linkInfo.anchorBottom).map(url => staticMenuItem('', url)).toArray();\n const historyTargets = history => map$2(history, url => staticMenuItem(url, url));\n const joinMenuLists = items => {\n return foldl(items, (a, b) => {\n const bothEmpty = a.length === 0 || b.length === 0;\n return bothEmpty ? a.concat(b) : a.concat(separator$1, b);\n }, []);\n };\n const filterByQuery = (term, menuItems) => {\n const lowerCaseTerm = term.toLowerCase();\n return filter$2(menuItems, item => {\n var _a;\n const text = item.meta !== undefined && item.meta.text !== undefined ? item.meta.text : item.text;\n const value = (_a = item.value) !== null && _a !== void 0 ? _a : '';\n return contains$1(text.toLowerCase(), lowerCaseTerm) || contains$1(value.toLowerCase(), lowerCaseTerm);\n });\n };\n\n const getItems = (fileType, input, urlBackstage) => {\n const urlInputValue = Representing.getValue(input);\n const term = urlInputValue.meta.text !== undefined ? urlInputValue.meta.text : urlInputValue.value;\n const info = urlBackstage.getLinkInformation();\n return info.fold(() => [], linkInfo => {\n const history = filterByQuery(term, historyTargets(urlBackstage.getHistory(fileType)));\n return fileType === 'file' ? joinMenuLists([\n history,\n filterByQuery(term, headerTargets(linkInfo)),\n filterByQuery(term, flatten([\n anchorTargetTop(linkInfo),\n anchorTargets(linkInfo),\n anchorTargetBottom(linkInfo)\n ]))\n ]) : history;\n });\n };\n const errorId = generate$6('aria-invalid');\n const renderUrlInput = (spec, backstage, urlBackstage, initialData) => {\n const providersBackstage = backstage.shared.providers;\n const updateHistory = component => {\n const urlEntry = Representing.getValue(component);\n urlBackstage.addToHistory(urlEntry.value, spec.filetype);\n };\n const typeaheadSpec = {\n ...initialData.map(initialData => ({ initialData })).getOr({}),\n dismissOnBlur: true,\n inputClasses: ['tox-textfield'],\n sandboxClasses: ['tox-dialog__popups'],\n inputAttributes: {\n 'aria-errormessage': errorId,\n 'type': 'url'\n },\n minChars: 0,\n responseTime: 0,\n fetch: input => {\n const items = getItems(spec.filetype, input, urlBackstage);\n const tdata = build(items, ItemResponse$1.BUBBLE_TO_SANDBOX, backstage, {\n isHorizontalMenu: false,\n search: Optional.none()\n });\n return Future.pure(tdata);\n },\n getHotspot: comp => memUrlBox.getOpt(comp),\n onSetValue: (comp, _newValue) => {\n if (comp.hasConfigured(Invalidating)) {\n Invalidating.run(comp).get(noop);\n }\n },\n typeaheadBehaviours: derive$1([\n ...urlBackstage.getValidationHandler().map(handler => Invalidating.config({\n getRoot: comp => parentElement(comp.element),\n invalidClass: 'tox-control-wrap--status-invalid',\n notify: {\n onInvalid: (comp, err) => {\n memInvalidIcon.getOpt(comp).each(invalidComp => {\n set$9(invalidComp.element, 'title', providersBackstage.translate(err));\n });\n }\n },\n validator: {\n validate: input => {\n const urlEntry = Representing.getValue(input);\n return FutureResult.nu(completer => {\n handler({\n type: spec.filetype,\n url: urlEntry.value\n }, validation => {\n if (validation.status === 'invalid') {\n const err = Result.error(validation.message);\n completer(err);\n } else {\n const val = Result.value(validation.message);\n completer(val);\n }\n });\n });\n },\n validateOnLoad: false\n }\n })).toArray(),\n Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() }),\n Tabstopping.config({}),\n config('urlinput-events', [\n run$1(input(), comp => {\n const currentValue = get$6(comp.element);\n const trimmedValue = currentValue.trim();\n if (trimmedValue !== currentValue) {\n set$5(comp.element, trimmedValue);\n }\n if (spec.filetype === 'file') {\n emitWith(comp, formChangeEvent, { name: spec.name });\n }\n }),\n run$1(change(), comp => {\n emitWith(comp, formChangeEvent, { name: spec.name });\n updateHistory(comp);\n }),\n run$1(postPaste(), comp => {\n emitWith(comp, formChangeEvent, { name: spec.name });\n updateHistory(comp);\n })\n ])\n ]),\n eventOrder: {\n [input()]: [\n 'streaming',\n 'urlinput-events',\n 'invalidating'\n ]\n },\n model: {\n getDisplayText: itemData => itemData.value,\n selectsOver: false,\n populateFromBrowse: false\n },\n markers: { openClass: 'tox-textfield--popup-open' },\n lazySink: backstage.shared.getSink,\n parts: { menu: part(false, 1, 'normal') },\n onExecute: (_menu, component, _entry) => {\n emitWith(component, formSubmitEvent, {});\n },\n onItemExecute: (typeahead, _sandbox, _item, _value) => {\n updateHistory(typeahead);\n emitWith(typeahead, formChangeEvent, { name: spec.name });\n }\n };\n const pField = FormField.parts.field({\n ...typeaheadSpec,\n factory: Typeahead\n });\n const pLabel = spec.label.map(label => renderLabel$2(label, providersBackstage));\n const makeIcon = (name, errId, icon = name, label = name) => render$3(icon, {\n tag: 'div',\n classes: [\n 'tox-icon',\n 'tox-control-wrap__status-icon-' + name\n ],\n attributes: {\n 'title': providersBackstage.translate(label),\n 'aria-live': 'polite',\n ...errId.fold(() => ({}), id => ({ id }))\n }\n }, providersBackstage.icons);\n const memInvalidIcon = record(makeIcon('invalid', Optional.some(errorId), 'warning'));\n const memStatus = record({\n dom: {\n tag: 'div',\n classes: ['tox-control-wrap__status-icon-wrap']\n },\n components: [memInvalidIcon.asSpec()]\n });\n const optUrlPicker = urlBackstage.getUrlPicker(spec.filetype);\n const browseUrlEvent = generate$6('browser.url.event');\n const memUrlBox = record({\n dom: {\n tag: 'div',\n classes: ['tox-control-wrap']\n },\n components: [\n pField,\n memStatus.asSpec()\n ],\n behaviours: derive$1([Disabling.config({ disabled: () => !spec.enabled || providersBackstage.isDisabled() })])\n });\n const memUrlPickerButton = record(renderButton({\n name: spec.name,\n icon: Optional.some('browse'),\n text: spec.label.getOr(''),\n enabled: spec.enabled,\n primary: false,\n buttonType: Optional.none(),\n borderless: true\n }, component => emit(component, browseUrlEvent), providersBackstage, [], ['tox-browse-url']));\n const controlHWrapper = () => ({\n dom: {\n tag: 'div',\n classes: ['tox-form__controls-h-stack']\n },\n components: flatten([\n [memUrlBox.asSpec()],\n optUrlPicker.map(() => memUrlPickerButton.asSpec()).toArray()\n ])\n });\n const openUrlPicker = comp => {\n Composing.getCurrent(comp).each(field => {\n const componentData = Representing.getValue(field);\n const urlData = {\n fieldname: spec.name,\n ...componentData\n };\n optUrlPicker.each(picker => {\n picker(urlData).get(chosenData => {\n Representing.setValue(field, chosenData);\n emitWith(comp, formChangeEvent, { name: spec.name });\n });\n });\n });\n };\n return FormField.sketch({\n dom: renderFormFieldDom(),\n components: pLabel.toArray().concat([controlHWrapper()]),\n fieldBehaviours: derive$1([\n Disabling.config({\n disabled: () => !spec.enabled || providersBackstage.isDisabled(),\n onDisabled: comp => {\n FormField.getField(comp).each(Disabling.disable);\n memUrlPickerButton.getOpt(comp).each(Disabling.disable);\n },\n onEnabled: comp => {\n FormField.getField(comp).each(Disabling.enable);\n memUrlPickerButton.getOpt(comp).each(Disabling.enable);\n }\n }),\n receivingConfig(),\n config('url-input-events', [run$1(browseUrlEvent, openUrlPicker)])\n ])\n });\n };\n\n const renderAlertBanner = (spec, providersBackstage) => Container.sketch({\n dom: {\n tag: 'div',\n attributes: { role: 'alert' },\n classes: [\n 'tox-notification',\n 'tox-notification--in',\n `tox-notification--${ spec.level }`\n ]\n },\n components: [\n {\n dom: {\n tag: 'div',\n classes: ['tox-notification__icon']\n },\n components: [Button.sketch({\n dom: {\n tag: 'button',\n classes: [\n 'tox-button',\n 'tox-button--naked',\n 'tox-button--icon'\n ],\n innerHtml: get$2(spec.icon, providersBackstage.icons),\n attributes: { title: providersBackstage.translate(spec.iconTooltip) }\n },\n action: comp => {\n emitWith(comp, formActionEvent, {\n name: 'alert-banner',\n value: spec.url\n });\n },\n buttonBehaviours: derive$1([addFocusableBehaviour()])\n })]\n },\n {\n dom: {\n tag: 'div',\n classes: ['tox-notification__body'],\n innerHtml: providersBackstage.translate(spec.text)\n }\n }\n ]\n });\n\n const set$1 = (element, status) => {\n element.dom.checked = status;\n };\n const get$1 = element => element.dom.checked;\n\n const renderCheckbox = (spec, providerBackstage, initialData) => {\n const toggleCheckboxHandler = comp => {\n comp.element.dom.click();\n return Optional.some(true);\n };\n const pField = FormField.parts.field({\n factory: { sketch: identity },\n dom: {\n tag: 'input',\n classes: ['tox-checkbox__input'],\n attributes: { type: 'checkbox' }\n },\n behaviours: derive$1([\n ComposingConfigs.self(),\n Disabling.config({ disabled: () => !spec.enabled || providerBackstage.isDisabled() }),\n Tabstopping.config({}),\n Focusing.config({}),\n RepresentingConfigs.withElement(initialData, get$1, set$1),\n Keying.config({\n mode: 'special',\n onEnter: toggleCheckboxHandler,\n onSpace: toggleCheckboxHandler,\n stopSpaceKeyup: true\n }),\n config('checkbox-events', [run$1(change(), (component, _) => {\n emitWith(component, formChangeEvent, { name: spec.name });\n })])\n ])\n });\n const pLabel = FormField.parts.label({\n dom: {\n tag: 'span',\n classes: ['tox-checkbox__label']\n },\n components: [text$2(providerBackstage.translate(spec.label))],\n behaviours: derive$1([Unselecting.config({})])\n });\n const makeIcon = className => {\n const iconName = className === 'checked' ? 'selected' : 'unselected';\n return render$3(iconName, {\n tag: 'span',\n classes: [\n 'tox-icon',\n 'tox-checkbox-icon__' + className\n ]\n }, providerBackstage.icons);\n };\n const memIcons = record({\n dom: {\n tag: 'div',\n classes: ['tox-checkbox__icons']\n },\n components: [\n makeIcon('checked'),\n makeIcon('unchecked')\n ]\n });\n return FormField.sketch({\n dom: {\n tag: 'label',\n classes: ['tox-checkbox']\n },\n components: [\n pField,\n memIcons.asSpec(),\n pLabel\n ],\n fieldBehaviours: derive$1([\n Disabling.config({\n disabled: () => !spec.enabled || providerBackstage.isDisabled(),\n disableClass: 'tox-checkbox--disabled',\n onDisabled: comp => {\n FormField.getField(comp).each(Disabling.disable);\n },\n onEnabled: comp => {\n FormField.getField(comp).each(Disabling.enable);\n }\n }),\n receivingConfig()\n ])\n });\n };\n\n const renderHtmlPanel = spec => {\n if (spec.presets === 'presentation') {\n return Container.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-form__group'],\n innerHtml: spec.html\n }\n });\n } else {\n return Container.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-form__group'],\n innerHtml: spec.html,\n attributes: { role: 'document' }\n },\n containerBehaviours: derive$1([\n Tabstopping.config({}),\n Focusing.config({})\n ])\n });\n }\n };\n\n const make$2 = render => {\n return (parts, spec, dialogData, backstage) => get$g(spec, 'name').fold(() => render(spec, backstage, Optional.none()), fieldName => parts.field(fieldName, render(spec, backstage, get$g(dialogData, fieldName))));\n };\n const makeIframe = render => (parts, spec, dialogData, backstage) => {\n const iframeSpec = deepMerge(spec, { source: 'dynamic' });\n return make$2(render)(parts, iframeSpec, dialogData, backstage);\n };\n const factories = {\n bar: make$2((spec, backstage) => renderBar(spec, backstage.shared)),\n collection: make$2((spec, backstage, data) => renderCollection(spec, backstage.shared.providers, data)),\n alertbanner: make$2((spec, backstage) => renderAlertBanner(spec, backstage.shared.providers)),\n input: make$2((spec, backstage, data) => renderInput(spec, backstage.shared.providers, data)),\n textarea: make$2((spec, backstage, data) => renderTextarea(spec, backstage.shared.providers, data)),\n label: make$2((spec, backstage) => renderLabel$1(spec, backstage.shared)),\n iframe: makeIframe((spec, backstage, data) => renderIFrame(spec, backstage.shared.providers, data)),\n button: make$2((spec, backstage) => renderDialogButton(spec, backstage.shared.providers)),\n checkbox: make$2((spec, backstage, data) => renderCheckbox(spec, backstage.shared.providers, data)),\n colorinput: make$2((spec, backstage, data) => renderColorInput(spec, backstage.shared, backstage.colorinput, data)),\n colorpicker: make$2((spec, backstage, data) => renderColorPicker(spec, backstage.shared.providers, data)),\n dropzone: make$2((spec, backstage, data) => renderDropZone(spec, backstage.shared.providers, data)),\n grid: make$2((spec, backstage) => renderGrid(spec, backstage.shared)),\n listbox: make$2((spec, backstage, data) => renderListBox(spec, backstage, data)),\n selectbox: make$2((spec, backstage, data) => renderSelectBox(spec, backstage.shared.providers, data)),\n sizeinput: make$2((spec, backstage) => renderSizeInput(spec, backstage.shared.providers)),\n slider: make$2((spec, backstage, data) => renderSlider(spec, backstage.shared.providers, data)),\n urlinput: make$2((spec, backstage, data) => renderUrlInput(spec, backstage, backstage.urlinput, data)),\n customeditor: make$2(renderCustomEditor),\n htmlpanel: make$2(renderHtmlPanel),\n imagepreview: make$2((spec, _, data) => renderImagePreview(spec, data)),\n table: make$2((spec, backstage) => renderTable(spec, backstage.shared.providers)),\n panel: make$2((spec, backstage) => renderPanel(spec, backstage))\n };\n const noFormParts = {\n field: (_name, spec) => spec,\n record: constant$1([])\n };\n const interpretInForm = (parts, spec, dialogData, oldBackstage) => {\n const newBackstage = deepMerge(oldBackstage, { shared: { interpreter: childSpec => interpretParts(parts, childSpec, dialogData, newBackstage) } });\n return interpretParts(parts, spec, dialogData, newBackstage);\n };\n const interpretParts = (parts, spec, dialogData, backstage) => get$g(factories, spec.type).fold(() => {\n console.error(`Unknown factory type \"${ spec.type }\", defaulting to container: `, spec);\n return spec;\n }, factory => factory(parts, spec, dialogData, backstage));\n const interpretWithoutForm = (spec, dialogData, backstage) => interpretParts(noFormParts, spec, dialogData, backstage);\n\n const labelPrefix = 'layout-inset';\n const westEdgeX = anchor => anchor.x;\n const middleX = (anchor, element) => anchor.x + anchor.width / 2 - element.width / 2;\n const eastEdgeX = (anchor, element) => anchor.x + anchor.width - element.width;\n const northY = anchor => anchor.y;\n const southY = (anchor, element) => anchor.y + anchor.height - element.height;\n const centreY = (anchor, element) => anchor.y + anchor.height / 2 - element.height / 2;\n const southwest = (anchor, element, bubbles) => nu$6(eastEdgeX(anchor, element), southY(anchor, element), bubbles.insetSouthwest(), northwest$3(), 'southwest', boundsRestriction(anchor, {\n right: 0,\n bottom: 3\n }), labelPrefix);\n const southeast = (anchor, element, bubbles) => nu$6(westEdgeX(anchor), southY(anchor, element), bubbles.insetSoutheast(), northeast$3(), 'southeast', boundsRestriction(anchor, {\n left: 1,\n bottom: 3\n }), labelPrefix);\n const northwest = (anchor, element, bubbles) => nu$6(eastEdgeX(anchor, element), northY(anchor), bubbles.insetNorthwest(), southwest$3(), 'northwest', boundsRestriction(anchor, {\n right: 0,\n top: 2\n }), labelPrefix);\n const northeast = (anchor, element, bubbles) => nu$6(westEdgeX(anchor), northY(anchor), bubbles.insetNortheast(), southeast$3(), 'northeast', boundsRestriction(anchor, {\n left: 1,\n top: 2\n }), labelPrefix);\n const north = (anchor, element, bubbles) => nu$6(middleX(anchor, element), northY(anchor), bubbles.insetNorth(), south$3(), 'north', boundsRestriction(anchor, { top: 2 }), labelPrefix);\n const south = (anchor, element, bubbles) => nu$6(middleX(anchor, element), southY(anchor, element), bubbles.insetSouth(), north$3(), 'south', boundsRestriction(anchor, { bottom: 3 }), labelPrefix);\n const east = (anchor, element, bubbles) => nu$6(eastEdgeX(anchor, element), centreY(anchor, element), bubbles.insetEast(), west$3(), 'east', boundsRestriction(anchor, { right: 0 }), labelPrefix);\n const west = (anchor, element, bubbles) => nu$6(westEdgeX(anchor), centreY(anchor, element), bubbles.insetWest(), east$3(), 'west', boundsRestriction(anchor, { left: 1 }), labelPrefix);\n const lookupPreserveLayout = lastPlacement => {\n switch (lastPlacement) {\n case 'north':\n return north;\n case 'northeast':\n return northeast;\n case 'northwest':\n return northwest;\n case 'south':\n return south;\n case 'southeast':\n return southeast;\n case 'southwest':\n return southwest;\n case 'east':\n return east;\n case 'west':\n return west;\n }\n };\n const preserve = (anchor, element, bubbles, placee, bounds) => {\n const layout = getPlacement(placee).map(lookupPreserveLayout).getOr(north);\n return layout(anchor, element, bubbles, placee, bounds);\n };\n const lookupFlippedLayout = lastPlacement => {\n switch (lastPlacement) {\n case 'north':\n return south;\n case 'northeast':\n return southeast;\n case 'northwest':\n return southwest;\n case 'south':\n return north;\n case 'southeast':\n return northeast;\n case 'southwest':\n return northwest;\n case 'east':\n return west;\n case 'west':\n return east;\n }\n };\n const flip = (anchor, element, bubbles, placee, bounds) => {\n const layout = getPlacement(placee).map(lookupFlippedLayout).getOr(north);\n return layout(anchor, element, bubbles, placee, bounds);\n };\n\n const bubbleAlignments$2 = {\n valignCentre: [],\n alignCentre: [],\n alignLeft: [],\n alignRight: [],\n right: [],\n left: [],\n bottom: [],\n top: []\n };\n const getInlineDialogAnchor = (contentAreaElement, lazyAnchorbar, lazyUseEditableAreaAnchor) => {\n const bubbleSize = 12;\n const overrides = { maxHeightFunction: expandable$1() };\n const editableAreaAnchor = () => ({\n type: 'node',\n root: getContentContainer(getRootNode(contentAreaElement())),\n node: Optional.from(contentAreaElement()),\n bubble: nu$5(bubbleSize, bubbleSize, bubbleAlignments$2),\n layouts: {\n onRtl: () => [northeast],\n onLtr: () => [northwest]\n },\n overrides\n });\n const standardAnchor = () => ({\n type: 'hotspot',\n hotspot: lazyAnchorbar(),\n bubble: nu$5(-bubbleSize, bubbleSize, bubbleAlignments$2),\n layouts: {\n onRtl: () => [southeast$2],\n onLtr: () => [southwest$2]\n },\n overrides\n });\n return () => lazyUseEditableAreaAnchor() ? editableAreaAnchor() : standardAnchor();\n };\n const getBannerAnchor = (contentAreaElement, lazyAnchorbar, lazyUseEditableAreaAnchor) => {\n const editableAreaAnchor = () => ({\n type: 'node',\n root: getContentContainer(getRootNode(contentAreaElement())),\n node: Optional.from(contentAreaElement()),\n layouts: {\n onRtl: () => [north],\n onLtr: () => [north]\n }\n });\n const standardAnchor = () => ({\n type: 'hotspot',\n hotspot: lazyAnchorbar(),\n layouts: {\n onRtl: () => [south$2],\n onLtr: () => [south$2]\n }\n });\n return () => lazyUseEditableAreaAnchor() ? editableAreaAnchor() : standardAnchor();\n };\n const getCursorAnchor = (editor, bodyElement) => () => ({\n type: 'selection',\n root: bodyElement(),\n getSelection: () => {\n const rng = editor.selection.getRng();\n return Optional.some(SimSelection.range(SugarElement.fromDom(rng.startContainer), rng.startOffset, SugarElement.fromDom(rng.endContainer), rng.endOffset));\n }\n });\n const getNodeAnchor$1 = bodyElement => element => ({\n type: 'node',\n root: bodyElement(),\n node: element\n });\n const getAnchors = (editor, lazyAnchorbar, isToolbarTop) => {\n const useFixedToolbarContainer = useFixedContainer(editor);\n const bodyElement = () => SugarElement.fromDom(editor.getBody());\n const contentAreaElement = () => SugarElement.fromDom(editor.getContentAreaContainer());\n const lazyUseEditableAreaAnchor = () => useFixedToolbarContainer || !isToolbarTop();\n return {\n inlineDialog: getInlineDialogAnchor(contentAreaElement, lazyAnchorbar, lazyUseEditableAreaAnchor),\n banner: getBannerAnchor(contentAreaElement, lazyAnchorbar, lazyUseEditableAreaAnchor),\n cursor: getCursorAnchor(editor, bodyElement),\n node: getNodeAnchor$1(bodyElement)\n };\n };\n\n const colorPicker = editor => (callback, value) => {\n const dialog = colorPickerDialog(editor);\n dialog(callback, value);\n };\n const hasCustomColors = editor => () => hasCustomColors$1(editor);\n const getColors = editor => id => getColors$2(editor, id);\n const getColorCols = editor => id => getColorCols$1(editor, id);\n const ColorInputBackstage = editor => ({\n colorPicker: colorPicker(editor),\n hasCustomColors: hasCustomColors(editor),\n getColors: getColors(editor),\n getColorCols: getColorCols(editor)\n });\n\n const isDraggableModal = editor => () => isDraggableModal$1(editor);\n const DialogBackstage = editor => ({ isDraggableModal: isDraggableModal(editor) });\n\n const HeaderBackstage = editor => {\n const mode = Cell(isToolbarLocationBottom(editor) ? 'bottom' : 'top');\n return {\n isPositionedAtTop: () => mode.get() === 'top',\n getDockingMode: mode.get,\n setDockingMode: mode.set\n };\n };\n\n const isNestedFormat = format => hasNonNullableKey(format, 'items');\n const isFormatReference = format => hasNonNullableKey(format, 'format');\n const defaultStyleFormats = [\n {\n title: 'Headings',\n items: [\n {\n title: 'Heading 1',\n format: 'h1'\n },\n {\n title: 'Heading 2',\n format: 'h2'\n },\n {\n title: 'Heading 3',\n format: 'h3'\n },\n {\n title: 'Heading 4',\n format: 'h4'\n },\n {\n title: 'Heading 5',\n format: 'h5'\n },\n {\n title: 'Heading 6',\n format: 'h6'\n }\n ]\n },\n {\n title: 'Inline',\n items: [\n {\n title: 'Bold',\n format: 'bold'\n },\n {\n title: 'Italic',\n format: 'italic'\n },\n {\n title: 'Underline',\n format: 'underline'\n },\n {\n title: 'Strikethrough',\n format: 'strikethrough'\n },\n {\n title: 'Superscript',\n format: 'superscript'\n },\n {\n title: 'Subscript',\n format: 'subscript'\n },\n {\n title: 'Code',\n format: 'code'\n }\n ]\n },\n {\n title: 'Blocks',\n items: [\n {\n title: 'Paragraph',\n format: 'p'\n },\n {\n title: 'Blockquote',\n format: 'blockquote'\n },\n {\n title: 'Div',\n format: 'div'\n },\n {\n title: 'Pre',\n format: 'pre'\n }\n ]\n },\n {\n title: 'Align',\n items: [\n {\n title: 'Left',\n format: 'alignleft'\n },\n {\n title: 'Center',\n format: 'aligncenter'\n },\n {\n title: 'Right',\n format: 'alignright'\n },\n {\n title: 'Justify',\n format: 'alignjustify'\n }\n ]\n }\n ];\n const isNestedFormats = format => has$2(format, 'items');\n const isBlockFormat = format => has$2(format, 'block');\n const isInlineFormat = format => has$2(format, 'inline');\n const isSelectorFormat = format => has$2(format, 'selector');\n const mapFormats = userFormats => foldl(userFormats, (acc, fmt) => {\n if (isNestedFormats(fmt)) {\n const result = mapFormats(fmt.items);\n return {\n customFormats: acc.customFormats.concat(result.customFormats),\n formats: acc.formats.concat([{\n title: fmt.title,\n items: result.formats\n }])\n };\n } else if (isInlineFormat(fmt) || isBlockFormat(fmt) || isSelectorFormat(fmt)) {\n const formatName = isString(fmt.name) ? fmt.name : fmt.title.toLowerCase();\n const formatNameWithPrefix = `custom-${ formatName }`;\n return {\n customFormats: acc.customFormats.concat([{\n name: formatNameWithPrefix,\n format: fmt\n }]),\n formats: acc.formats.concat([{\n title: fmt.title,\n format: formatNameWithPrefix,\n icon: fmt.icon\n }])\n };\n } else {\n return {\n ...acc,\n formats: acc.formats.concat(fmt)\n };\n }\n }, {\n customFormats: [],\n formats: []\n });\n const registerCustomFormats = (editor, userFormats) => {\n const result = mapFormats(userFormats);\n const registerFormats = customFormats => {\n each$1(customFormats, fmt => {\n if (!editor.formatter.has(fmt.name)) {\n editor.formatter.register(fmt.name, fmt.format);\n }\n });\n };\n if (editor.formatter) {\n registerFormats(result.customFormats);\n } else {\n editor.on('init', () => {\n registerFormats(result.customFormats);\n });\n }\n return result.formats;\n };\n const getStyleFormats = editor => getUserStyleFormats(editor).map(userFormats => {\n const registeredUserFormats = registerCustomFormats(editor, userFormats);\n return shouldMergeStyleFormats(editor) ? defaultStyleFormats.concat(registeredUserFormats) : registeredUserFormats;\n }).getOr(defaultStyleFormats);\n\n const isSeparator$1 = format => {\n const keys$1 = keys(format);\n return keys$1.length === 1 && contains$2(keys$1, 'title');\n };\n const processBasic = (item, isSelectedFor, getPreviewFor) => ({\n ...item,\n type: 'formatter',\n isSelected: isSelectedFor(item.format),\n getStylePreview: getPreviewFor(item.format)\n });\n const register$a = (editor, formats, isSelectedFor, getPreviewFor) => {\n const enrichSupported = item => processBasic(item, isSelectedFor, getPreviewFor);\n const enrichMenu = item => {\n const newItems = doEnrich(item.items);\n return {\n ...item,\n type: 'submenu',\n getStyleItems: constant$1(newItems)\n };\n };\n const enrichCustom = item => {\n const formatName = isString(item.name) ? item.name : generate$6(item.title);\n const formatNameWithPrefix = `custom-${ formatName }`;\n const newItem = {\n ...item,\n type: 'formatter',\n format: formatNameWithPrefix,\n isSelected: isSelectedFor(formatNameWithPrefix),\n getStylePreview: getPreviewFor(formatNameWithPrefix)\n };\n editor.formatter.register(formatName, newItem);\n return newItem;\n };\n const doEnrich = items => map$2(items, item => {\n if (isNestedFormat(item)) {\n return enrichMenu(item);\n } else if (isFormatReference(item)) {\n return enrichSupported(item);\n } else if (isSeparator$1(item)) {\n return {\n ...item,\n type: 'separator'\n };\n } else {\n return enrichCustom(item);\n }\n });\n return doEnrich(formats);\n };\n\n const init$8 = editor => {\n const isSelectedFor = format => () => editor.formatter.match(format);\n const getPreviewFor = format => () => {\n const fmt = editor.formatter.get(format);\n return fmt !== undefined ? Optional.some({\n tag: fmt.length > 0 ? fmt[0].inline || fmt[0].block || 'div' : 'div',\n styles: editor.dom.parseStyle(editor.formatter.getCssText(format))\n }) : Optional.none();\n };\n const settingsFormats = Cell([]);\n const eventsFormats = Cell([]);\n const replaceSettings = Cell(false);\n editor.on('PreInit', _e => {\n const formats = getStyleFormats(editor);\n const enriched = register$a(editor, formats, isSelectedFor, getPreviewFor);\n settingsFormats.set(enriched);\n });\n editor.on('addStyleModifications', e => {\n const modifications = register$a(editor, e.items, isSelectedFor, getPreviewFor);\n eventsFormats.set(modifications);\n replaceSettings.set(e.replace);\n });\n const getData = () => {\n const fromSettings = replaceSettings.get() ? [] : settingsFormats.get();\n const fromEvents = eventsFormats.get();\n return fromSettings.concat(fromEvents);\n };\n return { getData };\n };\n\n const isElement = node => isNonNullable(node) && node.nodeType === 1;\n const trim = global$1.trim;\n const hasContentEditableState = value => {\n return node => {\n if (isElement(node)) {\n if (node.contentEditable === value) {\n return true;\n }\n if (node.getAttribute('data-mce-contenteditable') === value) {\n return true;\n }\n }\n return false;\n };\n };\n const isContentEditableTrue = hasContentEditableState('true');\n const isContentEditableFalse = hasContentEditableState('false');\n const create$1 = (type, title, url, level, attach) => ({\n type,\n title,\n url,\n level,\n attach\n });\n const isChildOfContentEditableTrue = node => {\n let tempNode = node;\n while (tempNode = tempNode.parentNode) {\n const value = tempNode.contentEditable;\n if (value && value !== 'inherit') {\n return isContentEditableTrue(tempNode);\n }\n }\n return false;\n };\n const select = (selector, root) => {\n return map$2(descendants(SugarElement.fromDom(root), selector), element => {\n return element.dom;\n });\n };\n const getElementText = elm => {\n return elm.innerText || elm.textContent;\n };\n const getOrGenerateId = elm => {\n return elm.id ? elm.id : generate$6('h');\n };\n const isAnchor = elm => {\n return elm && elm.nodeName === 'A' && (elm.id || elm.name) !== undefined;\n };\n const isValidAnchor = elm => {\n return isAnchor(elm) && isEditable(elm);\n };\n const isHeader = elm => {\n return elm && /^(H[1-6])$/.test(elm.nodeName);\n };\n const isEditable = elm => {\n return isChildOfContentEditableTrue(elm) && !isContentEditableFalse(elm);\n };\n const isValidHeader = elm => {\n return isHeader(elm) && isEditable(elm);\n };\n const getLevel = elm => {\n return isHeader(elm) ? parseInt(elm.nodeName.substr(1), 10) : 0;\n };\n const headerTarget = elm => {\n var _a;\n const headerId = getOrGenerateId(elm);\n const attach = () => {\n elm.id = headerId;\n };\n return create$1('header', (_a = getElementText(elm)) !== null && _a !== void 0 ? _a : '', '#' + headerId, getLevel(elm), attach);\n };\n const anchorTarget = elm => {\n const anchorId = elm.id || elm.name;\n const anchorText = getElementText(elm);\n return create$1('anchor', anchorText ? anchorText : '#' + anchorId, '#' + anchorId, 0, noop);\n };\n const getHeaderTargets = elms => {\n return map$2(filter$2(elms, isValidHeader), headerTarget);\n };\n const getAnchorTargets = elms => {\n return map$2(filter$2(elms, isValidAnchor), anchorTarget);\n };\n const getTargetElements = elm => {\n const elms = select('h1,h2,h3,h4,h5,h6,a:not([href])', elm);\n return elms;\n };\n const hasTitle = target => {\n return trim(target.title).length > 0;\n };\n const find = elm => {\n const elms = getTargetElements(elm);\n return filter$2(getHeaderTargets(elms).concat(getAnchorTargets(elms)), hasTitle);\n };\n const LinkTargets = { find };\n\n const STORAGE_KEY = 'tinymce-url-history';\n const HISTORY_LENGTH = 5;\n const isHttpUrl = url => isString(url) && /^https?/.test(url);\n const isArrayOfUrl = a => isArray(a) && a.length <= HISTORY_LENGTH && forall(a, isHttpUrl);\n const isRecordOfUrlArray = r => isObject(r) && find$4(r, value => !isArrayOfUrl(value)).isNone();\n const getAllHistory = () => {\n const unparsedHistory = global$4.getItem(STORAGE_KEY);\n if (unparsedHistory === null) {\n return {};\n }\n let history;\n try {\n history = JSON.parse(unparsedHistory);\n } catch (e) {\n if (e instanceof SyntaxError) {\n console.log('Local storage ' + STORAGE_KEY + ' was not valid JSON', e);\n return {};\n }\n throw e;\n }\n if (!isRecordOfUrlArray(history)) {\n console.log('Local storage ' + STORAGE_KEY + ' was not valid format', history);\n return {};\n }\n return history;\n };\n const setAllHistory = history => {\n if (!isRecordOfUrlArray(history)) {\n throw new Error('Bad format for history:\\n' + JSON.stringify(history));\n }\n global$4.setItem(STORAGE_KEY, JSON.stringify(history));\n };\n const getHistory = fileType => {\n const history = getAllHistory();\n return get$g(history, fileType).getOr([]);\n };\n const addToHistory = (url, fileType) => {\n if (!isHttpUrl(url)) {\n return;\n }\n const history = getAllHistory();\n const items = get$g(history, fileType).getOr([]);\n const itemsWithoutUrl = filter$2(items, item => item !== url);\n history[fileType] = [url].concat(itemsWithoutUrl).slice(0, HISTORY_LENGTH);\n setAllHistory(history);\n };\n\n const isTruthy = value => !!value;\n const makeMap = value => map$1(global$1.makeMap(value, /[, ]/), isTruthy);\n const getPicker = editor => Optional.from(getFilePickerCallback(editor));\n const getPickerTypes = editor => {\n const optFileTypes = Optional.from(getFilePickerTypes(editor)).filter(isTruthy).map(makeMap);\n return getPicker(editor).fold(never, _picker => optFileTypes.fold(always, types => keys(types).length > 0 ? types : false));\n };\n const getPickerSetting = (editor, filetype) => {\n const pickerTypes = getPickerTypes(editor);\n if (isBoolean(pickerTypes)) {\n return pickerTypes ? getPicker(editor) : Optional.none();\n } else {\n return pickerTypes[filetype] ? getPicker(editor) : Optional.none();\n }\n };\n const getUrlPicker = (editor, filetype) => getPickerSetting(editor, filetype).map(picker => entry => Future.nu(completer => {\n const handler = (value, meta) => {\n if (!isString(value)) {\n throw new Error('Expected value to be string');\n }\n if (meta !== undefined && !isObject(meta)) {\n throw new Error('Expected meta to be a object');\n }\n const r = {\n value,\n meta\n };\n completer(r);\n };\n const meta = {\n filetype,\n fieldname: entry.fieldname,\n ...Optional.from(entry.meta).getOr({})\n };\n picker.call(editor, handler, entry.value, meta);\n }));\n const getTextSetting = value => Optional.from(value).filter(isString).getOrUndefined();\n const getLinkInformation = editor => {\n if (!useTypeaheadUrls(editor)) {\n return Optional.none();\n }\n return Optional.some({\n targets: LinkTargets.find(editor.getBody()),\n anchorTop: getTextSetting(getAnchorTop(editor)),\n anchorBottom: getTextSetting(getAnchorBottom(editor))\n });\n };\n const getValidationHandler = editor => Optional.from(getFilePickerValidatorHandler(editor));\n const UrlInputBackstage = editor => ({\n getHistory,\n addToHistory,\n getLinkInformation: () => getLinkInformation(editor),\n getValidationHandler: () => getValidationHandler(editor),\n getUrlPicker: filetype => getUrlPicker(editor, filetype)\n });\n\n const init$7 = (lazySinks, editor, lazyAnchorbar) => {\n const contextMenuState = Cell(false);\n const toolbar = HeaderBackstage(editor);\n const providers = {\n icons: () => editor.ui.registry.getAll().icons,\n menuItems: () => editor.ui.registry.getAll().menuItems,\n translate: global$8.translate,\n isDisabled: () => editor.mode.isReadOnly() || !editor.ui.isEnabled(),\n getOption: editor.options.get\n };\n const urlinput = UrlInputBackstage(editor);\n const styles = init$8(editor);\n const colorinput = ColorInputBackstage(editor);\n const dialogSettings = DialogBackstage(editor);\n const isContextMenuOpen = () => contextMenuState.get();\n const setContextMenuState = state => contextMenuState.set(state);\n const commonBackstage = {\n shared: {\n providers,\n anchors: getAnchors(editor, lazyAnchorbar, toolbar.isPositionedAtTop),\n header: toolbar\n },\n urlinput,\n styles,\n colorinput,\n dialog: dialogSettings,\n isContextMenuOpen,\n setContextMenuState\n };\n const popupBackstage = {\n ...commonBackstage,\n shared: {\n ...commonBackstage.shared,\n interpreter: s => interpretWithoutForm(s, {}, popupBackstage),\n getSink: lazySinks.popup\n }\n };\n const dialogBackstage = {\n ...commonBackstage,\n shared: {\n ...commonBackstage.shared,\n interpreter: s => interpretWithoutForm(s, {}, dialogBackstage),\n getSink: lazySinks.dialog\n }\n };\n return {\n popup: popupBackstage,\n dialog: dialogBackstage\n };\n };\n\n const setup$b = (editor, mothership, uiMotherships) => {\n const broadcastEvent = (name, evt) => {\n each$1([\n mothership,\n ...uiMotherships\n ], m => {\n m.broadcastEvent(name, evt);\n });\n };\n const broadcastOn = (channel, message) => {\n each$1([\n mothership,\n ...uiMotherships\n ], m => {\n m.broadcastOn([channel], message);\n });\n };\n const fireDismissPopups = evt => broadcastOn(dismissPopups(), { target: evt.target });\n const doc = getDocument();\n const onTouchstart = bind(doc, 'touchstart', fireDismissPopups);\n const onTouchmove = bind(doc, 'touchmove', evt => broadcastEvent(documentTouchmove(), evt));\n const onTouchend = bind(doc, 'touchend', evt => broadcastEvent(documentTouchend(), evt));\n const onMousedown = bind(doc, 'mousedown', fireDismissPopups);\n const onMouseup = bind(doc, 'mouseup', evt => {\n if (evt.raw.button === 0) {\n broadcastOn(mouseReleased(), { target: evt.target });\n }\n });\n const onContentClick = raw => broadcastOn(dismissPopups(), { target: SugarElement.fromDom(raw.target) });\n const onContentMouseup = raw => {\n if (raw.button === 0) {\n broadcastOn(mouseReleased(), { target: SugarElement.fromDom(raw.target) });\n }\n };\n const onContentMousedown = () => {\n each$1(editor.editorManager.get(), loopEditor => {\n if (editor !== loopEditor) {\n loopEditor.dispatch('DismissPopups', { relatedTarget: editor });\n }\n });\n };\n const onWindowScroll = evt => broadcastEvent(windowScroll(), fromRawEvent(evt));\n const onWindowResize = evt => {\n broadcastOn(repositionPopups(), {});\n broadcastEvent(windowResize(), fromRawEvent(evt));\n };\n const onEditorResize = () => broadcastOn(repositionPopups(), {});\n const onEditorProgress = evt => {\n if (evt.state) {\n broadcastOn(dismissPopups(), { target: SugarElement.fromDom(editor.getContainer()) });\n }\n };\n const onDismissPopups = event => {\n broadcastOn(dismissPopups(), { target: SugarElement.fromDom(event.relatedTarget.getContainer()) });\n };\n editor.on('PostRender', () => {\n editor.on('click', onContentClick);\n editor.on('tap', onContentClick);\n editor.on('mouseup', onContentMouseup);\n editor.on('mousedown', onContentMousedown);\n editor.on('ScrollWindow', onWindowScroll);\n editor.on('ResizeWindow', onWindowResize);\n editor.on('ResizeEditor', onEditorResize);\n editor.on('AfterProgressState', onEditorProgress);\n editor.on('DismissPopups', onDismissPopups);\n });\n editor.on('remove', () => {\n editor.off('click', onContentClick);\n editor.off('tap', onContentClick);\n editor.off('mouseup', onContentMouseup);\n editor.off('mousedown', onContentMousedown);\n editor.off('ScrollWindow', onWindowScroll);\n editor.off('ResizeWindow', onWindowResize);\n editor.off('ResizeEditor', onEditorResize);\n editor.off('AfterProgressState', onEditorProgress);\n editor.off('DismissPopups', onDismissPopups);\n onMousedown.unbind();\n onTouchstart.unbind();\n onTouchmove.unbind();\n onTouchend.unbind();\n onMouseup.unbind();\n });\n editor.on('detach', () => {\n each$1([\n mothership,\n ...uiMotherships\n ], detachSystem);\n each$1([\n mothership,\n ...uiMotherships\n ], m => m.destroy());\n });\n };\n\n const parts$a = AlloyParts;\n const partType = PartType;\n\n const schema$f = constant$1([\n defaulted('shell', false),\n required$1('makeItem'),\n defaulted('setupItem', noop),\n SketchBehaviours.field('listBehaviours', [Replacing])\n ]);\n const customListDetail = () => ({ behaviours: derive$1([Replacing.config({})]) });\n const itemsPart = optional({\n name: 'items',\n overrides: customListDetail\n });\n const parts$9 = constant$1([itemsPart]);\n const name = constant$1('CustomList');\n\n const factory$f = (detail, components, _spec, _external) => {\n const setItems = (list, items) => {\n getListContainer(list).fold(() => {\n console.error('Custom List was defined to not be a shell, but no item container was specified in components');\n throw new Error('Custom List was defined to not be a shell, but no item container was specified in components');\n }, container => {\n const itemComps = Replacing.contents(container);\n const numListsRequired = items.length;\n const numListsToAdd = numListsRequired - itemComps.length;\n const itemsToAdd = numListsToAdd > 0 ? range$2(numListsToAdd, () => detail.makeItem()) : [];\n const itemsToRemove = itemComps.slice(numListsRequired);\n each$1(itemsToRemove, item => Replacing.remove(container, item));\n each$1(itemsToAdd, item => Replacing.append(container, item));\n const builtLists = Replacing.contents(container);\n each$1(builtLists, (item, i) => {\n detail.setupItem(list, item, items[i], i);\n });\n });\n };\n const extra = detail.shell ? {\n behaviours: [Replacing.config({})],\n components: []\n } : {\n behaviours: [],\n components\n };\n const getListContainer = component => detail.shell ? Optional.some(component) : getPart(component, detail, 'items');\n return {\n uid: detail.uid,\n dom: detail.dom,\n components: extra.components,\n behaviours: augment(detail.listBehaviours, extra.behaviours),\n apis: { setItems }\n };\n };\n const CustomList = composite({\n name: name(),\n configFields: schema$f(),\n partFields: parts$9(),\n factory: factory$f,\n apis: {\n setItems: (apis, list, items) => {\n apis.setItems(list, items);\n }\n }\n });\n\n const schema$e = constant$1([\n required$1('dom'),\n defaulted('shell', true),\n field('toolbarBehaviours', [Replacing])\n ]);\n const enhanceGroups = () => ({ behaviours: derive$1([Replacing.config({})]) });\n const parts$8 = constant$1([optional({\n name: 'groups',\n overrides: enhanceGroups\n })]);\n\n const factory$e = (detail, components, _spec, _externals) => {\n const setGroups = (toolbar, groups) => {\n getGroupContainer(toolbar).fold(() => {\n console.error('Toolbar was defined to not be a shell, but no groups container was specified in components');\n throw new Error('Toolbar was defined to not be a shell, but no groups container was specified in components');\n }, container => {\n Replacing.set(container, groups);\n });\n };\n const getGroupContainer = component => detail.shell ? Optional.some(component) : getPart(component, detail, 'groups');\n const extra = detail.shell ? {\n behaviours: [Replacing.config({})],\n components: []\n } : {\n behaviours: [],\n components\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components: extra.components,\n behaviours: augment(detail.toolbarBehaviours, extra.behaviours),\n apis: { setGroups },\n domModification: { attributes: { role: 'group' } }\n };\n };\n const Toolbar = composite({\n name: 'Toolbar',\n configFields: schema$e(),\n partFields: parts$8(),\n factory: factory$e,\n apis: {\n setGroups: (apis, toolbar, groups) => {\n apis.setGroups(toolbar, groups);\n }\n }\n });\n\n const setup$a = noop;\n const isDocked$2 = never;\n const getBehaviours$1 = constant$1([]);\n\n var StaticHeader = /*#__PURE__*/Object.freeze({\n __proto__: null,\n setup: setup$a,\n isDocked: isDocked$2,\n getBehaviours: getBehaviours$1\n });\n\n const getOffsetParent = element => {\n const isFixed = is$1(getRaw(element, 'position'), 'fixed');\n const offsetParent$1 = isFixed ? Optional.none() : offsetParent(element);\n return offsetParent$1.orThunk(() => {\n const marker = SugarElement.fromTag('span');\n return parent(element).bind(parent => {\n append$2(parent, marker);\n const offsetParent$1 = offsetParent(marker);\n remove$5(marker);\n return offsetParent$1;\n });\n });\n };\n const getOrigin = element => getOffsetParent(element).map(absolute$3).getOrThunk(() => SugarPosition(0, 0));\n\n const morphAdt = Adt.generate([\n { static: [] },\n { absolute: ['positionCss'] },\n { fixed: ['positionCss'] }\n ]);\n const appear = (component, contextualInfo) => {\n const elem = component.element;\n add$2(elem, contextualInfo.transitionClass);\n remove$2(elem, contextualInfo.fadeOutClass);\n add$2(elem, contextualInfo.fadeInClass);\n contextualInfo.onShow(component);\n };\n const disappear = (component, contextualInfo) => {\n const elem = component.element;\n add$2(elem, contextualInfo.transitionClass);\n remove$2(elem, contextualInfo.fadeInClass);\n add$2(elem, contextualInfo.fadeOutClass);\n contextualInfo.onHide(component);\n };\n const isPartiallyVisible = (box, viewport) => box.y < viewport.bottom && box.bottom > viewport.y;\n const isTopCompletelyVisible = (box, viewport) => box.y >= viewport.y;\n const isBottomCompletelyVisible = (box, viewport) => box.bottom <= viewport.bottom;\n const isVisibleForModes = (modes, box, viewport) => forall(modes, mode => {\n switch (mode) {\n case 'bottom':\n return isBottomCompletelyVisible(box, viewport);\n case 'top':\n return isTopCompletelyVisible(box, viewport);\n }\n });\n const getPrior = (elem, state) => state.getInitialPos().map(pos => bounds(pos.bounds.x, pos.bounds.y, get$c(elem), get$d(elem)));\n const storePrior = (elem, box, state) => {\n state.setInitialPos({\n style: getAllRaw(elem),\n position: get$e(elem, 'position') || 'static',\n bounds: box\n });\n };\n const revertToOriginal = (elem, box, state) => state.getInitialPos().bind(position => {\n state.clearInitialPos();\n switch (position.position) {\n case 'static':\n return Optional.some(morphAdt.static());\n case 'absolute':\n const offsetBox = getOffsetParent(elem).map(box$1).getOrThunk(() => box$1(body()));\n return Optional.some(morphAdt.absolute(NuPositionCss('absolute', get$g(position.style, 'left').map(_left => box.x - offsetBox.x), get$g(position.style, 'top').map(_top => box.y - offsetBox.y), get$g(position.style, 'right').map(_right => offsetBox.right - box.right), get$g(position.style, 'bottom').map(_bottom => offsetBox.bottom - box.bottom))));\n default:\n return Optional.none();\n }\n });\n const morphToOriginal = (elem, viewport, state) => getPrior(elem, state).filter(box => isVisibleForModes(state.getModes(), box, viewport)).bind(box => revertToOriginal(elem, box, state));\n const morphToFixed = (elem, viewport, state) => {\n const box = box$1(elem);\n if (!isVisibleForModes(state.getModes(), box, viewport)) {\n storePrior(elem, box, state);\n const winBox = win();\n const left = box.x - winBox.x;\n const top = viewport.y - winBox.y;\n const bottom = winBox.bottom - viewport.bottom;\n const isTop = box.y <= viewport.y;\n return Optional.some(morphAdt.fixed(NuPositionCss('fixed', Optional.some(left), isTop ? Optional.some(top) : Optional.none(), Optional.none(), !isTop ? Optional.some(bottom) : Optional.none())));\n } else {\n return Optional.none();\n }\n };\n const getMorph = (component, viewport, state) => {\n const elem = component.element;\n const isDocked = is$1(getRaw(elem, 'position'), 'fixed');\n return isDocked ? morphToOriginal(elem, viewport, state) : morphToFixed(elem, viewport, state);\n };\n const getMorphToOriginal = (component, state) => {\n const elem = component.element;\n return getPrior(elem, state).bind(box => revertToOriginal(elem, box, state));\n };\n\n const morphToStatic = (component, config, state) => {\n state.setDocked(false);\n each$1([\n 'left',\n 'right',\n 'top',\n 'bottom',\n 'position'\n ], prop => remove$6(component.element, prop));\n config.onUndocked(component);\n };\n const morphToCoord = (component, config, state, position) => {\n const isDocked = position.position === 'fixed';\n state.setDocked(isDocked);\n applyPositionCss(component.element, position);\n const method = isDocked ? config.onDocked : config.onUndocked;\n method(component);\n };\n const updateVisibility = (component, config, state, viewport, morphToDocked = false) => {\n config.contextual.each(contextInfo => {\n contextInfo.lazyContext(component).each(box => {\n const isVisible = isPartiallyVisible(box, viewport);\n if (isVisible !== state.isVisible()) {\n state.setVisible(isVisible);\n if (morphToDocked && !isVisible) {\n add$1(component.element, [contextInfo.fadeOutClass]);\n contextInfo.onHide(component);\n } else {\n const method = isVisible ? appear : disappear;\n method(component, contextInfo);\n }\n }\n });\n });\n };\n const refreshInternal = (component, config, state) => {\n const viewport = config.lazyViewport(component);\n const isDocked = state.isDocked();\n if (isDocked) {\n updateVisibility(component, config, state, viewport);\n }\n getMorph(component, viewport, state).each(morph => {\n morph.fold(() => morphToStatic(component, config, state), position => morphToCoord(component, config, state, position), position => {\n updateVisibility(component, config, state, viewport, true);\n morphToCoord(component, config, state, position);\n });\n });\n };\n const resetInternal = (component, config, state) => {\n const elem = component.element;\n state.setDocked(false);\n getMorphToOriginal(component, state).each(morph => {\n morph.fold(() => morphToStatic(component, config, state), position => morphToCoord(component, config, state, position), noop);\n });\n state.setVisible(true);\n config.contextual.each(contextInfo => {\n remove$1(elem, [\n contextInfo.fadeInClass,\n contextInfo.fadeOutClass,\n contextInfo.transitionClass\n ]);\n contextInfo.onShow(component);\n });\n refresh$4(component, config, state);\n };\n const refresh$4 = (component, config, state) => {\n if (component.getSystem().isConnected()) {\n refreshInternal(component, config, state);\n }\n };\n const reset = (component, config, state) => {\n if (state.isDocked()) {\n resetInternal(component, config, state);\n }\n };\n const isDocked$1 = (component, config, state) => state.isDocked();\n const setModes = (component, config, state, modes) => state.setModes(modes);\n const getModes = (component, config, state) => state.getModes();\n\n var DockingApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n refresh: refresh$4,\n reset: reset,\n isDocked: isDocked$1,\n getModes: getModes,\n setModes: setModes\n });\n\n const events$5 = (dockInfo, dockState) => derive$2([\n runOnSource(transitionend(), (component, simulatedEvent) => {\n dockInfo.contextual.each(contextInfo => {\n if (has(component.element, contextInfo.transitionClass)) {\n remove$1(component.element, [\n contextInfo.transitionClass,\n contextInfo.fadeInClass\n ]);\n const notify = dockState.isVisible() ? contextInfo.onShown : contextInfo.onHidden;\n notify(component);\n }\n simulatedEvent.stop();\n });\n }),\n run$1(windowScroll(), (component, _) => {\n refresh$4(component, dockInfo, dockState);\n }),\n run$1(windowResize(), (component, _) => {\n reset(component, dockInfo, dockState);\n })\n ]);\n\n var ActiveDocking = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$5\n });\n\n var DockingSchema = [\n optionObjOf('contextual', [\n requiredString('fadeInClass'),\n requiredString('fadeOutClass'),\n requiredString('transitionClass'),\n requiredFunction('lazyContext'),\n onHandler('onShow'),\n onHandler('onShown'),\n onHandler('onHide'),\n onHandler('onHidden')\n ]),\n defaultedFunction('lazyViewport', win),\n defaultedArrayOf('modes', [\n 'top',\n 'bottom'\n ], string),\n onHandler('onDocked'),\n onHandler('onUndocked')\n ];\n\n const init$6 = spec => {\n const docked = Cell(false);\n const visible = Cell(true);\n const initialBounds = value$2();\n const modes = Cell(spec.modes);\n const readState = () => `docked: ${ docked.get() }, visible: ${ visible.get() }, modes: ${ modes.get().join(',') }`;\n return nu$8({\n isDocked: docked.get,\n setDocked: docked.set,\n getInitialPos: initialBounds.get,\n setInitialPos: initialBounds.set,\n clearInitialPos: initialBounds.clear,\n isVisible: visible.get,\n setVisible: visible.set,\n getModes: modes.get,\n setModes: modes.set,\n readState\n });\n };\n\n var DockingState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init$6\n });\n\n const Docking = create$4({\n fields: DockingSchema,\n name: 'docking',\n active: ActiveDocking,\n apis: DockingApis,\n state: DockingState\n });\n\n const toolbarHeightChange = constant$1(generate$6('toolbar-height-change'));\n\n const visibility = {\n fadeInClass: 'tox-editor-dock-fadein',\n fadeOutClass: 'tox-editor-dock-fadeout',\n transitionClass: 'tox-editor-dock-transition'\n };\n const editorStickyOnClass = 'tox-tinymce--toolbar-sticky-on';\n const editorStickyOffClass = 'tox-tinymce--toolbar-sticky-off';\n const scrollFromBehindHeader = (e, containerHeader) => {\n const doc = owner$4(containerHeader);\n const win = defaultView(containerHeader);\n const viewHeight = win.dom.innerHeight;\n const scrollPos = get$b(doc);\n const markerElement = SugarElement.fromDom(e.elm);\n const markerPos = absolute$2(markerElement);\n const markerHeight = get$d(markerElement);\n const markerTop = markerPos.y;\n const markerBottom = markerTop + markerHeight;\n const editorHeaderPos = absolute$3(containerHeader);\n const editorHeaderHeight = get$d(containerHeader);\n const editorHeaderTop = editorHeaderPos.top;\n const editorHeaderBottom = editorHeaderTop + editorHeaderHeight;\n const editorHeaderDockedAtTop = Math.abs(editorHeaderTop - scrollPos.top) < 2;\n const editorHeaderDockedAtBottom = Math.abs(editorHeaderBottom - (scrollPos.top + viewHeight)) < 2;\n if (editorHeaderDockedAtTop && markerTop < editorHeaderBottom) {\n to(scrollPos.left, markerTop - editorHeaderHeight, doc);\n } else if (editorHeaderDockedAtBottom && markerBottom > editorHeaderTop) {\n const y = markerTop - viewHeight + markerHeight + editorHeaderHeight;\n to(scrollPos.left, y, doc);\n }\n };\n const isDockedMode = (header, mode) => contains$2(Docking.getModes(header), mode);\n const updateIframeContentFlow = header => {\n const getOccupiedHeight = elm => getOuter$2(elm) + (parseInt(get$e(elm, 'margin-top'), 10) || 0) + (parseInt(get$e(elm, 'margin-bottom'), 10) || 0);\n const elm = header.element;\n parentElement(elm).each(parentElem => {\n const padding = 'padding-' + Docking.getModes(header)[0];\n if (Docking.isDocked(header)) {\n const parentWidth = get$c(parentElem);\n set$8(elm, 'width', parentWidth + 'px');\n set$8(parentElem, padding, getOccupiedHeight(elm) + 'px');\n } else {\n remove$6(elm, 'width');\n remove$6(parentElem, padding);\n }\n });\n };\n const updateSinkVisibility = (sinkElem, visible) => {\n if (visible) {\n remove$2(sinkElem, visibility.fadeOutClass);\n add$1(sinkElem, [\n visibility.transitionClass,\n visibility.fadeInClass\n ]);\n } else {\n remove$2(sinkElem, visibility.fadeInClass);\n add$1(sinkElem, [\n visibility.fadeOutClass,\n visibility.transitionClass\n ]);\n }\n };\n const updateEditorClasses = (editor, docked) => {\n const editorContainer = SugarElement.fromDom(editor.getContainer());\n if (docked) {\n add$2(editorContainer, editorStickyOnClass);\n remove$2(editorContainer, editorStickyOffClass);\n } else {\n add$2(editorContainer, editorStickyOffClass);\n remove$2(editorContainer, editorStickyOnClass);\n }\n };\n const restoreFocus = (headerElem, focusedElem) => {\n const ownerDoc = owner$4(focusedElem);\n active$1(ownerDoc).filter(activeElm => !eq(focusedElem, activeElm)).filter(activeElm => eq(activeElm, SugarElement.fromDom(ownerDoc.dom.body)) || contains(headerElem, activeElm)).each(() => focus$3(focusedElem));\n };\n const findFocusedElem = (rootElm, lazySink) => search(rootElm).orThunk(() => lazySink().toOptional().bind(sink => search(sink.element)));\n const setup$9 = (editor, sharedBackstage, lazyHeader) => {\n if (!editor.inline) {\n if (!sharedBackstage.header.isPositionedAtTop()) {\n editor.on('ResizeEditor', () => {\n lazyHeader().each(Docking.reset);\n });\n }\n editor.on('ResizeWindow ResizeEditor', () => {\n lazyHeader().each(updateIframeContentFlow);\n });\n editor.on('SkinLoaded', () => {\n lazyHeader().each(comp => {\n Docking.isDocked(comp) ? Docking.reset(comp) : Docking.refresh(comp);\n });\n });\n editor.on('FullscreenStateChanged', () => {\n lazyHeader().each(Docking.reset);\n });\n }\n editor.on('AfterScrollIntoView', e => {\n lazyHeader().each(header => {\n Docking.refresh(header);\n const headerElem = header.element;\n if (isVisible(headerElem)) {\n scrollFromBehindHeader(e, headerElem);\n }\n });\n });\n editor.on('PostRender', () => {\n updateEditorClasses(editor, false);\n });\n };\n const isDocked = lazyHeader => lazyHeader().map(Docking.isDocked).getOr(false);\n const getIframeBehaviours = () => [Receiving.config({ channels: { [toolbarHeightChange()]: { onReceive: updateIframeContentFlow } } })];\n const getBehaviours = (editor, sharedBackstage) => {\n const focusedElm = value$2();\n const lazySink = sharedBackstage.getSink;\n const runOnSinkElement = f => {\n lazySink().each(sink => f(sink.element));\n };\n const onDockingSwitch = comp => {\n if (!editor.inline) {\n updateIframeContentFlow(comp);\n }\n updateEditorClasses(editor, Docking.isDocked(comp));\n comp.getSystem().broadcastOn([repositionPopups()], {});\n lazySink().each(sink => sink.getSystem().broadcastOn([repositionPopups()], {}));\n };\n const additionalBehaviours = editor.inline ? [] : getIframeBehaviours();\n return [\n Focusing.config({}),\n Docking.config({\n contextual: {\n lazyContext: comp => {\n const headerHeight = getOuter$2(comp.element);\n const container = editor.inline ? editor.getContentAreaContainer() : editor.getContainer();\n const box = box$1(SugarElement.fromDom(container));\n const boxHeight = box.height - headerHeight;\n const topBound = box.y + (isDockedMode(comp, 'top') ? 0 : headerHeight);\n return Optional.some(bounds(box.x, topBound, box.width, boxHeight));\n },\n onShow: () => {\n runOnSinkElement(elem => updateSinkVisibility(elem, true));\n },\n onShown: comp => {\n runOnSinkElement(elem => remove$1(elem, [\n visibility.transitionClass,\n visibility.fadeInClass\n ]));\n focusedElm.get().each(elem => {\n restoreFocus(comp.element, elem);\n focusedElm.clear();\n });\n },\n onHide: comp => {\n findFocusedElem(comp.element, lazySink).fold(focusedElm.clear, focusedElm.set);\n runOnSinkElement(elem => updateSinkVisibility(elem, false));\n },\n onHidden: () => {\n runOnSinkElement(elem => remove$1(elem, [visibility.transitionClass]));\n },\n ...visibility\n },\n lazyViewport: comp => {\n const win$1 = win();\n const offset = getStickyToolbarOffset(editor);\n const top = win$1.y + (isDockedMode(comp, 'top') ? offset : 0);\n const height = win$1.height - (isDockedMode(comp, 'bottom') ? offset : 0);\n return bounds(win$1.x, top, win$1.width, height);\n },\n modes: [sharedBackstage.header.getDockingMode()],\n onDocked: onDockingSwitch,\n onUndocked: onDockingSwitch\n }),\n ...additionalBehaviours\n ];\n };\n\n var StickyHeader = /*#__PURE__*/Object.freeze({\n __proto__: null,\n setup: setup$9,\n isDocked: isDocked,\n getBehaviours: getBehaviours\n });\n\n const renderHeader = spec => {\n const editor = spec.editor;\n const getBehaviours$2 = spec.sticky ? getBehaviours : getBehaviours$1;\n return {\n uid: spec.uid,\n dom: spec.dom,\n components: spec.components,\n behaviours: derive$1(getBehaviours$2(editor, spec.sharedBackstage))\n };\n };\n\n const groupToolbarButtonSchema = objOf([\n type,\n requiredOf('items', oneOf([\n arrOfObj([\n name$1,\n requiredArrayOf('items', string)\n ]),\n string\n ]))\n ].concat(baseToolbarButtonFields));\n const createGroupToolbarButton = spec => asRaw('GroupToolbarButton', groupToolbarButtonSchema, spec);\n\n const baseMenuButtonFields = [\n optionString('text'),\n optionString('tooltip'),\n optionString('icon'),\n defaultedOf('search', false, oneOf([\n boolean,\n objOf([optionString('placeholder')])\n ], x => {\n if (isBoolean(x)) {\n return x ? Optional.some({ placeholder: Optional.none() }) : Optional.none();\n } else {\n return Optional.some(x);\n }\n })),\n requiredFunction('fetch'),\n defaultedFunction('onSetup', () => noop)\n ];\n\n const MenuButtonSchema = objOf([\n type,\n ...baseMenuButtonFields\n ]);\n const createMenuButton = spec => asRaw('menubutton', MenuButtonSchema, spec);\n\n const splitButtonSchema = objOf([\n type,\n optionalTooltip,\n optionalIcon,\n optionalText,\n optionalSelect,\n fetch$1,\n onSetup,\n defaultedStringEnum('presets', 'normal', [\n 'normal',\n 'color',\n 'listpreview'\n ]),\n defaultedColumns(1),\n onAction,\n onItemAction\n ]);\n const createSplitButton = spec => asRaw('SplitButton', splitButtonSchema, spec);\n\n const factory$d = (detail, spec) => {\n const setMenus = (comp, menus) => {\n const newMenus = map$2(menus, m => {\n const buttonSpec = {\n type: 'menubutton',\n text: m.text,\n fetch: callback => {\n callback(m.getItems());\n }\n };\n const internal = createMenuButton(buttonSpec).mapError(errInfo => formatError(errInfo)).getOrDie();\n return renderMenuButton(internal, 'tox-mbtn', spec.backstage, Optional.some('menuitem'));\n });\n Replacing.set(comp, newMenus);\n };\n const apis = {\n focus: Keying.focusIn,\n setMenus\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components: [],\n behaviours: derive$1([\n Replacing.config({}),\n config('menubar-events', [\n runOnAttached(component => {\n detail.onSetup(component);\n }),\n run$1(mouseover(), (comp, se) => {\n descendant(comp.element, '.' + 'tox-mbtn--active').each(activeButton => {\n closest$1(se.event.target, '.' + 'tox-mbtn').each(hoveredButton => {\n if (!eq(activeButton, hoveredButton)) {\n comp.getSystem().getByDom(activeButton).each(activeComp => {\n comp.getSystem().getByDom(hoveredButton).each(hoveredComp => {\n Dropdown.expand(hoveredComp);\n Dropdown.close(activeComp);\n Focusing.focus(hoveredComp);\n });\n });\n }\n });\n });\n }),\n run$1(focusShifted(), (comp, se) => {\n se.event.prevFocus.bind(prev => comp.getSystem().getByDom(prev).toOptional()).each(prev => {\n se.event.newFocus.bind(nu => comp.getSystem().getByDom(nu).toOptional()).each(nu => {\n if (Dropdown.isOpen(prev)) {\n Dropdown.expand(nu);\n Dropdown.close(prev);\n }\n });\n });\n })\n ]),\n Keying.config({\n mode: 'flow',\n selector: '.' + 'tox-mbtn',\n onEscape: comp => {\n detail.onEscape(comp);\n return Optional.some(true);\n }\n }),\n Tabstopping.config({})\n ]),\n apis,\n domModification: { attributes: { role: 'menubar' } }\n };\n };\n var SilverMenubar = single({\n factory: factory$d,\n name: 'silver.Menubar',\n configFields: [\n required$1('dom'),\n required$1('uid'),\n required$1('onEscape'),\n required$1('backstage'),\n defaulted('onSetup', noop)\n ],\n apis: {\n focus: (apis, comp) => {\n apis.focus(comp);\n },\n setMenus: (apis, comp, menus) => {\n apis.setMenus(comp, menus);\n }\n }\n });\n\n const promotionMessage = '\\u26A1\\ufe0fUpgrade';\n const promotionLink = 'https://www.tiny.cloud/tinymce-self-hosted-premium-features/?utm_source=TinyMCE&utm_medium=SPAP&utm_campaign=SPAP&utm_id=editorreferral';\n const renderPromotion = spec => {\n return {\n uid: spec.uid,\n dom: spec.dom,\n components: [{\n dom: {\n tag: 'a',\n attributes: {\n 'href': promotionLink,\n 'rel': 'noopener',\n 'target': '_blank',\n 'aria-hidden': 'true'\n },\n classes: ['tox-promotion-link'],\n innerHtml: promotionMessage\n }\n }]\n };\n };\n\n const getAnimationRoot = (component, slideConfig) => slideConfig.getAnimationRoot.fold(() => component.element, get => get(component));\n\n const getDimensionProperty = slideConfig => slideConfig.dimension.property;\n const getDimension = (slideConfig, elem) => slideConfig.dimension.getDimension(elem);\n const disableTransitions = (component, slideConfig) => {\n const root = getAnimationRoot(component, slideConfig);\n remove$1(root, [\n slideConfig.shrinkingClass,\n slideConfig.growingClass\n ]);\n };\n const setShrunk = (component, slideConfig) => {\n remove$2(component.element, slideConfig.openClass);\n add$2(component.element, slideConfig.closedClass);\n set$8(component.element, getDimensionProperty(slideConfig), '0px');\n reflow(component.element);\n };\n const setGrown = (component, slideConfig) => {\n remove$2(component.element, slideConfig.closedClass);\n add$2(component.element, slideConfig.openClass);\n remove$6(component.element, getDimensionProperty(slideConfig));\n };\n const doImmediateShrink = (component, slideConfig, slideState, _calculatedSize) => {\n slideState.setCollapsed();\n set$8(component.element, getDimensionProperty(slideConfig), getDimension(slideConfig, component.element));\n disableTransitions(component, slideConfig);\n setShrunk(component, slideConfig);\n slideConfig.onStartShrink(component);\n slideConfig.onShrunk(component);\n };\n const doStartShrink = (component, slideConfig, slideState, calculatedSize) => {\n const size = calculatedSize.getOrThunk(() => getDimension(slideConfig, component.element));\n slideState.setCollapsed();\n set$8(component.element, getDimensionProperty(slideConfig), size);\n reflow(component.element);\n const root = getAnimationRoot(component, slideConfig);\n remove$2(root, slideConfig.growingClass);\n add$2(root, slideConfig.shrinkingClass);\n setShrunk(component, slideConfig);\n slideConfig.onStartShrink(component);\n };\n const doStartSmartShrink = (component, slideConfig, slideState) => {\n const size = getDimension(slideConfig, component.element);\n const shrinker = size === '0px' ? doImmediateShrink : doStartShrink;\n shrinker(component, slideConfig, slideState, Optional.some(size));\n };\n const doStartGrow = (component, slideConfig, slideState) => {\n const root = getAnimationRoot(component, slideConfig);\n const wasShrinking = has(root, slideConfig.shrinkingClass);\n const beforeSize = getDimension(slideConfig, component.element);\n setGrown(component, slideConfig);\n const fullSize = getDimension(slideConfig, component.element);\n const startPartialGrow = () => {\n set$8(component.element, getDimensionProperty(slideConfig), beforeSize);\n reflow(component.element);\n };\n const startCompleteGrow = () => {\n setShrunk(component, slideConfig);\n };\n const setStartSize = wasShrinking ? startPartialGrow : startCompleteGrow;\n setStartSize();\n remove$2(root, slideConfig.shrinkingClass);\n add$2(root, slideConfig.growingClass);\n setGrown(component, slideConfig);\n set$8(component.element, getDimensionProperty(slideConfig), fullSize);\n slideState.setExpanded();\n slideConfig.onStartGrow(component);\n };\n const refresh$3 = (component, slideConfig, slideState) => {\n if (slideState.isExpanded()) {\n remove$6(component.element, getDimensionProperty(slideConfig));\n const fullSize = getDimension(slideConfig, component.element);\n set$8(component.element, getDimensionProperty(slideConfig), fullSize);\n }\n };\n const grow = (component, slideConfig, slideState) => {\n if (!slideState.isExpanded()) {\n doStartGrow(component, slideConfig, slideState);\n }\n };\n const shrink = (component, slideConfig, slideState) => {\n if (slideState.isExpanded()) {\n doStartSmartShrink(component, slideConfig, slideState);\n }\n };\n const immediateShrink = (component, slideConfig, slideState) => {\n if (slideState.isExpanded()) {\n doImmediateShrink(component, slideConfig, slideState);\n }\n };\n const hasGrown = (component, slideConfig, slideState) => slideState.isExpanded();\n const hasShrunk = (component, slideConfig, slideState) => slideState.isCollapsed();\n const isGrowing = (component, slideConfig, _slideState) => {\n const root = getAnimationRoot(component, slideConfig);\n return has(root, slideConfig.growingClass) === true;\n };\n const isShrinking = (component, slideConfig, _slideState) => {\n const root = getAnimationRoot(component, slideConfig);\n return has(root, slideConfig.shrinkingClass) === true;\n };\n const isTransitioning = (component, slideConfig, slideState) => isGrowing(component, slideConfig) || isShrinking(component, slideConfig);\n const toggleGrow = (component, slideConfig, slideState) => {\n const f = slideState.isExpanded() ? doStartSmartShrink : doStartGrow;\n f(component, slideConfig, slideState);\n };\n const immediateGrow = (component, slideConfig, slideState) => {\n if (!slideState.isExpanded()) {\n setGrown(component, slideConfig);\n set$8(component.element, getDimensionProperty(slideConfig), getDimension(slideConfig, component.element));\n disableTransitions(component, slideConfig);\n slideState.setExpanded();\n slideConfig.onStartGrow(component);\n slideConfig.onGrown(component);\n }\n };\n\n var SlidingApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n refresh: refresh$3,\n grow: grow,\n shrink: shrink,\n immediateShrink: immediateShrink,\n hasGrown: hasGrown,\n hasShrunk: hasShrunk,\n isGrowing: isGrowing,\n isShrinking: isShrinking,\n isTransitioning: isTransitioning,\n toggleGrow: toggleGrow,\n disableTransitions: disableTransitions,\n immediateGrow: immediateGrow\n });\n\n const exhibit = (base, slideConfig, _slideState) => {\n const expanded = slideConfig.expanded;\n return expanded ? nu$7({\n classes: [slideConfig.openClass],\n styles: {}\n }) : nu$7({\n classes: [slideConfig.closedClass],\n styles: wrap$1(slideConfig.dimension.property, '0px')\n });\n };\n const events$4 = (slideConfig, slideState) => derive$2([runOnSource(transitionend(), (component, simulatedEvent) => {\n const raw = simulatedEvent.event.raw;\n if (raw.propertyName === slideConfig.dimension.property) {\n disableTransitions(component, slideConfig);\n if (slideState.isExpanded()) {\n remove$6(component.element, slideConfig.dimension.property);\n }\n const notify = slideState.isExpanded() ? slideConfig.onGrown : slideConfig.onShrunk;\n notify(component);\n }\n })]);\n\n var ActiveSliding = /*#__PURE__*/Object.freeze({\n __proto__: null,\n exhibit: exhibit,\n events: events$4\n });\n\n var SlidingSchema = [\n required$1('closedClass'),\n required$1('openClass'),\n required$1('shrinkingClass'),\n required$1('growingClass'),\n option$3('getAnimationRoot'),\n onHandler('onShrunk'),\n onHandler('onStartShrink'),\n onHandler('onGrown'),\n onHandler('onStartGrow'),\n defaulted('expanded', false),\n requiredOf('dimension', choose$1('property', {\n width: [\n output$1('property', 'width'),\n output$1('getDimension', elem => get$c(elem) + 'px')\n ],\n height: [\n output$1('property', 'height'),\n output$1('getDimension', elem => get$d(elem) + 'px')\n ]\n }))\n ];\n\n const init$5 = spec => {\n const state = Cell(spec.expanded);\n const readState = () => 'expanded: ' + state.get();\n return nu$8({\n isExpanded: () => state.get() === true,\n isCollapsed: () => state.get() === false,\n setCollapsed: curry(state.set, false),\n setExpanded: curry(state.set, true),\n readState\n });\n };\n\n var SlidingState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init$5\n });\n\n const Sliding = create$4({\n fields: SlidingSchema,\n name: 'sliding',\n active: ActiveSliding,\n apis: SlidingApis,\n state: SlidingState\n });\n\n const owner = 'container';\n const schema$d = [field('slotBehaviours', [])];\n const getPartName = name => '';\n const sketch = sSpec => {\n const parts = (() => {\n const record = [];\n const slot = (name, config) => {\n record.push(name);\n return generateOne$1(owner, getPartName(name), config);\n };\n return {\n slot,\n record: constant$1(record)\n };\n })();\n const spec = sSpec(parts);\n const partNames = parts.record();\n const fieldParts = map$2(partNames, n => required({\n name: n,\n pname: getPartName(n)\n }));\n return composite$1(owner, schema$d, fieldParts, make$1, spec);\n };\n const make$1 = (detail, components) => {\n const getSlotNames = _ => getAllPartNames(detail);\n const getSlot = (container, key) => getPart(container, detail, key);\n const onSlot = (f, def) => (container, key) => getPart(container, detail, key).map(slot => f(slot, key)).getOr(def);\n const onSlots = f => (container, keys) => {\n each$1(keys, key => f(container, key));\n };\n const doShowing = (comp, _key) => get$f(comp.element, 'aria-hidden') !== 'true';\n const doShow = (comp, key) => {\n if (!doShowing(comp)) {\n const element = comp.element;\n remove$6(element, 'display');\n remove$7(element, 'aria-hidden');\n emitWith(comp, slotVisibility(), {\n name: key,\n visible: true\n });\n }\n };\n const doHide = (comp, key) => {\n if (doShowing(comp)) {\n const element = comp.element;\n set$8(element, 'display', 'none');\n set$9(element, 'aria-hidden', 'true');\n emitWith(comp, slotVisibility(), {\n name: key,\n visible: false\n });\n }\n };\n const isShowing = onSlot(doShowing, false);\n const hideSlot = onSlot(doHide);\n const hideSlots = onSlots(hideSlot);\n const hideAllSlots = container => hideSlots(container, getSlotNames());\n const showSlot = onSlot(doShow);\n const apis = {\n getSlotNames,\n getSlot,\n isShowing,\n hideSlot,\n hideAllSlots,\n showSlot\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: get$3(detail.slotBehaviours),\n apis\n };\n };\n const slotApis = map$1({\n getSlotNames: (apis, c) => apis.getSlotNames(c),\n getSlot: (apis, c, key) => apis.getSlot(c, key),\n isShowing: (apis, c, key) => apis.isShowing(c, key),\n hideSlot: (apis, c, key) => apis.hideSlot(c, key),\n hideAllSlots: (apis, c) => apis.hideAllSlots(c),\n showSlot: (apis, c, key) => apis.showSlot(c, key)\n }, value => makeApi(value));\n const SlotContainer = {\n ...slotApis,\n ...{ sketch }\n };\n\n const sidebarSchema = objOf([\n optionalIcon,\n optionalTooltip,\n defaultedFunction('onShow', noop),\n defaultedFunction('onHide', noop),\n onSetup\n ]);\n const createSidebar = spec => asRaw('sidebar', sidebarSchema, spec);\n\n const setup$8 = editor => {\n const {sidebars} = editor.ui.registry.getAll();\n each$1(keys(sidebars), name => {\n const spec = sidebars[name];\n const isActive = () => is$1(Optional.from(editor.queryCommandValue('ToggleSidebar')), name);\n editor.ui.registry.addToggleButton(name, {\n icon: spec.icon,\n tooltip: spec.tooltip,\n onAction: buttonApi => {\n editor.execCommand('ToggleSidebar', false, name);\n buttonApi.setActive(isActive());\n },\n onSetup: buttonApi => {\n buttonApi.setActive(isActive());\n const handleToggle = () => buttonApi.setActive(isActive());\n editor.on('ToggleSidebar', handleToggle);\n return () => {\n editor.off('ToggleSidebar', handleToggle);\n };\n }\n });\n });\n };\n const getApi = comp => ({ element: () => comp.element.dom });\n const makePanels = (parts, panelConfigs) => {\n const specs = map$2(keys(panelConfigs), name => {\n const spec = panelConfigs[name];\n const bridged = getOrDie(createSidebar(spec));\n return {\n name,\n getApi,\n onSetup: bridged.onSetup,\n onShow: bridged.onShow,\n onHide: bridged.onHide\n };\n });\n return map$2(specs, spec => {\n const editorOffCell = Cell(noop);\n return parts.slot(spec.name, {\n dom: {\n tag: 'div',\n classes: ['tox-sidebar__pane']\n },\n behaviours: SimpleBehaviours.unnamedEvents([\n onControlAttached(spec, editorOffCell),\n onControlDetached(spec, editorOffCell),\n run$1(slotVisibility(), (sidepanel, se) => {\n const data = se.event;\n const optSidePanelSpec = find$5(specs, config => config.name === data.name);\n optSidePanelSpec.each(sidePanelSpec => {\n const handler = data.visible ? sidePanelSpec.onShow : sidePanelSpec.onHide;\n handler(sidePanelSpec.getApi(sidepanel));\n });\n })\n ])\n });\n });\n };\n const makeSidebar = panelConfigs => SlotContainer.sketch(parts => ({\n dom: {\n tag: 'div',\n classes: ['tox-sidebar__pane-container']\n },\n components: makePanels(parts, panelConfigs),\n slotBehaviours: SimpleBehaviours.unnamedEvents([runOnAttached(slotContainer => SlotContainer.hideAllSlots(slotContainer))])\n }));\n const setSidebar = (sidebar, panelConfigs, showSidebar) => {\n const optSlider = Composing.getCurrent(sidebar);\n optSlider.each(slider => {\n Replacing.set(slider, [makeSidebar(panelConfigs)]);\n const configKey = showSidebar === null || showSidebar === void 0 ? void 0 : showSidebar.toLowerCase();\n if (isString(configKey) && has$2(panelConfigs, configKey)) {\n Composing.getCurrent(slider).each(slotContainer => {\n SlotContainer.showSlot(slotContainer, configKey);\n Sliding.immediateGrow(slider);\n remove$6(slider.element, 'width');\n });\n }\n });\n };\n const toggleSidebar = (sidebar, name) => {\n const optSlider = Composing.getCurrent(sidebar);\n optSlider.each(slider => {\n const optSlotContainer = Composing.getCurrent(slider);\n optSlotContainer.each(slotContainer => {\n if (Sliding.hasGrown(slider)) {\n if (SlotContainer.isShowing(slotContainer, name)) {\n Sliding.shrink(slider);\n } else {\n SlotContainer.hideAllSlots(slotContainer);\n SlotContainer.showSlot(slotContainer, name);\n }\n } else {\n SlotContainer.hideAllSlots(slotContainer);\n SlotContainer.showSlot(slotContainer, name);\n Sliding.grow(slider);\n }\n });\n });\n };\n const whichSidebar = sidebar => {\n const optSlider = Composing.getCurrent(sidebar);\n return optSlider.bind(slider => {\n const sidebarOpen = Sliding.isGrowing(slider) || Sliding.hasGrown(slider);\n if (sidebarOpen) {\n const optSlotContainer = Composing.getCurrent(slider);\n return optSlotContainer.bind(slotContainer => find$5(SlotContainer.getSlotNames(slotContainer), name => SlotContainer.isShowing(slotContainer, name)));\n } else {\n return Optional.none();\n }\n });\n };\n const fixSize = generate$6('FixSizeEvent');\n const autoSize = generate$6('AutoSizeEvent');\n const renderSidebar = spec => ({\n uid: spec.uid,\n dom: {\n tag: 'div',\n classes: ['tox-sidebar'],\n attributes: { role: 'complementary' }\n },\n components: [{\n dom: {\n tag: 'div',\n classes: ['tox-sidebar__slider']\n },\n components: [],\n behaviours: derive$1([\n Tabstopping.config({}),\n Focusing.config({}),\n Sliding.config({\n dimension: { property: 'width' },\n closedClass: 'tox-sidebar--sliding-closed',\n openClass: 'tox-sidebar--sliding-open',\n shrinkingClass: 'tox-sidebar--sliding-shrinking',\n growingClass: 'tox-sidebar--sliding-growing',\n onShrunk: slider => {\n const optSlotContainer = Composing.getCurrent(slider);\n optSlotContainer.each(SlotContainer.hideAllSlots);\n emit(slider, autoSize);\n },\n onGrown: slider => {\n emit(slider, autoSize);\n },\n onStartGrow: slider => {\n emitWith(slider, fixSize, { width: getRaw(slider.element, 'width').getOr('') });\n },\n onStartShrink: slider => {\n emitWith(slider, fixSize, { width: get$c(slider.element) + 'px' });\n }\n }),\n Replacing.config({}),\n Composing.config({\n find: comp => {\n const children = Replacing.contents(comp);\n return head(children);\n }\n })\n ])\n }],\n behaviours: derive$1([\n ComposingConfigs.childAt(0),\n config('sidebar-sliding-events', [\n run$1(fixSize, (comp, se) => {\n set$8(comp.element, 'width', se.event.width);\n }),\n run$1(autoSize, (comp, _se) => {\n remove$6(comp.element, 'width');\n })\n ])\n ])\n });\n\n const block = (component, config, state, getBusySpec) => {\n set$9(component.element, 'aria-busy', true);\n const root = config.getRoot(component).getOr(component);\n const blockerBehaviours = derive$1([\n Keying.config({\n mode: 'special',\n onTab: () => Optional.some(true),\n onShiftTab: () => Optional.some(true)\n }),\n Focusing.config({})\n ]);\n const blockSpec = getBusySpec(root, blockerBehaviours);\n const blocker = root.getSystem().build(blockSpec);\n Replacing.append(root, premade(blocker));\n if (blocker.hasConfigured(Keying) && config.focus) {\n Keying.focusIn(blocker);\n }\n if (!state.isBlocked()) {\n config.onBlock(component);\n }\n state.blockWith(() => Replacing.remove(root, blocker));\n };\n const unblock = (component, config, state) => {\n remove$7(component.element, 'aria-busy');\n if (state.isBlocked()) {\n config.onUnblock(component);\n }\n state.clear();\n };\n\n var BlockingApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n block: block,\n unblock: unblock\n });\n\n var BlockingSchema = [\n defaultedFunction('getRoot', Optional.none),\n defaultedBoolean('focus', true),\n onHandler('onBlock'),\n onHandler('onUnblock')\n ];\n\n const init$4 = () => {\n const blocker = destroyable();\n const blockWith = destroy => {\n blocker.set({ destroy });\n };\n return nu$8({\n readState: blocker.isSet,\n blockWith,\n clear: blocker.clear,\n isBlocked: blocker.isSet\n });\n };\n\n var BlockingState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init$4\n });\n\n const Blocking = create$4({\n fields: BlockingSchema,\n name: 'blocking',\n apis: BlockingApis,\n state: BlockingState\n });\n\n const getAttrs = elem => {\n const attributes = elem.dom.attributes !== undefined ? elem.dom.attributes : [];\n return foldl(attributes, (b, attr) => {\n if (attr.name === 'class') {\n return b;\n } else {\n return {\n ...b,\n [attr.name]: attr.value\n };\n }\n }, {});\n };\n const getClasses = elem => Array.prototype.slice.call(elem.dom.classList, 0);\n const fromHtml = html => {\n const elem = SugarElement.fromHtml(html);\n const children$1 = children(elem);\n const attrs = getAttrs(elem);\n const classes = getClasses(elem);\n const contents = children$1.length === 0 ? {} : { innerHtml: get$9(elem) };\n return {\n tag: name$3(elem),\n classes,\n attributes: attrs,\n ...contents\n };\n };\n\n const getBusySpec$1 = providerBackstage => (_root, _behaviours) => ({\n dom: {\n tag: 'div',\n attributes: {\n 'aria-label': providerBackstage.translate('Loading...'),\n 'tabindex': '0'\n },\n classes: ['tox-throbber__busy-spinner']\n },\n components: [{ dom: fromHtml('') }]\n });\n const focusBusyComponent = throbber => Composing.getCurrent(throbber).each(comp => focus$3(comp.element));\n const toggleEditorTabIndex = (editor, state) => {\n const tabIndexAttr = 'tabindex';\n const dataTabIndexAttr = `data-mce-${ tabIndexAttr }`;\n Optional.from(editor.iframeElement).map(SugarElement.fromDom).each(iframe => {\n if (state) {\n getOpt(iframe, tabIndexAttr).each(tabIndex => set$9(iframe, dataTabIndexAttr, tabIndex));\n set$9(iframe, tabIndexAttr, -1);\n } else {\n remove$7(iframe, tabIndexAttr);\n getOpt(iframe, dataTabIndexAttr).each(tabIndex => {\n set$9(iframe, tabIndexAttr, tabIndex);\n remove$7(iframe, dataTabIndexAttr);\n });\n }\n });\n };\n const toggleThrobber = (editor, comp, state, providerBackstage) => {\n const element = comp.element;\n toggleEditorTabIndex(editor, state);\n if (state) {\n Blocking.block(comp, getBusySpec$1(providerBackstage));\n remove$6(element, 'display');\n remove$7(element, 'aria-hidden');\n if (editor.hasFocus()) {\n focusBusyComponent(comp);\n }\n } else {\n const throbberFocus = Composing.getCurrent(comp).exists(busyComp => hasFocus(busyComp.element));\n Blocking.unblock(comp);\n set$8(element, 'display', 'none');\n set$9(element, 'aria-hidden', 'true');\n if (throbberFocus) {\n editor.focus();\n }\n }\n };\n const renderThrobber = spec => ({\n uid: spec.uid,\n dom: {\n tag: 'div',\n attributes: { 'aria-hidden': 'true' },\n classes: ['tox-throbber'],\n styles: { display: 'none' }\n },\n behaviours: derive$1([\n Replacing.config({}),\n Blocking.config({ focus: false }),\n Composing.config({ find: comp => head(comp.components()) })\n ]),\n components: []\n });\n const isFocusEvent = event => event.type === 'focusin';\n const isPasteBinTarget = event => {\n if (isFocusEvent(event)) {\n const node = event.composed ? head(event.composedPath()) : Optional.from(event.target);\n return node.map(SugarElement.fromDom).filter(isElement$1).exists(targetElm => has(targetElm, 'mce-pastebin'));\n } else {\n return false;\n }\n };\n const setup$7 = (editor, lazyThrobber, sharedBackstage) => {\n const throbberState = Cell(false);\n const timer = value$2();\n const stealFocus = e => {\n if (throbberState.get() && !isPasteBinTarget(e)) {\n e.preventDefault();\n focusBusyComponent(lazyThrobber());\n editor.editorManager.setActive(editor);\n }\n };\n if (!editor.inline) {\n editor.on('PreInit', () => {\n editor.dom.bind(editor.getWin(), 'focusin', stealFocus);\n editor.on('BeforeExecCommand', e => {\n if (e.command.toLowerCase() === 'mcefocus' && e.value !== true) {\n stealFocus(e);\n }\n });\n });\n }\n const toggle = state => {\n if (state !== throbberState.get()) {\n throbberState.set(state);\n toggleThrobber(editor, lazyThrobber(), state, sharedBackstage.providers);\n fireAfterProgressState(editor, state);\n }\n };\n editor.on('ProgressState', e => {\n timer.on(clearTimeout);\n if (isNumber(e.time)) {\n const timerId = global$9.setEditorTimeout(editor, () => toggle(e.state), e.time);\n timer.set(timerId);\n } else {\n toggle(e.state);\n timer.clear();\n }\n });\n };\n\n const generate$1 = (xs, f) => {\n const init = {\n len: 0,\n list: []\n };\n const r = foldl(xs, (b, a) => {\n const value = f(a, b.len);\n return value.fold(constant$1(b), v => ({\n len: v.finish,\n list: b.list.concat([v])\n }));\n }, init);\n return r.list;\n };\n\n const output = (within, extra, withinWidth) => ({\n within,\n extra,\n withinWidth\n });\n const apportion = (units, total, len) => {\n const parray = generate$1(units, (unit, current) => {\n const width = len(unit);\n return Optional.some({\n element: unit,\n start: current,\n finish: current + width,\n width\n });\n });\n const within = filter$2(parray, unit => unit.finish <= total);\n const withinWidth = foldr(within, (acc, el) => acc + el.width, 0);\n const extra = parray.slice(within.length);\n return {\n within,\n extra,\n withinWidth\n };\n };\n const toUnit = parray => map$2(parray, unit => unit.element);\n const fitLast = (within, extra, withinWidth) => {\n const fits = toUnit(within.concat(extra));\n return output(fits, [], withinWidth);\n };\n const overflow = (within, extra, overflower, withinWidth) => {\n const fits = toUnit(within).concat([overflower]);\n return output(fits, toUnit(extra), withinWidth);\n };\n const fitAll = (within, extra, withinWidth) => output(toUnit(within), [], withinWidth);\n const tryFit = (total, units, len) => {\n const divide = apportion(units, total, len);\n return divide.extra.length === 0 ? Optional.some(divide) : Optional.none();\n };\n const partition = (total, units, len, overflower) => {\n const divide = tryFit(total, units, len).getOrThunk(() => apportion(units, total - len(overflower), len));\n const within = divide.within;\n const extra = divide.extra;\n const withinWidth = divide.withinWidth;\n if (extra.length === 1 && extra[0].width <= len(overflower)) {\n return fitLast(within, extra, withinWidth);\n } else if (extra.length >= 1) {\n return overflow(within, extra, overflower, withinWidth);\n } else {\n return fitAll(within, extra, withinWidth);\n }\n };\n\n const setGroups$1 = (toolbar, storedGroups) => {\n const bGroups = map$2(storedGroups, g => premade(g));\n Toolbar.setGroups(toolbar, bGroups);\n };\n const findFocusedComp = comps => findMap(comps, comp => search(comp.element).bind(focusedElm => comp.getSystem().getByDom(focusedElm).toOptional()));\n const refresh$2 = (toolbar, detail, setOverflow) => {\n const builtGroups = detail.builtGroups.get();\n if (builtGroups.length === 0) {\n return;\n }\n const primary = getPartOrDie(toolbar, detail, 'primary');\n const overflowGroup = Coupling.getCoupled(toolbar, 'overflowGroup');\n set$8(primary.element, 'visibility', 'hidden');\n const groups = builtGroups.concat([overflowGroup]);\n const focusedComp = findFocusedComp(groups);\n setOverflow([]);\n setGroups$1(primary, groups);\n const availableWidth = get$c(primary.element);\n const overflows = partition(availableWidth, detail.builtGroups.get(), comp => get$c(comp.element), overflowGroup);\n if (overflows.extra.length === 0) {\n Replacing.remove(primary, overflowGroup);\n setOverflow([]);\n } else {\n setGroups$1(primary, overflows.within);\n setOverflow(overflows.extra);\n }\n remove$6(primary.element, 'visibility');\n reflow(primary.element);\n focusedComp.each(Focusing.focus);\n };\n\n const schema$c = constant$1([\n field('splitToolbarBehaviours', [Coupling]),\n customField('builtGroups', () => Cell([]))\n ]);\n\n const schema$b = constant$1([\n markers$1(['overflowToggledClass']),\n optionFunction('getOverflowBounds'),\n required$1('lazySink'),\n customField('overflowGroups', () => Cell([])),\n onHandler('onOpened'),\n onHandler('onClosed')\n ].concat(schema$c()));\n const parts$7 = constant$1([\n required({\n factory: Toolbar,\n schema: schema$e(),\n name: 'primary'\n }),\n external({\n schema: schema$e(),\n name: 'overflow'\n }),\n external({ name: 'overflow-button' }),\n external({ name: 'overflow-group' })\n ]);\n\n const expandable = constant$1((element, available) => {\n setMax(element, Math.floor(available));\n });\n\n const schema$a = constant$1([\n markers$1(['toggledClass']),\n required$1('lazySink'),\n requiredFunction('fetch'),\n optionFunction('getBounds'),\n optionObjOf('fireDismissalEventInstead', [defaulted('event', dismissRequested())]),\n schema$y(),\n onHandler('onToggled')\n ]);\n const parts$6 = constant$1([\n external({\n name: 'button',\n overrides: detail => ({\n dom: { attributes: { 'aria-haspopup': 'true' } },\n buttonBehaviours: derive$1([Toggling.config({\n toggleClass: detail.markers.toggledClass,\n aria: { mode: 'expanded' },\n toggleOnExecute: false,\n onToggled: detail.onToggled\n })])\n })\n }),\n external({\n factory: Toolbar,\n schema: schema$e(),\n name: 'toolbar',\n overrides: detail => {\n return {\n toolbarBehaviours: derive$1([Keying.config({\n mode: 'cyclic',\n onEscape: comp => {\n getPart(comp, detail, 'button').each(Focusing.focus);\n return Optional.none();\n }\n })])\n };\n }\n })\n ]);\n\n const toggle = (button, externals) => {\n const toolbarSandbox = Coupling.getCoupled(button, 'toolbarSandbox');\n if (Sandboxing.isOpen(toolbarSandbox)) {\n Sandboxing.close(toolbarSandbox);\n } else {\n Sandboxing.open(toolbarSandbox, externals.toolbar());\n }\n };\n const position = (button, toolbar, detail, layouts) => {\n const bounds = detail.getBounds.map(bounder => bounder());\n const sink = detail.lazySink(button).getOrDie();\n Positioning.positionWithinBounds(sink, toolbar, {\n anchor: {\n type: 'hotspot',\n hotspot: button,\n layouts,\n overrides: { maxWidthFunction: expandable() }\n }\n }, bounds);\n };\n const setGroups = (button, toolbar, detail, layouts, groups) => {\n Toolbar.setGroups(toolbar, groups);\n position(button, toolbar, detail, layouts);\n Toggling.on(button);\n };\n const makeSandbox = (button, spec, detail) => {\n const ariaControls = manager();\n const onOpen = (sandbox, toolbar) => {\n detail.fetch().get(groups => {\n setGroups(button, toolbar, detail, spec.layouts, groups);\n ariaControls.link(button.element);\n Keying.focusIn(toolbar);\n });\n };\n const onClose = () => {\n Toggling.off(button);\n Focusing.focus(button);\n ariaControls.unlink(button.element);\n };\n return {\n dom: {\n tag: 'div',\n attributes: { id: ariaControls.id }\n },\n behaviours: derive$1([\n Keying.config({\n mode: 'special',\n onEscape: comp => {\n Sandboxing.close(comp);\n return Optional.some(true);\n }\n }),\n Sandboxing.config({\n onOpen,\n onClose,\n isPartOf: (container, data, queryElem) => {\n return isPartOf$1(data, queryElem) || isPartOf$1(button, queryElem);\n },\n getAttachPoint: () => {\n return detail.lazySink(button).getOrDie();\n }\n }),\n Receiving.config({\n channels: {\n ...receivingChannel$1({\n isExtraPart: never,\n ...detail.fireDismissalEventInstead.map(fe => ({ fireEventInstead: { event: fe.event } })).getOr({})\n }),\n ...receivingChannel({\n doReposition: () => {\n Sandboxing.getState(Coupling.getCoupled(button, 'toolbarSandbox')).each(toolbar => {\n position(button, toolbar, detail, spec.layouts);\n });\n }\n })\n }\n })\n ])\n };\n };\n const factory$c = (detail, components, spec, externals) => ({\n ...Button.sketch({\n ...externals.button(),\n action: button => {\n toggle(button, externals);\n },\n buttonBehaviours: SketchBehaviours.augment({ dump: externals.button().buttonBehaviours }, [Coupling.config({\n others: {\n toolbarSandbox: button => {\n return makeSandbox(button, spec, detail);\n }\n }\n })])\n }),\n apis: {\n setGroups: (button, groups) => {\n Sandboxing.getState(Coupling.getCoupled(button, 'toolbarSandbox')).each(toolbar => {\n setGroups(button, toolbar, detail, spec.layouts, groups);\n });\n },\n reposition: button => {\n Sandboxing.getState(Coupling.getCoupled(button, 'toolbarSandbox')).each(toolbar => {\n position(button, toolbar, detail, spec.layouts);\n });\n },\n toggle: button => {\n toggle(button, externals);\n },\n getToolbar: button => {\n return Sandboxing.getState(Coupling.getCoupled(button, 'toolbarSandbox'));\n },\n isOpen: button => {\n return Sandboxing.isOpen(Coupling.getCoupled(button, 'toolbarSandbox'));\n }\n }\n });\n const FloatingToolbarButton = composite({\n name: 'FloatingToolbarButton',\n factory: factory$c,\n configFields: schema$a(),\n partFields: parts$6(),\n apis: {\n setGroups: (apis, button, groups) => {\n apis.setGroups(button, groups);\n },\n reposition: (apis, button) => {\n apis.reposition(button);\n },\n toggle: (apis, button) => {\n apis.toggle(button);\n },\n getToolbar: (apis, button) => apis.getToolbar(button),\n isOpen: (apis, button) => apis.isOpen(button)\n }\n });\n\n const schema$9 = constant$1([\n required$1('items'),\n markers$1(['itemSelector']),\n field('tgroupBehaviours', [Keying])\n ]);\n const parts$5 = constant$1([group({\n name: 'items',\n unit: 'item'\n })]);\n\n const factory$b = (detail, components, _spec, _externals) => ({\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: augment(detail.tgroupBehaviours, [Keying.config({\n mode: 'flow',\n selector: detail.markers.itemSelector\n })]),\n domModification: { attributes: { role: 'toolbar' } }\n });\n const ToolbarGroup = composite({\n name: 'ToolbarGroup',\n configFields: schema$9(),\n partFields: parts$5(),\n factory: factory$b\n });\n\n const buildGroups = comps => map$2(comps, g => premade(g));\n const refresh$1 = (toolbar, memFloatingToolbarButton, detail) => {\n refresh$2(toolbar, detail, overflowGroups => {\n detail.overflowGroups.set(overflowGroups);\n memFloatingToolbarButton.getOpt(toolbar).each(floatingToolbarButton => {\n FloatingToolbarButton.setGroups(floatingToolbarButton, buildGroups(overflowGroups));\n });\n });\n };\n const factory$a = (detail, components, spec, externals) => {\n const memFloatingToolbarButton = record(FloatingToolbarButton.sketch({\n fetch: () => Future.nu(resolve => {\n resolve(buildGroups(detail.overflowGroups.get()));\n }),\n layouts: {\n onLtr: () => [\n southwest$2,\n southeast$2\n ],\n onRtl: () => [\n southeast$2,\n southwest$2\n ],\n onBottomLtr: () => [\n northwest$2,\n northeast$2\n ],\n onBottomRtl: () => [\n northeast$2,\n northwest$2\n ]\n },\n getBounds: spec.getOverflowBounds,\n lazySink: detail.lazySink,\n fireDismissalEventInstead: {},\n markers: { toggledClass: detail.markers.overflowToggledClass },\n parts: {\n button: externals['overflow-button'](),\n toolbar: externals.overflow()\n },\n onToggled: (comp, state) => detail[state ? 'onOpened' : 'onClosed'](comp)\n }));\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: augment(detail.splitToolbarBehaviours, [Coupling.config({\n others: {\n overflowGroup: () => {\n return ToolbarGroup.sketch({\n ...externals['overflow-group'](),\n items: [memFloatingToolbarButton.asSpec()]\n });\n }\n }\n })]),\n apis: {\n setGroups: (toolbar, groups) => {\n detail.builtGroups.set(map$2(groups, toolbar.getSystem().build));\n refresh$1(toolbar, memFloatingToolbarButton, detail);\n },\n refresh: toolbar => refresh$1(toolbar, memFloatingToolbarButton, detail),\n toggle: toolbar => {\n memFloatingToolbarButton.getOpt(toolbar).each(floatingToolbarButton => {\n FloatingToolbarButton.toggle(floatingToolbarButton);\n });\n },\n isOpen: toolbar => memFloatingToolbarButton.getOpt(toolbar).map(FloatingToolbarButton.isOpen).getOr(false),\n reposition: toolbar => {\n memFloatingToolbarButton.getOpt(toolbar).each(floatingToolbarButton => {\n FloatingToolbarButton.reposition(floatingToolbarButton);\n });\n },\n getOverflow: toolbar => memFloatingToolbarButton.getOpt(toolbar).bind(FloatingToolbarButton.getToolbar)\n },\n domModification: { attributes: { role: 'group' } }\n };\n };\n const SplitFloatingToolbar = composite({\n name: 'SplitFloatingToolbar',\n configFields: schema$b(),\n partFields: parts$7(),\n factory: factory$a,\n apis: {\n setGroups: (apis, toolbar, groups) => {\n apis.setGroups(toolbar, groups);\n },\n refresh: (apis, toolbar) => {\n apis.refresh(toolbar);\n },\n reposition: (apis, toolbar) => {\n apis.reposition(toolbar);\n },\n toggle: (apis, toolbar) => {\n apis.toggle(toolbar);\n },\n isOpen: (apis, toolbar) => apis.isOpen(toolbar),\n getOverflow: (apis, toolbar) => apis.getOverflow(toolbar)\n }\n });\n\n const schema$8 = constant$1([\n markers$1([\n 'closedClass',\n 'openClass',\n 'shrinkingClass',\n 'growingClass',\n 'overflowToggledClass'\n ]),\n onHandler('onOpened'),\n onHandler('onClosed')\n ].concat(schema$c()));\n const parts$4 = constant$1([\n required({\n factory: Toolbar,\n schema: schema$e(),\n name: 'primary'\n }),\n required({\n factory: Toolbar,\n schema: schema$e(),\n name: 'overflow',\n overrides: detail => {\n return {\n toolbarBehaviours: derive$1([\n Sliding.config({\n dimension: { property: 'height' },\n closedClass: detail.markers.closedClass,\n openClass: detail.markers.openClass,\n shrinkingClass: detail.markers.shrinkingClass,\n growingClass: detail.markers.growingClass,\n onShrunk: comp => {\n getPart(comp, detail, 'overflow-button').each(button => {\n Toggling.off(button);\n Focusing.focus(button);\n });\n detail.onClosed(comp);\n },\n onGrown: comp => {\n Keying.focusIn(comp);\n detail.onOpened(comp);\n },\n onStartGrow: comp => {\n getPart(comp, detail, 'overflow-button').each(Toggling.on);\n }\n }),\n Keying.config({\n mode: 'acyclic',\n onEscape: comp => {\n getPart(comp, detail, 'overflow-button').each(Focusing.focus);\n return Optional.some(true);\n }\n })\n ])\n };\n }\n }),\n external({\n name: 'overflow-button',\n overrides: detail => ({\n buttonBehaviours: derive$1([Toggling.config({\n toggleClass: detail.markers.overflowToggledClass,\n aria: { mode: 'pressed' },\n toggleOnExecute: false\n })])\n })\n }),\n external({ name: 'overflow-group' })\n ]);\n\n const isOpen = (toolbar, detail) => getPart(toolbar, detail, 'overflow').map(Sliding.hasGrown).getOr(false);\n const toggleToolbar = (toolbar, detail) => {\n getPart(toolbar, detail, 'overflow-button').bind(() => getPart(toolbar, detail, 'overflow')).each(overf => {\n refresh(toolbar, detail);\n Sliding.toggleGrow(overf);\n });\n };\n const refresh = (toolbar, detail) => {\n getPart(toolbar, detail, 'overflow').each(overflow => {\n refresh$2(toolbar, detail, groups => {\n const builtGroups = map$2(groups, g => premade(g));\n Toolbar.setGroups(overflow, builtGroups);\n });\n getPart(toolbar, detail, 'overflow-button').each(button => {\n if (Sliding.hasGrown(overflow)) {\n Toggling.on(button);\n }\n });\n Sliding.refresh(overflow);\n });\n };\n const factory$9 = (detail, components, spec, externals) => {\n const toolbarToggleEvent = 'alloy.toolbar.toggle';\n const doSetGroups = (toolbar, groups) => {\n const built = map$2(groups, toolbar.getSystem().build);\n detail.builtGroups.set(built);\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: augment(detail.splitToolbarBehaviours, [\n Coupling.config({\n others: {\n overflowGroup: toolbar => {\n return ToolbarGroup.sketch({\n ...externals['overflow-group'](),\n items: [Button.sketch({\n ...externals['overflow-button'](),\n action: _button => {\n emit(toolbar, toolbarToggleEvent);\n }\n })]\n });\n }\n }\n }),\n config('toolbar-toggle-events', [run$1(toolbarToggleEvent, toolbar => {\n toggleToolbar(toolbar, detail);\n })])\n ]),\n apis: {\n setGroups: (toolbar, groups) => {\n doSetGroups(toolbar, groups);\n refresh(toolbar, detail);\n },\n refresh: toolbar => refresh(toolbar, detail),\n toggle: toolbar => toggleToolbar(toolbar, detail),\n isOpen: toolbar => isOpen(toolbar, detail)\n },\n domModification: { attributes: { role: 'group' } }\n };\n };\n const SplitSlidingToolbar = composite({\n name: 'SplitSlidingToolbar',\n configFields: schema$8(),\n partFields: parts$4(),\n factory: factory$9,\n apis: {\n setGroups: (apis, toolbar, groups) => {\n apis.setGroups(toolbar, groups);\n },\n refresh: (apis, toolbar) => {\n apis.refresh(toolbar);\n },\n toggle: (apis, toolbar) => {\n apis.toggle(toolbar);\n },\n isOpen: (apis, toolbar) => apis.isOpen(toolbar)\n }\n });\n\n const renderToolbarGroupCommon = toolbarGroup => {\n const attributes = toolbarGroup.title.fold(() => ({}), title => ({ attributes: { title } }));\n return {\n dom: {\n tag: 'div',\n classes: ['tox-toolbar__group'],\n ...attributes\n },\n components: [ToolbarGroup.parts.items({})],\n items: toolbarGroup.items,\n markers: { itemSelector: '*:not(.tox-split-button) > .tox-tbtn:not([disabled]), ' + '.tox-split-button:not([disabled]), ' + '.tox-toolbar-nav-js:not([disabled])' },\n tgroupBehaviours: derive$1([\n Tabstopping.config({}),\n Focusing.config({})\n ])\n };\n };\n const renderToolbarGroup = toolbarGroup => ToolbarGroup.sketch(renderToolbarGroupCommon(toolbarGroup));\n const getToolbarBehaviours = (toolbarSpec, modeName) => {\n const onAttached = runOnAttached(component => {\n const groups = map$2(toolbarSpec.initGroups, renderToolbarGroup);\n Toolbar.setGroups(component, groups);\n });\n return derive$1([\n DisablingConfigs.toolbarButton(toolbarSpec.providers.isDisabled),\n receivingConfig(),\n Keying.config({\n mode: modeName,\n onEscape: toolbarSpec.onEscape,\n selector: '.tox-toolbar__group'\n }),\n config('toolbar-events', [onAttached])\n ]);\n };\n const renderMoreToolbarCommon = toolbarSpec => {\n const modeName = toolbarSpec.cyclicKeying ? 'cyclic' : 'acyclic';\n return {\n uid: toolbarSpec.uid,\n dom: {\n tag: 'div',\n classes: ['tox-toolbar-overlord']\n },\n parts: {\n 'overflow-group': renderToolbarGroupCommon({\n title: Optional.none(),\n items: []\n }),\n 'overflow-button': renderIconButtonSpec({\n name: 'more',\n icon: Optional.some('more-drawer'),\n enabled: true,\n tooltip: Optional.some('More...'),\n primary: false,\n buttonType: Optional.none(),\n borderless: false\n }, Optional.none(), toolbarSpec.providers)\n },\n splitToolbarBehaviours: getToolbarBehaviours(toolbarSpec, modeName)\n };\n };\n const renderFloatingMoreToolbar = toolbarSpec => {\n const baseSpec = renderMoreToolbarCommon(toolbarSpec);\n const overflowXOffset = 4;\n const primary = SplitFloatingToolbar.parts.primary({\n dom: {\n tag: 'div',\n classes: ['tox-toolbar__primary']\n }\n });\n return SplitFloatingToolbar.sketch({\n ...baseSpec,\n lazySink: toolbarSpec.getSink,\n getOverflowBounds: () => {\n const headerElem = toolbarSpec.moreDrawerData.lazyHeader().element;\n const headerBounds = absolute$2(headerElem);\n const docElem = documentElement(headerElem);\n const docBounds = absolute$2(docElem);\n const height = Math.max(docElem.dom.scrollHeight, docBounds.height);\n return bounds(headerBounds.x + overflowXOffset, docBounds.y, headerBounds.width - overflowXOffset * 2, height);\n },\n parts: {\n ...baseSpec.parts,\n overflow: {\n dom: {\n tag: 'div',\n classes: ['tox-toolbar__overflow'],\n attributes: toolbarSpec.attributes\n }\n }\n },\n components: [primary],\n markers: { overflowToggledClass: 'tox-tbtn--enabled' },\n onOpened: comp => toolbarSpec.onToggled(comp, true),\n onClosed: comp => toolbarSpec.onToggled(comp, false)\n });\n };\n const renderSlidingMoreToolbar = toolbarSpec => {\n const primary = SplitSlidingToolbar.parts.primary({\n dom: {\n tag: 'div',\n classes: ['tox-toolbar__primary']\n }\n });\n const overflow = SplitSlidingToolbar.parts.overflow({\n dom: {\n tag: 'div',\n classes: ['tox-toolbar__overflow']\n }\n });\n const baseSpec = renderMoreToolbarCommon(toolbarSpec);\n return SplitSlidingToolbar.sketch({\n ...baseSpec,\n components: [\n primary,\n overflow\n ],\n markers: {\n openClass: 'tox-toolbar__overflow--open',\n closedClass: 'tox-toolbar__overflow--closed',\n growingClass: 'tox-toolbar__overflow--growing',\n shrinkingClass: 'tox-toolbar__overflow--shrinking',\n overflowToggledClass: 'tox-tbtn--enabled'\n },\n onOpened: comp => {\n comp.getSystem().broadcastOn([toolbarHeightChange()], { type: 'opened' });\n toolbarSpec.onToggled(comp, true);\n },\n onClosed: comp => {\n comp.getSystem().broadcastOn([toolbarHeightChange()], { type: 'closed' });\n toolbarSpec.onToggled(comp, false);\n }\n });\n };\n const renderToolbar = toolbarSpec => {\n const modeName = toolbarSpec.cyclicKeying ? 'cyclic' : 'acyclic';\n return Toolbar.sketch({\n uid: toolbarSpec.uid,\n dom: {\n tag: 'div',\n classes: ['tox-toolbar'].concat(toolbarSpec.type === ToolbarMode$1.scrolling ? ['tox-toolbar--scrolling'] : [])\n },\n components: [Toolbar.parts.groups({})],\n toolbarBehaviours: getToolbarBehaviours(toolbarSpec, modeName)\n });\n };\n\n const normalButtonFields = [\n requiredStringEnum('type', ['button']),\n text$1,\n defaultedStringEnum('buttonType', 'secondary', [\n 'primary',\n 'secondary'\n ]),\n requiredFunction('onAction')\n ];\n const viewButtonSchema = choose$1('type', { button: normalButtonFields });\n\n const viewSchema = objOf([\n defaultedArrayOf('buttons', [], viewButtonSchema),\n requiredFunction('onShow'),\n requiredFunction('onHide')\n ]);\n const createView = spec => asRaw('view', viewSchema, spec);\n\n const renderViewButton = (spec, providers) => {\n return renderButton({\n text: spec.text,\n enabled: true,\n primary: false,\n name: 'name',\n icon: Optional.none(),\n borderless: false,\n buttonType: Optional.some(spec.buttonType)\n }, _comp => {\n spec.onAction();\n }, providers);\n };\n const renderViewHeader = spec => {\n const endButtons = map$2(spec.buttons, btnspec => renderViewButton(btnspec, spec.providers));\n return {\n uid: spec.uid,\n dom: {\n tag: 'div',\n classes: ['tox-view__header']\n },\n components: [\n Container.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-view__header-start']\n },\n components: []\n }),\n Container.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-view__header-end']\n },\n components: endButtons\n })\n ]\n };\n };\n const renderViewPane = spec => {\n return {\n uid: spec.uid,\n dom: {\n tag: 'div',\n classes: ['tox-view__pane']\n }\n };\n };\n const factory$8 = (detail, components, _spec, _externals) => {\n const apis = {\n getPane: comp => parts$a.getPart(comp, detail, 'pane'),\n getOnShow: _comp => detail.viewConfig.onShow,\n getOnHide: _comp => detail.viewConfig.onHide\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n apis\n };\n };\n var View = composite({\n name: 'silver.View',\n configFields: [required$1('viewConfig')],\n partFields: [\n optional({\n factory: { sketch: renderViewHeader },\n schema: [\n required$1('buttons'),\n required$1('providers')\n ],\n name: 'header'\n }),\n optional({\n factory: { sketch: renderViewPane },\n schema: [],\n name: 'pane'\n })\n ],\n factory: factory$8,\n apis: {\n getPane: (apis, comp) => apis.getPane(comp),\n getOnShow: (apis, comp) => apis.getOnShow(comp),\n getOnHide: (apis, comp) => apis.getOnHide(comp)\n }\n });\n\n const makeViews = (parts, viewConfigs, providers) => {\n return mapToArray(viewConfigs, (config, name) => {\n const internalViewConfig = getOrDie(createView(config));\n return parts.slot(name, View.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-view']\n },\n viewConfig: internalViewConfig,\n components: [\n ...internalViewConfig.buttons.length > 0 ? [View.parts.header({\n buttons: internalViewConfig.buttons,\n providers\n })] : [],\n View.parts.pane({})\n ]\n }));\n });\n };\n const makeSlotContainer = (viewConfigs, providers) => SlotContainer.sketch(parts => ({\n dom: {\n tag: 'div',\n classes: ['tox-view-wrap__slot-container']\n },\n components: makeViews(parts, viewConfigs, providers),\n slotBehaviours: SimpleBehaviours.unnamedEvents([runOnAttached(slotContainer => SlotContainer.hideAllSlots(slotContainer))])\n }));\n const getCurrentName = slotContainer => {\n return find$5(SlotContainer.getSlotNames(slotContainer), name => SlotContainer.isShowing(slotContainer, name));\n };\n const hideContainer = comp => {\n const element = comp.element;\n set$8(element, 'display', 'none');\n set$9(element, 'aria-hidden', 'true');\n };\n const showContainer = comp => {\n const element = comp.element;\n remove$6(element, 'display');\n remove$7(element, 'aria-hidden');\n };\n const makeViewInstanceApi = slot => ({ getContainer: constant$1(slot) });\n const runOnPaneWithInstanceApi = (slotContainer, name, get) => {\n SlotContainer.getSlot(slotContainer, name).each(view => {\n View.getPane(view).each(pane => {\n const onCallback = get(view);\n onCallback(makeViewInstanceApi(pane.element.dom));\n });\n });\n };\n const runOnShow = (slotContainer, name) => runOnPaneWithInstanceApi(slotContainer, name, View.getOnShow);\n const runOnHide = (slotContainer, name) => runOnPaneWithInstanceApi(slotContainer, name, View.getOnHide);\n const factory$7 = (detail, spec) => {\n const setViews = (comp, viewConfigs) => {\n Replacing.set(comp, [makeSlotContainer(viewConfigs, spec.backstage.shared.providers)]);\n };\n const whichView = comp => {\n return Composing.getCurrent(comp).bind(getCurrentName);\n };\n const toggleView = (comp, showMainView, hideMainView, name) => {\n return Composing.getCurrent(comp).exists(slotContainer => {\n const optCurrentSlotName = getCurrentName(slotContainer);\n const isTogglingCurrentView = optCurrentSlotName.exists(current => name === current);\n const exists = SlotContainer.getSlot(slotContainer, name).isSome();\n if (exists) {\n SlotContainer.hideAllSlots(slotContainer);\n if (!isTogglingCurrentView) {\n hideMainView();\n showContainer(comp);\n SlotContainer.showSlot(slotContainer, name);\n runOnShow(slotContainer, name);\n } else {\n hideContainer(comp);\n showMainView();\n }\n optCurrentSlotName.each(prevName => runOnHide(slotContainer, prevName));\n }\n return exists;\n });\n };\n const apis = {\n setViews,\n whichView,\n toggleView\n };\n return {\n uid: detail.uid,\n dom: {\n tag: 'div',\n classes: ['tox-view-wrap'],\n attributes: { 'aria-hidden': 'true' },\n styles: { display: 'none' }\n },\n components: [],\n behaviours: derive$1([\n Replacing.config({}),\n Composing.config({\n find: comp => {\n const children = Replacing.contents(comp);\n return head(children);\n }\n })\n ]),\n apis\n };\n };\n var ViewWrapper = single({\n factory: factory$7,\n name: 'silver.ViewWrapper',\n configFields: [required$1('backstage')],\n apis: {\n setViews: (apis, comp, views) => apis.setViews(comp, views),\n toggleView: (apis, comp, outerContainer, editorCont, name) => apis.toggleView(comp, outerContainer, editorCont, name),\n whichView: (apis, comp) => apis.whichView(comp)\n }\n });\n\n const factory$6 = (detail, components, _spec) => {\n let toolbarDrawerOpenState = false;\n const apis = {\n getSocket: comp => {\n return parts$a.getPart(comp, detail, 'socket');\n },\n setSidebar: (comp, panelConfigs, showSidebar) => {\n parts$a.getPart(comp, detail, 'sidebar').each(sidebar => setSidebar(sidebar, panelConfigs, showSidebar));\n },\n toggleSidebar: (comp, name) => {\n parts$a.getPart(comp, detail, 'sidebar').each(sidebar => toggleSidebar(sidebar, name));\n },\n whichSidebar: comp => {\n return parts$a.getPart(comp, detail, 'sidebar').bind(whichSidebar).getOrNull();\n },\n getHeader: comp => {\n return parts$a.getPart(comp, detail, 'header');\n },\n getToolbar: comp => {\n return parts$a.getPart(comp, detail, 'toolbar');\n },\n setToolbar: (comp, groups) => {\n parts$a.getPart(comp, detail, 'toolbar').each(toolbar => {\n const renderedGroups = map$2(groups, renderToolbarGroup);\n toolbar.getApis().setGroups(toolbar, renderedGroups);\n });\n },\n setToolbars: (comp, toolbars) => {\n parts$a.getPart(comp, detail, 'multiple-toolbar').each(mToolbar => {\n const renderedToolbars = map$2(toolbars, g => map$2(g, renderToolbarGroup));\n CustomList.setItems(mToolbar, renderedToolbars);\n });\n },\n refreshToolbar: comp => {\n const toolbar = parts$a.getPart(comp, detail, 'toolbar');\n toolbar.each(toolbar => toolbar.getApis().refresh(toolbar));\n },\n toggleToolbarDrawer: comp => {\n parts$a.getPart(comp, detail, 'toolbar').each(toolbar => {\n mapFrom(toolbar.getApis().toggle, toggle => toggle(toolbar));\n });\n },\n isToolbarDrawerToggled: comp => {\n return parts$a.getPart(comp, detail, 'toolbar').bind(toolbar => Optional.from(toolbar.getApis().isOpen).map(isOpen => isOpen(toolbar))).getOr(false);\n },\n getThrobber: comp => {\n return parts$a.getPart(comp, detail, 'throbber');\n },\n focusToolbar: comp => {\n const optToolbar = parts$a.getPart(comp, detail, 'toolbar').orThunk(() => parts$a.getPart(comp, detail, 'multiple-toolbar'));\n optToolbar.each(toolbar => {\n Keying.focusIn(toolbar);\n });\n },\n setMenubar: (comp, menus) => {\n parts$a.getPart(comp, detail, 'menubar').each(menubar => {\n SilverMenubar.setMenus(menubar, menus);\n });\n },\n focusMenubar: comp => {\n parts$a.getPart(comp, detail, 'menubar').each(menubar => {\n SilverMenubar.focus(menubar);\n });\n },\n setViews: (comp, viewConfigs) => {\n parts$a.getPart(comp, detail, 'viewWrapper').each(wrapper => {\n ViewWrapper.setViews(wrapper, viewConfigs);\n });\n },\n toggleView: (comp, name) => {\n return parts$a.getPart(comp, detail, 'viewWrapper').exists(wrapper => ViewWrapper.toggleView(wrapper, () => apis.showMainView(comp), () => apis.hideMainView(comp), name));\n },\n whichView: comp => {\n return parts$a.getPart(comp, detail, 'viewWrapper').bind(ViewWrapper.whichView).getOrNull();\n },\n hideMainView: comp => {\n toolbarDrawerOpenState = apis.isToolbarDrawerToggled(comp);\n if (toolbarDrawerOpenState) {\n apis.toggleToolbarDrawer(comp);\n }\n parts$a.getPart(comp, detail, 'editorContainer').each(editorContainer => {\n const element = editorContainer.element;\n set$8(element, 'display', 'none');\n set$9(element, 'aria-hidden', 'true');\n });\n },\n showMainView: comp => {\n if (toolbarDrawerOpenState) {\n apis.toggleToolbarDrawer(comp);\n }\n parts$a.getPart(comp, detail, 'editorContainer').each(editorContainer => {\n const element = editorContainer.element;\n remove$6(element, 'display');\n remove$7(element, 'aria-hidden');\n });\n }\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n apis,\n behaviours: detail.behaviours\n };\n };\n const partMenubar = partType.optional({\n factory: SilverMenubar,\n name: 'menubar',\n schema: [required$1('backstage')]\n });\n const toolbarFactory = spec => {\n if (spec.type === ToolbarMode$1.sliding) {\n return renderSlidingMoreToolbar;\n } else if (spec.type === ToolbarMode$1.floating) {\n return renderFloatingMoreToolbar;\n } else {\n return renderToolbar;\n }\n };\n const partMultipleToolbar = partType.optional({\n factory: {\n sketch: spec => CustomList.sketch({\n uid: spec.uid,\n dom: spec.dom,\n listBehaviours: derive$1([Keying.config({\n mode: 'acyclic',\n selector: '.tox-toolbar'\n })]),\n makeItem: () => renderToolbar({\n type: spec.type,\n uid: generate$6('multiple-toolbar-item'),\n cyclicKeying: false,\n initGroups: [],\n providers: spec.providers,\n onEscape: () => {\n spec.onEscape();\n return Optional.some(true);\n }\n }),\n setupItem: (_mToolbar, tc, data, _index) => {\n Toolbar.setGroups(tc, data);\n },\n shell: true\n })\n },\n name: 'multiple-toolbar',\n schema: [\n required$1('dom'),\n required$1('onEscape')\n ]\n });\n const partToolbar = partType.optional({\n factory: {\n sketch: spec => {\n const renderer = toolbarFactory(spec);\n const toolbarSpec = {\n type: spec.type,\n uid: spec.uid,\n onEscape: () => {\n spec.onEscape();\n return Optional.some(true);\n },\n onToggled: (_comp, state) => spec.onToolbarToggled(state),\n cyclicKeying: false,\n initGroups: [],\n getSink: spec.getSink,\n providers: spec.providers,\n moreDrawerData: {\n lazyToolbar: spec.lazyToolbar,\n lazyMoreButton: spec.lazyMoreButton,\n lazyHeader: spec.lazyHeader\n },\n attributes: spec.attributes\n };\n return renderer(toolbarSpec);\n }\n },\n name: 'toolbar',\n schema: [\n required$1('dom'),\n required$1('onEscape'),\n required$1('getSink')\n ]\n });\n const partHeader = partType.optional({\n factory: { sketch: renderHeader },\n name: 'header',\n schema: [required$1('dom')]\n });\n const partPromotion = partType.optional({\n factory: { sketch: renderPromotion },\n name: 'promotion',\n schema: [required$1('dom')]\n });\n const partSocket = partType.optional({\n name: 'socket',\n schema: [required$1('dom')]\n });\n const partSidebar = partType.optional({\n factory: { sketch: renderSidebar },\n name: 'sidebar',\n schema: [required$1('dom')]\n });\n const partThrobber = partType.optional({\n factory: { sketch: renderThrobber },\n name: 'throbber',\n schema: [required$1('dom')]\n });\n const partViewWrapper = partType.optional({\n factory: ViewWrapper,\n name: 'viewWrapper',\n schema: [required$1('backstage')]\n });\n const renderEditorContainer = spec => ({\n uid: spec.uid,\n dom: {\n tag: 'div',\n classes: ['tox-editor-container']\n },\n components: spec.components\n });\n const partEditorContainer = partType.optional({\n factory: { sketch: renderEditorContainer },\n name: 'editorContainer',\n schema: []\n });\n var OuterContainer = composite({\n name: 'OuterContainer',\n factory: factory$6,\n configFields: [\n required$1('dom'),\n required$1('behaviours')\n ],\n partFields: [\n partHeader,\n partMenubar,\n partToolbar,\n partMultipleToolbar,\n partSocket,\n partSidebar,\n partPromotion,\n partThrobber,\n partViewWrapper,\n partEditorContainer\n ],\n apis: {\n getSocket: (apis, comp) => {\n return apis.getSocket(comp);\n },\n setSidebar: (apis, comp, panelConfigs, showSidebar) => {\n apis.setSidebar(comp, panelConfigs, showSidebar);\n },\n toggleSidebar: (apis, comp, name) => {\n apis.toggleSidebar(comp, name);\n },\n whichSidebar: (apis, comp) => {\n return apis.whichSidebar(comp);\n },\n getHeader: (apis, comp) => {\n return apis.getHeader(comp);\n },\n getToolbar: (apis, comp) => {\n return apis.getToolbar(comp);\n },\n setToolbar: (apis, comp, groups) => {\n apis.setToolbar(comp, groups);\n },\n setToolbars: (apis, comp, toolbars) => {\n apis.setToolbars(comp, toolbars);\n },\n refreshToolbar: (apis, comp) => {\n return apis.refreshToolbar(comp);\n },\n toggleToolbarDrawer: (apis, comp) => {\n apis.toggleToolbarDrawer(comp);\n },\n isToolbarDrawerToggled: (apis, comp) => {\n return apis.isToolbarDrawerToggled(comp);\n },\n getThrobber: (apis, comp) => {\n return apis.getThrobber(comp);\n },\n setMenubar: (apis, comp, menus) => {\n apis.setMenubar(comp, menus);\n },\n focusMenubar: (apis, comp) => {\n apis.focusMenubar(comp);\n },\n focusToolbar: (apis, comp) => {\n apis.focusToolbar(comp);\n },\n setViews: (apis, comp, views) => {\n apis.setViews(comp, views);\n },\n toggleView: (apis, comp, name) => {\n return apis.toggleView(comp, name);\n },\n whichView: (apis, comp) => {\n return apis.whichView(comp);\n }\n }\n });\n\n const defaultMenubar = 'file edit view insert format tools table help';\n const defaultMenus = {\n file: {\n title: 'File',\n items: 'newdocument restoredraft | preview | export print | deleteallconversations'\n },\n edit: {\n title: 'Edit',\n items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'\n },\n view: {\n title: 'View',\n items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments'\n },\n insert: {\n title: 'Insert',\n items: 'image link media addcomment pageembed template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents footnotes | mergetags | insertdatetime'\n },\n format: {\n title: 'Format',\n items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat'\n },\n tools: {\n title: 'Tools',\n items: 'spellchecker spellcheckerlanguage | autocorrect capitalization | a11ycheck code wordcount'\n },\n table: {\n title: 'Table',\n items: 'inserttable | cell row column | advtablesort | tableprops deletetable'\n },\n help: {\n title: 'Help',\n items: 'help'\n }\n };\n const make = (menu, registry, editor) => {\n const removedMenuItems = getRemovedMenuItems(editor).split(/[ ,]/);\n return {\n text: menu.title,\n getItems: () => bind$3(menu.items, i => {\n const itemName = i.toLowerCase();\n if (itemName.trim().length === 0) {\n return [];\n } else if (exists(removedMenuItems, removedMenuItem => removedMenuItem === itemName)) {\n return [];\n } else if (itemName === 'separator' || itemName === '|') {\n return [{ type: 'separator' }];\n } else if (registry.menuItems[itemName]) {\n return [registry.menuItems[itemName]];\n } else {\n return [];\n }\n })\n };\n };\n const parseItemsString = items => {\n return items.split(' ');\n };\n const identifyMenus = (editor, registry) => {\n const rawMenuData = {\n ...defaultMenus,\n ...registry.menus\n };\n const userDefinedMenus = keys(registry.menus).length > 0;\n const menubar = registry.menubar === undefined || registry.menubar === true ? parseItemsString(defaultMenubar) : parseItemsString(registry.menubar === false ? '' : registry.menubar);\n const validMenus = filter$2(menubar, menuName => {\n const isDefaultMenu = has$2(defaultMenus, menuName);\n if (userDefinedMenus) {\n return isDefaultMenu || get$g(registry.menus, menuName).exists(menu => has$2(menu, 'items'));\n } else {\n return isDefaultMenu;\n }\n });\n const menus = map$2(validMenus, menuName => {\n const menuData = rawMenuData[menuName];\n return make({\n title: menuData.title,\n items: parseItemsString(menuData.items)\n }, registry, editor);\n });\n return filter$2(menus, menu => {\n const isNotSeparator = item => isString(item) || item.type !== 'separator';\n return menu.getItems().length > 0 && exists(menu.getItems(), isNotSeparator);\n });\n };\n\n const fireSkinLoaded = editor => {\n const done = () => {\n editor._skinLoaded = true;\n fireSkinLoaded$1(editor);\n };\n return () => {\n if (editor.initialized) {\n done();\n } else {\n editor.on('init', done);\n }\n };\n };\n const fireSkinLoadError = (editor, err) => () => fireSkinLoadError$1(editor, { message: err });\n\n const loadStylesheet = (editor, stylesheetUrl, styleSheetLoader) => {\n editor.on('remove', () => styleSheetLoader.unload(stylesheetUrl));\n return styleSheetLoader.load(stylesheetUrl);\n };\n const loadUiSkins = (editor, skinUrl) => {\n const skinUiCss = skinUrl + '/skin.min.css';\n return loadStylesheet(editor, skinUiCss, editor.ui.styleSheetLoader);\n };\n const loadShadowDomUiSkins = (editor, skinUrl) => {\n const isInShadowRoot$1 = isInShadowRoot(SugarElement.fromDom(editor.getElement()));\n if (isInShadowRoot$1) {\n const shadowDomSkinCss = skinUrl + '/skin.shadowdom.min.css';\n return loadStylesheet(editor, shadowDomSkinCss, global$7.DOM.styleSheetLoader);\n } else {\n return Promise.resolve();\n }\n };\n const loadSkin = (isInline, editor) => {\n const skinUrl = getSkinUrl(editor);\n if (skinUrl) {\n editor.contentCSS.push(skinUrl + (isInline ? '/content.inline' : '/content') + '.min.css');\n }\n if (!isSkinDisabled(editor) && isString(skinUrl)) {\n Promise.all([\n loadUiSkins(editor, skinUrl),\n loadShadowDomUiSkins(editor, skinUrl)\n ]).then(fireSkinLoaded(editor), fireSkinLoadError(editor, 'Skin could not be loaded'));\n } else {\n fireSkinLoaded(editor)();\n }\n };\n const iframe = curry(loadSkin, false);\n const inline = curry(loadSkin, true);\n\n const onSetupFormatToggle = (editor, name) => api => {\n const boundCallback = unbindable();\n const init = () => {\n api.setActive(editor.formatter.match(name));\n const binding = editor.formatter.formatChanged(name, api.setActive);\n boundCallback.set(binding);\n };\n editor.initialized ? init() : editor.once('init', init);\n return () => {\n editor.off('init', init);\n boundCallback.clear();\n };\n };\n const onSetupEvent = (editor, event, f) => api => {\n const handleEvent = () => f(api);\n const init = () => {\n f(api);\n editor.on(event, handleEvent);\n };\n editor.initialized ? init() : editor.once('init', init);\n return () => {\n editor.off('init', init);\n editor.off(event, handleEvent);\n };\n };\n const onActionToggleFormat$1 = editor => rawItem => () => {\n editor.undoManager.transact(() => {\n editor.focus();\n editor.execCommand('mceToggleFormat', false, rawItem.format);\n });\n };\n const onActionExecCommand = (editor, command) => () => editor.execCommand(command);\n\n const generateSelectItems = (_editor, backstage, spec) => {\n const generateItem = (rawItem, response, invalid, value) => {\n const translatedText = backstage.shared.providers.translate(rawItem.title);\n if (rawItem.type === 'separator') {\n return Optional.some({\n type: 'separator',\n text: translatedText\n });\n } else if (rawItem.type === 'submenu') {\n const items = bind$3(rawItem.getStyleItems(), si => validate(si, response, value));\n if (response === 0 && items.length <= 0) {\n return Optional.none();\n } else {\n return Optional.some({\n type: 'nestedmenuitem',\n text: translatedText,\n enabled: items.length > 0,\n getSubmenuItems: () => bind$3(rawItem.getStyleItems(), si => validate(si, response, value))\n });\n }\n } else {\n return Optional.some({\n type: 'togglemenuitem',\n text: translatedText,\n icon: rawItem.icon,\n active: rawItem.isSelected(value),\n enabled: !invalid,\n onAction: spec.onAction(rawItem),\n ...rawItem.getStylePreview().fold(() => ({}), preview => ({ meta: { style: preview } }))\n });\n }\n };\n const validate = (item, response, value) => {\n const invalid = item.type === 'formatter' && spec.isInvalid(item);\n if (response === 0) {\n return invalid ? [] : generateItem(item, response, false, value).toArray();\n } else {\n return generateItem(item, response, invalid, value).toArray();\n }\n };\n const validateItems = preItems => {\n const value = spec.getCurrentValue();\n const response = spec.shouldHide ? 0 : 1;\n return bind$3(preItems, item => validate(item, response, value));\n };\n const getFetch = (backstage, getStyleItems) => (comp, callback) => {\n const preItems = getStyleItems();\n const items = validateItems(preItems);\n const menu = build(items, ItemResponse$1.CLOSE_ON_EXECUTE, backstage, {\n isHorizontalMenu: false,\n search: Optional.none()\n });\n callback(menu);\n };\n return {\n validateItems,\n getFetch\n };\n };\n const createMenuItems = (editor, backstage, spec) => {\n const dataset = spec.dataset;\n const getStyleItems = dataset.type === 'basic' ? () => map$2(dataset.data, d => processBasic(d, spec.isSelectedFor, spec.getPreviewFor)) : dataset.getData;\n return {\n items: generateSelectItems(editor, backstage, spec),\n getStyleItems\n };\n };\n const createSelectButton = (editor, backstage, spec) => {\n const {items, getStyleItems} = createMenuItems(editor, backstage, spec);\n const getApi = comp => ({ getComponent: constant$1(comp) });\n const onSetup = onSetupEvent(editor, 'NodeChange', api => {\n const comp = api.getComponent();\n spec.updateText(comp);\n });\n return renderCommonDropdown({\n text: spec.icon.isSome() ? Optional.none() : spec.text,\n icon: spec.icon,\n tooltip: Optional.from(spec.tooltip),\n role: Optional.none(),\n fetch: items.getFetch(backstage, getStyleItems),\n onSetup,\n getApi,\n columns: 1,\n presets: 'normal',\n classes: spec.icon.isSome() ? [] : ['bespoke'],\n dropdownBehaviours: []\n }, 'tox-tbtn', backstage.shared);\n };\n\n const process = rawFormats => map$2(rawFormats, item => {\n let title = item, format = item;\n const values = item.split('=');\n if (values.length > 1) {\n title = values[0];\n format = values[1];\n }\n return {\n title,\n format\n };\n });\n const buildBasicStaticDataset = data => ({\n type: 'basic',\n data\n });\n var Delimiter;\n (function (Delimiter) {\n Delimiter[Delimiter['SemiColon'] = 0] = 'SemiColon';\n Delimiter[Delimiter['Space'] = 1] = 'Space';\n }(Delimiter || (Delimiter = {})));\n const split = (rawFormats, delimiter) => {\n if (delimiter === Delimiter.SemiColon) {\n return rawFormats.replace(/;$/, '').split(';');\n } else {\n return rawFormats.split(' ');\n }\n };\n const buildBasicSettingsDataset = (editor, settingName, delimiter) => {\n const rawFormats = editor.options.get(settingName);\n const data = process(split(rawFormats, delimiter));\n return {\n type: 'basic',\n data\n };\n };\n\n const alignMenuItems = [\n {\n title: 'Left',\n icon: 'align-left',\n format: 'alignleft',\n command: 'JustifyLeft'\n },\n {\n title: 'Center',\n icon: 'align-center',\n format: 'aligncenter',\n command: 'JustifyCenter'\n },\n {\n title: 'Right',\n icon: 'align-right',\n format: 'alignright',\n command: 'JustifyRight'\n },\n {\n title: 'Justify',\n icon: 'align-justify',\n format: 'alignjustify',\n command: 'JustifyFull'\n }\n ];\n const getSpec$4 = editor => {\n const getMatchingValue = () => find$5(alignMenuItems, item => editor.formatter.match(item.format));\n const isSelectedFor = format => () => editor.formatter.match(format);\n const getPreviewFor = _format => Optional.none;\n const updateSelectMenuIcon = comp => {\n const match = getMatchingValue();\n const alignment = match.fold(constant$1('left'), item => item.title.toLowerCase());\n emitWith(comp, updateMenuIcon, { icon: `align-${ alignment }` });\n };\n const dataset = buildBasicStaticDataset(alignMenuItems);\n const onAction = rawItem => () => find$5(alignMenuItems, item => item.format === rawItem.format).each(item => editor.execCommand(item.command));\n return {\n tooltip: 'Align',\n text: Optional.none(),\n icon: Optional.some('align-left'),\n isSelectedFor,\n getCurrentValue: Optional.none,\n getPreviewFor,\n onAction,\n updateText: updateSelectMenuIcon,\n dataset,\n shouldHide: false,\n isInvalid: item => !editor.formatter.canApply(item.format)\n };\n };\n const createAlignButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$4(editor));\n const createAlignMenu = (editor, backstage) => {\n const menuItems = createMenuItems(editor, backstage, getSpec$4(editor));\n editor.ui.registry.addNestedMenuItem('align', {\n text: backstage.shared.providers.translate('Align'),\n getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())\n });\n };\n\n const findNearest = (editor, getStyles) => {\n const styles = getStyles();\n const formats = map$2(styles, style => style.format);\n return Optional.from(editor.formatter.closest(formats)).bind(fmt => find$5(styles, data => data.format === fmt)).orThunk(() => someIf(editor.formatter.match('p'), {\n title: 'Paragraph',\n format: 'p'\n }));\n };\n\n const getSpec$3 = editor => {\n const fallbackFormat = 'Paragraph';\n const isSelectedFor = format => () => editor.formatter.match(format);\n const getPreviewFor = format => () => {\n const fmt = editor.formatter.get(format);\n if (fmt) {\n return Optional.some({\n tag: fmt.length > 0 ? fmt[0].inline || fmt[0].block || 'div' : 'div',\n styles: editor.dom.parseStyle(editor.formatter.getCssText(format))\n });\n } else {\n return Optional.none();\n }\n };\n const updateSelectMenuText = comp => {\n const detectedFormat = findNearest(editor, () => dataset.data);\n const text = detectedFormat.fold(constant$1(fallbackFormat), fmt => fmt.title);\n emitWith(comp, updateMenuText, { text });\n };\n const dataset = buildBasicSettingsDataset(editor, 'block_formats', Delimiter.SemiColon);\n return {\n tooltip: 'Blocks',\n text: Optional.some(fallbackFormat),\n icon: Optional.none(),\n isSelectedFor,\n getCurrentValue: Optional.none,\n getPreviewFor,\n onAction: onActionToggleFormat$1(editor),\n updateText: updateSelectMenuText,\n dataset,\n shouldHide: false,\n isInvalid: item => !editor.formatter.canApply(item.format)\n };\n };\n const createBlocksButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$3(editor));\n const createBlocksMenu = (editor, backstage) => {\n const menuItems = createMenuItems(editor, backstage, getSpec$3(editor));\n editor.ui.registry.addNestedMenuItem('blocks', {\n text: 'Blocks',\n getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())\n });\n };\n\n const systemStackFonts = [\n '-apple-system',\n 'Segoe UI',\n 'Roboto',\n 'Helvetica Neue',\n 'sans-serif'\n ];\n const splitFonts = fontFamily => {\n const fonts = fontFamily.split(/\\s*,\\s*/);\n return map$2(fonts, font => font.replace(/^['\"]+|['\"]+$/g, ''));\n };\n const isSystemFontStack = fontFamily => {\n const matchesSystemStack = () => {\n const fonts = splitFonts(fontFamily.toLowerCase());\n return forall(systemStackFonts, font => fonts.indexOf(font.toLowerCase()) > -1);\n };\n return fontFamily.indexOf('-apple-system') === 0 && matchesSystemStack();\n };\n const getSpec$2 = editor => {\n const systemFont = 'System Font';\n const getMatchingValue = () => {\n const getFirstFont = fontFamily => fontFamily ? splitFonts(fontFamily)[0] : '';\n const fontFamily = editor.queryCommandValue('FontName');\n const items = dataset.data;\n const font = fontFamily ? fontFamily.toLowerCase() : '';\n const matchOpt = find$5(items, item => {\n const format = item.format;\n return format.toLowerCase() === font || getFirstFont(format).toLowerCase() === getFirstFont(font).toLowerCase();\n }).orThunk(() => {\n return someIf(isSystemFontStack(font), {\n title: systemFont,\n format: font\n });\n });\n return {\n matchOpt,\n font: fontFamily\n };\n };\n const isSelectedFor = item => valueOpt => valueOpt.exists(value => value.format === item);\n const getCurrentValue = () => {\n const {matchOpt} = getMatchingValue();\n return matchOpt;\n };\n const getPreviewFor = item => () => Optional.some({\n tag: 'div',\n styles: item.indexOf('dings') === -1 ? { 'font-family': item } : {}\n });\n const onAction = rawItem => () => {\n editor.undoManager.transact(() => {\n editor.focus();\n editor.execCommand('FontName', false, rawItem.format);\n });\n };\n const updateSelectMenuText = comp => {\n const {matchOpt, font} = getMatchingValue();\n const text = matchOpt.fold(constant$1(font), item => item.title);\n emitWith(comp, updateMenuText, { text });\n };\n const dataset = buildBasicSettingsDataset(editor, 'font_family_formats', Delimiter.SemiColon);\n return {\n tooltip: 'Fonts',\n text: Optional.some(systemFont),\n icon: Optional.none(),\n isSelectedFor,\n getCurrentValue,\n getPreviewFor,\n onAction,\n updateText: updateSelectMenuText,\n dataset,\n shouldHide: false,\n isInvalid: never\n };\n };\n const createFontFamilyButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$2(editor));\n const createFontFamilyMenu = (editor, backstage) => {\n const menuItems = createMenuItems(editor, backstage, getSpec$2(editor));\n editor.ui.registry.addNestedMenuItem('fontfamily', {\n text: backstage.shared.providers.translate('Fonts'),\n getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())\n });\n };\n\n const legacyFontSizes = {\n '8pt': '1',\n '10pt': '2',\n '12pt': '3',\n '14pt': '4',\n '18pt': '5',\n '24pt': '6',\n '36pt': '7'\n };\n const keywordFontSizes = {\n 'xx-small': '7pt',\n 'x-small': '8pt',\n 'small': '10pt',\n 'medium': '12pt',\n 'large': '14pt',\n 'x-large': '18pt',\n 'xx-large': '24pt'\n };\n const round = (number, precision) => {\n const factor = Math.pow(10, precision);\n return Math.round(number * factor) / factor;\n };\n const toPt = (fontSize, precision) => {\n if (/[0-9.]+px$/.test(fontSize)) {\n return round(parseInt(fontSize, 10) * 72 / 96, precision || 0) + 'pt';\n } else {\n return get$g(keywordFontSizes, fontSize).getOr(fontSize);\n }\n };\n const toLegacy = fontSize => get$g(legacyFontSizes, fontSize).getOr('');\n const getSpec$1 = editor => {\n const getMatchingValue = () => {\n let matchOpt = Optional.none();\n const items = dataset.data;\n const fontSize = editor.queryCommandValue('FontSize');\n if (fontSize) {\n for (let precision = 3; matchOpt.isNone() && precision >= 0; precision--) {\n const pt = toPt(fontSize, precision);\n const legacy = toLegacy(pt);\n matchOpt = find$5(items, item => item.format === fontSize || item.format === pt || item.format === legacy);\n }\n }\n return {\n matchOpt,\n size: fontSize\n };\n };\n const isSelectedFor = item => valueOpt => valueOpt.exists(value => value.format === item);\n const getCurrentValue = () => {\n const {matchOpt} = getMatchingValue();\n return matchOpt;\n };\n const getPreviewFor = constant$1(Optional.none);\n const onAction = rawItem => () => {\n editor.undoManager.transact(() => {\n editor.focus();\n editor.execCommand('FontSize', false, rawItem.format);\n });\n };\n const updateSelectMenuText = comp => {\n const {matchOpt, size} = getMatchingValue();\n const text = matchOpt.fold(constant$1(size), match => match.title);\n emitWith(comp, updateMenuText, { text });\n };\n const dataset = buildBasicSettingsDataset(editor, 'font_size_formats', Delimiter.Space);\n return {\n tooltip: 'Font sizes',\n text: Optional.some('12pt'),\n icon: Optional.none(),\n isSelectedFor,\n getPreviewFor,\n getCurrentValue,\n onAction,\n updateText: updateSelectMenuText,\n dataset,\n shouldHide: false,\n isInvalid: never\n };\n };\n const createFontSizeButton = (editor, backstage) => createSelectButton(editor, backstage, getSpec$1(editor));\n const createFontSizeMenu = (editor, backstage) => {\n const menuItems = createMenuItems(editor, backstage, getSpec$1(editor));\n editor.ui.registry.addNestedMenuItem('fontsize', {\n text: 'Font sizes',\n getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())\n });\n };\n\n const getSpec = (editor, dataset) => {\n const fallbackFormat = 'Paragraph';\n const isSelectedFor = format => () => editor.formatter.match(format);\n const getPreviewFor = format => () => {\n const fmt = editor.formatter.get(format);\n return fmt !== undefined ? Optional.some({\n tag: fmt.length > 0 ? fmt[0].inline || fmt[0].block || 'div' : 'div',\n styles: editor.dom.parseStyle(editor.formatter.getCssText(format))\n }) : Optional.none();\n };\n const updateSelectMenuText = comp => {\n const getFormatItems = fmt => {\n if (isNestedFormat(fmt)) {\n return bind$3(fmt.items, getFormatItems);\n } else if (isFormatReference(fmt)) {\n return [{\n title: fmt.title,\n format: fmt.format\n }];\n } else {\n return [];\n }\n };\n const flattenedItems = bind$3(getStyleFormats(editor), getFormatItems);\n const detectedFormat = findNearest(editor, constant$1(flattenedItems));\n const text = detectedFormat.fold(constant$1(fallbackFormat), fmt => fmt.title);\n emitWith(comp, updateMenuText, { text });\n };\n return {\n tooltip: 'Formats',\n text: Optional.some(fallbackFormat),\n icon: Optional.none(),\n isSelectedFor,\n getCurrentValue: Optional.none,\n getPreviewFor,\n onAction: onActionToggleFormat$1(editor),\n updateText: updateSelectMenuText,\n shouldHide: shouldAutoHideStyleFormats(editor),\n isInvalid: item => !editor.formatter.canApply(item.format),\n dataset\n };\n };\n const createStylesButton = (editor, backstage) => {\n const dataset = {\n type: 'advanced',\n ...backstage.styles\n };\n return createSelectButton(editor, backstage, getSpec(editor, dataset));\n };\n const createStylesMenu = (editor, backstage) => {\n const dataset = {\n type: 'advanced',\n ...backstage.styles\n };\n const menuItems = createMenuItems(editor, backstage, getSpec(editor, dataset));\n editor.ui.registry.addNestedMenuItem('styles', {\n text: 'Formats',\n getSubmenuItems: () => menuItems.items.validateItems(menuItems.getStyleItems())\n });\n };\n\n const events$3 = (reflectingConfig, reflectingState) => {\n const update = (component, data) => {\n reflectingConfig.updateState.each(updateState => {\n const newState = updateState(component, data);\n reflectingState.set(newState);\n });\n reflectingConfig.renderComponents.each(renderComponents => {\n const newComponents = renderComponents(data, reflectingState.get());\n const replacer = reflectingConfig.reuseDom ? withReuse : withoutReuse;\n replacer(component, newComponents);\n });\n };\n return derive$2([\n run$1(receive(), (component, message) => {\n const receivingData = message;\n if (!receivingData.universal) {\n const channel = reflectingConfig.channel;\n if (contains$2(receivingData.channels, channel)) {\n update(component, receivingData.data);\n }\n }\n }),\n runOnAttached((comp, _se) => {\n reflectingConfig.initialData.each(rawData => {\n update(comp, rawData);\n });\n })\n ]);\n };\n\n var ActiveReflecting = /*#__PURE__*/Object.freeze({\n __proto__: null,\n events: events$3\n });\n\n const getState = (component, replaceConfig, reflectState) => reflectState;\n\n var ReflectingApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n getState: getState\n });\n\n var ReflectingSchema = [\n required$1('channel'),\n option$3('renderComponents'),\n option$3('updateState'),\n option$3('initialData'),\n defaultedBoolean('reuseDom', true)\n ];\n\n const init$3 = () => {\n const cell = Cell(Optional.none());\n const clear = () => cell.set(Optional.none());\n const readState = () => cell.get().getOr('none');\n return {\n readState,\n get: cell.get,\n set: cell.set,\n clear\n };\n };\n\n var ReflectingState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init$3\n });\n\n const Reflecting = create$4({\n fields: ReflectingSchema,\n name: 'reflecting',\n active: ActiveReflecting,\n apis: ReflectingApis,\n state: ReflectingState\n });\n\n const schema$7 = constant$1([\n required$1('toggleClass'),\n required$1('fetch'),\n onStrictHandler('onExecute'),\n defaulted('getHotspot', Optional.some),\n defaulted('getAnchorOverrides', constant$1({})),\n schema$y(),\n onStrictHandler('onItemExecute'),\n option$3('lazySink'),\n required$1('dom'),\n onHandler('onOpen'),\n field('splitDropdownBehaviours', [\n Coupling,\n Keying,\n Focusing\n ]),\n defaulted('matchWidth', false),\n defaulted('useMinWidth', false),\n defaulted('eventOrder', {}),\n option$3('role')\n ].concat(sandboxFields()));\n const arrowPart = required({\n factory: Button,\n schema: [required$1('dom')],\n name: 'arrow',\n defaults: () => {\n return { buttonBehaviours: derive$1([Focusing.revoke()]) };\n },\n overrides: detail => {\n return {\n dom: {\n tag: 'span',\n attributes: { role: 'presentation' }\n },\n action: arrow => {\n arrow.getSystem().getByUid(detail.uid).each(emitExecute);\n },\n buttonBehaviours: derive$1([Toggling.config({\n toggleOnExecute: false,\n toggleClass: detail.toggleClass\n })])\n };\n }\n });\n const buttonPart = required({\n factory: Button,\n schema: [required$1('dom')],\n name: 'button',\n defaults: () => {\n return { buttonBehaviours: derive$1([Focusing.revoke()]) };\n },\n overrides: detail => {\n return {\n dom: {\n tag: 'span',\n attributes: { role: 'presentation' }\n },\n action: btn => {\n btn.getSystem().getByUid(detail.uid).each(splitDropdown => {\n detail.onExecute(splitDropdown, btn);\n });\n }\n };\n }\n });\n const parts$3 = constant$1([\n arrowPart,\n buttonPart,\n optional({\n factory: {\n sketch: spec => {\n return {\n uid: spec.uid,\n dom: {\n tag: 'span',\n styles: { display: 'none' },\n attributes: { 'aria-hidden': 'true' },\n innerHtml: spec.text\n }\n };\n }\n },\n schema: [required$1('text')],\n name: 'aria-descriptor'\n }),\n external({\n schema: [tieredMenuMarkers()],\n name: 'menu',\n defaults: detail => {\n return {\n onExecute: (tmenu, item) => {\n tmenu.getSystem().getByUid(detail.uid).each(splitDropdown => {\n detail.onItemExecute(splitDropdown, tmenu, item);\n });\n }\n };\n }\n }),\n partType$1()\n ]);\n\n const factory$5 = (detail, components, spec, externals) => {\n const switchToMenu = sandbox => {\n Composing.getCurrent(sandbox).each(current => {\n Highlighting.highlightFirst(current);\n Keying.focusIn(current);\n });\n };\n const action = component => {\n const onOpenSync = switchToMenu;\n togglePopup(detail, identity, component, externals, onOpenSync, HighlightOnOpen.HighlightMenuAndItem).get(noop);\n };\n const openMenu = comp => {\n action(comp);\n return Optional.some(true);\n };\n const executeOnButton = comp => {\n const button = getPartOrDie(comp, detail, 'button');\n emitExecute(button);\n return Optional.some(true);\n };\n const buttonEvents = {\n ...derive$2([runOnAttached((component, _simulatedEvent) => {\n const ariaDescriptor = getPart(component, detail, 'aria-descriptor');\n ariaDescriptor.each(descriptor => {\n const descriptorId = generate$6('aria');\n set$9(descriptor.element, 'id', descriptorId);\n set$9(component.element, 'aria-describedby', descriptorId);\n });\n })]),\n ...events$a(Optional.some(action))\n };\n const apis = {\n repositionMenus: comp => {\n if (Toggling.isOn(comp)) {\n repositionMenus(comp);\n }\n }\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n apis,\n eventOrder: {\n ...detail.eventOrder,\n [execute$5()]: [\n 'disabling',\n 'toggling',\n 'alloy.base.behaviour'\n ]\n },\n events: buttonEvents,\n behaviours: augment(detail.splitDropdownBehaviours, [\n Coupling.config({\n others: {\n sandbox: hotspot => {\n const arrow = getPartOrDie(hotspot, detail, 'arrow');\n const extras = {\n onOpen: () => {\n Toggling.on(arrow);\n Toggling.on(hotspot);\n },\n onClose: () => {\n Toggling.off(arrow);\n Toggling.off(hotspot);\n }\n };\n return makeSandbox$1(detail, hotspot, extras);\n }\n }\n }),\n Keying.config({\n mode: 'special',\n onSpace: executeOnButton,\n onEnter: executeOnButton,\n onDown: openMenu\n }),\n Focusing.config({}),\n Toggling.config({\n toggleOnExecute: false,\n aria: { mode: 'expanded' }\n })\n ]),\n domModification: {\n attributes: {\n 'role': detail.role.getOr('button'),\n 'aria-haspopup': true\n }\n }\n };\n };\n const SplitDropdown = composite({\n name: 'SplitDropdown',\n configFields: schema$7(),\n partFields: parts$3(),\n factory: factory$5,\n apis: { repositionMenus: (apis, comp) => apis.repositionMenus(comp) }\n });\n\n const getButtonApi = component => ({\n isEnabled: () => !Disabling.isDisabled(component),\n setEnabled: state => Disabling.set(component, !state)\n });\n const getToggleApi = component => ({\n setActive: state => {\n Toggling.set(component, state);\n },\n isActive: () => Toggling.isOn(component),\n isEnabled: () => !Disabling.isDisabled(component),\n setEnabled: state => Disabling.set(component, !state)\n });\n const getTooltipAttributes = (tooltip, providersBackstage) => tooltip.map(tooltip => ({\n 'aria-label': providersBackstage.translate(tooltip),\n 'title': providersBackstage.translate(tooltip)\n })).getOr({});\n const focusButtonEvent = generate$6('focus-button');\n const renderCommonStructure = (icon, text, tooltip, receiver, behaviours, providersBackstage) => {\n return {\n dom: {\n tag: 'button',\n classes: ['tox-tbtn'].concat(text.isSome() ? ['tox-tbtn--select'] : []),\n attributes: getTooltipAttributes(tooltip, providersBackstage)\n },\n components: componentRenderPipeline([\n icon.map(iconName => renderIconFromPack(iconName, providersBackstage.icons)),\n text.map(text => renderLabel(text, 'tox-tbtn', providersBackstage))\n ]),\n eventOrder: {\n [mousedown()]: [\n 'focusing',\n 'alloy.base.behaviour',\n 'common-button-display-events'\n ]\n },\n buttonBehaviours: derive$1([\n DisablingConfigs.toolbarButton(providersBackstage.isDisabled),\n receivingConfig(),\n config('common-button-display-events', [run$1(mousedown(), (button, se) => {\n se.event.prevent();\n emit(button, focusButtonEvent);\n })])\n ].concat(receiver.map(r => Reflecting.config({\n channel: r,\n initialData: {\n icon,\n text\n },\n renderComponents: (data, _state) => componentRenderPipeline([\n data.icon.map(iconName => renderIconFromPack(iconName, providersBackstage.icons)),\n data.text.map(text => renderLabel(text, 'tox-tbtn', providersBackstage))\n ])\n })).toArray()).concat(behaviours.getOr([])))\n };\n };\n const renderFloatingToolbarButton = (spec, backstage, identifyButtons, attributes) => {\n const sharedBackstage = backstage.shared;\n return FloatingToolbarButton.sketch({\n lazySink: sharedBackstage.getSink,\n fetch: () => Future.nu(resolve => {\n resolve(map$2(identifyButtons(spec.items), renderToolbarGroup));\n }),\n markers: { toggledClass: 'tox-tbtn--enabled' },\n parts: {\n button: renderCommonStructure(spec.icon, spec.text, spec.tooltip, Optional.none(), Optional.none(), sharedBackstage.providers),\n toolbar: {\n dom: {\n tag: 'div',\n classes: ['tox-toolbar__overflow'],\n attributes\n }\n }\n }\n });\n };\n const renderCommonToolbarButton = (spec, specialisation, providersBackstage) => {\n const editorOffCell = Cell(noop);\n const structure = renderCommonStructure(spec.icon, spec.text, spec.tooltip, Optional.none(), Optional.none(), providersBackstage);\n return Button.sketch({\n dom: structure.dom,\n components: structure.components,\n eventOrder: toolbarButtonEventOrder,\n buttonBehaviours: derive$1([\n config('toolbar-button-events', [\n onToolbarButtonExecute({\n onAction: spec.onAction,\n getApi: specialisation.getApi\n }),\n onControlAttached(specialisation, editorOffCell),\n onControlDetached(specialisation, editorOffCell)\n ]),\n DisablingConfigs.toolbarButton(() => !spec.enabled || providersBackstage.isDisabled()),\n receivingConfig()\n ].concat(specialisation.toolbarButtonBehaviours))\n });\n };\n const renderToolbarButton = (spec, providersBackstage) => renderToolbarButtonWith(spec, providersBackstage, []);\n const renderToolbarButtonWith = (spec, providersBackstage, bonusEvents) => renderCommonToolbarButton(spec, {\n toolbarButtonBehaviours: bonusEvents.length > 0 ? [config('toolbarButtonWith', bonusEvents)] : [],\n getApi: getButtonApi,\n onSetup: spec.onSetup\n }, providersBackstage);\n const renderToolbarToggleButton = (spec, providersBackstage) => renderToolbarToggleButtonWith(spec, providersBackstage, []);\n const renderToolbarToggleButtonWith = (spec, providersBackstage, bonusEvents) => renderCommonToolbarButton(spec, {\n toolbarButtonBehaviours: [\n Replacing.config({}),\n Toggling.config({\n toggleClass: 'tox-tbtn--enabled',\n aria: { mode: 'pressed' },\n toggleOnExecute: false\n })\n ].concat(bonusEvents.length > 0 ? [config('toolbarToggleButtonWith', bonusEvents)] : []),\n getApi: getToggleApi,\n onSetup: spec.onSetup\n }, providersBackstage);\n const fetchChoices = (getApi, spec, providersBackstage) => comp => Future.nu(callback => spec.fetch(callback)).map(items => Optional.from(createTieredDataFrom(deepMerge(createPartialChoiceMenu(generate$6('menu-value'), items, value => {\n spec.onItemAction(getApi(comp), value);\n }, spec.columns, spec.presets, ItemResponse$1.CLOSE_ON_EXECUTE, spec.select.getOr(never), providersBackstage), {\n movement: deriveMenuMovement(spec.columns, spec.presets),\n menuBehaviours: SimpleBehaviours.unnamedEvents(spec.columns !== 'auto' ? [] : [runOnAttached((comp, _se) => {\n detectSize(comp, 4, classForPreset(spec.presets)).each(({numRows, numColumns}) => {\n Keying.setGridSize(comp, numRows, numColumns);\n });\n })])\n }))));\n const renderSplitButton = (spec, sharedBackstage) => {\n const displayChannel = generate$6('channel-update-split-dropdown-display');\n const getApi = comp => ({\n isEnabled: () => !Disabling.isDisabled(comp),\n setEnabled: state => Disabling.set(comp, !state),\n setIconFill: (id, value) => {\n descendant(comp.element, 'svg path[id=\"' + id + '\"], rect[id=\"' + id + '\"]').each(underlinePath => {\n set$9(underlinePath, 'fill', value);\n });\n },\n setActive: state => {\n set$9(comp.element, 'aria-pressed', state);\n descendant(comp.element, 'span').each(button => {\n comp.getSystem().getByDom(button).each(buttonComp => Toggling.set(buttonComp, state));\n });\n },\n isActive: () => descendant(comp.element, 'span').exists(button => comp.getSystem().getByDom(button).exists(Toggling.isOn))\n });\n const editorOffCell = Cell(noop);\n const specialisation = {\n getApi,\n onSetup: spec.onSetup\n };\n return SplitDropdown.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-split-button'],\n attributes: {\n 'aria-pressed': false,\n ...getTooltipAttributes(spec.tooltip, sharedBackstage.providers)\n }\n },\n onExecute: button => {\n spec.onAction(getApi(button));\n },\n onItemExecute: (_a, _b, _c) => {\n },\n splitDropdownBehaviours: derive$1([\n DisablingConfigs.splitButton(sharedBackstage.providers.isDisabled),\n receivingConfig(),\n config('split-dropdown-events', [\n run$1(focusButtonEvent, Focusing.focus),\n onControlAttached(specialisation, editorOffCell),\n onControlDetached(specialisation, editorOffCell)\n ]),\n Unselecting.config({})\n ]),\n eventOrder: {\n [attachedToDom()]: [\n 'alloy.base.behaviour',\n 'split-dropdown-events'\n ]\n },\n toggleClass: 'tox-tbtn--enabled',\n lazySink: sharedBackstage.getSink,\n fetch: fetchChoices(getApi, spec, sharedBackstage.providers),\n parts: { menu: part(false, spec.columns, spec.presets) },\n components: [\n SplitDropdown.parts.button(renderCommonStructure(spec.icon, spec.text, Optional.none(), Optional.some(displayChannel), Optional.some([Toggling.config({\n toggleClass: 'tox-tbtn--enabled',\n toggleOnExecute: false\n })]), sharedBackstage.providers)),\n SplitDropdown.parts.arrow({\n dom: {\n tag: 'button',\n classes: [\n 'tox-tbtn',\n 'tox-split-button__chevron'\n ],\n innerHtml: get$2('chevron-down', sharedBackstage.providers.icons)\n },\n buttonBehaviours: derive$1([\n DisablingConfigs.splitButton(sharedBackstage.providers.isDisabled),\n receivingConfig(),\n addFocusableBehaviour()\n ])\n }),\n SplitDropdown.parts['aria-descriptor']({ text: sharedBackstage.providers.translate('To open the popup, press Shift+Enter') })\n ]\n });\n };\n\n const defaultToolbar = [\n {\n name: 'history',\n items: [\n 'undo',\n 'redo'\n ]\n },\n {\n name: 'styles',\n items: ['styles']\n },\n {\n name: 'formatting',\n items: [\n 'bold',\n 'italic'\n ]\n },\n {\n name: 'alignment',\n items: [\n 'alignleft',\n 'aligncenter',\n 'alignright',\n 'alignjustify'\n ]\n },\n {\n name: 'indentation',\n items: [\n 'outdent',\n 'indent'\n ]\n },\n {\n name: 'permanent pen',\n items: ['permanentpen']\n },\n {\n name: 'comments',\n items: ['addcomment']\n }\n ];\n const renderFromBridge = (bridgeBuilder, render) => (spec, backstage, editor) => {\n const internal = bridgeBuilder(spec).mapError(errInfo => formatError(errInfo)).getOrDie();\n return render(internal, backstage, editor);\n };\n const types = {\n button: renderFromBridge(createToolbarButton, (s, backstage) => renderToolbarButton(s, backstage.shared.providers)),\n togglebutton: renderFromBridge(createToggleButton, (s, backstage) => renderToolbarToggleButton(s, backstage.shared.providers)),\n menubutton: renderFromBridge(createMenuButton, (s, backstage) => renderMenuButton(s, 'tox-tbtn', backstage, Optional.none())),\n splitbutton: renderFromBridge(createSplitButton, (s, backstage) => renderSplitButton(s, backstage.shared)),\n grouptoolbarbutton: renderFromBridge(createGroupToolbarButton, (s, backstage, editor) => {\n const buttons = editor.ui.registry.getAll().buttons;\n const identify = toolbar => identifyButtons(editor, {\n buttons,\n toolbar,\n allowToolbarGroups: false\n }, backstage, Optional.none());\n const attributes = { [Attribute]: backstage.shared.header.isPositionedAtTop() ? AttributeValue.TopToBottom : AttributeValue.BottomToTop };\n switch (getToolbarMode(editor)) {\n case ToolbarMode$1.floating:\n return renderFloatingToolbarButton(s, backstage, identify, attributes);\n default:\n throw new Error('Toolbar groups are only supported when using floating toolbar mode');\n }\n })\n };\n const extractFrom = (spec, backstage, editor) => get$g(types, spec.type).fold(() => {\n console.error('skipping button defined by', spec);\n return Optional.none();\n }, render => Optional.some(render(spec, backstage, editor)));\n const bespokeButtons = {\n styles: createStylesButton,\n fontsize: createFontSizeButton,\n fontfamily: createFontFamilyButton,\n blocks: createBlocksButton,\n align: createAlignButton\n };\n const removeUnusedDefaults = buttons => {\n const filteredItemGroups = map$2(defaultToolbar, group => {\n const items = filter$2(group.items, subItem => has$2(buttons, subItem) || has$2(bespokeButtons, subItem));\n return {\n name: group.name,\n items\n };\n });\n return filter$2(filteredItemGroups, group => group.items.length > 0);\n };\n const convertStringToolbar = strToolbar => {\n const groupsStrings = strToolbar.split('|');\n return map$2(groupsStrings, g => ({ items: g.trim().split(' ') }));\n };\n const isToolbarGroupSettingArray = toolbar => isArrayOf(toolbar, t => has$2(t, 'name') && has$2(t, 'items'));\n const createToolbar = toolbarConfig => {\n const toolbar = toolbarConfig.toolbar;\n const buttons = toolbarConfig.buttons;\n if (toolbar === false) {\n return [];\n } else if (toolbar === undefined || toolbar === true) {\n return removeUnusedDefaults(buttons);\n } else if (isString(toolbar)) {\n return convertStringToolbar(toolbar);\n } else if (isToolbarGroupSettingArray(toolbar)) {\n return toolbar;\n } else {\n console.error('Toolbar type should be string, string[], boolean or ToolbarGroup[]');\n return [];\n }\n };\n const lookupButton = (editor, buttons, toolbarItem, allowToolbarGroups, backstage, prefixes) => get$g(buttons, toolbarItem.toLowerCase()).orThunk(() => prefixes.bind(ps => findMap(ps, prefix => get$g(buttons, prefix + toolbarItem.toLowerCase())))).fold(() => get$g(bespokeButtons, toolbarItem.toLowerCase()).map(r => r(editor, backstage)), spec => {\n if (spec.type === 'grouptoolbarbutton' && !allowToolbarGroups) {\n console.warn(`Ignoring the '${ toolbarItem }' toolbar button. Group toolbar buttons are only supported when using floating toolbar mode and cannot be nested.`);\n return Optional.none();\n } else {\n return extractFrom(spec, backstage, editor);\n }\n });\n const identifyButtons = (editor, toolbarConfig, backstage, prefixes) => {\n const toolbarGroups = createToolbar(toolbarConfig);\n const groups = map$2(toolbarGroups, group => {\n const items = bind$3(group.items, toolbarItem => {\n return toolbarItem.trim().length === 0 ? [] : lookupButton(editor, toolbarConfig.buttons, toolbarItem, toolbarConfig.allowToolbarGroups, backstage, prefixes).toArray();\n });\n return {\n title: Optional.from(editor.translate(group.name)),\n items\n };\n });\n return filter$2(groups, group => group.items.length > 0);\n };\n\n const setToolbar = (editor, uiRefs, rawUiConfig, backstage) => {\n const outerContainer = uiRefs.mainUi.outerContainer;\n const toolbarConfig = rawUiConfig.toolbar;\n const toolbarButtonsConfig = rawUiConfig.buttons;\n if (isArrayOf(toolbarConfig, isString)) {\n const toolbars = toolbarConfig.map(t => {\n const config = {\n toolbar: t,\n buttons: toolbarButtonsConfig,\n allowToolbarGroups: rawUiConfig.allowToolbarGroups\n };\n return identifyButtons(editor, config, backstage, Optional.none());\n });\n OuterContainer.setToolbars(outerContainer, toolbars);\n } else {\n OuterContainer.setToolbar(outerContainer, identifyButtons(editor, rawUiConfig, backstage, Optional.none()));\n }\n };\n\n const detection = detect$1();\n const isiOS12 = detection.os.isiOS() && detection.os.version.major <= 12;\n const setupEvents$1 = (editor, uiRefs) => {\n const {uiMotherships} = uiRefs;\n const dom = editor.dom;\n let contentWindow = editor.getWin();\n const initialDocEle = editor.getDoc().documentElement;\n const lastWindowDimensions = Cell(SugarPosition(contentWindow.innerWidth, contentWindow.innerHeight));\n const lastDocumentDimensions = Cell(SugarPosition(initialDocEle.offsetWidth, initialDocEle.offsetHeight));\n const resizeWindow = () => {\n const outer = lastWindowDimensions.get();\n if (outer.left !== contentWindow.innerWidth || outer.top !== contentWindow.innerHeight) {\n lastWindowDimensions.set(SugarPosition(contentWindow.innerWidth, contentWindow.innerHeight));\n fireResizeContent(editor);\n }\n };\n const resizeDocument = () => {\n const docEle = editor.getDoc().documentElement;\n const inner = lastDocumentDimensions.get();\n if (inner.left !== docEle.offsetWidth || inner.top !== docEle.offsetHeight) {\n lastDocumentDimensions.set(SugarPosition(docEle.offsetWidth, docEle.offsetHeight));\n fireResizeContent(editor);\n }\n };\n const scroll = e => {\n fireScrollContent(editor, e);\n };\n dom.bind(contentWindow, 'resize', resizeWindow);\n dom.bind(contentWindow, 'scroll', scroll);\n const elementLoad = capture(SugarElement.fromDom(editor.getBody()), 'load', resizeDocument);\n editor.on('hide', () => {\n each$1(uiMotherships, m => {\n set$8(m.element, 'display', 'none');\n });\n });\n editor.on('show', () => {\n each$1(uiMotherships, m => {\n remove$6(m.element, 'display');\n });\n });\n editor.on('NodeChange', resizeDocument);\n editor.on('remove', () => {\n elementLoad.unbind();\n dom.unbind(contentWindow, 'resize', resizeWindow);\n dom.unbind(contentWindow, 'scroll', scroll);\n contentWindow = null;\n });\n };\n const attachUiMotherships$1 = (uiRoot, uiRefs) => {\n attachSystem(uiRoot, uiRefs.dialogUi.mothership);\n };\n const render$1 = (editor, uiRefs, rawUiConfig, backstage, args) => {\n const {mainUi, uiMotherships} = uiRefs;\n const lastToolbarWidth = Cell(0);\n const outerContainer = mainUi.outerContainer;\n iframe(editor);\n const eTargetNode = SugarElement.fromDom(args.targetNode);\n const uiRoot = getContentContainer(getRootNode(eTargetNode));\n attachSystemAfter(eTargetNode, mainUi.mothership);\n attachUiMotherships$1(uiRoot, uiRefs);\n editor.on('PostRender', () => {\n OuterContainer.setSidebar(outerContainer, rawUiConfig.sidebar, getSidebarShow(editor));\n setToolbar(editor, uiRefs, rawUiConfig, backstage);\n lastToolbarWidth.set(editor.getWin().innerWidth);\n OuterContainer.setMenubar(outerContainer, identifyMenus(editor, rawUiConfig));\n OuterContainer.setViews(outerContainer, rawUiConfig.views);\n setupEvents$1(editor, uiRefs);\n });\n const socket = OuterContainer.getSocket(outerContainer).getOrDie('Could not find expected socket element');\n if (isiOS12) {\n setAll(socket.element, {\n 'overflow': 'scroll',\n '-webkit-overflow-scrolling': 'touch'\n });\n const limit = first(() => {\n editor.dispatch('ScrollContent');\n }, 20);\n const unbinder = bind(socket.element, 'scroll', limit.throttle);\n editor.on('remove', unbinder.unbind);\n }\n setupReadonlyModeSwitch(editor, uiRefs);\n editor.addCommand('ToggleSidebar', (_ui, value) => {\n OuterContainer.toggleSidebar(outerContainer, value);\n editor.dispatch('ToggleSidebar');\n });\n editor.addQueryValueHandler('ToggleSidebar', () => {\n var _a;\n return (_a = OuterContainer.whichSidebar(outerContainer)) !== null && _a !== void 0 ? _a : '';\n });\n editor.addCommand('ToggleView', (_ui, value) => {\n if (OuterContainer.toggleView(outerContainer, value)) {\n const target = outerContainer.element;\n mainUi.mothership.broadcastOn([dismissPopups()], { target });\n each$1(uiMotherships, m => {\n m.broadcastOn([dismissPopups()], { target });\n });\n if (isNull(OuterContainer.whichView(outerContainer))) {\n editor.focus();\n editor.nodeChanged();\n }\n }\n });\n editor.addQueryValueHandler('ToggleView', () => {\n var _a;\n return (_a = OuterContainer.whichView(outerContainer)) !== null && _a !== void 0 ? _a : '';\n });\n const toolbarMode = getToolbarMode(editor);\n const refreshDrawer = () => {\n OuterContainer.refreshToolbar(uiRefs.mainUi.outerContainer);\n };\n if (toolbarMode === ToolbarMode$1.sliding || toolbarMode === ToolbarMode$1.floating) {\n editor.on('ResizeWindow ResizeEditor ResizeContent', () => {\n const width = editor.getWin().innerWidth;\n if (width !== lastToolbarWidth.get()) {\n refreshDrawer();\n lastToolbarWidth.set(width);\n }\n });\n }\n const api = {\n setEnabled: state => {\n broadcastReadonly(uiRefs, !state);\n },\n isEnabled: () => !Disabling.isDisabled(outerContainer)\n };\n return {\n iframeContainer: socket.element.dom,\n editorContainer: outerContainer.element.dom,\n api\n };\n };\n\n var Iframe = /*#__PURE__*/Object.freeze({\n __proto__: null,\n render: render$1\n });\n\n const parseToInt = val => {\n const re = /^[0-9\\.]+(|px)$/i;\n if (re.test('' + val)) {\n return Optional.some(parseInt('' + val, 10));\n }\n return Optional.none();\n };\n const numToPx = val => isNumber(val) ? val + 'px' : val;\n const calcCappedSize = (size, minSize, maxSize) => {\n const minOverride = minSize.filter(min => size < min);\n const maxOverride = maxSize.filter(max => size > max);\n return minOverride.or(maxOverride).getOr(size);\n };\n\n const getHeight = editor => {\n const baseHeight = getHeightOption(editor);\n const minHeight = getMinHeightOption(editor);\n const maxHeight = getMaxHeightOption(editor);\n return parseToInt(baseHeight).map(height => calcCappedSize(height, minHeight, maxHeight));\n };\n const getHeightWithFallback = editor => {\n const height = getHeight(editor);\n return height.getOr(getHeightOption(editor));\n };\n const getWidth = editor => {\n const baseWidth = getWidthOption(editor);\n const minWidth = getMinWidthOption(editor);\n const maxWidth = getMaxWidthOption(editor);\n return parseToInt(baseWidth).map(width => calcCappedSize(width, minWidth, maxWidth));\n };\n const getWidthWithFallback = editor => {\n const width = getWidth(editor);\n return width.getOr(getWidthOption(editor));\n };\n\n const {ToolbarLocation, ToolbarMode} = Options;\n const InlineHeader = (editor, targetElm, uiRefs, backstage, floatContainer) => {\n const {mainUi, uiMotherships} = uiRefs;\n const DOM = global$7.DOM;\n const useFixedToolbarContainer = useFixedContainer(editor);\n const isSticky = isStickyToolbar(editor);\n const editorMaxWidthOpt = getMaxWidthOption(editor).or(getWidth(editor));\n const headerBackstage = backstage.shared.header;\n const isPositionedAtTop = headerBackstage.isPositionedAtTop;\n const toolbarMode = getToolbarMode(editor);\n const isSplitToolbar = toolbarMode === ToolbarMode.sliding || toolbarMode === ToolbarMode.floating;\n const visible = Cell(false);\n const isVisible = () => visible.get() && !editor.removed;\n const calcToolbarOffset = toolbar => isSplitToolbar ? toolbar.fold(constant$1(0), tbar => tbar.components().length > 1 ? get$d(tbar.components()[1].element) : 0) : 0;\n const calcMode = container => {\n switch (getToolbarLocation(editor)) {\n case ToolbarLocation.auto:\n const toolbar = OuterContainer.getToolbar(mainUi.outerContainer);\n const offset = calcToolbarOffset(toolbar);\n const toolbarHeight = get$d(container.element) - offset;\n const targetBounds = box$1(targetElm);\n const roomAtTop = targetBounds.y > toolbarHeight;\n if (roomAtTop) {\n return 'top';\n } else {\n const doc = documentElement(targetElm);\n const docHeight = Math.max(doc.dom.scrollHeight, get$d(doc));\n const roomAtBottom = targetBounds.bottom < docHeight - toolbarHeight;\n if (roomAtBottom) {\n return 'bottom';\n } else {\n const winBounds = win();\n const isRoomAtBottomViewport = winBounds.bottom < targetBounds.bottom - toolbarHeight;\n return isRoomAtBottomViewport ? 'bottom' : 'top';\n }\n }\n case ToolbarLocation.bottom:\n return 'bottom';\n case ToolbarLocation.top:\n default:\n return 'top';\n }\n };\n const setupMode = mode => {\n floatContainer.on(container => {\n Docking.setModes(container, [mode]);\n headerBackstage.setDockingMode(mode);\n const verticalDir = isPositionedAtTop() ? AttributeValue.TopToBottom : AttributeValue.BottomToTop;\n set$9(container.element, Attribute, verticalDir);\n });\n };\n const updateChromeWidth = () => {\n floatContainer.on(container => {\n const maxWidth = editorMaxWidthOpt.getOrThunk(() => {\n const bodyMargin = parseToInt(get$e(body(), 'margin-left')).getOr(0);\n return get$c(body()) - absolute$3(targetElm).left + bodyMargin;\n });\n set$8(container.element, 'max-width', maxWidth + 'px');\n });\n };\n const updateChromePosition = () => {\n floatContainer.on(container => {\n const toolbar = OuterContainer.getToolbar(mainUi.outerContainer);\n const offset = calcToolbarOffset(toolbar);\n const targetBounds = box$1(targetElm);\n const top = isPositionedAtTop() ? Math.max(targetBounds.y - get$d(container.element) + offset, 0) : targetBounds.bottom;\n setAll(mainUi.outerContainer.element, {\n position: 'absolute',\n top: Math.round(top) + 'px',\n left: Math.round(targetBounds.x) + 'px'\n });\n });\n };\n const repositionPopups$1 = () => {\n each$1(uiMotherships, m => {\n m.broadcastOn([repositionPopups()], {});\n });\n };\n const updateChromeUi = (resetDocking = false) => {\n if (!isVisible()) {\n return;\n }\n if (!useFixedToolbarContainer) {\n updateChromeWidth();\n }\n if (isSplitToolbar) {\n OuterContainer.refreshToolbar(mainUi.outerContainer);\n }\n if (!useFixedToolbarContainer) {\n updateChromePosition();\n }\n if (isSticky) {\n const action = resetDocking ? Docking.reset : Docking.refresh;\n floatContainer.on(action);\n }\n repositionPopups$1();\n };\n const updateMode = (updateUi = true) => {\n if (useFixedToolbarContainer || !isSticky || !isVisible()) {\n return;\n }\n floatContainer.on(container => {\n const currentMode = headerBackstage.getDockingMode();\n const newMode = calcMode(container);\n if (newMode !== currentMode) {\n setupMode(newMode);\n if (updateUi) {\n updateChromeUi(true);\n }\n }\n });\n };\n const show = () => {\n visible.set(true);\n set$8(mainUi.outerContainer.element, 'display', 'flex');\n DOM.addClass(editor.getBody(), 'mce-edit-focus');\n each$1(uiMotherships, m => {\n remove$6(m.element, 'display');\n });\n updateMode(false);\n updateChromeUi();\n };\n const hide = () => {\n visible.set(false);\n set$8(mainUi.outerContainer.element, 'display', 'none');\n DOM.removeClass(editor.getBody(), 'mce-edit-focus');\n each$1(uiMotherships, m => {\n set$8(m.element, 'display', 'none');\n });\n };\n return {\n isVisible,\n isPositionedAtTop,\n show,\n hide,\n update: updateChromeUi,\n updateMode,\n repositionPopups: repositionPopups$1\n };\n };\n\n const getTargetPosAndBounds = (targetElm, isToolbarTop) => {\n const bounds = box$1(targetElm);\n return {\n pos: isToolbarTop ? bounds.y : bounds.bottom,\n bounds\n };\n };\n const setupEvents = (editor, targetElm, ui, toolbarPersist) => {\n const prevPosAndBounds = Cell(getTargetPosAndBounds(targetElm, ui.isPositionedAtTop()));\n const resizeContent = e => {\n const {pos, bounds} = getTargetPosAndBounds(targetElm, ui.isPositionedAtTop());\n const {\n pos: prevPos,\n bounds: prevBounds\n } = prevPosAndBounds.get();\n const hasResized = bounds.height !== prevBounds.height || bounds.width !== prevBounds.width;\n prevPosAndBounds.set({\n pos,\n bounds\n });\n if (hasResized) {\n fireResizeContent(editor, e);\n }\n if (ui.isVisible()) {\n if (prevPos !== pos) {\n ui.update(true);\n } else if (hasResized) {\n ui.updateMode();\n ui.repositionPopups();\n }\n }\n };\n if (!toolbarPersist) {\n editor.on('activate', ui.show);\n editor.on('deactivate', ui.hide);\n }\n editor.on('SkinLoaded ResizeWindow', () => ui.update(true));\n editor.on('NodeChange keydown', e => {\n requestAnimationFrame(() => resizeContent(e));\n });\n editor.on('ScrollWindow', () => ui.updateMode());\n const elementLoad = unbindable();\n elementLoad.set(capture(SugarElement.fromDom(editor.getBody()), 'load', e => resizeContent(e.raw)));\n editor.on('remove', () => {\n elementLoad.clear();\n });\n };\n const attachUiMotherships = (uiRoot, uiRefs) => {\n attachSystem(uiRoot, uiRefs.dialogUi.mothership);\n };\n const render = (editor, uiRefs, rawUiConfig, backstage, args) => {\n const {mainUi} = uiRefs;\n const floatContainer = value$2();\n const targetElm = SugarElement.fromDom(args.targetNode);\n const ui = InlineHeader(editor, targetElm, uiRefs, backstage, floatContainer);\n const toolbarPersist = isToolbarPersist(editor);\n inline(editor);\n const render = () => {\n if (floatContainer.isSet()) {\n ui.show();\n return;\n }\n floatContainer.set(OuterContainer.getHeader(mainUi.outerContainer).getOrDie());\n const uiContainer = getUiContainer(editor);\n attachSystem(uiContainer, mainUi.mothership);\n attachUiMotherships(uiContainer, uiRefs);\n setToolbar(editor, uiRefs, rawUiConfig, backstage);\n OuterContainer.setMenubar(mainUi.outerContainer, identifyMenus(editor, rawUiConfig));\n ui.show();\n setupEvents(editor, targetElm, ui, toolbarPersist);\n editor.nodeChanged();\n };\n editor.on('show', render);\n editor.on('hide', ui.hide);\n if (!toolbarPersist) {\n editor.on('focus', render);\n editor.on('blur', ui.hide);\n }\n editor.on('init', () => {\n if (editor.hasFocus() || toolbarPersist) {\n render();\n }\n });\n setupReadonlyModeSwitch(editor, uiRefs);\n const api = {\n show: render,\n hide: ui.hide,\n setEnabled: state => {\n broadcastReadonly(uiRefs, !state);\n },\n isEnabled: () => !Disabling.isDisabled(mainUi.outerContainer)\n };\n return {\n editorContainer: mainUi.outerContainer.element.dom,\n api\n };\n };\n\n var Inline = /*#__PURE__*/Object.freeze({\n __proto__: null,\n render: render\n });\n\n const LazyUiReferences = () => {\n const dialogUi = value$2();\n const popupUi = value$2();\n const mainUi = value$2();\n const setupDialogUi = ui => {\n dialogUi.set(ui);\n };\n const lazyGetInOuterOrDie = (label, f) => () => mainUi.get().bind(oc => f(oc.outerContainer)).getOrDie(`Could not find ${ label } element in OuterContainer`);\n return {\n dialogUi,\n popupUi,\n mainUi,\n getUiMotherships: () => [...dialogUi.get().map(e => e.mothership).toArray()],\n setupDialogUi,\n lazyGetInOuterOrDie\n };\n };\n\n const showContextToolbarEvent = 'contexttoolbar-show';\n const hideContextToolbarEvent = 'contexttoolbar-hide';\n\n const getFormApi = input => ({\n hide: () => emit(input, sandboxClose()),\n getValue: () => Representing.getValue(input)\n });\n const runOnExecute = (memInput, original) => run$1(internalToolbarButtonExecute, (comp, se) => {\n const input = memInput.get(comp);\n const formApi = getFormApi(input);\n original.onAction(formApi, se.event.buttonApi);\n });\n const renderContextButton = (memInput, button, providers) => {\n const {primary, ...rest} = button.original;\n const bridged = getOrDie(createToolbarButton({\n ...rest,\n type: 'button',\n onAction: noop\n }));\n return renderToolbarButtonWith(bridged, providers, [runOnExecute(memInput, button)]);\n };\n const renderContextToggleButton = (memInput, button, providers) => {\n const {primary, ...rest} = button.original;\n const bridged = getOrDie(createToggleButton({\n ...rest,\n type: 'togglebutton',\n onAction: noop\n }));\n return renderToolbarToggleButtonWith(bridged, providers, [runOnExecute(memInput, button)]);\n };\n const isToggleButton = button => button.type === 'contextformtogglebutton';\n const generateOne = (memInput, button, providersBackstage) => {\n if (isToggleButton(button)) {\n return renderContextToggleButton(memInput, button, providersBackstage);\n } else {\n return renderContextButton(memInput, button, providersBackstage);\n }\n };\n const generate = (memInput, buttons, providersBackstage) => {\n const mementos = map$2(buttons, button => record(generateOne(memInput, button, providersBackstage)));\n const asSpecs = () => map$2(mementos, mem => mem.asSpec());\n const findPrimary = compInSystem => findMap(buttons, (button, i) => {\n if (button.primary) {\n return Optional.from(mementos[i]).bind(mem => mem.getOpt(compInSystem)).filter(not(Disabling.isDisabled));\n } else {\n return Optional.none();\n }\n });\n return {\n asSpecs,\n findPrimary\n };\n };\n\n const buildInitGroups = (ctx, providers) => {\n const inputAttributes = ctx.label.fold(() => ({}), label => ({ 'aria-label': label }));\n const memInput = record(Input.sketch({\n inputClasses: [\n 'tox-toolbar-textfield',\n 'tox-toolbar-nav-js'\n ],\n data: ctx.initValue(),\n inputAttributes,\n selectOnFocus: true,\n inputBehaviours: derive$1([Keying.config({\n mode: 'special',\n onEnter: input => commands.findPrimary(input).map(primary => {\n emitExecute(primary);\n return true;\n }),\n onLeft: (comp, se) => {\n se.cut();\n return Optional.none();\n },\n onRight: (comp, se) => {\n se.cut();\n return Optional.none();\n }\n })])\n }));\n const commands = generate(memInput, ctx.commands, providers);\n return [\n {\n title: Optional.none(),\n items: [memInput.asSpec()]\n },\n {\n title: Optional.none(),\n items: commands.asSpecs()\n }\n ];\n };\n const renderContextForm = (toolbarType, ctx, providers) => renderToolbar({\n type: toolbarType,\n uid: generate$6('context-toolbar'),\n initGroups: buildInitGroups(ctx, providers),\n onEscape: Optional.none,\n cyclicKeying: true,\n providers\n });\n const ContextForm = {\n renderContextForm,\n buildInitGroups\n };\n\n const isVerticalOverlap = (a, b, threshold) => b.bottom - a.y >= threshold && a.bottom - b.y >= threshold;\n const getRangeRect = rng => {\n const rect = rng.getBoundingClientRect();\n if (rect.height <= 0 && rect.width <= 0) {\n const leaf$1 = leaf(SugarElement.fromDom(rng.startContainer), rng.startOffset).element;\n const elm = isText(leaf$1) ? parent(leaf$1) : Optional.some(leaf$1);\n return elm.filter(isElement$1).map(e => e.dom.getBoundingClientRect()).getOr(rect);\n } else {\n return rect;\n }\n };\n const getSelectionBounds = editor => {\n const rng = editor.selection.getRng();\n const rect = getRangeRect(rng);\n if (editor.inline) {\n const scroll = get$b();\n return bounds(scroll.left + rect.left, scroll.top + rect.top, rect.width, rect.height);\n } else {\n const bodyPos = absolute$2(SugarElement.fromDom(editor.getBody()));\n return bounds(bodyPos.x + rect.left, bodyPos.y + rect.top, rect.width, rect.height);\n }\n };\n const getAnchorElementBounds = (editor, lastElement) => lastElement.filter(elem => inBody(elem) && isHTMLElement(elem)).map(absolute$2).getOrThunk(() => getSelectionBounds(editor));\n const getHorizontalBounds = (contentAreaBox, viewportBounds, margin) => {\n const x = Math.max(contentAreaBox.x + margin, viewportBounds.x);\n const right = Math.min(contentAreaBox.right - margin, viewportBounds.right);\n return {\n x,\n width: right - x\n };\n };\n const getVerticalBounds = (editor, contentAreaBox, viewportBounds, isToolbarLocationTop, toolbarType, margin) => {\n const container = SugarElement.fromDom(editor.getContainer());\n const header = descendant(container, '.tox-editor-header').getOr(container);\n const headerBox = box$1(header);\n const isToolbarBelowContentArea = headerBox.y >= contentAreaBox.bottom;\n const isToolbarAbove = isToolbarLocationTop && !isToolbarBelowContentArea;\n if (editor.inline && isToolbarAbove) {\n return {\n y: Math.max(headerBox.bottom + margin, viewportBounds.y),\n bottom: viewportBounds.bottom\n };\n }\n if (editor.inline && !isToolbarAbove) {\n return {\n y: viewportBounds.y,\n bottom: Math.min(headerBox.y - margin, viewportBounds.bottom)\n };\n }\n const containerBounds = toolbarType === 'line' ? box$1(container) : contentAreaBox;\n if (isToolbarAbove) {\n return {\n y: Math.max(headerBox.bottom + margin, viewportBounds.y),\n bottom: Math.min(containerBounds.bottom - margin, viewportBounds.bottom)\n };\n }\n return {\n y: Math.max(containerBounds.y + margin, viewportBounds.y),\n bottom: Math.min(headerBox.y - margin, viewportBounds.bottom)\n };\n };\n const getContextToolbarBounds = (editor, sharedBackstage, toolbarType, margin = 0) => {\n const viewportBounds = getBounds$3(window);\n const contentAreaBox = box$1(SugarElement.fromDom(editor.getContentAreaContainer()));\n const toolbarOrMenubarEnabled = isMenubarEnabled(editor) || isToolbarEnabled(editor) || isMultipleToolbars(editor);\n const {x, width} = getHorizontalBounds(contentAreaBox, viewportBounds, margin);\n if (editor.inline && !toolbarOrMenubarEnabled) {\n return bounds(x, viewportBounds.y, width, viewportBounds.height);\n } else {\n const isToolbarTop = sharedBackstage.header.isPositionedAtTop();\n const {y, bottom} = getVerticalBounds(editor, contentAreaBox, viewportBounds, isToolbarTop, toolbarType, margin);\n return bounds(x, y, width, bottom - y);\n }\n };\n\n const bubbleSize$1 = 12;\n const bubbleAlignments$1 = {\n valignCentre: [],\n alignCentre: [],\n alignLeft: ['tox-pop--align-left'],\n alignRight: ['tox-pop--align-right'],\n right: ['tox-pop--right'],\n left: ['tox-pop--left'],\n bottom: ['tox-pop--bottom'],\n top: ['tox-pop--top'],\n inset: ['tox-pop--inset']\n };\n const anchorOverrides = {\n maxHeightFunction: expandable$1(),\n maxWidthFunction: expandable()\n };\n const isEntireElementSelected = (editor, elem) => {\n const rng = editor.selection.getRng();\n const leaf$1 = leaf(SugarElement.fromDom(rng.startContainer), rng.startOffset);\n return rng.startContainer === rng.endContainer && rng.startOffset === rng.endOffset - 1 && eq(leaf$1.element, elem);\n };\n const preservePosition = (elem, position, f) => {\n const currentPosition = getRaw(elem, 'position');\n set$8(elem, 'position', position);\n const result = f(elem);\n currentPosition.each(pos => set$8(elem, 'position', pos));\n return result;\n };\n const shouldUseInsetLayouts = position => position === 'node';\n const determineInsetLayout = (editor, contextbar, elem, data, bounds) => {\n const selectionBounds = getSelectionBounds(editor);\n const isSameAnchorElement = data.lastElement().exists(prev => eq(elem, prev));\n if (isEntireElementSelected(editor, elem)) {\n return isSameAnchorElement ? preserve : north;\n } else if (isSameAnchorElement) {\n return preservePosition(contextbar, data.getMode(), () => {\n const isOverlapping = isVerticalOverlap(selectionBounds, box$1(contextbar), -20);\n return isOverlapping && !data.isReposition() ? flip : preserve;\n });\n } else {\n const yBounds = data.getMode() === 'fixed' ? bounds.y + get$b().top : bounds.y;\n const contextbarHeight = get$d(contextbar) + bubbleSize$1;\n return yBounds + contextbarHeight <= selectionBounds.y ? north : south;\n }\n };\n const getAnchorSpec$2 = (editor, mobile, data, position) => {\n const smartInsetLayout = elem => (anchor, element, bubbles, placee, bounds) => {\n const layout = determineInsetLayout(editor, placee, elem, data, bounds);\n const newAnchor = {\n ...anchor,\n y: bounds.y,\n height: bounds.height\n };\n return {\n ...layout(newAnchor, element, bubbles, placee, bounds),\n alwaysFit: true\n };\n };\n const getInsetLayouts = elem => shouldUseInsetLayouts(position) ? [smartInsetLayout(elem)] : [];\n const desktopAnchorSpecLayouts = {\n onLtr: elem => [\n north$2,\n south$2,\n northeast$2,\n southeast$2,\n northwest$2,\n southwest$2\n ].concat(getInsetLayouts(elem)),\n onRtl: elem => [\n north$2,\n south$2,\n northwest$2,\n southwest$2,\n northeast$2,\n southeast$2\n ].concat(getInsetLayouts(elem))\n };\n const mobileAnchorSpecLayouts = {\n onLtr: elem => [\n south$2,\n southeast$2,\n southwest$2,\n northeast$2,\n northwest$2,\n north$2\n ].concat(getInsetLayouts(elem)),\n onRtl: elem => [\n south$2,\n southwest$2,\n southeast$2,\n northwest$2,\n northeast$2,\n north$2\n ].concat(getInsetLayouts(elem))\n };\n return mobile ? mobileAnchorSpecLayouts : desktopAnchorSpecLayouts;\n };\n const getAnchorLayout = (editor, position, isTouch, data) => {\n if (position === 'line') {\n return {\n bubble: nu$5(bubbleSize$1, 0, bubbleAlignments$1),\n layouts: {\n onLtr: () => [east$2],\n onRtl: () => [west$2]\n },\n overrides: anchorOverrides\n };\n } else {\n return {\n bubble: nu$5(0, bubbleSize$1, bubbleAlignments$1, 1 / bubbleSize$1),\n layouts: getAnchorSpec$2(editor, isTouch, data, position),\n overrides: anchorOverrides\n };\n }\n };\n\n const matchTargetWith = (elem, candidates) => {\n const ctxs = filter$2(candidates, toolbarApi => toolbarApi.predicate(elem.dom));\n const {pass, fail} = partition$3(ctxs, t => t.type === 'contexttoolbar');\n return {\n contextToolbars: pass,\n contextForms: fail\n };\n };\n const filterByPositionForStartNode = toolbars => {\n if (toolbars.length <= 1) {\n return toolbars;\n } else {\n const doesPositionExist = value => exists(toolbars, t => t.position === value);\n const filterToolbarsByPosition = value => filter$2(toolbars, t => t.position === value);\n const hasSelectionToolbars = doesPositionExist('selection');\n const hasNodeToolbars = doesPositionExist('node');\n if (hasSelectionToolbars || hasNodeToolbars) {\n if (hasNodeToolbars && hasSelectionToolbars) {\n const nodeToolbars = filterToolbarsByPosition('node');\n const selectionToolbars = map$2(filterToolbarsByPosition('selection'), t => ({\n ...t,\n position: 'node'\n }));\n return nodeToolbars.concat(selectionToolbars);\n } else {\n return hasSelectionToolbars ? filterToolbarsByPosition('selection') : filterToolbarsByPosition('node');\n }\n } else {\n return filterToolbarsByPosition('line');\n }\n }\n };\n const filterByPositionForAncestorNode = toolbars => {\n if (toolbars.length <= 1) {\n return toolbars;\n } else {\n const findPosition = value => find$5(toolbars, t => t.position === value);\n const basePosition = findPosition('selection').orThunk(() => findPosition('node')).orThunk(() => findPosition('line')).map(t => t.position);\n return basePosition.fold(() => [], pos => filter$2(toolbars, t => t.position === pos));\n }\n };\n const matchStartNode = (elem, nodeCandidates, editorCandidates) => {\n const nodeMatches = matchTargetWith(elem, nodeCandidates);\n if (nodeMatches.contextForms.length > 0) {\n return Optional.some({\n elem,\n toolbars: [nodeMatches.contextForms[0]]\n });\n } else {\n const editorMatches = matchTargetWith(elem, editorCandidates);\n if (editorMatches.contextForms.length > 0) {\n return Optional.some({\n elem,\n toolbars: [editorMatches.contextForms[0]]\n });\n } else if (nodeMatches.contextToolbars.length > 0 || editorMatches.contextToolbars.length > 0) {\n const toolbars = filterByPositionForStartNode(nodeMatches.contextToolbars.concat(editorMatches.contextToolbars));\n return Optional.some({\n elem,\n toolbars\n });\n } else {\n return Optional.none();\n }\n }\n };\n const matchAncestor = (isRoot, startNode, scopes) => {\n if (isRoot(startNode)) {\n return Optional.none();\n } else {\n return ancestor$2(startNode, ancestorElem => {\n if (isElement$1(ancestorElem)) {\n const {contextToolbars, contextForms} = matchTargetWith(ancestorElem, scopes.inNodeScope);\n const toolbars = contextForms.length > 0 ? contextForms : filterByPositionForAncestorNode(contextToolbars);\n return toolbars.length > 0 ? Optional.some({\n elem: ancestorElem,\n toolbars\n }) : Optional.none();\n } else {\n return Optional.none();\n }\n }, isRoot);\n }\n };\n const lookup$1 = (scopes, editor) => {\n const rootElem = SugarElement.fromDom(editor.getBody());\n const isRoot = elem => eq(elem, rootElem);\n const isOutsideRoot = startNode => !isRoot(startNode) && !contains(rootElem, startNode);\n const startNode = SugarElement.fromDom(editor.selection.getNode());\n if (isOutsideRoot(startNode)) {\n return Optional.none();\n }\n return matchStartNode(startNode, scopes.inNodeScope, scopes.inEditorScope).orThunk(() => matchAncestor(isRoot, startNode, scopes));\n };\n\n const categorise = (contextToolbars, navigate) => {\n const forms = {};\n const inNodeScope = [];\n const inEditorScope = [];\n const formNavigators = {};\n const lookupTable = {};\n const registerForm = (key, toolbarSpec) => {\n const contextForm = getOrDie(createContextForm(toolbarSpec));\n forms[key] = contextForm;\n contextForm.launch.map(launch => {\n formNavigators['form:' + key + ''] = {\n ...toolbarSpec.launch,\n type: launch.type === 'contextformtogglebutton' ? 'togglebutton' : 'button',\n onAction: () => {\n navigate(contextForm);\n }\n };\n });\n if (contextForm.scope === 'editor') {\n inEditorScope.push(contextForm);\n } else {\n inNodeScope.push(contextForm);\n }\n lookupTable[key] = contextForm;\n };\n const registerToolbar = (key, toolbarSpec) => {\n createContextToolbar(toolbarSpec).each(contextToolbar => {\n if (toolbarSpec.scope === 'editor') {\n inEditorScope.push(contextToolbar);\n } else {\n inNodeScope.push(contextToolbar);\n }\n lookupTable[key] = contextToolbar;\n });\n };\n const keys$1 = keys(contextToolbars);\n each$1(keys$1, key => {\n const toolbarApi = contextToolbars[key];\n if (toolbarApi.type === 'contextform') {\n registerForm(key, toolbarApi);\n } else if (toolbarApi.type === 'contexttoolbar') {\n registerToolbar(key, toolbarApi);\n }\n });\n return {\n forms,\n inNodeScope,\n inEditorScope,\n lookupTable,\n formNavigators\n };\n };\n\n const forwardSlideEvent = generate$6('forward-slide');\n const backSlideEvent = generate$6('backward-slide');\n const changeSlideEvent = generate$6('change-slide-event');\n const resizingClass = 'tox-pop--resizing';\n const renderContextToolbar = spec => {\n const stack = Cell([]);\n return InlineView.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-pop']\n },\n fireDismissalEventInstead: { event: 'doNotDismissYet' },\n onShow: comp => {\n stack.set([]);\n InlineView.getContent(comp).each(c => {\n remove$6(c.element, 'visibility');\n });\n remove$2(comp.element, resizingClass);\n remove$6(comp.element, 'width');\n },\n inlineBehaviours: derive$1([\n config('context-toolbar-events', [\n runOnSource(transitionend(), (comp, se) => {\n if (se.event.raw.propertyName === 'width') {\n remove$2(comp.element, resizingClass);\n remove$6(comp.element, 'width');\n }\n }),\n run$1(changeSlideEvent, (comp, se) => {\n const elem = comp.element;\n remove$6(elem, 'width');\n const currentWidth = get$c(elem);\n InlineView.setContent(comp, se.event.contents);\n add$2(elem, resizingClass);\n const newWidth = get$c(elem);\n set$8(elem, 'width', currentWidth + 'px');\n InlineView.getContent(comp).each(newContents => {\n se.event.focus.bind(f => {\n focus$3(f);\n return search(elem);\n }).orThunk(() => {\n Keying.focusIn(newContents);\n return active$1(getRootNode(elem));\n });\n });\n setTimeout(() => {\n set$8(comp.element, 'width', newWidth + 'px');\n }, 0);\n }),\n run$1(forwardSlideEvent, (comp, se) => {\n InlineView.getContent(comp).each(oldContents => {\n stack.set(stack.get().concat([{\n bar: oldContents,\n focus: active$1(getRootNode(comp.element))\n }]));\n });\n emitWith(comp, changeSlideEvent, {\n contents: se.event.forwardContents,\n focus: Optional.none()\n });\n }),\n run$1(backSlideEvent, (comp, _se) => {\n last$1(stack.get()).each(last => {\n stack.set(stack.get().slice(0, stack.get().length - 1));\n emitWith(comp, changeSlideEvent, {\n contents: premade(last.bar),\n focus: last.focus\n });\n });\n })\n ]),\n Keying.config({\n mode: 'special',\n onEscape: comp => last$1(stack.get()).fold(() => spec.onEscape(), _ => {\n emit(comp, backSlideEvent);\n return Optional.some(true);\n })\n })\n ]),\n lazySink: () => Result.value(spec.sink)\n });\n };\n\n const transitionClass = 'tox-pop--transition';\n const register$9 = (editor, registryContextToolbars, sink, extras) => {\n const backstage = extras.backstage;\n const sharedBackstage = backstage.shared;\n const isTouch = detect$1().deviceType.isTouch;\n const lastElement = value$2();\n const lastTrigger = value$2();\n const lastContextPosition = value$2();\n const contextbar = build$1(renderContextToolbar({\n sink,\n onEscape: () => {\n editor.focus();\n return Optional.some(true);\n }\n }));\n const getBounds = () => {\n const position = lastContextPosition.get().getOr('node');\n const margin = shouldUseInsetLayouts(position) ? 1 : 0;\n return getContextToolbarBounds(editor, sharedBackstage, position, margin);\n };\n const canLaunchToolbar = () => {\n return !editor.removed && !(isTouch() && backstage.isContextMenuOpen());\n };\n const isSameLaunchElement = elem => is$1(lift2(elem, lastElement.get(), eq), true);\n const shouldContextToolbarHide = () => {\n if (!canLaunchToolbar()) {\n return true;\n } else {\n const contextToolbarBounds = getBounds();\n const anchorBounds = is$1(lastContextPosition.get(), 'node') ? getAnchorElementBounds(editor, lastElement.get()) : getSelectionBounds(editor);\n return contextToolbarBounds.height <= 0 || !isVerticalOverlap(anchorBounds, contextToolbarBounds, 0.01);\n }\n };\n const close = () => {\n lastElement.clear();\n lastTrigger.clear();\n lastContextPosition.clear();\n InlineView.hide(contextbar);\n };\n const hideOrRepositionIfNecessary = () => {\n if (InlineView.isOpen(contextbar)) {\n const contextBarEle = contextbar.element;\n remove$6(contextBarEle, 'display');\n if (shouldContextToolbarHide()) {\n set$8(contextBarEle, 'display', 'none');\n } else {\n lastTrigger.set(0);\n InlineView.reposition(contextbar);\n }\n }\n };\n const wrapInPopDialog = toolbarSpec => ({\n dom: {\n tag: 'div',\n classes: ['tox-pop__dialog']\n },\n components: [toolbarSpec],\n behaviours: derive$1([\n Keying.config({ mode: 'acyclic' }),\n config('pop-dialog-wrap-events', [\n runOnAttached(comp => {\n editor.shortcuts.add('ctrl+F9', 'focus statusbar', () => Keying.focusIn(comp));\n }),\n runOnDetached(_comp => {\n editor.shortcuts.remove('ctrl+F9');\n })\n ])\n ])\n });\n const getScopes = cached(() => categorise(registryContextToolbars, toolbarApi => {\n const alloySpec = buildToolbar([toolbarApi]);\n emitWith(contextbar, forwardSlideEvent, { forwardContents: wrapInPopDialog(alloySpec) });\n }));\n const buildContextToolbarGroups = (allButtons, ctx) => identifyButtons(editor, {\n buttons: allButtons,\n toolbar: ctx.items,\n allowToolbarGroups: false\n }, extras.backstage, Optional.some(['form:']));\n const buildContextFormGroups = (ctx, providers) => ContextForm.buildInitGroups(ctx, providers);\n const buildToolbar = toolbars => {\n const {buttons} = editor.ui.registry.getAll();\n const scopes = getScopes();\n const allButtons = {\n ...buttons,\n ...scopes.formNavigators\n };\n const toolbarType = getToolbarMode(editor) === ToolbarMode$1.scrolling ? ToolbarMode$1.scrolling : ToolbarMode$1.default;\n const initGroups = flatten(map$2(toolbars, ctx => ctx.type === 'contexttoolbar' ? buildContextToolbarGroups(allButtons, ctx) : buildContextFormGroups(ctx, sharedBackstage.providers)));\n return renderToolbar({\n type: toolbarType,\n uid: generate$6('context-toolbar'),\n initGroups,\n onEscape: Optional.none,\n cyclicKeying: true,\n providers: sharedBackstage.providers\n });\n };\n const getAnchor = (position, element) => {\n const anchorage = position === 'node' ? sharedBackstage.anchors.node(element) : sharedBackstage.anchors.cursor();\n const anchorLayout = getAnchorLayout(editor, position, isTouch(), {\n lastElement: lastElement.get,\n isReposition: () => is$1(lastTrigger.get(), 0),\n getMode: () => Positioning.getMode(sink)\n });\n return deepMerge(anchorage, anchorLayout);\n };\n const launchContext = (toolbarApi, elem) => {\n launchContextToolbar.cancel();\n if (!canLaunchToolbar()) {\n return;\n }\n const toolbarSpec = buildToolbar(toolbarApi);\n const position = toolbarApi[0].position;\n const anchor = getAnchor(position, elem);\n lastContextPosition.set(position);\n lastTrigger.set(1);\n const contextBarEle = contextbar.element;\n remove$6(contextBarEle, 'display');\n if (!isSameLaunchElement(elem)) {\n remove$2(contextBarEle, transitionClass);\n Positioning.reset(sink, contextbar);\n }\n InlineView.showWithinBounds(contextbar, wrapInPopDialog(toolbarSpec), {\n anchor,\n transition: {\n classes: [transitionClass],\n mode: 'placement'\n }\n }, () => Optional.some(getBounds()));\n elem.fold(lastElement.clear, lastElement.set);\n if (shouldContextToolbarHide()) {\n set$8(contextBarEle, 'display', 'none');\n }\n };\n const launchContextToolbar = last(() => {\n if (!editor.hasFocus() || editor.removed) {\n return;\n }\n if (has(contextbar.element, transitionClass)) {\n launchContextToolbar.throttle();\n } else {\n const scopes = getScopes();\n lookup$1(scopes, editor).fold(close, info => {\n launchContext(info.toolbars, Optional.some(info.elem));\n });\n }\n }, 17);\n editor.on('init', () => {\n editor.on('remove', close);\n editor.on('ScrollContent ScrollWindow ObjectResized ResizeEditor longpress', hideOrRepositionIfNecessary);\n editor.on('click keyup focus SetContent', launchContextToolbar.throttle);\n editor.on(hideContextToolbarEvent, close);\n editor.on(showContextToolbarEvent, e => {\n const scopes = getScopes();\n get$g(scopes.lookupTable, e.toolbarKey).each(ctx => {\n launchContext([ctx], someIf(e.target !== editor, e.target));\n InlineView.getContent(contextbar).each(Keying.focusIn);\n });\n });\n editor.on('focusout', _e => {\n global$9.setEditorTimeout(editor, () => {\n if (search(sink.element).isNone() && search(contextbar.element).isNone()) {\n close();\n }\n }, 0);\n });\n editor.on('SwitchMode', () => {\n if (editor.mode.isReadOnly()) {\n close();\n }\n });\n editor.on('AfterProgressState', event => {\n if (event.state) {\n close();\n } else if (editor.hasFocus()) {\n launchContextToolbar.throttle();\n }\n });\n editor.on('NodeChange', _e => {\n search(contextbar.element).fold(launchContextToolbar.throttle, noop);\n });\n });\n };\n\n const register$8 = editor => {\n const alignToolbarButtons = [\n {\n name: 'alignleft',\n text: 'Align left',\n cmd: 'JustifyLeft',\n icon: 'align-left'\n },\n {\n name: 'aligncenter',\n text: 'Align center',\n cmd: 'JustifyCenter',\n icon: 'align-center'\n },\n {\n name: 'alignright',\n text: 'Align right',\n cmd: 'JustifyRight',\n icon: 'align-right'\n },\n {\n name: 'alignjustify',\n text: 'Justify',\n cmd: 'JustifyFull',\n icon: 'align-justify'\n }\n ];\n each$1(alignToolbarButtons, item => {\n editor.ui.registry.addToggleButton(item.name, {\n tooltip: item.text,\n icon: item.icon,\n onAction: onActionExecCommand(editor, item.cmd),\n onSetup: onSetupFormatToggle(editor, item.name)\n });\n });\n editor.ui.registry.addButton('alignnone', {\n tooltip: 'No alignment',\n icon: 'align-none',\n onAction: onActionExecCommand(editor, 'JustifyNone')\n });\n };\n\n const units = {\n unsupportedLength: [\n 'em',\n 'ex',\n 'cap',\n 'ch',\n 'ic',\n 'rem',\n 'lh',\n 'rlh',\n 'vw',\n 'vh',\n 'vi',\n 'vb',\n 'vmin',\n 'vmax',\n 'cm',\n 'mm',\n 'Q',\n 'in',\n 'pc',\n 'pt',\n 'px'\n ],\n fixed: [\n 'px',\n 'pt'\n ],\n relative: ['%'],\n empty: ['']\n };\n const pattern = (() => {\n const decimalDigits = '[0-9]+';\n const signedInteger = '[+-]?' + decimalDigits;\n const exponentPart = '[eE]' + signedInteger;\n const dot = '\\\\.';\n const opt = input => `(?:${ input })?`;\n const unsignedDecimalLiteral = [\n 'Infinity',\n decimalDigits + dot + opt(decimalDigits) + opt(exponentPart),\n dot + decimalDigits + opt(exponentPart),\n decimalDigits + opt(exponentPart)\n ].join('|');\n const float = `[+-]?(?:${ unsignedDecimalLiteral })`;\n return new RegExp(`^(${ float })(.*)$`);\n })();\n const isUnit = (unit, accepted) => exists(accepted, acc => exists(units[acc], check => unit === check));\n const parse = (input, accepted) => {\n const match = Optional.from(pattern.exec(input));\n return match.bind(array => {\n const value = Number(array[1]);\n const unitRaw = array[2];\n if (isUnit(unitRaw, accepted)) {\n return Optional.some({\n value,\n unit: unitRaw\n });\n } else {\n return Optional.none();\n }\n });\n };\n const normalise = (input, accepted) => parse(input, accepted).map(({value, unit}) => value + unit);\n\n const registerController = (editor, spec) => {\n const getMenuItems = () => {\n const options = spec.getOptions(editor);\n const initial = spec.getCurrent(editor).map(spec.hash);\n const current = value$2();\n return map$2(options, value => ({\n type: 'togglemenuitem',\n text: spec.display(value),\n onSetup: api => {\n const setActive = active => {\n if (active) {\n current.on(oldApi => oldApi.setActive(false));\n current.set(api);\n }\n api.setActive(active);\n };\n setActive(is$1(initial, spec.hash(value)));\n const unbindWatcher = spec.watcher(editor, value, setActive);\n return () => {\n current.clear();\n unbindWatcher();\n };\n },\n onAction: () => spec.setCurrent(editor, value)\n }));\n };\n editor.ui.registry.addMenuButton(spec.name, {\n tooltip: spec.text,\n icon: spec.icon,\n fetch: callback => callback(getMenuItems()),\n onSetup: spec.onToolbarSetup\n });\n editor.ui.registry.addNestedMenuItem(spec.name, {\n type: 'nestedmenuitem',\n text: spec.text,\n getSubmenuItems: getMenuItems,\n onSetup: spec.onMenuSetup\n });\n };\n const lineHeightSpec = {\n name: 'lineheight',\n text: 'Line height',\n icon: 'line-height',\n getOptions: getLineHeightFormats,\n hash: input => normalise(input, [\n 'fixed',\n 'relative',\n 'empty'\n ]).getOr(input),\n display: identity,\n watcher: (editor, value, callback) => editor.formatter.formatChanged('lineheight', callback, false, { value }).unbind,\n getCurrent: editor => Optional.from(editor.queryCommandValue('LineHeight')),\n setCurrent: (editor, value) => editor.execCommand('LineHeight', false, value)\n };\n const languageSpec = editor => {\n const settingsOpt = Optional.from(getContentLanguages(editor));\n return settingsOpt.map(settings => ({\n name: 'language',\n text: 'Language',\n icon: 'language',\n getOptions: constant$1(settings),\n hash: input => isUndefined(input.customCode) ? input.code : `${ input.code }/${ input.customCode }`,\n display: input => input.title,\n watcher: (editor, value, callback) => {\n var _a;\n return editor.formatter.formatChanged('lang', callback, false, {\n value: value.code,\n customValue: (_a = value.customCode) !== null && _a !== void 0 ? _a : null\n }).unbind;\n },\n getCurrent: editor => {\n const node = SugarElement.fromDom(editor.selection.getNode());\n return closest$4(node, n => Optional.some(n).filter(isElement$1).bind(ele => {\n const codeOpt = getOpt(ele, 'lang');\n return codeOpt.map(code => {\n const customCode = getOpt(ele, 'data-mce-lang').getOrUndefined();\n return {\n code,\n customCode,\n title: ''\n };\n });\n }));\n },\n setCurrent: (editor, lang) => editor.execCommand('Lang', false, lang),\n onToolbarSetup: api => {\n const unbinder = unbindable();\n api.setActive(editor.formatter.match('lang', {}, undefined, true));\n unbinder.set(editor.formatter.formatChanged('lang', api.setActive, true));\n return unbinder.clear;\n }\n }));\n };\n const register$7 = editor => {\n registerController(editor, lineHeightSpec);\n languageSpec(editor).each(spec => registerController(editor, spec));\n };\n\n const register$6 = (editor, backstage) => {\n createAlignMenu(editor, backstage);\n createFontFamilyMenu(editor, backstage);\n createStylesMenu(editor, backstage);\n createBlocksMenu(editor, backstage);\n createFontSizeMenu(editor, backstage);\n };\n\n const onSetupOutdentState = editor => onSetupEvent(editor, 'NodeChange', api => {\n api.setEnabled(editor.queryCommandState('outdent'));\n });\n const registerButtons$2 = editor => {\n editor.ui.registry.addButton('outdent', {\n tooltip: 'Decrease indent',\n icon: 'outdent',\n onSetup: onSetupOutdentState(editor),\n onAction: onActionExecCommand(editor, 'outdent')\n });\n editor.ui.registry.addButton('indent', {\n tooltip: 'Increase indent',\n icon: 'indent',\n onAction: onActionExecCommand(editor, 'indent')\n });\n };\n const register$5 = editor => {\n registerButtons$2(editor);\n };\n\n const makeSetupHandler = (editor, pasteAsText) => api => {\n api.setActive(pasteAsText.get());\n const pastePlainTextToggleHandler = e => {\n pasteAsText.set(e.state);\n api.setActive(e.state);\n };\n editor.on('PastePlainTextToggle', pastePlainTextToggleHandler);\n return () => editor.off('PastePlainTextToggle', pastePlainTextToggleHandler);\n };\n const register$4 = editor => {\n const pasteAsText = Cell(getPasteAsText(editor));\n const onAction = () => editor.execCommand('mceTogglePlainTextPaste');\n editor.ui.registry.addToggleButton('pastetext', {\n active: false,\n icon: 'paste-text',\n tooltip: 'Paste as text',\n onAction,\n onSetup: makeSetupHandler(editor, pasteAsText)\n });\n editor.ui.registry.addToggleMenuItem('pastetext', {\n text: 'Paste as text',\n icon: 'paste-text',\n onAction,\n onSetup: makeSetupHandler(editor, pasteAsText)\n });\n };\n\n const onActionToggleFormat = (editor, fmt) => () => {\n editor.execCommand('mceToggleFormat', false, fmt);\n };\n const registerFormatButtons = editor => {\n global$1.each([\n {\n name: 'bold',\n text: 'Bold',\n icon: 'bold'\n },\n {\n name: 'italic',\n text: 'Italic',\n icon: 'italic'\n },\n {\n name: 'underline',\n text: 'Underline',\n icon: 'underline'\n },\n {\n name: 'strikethrough',\n text: 'Strikethrough',\n icon: 'strike-through'\n },\n {\n name: 'subscript',\n text: 'Subscript',\n icon: 'subscript'\n },\n {\n name: 'superscript',\n text: 'Superscript',\n icon: 'superscript'\n }\n ], (btn, _idx) => {\n editor.ui.registry.addToggleButton(btn.name, {\n tooltip: btn.text,\n icon: btn.icon,\n onSetup: onSetupFormatToggle(editor, btn.name),\n onAction: onActionToggleFormat(editor, btn.name)\n });\n });\n for (let i = 1; i <= 6; i++) {\n const name = 'h' + i;\n editor.ui.registry.addToggleButton(name, {\n text: name.toUpperCase(),\n tooltip: 'Heading ' + i,\n onSetup: onSetupFormatToggle(editor, name),\n onAction: onActionToggleFormat(editor, name)\n });\n }\n };\n const registerCommandButtons = editor => {\n global$1.each([\n {\n name: 'cut',\n text: 'Cut',\n action: 'Cut',\n icon: 'cut'\n },\n {\n name: 'copy',\n text: 'Copy',\n action: 'Copy',\n icon: 'copy'\n },\n {\n name: 'paste',\n text: 'Paste',\n action: 'Paste',\n icon: 'paste'\n },\n {\n name: 'help',\n text: 'Help',\n action: 'mceHelp',\n icon: 'help'\n },\n {\n name: 'selectall',\n text: 'Select all',\n action: 'SelectAll',\n icon: 'select-all'\n },\n {\n name: 'newdocument',\n text: 'New document',\n action: 'mceNewDocument',\n icon: 'new-document'\n },\n {\n name: 'removeformat',\n text: 'Clear formatting',\n action: 'RemoveFormat',\n icon: 'remove-formatting'\n },\n {\n name: 'remove',\n text: 'Remove',\n action: 'Delete',\n icon: 'remove'\n },\n {\n name: 'print',\n text: 'Print',\n action: 'mcePrint',\n icon: 'print'\n },\n {\n name: 'hr',\n text: 'Horizontal line',\n action: 'InsertHorizontalRule',\n icon: 'horizontal-rule'\n }\n ], btn => {\n editor.ui.registry.addButton(btn.name, {\n tooltip: btn.text,\n icon: btn.icon,\n onAction: onActionExecCommand(editor, btn.action)\n });\n });\n };\n const registerCommandToggleButtons = editor => {\n global$1.each([{\n name: 'blockquote',\n text: 'Blockquote',\n action: 'mceBlockQuote',\n icon: 'quote'\n }], btn => {\n editor.ui.registry.addToggleButton(btn.name, {\n tooltip: btn.text,\n icon: btn.icon,\n onAction: onActionExecCommand(editor, btn.action),\n onSetup: onSetupFormatToggle(editor, btn.name)\n });\n });\n };\n const registerButtons$1 = editor => {\n registerFormatButtons(editor);\n registerCommandButtons(editor);\n registerCommandToggleButtons(editor);\n };\n const registerMenuItems$2 = editor => {\n global$1.each([\n {\n name: 'bold',\n text: 'Bold',\n action: 'Bold',\n icon: 'bold',\n shortcut: 'Meta+B'\n },\n {\n name: 'italic',\n text: 'Italic',\n action: 'Italic',\n icon: 'italic',\n shortcut: 'Meta+I'\n },\n {\n name: 'underline',\n text: 'Underline',\n action: 'Underline',\n icon: 'underline',\n shortcut: 'Meta+U'\n },\n {\n name: 'strikethrough',\n text: 'Strikethrough',\n action: 'Strikethrough',\n icon: 'strike-through'\n },\n {\n name: 'subscript',\n text: 'Subscript',\n action: 'Subscript',\n icon: 'subscript'\n },\n {\n name: 'superscript',\n text: 'Superscript',\n action: 'Superscript',\n icon: 'superscript'\n },\n {\n name: 'removeformat',\n text: 'Clear formatting',\n action: 'RemoveFormat',\n icon: 'remove-formatting'\n },\n {\n name: 'newdocument',\n text: 'New document',\n action: 'mceNewDocument',\n icon: 'new-document'\n },\n {\n name: 'cut',\n text: 'Cut',\n action: 'Cut',\n icon: 'cut',\n shortcut: 'Meta+X'\n },\n {\n name: 'copy',\n text: 'Copy',\n action: 'Copy',\n icon: 'copy',\n shortcut: 'Meta+C'\n },\n {\n name: 'paste',\n text: 'Paste',\n action: 'Paste',\n icon: 'paste',\n shortcut: 'Meta+V'\n },\n {\n name: 'selectall',\n text: 'Select all',\n action: 'SelectAll',\n icon: 'select-all',\n shortcut: 'Meta+A'\n },\n {\n name: 'print',\n text: 'Print...',\n action: 'mcePrint',\n icon: 'print',\n shortcut: 'Meta+P'\n },\n {\n name: 'hr',\n text: 'Horizontal line',\n action: 'InsertHorizontalRule',\n icon: 'horizontal-rule'\n }\n ], menuitem => {\n editor.ui.registry.addMenuItem(menuitem.name, {\n text: menuitem.text,\n icon: menuitem.icon,\n shortcut: menuitem.shortcut,\n onAction: onActionExecCommand(editor, menuitem.action)\n });\n });\n editor.ui.registry.addMenuItem('codeformat', {\n text: 'Code',\n icon: 'sourcecode',\n onAction: onActionToggleFormat(editor, 'code')\n });\n };\n const register$3 = editor => {\n registerButtons$1(editor);\n registerMenuItems$2(editor);\n };\n\n const onSetupUndoRedoState = (editor, type) => onSetupEvent(editor, 'Undo Redo AddUndo TypingUndo ClearUndos SwitchMode', api => {\n api.setEnabled(!editor.mode.isReadOnly() && editor.undoManager[type]());\n });\n const registerMenuItems$1 = editor => {\n editor.ui.registry.addMenuItem('undo', {\n text: 'Undo',\n icon: 'undo',\n shortcut: 'Meta+Z',\n onSetup: onSetupUndoRedoState(editor, 'hasUndo'),\n onAction: onActionExecCommand(editor, 'undo')\n });\n editor.ui.registry.addMenuItem('redo', {\n text: 'Redo',\n icon: 'redo',\n shortcut: 'Meta+Y',\n onSetup: onSetupUndoRedoState(editor, 'hasRedo'),\n onAction: onActionExecCommand(editor, 'redo')\n });\n };\n const registerButtons = editor => {\n editor.ui.registry.addButton('undo', {\n tooltip: 'Undo',\n icon: 'undo',\n enabled: false,\n onSetup: onSetupUndoRedoState(editor, 'hasUndo'),\n onAction: onActionExecCommand(editor, 'undo')\n });\n editor.ui.registry.addButton('redo', {\n tooltip: 'Redo',\n icon: 'redo',\n enabled: false,\n onSetup: onSetupUndoRedoState(editor, 'hasRedo'),\n onAction: onActionExecCommand(editor, 'redo')\n });\n };\n const register$2 = editor => {\n registerMenuItems$1(editor);\n registerButtons(editor);\n };\n\n const onSetupVisualAidState = editor => onSetupEvent(editor, 'VisualAid', api => {\n api.setActive(editor.hasVisual);\n });\n const registerMenuItems = editor => {\n editor.ui.registry.addToggleMenuItem('visualaid', {\n text: 'Visual aids',\n onSetup: onSetupVisualAidState(editor),\n onAction: onActionExecCommand(editor, 'mceToggleVisualAid')\n });\n };\n const registerToolbarButton = editor => {\n editor.ui.registry.addButton('visualaid', {\n tooltip: 'Visual aids',\n text: 'Visual aids',\n onAction: onActionExecCommand(editor, 'mceToggleVisualAid')\n });\n };\n const register$1 = editor => {\n registerToolbarButton(editor);\n registerMenuItems(editor);\n };\n\n const setup$6 = (editor, backstage) => {\n register$8(editor);\n register$3(editor);\n register$6(editor, backstage);\n register$2(editor);\n register$c(editor);\n register$1(editor);\n register$5(editor);\n register$7(editor);\n register$4(editor);\n };\n\n const patchPipeConfig = config => isString(config) ? config.split(/[ ,]/) : config;\n const option = name => editor => editor.options.get(name);\n const register = editor => {\n const registerOption = editor.options.register;\n registerOption('contextmenu_avoid_overlap', {\n processor: 'string',\n default: ''\n });\n registerOption('contextmenu_never_use_native', {\n processor: 'boolean',\n default: false\n });\n registerOption('contextmenu', {\n processor: value => {\n if (value === false) {\n return {\n value: [],\n valid: true\n };\n } else if (isString(value) || isArrayOf(value, isString)) {\n return {\n value: patchPipeConfig(value),\n valid: true\n };\n } else {\n return {\n valid: false,\n message: 'Must be false or a string.'\n };\n }\n },\n default: 'link linkchecker image editimage table spellchecker configurepermanentpen'\n });\n };\n const shouldNeverUseNative = option('contextmenu_never_use_native');\n const getAvoidOverlapSelector = option('contextmenu_avoid_overlap');\n const isContextMenuDisabled = editor => getContextMenu(editor).length === 0;\n const getContextMenu = editor => {\n const contextMenus = editor.ui.registry.getAll().contextMenus;\n const contextMenu = editor.options.get('contextmenu');\n if (editor.options.isSet('contextmenu')) {\n return contextMenu;\n } else {\n return filter$2(contextMenu, item => has$2(contextMenus, item));\n }\n };\n\n const nu = (x, y) => ({\n type: 'makeshift',\n x,\n y\n });\n const transpose = (pos, dx, dy) => {\n return nu(pos.x + dx, pos.y + dy);\n };\n const isTouchEvent$1 = e => e.type === 'longpress' || e.type.indexOf('touch') === 0;\n const fromPageXY = e => {\n if (isTouchEvent$1(e)) {\n const touch = e.touches[0];\n return nu(touch.pageX, touch.pageY);\n } else {\n return nu(e.pageX, e.pageY);\n }\n };\n const fromClientXY = e => {\n if (isTouchEvent$1(e)) {\n const touch = e.touches[0];\n return nu(touch.clientX, touch.clientY);\n } else {\n return nu(e.clientX, e.clientY);\n }\n };\n const transposeContentAreaContainer = (element, pos) => {\n const containerPos = global$7.DOM.getPos(element);\n return transpose(pos, containerPos.x, containerPos.y);\n };\n const getPointAnchor = (editor, e) => {\n if (e.type === 'contextmenu' || e.type === 'longpress') {\n if (editor.inline) {\n return fromPageXY(e);\n } else {\n return transposeContentAreaContainer(editor.getContentAreaContainer(), fromClientXY(e));\n }\n } else {\n return getSelectionAnchor(editor);\n }\n };\n const getSelectionAnchor = editor => {\n return {\n type: 'selection',\n root: SugarElement.fromDom(editor.selection.getNode())\n };\n };\n const getNodeAnchor = editor => ({\n type: 'node',\n node: Optional.some(SugarElement.fromDom(editor.selection.getNode())),\n root: SugarElement.fromDom(editor.getBody())\n });\n const getAnchorSpec$1 = (editor, e, anchorType) => {\n switch (anchorType) {\n case 'node':\n return getNodeAnchor(editor);\n case 'point':\n return getPointAnchor(editor, e);\n case 'selection':\n return getSelectionAnchor(editor);\n }\n };\n\n const initAndShow$1 = (editor, e, buildMenu, backstage, contextmenu, anchorType) => {\n const items = buildMenu();\n const anchorSpec = getAnchorSpec$1(editor, e, anchorType);\n build(items, ItemResponse$1.CLOSE_ON_EXECUTE, backstage, {\n isHorizontalMenu: false,\n search: Optional.none()\n }).map(menuData => {\n e.preventDefault();\n InlineView.showMenuAt(contextmenu, { anchor: anchorSpec }, {\n menu: { markers: markers('normal') },\n data: menuData\n });\n });\n };\n\n const layouts = {\n onLtr: () => [\n south$2,\n southeast$2,\n southwest$2,\n northeast$2,\n northwest$2,\n north$2,\n north,\n south,\n northeast,\n southeast,\n northwest,\n southwest\n ],\n onRtl: () => [\n south$2,\n southwest$2,\n southeast$2,\n northwest$2,\n northeast$2,\n north$2,\n north,\n south,\n northwest,\n southwest,\n northeast,\n southeast\n ]\n };\n const bubbleSize = 12;\n const bubbleAlignments = {\n valignCentre: [],\n alignCentre: [],\n alignLeft: ['tox-pop--align-left'],\n alignRight: ['tox-pop--align-right'],\n right: ['tox-pop--right'],\n left: ['tox-pop--left'],\n bottom: ['tox-pop--bottom'],\n top: ['tox-pop--top']\n };\n const isTouchWithinSelection = (editor, e) => {\n const selection = editor.selection;\n if (selection.isCollapsed() || e.touches.length < 1) {\n return false;\n } else {\n const touch = e.touches[0];\n const rng = selection.getRng();\n const rngRectOpt = getFirstRect(editor.getWin(), SimSelection.domRange(rng));\n return rngRectOpt.exists(rngRect => rngRect.left <= touch.clientX && rngRect.right >= touch.clientX && rngRect.top <= touch.clientY && rngRect.bottom >= touch.clientY);\n }\n };\n const setupiOSOverrides = editor => {\n const originalSelection = editor.selection.getRng();\n const selectionReset = () => {\n global$9.setEditorTimeout(editor, () => {\n editor.selection.setRng(originalSelection);\n }, 10);\n unbindEventListeners();\n };\n editor.once('touchend', selectionReset);\n const preventMousedown = e => {\n e.preventDefault();\n e.stopImmediatePropagation();\n };\n editor.on('mousedown', preventMousedown, true);\n const clearSelectionReset = () => unbindEventListeners();\n editor.once('longpresscancel', clearSelectionReset);\n const unbindEventListeners = () => {\n editor.off('touchend', selectionReset);\n editor.off('longpresscancel', clearSelectionReset);\n editor.off('mousedown', preventMousedown);\n };\n };\n const getAnchorSpec = (editor, e, anchorType) => {\n const anchorSpec = getAnchorSpec$1(editor, e, anchorType);\n const bubbleYOffset = anchorType === 'point' ? bubbleSize : 0;\n return {\n bubble: nu$5(0, bubbleYOffset, bubbleAlignments),\n layouts,\n overrides: {\n maxWidthFunction: expandable(),\n maxHeightFunction: expandable$1()\n },\n ...anchorSpec\n };\n };\n const show = (editor, e, items, backstage, contextmenu, anchorType, highlightImmediately) => {\n const anchorSpec = getAnchorSpec(editor, e, anchorType);\n build(items, ItemResponse$1.CLOSE_ON_EXECUTE, backstage, {\n isHorizontalMenu: true,\n search: Optional.none()\n }).map(menuData => {\n e.preventDefault();\n const highlightOnOpen = highlightImmediately ? HighlightOnOpen.HighlightMenuAndItem : HighlightOnOpen.HighlightNone;\n InlineView.showMenuWithinBounds(contextmenu, { anchor: anchorSpec }, {\n menu: {\n markers: markers('normal'),\n highlightOnOpen\n },\n data: menuData,\n type: 'horizontal'\n }, () => Optional.some(getContextToolbarBounds(editor, backstage.shared, anchorType === 'node' ? 'node' : 'selection')));\n editor.dispatch(hideContextToolbarEvent);\n });\n };\n const initAndShow = (editor, e, buildMenu, backstage, contextmenu, anchorType) => {\n const detection = detect$1();\n const isiOS = detection.os.isiOS();\n const isMacOS = detection.os.isMacOS();\n const isAndroid = detection.os.isAndroid();\n const isTouch = detection.deviceType.isTouch();\n const shouldHighlightImmediately = () => !(isAndroid || isiOS || isMacOS && isTouch);\n const open = () => {\n const items = buildMenu();\n show(editor, e, items, backstage, contextmenu, anchorType, shouldHighlightImmediately());\n };\n if ((isMacOS || isiOS) && anchorType !== 'node') {\n const openiOS = () => {\n setupiOSOverrides(editor);\n open();\n };\n if (isTouchWithinSelection(editor, e)) {\n openiOS();\n } else {\n editor.once('selectionchange', openiOS);\n editor.once('touchend', () => editor.off('selectionchange', openiOS));\n }\n } else {\n open();\n }\n };\n\n const isSeparator = item => isString(item) ? item === '|' : item.type === 'separator';\n const separator = { type: 'separator' };\n const makeContextItem = item => {\n const commonMenuItem = item => ({\n text: item.text,\n icon: item.icon,\n enabled: item.enabled,\n shortcut: item.shortcut\n });\n if (isString(item)) {\n return item;\n } else {\n switch (item.type) {\n case 'separator':\n return separator;\n case 'submenu':\n return {\n type: 'nestedmenuitem',\n ...commonMenuItem(item),\n getSubmenuItems: () => {\n const items = item.getSubmenuItems();\n if (isString(items)) {\n return items;\n } else {\n return map$2(items, makeContextItem);\n }\n }\n };\n default:\n const commonItem = item;\n return {\n type: 'menuitem',\n ...commonMenuItem(commonItem),\n onAction: noarg(commonItem.onAction)\n };\n }\n }\n };\n const addContextMenuGroup = (xs, groupItems) => {\n if (groupItems.length === 0) {\n return xs;\n }\n const lastMenuItem = last$1(xs).filter(item => !isSeparator(item));\n const before = lastMenuItem.fold(() => [], _ => [separator]);\n return xs.concat(before).concat(groupItems).concat([separator]);\n };\n const generateContextMenu = (contextMenus, menuConfig, selectedElement) => {\n const sections = foldl(menuConfig, (acc, name) => {\n return get$g(contextMenus, name.toLowerCase()).map(menu => {\n const items = menu.update(selectedElement);\n if (isString(items)) {\n return addContextMenuGroup(acc, items.split(' '));\n } else if (items.length > 0) {\n const allItems = map$2(items, makeContextItem);\n return addContextMenuGroup(acc, allItems);\n } else {\n return acc;\n }\n }).getOrThunk(() => acc.concat([name]));\n }, []);\n if (sections.length > 0 && isSeparator(sections[sections.length - 1])) {\n sections.pop();\n }\n return sections;\n };\n const isNativeOverrideKeyEvent = (editor, e) => e.ctrlKey && !shouldNeverUseNative(editor);\n const isTouchEvent = e => e.type === 'longpress' || has$2(e, 'touches');\n const isTriggeredByKeyboard = (editor, e) => !isTouchEvent(e) && (e.button !== 2 || e.target === editor.getBody() && e.pointerType === '');\n const getSelectedElement = (editor, e) => isTriggeredByKeyboard(editor, e) ? editor.selection.getStart(true) : e.target;\n const getAnchorType = (editor, e) => {\n const selector = getAvoidOverlapSelector(editor);\n const anchorType = isTriggeredByKeyboard(editor, e) ? 'selection' : 'point';\n if (isNotEmpty(selector)) {\n const target = getSelectedElement(editor, e);\n const selectorExists = closest(SugarElement.fromDom(target), selector);\n return selectorExists ? 'node' : anchorType;\n } else {\n return anchorType;\n }\n };\n const setup$5 = (editor, lazySink, backstage) => {\n const detection = detect$1();\n const isTouch = detection.deviceType.isTouch;\n const contextmenu = build$1(InlineView.sketch({\n dom: { tag: 'div' },\n lazySink,\n onEscape: () => editor.focus(),\n onShow: () => backstage.setContextMenuState(true),\n onHide: () => backstage.setContextMenuState(false),\n fireDismissalEventInstead: {},\n inlineBehaviours: derive$1([config('dismissContextMenu', [run$1(dismissRequested(), (comp, _se) => {\n Sandboxing.close(comp);\n editor.focus();\n })])])\n }));\n const hideContextMenu = () => InlineView.hide(contextmenu);\n const showContextMenu = e => {\n if (shouldNeverUseNative(editor)) {\n e.preventDefault();\n }\n if (isNativeOverrideKeyEvent(editor, e) || isContextMenuDisabled(editor)) {\n return;\n }\n const anchorType = getAnchorType(editor, e);\n const buildMenu = () => {\n const selectedElement = getSelectedElement(editor, e);\n const registry = editor.ui.registry.getAll();\n const menuConfig = getContextMenu(editor);\n return generateContextMenu(registry.contextMenus, menuConfig, selectedElement);\n };\n const initAndShow$2 = isTouch() ? initAndShow : initAndShow$1;\n initAndShow$2(editor, e, buildMenu, backstage, contextmenu, anchorType);\n };\n editor.on('init', () => {\n const hideEvents = 'ResizeEditor ScrollContent ScrollWindow longpresscancel' + (isTouch() ? '' : ' ResizeWindow');\n editor.on(hideEvents, hideContextMenu);\n editor.on('longpress contextmenu', showContextMenu);\n });\n };\n\n const adt = Adt.generate([\n {\n offset: [\n 'x',\n 'y'\n ]\n },\n {\n absolute: [\n 'x',\n 'y'\n ]\n },\n {\n fixed: [\n 'x',\n 'y'\n ]\n }\n ]);\n const subtract = change => point => point.translate(-change.left, -change.top);\n const add = change => point => point.translate(change.left, change.top);\n const transform = changes => (x, y) => foldl(changes, (rest, f) => f(rest), SugarPosition(x, y));\n const asFixed = (coord, scroll, origin) => coord.fold(transform([\n add(origin),\n subtract(scroll)\n ]), transform([subtract(scroll)]), transform([]));\n const asAbsolute = (coord, scroll, origin) => coord.fold(transform([add(origin)]), transform([]), transform([add(scroll)]));\n const asOffset = (coord, scroll, origin) => coord.fold(transform([]), transform([subtract(origin)]), transform([\n add(scroll),\n subtract(origin)\n ]));\n const withinRange = (coord1, coord2, xRange, yRange, scroll, origin) => {\n const a1 = asAbsolute(coord1, scroll, origin);\n const a2 = asAbsolute(coord2, scroll, origin);\n return Math.abs(a1.left - a2.left) <= xRange && Math.abs(a1.top - a2.top) <= yRange;\n };\n const getDeltas = (coord1, coord2, xRange, yRange, scroll, origin) => {\n const a1 = asAbsolute(coord1, scroll, origin);\n const a2 = asAbsolute(coord2, scroll, origin);\n const left = Math.abs(a1.left - a2.left);\n const top = Math.abs(a1.top - a2.top);\n return SugarPosition(left, top);\n };\n const toStyles = (coord, scroll, origin) => {\n const stylesOpt = coord.fold((x, y) => ({\n position: Optional.some('absolute'),\n left: Optional.some(x + 'px'),\n top: Optional.some(y + 'px')\n }), (x, y) => ({\n position: Optional.some('absolute'),\n left: Optional.some(x - origin.left + 'px'),\n top: Optional.some(y - origin.top + 'px')\n }), (x, y) => ({\n position: Optional.some('fixed'),\n left: Optional.some(x + 'px'),\n top: Optional.some(y + 'px')\n }));\n return {\n right: Optional.none(),\n bottom: Optional.none(),\n ...stylesOpt\n };\n };\n const translate = (coord, deltaX, deltaY) => coord.fold((x, y) => offset(x + deltaX, y + deltaY), (x, y) => absolute(x + deltaX, y + deltaY), (x, y) => fixed(x + deltaX, y + deltaY));\n const absorb = (partialCoord, originalCoord, scroll, origin) => {\n const absorbOne = (stencil, nu) => (optX, optY) => {\n const original = stencil(originalCoord, scroll, origin);\n return nu(optX.getOr(original.left), optY.getOr(original.top));\n };\n return partialCoord.fold(absorbOne(asOffset, offset), absorbOne(asAbsolute, absolute), absorbOne(asFixed, fixed));\n };\n const offset = adt.offset;\n const absolute = adt.absolute;\n const fixed = adt.fixed;\n\n const parseAttrToInt = (element, name) => {\n const value = get$f(element, name);\n return isUndefined(value) ? NaN : parseInt(value, 10);\n };\n const get = (component, snapsInfo) => {\n const element = component.element;\n const x = parseAttrToInt(element, snapsInfo.leftAttr);\n const y = parseAttrToInt(element, snapsInfo.topAttr);\n return isNaN(x) || isNaN(y) ? Optional.none() : Optional.some(SugarPosition(x, y));\n };\n const set = (component, snapsInfo, pt) => {\n const element = component.element;\n set$9(element, snapsInfo.leftAttr, pt.left + 'px');\n set$9(element, snapsInfo.topAttr, pt.top + 'px');\n };\n const clear = (component, snapsInfo) => {\n const element = component.element;\n remove$7(element, snapsInfo.leftAttr);\n remove$7(element, snapsInfo.topAttr);\n };\n\n const getCoords = (component, snapInfo, coord, delta) => get(component, snapInfo).fold(() => coord, fixed$1 => fixed(fixed$1.left + delta.left, fixed$1.top + delta.top));\n const moveOrSnap = (component, snapInfo, coord, delta, scroll, origin) => {\n const newCoord = getCoords(component, snapInfo, coord, delta);\n const snap = snapInfo.mustSnap ? findClosestSnap(component, snapInfo, newCoord, scroll, origin) : findSnap(component, snapInfo, newCoord, scroll, origin);\n const fixedCoord = asFixed(newCoord, scroll, origin);\n set(component, snapInfo, fixedCoord);\n return snap.fold(() => ({\n coord: fixed(fixedCoord.left, fixedCoord.top),\n extra: Optional.none()\n }), spanned => ({\n coord: spanned.output,\n extra: spanned.extra\n }));\n };\n const stopDrag = (component, snapInfo) => {\n clear(component, snapInfo);\n };\n const findMatchingSnap = (snaps, newCoord, scroll, origin) => findMap(snaps, snap => {\n const sensor = snap.sensor;\n const inRange = withinRange(newCoord, sensor, snap.range.left, snap.range.top, scroll, origin);\n return inRange ? Optional.some({\n output: absorb(snap.output, newCoord, scroll, origin),\n extra: snap.extra\n }) : Optional.none();\n });\n const findClosestSnap = (component, snapInfo, newCoord, scroll, origin) => {\n const snaps = snapInfo.getSnapPoints(component);\n const matchSnap = findMatchingSnap(snaps, newCoord, scroll, origin);\n return matchSnap.orThunk(() => {\n const bestSnap = foldl(snaps, (acc, snap) => {\n const sensor = snap.sensor;\n const deltas = getDeltas(newCoord, sensor, snap.range.left, snap.range.top, scroll, origin);\n return acc.deltas.fold(() => ({\n deltas: Optional.some(deltas),\n snap: Optional.some(snap)\n }), bestDeltas => {\n const currAvg = (deltas.left + deltas.top) / 2;\n const bestAvg = (bestDeltas.left + bestDeltas.top) / 2;\n if (currAvg <= bestAvg) {\n return {\n deltas: Optional.some(deltas),\n snap: Optional.some(snap)\n };\n } else {\n return acc;\n }\n });\n }, {\n deltas: Optional.none(),\n snap: Optional.none()\n });\n return bestSnap.snap.map(snap => ({\n output: absorb(snap.output, newCoord, scroll, origin),\n extra: snap.extra\n }));\n });\n };\n const findSnap = (component, snapInfo, newCoord, scroll, origin) => {\n const snaps = snapInfo.getSnapPoints(component);\n return findMatchingSnap(snaps, newCoord, scroll, origin);\n };\n const snapTo$1 = (snap, scroll, origin) => ({\n coord: absorb(snap.output, snap.output, scroll, origin),\n extra: snap.extra\n });\n\n const snapTo = (component, dragConfig, _state, snap) => {\n const target = dragConfig.getTarget(component.element);\n if (dragConfig.repositionTarget) {\n const doc = owner$4(component.element);\n const scroll = get$b(doc);\n const origin = getOrigin(target);\n const snapPin = snapTo$1(snap, scroll, origin);\n const styles = toStyles(snapPin.coord, scroll, origin);\n setOptions(target, styles);\n }\n };\n\n var DraggingApis = /*#__PURE__*/Object.freeze({\n __proto__: null,\n snapTo: snapTo\n });\n\n const initialAttribute = 'data-initial-z-index';\n const resetZIndex = blocker => {\n parent(blocker.element).filter(isElement$1).each(root => {\n getOpt(root, initialAttribute).fold(() => remove$6(root, 'z-index'), zIndex => set$8(root, 'z-index', zIndex));\n remove$7(root, initialAttribute);\n });\n };\n const changeZIndex = blocker => {\n parent(blocker.element).filter(isElement$1).each(root => {\n getRaw(root, 'z-index').each(zindex => {\n set$9(root, initialAttribute, zindex);\n });\n set$8(root, 'z-index', get$e(blocker.element, 'z-index'));\n });\n };\n const instigate = (anyComponent, blocker) => {\n anyComponent.getSystem().addToGui(blocker);\n changeZIndex(blocker);\n };\n const discard = blocker => {\n resetZIndex(blocker);\n blocker.getSystem().removeFromGui(blocker);\n };\n const createComponent = (component, blockerClass, blockerEvents) => component.getSystem().build(Container.sketch({\n dom: {\n styles: {\n 'left': '0px',\n 'top': '0px',\n 'width': '100%',\n 'height': '100%',\n 'position': 'fixed',\n 'z-index': '1000000000000000'\n },\n classes: [blockerClass]\n },\n events: blockerEvents\n }));\n\n var SnapSchema = optionObjOf('snaps', [\n required$1('getSnapPoints'),\n onHandler('onSensor'),\n required$1('leftAttr'),\n required$1('topAttr'),\n defaulted('lazyViewport', win),\n defaulted('mustSnap', false)\n ]);\n\n const schema$6 = [\n defaulted('useFixed', never),\n required$1('blockerClass'),\n defaulted('getTarget', identity),\n defaulted('onDrag', noop),\n defaulted('repositionTarget', true),\n defaulted('onDrop', noop),\n defaultedFunction('getBounds', win),\n SnapSchema\n ];\n\n const getCurrentCoord = target => lift3(getRaw(target, 'left'), getRaw(target, 'top'), getRaw(target, 'position'), (left, top, position) => {\n const nu = position === 'fixed' ? fixed : offset;\n return nu(parseInt(left, 10), parseInt(top, 10));\n }).getOrThunk(() => {\n const location = absolute$3(target);\n return absolute(location.left, location.top);\n });\n const clampCoords = (component, coords, scroll, origin, startData) => {\n const bounds = startData.bounds;\n const absoluteCoord = asAbsolute(coords, scroll, origin);\n const newX = clamp(absoluteCoord.left, bounds.x, bounds.x + bounds.width - startData.width);\n const newY = clamp(absoluteCoord.top, bounds.y, bounds.y + bounds.height - startData.height);\n const newCoords = absolute(newX, newY);\n return coords.fold(() => {\n const offset$1 = asOffset(newCoords, scroll, origin);\n return offset(offset$1.left, offset$1.top);\n }, constant$1(newCoords), () => {\n const fixed$1 = asFixed(newCoords, scroll, origin);\n return fixed(fixed$1.left, fixed$1.top);\n });\n };\n const calcNewCoord = (component, optSnaps, currentCoord, scroll, origin, delta, startData) => {\n const newCoord = optSnaps.fold(() => {\n const translated = translate(currentCoord, delta.left, delta.top);\n const fixedCoord = asFixed(translated, scroll, origin);\n return fixed(fixedCoord.left, fixedCoord.top);\n }, snapInfo => {\n const snapping = moveOrSnap(component, snapInfo, currentCoord, delta, scroll, origin);\n snapping.extra.each(extra => {\n snapInfo.onSensor(component, extra);\n });\n return snapping.coord;\n });\n return clampCoords(component, newCoord, scroll, origin, startData);\n };\n const dragBy = (component, dragConfig, startData, delta) => {\n const target = dragConfig.getTarget(component.element);\n if (dragConfig.repositionTarget) {\n const doc = owner$4(component.element);\n const scroll = get$b(doc);\n const origin = getOrigin(target);\n const currentCoord = getCurrentCoord(target);\n const newCoord = calcNewCoord(component, dragConfig.snaps, currentCoord, scroll, origin, delta, startData);\n const styles = toStyles(newCoord, scroll, origin);\n setOptions(target, styles);\n }\n dragConfig.onDrag(component, target, delta);\n };\n\n const calcStartData = (dragConfig, comp) => ({\n bounds: dragConfig.getBounds(),\n height: getOuter$2(comp.element),\n width: getOuter$1(comp.element)\n });\n const move = (component, dragConfig, dragState, dragMode, event) => {\n const delta = dragState.update(dragMode, event);\n const dragStartData = dragState.getStartData().getOrThunk(() => calcStartData(dragConfig, component));\n delta.each(dlt => {\n dragBy(component, dragConfig, dragStartData, dlt);\n });\n };\n const stop = (component, blocker, dragConfig, dragState) => {\n blocker.each(discard);\n dragConfig.snaps.each(snapInfo => {\n stopDrag(component, snapInfo);\n });\n const target = dragConfig.getTarget(component.element);\n dragState.reset();\n dragConfig.onDrop(component, target);\n };\n const handlers = events => (dragConfig, dragState) => {\n const updateStartState = comp => {\n dragState.setStartData(calcStartData(dragConfig, comp));\n };\n return derive$2([\n run$1(windowScroll(), comp => {\n dragState.getStartData().each(() => updateStartState(comp));\n }),\n ...events(dragConfig, dragState, updateStartState)\n ]);\n };\n\n const init$2 = dragApi => derive$2([\n run$1(mousedown(), dragApi.forceDrop),\n run$1(mouseup(), dragApi.drop),\n run$1(mousemove(), (comp, simulatedEvent) => {\n dragApi.move(simulatedEvent.event);\n }),\n run$1(mouseout(), dragApi.delayDrop)\n ]);\n\n const getData$1 = event => Optional.from(SugarPosition(event.x, event.y));\n const getDelta$1 = (old, nu) => SugarPosition(nu.left - old.left, nu.top - old.top);\n\n var MouseData = /*#__PURE__*/Object.freeze({\n __proto__: null,\n getData: getData$1,\n getDelta: getDelta$1\n });\n\n const events$2 = (dragConfig, dragState, updateStartState) => [run$1(mousedown(), (component, simulatedEvent) => {\n const raw = simulatedEvent.event.raw;\n if (raw.button !== 0) {\n return;\n }\n simulatedEvent.stop();\n const stop$1 = () => stop(component, Optional.some(blocker), dragConfig, dragState);\n const delayDrop = DelayedFunction(stop$1, 200);\n const dragApi = {\n drop: stop$1,\n delayDrop: delayDrop.schedule,\n forceDrop: stop$1,\n move: event => {\n delayDrop.cancel();\n move(component, dragConfig, dragState, MouseData, event);\n }\n };\n const blocker = createComponent(component, dragConfig.blockerClass, init$2(dragApi));\n const start = () => {\n updateStartState(component);\n instigate(component, blocker);\n };\n start();\n })];\n const schema$5 = [\n ...schema$6,\n output$1('dragger', { handlers: handlers(events$2) })\n ];\n\n const init$1 = dragApi => derive$2([\n run$1(touchstart(), dragApi.forceDrop),\n run$1(touchend(), dragApi.drop),\n run$1(touchcancel(), dragApi.drop),\n run$1(touchmove(), (comp, simulatedEvent) => {\n dragApi.move(simulatedEvent.event);\n })\n ]);\n\n const getDataFrom = touches => {\n const touch = touches[0];\n return Optional.some(SugarPosition(touch.clientX, touch.clientY));\n };\n const getData = event => {\n const raw = event.raw;\n const touches = raw.touches;\n return touches.length === 1 ? getDataFrom(touches) : Optional.none();\n };\n const getDelta = (old, nu) => SugarPosition(nu.left - old.left, nu.top - old.top);\n\n var TouchData = /*#__PURE__*/Object.freeze({\n __proto__: null,\n getData: getData,\n getDelta: getDelta\n });\n\n const events$1 = (dragConfig, dragState, updateStartState) => {\n const blockerSingleton = value$2();\n const stopBlocking = component => {\n stop(component, blockerSingleton.get(), dragConfig, dragState);\n blockerSingleton.clear();\n };\n return [\n run$1(touchstart(), (component, simulatedEvent) => {\n simulatedEvent.stop();\n const stop = () => stopBlocking(component);\n const dragApi = {\n drop: stop,\n delayDrop: noop,\n forceDrop: stop,\n move: event => {\n move(component, dragConfig, dragState, TouchData, event);\n }\n };\n const blocker = createComponent(component, dragConfig.blockerClass, init$1(dragApi));\n blockerSingleton.set(blocker);\n const start = () => {\n updateStartState(component);\n instigate(component, blocker);\n };\n start();\n }),\n run$1(touchmove(), (component, simulatedEvent) => {\n simulatedEvent.stop();\n move(component, dragConfig, dragState, TouchData, simulatedEvent.event);\n }),\n run$1(touchend(), (component, simulatedEvent) => {\n simulatedEvent.stop();\n stopBlocking(component);\n }),\n run$1(touchcancel(), stopBlocking)\n ];\n };\n const schema$4 = [\n ...schema$6,\n output$1('dragger', { handlers: handlers(events$1) })\n ];\n\n const events = (dragConfig, dragState, updateStartState) => [\n ...events$2(dragConfig, dragState, updateStartState),\n ...events$1(dragConfig, dragState, updateStartState)\n ];\n const schema$3 = [\n ...schema$6,\n output$1('dragger', { handlers: handlers(events) })\n ];\n\n const mouse = schema$5;\n const touch = schema$4;\n const mouseOrTouch = schema$3;\n\n var DraggingBranches = /*#__PURE__*/Object.freeze({\n __proto__: null,\n mouse: mouse,\n touch: touch,\n mouseOrTouch: mouseOrTouch\n });\n\n const init = () => {\n let previous = Optional.none();\n let startData = Optional.none();\n const reset = () => {\n previous = Optional.none();\n startData = Optional.none();\n };\n const calculateDelta = (mode, nu) => {\n const result = previous.map(old => mode.getDelta(old, nu));\n previous = Optional.some(nu);\n return result;\n };\n const update = (mode, dragEvent) => mode.getData(dragEvent).bind(nuData => calculateDelta(mode, nuData));\n const setStartData = data => {\n startData = Optional.some(data);\n };\n const getStartData = () => startData;\n const readState = constant$1({});\n return nu$8({\n readState,\n reset,\n update,\n getStartData,\n setStartData\n });\n };\n\n var DragState = /*#__PURE__*/Object.freeze({\n __proto__: null,\n init: init\n });\n\n const Dragging = createModes({\n branchKey: 'mode',\n branches: DraggingBranches,\n name: 'dragging',\n active: {\n events: (dragConfig, dragState) => {\n const dragger = dragConfig.dragger;\n return dragger.handlers(dragConfig, dragState);\n }\n },\n extra: {\n snap: sConfig => ({\n sensor: sConfig.sensor,\n range: sConfig.range,\n output: sConfig.output,\n extra: Optional.from(sConfig.extra)\n })\n },\n state: DragState,\n apis: DraggingApis\n });\n\n const snapWidth = 40;\n const snapOffset = snapWidth / 2;\n const calcSnap = (selectorOpt, td, x, y, width, height) => selectorOpt.fold(() => Dragging.snap({\n sensor: absolute(x - snapOffset, y - snapOffset),\n range: SugarPosition(width, height),\n output: absolute(Optional.some(x), Optional.some(y)),\n extra: { td }\n }), selectorHandle => {\n const sensorLeft = x - snapOffset;\n const sensorTop = y - snapOffset;\n const sensorWidth = snapWidth;\n const sensorHeight = snapWidth;\n const rect = selectorHandle.element.dom.getBoundingClientRect();\n return Dragging.snap({\n sensor: absolute(sensorLeft, sensorTop),\n range: SugarPosition(sensorWidth, sensorHeight),\n output: absolute(Optional.some(x - rect.width / 2), Optional.some(y - rect.height / 2)),\n extra: { td }\n });\n });\n const getSnapsConfig = (getSnapPoints, cell, onChange) => {\n const isSameCell = (cellOpt, td) => cellOpt.exists(currentTd => eq(currentTd, td));\n return {\n getSnapPoints,\n leftAttr: 'data-drag-left',\n topAttr: 'data-drag-top',\n onSensor: (component, extra) => {\n const td = extra.td;\n if (!isSameCell(cell.get(), td)) {\n cell.set(td);\n onChange(td);\n }\n },\n mustSnap: true\n };\n };\n const createSelector = snaps => record(Button.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-selector']\n },\n buttonBehaviours: derive$1([\n Dragging.config({\n mode: 'mouseOrTouch',\n blockerClass: 'blocker',\n snaps\n }),\n Unselecting.config({})\n ]),\n eventOrder: {\n mousedown: [\n 'dragging',\n 'alloy.base.behaviour'\n ],\n touchstart: [\n 'dragging',\n 'alloy.base.behaviour'\n ]\n }\n }));\n const setup$4 = (editor, sink) => {\n const tlTds = Cell([]);\n const brTds = Cell([]);\n const isVisible = Cell(false);\n const startCell = value$2();\n const finishCell = value$2();\n const getTopLeftSnap = td => {\n const box = absolute$2(td);\n return calcSnap(memTopLeft.getOpt(sink), td, box.x, box.y, box.width, box.height);\n };\n const getTopLeftSnaps = () => map$2(tlTds.get(), td => getTopLeftSnap(td));\n const getBottomRightSnap = td => {\n const box = absolute$2(td);\n return calcSnap(memBottomRight.getOpt(sink), td, box.right, box.bottom, box.width, box.height);\n };\n const getBottomRightSnaps = () => map$2(brTds.get(), td => getBottomRightSnap(td));\n const topLeftSnaps = getSnapsConfig(getTopLeftSnaps, startCell, start => {\n finishCell.get().each(finish => {\n editor.dispatch('TableSelectorChange', {\n start,\n finish\n });\n });\n });\n const bottomRightSnaps = getSnapsConfig(getBottomRightSnaps, finishCell, finish => {\n startCell.get().each(start => {\n editor.dispatch('TableSelectorChange', {\n start,\n finish\n });\n });\n });\n const memTopLeft = createSelector(topLeftSnaps);\n const memBottomRight = createSelector(bottomRightSnaps);\n const topLeft = build$1(memTopLeft.asSpec());\n const bottomRight = build$1(memBottomRight.asSpec());\n const showOrHideHandle = (selector, cell, isAbove, isBelow) => {\n const cellRect = cell.dom.getBoundingClientRect();\n remove$6(selector.element, 'display');\n const viewportHeight = defaultView(SugarElement.fromDom(editor.getBody())).dom.innerHeight;\n const aboveViewport = isAbove(cellRect);\n const belowViewport = isBelow(cellRect, viewportHeight);\n if (aboveViewport || belowViewport) {\n set$8(selector.element, 'display', 'none');\n }\n };\n const snapTo = (selector, cell, getSnapConfig, pos) => {\n const snap = getSnapConfig(cell);\n Dragging.snapTo(selector, snap);\n const isAbove = rect => rect[pos] < 0;\n const isBelow = (rect, viewportHeight) => rect[pos] > viewportHeight;\n showOrHideHandle(selector, cell, isAbove, isBelow);\n };\n const snapTopLeft = cell => snapTo(topLeft, cell, getTopLeftSnap, 'top');\n const snapLastTopLeft = () => startCell.get().each(snapTopLeft);\n const snapBottomRight = cell => snapTo(bottomRight, cell, getBottomRightSnap, 'bottom');\n const snapLastBottomRight = () => finishCell.get().each(snapBottomRight);\n if (detect$1().deviceType.isTouch()) {\n editor.on('TableSelectionChange', e => {\n if (!isVisible.get()) {\n attach(sink, topLeft);\n attach(sink, bottomRight);\n isVisible.set(true);\n }\n startCell.set(e.start);\n finishCell.set(e.finish);\n e.otherCells.each(otherCells => {\n tlTds.set(otherCells.upOrLeftCells);\n brTds.set(otherCells.downOrRightCells);\n snapTopLeft(e.start);\n snapBottomRight(e.finish);\n });\n });\n editor.on('ResizeEditor ResizeWindow ScrollContent', () => {\n snapLastTopLeft();\n snapLastBottomRight();\n });\n editor.on('TableSelectionClear', () => {\n if (isVisible.get()) {\n detach(topLeft);\n detach(bottomRight);\n isVisible.set(false);\n }\n startCell.clear();\n finishCell.clear();\n });\n }\n };\n\n var Logo = \"\\n\";\n\n const isHidden = elm => elm.nodeName === 'BR' || !!elm.getAttribute('data-mce-bogus') || elm.getAttribute('data-mce-type') === 'bookmark';\n const renderElementPath = (editor, settings, providersBackstage) => {\n var _a;\n const delimiter = (_a = settings.delimiter) !== null && _a !== void 0 ? _a : '\\u203A';\n const renderElement = (name, element, index) => Button.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-statusbar__path-item'],\n attributes: {\n 'data-index': index,\n 'aria-level': index + 1\n }\n },\n components: [text$2(name)],\n action: _btn => {\n editor.focus();\n editor.selection.select(element);\n editor.nodeChanged();\n },\n buttonBehaviours: derive$1([\n DisablingConfigs.button(providersBackstage.isDisabled),\n receivingConfig()\n ])\n });\n const renderDivider = () => ({\n dom: {\n tag: 'div',\n classes: ['tox-statusbar__path-divider'],\n attributes: { 'aria-hidden': true }\n },\n components: [text$2(` ${ delimiter } `)]\n });\n const renderPathData = data => foldl(data, (acc, path, index) => {\n const element = renderElement(path.name, path.element, index);\n if (index === 0) {\n return acc.concat([element]);\n } else {\n return acc.concat([\n renderDivider(),\n element\n ]);\n }\n }, []);\n const updatePath = parents => {\n const newPath = [];\n let i = parents.length;\n while (i-- > 0) {\n const parent = parents[i];\n if (parent.nodeType === 1 && !isHidden(parent)) {\n const args = fireResolveName(editor, parent);\n if (!args.isDefaultPrevented()) {\n newPath.push({\n name: args.name,\n element: parent\n });\n }\n if (args.isPropagationStopped()) {\n break;\n }\n }\n }\n return newPath;\n };\n return {\n dom: {\n tag: 'div',\n classes: ['tox-statusbar__path'],\n attributes: { role: 'navigation' }\n },\n behaviours: derive$1([\n Keying.config({\n mode: 'flow',\n selector: 'div[role=button]'\n }),\n Disabling.config({ disabled: providersBackstage.isDisabled }),\n receivingConfig(),\n Tabstopping.config({}),\n Replacing.config({}),\n config('elementPathEvents', [runOnAttached((comp, _e) => {\n editor.shortcuts.add('alt+F11', 'focus statusbar elementpath', () => Keying.focusIn(comp));\n editor.on('NodeChange', e => {\n const newPath = updatePath(e.parents);\n const newChildren = newPath.length > 0 ? renderPathData(newPath) : [];\n Replacing.set(comp, newChildren);\n });\n })])\n ]),\n components: []\n };\n };\n\n var ResizeTypes;\n (function (ResizeTypes) {\n ResizeTypes[ResizeTypes['None'] = 0] = 'None';\n ResizeTypes[ResizeTypes['Both'] = 1] = 'Both';\n ResizeTypes[ResizeTypes['Vertical'] = 2] = 'Vertical';\n }(ResizeTypes || (ResizeTypes = {})));\n const getDimensions = (editor, deltas, resizeType, originalHeight, originalWidth) => {\n const dimensions = { height: calcCappedSize(originalHeight + deltas.top, getMinHeightOption(editor), getMaxHeightOption(editor)) };\n if (resizeType === ResizeTypes.Both) {\n dimensions.width = calcCappedSize(originalWidth + deltas.left, getMinWidthOption(editor), getMaxWidthOption(editor));\n }\n return dimensions;\n };\n const resize = (editor, deltas, resizeType) => {\n const container = SugarElement.fromDom(editor.getContainer());\n const dimensions = getDimensions(editor, deltas, resizeType, get$d(container), get$c(container));\n each(dimensions, (val, dim) => {\n if (isNumber(val)) {\n set$8(container, dim, numToPx(val));\n }\n });\n fireResizeEditor(editor);\n };\n\n const getResizeType = editor => {\n const resize = getResize(editor);\n if (resize === false) {\n return ResizeTypes.None;\n } else if (resize === 'both') {\n return ResizeTypes.Both;\n } else {\n return ResizeTypes.Vertical;\n }\n };\n const keyboardHandler = (editor, resizeType, x, y) => {\n const scale = 20;\n const delta = SugarPosition(x * scale, y * scale);\n resize(editor, delta, resizeType);\n return Optional.some(true);\n };\n const renderResizeHandler = (editor, providersBackstage) => {\n const resizeType = getResizeType(editor);\n if (resizeType === ResizeTypes.None) {\n return Optional.none();\n }\n return Optional.some(render$3('resize-handle', {\n tag: 'div',\n classes: ['tox-statusbar__resize-handle'],\n attributes: { title: providersBackstage.translate('Resize') },\n behaviours: [\n Dragging.config({\n mode: 'mouse',\n repositionTarget: false,\n onDrag: (_comp, _target, delta) => resize(editor, delta, resizeType),\n blockerClass: 'tox-blocker'\n }),\n Keying.config({\n mode: 'special',\n onLeft: () => keyboardHandler(editor, resizeType, -1, 0),\n onRight: () => keyboardHandler(editor, resizeType, 1, 0),\n onUp: () => keyboardHandler(editor, resizeType, 0, -1),\n onDown: () => keyboardHandler(editor, resizeType, 0, 1)\n }),\n Tabstopping.config({}),\n Focusing.config({})\n ]\n }, providersBackstage.icons));\n };\n\n const renderWordCount = (editor, providersBackstage) => {\n const replaceCountText = (comp, count, mode) => Replacing.set(comp, [text$2(providersBackstage.translate([\n '{0} ' + mode,\n count[mode]\n ]))]);\n return Button.sketch({\n dom: {\n tag: 'button',\n classes: ['tox-statusbar__wordcount']\n },\n components: [],\n buttonBehaviours: derive$1([\n DisablingConfigs.button(providersBackstage.isDisabled),\n receivingConfig(),\n Tabstopping.config({}),\n Replacing.config({}),\n Representing.config({\n store: {\n mode: 'memory',\n initialValue: {\n mode: 'words',\n count: {\n words: 0,\n characters: 0\n }\n }\n }\n }),\n config('wordcount-events', [\n runOnExecute$1(comp => {\n const currentVal = Representing.getValue(comp);\n const newMode = currentVal.mode === 'words' ? 'characters' : 'words';\n Representing.setValue(comp, {\n mode: newMode,\n count: currentVal.count\n });\n replaceCountText(comp, currentVal.count, newMode);\n }),\n runOnAttached(comp => {\n editor.on('wordCountUpdate', e => {\n const {mode} = Representing.getValue(comp);\n Representing.setValue(comp, {\n mode,\n count: e.wordCount\n });\n replaceCountText(comp, e.wordCount, mode);\n });\n })\n ])\n ]),\n eventOrder: {\n [execute$5()]: [\n 'disabling',\n 'alloy.base.behaviour',\n 'wordcount-events'\n ]\n }\n });\n };\n\n const renderStatusbar = (editor, providersBackstage) => {\n const renderBranding = () => {\n return {\n dom: {\n tag: 'span',\n classes: ['tox-statusbar__branding']\n },\n components: [{\n dom: {\n tag: 'a',\n attributes: {\n 'href': 'https://www.tiny.cloud/powered-by-tiny?utm_campaign=editor_referral&utm_medium=poweredby&utm_source=tinymce&utm_content=v6',\n 'rel': 'noopener',\n 'target': '_blank',\n 'aria-label': global$8.translate([\n 'Powered by {0}',\n 'Tiny'\n ])\n },\n innerHtml: Logo.trim()\n },\n behaviours: derive$1([Focusing.config({})])\n }]\n };\n };\n const getTextComponents = () => {\n const components = [];\n if (useElementPath(editor)) {\n components.push(renderElementPath(editor, {}, providersBackstage));\n }\n if (editor.hasPlugin('wordcount')) {\n components.push(renderWordCount(editor, providersBackstage));\n }\n if (useBranding(editor)) {\n components.push(renderBranding());\n }\n if (components.length > 0) {\n return [{\n dom: {\n tag: 'div',\n classes: ['tox-statusbar__text-container']\n },\n components\n }];\n }\n return [];\n };\n const getComponents = () => {\n const components = getTextComponents();\n const resizeHandler = renderResizeHandler(editor, providersBackstage);\n return components.concat(resizeHandler.toArray());\n };\n return {\n dom: {\n tag: 'div',\n classes: ['tox-statusbar']\n },\n components: getComponents()\n };\n };\n\n const getLazyMothership = (label, singleton) => singleton.get().getOrDie(`UI for ${ label } has not been rendered`);\n const setup$3 = editor => {\n const isInline = editor.inline;\n const mode = isInline ? Inline : Iframe;\n const header = isStickyToolbar(editor) ? StickyHeader : StaticHeader;\n const lazyUiRefs = LazyUiReferences();\n const lazyMothership = value$2();\n const lazyDialogMothership = value$2();\n const platform = detect$1();\n const isTouch = platform.deviceType.isTouch();\n const touchPlatformClass = 'tox-platform-touch';\n const deviceClasses = isTouch ? [touchPlatformClass] : [];\n const isToolbarBottom = isToolbarLocationBottom(editor);\n const toolbarMode = getToolbarMode(editor);\n const memAnchorBar = record({\n dom: {\n tag: 'div',\n classes: ['tox-anchorbar']\n }\n });\n const lazyHeader = () => lazyUiRefs.mainUi.get().map(ui => ui.outerContainer).bind(OuterContainer.getHeader);\n const lazyDialogSinkResult = () => Result.fromOption(lazyUiRefs.dialogUi.get().map(ui => ui.sink), 'UI has not been rendered');\n const lazyPopupSinkResult = () => Result.fromOption(lazyUiRefs.popupUi.get().map(ui => ui.sink), '(popup) UI has not been rendered');\n const lazyAnchorBar = lazyUiRefs.lazyGetInOuterOrDie('anchor bar', memAnchorBar.getOpt);\n const lazyToolbar = lazyUiRefs.lazyGetInOuterOrDie('toolbar', OuterContainer.getToolbar);\n const lazyThrobber = lazyUiRefs.lazyGetInOuterOrDie('throbber', OuterContainer.getThrobber);\n const backstages = init$7({\n popup: lazyPopupSinkResult,\n dialog: lazyDialogSinkResult\n }, editor, lazyAnchorBar);\n const makeHeaderPart = () => {\n const verticalDirAttributes = { attributes: { [Attribute]: isToolbarBottom ? AttributeValue.BottomToTop : AttributeValue.TopToBottom } };\n const partMenubar = OuterContainer.parts.menubar({\n dom: {\n tag: 'div',\n classes: ['tox-menubar']\n },\n backstage: backstages.popup,\n onEscape: () => {\n editor.focus();\n }\n });\n const partToolbar = OuterContainer.parts.toolbar({\n dom: {\n tag: 'div',\n classes: ['tox-toolbar']\n },\n getSink: backstages.popup.shared.getSink,\n providers: backstages.popup.shared.providers,\n onEscape: () => {\n editor.focus();\n },\n onToolbarToggled: state => {\n fireToggleToolbarDrawer(editor, state);\n },\n type: toolbarMode,\n lazyToolbar,\n lazyHeader: () => lazyHeader().getOrDie('Could not find header element'),\n ...verticalDirAttributes\n });\n const partMultipleToolbar = OuterContainer.parts['multiple-toolbar']({\n dom: {\n tag: 'div',\n classes: ['tox-toolbar-overlord']\n },\n providers: backstages.popup.shared.providers,\n onEscape: () => {\n editor.focus();\n },\n type: toolbarMode\n });\n const hasMultipleToolbar = isMultipleToolbars(editor);\n const hasToolbar = isToolbarEnabled(editor);\n const hasMenubar = isMenubarEnabled(editor);\n const shouldHavePromotion = promotionEnabled(editor);\n const partPromotion = makePromotion();\n const hasAnyContents = hasMultipleToolbar || hasToolbar || hasMenubar;\n const getPartToolbar = () => {\n if (hasMultipleToolbar) {\n return [partMultipleToolbar];\n } else if (hasToolbar) {\n return [partToolbar];\n } else {\n return [];\n }\n };\n const menubarCollection = shouldHavePromotion ? [\n partPromotion,\n partMenubar\n ] : [partMenubar];\n return OuterContainer.parts.header({\n dom: {\n tag: 'div',\n classes: ['tox-editor-header'].concat(hasAnyContents ? [] : ['tox-editor-header--empty']),\n ...verticalDirAttributes\n },\n components: flatten([\n hasMenubar ? menubarCollection : [],\n getPartToolbar(),\n useFixedContainer(editor) ? [] : [memAnchorBar.asSpec()]\n ]),\n sticky: isStickyToolbar(editor),\n editor,\n sharedBackstage: backstages.popup.shared\n });\n };\n const makePromotion = () => {\n return OuterContainer.parts.promotion({\n dom: {\n tag: 'div',\n classes: ['tox-promotion']\n }\n });\n };\n const makeSidebarDefinition = () => {\n const partSocket = OuterContainer.parts.socket({\n dom: {\n tag: 'div',\n classes: ['tox-edit-area']\n }\n });\n const partSidebar = OuterContainer.parts.sidebar({\n dom: {\n tag: 'div',\n classes: ['tox-sidebar']\n }\n });\n return {\n dom: {\n tag: 'div',\n classes: ['tox-sidebar-wrap']\n },\n components: [\n partSocket,\n partSidebar\n ]\n };\n };\n const renderDialogUi = () => {\n const uiContainer = getUiContainer(editor);\n const isGridUiContainer = eq(body(), uiContainer) && get$e(uiContainer, 'display') === 'grid';\n const sinkSpec = {\n dom: {\n tag: 'div',\n classes: [\n 'tox',\n 'tox-silver-sink',\n 'tox-tinymce-aux'\n ].concat(deviceClasses),\n attributes: { ...global$8.isRtl() ? { dir: 'rtl' } : {} }\n },\n behaviours: derive$1([Positioning.config({ useFixed: () => header.isDocked(lazyHeader) })])\n };\n const reactiveWidthSpec = {\n dom: { styles: { width: document.body.clientWidth + 'px' } },\n events: derive$2([run$1(windowResize(), comp => {\n set$8(comp.element, 'width', document.body.clientWidth + 'px');\n })])\n };\n const sink = build$1(deepMerge(sinkSpec, isGridUiContainer ? reactiveWidthSpec : {}));\n const uiMothership = takeover(sink);\n lazyDialogMothership.set(uiMothership);\n return {\n sink,\n mothership: uiMothership\n };\n };\n const renderPopupUi = identity;\n const renderMainUi = () => {\n const partHeader = makeHeaderPart();\n const sidebarContainer = makeSidebarDefinition();\n const partThrobber = OuterContainer.parts.throbber({\n dom: {\n tag: 'div',\n classes: ['tox-throbber']\n },\n backstage: backstages.popup\n });\n const partViewWrapper = OuterContainer.parts.viewWrapper({ backstage: backstages.popup });\n const statusbar = useStatusBar(editor) && !isInline ? Optional.some(renderStatusbar(editor, backstages.popup.shared.providers)) : Optional.none();\n const editorComponents = flatten([\n isToolbarBottom ? [] : [partHeader],\n isInline ? [] : [sidebarContainer],\n isToolbarBottom ? [partHeader] : []\n ]);\n const editorContainer = OuterContainer.parts.editorContainer({\n components: flatten([\n editorComponents,\n isInline ? [] : statusbar.toArray()\n ])\n });\n const isHidden = isDistractionFree(editor);\n const attributes = {\n role: 'application',\n ...global$8.isRtl() ? { dir: 'rtl' } : {},\n ...isHidden ? { 'aria-hidden': 'true' } : {}\n };\n const outerContainer = build$1(OuterContainer.sketch({\n dom: {\n tag: 'div',\n classes: [\n 'tox',\n 'tox-tinymce'\n ].concat(isInline ? ['tox-tinymce-inline'] : []).concat(isToolbarBottom ? ['tox-tinymce--toolbar-bottom'] : []).concat(deviceClasses),\n styles: {\n visibility: 'hidden',\n ...isHidden ? {\n opacity: '0',\n border: '0'\n } : {}\n },\n attributes\n },\n components: [\n editorContainer,\n ...isInline ? [] : [partViewWrapper],\n partThrobber\n ],\n behaviours: derive$1([\n receivingConfig(),\n Disabling.config({ disableClass: 'tox-tinymce--disabled' }),\n Keying.config({\n mode: 'cyclic',\n selector: '.tox-menubar, .tox-toolbar, .tox-toolbar__primary, .tox-toolbar__overflow--open, .tox-sidebar__overflow--open, .tox-statusbar__path, .tox-statusbar__wordcount, .tox-statusbar__branding a, .tox-statusbar__resize-handle'\n })\n ])\n }));\n const mothership = takeover(outerContainer);\n lazyMothership.set(mothership);\n return {\n mothership,\n outerContainer\n };\n };\n const setEditorSize = outerContainer => {\n const parsedHeight = numToPx(getHeightWithFallback(editor));\n const parsedWidth = numToPx(getWidthWithFallback(editor));\n if (!editor.inline) {\n if (isValidValue('div', 'width', parsedWidth)) {\n set$8(outerContainer.element, 'width', parsedWidth);\n }\n if (isValidValue('div', 'height', parsedHeight)) {\n set$8(outerContainer.element, 'height', parsedHeight);\n } else {\n set$8(outerContainer.element, 'height', '400px');\n }\n }\n return parsedHeight;\n };\n const setupShortcutsAndCommands = outerContainer => {\n editor.addShortcut('alt+F9', 'focus menubar', () => {\n OuterContainer.focusMenubar(outerContainer);\n });\n editor.addShortcut('alt+F10', 'focus toolbar', () => {\n OuterContainer.focusToolbar(outerContainer);\n });\n editor.addCommand('ToggleToolbarDrawer', () => {\n OuterContainer.toggleToolbarDrawer(outerContainer);\n });\n editor.addQueryStateHandler('ToggleToolbarDrawer', () => OuterContainer.isToolbarDrawerToggled(outerContainer));\n };\n const renderUIWithRefs = uiRefs => {\n const {mainUi, popupUi, uiMotherships} = uiRefs;\n map$1(getToolbarGroups(editor), (toolbarGroupButtonConfig, name) => {\n editor.ui.registry.addGroupToolbarButton(name, toolbarGroupButtonConfig);\n });\n const {buttons, menuItems, contextToolbars, sidebars, views} = editor.ui.registry.getAll();\n const toolbarOpt = getMultipleToolbarsOption(editor);\n const rawUiConfig = {\n menuItems,\n menus: getMenus(editor),\n menubar: getMenubar(editor),\n toolbar: toolbarOpt.getOrThunk(() => getToolbar(editor)),\n allowToolbarGroups: toolbarMode === ToolbarMode$1.floating,\n buttons,\n sidebar: sidebars,\n views\n };\n setupShortcutsAndCommands(mainUi.outerContainer);\n setup$b(editor, mainUi.mothership, uiMotherships);\n header.setup(editor, backstages.popup.shared, lazyHeader);\n setup$6(editor, backstages.popup);\n setup$5(editor, backstages.popup.shared.getSink, backstages.popup);\n setup$8(editor);\n setup$7(editor, lazyThrobber, backstages.popup.shared);\n register$9(editor, contextToolbars, popupUi.sink, { backstage: backstages.popup });\n setup$4(editor, popupUi.sink);\n const elm = editor.getElement();\n const height = setEditorSize(mainUi.outerContainer);\n const args = {\n targetNode: elm,\n height\n };\n return mode.render(editor, uiRefs, rawUiConfig, backstages.popup, args);\n };\n const renderUI = () => {\n const mainUi = renderMainUi();\n const dialogUi = renderDialogUi();\n const popupUi = renderPopupUi(dialogUi);\n lazyUiRefs.dialogUi.set(dialogUi);\n lazyUiRefs.popupUi.set(popupUi);\n lazyUiRefs.mainUi.set(mainUi);\n const uiRefs = {\n popupUi,\n dialogUi,\n mainUi,\n uiMotherships: lazyUiRefs.getUiMotherships()\n };\n return renderUIWithRefs(uiRefs);\n };\n return {\n popups: {\n backstage: backstages.popup,\n getMothership: () => getLazyMothership('popups', lazyDialogMothership)\n },\n dialogs: {\n backstage: backstages.dialog,\n getMothership: () => getLazyMothership('dialogs', lazyDialogMothership)\n },\n renderUI\n };\n };\n\n const describedBy = (describedElement, describeElement) => {\n const describeId = Optional.from(get$f(describedElement, 'id')).fold(() => {\n const id = generate$6('dialog-describe');\n set$9(describeElement, 'id', id);\n return id;\n }, identity);\n set$9(describedElement, 'aria-describedby', describeId);\n };\n\n const labelledBy = (labelledElement, labelElement) => {\n const labelId = getOpt(labelledElement, 'id').fold(() => {\n const id = generate$6('dialog-label');\n set$9(labelElement, 'id', id);\n return id;\n }, identity);\n set$9(labelledElement, 'aria-labelledby', labelId);\n };\n\n const schema$2 = constant$1([\n required$1('lazySink'),\n option$3('dragBlockClass'),\n defaultedFunction('getBounds', win),\n defaulted('useTabstopAt', always),\n defaulted('eventOrder', {}),\n field('modalBehaviours', [Keying]),\n onKeyboardHandler('onExecute'),\n onStrictKeyboardHandler('onEscape')\n ]);\n const basic = { sketch: identity };\n const parts$2 = constant$1([\n optional({\n name: 'draghandle',\n overrides: (detail, spec) => {\n return {\n behaviours: derive$1([Dragging.config({\n mode: 'mouse',\n getTarget: handle => {\n return ancestor(handle, '[role=\"dialog\"]').getOr(handle);\n },\n blockerClass: detail.dragBlockClass.getOrDie(new Error('The drag blocker class was not specified for a dialog with a drag handle: \\n' + JSON.stringify(spec, null, 2)).message),\n getBounds: detail.getDragBounds\n })])\n };\n }\n }),\n required({\n schema: [required$1('dom')],\n name: 'title'\n }),\n required({\n factory: basic,\n schema: [required$1('dom')],\n name: 'close'\n }),\n required({\n factory: basic,\n schema: [required$1('dom')],\n name: 'body'\n }),\n optional({\n factory: basic,\n schema: [required$1('dom')],\n name: 'footer'\n }),\n external({\n factory: {\n sketch: (spec, detail) => ({\n ...spec,\n dom: detail.dom,\n components: detail.components\n })\n },\n schema: [\n defaulted('dom', {\n tag: 'div',\n styles: {\n position: 'fixed',\n left: '0px',\n top: '0px',\n right: '0px',\n bottom: '0px'\n }\n }),\n defaulted('components', [])\n ],\n name: 'blocker'\n })\n ]);\n\n const factory$4 = (detail, components, spec, externals) => {\n const dialogComp = value$2();\n const showDialog = dialog => {\n dialogComp.set(dialog);\n const sink = detail.lazySink(dialog).getOrDie();\n const externalBlocker = externals.blocker();\n const blocker = sink.getSystem().build({\n ...externalBlocker,\n components: externalBlocker.components.concat([premade(dialog)]),\n behaviours: derive$1([\n Focusing.config({}),\n config('dialog-blocker-events', [runOnSource(focusin(), () => {\n Keying.focusIn(dialog);\n })])\n ])\n });\n attach(sink, blocker);\n Keying.focusIn(dialog);\n };\n const hideDialog = dialog => {\n dialogComp.clear();\n parent(dialog.element).each(blockerDom => {\n dialog.getSystem().getByDom(blockerDom).each(blocker => {\n detach(blocker);\n });\n });\n };\n const getDialogBody = dialog => getPartOrDie(dialog, detail, 'body');\n const getDialogFooter = dialog => getPartOrDie(dialog, detail, 'footer');\n const setBusy = (dialog, getBusySpec) => {\n Blocking.block(dialog, getBusySpec);\n };\n const setIdle = dialog => {\n Blocking.unblock(dialog);\n };\n const modalEventsId = generate$6('modal-events');\n const eventOrder = {\n ...detail.eventOrder,\n [attachedToDom()]: [modalEventsId].concat(detail.eventOrder['alloy.system.attached'] || [])\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n apis: {\n show: showDialog,\n hide: hideDialog,\n getBody: getDialogBody,\n getFooter: getDialogFooter,\n setIdle,\n setBusy\n },\n eventOrder,\n domModification: {\n attributes: {\n 'role': 'dialog',\n 'aria-modal': 'true'\n }\n },\n behaviours: augment(detail.modalBehaviours, [\n Replacing.config({}),\n Keying.config({\n mode: 'cyclic',\n onEnter: detail.onExecute,\n onEscape: detail.onEscape,\n useTabstopAt: detail.useTabstopAt\n }),\n Blocking.config({ getRoot: dialogComp.get }),\n config(modalEventsId, [runOnAttached(c => {\n labelledBy(c.element, getPartOrDie(c, detail, 'title').element);\n describedBy(c.element, getPartOrDie(c, detail, 'body').element);\n })])\n ])\n };\n };\n const ModalDialog = composite({\n name: 'ModalDialog',\n configFields: schema$2(),\n partFields: parts$2(),\n factory: factory$4,\n apis: {\n show: (apis, dialog) => {\n apis.show(dialog);\n },\n hide: (apis, dialog) => {\n apis.hide(dialog);\n },\n getBody: (apis, dialog) => apis.getBody(dialog),\n getFooter: (apis, dialog) => apis.getFooter(dialog),\n setBusy: (apis, dialog, getBusySpec) => {\n apis.setBusy(dialog, getBusySpec);\n },\n setIdle: (apis, dialog) => {\n apis.setIdle(dialog);\n }\n }\n });\n\n const dialogToggleMenuItemSchema = objOf([\n type,\n name$1\n ].concat(commonMenuItemFields));\n const dialogToggleMenuItemDataProcessor = boolean;\n\n const baseFooterButtonFields = [\n generatedName('button'),\n optionalIcon,\n defaultedStringEnum('align', 'end', [\n 'start',\n 'end'\n ]),\n primary,\n enabled,\n optionStringEnum('buttonType', [\n 'primary',\n 'secondary'\n ])\n ];\n const dialogFooterButtonFields = [\n ...baseFooterButtonFields,\n text$1\n ];\n const normalFooterButtonFields = [\n requiredStringEnum('type', [\n 'submit',\n 'cancel',\n 'custom'\n ]),\n ...dialogFooterButtonFields\n ];\n const menuFooterButtonFields = [\n requiredStringEnum('type', ['menu']),\n optionalText,\n optionalTooltip,\n optionalIcon,\n requiredArrayOf('items', dialogToggleMenuItemSchema),\n ...baseFooterButtonFields\n ];\n const dialogFooterButtonSchema = choose$1('type', {\n submit: normalFooterButtonFields,\n cancel: normalFooterButtonFields,\n custom: normalFooterButtonFields,\n menu: menuFooterButtonFields\n });\n\n const alertBannerFields = [\n type,\n text$1,\n requiredStringEnum('level', [\n 'info',\n 'warn',\n 'error',\n 'success'\n ]),\n icon,\n defaulted('url', '')\n ];\n const alertBannerSchema = objOf(alertBannerFields);\n\n const createBarFields = itemsField => [\n type,\n itemsField\n ];\n\n const buttonFields = [\n type,\n text$1,\n enabled,\n generatedName('button'),\n optionalIcon,\n borderless,\n optionStringEnum('buttonType', [\n 'primary',\n 'secondary',\n 'toolbar'\n ]),\n primary\n ];\n const buttonSchema = objOf(buttonFields);\n\n const formComponentFields = [\n type,\n name$1\n ];\n const formComponentWithLabelFields = formComponentFields.concat([optionalLabel]);\n\n const checkboxFields = formComponentFields.concat([\n label,\n enabled\n ]);\n const checkboxSchema = objOf(checkboxFields);\n const checkboxDataProcessor = boolean;\n\n const collectionFields = formComponentWithLabelFields.concat([defaultedColumns('auto')]);\n const collectionSchema = objOf(collectionFields);\n const collectionDataProcessor = arrOfObj([\n value$1,\n text$1,\n icon\n ]);\n\n const colorInputFields = formComponentWithLabelFields.concat([defaultedString('storageKey', 'default')]);\n const colorInputSchema = objOf(colorInputFields);\n const colorInputDataProcessor = string;\n\n const colorPickerFields = formComponentWithLabelFields;\n const colorPickerSchema = objOf(colorPickerFields);\n const colorPickerDataProcessor = string;\n\n const customEditorFields = formComponentFields.concat([\n defaultedString('tag', 'textarea'),\n requiredString('scriptId'),\n requiredString('scriptUrl'),\n defaultedPostMsg('settings', undefined)\n ]);\n const customEditorFieldsOld = formComponentFields.concat([\n defaultedString('tag', 'textarea'),\n requiredFunction('init')\n ]);\n const customEditorSchema = valueOf(v => asRaw('customeditor.old', objOfOnly(customEditorFieldsOld), v).orThunk(() => asRaw('customeditor.new', objOfOnly(customEditorFields), v)));\n const customEditorDataProcessor = string;\n\n const dropZoneFields = formComponentWithLabelFields;\n const dropZoneSchema = objOf(dropZoneFields);\n const dropZoneDataProcessor = arrOfVal();\n\n const createGridFields = itemsField => [\n type,\n requiredNumber('columns'),\n itemsField\n ];\n\n const htmlPanelFields = [\n type,\n requiredString('html'),\n defaultedStringEnum('presets', 'presentation', [\n 'presentation',\n 'document'\n ])\n ];\n const htmlPanelSchema = objOf(htmlPanelFields);\n\n const iframeFields = formComponentWithLabelFields.concat([\n defaultedBoolean('sandboxed', true),\n defaultedBoolean('transparent', true)\n ]);\n const iframeSchema = objOf(iframeFields);\n const iframeDataProcessor = string;\n\n const imagePreviewSchema = objOf(formComponentFields.concat([optionString('height')]));\n const imagePreviewDataProcessor = objOf([\n requiredString('url'),\n optionNumber('zoom'),\n optionNumber('cachedWidth'),\n optionNumber('cachedHeight')\n ]);\n\n const inputFields = formComponentWithLabelFields.concat([\n optionString('inputMode'),\n optionString('placeholder'),\n defaultedBoolean('maximized', false),\n enabled\n ]);\n const inputSchema = objOf(inputFields);\n const inputDataProcessor = string;\n\n const createLabelFields = itemsField => [\n type,\n label,\n itemsField\n ];\n\n const listBoxSingleItemFields = [\n text$1,\n value$1\n ];\n const listBoxNestedItemFields = [\n text$1,\n requiredArrayOf('items', thunkOf('items', () => listBoxItemSchema))\n ];\n const listBoxItemSchema = oneOf([\n objOf(listBoxSingleItemFields),\n objOf(listBoxNestedItemFields)\n ]);\n const listBoxFields = formComponentWithLabelFields.concat([\n requiredArrayOf('items', listBoxItemSchema),\n enabled\n ]);\n const listBoxSchema = objOf(listBoxFields);\n const listBoxDataProcessor = string;\n\n const selectBoxFields = formComponentWithLabelFields.concat([\n requiredArrayOfObj('items', [\n text$1,\n value$1\n ]),\n defaultedNumber('size', 1),\n enabled\n ]);\n const selectBoxSchema = objOf(selectBoxFields);\n const selectBoxDataProcessor = string;\n\n const sizeInputFields = formComponentWithLabelFields.concat([\n defaultedBoolean('constrain', true),\n enabled\n ]);\n const sizeInputSchema = objOf(sizeInputFields);\n const sizeInputDataProcessor = objOf([\n requiredString('width'),\n requiredString('height')\n ]);\n\n const sliderFields = formComponentFields.concat([\n label,\n defaultedNumber('min', 0),\n defaultedNumber('max', 0)\n ]);\n const sliderSchema = objOf(sliderFields);\n const sliderInputDataProcessor = number;\n\n const tableFields = [\n type,\n requiredArrayOf('header', string),\n requiredArrayOf('cells', arrOf(string))\n ];\n const tableSchema = objOf(tableFields);\n\n const textAreaFields = formComponentWithLabelFields.concat([\n optionString('placeholder'),\n defaultedBoolean('maximized', false),\n enabled\n ]);\n const textAreaSchema = objOf(textAreaFields);\n const textAreaDataProcessor = string;\n\n const urlInputFields = formComponentWithLabelFields.concat([\n defaultedStringEnum('filetype', 'file', [\n 'image',\n 'media',\n 'file'\n ]),\n enabled\n ]);\n const urlInputSchema = objOf(urlInputFields);\n const urlInputDataProcessor = objOf([\n value$1,\n defaultedMeta\n ]);\n\n const createItemsField = name => field$1('items', 'items', required$2(), arrOf(valueOf(v => asRaw(`Checking item of ${ name }`, itemSchema, v).fold(sErr => Result.error(formatError(sErr)), passValue => Result.value(passValue)))));\n const itemSchema = valueThunk(() => choose$2('type', {\n alertbanner: alertBannerSchema,\n bar: objOf(createBarFields(createItemsField('bar'))),\n button: buttonSchema,\n checkbox: checkboxSchema,\n colorinput: colorInputSchema,\n colorpicker: colorPickerSchema,\n dropzone: dropZoneSchema,\n grid: objOf(createGridFields(createItemsField('grid'))),\n iframe: iframeSchema,\n input: inputSchema,\n listbox: listBoxSchema,\n selectbox: selectBoxSchema,\n sizeinput: sizeInputSchema,\n slider: sliderSchema,\n textarea: textAreaSchema,\n urlinput: urlInputSchema,\n customeditor: customEditorSchema,\n htmlpanel: htmlPanelSchema,\n imagepreview: imagePreviewSchema,\n collection: collectionSchema,\n label: objOf(createLabelFields(createItemsField('label'))),\n table: tableSchema,\n panel: panelSchema\n }));\n const panelFields = [\n type,\n defaulted('classes', []),\n requiredArrayOf('items', itemSchema)\n ];\n const panelSchema = objOf(panelFields);\n\n const tabFields = [\n generatedName('tab'),\n title,\n requiredArrayOf('items', itemSchema)\n ];\n const tabPanelFields = [\n type,\n requiredArrayOfObj('tabs', tabFields)\n ];\n const tabPanelSchema = objOf(tabPanelFields);\n\n const dialogButtonFields = dialogFooterButtonFields;\n const dialogButtonSchema = dialogFooterButtonSchema;\n const dialogSchema = objOf([\n requiredString('title'),\n requiredOf('body', choose$2('type', {\n panel: panelSchema,\n tabpanel: tabPanelSchema\n })),\n defaultedString('size', 'normal'),\n requiredArrayOf('buttons', dialogButtonSchema),\n defaulted('initialData', {}),\n defaultedFunction('onAction', noop),\n defaultedFunction('onChange', noop),\n defaultedFunction('onSubmit', noop),\n defaultedFunction('onClose', noop),\n defaultedFunction('onCancel', noop),\n defaultedFunction('onTabChange', noop)\n ]);\n const createDialog = spec => asRaw('dialog', dialogSchema, spec);\n\n const urlDialogButtonSchema = objOf([\n requiredStringEnum('type', [\n 'cancel',\n 'custom'\n ]),\n ...dialogButtonFields\n ]);\n const urlDialogSchema = objOf([\n requiredString('title'),\n requiredString('url'),\n optionNumber('height'),\n optionNumber('width'),\n optionArrayOf('buttons', urlDialogButtonSchema),\n defaultedFunction('onAction', noop),\n defaultedFunction('onCancel', noop),\n defaultedFunction('onClose', noop),\n defaultedFunction('onMessage', noop)\n ]);\n const createUrlDialog = spec => asRaw('dialog', urlDialogSchema, spec);\n\n const getAllObjects = obj => {\n if (isObject(obj)) {\n return [obj].concat(bind$3(values(obj), getAllObjects));\n } else if (isArray(obj)) {\n return bind$3(obj, getAllObjects);\n } else {\n return [];\n }\n };\n\n const isNamedItem = obj => isString(obj.type) && isString(obj.name);\n const dataProcessors = {\n checkbox: checkboxDataProcessor,\n colorinput: colorInputDataProcessor,\n colorpicker: colorPickerDataProcessor,\n dropzone: dropZoneDataProcessor,\n input: inputDataProcessor,\n iframe: iframeDataProcessor,\n imagepreview: imagePreviewDataProcessor,\n selectbox: selectBoxDataProcessor,\n sizeinput: sizeInputDataProcessor,\n slider: sliderInputDataProcessor,\n listbox: listBoxDataProcessor,\n size: sizeInputDataProcessor,\n textarea: textAreaDataProcessor,\n urlinput: urlInputDataProcessor,\n customeditor: customEditorDataProcessor,\n collection: collectionDataProcessor,\n togglemenuitem: dialogToggleMenuItemDataProcessor\n };\n const getDataProcessor = item => Optional.from(dataProcessors[item.type]);\n const getNamedItems = structure => filter$2(getAllObjects(structure), isNamedItem);\n\n const createDataValidator = structure => {\n const namedItems = getNamedItems(structure);\n const fields = bind$3(namedItems, item => getDataProcessor(item).fold(() => [], schema => [requiredOf(item.name, schema)]));\n return objOf(fields);\n };\n\n const extract = structure => {\n var _a;\n const internalDialog = getOrDie(createDialog(structure));\n const dataValidator = createDataValidator(structure);\n const initialData = (_a = structure.initialData) !== null && _a !== void 0 ? _a : {};\n return {\n internalDialog,\n dataValidator,\n initialData\n };\n };\n const DialogManager = {\n open: (factory, structure) => {\n const extraction = extract(structure);\n return factory(extraction.internalDialog, extraction.initialData, extraction.dataValidator);\n },\n openUrl: (factory, structure) => {\n const internalDialog = getOrDie(createUrlDialog(structure));\n return factory(internalDialog);\n },\n redial: structure => extract(structure)\n };\n\n const toValidValues = values => {\n const errors = [];\n const result = {};\n each(values, (value, name) => {\n value.fold(() => {\n errors.push(name);\n }, v => {\n result[name] = v;\n });\n });\n return errors.length > 0 ? Result.error(errors) : Result.value(result);\n };\n\n const renderBodyPanel = (spec, dialogData, backstage) => {\n const memForm = record(Form.sketch(parts => ({\n dom: {\n tag: 'div',\n classes: ['tox-form'].concat(spec.classes)\n },\n components: map$2(spec.items, item => interpretInForm(parts, item, dialogData, backstage))\n })));\n return {\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body']\n },\n components: [{\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body-content']\n },\n components: [memForm.asSpec()]\n }],\n behaviours: derive$1([\n Keying.config({\n mode: 'acyclic',\n useTabstopAt: not(isPseudoStop)\n }),\n ComposingConfigs.memento(memForm),\n RepresentingConfigs.memento(memForm, {\n postprocess: formValue => toValidValues(formValue).fold(err => {\n console.error(err);\n return {};\n }, identity)\n })\n ])\n };\n };\n\n const factory$3 = (detail, _spec) => ({\n uid: detail.uid,\n dom: detail.dom,\n components: detail.components,\n events: events$a(detail.action),\n behaviours: augment(detail.tabButtonBehaviours, [\n Focusing.config({}),\n Keying.config({\n mode: 'execution',\n useSpace: true,\n useEnter: true\n }),\n Representing.config({\n store: {\n mode: 'memory',\n initialValue: detail.value\n }\n })\n ]),\n domModification: detail.domModification\n });\n const TabButton = single({\n name: 'TabButton',\n configFields: [\n defaulted('uid', undefined),\n required$1('value'),\n field$1('dom', 'dom', mergeWithThunk(() => ({\n attributes: {\n 'role': 'tab',\n 'id': generate$6('aria'),\n 'aria-selected': 'false'\n }\n })), anyValue()),\n option$3('action'),\n defaulted('domModification', {}),\n field('tabButtonBehaviours', [\n Focusing,\n Keying,\n Representing\n ]),\n required$1('view')\n ],\n factory: factory$3\n });\n\n const schema$1 = constant$1([\n required$1('tabs'),\n required$1('dom'),\n defaulted('clickToDismiss', false),\n field('tabbarBehaviours', [\n Highlighting,\n Keying\n ]),\n markers$1([\n 'tabClass',\n 'selectedClass'\n ])\n ]);\n const tabsPart = group({\n factory: TabButton,\n name: 'tabs',\n unit: 'tab',\n overrides: barDetail => {\n const dismissTab$1 = (tabbar, button) => {\n Highlighting.dehighlight(tabbar, button);\n emitWith(tabbar, dismissTab(), {\n tabbar,\n button\n });\n };\n const changeTab$1 = (tabbar, button) => {\n Highlighting.highlight(tabbar, button);\n emitWith(tabbar, changeTab(), {\n tabbar,\n button\n });\n };\n return {\n action: button => {\n const tabbar = button.getSystem().getByUid(barDetail.uid).getOrDie();\n const activeButton = Highlighting.isHighlighted(tabbar, button);\n const response = (() => {\n if (activeButton && barDetail.clickToDismiss) {\n return dismissTab$1;\n } else if (!activeButton) {\n return changeTab$1;\n } else {\n return noop;\n }\n })();\n response(tabbar, button);\n },\n domModification: { classes: [barDetail.markers.tabClass] }\n };\n }\n });\n const parts$1 = constant$1([tabsPart]);\n\n const factory$2 = (detail, components, _spec, _externals) => ({\n 'uid': detail.uid,\n 'dom': detail.dom,\n components,\n 'debug.sketcher': 'Tabbar',\n 'domModification': { attributes: { role: 'tablist' } },\n 'behaviours': augment(detail.tabbarBehaviours, [\n Highlighting.config({\n highlightClass: detail.markers.selectedClass,\n itemClass: detail.markers.tabClass,\n onHighlight: (tabbar, tab) => {\n set$9(tab.element, 'aria-selected', 'true');\n },\n onDehighlight: (tabbar, tab) => {\n set$9(tab.element, 'aria-selected', 'false');\n }\n }),\n Keying.config({\n mode: 'flow',\n getInitial: tabbar => {\n return Highlighting.getHighlighted(tabbar).map(tab => tab.element);\n },\n selector: '.' + detail.markers.tabClass,\n executeOnMove: true\n })\n ])\n });\n const Tabbar = composite({\n name: 'Tabbar',\n configFields: schema$1(),\n partFields: parts$1(),\n factory: factory$2\n });\n\n const factory$1 = (detail, _spec) => ({\n uid: detail.uid,\n dom: detail.dom,\n behaviours: augment(detail.tabviewBehaviours, [Replacing.config({})]),\n domModification: { attributes: { role: 'tabpanel' } }\n });\n const Tabview = single({\n name: 'Tabview',\n configFields: [field('tabviewBehaviours', [Replacing])],\n factory: factory$1\n });\n\n const schema = constant$1([\n defaulted('selectFirst', true),\n onHandler('onChangeTab'),\n onHandler('onDismissTab'),\n defaulted('tabs', []),\n field('tabSectionBehaviours', [])\n ]);\n const barPart = required({\n factory: Tabbar,\n schema: [\n required$1('dom'),\n requiredObjOf('markers', [\n required$1('tabClass'),\n required$1('selectedClass')\n ])\n ],\n name: 'tabbar',\n defaults: detail => {\n return { tabs: detail.tabs };\n }\n });\n const viewPart = required({\n factory: Tabview,\n name: 'tabview'\n });\n const parts = constant$1([\n barPart,\n viewPart\n ]);\n\n const factory = (detail, components, _spec, _externals) => {\n const changeTab$1 = button => {\n const tabValue = Representing.getValue(button);\n getPart(button, detail, 'tabview').each(tabview => {\n const tabWithValue = find$5(detail.tabs, t => t.value === tabValue);\n tabWithValue.each(tabData => {\n const panel = tabData.view();\n getOpt(button.element, 'id').each(id => {\n set$9(tabview.element, 'aria-labelledby', id);\n });\n Replacing.set(tabview, panel);\n detail.onChangeTab(tabview, button, panel);\n });\n });\n };\n const changeTabBy = (section, byPred) => {\n getPart(section, detail, 'tabbar').each(tabbar => {\n byPred(tabbar).each(emitExecute);\n });\n };\n return {\n uid: detail.uid,\n dom: detail.dom,\n components,\n behaviours: get$3(detail.tabSectionBehaviours),\n events: derive$2(flatten([\n detail.selectFirst ? [runOnAttached((section, _simulatedEvent) => {\n changeTabBy(section, Highlighting.getFirst);\n })] : [],\n [\n run$1(changeTab(), (section, simulatedEvent) => {\n const button = simulatedEvent.event.button;\n changeTab$1(button);\n }),\n run$1(dismissTab(), (section, simulatedEvent) => {\n const button = simulatedEvent.event.button;\n detail.onDismissTab(section, button);\n })\n ]\n ])),\n apis: {\n getViewItems: section => {\n return getPart(section, detail, 'tabview').map(tabview => Replacing.contents(tabview)).getOr([]);\n },\n showTab: (section, tabKey) => {\n const getTabIfNotActive = tabbar => {\n const candidates = Highlighting.getCandidates(tabbar);\n const optTab = find$5(candidates, c => Representing.getValue(c) === tabKey);\n return optTab.filter(tab => !Highlighting.isHighlighted(tabbar, tab));\n };\n changeTabBy(section, getTabIfNotActive);\n }\n }\n };\n };\n const TabSection = composite({\n name: 'TabSection',\n configFields: schema(),\n partFields: parts(),\n factory,\n apis: {\n getViewItems: (apis, component) => apis.getViewItems(component),\n showTab: (apis, component, tabKey) => {\n apis.showTab(component, tabKey);\n }\n }\n });\n\n const measureHeights = (allTabs, tabview, tabviewComp) => map$2(allTabs, (_tab, i) => {\n Replacing.set(tabviewComp, allTabs[i].view());\n const rect = tabview.dom.getBoundingClientRect();\n Replacing.set(tabviewComp, []);\n return rect.height;\n });\n const getMaxHeight = heights => head(sort(heights, (a, b) => {\n if (a > b) {\n return -1;\n } else if (a < b) {\n return +1;\n } else {\n return 0;\n }\n }));\n const getMaxTabviewHeight = (dialog, tabview, tablist) => {\n const documentElement$1 = documentElement(dialog).dom;\n const rootElm = ancestor(dialog, '.tox-dialog-wrap').getOr(dialog);\n const isFixed = get$e(rootElm, 'position') === 'fixed';\n let maxHeight;\n if (isFixed) {\n maxHeight = Math.max(documentElement$1.clientHeight, window.innerHeight);\n } else {\n maxHeight = Math.max(documentElement$1.offsetHeight, documentElement$1.scrollHeight);\n }\n const tabviewHeight = get$d(tabview);\n const isTabListBeside = tabview.dom.offsetLeft >= tablist.dom.offsetLeft + get$c(tablist);\n const currentTabHeight = isTabListBeside ? Math.max(get$d(tablist), tabviewHeight) : tabviewHeight;\n const dialogTopMargin = parseInt(get$e(dialog, 'margin-top'), 10) || 0;\n const dialogBottomMargin = parseInt(get$e(dialog, 'margin-bottom'), 10) || 0;\n const dialogHeight = get$d(dialog) + dialogTopMargin + dialogBottomMargin;\n const chromeHeight = dialogHeight - currentTabHeight;\n return maxHeight - chromeHeight;\n };\n const showTab = (allTabs, comp) => {\n head(allTabs).each(tab => TabSection.showTab(comp, tab.value));\n };\n const setTabviewHeight = (tabview, height) => {\n set$8(tabview, 'height', height + 'px');\n set$8(tabview, 'flex-basis', height + 'px');\n };\n const updateTabviewHeight = (dialogBody, tabview, maxTabHeight) => {\n ancestor(dialogBody, '[role=\"dialog\"]').each(dialog => {\n descendant(dialog, '[role=\"tablist\"]').each(tablist => {\n maxTabHeight.get().map(height => {\n set$8(tabview, 'height', '0');\n set$8(tabview, 'flex-basis', '0');\n return Math.min(height, getMaxTabviewHeight(dialog, tabview, tablist));\n }).each(height => {\n setTabviewHeight(tabview, height);\n });\n });\n });\n };\n const getTabview = dialog => descendant(dialog, '[role=\"tabpanel\"]');\n const smartMode = allTabs => {\n const maxTabHeight = value$2();\n const extraEvents = [\n runOnAttached(comp => {\n const dialog = comp.element;\n getTabview(dialog).each(tabview => {\n set$8(tabview, 'visibility', 'hidden');\n comp.getSystem().getByDom(tabview).toOptional().each(tabviewComp => {\n const heights = measureHeights(allTabs, tabview, tabviewComp);\n const maxTabHeightOpt = getMaxHeight(heights);\n maxTabHeightOpt.fold(maxTabHeight.clear, maxTabHeight.set);\n });\n updateTabviewHeight(dialog, tabview, maxTabHeight);\n remove$6(tabview, 'visibility');\n showTab(allTabs, comp);\n requestAnimationFrame(() => {\n updateTabviewHeight(dialog, tabview, maxTabHeight);\n });\n });\n }),\n run$1(windowResize(), comp => {\n const dialog = comp.element;\n getTabview(dialog).each(tabview => {\n updateTabviewHeight(dialog, tabview, maxTabHeight);\n });\n }),\n run$1(formResizeEvent, (comp, _se) => {\n const dialog = comp.element;\n getTabview(dialog).each(tabview => {\n const oldFocus = active$1(getRootNode(tabview));\n set$8(tabview, 'visibility', 'hidden');\n const oldHeight = getRaw(tabview, 'height').map(h => parseInt(h, 10));\n remove$6(tabview, 'height');\n remove$6(tabview, 'flex-basis');\n const newHeight = tabview.dom.getBoundingClientRect().height;\n const hasGrown = oldHeight.forall(h => newHeight > h);\n if (hasGrown) {\n maxTabHeight.set(newHeight);\n updateTabviewHeight(dialog, tabview, maxTabHeight);\n } else {\n oldHeight.each(h => {\n setTabviewHeight(tabview, h);\n });\n }\n remove$6(tabview, 'visibility');\n oldFocus.each(focus$3);\n });\n })\n ];\n const selectFirst = false;\n return {\n extraEvents,\n selectFirst\n };\n };\n\n const SendDataToSectionChannel = 'send-data-to-section';\n const SendDataToViewChannel = 'send-data-to-view';\n const renderTabPanel = (spec, dialogData, backstage) => {\n const storedValue = Cell({});\n const updateDataWithForm = form => {\n const formData = Representing.getValue(form);\n const validData = toValidValues(formData).getOr({});\n const currentData = storedValue.get();\n const newData = deepMerge(currentData, validData);\n storedValue.set(newData);\n };\n const setDataOnForm = form => {\n const tabData = storedValue.get();\n Representing.setValue(form, tabData);\n };\n const oldTab = Cell(null);\n const allTabs = map$2(spec.tabs, tab => {\n return {\n value: tab.name,\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body-nav-item']\n },\n components: [text$2(backstage.shared.providers.translate(tab.title))],\n view: () => {\n return [Form.sketch(parts => ({\n dom: {\n tag: 'div',\n classes: ['tox-form']\n },\n components: map$2(tab.items, item => interpretInForm(parts, item, dialogData, backstage)),\n formBehaviours: derive$1([\n Keying.config({\n mode: 'acyclic',\n useTabstopAt: not(isPseudoStop)\n }),\n config('TabView.form.events', [\n runOnAttached(setDataOnForm),\n runOnDetached(updateDataWithForm)\n ]),\n Receiving.config({\n channels: wrapAll([\n {\n key: SendDataToSectionChannel,\n value: { onReceive: updateDataWithForm }\n },\n {\n key: SendDataToViewChannel,\n value: { onReceive: setDataOnForm }\n }\n ])\n })\n ])\n }))];\n }\n };\n });\n const tabMode = smartMode(allTabs);\n return TabSection.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body']\n },\n onChangeTab: (section, button, _viewItems) => {\n const name = Representing.getValue(button);\n emitWith(section, formTabChangeEvent, {\n name,\n oldName: oldTab.get()\n });\n oldTab.set(name);\n },\n tabs: allTabs,\n components: [\n TabSection.parts.tabbar({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body-nav']\n },\n components: [Tabbar.parts.tabs({})],\n markers: {\n tabClass: 'tox-tab',\n selectedClass: 'tox-dialog__body-nav-item--active'\n },\n tabbarBehaviours: derive$1([Tabstopping.config({})])\n }),\n TabSection.parts.tabview({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body-content']\n }\n })\n ],\n selectFirst: tabMode.selectFirst,\n tabSectionBehaviours: derive$1([\n config('tabpanel', tabMode.extraEvents),\n Keying.config({ mode: 'acyclic' }),\n Composing.config({ find: comp => head(TabSection.getViewItems(comp)) }),\n RepresentingConfigs.withComp(Optional.none(), tsection => {\n tsection.getSystem().broadcastOn([SendDataToSectionChannel], {});\n return storedValue.get();\n }, (tsection, value) => {\n storedValue.set(value);\n tsection.getSystem().broadcastOn([SendDataToViewChannel], {});\n })\n ])\n });\n };\n\n const dialogChannel = generate$6('update-dialog');\n const titleChannel = generate$6('update-title');\n const bodyChannel = generate$6('update-body');\n const footerChannel = generate$6('update-footer');\n const bodySendMessageChannel = generate$6('body-send-message');\n\n const renderBody = (spec, dialogId, contentId, backstage, ariaAttrs) => {\n const renderComponents = incoming => {\n const body = incoming.body;\n switch (body.type) {\n case 'tabpanel': {\n return [renderTabPanel(body, incoming.initialData, backstage)];\n }\n default: {\n return [renderBodyPanel(body, incoming.initialData, backstage)];\n }\n }\n };\n const updateState = (_comp, incoming) => Optional.some({ isTabPanel: () => incoming.body.type === 'tabpanel' });\n const ariaAttributes = { 'aria-live': 'polite' };\n return {\n dom: {\n tag: 'div',\n classes: ['tox-dialog__content-js'],\n attributes: {\n ...contentId.map(x => ({ id: x })).getOr({}),\n ...ariaAttrs ? ariaAttributes : {}\n }\n },\n components: [],\n behaviours: derive$1([\n ComposingConfigs.childAt(0),\n Reflecting.config({\n channel: `${ bodyChannel }-${ dialogId }`,\n updateState,\n renderComponents,\n initialData: spec\n })\n ])\n };\n };\n const renderInlineBody = (spec, dialogId, contentId, backstage, ariaAttrs) => renderBody(spec, dialogId, Optional.some(contentId), backstage, ariaAttrs);\n const renderModalBody = (spec, dialogId, backstage) => {\n const bodySpec = renderBody(spec, dialogId, Optional.none(), backstage, false);\n return ModalDialog.parts.body(bodySpec);\n };\n const renderIframeBody = spec => {\n const bodySpec = {\n dom: {\n tag: 'div',\n classes: ['tox-dialog__content-js']\n },\n components: [{\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body-iframe']\n },\n components: [craft({\n dom: {\n tag: 'iframe',\n attributes: { src: spec.url }\n },\n behaviours: derive$1([\n Tabstopping.config({}),\n Focusing.config({})\n ])\n })]\n }],\n behaviours: derive$1([Keying.config({\n mode: 'acyclic',\n useTabstopAt: not(isPseudoStop)\n })])\n };\n return ModalDialog.parts.body(bodySpec);\n };\n\n function _typeof(obj) {\n '@babel/helpers - typeof';\n return _typeof = 'function' == typeof Symbol && 'symbol' == typeof Symbol.iterator ? function (obj) {\n return typeof obj;\n } : function (obj) {\n return obj && 'function' == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? 'symbol' : typeof obj;\n }, _typeof(obj);\n }\n function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n }\n function _isNativeReflectConstruct() {\n if (typeof Reflect === 'undefined' || !Reflect.construct)\n return false;\n if (Reflect.construct.sham)\n return false;\n if (typeof Proxy === 'function')\n return true;\n try {\n Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {\n }));\n return true;\n } catch (e) {\n return false;\n }\n }\n function _construct(Parent, args, Class) {\n if (_isNativeReflectConstruct()) {\n _construct = Reflect.construct;\n } else {\n _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class)\n _setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n return _construct.apply(null, arguments);\n }\n function _toConsumableArray(arr) {\n return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();\n }\n function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr))\n return _arrayLikeToArray(arr);\n }\n function _iterableToArray(iter) {\n if (typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null || iter['@@iterator'] != null)\n return Array.from(iter);\n }\n function _unsupportedIterableToArray(o, minLen) {\n if (!o)\n return;\n if (typeof o === 'string')\n return _arrayLikeToArray(o, minLen);\n var n = Object.prototype.toString.call(o).slice(8, -1);\n if (n === 'Object' && o.constructor)\n n = o.constructor.name;\n if (n === 'Map' || n === 'Set')\n return Array.from(o);\n if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))\n return _arrayLikeToArray(o, minLen);\n }\n function _arrayLikeToArray(arr, len) {\n if (len == null || len > arr.length)\n len = arr.length;\n for (var i = 0, arr2 = new Array(len); i < len; i++)\n arr2[i] = arr[i];\n return arr2;\n }\n function _nonIterableSpread() {\n throw new TypeError('Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.');\n }\n var hasOwnProperty = Object.hasOwnProperty, setPrototypeOf = Object.setPrototypeOf, isFrozen = Object.isFrozen, getPrototypeOf = Object.getPrototypeOf, getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor;\n var freeze = Object.freeze, seal = Object.seal, create = Object.create;\n var _ref = typeof Reflect !== 'undefined' && Reflect, apply = _ref.apply, construct = _ref.construct;\n if (!apply) {\n apply = function apply(fun, thisValue, args) {\n return fun.apply(thisValue, args);\n };\n }\n if (!freeze) {\n freeze = function freeze(x) {\n return x;\n };\n }\n if (!seal) {\n seal = function seal(x) {\n return x;\n };\n }\n if (!construct) {\n construct = function construct(Func, args) {\n return _construct(Func, _toConsumableArray(args));\n };\n }\n var arrayForEach = unapply(Array.prototype.forEach);\n var arrayPop = unapply(Array.prototype.pop);\n var arrayPush = unapply(Array.prototype.push);\n var stringToLowerCase = unapply(String.prototype.toLowerCase);\n var stringMatch = unapply(String.prototype.match);\n var stringReplace = unapply(String.prototype.replace);\n var stringIndexOf = unapply(String.prototype.indexOf);\n var stringTrim = unapply(String.prototype.trim);\n var regExpTest = unapply(RegExp.prototype.test);\n var typeErrorCreate = unconstruct(TypeError);\n function unapply(func) {\n return function (thisArg) {\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n return apply(func, thisArg, args);\n };\n }\n function unconstruct(func) {\n return function () {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n return construct(func, args);\n };\n }\n function addToSet(set, array) {\n if (setPrototypeOf) {\n setPrototypeOf(set, null);\n }\n var l = array.length;\n while (l--) {\n var element = array[l];\n if (typeof element === 'string') {\n var lcElement = stringToLowerCase(element);\n if (lcElement !== element) {\n if (!isFrozen(array)) {\n array[l] = lcElement;\n }\n element = lcElement;\n }\n }\n set[element] = true;\n }\n return set;\n }\n function clone(object) {\n var newObject = create(null);\n var property;\n for (property in object) {\n if (apply(hasOwnProperty, object, [property])) {\n newObject[property] = object[property];\n }\n }\n return newObject;\n }\n function lookupGetter(object, prop) {\n while (object !== null) {\n var desc = getOwnPropertyDescriptor(object, prop);\n if (desc) {\n if (desc.get) {\n return unapply(desc.get);\n }\n if (typeof desc.value === 'function') {\n return unapply(desc.value);\n }\n }\n object = getPrototypeOf(object);\n }\n function fallbackValue(element) {\n console.warn('fallback value for', element);\n return null;\n }\n return fallbackValue;\n }\n var html$1 = freeze([\n 'a',\n 'abbr',\n 'acronym',\n 'address',\n 'area',\n 'article',\n 'aside',\n 'audio',\n 'b',\n 'bdi',\n 'bdo',\n 'big',\n 'blink',\n 'blockquote',\n 'body',\n 'br',\n 'button',\n 'canvas',\n 'caption',\n 'center',\n 'cite',\n 'code',\n 'col',\n 'colgroup',\n 'content',\n 'data',\n 'datalist',\n 'dd',\n 'decorator',\n 'del',\n 'details',\n 'dfn',\n 'dialog',\n 'dir',\n 'div',\n 'dl',\n 'dt',\n 'element',\n 'em',\n 'fieldset',\n 'figcaption',\n 'figure',\n 'font',\n 'footer',\n 'form',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'head',\n 'header',\n 'hgroup',\n 'hr',\n 'html',\n 'i',\n 'img',\n 'input',\n 'ins',\n 'kbd',\n 'label',\n 'legend',\n 'li',\n 'main',\n 'map',\n 'mark',\n 'marquee',\n 'menu',\n 'menuitem',\n 'meter',\n 'nav',\n 'nobr',\n 'ol',\n 'optgroup',\n 'option',\n 'output',\n 'p',\n 'picture',\n 'pre',\n 'progress',\n 'q',\n 'rp',\n 'rt',\n 'ruby',\n 's',\n 'samp',\n 'section',\n 'select',\n 'shadow',\n 'small',\n 'source',\n 'spacer',\n 'span',\n 'strike',\n 'strong',\n 'style',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'template',\n 'textarea',\n 'tfoot',\n 'th',\n 'thead',\n 'time',\n 'tr',\n 'track',\n 'tt',\n 'u',\n 'ul',\n 'var',\n 'video',\n 'wbr'\n ]);\n var svg$1 = freeze([\n 'svg',\n 'a',\n 'altglyph',\n 'altglyphdef',\n 'altglyphitem',\n 'animatecolor',\n 'animatemotion',\n 'animatetransform',\n 'circle',\n 'clippath',\n 'defs',\n 'desc',\n 'ellipse',\n 'filter',\n 'font',\n 'g',\n 'glyph',\n 'glyphref',\n 'hkern',\n 'image',\n 'line',\n 'lineargradient',\n 'marker',\n 'mask',\n 'metadata',\n 'mpath',\n 'path',\n 'pattern',\n 'polygon',\n 'polyline',\n 'radialgradient',\n 'rect',\n 'stop',\n 'style',\n 'switch',\n 'symbol',\n 'text',\n 'textpath',\n 'title',\n 'tref',\n 'tspan',\n 'view',\n 'vkern'\n ]);\n var svgFilters = freeze([\n 'feBlend',\n 'feColorMatrix',\n 'feComponentTransfer',\n 'feComposite',\n 'feConvolveMatrix',\n 'feDiffuseLighting',\n 'feDisplacementMap',\n 'feDistantLight',\n 'feFlood',\n 'feFuncA',\n 'feFuncB',\n 'feFuncG',\n 'feFuncR',\n 'feGaussianBlur',\n 'feImage',\n 'feMerge',\n 'feMergeNode',\n 'feMorphology',\n 'feOffset',\n 'fePointLight',\n 'feSpecularLighting',\n 'feSpotLight',\n 'feTile',\n 'feTurbulence'\n ]);\n var svgDisallowed = freeze([\n 'animate',\n 'color-profile',\n 'cursor',\n 'discard',\n 'fedropshadow',\n 'font-face',\n 'font-face-format',\n 'font-face-name',\n 'font-face-src',\n 'font-face-uri',\n 'foreignobject',\n 'hatch',\n 'hatchpath',\n 'mesh',\n 'meshgradient',\n 'meshpatch',\n 'meshrow',\n 'missing-glyph',\n 'script',\n 'set',\n 'solidcolor',\n 'unknown',\n 'use'\n ]);\n var mathMl$1 = freeze([\n 'math',\n 'menclose',\n 'merror',\n 'mfenced',\n 'mfrac',\n 'mglyph',\n 'mi',\n 'mlabeledtr',\n 'mmultiscripts',\n 'mn',\n 'mo',\n 'mover',\n 'mpadded',\n 'mphantom',\n 'mroot',\n 'mrow',\n 'ms',\n 'mspace',\n 'msqrt',\n 'mstyle',\n 'msub',\n 'msup',\n 'msubsup',\n 'mtable',\n 'mtd',\n 'mtext',\n 'mtr',\n 'munder',\n 'munderover'\n ]);\n var mathMlDisallowed = freeze([\n 'maction',\n 'maligngroup',\n 'malignmark',\n 'mlongdiv',\n 'mscarries',\n 'mscarry',\n 'msgroup',\n 'mstack',\n 'msline',\n 'msrow',\n 'semantics',\n 'annotation',\n 'annotation-xml',\n 'mprescripts',\n 'none'\n ]);\n var text = freeze(['#text']);\n var html = freeze([\n 'accept',\n 'action',\n 'align',\n 'alt',\n 'autocapitalize',\n 'autocomplete',\n 'autopictureinpicture',\n 'autoplay',\n 'background',\n 'bgcolor',\n 'border',\n 'capture',\n 'cellpadding',\n 'cellspacing',\n 'checked',\n 'cite',\n 'class',\n 'clear',\n 'color',\n 'cols',\n 'colspan',\n 'controls',\n 'controlslist',\n 'coords',\n 'crossorigin',\n 'datetime',\n 'decoding',\n 'default',\n 'dir',\n 'disabled',\n 'disablepictureinpicture',\n 'disableremoteplayback',\n 'download',\n 'draggable',\n 'enctype',\n 'enterkeyhint',\n 'face',\n 'for',\n 'headers',\n 'height',\n 'hidden',\n 'high',\n 'href',\n 'hreflang',\n 'id',\n 'inputmode',\n 'integrity',\n 'ismap',\n 'kind',\n 'label',\n 'lang',\n 'list',\n 'loading',\n 'loop',\n 'low',\n 'max',\n 'maxlength',\n 'media',\n 'method',\n 'min',\n 'minlength',\n 'multiple',\n 'muted',\n 'name',\n 'nonce',\n 'noshade',\n 'novalidate',\n 'nowrap',\n 'open',\n 'optimum',\n 'pattern',\n 'placeholder',\n 'playsinline',\n 'poster',\n 'preload',\n 'pubdate',\n 'radiogroup',\n 'readonly',\n 'rel',\n 'required',\n 'rev',\n 'reversed',\n 'role',\n 'rows',\n 'rowspan',\n 'spellcheck',\n 'scope',\n 'selected',\n 'shape',\n 'size',\n 'sizes',\n 'span',\n 'srclang',\n 'start',\n 'src',\n 'srcset',\n 'step',\n 'style',\n 'summary',\n 'tabindex',\n 'title',\n 'translate',\n 'type',\n 'usemap',\n 'valign',\n 'value',\n 'width',\n 'xmlns',\n 'slot'\n ]);\n var svg = freeze([\n 'accent-height',\n 'accumulate',\n 'additive',\n 'alignment-baseline',\n 'ascent',\n 'attributename',\n 'attributetype',\n 'azimuth',\n 'basefrequency',\n 'baseline-shift',\n 'begin',\n 'bias',\n 'by',\n 'class',\n 'clip',\n 'clippathunits',\n 'clip-path',\n 'clip-rule',\n 'color',\n 'color-interpolation',\n 'color-interpolation-filters',\n 'color-profile',\n 'color-rendering',\n 'cx',\n 'cy',\n 'd',\n 'dx',\n 'dy',\n 'diffuseconstant',\n 'direction',\n 'display',\n 'divisor',\n 'dur',\n 'edgemode',\n 'elevation',\n 'end',\n 'fill',\n 'fill-opacity',\n 'fill-rule',\n 'filter',\n 'filterunits',\n 'flood-color',\n 'flood-opacity',\n 'font-family',\n 'font-size',\n 'font-size-adjust',\n 'font-stretch',\n 'font-style',\n 'font-variant',\n 'font-weight',\n 'fx',\n 'fy',\n 'g1',\n 'g2',\n 'glyph-name',\n 'glyphref',\n 'gradientunits',\n 'gradienttransform',\n 'height',\n 'href',\n 'id',\n 'image-rendering',\n 'in',\n 'in2',\n 'k',\n 'k1',\n 'k2',\n 'k3',\n 'k4',\n 'kerning',\n 'keypoints',\n 'keysplines',\n 'keytimes',\n 'lang',\n 'lengthadjust',\n 'letter-spacing',\n 'kernelmatrix',\n 'kernelunitlength',\n 'lighting-color',\n 'local',\n 'marker-end',\n 'marker-mid',\n 'marker-start',\n 'markerheight',\n 'markerunits',\n 'markerwidth',\n 'maskcontentunits',\n 'maskunits',\n 'max',\n 'mask',\n 'media',\n 'method',\n 'mode',\n 'min',\n 'name',\n 'numoctaves',\n 'offset',\n 'operator',\n 'opacity',\n 'order',\n 'orient',\n 'orientation',\n 'origin',\n 'overflow',\n 'paint-order',\n 'path',\n 'pathlength',\n 'patterncontentunits',\n 'patterntransform',\n 'patternunits',\n 'points',\n 'preservealpha',\n 'preserveaspectratio',\n 'primitiveunits',\n 'r',\n 'rx',\n 'ry',\n 'radius',\n 'refx',\n 'refy',\n 'repeatcount',\n 'repeatdur',\n 'restart',\n 'result',\n 'rotate',\n 'scale',\n 'seed',\n 'shape-rendering',\n 'specularconstant',\n 'specularexponent',\n 'spreadmethod',\n 'startoffset',\n 'stddeviation',\n 'stitchtiles',\n 'stop-color',\n 'stop-opacity',\n 'stroke-dasharray',\n 'stroke-dashoffset',\n 'stroke-linecap',\n 'stroke-linejoin',\n 'stroke-miterlimit',\n 'stroke-opacity',\n 'stroke',\n 'stroke-width',\n 'style',\n 'surfacescale',\n 'systemlanguage',\n 'tabindex',\n 'targetx',\n 'targety',\n 'transform',\n 'transform-origin',\n 'text-anchor',\n 'text-decoration',\n 'text-rendering',\n 'textlength',\n 'type',\n 'u1',\n 'u2',\n 'unicode',\n 'values',\n 'viewbox',\n 'visibility',\n 'version',\n 'vert-adv-y',\n 'vert-origin-x',\n 'vert-origin-y',\n 'width',\n 'word-spacing',\n 'wrap',\n 'writing-mode',\n 'xchannelselector',\n 'ychannelselector',\n 'x',\n 'x1',\n 'x2',\n 'xmlns',\n 'y',\n 'y1',\n 'y2',\n 'z',\n 'zoomandpan'\n ]);\n var mathMl = freeze([\n 'accent',\n 'accentunder',\n 'align',\n 'bevelled',\n 'close',\n 'columnsalign',\n 'columnlines',\n 'columnspan',\n 'denomalign',\n 'depth',\n 'dir',\n 'display',\n 'displaystyle',\n 'encoding',\n 'fence',\n 'frame',\n 'height',\n 'href',\n 'id',\n 'largeop',\n 'length',\n 'linethickness',\n 'lspace',\n 'lquote',\n 'mathbackground',\n 'mathcolor',\n 'mathsize',\n 'mathvariant',\n 'maxsize',\n 'minsize',\n 'movablelimits',\n 'notation',\n 'numalign',\n 'open',\n 'rowalign',\n 'rowlines',\n 'rowspacing',\n 'rowspan',\n 'rspace',\n 'rquote',\n 'scriptlevel',\n 'scriptminsize',\n 'scriptsizemultiplier',\n 'selection',\n 'separator',\n 'separators',\n 'stretchy',\n 'subscriptshift',\n 'supscriptshift',\n 'symmetric',\n 'voffset',\n 'width',\n 'xmlns'\n ]);\n var xml = freeze([\n 'xlink:href',\n 'xml:id',\n 'xlink:title',\n 'xml:space',\n 'xmlns:xlink'\n ]);\n var MUSTACHE_EXPR = seal(/\\{\\{[\\w\\W]*|[\\w\\W]*\\}\\}/gm);\n var ERB_EXPR = seal(/<%[\\w\\W]*|[\\w\\W]*%>/gm);\n var DATA_ATTR = seal(/^data-[\\-\\w.\\u00B7-\\uFFFF]/);\n var ARIA_ATTR = seal(/^aria-[\\-\\w]+$/);\n var IS_ALLOWED_URI = seal(/^(?:(?:(?:f|ht)tps?|mailto|tel|callto|cid|xmpp):|[^a-z]|[a-z+.\\-]+(?:[^a-z+.\\-:]|$))/i);\n var IS_SCRIPT_OR_DATA = seal(/^(?:\\w+script|data):/i);\n var ATTR_WHITESPACE = seal(/[\\u0000-\\u0020\\u00A0\\u1680\\u180E\\u2000-\\u2029\\u205F\\u3000]/g);\n var DOCTYPE_NAME = seal(/^html$/i);\n var getGlobal = function getGlobal() {\n return typeof window === 'undefined' ? null : window;\n };\n var _createTrustedTypesPolicy = function _createTrustedTypesPolicy(trustedTypes, document) {\n if (_typeof(trustedTypes) !== 'object' || typeof trustedTypes.createPolicy !== 'function') {\n return null;\n }\n var suffix = null;\n var ATTR_NAME = 'data-tt-policy-suffix';\n if (document.currentScript && document.currentScript.hasAttribute(ATTR_NAME)) {\n suffix = document.currentScript.getAttribute(ATTR_NAME);\n }\n var policyName = 'dompurify' + (suffix ? '#' + suffix : '');\n try {\n return trustedTypes.createPolicy(policyName, {\n createHTML: function createHTML(html) {\n return html;\n }\n });\n } catch (_) {\n console.warn('TrustedTypes policy ' + policyName + ' could not be created.');\n return null;\n }\n };\n function createDOMPurify() {\n var window = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : getGlobal();\n var DOMPurify = function DOMPurify(root) {\n return createDOMPurify(root);\n };\n DOMPurify.version = '2.3.8';\n DOMPurify.removed = [];\n if (!window || !window.document || window.document.nodeType !== 9) {\n DOMPurify.isSupported = false;\n return DOMPurify;\n }\n var originalDocument = window.document;\n var document = window.document;\n var DocumentFragment = window.DocumentFragment, HTMLTemplateElement = window.HTMLTemplateElement, Node = window.Node, Element = window.Element, NodeFilter = window.NodeFilter, _window$NamedNodeMap = window.NamedNodeMap, NamedNodeMap = _window$NamedNodeMap === void 0 ? window.NamedNodeMap || window.MozNamedAttrMap : _window$NamedNodeMap, HTMLFormElement = window.HTMLFormElement, DOMParser = window.DOMParser, trustedTypes = window.trustedTypes;\n var ElementPrototype = Element.prototype;\n var cloneNode = lookupGetter(ElementPrototype, 'cloneNode');\n var getNextSibling = lookupGetter(ElementPrototype, 'nextSibling');\n var getChildNodes = lookupGetter(ElementPrototype, 'childNodes');\n var getParentNode = lookupGetter(ElementPrototype, 'parentNode');\n if (typeof HTMLTemplateElement === 'function') {\n var template = document.createElement('template');\n if (template.content && template.content.ownerDocument) {\n document = template.content.ownerDocument;\n }\n }\n var trustedTypesPolicy = _createTrustedTypesPolicy(trustedTypes, originalDocument);\n var emptyHTML = trustedTypesPolicy ? trustedTypesPolicy.createHTML('') : '';\n var _document = document, implementation = _document.implementation, createNodeIterator = _document.createNodeIterator, createDocumentFragment = _document.createDocumentFragment, getElementsByTagName = _document.getElementsByTagName;\n var importNode = originalDocument.importNode;\n var documentMode = {};\n try {\n documentMode = clone(document).documentMode ? document.documentMode : {};\n } catch (_) {\n }\n var hooks = {};\n DOMPurify.isSupported = typeof getParentNode === 'function' && implementation && typeof implementation.createHTMLDocument !== 'undefined' && documentMode !== 9;\n var MUSTACHE_EXPR$1 = MUSTACHE_EXPR, ERB_EXPR$1 = ERB_EXPR, DATA_ATTR$1 = DATA_ATTR, ARIA_ATTR$1 = ARIA_ATTR, IS_SCRIPT_OR_DATA$1 = IS_SCRIPT_OR_DATA, ATTR_WHITESPACE$1 = ATTR_WHITESPACE;\n var IS_ALLOWED_URI$1 = IS_ALLOWED_URI;\n var ALLOWED_TAGS = null;\n var DEFAULT_ALLOWED_TAGS = addToSet({}, [].concat(_toConsumableArray(html$1), _toConsumableArray(svg$1), _toConsumableArray(svgFilters), _toConsumableArray(mathMl$1), _toConsumableArray(text)));\n var ALLOWED_ATTR = null;\n var DEFAULT_ALLOWED_ATTR = addToSet({}, [].concat(_toConsumableArray(html), _toConsumableArray(svg), _toConsumableArray(mathMl), _toConsumableArray(xml)));\n var CUSTOM_ELEMENT_HANDLING = Object.seal(Object.create(null, {\n tagNameCheck: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: null\n },\n attributeNameCheck: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: null\n },\n allowCustomizedBuiltInElements: {\n writable: true,\n configurable: false,\n enumerable: true,\n value: false\n }\n }));\n var FORBID_TAGS = null;\n var FORBID_ATTR = null;\n var ALLOW_ARIA_ATTR = true;\n var ALLOW_DATA_ATTR = true;\n var ALLOW_UNKNOWN_PROTOCOLS = false;\n var SAFE_FOR_TEMPLATES = false;\n var WHOLE_DOCUMENT = false;\n var SET_CONFIG = false;\n var FORCE_BODY = false;\n var RETURN_DOM = false;\n var RETURN_DOM_FRAGMENT = false;\n var RETURN_TRUSTED_TYPE = false;\n var SANITIZE_DOM = true;\n var KEEP_CONTENT = true;\n var IN_PLACE = false;\n var USE_PROFILES = {};\n var FORBID_CONTENTS = null;\n var DEFAULT_FORBID_CONTENTS = addToSet({}, [\n 'annotation-xml',\n 'audio',\n 'colgroup',\n 'desc',\n 'foreignobject',\n 'head',\n 'iframe',\n 'math',\n 'mi',\n 'mn',\n 'mo',\n 'ms',\n 'mtext',\n 'noembed',\n 'noframes',\n 'noscript',\n 'plaintext',\n 'script',\n 'style',\n 'svg',\n 'template',\n 'thead',\n 'title',\n 'video',\n 'xmp'\n ]);\n var DATA_URI_TAGS = null;\n var DEFAULT_DATA_URI_TAGS = addToSet({}, [\n 'audio',\n 'video',\n 'img',\n 'source',\n 'image',\n 'track'\n ]);\n var URI_SAFE_ATTRIBUTES = null;\n var DEFAULT_URI_SAFE_ATTRIBUTES = addToSet({}, [\n 'alt',\n 'class',\n 'for',\n 'id',\n 'label',\n 'name',\n 'pattern',\n 'placeholder',\n 'role',\n 'summary',\n 'title',\n 'value',\n 'style',\n 'xmlns'\n ]);\n var MATHML_NAMESPACE = 'http://www.w3.org/1998/Math/MathML';\n var SVG_NAMESPACE = 'http://www.w3.org/2000/svg';\n var HTML_NAMESPACE = 'http://www.w3.org/1999/xhtml';\n var NAMESPACE = HTML_NAMESPACE;\n var IS_EMPTY_INPUT = false;\n var PARSER_MEDIA_TYPE;\n var SUPPORTED_PARSER_MEDIA_TYPES = [\n 'application/xhtml+xml',\n 'text/html'\n ];\n var DEFAULT_PARSER_MEDIA_TYPE = 'text/html';\n var transformCaseFunc;\n var CONFIG = null;\n var formElement = document.createElement('form');\n var isRegexOrFunction = function isRegexOrFunction(testValue) {\n return testValue instanceof RegExp || testValue instanceof Function;\n };\n var _parseConfig = function _parseConfig(cfg) {\n if (CONFIG && CONFIG === cfg) {\n return;\n }\n if (!cfg || _typeof(cfg) !== 'object') {\n cfg = {};\n }\n cfg = clone(cfg);\n ALLOWED_TAGS = 'ALLOWED_TAGS' in cfg ? addToSet({}, cfg.ALLOWED_TAGS) : DEFAULT_ALLOWED_TAGS;\n ALLOWED_ATTR = 'ALLOWED_ATTR' in cfg ? addToSet({}, cfg.ALLOWED_ATTR) : DEFAULT_ALLOWED_ATTR;\n URI_SAFE_ATTRIBUTES = 'ADD_URI_SAFE_ATTR' in cfg ? addToSet(clone(DEFAULT_URI_SAFE_ATTRIBUTES), cfg.ADD_URI_SAFE_ATTR) : DEFAULT_URI_SAFE_ATTRIBUTES;\n DATA_URI_TAGS = 'ADD_DATA_URI_TAGS' in cfg ? addToSet(clone(DEFAULT_DATA_URI_TAGS), cfg.ADD_DATA_URI_TAGS) : DEFAULT_DATA_URI_TAGS;\n FORBID_CONTENTS = 'FORBID_CONTENTS' in cfg ? addToSet({}, cfg.FORBID_CONTENTS) : DEFAULT_FORBID_CONTENTS;\n FORBID_TAGS = 'FORBID_TAGS' in cfg ? addToSet({}, cfg.FORBID_TAGS) : {};\n FORBID_ATTR = 'FORBID_ATTR' in cfg ? addToSet({}, cfg.FORBID_ATTR) : {};\n USE_PROFILES = 'USE_PROFILES' in cfg ? cfg.USE_PROFILES : false;\n ALLOW_ARIA_ATTR = cfg.ALLOW_ARIA_ATTR !== false;\n ALLOW_DATA_ATTR = cfg.ALLOW_DATA_ATTR !== false;\n ALLOW_UNKNOWN_PROTOCOLS = cfg.ALLOW_UNKNOWN_PROTOCOLS || false;\n SAFE_FOR_TEMPLATES = cfg.SAFE_FOR_TEMPLATES || false;\n WHOLE_DOCUMENT = cfg.WHOLE_DOCUMENT || false;\n RETURN_DOM = cfg.RETURN_DOM || false;\n RETURN_DOM_FRAGMENT = cfg.RETURN_DOM_FRAGMENT || false;\n RETURN_TRUSTED_TYPE = cfg.RETURN_TRUSTED_TYPE || false;\n FORCE_BODY = cfg.FORCE_BODY || false;\n SANITIZE_DOM = cfg.SANITIZE_DOM !== false;\n KEEP_CONTENT = cfg.KEEP_CONTENT !== false;\n IN_PLACE = cfg.IN_PLACE || false;\n IS_ALLOWED_URI$1 = cfg.ALLOWED_URI_REGEXP || IS_ALLOWED_URI$1;\n NAMESPACE = cfg.NAMESPACE || HTML_NAMESPACE;\n if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck)) {\n CUSTOM_ELEMENT_HANDLING.tagNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.tagNameCheck;\n }\n if (cfg.CUSTOM_ELEMENT_HANDLING && isRegexOrFunction(cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck)) {\n CUSTOM_ELEMENT_HANDLING.attributeNameCheck = cfg.CUSTOM_ELEMENT_HANDLING.attributeNameCheck;\n }\n if (cfg.CUSTOM_ELEMENT_HANDLING && typeof cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements === 'boolean') {\n CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements = cfg.CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements;\n }\n PARSER_MEDIA_TYPE = SUPPORTED_PARSER_MEDIA_TYPES.indexOf(cfg.PARSER_MEDIA_TYPE) === -1 ? PARSER_MEDIA_TYPE = DEFAULT_PARSER_MEDIA_TYPE : PARSER_MEDIA_TYPE = cfg.PARSER_MEDIA_TYPE;\n transformCaseFunc = PARSER_MEDIA_TYPE === 'application/xhtml+xml' ? function (x) {\n return x;\n } : stringToLowerCase;\n if (SAFE_FOR_TEMPLATES) {\n ALLOW_DATA_ATTR = false;\n }\n if (RETURN_DOM_FRAGMENT) {\n RETURN_DOM = true;\n }\n if (USE_PROFILES) {\n ALLOWED_TAGS = addToSet({}, _toConsumableArray(text));\n ALLOWED_ATTR = [];\n if (USE_PROFILES.html === true) {\n addToSet(ALLOWED_TAGS, html$1);\n addToSet(ALLOWED_ATTR, html);\n }\n if (USE_PROFILES.svg === true) {\n addToSet(ALLOWED_TAGS, svg$1);\n addToSet(ALLOWED_ATTR, svg);\n addToSet(ALLOWED_ATTR, xml);\n }\n if (USE_PROFILES.svgFilters === true) {\n addToSet(ALLOWED_TAGS, svgFilters);\n addToSet(ALLOWED_ATTR, svg);\n addToSet(ALLOWED_ATTR, xml);\n }\n if (USE_PROFILES.mathMl === true) {\n addToSet(ALLOWED_TAGS, mathMl$1);\n addToSet(ALLOWED_ATTR, mathMl);\n addToSet(ALLOWED_ATTR, xml);\n }\n }\n if (cfg.ADD_TAGS) {\n if (ALLOWED_TAGS === DEFAULT_ALLOWED_TAGS) {\n ALLOWED_TAGS = clone(ALLOWED_TAGS);\n }\n addToSet(ALLOWED_TAGS, cfg.ADD_TAGS);\n }\n if (cfg.ADD_ATTR) {\n if (ALLOWED_ATTR === DEFAULT_ALLOWED_ATTR) {\n ALLOWED_ATTR = clone(ALLOWED_ATTR);\n }\n addToSet(ALLOWED_ATTR, cfg.ADD_ATTR);\n }\n if (cfg.ADD_URI_SAFE_ATTR) {\n addToSet(URI_SAFE_ATTRIBUTES, cfg.ADD_URI_SAFE_ATTR);\n }\n if (cfg.FORBID_CONTENTS) {\n if (FORBID_CONTENTS === DEFAULT_FORBID_CONTENTS) {\n FORBID_CONTENTS = clone(FORBID_CONTENTS);\n }\n addToSet(FORBID_CONTENTS, cfg.FORBID_CONTENTS);\n }\n if (KEEP_CONTENT) {\n ALLOWED_TAGS['#text'] = true;\n }\n if (WHOLE_DOCUMENT) {\n addToSet(ALLOWED_TAGS, [\n 'html',\n 'head',\n 'body'\n ]);\n }\n if (ALLOWED_TAGS.table) {\n addToSet(ALLOWED_TAGS, ['tbody']);\n delete FORBID_TAGS.tbody;\n }\n if (freeze) {\n freeze(cfg);\n }\n CONFIG = cfg;\n };\n var MATHML_TEXT_INTEGRATION_POINTS = addToSet({}, [\n 'mi',\n 'mo',\n 'mn',\n 'ms',\n 'mtext'\n ]);\n var HTML_INTEGRATION_POINTS = addToSet({}, [\n 'foreignobject',\n 'desc',\n 'title',\n 'annotation-xml'\n ]);\n var COMMON_SVG_AND_HTML_ELEMENTS = addToSet({}, [\n 'title',\n 'style',\n 'font',\n 'a',\n 'script'\n ]);\n var ALL_SVG_TAGS = addToSet({}, svg$1);\n addToSet(ALL_SVG_TAGS, svgFilters);\n addToSet(ALL_SVG_TAGS, svgDisallowed);\n var ALL_MATHML_TAGS = addToSet({}, mathMl$1);\n addToSet(ALL_MATHML_TAGS, mathMlDisallowed);\n var _checkValidNamespace = function _checkValidNamespace(element) {\n var parent = getParentNode(element);\n if (!parent || !parent.tagName) {\n parent = {\n namespaceURI: HTML_NAMESPACE,\n tagName: 'template'\n };\n }\n var tagName = stringToLowerCase(element.tagName);\n var parentTagName = stringToLowerCase(parent.tagName);\n if (element.namespaceURI === SVG_NAMESPACE) {\n if (parent.namespaceURI === HTML_NAMESPACE) {\n return tagName === 'svg';\n }\n if (parent.namespaceURI === MATHML_NAMESPACE) {\n return tagName === 'svg' && (parentTagName === 'annotation-xml' || MATHML_TEXT_INTEGRATION_POINTS[parentTagName]);\n }\n return Boolean(ALL_SVG_TAGS[tagName]);\n }\n if (element.namespaceURI === MATHML_NAMESPACE) {\n if (parent.namespaceURI === HTML_NAMESPACE) {\n return tagName === 'math';\n }\n if (parent.namespaceURI === SVG_NAMESPACE) {\n return tagName === 'math' && HTML_INTEGRATION_POINTS[parentTagName];\n }\n return Boolean(ALL_MATHML_TAGS[tagName]);\n }\n if (element.namespaceURI === HTML_NAMESPACE) {\n if (parent.namespaceURI === SVG_NAMESPACE && !HTML_INTEGRATION_POINTS[parentTagName]) {\n return false;\n }\n if (parent.namespaceURI === MATHML_NAMESPACE && !MATHML_TEXT_INTEGRATION_POINTS[parentTagName]) {\n return false;\n }\n return !ALL_MATHML_TAGS[tagName] && (COMMON_SVG_AND_HTML_ELEMENTS[tagName] || !ALL_SVG_TAGS[tagName]);\n }\n return false;\n };\n var _forceRemove = function _forceRemove(node) {\n arrayPush(DOMPurify.removed, { element: node });\n try {\n node.parentNode.removeChild(node);\n } catch (_) {\n try {\n node.outerHTML = emptyHTML;\n } catch (_) {\n node.remove();\n }\n }\n };\n var _removeAttribute = function _removeAttribute(name, node) {\n try {\n arrayPush(DOMPurify.removed, {\n attribute: node.getAttributeNode(name),\n from: node\n });\n } catch (_) {\n arrayPush(DOMPurify.removed, {\n attribute: null,\n from: node\n });\n }\n node.removeAttribute(name);\n if (name === 'is' && !ALLOWED_ATTR[name]) {\n if (RETURN_DOM || RETURN_DOM_FRAGMENT) {\n try {\n _forceRemove(node);\n } catch (_) {\n }\n } else {\n try {\n node.setAttribute(name, '');\n } catch (_) {\n }\n }\n }\n };\n var _initDocument = function _initDocument(dirty) {\n var doc;\n var leadingWhitespace;\n if (FORCE_BODY) {\n dirty = '' + dirty;\n } else {\n var matches = stringMatch(dirty, /^[\\r\\n\\t ]+/);\n leadingWhitespace = matches && matches[0];\n }\n if (PARSER_MEDIA_TYPE === 'application/xhtml+xml') {\n dirty = '' + dirty + '';\n }\n var dirtyPayload = trustedTypesPolicy ? trustedTypesPolicy.createHTML(dirty) : dirty;\n if (NAMESPACE === HTML_NAMESPACE) {\n try {\n doc = new DOMParser().parseFromString(dirtyPayload, PARSER_MEDIA_TYPE);\n } catch (_) {\n }\n }\n if (!doc || !doc.documentElement) {\n doc = implementation.createDocument(NAMESPACE, 'template', null);\n try {\n doc.documentElement.innerHTML = IS_EMPTY_INPUT ? '' : dirtyPayload;\n } catch (_) {\n }\n }\n var body = doc.body || doc.documentElement;\n if (dirty && leadingWhitespace) {\n body.insertBefore(document.createTextNode(leadingWhitespace), body.childNodes[0] || null);\n }\n if (NAMESPACE === HTML_NAMESPACE) {\n return getElementsByTagName.call(doc, WHOLE_DOCUMENT ? 'html' : 'body')[0];\n }\n return WHOLE_DOCUMENT ? doc.documentElement : body;\n };\n var _createIterator = function _createIterator(root) {\n return createNodeIterator.call(root.ownerDocument || root, root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT, null, false);\n };\n var _isClobbered = function _isClobbered(elm) {\n return elm instanceof HTMLFormElement && (typeof elm.nodeName !== 'string' || typeof elm.textContent !== 'string' || typeof elm.removeChild !== 'function' || !(elm.attributes instanceof NamedNodeMap) || typeof elm.removeAttribute !== 'function' || typeof elm.setAttribute !== 'function' || typeof elm.namespaceURI !== 'string' || typeof elm.insertBefore !== 'function');\n };\n var _isNode = function _isNode(object) {\n return _typeof(Node) === 'object' ? object instanceof Node : object && _typeof(object) === 'object' && typeof object.nodeType === 'number' && typeof object.nodeName === 'string';\n };\n var _executeHook = function _executeHook(entryPoint, currentNode, data) {\n if (!hooks[entryPoint]) {\n return;\n }\n arrayForEach(hooks[entryPoint], function (hook) {\n hook.call(DOMPurify, currentNode, data, CONFIG);\n });\n };\n var _sanitizeElements = function _sanitizeElements(currentNode) {\n var content;\n _executeHook('beforeSanitizeElements', currentNode, null);\n if (_isClobbered(currentNode)) {\n _forceRemove(currentNode);\n return true;\n }\n if (regExpTest(/[\\u0080-\\uFFFF]/, currentNode.nodeName)) {\n _forceRemove(currentNode);\n return true;\n }\n var tagName = transformCaseFunc(currentNode.nodeName);\n _executeHook('uponSanitizeElement', currentNode, {\n tagName: tagName,\n allowedTags: ALLOWED_TAGS\n });\n if (currentNode.hasChildNodes() && !_isNode(currentNode.firstElementChild) && (!_isNode(currentNode.content) || !_isNode(currentNode.content.firstElementChild)) && regExpTest(/<[/\\w]/g, currentNode.innerHTML) && regExpTest(/<[/\\w]/g, currentNode.textContent)) {\n _forceRemove(currentNode);\n return true;\n }\n if (tagName === 'select' && regExpTest(/= 0; --i) {\n parentNode.insertBefore(cloneNode(childNodes[i], true), getNextSibling(currentNode));\n }\n }\n }\n _forceRemove(currentNode);\n return true;\n }\n if (currentNode instanceof Element && !_checkValidNamespace(currentNode)) {\n _forceRemove(currentNode);\n return true;\n }\n if ((tagName === 'noscript' || tagName === 'noembed') && regExpTest(/<\\/no(script|embed)/i, currentNode.innerHTML)) {\n _forceRemove(currentNode);\n return true;\n }\n if (SAFE_FOR_TEMPLATES && currentNode.nodeType === 3) {\n content = currentNode.textContent;\n content = stringReplace(content, MUSTACHE_EXPR$1, ' ');\n content = stringReplace(content, ERB_EXPR$1, ' ');\n if (currentNode.textContent !== content) {\n arrayPush(DOMPurify.removed, { element: currentNode.cloneNode() });\n currentNode.textContent = content;\n }\n }\n _executeHook('afterSanitizeElements', currentNode, null);\n return false;\n };\n var _isValidAttribute = function _isValidAttribute(lcTag, lcName, value) {\n if (SANITIZE_DOM && (lcName === 'id' || lcName === 'name') && (value in document || value in formElement)) {\n return false;\n }\n if (ALLOW_DATA_ATTR && !FORBID_ATTR[lcName] && regExpTest(DATA_ATTR$1, lcName));\n else if (ALLOW_ARIA_ATTR && regExpTest(ARIA_ATTR$1, lcName));\n else if (!ALLOWED_ATTR[lcName] || FORBID_ATTR[lcName]) {\n if (_basicCustomElementTest(lcTag) && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, lcTag) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(lcTag)) && (CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.attributeNameCheck, lcName) || CUSTOM_ELEMENT_HANDLING.attributeNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.attributeNameCheck(lcName)) || lcName === 'is' && CUSTOM_ELEMENT_HANDLING.allowCustomizedBuiltInElements && (CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof RegExp && regExpTest(CUSTOM_ELEMENT_HANDLING.tagNameCheck, value) || CUSTOM_ELEMENT_HANDLING.tagNameCheck instanceof Function && CUSTOM_ELEMENT_HANDLING.tagNameCheck(value)));\n else {\n return false;\n }\n } else if (URI_SAFE_ATTRIBUTES[lcName]);\n else if (regExpTest(IS_ALLOWED_URI$1, stringReplace(value, ATTR_WHITESPACE$1, '')));\n else if ((lcName === 'src' || lcName === 'xlink:href' || lcName === 'href') && lcTag !== 'script' && stringIndexOf(value, 'data:') === 0 && DATA_URI_TAGS[lcTag]);\n else if (ALLOW_UNKNOWN_PROTOCOLS && !regExpTest(IS_SCRIPT_OR_DATA$1, stringReplace(value, ATTR_WHITESPACE$1, '')));\n else if (!value);\n else {\n return false;\n }\n return true;\n };\n var _basicCustomElementTest = function _basicCustomElementTest(tagName) {\n return tagName.indexOf('-') > 0;\n };\n var _sanitizeAttributes = function _sanitizeAttributes(currentNode) {\n var attr;\n var value;\n var lcName;\n var l;\n _executeHook('beforeSanitizeAttributes', currentNode, null);\n var attributes = currentNode.attributes;\n if (!attributes) {\n return;\n }\n var hookEvent = {\n attrName: '',\n attrValue: '',\n keepAttr: true,\n allowedAttributes: ALLOWED_ATTR\n };\n l = attributes.length;\n while (l--) {\n attr = attributes[l];\n var _attr = attr, name = _attr.name, namespaceURI = _attr.namespaceURI;\n value = name === 'value' ? attr.value : stringTrim(attr.value);\n lcName = transformCaseFunc(name);\n var initValue = value;\n hookEvent.attrName = lcName;\n hookEvent.attrValue = value;\n hookEvent.keepAttr = true;\n hookEvent.forceKeepAttr = undefined;\n _executeHook('uponSanitizeAttribute', currentNode, hookEvent);\n value = hookEvent.attrValue;\n if (hookEvent.forceKeepAttr) {\n continue;\n }\n if (!hookEvent.keepAttr) {\n _removeAttribute(name, currentNode);\n continue;\n }\n if (regExpTest(/\\/>/i, value)) {\n _removeAttribute(name, currentNode);\n continue;\n }\n if (SAFE_FOR_TEMPLATES) {\n value = stringReplace(value, MUSTACHE_EXPR$1, ' ');\n value = stringReplace(value, ERB_EXPR$1, ' ');\n }\n var lcTag = transformCaseFunc(currentNode.nodeName);\n if (!_isValidAttribute(lcTag, lcName, value)) {\n _removeAttribute(name, currentNode);\n continue;\n }\n if (value !== initValue) {\n try {\n if (namespaceURI) {\n currentNode.setAttributeNS(namespaceURI, name, value);\n } else {\n currentNode.setAttribute(name, value);\n }\n } catch (_) {\n _removeAttribute(name, currentNode);\n }\n }\n }\n _executeHook('afterSanitizeAttributes', currentNode, null);\n };\n var _sanitizeShadowDOM = function _sanitizeShadowDOM(fragment) {\n var shadowNode;\n var shadowIterator = _createIterator(fragment);\n _executeHook('beforeSanitizeShadowDOM', fragment, null);\n while (shadowNode = shadowIterator.nextNode()) {\n _executeHook('uponSanitizeShadowNode', shadowNode, null);\n if (_sanitizeElements(shadowNode)) {\n continue;\n }\n if (shadowNode.content instanceof DocumentFragment) {\n _sanitizeShadowDOM(shadowNode.content);\n }\n _sanitizeAttributes(shadowNode);\n }\n _executeHook('afterSanitizeShadowDOM', fragment, null);\n };\n DOMPurify.sanitize = function (dirty, cfg) {\n var body;\n var importedNode;\n var currentNode;\n var oldNode;\n var returnNode;\n IS_EMPTY_INPUT = !dirty;\n if (IS_EMPTY_INPUT) {\n dirty = '';\n }\n if (typeof dirty !== 'string' && !_isNode(dirty)) {\n if (typeof dirty.toString !== 'function') {\n throw typeErrorCreate('toString is not a function');\n } else {\n dirty = dirty.toString();\n if (typeof dirty !== 'string') {\n throw typeErrorCreate('dirty is not a string, aborting');\n }\n }\n }\n if (!DOMPurify.isSupported) {\n if (_typeof(window.toStaticHTML) === 'object' || typeof window.toStaticHTML === 'function') {\n if (typeof dirty === 'string') {\n return window.toStaticHTML(dirty);\n }\n if (_isNode(dirty)) {\n return window.toStaticHTML(dirty.outerHTML);\n }\n }\n return dirty;\n }\n if (!SET_CONFIG) {\n _parseConfig(cfg);\n }\n DOMPurify.removed = [];\n if (typeof dirty === 'string') {\n IN_PLACE = false;\n }\n if (IN_PLACE) {\n if (dirty.nodeName) {\n var tagName = transformCaseFunc(dirty.nodeName);\n if (!ALLOWED_TAGS[tagName] || FORBID_TAGS[tagName]) {\n throw typeErrorCreate('root node is forbidden and cannot be sanitized in-place');\n }\n }\n } else if (dirty instanceof Node) {\n body = _initDocument('');\n importedNode = body.ownerDocument.importNode(dirty, true);\n if (importedNode.nodeType === 1 && importedNode.nodeName === 'BODY') {\n body = importedNode;\n } else if (importedNode.nodeName === 'HTML') {\n body = importedNode;\n } else {\n body.appendChild(importedNode);\n }\n } else {\n if (!RETURN_DOM && !SAFE_FOR_TEMPLATES && !WHOLE_DOCUMENT && dirty.indexOf('<') === -1) {\n return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(dirty) : dirty;\n }\n body = _initDocument(dirty);\n if (!body) {\n return RETURN_DOM ? null : RETURN_TRUSTED_TYPE ? emptyHTML : '';\n }\n }\n if (body && FORCE_BODY) {\n _forceRemove(body.firstChild);\n }\n var nodeIterator = _createIterator(IN_PLACE ? dirty : body);\n while (currentNode = nodeIterator.nextNode()) {\n if (currentNode.nodeType === 3 && currentNode === oldNode) {\n continue;\n }\n if (_sanitizeElements(currentNode)) {\n continue;\n }\n if (currentNode.content instanceof DocumentFragment) {\n _sanitizeShadowDOM(currentNode.content);\n }\n _sanitizeAttributes(currentNode);\n oldNode = currentNode;\n }\n oldNode = null;\n if (IN_PLACE) {\n return dirty;\n }\n if (RETURN_DOM) {\n if (RETURN_DOM_FRAGMENT) {\n returnNode = createDocumentFragment.call(body.ownerDocument);\n while (body.firstChild) {\n returnNode.appendChild(body.firstChild);\n }\n } else {\n returnNode = body;\n }\n if (ALLOWED_ATTR.shadowroot) {\n returnNode = importNode.call(originalDocument, returnNode, true);\n }\n return returnNode;\n }\n var serializedHTML = WHOLE_DOCUMENT ? body.outerHTML : body.innerHTML;\n if (WHOLE_DOCUMENT && ALLOWED_TAGS['!doctype'] && body.ownerDocument && body.ownerDocument.doctype && body.ownerDocument.doctype.name && regExpTest(DOCTYPE_NAME, body.ownerDocument.doctype.name)) {\n serializedHTML = '\\n' + serializedHTML;\n }\n if (SAFE_FOR_TEMPLATES) {\n serializedHTML = stringReplace(serializedHTML, MUSTACHE_EXPR$1, ' ');\n serializedHTML = stringReplace(serializedHTML, ERB_EXPR$1, ' ');\n }\n return trustedTypesPolicy && RETURN_TRUSTED_TYPE ? trustedTypesPolicy.createHTML(serializedHTML) : serializedHTML;\n };\n DOMPurify.setConfig = function (cfg) {\n _parseConfig(cfg);\n SET_CONFIG = true;\n };\n DOMPurify.clearConfig = function () {\n CONFIG = null;\n SET_CONFIG = false;\n };\n DOMPurify.isValidAttribute = function (tag, attr, value) {\n if (!CONFIG) {\n _parseConfig({});\n }\n var lcTag = transformCaseFunc(tag);\n var lcName = transformCaseFunc(attr);\n return _isValidAttribute(lcTag, lcName, value);\n };\n DOMPurify.addHook = function (entryPoint, hookFunction) {\n if (typeof hookFunction !== 'function') {\n return;\n }\n hooks[entryPoint] = hooks[entryPoint] || [];\n arrayPush(hooks[entryPoint], hookFunction);\n };\n DOMPurify.removeHook = function (entryPoint) {\n if (hooks[entryPoint]) {\n return arrayPop(hooks[entryPoint]);\n }\n };\n DOMPurify.removeHooks = function (entryPoint) {\n if (hooks[entryPoint]) {\n hooks[entryPoint] = [];\n }\n };\n DOMPurify.removeAllHooks = function () {\n hooks = {};\n };\n return DOMPurify;\n }\n var purify = createDOMPurify();\n\n const sanitizeHtmlString = html => purify().sanitize(html);\n\n const isTouch = global$5.deviceType.isTouch();\n const hiddenHeader = (title, close) => ({\n dom: {\n tag: 'div',\n styles: { display: 'none' },\n classes: ['tox-dialog__header']\n },\n components: [\n title,\n close\n ]\n });\n const pClose = (onClose, providersBackstage) => ModalDialog.parts.close(Button.sketch({\n dom: {\n tag: 'button',\n classes: [\n 'tox-button',\n 'tox-button--icon',\n 'tox-button--naked'\n ],\n attributes: {\n 'type': 'button',\n 'aria-label': providersBackstage.translate('Close')\n }\n },\n action: onClose,\n buttonBehaviours: derive$1([Tabstopping.config({})])\n }));\n const pUntitled = () => ModalDialog.parts.title({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__title'],\n innerHtml: '',\n styles: { display: 'none' }\n }\n });\n const pBodyMessage = (message, providersBackstage) => ModalDialog.parts.body({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body']\n },\n components: [{\n dom: {\n tag: 'div',\n classes: ['tox-dialog__body-content']\n },\n components: [{ dom: fromHtml(`${ sanitizeHtmlString(providersBackstage.translate(message)) }
`) }]\n }]\n });\n const pFooter = buttons => ModalDialog.parts.footer({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__footer']\n },\n components: buttons\n });\n const pFooterGroup = (startButtons, endButtons) => [\n Container.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__footer-start']\n },\n components: startButtons\n }),\n Container.sketch({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__footer-end']\n },\n components: endButtons\n })\n ];\n const renderDialog$1 = spec => {\n const dialogClass = 'tox-dialog';\n const blockerClass = dialogClass + '-wrap';\n const blockerBackdropClass = blockerClass + '__backdrop';\n const scrollLockClass = dialogClass + '__disable-scroll';\n return ModalDialog.sketch({\n lazySink: spec.lazySink,\n onEscape: comp => {\n spec.onEscape(comp);\n return Optional.some(true);\n },\n useTabstopAt: elem => !isPseudoStop(elem),\n dom: {\n tag: 'div',\n classes: [dialogClass].concat(spec.extraClasses),\n styles: {\n position: 'relative',\n ...spec.extraStyles\n }\n },\n components: [\n spec.header,\n spec.body,\n ...spec.footer.toArray()\n ],\n parts: {\n blocker: {\n dom: fromHtml(``),\n components: [{\n dom: {\n tag: 'div',\n classes: isTouch ? [\n blockerBackdropClass,\n blockerBackdropClass + '--opaque'\n ] : [blockerBackdropClass]\n }\n }]\n }\n },\n dragBlockClass: blockerClass,\n modalBehaviours: derive$1([\n Focusing.config({}),\n config('dialog-events', spec.dialogEvents.concat([runOnSource(focusin(), (comp, _se) => {\n Keying.focusIn(comp);\n })])),\n config('scroll-lock', [\n runOnAttached(() => {\n add$2(body(), scrollLockClass);\n }),\n runOnDetached(() => {\n remove$2(body(), scrollLockClass);\n })\n ]),\n ...spec.extraBehaviours\n ]),\n eventOrder: {\n [execute$5()]: ['dialog-events'],\n [attachedToDom()]: [\n 'scroll-lock',\n 'dialog-events',\n 'alloy.base.behaviour'\n ],\n [detachedFromDom()]: [\n 'alloy.base.behaviour',\n 'dialog-events',\n 'scroll-lock'\n ],\n ...spec.eventOrder\n }\n });\n };\n\n const renderClose = providersBackstage => Button.sketch({\n dom: {\n tag: 'button',\n classes: [\n 'tox-button',\n 'tox-button--icon',\n 'tox-button--naked'\n ],\n attributes: {\n 'type': 'button',\n 'aria-label': providersBackstage.translate('Close'),\n 'title': providersBackstage.translate('Close')\n }\n },\n components: [render$3('close', {\n tag: 'div',\n classes: ['tox-icon']\n }, providersBackstage.icons)],\n action: comp => {\n emit(comp, formCancelEvent);\n }\n });\n const renderTitle = (spec, dialogId, titleId, providersBackstage) => {\n const renderComponents = data => [text$2(providersBackstage.translate(data.title))];\n return {\n dom: {\n tag: 'div',\n classes: ['tox-dialog__title'],\n attributes: { ...titleId.map(x => ({ id: x })).getOr({}) }\n },\n components: [],\n behaviours: derive$1([Reflecting.config({\n channel: `${ titleChannel }-${ dialogId }`,\n initialData: spec,\n renderComponents\n })])\n };\n };\n const renderDragHandle = () => ({ dom: fromHtml('') });\n const renderInlineHeader = (spec, dialogId, titleId, providersBackstage) => Container.sketch({\n dom: fromHtml(''),\n components: [\n renderTitle(spec, dialogId, Optional.some(titleId), providersBackstage),\n renderDragHandle(),\n renderClose(providersBackstage)\n ],\n containerBehaviours: derive$1([Dragging.config({\n mode: 'mouse',\n blockerClass: 'blocker',\n getTarget: handle => {\n return closest$1(handle, '[role=\"dialog\"]').getOrDie();\n },\n snaps: {\n getSnapPoints: () => [],\n leftAttr: 'data-drag-left',\n topAttr: 'data-drag-top'\n }\n })])\n });\n const renderModalHeader = (spec, dialogId, providersBackstage) => {\n const pTitle = ModalDialog.parts.title(renderTitle(spec, dialogId, Optional.none(), providersBackstage));\n const pHandle = ModalDialog.parts.draghandle(renderDragHandle());\n const pClose = ModalDialog.parts.close(renderClose(providersBackstage));\n const components = [pTitle].concat(spec.draggable ? [pHandle] : []).concat([pClose]);\n return Container.sketch({\n dom: fromHtml(''),\n components\n });\n };\n\n const getHeader = (title, dialogId, backstage) => renderModalHeader({\n title: backstage.shared.providers.translate(title),\n draggable: backstage.dialog.isDraggableModal()\n }, dialogId, backstage.shared.providers);\n const getBusySpec = (message, bs, providers) => ({\n dom: {\n tag: 'div',\n classes: ['tox-dialog__busy-spinner'],\n attributes: { 'aria-label': providers.translate(message) },\n styles: {\n left: '0px',\n right: '0px',\n bottom: '0px',\n top: '0px',\n position: 'absolute'\n }\n },\n behaviours: bs,\n components: [{ dom: fromHtml('') }]\n });\n const getEventExtras = (lazyDialog, providers, extra) => ({\n onClose: () => extra.closeWindow(),\n onBlock: blockEvent => {\n ModalDialog.setBusy(lazyDialog(), (_comp, bs) => getBusySpec(blockEvent.message, bs, providers));\n },\n onUnblock: () => {\n ModalDialog.setIdle(lazyDialog());\n }\n });\n const renderModalDialog = (spec, initialData, dialogEvents, backstage) => {\n const updateState = (_comp, incoming) => Optional.some(incoming);\n return build$1(renderDialog$1({\n ...spec,\n lazySink: backstage.shared.getSink,\n extraBehaviours: [\n Reflecting.config({\n channel: `${ dialogChannel }-${ spec.id }`,\n updateState,\n initialData\n }),\n RepresentingConfigs.memory({}),\n ...spec.extraBehaviours\n ],\n onEscape: comp => {\n emit(comp, formCancelEvent);\n },\n dialogEvents,\n eventOrder: {\n [receive()]: [\n Reflecting.name(),\n Receiving.name()\n ],\n [attachedToDom()]: [\n 'scroll-lock',\n Reflecting.name(),\n 'messages',\n 'dialog-events',\n 'alloy.base.behaviour'\n ],\n [detachedFromDom()]: [\n 'alloy.base.behaviour',\n 'dialog-events',\n 'messages',\n Reflecting.name(),\n 'scroll-lock'\n ]\n }\n }));\n };\n const mapMenuButtons = buttons => {\n const mapItems = button => {\n const items = map$2(button.items, item => {\n const cell = Cell(false);\n return {\n ...item,\n storage: cell\n };\n });\n return {\n ...button,\n items\n };\n };\n return map$2(buttons, button => {\n return button.type === 'menu' ? mapItems(button) : button;\n });\n };\n const extractCellsToObject = buttons => foldl(buttons, (acc, button) => {\n if (button.type === 'menu') {\n const menuButton = button;\n return foldl(menuButton.items, (innerAcc, item) => {\n innerAcc[item.name] = item.storage;\n return innerAcc;\n }, acc);\n }\n return acc;\n }, {});\n\n const initCommonEvents = (fireApiEvent, extras) => [\n runWithTarget(focusin(), onFocus),\n fireApiEvent(formCloseEvent, (_api, spec) => {\n extras.onClose();\n spec.onClose();\n }),\n fireApiEvent(formCancelEvent, (api, spec, _event, self) => {\n spec.onCancel(api);\n emit(self, formCloseEvent);\n }),\n run$1(formUnblockEvent, (_c, _se) => extras.onUnblock()),\n run$1(formBlockEvent, (_c, se) => extras.onBlock(se.event))\n ];\n const initUrlDialog = (getInstanceApi, extras) => {\n const fireApiEvent = (eventName, f) => run$1(eventName, (c, se) => {\n withSpec(c, (spec, _c) => {\n f(getInstanceApi(), spec, se.event, c);\n });\n });\n const withSpec = (c, f) => {\n Reflecting.getState(c).get().each(currentDialog => {\n f(currentDialog, c);\n });\n };\n return [\n ...initCommonEvents(fireApiEvent, extras),\n fireApiEvent(formActionEvent, (api, spec, event) => {\n spec.onAction(api, { name: event.name });\n })\n ];\n };\n const initDialog = (getInstanceApi, extras, getSink) => {\n const fireApiEvent = (eventName, f) => run$1(eventName, (c, se) => {\n withSpec(c, (spec, _c) => {\n f(getInstanceApi(), spec, se.event, c);\n });\n });\n const withSpec = (c, f) => {\n Reflecting.getState(c).get().each(currentDialogInit => {\n f(currentDialogInit.internalDialog, c);\n });\n };\n return [\n ...initCommonEvents(fireApiEvent, extras),\n fireApiEvent(formSubmitEvent, (api, spec) => spec.onSubmit(api)),\n fireApiEvent(formChangeEvent, (api, spec, event) => {\n spec.onChange(api, { name: event.name });\n }),\n fireApiEvent(formActionEvent, (api, spec, event, component) => {\n const focusIn = () => Keying.focusIn(component);\n const isDisabled = focused => has$1(focused, 'disabled') || getOpt(focused, 'aria-disabled').exists(val => val === 'true');\n const rootNode = getRootNode(component.element);\n const current = active$1(rootNode);\n spec.onAction(api, {\n name: event.name,\n value: event.value\n });\n active$1(rootNode).fold(focusIn, focused => {\n if (isDisabled(focused)) {\n focusIn();\n } else if (current.exists(cur => contains(focused, cur) && isDisabled(cur))) {\n focusIn();\n } else {\n getSink().toOptional().filter(sink => !contains(sink.element, focused)).each(focusIn);\n }\n });\n }),\n fireApiEvent(formTabChangeEvent, (api, spec, event) => {\n spec.onTabChange(api, {\n newTabName: event.name,\n oldTabName: event.oldName\n });\n }),\n runOnDetached(component => {\n const api = getInstanceApi();\n Representing.setValue(component, api.getData());\n })\n ];\n };\n const SilverDialogEvents = {\n initUrlDialog,\n initDialog\n };\n\n const makeButton = (button, backstage) => renderFooterButton(button, button.type, backstage);\n const lookup = (compInSystem, footerButtons, buttonName) => find$5(footerButtons, button => button.name === buttonName).bind(memButton => memButton.memento.getOpt(compInSystem));\n const renderComponents = (_data, state) => {\n const footerButtons = state.map(s => s.footerButtons).getOr([]);\n const buttonGroups = partition$3(footerButtons, button => button.align === 'start');\n const makeGroup = (edge, buttons) => Container.sketch({\n dom: {\n tag: 'div',\n classes: [`tox-dialog__footer-${ edge }`]\n },\n components: map$2(buttons, button => button.memento.asSpec())\n });\n const startButtons = makeGroup('start', buttonGroups.pass);\n const endButtons = makeGroup('end', buttonGroups.fail);\n return [\n startButtons,\n endButtons\n ];\n };\n const renderFooter = (initSpec, dialogId, backstage) => {\n const updateState = (comp, data) => {\n const footerButtons = map$2(data.buttons, button => {\n const memButton = record(makeButton(button, backstage));\n return {\n name: button.name,\n align: button.align,\n memento: memButton\n };\n });\n const lookupByName = buttonName => lookup(comp, footerButtons, buttonName);\n return Optional.some({\n lookupByName,\n footerButtons\n });\n };\n return {\n dom: fromHtml(''),\n components: [],\n behaviours: derive$1([Reflecting.config({\n channel: `${ footerChannel }-${ dialogId }`,\n initialData: initSpec,\n updateState,\n renderComponents\n })])\n };\n };\n const renderInlineFooter = (initSpec, dialogId, backstage) => renderFooter(initSpec, dialogId, backstage);\n const renderModalFooter = (initSpec, dialogId, backstage) => ModalDialog.parts.footer(renderFooter(initSpec, dialogId, backstage));\n\n const getCompByName = (access, name) => {\n const root = access.getRoot();\n if (root.getSystem().isConnected()) {\n const form = Composing.getCurrent(access.getFormWrapper()).getOr(access.getFormWrapper());\n return Form.getField(form, name).orThunk(() => {\n const footer = access.getFooter();\n const footerState = Reflecting.getState(footer).get();\n return footerState.bind(f => f.lookupByName(name));\n });\n } else {\n return Optional.none();\n }\n };\n const validateData$1 = (access, data) => {\n const root = access.getRoot();\n return Reflecting.getState(root).get().map(dialogState => getOrDie(asRaw('data', dialogState.dataValidator, data))).getOr(data);\n };\n const getDialogApi = (access, doRedial, menuItemStates) => {\n const withRoot = f => {\n const root = access.getRoot();\n if (root.getSystem().isConnected()) {\n f(root);\n }\n };\n const getData = () => {\n const root = access.getRoot();\n const valueComp = root.getSystem().isConnected() ? access.getFormWrapper() : root;\n const representedValues = Representing.getValue(valueComp);\n const menuItemCurrentState = map$1(menuItemStates, cell => cell.get());\n return {\n ...representedValues,\n ...menuItemCurrentState\n };\n };\n const setData = newData => {\n withRoot(_ => {\n const prevData = instanceApi.getData();\n const mergedData = deepMerge(prevData, newData);\n const newInternalData = validateData$1(access, mergedData);\n const form = access.getFormWrapper();\n Representing.setValue(form, newInternalData);\n each(menuItemStates, (v, k) => {\n if (has$2(mergedData, k)) {\n v.set(mergedData[k]);\n }\n });\n });\n };\n const setEnabled = (name, state) => {\n getCompByName(access, name).each(state ? Disabling.enable : Disabling.disable);\n };\n const focus = name => {\n getCompByName(access, name).each(Focusing.focus);\n };\n const block = message => {\n if (!isString(message)) {\n throw new Error('The dialogInstanceAPI.block function should be passed a blocking message of type string as an argument');\n }\n withRoot(root => {\n emitWith(root, formBlockEvent, { message });\n });\n };\n const unblock = () => {\n withRoot(root => {\n emit(root, formUnblockEvent);\n });\n };\n const showTab = name => {\n withRoot(_ => {\n const body = access.getBody();\n const bodyState = Reflecting.getState(body);\n if (bodyState.get().exists(b => b.isTabPanel())) {\n Composing.getCurrent(body).each(tabSection => {\n TabSection.showTab(tabSection, name);\n });\n }\n });\n };\n const redial = d => {\n withRoot(root => {\n const id = access.getId();\n const dialogInit = doRedial(d);\n root.getSystem().broadcastOn([`${ dialogChannel }-${ id }`], dialogInit);\n root.getSystem().broadcastOn([`${ titleChannel }-${ id }`], dialogInit.internalDialog);\n root.getSystem().broadcastOn([`${ bodyChannel }-${ id }`], dialogInit.internalDialog);\n root.getSystem().broadcastOn([`${ footerChannel }-${ id }`], dialogInit.internalDialog);\n instanceApi.setData(dialogInit.initialData);\n });\n };\n const close = () => {\n withRoot(root => {\n emit(root, formCloseEvent);\n });\n };\n const instanceApi = {\n getData,\n setData,\n setEnabled,\n focus,\n block,\n unblock,\n showTab,\n redial,\n close\n };\n return instanceApi;\n };\n\n const getDialogSizeClasses = size => {\n switch (size) {\n case 'large':\n return ['tox-dialog--width-lg'];\n case 'medium':\n return ['tox-dialog--width-md'];\n default:\n return [];\n }\n };\n const renderDialog = (dialogInit, extra, backstage) => {\n const dialogId = generate$6('dialog');\n const internalDialog = dialogInit.internalDialog;\n const header = getHeader(internalDialog.title, dialogId, backstage);\n const body = renderModalBody({\n body: internalDialog.body,\n initialData: internalDialog.initialData\n }, dialogId, backstage);\n const storedMenuButtons = mapMenuButtons(internalDialog.buttons);\n const objOfCells = extractCellsToObject(storedMenuButtons);\n const footer = renderModalFooter({ buttons: storedMenuButtons }, dialogId, backstage);\n const dialogEvents = SilverDialogEvents.initDialog(() => instanceApi, getEventExtras(() => dialog, backstage.shared.providers, extra), backstage.shared.getSink);\n const dialogSize = getDialogSizeClasses(internalDialog.size);\n const spec = {\n id: dialogId,\n header,\n body,\n footer: Optional.some(footer),\n extraClasses: dialogSize,\n extraBehaviours: [],\n extraStyles: {}\n };\n const dialog = renderModalDialog(spec, dialogInit, dialogEvents, backstage);\n const modalAccess = (() => {\n const getForm = () => {\n const outerForm = ModalDialog.getBody(dialog);\n return Composing.getCurrent(outerForm).getOr(outerForm);\n };\n return {\n getId: constant$1(dialogId),\n getRoot: constant$1(dialog),\n getBody: () => ModalDialog.getBody(dialog),\n getFooter: () => ModalDialog.getFooter(dialog),\n getFormWrapper: getForm\n };\n })();\n const instanceApi = getDialogApi(modalAccess, extra.redial, objOfCells);\n return {\n dialog,\n instanceApi\n };\n };\n\n const renderInlineDialog = (dialogInit, extra, backstage, ariaAttrs) => {\n const dialogId = generate$6('dialog');\n const dialogLabelId = generate$6('dialog-label');\n const dialogContentId = generate$6('dialog-content');\n const internalDialog = dialogInit.internalDialog;\n const updateState = (_comp, incoming) => Optional.some(incoming);\n const memHeader = record(renderInlineHeader({\n title: internalDialog.title,\n draggable: true\n }, dialogId, dialogLabelId, backstage.shared.providers));\n const memBody = record(renderInlineBody({\n body: internalDialog.body,\n initialData: internalDialog.initialData\n }, dialogId, dialogContentId, backstage, ariaAttrs));\n const storagedMenuButtons = mapMenuButtons(internalDialog.buttons);\n const objOfCells = extractCellsToObject(storagedMenuButtons);\n const memFooter = record(renderInlineFooter({ buttons: storagedMenuButtons }, dialogId, backstage));\n const dialogEvents = SilverDialogEvents.initDialog(() => instanceApi, {\n onBlock: event => {\n Blocking.block(dialog, (_comp, bs) => getBusySpec(event.message, bs, backstage.shared.providers));\n },\n onUnblock: () => {\n Blocking.unblock(dialog);\n },\n onClose: () => extra.closeWindow()\n }, backstage.shared.getSink);\n const dialog = build$1({\n dom: {\n tag: 'div',\n classes: [\n 'tox-dialog',\n 'tox-dialog-inline'\n ],\n attributes: {\n role: 'dialog',\n ['aria-labelledby']: dialogLabelId,\n ['aria-describedby']: dialogContentId\n }\n },\n eventOrder: {\n [receive()]: [\n Reflecting.name(),\n Receiving.name()\n ],\n [execute$5()]: ['execute-on-form'],\n [attachedToDom()]: [\n 'reflecting',\n 'execute-on-form'\n ]\n },\n behaviours: derive$1([\n Keying.config({\n mode: 'cyclic',\n onEscape: c => {\n emit(c, formCloseEvent);\n return Optional.some(true);\n },\n useTabstopAt: elem => !isPseudoStop(elem) && (name$3(elem) !== 'button' || get$f(elem, 'disabled') !== 'disabled')\n }),\n Reflecting.config({\n channel: `${ dialogChannel }-${ dialogId }`,\n updateState,\n initialData: dialogInit\n }),\n Focusing.config({}),\n config('execute-on-form', dialogEvents.concat([runOnSource(focusin(), (comp, _se) => {\n Keying.focusIn(comp);\n })])),\n Blocking.config({ getRoot: () => Optional.some(dialog) }),\n Replacing.config({}),\n RepresentingConfigs.memory({})\n ]),\n components: [\n memHeader.asSpec(),\n memBody.asSpec(),\n memFooter.asSpec()\n ]\n });\n const instanceApi = getDialogApi({\n getId: constant$1(dialogId),\n getRoot: constant$1(dialog),\n getFooter: () => memFooter.get(dialog),\n getBody: () => memBody.get(dialog),\n getFormWrapper: () => {\n const body = memBody.get(dialog);\n return Composing.getCurrent(body).getOr(body);\n }\n }, extra.redial, objOfCells);\n return {\n dialog,\n instanceApi\n };\n };\n\n var global = tinymce.util.Tools.resolve('tinymce.util.URI');\n\n const getUrlDialogApi = root => {\n const withRoot = f => {\n if (root.getSystem().isConnected()) {\n f(root);\n }\n };\n const block = message => {\n if (!isString(message)) {\n throw new Error('The urlDialogInstanceAPI.block function should be passed a blocking message of type string as an argument');\n }\n withRoot(root => {\n emitWith(root, formBlockEvent, { message });\n });\n };\n const unblock = () => {\n withRoot(root => {\n emit(root, formUnblockEvent);\n });\n };\n const close = () => {\n withRoot(root => {\n emit(root, formCloseEvent);\n });\n };\n const sendMessage = data => {\n withRoot(root => {\n root.getSystem().broadcastOn([bodySendMessageChannel], data);\n });\n };\n return {\n block,\n unblock,\n close,\n sendMessage\n };\n };\n\n const SUPPORTED_MESSAGE_ACTIONS = [\n 'insertContent',\n 'setContent',\n 'execCommand',\n 'close',\n 'block',\n 'unblock'\n ];\n const isSupportedMessage = data => isObject(data) && SUPPORTED_MESSAGE_ACTIONS.indexOf(data.mceAction) !== -1;\n const isCustomMessage = data => !isSupportedMessage(data) && isObject(data) && has$2(data, 'mceAction');\n const handleMessage = (editor, api, data) => {\n switch (data.mceAction) {\n case 'insertContent':\n editor.insertContent(data.content);\n break;\n case 'setContent':\n editor.setContent(data.content);\n break;\n case 'execCommand':\n const ui = isBoolean(data.ui) ? data.ui : false;\n editor.execCommand(data.cmd, ui, data.value);\n break;\n case 'close':\n api.close();\n break;\n case 'block':\n api.block(data.message);\n break;\n case 'unblock':\n api.unblock();\n break;\n }\n };\n const renderUrlDialog = (internalDialog, extra, editor, backstage) => {\n const dialogId = generate$6('dialog');\n const header = getHeader(internalDialog.title, dialogId, backstage);\n const body = renderIframeBody(internalDialog);\n const footer = internalDialog.buttons.bind(buttons => {\n if (buttons.length === 0) {\n return Optional.none();\n } else {\n return Optional.some(renderModalFooter({ buttons }, dialogId, backstage));\n }\n });\n const dialogEvents = SilverDialogEvents.initUrlDialog(() => instanceApi, getEventExtras(() => dialog, backstage.shared.providers, extra));\n const styles = {\n ...internalDialog.height.fold(() => ({}), height => ({\n 'height': height + 'px',\n 'max-height': height + 'px'\n })),\n ...internalDialog.width.fold(() => ({}), width => ({\n 'width': width + 'px',\n 'max-width': width + 'px'\n }))\n };\n const classes = internalDialog.width.isNone() && internalDialog.height.isNone() ? ['tox-dialog--width-lg'] : [];\n const iframeUri = new global(internalDialog.url, { base_uri: new global(window.location.href) });\n const iframeDomain = `${ iframeUri.protocol }://${ iframeUri.host }${ iframeUri.port ? ':' + iframeUri.port : '' }`;\n const messageHandlerUnbinder = unbindable();\n const extraBehaviours = [\n config('messages', [\n runOnAttached(() => {\n const unbind = bind(SugarElement.fromDom(window), 'message', e => {\n if (iframeUri.isSameOrigin(new global(e.raw.origin))) {\n const data = e.raw.data;\n if (isSupportedMessage(data)) {\n handleMessage(editor, instanceApi, data);\n } else if (isCustomMessage(data)) {\n internalDialog.onMessage(instanceApi, data);\n }\n }\n });\n messageHandlerUnbinder.set(unbind);\n }),\n runOnDetached(messageHandlerUnbinder.clear)\n ]),\n Receiving.config({\n channels: {\n [bodySendMessageChannel]: {\n onReceive: (comp, data) => {\n descendant(comp.element, 'iframe').each(iframeEle => {\n const iframeWin = iframeEle.dom.contentWindow;\n if (isNonNullable(iframeWin)) {\n iframeWin.postMessage(data, iframeDomain);\n }\n });\n }\n }\n }\n })\n ];\n const spec = {\n id: dialogId,\n header,\n body,\n footer,\n extraClasses: classes,\n extraBehaviours,\n extraStyles: styles\n };\n const dialog = renderModalDialog(spec, internalDialog, dialogEvents, backstage);\n const instanceApi = getUrlDialogApi(dialog);\n return {\n dialog,\n instanceApi\n };\n };\n\n const setup$2 = backstage => {\n const sharedBackstage = backstage.shared;\n const open = (message, callback) => {\n const closeDialog = () => {\n ModalDialog.hide(alertDialog);\n callback();\n };\n const memFooterClose = record(renderFooterButton({\n name: 'close-alert',\n text: 'OK',\n primary: true,\n buttonType: Optional.some('primary'),\n align: 'end',\n enabled: true,\n icon: Optional.none()\n }, 'cancel', backstage));\n const titleSpec = pUntitled();\n const closeSpec = pClose(closeDialog, sharedBackstage.providers);\n const alertDialog = build$1(renderDialog$1({\n lazySink: () => sharedBackstage.getSink(),\n header: hiddenHeader(titleSpec, closeSpec),\n body: pBodyMessage(message, sharedBackstage.providers),\n footer: Optional.some(pFooter(pFooterGroup([], [memFooterClose.asSpec()]))),\n onEscape: closeDialog,\n extraClasses: ['tox-alert-dialog'],\n extraBehaviours: [],\n extraStyles: {},\n dialogEvents: [run$1(formCancelEvent, closeDialog)],\n eventOrder: {}\n }));\n ModalDialog.show(alertDialog);\n const footerCloseButton = memFooterClose.get(alertDialog);\n Focusing.focus(footerCloseButton);\n };\n return { open };\n };\n\n const setup$1 = backstage => {\n const sharedBackstage = backstage.shared;\n const open = (message, callback) => {\n const closeDialog = state => {\n ModalDialog.hide(confirmDialog);\n callback(state);\n };\n const memFooterYes = record(renderFooterButton({\n name: 'yes',\n text: 'Yes',\n primary: true,\n buttonType: Optional.some('primary'),\n align: 'end',\n enabled: true,\n icon: Optional.none()\n }, 'submit', backstage));\n const footerNo = renderFooterButton({\n name: 'no',\n text: 'No',\n primary: false,\n buttonType: Optional.some('secondary'),\n align: 'end',\n enabled: true,\n icon: Optional.none()\n }, 'cancel', backstage);\n const titleSpec = pUntitled();\n const closeSpec = pClose(() => closeDialog(false), sharedBackstage.providers);\n const confirmDialog = build$1(renderDialog$1({\n lazySink: () => sharedBackstage.getSink(),\n header: hiddenHeader(titleSpec, closeSpec),\n body: pBodyMessage(message, sharedBackstage.providers),\n footer: Optional.some(pFooter(pFooterGroup([], [\n footerNo,\n memFooterYes.asSpec()\n ]))),\n onEscape: () => closeDialog(false),\n extraClasses: ['tox-confirm-dialog'],\n extraBehaviours: [],\n extraStyles: {},\n dialogEvents: [\n run$1(formCancelEvent, () => closeDialog(false)),\n run$1(formSubmitEvent, () => closeDialog(true))\n ],\n eventOrder: {}\n }));\n ModalDialog.show(confirmDialog);\n const footerYesButton = memFooterYes.get(confirmDialog);\n Focusing.focus(footerYesButton);\n };\n return { open };\n };\n\n const validateData = (data, validator) => getOrDie(asRaw('data', validator, data));\n const isAlertOrConfirmDialog = target => closest(target, '.tox-alert-dialog') || closest(target, '.tox-confirm-dialog');\n const inlineAdditionalBehaviours = (editor, isStickyToolbar, isToolbarLocationTop) => {\n if (isStickyToolbar && isToolbarLocationTop) {\n return [];\n } else {\n return [Docking.config({\n contextual: {\n lazyContext: () => Optional.some(box$1(SugarElement.fromDom(editor.getContentAreaContainer()))),\n fadeInClass: 'tox-dialog-dock-fadein',\n fadeOutClass: 'tox-dialog-dock-fadeout',\n transitionClass: 'tox-dialog-dock-transition'\n },\n modes: ['top']\n })];\n }\n };\n const setup = extras => {\n const editor = extras.editor;\n const isStickyToolbar$1 = isStickyToolbar(editor);\n const alertDialog = setup$2(extras.backstages.dialog);\n const confirmDialog = setup$1(extras.backstages.dialog);\n const open = (config, params, closeWindow) => {\n if (params !== undefined && params.inline === 'toolbar') {\n return openInlineDialog(config, extras.backstages.popup.shared.anchors.inlineDialog(), closeWindow, params.ariaAttrs);\n } else if (params !== undefined && params.inline === 'cursor') {\n return openInlineDialog(config, extras.backstages.popup.shared.anchors.cursor(), closeWindow, params.ariaAttrs);\n } else {\n return openModalDialog(config, closeWindow);\n }\n };\n const openUrl = (config, closeWindow) => openModalUrlDialog(config, closeWindow);\n const openModalUrlDialog = (config, closeWindow) => {\n const factory = contents => {\n const dialog = renderUrlDialog(contents, {\n closeWindow: () => {\n ModalDialog.hide(dialog.dialog);\n closeWindow(dialog.instanceApi);\n }\n }, editor, extras.backstages.dialog);\n ModalDialog.show(dialog.dialog);\n return dialog.instanceApi;\n };\n return DialogManager.openUrl(factory, config);\n };\n const openModalDialog = (config, closeWindow) => {\n const factory = (contents, internalInitialData, dataValidator) => {\n const initialData = internalInitialData;\n const dialogInit = {\n dataValidator,\n initialData,\n internalDialog: contents\n };\n const dialog = renderDialog(dialogInit, {\n redial: DialogManager.redial,\n closeWindow: () => {\n ModalDialog.hide(dialog.dialog);\n closeWindow(dialog.instanceApi);\n }\n }, extras.backstages.dialog);\n ModalDialog.show(dialog.dialog);\n dialog.instanceApi.setData(initialData);\n return dialog.instanceApi;\n };\n return DialogManager.open(factory, config);\n };\n const openInlineDialog = (config$1, anchor, closeWindow, ariaAttrs = false) => {\n const factory = (contents, internalInitialData, dataValidator) => {\n const initialData = validateData(internalInitialData, dataValidator);\n const inlineDialog = value$2();\n const isToolbarLocationTop = extras.backstages.popup.shared.header.isPositionedAtTop();\n const dialogInit = {\n dataValidator,\n initialData,\n internalDialog: contents\n };\n const refreshDocking = () => inlineDialog.on(dialog => {\n InlineView.reposition(dialog);\n Docking.refresh(dialog);\n });\n const dialogUi = renderInlineDialog(dialogInit, {\n redial: DialogManager.redial,\n closeWindow: () => {\n inlineDialog.on(InlineView.hide);\n editor.off('ResizeEditor', refreshDocking);\n inlineDialog.clear();\n closeWindow(dialogUi.instanceApi);\n }\n }, extras.backstages.popup, ariaAttrs);\n const inlineDialogComp = build$1(InlineView.sketch({\n lazySink: extras.backstages.popup.shared.getSink,\n dom: {\n tag: 'div',\n classes: []\n },\n fireDismissalEventInstead: {},\n ...isToolbarLocationTop ? {} : { fireRepositionEventInstead: {} },\n inlineBehaviours: derive$1([\n config('window-manager-inline-events', [run$1(dismissRequested(), (_comp, _se) => {\n emit(dialogUi.dialog, formCancelEvent);\n })]),\n ...inlineAdditionalBehaviours(editor, isStickyToolbar$1, isToolbarLocationTop)\n ]),\n isExtraPart: (_comp, target) => isAlertOrConfirmDialog(target)\n }));\n inlineDialog.set(inlineDialogComp);\n InlineView.showWithin(inlineDialogComp, premade(dialogUi.dialog), { anchor }, Optional.some(body()));\n if (!isStickyToolbar$1 || !isToolbarLocationTop) {\n Docking.refresh(inlineDialogComp);\n editor.on('ResizeEditor', refreshDocking);\n }\n dialogUi.instanceApi.setData(initialData);\n Keying.focusIn(dialogUi.dialog);\n return dialogUi.instanceApi;\n };\n return DialogManager.open(factory, config$1);\n };\n const confirm = (message, callback) => {\n confirmDialog.open(message, callback);\n };\n const alert = (message, callback) => {\n alertDialog.open(message, callback);\n };\n const close = instanceApi => {\n instanceApi.close();\n };\n return {\n open,\n openUrl,\n alert,\n close,\n confirm\n };\n };\n\n const registerOptions = editor => {\n register$e(editor);\n register$d(editor);\n register(editor);\n };\n var Theme = () => {\n global$a.add('silver', editor => {\n registerOptions(editor);\n const {dialogs, popups, renderUI} = setup$3(editor);\n Autocompleter.register(editor, popups.backstage.shared);\n const windowMgr = setup({\n editor,\n backstages: {\n popup: popups.backstage,\n dialog: dialogs.backstage\n }\n });\n const getNotificationManagerImpl = () => NotificationManagerImpl(editor, { backstage: popups.backstage }, popups.getMothership());\n return {\n renderUI,\n getWindowManagerImpl: constant$1(windowMgr),\n getNotificationManagerImpl\n };\n });\n };\n\n Theme();\n\n})();\n", "// Exports the \"autoresize\" plugin for usage with module loaders\n// Usage:\n// CommonJS:\n// require('tinymce/plugins/autoresize')\n// ES2015:\n// import 'tinymce/plugins/autoresize'\nrequire('./plugin.js');", "// Exports the \"charmap\" plugin for usage with module loaders\n// Usage:\n// CommonJS:\n// require('tinymce/plugins/charmap')\n// ES2015:\n// import 'tinymce/plugins/charmap'\nrequire('./plugin.js');", "// Exports the \"code\" plugin for usage with module loaders\n// Usage:\n// CommonJS:\n// require('tinymce/plugins/code')\n// ES2015:\n// import 'tinymce/plugins/code'\nrequire('./plugin.js');", "// Exports the \"link\" plugin for usage with module loaders\n// Usage:\n// CommonJS:\n// require('tinymce/plugins/link')\n// ES2015:\n// import 'tinymce/plugins/link'\nrequire('./plugin.js');", "// Exports the \"lists\" plugin for usage with module loaders\n// Usage:\n// CommonJS:\n// require('tinymce/plugins/lists')\n// ES2015:\n// import 'tinymce/plugins/lists'\nrequire('./plugin.js');", "// Exports the \"table\" plugin for usage with module loaders\n// Usage:\n// CommonJS:\n// require('tinymce/plugins/table')\n// ES2015:\n// import 'tinymce/plugins/table'\nrequire('./plugin.js');", "// Exports the \"wordcount\" plugin for usage with module loaders\n// Usage:\n// CommonJS:\n// require('tinymce/plugins/wordcount')\n// ES2015:\n// import 'tinymce/plugins/wordcount'\nrequire('./plugin.js');", "import { Controller } from \"@hotwired/stimulus\"\nimport { get } from \"@rails/request.js\"\n\nexport default class extends Controller {\n static targets = [\"select\"]\n static values = {\n url: String,\n param: String\n }\n\n connect() {\n if (this.selectTarget.id === \"\") {\n this.selectTarget.id = Math.random().toString(36)\n }\n // console.log('this.selectTarget.id', this.selectTarget.id)\n }\n\n change(event) {\n // console.log(event)\n let params = new URLSearchParams()\n params.append(this.paramValue, event.target.selectedOptions[0].value)\n params.append(\"target\", this.selectTarget.id)\n\n get(`${this.urlValue}?${params}`, {\n responseKind: \"turbo-stream\"\n })\n }\n}", "import { Controller } from \"@hotwired/stimulus\"\nimport { get } from \"@rails/request.js\"\n\nexport default class extends Controller {\n static targets = [\"fields\", \"province\"]\n static values = {\n url: String,\n param: String\n }\n\n connect() {\n if (this.provinceTarget.id === \"\") {\n this.provinceTarget.id = Math.random().toString(36)\n }\n console.log('this.provinceTarget.id', this.provinceTarget.id)\n }\n\n change(event) {\n console.log(event)\n let params = new URLSearchParams()\n params.append(this.paramValue, event.target.selectedOptions[0].value)\n params.append(\"target\", this.provinceTarget.id)\n\n get(`${this.urlValue}?${params}`, {\n responseKind: \"turbo-stream\"\n })\n }\n}", "import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"sidebar\"]\n connect() {\n console.log(\"Sidebar controller connected.\", this.element)\n }\n\n toggleMenu() {\n console.log('toggle sidebar')\n this.sidebarTarget.classList.toggle('hidden');\n }\n}\n", "import { Controller } from \"@hotwired/stimulus\"\nimport Sortable from \"sortablejs\"\nimport { put } from \"@rails/request.js\"\n\nexport default class extends Controller {\n static values = { url: String }\n\n connect() {\n this.sortable = Sortable.create(this.element, {\n animation: 150,\n onEnd: this.updatePosition.bind(this)\n })\n }\n async updatePosition(event) {\n const response = await put(`${this.urlValue}`, {\n body: JSON.stringify({\n sgid: event.item.dataset.sgid,\n position: event.newIndex + 1\n })\n })\n if (response.ok) {\n console.log(event.item.dataset.sgid)\n }\n }\n\n}\n", "import { Controller } from \"@hotwired/stimulus\"\n\n// Connects to data-controller=\"store--item\"\nexport default class extends Controller {\n static targets = [\"quantity\", \"amount\", \"subtotal\", \"subtotalDisplay\"]\n\n connect() {\n console.log(\"store/item controller connected.\", this.element)\n this.quantityTarget.addEventListener(\"change\", this.recalculateSubtotal.bind(this))\n this.amountTarget.addEventListener(\"change\", this.recalculateSubtotal.bind(this))\n }\n\n disconnect() {\n // Remove the event listener when the controller is disconnected\n this.quantityTarget.removeEventListener(\"change\", this.recalculateSubtotal.bind(this))\n this.amountTarget.removeEventListener(\"change\", this.recalculateSubtotal.bind(this))\n }\n\n recalculateSubtotal() {\n console.log(\"store items controller#recalculateSubtotal()\")\n const quantity = parseInt(this.quantityTarget.value)\n // Convert dollars to cents (multiply by 100)\n const unitPriceInDollars = parseFloat(this.amountTarget.value)\n const unitPriceInCents = Math.round(unitPriceInDollars * 100)\n console.log(\"quantity\", quantity)\n console.log(\"unitPriceInDollars\", unitPriceInDollars)\n console.log(\"unitPriceInCents\", unitPriceInCents)\n const subtotal = quantity * unitPriceInCents\n this.subtotalTarget.value = subtotal\n this.subtotalDisplayTarget.textContent = this.centsToDollars(subtotal)\n // Trigger an event to notify the parent (Order) controller\n this.element.dispatchEvent(new Event(\"line-item-updated\"))\n }\n\n // Function to convert cents to dollars\n centsToDollars(cents) {\n const dollars = (cents / 100).toFixed(2);\n return '$' + dollars;\n }\n\n}\n", "import { Controller } from \"@hotwired/stimulus\"\n\n// Connects to data-controller=\"store--order\"\nexport default class extends Controller {\n static targets = [\"lineItems\", \"orderTotal\"]\n\n connect() {\n console.log(\"store/order controller connected.\", this.element)\n // Listen for the custom \"line-item-updated\" event on all line item elements\n const lineItemElements = this.lineItemsTarget.querySelectorAll(\"[data-controller='store--item']\")\n lineItemElements.forEach((lineItem) => {\n lineItem.addEventListener(\"line-item-updated\", this.recalculateOrderTotal.bind(this))\n })\n\n // Calculate the initial order total\n this.recalculateOrderTotal()\n }\n\n disconnect() {\n // Remove event listeners when the controller is disconnected\n const lineItemElements = this.lineItemsTarget.querySelectorAll(\"[data-controller='store--item']\")\n lineItemElements.forEach((lineItem) => {\n lineItem.removeEventListener(\"line-item-updated\", this.recalculateOrderTotal.bind(this))\n })\n }\n\n recalculateOrderTotal() {\n let orderTotal = 0\n const lineItemElements = this.lineItemsTarget.querySelectorAll(\"[data-controller='store--item']\")\n lineItemElements.forEach((lineItem) => {\n const subtotal = parseFloat(lineItem.querySelector(\"[data-store--item-target='subtotal']\").value)\n orderTotal += subtotal\n })\n this.orderTotalTarget.textContent = this.centsToDollars(orderTotal)\n\n }\n\n // Function to convert cents to dollars with thousand delimiters\n centsToDollars(cents) {\n const dollars = (cents / 100).toFixed(2);\n return '$' + parseFloat(dollars).toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });\n }\n\n}\n", "import { Controller } from \"@hotwired/stimulus\"\n\nexport default class extends Controller {\n static targets = [\"hidden\", \"input\"]\n\n connect() {\n console.log(\"Toggle Fields controller connected.\", this.element)\n console.log('hiddenTarget', this.hiddenTarget)\n this.inputTargets.forEach(input => {\n console.log('inputTarget', input)\n console.log('inputTarget.type', input.type)\n input.addEventListener(\"change\", this.toggle.bind(this))\n input.addEventListener(\"keyup\", this.toggle.bind(this))\n })\n this.toggle()\n }\n\n disconnect() {\n this.inputTargets.forEach(input => {\n input.removeEventListener(\"change\", this.toggle.bind(this))\n input.removeEventListener(\"keyup\", this.toggle.bind(this))\n })\n }\n\n toggle() {\n const selectedValue = this.value\n console.log('toggle.selectedValue', selectedValue)\n\n this.hiddenTargets.forEach((target) => {\n console.log('target', target)\n const targetValue = target.dataset.value ?? null\n const greaterThanValue = target.dataset.greaterThan ? parseFloat(target.dataset.greaterThan) : null\n const lessThanValue = target.dataset.lessThan ? parseFloat(target.dataset.lessThan) : null\n\n let shouldShow = true\n\n if (targetValue !== null && selectedValue !== targetValue) { shouldShow = false }\n if (greaterThanValue !== null && selectedValue < greaterThanValue) { shouldShow = false }\n if (lessThanValue !== null && selectedValue > lessThanValue) { shouldShow = false }\n\n console.log('shouldShow', shouldShow)\n target.classList.toggle(\"hidden\", !shouldShow)\n })\n }\n\n get value() {\n const checkedInput = this.inputTargets.find((el) => {\n return (el.type === \"radio\" || el.type === \"checkbox\") ? el.checked : true\n })\n\n if (!checkedInput) return null\n\n switch (checkedInput.type) {\n case \"checkbox\":\n return checkedInput.value ?? \"true\"\n case \"radio\":\n return checkedInput.value\n case \"number\":\n return parseFloat(checkedInput.value)\n default:\n return checkedInput.value\n }\n }\n}", "import { Controller } from \"@hotwired/stimulus\"\nimport { Turbo } from \"@hotwired/turbo-rails\"\n\n// Connects to data-controller=\"turbo\"\nexport default class extends Controller {\n initialize() {\n console.log(\"attaching click handler to element with href\", this.element.getAttribute(\"href\"))\n this.element.setAttribute(\"data-action\", \"click->turbo#click\")\n }\n\n click(e) {\n e.preventDefault()\n this.url = this.element.getAttribute(\"href\")\n fetch(this.url, {\n headers: {\n Accept: \"text/vnd.turbo-stream.html\"\n }\n })\n .then(r => r.text())\n .then(html => Turbo.renderStreamMessage(html))\n }\n}\n", "/**\n * @license\n * Video.js 7.17.0 \n * Copyright Brightcove, Inc. \n * Available under Apache License Version 2.0\n * \n *\n * Includes vtt.js \n * Available under Apache License Version 2.0\n * \n */\n\nimport window from 'global/window';\nimport document from 'global/document';\nimport _extends from '@babel/runtime/helpers/extends';\nimport _assertThisInitialized from '@babel/runtime/helpers/assertThisInitialized';\nimport _inheritsLoose from '@babel/runtime/helpers/inheritsLoose';\nimport safeParseTuple from 'safe-json-parse/tuple';\nimport keycode from 'keycode';\nimport XHR from '@videojs/xhr';\nimport vtt from 'videojs-vtt.js';\nimport _construct from '@babel/runtime/helpers/construct';\nimport _inherits from '@babel/runtime/helpers/inherits';\nimport _resolveUrl from '@videojs/vhs-utils/es/resolve-url.js';\nimport { Parser } from 'm3u8-parser';\nimport { browserSupportsCodec, DEFAULT_VIDEO_CODEC, DEFAULT_AUDIO_CODEC, muxerSupportsCodec, parseCodecs, translateLegacyCodec, codecsFromDefault, getMimeForCodec, isAudioCodec } from '@videojs/vhs-utils/es/codecs.js';\nimport { simpleTypeFromSourceType } from '@videojs/vhs-utils/es/media-types.js';\nimport { generateSidxKey, parseUTCTiming, parse, addSidxSegmentsToPlaylist } from 'mpd-parser';\nimport parseSidx from 'mux.js/lib/tools/parse-sidx';\nimport { getId3Offset } from '@videojs/vhs-utils/es/id3-helpers';\nimport { detectContainerForBytes, isLikelyFmp4MediaSegment } from '@videojs/vhs-utils/es/containers';\nimport { concatTypedArrays, stringToBytes, toUint8 } from '@videojs/vhs-utils/es/byte-helpers';\nimport { ONE_SECOND_IN_TS } from 'mux.js/lib/utils/clock';\n\nvar version$5 = \"7.17.0\";\n\n/**\n * An Object that contains lifecycle hooks as keys which point to an array\n * of functions that are run when a lifecycle is triggered\n *\n * @private\n */\nvar hooks_ = {};\n/**\n * Get a list of hooks for a specific lifecycle\n *\n * @param {string} type\n * the lifecyle to get hooks from\n *\n * @param {Function|Function[]} [fn]\n * Optionally add a hook (or hooks) to the lifecycle that your are getting.\n *\n * @return {Array}\n * an array of hooks, or an empty array if there are none.\n */\n\nvar hooks = function hooks(type, fn) {\n hooks_[type] = hooks_[type] || [];\n\n if (fn) {\n hooks_[type] = hooks_[type].concat(fn);\n }\n\n return hooks_[type];\n};\n/**\n * Add a function hook to a specific videojs lifecycle.\n *\n * @param {string} type\n * the lifecycle to hook the function to.\n *\n * @param {Function|Function[]}\n * The function or array of functions to attach.\n */\n\n\nvar hook = function hook(type, fn) {\n hooks(type, fn);\n};\n/**\n * Remove a hook from a specific videojs lifecycle.\n *\n * @param {string} type\n * the lifecycle that the function hooked to\n *\n * @param {Function} fn\n * The hooked function to remove\n *\n * @return {boolean}\n * The function that was removed or undef\n */\n\n\nvar removeHook = function removeHook(type, fn) {\n var index = hooks(type).indexOf(fn);\n\n if (index <= -1) {\n return false;\n }\n\n hooks_[type] = hooks_[type].slice();\n hooks_[type].splice(index, 1);\n return true;\n};\n/**\n * Add a function hook that will only run once to a specific videojs lifecycle.\n *\n * @param {string} type\n * the lifecycle to hook the function to.\n *\n * @param {Function|Function[]}\n * The function or array of functions to attach.\n */\n\n\nvar hookOnce = function hookOnce(type, fn) {\n hooks(type, [].concat(fn).map(function (original) {\n var wrapper = function wrapper() {\n removeHook(type, wrapper);\n return original.apply(void 0, arguments);\n };\n\n return wrapper;\n }));\n};\n\n/**\n * @file fullscreen-api.js\n * @module fullscreen-api\n * @private\n */\n/**\n * Store the browser-specific methods for the fullscreen API.\n *\n * @type {Object}\n * @see [Specification]{@link https://fullscreen.spec.whatwg.org}\n * @see [Map Approach From Screenfull.js]{@link https://github.com/sindresorhus/screenfull.js}\n */\n\nvar FullscreenApi = {\n prefixed: true\n}; // browser API methods\n\nvar apiMap = [['requestFullscreen', 'exitFullscreen', 'fullscreenElement', 'fullscreenEnabled', 'fullscreenchange', 'fullscreenerror', 'fullscreen'], // WebKit\n['webkitRequestFullscreen', 'webkitExitFullscreen', 'webkitFullscreenElement', 'webkitFullscreenEnabled', 'webkitfullscreenchange', 'webkitfullscreenerror', '-webkit-full-screen'], // Mozilla\n['mozRequestFullScreen', 'mozCancelFullScreen', 'mozFullScreenElement', 'mozFullScreenEnabled', 'mozfullscreenchange', 'mozfullscreenerror', '-moz-full-screen'], // Microsoft\n['msRequestFullscreen', 'msExitFullscreen', 'msFullscreenElement', 'msFullscreenEnabled', 'MSFullscreenChange', 'MSFullscreenError', '-ms-fullscreen']];\nvar specApi = apiMap[0];\nvar browserApi; // determine the supported set of functions\n\nfor (var i = 0; i < apiMap.length; i++) {\n // check for exitFullscreen function\n if (apiMap[i][1] in document) {\n browserApi = apiMap[i];\n break;\n }\n} // map the browser API names to the spec API names\n\n\nif (browserApi) {\n for (var _i = 0; _i < browserApi.length; _i++) {\n FullscreenApi[specApi[_i]] = browserApi[_i];\n }\n\n FullscreenApi.prefixed = browserApi[0] !== specApi[0];\n}\n\n/**\n * @file create-logger.js\n * @module create-logger\n */\n\nvar history = [];\n/**\n * Log messages to the console and history based on the type of message\n *\n * @private\n * @param {string} type\n * The name of the console method to use.\n *\n * @param {Array} args\n * The arguments to be passed to the matching console method.\n */\n\nvar LogByTypeFactory = function LogByTypeFactory(name, log) {\n return function (type, level, args) {\n var lvl = log.levels[level];\n var lvlRegExp = new RegExp(\"^(\" + lvl + \")$\");\n\n if (type !== 'log') {\n // Add the type to the front of the message when it's not \"log\".\n args.unshift(type.toUpperCase() + ':');\n } // Add console prefix after adding to history.\n\n\n args.unshift(name + ':'); // Add a clone of the args at this point to history.\n\n if (history) {\n history.push([].concat(args)); // only store 1000 history entries\n\n var splice = history.length - 1000;\n history.splice(0, splice > 0 ? splice : 0);\n } // If there's no console then don't try to output messages, but they will\n // still be stored in history.\n\n\n if (!window.console) {\n return;\n } // Was setting these once outside of this function, but containing them\n // in the function makes it easier to test cases where console doesn't exist\n // when the module is executed.\n\n\n var fn = window.console[type];\n\n if (!fn && type === 'debug') {\n // Certain browsers don't have support for console.debug. For those, we\n // should default to the closest comparable log.\n fn = window.console.info || window.console.log;\n } // Bail out if there's no console or if this type is not allowed by the\n // current logging level.\n\n\n if (!fn || !lvl || !lvlRegExp.test(type)) {\n return;\n }\n\n fn[Array.isArray(args) ? 'apply' : 'call'](window.console, args);\n };\n};\n\nfunction createLogger$1(name) {\n // This is the private tracking variable for logging level.\n var level = 'info'; // the curried logByType bound to the specific log and history\n\n var logByType;\n /**\n * Logs plain debug messages. Similar to `console.log`.\n *\n * Due to [limitations](https://github.com/jsdoc3/jsdoc/issues/955#issuecomment-313829149)\n * of our JSDoc template, we cannot properly document this as both a function\n * and a namespace, so its function signature is documented here.\n *\n * #### Arguments\n * ##### *args\n * Mixed[]\n *\n * Any combination of values that could be passed to `console.log()`.\n *\n * #### Return Value\n *\n * `undefined`\n *\n * @namespace\n * @param {Mixed[]} args\n * One or more messages or objects that should be logged.\n */\n\n var log = function log() {\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n logByType('log', level, args);\n }; // This is the logByType helper that the logging methods below use\n\n\n logByType = LogByTypeFactory(name, log);\n /**\n * Create a new sublogger which chains the old name to the new name.\n *\n * For example, doing `videojs.log.createLogger('player')` and then using that logger will log the following:\n * ```js\n * mylogger('foo');\n * // > VIDEOJS: player: foo\n * ```\n *\n * @param {string} name\n * The name to add call the new logger\n * @return {Object}\n */\n\n log.createLogger = function (subname) {\n return createLogger$1(name + ': ' + subname);\n };\n /**\n * Enumeration of available logging levels, where the keys are the level names\n * and the values are `|`-separated strings containing logging methods allowed\n * in that logging level. These strings are used to create a regular expression\n * matching the function name being called.\n *\n * Levels provided by Video.js are:\n *\n * - `off`: Matches no calls. Any value that can be cast to `false` will have\n * this effect. The most restrictive.\n * - `all`: Matches only Video.js-provided functions (`debug`, `log`,\n * `log.warn`, and `log.error`).\n * - `debug`: Matches `log.debug`, `log`, `log.warn`, and `log.error` calls.\n * - `info` (default): Matches `log`, `log.warn`, and `log.error` calls.\n * - `warn`: Matches `log.warn` and `log.error` calls.\n * - `error`: Matches only `log.error` calls.\n *\n * @type {Object}\n */\n\n\n log.levels = {\n all: 'debug|log|warn|error',\n off: '',\n debug: 'debug|log|warn|error',\n info: 'log|warn|error',\n warn: 'warn|error',\n error: 'error',\n DEFAULT: level\n };\n /**\n * Get or set the current logging level.\n *\n * If a string matching a key from {@link module:log.levels} is provided, acts\n * as a setter.\n *\n * @param {string} [lvl]\n * Pass a valid level to set a new logging level.\n *\n * @return {string}\n * The current logging level.\n */\n\n log.level = function (lvl) {\n if (typeof lvl === 'string') {\n if (!log.levels.hasOwnProperty(lvl)) {\n throw new Error(\"\\\"\" + lvl + \"\\\" in not a valid log level\");\n }\n\n level = lvl;\n }\n\n return level;\n };\n /**\n * Returns an array containing everything that has been logged to the history.\n *\n * This array is a shallow clone of the internal history record. However, its\n * contents are _not_ cloned; so, mutating objects inside this array will\n * mutate them in history.\n *\n * @return {Array}\n */\n\n\n log.history = function () {\n return history ? [].concat(history) : [];\n };\n /**\n * Allows you to filter the history by the given logger name\n *\n * @param {string} fname\n * The name to filter by\n *\n * @return {Array}\n * The filtered list to return\n */\n\n\n log.history.filter = function (fname) {\n return (history || []).filter(function (historyItem) {\n // if the first item in each historyItem includes `fname`, then it's a match\n return new RegExp(\".*\" + fname + \".*\").test(historyItem[0]);\n });\n };\n /**\n * Clears the internal history tracking, but does not prevent further history\n * tracking.\n */\n\n\n log.history.clear = function () {\n if (history) {\n history.length = 0;\n }\n };\n /**\n * Disable history tracking if it is currently enabled.\n */\n\n\n log.history.disable = function () {\n if (history !== null) {\n history.length = 0;\n history = null;\n }\n };\n /**\n * Enable history tracking if it is currently disabled.\n */\n\n\n log.history.enable = function () {\n if (history === null) {\n history = [];\n }\n };\n /**\n * Logs error messages. Similar to `console.error`.\n *\n * @param {Mixed[]} args\n * One or more messages or objects that should be logged as an error\n */\n\n\n log.error = function () {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n return logByType('error', level, args);\n };\n /**\n * Logs warning messages. Similar to `console.warn`.\n *\n * @param {Mixed[]} args\n * One or more messages or objects that should be logged as a warning.\n */\n\n\n log.warn = function () {\n for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n args[_key3] = arguments[_key3];\n }\n\n return logByType('warn', level, args);\n };\n /**\n * Logs debug messages. Similar to `console.debug`, but may also act as a comparable\n * log if `console.debug` is not available\n *\n * @param {Mixed[]} args\n * One or more messages or objects that should be logged as debug.\n */\n\n\n log.debug = function () {\n for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {\n args[_key4] = arguments[_key4];\n }\n\n return logByType('debug', level, args);\n };\n\n return log;\n}\n\n/**\n * @file log.js\n * @module log\n */\nvar log$1 = createLogger$1('VIDEOJS');\nvar createLogger = log$1.createLogger;\n\n/**\n * @file obj.js\n * @module obj\n */\n\n/**\n * @callback obj:EachCallback\n *\n * @param {Mixed} value\n * The current key for the object that is being iterated over.\n *\n * @param {string} key\n * The current key-value for object that is being iterated over\n */\n\n/**\n * @callback obj:ReduceCallback\n *\n * @param {Mixed} accum\n * The value that is accumulating over the reduce loop.\n *\n * @param {Mixed} value\n * The current key for the object that is being iterated over.\n *\n * @param {string} key\n * The current key-value for object that is being iterated over\n *\n * @return {Mixed}\n * The new accumulated value.\n */\nvar toString = Object.prototype.toString;\n/**\n * Get the keys of an Object\n *\n * @param {Object}\n * The Object to get the keys from\n *\n * @return {string[]}\n * An array of the keys from the object. Returns an empty array if the\n * object passed in was invalid or had no keys.\n *\n * @private\n */\n\nvar keys = function keys(object) {\n return isObject(object) ? Object.keys(object) : [];\n};\n/**\n * Array-like iteration for objects.\n *\n * @param {Object} object\n * The object to iterate over\n *\n * @param {obj:EachCallback} fn\n * The callback function which is called for each key in the object.\n */\n\n\nfunction each(object, fn) {\n keys(object).forEach(function (key) {\n return fn(object[key], key);\n });\n}\n/**\n * Array-like reduce for objects.\n *\n * @param {Object} object\n * The Object that you want to reduce.\n *\n * @param {Function} fn\n * A callback function which is called for each key in the object. It\n * receives the accumulated value and the per-iteration value and key\n * as arguments.\n *\n * @param {Mixed} [initial = 0]\n * Starting value\n *\n * @return {Mixed}\n * The final accumulated value.\n */\n\nfunction reduce(object, fn, initial) {\n if (initial === void 0) {\n initial = 0;\n }\n\n return keys(object).reduce(function (accum, key) {\n return fn(accum, object[key], key);\n }, initial);\n}\n/**\n * Object.assign-style object shallow merge/extend.\n *\n * @param {Object} target\n * @param {Object} ...sources\n * @return {Object}\n */\n\nfunction assign(target) {\n for (var _len = arguments.length, sources = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n sources[_key - 1] = arguments[_key];\n }\n\n if (Object.assign) {\n return _extends.apply(void 0, [target].concat(sources));\n }\n\n sources.forEach(function (source) {\n if (!source) {\n return;\n }\n\n each(source, function (value, key) {\n target[key] = value;\n });\n });\n return target;\n}\n/**\n * Returns whether a value is an object of any kind - including DOM nodes,\n * arrays, regular expressions, etc. Not functions, though.\n *\n * This avoids the gotcha where using `typeof` on a `null` value\n * results in `'object'`.\n *\n * @param {Object} value\n * @return {boolean}\n */\n\nfunction isObject(value) {\n return !!value && typeof value === 'object';\n}\n/**\n * Returns whether an object appears to be a \"plain\" object - that is, a\n * direct instance of `Object`.\n *\n * @param {Object} value\n * @return {boolean}\n */\n\nfunction isPlain(value) {\n return isObject(value) && toString.call(value) === '[object Object]' && value.constructor === Object;\n}\n\n/**\n * @file computed-style.js\n * @module computed-style\n */\n/**\n * A safe getComputedStyle.\n *\n * This is needed because in Firefox, if the player is loaded in an iframe with\n * `display:none`, then `getComputedStyle` returns `null`, so, we do a\n * null-check to make sure that the player doesn't break in these cases.\n *\n * @function\n * @param {Element} el\n * The element you want the computed style of\n *\n * @param {string} prop\n * The property name you want\n *\n * @see https://bugzilla.mozilla.org/show_bug.cgi?id=548397\n */\n\nfunction computedStyle(el, prop) {\n if (!el || !prop) {\n return '';\n }\n\n if (typeof window.getComputedStyle === 'function') {\n var computedStyleValue;\n\n try {\n computedStyleValue = window.getComputedStyle(el);\n } catch (e) {\n return '';\n }\n\n return computedStyleValue ? computedStyleValue.getPropertyValue(prop) || computedStyleValue[prop] : '';\n }\n\n return '';\n}\n\n/**\n * @file browser.js\n * @module browser\n */\nvar USER_AGENT = window.navigator && window.navigator.userAgent || '';\nvar webkitVersionMap = /AppleWebKit\\/([\\d.]+)/i.exec(USER_AGENT);\nvar appleWebkitVersion = webkitVersionMap ? parseFloat(webkitVersionMap.pop()) : null;\n/**\n * Whether or not this device is an iPod.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_IPOD = /iPod/i.test(USER_AGENT);\n/**\n * The detected iOS version - or `null`.\n *\n * @static\n * @const\n * @type {string|null}\n */\n\nvar IOS_VERSION = function () {\n var match = USER_AGENT.match(/OS (\\d+)_/i);\n\n if (match && match[1]) {\n return match[1];\n }\n\n return null;\n}();\n/**\n * Whether or not this is an Android device.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_ANDROID = /Android/i.test(USER_AGENT);\n/**\n * The detected Android version - or `null`.\n *\n * @static\n * @const\n * @type {number|string|null}\n */\n\nvar ANDROID_VERSION = function () {\n // This matches Android Major.Minor.Patch versions\n // ANDROID_VERSION is Major.Minor as a Number, if Minor isn't available, then only Major is returned\n var match = USER_AGENT.match(/Android (\\d+)(?:\\.(\\d+))?(?:\\.(\\d+))*/i);\n\n if (!match) {\n return null;\n }\n\n var major = match[1] && parseFloat(match[1]);\n var minor = match[2] && parseFloat(match[2]);\n\n if (major && minor) {\n return parseFloat(match[1] + '.' + match[2]);\n } else if (major) {\n return major;\n }\n\n return null;\n}();\n/**\n * Whether or not this is a native Android browser.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_NATIVE_ANDROID = IS_ANDROID && ANDROID_VERSION < 5 && appleWebkitVersion < 537;\n/**\n * Whether or not this is Mozilla Firefox.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_FIREFOX = /Firefox/i.test(USER_AGENT);\n/**\n * Whether or not this is Microsoft Edge.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_EDGE = /Edg/i.test(USER_AGENT);\n/**\n * Whether or not this is Google Chrome.\n *\n * This will also be `true` for Chrome on iOS, which will have different support\n * as it is actually Safari under the hood.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_CHROME = !IS_EDGE && (/Chrome/i.test(USER_AGENT) || /CriOS/i.test(USER_AGENT));\n/**\n * The detected Google Chrome version - or `null`.\n *\n * @static\n * @const\n * @type {number|null}\n */\n\nvar CHROME_VERSION = function () {\n var match = USER_AGENT.match(/(Chrome|CriOS)\\/(\\d+)/);\n\n if (match && match[2]) {\n return parseFloat(match[2]);\n }\n\n return null;\n}();\n/**\n * The detected Internet Explorer version - or `null`.\n *\n * @static\n * @const\n * @type {number|null}\n */\n\nvar IE_VERSION = function () {\n var result = /MSIE\\s(\\d+)\\.\\d/.exec(USER_AGENT);\n var version = result && parseFloat(result[1]);\n\n if (!version && /Trident\\/7.0/i.test(USER_AGENT) && /rv:11.0/.test(USER_AGENT)) {\n // IE 11 has a different user agent string than other IE versions\n version = 11.0;\n }\n\n return version;\n}();\n/**\n * Whether or not this is desktop Safari.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_SAFARI = /Safari/i.test(USER_AGENT) && !IS_CHROME && !IS_ANDROID && !IS_EDGE;\n/**\n * Whether or not this is a Windows machine.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_WINDOWS = /Windows/i.test(USER_AGENT);\n/**\n * Whether or not this device is touch-enabled.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar TOUCH_ENABLED = Boolean(isReal() && ('ontouchstart' in window || window.navigator.maxTouchPoints || window.DocumentTouch && window.document instanceof window.DocumentTouch));\n/**\n * Whether or not this device is an iPad.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_IPAD = /iPad/i.test(USER_AGENT) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(USER_AGENT);\n/**\n * Whether or not this device is an iPhone.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n// The Facebook app's UIWebView identifies as both an iPhone and iPad, so\n// to identify iPhones, we need to exclude iPads.\n// http://artsy.github.io/blog/2012/10/18/the-perils-of-ios-user-agent-sniffing/\n\nvar IS_IPHONE = /iPhone/i.test(USER_AGENT) && !IS_IPAD;\n/**\n * Whether or not this is an iOS device.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;\n/**\n * Whether or not this is any flavor of Safari - including iOS.\n *\n * @static\n * @const\n * @type {Boolean}\n */\n\nvar IS_ANY_SAFARI = (IS_SAFARI || IS_IOS) && !IS_CHROME;\n\nvar browser = /*#__PURE__*/Object.freeze({\n __proto__: null,\n IS_IPOD: IS_IPOD,\n IOS_VERSION: IOS_VERSION,\n IS_ANDROID: IS_ANDROID,\n ANDROID_VERSION: ANDROID_VERSION,\n IS_NATIVE_ANDROID: IS_NATIVE_ANDROID,\n IS_FIREFOX: IS_FIREFOX,\n IS_EDGE: IS_EDGE,\n IS_CHROME: IS_CHROME,\n CHROME_VERSION: CHROME_VERSION,\n IE_VERSION: IE_VERSION,\n IS_SAFARI: IS_SAFARI,\n IS_WINDOWS: IS_WINDOWS,\n TOUCH_ENABLED: TOUCH_ENABLED,\n IS_IPAD: IS_IPAD,\n IS_IPHONE: IS_IPHONE,\n IS_IOS: IS_IOS,\n IS_ANY_SAFARI: IS_ANY_SAFARI\n});\n\n/**\n * @file dom.js\n * @module dom\n */\n/**\n * Detect if a value is a string with any non-whitespace characters.\n *\n * @private\n * @param {string} str\n * The string to check\n *\n * @return {boolean}\n * Will be `true` if the string is non-blank, `false` otherwise.\n *\n */\n\nfunction isNonBlankString(str) {\n // we use str.trim as it will trim any whitespace characters\n // from the front or back of non-whitespace characters. aka\n // Any string that contains non-whitespace characters will\n // still contain them after `trim` but whitespace only strings\n // will have a length of 0, failing this check.\n return typeof str === 'string' && Boolean(str.trim());\n}\n/**\n * Throws an error if the passed string has whitespace. This is used by\n * class methods to be relatively consistent with the classList API.\n *\n * @private\n * @param {string} str\n * The string to check for whitespace.\n *\n * @throws {Error}\n * Throws an error if there is whitespace in the string.\n */\n\n\nfunction throwIfWhitespace(str) {\n // str.indexOf instead of regex because str.indexOf is faster performance wise.\n if (str.indexOf(' ') >= 0) {\n throw new Error('class has illegal whitespace characters');\n }\n}\n/**\n * Produce a regular expression for matching a className within an elements className.\n *\n * @private\n * @param {string} className\n * The className to generate the RegExp for.\n *\n * @return {RegExp}\n * The RegExp that will check for a specific `className` in an elements\n * className.\n */\n\n\nfunction classRegExp(className) {\n return new RegExp('(^|\\\\s)' + className + '($|\\\\s)');\n}\n/**\n * Whether the current DOM interface appears to be real (i.e. not simulated).\n *\n * @return {boolean}\n * Will be `true` if the DOM appears to be real, `false` otherwise.\n */\n\n\nfunction isReal() {\n // Both document and window will never be undefined thanks to `global`.\n return document === window.document;\n}\n/**\n * Determines, via duck typing, whether or not a value is a DOM element.\n *\n * @param {Mixed} value\n * The value to check.\n *\n * @return {boolean}\n * Will be `true` if the value is a DOM element, `false` otherwise.\n */\n\nfunction isEl(value) {\n return isObject(value) && value.nodeType === 1;\n}\n/**\n * Determines if the current DOM is embedded in an iframe.\n *\n * @return {boolean}\n * Will be `true` if the DOM is embedded in an iframe, `false`\n * otherwise.\n */\n\nfunction isInFrame() {\n // We need a try/catch here because Safari will throw errors when attempting\n // to get either `parent` or `self`\n try {\n return window.parent !== window.self;\n } catch (x) {\n return true;\n }\n}\n/**\n * Creates functions to query the DOM using a given method.\n *\n * @private\n * @param {string} method\n * The method to create the query with.\n *\n * @return {Function}\n * The query method\n */\n\nfunction createQuerier(method) {\n return function (selector, context) {\n if (!isNonBlankString(selector)) {\n return document[method](null);\n }\n\n if (isNonBlankString(context)) {\n context = document.querySelector(context);\n }\n\n var ctx = isEl(context) ? context : document;\n return ctx[method] && ctx[method](selector);\n };\n}\n/**\n * Creates an element and applies properties, attributes, and inserts content.\n *\n * @param {string} [tagName='div']\n * Name of tag to be created.\n *\n * @param {Object} [properties={}]\n * Element properties to be applied.\n *\n * @param {Object} [attributes={}]\n * Element attributes to be applied.\n *\n * @param {module:dom~ContentDescriptor} content\n * A content descriptor object.\n *\n * @return {Element}\n * The element that was created.\n */\n\n\nfunction createEl(tagName, properties, attributes, content) {\n if (tagName === void 0) {\n tagName = 'div';\n }\n\n if (properties === void 0) {\n properties = {};\n }\n\n if (attributes === void 0) {\n attributes = {};\n }\n\n var el = document.createElement(tagName);\n Object.getOwnPropertyNames(properties).forEach(function (propName) {\n var val = properties[propName]; // See #2176\n // We originally were accepting both properties and attributes in the\n // same object, but that doesn't work so well.\n\n if (propName.indexOf('aria-') !== -1 || propName === 'role' || propName === 'type') {\n log$1.warn('Setting attributes in the second argument of createEl()\\n' + 'has been deprecated. Use the third argument instead.\\n' + (\"createEl(type, properties, attributes). Attempting to set \" + propName + \" to \" + val + \".\"));\n el.setAttribute(propName, val); // Handle textContent since it's not supported everywhere and we have a\n // method for it.\n } else if (propName === 'textContent') {\n textContent(el, val);\n } else if (el[propName] !== val || propName === 'tabIndex') {\n el[propName] = val;\n }\n });\n Object.getOwnPropertyNames(attributes).forEach(function (attrName) {\n el.setAttribute(attrName, attributes[attrName]);\n });\n\n if (content) {\n appendContent(el, content);\n }\n\n return el;\n}\n/**\n * Injects text into an element, replacing any existing contents entirely.\n *\n * @param {Element} el\n * The element to add text content into\n *\n * @param {string} text\n * The text content to add.\n *\n * @return {Element}\n * The element with added text content.\n */\n\nfunction textContent(el, text) {\n if (typeof el.textContent === 'undefined') {\n el.innerText = text;\n } else {\n el.textContent = text;\n }\n\n return el;\n}\n/**\n * Insert an element as the first child node of another\n *\n * @param {Element} child\n * Element to insert\n *\n * @param {Element} parent\n * Element to insert child into\n */\n\nfunction prependTo(child, parent) {\n if (parent.firstChild) {\n parent.insertBefore(child, parent.firstChild);\n } else {\n parent.appendChild(child);\n }\n}\n/**\n * Check if an element has a class name.\n *\n * @param {Element} element\n * Element to check\n *\n * @param {string} classToCheck\n * Class name to check for\n *\n * @return {boolean}\n * Will be `true` if the element has a class, `false` otherwise.\n *\n * @throws {Error}\n * Throws an error if `classToCheck` has white space.\n */\n\nfunction hasClass(element, classToCheck) {\n throwIfWhitespace(classToCheck);\n\n if (element.classList) {\n return element.classList.contains(classToCheck);\n }\n\n return classRegExp(classToCheck).test(element.className);\n}\n/**\n * Add a class name to an element.\n *\n * @param {Element} element\n * Element to add class name to.\n *\n * @param {string} classToAdd\n * Class name to add.\n *\n * @return {Element}\n * The DOM element with the added class name.\n */\n\nfunction addClass(element, classToAdd) {\n if (element.classList) {\n element.classList.add(classToAdd); // Don't need to `throwIfWhitespace` here because `hasElClass` will do it\n // in the case of classList not being supported.\n } else if (!hasClass(element, classToAdd)) {\n element.className = (element.className + ' ' + classToAdd).trim();\n }\n\n return element;\n}\n/**\n * Remove a class name from an element.\n *\n * @param {Element} element\n * Element to remove a class name from.\n *\n * @param {string} classToRemove\n * Class name to remove\n *\n * @return {Element}\n * The DOM element with class name removed.\n */\n\nfunction removeClass(element, classToRemove) {\n // Protect in case the player gets disposed\n if (!element) {\n log$1.warn(\"removeClass was called with an element that doesn't exist\");\n return null;\n }\n\n if (element.classList) {\n element.classList.remove(classToRemove);\n } else {\n throwIfWhitespace(classToRemove);\n element.className = element.className.split(/\\s+/).filter(function (c) {\n return c !== classToRemove;\n }).join(' ');\n }\n\n return element;\n}\n/**\n * The callback definition for toggleClass.\n *\n * @callback module:dom~PredicateCallback\n * @param {Element} element\n * The DOM element of the Component.\n *\n * @param {string} classToToggle\n * The `className` that wants to be toggled\n *\n * @return {boolean|undefined}\n * If `true` is returned, the `classToToggle` will be added to the\n * `element`. If `false`, the `classToToggle` will be removed from\n * the `element`. If `undefined`, the callback will be ignored.\n */\n\n/**\n * Adds or removes a class name to/from an element depending on an optional\n * condition or the presence/absence of the class name.\n *\n * @param {Element} element\n * The element to toggle a class name on.\n *\n * @param {string} classToToggle\n * The class that should be toggled.\n *\n * @param {boolean|module:dom~PredicateCallback} [predicate]\n * See the return value for {@link module:dom~PredicateCallback}\n *\n * @return {Element}\n * The element with a class that has been toggled.\n */\n\nfunction toggleClass(element, classToToggle, predicate) {\n // This CANNOT use `classList` internally because IE11 does not support the\n // second parameter to the `classList.toggle()` method! Which is fine because\n // `classList` will be used by the add/remove functions.\n var has = hasClass(element, classToToggle);\n\n if (typeof predicate === 'function') {\n predicate = predicate(element, classToToggle);\n }\n\n if (typeof predicate !== 'boolean') {\n predicate = !has;\n } // If the necessary class operation matches the current state of the\n // element, no action is required.\n\n\n if (predicate === has) {\n return;\n }\n\n if (predicate) {\n addClass(element, classToToggle);\n } else {\n removeClass(element, classToToggle);\n }\n\n return element;\n}\n/**\n * Apply attributes to an HTML element.\n *\n * @param {Element} el\n * Element to add attributes to.\n *\n * @param {Object} [attributes]\n * Attributes to be applied.\n */\n\nfunction setAttributes(el, attributes) {\n Object.getOwnPropertyNames(attributes).forEach(function (attrName) {\n var attrValue = attributes[attrName];\n\n if (attrValue === null || typeof attrValue === 'undefined' || attrValue === false) {\n el.removeAttribute(attrName);\n } else {\n el.setAttribute(attrName, attrValue === true ? '' : attrValue);\n }\n });\n}\n/**\n * Get an element's attribute values, as defined on the HTML tag.\n *\n * Attributes are not the same as properties. They're defined on the tag\n * or with setAttribute.\n *\n * @param {Element} tag\n * Element from which to get tag attributes.\n *\n * @return {Object}\n * All attributes of the element. Boolean attributes will be `true` or\n * `false`, others will be strings.\n */\n\nfunction getAttributes(tag) {\n var obj = {}; // known boolean attributes\n // we can check for matching boolean properties, but not all browsers\n // and not all tags know about these attributes, so, we still want to check them manually\n\n var knownBooleans = ',' + 'autoplay,controls,playsinline,loop,muted,default,defaultMuted' + ',';\n\n if (tag && tag.attributes && tag.attributes.length > 0) {\n var attrs = tag.attributes;\n\n for (var i = attrs.length - 1; i >= 0; i--) {\n var attrName = attrs[i].name;\n var attrVal = attrs[i].value; // check for known booleans\n // the matching element property will return a value for typeof\n\n if (typeof tag[attrName] === 'boolean' || knownBooleans.indexOf(',' + attrName + ',') !== -1) {\n // the value of an included boolean attribute is typically an empty\n // string ('') which would equal false if we just check for a false value.\n // we also don't want support bad code like autoplay='false'\n attrVal = attrVal !== null ? true : false;\n }\n\n obj[attrName] = attrVal;\n }\n }\n\n return obj;\n}\n/**\n * Get the value of an element's attribute.\n *\n * @param {Element} el\n * A DOM element.\n *\n * @param {string} attribute\n * Attribute to get the value of.\n *\n * @return {string}\n * The value of the attribute.\n */\n\nfunction getAttribute(el, attribute) {\n return el.getAttribute(attribute);\n}\n/**\n * Set the value of an element's attribute.\n *\n * @param {Element} el\n * A DOM element.\n *\n * @param {string} attribute\n * Attribute to set.\n *\n * @param {string} value\n * Value to set the attribute to.\n */\n\nfunction setAttribute(el, attribute, value) {\n el.setAttribute(attribute, value);\n}\n/**\n * Remove an element's attribute.\n *\n * @param {Element} el\n * A DOM element.\n *\n * @param {string} attribute\n * Attribute to remove.\n */\n\nfunction removeAttribute(el, attribute) {\n el.removeAttribute(attribute);\n}\n/**\n * Attempt to block the ability to select text.\n */\n\nfunction blockTextSelection() {\n document.body.focus();\n\n document.onselectstart = function () {\n return false;\n };\n}\n/**\n * Turn off text selection blocking.\n */\n\nfunction unblockTextSelection() {\n document.onselectstart = function () {\n return true;\n };\n}\n/**\n * Identical to the native `getBoundingClientRect` function, but ensures that\n * the method is supported at all (it is in all browsers we claim to support)\n * and that the element is in the DOM before continuing.\n *\n * This wrapper function also shims properties which are not provided by some\n * older browsers (namely, IE8).\n *\n * Additionally, some browsers do not support adding properties to a\n * `ClientRect`/`DOMRect` object; so, we shallow-copy it with the standard\n * properties (except `x` and `y` which are not widely supported). This helps\n * avoid implementations where keys are non-enumerable.\n *\n * @param {Element} el\n * Element whose `ClientRect` we want to calculate.\n *\n * @return {Object|undefined}\n * Always returns a plain object - or `undefined` if it cannot.\n */\n\nfunction getBoundingClientRect(el) {\n if (el && el.getBoundingClientRect && el.parentNode) {\n var rect = el.getBoundingClientRect();\n var result = {};\n ['bottom', 'height', 'left', 'right', 'top', 'width'].forEach(function (k) {\n if (rect[k] !== undefined) {\n result[k] = rect[k];\n }\n });\n\n if (!result.height) {\n result.height = parseFloat(computedStyle(el, 'height'));\n }\n\n if (!result.width) {\n result.width = parseFloat(computedStyle(el, 'width'));\n }\n\n return result;\n }\n}\n/**\n * Represents the position of a DOM element on the page.\n *\n * @typedef {Object} module:dom~Position\n *\n * @property {number} left\n * Pixels to the left.\n *\n * @property {number} top\n * Pixels from the top.\n */\n\n/**\n * Get the position of an element in the DOM.\n *\n * Uses `getBoundingClientRect` technique from John Resig.\n *\n * @see http://ejohn.org/blog/getboundingclientrect-is-awesome/\n *\n * @param {Element} el\n * Element from which to get offset.\n *\n * @return {module:dom~Position}\n * The position of the element that was passed in.\n */\n\nfunction findPosition(el) {\n if (!el || el && !el.offsetParent) {\n return {\n left: 0,\n top: 0,\n width: 0,\n height: 0\n };\n }\n\n var width = el.offsetWidth;\n var height = el.offsetHeight;\n var left = 0;\n var top = 0;\n\n while (el.offsetParent && el !== document[FullscreenApi.fullscreenElement]) {\n left += el.offsetLeft;\n top += el.offsetTop;\n el = el.offsetParent;\n }\n\n return {\n left: left,\n top: top,\n width: width,\n height: height\n };\n}\n/**\n * Represents x and y coordinates for a DOM element or mouse pointer.\n *\n * @typedef {Object} module:dom~Coordinates\n *\n * @property {number} x\n * x coordinate in pixels\n *\n * @property {number} y\n * y coordinate in pixels\n */\n\n/**\n * Get the pointer position within an element.\n *\n * The base on the coordinates are the bottom left of the element.\n *\n * @param {Element} el\n * Element on which to get the pointer position on.\n *\n * @param {EventTarget~Event} event\n * Event object.\n *\n * @return {module:dom~Coordinates}\n * A coordinates object corresponding to the mouse position.\n *\n */\n\nfunction getPointerPosition(el, event) {\n var translated = {\n x: 0,\n y: 0\n };\n\n if (IS_IOS) {\n var item = el;\n\n while (item && item.nodeName.toLowerCase() !== 'html') {\n var transform = computedStyle(item, 'transform');\n\n if (/^matrix/.test(transform)) {\n var values = transform.slice(7, -1).split(/,\\s/).map(Number);\n translated.x += values[4];\n translated.y += values[5];\n } else if (/^matrix3d/.test(transform)) {\n var _values = transform.slice(9, -1).split(/,\\s/).map(Number);\n\n translated.x += _values[12];\n translated.y += _values[13];\n }\n\n item = item.parentNode;\n }\n }\n\n var position = {};\n var boxTarget = findPosition(event.target);\n var box = findPosition(el);\n var boxW = box.width;\n var boxH = box.height;\n var offsetY = event.offsetY - (box.top - boxTarget.top);\n var offsetX = event.offsetX - (box.left - boxTarget.left);\n\n if (event.changedTouches) {\n offsetX = event.changedTouches[0].pageX - box.left;\n offsetY = event.changedTouches[0].pageY + box.top;\n\n if (IS_IOS) {\n offsetX -= translated.x;\n offsetY -= translated.y;\n }\n }\n\n position.y = 1 - Math.max(0, Math.min(1, offsetY / boxH));\n position.x = Math.max(0, Math.min(1, offsetX / boxW));\n return position;\n}\n/**\n * Determines, via duck typing, whether or not a value is a text node.\n *\n * @param {Mixed} value\n * Check if this value is a text node.\n *\n * @return {boolean}\n * Will be `true` if the value is a text node, `false` otherwise.\n */\n\nfunction isTextNode(value) {\n return isObject(value) && value.nodeType === 3;\n}\n/**\n * Empties the contents of an element.\n *\n * @param {Element} el\n * The element to empty children from\n *\n * @return {Element}\n * The element with no children\n */\n\nfunction emptyEl(el) {\n while (el.firstChild) {\n el.removeChild(el.firstChild);\n }\n\n return el;\n}\n/**\n * This is a mixed value that describes content to be injected into the DOM\n * via some method. It can be of the following types:\n *\n * Type | Description\n * -----------|-------------\n * `string` | The value will be normalized into a text node.\n * `Element` | The value will be accepted as-is.\n * `TextNode` | The value will be accepted as-is.\n * `Array` | A one-dimensional array of strings, elements, text nodes, or functions. These functions should return a string, element, or text node (any other return value, like an array, will be ignored).\n * `Function` | A function, which is expected to return a string, element, text node, or array - any of the other possible values described above. This means that a content descriptor could be a function that returns an array of functions, but those second-level functions must return strings, elements, or text nodes.\n *\n * @typedef {string|Element|TextNode|Array|Function} module:dom~ContentDescriptor\n */\n\n/**\n * Normalizes content for eventual insertion into the DOM.\n *\n * This allows a wide range of content definition methods, but helps protect\n * from falling into the trap of simply writing to `innerHTML`, which could\n * be an XSS concern.\n *\n * The content for an element can be passed in multiple types and\n * combinations, whose behavior is as follows:\n *\n * @param {module:dom~ContentDescriptor} content\n * A content descriptor value.\n *\n * @return {Array}\n * All of the content that was passed in, normalized to an array of\n * elements or text nodes.\n */\n\nfunction normalizeContent(content) {\n // First, invoke content if it is a function. If it produces an array,\n // that needs to happen before normalization.\n if (typeof content === 'function') {\n content = content();\n } // Next up, normalize to an array, so one or many items can be normalized,\n // filtered, and returned.\n\n\n return (Array.isArray(content) ? content : [content]).map(function (value) {\n // First, invoke value if it is a function to produce a new value,\n // which will be subsequently normalized to a Node of some kind.\n if (typeof value === 'function') {\n value = value();\n }\n\n if (isEl(value) || isTextNode(value)) {\n return value;\n }\n\n if (typeof value === 'string' && /\\S/.test(value)) {\n return document.createTextNode(value);\n }\n }).filter(function (value) {\n return value;\n });\n}\n/**\n * Normalizes and appends content to an element.\n *\n * @param {Element} el\n * Element to append normalized content to.\n *\n * @param {module:dom~ContentDescriptor} content\n * A content descriptor value.\n *\n * @return {Element}\n * The element with appended normalized content.\n */\n\nfunction appendContent(el, content) {\n normalizeContent(content).forEach(function (node) {\n return el.appendChild(node);\n });\n return el;\n}\n/**\n * Normalizes and inserts content into an element; this is identical to\n * `appendContent()`, except it empties the element first.\n *\n * @param {Element} el\n * Element to insert normalized content into.\n *\n * @param {module:dom~ContentDescriptor} content\n * A content descriptor value.\n *\n * @return {Element}\n * The element with inserted normalized content.\n */\n\nfunction insertContent(el, content) {\n return appendContent(emptyEl(el), content);\n}\n/**\n * Check if an event was a single left click.\n *\n * @param {EventTarget~Event} event\n * Event object.\n *\n * @return {boolean}\n * Will be `true` if a single left click, `false` otherwise.\n */\n\nfunction isSingleLeftClick(event) {\n // Note: if you create something draggable, be sure to\n // call it on both `mousedown` and `mousemove` event,\n // otherwise `mousedown` should be enough for a button\n if (event.button === undefined && event.buttons === undefined) {\n // Why do we need `buttons` ?\n // Because, middle mouse sometimes have this:\n // e.button === 0 and e.buttons === 4\n // Furthermore, we want to prevent combination click, something like\n // HOLD middlemouse then left click, that would be\n // e.button === 0, e.buttons === 5\n // just `button` is not gonna work\n // Alright, then what this block does ?\n // this is for chrome `simulate mobile devices`\n // I want to support this as well\n return true;\n }\n\n if (event.button === 0 && event.buttons === undefined) {\n // Touch screen, sometimes on some specific device, `buttons`\n // doesn't have anything (safari on ios, blackberry...)\n return true;\n } // `mouseup` event on a single left click has\n // `button` and `buttons` equal to 0\n\n\n if (event.type === 'mouseup' && event.button === 0 && event.buttons === 0) {\n return true;\n }\n\n if (event.button !== 0 || event.buttons !== 1) {\n // This is the reason we have those if else block above\n // if any special case we can catch and let it slide\n // we do it above, when get to here, this definitely\n // is-not-left-click\n return false;\n }\n\n return true;\n}\n/**\n * Finds a single DOM element matching `selector` within the optional\n * `context` of another DOM element (defaulting to `document`).\n *\n * @param {string} selector\n * A valid CSS selector, which will be passed to `querySelector`.\n *\n * @param {Element|String} [context=document]\n * A DOM element within which to query. Can also be a selector\n * string in which case the first matching element will be used\n * as context. If missing (or no element matches selector), falls\n * back to `document`.\n *\n * @return {Element|null}\n * The element that was found or null.\n */\n\nvar $ = createQuerier('querySelector');\n/**\n * Finds a all DOM elements matching `selector` within the optional\n * `context` of another DOM element (defaulting to `document`).\n *\n * @param {string} selector\n * A valid CSS selector, which will be passed to `querySelectorAll`.\n *\n * @param {Element|String} [context=document]\n * A DOM element within which to query. Can also be a selector\n * string in which case the first matching element will be used\n * as context. If missing (or no element matches selector), falls\n * back to `document`.\n *\n * @return {NodeList}\n * A element list of elements that were found. Will be empty if none\n * were found.\n *\n */\n\nvar $$ = createQuerier('querySelectorAll');\n\nvar Dom = /*#__PURE__*/Object.freeze({\n __proto__: null,\n isReal: isReal,\n isEl: isEl,\n isInFrame: isInFrame,\n createEl: createEl,\n textContent: textContent,\n prependTo: prependTo,\n hasClass: hasClass,\n addClass: addClass,\n removeClass: removeClass,\n toggleClass: toggleClass,\n setAttributes: setAttributes,\n getAttributes: getAttributes,\n getAttribute: getAttribute,\n setAttribute: setAttribute,\n removeAttribute: removeAttribute,\n blockTextSelection: blockTextSelection,\n unblockTextSelection: unblockTextSelection,\n getBoundingClientRect: getBoundingClientRect,\n findPosition: findPosition,\n getPointerPosition: getPointerPosition,\n isTextNode: isTextNode,\n emptyEl: emptyEl,\n normalizeContent: normalizeContent,\n appendContent: appendContent,\n insertContent: insertContent,\n isSingleLeftClick: isSingleLeftClick,\n $: $,\n $$: $$\n});\n\n/**\n * @file setup.js - Functions for setting up a player without\n * user interaction based on the data-setup `attribute` of the video tag.\n *\n * @module setup\n */\nvar _windowLoaded = false;\nvar videojs$1;\n/**\n * Set up any tags that have a data-setup `attribute` when the player is started.\n */\n\nvar autoSetup = function autoSetup() {\n if (videojs$1.options.autoSetup === false) {\n return;\n }\n\n var vids = Array.prototype.slice.call(document.getElementsByTagName('video'));\n var audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));\n var divs = Array.prototype.slice.call(document.getElementsByTagName('video-js'));\n var mediaEls = vids.concat(audios, divs); // Check if any media elements exist\n\n if (mediaEls && mediaEls.length > 0) {\n for (var i = 0, e = mediaEls.length; i < e; i++) {\n var mediaEl = mediaEls[i]; // Check if element exists, has getAttribute func.\n\n if (mediaEl && mediaEl.getAttribute) {\n // Make sure this player hasn't already been set up.\n if (mediaEl.player === undefined) {\n var options = mediaEl.getAttribute('data-setup'); // Check if data-setup attr exists.\n // We only auto-setup if they've added the data-setup attr.\n\n if (options !== null) {\n // Create new video.js instance.\n videojs$1(mediaEl);\n }\n } // If getAttribute isn't defined, we need to wait for the DOM.\n\n } else {\n autoSetupTimeout(1);\n break;\n }\n } // No videos were found, so keep looping unless page is finished loading.\n\n } else if (!_windowLoaded) {\n autoSetupTimeout(1);\n }\n};\n/**\n * Wait until the page is loaded before running autoSetup. This will be called in\n * autoSetup if `hasLoaded` returns false.\n *\n * @param {number} wait\n * How long to wait in ms\n *\n * @param {module:videojs} [vjs]\n * The videojs library function\n */\n\n\nfunction autoSetupTimeout(wait, vjs) {\n // Protect against breakage in non-browser environments\n if (!isReal()) {\n return;\n }\n\n if (vjs) {\n videojs$1 = vjs;\n }\n\n window.setTimeout(autoSetup, wait);\n}\n/**\n * Used to set the internal tracking of window loaded state to true.\n *\n * @private\n */\n\n\nfunction setWindowLoaded() {\n _windowLoaded = true;\n window.removeEventListener('load', setWindowLoaded);\n}\n\nif (isReal()) {\n if (document.readyState === 'complete') {\n setWindowLoaded();\n } else {\n /**\n * Listen for the load event on window, and set _windowLoaded to true.\n *\n * We use a standard event listener here to avoid incrementing the GUID\n * before any players are created.\n *\n * @listens load\n */\n window.addEventListener('load', setWindowLoaded);\n }\n}\n\n/**\n * @file stylesheet.js\n * @module stylesheet\n */\n/**\n * Create a DOM syle element given a className for it.\n *\n * @param {string} className\n * The className to add to the created style element.\n *\n * @return {Element}\n * The element that was created.\n */\n\nvar createStyleElement = function createStyleElement(className) {\n var style = document.createElement('style');\n style.className = className;\n return style;\n};\n/**\n * Add text to a DOM element.\n *\n * @param {Element} el\n * The Element to add text content to.\n *\n * @param {string} content\n * The text to add to the element.\n */\n\nvar setTextContent = function setTextContent(el, content) {\n if (el.styleSheet) {\n el.styleSheet.cssText = content;\n } else {\n el.textContent = content;\n }\n};\n\n/**\n * @file guid.js\n * @module guid\n */\n// Default value for GUIDs. This allows us to reset the GUID counter in tests.\n//\n// The initial GUID is 3 because some users have come to rely on the first\n// default player ID ending up as `vjs_video_3`.\n//\n// See: https://github.com/videojs/video.js/pull/6216\nvar _initialGuid = 3;\n/**\n * Unique ID for an element or function\n *\n * @type {Number}\n */\n\nvar _guid = _initialGuid;\n/**\n * Get a unique auto-incrementing ID by number that has not been returned before.\n *\n * @return {number}\n * A new unique ID.\n */\n\nfunction newGUID() {\n return _guid++;\n}\n\n/**\n * @file dom-data.js\n * @module dom-data\n */\nvar FakeWeakMap;\n\nif (!window.WeakMap) {\n FakeWeakMap = /*#__PURE__*/function () {\n function FakeWeakMap() {\n this.vdata = 'vdata' + Math.floor(window.performance && window.performance.now() || Date.now());\n this.data = {};\n }\n\n var _proto = FakeWeakMap.prototype;\n\n _proto.set = function set(key, value) {\n var access = key[this.vdata] || newGUID();\n\n if (!key[this.vdata]) {\n key[this.vdata] = access;\n }\n\n this.data[access] = value;\n return this;\n };\n\n _proto.get = function get(key) {\n var access = key[this.vdata]; // we have data, return it\n\n if (access) {\n return this.data[access];\n } // we don't have data, return nothing.\n // return undefined explicitly as that's the contract for this method\n\n\n log$1('We have no data for this element', key);\n return undefined;\n };\n\n _proto.has = function has(key) {\n var access = key[this.vdata];\n return access in this.data;\n };\n\n _proto[\"delete\"] = function _delete(key) {\n var access = key[this.vdata];\n\n if (access) {\n delete this.data[access];\n delete key[this.vdata];\n }\n };\n\n return FakeWeakMap;\n }();\n}\n/**\n * Element Data Store.\n *\n * Allows for binding data to an element without putting it directly on the\n * element. Ex. Event listeners are stored here.\n * (also from jsninja.com, slightly modified and updated for closure compiler)\n *\n * @type {Object}\n * @private\n */\n\n\nvar DomData = window.WeakMap ? new WeakMap() : new FakeWeakMap();\n\n/**\n * @file events.js. An Event System (John Resig - Secrets of a JS Ninja http://jsninja.com/)\n * (Original book version wasn't completely usable, so fixed some things and made Closure Compiler compatible)\n * This should work very similarly to jQuery's events, however it's based off the book version which isn't as\n * robust as jquery's, so there's probably some differences.\n *\n * @file events.js\n * @module events\n */\n/**\n * Clean up the listener cache and dispatchers\n *\n * @param {Element|Object} elem\n * Element to clean up\n *\n * @param {string} type\n * Type of event to clean up\n */\n\nfunction _cleanUpEvents(elem, type) {\n if (!DomData.has(elem)) {\n return;\n }\n\n var data = DomData.get(elem); // Remove the events of a particular type if there are none left\n\n if (data.handlers[type].length === 0) {\n delete data.handlers[type]; // data.handlers[type] = null;\n // Setting to null was causing an error with data.handlers\n // Remove the meta-handler from the element\n\n if (elem.removeEventListener) {\n elem.removeEventListener(type, data.dispatcher, false);\n } else if (elem.detachEvent) {\n elem.detachEvent('on' + type, data.dispatcher);\n }\n } // Remove the events object if there are no types left\n\n\n if (Object.getOwnPropertyNames(data.handlers).length <= 0) {\n delete data.handlers;\n delete data.dispatcher;\n delete data.disabled;\n } // Finally remove the element data if there is no data left\n\n\n if (Object.getOwnPropertyNames(data).length === 0) {\n DomData[\"delete\"](elem);\n }\n}\n/**\n * Loops through an array of event types and calls the requested method for each type.\n *\n * @param {Function} fn\n * The event method we want to use.\n *\n * @param {Element|Object} elem\n * Element or object to bind listeners to\n *\n * @param {string} type\n * Type of event to bind to.\n *\n * @param {EventTarget~EventListener} callback\n * Event listener.\n */\n\n\nfunction _handleMultipleEvents(fn, elem, types, callback) {\n types.forEach(function (type) {\n // Call the event method for each one of the types\n fn(elem, type, callback);\n });\n}\n/**\n * Fix a native event to have standard property values\n *\n * @param {Object} event\n * Event object to fix.\n *\n * @return {Object}\n * Fixed event object.\n */\n\n\nfunction fixEvent(event) {\n if (event.fixed_) {\n return event;\n }\n\n function returnTrue() {\n return true;\n }\n\n function returnFalse() {\n return false;\n } // Test if fixing up is needed\n // Used to check if !event.stopPropagation instead of isPropagationStopped\n // But native events return true for stopPropagation, but don't have\n // other expected methods like isPropagationStopped. Seems to be a problem\n // with the Javascript Ninja code. So we're just overriding all events now.\n\n\n if (!event || !event.isPropagationStopped || !event.isImmediatePropagationStopped) {\n var old = event || window.event;\n event = {}; // Clone the old object so that we can modify the values event = {};\n // IE8 Doesn't like when you mess with native event properties\n // Firefox returns false for event.hasOwnProperty('type') and other props\n // which makes copying more difficult.\n // TODO: Probably best to create a whitelist of event props\n\n for (var key in old) {\n // Safari 6.0.3 warns you if you try to copy deprecated layerX/Y\n // Chrome warns you if you try to copy deprecated keyboardEvent.keyLocation\n // and webkitMovementX/Y\n if (key !== 'layerX' && key !== 'layerY' && key !== 'keyLocation' && key !== 'webkitMovementX' && key !== 'webkitMovementY') {\n // Chrome 32+ warns if you try to copy deprecated returnValue, but\n // we still want to if preventDefault isn't supported (IE8).\n if (!(key === 'returnValue' && old.preventDefault)) {\n event[key] = old[key];\n }\n }\n } // The event occurred on this element\n\n\n if (!event.target) {\n event.target = event.srcElement || document;\n } // Handle which other element the event is related to\n\n\n if (!event.relatedTarget) {\n event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;\n } // Stop the default browser action\n\n\n event.preventDefault = function () {\n if (old.preventDefault) {\n old.preventDefault();\n }\n\n event.returnValue = false;\n old.returnValue = false;\n event.defaultPrevented = true;\n };\n\n event.defaultPrevented = false; // Stop the event from bubbling\n\n event.stopPropagation = function () {\n if (old.stopPropagation) {\n old.stopPropagation();\n }\n\n event.cancelBubble = true;\n old.cancelBubble = true;\n event.isPropagationStopped = returnTrue;\n };\n\n event.isPropagationStopped = returnFalse; // Stop the event from bubbling and executing other handlers\n\n event.stopImmediatePropagation = function () {\n if (old.stopImmediatePropagation) {\n old.stopImmediatePropagation();\n }\n\n event.isImmediatePropagationStopped = returnTrue;\n event.stopPropagation();\n };\n\n event.isImmediatePropagationStopped = returnFalse; // Handle mouse position\n\n if (event.clientX !== null && event.clientX !== undefined) {\n var doc = document.documentElement;\n var body = document.body;\n event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);\n event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);\n } // Handle key presses\n\n\n event.which = event.charCode || event.keyCode; // Fix button for mouse clicks:\n // 0 == left; 1 == middle; 2 == right\n\n if (event.button !== null && event.button !== undefined) {\n // The following is disabled because it does not pass videojs-standard\n // and... yikes.\n\n /* eslint-disable */\n event.button = event.button & 1 ? 0 : event.button & 4 ? 1 : event.button & 2 ? 2 : 0;\n /* eslint-enable */\n }\n }\n\n event.fixed_ = true; // Returns fixed-up instance\n\n return event;\n}\n/**\n * Whether passive event listeners are supported\n */\n\nvar _supportsPassive;\n\nvar supportsPassive = function supportsPassive() {\n if (typeof _supportsPassive !== 'boolean') {\n _supportsPassive = false;\n\n try {\n var opts = Object.defineProperty({}, 'passive', {\n get: function get() {\n _supportsPassive = true;\n }\n });\n window.addEventListener('test', null, opts);\n window.removeEventListener('test', null, opts);\n } catch (e) {// disregard\n }\n }\n\n return _supportsPassive;\n};\n/**\n * Touch events Chrome expects to be passive\n */\n\n\nvar passiveEvents = ['touchstart', 'touchmove'];\n/**\n * Add an event listener to element\n * It stores the handler function in a separate cache object\n * and adds a generic handler to the element's event,\n * along with a unique id (guid) to the element.\n *\n * @param {Element|Object} elem\n * Element or object to bind listeners to\n *\n * @param {string|string[]} type\n * Type of event to bind to.\n *\n * @param {EventTarget~EventListener} fn\n * Event listener.\n */\n\nfunction on(elem, type, fn) {\n if (Array.isArray(type)) {\n return _handleMultipleEvents(on, elem, type, fn);\n }\n\n if (!DomData.has(elem)) {\n DomData.set(elem, {});\n }\n\n var data = DomData.get(elem); // We need a place to store all our handler data\n\n if (!data.handlers) {\n data.handlers = {};\n }\n\n if (!data.handlers[type]) {\n data.handlers[type] = [];\n }\n\n if (!fn.guid) {\n fn.guid = newGUID();\n }\n\n data.handlers[type].push(fn);\n\n if (!data.dispatcher) {\n data.disabled = false;\n\n data.dispatcher = function (event, hash) {\n if (data.disabled) {\n return;\n }\n\n event = fixEvent(event);\n var handlers = data.handlers[event.type];\n\n if (handlers) {\n // Copy handlers so if handlers are added/removed during the process it doesn't throw everything off.\n var handlersCopy = handlers.slice(0);\n\n for (var m = 0, n = handlersCopy.length; m < n; m++) {\n if (event.isImmediatePropagationStopped()) {\n break;\n } else {\n try {\n handlersCopy[m].call(elem, event, hash);\n } catch (e) {\n log$1.error(e);\n }\n }\n }\n }\n };\n }\n\n if (data.handlers[type].length === 1) {\n if (elem.addEventListener) {\n var options = false;\n\n if (supportsPassive() && passiveEvents.indexOf(type) > -1) {\n options = {\n passive: true\n };\n }\n\n elem.addEventListener(type, data.dispatcher, options);\n } else if (elem.attachEvent) {\n elem.attachEvent('on' + type, data.dispatcher);\n }\n }\n}\n/**\n * Removes event listeners from an element\n *\n * @param {Element|Object} elem\n * Object to remove listeners from.\n *\n * @param {string|string[]} [type]\n * Type of listener to remove. Don't include to remove all events from element.\n *\n * @param {EventTarget~EventListener} [fn]\n * Specific listener to remove. Don't include to remove listeners for an event\n * type.\n */\n\nfunction off(elem, type, fn) {\n // Don't want to add a cache object through getElData if not needed\n if (!DomData.has(elem)) {\n return;\n }\n\n var data = DomData.get(elem); // If no events exist, nothing to unbind\n\n if (!data.handlers) {\n return;\n }\n\n if (Array.isArray(type)) {\n return _handleMultipleEvents(off, elem, type, fn);\n } // Utility function\n\n\n var removeType = function removeType(el, t) {\n data.handlers[t] = [];\n\n _cleanUpEvents(el, t);\n }; // Are we removing all bound events?\n\n\n if (type === undefined) {\n for (var t in data.handlers) {\n if (Object.prototype.hasOwnProperty.call(data.handlers || {}, t)) {\n removeType(elem, t);\n }\n }\n\n return;\n }\n\n var handlers = data.handlers[type]; // If no handlers exist, nothing to unbind\n\n if (!handlers) {\n return;\n } // If no listener was provided, remove all listeners for type\n\n\n if (!fn) {\n removeType(elem, type);\n return;\n } // We're only removing a single handler\n\n\n if (fn.guid) {\n for (var n = 0; n < handlers.length; n++) {\n if (handlers[n].guid === fn.guid) {\n handlers.splice(n--, 1);\n }\n }\n }\n\n _cleanUpEvents(elem, type);\n}\n/**\n * Trigger an event for an element\n *\n * @param {Element|Object} elem\n * Element to trigger an event on\n *\n * @param {EventTarget~Event|string} event\n * A string (the type) or an event object with a type attribute\n *\n * @param {Object} [hash]\n * data hash to pass along with the event\n *\n * @return {boolean|undefined}\n * Returns the opposite of `defaultPrevented` if default was\n * prevented. Otherwise, returns `undefined`\n */\n\nfunction trigger(elem, event, hash) {\n // Fetches element data and a reference to the parent (for bubbling).\n // Don't want to add a data object to cache for every parent,\n // so checking hasElData first.\n var elemData = DomData.has(elem) ? DomData.get(elem) : {};\n var parent = elem.parentNode || elem.ownerDocument; // type = event.type || event,\n // handler;\n // If an event name was passed as a string, creates an event out of it\n\n if (typeof event === 'string') {\n event = {\n type: event,\n target: elem\n };\n } else if (!event.target) {\n event.target = elem;\n } // Normalizes the event properties.\n\n\n event = fixEvent(event); // If the passed element has a dispatcher, executes the established handlers.\n\n if (elemData.dispatcher) {\n elemData.dispatcher.call(elem, event, hash);\n } // Unless explicitly stopped or the event does not bubble (e.g. media events)\n // recursively calls this function to bubble the event up the DOM.\n\n\n if (parent && !event.isPropagationStopped() && event.bubbles === true) {\n trigger.call(null, parent, event, hash); // If at the top of the DOM, triggers the default action unless disabled.\n } else if (!parent && !event.defaultPrevented && event.target && event.target[event.type]) {\n if (!DomData.has(event.target)) {\n DomData.set(event.target, {});\n }\n\n var targetData = DomData.get(event.target); // Checks if the target has a default action for this event.\n\n if (event.target[event.type]) {\n // Temporarily disables event dispatching on the target as we have already executed the handler.\n targetData.disabled = true; // Executes the default action.\n\n if (typeof event.target[event.type] === 'function') {\n event.target[event.type]();\n } // Re-enables event dispatching.\n\n\n targetData.disabled = false;\n }\n } // Inform the triggerer if the default was prevented by returning false\n\n\n return !event.defaultPrevented;\n}\n/**\n * Trigger a listener only once for an event.\n *\n * @param {Element|Object} elem\n * Element or object to bind to.\n *\n * @param {string|string[]} type\n * Name/type of event\n *\n * @param {Event~EventListener} fn\n * Event listener function\n */\n\nfunction one(elem, type, fn) {\n if (Array.isArray(type)) {\n return _handleMultipleEvents(one, elem, type, fn);\n }\n\n var func = function func() {\n off(elem, type, func);\n fn.apply(this, arguments);\n }; // copy the guid to the new function so it can removed using the original function's ID\n\n\n func.guid = fn.guid = fn.guid || newGUID();\n on(elem, type, func);\n}\n/**\n * Trigger a listener only once and then turn if off for all\n * configured events\n *\n * @param {Element|Object} elem\n * Element or object to bind to.\n *\n * @param {string|string[]} type\n * Name/type of event\n *\n * @param {Event~EventListener} fn\n * Event listener function\n */\n\nfunction any(elem, type, fn) {\n var func = function func() {\n off(elem, type, func);\n fn.apply(this, arguments);\n }; // copy the guid to the new function so it can removed using the original function's ID\n\n\n func.guid = fn.guid = fn.guid || newGUID(); // multiple ons, but one off for everything\n\n on(elem, type, func);\n}\n\nvar Events = /*#__PURE__*/Object.freeze({\n __proto__: null,\n fixEvent: fixEvent,\n on: on,\n off: off,\n trigger: trigger,\n one: one,\n any: any\n});\n\n/**\n * @file fn.js\n * @module fn\n */\nvar UPDATE_REFRESH_INTERVAL = 30;\n/**\n * Bind (a.k.a proxy or context). A simple method for changing the context of\n * a function.\n *\n * It also stores a unique id on the function so it can be easily removed from\n * events.\n *\n * @function\n * @param {Mixed} context\n * The object to bind as scope.\n *\n * @param {Function} fn\n * The function to be bound to a scope.\n *\n * @param {number} [uid]\n * An optional unique ID for the function to be set\n *\n * @return {Function}\n * The new function that will be bound into the context given\n */\n\nvar bind = function bind(context, fn, uid) {\n // Make sure the function has a unique ID\n if (!fn.guid) {\n fn.guid = newGUID();\n } // Create the new function that changes the context\n\n\n var bound = fn.bind(context); // Allow for the ability to individualize this function\n // Needed in the case where multiple objects might share the same prototype\n // IF both items add an event listener with the same function, then you try to remove just one\n // it will remove both because they both have the same guid.\n // when using this, you need to use the bind method when you remove the listener as well.\n // currently used in text tracks\n\n bound.guid = uid ? uid + '_' + fn.guid : fn.guid;\n return bound;\n};\n/**\n * Wraps the given function, `fn`, with a new function that only invokes `fn`\n * at most once per every `wait` milliseconds.\n *\n * @function\n * @param {Function} fn\n * The function to be throttled.\n *\n * @param {number} wait\n * The number of milliseconds by which to throttle.\n *\n * @return {Function}\n */\n\nvar throttle = function throttle(fn, wait) {\n var last = window.performance.now();\n\n var throttled = function throttled() {\n var now = window.performance.now();\n\n if (now - last >= wait) {\n fn.apply(void 0, arguments);\n last = now;\n }\n };\n\n return throttled;\n};\n/**\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked.\n *\n * Inspired by lodash and underscore implementations.\n *\n * @function\n * @param {Function} func\n * The function to wrap with debounce behavior.\n *\n * @param {number} wait\n * The number of milliseconds to wait after the last invocation.\n *\n * @param {boolean} [immediate]\n * Whether or not to invoke the function immediately upon creation.\n *\n * @param {Object} [context=window]\n * The \"context\" in which the debounced function should debounce. For\n * example, if this function should be tied to a Video.js player,\n * the player can be passed here. Alternatively, defaults to the\n * global `window` object.\n *\n * @return {Function}\n * A debounced function.\n */\n\nvar debounce = function debounce(func, wait, immediate, context) {\n if (context === void 0) {\n context = window;\n }\n\n var timeout;\n\n var cancel = function cancel() {\n context.clearTimeout(timeout);\n timeout = null;\n };\n /* eslint-disable consistent-this */\n\n\n var debounced = function debounced() {\n var self = this;\n var args = arguments;\n\n var _later = function later() {\n timeout = null;\n _later = null;\n\n if (!immediate) {\n func.apply(self, args);\n }\n };\n\n if (!timeout && immediate) {\n func.apply(self, args);\n }\n\n context.clearTimeout(timeout);\n timeout = context.setTimeout(_later, wait);\n };\n /* eslint-enable consistent-this */\n\n\n debounced.cancel = cancel;\n return debounced;\n};\n\n/**\n * @file src/js/event-target.js\n */\n/**\n * `EventTarget` is a class that can have the same API as the DOM `EventTarget`. It\n * adds shorthand functions that wrap around lengthy functions. For example:\n * the `on` function is a wrapper around `addEventListener`.\n *\n * @see [EventTarget Spec]{@link https://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget}\n * @class EventTarget\n */\n\nvar EventTarget$2 = function EventTarget() {};\n/**\n * A Custom DOM event.\n *\n * @typedef {Object} EventTarget~Event\n * @see [Properties]{@link https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent}\n */\n\n/**\n * All event listeners should follow the following format.\n *\n * @callback EventTarget~EventListener\n * @this {EventTarget}\n *\n * @param {EventTarget~Event} event\n * the event that triggered this function\n *\n * @param {Object} [hash]\n * hash of data sent during the event\n */\n\n/**\n * An object containing event names as keys and booleans as values.\n *\n * > NOTE: If an event name is set to a true value here {@link EventTarget#trigger}\n * will have extra functionality. See that function for more information.\n *\n * @property EventTarget.prototype.allowedEvents_\n * @private\n */\n\n\nEventTarget$2.prototype.allowedEvents_ = {};\n/**\n * Adds an `event listener` to an instance of an `EventTarget`. An `event listener` is a\n * function that will get called when an event with a certain name gets triggered.\n *\n * @param {string|string[]} type\n * An event name or an array of event names.\n *\n * @param {EventTarget~EventListener} fn\n * The function to call with `EventTarget`s\n */\n\nEventTarget$2.prototype.on = function (type, fn) {\n // Remove the addEventListener alias before calling Events.on\n // so we don't get into an infinite type loop\n var ael = this.addEventListener;\n\n this.addEventListener = function () {};\n\n on(this, type, fn);\n this.addEventListener = ael;\n};\n/**\n * An alias of {@link EventTarget#on}. Allows `EventTarget` to mimic\n * the standard DOM API.\n *\n * @function\n * @see {@link EventTarget#on}\n */\n\n\nEventTarget$2.prototype.addEventListener = EventTarget$2.prototype.on;\n/**\n * Removes an `event listener` for a specific event from an instance of `EventTarget`.\n * This makes it so that the `event listener` will no longer get called when the\n * named event happens.\n *\n * @param {string|string[]} type\n * An event name or an array of event names.\n *\n * @param {EventTarget~EventListener} fn\n * The function to remove.\n */\n\nEventTarget$2.prototype.off = function (type, fn) {\n off(this, type, fn);\n};\n/**\n * An alias of {@link EventTarget#off}. Allows `EventTarget` to mimic\n * the standard DOM API.\n *\n * @function\n * @see {@link EventTarget#off}\n */\n\n\nEventTarget$2.prototype.removeEventListener = EventTarget$2.prototype.off;\n/**\n * This function will add an `event listener` that gets triggered only once. After the\n * first trigger it will get removed. This is like adding an `event listener`\n * with {@link EventTarget#on} that calls {@link EventTarget#off} on itself.\n *\n * @param {string|string[]} type\n * An event name or an array of event names.\n *\n * @param {EventTarget~EventListener} fn\n * The function to be called once for each event name.\n */\n\nEventTarget$2.prototype.one = function (type, fn) {\n // Remove the addEventListener aliasing Events.on\n // so we don't get into an infinite type loop\n var ael = this.addEventListener;\n\n this.addEventListener = function () {};\n\n one(this, type, fn);\n this.addEventListener = ael;\n};\n\nEventTarget$2.prototype.any = function (type, fn) {\n // Remove the addEventListener aliasing Events.on\n // so we don't get into an infinite type loop\n var ael = this.addEventListener;\n\n this.addEventListener = function () {};\n\n any(this, type, fn);\n this.addEventListener = ael;\n};\n/**\n * This function causes an event to happen. This will then cause any `event listeners`\n * that are waiting for that event, to get called. If there are no `event listeners`\n * for an event then nothing will happen.\n *\n * If the name of the `Event` that is being triggered is in `EventTarget.allowedEvents_`.\n * Trigger will also call the `on` + `uppercaseEventName` function.\n *\n * Example:\n * 'click' is in `EventTarget.allowedEvents_`, so, trigger will attempt to call\n * `onClick` if it exists.\n *\n * @param {string|EventTarget~Event|Object} event\n * The name of the event, an `Event`, or an object with a key of type set to\n * an event name.\n */\n\n\nEventTarget$2.prototype.trigger = function (event) {\n var type = event.type || event; // deprecation\n // In a future version we should default target to `this`\n // similar to how we default the target to `elem` in\n // `Events.trigger`. Right now the default `target` will be\n // `document` due to the `Event.fixEvent` call.\n\n if (typeof event === 'string') {\n event = {\n type: type\n };\n }\n\n event = fixEvent(event);\n\n if (this.allowedEvents_[type] && this['on' + type]) {\n this['on' + type](event);\n }\n\n trigger(this, event);\n};\n/**\n * An alias of {@link EventTarget#trigger}. Allows `EventTarget` to mimic\n * the standard DOM API.\n *\n * @function\n * @see {@link EventTarget#trigger}\n */\n\n\nEventTarget$2.prototype.dispatchEvent = EventTarget$2.prototype.trigger;\nvar EVENT_MAP;\n\nEventTarget$2.prototype.queueTrigger = function (event) {\n var _this = this;\n\n // only set up EVENT_MAP if it'll be used\n if (!EVENT_MAP) {\n EVENT_MAP = new Map();\n }\n\n var type = event.type || event;\n var map = EVENT_MAP.get(this);\n\n if (!map) {\n map = new Map();\n EVENT_MAP.set(this, map);\n }\n\n var oldTimeout = map.get(type);\n map[\"delete\"](type);\n window.clearTimeout(oldTimeout);\n var timeout = window.setTimeout(function () {\n // if we cleared out all timeouts for the current target, delete its map\n if (map.size === 0) {\n map = null;\n EVENT_MAP[\"delete\"](_this);\n }\n\n _this.trigger(event);\n }, 0);\n map.set(type, timeout);\n};\n\n/**\n * @file mixins/evented.js\n * @module evented\n */\n\nvar objName = function objName(obj) {\n if (typeof obj.name === 'function') {\n return obj.name();\n }\n\n if (typeof obj.name === 'string') {\n return obj.name;\n }\n\n if (obj.name_) {\n return obj.name_;\n }\n\n if (obj.constructor && obj.constructor.name) {\n return obj.constructor.name;\n }\n\n return typeof obj;\n};\n/**\n * Returns whether or not an object has had the evented mixin applied.\n *\n * @param {Object} object\n * An object to test.\n *\n * @return {boolean}\n * Whether or not the object appears to be evented.\n */\n\n\nvar isEvented = function isEvented(object) {\n return object instanceof EventTarget$2 || !!object.eventBusEl_ && ['on', 'one', 'off', 'trigger'].every(function (k) {\n return typeof object[k] === 'function';\n });\n};\n/**\n * Adds a callback to run after the evented mixin applied.\n *\n * @param {Object} object\n * An object to Add\n * @param {Function} callback\n * The callback to run.\n */\n\n\nvar addEventedCallback = function addEventedCallback(target, callback) {\n if (isEvented(target)) {\n callback();\n } else {\n if (!target.eventedCallbacks) {\n target.eventedCallbacks = [];\n }\n\n target.eventedCallbacks.push(callback);\n }\n};\n/**\n * Whether a value is a valid event type - non-empty string or array.\n *\n * @private\n * @param {string|Array} type\n * The type value to test.\n *\n * @return {boolean}\n * Whether or not the type is a valid event type.\n */\n\n\nvar isValidEventType = function isValidEventType(type) {\n return (// The regex here verifies that the `type` contains at least one non-\n // whitespace character.\n typeof type === 'string' && /\\S/.test(type) || Array.isArray(type) && !!type.length\n );\n};\n/**\n * Validates a value to determine if it is a valid event target. Throws if not.\n *\n * @private\n * @throws {Error}\n * If the target does not appear to be a valid event target.\n *\n * @param {Object} target\n * The object to test.\n *\n * @param {Object} obj\n * The evented object we are validating for\n *\n * @param {string} fnName\n * The name of the evented mixin function that called this.\n */\n\n\nvar validateTarget = function validateTarget(target, obj, fnName) {\n if (!target || !target.nodeName && !isEvented(target)) {\n throw new Error(\"Invalid target for \" + objName(obj) + \"#\" + fnName + \"; must be a DOM node or evented object.\");\n }\n};\n/**\n * Validates a value to determine if it is a valid event target. Throws if not.\n *\n * @private\n * @throws {Error}\n * If the type does not appear to be a valid event type.\n *\n * @param {string|Array} type\n * The type to test.\n *\n * @param {Object} obj\n* The evented object we are validating for\n *\n * @param {string} fnName\n * The name of the evented mixin function that called this.\n */\n\n\nvar validateEventType = function validateEventType(type, obj, fnName) {\n if (!isValidEventType(type)) {\n throw new Error(\"Invalid event type for \" + objName(obj) + \"#\" + fnName + \"; must be a non-empty string or array.\");\n }\n};\n/**\n * Validates a value to determine if it is a valid listener. Throws if not.\n *\n * @private\n * @throws {Error}\n * If the listener is not a function.\n *\n * @param {Function} listener\n * The listener to test.\n *\n * @param {Object} obj\n * The evented object we are validating for\n *\n * @param {string} fnName\n * The name of the evented mixin function that called this.\n */\n\n\nvar validateListener = function validateListener(listener, obj, fnName) {\n if (typeof listener !== 'function') {\n throw new Error(\"Invalid listener for \" + objName(obj) + \"#\" + fnName + \"; must be a function.\");\n }\n};\n/**\n * Takes an array of arguments given to `on()` or `one()`, validates them, and\n * normalizes them into an object.\n *\n * @private\n * @param {Object} self\n * The evented object on which `on()` or `one()` was called. This\n * object will be bound as the `this` value for the listener.\n *\n * @param {Array} args\n * An array of arguments passed to `on()` or `one()`.\n *\n * @param {string} fnName\n * The name of the evented mixin function that called this.\n *\n * @return {Object}\n * An object containing useful values for `on()` or `one()` calls.\n */\n\n\nvar normalizeListenArgs = function normalizeListenArgs(self, args, fnName) {\n // If the number of arguments is less than 3, the target is always the\n // evented object itself.\n var isTargetingSelf = args.length < 3 || args[0] === self || args[0] === self.eventBusEl_;\n var target;\n var type;\n var listener;\n\n if (isTargetingSelf) {\n target = self.eventBusEl_; // Deal with cases where we got 3 arguments, but we are still listening to\n // the evented object itself.\n\n if (args.length >= 3) {\n args.shift();\n }\n\n type = args[0];\n listener = args[1];\n } else {\n target = args[0];\n type = args[1];\n listener = args[2];\n }\n\n validateTarget(target, self, fnName);\n validateEventType(type, self, fnName);\n validateListener(listener, self, fnName);\n listener = bind(self, listener);\n return {\n isTargetingSelf: isTargetingSelf,\n target: target,\n type: type,\n listener: listener\n };\n};\n/**\n * Adds the listener to the event type(s) on the target, normalizing for\n * the type of target.\n *\n * @private\n * @param {Element|Object} target\n * A DOM node or evented object.\n *\n * @param {string} method\n * The event binding method to use (\"on\" or \"one\").\n *\n * @param {string|Array} type\n * One or more event type(s).\n *\n * @param {Function} listener\n * A listener function.\n */\n\n\nvar listen = function listen(target, method, type, listener) {\n validateTarget(target, target, method);\n\n if (target.nodeName) {\n Events[method](target, type, listener);\n } else {\n target[method](type, listener);\n }\n};\n/**\n * Contains methods that provide event capabilities to an object which is passed\n * to {@link module:evented|evented}.\n *\n * @mixin EventedMixin\n */\n\n\nvar EventedMixin = {\n /**\n * Add a listener to an event (or events) on this object or another evented\n * object.\n *\n * @param {string|Array|Element|Object} targetOrType\n * If this is a string or array, it represents the event type(s)\n * that will trigger the listener.\n *\n * Another evented object can be passed here instead, which will\n * cause the listener to listen for events on _that_ object.\n *\n * In either case, the listener's `this` value will be bound to\n * this object.\n *\n * @param {string|Array|Function} typeOrListener\n * If the first argument was a string or array, this should be the\n * listener function. Otherwise, this is a string or array of event\n * type(s).\n *\n * @param {Function} [listener]\n * If the first argument was another evented object, this will be\n * the listener function.\n */\n on: function on() {\n var _this = this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n var _normalizeListenArgs = normalizeListenArgs(this, args, 'on'),\n isTargetingSelf = _normalizeListenArgs.isTargetingSelf,\n target = _normalizeListenArgs.target,\n type = _normalizeListenArgs.type,\n listener = _normalizeListenArgs.listener;\n\n listen(target, 'on', type, listener); // If this object is listening to another evented object.\n\n if (!isTargetingSelf) {\n // If this object is disposed, remove the listener.\n var removeListenerOnDispose = function removeListenerOnDispose() {\n return _this.off(target, type, listener);\n }; // Use the same function ID as the listener so we can remove it later it\n // using the ID of the original listener.\n\n\n removeListenerOnDispose.guid = listener.guid; // Add a listener to the target's dispose event as well. This ensures\n // that if the target is disposed BEFORE this object, we remove the\n // removal listener that was just added. Otherwise, we create a memory leak.\n\n var removeRemoverOnTargetDispose = function removeRemoverOnTargetDispose() {\n return _this.off('dispose', removeListenerOnDispose);\n }; // Use the same function ID as the listener so we can remove it later\n // it using the ID of the original listener.\n\n\n removeRemoverOnTargetDispose.guid = listener.guid;\n listen(this, 'on', 'dispose', removeListenerOnDispose);\n listen(target, 'on', 'dispose', removeRemoverOnTargetDispose);\n }\n },\n\n /**\n * Add a listener to an event (or events) on this object or another evented\n * object. The listener will be called once per event and then removed.\n *\n * @param {string|Array|Element|Object} targetOrType\n * If this is a string or array, it represents the event type(s)\n * that will trigger the listener.\n *\n * Another evented object can be passed here instead, which will\n * cause the listener to listen for events on _that_ object.\n *\n * In either case, the listener's `this` value will be bound to\n * this object.\n *\n * @param {string|Array|Function} typeOrListener\n * If the first argument was a string or array, this should be the\n * listener function. Otherwise, this is a string or array of event\n * type(s).\n *\n * @param {Function} [listener]\n * If the first argument was another evented object, this will be\n * the listener function.\n */\n one: function one() {\n var _this2 = this;\n\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n\n var _normalizeListenArgs2 = normalizeListenArgs(this, args, 'one'),\n isTargetingSelf = _normalizeListenArgs2.isTargetingSelf,\n target = _normalizeListenArgs2.target,\n type = _normalizeListenArgs2.type,\n listener = _normalizeListenArgs2.listener; // Targeting this evented object.\n\n\n if (isTargetingSelf) {\n listen(target, 'one', type, listener); // Targeting another evented object.\n } else {\n // TODO: This wrapper is incorrect! It should only\n // remove the wrapper for the event type that called it.\n // Instead all listners are removed on the first trigger!\n // see https://github.com/videojs/video.js/issues/5962\n var wrapper = function wrapper() {\n _this2.off(target, type, wrapper);\n\n for (var _len3 = arguments.length, largs = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n largs[_key3] = arguments[_key3];\n }\n\n listener.apply(null, largs);\n }; // Use the same function ID as the listener so we can remove it later\n // it using the ID of the original listener.\n\n\n wrapper.guid = listener.guid;\n listen(target, 'one', type, wrapper);\n }\n },\n\n /**\n * Add a listener to an event (or events) on this object or another evented\n * object. The listener will only be called once for the first event that is triggered\n * then removed.\n *\n * @param {string|Array|Element|Object} targetOrType\n * If this is a string or array, it represents the event type(s)\n * that will trigger the listener.\n *\n * Another evented object can be passed here instead, which will\n * cause the listener to listen for events on _that_ object.\n *\n * In either case, the listener's `this` value will be bound to\n * this object.\n *\n * @param {string|Array|Function} typeOrListener\n * If the first argument was a string or array, this should be the\n * listener function. Otherwise, this is a string or array of event\n * type(s).\n *\n * @param {Function} [listener]\n * If the first argument was another evented object, this will be\n * the listener function.\n */\n any: function any() {\n var _this3 = this;\n\n for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {\n args[_key4] = arguments[_key4];\n }\n\n var _normalizeListenArgs3 = normalizeListenArgs(this, args, 'any'),\n isTargetingSelf = _normalizeListenArgs3.isTargetingSelf,\n target = _normalizeListenArgs3.target,\n type = _normalizeListenArgs3.type,\n listener = _normalizeListenArgs3.listener; // Targeting this evented object.\n\n\n if (isTargetingSelf) {\n listen(target, 'any', type, listener); // Targeting another evented object.\n } else {\n var wrapper = function wrapper() {\n _this3.off(target, type, wrapper);\n\n for (var _len5 = arguments.length, largs = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {\n largs[_key5] = arguments[_key5];\n }\n\n listener.apply(null, largs);\n }; // Use the same function ID as the listener so we can remove it later\n // it using the ID of the original listener.\n\n\n wrapper.guid = listener.guid;\n listen(target, 'any', type, wrapper);\n }\n },\n\n /**\n * Removes listener(s) from event(s) on an evented object.\n *\n * @param {string|Array|Element|Object} [targetOrType]\n * If this is a string or array, it represents the event type(s).\n *\n * Another evented object can be passed here instead, in which case\n * ALL 3 arguments are _required_.\n *\n * @param {string|Array|Function} [typeOrListener]\n * If the first argument was a string or array, this may be the\n * listener function. Otherwise, this is a string or array of event\n * type(s).\n *\n * @param {Function} [listener]\n * If the first argument was another evented object, this will be\n * the listener function; otherwise, _all_ listeners bound to the\n * event type(s) will be removed.\n */\n off: function off$1(targetOrType, typeOrListener, listener) {\n // Targeting this evented object.\n if (!targetOrType || isValidEventType(targetOrType)) {\n off(this.eventBusEl_, targetOrType, typeOrListener); // Targeting another evented object.\n } else {\n var target = targetOrType;\n var type = typeOrListener; // Fail fast and in a meaningful way!\n\n validateTarget(target, this, 'off');\n validateEventType(type, this, 'off');\n validateListener(listener, this, 'off'); // Ensure there's at least a guid, even if the function hasn't been used\n\n listener = bind(this, listener); // Remove the dispose listener on this evented object, which was given\n // the same guid as the event listener in on().\n\n this.off('dispose', listener);\n\n if (target.nodeName) {\n off(target, type, listener);\n off(target, 'dispose', listener);\n } else if (isEvented(target)) {\n target.off(type, listener);\n target.off('dispose', listener);\n }\n }\n },\n\n /**\n * Fire an event on this evented object, causing its listeners to be called.\n *\n * @param {string|Object} event\n * An event type or an object with a type property.\n *\n * @param {Object} [hash]\n * An additional object to pass along to listeners.\n *\n * @return {boolean}\n * Whether or not the default behavior was prevented.\n */\n trigger: function trigger$1(event, hash) {\n validateTarget(this.eventBusEl_, this, 'trigger');\n var type = event && typeof event !== 'string' ? event.type : event;\n\n if (!isValidEventType(type)) {\n var error = \"Invalid event type for \" + objName(this) + \"#trigger; \" + 'must be a non-empty string or object with a type key that has a non-empty value.';\n\n if (event) {\n (this.log || log$1).error(error);\n } else {\n throw new Error(error);\n }\n }\n\n return trigger(this.eventBusEl_, event, hash);\n }\n};\n/**\n * Applies {@link module:evented~EventedMixin|EventedMixin} to a target object.\n *\n * @param {Object} target\n * The object to which to add event methods.\n *\n * @param {Object} [options={}]\n * Options for customizing the mixin behavior.\n *\n * @param {string} [options.eventBusKey]\n * By default, adds a `eventBusEl_` DOM element to the target object,\n * which is used as an event bus. If the target object already has a\n * DOM element that should be used, pass its key here.\n *\n * @return {Object}\n * The target object.\n */\n\nfunction evented(target, options) {\n if (options === void 0) {\n options = {};\n }\n\n var _options = options,\n eventBusKey = _options.eventBusKey; // Set or create the eventBusEl_.\n\n if (eventBusKey) {\n if (!target[eventBusKey].nodeName) {\n throw new Error(\"The eventBusKey \\\"\" + eventBusKey + \"\\\" does not refer to an element.\");\n }\n\n target.eventBusEl_ = target[eventBusKey];\n } else {\n target.eventBusEl_ = createEl('span', {\n className: 'vjs-event-bus'\n });\n }\n\n assign(target, EventedMixin);\n\n if (target.eventedCallbacks) {\n target.eventedCallbacks.forEach(function (callback) {\n callback();\n });\n } // When any evented object is disposed, it removes all its listeners.\n\n\n target.on('dispose', function () {\n target.off();\n [target, target.el_, target.eventBusEl_].forEach(function (val) {\n if (val && DomData.has(val)) {\n DomData[\"delete\"](val);\n }\n });\n window.setTimeout(function () {\n target.eventBusEl_ = null;\n }, 0);\n });\n return target;\n}\n\n/**\n * @file mixins/stateful.js\n * @module stateful\n */\n/**\n * Contains methods that provide statefulness to an object which is passed\n * to {@link module:stateful}.\n *\n * @mixin StatefulMixin\n */\n\nvar StatefulMixin = {\n /**\n * A hash containing arbitrary keys and values representing the state of\n * the object.\n *\n * @type {Object}\n */\n state: {},\n\n /**\n * Set the state of an object by mutating its\n * {@link module:stateful~StatefulMixin.state|state} object in place.\n *\n * @fires module:stateful~StatefulMixin#statechanged\n * @param {Object|Function} stateUpdates\n * A new set of properties to shallow-merge into the plugin state.\n * Can be a plain object or a function returning a plain object.\n *\n * @return {Object|undefined}\n * An object containing changes that occurred. If no changes\n * occurred, returns `undefined`.\n */\n setState: function setState(stateUpdates) {\n var _this = this;\n\n // Support providing the `stateUpdates` state as a function.\n if (typeof stateUpdates === 'function') {\n stateUpdates = stateUpdates();\n }\n\n var changes;\n each(stateUpdates, function (value, key) {\n // Record the change if the value is different from what's in the\n // current state.\n if (_this.state[key] !== value) {\n changes = changes || {};\n changes[key] = {\n from: _this.state[key],\n to: value\n };\n }\n\n _this.state[key] = value;\n }); // Only trigger \"statechange\" if there were changes AND we have a trigger\n // function. This allows us to not require that the target object be an\n // evented object.\n\n if (changes && isEvented(this)) {\n /**\n * An event triggered on an object that is both\n * {@link module:stateful|stateful} and {@link module:evented|evented}\n * indicating that its state has changed.\n *\n * @event module:stateful~StatefulMixin#statechanged\n * @type {Object}\n * @property {Object} changes\n * A hash containing the properties that were changed and\n * the values they were changed `from` and `to`.\n */\n this.trigger({\n changes: changes,\n type: 'statechanged'\n });\n }\n\n return changes;\n }\n};\n/**\n * Applies {@link module:stateful~StatefulMixin|StatefulMixin} to a target\n * object.\n *\n * If the target object is {@link module:evented|evented} and has a\n * `handleStateChanged` method, that method will be automatically bound to the\n * `statechanged` event on itself.\n *\n * @param {Object} target\n * The object to be made stateful.\n *\n * @param {Object} [defaultState]\n * A default set of properties to populate the newly-stateful object's\n * `state` property.\n *\n * @return {Object}\n * Returns the `target`.\n */\n\nfunction stateful(target, defaultState) {\n assign(target, StatefulMixin); // This happens after the mixing-in because we need to replace the `state`\n // added in that step.\n\n target.state = assign({}, target.state, defaultState); // Auto-bind the `handleStateChanged` method of the target object if it exists.\n\n if (typeof target.handleStateChanged === 'function' && isEvented(target)) {\n target.on('statechanged', target.handleStateChanged);\n }\n\n return target;\n}\n\n/**\n * @file string-cases.js\n * @module to-lower-case\n */\n\n/**\n * Lowercase the first letter of a string.\n *\n * @param {string} string\n * String to be lowercased\n *\n * @return {string}\n * The string with a lowercased first letter\n */\nvar toLowerCase = function toLowerCase(string) {\n if (typeof string !== 'string') {\n return string;\n }\n\n return string.replace(/./, function (w) {\n return w.toLowerCase();\n });\n};\n/**\n * Uppercase the first letter of a string.\n *\n * @param {string} string\n * String to be uppercased\n *\n * @return {string}\n * The string with an uppercased first letter\n */\n\nvar toTitleCase$1 = function toTitleCase(string) {\n if (typeof string !== 'string') {\n return string;\n }\n\n return string.replace(/./, function (w) {\n return w.toUpperCase();\n });\n};\n/**\n * Compares the TitleCase versions of the two strings for equality.\n *\n * @param {string} str1\n * The first string to compare\n *\n * @param {string} str2\n * The second string to compare\n *\n * @return {boolean}\n * Whether the TitleCase versions of the strings are equal\n */\n\nvar titleCaseEquals = function titleCaseEquals(str1, str2) {\n return toTitleCase$1(str1) === toTitleCase$1(str2);\n};\n\n/**\n * @file merge-options.js\n * @module merge-options\n */\n/**\n * Merge two objects recursively.\n *\n * Performs a deep merge like\n * {@link https://lodash.com/docs/4.17.10#merge|lodash.merge}, but only merges\n * plain objects (not arrays, elements, or anything else).\n *\n * Non-plain object values will be copied directly from the right-most\n * argument.\n *\n * @static\n * @param {Object[]} sources\n * One or more objects to merge into a new object.\n *\n * @return {Object}\n * A new object that is the merged result of all sources.\n */\n\nfunction mergeOptions$3() {\n var result = {};\n\n for (var _len = arguments.length, sources = new Array(_len), _key = 0; _key < _len; _key++) {\n sources[_key] = arguments[_key];\n }\n\n sources.forEach(function (source) {\n if (!source) {\n return;\n }\n\n each(source, function (value, key) {\n if (!isPlain(value)) {\n result[key] = value;\n return;\n }\n\n if (!isPlain(result[key])) {\n result[key] = {};\n }\n\n result[key] = mergeOptions$3(result[key], value);\n });\n });\n return result;\n}\n\nvar MapSham = /*#__PURE__*/function () {\n function MapSham() {\n this.map_ = {};\n }\n\n var _proto = MapSham.prototype;\n\n _proto.has = function has(key) {\n return key in this.map_;\n };\n\n _proto[\"delete\"] = function _delete(key) {\n var has = this.has(key);\n delete this.map_[key];\n return has;\n };\n\n _proto.set = function set(key, value) {\n this.map_[key] = value;\n return this;\n };\n\n _proto.forEach = function forEach(callback, thisArg) {\n for (var key in this.map_) {\n callback.call(thisArg, this.map_[key], key, this);\n }\n };\n\n return MapSham;\n}();\n\nvar Map$1 = window.Map ? window.Map : MapSham;\n\nvar SetSham = /*#__PURE__*/function () {\n function SetSham() {\n this.set_ = {};\n }\n\n var _proto = SetSham.prototype;\n\n _proto.has = function has(key) {\n return key in this.set_;\n };\n\n _proto[\"delete\"] = function _delete(key) {\n var has = this.has(key);\n delete this.set_[key];\n return has;\n };\n\n _proto.add = function add(key) {\n this.set_[key] = 1;\n return this;\n };\n\n _proto.forEach = function forEach(callback, thisArg) {\n for (var key in this.set_) {\n callback.call(thisArg, key, key, this);\n }\n };\n\n return SetSham;\n}();\n\nvar Set = window.Set ? window.Set : SetSham;\n\n/**\n * Player Component - Base class for all UI objects\n *\n * @file component.js\n */\n/**\n * Base class for all UI Components.\n * Components are UI objects which represent both a javascript object and an element\n * in the DOM. They can be children of other components, and can have\n * children themselves.\n *\n * Components can also use methods from {@link EventTarget}\n */\n\nvar Component$1 = /*#__PURE__*/function () {\n /**\n * A callback that is called when a component is ready. Does not have any\n * paramters and any callback value will be ignored.\n *\n * @callback Component~ReadyCallback\n * @this Component\n */\n\n /**\n * Creates an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key/value store of player options.\n *\n * @param {Object[]} [options.children]\n * An array of children objects to intialize this component with. Children objects have\n * a name property that will be used if more than one component of the same type needs to be\n * added.\n *\n * @param {Component~ReadyCallback} [ready]\n * Function that gets called when the `Component` is ready.\n */\n function Component(player, options, ready) {\n // The component might be the player itself and we can't pass `this` to super\n if (!player && this.play) {\n this.player_ = player = this; // eslint-disable-line\n } else {\n this.player_ = player;\n }\n\n this.isDisposed_ = false; // Hold the reference to the parent component via `addChild` method\n\n this.parentComponent_ = null; // Make a copy of prototype.options_ to protect against overriding defaults\n\n this.options_ = mergeOptions$3({}, this.options_); // Updated options with supplied options\n\n options = this.options_ = mergeOptions$3(this.options_, options); // Get ID from options or options element if one is supplied\n\n this.id_ = options.id || options.el && options.el.id; // If there was no ID from the options, generate one\n\n if (!this.id_) {\n // Don't require the player ID function in the case of mock players\n var id = player && player.id && player.id() || 'no_player';\n this.id_ = id + \"_component_\" + newGUID();\n }\n\n this.name_ = options.name || null; // Create element if one wasn't provided in options\n\n if (options.el) {\n this.el_ = options.el;\n } else if (options.createEl !== false) {\n this.el_ = this.createEl();\n } // if evented is anything except false, we want to mixin in evented\n\n\n if (options.evented !== false) {\n // Make this an evented object and use `el_`, if available, as its event bus\n evented(this, {\n eventBusKey: this.el_ ? 'el_' : null\n });\n this.handleLanguagechange = this.handleLanguagechange.bind(this);\n this.on(this.player_, 'languagechange', this.handleLanguagechange);\n }\n\n stateful(this, this.constructor.defaultState);\n this.children_ = [];\n this.childIndex_ = {};\n this.childNameIndex_ = {};\n this.setTimeoutIds_ = new Set();\n this.setIntervalIds_ = new Set();\n this.rafIds_ = new Set();\n this.namedRafs_ = new Map$1();\n this.clearingTimersOnDispose_ = false; // Add any child components in options\n\n if (options.initChildren !== false) {\n this.initChildren();\n } // Don't want to trigger ready here or it will go before init is actually\n // finished for all children that run this constructor\n\n\n this.ready(ready);\n\n if (options.reportTouchActivity !== false) {\n this.enableTouchActivity();\n }\n }\n /**\n * Dispose of the `Component` and all child components.\n *\n * @fires Component#dispose\n */\n\n\n var _proto = Component.prototype;\n\n _proto.dispose = function dispose() {\n // Bail out if the component has already been disposed.\n if (this.isDisposed_) {\n return;\n }\n\n if (this.readyQueue_) {\n this.readyQueue_.length = 0;\n }\n /**\n * Triggered when a `Component` is disposed.\n *\n * @event Component#dispose\n * @type {EventTarget~Event}\n *\n * @property {boolean} [bubbles=false]\n * set to false so that the dispose event does not\n * bubble up\n */\n\n\n this.trigger({\n type: 'dispose',\n bubbles: false\n });\n this.isDisposed_ = true; // Dispose all children.\n\n if (this.children_) {\n for (var i = this.children_.length - 1; i >= 0; i--) {\n if (this.children_[i].dispose) {\n this.children_[i].dispose();\n }\n }\n } // Delete child references\n\n\n this.children_ = null;\n this.childIndex_ = null;\n this.childNameIndex_ = null;\n this.parentComponent_ = null;\n\n if (this.el_) {\n // Remove element from DOM\n if (this.el_.parentNode) {\n this.el_.parentNode.removeChild(this.el_);\n }\n\n this.el_ = null;\n } // remove reference to the player after disposing of the element\n\n\n this.player_ = null;\n }\n /**\n * Determine whether or not this component has been disposed.\n *\n * @return {boolean}\n * If the component has been disposed, will be `true`. Otherwise, `false`.\n */\n ;\n\n _proto.isDisposed = function isDisposed() {\n return Boolean(this.isDisposed_);\n }\n /**\n * Return the {@link Player} that the `Component` has attached to.\n *\n * @return {Player}\n * The player that this `Component` has attached to.\n */\n ;\n\n _proto.player = function player() {\n return this.player_;\n }\n /**\n * Deep merge of options objects with new options.\n * > Note: When both `obj` and `options` contain properties whose values are objects.\n * The two properties get merged using {@link module:mergeOptions}\n *\n * @param {Object} obj\n * The object that contains new options.\n *\n * @return {Object}\n * A new object of `this.options_` and `obj` merged together.\n */\n ;\n\n _proto.options = function options(obj) {\n if (!obj) {\n return this.options_;\n }\n\n this.options_ = mergeOptions$3(this.options_, obj);\n return this.options_;\n }\n /**\n * Get the `Component`s DOM element\n *\n * @return {Element}\n * The DOM element for this `Component`.\n */\n ;\n\n _proto.el = function el() {\n return this.el_;\n }\n /**\n * Create the `Component`s DOM element.\n *\n * @param {string} [tagName]\n * Element's DOM node type. e.g. 'div'\n *\n * @param {Object} [properties]\n * An object of properties that should be set.\n *\n * @param {Object} [attributes]\n * An object of attributes that should be set.\n *\n * @return {Element}\n * The element that gets created.\n */\n ;\n\n _proto.createEl = function createEl$1(tagName, properties, attributes) {\n return createEl(tagName, properties, attributes);\n }\n /**\n * Localize a string given the string in english.\n *\n * If tokens are provided, it'll try and run a simple token replacement on the provided string.\n * The tokens it looks for look like `{1}` with the index being 1-indexed into the tokens array.\n *\n * If a `defaultValue` is provided, it'll use that over `string`,\n * if a value isn't found in provided language files.\n * This is useful if you want to have a descriptive key for token replacement\n * but have a succinct localized string and not require `en.json` to be included.\n *\n * Currently, it is used for the progress bar timing.\n * ```js\n * {\n * \"progress bar timing: currentTime={1} duration={2}\": \"{1} of {2}\"\n * }\n * ```\n * It is then used like so:\n * ```js\n * this.localize('progress bar timing: currentTime={1} duration{2}',\n * [this.player_.currentTime(), this.player_.duration()],\n * '{1} of {2}');\n * ```\n *\n * Which outputs something like: `01:23 of 24:56`.\n *\n *\n * @param {string} string\n * The string to localize and the key to lookup in the language files.\n * @param {string[]} [tokens]\n * If the current item has token replacements, provide the tokens here.\n * @param {string} [defaultValue]\n * Defaults to `string`. Can be a default value to use for token replacement\n * if the lookup key is needed to be separate.\n *\n * @return {string}\n * The localized string or if no localization exists the english string.\n */\n ;\n\n _proto.localize = function localize(string, tokens, defaultValue) {\n if (defaultValue === void 0) {\n defaultValue = string;\n }\n\n var code = this.player_.language && this.player_.language();\n var languages = this.player_.languages && this.player_.languages();\n var language = languages && languages[code];\n var primaryCode = code && code.split('-')[0];\n var primaryLang = languages && languages[primaryCode];\n var localizedString = defaultValue;\n\n if (language && language[string]) {\n localizedString = language[string];\n } else if (primaryLang && primaryLang[string]) {\n localizedString = primaryLang[string];\n }\n\n if (tokens) {\n localizedString = localizedString.replace(/\\{(\\d+)\\}/g, function (match, index) {\n var value = tokens[index - 1];\n var ret = value;\n\n if (typeof value === 'undefined') {\n ret = match;\n }\n\n return ret;\n });\n }\n\n return localizedString;\n }\n /**\n * Handles language change for the player in components. Should be overriden by sub-components.\n *\n * @abstract\n */\n ;\n\n _proto.handleLanguagechange = function handleLanguagechange() {}\n /**\n * Return the `Component`s DOM element. This is where children get inserted.\n * This will usually be the the same as the element returned in {@link Component#el}.\n *\n * @return {Element}\n * The content element for this `Component`.\n */\n ;\n\n _proto.contentEl = function contentEl() {\n return this.contentEl_ || this.el_;\n }\n /**\n * Get this `Component`s ID\n *\n * @return {string}\n * The id of this `Component`\n */\n ;\n\n _proto.id = function id() {\n return this.id_;\n }\n /**\n * Get the `Component`s name. The name gets used to reference the `Component`\n * and is set during registration.\n *\n * @return {string}\n * The name of this `Component`.\n */\n ;\n\n _proto.name = function name() {\n return this.name_;\n }\n /**\n * Get an array of all child components\n *\n * @return {Array}\n * The children\n */\n ;\n\n _proto.children = function children() {\n return this.children_;\n }\n /**\n * Returns the child `Component` with the given `id`.\n *\n * @param {string} id\n * The id of the child `Component` to get.\n *\n * @return {Component|undefined}\n * The child `Component` with the given `id` or undefined.\n */\n ;\n\n _proto.getChildById = function getChildById(id) {\n return this.childIndex_[id];\n }\n /**\n * Returns the child `Component` with the given `name`.\n *\n * @param {string} name\n * The name of the child `Component` to get.\n *\n * @return {Component|undefined}\n * The child `Component` with the given `name` or undefined.\n */\n ;\n\n _proto.getChild = function getChild(name) {\n if (!name) {\n return;\n }\n\n return this.childNameIndex_[name];\n }\n /**\n * Returns the descendant `Component` following the givent\n * descendant `names`. For instance ['foo', 'bar', 'baz'] would\n * try to get 'foo' on the current component, 'bar' on the 'foo'\n * component and 'baz' on the 'bar' component and return undefined\n * if any of those don't exist.\n *\n * @param {...string[]|...string} names\n * The name of the child `Component` to get.\n *\n * @return {Component|undefined}\n * The descendant `Component` following the given descendant\n * `names` or undefined.\n */\n ;\n\n _proto.getDescendant = function getDescendant() {\n for (var _len = arguments.length, names = new Array(_len), _key = 0; _key < _len; _key++) {\n names[_key] = arguments[_key];\n }\n\n // flatten array argument into the main array\n names = names.reduce(function (acc, n) {\n return acc.concat(n);\n }, []);\n var currentChild = this;\n\n for (var i = 0; i < names.length; i++) {\n currentChild = currentChild.getChild(names[i]);\n\n if (!currentChild || !currentChild.getChild) {\n return;\n }\n }\n\n return currentChild;\n }\n /**\n * Add a child `Component` inside the current `Component`.\n *\n *\n * @param {string|Component} child\n * The name or instance of a child to add.\n *\n * @param {Object} [options={}]\n * The key/value store of options that will get passed to children of\n * the child.\n *\n * @param {number} [index=this.children_.length]\n * The index to attempt to add a child into.\n *\n * @return {Component}\n * The `Component` that gets added as a child. When using a string the\n * `Component` will get created by this process.\n */\n ;\n\n _proto.addChild = function addChild(child, options, index) {\n if (options === void 0) {\n options = {};\n }\n\n if (index === void 0) {\n index = this.children_.length;\n }\n\n var component;\n var componentName; // If child is a string, create component with options\n\n if (typeof child === 'string') {\n componentName = toTitleCase$1(child);\n var componentClassName = options.componentClass || componentName; // Set name through options\n\n options.name = componentName; // Create a new object & element for this controls set\n // If there's no .player_, this is a player\n\n var ComponentClass = Component.getComponent(componentClassName);\n\n if (!ComponentClass) {\n throw new Error(\"Component \" + componentClassName + \" does not exist\");\n } // data stored directly on the videojs object may be\n // misidentified as a component to retain\n // backwards-compatibility with 4.x. check to make sure the\n // component class can be instantiated.\n\n\n if (typeof ComponentClass !== 'function') {\n return null;\n }\n\n component = new ComponentClass(this.player_ || this, options); // child is a component instance\n } else {\n component = child;\n }\n\n if (component.parentComponent_) {\n component.parentComponent_.removeChild(component);\n }\n\n this.children_.splice(index, 0, component);\n component.parentComponent_ = this;\n\n if (typeof component.id === 'function') {\n this.childIndex_[component.id()] = component;\n } // If a name wasn't used to create the component, check if we can use the\n // name function of the component\n\n\n componentName = componentName || component.name && toTitleCase$1(component.name());\n\n if (componentName) {\n this.childNameIndex_[componentName] = component;\n this.childNameIndex_[toLowerCase(componentName)] = component;\n } // Add the UI object's element to the container div (box)\n // Having an element is not required\n\n\n if (typeof component.el === 'function' && component.el()) {\n // If inserting before a component, insert before that component's element\n var refNode = null;\n\n if (this.children_[index + 1]) {\n // Most children are components, but the video tech is an HTML element\n if (this.children_[index + 1].el_) {\n refNode = this.children_[index + 1].el_;\n } else if (isEl(this.children_[index + 1])) {\n refNode = this.children_[index + 1];\n }\n }\n\n this.contentEl().insertBefore(component.el(), refNode);\n } // Return so it can stored on parent object if desired.\n\n\n return component;\n }\n /**\n * Remove a child `Component` from this `Component`s list of children. Also removes\n * the child `Component`s element from this `Component`s element.\n *\n * @param {Component} component\n * The child `Component` to remove.\n */\n ;\n\n _proto.removeChild = function removeChild(component) {\n if (typeof component === 'string') {\n component = this.getChild(component);\n }\n\n if (!component || !this.children_) {\n return;\n }\n\n var childFound = false;\n\n for (var i = this.children_.length - 1; i >= 0; i--) {\n if (this.children_[i] === component) {\n childFound = true;\n this.children_.splice(i, 1);\n break;\n }\n }\n\n if (!childFound) {\n return;\n }\n\n component.parentComponent_ = null;\n this.childIndex_[component.id()] = null;\n this.childNameIndex_[toTitleCase$1(component.name())] = null;\n this.childNameIndex_[toLowerCase(component.name())] = null;\n var compEl = component.el();\n\n if (compEl && compEl.parentNode === this.contentEl()) {\n this.contentEl().removeChild(component.el());\n }\n }\n /**\n * Add and initialize default child `Component`s based upon options.\n */\n ;\n\n _proto.initChildren = function initChildren() {\n var _this = this;\n\n var children = this.options_.children;\n\n if (children) {\n // `this` is `parent`\n var parentOptions = this.options_;\n\n var handleAdd = function handleAdd(child) {\n var name = child.name;\n var opts = child.opts; // Allow options for children to be set at the parent options\n // e.g. videojs(id, { controlBar: false });\n // instead of videojs(id, { children: { controlBar: false });\n\n if (parentOptions[name] !== undefined) {\n opts = parentOptions[name];\n } // Allow for disabling default components\n // e.g. options['children']['posterImage'] = false\n\n\n if (opts === false) {\n return;\n } // Allow options to be passed as a simple boolean if no configuration\n // is necessary.\n\n\n if (opts === true) {\n opts = {};\n } // We also want to pass the original player options\n // to each component as well so they don't need to\n // reach back into the player for options later.\n\n\n opts.playerOptions = _this.options_.playerOptions; // Create and add the child component.\n // Add a direct reference to the child by name on the parent instance.\n // If two of the same component are used, different names should be supplied\n // for each\n\n var newChild = _this.addChild(name, opts);\n\n if (newChild) {\n _this[name] = newChild;\n }\n }; // Allow for an array of children details to passed in the options\n\n\n var workingChildren;\n var Tech = Component.getComponent('Tech');\n\n if (Array.isArray(children)) {\n workingChildren = children;\n } else {\n workingChildren = Object.keys(children);\n }\n\n workingChildren // children that are in this.options_ but also in workingChildren would\n // give us extra children we do not want. So, we want to filter them out.\n .concat(Object.keys(this.options_).filter(function (child) {\n return !workingChildren.some(function (wchild) {\n if (typeof wchild === 'string') {\n return child === wchild;\n }\n\n return child === wchild.name;\n });\n })).map(function (child) {\n var name;\n var opts;\n\n if (typeof child === 'string') {\n name = child;\n opts = children[name] || _this.options_[name] || {};\n } else {\n name = child.name;\n opts = child;\n }\n\n return {\n name: name,\n opts: opts\n };\n }).filter(function (child) {\n // we have to make sure that child.name isn't in the techOrder since\n // techs are registerd as Components but can't aren't compatible\n // See https://github.com/videojs/video.js/issues/2772\n var c = Component.getComponent(child.opts.componentClass || toTitleCase$1(child.name));\n return c && !Tech.isTech(c);\n }).forEach(handleAdd);\n }\n }\n /**\n * Builds the default DOM class name. Should be overriden by sub-components.\n *\n * @return {string}\n * The DOM class name for this object.\n *\n * @abstract\n */\n ;\n\n _proto.buildCSSClass = function buildCSSClass() {\n // Child classes can include a function that does:\n // return 'CLASS NAME' + this._super();\n return '';\n }\n /**\n * Bind a listener to the component's ready state.\n * Different from event listeners in that if the ready event has already happened\n * it will trigger the function immediately.\n *\n * @return {Component}\n * Returns itself; method can be chained.\n */\n ;\n\n _proto.ready = function ready(fn, sync) {\n if (sync === void 0) {\n sync = false;\n }\n\n if (!fn) {\n return;\n }\n\n if (!this.isReady_) {\n this.readyQueue_ = this.readyQueue_ || [];\n this.readyQueue_.push(fn);\n return;\n }\n\n if (sync) {\n fn.call(this);\n } else {\n // Call the function asynchronously by default for consistency\n this.setTimeout(fn, 1);\n }\n }\n /**\n * Trigger all the ready listeners for this `Component`.\n *\n * @fires Component#ready\n */\n ;\n\n _proto.triggerReady = function triggerReady() {\n this.isReady_ = true; // Ensure ready is triggered asynchronously\n\n this.setTimeout(function () {\n var readyQueue = this.readyQueue_; // Reset Ready Queue\n\n this.readyQueue_ = [];\n\n if (readyQueue && readyQueue.length > 0) {\n readyQueue.forEach(function (fn) {\n fn.call(this);\n }, this);\n } // Allow for using event listeners also\n\n /**\n * Triggered when a `Component` is ready.\n *\n * @event Component#ready\n * @type {EventTarget~Event}\n */\n\n\n this.trigger('ready');\n }, 1);\n }\n /**\n * Find a single DOM element matching a `selector`. This can be within the `Component`s\n * `contentEl()` or another custom context.\n *\n * @param {string} selector\n * A valid CSS selector, which will be passed to `querySelector`.\n *\n * @param {Element|string} [context=this.contentEl()]\n * A DOM element within which to query. Can also be a selector string in\n * which case the first matching element will get used as context. If\n * missing `this.contentEl()` gets used. If `this.contentEl()` returns\n * nothing it falls back to `document`.\n *\n * @return {Element|null}\n * the dom element that was found, or null\n *\n * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)\n */\n ;\n\n _proto.$ = function $$1(selector, context) {\n return $(selector, context || this.contentEl());\n }\n /**\n * Finds all DOM element matching a `selector`. This can be within the `Component`s\n * `contentEl()` or another custom context.\n *\n * @param {string} selector\n * A valid CSS selector, which will be passed to `querySelectorAll`.\n *\n * @param {Element|string} [context=this.contentEl()]\n * A DOM element within which to query. Can also be a selector string in\n * which case the first matching element will get used as context. If\n * missing `this.contentEl()` gets used. If `this.contentEl()` returns\n * nothing it falls back to `document`.\n *\n * @return {NodeList}\n * a list of dom elements that were found\n *\n * @see [Information on CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors)\n */\n ;\n\n _proto.$$ = function $$$1(selector, context) {\n return $$(selector, context || this.contentEl());\n }\n /**\n * Check if a component's element has a CSS class name.\n *\n * @param {string} classToCheck\n * CSS class name to check.\n *\n * @return {boolean}\n * - True if the `Component` has the class.\n * - False if the `Component` does not have the class`\n */\n ;\n\n _proto.hasClass = function hasClass$1(classToCheck) {\n return hasClass(this.el_, classToCheck);\n }\n /**\n * Add a CSS class name to the `Component`s element.\n *\n * @param {string} classToAdd\n * CSS class name to add\n */\n ;\n\n _proto.addClass = function addClass$1(classToAdd) {\n addClass(this.el_, classToAdd);\n }\n /**\n * Remove a CSS class name from the `Component`s element.\n *\n * @param {string} classToRemove\n * CSS class name to remove\n */\n ;\n\n _proto.removeClass = function removeClass$1(classToRemove) {\n removeClass(this.el_, classToRemove);\n }\n /**\n * Add or remove a CSS class name from the component's element.\n * - `classToToggle` gets added when {@link Component#hasClass} would return false.\n * - `classToToggle` gets removed when {@link Component#hasClass} would return true.\n *\n * @param {string} classToToggle\n * The class to add or remove based on (@link Component#hasClass}\n *\n * @param {boolean|Dom~predicate} [predicate]\n * An {@link Dom~predicate} function or a boolean\n */\n ;\n\n _proto.toggleClass = function toggleClass$1(classToToggle, predicate) {\n toggleClass(this.el_, classToToggle, predicate);\n }\n /**\n * Show the `Component`s element if it is hidden by removing the\n * 'vjs-hidden' class name from it.\n */\n ;\n\n _proto.show = function show() {\n this.removeClass('vjs-hidden');\n }\n /**\n * Hide the `Component`s element if it is currently showing by adding the\n * 'vjs-hidden` class name to it.\n */\n ;\n\n _proto.hide = function hide() {\n this.addClass('vjs-hidden');\n }\n /**\n * Lock a `Component`s element in its visible state by adding the 'vjs-lock-showing'\n * class name to it. Used during fadeIn/fadeOut.\n *\n * @private\n */\n ;\n\n _proto.lockShowing = function lockShowing() {\n this.addClass('vjs-lock-showing');\n }\n /**\n * Unlock a `Component`s element from its visible state by removing the 'vjs-lock-showing'\n * class name from it. Used during fadeIn/fadeOut.\n *\n * @private\n */\n ;\n\n _proto.unlockShowing = function unlockShowing() {\n this.removeClass('vjs-lock-showing');\n }\n /**\n * Get the value of an attribute on the `Component`s element.\n *\n * @param {string} attribute\n * Name of the attribute to get the value from.\n *\n * @return {string|null}\n * - The value of the attribute that was asked for.\n * - Can be an empty string on some browsers if the attribute does not exist\n * or has no value\n * - Most browsers will return null if the attibute does not exist or has\n * no value.\n *\n * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute}\n */\n ;\n\n _proto.getAttribute = function getAttribute$1(attribute) {\n return getAttribute(this.el_, attribute);\n }\n /**\n * Set the value of an attribute on the `Component`'s element\n *\n * @param {string} attribute\n * Name of the attribute to set.\n *\n * @param {string} value\n * Value to set the attribute to.\n *\n * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute}\n */\n ;\n\n _proto.setAttribute = function setAttribute$1(attribute, value) {\n setAttribute(this.el_, attribute, value);\n }\n /**\n * Remove an attribute from the `Component`s element.\n *\n * @param {string} attribute\n * Name of the attribute to remove.\n *\n * @see [DOM API]{@link https://developer.mozilla.org/en-US/docs/Web/API/Element/removeAttribute}\n */\n ;\n\n _proto.removeAttribute = function removeAttribute$1(attribute) {\n removeAttribute(this.el_, attribute);\n }\n /**\n * Get or set the width of the component based upon the CSS styles.\n * See {@link Component#dimension} for more detailed information.\n *\n * @param {number|string} [num]\n * The width that you want to set postfixed with '%', 'px' or nothing.\n *\n * @param {boolean} [skipListeners]\n * Skip the componentresize event trigger\n *\n * @return {number|string}\n * The width when getting, zero if there is no width. Can be a string\n * postpixed with '%' or 'px'.\n */\n ;\n\n _proto.width = function width(num, skipListeners) {\n return this.dimension('width', num, skipListeners);\n }\n /**\n * Get or set the height of the component based upon the CSS styles.\n * See {@link Component#dimension} for more detailed information.\n *\n * @param {number|string} [num]\n * The height that you want to set postfixed with '%', 'px' or nothing.\n *\n * @param {boolean} [skipListeners]\n * Skip the componentresize event trigger\n *\n * @return {number|string}\n * The width when getting, zero if there is no width. Can be a string\n * postpixed with '%' or 'px'.\n */\n ;\n\n _proto.height = function height(num, skipListeners) {\n return this.dimension('height', num, skipListeners);\n }\n /**\n * Set both the width and height of the `Component` element at the same time.\n *\n * @param {number|string} width\n * Width to set the `Component`s element to.\n *\n * @param {number|string} height\n * Height to set the `Component`s element to.\n */\n ;\n\n _proto.dimensions = function dimensions(width, height) {\n // Skip componentresize listeners on width for optimization\n this.width(width, true);\n this.height(height);\n }\n /**\n * Get or set width or height of the `Component` element. This is the shared code\n * for the {@link Component#width} and {@link Component#height}.\n *\n * Things to know:\n * - If the width or height in an number this will return the number postfixed with 'px'.\n * - If the width/height is a percent this will return the percent postfixed with '%'\n * - Hidden elements have a width of 0 with `window.getComputedStyle`. This function\n * defaults to the `Component`s `style.width` and falls back to `window.getComputedStyle`.\n * See [this]{@link http://www.foliotek.com/devblog/getting-the-width-of-a-hidden-element-with-jquery-using-width/}\n * for more information\n * - If you want the computed style of the component, use {@link Component#currentWidth}\n * and {@link {Component#currentHeight}\n *\n * @fires Component#componentresize\n *\n * @param {string} widthOrHeight\n 8 'width' or 'height'\n *\n * @param {number|string} [num]\n 8 New dimension\n *\n * @param {boolean} [skipListeners]\n * Skip componentresize event trigger\n *\n * @return {number}\n * The dimension when getting or 0 if unset\n */\n ;\n\n _proto.dimension = function dimension(widthOrHeight, num, skipListeners) {\n if (num !== undefined) {\n // Set to zero if null or literally NaN (NaN !== NaN)\n if (num === null || num !== num) {\n num = 0;\n } // Check if using css width/height (% or px) and adjust\n\n\n if (('' + num).indexOf('%') !== -1 || ('' + num).indexOf('px') !== -1) {\n this.el_.style[widthOrHeight] = num;\n } else if (num === 'auto') {\n this.el_.style[widthOrHeight] = '';\n } else {\n this.el_.style[widthOrHeight] = num + 'px';\n } // skipListeners allows us to avoid triggering the resize event when setting both width and height\n\n\n if (!skipListeners) {\n /**\n * Triggered when a component is resized.\n *\n * @event Component#componentresize\n * @type {EventTarget~Event}\n */\n this.trigger('componentresize');\n }\n\n return;\n } // Not setting a value, so getting it\n // Make sure element exists\n\n\n if (!this.el_) {\n return 0;\n } // Get dimension value from style\n\n\n var val = this.el_.style[widthOrHeight];\n var pxIndex = val.indexOf('px');\n\n if (pxIndex !== -1) {\n // Return the pixel value with no 'px'\n return parseInt(val.slice(0, pxIndex), 10);\n } // No px so using % or no style was set, so falling back to offsetWidth/height\n // If component has display:none, offset will return 0\n // TODO: handle display:none and no dimension style using px\n\n\n return parseInt(this.el_['offset' + toTitleCase$1(widthOrHeight)], 10);\n }\n /**\n * Get the computed width or the height of the component's element.\n *\n * Uses `window.getComputedStyle`.\n *\n * @param {string} widthOrHeight\n * A string containing 'width' or 'height'. Whichever one you want to get.\n *\n * @return {number}\n * The dimension that gets asked for or 0 if nothing was set\n * for that dimension.\n */\n ;\n\n _proto.currentDimension = function currentDimension(widthOrHeight) {\n var computedWidthOrHeight = 0;\n\n if (widthOrHeight !== 'width' && widthOrHeight !== 'height') {\n throw new Error('currentDimension only accepts width or height value');\n }\n\n computedWidthOrHeight = computedStyle(this.el_, widthOrHeight); // remove 'px' from variable and parse as integer\n\n computedWidthOrHeight = parseFloat(computedWidthOrHeight); // if the computed value is still 0, it's possible that the browser is lying\n // and we want to check the offset values.\n // This code also runs wherever getComputedStyle doesn't exist.\n\n if (computedWidthOrHeight === 0 || isNaN(computedWidthOrHeight)) {\n var rule = \"offset\" + toTitleCase$1(widthOrHeight);\n computedWidthOrHeight = this.el_[rule];\n }\n\n return computedWidthOrHeight;\n }\n /**\n * An object that contains width and height values of the `Component`s\n * computed style. Uses `window.getComputedStyle`.\n *\n * @typedef {Object} Component~DimensionObject\n *\n * @property {number} width\n * The width of the `Component`s computed style.\n *\n * @property {number} height\n * The height of the `Component`s computed style.\n */\n\n /**\n * Get an object that contains computed width and height values of the\n * component's element.\n *\n * Uses `window.getComputedStyle`.\n *\n * @return {Component~DimensionObject}\n * The computed dimensions of the component's element.\n */\n ;\n\n _proto.currentDimensions = function currentDimensions() {\n return {\n width: this.currentDimension('width'),\n height: this.currentDimension('height')\n };\n }\n /**\n * Get the computed width of the component's element.\n *\n * Uses `window.getComputedStyle`.\n *\n * @return {number}\n * The computed width of the component's element.\n */\n ;\n\n _proto.currentWidth = function currentWidth() {\n return this.currentDimension('width');\n }\n /**\n * Get the computed height of the component's element.\n *\n * Uses `window.getComputedStyle`.\n *\n * @return {number}\n * The computed height of the component's element.\n */\n ;\n\n _proto.currentHeight = function currentHeight() {\n return this.currentDimension('height');\n }\n /**\n * Set the focus to this component\n */\n ;\n\n _proto.focus = function focus() {\n this.el_.focus();\n }\n /**\n * Remove the focus from this component\n */\n ;\n\n _proto.blur = function blur() {\n this.el_.blur();\n }\n /**\n * When this Component receives a `keydown` event which it does not process,\n * it passes the event to the Player for handling.\n *\n * @param {EventTarget~Event} event\n * The `keydown` event that caused this function to be called.\n */\n ;\n\n _proto.handleKeyDown = function handleKeyDown(event) {\n if (this.player_) {\n // We only stop propagation here because we want unhandled events to fall\n // back to the browser.\n event.stopPropagation();\n this.player_.handleKeyDown(event);\n }\n }\n /**\n * Many components used to have a `handleKeyPress` method, which was poorly\n * named because it listened to a `keydown` event. This method name now\n * delegates to `handleKeyDown`. This means anyone calling `handleKeyPress`\n * will not see their method calls stop working.\n *\n * @param {EventTarget~Event} event\n * The event that caused this function to be called.\n */\n ;\n\n _proto.handleKeyPress = function handleKeyPress(event) {\n this.handleKeyDown(event);\n }\n /**\n * Emit a 'tap' events when touch event support gets detected. This gets used to\n * support toggling the controls through a tap on the video. They get enabled\n * because every sub-component would have extra overhead otherwise.\n *\n * @private\n * @fires Component#tap\n * @listens Component#touchstart\n * @listens Component#touchmove\n * @listens Component#touchleave\n * @listens Component#touchcancel\n * @listens Component#touchend\n */\n ;\n\n _proto.emitTapEvents = function emitTapEvents() {\n // Track the start time so we can determine how long the touch lasted\n var touchStart = 0;\n var firstTouch = null; // Maximum movement allowed during a touch event to still be considered a tap\n // Other popular libs use anywhere from 2 (hammer.js) to 15,\n // so 10 seems like a nice, round number.\n\n var tapMovementThreshold = 10; // The maximum length a touch can be while still being considered a tap\n\n var touchTimeThreshold = 200;\n var couldBeTap;\n this.on('touchstart', function (event) {\n // If more than one finger, don't consider treating this as a click\n if (event.touches.length === 1) {\n // Copy pageX/pageY from the object\n firstTouch = {\n pageX: event.touches[0].pageX,\n pageY: event.touches[0].pageY\n }; // Record start time so we can detect a tap vs. \"touch and hold\"\n\n touchStart = window.performance.now(); // Reset couldBeTap tracking\n\n couldBeTap = true;\n }\n });\n this.on('touchmove', function (event) {\n // If more than one finger, don't consider treating this as a click\n if (event.touches.length > 1) {\n couldBeTap = false;\n } else if (firstTouch) {\n // Some devices will throw touchmoves for all but the slightest of taps.\n // So, if we moved only a small distance, this could still be a tap\n var xdiff = event.touches[0].pageX - firstTouch.pageX;\n var ydiff = event.touches[0].pageY - firstTouch.pageY;\n var touchDistance = Math.sqrt(xdiff * xdiff + ydiff * ydiff);\n\n if (touchDistance > tapMovementThreshold) {\n couldBeTap = false;\n }\n }\n });\n\n var noTap = function noTap() {\n couldBeTap = false;\n }; // TODO: Listen to the original target. http://youtu.be/DujfpXOKUp8?t=13m8s\n\n\n this.on('touchleave', noTap);\n this.on('touchcancel', noTap); // When the touch ends, measure how long it took and trigger the appropriate\n // event\n\n this.on('touchend', function (event) {\n firstTouch = null; // Proceed only if the touchmove/leave/cancel event didn't happen\n\n if (couldBeTap === true) {\n // Measure how long the touch lasted\n var touchTime = window.performance.now() - touchStart; // Make sure the touch was less than the threshold to be considered a tap\n\n if (touchTime < touchTimeThreshold) {\n // Don't let browser turn this into a click\n event.preventDefault();\n /**\n * Triggered when a `Component` is tapped.\n *\n * @event Component#tap\n * @type {EventTarget~Event}\n */\n\n this.trigger('tap'); // It may be good to copy the touchend event object and change the\n // type to tap, if the other event properties aren't exact after\n // Events.fixEvent runs (e.g. event.target)\n }\n }\n });\n }\n /**\n * This function reports user activity whenever touch events happen. This can get\n * turned off by any sub-components that wants touch events to act another way.\n *\n * Report user touch activity when touch events occur. User activity gets used to\n * determine when controls should show/hide. It is simple when it comes to mouse\n * events, because any mouse event should show the controls. So we capture mouse\n * events that bubble up to the player and report activity when that happens.\n * With touch events it isn't as easy as `touchstart` and `touchend` toggle player\n * controls. So touch events can't help us at the player level either.\n *\n * User activity gets checked asynchronously. So what could happen is a tap event\n * on the video turns the controls off. Then the `touchend` event bubbles up to\n * the player. Which, if it reported user activity, would turn the controls right\n * back on. We also don't want to completely block touch events from bubbling up.\n * Furthermore a `touchmove` event and anything other than a tap, should not turn\n * controls back on.\n *\n * @listens Component#touchstart\n * @listens Component#touchmove\n * @listens Component#touchend\n * @listens Component#touchcancel\n */\n ;\n\n _proto.enableTouchActivity = function enableTouchActivity() {\n // Don't continue if the root player doesn't support reporting user activity\n if (!this.player() || !this.player().reportUserActivity) {\n return;\n } // listener for reporting that the user is active\n\n\n var report = bind(this.player(), this.player().reportUserActivity);\n var touchHolding;\n this.on('touchstart', function () {\n report(); // For as long as the they are touching the device or have their mouse down,\n // we consider them active even if they're not moving their finger or mouse.\n // So we want to continue to update that they are active\n\n this.clearInterval(touchHolding); // report at the same interval as activityCheck\n\n touchHolding = this.setInterval(report, 250);\n });\n\n var touchEnd = function touchEnd(event) {\n report(); // stop the interval that maintains activity if the touch is holding\n\n this.clearInterval(touchHolding);\n };\n\n this.on('touchmove', report);\n this.on('touchend', touchEnd);\n this.on('touchcancel', touchEnd);\n }\n /**\n * A callback that has no parameters and is bound into `Component`s context.\n *\n * @callback Component~GenericCallback\n * @this Component\n */\n\n /**\n * Creates a function that runs after an `x` millisecond timeout. This function is a\n * wrapper around `window.setTimeout`. There are a few reasons to use this one\n * instead though:\n * 1. It gets cleared via {@link Component#clearTimeout} when\n * {@link Component#dispose} gets called.\n * 2. The function callback will gets turned into a {@link Component~GenericCallback}\n *\n * > Note: You can't use `window.clearTimeout` on the id returned by this function. This\n * will cause its dispose listener not to get cleaned up! Please use\n * {@link Component#clearTimeout} or {@link Component#dispose} instead.\n *\n * @param {Component~GenericCallback} fn\n * The function that will be run after `timeout`.\n *\n * @param {number} timeout\n * Timeout in milliseconds to delay before executing the specified function.\n *\n * @return {number}\n * Returns a timeout ID that gets used to identify the timeout. It can also\n * get used in {@link Component#clearTimeout} to clear the timeout that\n * was set.\n *\n * @listens Component#dispose\n * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setTimeout}\n */\n ;\n\n _proto.setTimeout = function setTimeout(fn, timeout) {\n var _this2 = this;\n\n // declare as variables so they are properly available in timeout function\n // eslint-disable-next-line\n var timeoutId;\n fn = bind(this, fn);\n this.clearTimersOnDispose_();\n timeoutId = window.setTimeout(function () {\n if (_this2.setTimeoutIds_.has(timeoutId)) {\n _this2.setTimeoutIds_[\"delete\"](timeoutId);\n }\n\n fn();\n }, timeout);\n this.setTimeoutIds_.add(timeoutId);\n return timeoutId;\n }\n /**\n * Clears a timeout that gets created via `window.setTimeout` or\n * {@link Component#setTimeout}. If you set a timeout via {@link Component#setTimeout}\n * use this function instead of `window.clearTimout`. If you don't your dispose\n * listener will not get cleaned up until {@link Component#dispose}!\n *\n * @param {number} timeoutId\n * The id of the timeout to clear. The return value of\n * {@link Component#setTimeout} or `window.setTimeout`.\n *\n * @return {number}\n * Returns the timeout id that was cleared.\n *\n * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearTimeout}\n */\n ;\n\n _proto.clearTimeout = function clearTimeout(timeoutId) {\n if (this.setTimeoutIds_.has(timeoutId)) {\n this.setTimeoutIds_[\"delete\"](timeoutId);\n window.clearTimeout(timeoutId);\n }\n\n return timeoutId;\n }\n /**\n * Creates a function that gets run every `x` milliseconds. This function is a wrapper\n * around `window.setInterval`. There are a few reasons to use this one instead though.\n * 1. It gets cleared via {@link Component#clearInterval} when\n * {@link Component#dispose} gets called.\n * 2. The function callback will be a {@link Component~GenericCallback}\n *\n * @param {Component~GenericCallback} fn\n * The function to run every `x` seconds.\n *\n * @param {number} interval\n * Execute the specified function every `x` milliseconds.\n *\n * @return {number}\n * Returns an id that can be used to identify the interval. It can also be be used in\n * {@link Component#clearInterval} to clear the interval.\n *\n * @listens Component#dispose\n * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval}\n */\n ;\n\n _proto.setInterval = function setInterval(fn, interval) {\n fn = bind(this, fn);\n this.clearTimersOnDispose_();\n var intervalId = window.setInterval(fn, interval);\n this.setIntervalIds_.add(intervalId);\n return intervalId;\n }\n /**\n * Clears an interval that gets created via `window.setInterval` or\n * {@link Component#setInterval}. If you set an inteval via {@link Component#setInterval}\n * use this function instead of `window.clearInterval`. If you don't your dispose\n * listener will not get cleaned up until {@link Component#dispose}!\n *\n * @param {number} intervalId\n * The id of the interval to clear. The return value of\n * {@link Component#setInterval} or `window.setInterval`.\n *\n * @return {number}\n * Returns the interval id that was cleared.\n *\n * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval}\n */\n ;\n\n _proto.clearInterval = function clearInterval(intervalId) {\n if (this.setIntervalIds_.has(intervalId)) {\n this.setIntervalIds_[\"delete\"](intervalId);\n window.clearInterval(intervalId);\n }\n\n return intervalId;\n }\n /**\n * Queues up a callback to be passed to requestAnimationFrame (rAF), but\n * with a few extra bonuses:\n *\n * - Supports browsers that do not support rAF by falling back to\n * {@link Component#setTimeout}.\n *\n * - The callback is turned into a {@link Component~GenericCallback} (i.e.\n * bound to the component).\n *\n * - Automatic cancellation of the rAF callback is handled if the component\n * is disposed before it is called.\n *\n * @param {Component~GenericCallback} fn\n * A function that will be bound to this component and executed just\n * before the browser's next repaint.\n *\n * @return {number}\n * Returns an rAF ID that gets used to identify the timeout. It can\n * also be used in {@link Component#cancelAnimationFrame} to cancel\n * the animation frame callback.\n *\n * @listens Component#dispose\n * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame}\n */\n ;\n\n _proto.requestAnimationFrame = function requestAnimationFrame(fn) {\n var _this3 = this;\n\n // Fall back to using a timer.\n if (!this.supportsRaf_) {\n return this.setTimeout(fn, 1000 / 60);\n }\n\n this.clearTimersOnDispose_(); // declare as variables so they are properly available in rAF function\n // eslint-disable-next-line\n\n var id;\n fn = bind(this, fn);\n id = window.requestAnimationFrame(function () {\n if (_this3.rafIds_.has(id)) {\n _this3.rafIds_[\"delete\"](id);\n }\n\n fn();\n });\n this.rafIds_.add(id);\n return id;\n }\n /**\n * Request an animation frame, but only one named animation\n * frame will be queued. Another will never be added until\n * the previous one finishes.\n *\n * @param {string} name\n * The name to give this requestAnimationFrame\n *\n * @param {Component~GenericCallback} fn\n * A function that will be bound to this component and executed just\n * before the browser's next repaint.\n */\n ;\n\n _proto.requestNamedAnimationFrame = function requestNamedAnimationFrame(name, fn) {\n var _this4 = this;\n\n if (this.namedRafs_.has(name)) {\n return;\n }\n\n this.clearTimersOnDispose_();\n fn = bind(this, fn);\n var id = this.requestAnimationFrame(function () {\n fn();\n\n if (_this4.namedRafs_.has(name)) {\n _this4.namedRafs_[\"delete\"](name);\n }\n });\n this.namedRafs_.set(name, id);\n return name;\n }\n /**\n * Cancels a current named animation frame if it exists.\n *\n * @param {string} name\n * The name of the requestAnimationFrame to cancel.\n */\n ;\n\n _proto.cancelNamedAnimationFrame = function cancelNamedAnimationFrame(name) {\n if (!this.namedRafs_.has(name)) {\n return;\n }\n\n this.cancelAnimationFrame(this.namedRafs_.get(name));\n this.namedRafs_[\"delete\"](name);\n }\n /**\n * Cancels a queued callback passed to {@link Component#requestAnimationFrame}\n * (rAF).\n *\n * If you queue an rAF callback via {@link Component#requestAnimationFrame},\n * use this function instead of `window.cancelAnimationFrame`. If you don't,\n * your dispose listener will not get cleaned up until {@link Component#dispose}!\n *\n * @param {number} id\n * The rAF ID to clear. The return value of {@link Component#requestAnimationFrame}.\n *\n * @return {number}\n * Returns the rAF ID that was cleared.\n *\n * @see [Similar to]{@link https://developer.mozilla.org/en-US/docs/Web/API/window/cancelAnimationFrame}\n */\n ;\n\n _proto.cancelAnimationFrame = function cancelAnimationFrame(id) {\n // Fall back to using a timer.\n if (!this.supportsRaf_) {\n return this.clearTimeout(id);\n }\n\n if (this.rafIds_.has(id)) {\n this.rafIds_[\"delete\"](id);\n window.cancelAnimationFrame(id);\n }\n\n return id;\n }\n /**\n * A function to setup `requestAnimationFrame`, `setTimeout`,\n * and `setInterval`, clearing on dispose.\n *\n * > Previously each timer added and removed dispose listeners on it's own.\n * For better performance it was decided to batch them all, and use `Set`s\n * to track outstanding timer ids.\n *\n * @private\n */\n ;\n\n _proto.clearTimersOnDispose_ = function clearTimersOnDispose_() {\n var _this5 = this;\n\n if (this.clearingTimersOnDispose_) {\n return;\n }\n\n this.clearingTimersOnDispose_ = true;\n this.one('dispose', function () {\n [['namedRafs_', 'cancelNamedAnimationFrame'], ['rafIds_', 'cancelAnimationFrame'], ['setTimeoutIds_', 'clearTimeout'], ['setIntervalIds_', 'clearInterval']].forEach(function (_ref) {\n var idName = _ref[0],\n cancelName = _ref[1];\n\n // for a `Set` key will actually be the value again\n // so forEach((val, val) =>` but for maps we want to use\n // the key.\n _this5[idName].forEach(function (val, key) {\n return _this5[cancelName](key);\n });\n });\n _this5.clearingTimersOnDispose_ = false;\n });\n }\n /**\n * Register a `Component` with `videojs` given the name and the component.\n *\n * > NOTE: {@link Tech}s should not be registered as a `Component`. {@link Tech}s\n * should be registered using {@link Tech.registerTech} or\n * {@link videojs:videojs.registerTech}.\n *\n * > NOTE: This function can also be seen on videojs as\n * {@link videojs:videojs.registerComponent}.\n *\n * @param {string} name\n * The name of the `Component` to register.\n *\n * @param {Component} ComponentToRegister\n * The `Component` class to register.\n *\n * @return {Component}\n * The `Component` that was registered.\n */\n ;\n\n Component.registerComponent = function registerComponent(name, ComponentToRegister) {\n if (typeof name !== 'string' || !name) {\n throw new Error(\"Illegal component name, \\\"\" + name + \"\\\"; must be a non-empty string.\");\n }\n\n var Tech = Component.getComponent('Tech'); // We need to make sure this check is only done if Tech has been registered.\n\n var isTech = Tech && Tech.isTech(ComponentToRegister);\n var isComp = Component === ComponentToRegister || Component.prototype.isPrototypeOf(ComponentToRegister.prototype);\n\n if (isTech || !isComp) {\n var reason;\n\n if (isTech) {\n reason = 'techs must be registered using Tech.registerTech()';\n } else {\n reason = 'must be a Component subclass';\n }\n\n throw new Error(\"Illegal component, \\\"\" + name + \"\\\"; \" + reason + \".\");\n }\n\n name = toTitleCase$1(name);\n\n if (!Component.components_) {\n Component.components_ = {};\n }\n\n var Player = Component.getComponent('Player');\n\n if (name === 'Player' && Player && Player.players) {\n var players = Player.players;\n var playerNames = Object.keys(players); // If we have players that were disposed, then their name will still be\n // in Players.players. So, we must loop through and verify that the value\n // for each item is not null. This allows registration of the Player component\n // after all players have been disposed or before any were created.\n\n if (players && playerNames.length > 0 && playerNames.map(function (pname) {\n return players[pname];\n }).every(Boolean)) {\n throw new Error('Can not register Player component after player has been created.');\n }\n }\n\n Component.components_[name] = ComponentToRegister;\n Component.components_[toLowerCase(name)] = ComponentToRegister;\n return ComponentToRegister;\n }\n /**\n * Get a `Component` based on the name it was registered with.\n *\n * @param {string} name\n * The Name of the component to get.\n *\n * @return {Component}\n * The `Component` that got registered under the given name.\n */\n ;\n\n Component.getComponent = function getComponent(name) {\n if (!name || !Component.components_) {\n return;\n }\n\n return Component.components_[name];\n };\n\n return Component;\n}();\n/**\n * Whether or not this component supports `requestAnimationFrame`.\n *\n * This is exposed primarily for testing purposes.\n *\n * @private\n * @type {Boolean}\n */\n\n\nComponent$1.prototype.supportsRaf_ = typeof window.requestAnimationFrame === 'function' && typeof window.cancelAnimationFrame === 'function';\nComponent$1.registerComponent('Component', Component$1);\n\n/**\n * @file time-ranges.js\n * @module time-ranges\n */\n/**\n * Returns the time for the specified index at the start or end\n * of a TimeRange object.\n *\n * @typedef {Function} TimeRangeIndex\n *\n * @param {number} [index=0]\n * The range number to return the time for.\n *\n * @return {number}\n * The time offset at the specified index.\n *\n * @deprecated The index argument must be provided.\n * In the future, leaving it out will throw an error.\n */\n\n/**\n * An object that contains ranges of time.\n *\n * @typedef {Object} TimeRange\n *\n * @property {number} length\n * The number of time ranges represented by this object.\n *\n * @property {module:time-ranges~TimeRangeIndex} start\n * Returns the time offset at which a specified time range begins.\n *\n * @property {module:time-ranges~TimeRangeIndex} end\n * Returns the time offset at which a specified time range ends.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges\n */\n\n/**\n * Check if any of the time ranges are over the maximum index.\n *\n * @private\n * @param {string} fnName\n * The function name to use for logging\n *\n * @param {number} index\n * The index to check\n *\n * @param {number} maxIndex\n * The maximum possible index\n *\n * @throws {Error} if the timeRanges provided are over the maxIndex\n */\n\nfunction rangeCheck(fnName, index, maxIndex) {\n if (typeof index !== 'number' || index < 0 || index > maxIndex) {\n throw new Error(\"Failed to execute '\" + fnName + \"' on 'TimeRanges': The index provided (\" + index + \") is non-numeric or out of bounds (0-\" + maxIndex + \").\");\n }\n}\n/**\n * Get the time for the specified index at the start or end\n * of a TimeRange object.\n *\n * @private\n * @param {string} fnName\n * The function name to use for logging\n *\n * @param {string} valueIndex\n * The property that should be used to get the time. should be\n * 'start' or 'end'\n *\n * @param {Array} ranges\n * An array of time ranges\n *\n * @param {Array} [rangeIndex=0]\n * The index to start the search at\n *\n * @return {number}\n * The time that offset at the specified index.\n *\n * @deprecated rangeIndex must be set to a value, in the future this will throw an error.\n * @throws {Error} if rangeIndex is more than the length of ranges\n */\n\n\nfunction getRange(fnName, valueIndex, ranges, rangeIndex) {\n rangeCheck(fnName, rangeIndex, ranges.length - 1);\n return ranges[rangeIndex][valueIndex];\n}\n/**\n * Create a time range object given ranges of time.\n *\n * @private\n * @param {Array} [ranges]\n * An array of time ranges.\n */\n\n\nfunction createTimeRangesObj(ranges) {\n var timeRangesObj;\n\n if (ranges === undefined || ranges.length === 0) {\n timeRangesObj = {\n length: 0,\n start: function start() {\n throw new Error('This TimeRanges object is empty');\n },\n end: function end() {\n throw new Error('This TimeRanges object is empty');\n }\n };\n } else {\n timeRangesObj = {\n length: ranges.length,\n start: getRange.bind(null, 'start', 0, ranges),\n end: getRange.bind(null, 'end', 1, ranges)\n };\n }\n\n if (window.Symbol && window.Symbol.iterator) {\n timeRangesObj[window.Symbol.iterator] = function () {\n return (ranges || []).values();\n };\n }\n\n return timeRangesObj;\n}\n/**\n * Create a `TimeRange` object which mimics an\n * {@link https://developer.mozilla.org/en-US/docs/Web/API/TimeRanges|HTML5 TimeRanges instance}.\n *\n * @param {number|Array[]} start\n * The start of a single range (a number) or an array of ranges (an\n * array of arrays of two numbers each).\n *\n * @param {number} end\n * The end of a single range. Cannot be used with the array form of\n * the `start` argument.\n */\n\n\nfunction createTimeRanges(start, end) {\n if (Array.isArray(start)) {\n return createTimeRangesObj(start);\n } else if (start === undefined || end === undefined) {\n return createTimeRangesObj();\n }\n\n return createTimeRangesObj([[start, end]]);\n}\n\n/**\n * @file buffer.js\n * @module buffer\n */\n/**\n * Compute the percentage of the media that has been buffered.\n *\n * @param {TimeRange} buffered\n * The current `TimeRange` object representing buffered time ranges\n *\n * @param {number} duration\n * Total duration of the media\n *\n * @return {number}\n * Percent buffered of the total duration in decimal form.\n */\n\nfunction bufferedPercent(buffered, duration) {\n var bufferedDuration = 0;\n var start;\n var end;\n\n if (!duration) {\n return 0;\n }\n\n if (!buffered || !buffered.length) {\n buffered = createTimeRanges(0, 0);\n }\n\n for (var i = 0; i < buffered.length; i++) {\n start = buffered.start(i);\n end = buffered.end(i); // buffered end can be bigger than duration by a very small fraction\n\n if (end > duration) {\n end = duration;\n }\n\n bufferedDuration += end - start;\n }\n\n return bufferedDuration / duration;\n}\n\n/**\n * @file media-error.js\n */\n/**\n * A Custom `MediaError` class which mimics the standard HTML5 `MediaError` class.\n *\n * @param {number|string|Object|MediaError} value\n * This can be of multiple types:\n * - number: should be a standard error code\n * - string: an error message (the code will be 0)\n * - Object: arbitrary properties\n * - `MediaError` (native): used to populate a video.js `MediaError` object\n * - `MediaError` (video.js): will return itself if it's already a\n * video.js `MediaError` object.\n *\n * @see [MediaError Spec]{@link https://dev.w3.org/html5/spec-author-view/video.html#mediaerror}\n * @see [Encrypted MediaError Spec]{@link https://www.w3.org/TR/2013/WD-encrypted-media-20130510/#error-codes}\n *\n * @class MediaError\n */\n\nfunction MediaError(value) {\n // Allow redundant calls to this constructor to avoid having `instanceof`\n // checks peppered around the code.\n if (value instanceof MediaError) {\n return value;\n }\n\n if (typeof value === 'number') {\n this.code = value;\n } else if (typeof value === 'string') {\n // default code is zero, so this is a custom error\n this.message = value;\n } else if (isObject(value)) {\n // We assign the `code` property manually because native `MediaError` objects\n // do not expose it as an own/enumerable property of the object.\n if (typeof value.code === 'number') {\n this.code = value.code;\n }\n\n assign(this, value);\n }\n\n if (!this.message) {\n this.message = MediaError.defaultMessages[this.code] || '';\n }\n}\n/**\n * The error code that refers two one of the defined `MediaError` types\n *\n * @type {Number}\n */\n\n\nMediaError.prototype.code = 0;\n/**\n * An optional message that to show with the error. Message is not part of the HTML5\n * video spec but allows for more informative custom errors.\n *\n * @type {String}\n */\n\nMediaError.prototype.message = '';\n/**\n * An optional status code that can be set by plugins to allow even more detail about\n * the error. For example a plugin might provide a specific HTTP status code and an\n * error message for that code. Then when the plugin gets that error this class will\n * know how to display an error message for it. This allows a custom message to show\n * up on the `Player` error overlay.\n *\n * @type {Array}\n */\n\nMediaError.prototype.status = null;\n/**\n * Errors indexed by the W3C standard. The order **CANNOT CHANGE**! See the\n * specification listed under {@link MediaError} for more information.\n *\n * @enum {array}\n * @readonly\n * @property {string} 0 - MEDIA_ERR_CUSTOM\n * @property {string} 1 - MEDIA_ERR_ABORTED\n * @property {string} 2 - MEDIA_ERR_NETWORK\n * @property {string} 3 - MEDIA_ERR_DECODE\n * @property {string} 4 - MEDIA_ERR_SRC_NOT_SUPPORTED\n * @property {string} 5 - MEDIA_ERR_ENCRYPTED\n */\n\nMediaError.errorTypes = ['MEDIA_ERR_CUSTOM', 'MEDIA_ERR_ABORTED', 'MEDIA_ERR_NETWORK', 'MEDIA_ERR_DECODE', 'MEDIA_ERR_SRC_NOT_SUPPORTED', 'MEDIA_ERR_ENCRYPTED'];\n/**\n * The default `MediaError` messages based on the {@link MediaError.errorTypes}.\n *\n * @type {Array}\n * @constant\n */\n\nMediaError.defaultMessages = {\n 1: 'You aborted the media playback',\n 2: 'A network error caused the media download to fail part-way.',\n 3: 'The media playback was aborted due to a corruption problem or because the media used features your browser did not support.',\n 4: 'The media could not be loaded, either because the server or network failed or because the format is not supported.',\n 5: 'The media is encrypted and we do not have the keys to decrypt it.'\n}; // Add types as properties on MediaError\n// e.g. MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED = 4;\n\nfor (var errNum = 0; errNum < MediaError.errorTypes.length; errNum++) {\n MediaError[MediaError.errorTypes[errNum]] = errNum; // values should be accessible on both the class and instance\n\n MediaError.prototype[MediaError.errorTypes[errNum]] = errNum;\n} // jsdocs for instance/static members added above\n\n/**\n * Returns whether an object is `Promise`-like (i.e. has a `then` method).\n *\n * @param {Object} value\n * An object that may or may not be `Promise`-like.\n *\n * @return {boolean}\n * Whether or not the object is `Promise`-like.\n */\nfunction isPromise(value) {\n return value !== undefined && value !== null && typeof value.then === 'function';\n}\n/**\n * Silence a Promise-like object.\n *\n * This is useful for avoiding non-harmful, but potentially confusing \"uncaught\n * play promise\" rejection error messages.\n *\n * @param {Object} value\n * An object that may or may not be `Promise`-like.\n */\n\nfunction silencePromise(value) {\n if (isPromise(value)) {\n value.then(null, function (e) {});\n }\n}\n\n/**\n * @file text-track-list-converter.js Utilities for capturing text track state and\n * re-creating tracks based on a capture.\n *\n * @module text-track-list-converter\n */\n\n/**\n * Examine a single {@link TextTrack} and return a JSON-compatible javascript object that\n * represents the {@link TextTrack}'s state.\n *\n * @param {TextTrack} track\n * The text track to query.\n *\n * @return {Object}\n * A serializable javascript representation of the TextTrack.\n * @private\n */\nvar trackToJson_ = function trackToJson_(track) {\n var ret = ['kind', 'label', 'language', 'id', 'inBandMetadataTrackDispatchType', 'mode', 'src'].reduce(function (acc, prop, i) {\n if (track[prop]) {\n acc[prop] = track[prop];\n }\n\n return acc;\n }, {\n cues: track.cues && Array.prototype.map.call(track.cues, function (cue) {\n return {\n startTime: cue.startTime,\n endTime: cue.endTime,\n text: cue.text,\n id: cue.id\n };\n })\n });\n return ret;\n};\n/**\n * Examine a {@link Tech} and return a JSON-compatible javascript array that represents the\n * state of all {@link TextTrack}s currently configured. The return array is compatible with\n * {@link text-track-list-converter:jsonToTextTracks}.\n *\n * @param {Tech} tech\n * The tech object to query\n *\n * @return {Array}\n * A serializable javascript representation of the {@link Tech}s\n * {@link TextTrackList}.\n */\n\n\nvar textTracksToJson = function textTracksToJson(tech) {\n var trackEls = tech.$$('track');\n var trackObjs = Array.prototype.map.call(trackEls, function (t) {\n return t.track;\n });\n var tracks = Array.prototype.map.call(trackEls, function (trackEl) {\n var json = trackToJson_(trackEl.track);\n\n if (trackEl.src) {\n json.src = trackEl.src;\n }\n\n return json;\n });\n return tracks.concat(Array.prototype.filter.call(tech.textTracks(), function (track) {\n return trackObjs.indexOf(track) === -1;\n }).map(trackToJson_));\n};\n/**\n * Create a set of remote {@link TextTrack}s on a {@link Tech} based on an array of javascript\n * object {@link TextTrack} representations.\n *\n * @param {Array} json\n * An array of `TextTrack` representation objects, like those that would be\n * produced by `textTracksToJson`.\n *\n * @param {Tech} tech\n * The `Tech` to create the `TextTrack`s on.\n */\n\n\nvar jsonToTextTracks = function jsonToTextTracks(json, tech) {\n json.forEach(function (track) {\n var addedTrack = tech.addRemoteTextTrack(track).track;\n\n if (!track.src && track.cues) {\n track.cues.forEach(function (cue) {\n return addedTrack.addCue(cue);\n });\n }\n });\n return tech.textTracks();\n};\n\nvar textTrackConverter = {\n textTracksToJson: textTracksToJson,\n jsonToTextTracks: jsonToTextTracks,\n trackToJson_: trackToJson_\n};\n\nvar MODAL_CLASS_NAME = 'vjs-modal-dialog';\n/**\n * The `ModalDialog` displays over the video and its controls, which blocks\n * interaction with the player until it is closed.\n *\n * Modal dialogs include a \"Close\" button and will close when that button\n * is activated - or when ESC is pressed anywhere.\n *\n * @extends Component\n */\n\nvar ModalDialog = /*#__PURE__*/function (_Component) {\n _inheritsLoose(ModalDialog, _Component);\n\n /**\n * Create an instance of this class.\n *\n * @param {Player} player\n * The `Player` that this class should be attached to.\n *\n * @param {Object} [options]\n * The key/value store of player options.\n *\n * @param {Mixed} [options.content=undefined]\n * Provide customized content for this modal.\n *\n * @param {string} [options.description]\n * A text description for the modal, primarily for accessibility.\n *\n * @param {boolean} [options.fillAlways=false]\n * Normally, modals are automatically filled only the first time\n * they open. This tells the modal to refresh its content\n * every time it opens.\n *\n * @param {string} [options.label]\n * A text label for the modal, primarily for accessibility.\n *\n * @param {boolean} [options.pauseOnOpen=true]\n * If `true`, playback will will be paused if playing when\n * the modal opens, and resumed when it closes.\n *\n * @param {boolean} [options.temporary=true]\n * If `true`, the modal can only be opened once; it will be\n * disposed as soon as it's closed.\n *\n * @param {boolean} [options.uncloseable=false]\n * If `true`, the user will not be able to close the modal\n * through the UI in the normal ways. Programmatic closing is\n * still possible.\n */\n function ModalDialog(player, options) {\n var _this;\n\n _this = _Component.call(this, player, options) || this;\n\n _this.handleKeyDown_ = function (e) {\n return _this.handleKeyDown(e);\n };\n\n _this.close_ = function (e) {\n return _this.close(e);\n };\n\n _this.opened_ = _this.hasBeenOpened_ = _this.hasBeenFilled_ = false;\n\n _this.closeable(!_this.options_.uncloseable);\n\n _this.content(_this.options_.content); // Make sure the contentEl is defined AFTER any children are initialized\n // because we only want the contents of the modal in the contentEl\n // (not the UI elements like the close button).\n\n\n _this.contentEl_ = createEl('div', {\n className: MODAL_CLASS_NAME + \"-content\"\n }, {\n role: 'document'\n });\n _this.descEl_ = createEl('p', {\n className: MODAL_CLASS_NAME + \"-description vjs-control-text\",\n id: _this.el().getAttribute('aria-describedby')\n });\n textContent(_this.descEl_, _this.description());\n\n _this.el_.appendChild(_this.descEl_);\n\n _this.el_.appendChild(_this.contentEl_);\n\n return _this;\n }\n /**\n * Create the `ModalDialog`'s DOM element\n *\n * @return {Element}\n * The DOM element that gets created.\n */\n\n\n var _proto = ModalDialog.prototype;\n\n _proto.createEl = function createEl() {\n return _Component.prototype.createEl.call(this, 'div', {\n className: this.buildCSSClass(),\n tabIndex: -1\n }, {\n 'aria-describedby': this.id() + \"_description\",\n 'aria-hidden': 'true',\n 'aria-label': this.label(),\n 'role': 'dialog'\n });\n };\n\n _proto.dispose = function dispose() {\n this.contentEl_ = null;\n this.descEl_ = null;\n this.previouslyActiveEl_ = null;\n\n _Component.prototype.dispose.call(this);\n }\n /**\n * Builds the default DOM `className`.\n *\n * @return {string}\n * The DOM `className` for this object.\n */\n ;\n\n _proto.buildCSSClass = function buildCSSClass() {\n return MODAL_CLASS_NAME + \" vjs-hidden \" + _Component.prototype.buildCSSClass.call(this);\n }\n /**\n * Returns the label string for this modal. Primarily used for accessibility.\n *\n * @return {string}\n * the localized or raw label of this modal.\n */\n ;\n\n _proto.label = function label() {\n return this.localize(this.options_.label || 'Modal Window');\n }\n /**\n * Returns the description string for this modal. Primarily used for\n * accessibility.\n *\n * @return {string}\n * The localized or raw description of this modal.\n */\n ;\n\n _proto.description = function description() {\n var desc = this.options_.description || this.localize('This is a modal window.'); // Append a universal closeability message if the modal is closeable.\n\n if (this.closeable()) {\n desc += ' ' + this.localize('This modal can be closed by pressing the Escape key or activating the close button.');\n }\n\n return desc;\n }\n /**\n * Opens the modal.\n *\n * @fires ModalDialog#beforemodalopen\n * @fires ModalDialog#modalopen\n */\n ;\n\n _proto.open = function open() {\n if (!this.opened_) {\n var player = this.player();\n /**\n * Fired just before a `ModalDialog` is opened.\n *\n * @event ModalDialog#beforemodalopen\n * @type {EventTarget~Event}\n */\n\n this.trigger('beforemodalopen');\n this.opened_ = true; // Fill content if the modal has never opened before and\n // never been filled.\n\n if (this.options_.fillAlways || !this.hasBeenOpened_ && !this.hasBeenFilled_) {\n this.fill();\n } // If the player was playing, pause it and take note of its previously\n // playing state.\n\n\n this.wasPlaying_ = !player.paused();\n\n if (this.options_.pauseOnOpen && this.wasPlaying_) {\n player.pause();\n }\n\n this.on('keydown', this.handleKeyDown_); // Hide controls and note if they were enabled.\n\n this.hadControls_ = player.controls();\n player.controls(false);\n this.show();\n this.conditionalFocus_();\n this.el().setAttribute('aria-hidden', 'false');\n /**\n * Fired just after a `ModalDialog` is opened.\n *\n * @event ModalDialog#modalopen\n * @type {EventTarget~Event}\n */\n\n this.trigger('modalopen');\n this.hasBeenOpened_ = true;\n }\n }\n /**\n * If the `ModalDialog` is currently open or closed.\n *\n * @param {boolean} [value]\n * If given, it will open (`true`) or close (`false`) the modal.\n *\n * @return {boolean}\n * the current open state of the modaldialog\n */\n ;\n\n _proto.opened = function opened(value) {\n if (typeof value === 'boolean') {\n this[value ? 'open' : 'close']();\n }\n\n return this.opened_;\n }\n /**\n * Closes the modal, does nothing if the `ModalDialog` is\n * not open.\n *\n * @fires ModalDialog#beforemodalclose\n * @fires ModalDialog#modalclose\n */\n ;\n\n _proto.close = function close() {\n if (!this.opened_) {\n return;\n }\n\n var player = this.player();\n /**\n * Fired just before a `ModalDialog` is closed.\n *\n * @event ModalDialog#beforemodalclose\n * @type {EventTarget~Event}\n */\n\n this.trigger('beforemodalclose');\n this.opened_ = false;\n\n if (this.wasPlaying_ && this.options_.pauseOnOpen) {\n player.play();\n }\n\n this.off('keydown', this.handleKeyDown_);\n\n if (this.hadControls_) {\n player.controls(true);\n }\n\n this.hide();\n this.el().setAttribute('aria-hidden', 'true');\n /**\n * Fired just after a `ModalDialog` is closed.\n *\n * @event ModalDialog#modalclose\n * @type {EventTarget~Event}\n */\n\n this.trigger('modalclose');\n this.conditionalBlur_();\n\n if (this.options_.temporary) {\n this.dispose();\n }\n }\n /**\n * Check to see if the `ModalDialog` is closeable via the UI.\n *\n * @param {boolean} [value]\n * If given as a boolean, it will set the `closeable` option.\n *\n * @return {boolean}\n * Returns the final value of the closable option.\n */\n ;\n\n _proto.closeable = function closeable(value) {\n if (typeof value === 'boolean') {\n var closeable = this.closeable_ = !!value;\n var close = this.getChild('closeButton'); // If this is being made closeable and has no close button, add one.\n\n if (closeable && !close) {\n // The close button should be a child of the modal - not its\n // content element, so temporarily change the content element.\n var temp = this.contentEl_;\n this.contentEl_ = this.el_;\n close = this.addChild('closeButton', {\n controlText: 'Close Modal Dialog'\n });\n this.contentEl_ = temp;\n this.on(close, 'close', this.close_);\n } // If this is being made uncloseable and has a close button, remove it.\n\n\n if (!closeable && close) {\n this.off(close, 'close', this.close_);\n this.removeChild(close);\n close.dispose();\n }\n }\n\n return this.closeable_;\n }\n /**\n * Fill the modal's content element with the modal's \"content\" option.\n * The content element will be emptied before this change takes place.\n */\n ;\n\n _proto.fill = function fill() {\n this.fillWith(this.content());\n }\n /**\n * Fill the modal's content element with arbitrary content.\n * The content element will be emptied before this change takes place.\n *\n * @fires ModalDialog#beforemodalfill\n * @fires ModalDialog#modalfill\n *\n * @param {Mixed} [content]\n * The same rules apply to this as apply to the `content` option.\n */\n ;\n\n _proto.fillWith = function fillWith(content) {\n var contentEl = this.contentEl();\n var parentEl = contentEl.parentNode;\n var nextSiblingEl = contentEl.nextSibling;\n /**\n * Fired just before a `ModalDialog` is filled with content.\n *\n * @event ModalDialog#beforemodalfill\n * @type {EventTarget~Event}\n */\n\n this.trigger('beforemodalfill');\n this.hasBeenFilled_ = true; // Detach the content element from the DOM before performing\n // manipulation to avoid modifying the live DOM multiple times.\n\n parentEl.removeChild(contentEl);\n this.empty();\n insertContent(contentEl, content);\n /**\n * Fired just after a `ModalDialog` is filled with content.\n *\n * @event ModalDialog#modalfill\n * @type {EventTarget~Event}\n */\n\n this.trigger('modalfill'); // Re-inject the re-filled content element.\n\n if (nextSiblingEl) {\n parentEl.insertBefore(contentEl, nextSiblingEl);\n } else {\n parentEl.appendChild(contentEl);\n } // make sure that the close button is last in the dialog DOM\n\n\n var closeButton = this.getChild('closeButton');\n\n if (closeButton) {\n parentEl.appendChild(closeButton.el_);\n }\n }\n /**\n * Empties the content element. This happens anytime the modal is filled.\n *\n * @fires ModalDialog#beforemodalempty\n * @fires ModalDialog#modalempty\n */\n ;\n\n _proto.empty = function empty() {\n /**\n * Fired just before a `ModalDialog` is emptied.\n *\n * @event ModalDialog#beforemodalempty\n * @type {EventTarget~Event}\n */\n this.trigger('beforemodalempty');\n emptyEl(this.contentEl());\n /**\n * Fired just after a `ModalDialog` is emptied.\n *\n * @event ModalDialog#modalempty\n * @type {EventTarget~Event}\n */\n\n this.trigger('modalempty');\n }\n /**\n * Gets or sets the modal content, which gets normalized before being\n * rendered into the DOM.\n *\n * This does not update the DOM or fill the modal, but it is called during\n * that process.\n *\n * @param {Mixed} [value]\n * If defined, sets the internal content value to be used on the\n * next call(s) to `fill`. This value is normalized before being\n * inserted. To \"clear\" the internal content value, pass `null`.\n *\n * @return {Mixed}\n * The current content of the modal dialog\n */\n ;\n\n _proto.content = function content(value) {\n if (typeof value !== 'undefined') {\n this.content_ = value;\n }\n\n return this.content_;\n }\n /**\n * conditionally focus the modal dialog if focus was previously on the player.\n *\n * @private\n */\n ;\n\n _proto.conditionalFocus_ = function conditionalFocus_() {\n var activeEl = document.activeElement;\n var playerEl = this.player_.el_;\n this.previouslyActiveEl_ = null;\n\n if (playerEl.contains(activeEl) || playerEl === activeEl) {\n this.previouslyActiveEl_ = activeEl;\n this.focus();\n }\n }\n /**\n * conditionally blur the element and refocus the last focused element\n *\n * @private\n */\n ;\n\n _proto.conditionalBlur_ = function conditionalBlur_() {\n if (this.previouslyActiveEl_) {\n this.previouslyActiveEl_.focus();\n this.previouslyActiveEl_ = null;\n }\n }\n /**\n * Keydown handler. Attached when modal is focused.\n *\n * @listens keydown\n */\n ;\n\n _proto.handleKeyDown = function handleKeyDown(event) {\n // Do not allow keydowns to reach out of the modal dialog.\n event.stopPropagation();\n\n if (keycode.isEventKey(event, 'Escape') && this.closeable()) {\n event.preventDefault();\n this.close();\n return;\n } // exit early if it isn't a tab key\n\n\n if (!keycode.isEventKey(event, 'Tab')) {\n return;\n }\n\n var focusableEls = this.focusableEls_();\n var activeEl = this.el_.querySelector(':focus');\n var focusIndex;\n\n for (var i = 0; i < focusableEls.length; i++) {\n if (activeEl === focusableEls[i]) {\n focusIndex = i;\n break;\n }\n }\n\n if (document.activeElement === this.el_) {\n focusIndex = 0;\n }\n\n if (event.shiftKey && focusIndex === 0) {\n focusableEls[focusableEls.length - 1].focus();\n event.preventDefault();\n } else if (!event.shiftKey && focusIndex === focusableEls.length - 1) {\n focusableEls[0].focus();\n event.preventDefault();\n }\n }\n /**\n * get all focusable elements\n *\n * @private\n */\n ;\n\n _proto.focusableEls_ = function focusableEls_() {\n var allChildren = this.el_.querySelectorAll('*');\n return Array.prototype.filter.call(allChildren, function (child) {\n return (child instanceof window.HTMLAnchorElement || child instanceof window.HTMLAreaElement) && child.hasAttribute('href') || (child instanceof window.HTMLInputElement || child instanceof window.HTMLSelectElement || child instanceof window.HTMLTextAreaElement || child instanceof window.HTMLButtonElement) && !child.hasAttribute('disabled') || child instanceof window.HTMLIFrameElement || child instanceof window.HTMLObjectElement || child instanceof window.HTMLEmbedElement || child.hasAttribute('tabindex') && child.getAttribute('tabindex') !== -1 || child.hasAttribute('contenteditable');\n });\n };\n\n return ModalDialog;\n}(Component$1);\n/**\n * Default options for `ModalDialog` default options.\n *\n * @type {Object}\n * @private\n */\n\n\nModalDialog.prototype.options_ = {\n pauseOnOpen: true,\n temporary: true\n};\nComponent$1.registerComponent('ModalDialog', ModalDialog);\n\n/**\n * Common functionaliy between {@link TextTrackList}, {@link AudioTrackList}, and\n * {@link VideoTrackList}\n *\n * @extends EventTarget\n */\n\nvar TrackList = /*#__PURE__*/function (_EventTarget) {\n _inheritsLoose(TrackList, _EventTarget);\n\n /**\n * Create an instance of this class\n *\n * @param {Track[]} tracks\n * A list of tracks to initialize the list with.\n *\n * @abstract\n */\n function TrackList(tracks) {\n var _this;\n\n if (tracks === void 0) {\n tracks = [];\n }\n\n _this = _EventTarget.call(this) || this;\n _this.tracks_ = [];\n /**\n * @memberof TrackList\n * @member {number} length\n * The current number of `Track`s in the this Trackist.\n * @instance\n */\n\n Object.defineProperty(_assertThisInitialized(_this), 'length', {\n get: function get() {\n return this.tracks_.length;\n }\n });\n\n for (var i = 0; i < tracks.length; i++) {\n _this.addTrack(tracks[i]);\n }\n\n return _this;\n }\n /**\n * Add a {@link Track} to the `TrackList`\n *\n * @param {Track} track\n * The audio, video, or text track to add to the list.\n *\n * @fires TrackList#addtrack\n */\n\n\n var _proto = TrackList.prototype;\n\n _proto.addTrack = function addTrack(track) {\n var _this2 = this;\n\n var index = this.tracks_.length;\n\n if (!('' + index in this)) {\n Object.defineProperty(this, index, {\n get: function get() {\n return this.tracks_[index];\n }\n });\n } // Do not add duplicate tracks\n\n\n if (this.tracks_.indexOf(track) === -1) {\n this.tracks_.push(track);\n /**\n * Triggered when a track is added to a track list.\n *\n * @event TrackList#addtrack\n * @type {EventTarget~Event}\n * @property {Track} track\n * A reference to track that was added.\n */\n\n this.trigger({\n track: track,\n type: 'addtrack',\n target: this\n });\n }\n /**\n * Triggered when a track label is changed.\n *\n * @event TrackList#addtrack\n * @type {EventTarget~Event}\n * @property {Track} track\n * A reference to track that was added.\n */\n\n\n track.labelchange_ = function () {\n _this2.trigger({\n track: track,\n type: 'labelchange',\n target: _this2\n });\n };\n\n if (isEvented(track)) {\n track.addEventListener('labelchange', track.labelchange_);\n }\n }\n /**\n * Remove a {@link Track} from the `TrackList`\n *\n * @param {Track} rtrack\n * The audio, video, or text track to remove from the list.\n *\n * @fires TrackList#removetrack\n */\n ;\n\n _proto.removeTrack = function removeTrack(rtrack) {\n var track;\n\n for (var i = 0, l = this.length; i < l; i++) {\n if (this[i] === rtrack) {\n track = this[i];\n\n if (track.off) {\n track.off();\n }\n\n this.tracks_.splice(i, 1);\n break;\n }\n }\n\n if (!track) {\n return;\n }\n /**\n * Triggered when a track is removed from track list.\n *\n * @event TrackList#removetrack\n * @type {EventTarget~Event}\n * @property {Track} track\n * A reference to track that was removed.\n */\n\n\n this.trigger({\n track: track,\n type: 'removetrack',\n target: this\n });\n }\n /**\n * Get a Track from the TrackList by a tracks id\n *\n * @param {string} id - the id of the track to get\n * @method getTrackById\n * @return {Track}\n * @private\n */\n ;\n\n _proto.getTrackById = function getTrackById(id) {\n var result = null;\n\n for (var i = 0, l = this.length; i < l; i++) {\n var track = this[i];\n\n if (track.id === id) {\n result = track;\n break;\n }\n }\n\n return result;\n };\n\n return TrackList;\n}(EventTarget$2);\n/**\n * Triggered when a different track is selected/enabled.\n *\n * @event TrackList#change\n * @type {EventTarget~Event}\n */\n\n/**\n * Events that can be called with on + eventName. See {@link EventHandler}.\n *\n * @property {Object} TrackList#allowedEvents_\n * @private\n */\n\n\nTrackList.prototype.allowedEvents_ = {\n change: 'change',\n addtrack: 'addtrack',\n removetrack: 'removetrack',\n labelchange: 'labelchange'\n}; // emulate attribute EventHandler support to allow for feature detection\n\nfor (var event in TrackList.prototype.allowedEvents_) {\n TrackList.prototype['on' + event] = null;\n}\n\n/**\n * Anywhere we call this function we diverge from the spec\n * as we only support one enabled audiotrack at a time\n *\n * @param {AudioTrackList} list\n * list to work on\n *\n * @param {AudioTrack} track\n * The track to skip\n *\n * @private\n */\n\nvar disableOthers$1 = function disableOthers(list, track) {\n for (var i = 0; i < list.length; i++) {\n if (!Object.keys(list[i]).length || track.id === list[i].id) {\n continue;\n } // another audio track is enabled, disable it\n\n\n list[i].enabled = false;\n }\n};\n/**\n * The current list of {@link AudioTrack} for a media file.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotracklist}\n * @extends TrackList\n */\n\n\nvar AudioTrackList = /*#__PURE__*/function (_TrackList) {\n _inheritsLoose(AudioTrackList, _TrackList);\n\n /**\n * Create an instance of this class.\n *\n * @param {AudioTrack[]} [tracks=[]]\n * A list of `AudioTrack` to instantiate the list with.\n */\n function AudioTrackList(tracks) {\n var _this;\n\n if (tracks === void 0) {\n tracks = [];\n }\n\n // make sure only 1 track is enabled\n // sorted from last index to first index\n for (var i = tracks.length - 1; i >= 0; i--) {\n if (tracks[i].enabled) {\n disableOthers$1(tracks, tracks[i]);\n break;\n }\n }\n\n _this = _TrackList.call(this, tracks) || this;\n _this.changing_ = false;\n return _this;\n }\n /**\n * Add an {@link AudioTrack} to the `AudioTrackList`.\n *\n * @param {AudioTrack} track\n * The AudioTrack to add to the list\n *\n * @fires TrackList#addtrack\n */\n\n\n var _proto = AudioTrackList.prototype;\n\n _proto.addTrack = function addTrack(track) {\n var _this2 = this;\n\n if (track.enabled) {\n disableOthers$1(this, track);\n }\n\n _TrackList.prototype.addTrack.call(this, track); // native tracks don't have this\n\n\n if (!track.addEventListener) {\n return;\n }\n\n track.enabledChange_ = function () {\n // when we are disabling other tracks (since we don't support\n // more than one track at a time) we will set changing_\n // to true so that we don't trigger additional change events\n if (_this2.changing_) {\n return;\n }\n\n _this2.changing_ = true;\n disableOthers$1(_this2, track);\n _this2.changing_ = false;\n\n _this2.trigger('change');\n };\n /**\n * @listens AudioTrack#enabledchange\n * @fires TrackList#change\n */\n\n\n track.addEventListener('enabledchange', track.enabledChange_);\n };\n\n _proto.removeTrack = function removeTrack(rtrack) {\n _TrackList.prototype.removeTrack.call(this, rtrack);\n\n if (rtrack.removeEventListener && rtrack.enabledChange_) {\n rtrack.removeEventListener('enabledchange', rtrack.enabledChange_);\n rtrack.enabledChange_ = null;\n }\n };\n\n return AudioTrackList;\n}(TrackList);\n\n/**\n * Un-select all other {@link VideoTrack}s that are selected.\n *\n * @param {VideoTrackList} list\n * list to work on\n *\n * @param {VideoTrack} track\n * The track to skip\n *\n * @private\n */\n\nvar disableOthers = function disableOthers(list, track) {\n for (var i = 0; i < list.length; i++) {\n if (!Object.keys(list[i]).length || track.id === list[i].id) {\n continue;\n } // another video track is enabled, disable it\n\n\n list[i].selected = false;\n }\n};\n/**\n * The current list of {@link VideoTrack} for a video.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotracklist}\n * @extends TrackList\n */\n\n\nvar VideoTrackList = /*#__PURE__*/function (_TrackList) {\n _inheritsLoose(VideoTrackList, _TrackList);\n\n /**\n * Create an instance of this class.\n *\n * @param {VideoTrack[]} [tracks=[]]\n * A list of `VideoTrack` to instantiate the list with.\n */\n function VideoTrackList(tracks) {\n var _this;\n\n if (tracks === void 0) {\n tracks = [];\n }\n\n // make sure only 1 track is enabled\n // sorted from last index to first index\n for (var i = tracks.length - 1; i >= 0; i--) {\n if (tracks[i].selected) {\n disableOthers(tracks, tracks[i]);\n break;\n }\n }\n\n _this = _TrackList.call(this, tracks) || this;\n _this.changing_ = false;\n /**\n * @member {number} VideoTrackList#selectedIndex\n * The current index of the selected {@link VideoTrack`}.\n */\n\n Object.defineProperty(_assertThisInitialized(_this), 'selectedIndex', {\n get: function get() {\n for (var _i = 0; _i < this.length; _i++) {\n if (this[_i].selected) {\n return _i;\n }\n }\n\n return -1;\n },\n set: function set() {}\n });\n return _this;\n }\n /**\n * Add a {@link VideoTrack} to the `VideoTrackList`.\n *\n * @param {VideoTrack} track\n * The VideoTrack to add to the list\n *\n * @fires TrackList#addtrack\n */\n\n\n var _proto = VideoTrackList.prototype;\n\n _proto.addTrack = function addTrack(track) {\n var _this2 = this;\n\n if (track.selected) {\n disableOthers(this, track);\n }\n\n _TrackList.prototype.addTrack.call(this, track); // native tracks don't have this\n\n\n if (!track.addEventListener) {\n return;\n }\n\n track.selectedChange_ = function () {\n if (_this2.changing_) {\n return;\n }\n\n _this2.changing_ = true;\n disableOthers(_this2, track);\n _this2.changing_ = false;\n\n _this2.trigger('change');\n };\n /**\n * @listens VideoTrack#selectedchange\n * @fires TrackList#change\n */\n\n\n track.addEventListener('selectedchange', track.selectedChange_);\n };\n\n _proto.removeTrack = function removeTrack(rtrack) {\n _TrackList.prototype.removeTrack.call(this, rtrack);\n\n if (rtrack.removeEventListener && rtrack.selectedChange_) {\n rtrack.removeEventListener('selectedchange', rtrack.selectedChange_);\n rtrack.selectedChange_ = null;\n }\n };\n\n return VideoTrackList;\n}(TrackList);\n\n/**\n * The current list of {@link TextTrack} for a media file.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttracklist}\n * @extends TrackList\n */\n\nvar TextTrackList = /*#__PURE__*/function (_TrackList) {\n _inheritsLoose(TextTrackList, _TrackList);\n\n function TextTrackList() {\n return _TrackList.apply(this, arguments) || this;\n }\n\n var _proto = TextTrackList.prototype;\n\n /**\n * Add a {@link TextTrack} to the `TextTrackList`\n *\n * @param {TextTrack} track\n * The text track to add to the list.\n *\n * @fires TrackList#addtrack\n */\n _proto.addTrack = function addTrack(track) {\n var _this = this;\n\n _TrackList.prototype.addTrack.call(this, track);\n\n if (!this.queueChange_) {\n this.queueChange_ = function () {\n return _this.queueTrigger('change');\n };\n }\n\n if (!this.triggerSelectedlanguagechange) {\n this.triggerSelectedlanguagechange_ = function () {\n return _this.trigger('selectedlanguagechange');\n };\n }\n /**\n * @listens TextTrack#modechange\n * @fires TrackList#change\n */\n\n\n track.addEventListener('modechange', this.queueChange_);\n var nonLanguageTextTrackKind = ['metadata', 'chapters'];\n\n if (nonLanguageTextTrackKind.indexOf(track.kind) === -1) {\n track.addEventListener('modechange', this.triggerSelectedlanguagechange_);\n }\n };\n\n _proto.removeTrack = function removeTrack(rtrack) {\n _TrackList.prototype.removeTrack.call(this, rtrack); // manually remove the event handlers we added\n\n\n if (rtrack.removeEventListener) {\n if (this.queueChange_) {\n rtrack.removeEventListener('modechange', this.queueChange_);\n }\n\n if (this.selectedlanguagechange_) {\n rtrack.removeEventListener('modechange', this.triggerSelectedlanguagechange_);\n }\n }\n };\n\n return TextTrackList;\n}(TrackList);\n\n/**\n * @file html-track-element-list.js\n */\n\n/**\n * The current list of {@link HtmlTrackElement}s.\n */\nvar HtmlTrackElementList = /*#__PURE__*/function () {\n /**\n * Create an instance of this class.\n *\n * @param {HtmlTrackElement[]} [tracks=[]]\n * A list of `HtmlTrackElement` to instantiate the list with.\n */\n function HtmlTrackElementList(trackElements) {\n if (trackElements === void 0) {\n trackElements = [];\n }\n\n this.trackElements_ = [];\n /**\n * @memberof HtmlTrackElementList\n * @member {number} length\n * The current number of `Track`s in the this Trackist.\n * @instance\n */\n\n Object.defineProperty(this, 'length', {\n get: function get() {\n return this.trackElements_.length;\n }\n });\n\n for (var i = 0, length = trackElements.length; i < length; i++) {\n this.addTrackElement_(trackElements[i]);\n }\n }\n /**\n * Add an {@link HtmlTrackElement} to the `HtmlTrackElementList`\n *\n * @param {HtmlTrackElement} trackElement\n * The track element to add to the list.\n *\n * @private\n */\n\n\n var _proto = HtmlTrackElementList.prototype;\n\n _proto.addTrackElement_ = function addTrackElement_(trackElement) {\n var index = this.trackElements_.length;\n\n if (!('' + index in this)) {\n Object.defineProperty(this, index, {\n get: function get() {\n return this.trackElements_[index];\n }\n });\n } // Do not add duplicate elements\n\n\n if (this.trackElements_.indexOf(trackElement) === -1) {\n this.trackElements_.push(trackElement);\n }\n }\n /**\n * Get an {@link HtmlTrackElement} from the `HtmlTrackElementList` given an\n * {@link TextTrack}.\n *\n * @param {TextTrack} track\n * The track associated with a track element.\n *\n * @return {HtmlTrackElement|undefined}\n * The track element that was found or undefined.\n *\n * @private\n */\n ;\n\n _proto.getTrackElementByTrack_ = function getTrackElementByTrack_(track) {\n var trackElement_;\n\n for (var i = 0, length = this.trackElements_.length; i < length; i++) {\n if (track === this.trackElements_[i].track) {\n trackElement_ = this.trackElements_[i];\n break;\n }\n }\n\n return trackElement_;\n }\n /**\n * Remove a {@link HtmlTrackElement} from the `HtmlTrackElementList`\n *\n * @param {HtmlTrackElement} trackElement\n * The track element to remove from the list.\n *\n * @private\n */\n ;\n\n _proto.removeTrackElement_ = function removeTrackElement_(trackElement) {\n for (var i = 0, length = this.trackElements_.length; i < length; i++) {\n if (trackElement === this.trackElements_[i]) {\n if (this.trackElements_[i].track && typeof this.trackElements_[i].track.off === 'function') {\n this.trackElements_[i].track.off();\n }\n\n if (typeof this.trackElements_[i].off === 'function') {\n this.trackElements_[i].off();\n }\n\n this.trackElements_.splice(i, 1);\n break;\n }\n }\n };\n\n return HtmlTrackElementList;\n}();\n\n/**\n * @file text-track-cue-list.js\n */\n\n/**\n * @typedef {Object} TextTrackCueList~TextTrackCue\n *\n * @property {string} id\n * The unique id for this text track cue\n *\n * @property {number} startTime\n * The start time for this text track cue\n *\n * @property {number} endTime\n * The end time for this text track cue\n *\n * @property {boolean} pauseOnExit\n * Pause when the end time is reached if true.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcue}\n */\n\n/**\n * A List of TextTrackCues.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackcuelist}\n */\nvar TextTrackCueList = /*#__PURE__*/function () {\n /**\n * Create an instance of this class..\n *\n * @param {Array} cues\n * A list of cues to be initialized with\n */\n function TextTrackCueList(cues) {\n TextTrackCueList.prototype.setCues_.call(this, cues);\n /**\n * @memberof TextTrackCueList\n * @member {number} length\n * The current number of `TextTrackCue`s in the TextTrackCueList.\n * @instance\n */\n\n Object.defineProperty(this, 'length', {\n get: function get() {\n return this.length_;\n }\n });\n }\n /**\n * A setter for cues in this list. Creates getters\n * an an index for the cues.\n *\n * @param {Array} cues\n * An array of cues to set\n *\n * @private\n */\n\n\n var _proto = TextTrackCueList.prototype;\n\n _proto.setCues_ = function setCues_(cues) {\n var oldLength = this.length || 0;\n var i = 0;\n var l = cues.length;\n this.cues_ = cues;\n this.length_ = cues.length;\n\n var defineProp = function defineProp(index) {\n if (!('' + index in this)) {\n Object.defineProperty(this, '' + index, {\n get: function get() {\n return this.cues_[index];\n }\n });\n }\n };\n\n if (oldLength < l) {\n i = oldLength;\n\n for (; i < l; i++) {\n defineProp.call(this, i);\n }\n }\n }\n /**\n * Get a `TextTrackCue` that is currently in the `TextTrackCueList` by id.\n *\n * @param {string} id\n * The id of the cue that should be searched for.\n *\n * @return {TextTrackCueList~TextTrackCue|null}\n * A single cue or null if none was found.\n */\n ;\n\n _proto.getCueById = function getCueById(id) {\n var result = null;\n\n for (var i = 0, l = this.length; i < l; i++) {\n var cue = this[i];\n\n if (cue.id === id) {\n result = cue;\n break;\n }\n }\n\n return result;\n };\n\n return TextTrackCueList;\n}();\n\n/**\n * @file track-kinds.js\n */\n\n/**\n * All possible `VideoTrackKind`s\n *\n * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-videotrack-kind\n * @typedef VideoTrack~Kind\n * @enum\n */\nvar VideoTrackKind = {\n alternative: 'alternative',\n captions: 'captions',\n main: 'main',\n sign: 'sign',\n subtitles: 'subtitles',\n commentary: 'commentary'\n};\n/**\n * All possible `AudioTrackKind`s\n *\n * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-audiotrack-kind\n * @typedef AudioTrack~Kind\n * @enum\n */\n\nvar AudioTrackKind = {\n 'alternative': 'alternative',\n 'descriptions': 'descriptions',\n 'main': 'main',\n 'main-desc': 'main-desc',\n 'translation': 'translation',\n 'commentary': 'commentary'\n};\n/**\n * All possible `TextTrackKind`s\n *\n * @see https://html.spec.whatwg.org/multipage/embedded-content.html#dom-texttrack-kind\n * @typedef TextTrack~Kind\n * @enum\n */\n\nvar TextTrackKind = {\n subtitles: 'subtitles',\n captions: 'captions',\n descriptions: 'descriptions',\n chapters: 'chapters',\n metadata: 'metadata'\n};\n/**\n * All possible `TextTrackMode`s\n *\n * @see https://html.spec.whatwg.org/multipage/embedded-content.html#texttrackmode\n * @typedef TextTrack~Mode\n * @enum\n */\n\nvar TextTrackMode = {\n disabled: 'disabled',\n hidden: 'hidden',\n showing: 'showing'\n};\n\n/**\n * A Track class that contains all of the common functionality for {@link AudioTrack},\n * {@link VideoTrack}, and {@link TextTrack}.\n *\n * > Note: This class should not be used directly\n *\n * @see {@link https://html.spec.whatwg.org/multipage/embedded-content.html}\n * @extends EventTarget\n * @abstract\n */\n\nvar Track = /*#__PURE__*/function (_EventTarget) {\n _inheritsLoose(Track, _EventTarget);\n\n /**\n * Create an instance of this class.\n *\n * @param {Object} [options={}]\n * Object of option names and values\n *\n * @param {string} [options.kind='']\n * A valid kind for the track type you are creating.\n *\n * @param {string} [options.id='vjs_track_' + Guid.newGUID()]\n * A unique id for this AudioTrack.\n *\n * @param {string} [options.label='']\n * The menu label for this track.\n *\n * @param {string} [options.language='']\n * A valid two character language code.\n *\n * @abstract\n */\n function Track(options) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n _this = _EventTarget.call(this) || this;\n var trackProps = {\n id: options.id || 'vjs_track_' + newGUID(),\n kind: options.kind || '',\n language: options.language || ''\n };\n var label = options.label || '';\n /**\n * @memberof Track\n * @member {string} id\n * The id of this track. Cannot be changed after creation.\n * @instance\n *\n * @readonly\n */\n\n /**\n * @memberof Track\n * @member {string} kind\n * The kind of track that this is. Cannot be changed after creation.\n * @instance\n *\n * @readonly\n */\n\n /**\n * @memberof Track\n * @member {string} language\n * The two letter language code for this track. Cannot be changed after\n * creation.\n * @instance\n *\n * @readonly\n */\n\n var _loop = function _loop(key) {\n Object.defineProperty(_assertThisInitialized(_this), key, {\n get: function get() {\n return trackProps[key];\n },\n set: function set() {}\n });\n };\n\n for (var key in trackProps) {\n _loop(key);\n }\n /**\n * @memberof Track\n * @member {string} label\n * The label of this track. Cannot be changed after creation.\n * @instance\n *\n * @fires Track#labelchange\n */\n\n\n Object.defineProperty(_assertThisInitialized(_this), 'label', {\n get: function get() {\n return label;\n },\n set: function set(newLabel) {\n if (newLabel !== label) {\n label = newLabel;\n /**\n * An event that fires when label changes on this track.\n *\n * > Note: This is not part of the spec!\n *\n * @event Track#labelchange\n * @type {EventTarget~Event}\n */\n\n this.trigger('labelchange');\n }\n }\n });\n return _this;\n }\n\n return Track;\n}(EventTarget$2);\n\n/**\n * @file url.js\n * @module url\n */\n/**\n * @typedef {Object} url:URLObject\n *\n * @property {string} protocol\n * The protocol of the url that was parsed.\n *\n * @property {string} hostname\n * The hostname of the url that was parsed.\n *\n * @property {string} port\n * The port of the url that was parsed.\n *\n * @property {string} pathname\n * The pathname of the url that was parsed.\n *\n * @property {string} search\n * The search query of the url that was parsed.\n *\n * @property {string} hash\n * The hash of the url that was parsed.\n *\n * @property {string} host\n * The host of the url that was parsed.\n */\n\n/**\n * Resolve and parse the elements of a URL.\n *\n * @function\n * @param {String} url\n * The url to parse\n *\n * @return {url:URLObject}\n * An object of url details\n */\n\nvar parseUrl = function parseUrl(url) {\n // This entire method can be replace with URL once we are able to drop IE11\n var props = ['protocol', 'hostname', 'port', 'pathname', 'search', 'hash', 'host']; // add the url to an anchor and let the browser parse the URL\n\n var a = document.createElement('a');\n a.href = url; // Copy the specific URL properties to a new object\n // This is also needed for IE because the anchor loses its\n // properties when it's removed from the dom\n\n var details = {};\n\n for (var i = 0; i < props.length; i++) {\n details[props[i]] = a[props[i]];\n } // IE adds the port to the host property unlike everyone else. If\n // a port identifier is added for standard ports, strip it.\n\n\n if (details.protocol === 'http:') {\n details.host = details.host.replace(/:80$/, '');\n }\n\n if (details.protocol === 'https:') {\n details.host = details.host.replace(/:443$/, '');\n }\n\n if (!details.protocol) {\n details.protocol = window.location.protocol;\n }\n /* istanbul ignore if */\n\n\n if (!details.host) {\n details.host = window.location.host;\n }\n\n return details;\n};\n/**\n * Get absolute version of relative URL. Used to tell Flash the correct URL.\n *\n * @function\n * @param {string} url\n * URL to make absolute\n *\n * @return {string}\n * Absolute URL\n *\n * @see http://stackoverflow.com/questions/470832/getting-an-absolute-url-from-a-relative-one-ie6-issue\n */\n\nvar getAbsoluteURL = function getAbsoluteURL(url) {\n // Check if absolute URL\n if (!url.match(/^https?:\\/\\//)) {\n // Convert to absolute URL. Flash hosted off-site needs an absolute URL.\n // add the url to an anchor and let the browser parse the URL\n var a = document.createElement('a');\n a.href = url;\n url = a.href;\n }\n\n return url;\n};\n/**\n * Returns the extension of the passed file name. It will return an empty string\n * if passed an invalid path.\n *\n * @function\n * @param {string} path\n * The fileName path like '/path/to/file.mp4'\n *\n * @return {string}\n * The extension in lower case or an empty string if no\n * extension could be found.\n */\n\nvar getFileExtension = function getFileExtension(path) {\n if (typeof path === 'string') {\n var splitPathRe = /^(\\/?)([\\s\\S]*?)((?:\\.{1,2}|[^\\/]+?)(\\.([^\\.\\/\\?]+)))(?:[\\/]*|[\\?].*)$/;\n var pathParts = splitPathRe.exec(path);\n\n if (pathParts) {\n return pathParts.pop().toLowerCase();\n }\n }\n\n return '';\n};\n/**\n * Returns whether the url passed is a cross domain request or not.\n *\n * @function\n * @param {string} url\n * The url to check.\n *\n * @param {Object} [winLoc]\n * the domain to check the url against, defaults to window.location\n *\n * @param {string} [winLoc.protocol]\n * The window location protocol defaults to window.location.protocol\n *\n * @param {string} [winLoc.host]\n * The window location host defaults to window.location.host\n *\n * @return {boolean}\n * Whether it is a cross domain request or not.\n */\n\nvar isCrossOrigin = function isCrossOrigin(url, winLoc) {\n if (winLoc === void 0) {\n winLoc = window.location;\n }\n\n var urlInfo = parseUrl(url); // IE8 protocol relative urls will return ':' for protocol\n\n var srcProtocol = urlInfo.protocol === ':' ? winLoc.protocol : urlInfo.protocol; // Check if url is for another domain/origin\n // IE8 doesn't know location.origin, so we won't rely on it here\n\n var crossOrigin = srcProtocol + urlInfo.host !== winLoc.protocol + winLoc.host;\n return crossOrigin;\n};\n\nvar Url = /*#__PURE__*/Object.freeze({\n __proto__: null,\n parseUrl: parseUrl,\n getAbsoluteURL: getAbsoluteURL,\n getFileExtension: getFileExtension,\n isCrossOrigin: isCrossOrigin\n});\n\n/**\n * Takes a webvtt file contents and parses it into cues\n *\n * @param {string} srcContent\n * webVTT file contents\n *\n * @param {TextTrack} track\n * TextTrack to add cues to. Cues come from the srcContent.\n *\n * @private\n */\n\nvar parseCues = function parseCues(srcContent, track) {\n var parser = new window.WebVTT.Parser(window, window.vttjs, window.WebVTT.StringDecoder());\n var errors = [];\n\n parser.oncue = function (cue) {\n track.addCue(cue);\n };\n\n parser.onparsingerror = function (error) {\n errors.push(error);\n };\n\n parser.onflush = function () {\n track.trigger({\n type: 'loadeddata',\n target: track\n });\n };\n\n parser.parse(srcContent);\n\n if (errors.length > 0) {\n if (window.console && window.console.groupCollapsed) {\n window.console.groupCollapsed(\"Text Track parsing errors for \" + track.src);\n }\n\n errors.forEach(function (error) {\n return log$1.error(error);\n });\n\n if (window.console && window.console.groupEnd) {\n window.console.groupEnd();\n }\n }\n\n parser.flush();\n};\n/**\n * Load a `TextTrack` from a specified url.\n *\n * @param {string} src\n * Url to load track from.\n *\n * @param {TextTrack} track\n * Track to add cues to. Comes from the content at the end of `url`.\n *\n * @private\n */\n\n\nvar loadTrack = function loadTrack(src, track) {\n var opts = {\n uri: src\n };\n var crossOrigin = isCrossOrigin(src);\n\n if (crossOrigin) {\n opts.cors = crossOrigin;\n }\n\n var withCredentials = track.tech_.crossOrigin() === 'use-credentials';\n\n if (withCredentials) {\n opts.withCredentials = withCredentials;\n }\n\n XHR(opts, bind(this, function (err, response, responseBody) {\n if (err) {\n return log$1.error(err, response);\n }\n\n track.loaded_ = true; // Make sure that vttjs has loaded, otherwise, wait till it finished loading\n // NOTE: this is only used for the alt/video.novtt.js build\n\n if (typeof window.WebVTT !== 'function') {\n if (track.tech_) {\n // to prevent use before define eslint error, we define loadHandler\n // as a let here\n track.tech_.any(['vttjsloaded', 'vttjserror'], function (event) {\n if (event.type === 'vttjserror') {\n log$1.error(\"vttjs failed to load, stopping trying to process \" + track.src);\n return;\n }\n\n return parseCues(responseBody, track);\n });\n }\n } else {\n parseCues(responseBody, track);\n }\n }));\n};\n/**\n * A representation of a single `TextTrack`.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#texttrack}\n * @extends Track\n */\n\n\nvar TextTrack = /*#__PURE__*/function (_Track) {\n _inheritsLoose(TextTrack, _Track);\n\n /**\n * Create an instance of this class.\n *\n * @param {Object} options={}\n * Object of option names and values\n *\n * @param {Tech} options.tech\n * A reference to the tech that owns this TextTrack.\n *\n * @param {TextTrack~Kind} [options.kind='subtitles']\n * A valid text track kind.\n *\n * @param {TextTrack~Mode} [options.mode='disabled']\n * A valid text track mode.\n *\n * @param {string} [options.id='vjs_track_' + Guid.newGUID()]\n * A unique id for this TextTrack.\n *\n * @param {string} [options.label='']\n * The menu label for this track.\n *\n * @param {string} [options.language='']\n * A valid two character language code.\n *\n * @param {string} [options.srclang='']\n * A valid two character language code. An alternative, but deprioritized\n * version of `options.language`\n *\n * @param {string} [options.src]\n * A url to TextTrack cues.\n *\n * @param {boolean} [options.default]\n * If this track should default to on or off.\n */\n function TextTrack(options) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n if (!options.tech) {\n throw new Error('A tech was not provided.');\n }\n\n var settings = mergeOptions$3(options, {\n kind: TextTrackKind[options.kind] || 'subtitles',\n language: options.language || options.srclang || ''\n });\n var mode = TextTrackMode[settings.mode] || 'disabled';\n var default_ = settings[\"default\"];\n\n if (settings.kind === 'metadata' || settings.kind === 'chapters') {\n mode = 'hidden';\n }\n\n _this = _Track.call(this, settings) || this;\n _this.tech_ = settings.tech;\n _this.cues_ = [];\n _this.activeCues_ = [];\n _this.preload_ = _this.tech_.preloadTextTracks !== false;\n var cues = new TextTrackCueList(_this.cues_);\n var activeCues = new TextTrackCueList(_this.activeCues_);\n var changed = false;\n var timeupdateHandler = bind(_assertThisInitialized(_this), function () {\n if (!this.tech_.isReady_ || this.tech_.isDisposed()) {\n return;\n } // Accessing this.activeCues for the side-effects of updating itself\n // due to its nature as a getter function. Do not remove or cues will\n // stop updating!\n // Use the setter to prevent deletion from uglify (pure_getters rule)\n\n\n this.activeCues = this.activeCues;\n\n if (changed) {\n this.trigger('cuechange');\n changed = false;\n }\n });\n\n var disposeHandler = function disposeHandler() {\n _this.tech_.off('timeupdate', timeupdateHandler);\n };\n\n _this.tech_.one('dispose', disposeHandler);\n\n if (mode !== 'disabled') {\n _this.tech_.on('timeupdate', timeupdateHandler);\n }\n\n Object.defineProperties(_assertThisInitialized(_this), {\n /**\n * @memberof TextTrack\n * @member {boolean} default\n * If this track was set to be on or off by default. Cannot be changed after\n * creation.\n * @instance\n *\n * @readonly\n */\n \"default\": {\n get: function get() {\n return default_;\n },\n set: function set() {}\n },\n\n /**\n * @memberof TextTrack\n * @member {string} mode\n * Set the mode of this TextTrack to a valid {@link TextTrack~Mode}. Will\n * not be set if setting to an invalid mode.\n * @instance\n *\n * @fires TextTrack#modechange\n */\n mode: {\n get: function get() {\n return mode;\n },\n set: function set(newMode) {\n if (!TextTrackMode[newMode]) {\n return;\n }\n\n if (mode === newMode) {\n return;\n }\n\n mode = newMode;\n\n if (!this.preload_ && mode !== 'disabled' && this.cues.length === 0) {\n // On-demand load.\n loadTrack(this.src, this);\n }\n\n this.tech_.off('timeupdate', timeupdateHandler);\n\n if (mode !== 'disabled') {\n this.tech_.on('timeupdate', timeupdateHandler);\n }\n /**\n * An event that fires when mode changes on this track. This allows\n * the TextTrackList that holds this track to act accordingly.\n *\n * > Note: This is not part of the spec!\n *\n * @event TextTrack#modechange\n * @type {EventTarget~Event}\n */\n\n\n this.trigger('modechange');\n }\n },\n\n /**\n * @memberof TextTrack\n * @member {TextTrackCueList} cues\n * The text track cue list for this TextTrack.\n * @instance\n */\n cues: {\n get: function get() {\n if (!this.loaded_) {\n return null;\n }\n\n return cues;\n },\n set: function set() {}\n },\n\n /**\n * @memberof TextTrack\n * @member {TextTrackCueList} activeCues\n * The list text track cues that are currently active for this TextTrack.\n * @instance\n */\n activeCues: {\n get: function get() {\n if (!this.loaded_) {\n return null;\n } // nothing to do\n\n\n if (this.cues.length === 0) {\n return activeCues;\n }\n\n var ct = this.tech_.currentTime();\n var active = [];\n\n for (var i = 0, l = this.cues.length; i < l; i++) {\n var cue = this.cues[i];\n\n if (cue.startTime <= ct && cue.endTime >= ct) {\n active.push(cue);\n } else if (cue.startTime === cue.endTime && cue.startTime <= ct && cue.startTime + 0.5 >= ct) {\n active.push(cue);\n }\n }\n\n changed = false;\n\n if (active.length !== this.activeCues_.length) {\n changed = true;\n } else {\n for (var _i = 0; _i < active.length; _i++) {\n if (this.activeCues_.indexOf(active[_i]) === -1) {\n changed = true;\n }\n }\n }\n\n this.activeCues_ = active;\n activeCues.setCues_(this.activeCues_);\n return activeCues;\n },\n // /!\\ Keep this setter empty (see the timeupdate handler above)\n set: function set() {}\n }\n });\n\n if (settings.src) {\n _this.src = settings.src;\n\n if (!_this.preload_) {\n // Tracks will load on-demand.\n // Act like we're loaded for other purposes.\n _this.loaded_ = true;\n }\n\n if (_this.preload_ || settings.kind !== 'subtitles' && settings.kind !== 'captions') {\n loadTrack(_this.src, _assertThisInitialized(_this));\n }\n } else {\n _this.loaded_ = true;\n }\n\n return _this;\n }\n /**\n * Add a cue to the internal list of cues.\n *\n * @param {TextTrack~Cue} cue\n * The cue to add to our internal list\n */\n\n\n var _proto = TextTrack.prototype;\n\n _proto.addCue = function addCue(originalCue) {\n var cue = originalCue;\n\n if (window.vttjs && !(originalCue instanceof window.vttjs.VTTCue)) {\n cue = new window.vttjs.VTTCue(originalCue.startTime, originalCue.endTime, originalCue.text);\n\n for (var prop in originalCue) {\n if (!(prop in cue)) {\n cue[prop] = originalCue[prop];\n }\n } // make sure that `id` is copied over\n\n\n cue.id = originalCue.id;\n cue.originalCue_ = originalCue;\n }\n\n var tracks = this.tech_.textTracks();\n\n for (var i = 0; i < tracks.length; i++) {\n if (tracks[i] !== this) {\n tracks[i].removeCue(cue);\n }\n }\n\n this.cues_.push(cue);\n this.cues.setCues_(this.cues_);\n }\n /**\n * Remove a cue from our internal list\n *\n * @param {TextTrack~Cue} removeCue\n * The cue to remove from our internal list\n */\n ;\n\n _proto.removeCue = function removeCue(_removeCue) {\n var i = this.cues_.length;\n\n while (i--) {\n var cue = this.cues_[i];\n\n if (cue === _removeCue || cue.originalCue_ && cue.originalCue_ === _removeCue) {\n this.cues_.splice(i, 1);\n this.cues.setCues_(this.cues_);\n break;\n }\n }\n };\n\n return TextTrack;\n}(Track);\n/**\n * cuechange - One or more cues in the track have become active or stopped being active.\n */\n\n\nTextTrack.prototype.allowedEvents_ = {\n cuechange: 'cuechange'\n};\n\n/**\n * A representation of a single `AudioTrack`. If it is part of an {@link AudioTrackList}\n * only one `AudioTrack` in the list will be enabled at a time.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#audiotrack}\n * @extends Track\n */\n\nvar AudioTrack = /*#__PURE__*/function (_Track) {\n _inheritsLoose(AudioTrack, _Track);\n\n /**\n * Create an instance of this class.\n *\n * @param {Object} [options={}]\n * Object of option names and values\n *\n * @param {AudioTrack~Kind} [options.kind='']\n * A valid audio track kind\n *\n * @param {string} [options.id='vjs_track_' + Guid.newGUID()]\n * A unique id for this AudioTrack.\n *\n * @param {string} [options.label='']\n * The menu label for this track.\n *\n * @param {string} [options.language='']\n * A valid two character language code.\n *\n * @param {boolean} [options.enabled]\n * If this track is the one that is currently playing. If this track is part of\n * an {@link AudioTrackList}, only one {@link AudioTrack} will be enabled.\n */\n function AudioTrack(options) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n var settings = mergeOptions$3(options, {\n kind: AudioTrackKind[options.kind] || ''\n });\n _this = _Track.call(this, settings) || this;\n var enabled = false;\n /**\n * @memberof AudioTrack\n * @member {boolean} enabled\n * If this `AudioTrack` is enabled or not. When setting this will\n * fire {@link AudioTrack#enabledchange} if the state of enabled is changed.\n * @instance\n *\n * @fires VideoTrack#selectedchange\n */\n\n Object.defineProperty(_assertThisInitialized(_this), 'enabled', {\n get: function get() {\n return enabled;\n },\n set: function set(newEnabled) {\n // an invalid or unchanged value\n if (typeof newEnabled !== 'boolean' || newEnabled === enabled) {\n return;\n }\n\n enabled = newEnabled;\n /**\n * An event that fires when enabled changes on this track. This allows\n * the AudioTrackList that holds this track to act accordingly.\n *\n * > Note: This is not part of the spec! Native tracks will do\n * this internally without an event.\n *\n * @event AudioTrack#enabledchange\n * @type {EventTarget~Event}\n */\n\n this.trigger('enabledchange');\n }\n }); // if the user sets this track to selected then\n // set selected to that true value otherwise\n // we keep it false\n\n if (settings.enabled) {\n _this.enabled = settings.enabled;\n }\n\n _this.loaded_ = true;\n return _this;\n }\n\n return AudioTrack;\n}(Track);\n\n/**\n * A representation of a single `VideoTrack`.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#videotrack}\n * @extends Track\n */\n\nvar VideoTrack = /*#__PURE__*/function (_Track) {\n _inheritsLoose(VideoTrack, _Track);\n\n /**\n * Create an instance of this class.\n *\n * @param {Object} [options={}]\n * Object of option names and values\n *\n * @param {string} [options.kind='']\n * A valid {@link VideoTrack~Kind}\n *\n * @param {string} [options.id='vjs_track_' + Guid.newGUID()]\n * A unique id for this AudioTrack.\n *\n * @param {string} [options.label='']\n * The menu label for this track.\n *\n * @param {string} [options.language='']\n * A valid two character language code.\n *\n * @param {boolean} [options.selected]\n * If this track is the one that is currently playing.\n */\n function VideoTrack(options) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n var settings = mergeOptions$3(options, {\n kind: VideoTrackKind[options.kind] || ''\n });\n _this = _Track.call(this, settings) || this;\n var selected = false;\n /**\n * @memberof VideoTrack\n * @member {boolean} selected\n * If this `VideoTrack` is selected or not. When setting this will\n * fire {@link VideoTrack#selectedchange} if the state of selected changed.\n * @instance\n *\n * @fires VideoTrack#selectedchange\n */\n\n Object.defineProperty(_assertThisInitialized(_this), 'selected', {\n get: function get() {\n return selected;\n },\n set: function set(newSelected) {\n // an invalid or unchanged value\n if (typeof newSelected !== 'boolean' || newSelected === selected) {\n return;\n }\n\n selected = newSelected;\n /**\n * An event that fires when selected changes on this track. This allows\n * the VideoTrackList that holds this track to act accordingly.\n *\n * > Note: This is not part of the spec! Native tracks will do\n * this internally without an event.\n *\n * @event VideoTrack#selectedchange\n * @type {EventTarget~Event}\n */\n\n this.trigger('selectedchange');\n }\n }); // if the user sets this track to selected then\n // set selected to that true value otherwise\n // we keep it false\n\n if (settings.selected) {\n _this.selected = settings.selected;\n }\n\n return _this;\n }\n\n return VideoTrack;\n}(Track);\n\n/**\n * @memberof HTMLTrackElement\n * @typedef {HTMLTrackElement~ReadyState}\n * @enum {number}\n */\n\nvar NONE = 0;\nvar LOADING = 1;\nvar LOADED = 2;\nvar ERROR = 3;\n/**\n * A single track represented in the DOM.\n *\n * @see [Spec]{@link https://html.spec.whatwg.org/multipage/embedded-content.html#htmltrackelement}\n * @extends EventTarget\n */\n\nvar HTMLTrackElement = /*#__PURE__*/function (_EventTarget) {\n _inheritsLoose(HTMLTrackElement, _EventTarget);\n\n /**\n * Create an instance of this class.\n *\n * @param {Object} options={}\n * Object of option names and values\n *\n * @param {Tech} options.tech\n * A reference to the tech that owns this HTMLTrackElement.\n *\n * @param {TextTrack~Kind} [options.kind='subtitles']\n * A valid text track kind.\n *\n * @param {TextTrack~Mode} [options.mode='disabled']\n * A valid text track mode.\n *\n * @param {string} [options.id='vjs_track_' + Guid.newGUID()]\n * A unique id for this TextTrack.\n *\n * @param {string} [options.label='']\n * The menu label for this track.\n *\n * @param {string} [options.language='']\n * A valid two character language code.\n *\n * @param {string} [options.srclang='']\n * A valid two character language code. An alternative, but deprioritized\n * version of `options.language`\n *\n * @param {string} [options.src]\n * A url to TextTrack cues.\n *\n * @param {boolean} [options.default]\n * If this track should default to on or off.\n */\n function HTMLTrackElement(options) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n _this = _EventTarget.call(this) || this;\n var readyState;\n var track = new TextTrack(options);\n _this.kind = track.kind;\n _this.src = track.src;\n _this.srclang = track.language;\n _this.label = track.label;\n _this[\"default\"] = track[\"default\"];\n Object.defineProperties(_assertThisInitialized(_this), {\n /**\n * @memberof HTMLTrackElement\n * @member {HTMLTrackElement~ReadyState} readyState\n * The current ready state of the track element.\n * @instance\n */\n readyState: {\n get: function get() {\n return readyState;\n }\n },\n\n /**\n * @memberof HTMLTrackElement\n * @member {TextTrack} track\n * The underlying TextTrack object.\n * @instance\n *\n */\n track: {\n get: function get() {\n return track;\n }\n }\n });\n readyState = NONE;\n /**\n * @listens TextTrack#loadeddata\n * @fires HTMLTrackElement#load\n */\n\n track.addEventListener('loadeddata', function () {\n readyState = LOADED;\n\n _this.trigger({\n type: 'load',\n target: _assertThisInitialized(_this)\n });\n });\n return _this;\n }\n\n return HTMLTrackElement;\n}(EventTarget$2);\n\nHTMLTrackElement.prototype.allowedEvents_ = {\n load: 'load'\n};\nHTMLTrackElement.NONE = NONE;\nHTMLTrackElement.LOADING = LOADING;\nHTMLTrackElement.LOADED = LOADED;\nHTMLTrackElement.ERROR = ERROR;\n\n/*\n * This file contains all track properties that are used in\n * player.js, tech.js, html5.js and possibly other techs in the future.\n */\n\nvar NORMAL = {\n audio: {\n ListClass: AudioTrackList,\n TrackClass: AudioTrack,\n capitalName: 'Audio'\n },\n video: {\n ListClass: VideoTrackList,\n TrackClass: VideoTrack,\n capitalName: 'Video'\n },\n text: {\n ListClass: TextTrackList,\n TrackClass: TextTrack,\n capitalName: 'Text'\n }\n};\nObject.keys(NORMAL).forEach(function (type) {\n NORMAL[type].getterName = type + \"Tracks\";\n NORMAL[type].privateName = type + \"Tracks_\";\n});\nvar REMOTE = {\n remoteText: {\n ListClass: TextTrackList,\n TrackClass: TextTrack,\n capitalName: 'RemoteText',\n getterName: 'remoteTextTracks',\n privateName: 'remoteTextTracks_'\n },\n remoteTextEl: {\n ListClass: HtmlTrackElementList,\n TrackClass: HTMLTrackElement,\n capitalName: 'RemoteTextTrackEls',\n getterName: 'remoteTextTrackEls',\n privateName: 'remoteTextTrackEls_'\n }\n};\n\nvar ALL = _extends({}, NORMAL, REMOTE);\n\nREMOTE.names = Object.keys(REMOTE);\nNORMAL.names = Object.keys(NORMAL);\nALL.names = [].concat(REMOTE.names).concat(NORMAL.names);\n\n/**\n * An Object containing a structure like: `{src: 'url', type: 'mimetype'}` or string\n * that just contains the src url alone.\n * * `var SourceObject = {src: 'http://ex.com/video.mp4', type: 'video/mp4'};`\n * `var SourceString = 'http://example.com/some-video.mp4';`\n *\n * @typedef {Object|string} Tech~SourceObject\n *\n * @property {string} src\n * The url to the source\n *\n * @property {string} type\n * The mime type of the source\n */\n\n/**\n * A function used by {@link Tech} to create a new {@link TextTrack}.\n *\n * @private\n *\n * @param {Tech} self\n * An instance of the Tech class.\n *\n * @param {string} kind\n * `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)\n *\n * @param {string} [label]\n * Label to identify the text track\n *\n * @param {string} [language]\n * Two letter language abbreviation\n *\n * @param {Object} [options={}]\n * An object with additional text track options\n *\n * @return {TextTrack}\n * The text track that was created.\n */\n\nfunction createTrackHelper(self, kind, label, language, options) {\n if (options === void 0) {\n options = {};\n }\n\n var tracks = self.textTracks();\n options.kind = kind;\n\n if (label) {\n options.label = label;\n }\n\n if (language) {\n options.language = language;\n }\n\n options.tech = self;\n var track = new ALL.text.TrackClass(options);\n tracks.addTrack(track);\n return track;\n}\n/**\n * This is the base class for media playback technology controllers, such as\n * {@link HTML5}\n *\n * @extends Component\n */\n\n\nvar Tech = /*#__PURE__*/function (_Component) {\n _inheritsLoose(Tech, _Component);\n\n /**\n * Create an instance of this Tech.\n *\n * @param {Object} [options]\n * The key/value store of player options.\n *\n * @param {Component~ReadyCallback} ready\n * Callback function to call when the `HTML5` Tech is ready.\n */\n function Tech(options, ready) {\n var _this;\n\n if (options === void 0) {\n options = {};\n }\n\n if (ready === void 0) {\n ready = function ready() {};\n }\n\n // we don't want the tech to report user activity automatically.\n // This is done manually in addControlsListeners\n options.reportTouchActivity = false;\n _this = _Component.call(this, null, options, ready) || this;\n\n _this.onDurationChange_ = function (e) {\n return _this.onDurationChange(e);\n };\n\n _this.trackProgress_ = function (e) {\n return _this.trackProgress(e);\n };\n\n _this.trackCurrentTime_ = function (e) {\n return _this.trackCurrentTime(e);\n };\n\n _this.stopTrackingCurrentTime_ = function (e) {\n return _this.stopTrackingCurrentTime(e);\n };\n\n _this.disposeSourceHandler_ = function (e) {\n return _this.disposeSourceHandler(e);\n }; // keep track of whether the current source has played at all to\n // implement a very limited played()\n\n\n _this.hasStarted_ = false;\n\n _this.on('playing', function () {\n this.hasStarted_ = true;\n });\n\n _this.on('loadstart', function () {\n this.hasStarted_ = false;\n });\n\n ALL.names.forEach(function (name) {\n var props = ALL[name];\n\n if (options && options[props.getterName]) {\n _this[props.privateName] = options[props.getterName];\n }\n }); // Manually track progress in cases where the browser/tech doesn't report it.\n\n if (!_this.featuresProgressEvents) {\n _this.manualProgressOn();\n } // Manually track timeupdates in cases where the browser/tech doesn't report it.\n\n\n if (!_this.featuresTimeupdateEvents) {\n _this.manualTimeUpdatesOn();\n }\n\n ['Text', 'Audio', 'Video'].forEach(function (track) {\n if (options[\"native\" + track + \"Tracks\"] === false) {\n _this[\"featuresNative\" + track + \"Tracks\"] = false;\n }\n });\n\n if (options.nativeCaptions === false || options.nativeTextTracks === false) {\n _this.featuresNativeTextTracks = false;\n } else if (options.nativeCaptions === true || options.nativeTextTracks === true) {\n _this.featuresNativeTextTracks = true;\n }\n\n if (!_this.featuresNativeTextTracks) {\n _this.emulateTextTracks();\n }\n\n _this.preloadTextTracks = options.preloadTextTracks !== false;\n _this.autoRemoteTextTracks_ = new ALL.text.ListClass();\n\n _this.initTrackListeners(); // Turn on component tap events only if not using native controls\n\n\n if (!options.nativeControlsForTouch) {\n _this.emitTapEvents();\n }\n\n if (_this.constructor) {\n _this.name_ = _this.constructor.name || 'Unknown Tech';\n }\n\n return _this;\n }\n /**\n * A special function to trigger source set in a way that will allow player\n * to re-trigger if the player or tech are not ready yet.\n *\n * @fires Tech#sourceset\n * @param {string} src The source string at the time of the source changing.\n */\n\n\n var _proto = Tech.prototype;\n\n _proto.triggerSourceset = function triggerSourceset(src) {\n var _this2 = this;\n\n if (!this.isReady_) {\n // on initial ready we have to trigger source set\n // 1ms after ready so that player can watch for it.\n this.one('ready', function () {\n return _this2.setTimeout(function () {\n return _this2.triggerSourceset(src);\n }, 1);\n });\n }\n /**\n * Fired when the source is set on the tech causing the media element\n * to reload.\n *\n * @see {@link Player#event:sourceset}\n * @event Tech#sourceset\n * @type {EventTarget~Event}\n */\n\n\n this.trigger({\n src: src,\n type: 'sourceset'\n });\n }\n /* Fallbacks for unsupported event types\n ================================================================================ */\n\n /**\n * Polyfill the `progress` event for browsers that don't support it natively.\n *\n * @see {@link Tech#trackProgress}\n */\n ;\n\n _proto.manualProgressOn = function manualProgressOn() {\n this.on('durationchange', this.onDurationChange_);\n this.manualProgress = true; // Trigger progress watching when a source begins loading\n\n this.one('ready', this.trackProgress_);\n }\n /**\n * Turn off the polyfill for `progress` events that was created in\n * {@link Tech#manualProgressOn}\n */\n ;\n\n _proto.manualProgressOff = function manualProgressOff() {\n this.manualProgress = false;\n this.stopTrackingProgress();\n this.off('durationchange', this.onDurationChange_);\n }\n /**\n * This is used to trigger a `progress` event when the buffered percent changes. It\n * sets an interval function that will be called every 500 milliseconds to check if the\n * buffer end percent has changed.\n *\n * > This function is called by {@link Tech#manualProgressOn}\n *\n * @param {EventTarget~Event} event\n * The `ready` event that caused this to run.\n *\n * @listens Tech#ready\n * @fires Tech#progress\n */\n ;\n\n _proto.trackProgress = function trackProgress(event) {\n this.stopTrackingProgress();\n this.progressInterval = this.setInterval(bind(this, function () {\n // Don't trigger unless buffered amount is greater than last time\n var numBufferedPercent = this.bufferedPercent();\n\n if (this.bufferedPercent_ !== numBufferedPercent) {\n /**\n * See {@link Player#progress}\n *\n * @event Tech#progress\n * @type {EventTarget~Event}\n */\n this.trigger('progress');\n }\n\n this.bufferedPercent_ = numBufferedPercent;\n\n if (numBufferedPercent === 1) {\n this.stopTrackingProgress();\n }\n }), 500);\n }\n /**\n * Update our internal duration on a `durationchange` event by calling\n * {@link Tech#duration}.\n *\n * @param {EventTarget~Event} event\n * The `durationchange` event that caused this to run.\n *\n * @listens Tech#durationchange\n */\n ;\n\n _proto.onDurationChange = function onDurationChange(event) {\n this.duration_ = this.duration();\n }\n /**\n * Get and create a `TimeRange` object for buffering.\n *\n * @return {TimeRange}\n * The time range object that was created.\n */\n ;\n\n _proto.buffered = function buffered() {\n return createTimeRanges(0, 0);\n }\n /**\n * Get the percentage of the current video that is currently buffered.\n *\n * @return {number}\n * A number from 0 to 1 that represents the decimal percentage of the\n * video that is buffered.\n *\n */\n ;\n\n _proto.bufferedPercent = function bufferedPercent$1() {\n return bufferedPercent(this.buffered(), this.duration_);\n }\n /**\n * Turn off the polyfill for `progress` events that was created in\n * {@link Tech#manualProgressOn}\n * Stop manually tracking progress events by clearing the interval that was set in\n * {@link Tech#trackProgress}.\n */\n ;\n\n _proto.stopTrackingProgress = function stopTrackingProgress() {\n this.clearInterval(this.progressInterval);\n }\n /**\n * Polyfill the `timeupdate` event for browsers that don't support it.\n *\n * @see {@link Tech#trackCurrentTime}\n */\n ;\n\n _proto.manualTimeUpdatesOn = function manualTimeUpdatesOn() {\n this.manualTimeUpdates = true;\n this.on('play', this.trackCurrentTime_);\n this.on('pause', this.stopTrackingCurrentTime_);\n }\n /**\n * Turn off the polyfill for `timeupdate` events that was created in\n * {@link Tech#manualTimeUpdatesOn}\n */\n ;\n\n _proto.manualTimeUpdatesOff = function manualTimeUpdatesOff() {\n this.manualTimeUpdates = false;\n this.stopTrackingCurrentTime();\n this.off('play', this.trackCurrentTime_);\n this.off('pause', this.stopTrackingCurrentTime_);\n }\n /**\n * Sets up an interval function to track current time and trigger `timeupdate` every\n * 250 milliseconds.\n *\n * @listens Tech#play\n * @triggers Tech#timeupdate\n */\n ;\n\n _proto.trackCurrentTime = function trackCurrentTime() {\n if (this.currentTimeInterval) {\n this.stopTrackingCurrentTime();\n }\n\n this.currentTimeInterval = this.setInterval(function () {\n /**\n * Triggered at an interval of 250ms to indicated that time is passing in the video.\n *\n * @event Tech#timeupdate\n * @type {EventTarget~Event}\n */\n this.trigger({\n type: 'timeupdate',\n target: this,\n manuallyTriggered: true\n }); // 42 = 24 fps // 250 is what Webkit uses // FF uses 15\n }, 250);\n }\n /**\n * Stop the interval function created in {@link Tech#trackCurrentTime} so that the\n * `timeupdate` event is no longer triggered.\n *\n * @listens {Tech#pause}\n */\n ;\n\n _proto.stopTrackingCurrentTime = function stopTrackingCurrentTime() {\n this.clearInterval(this.currentTimeInterval); // #1002 - if the video ends right before the next timeupdate would happen,\n // the progress bar won't make it all the way to the end\n\n this.trigger({\n type: 'timeupdate',\n target: this,\n manuallyTriggered: true\n });\n }\n /**\n * Turn off all event polyfills, clear the `Tech`s {@link AudioTrackList},\n * {@link VideoTrackList}, and {@link TextTrackList}, and dispose of this Tech.\n *\n * @fires Component#dispose\n */\n ;\n\n _proto.dispose = function dispose() {\n // clear out all tracks because we can't reuse them between techs\n this.clearTracks(NORMAL.names); // Turn off any manual progress or timeupdate tracking\n\n if (this.manualProgress) {\n this.manualProgressOff();\n }\n\n if (this.manualTimeUpdates) {\n this.manualTimeUpdatesOff();\n }\n\n _Component.prototype.dispose.call(this);\n }\n /**\n * Clear out a single `TrackList` or an array of `TrackLists` given their names.\n *\n * > Note: Techs without source handlers should call this between sources for `video`\n * & `audio` tracks. You don't want to use them between tracks!\n *\n * @param {string[]|string} types\n * TrackList names to clear, valid names are `video`, `audio`, and\n * `text`.\n */\n ;\n\n _proto.clearTracks = function clearTracks(types) {\n var _this3 = this;\n\n types = [].concat(types); // clear out all tracks because we can't reuse them between techs\n\n types.forEach(function (type) {\n var list = _this3[type + \"Tracks\"]() || [];\n var i = list.length;\n\n while (i--) {\n var track = list[i];\n\n if (type === 'text') {\n _this3.removeRemoteTextTrack(track);\n }\n\n list.removeTrack(track);\n }\n });\n }\n /**\n * Remove any TextTracks added via addRemoteTextTrack that are\n * flagged for automatic garbage collection\n */\n ;\n\n _proto.cleanupAutoTextTracks = function cleanupAutoTextTracks() {\n var list = this.autoRemoteTextTracks_ || [];\n var i = list.length;\n\n while (i--) {\n var track = list[i];\n this.removeRemoteTextTrack(track);\n }\n }\n /**\n * Reset the tech, which will removes all sources and reset the internal readyState.\n *\n * @abstract\n */\n ;\n\n _proto.reset = function reset() {}\n /**\n * Get the value of `crossOrigin` from the tech.\n *\n * @abstract\n *\n * @see {Html5#crossOrigin}\n */\n ;\n\n _proto.crossOrigin = function crossOrigin() {}\n /**\n * Set the value of `crossOrigin` on the tech.\n *\n * @abstract\n *\n * @param {string} crossOrigin the crossOrigin value\n * @see {Html5#setCrossOrigin}\n */\n ;\n\n _proto.setCrossOrigin = function setCrossOrigin() {}\n /**\n * Get or set an error on the Tech.\n *\n * @param {MediaError} [err]\n * Error to set on the Tech\n *\n * @return {MediaError|null}\n * The current error object on the tech, or null if there isn't one.\n */\n ;\n\n _proto.error = function error(err) {\n if (err !== undefined) {\n this.error_ = new MediaError(err);\n this.trigger('error');\n }\n\n return this.error_;\n }\n /**\n * Returns the `TimeRange`s that have been played through for the current source.\n *\n * > NOTE: This implementation is incomplete. It does not track the played `TimeRange`.\n * It only checks whether the source has played at all or not.\n *\n * @return {TimeRange}\n * - A single time range if this video has played\n * - An empty set of ranges if not.\n */\n ;\n\n _proto.played = function played() {\n if (this.hasStarted_) {\n return createTimeRanges(0, 0);\n }\n\n return createTimeRanges();\n }\n /**\n * Start playback\n *\n * @abstract\n *\n * @see {Html5#play}\n */\n ;\n\n _proto.play = function play() {}\n /**\n * Set whether we are scrubbing or not\n *\n * @abstract\n *\n * @see {Html5#setScrubbing}\n */\n ;\n\n _proto.setScrubbing = function setScrubbing() {}\n /**\n * Get whether we are scrubbing or not\n *\n * @abstract\n *\n * @see {Html5#scrubbing}\n */\n ;\n\n _proto.scrubbing = function scrubbing() {}\n /**\n * Causes a manual time update to occur if {@link Tech#manualTimeUpdatesOn} was\n * previously called.\n *\n * @fires Tech#timeupdate\n */\n ;\n\n _proto.setCurrentTime = function setCurrentTime() {\n // improve the accuracy of manual timeupdates\n if (this.manualTimeUpdates) {\n /**\n * A manual `timeupdate` event.\n *\n * @event Tech#timeupdate\n * @type {EventTarget~Event}\n */\n this.trigger({\n type: 'timeupdate',\n target: this,\n manuallyTriggered: true\n });\n }\n }\n /**\n * Turn on listeners for {@link VideoTrackList}, {@link {AudioTrackList}, and\n * {@link TextTrackList} events.\n *\n * This adds {@link EventTarget~EventListeners} for `addtrack`, and `removetrack`.\n *\n * @fires Tech#audiotrackchange\n * @fires Tech#videotrackchange\n * @fires Tech#texttrackchange\n */\n ;\n\n _proto.initTrackListeners = function initTrackListeners() {\n var _this4 = this;\n\n /**\n * Triggered when tracks are added or removed on the Tech {@link AudioTrackList}\n *\n * @event Tech#audiotrackchange\n * @type {EventTarget~Event}\n */\n\n /**\n * Triggered when tracks are added or removed on the Tech {@link VideoTrackList}\n *\n * @event Tech#videotrackchange\n * @type {EventTarget~Event}\n */\n\n /**\n * Triggered when tracks are added or removed on the Tech {@link TextTrackList}\n *\n * @event Tech#texttrackchange\n * @type {EventTarget~Event}\n */\n NORMAL.names.forEach(function (name) {\n var props = NORMAL[name];\n\n var trackListChanges = function trackListChanges() {\n _this4.trigger(name + \"trackchange\");\n };\n\n var tracks = _this4[props.getterName]();\n\n tracks.addEventListener('removetrack', trackListChanges);\n tracks.addEventListener('addtrack', trackListChanges);\n\n _this4.on('dispose', function () {\n tracks.removeEventListener('removetrack', trackListChanges);\n tracks.removeEventListener('addtrack', trackListChanges);\n });\n });\n }\n /**\n * Emulate TextTracks using vtt.js if necessary\n *\n * @fires Tech#vttjsloaded\n * @fires Tech#vttjserror\n */\n ;\n\n _proto.addWebVttScript_ = function addWebVttScript_() {\n var _this5 = this;\n\n if (window.WebVTT) {\n return;\n } // Initially, Tech.el_ is a child of a dummy-div wait until the Component system\n // signals that the Tech is ready at which point Tech.el_ is part of the DOM\n // before inserting the WebVTT script\n\n\n if (document.body.contains(this.el())) {\n // load via require if available and vtt.js script location was not passed in\n // as an option. novtt builds will turn the above require call into an empty object\n // which will cause this if check to always fail.\n if (!this.options_['vtt.js'] && isPlain(vtt) && Object.keys(vtt).length > 0) {\n this.trigger('vttjsloaded');\n return;\n } // load vtt.js via the script location option or the cdn of no location was\n // passed in\n\n\n var script = document.createElement('script');\n script.src = this.options_['vtt.js'] || 'https://vjs.zencdn.net/vttjs/0.14.1/vtt.min.js';\n\n script.onload = function () {\n /**\n * Fired when vtt.js is loaded.\n *\n * @event Tech#vttjsloaded\n * @type {EventTarget~Event}\n */\n _this5.trigger('vttjsloaded');\n };\n\n script.onerror = function () {\n /**\n * Fired when vtt.js was not loaded due to an error\n *\n * @event Tech#vttjsloaded\n * @type {EventTarget~Event}\n */\n _this5.trigger('vttjserror');\n };\n\n this.on('dispose', function () {\n script.onload = null;\n script.onerror = null;\n }); // but have not loaded yet and we set it to true before the inject so that\n // we don't overwrite the injected window.WebVTT if it loads right away\n\n window.WebVTT = true;\n this.el().parentNode.appendChild(script);\n } else {\n this.ready(this.addWebVttScript_);\n }\n }\n /**\n * Emulate texttracks\n *\n */\n ;\n\n _proto.emulateTextTracks = function emulateTextTracks() {\n var _this6 = this;\n\n var tracks = this.textTracks();\n var remoteTracks = this.remoteTextTracks();\n\n var handleAddTrack = function handleAddTrack(e) {\n return tracks.addTrack(e.track);\n };\n\n var handleRemoveTrack = function handleRemoveTrack(e) {\n return tracks.removeTrack(e.track);\n };\n\n remoteTracks.on('addtrack', handleAddTrack);\n remoteTracks.on('removetrack', handleRemoveTrack);\n this.addWebVttScript_();\n\n var updateDisplay = function updateDisplay() {\n return _this6.trigger('texttrackchange');\n };\n\n var textTracksChanges = function textTracksChanges() {\n updateDisplay();\n\n for (var i = 0; i < tracks.length; i++) {\n var track = tracks[i];\n track.removeEventListener('cuechange', updateDisplay);\n\n if (track.mode === 'showing') {\n track.addEventListener('cuechange', updateDisplay);\n }\n }\n };\n\n textTracksChanges();\n tracks.addEventListener('change', textTracksChanges);\n tracks.addEventListener('addtrack', textTracksChanges);\n tracks.addEventListener('removetrack', textTracksChanges);\n this.on('dispose', function () {\n remoteTracks.off('addtrack', handleAddTrack);\n remoteTracks.off('removetrack', handleRemoveTrack);\n tracks.removeEventListener('change', textTracksChanges);\n tracks.removeEventListener('addtrack', textTracksChanges);\n tracks.removeEventListener('removetrack', textTracksChanges);\n\n for (var i = 0; i < tracks.length; i++) {\n var track = tracks[i];\n track.removeEventListener('cuechange', updateDisplay);\n }\n });\n }\n /**\n * Create and returns a remote {@link TextTrack} object.\n *\n * @param {string} kind\n * `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata)\n *\n * @param {string} [label]\n * Label to identify the text track\n *\n * @param {string} [language]\n * Two letter language abbreviation\n *\n * @return {TextTrack}\n * The TextTrack that gets created.\n */\n ;\n\n _proto.addTextTrack = function addTextTrack(kind, label, language) {\n if (!kind) {\n throw new Error('TextTrack kind is required but was not provided');\n }\n\n return createTrackHelper(this, kind, label, language);\n }\n /**\n * Create an emulated TextTrack for use by addRemoteTextTrack\n *\n * This is intended to be overridden by classes that inherit from\n * Tech in order to create native or custom TextTracks.\n *\n * @param {Object} options\n * The object should contain the options to initialize the TextTrack with.\n *\n * @param {string} [options.kind]\n * `TextTrack` kind (subtitles, captions, descriptions, chapters, or metadata).\n *\n * @param {string} [options.label].\n * Label to identify the text track\n *\n * @param {string} [options.language]\n * Two letter language abbreviation.\n *\n * @return {HTMLTrackElement}\n * The track element that gets created.\n */\n ;\n\n _proto.createRemoteTextTrack = function createRemoteTextTrack(options) {\n var track = mergeOptions$3(options, {\n tech: this\n });\n return new REMOTE.remoteTextEl.TrackClass(track);\n }\n /**\n * Creates a remote text track object and returns an html track element.\n *\n * > Note: This can be an emulated {@link HTMLTrackElement} or a native one.\n *\n * @param {Object} options\n * See {@link Tech#createRemoteTextTrack} for more detailed properties.\n *\n * @param {boolean} [manualCleanup=true]\n * - When false: the TextTrack will be automatically removed from the video\n * element whenever the source changes\n * - When True: The TextTrack will have to be cleaned up manually\n *\n * @return {HTMLTrackElement}\n * An Html Track Element.\n *\n * @deprecated The default functionality for this function will be equivalent\n * to \"manualCleanup=false\" in the future. The manualCleanup parameter will\n * also be removed.\n */\n ;\n\n _proto.addRemoteTextTrack = function addRemoteTextTrack(options, manualCleanup) {\n var _this7 = this;\n\n if (options === void 0) {\n options = {};\n }\n\n var htmlTrackElement = this.createRemoteTextTrack(options);\n\n if (manualCleanup !== true && manualCleanup !== false) {\n // deprecation warning\n log$1.warn('Calling addRemoteTextTrack without explicitly setting the \"manualCleanup\" parameter to `true` is deprecated and default to `false` in future version of video.js');\n manualCleanup = true;\n } // store HTMLTrackElement and TextTrack to remote list\n\n\n this.remoteTextTrackEls().addTrackElement_(htmlTrackElement);\n this.remoteTextTracks().addTrack(htmlTrackElement.track);\n\n if (manualCleanup !== true) {\n // create the TextTrackList if it doesn't exist\n this.ready(function () {\n return _this7.autoRemoteTextTracks_.addTrack(htmlTrackElement.track);\n });\n }\n\n return htmlTrackElement;\n }\n /**\n * Remove a remote text track from the remote `TextTrackList`.\n *\n * @param {TextTrack} track\n * `TextTrack` to remove from the `TextTrackList`\n */\n ;\n\n _proto.removeRemoteTextTrack = function removeRemoteTextTrack(track) {\n var trackElement = this.remoteTextTrackEls().getTrackElementByTrack_(track); // remove HTMLTrackElement and TextTrack from remote list\n\n this.remoteTextTrackEls().removeTrackElement_(trackElement);\n this.remoteTextTracks().removeTrack(track);\n this.autoRemoteTextTracks_.removeTrack(track);\n }\n /**\n * Gets available media playback quality metrics as specified by the W3C's Media\n * Playback Quality API.\n *\n * @see [Spec]{@link https://wicg.github.io/media-playback-quality}\n *\n * @return {Object}\n * An object with supported media playback quality metrics\n *\n * @abstract\n */\n ;\n\n _proto.getVideoPlaybackQuality = function getVideoPlaybackQuality() {\n return {};\n }\n /**\n * Attempt to create a floating video window always on top of other windows\n * so that users may continue consuming media while they interact with other\n * content sites, or applications on their device.\n *\n * @see [Spec]{@link https://wicg.github.io/picture-in-picture}\n *\n * @return {Promise|undefined}\n * A promise with a Picture-in-Picture window if the browser supports\n * Promises (or one was passed in as an option). It returns undefined\n * otherwise.\n *\n * @abstract\n */\n ;\n\n _proto.requestPictureInPicture = function requestPictureInPicture() {\n var PromiseClass = this.options_.Promise || window.Promise;\n\n if (PromiseClass) {\n return PromiseClass.reject();\n }\n }\n /**\n * A method to check for the value of the 'disablePictureInPicture'