--> TEXT)\n if (morphedNodeType === ELEMENT_NODE) {\n if (toNodeType === ELEMENT_NODE) {\n if (!compareNodeNames(fromNode, toNode)) {\n onNodeDiscarded(fromNode);\n morphedNode = moveChildren(fromNode, createElementNS(toNode.nodeName, toNode.namespaceURI));\n }\n } else {\n // Going from an element node to a text node\n morphedNode = toNode;\n }\n } else if (morphedNodeType === TEXT_NODE || morphedNodeType === COMMENT_NODE) { // Text or comment node\n if (toNodeType === morphedNodeType) {\n if (morphedNode.nodeValue !== toNode.nodeValue) {\n morphedNode.nodeValue = toNode.nodeValue;\n }\n\n return morphedNode;\n } else {\n // Text node to something else\n morphedNode = toNode;\n }\n }\n }\n\n if (morphedNode === toNode) {\n // The \"to node\" was not compatible with the \"from node\" so we had to\n // toss out the \"from node\" and use the \"to node\"\n onNodeDiscarded(fromNode);\n } else {\n if (toNode.isSameNode && toNode.isSameNode(morphedNode)) {\n return;\n }\n\n morphEl(morphedNode, toNode, childrenOnly);\n\n // We now need to loop over any keyed nodes that might need to be\n // removed. We only do the removal if we know that the keyed node\n // never found a match. When a keyed node is matched up we remove\n // it out of fromNodesLookup and we use fromNodesLookup to determine\n // if a keyed node has been matched up or not\n if (keyedRemovalList) {\n for (var i=0, len=keyedRemovalList.length; i
\";\n\nvar contributors = [ \"Andrew Mason \", \"Julian Rubisch \", \"Marco Roth \", \"Nathan Hopkins \" ];\n\nvar main = \"./dist/cable_ready.js\";\n\nvar module = \"./dist/cable_ready.js\";\n\nvar browser = \"./dist/cable_ready.js\";\n\nvar unpkg = \"./dist/cable_ready.umd.js\";\n\nvar umd = \"./dist/cable_ready.umd.js\";\n\nvar files = [ \"dist/*\", \"javascript/*\" ];\n\nvar scripts = {\n lint: \"yarn run format --check\",\n format: \"yarn run prettier-standard ./javascript/**/*.js rollup.config.mjs\",\n build: \"yarn rollup -c\",\n watch: \"yarn rollup -wc\",\n test: \"web-test-runner javascript/test/**/*.test.js\",\n \"docs:dev\": \"vitepress dev docs\",\n \"docs:build\": \"vitepress build docs && cp ./docs/_redirects ./docs/.vitepress/dist\",\n \"docs:preview\": \"vitepress preview docs\"\n};\n\nvar dependencies = {\n morphdom: \"2.6.1\"\n};\n\nvar devDependencies = {\n \"@open-wc/testing\": \"^3.1.7\",\n \"@rollup/plugin-json\": \"^6.0.0\",\n \"@rollup/plugin-node-resolve\": \"^15.0.1\",\n \"@rollup/plugin-terser\": \"^0.4.0\",\n \"@web/dev-server-esbuild\": \"^0.3.3\",\n \"@web/dev-server-rollup\": \"^0.3.21\",\n \"@web/test-runner\": \"^0.15.1\",\n \"prettier-standard\": \"^16.4.1\",\n rollup: \"^3.19.1\",\n sinon: \"^15.0.2\",\n vite: \"^4.1.4\",\n vitepress: \"^1.0.0-beta.1\",\n \"vitepress-plugin-search\": \"^1.0.4-alpha.19\"\n};\n\nvar packageInfo = {\n name: name,\n version: version,\n description: description,\n keywords: keywords,\n homepage: homepage,\n bugs: bugs,\n repository: repository,\n license: license,\n author: author,\n contributors: contributors,\n main: main,\n module: module,\n browser: browser,\n import: \"./dist/cable_ready.js\",\n unpkg: unpkg,\n umd: umd,\n files: files,\n scripts: scripts,\n dependencies: dependencies,\n devDependencies: devDependencies\n};\n\nconst inputTags = {\n INPUT: true,\n TEXTAREA: true,\n SELECT: true\n};\n\nconst mutableTags = {\n INPUT: true,\n TEXTAREA: true,\n OPTION: true\n};\n\nconst textInputTypes = {\n \"datetime-local\": true,\n \"select-multiple\": true,\n \"select-one\": true,\n color: true,\n date: true,\n datetime: true,\n email: true,\n month: true,\n number: true,\n password: true,\n range: true,\n search: true,\n tel: true,\n text: true,\n textarea: true,\n time: true,\n url: true,\n week: true\n};\n\nlet activeElement;\n\nvar ActiveElement = {\n get element() {\n return activeElement;\n },\n set(element) {\n activeElement = element;\n }\n};\n\n// Indicates if the passed element is considered a text input.\n\nconst isTextInput = element => inputTags[element.tagName] && textInputTypes[element.type];\n\n// Assigns focus to the appropriate element... preferring the explicitly passed selector\n\n// * selector - a CSS selector for the element that should have focus\n\nconst assignFocus = selector => {\n const element = selector && selector.nodeType === Node.ELEMENT_NODE ? selector : document.querySelector(selector);\n const focusElement = element || ActiveElement.element;\n if (focusElement && focusElement.focus) focusElement.focus();\n};\n\n// Dispatches an event on the passed element\n\n// * element - the element\n// * name - the name of the event\n// * detail - the event detail\n\nconst dispatch = (element, name, detail = {}) => {\n const init = {\n bubbles: true,\n cancelable: true,\n detail: detail\n };\n const event = new CustomEvent(name, init);\n element.dispatchEvent(event);\n if (window.jQuery) window.jQuery(element).trigger(name, detail);\n};\n\n// Accepts an xPath query and returns the element found at that position in the DOM\n\nconst xpathToElement = xpath => document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;\n\n// Accepts an xPath query and returns all matching elements in the DOM\n\nconst xpathToElementArray = (xpath, reverse = false) => {\n const snapshotList = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);\n const snapshots = [];\n for (let i = 0; i < snapshotList.snapshotLength; i++) {\n snapshots.push(snapshotList.snapshotItem(i));\n }\n return reverse ? snapshots.reverse() : snapshots;\n};\n\n// Return an array with the class names to be used\n\n// * names - could be a string or an array of strings for multiple classes.\n\nconst getClassNames = names => Array.from(names).flat()\n// Perform operation for either the first or all of the elements returned by CSS selector\n\n// * operation - the instruction payload from perform\n// * callback - the operation function to run for each element\n\n;\n\nconst processElements = (operation, callback) => {\n Array.from(operation.selectAll ? operation.element : [ operation.element ]).forEach(callback);\n};\n\n// convert string to kebab-case\n// most other implementations (lodash) are focused on camelCase to kebab-case\n// instead, this uses word token boundaries to produce readable URL slugs and keys\n// this implementation will not support Emoji or other non-ASCII characters\n\nconst kebabize = createCompounder((function(result, word, index) {\n return result + (index ? \"-\" : \"\") + word.toLowerCase();\n}));\n\nfunction createCompounder(callback) {\n return function(str) {\n return words(str).reduce(callback, \"\");\n };\n}\n\nconst words = str => {\n str = str == null ? \"\" : str;\n return str.match(/([A-Z]{2,}|[0-9]+|[A-Z]?[a-z]+|[A-Z])/g) || [];\n};\n\n// Provide a standardized pipeline of checks and modifications to all operations based on provided options\n// Currently skips execution if cancelled and implements an optional delay\n\nconst operate = (operation, callback) => {\n if (!operation.cancel) {\n operation.delay ? setTimeout(callback, operation.delay) : callback();\n return true;\n }\n return false;\n};\n\n// Dispatch life-cycle events with standardized naming\nconst before = (target, operation) => dispatch(target, `cable-ready:before-${kebabize(operation.operation)}`, operation);\n\nconst after = (target, operation) => dispatch(target, `cable-ready:after-${kebabize(operation.operation)}`, operation);\n\nfunction debounce(fn, delay = 250) {\n let timer;\n return (...args) => {\n const callback = () => fn.apply(this, args);\n if (timer) clearTimeout(timer);\n timer = setTimeout(callback, delay);\n };\n}\n\nfunction handleErrors(response) {\n if (!response.ok) throw Error(response.statusText);\n return response;\n}\n\nfunction safeScalar(val) {\n if (val !== undefined && ![ \"string\", \"number\", \"boolean\" ].includes(typeof val)) console.warn(`Operation expects a string, number or boolean, but got ${val} (${typeof val})`);\n return val != null ? val : \"\";\n}\n\nfunction safeString(str) {\n if (str !== undefined && typeof str !== \"string\") console.warn(`Operation expects a string, but got ${str} (${typeof str})`);\n return str != null ? String(str) : \"\";\n}\n\nfunction safeArray(arr) {\n if (arr !== undefined && !Array.isArray(arr)) console.warn(`Operation expects an array, but got ${arr} (${typeof arr})`);\n return arr != null ? Array.from(arr) : [];\n}\n\nfunction safeObject(obj) {\n if (obj !== undefined && typeof obj !== \"object\") console.warn(`Operation expects an object, but got ${obj} (${typeof obj})`);\n return obj != null ? Object(obj) : {};\n}\n\nfunction safeStringOrArray(elem) {\n if (elem !== undefined && !Array.isArray(elem) && typeof elem !== \"string\") console.warn(`Operation expects an Array or a String, but got ${elem} (${typeof elem})`);\n return elem == null ? \"\" : Array.isArray(elem) ? Array.from(elem) : String(elem);\n}\n\nfunction fragmentToString(fragment) {\n return (new XMLSerializer).serializeToString(fragment);\n}\n\n// A proxy method to wrap a fetch call in error handling\n\n// * url - the URL to fetch\n// * additionalHeaders - an object of additional headers passed to fetch\n\nasync function graciouslyFetch(url, additionalHeaders) {\n try {\n const response = await fetch(url, {\n headers: {\n \"X-REQUESTED-WITH\": \"XmlHttpRequest\",\n ...additionalHeaders\n }\n });\n if (response == undefined) return;\n handleErrors(response);\n return response;\n } catch (e) {\n console.error(`Could not fetch ${url}`);\n }\n}\n\nclass BoundedQueue {\n constructor(maxSize) {\n this.maxSize = maxSize;\n this.queue = [];\n }\n push(item) {\n if (this.isFull()) {\n // Remove the oldest item to make space for the new one\n this.shift();\n }\n this.queue.push(item);\n }\n shift() {\n return this.queue.shift();\n }\n isFull() {\n return this.queue.length === this.maxSize;\n }\n}\n\nvar utils = Object.freeze({\n __proto__: null,\n BoundedQueue: BoundedQueue,\n after: after,\n assignFocus: assignFocus,\n before: before,\n debounce: debounce,\n dispatch: dispatch,\n fragmentToString: fragmentToString,\n getClassNames: getClassNames,\n graciouslyFetch: graciouslyFetch,\n handleErrors: handleErrors,\n isTextInput: isTextInput,\n kebabize: kebabize,\n operate: operate,\n processElements: processElements,\n safeArray: safeArray,\n safeObject: safeObject,\n safeScalar: safeScalar,\n safeString: safeString,\n safeStringOrArray: safeStringOrArray,\n xpathToElement: xpathToElement,\n xpathToElementArray: xpathToElementArray\n});\n\n// Indicates whether or not we should morph an element via onBeforeElUpdated callback\n// SEE: https://github.com/patrick-steele-idem/morphdom#morphdomfromnode-tonode-options--node\n\nconst shouldMorph = operation => (fromEl, toEl) => !shouldMorphCallbacks.map((callback => typeof callback === \"function\" ? callback(operation, fromEl, toEl) : true)).includes(false)\n// Execute any pluggable functions that modify elements after morphing via onElUpdated callback\n\n;\n\nconst didMorph = operation => el => {\n didMorphCallbacks.forEach((callback => {\n if (typeof callback === \"function\") callback(operation, el);\n }));\n};\n\nconst verifyNotMutable = (detail, fromEl, toEl) => {\n // Skip nodes that are equal:\n // https://github.com/patrick-steele-idem/morphdom#can-i-make-morphdom-blaze-through-the-dom-tree-even-faster-yes\n if (!mutableTags[fromEl.tagName] && fromEl.isEqualNode(toEl)) return false;\n return true;\n};\n\nconst verifyNotContentEditable = (detail, fromEl, toEl) => {\n if (fromEl === ActiveElement.element && fromEl.isContentEditable) return false;\n return true;\n};\n\nconst verifyNotPermanent = (detail, fromEl, toEl) => {\n const {permanentAttributeName: permanentAttributeName} = detail;\n if (!permanentAttributeName) return true;\n const permanent = fromEl.closest(`[${permanentAttributeName}]`);\n // only morph attributes on the active non-permanent text input\n if (!permanent && fromEl === ActiveElement.element && isTextInput(fromEl)) {\n const ignore = {\n value: true\n };\n Array.from(toEl.attributes).forEach((attribute => {\n if (!ignore[attribute.name]) fromEl.setAttribute(attribute.name, attribute.value);\n }));\n return false;\n }\n return !permanent;\n};\n\nconst shouldMorphCallbacks = [ verifyNotMutable, verifyNotPermanent, verifyNotContentEditable ];\n\nconst didMorphCallbacks = [];\n\nvar morph_callbacks = Object.freeze({\n __proto__: null,\n didMorph: didMorph,\n didMorphCallbacks: didMorphCallbacks,\n shouldMorph: shouldMorph,\n shouldMorphCallbacks: shouldMorphCallbacks,\n verifyNotContentEditable: verifyNotContentEditable,\n verifyNotMutable: verifyNotMutable,\n verifyNotPermanent: verifyNotPermanent\n});\n\nvar Operations = {\n // DOM Mutations\n append: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {html: html, focusSelector: focusSelector} = operation;\n element.insertAdjacentHTML(\"beforeend\", safeScalar(html));\n assignFocus(focusSelector);\n }));\n after(element, operation);\n }));\n },\n graft: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {parent: parent, focusSelector: focusSelector} = operation;\n const parentElement = document.querySelector(parent);\n if (parentElement) {\n parentElement.appendChild(element);\n assignFocus(focusSelector);\n }\n }));\n after(element, operation);\n }));\n },\n innerHtml: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {html: html, focusSelector: focusSelector} = operation;\n element.innerHTML = safeScalar(html);\n assignFocus(focusSelector);\n }));\n after(element, operation);\n }));\n },\n insertAdjacentHtml: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {html: html, position: position, focusSelector: focusSelector} = operation;\n element.insertAdjacentHTML(position || \"beforeend\", safeScalar(html));\n assignFocus(focusSelector);\n }));\n after(element, operation);\n }));\n },\n insertAdjacentText: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {text: text, position: position, focusSelector: focusSelector} = operation;\n element.insertAdjacentText(position || \"beforeend\", safeScalar(text));\n assignFocus(focusSelector);\n }));\n after(element, operation);\n }));\n },\n outerHtml: operation => {\n processElements(operation, (element => {\n const parent = element.parentElement;\n const idx = parent && Array.from(parent.children).indexOf(element);\n before(element, operation);\n operate(operation, (() => {\n const {html: html, focusSelector: focusSelector} = operation;\n element.outerHTML = safeScalar(html);\n assignFocus(focusSelector);\n }));\n after(parent ? parent.children[idx] : document.documentElement, operation);\n }));\n },\n prepend: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {html: html, focusSelector: focusSelector} = operation;\n element.insertAdjacentHTML(\"afterbegin\", safeScalar(html));\n assignFocus(focusSelector);\n }));\n after(element, operation);\n }));\n },\n remove: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {focusSelector: focusSelector} = operation;\n element.remove();\n assignFocus(focusSelector);\n }));\n after(document, operation);\n }));\n },\n replace: operation => {\n processElements(operation, (element => {\n const parent = element.parentElement;\n const idx = parent && Array.from(parent.children).indexOf(element);\n before(element, operation);\n operate(operation, (() => {\n const {html: html, focusSelector: focusSelector} = operation;\n element.outerHTML = safeScalar(html);\n assignFocus(focusSelector);\n }));\n after(parent ? parent.children[idx] : document.documentElement, operation);\n }));\n },\n textContent: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {text: text, focusSelector: focusSelector} = operation;\n element.textContent = safeScalar(text);\n assignFocus(focusSelector);\n }));\n after(element, operation);\n }));\n },\n // Element Property Mutations\n addCssClass: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {name: name} = operation;\n element.classList.add(...getClassNames([ safeStringOrArray(name) ]));\n }));\n after(element, operation);\n }));\n },\n removeAttribute: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {name: name} = operation;\n element.removeAttribute(safeString(name));\n }));\n after(element, operation);\n }));\n },\n removeCssClass: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {name: name} = operation;\n element.classList.remove(...getClassNames([ safeStringOrArray(name) ]));\n if (element.classList.length === 0) element.removeAttribute(\"class\");\n }));\n after(element, operation);\n }));\n },\n setAttribute: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {name: name, value: value} = operation;\n element.setAttribute(safeString(name), safeScalar(value));\n }));\n after(element, operation);\n }));\n },\n setDatasetProperty: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {name: name, value: value} = operation;\n element.dataset[safeString(name)] = safeScalar(value);\n }));\n after(element, operation);\n }));\n },\n setProperty: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {name: name, value: value} = operation;\n if (name in element) element[safeString(name)] = safeScalar(value);\n }));\n after(element, operation);\n }));\n },\n setStyle: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {name: name, value: value} = operation;\n element.style[safeString(name)] = safeScalar(value);\n }));\n after(element, operation);\n }));\n },\n setStyles: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {styles: styles} = operation;\n for (let [name, value] of Object.entries(styles)) element.style[safeString(name)] = safeScalar(value);\n }));\n after(element, operation);\n }));\n },\n setValue: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {value: value} = operation;\n element.value = safeScalar(value);\n }));\n after(element, operation);\n }));\n },\n // DOM Events and Meta-Operations\n dispatchEvent: operation => {\n processElements(operation, (element => {\n before(element, operation);\n operate(operation, (() => {\n const {name: name, detail: detail} = operation;\n dispatch(element, safeString(name), safeObject(detail));\n }));\n after(element, operation);\n }));\n },\n setMeta: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {name: name, content: content} = operation;\n let meta = document.head.querySelector(`meta[name='${name}']`);\n if (!meta) {\n meta = document.createElement(\"meta\");\n meta.name = safeString(name);\n document.head.appendChild(meta);\n }\n meta.content = safeScalar(content);\n }));\n after(document, operation);\n },\n setTitle: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {title: title} = operation;\n document.title = safeScalar(title);\n }));\n after(document, operation);\n },\n // Browser Manipulations\n clearStorage: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {type: type} = operation;\n const storage = type === \"session\" ? sessionStorage : localStorage;\n storage.clear();\n }));\n after(document, operation);\n },\n go: operation => {\n before(window, operation);\n operate(operation, (() => {\n const {delta: delta} = operation;\n history.go(delta);\n }));\n after(window, operation);\n },\n pushState: operation => {\n before(window, operation);\n operate(operation, (() => {\n const {state: state, title: title, url: url} = operation;\n history.pushState(safeObject(state), safeString(title), safeString(url));\n }));\n after(window, operation);\n },\n redirectTo: operation => {\n before(window, operation);\n operate(operation, (() => {\n let {url: url, action: action, turbo: turbo} = operation;\n action = action || \"advance\";\n url = safeString(url);\n if (turbo === undefined) turbo = true;\n if (turbo) {\n if (window.Turbo) window.Turbo.visit(url, {\n action: action\n });\n if (window.Turbolinks) window.Turbolinks.visit(url, {\n action: action\n });\n if (!window.Turbo && !window.Turbolinks) window.location.href = url;\n } else {\n window.location.href = url;\n }\n }));\n after(window, operation);\n },\n reload: operation => {\n before(window, operation);\n operate(operation, (() => {\n window.location.reload();\n }));\n after(window, operation);\n },\n removeStorageItem: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {key: key, type: type} = operation;\n const storage = type === \"session\" ? sessionStorage : localStorage;\n storage.removeItem(safeString(key));\n }));\n after(document, operation);\n },\n replaceState: operation => {\n before(window, operation);\n operate(operation, (() => {\n const {state: state, title: title, url: url} = operation;\n history.replaceState(safeObject(state), safeString(title), safeString(url));\n }));\n after(window, operation);\n },\n scrollIntoView: operation => {\n const {element: element} = operation;\n before(element, operation);\n operate(operation, (() => {\n element.scrollIntoView(operation);\n }));\n after(element, operation);\n },\n setCookie: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {cookie: cookie} = operation;\n document.cookie = safeScalar(cookie);\n }));\n after(document, operation);\n },\n setFocus: operation => {\n const {element: element} = operation;\n before(element, operation);\n operate(operation, (() => {\n assignFocus(element);\n }));\n after(element, operation);\n },\n setStorageItem: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {key: key, value: value, type: type} = operation;\n const storage = type === \"session\" ? sessionStorage : localStorage;\n storage.setItem(safeString(key), safeScalar(value));\n }));\n after(document, operation);\n },\n // Notifications\n consoleLog: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {message: message, level: level} = operation;\n level && [ \"warn\", \"info\", \"error\" ].includes(level) ? console[level](message) : console.log(message);\n }));\n after(document, operation);\n },\n consoleTable: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {data: data, columns: columns} = operation;\n console.table(data, safeArray(columns));\n }));\n after(document, operation);\n },\n notification: operation => {\n before(document, operation);\n operate(operation, (() => {\n const {title: title, options: options} = operation;\n Notification.requestPermission().then((result => {\n operation.permission = result;\n if (result === \"granted\") new Notification(safeString(title), safeObject(options));\n }));\n }));\n after(document, operation);\n },\n // Morph operations\n morph: operation => {\n processElements(operation, (element => {\n const {html: html} = operation;\n const template = document.createElement(\"template\");\n template.innerHTML = String(safeScalar(html)).trim();\n operation.content = template.content;\n const parent = element.parentElement;\n const idx = parent && Array.from(parent.children).indexOf(element);\n before(element, operation);\n operate(operation, (() => {\n const {childrenOnly: childrenOnly, focusSelector: focusSelector} = operation;\n morphdom(element, childrenOnly ? template.content : template.innerHTML, {\n childrenOnly: !!childrenOnly,\n onBeforeElUpdated: shouldMorph(operation),\n onElUpdated: didMorph(operation)\n });\n assignFocus(focusSelector);\n }));\n after(parent ? parent.children[idx] : document.documentElement, operation);\n }));\n }\n};\n\nlet operations = Operations;\n\nconst add = newOperations => {\n operations = {\n ...operations,\n ...newOperations\n };\n};\n\nconst addOperations = operations => {\n add(operations);\n};\n\nconst addOperation = (name, operation) => {\n const operations = {};\n operations[name] = operation;\n add(operations);\n};\n\nvar OperationStore = {\n get all() {\n return operations;\n }\n};\n\nlet missingElement = \"warn\";\n\nvar MissingElement$1 = {\n get behavior() {\n return missingElement;\n },\n set(value) {\n if ([ \"warn\", \"ignore\", \"event\", \"exception\" ].includes(value)) missingElement = value; else console.warn(\"Invalid 'onMissingElement' option. Defaulting to 'warn'.\");\n }\n};\n\nconst perform = (operations, options = {\n onMissingElement: MissingElement$1.behavior\n}) => {\n const batches = {};\n operations.forEach((operation => {\n if (!!operation.batch) batches[operation.batch] = batches[operation.batch] ? ++batches[operation.batch] : 1;\n }));\n operations.forEach((operation => {\n const name = operation.operation;\n try {\n if (operation.selector) {\n if (operation.xpath) {\n operation.element = operation.selectAll ? xpathToElementArray(operation.selector) : xpathToElement(operation.selector);\n } else {\n operation.element = operation.selectAll ? document.querySelectorAll(operation.selector) : document.querySelector(operation.selector);\n }\n } else {\n operation.element = document;\n }\n if (operation.element || options.onMissingElement !== \"ignore\") {\n ActiveElement.set(document.activeElement);\n const cableReadyOperation = OperationStore.all[name];\n if (cableReadyOperation) {\n cableReadyOperation(operation);\n if (!!operation.batch && --batches[operation.batch] === 0) dispatch(document, \"cable-ready:batch-complete\", {\n batch: operation.batch\n });\n } else {\n console.error(`CableReady couldn't find the \"${name}\" operation. Make sure you use the camelized form when calling an operation method.`);\n }\n }\n } catch (e) {\n if (operation.element) {\n console.error(`CableReady detected an error in ${name || \"operation\"}: ${e.message}. If you need to support older browsers make sure you've included the corresponding polyfills. https://docs.stimulusreflex.com/setup#polyfills-for-ie11.`);\n console.error(e);\n } else {\n const warning = `CableReady ${name || \"\"} operation failed due to missing DOM element for selector: '${operation.selector}'`;\n switch (options.onMissingElement) {\n case \"ignore\":\n break;\n\n case \"event\":\n dispatch(document, \"cable-ready:missing-element\", {\n warning: warning,\n operation: operation\n });\n break;\n\n case \"exception\":\n throw warning;\n\n default:\n console.warn(warning);\n }\n }\n }\n }));\n};\n\nconst performAsync = (operations, options = {\n onMissingElement: MissingElement$1.behavior\n}) => new Promise(((resolve, reject) => {\n try {\n resolve(perform(operations, options));\n } catch (err) {\n reject(err);\n }\n}));\n\nclass SubscribingElement extends HTMLElement {\n static get tagName() {\n throw new Error(\"Implement the tagName() getter in the inheriting class\");\n }\n static define() {\n if (!customElements.get(this.tagName)) {\n customElements.define(this.tagName, this);\n }\n }\n disconnectedCallback() {\n if (this.channel) this.channel.unsubscribe();\n }\n createSubscription(consumer, channel, receivedCallback) {\n this.channel = consumer.subscriptions.create({\n channel: channel,\n identifier: this.identifier\n }, {\n received: receivedCallback\n });\n }\n get preview() {\n return document.documentElement.hasAttribute(\"data-turbolinks-preview\") || document.documentElement.hasAttribute(\"data-turbo-preview\");\n }\n get identifier() {\n return this.getAttribute(\"identifier\");\n }\n}\n\nlet consumer;\n\nconst BACKOFF = [ 25, 50, 75, 100, 200, 250, 500, 800, 1e3, 2e3 ];\n\nconst wait = ms => new Promise((resolve => setTimeout(resolve, ms)));\n\nconst getConsumerWithRetry = async (retry = 0) => {\n if (consumer) return consumer;\n if (retry >= BACKOFF.length) {\n throw new Error(\"Couldn't obtain a Action Cable consumer within 5s\");\n }\n await wait(BACKOFF[retry]);\n return await getConsumerWithRetry(retry + 1);\n};\n\nvar CableConsumer = {\n setConsumer(value) {\n consumer = value;\n },\n get consumer() {\n return consumer;\n },\n async getConsumer() {\n return await getConsumerWithRetry();\n }\n};\n\nclass StreamFromElement extends SubscribingElement {\n static get tagName() {\n return \"cable-ready-stream-from\";\n }\n async connectedCallback() {\n if (this.preview) return;\n const consumer = await CableConsumer.getConsumer();\n if (consumer) {\n this.createSubscription(consumer, \"CableReady::Stream\", this.performOperations.bind(this));\n } else {\n console.error(\"The `cable_ready_stream_from` helper cannot connect. You must initialize CableReady with an Action Cable consumer.\");\n }\n }\n performOperations(data) {\n if (data.cableReady) perform(data.operations, {\n onMissingElement: this.onMissingElement\n });\n }\n get onMissingElement() {\n const value = this.getAttribute(\"missing\") || MissingElement$1.behavior;\n // stream_from does not support raising exceptions on missing elements because there's no way to catch them\n if ([ \"warn\", \"ignore\", \"event\" ].includes(value)) return value; else {\n console.warn(\"Invalid 'missing' attribute. Defaulting to 'warn'.\");\n return \"warn\";\n }\n }\n}\n\nlet debugging = false;\n\nvar Debug = {\n get enabled() {\n return debugging;\n },\n get disabled() {\n return !debugging;\n },\n get value() {\n return debugging;\n },\n set(value) {\n debugging = !!value;\n },\n set debug(value) {\n debugging = !!value;\n }\n};\n\nconst request = (data, blocks) => {\n if (Debug.disabled) return;\n const message = `↑ Updatable request affecting ${blocks.length} element(s): `;\n console.log(message, {\n elements: blocks.map((b => b.element)),\n identifiers: blocks.map((b => b.element.getAttribute(\"identifier\"))),\n data: data\n });\n return message;\n};\n\nconst cancel = (timestamp, reason) => {\n if (Debug.disabled) return;\n const duration = new Date - timestamp;\n const message = `❌ Updatable request canceled after ${duration}ms: ${reason}`;\n console.log(message);\n return message;\n};\n\nconst response = (timestamp, element, urls) => {\n if (Debug.disabled) return;\n const duration = new Date - timestamp;\n const message = `↓ Updatable response: All URLs fetched in ${duration}ms`;\n console.log(message, {\n element: element,\n urls: urls\n });\n return message;\n};\n\nconst morphStart = (timestamp, element) => {\n if (Debug.disabled) return;\n const duration = new Date - timestamp;\n const message = `↻ Updatable morph: starting after ${duration}ms`;\n console.log(message, {\n element: element\n });\n return message;\n};\n\nconst morphEnd = (timestamp, element) => {\n if (Debug.disabled) return;\n const duration = new Date - timestamp;\n const message = `↺ Updatable morph: completed after ${duration}ms`;\n console.log(message, {\n element: element\n });\n return message;\n};\n\nvar Log = {\n request: request,\n cancel: cancel,\n response: response,\n morphStart: morphStart,\n morphEnd: morphEnd\n};\n\nconst template = `\\n\\n\\n`;\n\nclass UpdatesForElement extends SubscribingElement {\n static get tagName() {\n return \"cable-ready-updates-for\";\n }\n constructor() {\n super();\n const shadowRoot = this.attachShadow({\n mode: \"open\"\n });\n shadowRoot.innerHTML = template;\n this.triggerElementLog = new BoundedQueue(10);\n this.targetElementLog = new BoundedQueue(10);\n }\n async connectedCallback() {\n if (this.preview) return;\n this.update = debounce(this.update.bind(this), this.debounce);\n const consumer = await CableConsumer.getConsumer();\n if (consumer) {\n this.createSubscription(consumer, \"CableReady::Stream\", this.update);\n } else {\n console.error(\"The `cable_ready_updates_for` helper cannot connect. You must initialize CableReady with an Action Cable consumer.\");\n }\n }\n async update(data) {\n this.lastUpdateTimestamp = new Date;\n const blocks = Array.from(document.querySelectorAll(this.query), (element => new Block(element))).filter((block => block.shouldUpdate(data)));\n this.triggerElementLog.push(`${(new Date).toLocaleString()}: ${Log.request(data, blocks)}`);\n if (blocks.length === 0) {\n this.triggerElementLog.push(`${(new Date).toLocaleString()}: ${Log.cancel(this.lastUpdateTimestamp, \"All elements filtered out\")}`);\n return;\n }\n // first element in the DOM *at any given moment* updates all of the others\n if (blocks[0].element !== this) {\n this.triggerElementLog.push(`${(new Date).toLocaleString()}: ${Log.cancel(this.lastUpdateTimestamp, \"Update already requested\")}`);\n return;\n }\n // hold a reference to the active element so that it can be restored after the morph\n ActiveElement.set(document.activeElement);\n // store all retrieved HTML in an object keyed by URL to minimize fetch calls\n this.html = {};\n const uniqueUrls = [ ...new Set(blocks.map((block => block.url))) ];\n await Promise.all(uniqueUrls.map((async url => {\n if (!this.html.hasOwnProperty(url)) {\n const response = await graciouslyFetch(url, {\n \"X-Cable-Ready\": \"update\"\n });\n this.html[url] = await response.text();\n }\n })));\n this.triggerElementLog.push(`${(new Date).toLocaleString()}: ${Log.response(this.lastUpdateTimestamp, this, uniqueUrls)}`);\n // track current block index for each URL; referred to as fragments\n this.index = {};\n blocks.forEach((block => {\n // if the block's URL is not in the index, initialize it to 0; otherwise, increment it\n this.index.hasOwnProperty(block.url) ? this.index[block.url]++ : this.index[block.url] = 0;\n block.process(data, this.html, this.index, this.lastUpdateTimestamp);\n }));\n }\n get query() {\n return `${this.tagName}[identifier=\"${this.identifier}\"]`;\n }\n get identifier() {\n return this.getAttribute(\"identifier\");\n }\n get debounce() {\n return this.hasAttribute(\"debounce\") ? parseInt(this.getAttribute(\"debounce\")) : 20;\n }\n}\n\nclass Block {\n constructor(element) {\n this.element = element;\n }\n async process(data, html, fragmentsIndex, startTimestamp) {\n const blockIndex = fragmentsIndex[this.url];\n const template = document.createElement(\"template\");\n this.element.setAttribute(\"updating\", \"updating\");\n template.innerHTML = String(html[this.url]).trim();\n await this.resolveTurboFrames(template.content);\n const fragments = template.content.querySelectorAll(this.query);\n if (fragments.length <= blockIndex) {\n console.warn(`Update aborted due to insufficient number of elements. The offending url is ${this.url}, the offending element is:`, this.element);\n return;\n }\n const operation = {\n element: this.element,\n html: fragments[blockIndex],\n permanentAttributeName: \"data-ignore-updates\"\n };\n dispatch(this.element, \"cable-ready:before-update\", operation);\n this.element.targetElementLog.push(`${(new Date).toLocaleString()}: ${Log.morphStart(startTimestamp, this.element)}`);\n morphdom(this.element, fragments[blockIndex], {\n childrenOnly: true,\n onBeforeElUpdated: shouldMorph(operation),\n onElUpdated: _ => {\n this.element.removeAttribute(\"updating\");\n dispatch(this.element, \"cable-ready:after-update\", operation);\n assignFocus(operation.focusSelector);\n }\n });\n this.element.targetElementLog.push(`${(new Date).toLocaleString()}: ${Log.morphEnd(startTimestamp, this.element)}`);\n }\n async resolveTurboFrames(documentFragment) {\n const reloadingTurboFrames = [ ...documentFragment.querySelectorAll('turbo-frame[src]:not([loading=\"lazy\"])') ];\n return Promise.all(reloadingTurboFrames.map((frame => new Promise((async resolve => {\n const frameResponse = await graciouslyFetch(frame.getAttribute(\"src\"), {\n \"Turbo-Frame\": frame.id,\n \"X-Cable-Ready\": \"update\"\n });\n const frameTemplate = document.createElement(\"template\");\n frameTemplate.innerHTML = await frameResponse.text();\n // recurse here to get all nested eager loaded frames\n await this.resolveTurboFrames(frameTemplate.content);\n const selector = `turbo-frame#${frame.id}`;\n const frameContent = frameTemplate.content.querySelector(selector);\n const content = frameContent ? frameContent.innerHTML.trim() : \"\";\n documentFragment.querySelector(selector).innerHTML = content;\n resolve();\n })))));\n }\n shouldUpdate(data) {\n // if everything that could prevent an update is false, update this block\n return !this.ignoresInnerUpdates && this.hasChangesSelectedForUpdate(data);\n }\n hasChangesSelectedForUpdate(data) {\n // if there's an only attribute, only update if at least one of the attributes changed is in the allow list\n const only = this.element.getAttribute(\"only\");\n return !(only && data.changed && !only.split(\" \").some((attribute => data.changed.includes(attribute))));\n }\n get ignoresInnerUpdates() {\n // don't update during a Reflex or Turbolinks redraw\n return this.element.hasAttribute(\"ignore-inner-updates\") && this.element.hasAttribute(\"performing-inner-update\");\n }\n get url() {\n return this.element.hasAttribute(\"url\") ? this.element.getAttribute(\"url\") : location.href;\n }\n get identifier() {\n return this.element.identifier;\n }\n get query() {\n return this.element.query;\n }\n}\n\nconst registerInnerUpdates = () => {\n document.addEventListener(\"stimulus-reflex:before\", (event => {\n recursiveMarkUpdatesForElements(event.detail.element);\n }));\n document.addEventListener(\"stimulus-reflex:after\", (event => {\n setTimeout((() => {\n recursiveUnmarkUpdatesForElements(event.detail.element);\n }));\n }));\n document.addEventListener(\"turbo:submit-start\", (event => {\n recursiveMarkUpdatesForElements(event.target);\n }));\n document.addEventListener(\"turbo:submit-end\", (event => {\n setTimeout((() => {\n recursiveUnmarkUpdatesForElements(event.target);\n }));\n }));\n document.addEventListener(\"turbo-boost:command:start\", (event => {\n recursiveMarkUpdatesForElements(event.target);\n }));\n document.addEventListener(\"turbo-boost:command:finish\", (event => {\n setTimeout((() => {\n recursiveUnmarkUpdatesForElements(event.target);\n }));\n }));\n document.addEventListener(\"turbo-boost:command:error\", (event => {\n setTimeout((() => {\n recursiveUnmarkUpdatesForElements(event.target);\n }));\n }));\n};\n\nconst recursiveMarkUpdatesForElements = leaf => {\n const closestUpdatesFor = leaf && leaf.parentElement && leaf.parentElement.closest(\"cable-ready-updates-for\");\n if (closestUpdatesFor) {\n closestUpdatesFor.setAttribute(\"performing-inner-update\", \"\");\n recursiveMarkUpdatesForElements(closestUpdatesFor);\n }\n};\n\nconst recursiveUnmarkUpdatesForElements = leaf => {\n const closestUpdatesFor = leaf && leaf.parentElement && leaf.parentElement.closest(\"cable-ready-updates-for\");\n if (closestUpdatesFor) {\n closestUpdatesFor.removeAttribute(\"performing-inner-update\");\n recursiveUnmarkUpdatesForElements(closestUpdatesFor);\n }\n};\n\nconst defineElements = () => {\n registerInnerUpdates();\n StreamFromElement.define();\n UpdatesForElement.define();\n};\n\nconst initialize = (initializeOptions = {}) => {\n const {consumer: consumer, onMissingElement: onMissingElement, debug: debug} = initializeOptions;\n Debug.set(!!debug);\n if (consumer) {\n CableConsumer.setConsumer(consumer);\n } else {\n console.error(\"CableReady requires a reference to your Action Cable `consumer` for its helpers to function.\\nEnsure that you have imported the `CableReady` package as well as `consumer` from your `channels` folder, then call `CableReady.initialize({ consumer })`.\");\n }\n if (onMissingElement) {\n MissingElement.set(onMissingElement);\n }\n defineElements();\n};\n\nconst global = {\n perform: perform,\n performAsync: performAsync,\n shouldMorphCallbacks: shouldMorphCallbacks,\n didMorphCallbacks: didMorphCallbacks,\n initialize: initialize,\n addOperation: addOperation,\n addOperations: addOperations,\n version: packageInfo.version,\n cable: CableConsumer,\n get DOMOperations() {\n console.warn(\"DEPRECATED: Please use `CableReady.operations` instead of `CableReady.DOMOperations`\");\n return OperationStore.all;\n },\n get operations() {\n return OperationStore.all;\n },\n get consumer() {\n return CableConsumer.consumer;\n }\n};\n\nwindow.CableReady = global;\n\nexport { morph_callbacks as MorphCallbacks, StreamFromElement, SubscribingElement, UpdatesForElement, utils as Utils, global as default };\n","import CableReady from 'cable_ready'\n\nexport default class CableReadyElement extends HTMLElement {\n static define () {\n if (!customElements.get('cable-ready')) {\n customElements.define('cable-ready', this)\n }\n }\n\n connectedCallback () {\n setTimeout(() => {\n try {\n const operations = JSON.parse(this.scriptElement.textContent)\n CableReady.perform(operations)\n } catch (error) {\n console.error(error)\n } finally {\n try {\n this.remove()\n } catch {}\n }\n })\n }\n\n get scriptElement () {\n if (\n this.firstElementChild instanceof HTMLScriptElement &&\n this.firstElementChild.getAttribute('type') === 'application/json'\n ) {\n return this.firstElementChild\n }\n throw new Error(\n 'First child element in a `` tag must be `