phoenix_live_view 0.1.1 → 0.3.1

package/CHANGELOG.md

@@ -1,7 +1,70 @@
-## 0.1.0 (2019-08-27)
+## 0.3.1 (2019-09-23)
+
+### Backwards incompatible changes
+  - `live_isolated` in tests no longer requires a router and a pipeline (it now expects only 3 arguments)
+  - Raise if `handle_params` is used on a non-router LiveView
+
+### Bug Fixes
+  - [LiveViewTest] Fix function clause errors caused by HTML comments
+  - Fix `live_redirect` failing to detect back button URL changes
+
+## 0.3.0 (2019-09-19)
+
+### Enhancements
+  - Add `phx-debounce` and `phx-throttle` bindings to rate limit events
+
+### Backwards incompatible changes
+  - IE11 support now requires two additional polyfills, `mdn-polyfills/CustomEvent` and `mdn-polyfills/String.prototype.startsWith`
+
+### Bug Fixes
+  - Fix IE11 support caused by unsupported `getAttributeNames` lookup
+  - Fix Floki dependency compilation warnings
+
+## 0.2.1 (2019-09-17)
+
+### Bug Fixes
+  - [LiveView.Router] Fix module concat failing to build correct layout module when using custom namespace
+  - [LiveViewTest] Fix phx-update append/prepend containers not building proper DOM content
+  - [LiveViewTest] Fix phx-update append/prepend containers not updating existing child containers with matching IDs
+
+## 0.2.0 (2019-09-12)
+
+### Enhancements
+  - [LiveView] Add new `:container` option to `use Phoenix.LiveView`
+  - [LiveViewTest] Add `live_isolated` test helper for testing LiveViews which are not routable
+
+### Backwards incompatible changes
+  - Replace `configure_temporary_assigns/2` with 3-tuple mount return, supporting a `:temporary_assigns` key
+  - Do not allow `redirect`/`live_redirect` on mount nor in child live views
+  - All `phx-update` containers now require a unique ID
+  - `LiveSocket` JavaScript constructor now requires explicit dependency injection of Phoenix Socket constructor. For example:
+
+        ```javascript
+        import {Socket} from "phoenix"
+        import LiveSocket from "phoenix_live_view"
+
+        let liveSocket = new LiveSocket("/live", Socket, {...})
+        ````
+
+### Bug Fixes
+  - Fix phx-update=append/prepend failing to join new nested live views or wire up new phx-hooks
+  - Fix number input handling causing some browsers to reset form fields on invalid inputs
+  - Fix multi-select decoding causing server error
+  - Fix multi-select change tracking failing to submit an event when a value is deselected
+  - Fix live redirect loop triggered under certain scenarios
+  - Fix params failing to update on re-mounts after live_redirect
+  - Fix blur event metadata being sent with type of "focus"
+
+## 0.1.2
+
+### Backwards incompatible changes
+  - `phx-value` has no effect, use `phx-value-*` instead
+  - The `:path_params` key in session has no effect (use `handle_params` in `LiveView` instead)
+
+## 0.1.1 (2019-08-27)
 
 ### Enhancements
-  - Use optimized insertAdjacentHTML for faster append/prepend and proper css animation handling 
+  - Use optimized `insertAdjacentHTML` for faster append/prepend and proper css animation handling
   - Allow for replacing previously appended/prepended elements by replacing duplicate IDs during append/prepend instead of adding new DOM nodes
 
 ### Bug Fixes
@@ -12,7 +75,9 @@
 
 ### Enhancements
   - The LiveView `handle_in/3` callback now receives a map of metadata about the client event
-  - For `phx-change` events, `handle_in/3` now receives a `"_target"` param representing the keyspace
-    of the form input name which triggered the change
-  - Multiple values may be provided for any phx binding, using the `phx-value-` prefix, such as `phx-value-myval1`, `phx-value-myval2`, etc
+  - For `phx-change` events, `handle_in/3` now receives a `"_target"` param representing the keyspace of the form input name which triggered the change
+  - Multiple values may be provided for any phx binding by using the `phx-value-` prefix, such as `phx-value-myval1`, `phx-value-myval2`, etc
+  - Add control over the DOM patching via `phx-update`, which can be set to "replace", "append", "prepend" or "ignore"
 
+### Backwards incompatible changes
+  - `phx-ignore` was renamed to `phx-update="ignore"`

package/README.md

@@ -22,7 +22,8 @@ To use LiveView, add to your `mix.exs` and run `mix deps.get`:
 ```elixir
 def deps do
   [
-    {:phoenix_live_view, "~> 0.1.0"}
+    {:phoenix_live_view, "~> 0.3.0"},
+    {:floki, ">= 0.0.0", only: :test}
   ]
 end
 ```
@@ -58,14 +59,15 @@ Then add the following imports to your web file in `lib/my_app_web.ex`:
 def controller do
   quote do
     ...
-    import Phoenix.LiveView.Controller, only: [live_render: 3]
+    import Phoenix.LiveView.Controller
   end
 end
 
 def view do
   quote do
     ...
-    import Phoenix.LiveView, only: [live_render: 2, live_render: 3, live_link: 1, live_link: 2]
+    import Phoenix.LiveView,
+      only: [live_render: 2, live_render: 3, live_link: 1, live_link: 2]
   end
 end
 
@@ -120,27 +122,13 @@ Enable connecting to a LiveView socket in your `app.js` file.
 
 ```javascript
 // assets/js/app.js
+import {Socket} from "phoenix"
 import LiveSocket from "phoenix_live_view"
 
-let liveSocket = new LiveSocket("/live")
+let liveSocket = new LiveSocket("/live", Socket)
 liveSocket.connect()
 ```
 
-Finally, by convention live views are saved in a `lib/my_app_web/live/`
-directory. For live page reload support, add the following pattern to
-your `config/dev.exs`:
-
-```elixir
-# config/dev.exs
-config :demo, MyAppWeb.Endpoint,
-  live_reload: [
-    patterns: [
-      ...,
-      ~r{lib/my_app_web/live/.*(ex)$}
-    ]
-  ]
-```
-
 You can also optionally import the style for the default CSS classes in your `app.css` file.
 
 ```css
@@ -159,6 +147,9 @@ $ npm install --save --prefix assets mdn-polyfills url-search-params-polyfill fo
 
 ```javascript
 // assets/js/app.js
+import "mdn-polyfills/CustomEvent"
+import "mdn-polyfills/String.prototype.startsWith"
+import "mdn-polyfills/Array.from"
 import "mdn-polyfills/NodeList.prototype.forEach"
 import "mdn-polyfills/Element.prototype.closest"
 import "mdn-polyfills/Element.prototype.matches"
@@ -167,6 +158,7 @@ import "url-search-params-polyfill"
 import "formdata-polyfill"
 import "classlist-polyfill"
 
+import {Socket} from "phoenix"
 import LiveSocket from "phoenix_live_view"
 ...
 ```

package/assets/js/phoenix_live_view.js

@@ -8,9 +8,9 @@ See the hexdocs at `https://hexdocs.pm/phoenix_live_view` for documentation.
 */
 
 import morphdom from "morphdom"
-import {Socket} from "phoenix"
 
 const PHX_VIEW = "data-phx-view"
+const PHX_COMPONENT = "data-phx-component"
 const PHX_LIVE_LINK = "data-phx-live-link"
 const PHX_CONNECTED_CLASS = "phx-connected"
 const PHX_LOADING_CLASS = "phx-loading"
@@ -20,7 +20,6 @@ const PHX_PARENT_ID = "data-phx-parent-id"
 const PHX_VIEW_SELECTOR = `[${PHX_VIEW}]`
 const PHX_ERROR_FOR = "data-phx-error-for"
 const PHX_HAS_FOCUSED = "phx-has-focused"
-const PHX_BOUND = "data-phx-bound"
 const FOCUSABLE_INPUTS = ["text", "textarea", "number", "email", "password", "search", "tel", "url"]
 const PHX_HAS_SUBMITTED = "phx-has-submitted"
 const PHX_SESSION = "data-phx-session"
@@ -29,19 +28,26 @@ const PHX_READONLY = "data-phx-readonly"
 const PHX_DISABLED = "data-phx-disabled"
 const PHX_DISABLE_WITH = "disable-with"
 const PHX_HOOK = "hook"
+const PHX_DEBOUNCE = "debounce"
+const PHX_THROTTLE = "throttle"
+const PHX_CHANGE = "phx-change"
 const PHX_UPDATE = "update"
+const PHX_PRIVATE = "phxPrivate"
 const LOADER_TIMEOUT = 1
 const BEFORE_UNLOAD_LOADER_TIMEOUT = 200
 const BINDING_PREFIX = "phx-"
 const PUSH_TIMEOUT = 30000
 const LINK_HEADER = "x-requested-with"
-const PHX_PREV_APPEND = "phxPrevAppend"
+const DEBOUNCE_BLUR = "debounce-blur"
+const DEBOUNCE_TIMER = "debounce-timer"
+const DEBOUNCE_PREV_KEY = "debounce-prev-key"
+
+let logError = (msg, obj) => console.error && console.error(msg, obj)
 
 export let debug = (view, kind, msg, obj) => {
   console.log(`${view.id} ${kind}: ${msg} - `, obj)
 }
 
-
 // wraps value in closure or returns closure
 let closure = (val) => typeof val === "function" ? val : function(){ return val }
 
@@ -64,13 +70,7 @@ let isEmpty = (obj) => {
   return true
 }
 
-let maybe = (el, key) => {
-  if(el){
-    return el[key]
-  } else {
-    return null
-  }
-}
+let maybe = (el, callback) => el && callback(el)
 
 let serializeForm = (form, meta = {}) => {
   let formData = new FormData(form)
@@ -94,13 +94,6 @@ let recursiveMerge = (target, source) => {
   }
 }
 
-let Session = {
-  get(el){ return el.getAttribute(PHX_SESSION) },
-
-  isEqual(el1, el2){ return this.get(el1) === this.get(el2) }
-}
-
-
 export let Rendered = {
   mergeDiff(source, diff){
     if(this.isNewFingerprint(diff)){
@@ -152,11 +145,44 @@ export let Rendered = {
   }
 }
 
-// todo document LiveSocket specific options like viewLogger
+/** Initializes the LiveSocket
+ *
+ *
+ * @param {string} endPoint - The string WebSocket endpoint, ie, `"wss://example.com/live"`,
+ *                                               `"/live"` (inherited host & protocol)
+ * @param {Phoenix.Socket} socket - the required Phoenix Socket class imported from "phoenix". For example:
+ *
+ *     import {Socket} from "phoenix"
+ *     import {LiveSocket} from "phoenix_live_view"
+ *     let liveSocket = new LiveSocket("/live", Socket, {...})
+ *
+ * @param {Object} [opts] - Optional configuration. Outside of keys listed below, all
+ * configuration is passed directly to the Phoenix Socket constructor.
+ * @param {Function} [opts.params] - The optional function for passing connect params.
+ * The function receives the viewName associated with a given LiveView. For example:
+ *
+ *     (viewName) => {view: viewName, token: window.myToken}
+ *
+ * @param {string} [opts.bindingPrefix] - The optional prefix to use for all phx DOM annotations.
+ * Defaults to "phx-".
+ * @param {string} [opts.hooks] - The optional object for referencing LiveView hook callbacks.
+ * @param {Function} [opts.viewLogger] - The optional function to log debug information. For example:
+ *
+ *     (view, kind, msg, obj) => console.log(`${view.id} ${kind}: ${msg} - `, obj)
+*/
 export class LiveSocket {
-  constructor(url, opts = {}){
+  constructor(url, phxSocket, opts = {}){
     this.unloaded = false
-    this.socket = new Socket(url, opts)
+    if(!phxSocket || phxSocket.constructor.name === "Object"){
+      throw new Error(`
+      a phoenix Socket must be provided as the second argument to the LiveSocket constructor. For example:
+
+          import {Socket} from "phoenix"
+          import {LiveSocket} from "phoenix_live_view"
+          let liveSocket = new LiveSocket("/live", Socket, {...})
+      `)
+    }
+    this.socket = new phxSocket(url, opts)
     this.bindingPrefix = opts.bindingPrefix || BINDING_PREFIX
     this.opts = opts
     this.views = {}
@@ -222,7 +248,7 @@ export class LiveSocket {
   channel(topic, params){ return this.socket.channel(topic, params) }
 
   joinRootViews(){
-    Browser.all(document, `${PHX_VIEW_SELECTOR}:not([${PHX_PARENT_ID}])`, rootEl => {
+    DOM.all(document, `${PHX_VIEW_SELECTOR}:not([${PHX_PARENT_ID}])`, rootEl => {
       let view = this.joinView(rootEl, null, this.getHref())
       this.root = this.root || view
     })
@@ -254,7 +280,7 @@ export class LiveSocket {
   }
 
   joinView(el, parentView, href, callback){
-    if(this.getViewById(el.id)){ return }
+    if(this.getViewByEl(el)){ return }
 
     let view = new View(el, this, parentView, href)
     this.views[view.id] = view
@@ -263,11 +289,11 @@ export class LiveSocket {
   }
 
   owner(childEl, callback){
-    let view = this.getViewById(maybe(childEl.closest(PHX_VIEW_SELECTOR), "id"))
+    let view = maybe(childEl.closest(PHX_VIEW_SELECTOR), el => this.getViewByEl(el))
     if(view){ callback(view) }
   }
 
-  getViewById(id){ return this.views[id] }
+  getViewByEl(el){ return this.views[el.id] }
 
   onViewError(view){
     this.dropActiveElement(view)
@@ -277,6 +303,8 @@ export class LiveSocket {
     for(let id in this.views){ this.destroyViewById(id) }
   }
 
+  destroyViewByEl(el){ return this.destroyViewById(el.id) }
+
   destroyViewById(id){
     let view = this.views[id]
     if(view){
@@ -347,7 +375,7 @@ export class LiveSocket {
     })
     this.bindTargetable({blur: "focusout", focus: "focusin"}, (e, type, view, targetEl, phxEvent, phxTarget) => {
       if(!phxTarget){
-        view.pushEvent(type, targetEl, phxEvent, {type: "focus"})
+        view.pushEvent(type, targetEl, phxEvent, {type: type})
       }
     })
     this.bindTargetable({blur: "blur", focus: "focus"}, (e, type, view, targetEl, phxEvent, phxTarget) => {
@@ -389,11 +417,15 @@ export class LiveSocket {
         let bindTarget = this.binding("target")
         let targetPhxEvent = e.target.getAttribute && e.target.getAttribute(binding)
         if(targetPhxEvent && !e.target.getAttribute(bindTarget)){
-          this.owner(e.target, view => callback(e, event, view, e.target, targetPhxEvent, null))
+          this.owner(e.target, view => {
+            this.debounce(e.target, e, () => callback(e, event, view, e.target, targetPhxEvent, null))
+          })
         } else {
-          Browser.all(document, `[${binding}][${bindTarget}=window]`, el => {
+          DOM.all(document, `[${binding}][${bindTarget}=window]`, el => {
             let phxEvent = el.getAttribute(binding)
-            this.owner(el, view => callback(e, event, view, el, phxEvent, "window"))
+            this.owner(el, view => {
+              this.debounce(el, e, () => callback(e, event, view, el, phxEvent, "window"))
+            })
           })
         }
       })
@@ -406,10 +438,10 @@ export class LiveSocket {
       let target = closestPhxBinding(e.target, click)
       let phxEvent = target && target.getAttribute(click)
       if(!phxEvent){ return }
-      e.preventDefault()
-     
+      e.stopPropagation()
+
       let meta = {
-        altKey: e.altKey, 
+        altKey: e.altKey,
         shiftKey: e.shiftKey,
         ctrlKey: e.ctrlKey,
         metaKey: e.metaKey,
@@ -421,7 +453,9 @@ export class LiveSocket {
         screenY: e.screenY,
       }
 
-      this.owner(target, view => view.pushEvent("click", target, phxEvent, meta))
+      this.owner(target, view => {
+        this.debounce(target, e, () => view.pushEvent("click", target, phxEvent, meta))
+      })
     }, false)
   }
 
@@ -473,25 +507,31 @@ export class LiveSocket {
     for(let type of ["change", "input"]){
       this.on(type, e => {
         let input = e.target
-        let key = input.type === "checkbox" ? "checked" : "value"
-        if(this.prevInput === input && this.prevValue === input[key]){ return }
-
-        this.prevInput = input
-        this.prevValue = input[key]
         let phxEvent = input.form && input.form.getAttribute(this.binding("change"))
         if(!phxEvent){ return }
+
+        let value = JSON.stringify((new FormData(input.form)).getAll(input.name))
+        if(this.prevInput === input && this.prevValue === value){ return }
+        if(input.type === "number" && input.validity && input.validity.badInput){ return }
+
+        this.prevInput = input
+        this.prevValue = value
         this.owner(input, view => {
           if(DOM.isTextualInput(input)){
-            input[PHX_HAS_FOCUSED] = true
+            DOM.putPrivate(input, PHX_HAS_FOCUSED, true)
           } else {
             this.setActiveElement(input)
           }
-          view.pushInput(input, phxEvent, e)
+          this.debounce(input, e, () => view.pushInput(input, phxEvent, e))
         })
       }, false)
     }
   }
 
+  debounce(el, event, callback){
+    DOM.debounce(el, event, this.binding(PHX_DEBOUNCE), this.binding(PHX_THROTTLE), callback)
+  }
+
   silenceEvents(callback){
     this.silenced = true
     callback()
@@ -506,10 +546,6 @@ export class LiveSocket {
 }
 
 export let Browser = {
-  all(node, query, callback){
-    node.querySelectorAll(query).forEach(callback)
-  },
-
   canPushState(){ return (typeof(history.pushState) !== "undefined") },
 
   fetchPage(href, callback){
@@ -538,17 +574,6 @@ export let Browser = {
     }
   },
 
-  dispatchEvent(target, eventString){
-    let event = null
-    if(typeof(Event) === "function"){
-      event = new Event(eventString)
-    } else {
-      event = document.createEvent("Event")
-      event.initEvent(eventString, true, true)
-    }
-    target.dispatchEvent(event)
-  },
-
   setCookie(name, value){
     document.cookie = `${name}=${value}`
   },
@@ -563,21 +588,83 @@ export let Browser = {
   }
 }
 
-let DOM = {
+export let DOM = {
+  all(node, query, callback){
+    return Array.from(node.querySelectorAll(query)).forEach(callback)
+  },
+
+  private(el, key){ return el[PHX_PRIVATE] && el[PHX_PRIVATE][key] },
+
+  deletePrivate(el, key){ el[PHX_PRIVATE] && delete(el[PHX_PRIVATE][key]) },
+
+  putPrivate(el, key, value){
+    if(!el[PHX_PRIVATE]){ el[PHX_PRIVATE] = {} }
+    el[PHX_PRIVATE][key] = value
+  },
+
+  copyPrivates(target, source){
+    if(source[PHX_PRIVATE]){
+      target[PHX_PRIVATE] = clone(source[PHX_PRIVATE])
+    }
+  },
+
+  debounce(el, event, phxDebounce, phxThrottle, callback){
+    let debounce = el.getAttribute(phxDebounce)
+    let throttle = el.getAttribute(phxThrottle)
+    let value = debounce || throttle
+    switch(value){
+      case null: return callback()
+
+      case "blur":
+        if(this.private(el, DEBOUNCE_BLUR)){ return }
+        el.addEventListener("blur", () => callback())
+        this.putPrivate(el, DEBOUNCE_BLUR, value)
+        return
+
+      default:
+        let timeout = parseInt(value)
+        if(isNaN(timeout)){ return logError(`invalid throttle/debounce value: ${value}`) }
+        if(throttle && event.type === "keydown"){
+          let prevKey = this.private(el, DEBOUNCE_PREV_KEY)
+          this.putPrivate(el, DEBOUNCE_PREV_KEY, event.which)
+          if(prevKey !== event.which){ return callback() }
+        }
+        if(this.private(el, DEBOUNCE_TIMER)){ return }
+
+        let clearTimer = (e) => {
+          if(throttle && e.type === PHX_CHANGE && e.detail.triggeredBy.name === el.name){ return }
+          clearTimeout(this.private(el, DEBOUNCE_TIMER))
+          this.deletePrivate(el, DEBOUNCE_TIMER)
+        }
+        this.putPrivate(el, DEBOUNCE_TIMER, setTimeout(() => {
+          if(el.form){
+            el.form.removeEventListener(PHX_CHANGE, clearTimer)
+            el.form.removeEventListener("submit", clearTimer)
+          }
+          this.deletePrivate(el, DEBOUNCE_TIMER)
+          if(!throttle){ callback() }
+        }, timeout))
+        if(el.form){
+          el.form.addEventListener(PHX_CHANGE, clearTimer)
+          el.form.addEventListener("submit", clearTimer)
+        }
+        if(throttle){ callback() }
+    }
+  },
 
   disableForm(form, prefix){
     let disableWith = `${prefix}${PHX_DISABLE_WITH}`
     form.classList.add(PHX_LOADING_CLASS)
-    Browser.all(form, `[${disableWith}]`, el => {
+    DOM.all(form, `[${disableWith}]`, el => {
       let value = el.getAttribute(disableWith)
       el.setAttribute(`${disableWith}-restore`, el.innerText)
       el.innerText = value
     })
-    Browser.all(form, "button", button => {
+    DOM.all(form, "button", button => {
       button.setAttribute(PHX_DISABLED, button.disabled)
       button.disabled = true
     })
-    Browser.all(form, "input", input => {
+    DOM.all(form, "input", input => {
       input.setAttribute(PHX_READONLY, input.readOnly)
       input.readOnly = true
     })
@@ -587,7 +674,7 @@ let DOM = {
     let disableWith = `${prefix}${PHX_DISABLE_WITH}`
     form.classList.remove(PHX_LOADING_CLASS)
 
-    Browser.all(form, `[${disableWith}]`, el => {
+    DOM.all(form, `[${disableWith}]`, el => {
       let value = el.getAttribute(`${disableWith}-restore`)
       if(value){
         if(el.nodeName === "INPUT") {
@@ -598,14 +685,14 @@ let DOM = {
         el.removeAttribute(`${disableWith}-restore`)
       }
     })
-    Browser.all(form, "button", button => {
+    DOM.all(form, "button", button => {
       let prev = button.getAttribute(PHX_DISABLED)
       if(prev){
         button.disabled = prev === "true"
         button.removeAttribute(PHX_DISABLED)
       }
     })
-    Browser.all(form, "input", input => {
+    DOM.all(form, "input", input => {
       let prev = input.getAttribute(PHX_READONLY)
       if(prev){
         input.readOnly = prev === "true"
@@ -614,12 +701,12 @@ let DOM = {
     })
   },
 
-  discardError(el){
+  discardError(container, el){
     let field = el.getAttribute && el.getAttribute(PHX_ERROR_FOR)
     if(!field) { return }
-    let input = document.getElementById(field)
+    let input = container.querySelector(`#${field}`)
 
-    if(field && !(input[PHX_HAS_FOCUSED] || input.form[PHX_HAS_SUBMITTED])){
+    if(field && !(this.private(input, PHX_HAS_FOCUSED) || this.private(input.form, PHX_HAS_SUBMITTED))){
       el.style.display = "none"
     }
   },
@@ -628,107 +715,51 @@ let DOM = {
     return node.getAttribute && node.getAttribute(PHX_PARENT_ID)
   },
 
-  applyPhxUpdate(fromEl, toEl, phxUpdate, phxHook, changes){
-    let type = toEl.getAttribute && toEl.getAttribute(phxUpdate)
-    if(!type || type === "replace"){
-      return false
-    } else {
-      DOM.mergeAttrs(fromEl, toEl)
-    }
-
-    switch(type){
-      case "ignore": break
-      case "append":
-      case "prepend":
-        let newHTML = toEl.innerHTML
-        if(fromEl[PHX_PREV_APPEND] === newHTML){ break }
-
-        fromEl[PHX_PREV_APPEND] = newHTML
-        toEl.querySelectorAll("[id]").forEach(el => {
-          let existing = fromEl.querySelector(`[id="${el.id}"]`)
-          if(existing){
-            changes.discarded.push(existing)
-            el.remove()
-            existing.replaceWith(el)
-          }
-        })
-        let operation = type === "append" ? "beforeend" : "afterbegin"
-        fromEl.insertAdjacentHTML(operation, toEl.innerHTML)
-        fromEl.querySelectorAll(`[${phxHook}]`).forEach(el => changes.added.push(el))
-        break
-      default: throw new Error(`unsupported phx-update "${type}"`)
-    }
-    changes.updated.push({fromEl, toEl: fromEl})
-    return true
-  },
-
   patch(view, container, id, html){
-    let changes = {added: [], updated: [], discarded: []}
+    let changes = {added: [], updated: [], discarded: [], phxChildrenAdded: []}
     let focused = view.liveSocket.getActiveElement()
-    let selectionStart = null
-    let selectionEnd = null
+    let {selectionStart, selectionEnd} = focused && DOM.isTextualInput(focused) ? focused : {}
     let phxUpdate = view.liveSocket.binding(PHX_UPDATE)
-    let phxHook = view.liveSocket.binding(PHX_HOOK)
-    let diffContainer = container.cloneNode()
-    diffContainer.innerHTML = html
+    let diffContainer = this.buildDiffContainer(container, html, phxUpdate)
 
-    if(DOM.isTextualInput(focused)){
-      selectionStart = focused.selectionStart
-      selectionEnd = focused.selectionEnd
-    }
-
-    morphdom(container, diffContainer, {
+    morphdom(container, diffContainer.outerHTML, {
       childrenOnly: true,
       onBeforeNodeAdded: function(el){
         //input handling
-        DOM.discardError(el)
+        DOM.discardError(container, el)
         return el
       },
       onNodeAdded: function(el){
         // nested view handling
         if(DOM.isPhxChild(el) && view.ownsElement(el)){
-          view.onNewChildAdded()
-          return true
-        } else {
-          changes.added.push(el)
+          changes.phxChildrenAdded.push(el)
         }
+        changes.added.push(el)
       },
       onBeforeNodeDiscarded: function(el){
         // nested view handling
         if(DOM.isPhxChild(el)){
-          view.liveSocket.destroyViewById(el.id)
+          view.liveSocket.destroyViewByEl(el)
           return true
         }
         changes.discarded.push(el)
       },
       onBeforeElUpdated: function(fromEl, toEl) {
         if(fromEl.isEqualNode(toEl)){ return false } // Skip subtree if both elems and children are equal
-
-        if(DOM.applyPhxUpdate(fromEl, toEl, phxUpdate, phxHook, changes)){
-          return false
-        }
+        if(fromEl.getAttribute(phxUpdate) === "ignore"){ return false }
+        if(fromEl.type === "number" && (fromEl.validity && fromEl.validity.badInput)){ return false }
 
         // nested view handling
         if(DOM.isPhxChild(toEl)){
           let prevStatic = fromEl.getAttribute(PHX_STATIC)
-
-          if(!Session.isEqual(toEl, fromEl)){
-            view.liveSocket.destroyViewById(fromEl.id)
-            view.onNewChildAdded()
-          }
           DOM.mergeAttrs(fromEl, toEl)
           fromEl.setAttribute(PHX_STATIC, prevStatic)
           return false
         }
 
         // input handling
-        if(fromEl.getAttribute && fromEl[PHX_HAS_SUBMITTED]){
-          toEl[PHX_HAS_SUBMITTED] = true
-        }
-        if(fromEl[PHX_HAS_FOCUSED]){
-          toEl[PHX_HAS_FOCUSED] = true
-        }
-        DOM.discardError(toEl)
+        DOM.copyPrivates(toEl, fromEl)
+        DOM.discardError(container, toEl)
 
         if(DOM.isTextualInput(fromEl) && fromEl === focused){
           DOM.mergeInputs(fromEl, toEl)
@@ -741,24 +772,64 @@ let DOM = {
       }
     })
 
-    view.liveSocket.silenceEvents(() => {
-      DOM.restoreFocus(focused, selectionStart, selectionEnd)
-    })
-    Browser.dispatchEvent(document, "phx:update")
+    view.liveSocket.silenceEvents(() => DOM.restoreFocus(focused, selectionStart, selectionEnd))
+    DOM.dispatchEvent(document, "phx:update")
     return changes
   },
 
-  mergeAttrs(target, source){
+  dispatchEvent(target, eventString, detail = {}){
+    let event = new CustomEvent(eventString, {bubbles: true, cancelable: true, detail: detail})
+    target.dispatchEvent(event)
+  },
+
+  cloneNode(node, html){
+    let cloned = node.cloneNode()
+    cloned.innerHTML = html || node.innerHTML
+    return cloned
+  },
+
+  // builds container for morphdom patch
+  // - precomputes append/prepend content in diff node to make it appear as if
+  //   the contents had been appended/prepended on full child node list
+  // - precomputes updates on existing child ids within a prepend/append child list
+  //   to allow existing nodes to be updated in place rather than reordered
+  buildDiffContainer(container, html, phxUpdate){
+    let diffContainer = this.cloneNode(container, html)
+    let elementsOnly = child => child.nodeType === Node.ELEMENT_NODE
+    let idsOnly = child => child.id || logError("append/prepend children require IDs, got: ", child)
+
+    DOM.all(diffContainer, `[${phxUpdate}=append],[${phxUpdate}=prepend]`, el => {
+      let id = el.id || logError("append/prepend requires an ID, got: ", el)
+      let existingInContainer = container.querySelector(`#${id}`)
+      if(!existingInContainer){ return }
+      let existing = this.cloneNode(existingInContainer)
+      let updateType = el.getAttribute(phxUpdate)
+      let newIds = Array.from(el.childNodes).filter(elementsOnly).map(idsOnly)
+      let existingIds = Array.from(existing.childNodes).filter(elementsOnly).map(idsOnly)
+
+      if(newIds.toString() !== existingIds.toString()){
+        let dupIds = newIds.filter(id => existingIds.indexOf(id) >= 0)
+        dupIds.forEach(id => {
+          let updatedEl = el.querySelector(`#${id}`)
+          existing.querySelector(`#${id}`).replaceWith(updatedEl)
+        })
+        el.insertAdjacentHTML(updateType === "append" ? "afterbegin" : "beforeend", existing.innerHTML)
+      }
+    })
+
+    return diffContainer
+  },
+
+  mergeAttrs(target, source, exclude = []){
     var attrs = source.attributes
     for (let i = 0, length = attrs.length; i < length; i++){
       let name = attrs[i].name
-      let value = source.getAttribute(name)
-      target.setAttribute(name, value)
+      if(exclude.indexOf(name) < 0){ target.setAttribute(name, source.getAttribute(name)) }
     }
   },
 
   mergeInputs(target, source){
-    DOM.mergeAttrs(target, source)
+    DOM.mergeAttrs(target, source, ["value"])
     target.readOnly = source.readOnly
   },
 
@@ -780,7 +851,6 @@ export class View {
   constructor(el, liveSocket, parentView, href){
     this.liveSocket = liveSocket
     this.parent = parentView
-    this.newChildrenAdded = false
     this.gracefullyClosed = false
     this.el = el
     this.id = this.el.id
@@ -804,7 +874,7 @@ export class View {
 
   isConnected(){ return this.channel.canPush() }
 
-  getSession(){ return Session.get(this.el) }
+  getSession(){ return this.el.getAttribute(PHX_SESSION) }
 
   getStatic(){
     let val = this.el.getAttribute(PHX_STATIC)
@@ -866,7 +936,7 @@ export class View {
     this.hideLoader()
     let changes = DOM.patch(this, this.el, this.id, Rendered.toString(this.rendered))
     changes.added.push(this.el)
-    Browser.all(this.el, `[${this.binding(PHX_HOOK)}]`, hookEl => changes.added.push(hookEl))
+    DOM.all(this.el, `[${this.binding(PHX_HOOK)}]`, hookEl => changes.added.push(hookEl))
     this.triggerHooks(changes)
     this.joinNewChildren()
     if(live_redirect){
@@ -876,8 +946,8 @@ export class View {
   }
 
   joinNewChildren(){
-    Browser.all(document, `${PHX_VIEW_SELECTOR}[${PHX_PARENT_ID}="${this.id}"]`, el => {
-      let child = this.liveSocket.getViewById(el.id)
+    DOM.all(document, `${PHX_VIEW_SELECTOR}[${PHX_PARENT_ID}="${this.id}"]`, el => {
+      let child = this.liveSocket.getViewByEl(el)
       if(!child){
         this.liveSocket.joinView(el, this)
       }
@@ -891,9 +961,11 @@ export class View {
     this.log("update", () => ["", JSON.stringify(diff)])
     this.rendered = Rendered.mergeDiff(this.rendered, diff)
     let html = Rendered.toString(this.rendered)
-    this.newChildrenAdded = false
-    this.triggerHooks(DOM.patch(this, this.el, this.id, html))
-    if(this.newChildrenAdded){ this.joinNewChildren() }
+    let changes = DOM.patch(this, this.el, this.id, html)
+    if(changes.phxChildrenAdded.length > 0){
+      this.joinNewChildren()
+    }
+    this.triggerHooks(changes)
   }
 
   getHook(el){ return this.viewHooks[ViewHook.elementID(el)] }
@@ -913,6 +985,7 @@ export class View {
   }
 
   triggerHooks(changes){
+    let destroyedCIDs = []
     changes.updated.push({fromEl: this.el, toEl: this.el})
     changes.added.forEach(el => this.addHook(el))
     changes.updated.forEach(({fromEl, toEl}) => {
@@ -926,9 +999,12 @@ export class View {
       }
     })
     changes.discarded.forEach(el => {
+      let cid = this.componentID(el)
+      if(cid){ destroyedCIDs.push(cid) }
       let hook = this.getHook(el)
       hook && this.destroyHook(hook)
     })
+    if(destroyedCIDs.length > 0){ this.pushComponentsDestroyed(destroyedCIDs) }
   }
 
   applyPendingUpdates(){
@@ -936,10 +1012,6 @@ export class View {
     this.pendingDiffs = []
   }
 
-  onNewChildAdded(){
-    this.newChildrenAdded = true
-  }
-
   bindChannel(){
     this.channel.on("diff", (diff) => this.update(diff))
     this.channel.on("redirect", ({to, flash}) => this.onRedirect({to, flash}))
@@ -956,10 +1028,14 @@ export class View {
   }
 
   onExternalLiveRedirect({to, kind}){
-    this.liveSocket.replaceRoot(to, () => Browser.pushState(kind, {}, to))
+    this.liveSocket.replaceRoot(to, () => {
+      Browser.pushState(kind, {}, to)
+      this.liveSocket.registerNewLocation(window.location)
+    })
   }
 
   onLiveRedirect({to, kind}){
+    this.href = to
     Browser.pushState(kind, {}, to)
   }
 
@@ -983,6 +1059,7 @@ export class View {
   }
 
   onJoinError(resp){
+    if(resp.redirect || resp.external_live_redirect){ this.channel.leave() }
     if(resp.redirect){ return this.onRedirect(resp.redirect) }
     if(resp.external_live_redirect){ return this.onExternalLiveRedirect(resp.external_live_redirect) }
     this.displayError()
@@ -1017,42 +1094,46 @@ export class View {
     )
   }
 
+  componentID(el){ return el.getAttribute && el.getAttribute(PHX_COMPONENT) && el.id }
+
+  targetComponentID(target){
+    return maybe(target.closest(`[${PHX_COMPONENT}]`), el => this.ownsElement(el) && this.componentID(el))
+  }
+
   pushEvent(type, el, phxEvent, meta){
-    let value = el.getAttribute(this.binding("value"))
-    if(value === null){
-      value = meta
-      let prefix = this.binding("value-")
-      for(let key of el.getAttributeNames()){ if(!key.startsWith(prefix)){ continue }
-        value[key.replace(prefix, "")] = el.getAttribute(key)
-      }
-      if(el.value !== undefined){ value.value = el.value }
+    let prefix = this.binding("value-")
+    for (let i = 0; i < el.attributes.length; i++){
+      let name = el.attributes[i].name
+      if(name.startsWith(prefix)){ meta[name.replace(prefix, "")] = el.getAttribute(name) }
     }
-    
+    if(el.value !== undefined){ meta.value = el.value }
+
     this.pushWithReply("event", {
       type: type,
       event: phxEvent,
-      value: value
+      value: meta,
+      cid: this.targetComponentID(el) || undefined
     })
   }
 
   pushKey(keyElement, kind, phxEvent, meta){
-    let value = keyElement.getAttribute(this.binding("value"))
-    if(value === null){
-      value = meta
-      if(keyElement.value !== undefined){ value.value = keyElement.value }
-    }
+    if(keyElement.value !== undefined){ meta.value = keyElement.value }
+
     this.pushWithReply("event", {
       type: kind,
       event: phxEvent,
-      value: value
+      value: meta,
+      cid: this.targetComponentID(keyElement) || undefined
     })
   }
 
   pushInput(inputEl, phxEvent, e){
+    DOM.dispatchEvent(inputEl.form, PHX_CHANGE, {triggeredBy: inputEl})
     this.pushWithReply("event", {
       type: "form",
       event: phxEvent,
-      value: serializeForm(inputEl.form, {_target: e.target.name})
+      value: serializeForm(inputEl.form, {_target: e.target.name}),
+      cid: this.targetComponentID(inputEl) || undefined
     })
   }
 
@@ -1060,7 +1141,8 @@ export class View {
     this.pushWithReply("event", {
       type: "form",
       event: phxEvent,
-      value: serializeForm(formEl)
+      value: serializeForm(formEl),
+      cid: this.targetComponentID(formEl) || undefined
     }, onReply)
   }
 
@@ -1079,14 +1161,18 @@ export class View {
     }).receive("timeout", () => Browser.redirect(window.location.href))
   }
 
-  ownsElement(element){
-    return element.getAttribute(PHX_PARENT_ID) === this.id ||
-           maybe(element.closest(PHX_VIEW_SELECTOR), "id") === this.id
+  pushComponentsDestroyed(cids){
+    this.pushWithReply("cids_destroyed", {cids: cids})
+  }
+
+  ownsElement(el){
+    return el.getAttribute(PHX_PARENT_ID) === this.id ||
+           maybe(el.closest(PHX_VIEW_SELECTOR), node => node.id) === this.id
   }
 
   submitForm(form, phxEvent){
     let prefix = this.liveSocket.getBindingPrefix()
-    form[PHX_HAS_SUBMITTED] = "true"
+    DOM.putPrivate(form, PHX_HAS_SUBMITTED, true)
     DOM.disableForm(form, prefix)
     this.liveSocket.blurActiveElement(this)
     this.pushFormSubmit(form, phxEvent, () => {
@@ -1121,4 +1207,4 @@ class ViewHook {
   }
 }
 
-export default LiveSocket
+export default LiveSocket

package/assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "main": "./priv/static/_live_view.js",
@@ -14,7 +14,6 @@
   },
   "dependencies": {
     "morphdom": "2.5.5",
-    "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html"
   },
   "devDependencies": {
@@ -26,6 +25,7 @@
     "expose-loader": "^0.7.5",
     "extract-text-webpack-plugin": "^4.0.0-beta.0",
     "jest": "^24.5.0",
+    "phoenix": "file:../deps/phoenix",
     "style-loader": "^0.20.2",
     "wait-for-expect": "^1.1.0",
     "webpack": "4.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "phoenix_live_view",
-  "version": "0.1.1",
+  "version": "0.3.1",
   "description": "The Phoenix LiveView JavaScript client.",
   "license": "MIT",
   "main": "./priv/static/phoenix_live_view.js",

package/priv/static/phoenix_live_view.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.phoenix_live_view=t():e.phoenix_live_view=t()}(this,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([function(e,t,n){(function(e){var n,i,o;function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}!function(s,a){"object"==r(t)&&"object"==r(e)?e.exports=a():(i=[],void 0===(o="function"==typeof(n=a)?n.apply(t,i):n)||(e.exports=o))}(0,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var o=t[i]={i:i,l:!1,exports:{}};return e[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==r(e)&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(i,o,function(t){return e[t]}.bind(null,o));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){(function(t){e.exports=t.Phoenix=n(2)}).call(this,n(1))},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==("undefined"==typeof window?"undefined":r(window))&&(n=window)}e.exports=n},function(e,t,n){"use strict";function i(e){return(i="function"==typeof Symbol&&"symbol"==r(Symbol.iterator)?function(e){return r(e)}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":r(e)})(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function a(e,t,n){return t&&s(e.prototype,t),n&&s(e,n),e}n.r(t),n.d(t,"Channel",function(){return k}),n.d(t,"Serializer",function(){return b}),n.d(t,"Socket",function(){return w}),n.d(t,"LongPoll",function(){return E}),n.d(t,"Ajax",function(){return x}),n.d(t,"Presence",function(){return S});var u="undefined"!=typeof self?self:null,c="undefined"!=typeof window?window:null,l=u||c||void 0,h={connecting:0,open:1,closing:2,closed:3},f=1e4,d={closed:"closed",errored:"errored",joined:"joined",joining:"joining",leaving:"leaving"},v={close:"phx_close",error:"phx_error",join:"phx_join",reply:"phx_reply",leave:"phx_leave"},p=[v.close,v.error,v.join,v.reply,v.leave],y={longpoll:"longpoll",websocket:"websocket"},g=function(e){return"function"==typeof e?e:function(){return e}},m=function(){function e(t,n,i,r){o(this,e),this.channel=t,this.event=n,this.payload=i||function(){return{}},this.receivedResp=null,this.timeout=r,this.timeoutTimer=null,this.recHooks=[],this.sent=!1}return a(e,[{key:"resend",value:function(e){this.timeout=e,this.reset(),this.send()}},{key:"send",value:function(){this.hasReceived("timeout")||(this.startTimeout(),this.sent=!0,this.channel.socket.push({topic:this.channel.topic,event:this.event,payload:this.payload(),ref:this.ref,join_ref:this.channel.joinRef()}))}},{key:"receive",value:function(e,t){return this.hasReceived(e)&&t(this.receivedResp.response),this.recHooks.push({status:e,callback:t}),this}},{key:"reset",value:function(){this.cancelRefEvent(),this.ref=null,this.refEvent=null,this.receivedResp=null,this.sent=!1}},{key:"matchReceive",value:function(e){var t=e.status,n=e.response;e.ref,this.recHooks.filter(function(e){return e.status===t}).forEach(function(e){return e.callback(n)})}},{key:"cancelRefEvent",value:function(){this.refEvent&&this.channel.off(this.refEvent)}},{key:"cancelTimeout",value:function(){clearTimeout(this.timeoutTimer),this.timeoutTimer=null}},{key:"startTimeout",value:function(){var e=this;this.timeoutTimer&&this.cancelTimeout(),this.ref=this.channel.socket.makeRef(),this.refEvent=this.channel.replyEventName(this.ref),this.channel.on(this.refEvent,function(t){e.cancelRefEvent(),e.cancelTimeout(),e.receivedResp=t,e.matchReceive(t)}),this.timeoutTimer=setTimeout(function(){e.trigger("timeout",{})},this.timeout)}},{key:"hasReceived",value:function(e){return this.receivedResp&&this.receivedResp.status===e}},{key:"trigger",value:function(e,t){this.channel.trigger(this.refEvent,{status:e,response:t})}}]),e}(),k=function(){function e(t,n,i){var r=this;o(this,e),this.state=d.closed,this.topic=t,this.params=g(n||{}),this.socket=i,this.bindings=[],this.bindingRef=0,this.timeout=this.socket.timeout,this.joinedOnce=!1,this.joinPush=new m(this,v.join,this.params,this.timeout),this.pushBuffer=[],this.rejoinTimer=new A(function(){r.socket.isConnected()&&r.rejoin()},this.socket.rejoinAfterMs),this.socket.onError(function(){return r.rejoinTimer.reset()}),this.socket.onOpen(function(){r.rejoinTimer.reset(),r.isErrored()&&r.rejoin()}),this.joinPush.receive("ok",function(){r.state=d.joined,r.rejoinTimer.reset(),r.pushBuffer.forEach(function(e){return e.send()}),r.pushBuffer=[]}),this.joinPush.receive("error",function(){r.state=d.errored,r.socket.isConnected()&&r.rejoinTimer.scheduleTimeout()}),this.onClose(function(){r.rejoinTimer.reset(),r.socket.hasLogger()&&r.socket.log("channel","close ".concat(r.topic," ").concat(r.joinRef())),r.state=d.closed,r.socket.remove(r)}),this.onError(function(e){r.socket.hasLogger()&&r.socket.log("channel","error ".concat(r.topic),e),r.isJoining()&&r.joinPush.reset(),r.state=d.errored,r.socket.isConnected()&&r.rejoinTimer.scheduleTimeout()}),this.joinPush.receive("timeout",function(){r.socket.hasLogger()&&r.socket.log("channel","timeout ".concat(r.topic," (").concat(r.joinRef(),")"),r.joinPush.timeout),new m(r,v.leave,g({}),r.timeout).send(),r.state=d.errored,r.joinPush.reset(),r.socket.isConnected()&&r.rejoinTimer.scheduleTimeout()}),this.on(v.reply,function(e,t){r.trigger(r.replyEventName(t),e)})}return a(e,[{key:"join",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.timeout;if(this.joinedOnce)throw new Error("tried to join multiple times. 'join' can only be called a single time per channel instance");return this.timeout=e,this.joinedOnce=!0,this.rejoin(),this.joinPush}},{key:"onClose",value:function(e){this.on(v.close,e)}},{key:"onError",value:function(e){return this.on(v.error,function(t){return e(t)})}},{key:"on",value:function(e,t){var n=this.bindingRef++;return this.bindings.push({event:e,ref:n,callback:t}),n}},{key:"off",value:function(e,t){this.bindings=this.bindings.filter(function(n){return!(n.event===e&&(void 0===t||t===n.ref))})}},{key:"canPush",value:function(){return this.socket.isConnected()&&this.isJoined()}},{key:"push",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.timeout;if(!this.joinedOnce)throw new Error("tried to push '".concat(e,"' to '").concat(this.topic,"' before joining. Use channel.join() before pushing events"));var i=new m(this,e,function(){return t},n);return this.canPush()?i.send():(i.startTimeout(),this.pushBuffer.push(i)),i}},{key:"leave",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.timeout;this.rejoinTimer.reset(),this.joinPush.cancelTimeout(),this.state=d.leaving;var n=function(){e.socket.hasLogger()&&e.socket.log("channel","leave ".concat(e.topic)),e.trigger(v.close,"leave")},i=new m(this,v.leave,g({}),t);return i.receive("ok",function(){return n()}).receive("timeout",function(){return n()}),i.send(),this.canPush()||i.trigger("ok",{}),i}},{key:"onMessage",value:function(e,t,n){return t}},{key:"isLifecycleEvent",value:function(e){return p.indexOf(e)>=0}},{key:"isMember",value:function(e,t,n,i){return!(this.topic!==e||i&&i!==this.joinRef()&&this.isLifecycleEvent(t)&&(this.socket.hasLogger()&&this.socket.log("channel","dropping outdated message",{topic:e,event:t,payload:n,joinRef:i}),1))}},{key:"joinRef",value:function(){return this.joinPush.ref}},{key:"sendJoin",value:function(e){this.state=d.joining,this.joinPush.resend(e)}},{key:"rejoin",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.timeout;this.isLeaving()||this.sendJoin(e)}},{key:"trigger",value:function(e,t,n,i){var o=this.onMessage(e,t,n,i);if(t&&!o)throw new Error("channel onMessage callbacks must return the payload, modified or unmodified");for(var r=0;r<this.bindings.length;r++){var s=this.bindings[r];s.event===e&&s.callback(o,n,i||this.joinRef())}}},{key:"replyEventName",value:function(e){return"chan_reply_".concat(e)}},{key:"isClosed",value:function(){return this.state===d.closed}},{key:"isErrored",value:function(){return this.state===d.errored}},{key:"isJoined",value:function(){return this.state===d.joined}},{key:"isJoining",value:function(){return this.state===d.joining}},{key:"isLeaving",value:function(){return this.state===d.leaving}}]),e}(),b={encode:function(e,t){var n=[e.join_ref,e.ref,e.topic,e.event,e.payload];return t(JSON.stringify(n))},decode:function(e,t){var n=function(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],i=!0,o=!1,r=void 0;try{for(var s,a=e[Symbol.iterator]();!(i=(s=a.next()).done)&&(n.push(s.value),!t||n.length!==t);i=!0);}catch(e){o=!0,r=e}finally{try{i||null==a.return||a.return()}finally{if(o)throw r}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}(JSON.parse(e),5);return t({join_ref:n[0],ref:n[1],topic:n[2],event:n[3],payload:n[4]})}},w=function(){function e(t){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};o(this,e),this.stateChangeCallbacks={open:[],close:[],error:[],message:[]},this.channels=[],this.sendBuffer=[],this.ref=0,this.timeout=i.timeout||f,this.transport=i.transport||l.WebSocket||E,this.defaultEncoder=b.encode,this.defaultDecoder=b.decode,this.closeWasClean=!1,this.unloaded=!1,this.binaryType=i.binaryType||"arraybuffer",this.transport!==E?(this.encode=i.encode||this.defaultEncoder,this.decode=i.decode||this.defaultDecoder):(this.encode=this.defaultEncoder,this.decode=this.defaultDecoder),c&&c.addEventListener&&c.addEventListener("beforeunload",function(e){n.conn&&(n.unloaded=!0,n.abnormalClose("unloaded"))}),this.heartbeatIntervalMs=i.heartbeatIntervalMs||3e4,this.rejoinAfterMs=function(e){return i.rejoinAfterMs?i.rejoinAfterMs(e):[1e3,2e3,5e3][e-1]||1e4},this.reconnectAfterMs=function(e){return n.unloaded?100:i.reconnectAfterMs?i.reconnectAfterMs(e):[10,50,100,150,200,250,500,1e3,2e3][e-1]||5e3},this.logger=i.logger||null,this.longpollerTimeout=i.longpollerTimeout||2e4,this.params=g(i.params||{}),this.endPoint="".concat(t,"/").concat(y.websocket),this.heartbeatTimer=null,this.pendingHeartbeatRef=null,this.reconnectTimer=new A(function(){n.teardown(function(){return n.connect()})},this.reconnectAfterMs)}return a(e,[{key:"protocol",value:function(){return location.protocol.match(/^https/)?"wss":"ws"}},{key:"endPointURL",value:function(){var e=x.appendParams(x.appendParams(this.endPoint,this.params()),{vsn:"2.0.0"});return"/"!==e.charAt(0)?e:"/"===e.charAt(1)?"".concat(this.protocol(),":").concat(e):"".concat(this.protocol(),"://").concat(location.host).concat(e)}},{key:"disconnect",value:function(e,t,n){this.closeWasClean=!0,this.reconnectTimer.reset(),this.teardown(e,t,n)}},{key:"connect",value:function(e){var t=this;e&&(console&&console.log("passing params to connect is deprecated. Instead pass :params to the Socket constructor"),this.params=g(e)),this.conn||(this.closeWasClean=!1,this.conn=new this.transport(this.endPointURL()),this.conn.binaryType=this.binaryType,this.conn.timeout=this.longpollerTimeout,this.conn.onopen=function(){return t.onConnOpen()},this.conn.onerror=function(e){return t.onConnError(e)},this.conn.onmessage=function(e){return t.onConnMessage(e)},this.conn.onclose=function(e){return t.onConnClose(e)})}},{key:"log",value:function(e,t,n){this.logger(e,t,n)}},{key:"hasLogger",value:function(){return null!==this.logger}},{key:"onOpen",value:function(e){this.stateChangeCallbacks.open.push(e)}},{key:"onClose",value:function(e){this.stateChangeCallbacks.close.push(e)}},{key:"onError",value:function(e){this.stateChangeCallbacks.error.push(e)}},{key:"onMessage",value:function(e){this.stateChangeCallbacks.message.push(e)}},{key:"onConnOpen",value:function(){this.hasLogger()&&this.log("transport","connected to ".concat(this.endPointURL())),this.unloaded=!1,this.closeWasClean=!1,this.flushSendBuffer(),this.reconnectTimer.reset(),this.resetHeartbeat(),this.stateChangeCallbacks.open.forEach(function(e){return e()})}},{key:"resetHeartbeat",value:function(){var e=this;this.conn&&this.conn.skipHeartbeat||(this.pendingHeartbeatRef=null,clearInterval(this.heartbeatTimer),this.heartbeatTimer=setInterval(function(){return e.sendHeartbeat()},this.heartbeatIntervalMs))}},{key:"teardown",value:function(e,t,n){this.conn&&(this.conn.onclose=function(){},t?this.conn.close(t,n||""):this.conn.close(),this.conn=null),e&&e()}},{key:"onConnClose",value:function(e){this.hasLogger()&&this.log("transport","close",e),this.triggerChanError(),clearInterval(this.heartbeatTimer),this.closeWasClean||this.reconnectTimer.scheduleTimeout(),this.stateChangeCallbacks.close.forEach(function(t){return t(e)})}},{key:"onConnError",value:function(e){this.hasLogger()&&this.log("transport",e),this.triggerChanError(),this.stateChangeCallbacks.error.forEach(function(t){return t(e)})}},{key:"triggerChanError",value:function(){this.channels.forEach(function(e){e.isErrored()||e.isLeaving()||e.isClosed()||e.trigger(v.error)})}},{key:"connectionState",value:function(){switch(this.conn&&this.conn.readyState){case h.connecting:return"connecting";case h.open:return"open";case h.closing:return"closing";default:return"closed"}}},{key:"isConnected",value:function(){return"open"===this.connectionState()}},{key:"remove",value:function(e){this.channels=this.channels.filter(function(t){return t.joinRef()!==e.joinRef()})}},{key:"channel",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=new k(e,t,this);return this.channels.push(n),n}},{key:"push",value:function(e){var t=this;if(this.hasLogger()){var n=e.topic,i=e.event,o=e.payload,r=e.ref,s=e.join_ref;this.log("push","".concat(n," ").concat(i," (").concat(s,", ").concat(r,")"),o)}this.isConnected()?this.encode(e,function(e){return t.conn.send(e)}):this.sendBuffer.push(function(){return t.encode(e,function(e){return t.conn.send(e)})})}},{key:"makeRef",value:function(){var e=this.ref+1;return e===this.ref?this.ref=0:this.ref=e,this.ref.toString()}},{key:"sendHeartbeat",value:function(){if(this.isConnected()){if(this.pendingHeartbeatRef)return this.pendingHeartbeatRef=null,this.hasLogger()&&this.log("transport","heartbeat timeout. Attempting to re-establish connection"),void this.abnormalClose("heartbeat timeout");this.pendingHeartbeatRef=this.makeRef(),this.push({topic:"phoenix",event:"heartbeat",payload:{},ref:this.pendingHeartbeatRef})}}},{key:"abnormalClose",value:function(e){this.closeWasClean=!1,this.conn.close(1e3,e)}},{key:"flushSendBuffer",value:function(){this.isConnected()&&this.sendBuffer.length>0&&(this.sendBuffer.forEach(function(e){return e()}),this.sendBuffer=[])}},{key:"onConnMessage",value:function(e){var t=this;this.decode(e.data,function(e){var n=e.topic,i=e.event,o=e.payload,r=e.ref,s=e.join_ref;r&&r===t.pendingHeartbeatRef&&(t.pendingHeartbeatRef=null),t.hasLogger()&&t.log("receive","".concat(o.status||""," ").concat(n," ").concat(i," ").concat(r&&"("+r+")"||""),o);for(var a=0;a<t.channels.length;a++){var u=t.channels[a];u.isMember(n,i,o,s)&&u.trigger(i,o,r,s)}for(var c=0;c<t.stateChangeCallbacks.message.length;c++)t.stateChangeCallbacks.message[c](e)})}}]),e}(),E=function(){function e(t){o(this,e),this.endPoint=null,this.token=null,this.skipHeartbeat=!0,this.onopen=function(){},this.onerror=function(){},this.onmessage=function(){},this.onclose=function(){},this.pollEndpoint=this.normalizeEndpoint(t),this.readyState=h.connecting,this.poll()}return a(e,[{key:"normalizeEndpoint",value:function(e){return e.replace("ws://","http://").replace("wss://","https://").replace(new RegExp("(.*)/"+y.websocket),"$1/"+y.longpoll)}},{key:"endpointURL",value:function(){return x.appendParams(this.pollEndpoint,{token:this.token})}},{key:"closeAndRetry",value:function(){this.close(),this.readyState=h.connecting}},{key:"ontimeout",value:function(){this.onerror("timeout"),this.closeAndRetry()}},{key:"poll",value:function(){var e=this;this.readyState!==h.open&&this.readyState!==h.connecting||x.request("GET",this.endpointURL(),"application/json",null,this.timeout,this.ontimeout.bind(this),function(t){if(t){var n=t.status,i=t.token,o=t.messages;e.token=i}else n=0;switch(n){case 200:o.forEach(function(t){return e.onmessage({data:t})}),e.poll();break;case 204:e.poll();break;case 410:e.readyState=h.open,e.onopen(),e.poll();break;case 0:case 500:e.onerror(),e.closeAndRetry();break;default:throw new Error("unhandled poll status ".concat(n))}})}},{key:"send",value:function(e){var t=this;x.request("POST",this.endpointURL(),"application/json",e,this.timeout,this.onerror.bind(this,"timeout"),function(e){e&&200===e.status||(t.onerror(e&&e.status),t.closeAndRetry())})}},{key:"close",value:function(e,t){this.readyState=h.closed,this.onclose()}}]),e}(),x=function(){function e(){o(this,e)}return a(e,null,[{key:"request",value:function(e,t,n,i,o,r,s){if(l.XDomainRequest){var a=new XDomainRequest;this.xdomainRequest(a,e,t,i,o,r,s)}else{var u=l.XMLHttpRequest?new l.XMLHttpRequest:new ActiveXObject("Microsoft.XMLHTTP");this.xhrRequest(u,e,t,n,i,o,r,s)}}},{key:"xdomainRequest",value:function(e,t,n,i,o,r,s){var a=this;e.timeout=o,e.open(t,n),e.onload=function(){var t=a.parseJSON(e.responseText);s&&s(t)},r&&(e.ontimeout=r),e.onprogress=function(){},e.send(i)}},{key:"xhrRequest",value:function(e,t,n,i,o,r,s,a){var u=this;e.open(t,n,!0),e.timeout=r,e.setRequestHeader("Content-Type",i),e.onerror=function(){a&&a(null)},e.onreadystatechange=function(){if(e.readyState===u.states.complete&&a){var t=u.parseJSON(e.responseText);a(t)}},s&&(e.ontimeout=s),e.send(o)}},{key:"parseJSON",value:function(e){if(!e||""===e)return null;try{return JSON.parse(e)}catch(t){return console&&console.log("failed to parse JSON response",e),null}}},{key:"serialize",value:function(e,t){var n=[];for(var o in e)if(e.hasOwnProperty(o)){var r=t?"".concat(t,"[").concat(o,"]"):o,s=e[o];"object"===i(s)?n.push(this.serialize(s,r)):n.push(encodeURIComponent(r)+"="+encodeURIComponent(s))}return n.join("&")}},{key:"appendParams",value:function(e,t){if(0===Object.keys(t).length)return e;var n=e.match(/\?/)?"&":"?";return"".concat(e).concat(n).concat(this.serialize(t))}}]),e}();x.states={complete:4};var S=function(){function e(t){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};o(this,e);var r=i.events||{state:"presence_state",diff:"presence_diff"};this.state={},this.pendingDiffs=[],this.channel=t,this.joinRef=null,this.caller={onJoin:function(){},onLeave:function(){},onSync:function(){}},this.channel.on(r.state,function(t){var i=n.caller,o=i.onJoin,r=i.onLeave,s=i.onSync;n.joinRef=n.channel.joinRef(),n.state=e.syncState(n.state,t,o,r),n.pendingDiffs.forEach(function(t){n.state=e.syncDiff(n.state,t,o,r)}),n.pendingDiffs=[],s()}),this.channel.on(r.diff,function(t){var i=n.caller,o=i.onJoin,r=i.onLeave,s=i.onSync;n.inPendingSyncState()?n.pendingDiffs.push(t):(n.state=e.syncDiff(n.state,t,o,r),s())})}return a(e,[{key:"onJoin",value:function(e){this.caller.onJoin=e}},{key:"onLeave",value:function(e){this.caller.onLeave=e}},{key:"onSync",value:function(e){this.caller.onSync=e}},{key:"list",value:function(t){return e.list(this.state,t)}},{key:"inPendingSyncState",value:function(){return!this.joinRef||this.joinRef!==this.channel.joinRef()}}],[{key:"syncState",value:function(e,t,n,i){var o=this,r=this.clone(e),s={},a={};return this.map(r,function(e,n){t[e]||(a[e]=n)}),this.map(t,function(e,t){var n=r[e];if(n){var i=t.metas.map(function(e){return e.phx_ref}),u=n.metas.map(function(e){return e.phx_ref}),c=t.metas.filter(function(e){return u.indexOf(e.phx_ref)<0}),l=n.metas.filter(function(e){return i.indexOf(e.phx_ref)<0});c.length>0&&(s[e]=t,s[e].metas=c),l.length>0&&(a[e]=o.clone(n),a[e].metas=l)}else s[e]=t}),this.syncDiff(r,{joins:s,leaves:a},n,i)}},{key:"syncDiff",value:function(e,t,n,i){var o=t.joins,r=t.leaves,s=this.clone(e);return n||(n=function(){}),i||(i=function(){}),this.map(o,function(e,t){var i=s[e];if(s[e]=t,i){var o,r=s[e].metas.map(function(e){return e.phx_ref}),a=i.metas.filter(function(e){return r.indexOf(e.phx_ref)<0});(o=s[e].metas).unshift.apply(o,function(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}(a))}n(e,i,t)}),this.map(r,function(e,t){var n=s[e];if(n){var o=t.metas.map(function(e){return e.phx_ref});n.metas=n.metas.filter(function(e){return o.indexOf(e.phx_ref)<0}),i(e,n,t),0===n.metas.length&&delete s[e]}}),s}},{key:"list",value:function(e,t){return t||(t=function(e,t){return t}),this.map(e,function(e,n){return t(e,n)})}},{key:"map",value:function(e,t){return Object.getOwnPropertyNames(e).map(function(n){return t(n,e[n])})}},{key:"clone",value:function(e){return JSON.parse(JSON.stringify(e))}}]),e}(),A=function(){function e(t,n){o(this,e),this.callback=t,this.timerCalc=n,this.timer=null,this.tries=0}return a(e,[{key:"reset",value:function(){this.tries=0,clearTimeout(this.timer)}},{key:"scheduleTimeout",value:function(){var e=this;clearTimeout(this.timer),this.timer=setTimeout(function(){e.tries=e.tries+1,e.callback()},this.timerCalc(this.tries+1))}}]),e}()}])})}).call(this,n(2)(e))},function(e,t,n){"use strict";var i;n.r(t);var o="http://www.w3.org/1999/xhtml",r="undefined"==typeof document?void 0:document,s=!!r&&"content"in r.createElement("template"),a=!!r&&r.createRange&&"createContextualFragment"in r.createRange();function u(e){return s?function(e){var t=r.createElement("template");return t.innerHTML=e,t.content.childNodes[0]}(e):a?function(e){return i||(i=r.createRange()).selectNode(r.body),i.createContextualFragment(e).childNodes[0]}(e):function(e){var t=r.createElement("body");return t.innerHTML=e,t.childNodes[0]}(e)}function c(e,t){var n=e.nodeName,i=t.nodeName;return n===i||!!(t.actualize&&n.charCodeAt(0)<91&&i.charCodeAt(0)>90)&&n===i.toUpperCase()}function l(e,t,n){e[n]!==t[n]&&(e[n]=t[n],e[n]?e.setAttribute(n,""):e.removeAttribute(n))}var h={OPTION:function(e,t){var n=e.parentNode;if(n){var i=n.nodeName.toUpperCase();"OPTGROUP"===i&&(i=(n=n.parentNode)&&n.nodeName.toUpperCase()),"SELECT"!==i||n.hasAttribute("multiple")||(e.hasAttribute("selected")&&!t.selected&&(e.setAttribute("selected","selected"),e.removeAttribute("selected")),n.selectedIndex=-1)}l(e,t,"selected")},INPUT:function(e,t){l(e,t,"checked"),l(e,t,"disabled"),e.value!==t.value&&(e.value=t.value),t.hasAttribute("value")||e.removeAttribute("value")},TEXTAREA:function(e,t){var n=t.value;e.value!==n&&(e.value=n);var i=e.firstChild;if(i){var o=i.nodeValue;if(o==n||!n&&o==e.placeholder)return;i.nodeValue=n}},SELECT:function(e,t){if(!t.hasAttribute("multiple")){for(var n,i,o=-1,r=0,s=e.firstChild;s;)if("OPTGROUP"===(i=s.nodeName&&s.nodeName.toUpperCase()))s=(n=s).firstChild;else{if("OPTION"===i){if(s.hasAttribute("selected")){o=r;break}r++}!(s=s.nextSibling)&&n&&(s=n.nextSibling,n=null)}e.selectedIndex=o}}},f=1,d=11,v=3,p=8;function y(){}function g(e){return e.id}var m=function(e){return function(t,n,i){if(i||(i={}),"string"==typeof n)if("#document"===t.nodeName||"HTML"===t.nodeName){var s=n;(n=r.createElement("html")).innerHTML=s}else n=u(n);var a,l=i.getNodeKey||g,m=i.onBeforeNodeAdded||y,k=i.onNodeAdded||y,b=i.onBeforeElUpdated||y,w=i.onElUpdated||y,E=i.onBeforeNodeDiscarded||y,x=i.onNodeDiscarded||y,S=i.onBeforeElChildrenUpdated||y,A=!0===i.childrenOnly,C={};function j(e){a?a.push(e):a=[e]}function T(e,t,n){!1!==E(e)&&(t&&t.removeChild(e),x(e),function e(t,n){if(t.nodeType===f)for(var i=t.firstChild;i;){var o=void 0;n&&(o=l(i))?j(o):(x(i),i.firstChild&&e(i,n)),i=i.nextSibling}}(e,n))}function R(e){k(e);for(var t=e.firstChild;t;){var n=t.nextSibling,i=l(t);if(i){var o=C[i];o&&c(t,o)&&(t.parentNode.replaceChild(o,t),L(o,t))}R(t),t=n}}function L(i,o,s){var a=l(o);if(a&&delete C[a],!n.isSameNode||!n.isSameNode(t)){if(!s){if(!1===b(i,o))return;if(e(i,o),w(i),!1===S(i,o))return}"TEXTAREA"!==i.nodeName?function(e,t){var n,i,o,s,a,u=t.firstChild,d=e.firstChild;e:for(;u;){for(s=u.nextSibling,n=l(u);d;){if(o=d.nextSibling,u.isSameNode&&u.isSameNode(d)){u=s,d=o;continue e}i=l(d);var y=d.nodeType,g=void 0;if(y===u.nodeType&&(y===f?(n?n!==i&&((a=C[n])?o===a?g=!1:(e.insertBefore(a,d),i?j(i):T(d,e,!0),d=a):g=!1):i&&(g=!1),(g=!1!==g&&c(d,u))&&L(d,u)):y!==v&&y!=p||(g=!0,d.nodeValue!==u.nodeValue&&(d.nodeValue=u.nodeValue))),g){u=s,d=o;continue e}i?j(i):T(d,e,!0),d=o}if(n&&(a=C[n])&&c(a,u))e.appendChild(a),L(a,u);else{var k=m(u);!1!==k&&(k&&(u=k),u.actualize&&(u=u.actualize(e.ownerDocument||r)),e.appendChild(u),R(u))}u=s,d=o}!function(e,t,n){for(;t;){var i=t.nextSibling;(n=l(t))?j(n):T(t,e,!0),t=i}}(e,d,i);var b=h[e.nodeName];b&&b(e,t)}(i,o):h.TEXTAREA(i,o)}}!function e(t){if(t.nodeType===f||t.nodeType===d)for(var n=t.firstChild;n;){var i=l(n);i&&(C[i]=n),e(n),n=n.nextSibling}}(t);var _=t,P=_.nodeType,N=n.nodeType;if(!A)if(P===f)N===f?c(t,n)||(x(t),_=function(e,t){for(var n=e.firstChild;n;){var i=n.nextSibling;t.appendChild(n),n=i}return t}(t,function(e,t){return t&&t!==o?r.createElementNS(t,e):r.createElement(e)}(n.nodeName,n.namespaceURI))):_=n;else if(P===v||P===p){if(N===P)return _.nodeValue!==n.nodeValue&&(_.nodeValue=n.nodeValue),_;_=n}if(_===n)x(t);else if(L(_,n,A),a)for(var O=0,H=a.length;O<H;O++){var I=C[a[O]];I&&T(I,I.parentNode,!1)}return!A&&_!==t&&t.parentNode&&(_.actualize&&(_=_.actualize(t.ownerDocument||r)),t.parentNode.replaceChild(_,t)),_}}(function(e,t){var n,i,o,r,s,a=t.attributes;for(n=a.length-1;n>=0;--n)o=(i=a[n]).name,r=i.namespaceURI,s=i.value,r?(o=i.localName||o,e.getAttributeNS(r,o)!==s&&e.setAttributeNS(r,o,s)):e.getAttribute(o)!==s&&e.setAttribute(o,s);for(n=(a=e.attributes).length-1;n>=0;--n)!1!==(i=a[n]).specified&&(o=i.name,(r=i.namespaceURI)?(o=i.localName||o,t.hasAttributeNS(r,o)||e.removeAttributeNS(r,o)):t.hasAttribute(o)||e.removeAttribute(o))}),k=n(0);function b(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function w(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function E(e,t,n){return t&&w(e.prototype,t),n&&w(e,n),e}function x(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],i=!0,o=!1,r=void 0;try{for(var s,a=e[Symbol.iterator]();!(i=(s=a.next()).done)&&(n.push(s.value),!t||n.length!==t);i=!0);}catch(e){o=!0,r=e}finally{try{i||null==a.return||a.return()}finally{if(o)throw r}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function S(e){return(S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}n.d(t,"debug",function(){return L}),n.d(t,"Rendered",function(){return M}),n.d(t,"LiveSocket",function(){return D}),n.d(t,"Browser",function(){return V}),n.d(t,"View",function(){return J});var A="data-phx-view",C="[".concat(A,"]"),j=["text","textarea","number","email","password","search","tel","url"],T=1,R="phx-",L=function(e,t,n,i){console.log("".concat(e.id," ").concat(t,": ").concat(n," - "),i)},_=function(e){return"function"==typeof e?e:function(){return e}},P=function(e){return JSON.parse(JSON.stringify(e))},N=function(e,t){do{if(e.matches("[".concat(t,"]")))return e;e=e.parentElement||e.parentNode}while(null!==e&&1===e.nodeType&&!e.matches(C));return null},O=function(e){return null!==e&&"object"===S(e)&&!(e instanceof Array)},H=function(e,t){return e?e[t]:null},I=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=new FormData(e),i=new URLSearchParams,o=!0,r=!1,s=void 0;try{for(var a,u=n.entries()[Symbol.iterator]();!(o=(a=u.next()).done);o=!0){var c=x(a.value,2),l=c[0],h=c[1];i.append(l,h)}}catch(e){r=!0,s=e}finally{try{o||null==u.return||u.return()}finally{if(r)throw s}}for(var f in t)i.append(f,t[f]);return i.toString()},B={get:function(e){return e.getAttribute("data-phx-session")},isEqual:function(e,t){return this.get(e)===this.get(t)}},M={mergeDiff:function(e,t){return this.isNewFingerprint(t)?t:(function e(t,n){for(var i in n){var o=n[i],r=t[i];O(o)&&O(r)?(r.dynamics&&!o.dynamics&&delete r.dynamics,e(r,o)):t[i]=o}}(e,t),e)},isNewFingerprint:function(){return!!(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).static},toString:function(e){var t={buffer:""};return this.toOutputBuffer(e,t),t.buffer},toOutputBuffer:function(e,t){if(e.dynamics)return this.comprehensionToBuffer(e,t);var n=e.static;t.buffer+=n[0];for(var i=1;i<n.length;i++)this.dynamicToBuffer(e[i-1],t),t.buffer+=n[i]},comprehensionToBuffer:function(e,t){for(var n=e.dynamics,i=e.static,o=0;o<n.length;o++){var r=n[o];t.buffer+=i[0];for(var s=1;s<i.length;s++)this.dynamicToBuffer(r[s-1],t),t.buffer+=i[s]}},dynamicToBuffer:function(e,t){O(e)?this.toOutputBuffer(e,t):t.buffer+=e}},D=function(){function e(t){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};b(this,e),this.unloaded=!1,this.socket=new k.Socket(t,i),this.bindingPrefix=i.bindingPrefix||R,this.opts=i,this.views={},this.params=_(i.params||{}),this.viewLogger=i.viewLogger,this.activeElement=null,this.prevActive=null,this.prevInput=null,this.prevValue=null,this.silenced=!1,this.root=null,this.linkRef=0,this.href=window.location.href,this.pendingLink=null,this.currentLocation=P(window.location),this.hooks=i.hooks||{},this.socket.onOpen(function(){n.isUnloaded()&&(n.destroyAllViews(),n.joinRootViews()),n.unloaded=!1}),window.addEventListener("beforeunload",function(e){n.unloaded=!0}),this.bindTopLevelEvents()}return E(e,[{key:"getSocket",value:function(){return this.socket}},{key:"log",value:function(e,t,n){if(this.viewLogger){var i=x(n(),2),o=i[0],r=i[1];this.viewLogger(e,t,o,r)}}},{key:"connect",value:function(){var e=this;return["complete","loaded","interactive"].indexOf(document.readyState)>=0?this.joinRootViews():document.addEventListener("DOMContentLoaded",function(){e.joinRootViews()}),this.socket.connect()}},{key:"disconnect",value:function(){this.socket.disconnect()}},{key:"getHookCallbacks",value:function(e){return this.hooks[e]}},{key:"isUnloaded",value:function(){return this.unloaded}},{key:"getBindingPrefix",value:function(){return this.bindingPrefix}},{key:"binding",value:function(e){return"".concat(this.getBindingPrefix()).concat(e)}},{key:"channel",value:function(e,t){return this.socket.channel(e,t)}},{key:"joinRootViews",value:function(){var e=this;V.all(document,"".concat(C,":not([").concat("data-phx-parent-id","])"),function(t){var n=e.joinView(t,null,e.getHref());e.root=e.root||n})}},{key:"replaceRoot",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.setPendingLink(e);this.root.showLoader(T);var o=this.root.el,r=this.root.id,s=this.root.isLoading();V.fetchPage(e,function(a,u){if(200!==a)return V.redirect(e);var c=document.createElement("div");c.innerHTML=u,t.joinView(c.firstChild,null,e,function(e){t.commitPendingLink(i)?(n&&n(),t.destroyViewById(r),o.replaceWith(e.el),t.root=e,s&&t.root.showLoader()):e.destroy()})})}},{key:"joinView",value:function(e,t,n,i){if(!this.getViewById(e.id)){var o=new J(e,this,t,n);return this.views[o.id]=o,o.join(i),o}}},{key:"owner",value:function(e,t){var n=this.getViewById(H(e.closest(C),"id"));n&&t(n)}},{key:"getViewById",value:function(e){return this.views[e]}},{key:"onViewError",value:function(e){this.dropActiveElement(e)}},{key:"destroyAllViews",value:function(){for(var e in this.views)this.destroyViewById(e)}},{key:"destroyViewById",value:function(e){var t=this.views[e];t&&(delete this.views[t.id],this.root&&t.id===this.root.id&&(this.root=null),t.destroy())}},{key:"setActiveElement",value:function(e){var t=this;if(this.activeElement!==e){this.activeElement=e;var n=function(){e===t.activeElement&&(t.activeElement=null),e.removeEventListener("mouseup",t),e.removeEventListener("touchend",t)};e.addEventListener("mouseup",n),e.addEventListener("touchend",n)}}},{key:"getActiveElement",value:function(){return document.activeElement===document.body&&this.activeElement||document.activeElement}},{key:"dropActiveElement",value:function(e){this.prevActive&&e.ownsElement(this.prevActive)&&(this.prevActive=null)}},{key:"restorePreviouslyActiveFocus",value:function(){this.prevActive&&this.prevActive!==document.body&&this.prevActive.focus()}},{key:"blurActiveElement",value:function(){this.prevActive=this.getActiveElement(),this.prevActive!==document.body&&this.prevActive.blur()}},{key:"bindTopLevelEvents",value:function(){this.bindClicks(),this.bindNav(),this.bindForms(),this.bindTargetable({keyup:"keyup",keydown:"keydown"},function(e,t,n,i,o,r){n.pushKey(i,t,o,{altGraphKey:e.altGraphKey,altKey:e.altKey,charCode:e.charCode,code:e.code,ctrlKey:e.ctrlKey,key:e.key,keyCode:e.keyCode,keyIdentifier:e.keyIdentifier,keyLocation:e.keyLocation,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,which:e.which})}),this.bindTargetable({blur:"focusout",focus:"focusin"},function(e,t,n,i,o,r){r||n.pushEvent(t,i,o,{type:"focus"})}),this.bindTargetable({blur:"blur",focus:"focus"},function(e,t,n,i,o,r){r&&"window"!==!r&&n.pushEvent(t,i,o,{type:e.type})})}},{key:"setPendingLink",value:function(e){this.linkRef++;this.linkRef;return this.pendingLink=e,this.linkRef}},{key:"commitPendingLink",value:function(e){return this.linkRef===e&&(this.href=this.pendingLink,this.pendingLink=null,!0)}},{key:"getHref",value:function(){return this.href}},{key:"hasPendingLink",value:function(){return!!this.pendingLink}},{key:"bindTargetable",value:function(e,t){var n=this,i=function(i){var o=e[i];n.on(o,function(e){var o=n.binding(i),r=n.binding("target"),s=e.target.getAttribute&&e.target.getAttribute(o);s&&!e.target.getAttribute(r)?n.owner(e.target,function(n){return t(e,i,n,e.target,s,null)}):V.all(document,"[".concat(o,"][").concat(r,"=window]"),function(r){var s=r.getAttribute(o);n.owner(r,function(n){return t(e,i,n,r,s,"window")})})})};for(var o in e)i(o)}},{key:"bindClicks",value:function(){var e=this;window.addEventListener("click",function(t){var n=e.binding("click"),i=N(t.target,n),o=i&&i.getAttribute(n);if(o){t.preventDefault();var r={altKey:t.altKey,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,x:t.x||t.clientX,y:t.y||t.clientY,pageX:t.pageX,pageY:t.pageY,screenX:t.screenX,screenY:t.screenY};e.owner(i,function(e){return e.pushEvent("click",i,o,r)})}},!1)}},{key:"bindNav",value:function(){var e=this;V.canPushState()&&(window.onpopstate=function(t){if(e.registerNewLocation(window.location)){var n=window.location.href;e.root.isConnected()?e.root.pushInternalLink(n):e.replaceRoot(n)}},window.addEventListener("click",function(t){var n=N(t.target,"data-phx-live-link"),i=n&&n.getAttribute("data-phx-live-link");if(i){var o=n.href;t.preventDefault(),e.root.pushInternalLink(o,function(){V.pushState(i,{},o),e.registerNewLocation(window.location)})}},!1))}},{key:"registerNewLocation",value:function(e){var t=this.currentLocation;return t.pathname+t.search!==e.pathname+e.search&&(this.currentLocation=P(e),!0)}},{key:"bindForms",value:function(){var e=this;this.on("submit",function(t){var n=t.target.getAttribute(e.binding("submit"));n&&(t.preventDefault(),t.target.disabled=!0,e.owner(t.target,function(e){return e.submitForm(t.target,n)}))},!1);for(var t=["change","input"],n=0;n<t.length;n++){var i=t[n];this.on(i,function(t){var n=t.target,i="checkbox"===n.type?"checked":"value";if(e.prevInput!==n||e.prevValue!==n[i]){e.prevInput=n,e.prevValue=n[i];var o=n.form&&n.form.getAttribute(e.binding("change"));o&&e.owner(n,function(i){U.isTextualInput(n)?n["phx-has-focused"]=!0:e.setActiveElement(n),i.pushInput(n,o,t)})}},!1)}}},{key:"silenceEvents",value:function(e){this.silenced=!0,e(),this.silenced=!1}},{key:"on",value:function(e,t){var n=this;window.addEventListener(e,function(e){n.silenced||t(e)})}}]),e}(),V={all:function(e,t,n){e.querySelectorAll(t).forEach(n)},canPushState:function(){return void 0!==history.pushState},fetchPage:function(e,t){var n=new XMLHttpRequest;n.open("GET",e,!0),n.timeout=3e4,n.setRequestHeader("content-type","text/html"),n.setRequestHeader("cache-control","max-age=0, no-cache, no-store, must-revalidate, post-check=0, pre-check=0"),n.setRequestHeader("x-requested-with","live-link"),n.onerror=function(){return t(400)},n.ontimeout=function(){return t(504)},n.onreadystatechange=function(){if(4===n.readyState)return"live-link"!==n.getResponseHeader("x-requested-with")?t(400):200!==n.status?t(n.status):void t(200,n.responseText)},n.send()},pushState:function(e,t,n){this.canPushState()?n!==window.location.href&&history[e+"State"](t,"",n):this.redirect(n)},dispatchEvent:function(e,t){var n=null;"function"==typeof Event?n=new Event(t):(n=document.createEvent("Event")).initEvent(t,!0,!0),e.dispatchEvent(n)},setCookie:function(e,t){document.cookie="".concat(e,"=").concat(t)},getCookie:function(e){return document.cookie.replace(new RegExp("(?:(?:^|.*;s*)".concat(e,"s*=s*([^;]*).*$)|^.*$")),"$1")},redirect:function(e,t){t&&V.setCookie("__phoenix_flash__",t+"; max-age=60000; path=/"),window.location=e}},U={disableForm:function(e,t){var n="".concat(t).concat("disable-with");e.classList.add("phx-loading"),V.all(e,"[".concat(n,"]"),function(e){var t=e.getAttribute(n);e.setAttribute("".concat(n,"-restore"),e.innerText),e.innerText=t}),V.all(e,"button",function(e){e.setAttribute("data-phx-disabled",e.disabled),e.disabled=!0}),V.all(e,"input",function(e){e.setAttribute("data-phx-readonly",e.readOnly),e.readOnly=!0})},restoreDisabledForm:function(e,t){var n="".concat(t).concat("disable-with");e.classList.remove("phx-loading"),V.all(e,"[".concat(n,"]"),function(e){var t=e.getAttribute("".concat(n,"-restore"));t&&("INPUT"===e.nodeName?e.value=t:e.innerText=t,e.removeAttribute("".concat(n,"-restore")))}),V.all(e,"button",function(e){var t=e.getAttribute("data-phx-disabled");t&&(e.disabled="true"===t,e.removeAttribute("data-phx-disabled"))}),V.all(e,"input",function(e){var t=e.getAttribute("data-phx-readonly");t&&(e.readOnly="true"===t,e.removeAttribute("data-phx-readonly"))})},discardError:function(e){var t=e.getAttribute&&e.getAttribute("data-phx-error-for");if(t){var n=document.getElementById(t);!t||n["phx-has-focused"]||n.form["phx-has-submitted"]||(e.style.display="none")}},isPhxChild:function(e){return e.getAttribute&&e.getAttribute("data-phx-parent-id")},applyPhxUpdate:function(e,t,n,i,o){var r=t.getAttribute&&t.getAttribute(n);if(!r||"replace"===r)return!1;switch(U.mergeAttrs(e,t),r){case"ignore":break;case"append":case"prepend":var s=t.innerHTML;if(e.phxPrevAppend===s)break;e.phxPrevAppend=s,t.querySelectorAll("[id]").forEach(function(t){var n=e.querySelector('[id="'.concat(t.id,'"]'));n&&(o.discarded.push(n),t.remove(),n.replaceWith(t))});var a="append"===r?"beforeend":"afterbegin";e.insertAdjacentHTML(a,t.innerHTML),e.querySelectorAll("[".concat(i,"]")).forEach(function(e){return o.added.push(e)});break;default:throw new Error('unsupported phx-update "'.concat(r,'"'))}return o.updated.push({fromEl:e,toEl:e}),!0},patch:function(e,t,n,i){var o={added:[],updated:[],discarded:[]},r=e.liveSocket.getActiveElement(),s=null,a=null,u=e.liveSocket.binding("update"),c=e.liveSocket.binding("hook"),l=t.cloneNode();return l.innerHTML=i,U.isTextualInput(r)&&(s=r.selectionStart,a=r.selectionEnd),m(t,l,{childrenOnly:!0,onBeforeNodeAdded:function(e){return U.discardError(e),e},onNodeAdded:function(t){if(U.isPhxChild(t)&&e.ownsElement(t))return e.onNewChildAdded(),!0;o.added.push(t)},onBeforeNodeDiscarded:function(t){if(U.isPhxChild(t))return e.liveSocket.destroyViewById(t.id),!0;o.discarded.push(t)},onBeforeElUpdated:function(t,n){if(t.isEqualNode(n))return!1;if(U.applyPhxUpdate(t,n,u,c,o))return!1;if(U.isPhxChild(n)){var i=t.getAttribute("data-phx-static");return B.isEqual(n,t)||(e.liveSocket.destroyViewById(t.id),e.onNewChildAdded()),U.mergeAttrs(t,n),t.setAttribute("data-phx-static",i),!1}return t.getAttribute&&t["phx-has-submitted"]&&(n["phx-has-submitted"]=!0),t["phx-has-focused"]&&(n["phx-has-focused"]=!0),U.discardError(n),U.isTextualInput(t)&&t===r?(U.mergeInputs(t,n),o.updated.push({fromEl:t,toEl:t}),!1):(o.updated.push({fromEl:t,toEl:n}),!0)}}),e.liveSocket.silenceEvents(function(){U.restoreFocus(r,s,a)}),V.dispatchEvent(document,"phx:update"),o},mergeAttrs:function(e,t){for(var n=t.attributes,i=0,o=n.length;i<o;i++){var r=n[i].name,s=t.getAttribute(r);e.setAttribute(r,s)}},mergeInputs:function(e,t){U.mergeAttrs(e,t),e.readOnly=t.readOnly},restoreFocus:function(e,t,n){U.isTextualInput(e)&&((""===e.value||e.readOnly)&&e.blur(),e.focus(),(e.setSelectionRange&&"text"===e.type||"textarea"===e.type)&&e.setSelectionRange(t,n))},isTextualInput:function(e){return j.indexOf(e.type)>=0}},J=function(){function e(t,n,i,o){var r=this;b(this,e),this.liveSocket=n,this.parent=i,this.newChildrenAdded=!1,this.gracefullyClosed=!1,this.el=t,this.id=this.el.id,this.view=this.el.getAttribute(A),this.loaderTimer=null,this.pendingDiffs=[],this.href=o,this.joinedOnce=!1,this.viewHooks={},this.channel=this.liveSocket.channel("lv:".concat(this.id),function(){return{url:r.href||r.liveSocket.root.href,params:r.liveSocket.params(r.view),session:r.getSession(),static:r.getStatic()}}),this.showLoader(T),this.bindChannel()}return E(e,[{key:"isConnected",value:function(){return this.channel.canPush()}},{key:"getSession",value:function(){return B.get(this.el)}},{key:"getStatic",value:function(){var e=this.el.getAttribute("data-phx-static");return""===e?null:e}},{key:"destroy",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){};clearTimeout(this.loaderTimer);var n=function(){for(var n in t(),e.viewHooks)e.destroyHook(e.viewHooks[n])};this.hasGracefullyClosed()?(this.log("destroyed",function(){return["the server view has gracefully closed"]}),n()):(this.log("destroyed",function(){return["the child has been removed from the parent"]}),this.channel.leave().receive("ok",n).receive("error",n).receive("timeout",n))}},{key:"setContainerClasses",value:function(){var e;this.el.classList.remove("phx-connected","phx-disconnected","phx-error"),(e=this.el.classList).add.apply(e,arguments)}},{key:"isLoading",value:function(){return this.el.classList.contains("phx-disconnected")}},{key:"showLoader",value:function(e){var t=this;if(clearTimeout(this.loaderTimer),e)this.loaderTimer=setTimeout(function(){return t.showLoader()},e);else{for(var n in this.viewHooks)this.viewHooks[n].__trigger__("disconnected");this.setContainerClasses("phx-disconnected")}}},{key:"hideLoader",value:function(){for(var e in clearTimeout(this.loaderTimer),this.viewHooks)this.viewHooks[e].__trigger__("reconnected");this.setContainerClasses("phx-connected")}},{key:"log",value:function(e,t){this.liveSocket.log(this,e,t)}},{key:"onJoin",value:function(e){var t=e.rendered,n=e.live_redirect;this.log("join",function(){return["",JSON.stringify(t)]}),this.rendered=t,this.hideLoader();var i=U.patch(this,this.el,this.id,M.toString(this.rendered));if(i.added.push(this.el),V.all(this.el,"[".concat(this.binding("hook"),"]"),function(e){return i.added.push(e)}),this.triggerHooks(i),this.joinNewChildren(),n){var o=n.kind,r=n.to;V.pushState(o,{},r)}}},{key:"joinNewChildren",value:function(){var e=this;V.all(document,"".concat(C,"[").concat("data-phx-parent-id",'="').concat(this.id,'"]'),function(t){e.liveSocket.getViewById(t.id)||e.liveSocket.joinView(t,e)})}},{key:"update",value:function(e){if(!function(e){for(var t in e)return!1;return!0}(e)){if(this.liveSocket.hasPendingLink())return this.pendingDiffs.push(e);this.log("update",function(){return["",JSON.stringify(e)]}),this.rendered=M.mergeDiff(this.rendered,e);var t=M.toString(this.rendered);this.newChildrenAdded=!1,this.triggerHooks(U.patch(this,this.el,this.id,t)),this.newChildrenAdded&&this.joinNewChildren()}}},{key:"getHook",value:function(e){return this.viewHooks[F.elementID(e)]}},{key:"addHook",value:function(e){if(!F.elementID(e)&&e.getAttribute){var t=this.liveSocket.getHookCallbacks(e.getAttribute(this.binding("hook")));if(t&&this.ownsElement(e)){var n=new F(this,e,t);this.viewHooks[F.elementID(n.el)]=n,n.__trigger__("mounted")}}}},{key:"destroyHook",value:function(e){e.__trigger__("destroyed"),delete this.viewHooks[F.elementID(e.el)]}},{key:"triggerHooks",value:function(e){var t=this;e.updated.push({fromEl:this.el,toEl:this.el}),e.added.forEach(function(e){return t.addHook(e)}),e.updated.forEach(function(e){var n=e.fromEl,i=e.toEl,o=t.getHook(n),r=t.binding("hook");o&&i.getAttribute&&n.getAttribute(r)===i.getAttribute(r)?o.__trigger__("updated"):o&&(t.destroyHook(o),t.addHook(n))}),e.discarded.forEach(function(e){var n=t.getHook(e);n&&t.destroyHook(n)})}},{key:"applyPendingUpdates",value:function(){var e=this;this.pendingDiffs.forEach(function(t){return e.update(t)}),this.pendingDiffs=[]}},{key:"onNewChildAdded",value:function(){this.newChildrenAdded=!0}},{key:"bindChannel",value:function(){var e=this;this.channel.on("diff",function(t){return e.update(t)}),this.channel.on("redirect",function(t){var n=t.to,i=t.flash;return e.onRedirect({to:n,flash:i})}),this.channel.on("live_redirect",function(t){var n=t.to,i=t.kind;return e.onLiveRedirect({to:n,kind:i})}),this.channel.on("external_live_redirect",function(t){var n=t.to,i=t.kind;return e.onExternalLiveRedirect({to:n,kind:i})}),this.channel.on("session",function(t){var n=t.token;return e.el.setAttribute("data-phx-session",n)}),this.channel.onError(function(t){return e.onError(t)}),this.channel.onClose(function(){return e.onGracefulClose()})}},{key:"onGracefulClose",value:function(){this.gracefullyClosed=!0,this.liveSocket.destroyViewById(this.id)}},{key:"onExternalLiveRedirect",value:function(e){var t=e.to,n=e.kind;this.liveSocket.replaceRoot(t,function(){return V.pushState(n,{},t)})}},{key:"onLiveRedirect",value:function(e){var t=e.to,n=e.kind;V.pushState(n,{},t)}},{key:"onRedirect",value:function(e){var t=e.to,n=e.flash;V.redirect(t,n)}},{key:"hasGracefullyClosed",value:function(){return this.gracefullyClosed}},{key:"join",value:function(e){var t=this;this.parent&&(this.parent.channel.onClose(function(){return t.onGracefulClose()}),this.parent.channel.onError(function(){return t.liveSocket.destroyViewById(t.id)})),this.channel.join().receive("ok",function(n){t.joinedOnce||e&&e(t),t.joinedOnce=!0,t.onJoin(n)}).receive("error",function(e){return t.onJoinError(e)}).receive("timeout",function(){return t.onJoinError("timeout")})}},{key:"onJoinError",value:function(e){return e.redirect?this.onRedirect(e.redirect):e.external_live_redirect?this.onExternalLiveRedirect(e.external_live_redirect):(this.displayError(),void this.log("error",function(){return["unable to join",e]}))}},{key:"onError",value:function(e){this.log("error",function(){return["view crashed",e]}),this.liveSocket.onViewError(this),document.activeElement.blur(),this.liveSocket.isUnloaded()?this.showLoader(200):this.displayError()}},{key:"displayError",value:function(){this.showLoader(),this.setContainerClasses("phx-disconnected","phx-error")}},{key:"pushWithReply",value:function(e,t){var n=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){};return this.channel.push(e,t,3e4).receive("ok",function(e){e.diff&&n.update(e.diff),e.redirect&&n.onRedirect(e.redirect),e.live_redirect&&n.onLiveRedirect(e.live_redirect),e.external_live_redirect&&n.onExternalLiveRedirect(e.external_live_redirect),i(e)})}},{key:"pushEvent",value:function(e,t,n,i){var o=t.getAttribute(this.binding("value"));if(null===o){o=i;var r=this.binding("value-"),s=!0,a=!1,u=void 0;try{for(var c,l=t.getAttributeNames()[Symbol.iterator]();!(s=(c=l.next()).done);s=!0){var h=c.value;h.startsWith(r)&&(o[h.replace(r,"")]=t.getAttribute(h))}}catch(e){a=!0,u=e}finally{try{s||null==l.return||l.return()}finally{if(a)throw u}}void 0!==t.value&&(o.value=t.value)}this.pushWithReply("event",{type:e,event:n,value:o})}},{key:"pushKey",value:function(e,t,n,i){var o=e.getAttribute(this.binding("value"));null===o&&(o=i,void 0!==e.value&&(o.value=e.value)),this.pushWithReply("event",{type:t,event:n,value:o})}},{key:"pushInput",value:function(e,t,n){this.pushWithReply("event",{type:"form",event:t,value:I(e.form,{_target:n.target.name})})}},{key:"pushFormSubmit",value:function(e,t,n){this.pushWithReply("event",{type:"form",event:t,value:I(e)},n)}},{key:"pushInternalLink",value:function(e,t){var n=this;this.isLoading()||this.showLoader(T);var i=this.liveSocket.setPendingLink(e);this.pushWithReply("link",{url:e},function(o){o.link_redirect?n.liveSocket.replaceRoot(e,t,i):n.liveSocket.commitPendingLink(i)&&(n.href=e,n.applyPendingUpdates(),n.hideLoader(),t&&t())}).receive("timeout",function(){return V.redirect(window.location.href)})}},{key:"ownsElement",value:function(e){return e.getAttribute("data-phx-parent-id")===this.id||H(e.closest(C),"id")===this.id}},{key:"submitForm",value:function(e,t){var n=this,i=this.liveSocket.getBindingPrefix();e["phx-has-submitted"]="true",U.disableForm(e,i),this.liveSocket.blurActiveElement(this),this.pushFormSubmit(e,t,function(){U.restoreDisabledForm(e,i),n.liveSocket.restorePreviouslyActiveFocus()})}},{key:"binding",value:function(e){return this.liveSocket.binding(e)}}]),e}(),q=1,F=function(){function e(t,n,i){for(var o in b(this,e),this.__view=t,this.__callbacks=i,this.el=n,this.viewName=t.view,this.el.phxHookId=this.constructor.makeID(),this.__callbacks)this[o]=this.__callbacks[o]}return E(e,null,[{key:"makeID",value:function(){return q++}},{key:"elementID",value:function(e){return e.phxHookId}}]),E(e,[{key:"pushEvent",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.__view.pushWithReply("event",{type:"hook",event:e,value:t})}},{key:"__trigger__",value:function(e){var t=this.__callbacks[e];t&&t.call(this)}}]),e}();t.default=D},function(e,t){e.exports=function(e){return e.webpackPolyfill||(e.deprecate=function(){},e.paths=[],e.children||(e.children=[]),Object.defineProperty(e,"loaded",{enumerable:!0,get:function(){return e.l}}),Object.defineProperty(e,"id",{enumerable:!0,get:function(){return e.i}}),e.webpackPolyfill=1),e}},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){(function(t){t.Phoenix||(t.Phoenix={}),e.exports=t.Phoenix.LiveView=n(1)}).call(this,n(3))}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.phoenix_live_view=t():e.phoenix_live_view=t()}(this,function(){return function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t,n){"use strict";var i;n.r(t);var r="http://www.w3.org/1999/xhtml",o="undefined"==typeof document?void 0:document,a=!!o&&"content"in o.createElement("template"),u=!!o&&o.createRange&&"createContextualFragment"in o.createRange();function c(e){return a?function(e){var t=o.createElement("template");return t.innerHTML=e,t.content.childNodes[0]}(e):u?function(e){return i||(i=o.createRange()).selectNode(o.body),i.createContextualFragment(e).childNodes[0]}(e):function(e){var t=o.createElement("body");return t.innerHTML=e,t.childNodes[0]}(e)}function s(e,t){var n=e.nodeName,i=t.nodeName;return n===i||!!(t.actualize&&n.charCodeAt(0)<91&&i.charCodeAt(0)>90)&&n===i.toUpperCase()}function l(e,t,n){e[n]!==t[n]&&(e[n]=t[n],e[n]?e.setAttribute(n,""):e.removeAttribute(n))}var d={OPTION:function(e,t){var n=e.parentNode;if(n){var i=n.nodeName.toUpperCase();"OPTGROUP"===i&&(i=(n=n.parentNode)&&n.nodeName.toUpperCase()),"SELECT"!==i||n.hasAttribute("multiple")||(e.hasAttribute("selected")&&!t.selected&&(e.setAttribute("selected","selected"),e.removeAttribute("selected")),n.selectedIndex=-1)}l(e,t,"selected")},INPUT:function(e,t){l(e,t,"checked"),l(e,t,"disabled"),e.value!==t.value&&(e.value=t.value),t.hasAttribute("value")||e.removeAttribute("value")},TEXTAREA:function(e,t){var n=t.value;e.value!==n&&(e.value=n);var i=e.firstChild;if(i){var r=i.nodeValue;if(r==n||!n&&r==e.placeholder)return;i.nodeValue=n}},SELECT:function(e,t){if(!t.hasAttribute("multiple")){for(var n,i,r=-1,o=0,a=e.firstChild;a;)if("OPTGROUP"===(i=a.nodeName&&a.nodeName.toUpperCase()))a=(n=a).firstChild;else{if("OPTION"===i){if(a.hasAttribute("selected")){r=o;break}o++}!(a=a.nextSibling)&&n&&(a=n.nextSibling,n=null)}e.selectedIndex=r}}},h=1,f=11,v=3,p=8;function y(){}function g(e){return e.id}var m=function(e){return function(t,n,i){if(i||(i={}),"string"==typeof n)if("#document"===t.nodeName||"HTML"===t.nodeName){var a=n;(n=o.createElement("html")).innerHTML=a}else n=c(n);var u,l=i.getNodeKey||g,m=i.onBeforeNodeAdded||y,k=i.onNodeAdded||y,b=i.onBeforeElUpdated||y,w=i.onElUpdated||y,x=i.onBeforeNodeDiscarded||y,E=i.onNodeDiscarded||y,A=i.onBeforeElChildrenUpdated||y,S=!0===i.childrenOnly,L={};function C(e){u?u.push(e):u=[e]}function N(e,t,n){!1!==x(e)&&(t&&t.removeChild(e),E(e),function e(t,n){if(t.nodeType===h)for(var i=t.firstChild;i;){var r=void 0;n&&(r=l(i))?C(r):(E(i),i.firstChild&&e(i,n)),i=i.nextSibling}}(e,n))}function _(e){k(e);for(var t=e.firstChild;t;){var n=t.nextSibling,i=l(t);if(i){var r=L[i];r&&s(t,r)&&(t.parentNode.replaceChild(r,t),T(r,t))}_(t),t=n}}function T(i,r,a){var u=l(r);if(u&&delete L[u],!n.isSameNode||!n.isSameNode(t)){if(!a){if(!1===b(i,r))return;if(e(i,r),w(i),!1===A(i,r))return}"TEXTAREA"!==i.nodeName?function(e,t){var n,i,r,a,u,c=t.firstChild,f=e.firstChild;e:for(;c;){for(a=c.nextSibling,n=l(c);f;){if(r=f.nextSibling,c.isSameNode&&c.isSameNode(f)){c=a,f=r;continue e}i=l(f);var y=f.nodeType,g=void 0;if(y===c.nodeType&&(y===h?(n?n!==i&&((u=L[n])?r===u?g=!1:(e.insertBefore(u,f),i?C(i):N(f,e,!0),f=u):g=!1):i&&(g=!1),(g=!1!==g&&s(f,c))&&T(f,c)):y!==v&&y!=p||(g=!0,f.nodeValue!==c.nodeValue&&(f.nodeValue=c.nodeValue))),g){c=a,f=r;continue e}i?C(i):N(f,e,!0),f=r}if(n&&(u=L[n])&&s(u,c))e.appendChild(u),T(u,c);else{var k=m(c);!1!==k&&(k&&(c=k),c.actualize&&(c=c.actualize(e.ownerDocument||o)),e.appendChild(c),_(c))}c=a,f=r}!function(e,t,n){for(;t;){var i=t.nextSibling;(n=l(t))?C(n):N(t,e,!0),t=i}}(e,f,i);var b=d[e.nodeName];b&&b(e,t)}(i,r):d.TEXTAREA(i,r)}}!function e(t){if(t.nodeType===h||t.nodeType===f)for(var n=t.firstChild;n;){var i=l(n);i&&(L[i]=n),e(n),n=n.nextSibling}}(t);var P=t,I=P.nodeType,R=n.nodeType;if(!S)if(I===h)R===h?s(t,n)||(E(t),P=function(e,t){for(var n=e.firstChild;n;){var i=n.nextSibling;t.appendChild(n),n=i}return t}(t,function(e,t){return t&&t!==r?o.createElementNS(t,e):o.createElement(e)}(n.nodeName,n.namespaceURI))):P=n;else if(I===v||I===p){if(R===I)return P.nodeValue!==n.nodeValue&&(P.nodeValue=n.nodeValue),P;P=n}if(P===n)E(t);else if(T(P,n,S),u)for(var H=0,D=u.length;H<D;H++){var O=L[u[H]];O&&N(O,O.parentNode,!1)}return!S&&P!==t&&t.parentNode&&(P.actualize&&(P=P.actualize(t.ownerDocument||o)),t.parentNode.replaceChild(P,t)),P}}(function(e,t){var n,i,r,o,a,u=t.attributes;for(n=u.length-1;n>=0;--n)r=(i=u[n]).name,o=i.namespaceURI,a=i.value,o?(r=i.localName||r,e.getAttributeNS(o,r)!==a&&e.setAttributeNS(o,r,a)):e.getAttribute(r)!==a&&e.setAttribute(r,a);for(n=(u=e.attributes).length-1;n>=0;--n)!1!==(i=u[n]).specified&&(r=i.name,(o=i.namespaceURI)?(r=i.localName||r,t.hasAttributeNS(o,r)||e.removeAttributeNS(o,r)):t.hasAttribute(r)||e.removeAttribute(r))});function k(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function b(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function w(e,t,n){return t&&b(e.prototype,t),n&&b(e,n),e}function x(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],i=!0,r=!1,o=void 0;try{for(var a,u=e[Symbol.iterator]();!(i=(a=u.next()).done)&&(n.push(a.value),!t||n.length!==t);i=!0);}catch(e){r=!0,o=e}finally{try{i||null==u.return||u.return()}finally{if(r)throw o}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function E(e){return(E="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}n.d(t,"debug",function(){return T}),n.d(t,"Rendered",function(){return V}),n.d(t,"LiveSocket",function(){return B}),n.d(t,"Browser",function(){return j}),n.d(t,"DOM",function(){return F}),n.d(t,"View",function(){return K});var A="data-phx-view",S="[".concat(A,"]"),L=["text","textarea","number","email","password","search","tel","url"],C=1,N="phx-",_=function(e,t){return console.error&&console.error(e,t)},T=function(e,t,n,i){console.log("".concat(e.id," ").concat(t,": ").concat(n," - "),i)},P=function(e){return"function"==typeof e?e:function(){return e}},I=function(e){return JSON.parse(JSON.stringify(e))},R=function(e,t){do{if(e.matches("[".concat(t,"]")))return e;e=e.parentElement||e.parentNode}while(null!==e&&1===e.nodeType&&!e.matches(S));return null},H=function(e){return null!==e&&"object"===E(e)&&!(e instanceof Array)},D=function(e,t){return e&&t(e)},O=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=new FormData(e),i=new URLSearchParams,r=!0,o=!1,a=void 0;try{for(var u,c=n.entries()[Symbol.iterator]();!(r=(u=c.next()).done);r=!0){var s=x(u.value,2),l=s[0],d=s[1];i.append(l,d)}}catch(e){o=!0,a=e}finally{try{r||null==c.return||c.return()}finally{if(o)throw a}}for(var h in t)i.append(h,t[h]);return i.toString()},V={mergeDiff:function(e,t){return this.isNewFingerprint(t)?t:(function e(t,n){for(var i in n){var r=n[i],o=t[i];H(r)&&H(o)?(o.dynamics&&!r.dynamics&&delete o.dynamics,e(o,r)):t[i]=r}}(e,t),e)},isNewFingerprint:function(){return!!(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).static},toString:function(e){var t={buffer:""};return this.toOutputBuffer(e,t),t.buffer},toOutputBuffer:function(e,t){if(e.dynamics)return this.comprehensionToBuffer(e,t);var n=e.static;t.buffer+=n[0];for(var i=1;i<n.length;i++)this.dynamicToBuffer(e[i-1],t),t.buffer+=n[i]},comprehensionToBuffer:function(e,t){for(var n=e.dynamics,i=e.static,r=0;r<n.length;r++){var o=n[r];t.buffer+=i[0];for(var a=1;a<i.length;a++)this.dynamicToBuffer(o[a-1],t),t.buffer+=i[a]}},dynamicToBuffer:function(e,t){H(e)?this.toOutputBuffer(e,t):t.buffer+=e}},B=function(){function e(t,n){var i=this,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(k(this,e),this.unloaded=!1,!n||"Object"===n.constructor.name)throw new Error('\n      a phoenix Socket must be provided as the second argument to the LiveSocket constructor. For example:\n\n          import {Socket} from "phoenix"\n          import {LiveSocket} from "phoenix_live_view"\n          let liveSocket = new LiveSocket("/live", Socket, {...})\n      ');this.socket=new n(t,r),this.bindingPrefix=r.bindingPrefix||N,this.opts=r,this.views={},this.params=P(r.params||{}),this.viewLogger=r.viewLogger,this.activeElement=null,this.prevActive=null,this.prevInput=null,this.prevValue=null,this.silenced=!1,this.root=null,this.linkRef=0,this.href=window.location.href,this.pendingLink=null,this.currentLocation=I(window.location),this.hooks=r.hooks||{},this.socket.onOpen(function(){i.isUnloaded()&&(i.destroyAllViews(),i.joinRootViews()),i.unloaded=!1}),window.addEventListener("beforeunload",function(e){i.unloaded=!0}),this.bindTopLevelEvents()}return w(e,[{key:"getSocket",value:function(){return this.socket}},{key:"log",value:function(e,t,n){if(this.viewLogger){var i=x(n(),2),r=i[0],o=i[1];this.viewLogger(e,t,r,o)}}},{key:"connect",value:function(){var e=this;return["complete","loaded","interactive"].indexOf(document.readyState)>=0?this.joinRootViews():document.addEventListener("DOMContentLoaded",function(){e.joinRootViews()}),this.socket.connect()}},{key:"disconnect",value:function(){this.socket.disconnect()}},{key:"getHookCallbacks",value:function(e){return this.hooks[e]}},{key:"isUnloaded",value:function(){return this.unloaded}},{key:"getBindingPrefix",value:function(){return this.bindingPrefix}},{key:"binding",value:function(e){return"".concat(this.getBindingPrefix()).concat(e)}},{key:"channel",value:function(e,t){return this.socket.channel(e,t)}},{key:"joinRootViews",value:function(){var e=this;F.all(document,"".concat(S,":not([").concat("data-phx-parent-id","])"),function(t){var n=e.joinView(t,null,e.getHref());e.root=e.root||n})}},{key:"replaceRoot",value:function(e){var t=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:this.setPendingLink(e);this.root.showLoader(C);var r=this.root.el,o=this.root.id,a=this.root.isLoading();j.fetchPage(e,function(u,c){if(200!==u)return j.redirect(e);var s=document.createElement("div");s.innerHTML=c,t.joinView(s.firstChild,null,e,function(e){t.commitPendingLink(i)?(n&&n(),t.destroyViewById(o),r.replaceWith(e.el),t.root=e,a&&t.root.showLoader()):e.destroy()})})}},{key:"joinView",value:function(e,t,n,i){if(!this.getViewByEl(e)){var r=new K(e,this,t,n);return this.views[r.id]=r,r.join(i),r}}},{key:"owner",value:function(e,t){var n=this,i=D(e.closest(S),function(e){return n.getViewByEl(e)});i&&t(i)}},{key:"getViewByEl",value:function(e){return this.views[e.id]}},{key:"onViewError",value:function(e){this.dropActiveElement(e)}},{key:"destroyAllViews",value:function(){for(var e in this.views)this.destroyViewById(e)}},{key:"destroyViewByEl",value:function(e){return this.destroyViewById(e.id)}},{key:"destroyViewById",value:function(e){var t=this.views[e];t&&(delete this.views[t.id],this.root&&t.id===this.root.id&&(this.root=null),t.destroy())}},{key:"setActiveElement",value:function(e){var t=this;if(this.activeElement!==e){this.activeElement=e;var n=function(){e===t.activeElement&&(t.activeElement=null),e.removeEventListener("mouseup",t),e.removeEventListener("touchend",t)};e.addEventListener("mouseup",n),e.addEventListener("touchend",n)}}},{key:"getActiveElement",value:function(){return document.activeElement===document.body&&this.activeElement||document.activeElement}},{key:"dropActiveElement",value:function(e){this.prevActive&&e.ownsElement(this.prevActive)&&(this.prevActive=null)}},{key:"restorePreviouslyActiveFocus",value:function(){this.prevActive&&this.prevActive!==document.body&&this.prevActive.focus()}},{key:"blurActiveElement",value:function(){this.prevActive=this.getActiveElement(),this.prevActive!==document.body&&this.prevActive.blur()}},{key:"bindTopLevelEvents",value:function(){this.bindClicks(),this.bindNav(),this.bindForms(),this.bindTargetable({keyup:"keyup",keydown:"keydown"},function(e,t,n,i,r,o){n.pushKey(i,t,r,{altGraphKey:e.altGraphKey,altKey:e.altKey,charCode:e.charCode,code:e.code,ctrlKey:e.ctrlKey,key:e.key,keyCode:e.keyCode,keyIdentifier:e.keyIdentifier,keyLocation:e.keyLocation,location:e.location,metaKey:e.metaKey,repeat:e.repeat,shiftKey:e.shiftKey,which:e.which})}),this.bindTargetable({blur:"focusout",focus:"focusin"},function(e,t,n,i,r,o){o||n.pushEvent(t,i,r,{type:t})}),this.bindTargetable({blur:"blur",focus:"focus"},function(e,t,n,i,r,o){o&&"window"!==!o&&n.pushEvent(t,i,r,{type:e.type})})}},{key:"setPendingLink",value:function(e){this.linkRef++;this.linkRef;return this.pendingLink=e,this.linkRef}},{key:"commitPendingLink",value:function(e){return this.linkRef===e&&(this.href=this.pendingLink,this.pendingLink=null,!0)}},{key:"getHref",value:function(){return this.href}},{key:"hasPendingLink",value:function(){return!!this.pendingLink}},{key:"bindTargetable",value:function(e,t){var n=this,i=function(i){var r=e[i];n.on(r,function(e){var r=n.binding(i),o=n.binding("target"),a=e.target.getAttribute&&e.target.getAttribute(r);a&&!e.target.getAttribute(o)?n.owner(e.target,function(r){n.debounce(e.target,e,function(){return t(e,i,r,e.target,a,null)})}):F.all(document,"[".concat(r,"][").concat(o,"=window]"),function(o){var a=o.getAttribute(r);n.owner(o,function(r){n.debounce(o,e,function(){return t(e,i,r,o,a,"window")})})})})};for(var r in e)i(r)}},{key:"bindClicks",value:function(){var e=this;window.addEventListener("click",function(t){var n=e.binding("click"),i=R(t.target,n),r=i&&i.getAttribute(n);if(r){t.stopPropagation();var o={altKey:t.altKey,shiftKey:t.shiftKey,ctrlKey:t.ctrlKey,metaKey:t.metaKey,x:t.x||t.clientX,y:t.y||t.clientY,pageX:t.pageX,pageY:t.pageY,screenX:t.screenX,screenY:t.screenY};e.owner(i,function(n){e.debounce(i,t,function(){return n.pushEvent("click",i,r,o)})})}},!1)}},{key:"bindNav",value:function(){var e=this;j.canPushState()&&(window.onpopstate=function(t){if(e.registerNewLocation(window.location)){var n=window.location.href;e.root.isConnected()?e.root.pushInternalLink(n):e.replaceRoot(n)}},window.addEventListener("click",function(t){var n=R(t.target,"data-phx-live-link"),i=n&&n.getAttribute("data-phx-live-link");if(i){var r=n.href;t.preventDefault(),e.root.pushInternalLink(r,function(){j.pushState(i,{},r),e.registerNewLocation(window.location)})}},!1))}},{key:"registerNewLocation",value:function(e){var t=this.currentLocation;return t.pathname+t.search!==e.pathname+e.search&&(this.currentLocation=I(e),!0)}},{key:"bindForms",value:function(){var e=this;this.on("submit",function(t){var n=t.target.getAttribute(e.binding("submit"));n&&(t.preventDefault(),t.target.disabled=!0,e.owner(t.target,function(e){return e.submitForm(t.target,n)}))},!1);for(var t=["change","input"],n=0;n<t.length;n++){var i=t[n];this.on(i,function(t){var n=t.target,i=n.form&&n.form.getAttribute(e.binding("change"));if(i){var r=JSON.stringify(new FormData(n.form).getAll(n.name));e.prevInput===n&&e.prevValue===r||"number"===n.type&&n.validity&&n.validity.badInput||(e.prevInput=n,e.prevValue=r,e.owner(n,function(r){F.isTextualInput(n)?F.putPrivate(n,"phx-has-focused",!0):e.setActiveElement(n),e.debounce(n,t,function(){return r.pushInput(n,i,t)})}))}},!1)}}},{key:"debounce",value:function(e,t,n){F.debounce(e,t,this.binding("debounce"),this.binding("throttle"),n)}},{key:"silenceEvents",value:function(e){this.silenced=!0,e(),this.silenced=!1}},{key:"on",value:function(e,t){var n=this;window.addEventListener(e,function(e){n.silenced||t(e)})}}]),e}(),j={canPushState:function(){return void 0!==history.pushState},fetchPage:function(e,t){var n=new XMLHttpRequest;n.open("GET",e,!0),n.timeout=3e4,n.setRequestHeader("content-type","text/html"),n.setRequestHeader("cache-control","max-age=0, no-cache, no-store, must-revalidate, post-check=0, pre-check=0"),n.setRequestHeader("x-requested-with","live-link"),n.onerror=function(){return t(400)},n.ontimeout=function(){return t(504)},n.onreadystatechange=function(){if(4===n.readyState)return"live-link"!==n.getResponseHeader("x-requested-with")?t(400):200!==n.status?t(n.status):void t(200,n.responseText)},n.send()},pushState:function(e,t,n){this.canPushState()?n!==window.location.href&&history[e+"State"](t,"",n):this.redirect(n)},setCookie:function(e,t){document.cookie="".concat(e,"=").concat(t)},getCookie:function(e){return document.cookie.replace(new RegExp("(?:(?:^|.*;s*)".concat(e,"s*=s*([^;]*).*$)|^.*$")),"$1")},redirect:function(e,t){t&&j.setCookie("__phoenix_flash__",t+"; max-age=60000; path=/"),window.location=e}},F={all:function(e,t,n){return Array.from(e.querySelectorAll(t)).forEach(n)},private:function(e,t){return e.phxPrivate&&e.phxPrivate[t]},deletePrivate:function(e,t){e.phxPrivate&&delete e.phxPrivate[t]},putPrivate:function(e,t,n){e.phxPrivate||(e.phxPrivate={}),e.phxPrivate[t]=n},copyPrivates:function(e,t){t.phxPrivate&&(e.phxPrivate=I(t.phxPrivate))},debounce:function(e,t,n,i,r){var o=this,a=e.getAttribute(n),u=e.getAttribute(i),c=a||u;switch(c){case null:return r();case"blur":if(this.private(e,"debounce-blur"))return;return e.addEventListener("blur",function(){return r()}),void this.putPrivate(e,"debounce-blur",c);default:var s=parseInt(c);if(isNaN(s))return _("invalid throttle/debounce value: ".concat(c));if(u&&"keydown"===t.type){var l=this.private(e,"debounce-prev-key");if(this.putPrivate(e,"debounce-prev-key",t.which),l!==t.which)return r()}if(this.private(e,"debounce-timer"))return;var d=function(t){u&&"phx-change"===t.type&&t.detail.triggeredBy.name===e.name||(clearTimeout(o.private(e,"debounce-timer")),o.deletePrivate(e,"debounce-timer"))};this.putPrivate(e,"debounce-timer",setTimeout(function(){e.form&&(e.form.removeEventListener("phx-change",d),e.form.removeEventListener("submit",d)),o.deletePrivate(e,"debounce-timer"),u||r()},s)),e.form&&(e.form.addEventListener("phx-change",d),e.form.addEventListener("submit",d)),u&&r()}},disableForm:function(e,t){var n="".concat(t).concat("disable-with");e.classList.add("phx-loading"),F.all(e,"[".concat(n,"]"),function(e){var t=e.getAttribute(n);e.setAttribute("".concat(n,"-restore"),e.innerText),e.innerText=t}),F.all(e,"button",function(e){e.setAttribute("data-phx-disabled",e.disabled),e.disabled=!0}),F.all(e,"input",function(e){e.setAttribute("data-phx-readonly",e.readOnly),e.readOnly=!0})},restoreDisabledForm:function(e,t){var n="".concat(t).concat("disable-with");e.classList.remove("phx-loading"),F.all(e,"[".concat(n,"]"),function(e){var t=e.getAttribute("".concat(n,"-restore"));t&&("INPUT"===e.nodeName?e.value=t:e.innerText=t,e.removeAttribute("".concat(n,"-restore")))}),F.all(e,"button",function(e){var t=e.getAttribute("data-phx-disabled");t&&(e.disabled="true"===t,e.removeAttribute("data-phx-disabled"))}),F.all(e,"input",function(e){var t=e.getAttribute("data-phx-readonly");t&&(e.readOnly="true"===t,e.removeAttribute("data-phx-readonly"))})},discardError:function(e,t){var n=t.getAttribute&&t.getAttribute("data-phx-error-for");if(n){var i=e.querySelector("#".concat(n));!n||this.private(i,"phx-has-focused")||this.private(i.form,"phx-has-submitted")||(t.style.display="none")}},isPhxChild:function(e){return e.getAttribute&&e.getAttribute("data-phx-parent-id")},patch:function(e,t,n,i){var r={added:[],updated:[],discarded:[],phxChildrenAdded:[]},o=e.liveSocket.getActiveElement(),a=o&&F.isTextualInput(o)?o:{},u=a.selectionStart,c=a.selectionEnd,s=e.liveSocket.binding("update"),l=this.buildDiffContainer(t,i,s);return m(t,l.outerHTML,{childrenOnly:!0,onBeforeNodeAdded:function(e){return F.discardError(t,e),e},onNodeAdded:function(t){F.isPhxChild(t)&&e.ownsElement(t)&&r.phxChildrenAdded.push(t),r.added.push(t)},onBeforeNodeDiscarded:function(t){if(F.isPhxChild(t))return e.liveSocket.destroyViewByEl(t),!0;r.discarded.push(t)},onBeforeElUpdated:function(e,n){if(e.isEqualNode(n))return!1;if("ignore"===e.getAttribute(s))return!1;if("number"===e.type&&e.validity&&e.validity.badInput)return!1;if(F.isPhxChild(n)){var i=e.getAttribute("data-phx-static");return F.mergeAttrs(e,n),e.setAttribute("data-phx-static",i),!1}return F.copyPrivates(n,e),F.discardError(t,n),F.isTextualInput(e)&&e===o?(F.mergeInputs(e,n),r.updated.push({fromEl:e,toEl:e}),!1):(r.updated.push({fromEl:e,toEl:n}),!0)}}),e.liveSocket.silenceEvents(function(){return F.restoreFocus(o,u,c)}),F.dispatchEvent(document,"phx:update"),r},dispatchEvent:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},i=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:n});e.dispatchEvent(i)},cloneNode:function(e,t){var n=e.cloneNode();return n.innerHTML=t||e.innerHTML,n},buildDiffContainer:function(e,t,n){var i=this,r=this.cloneNode(e,t),o=function(e){return e.nodeType===Node.ELEMENT_NODE},a=function(e){return e.id||_("append/prepend children require IDs, got: ",e)};return F.all(r,"[".concat(n,"=append],[").concat(n,"=prepend]"),function(t){var r=t.id||_("append/prepend requires an ID, got: ",t),u=e.querySelector("#".concat(r));if(u){var c=i.cloneNode(u),s=t.getAttribute(n),l=Array.from(t.childNodes).filter(o).map(a),d=Array.from(c.childNodes).filter(o).map(a);if(l.toString()!==d.toString())l.filter(function(e){return d.indexOf(e)>=0}).forEach(function(e){var n=t.querySelector("#".concat(e));c.querySelector("#".concat(e)).replaceWith(n)}),t.insertAdjacentHTML("append"===s?"afterbegin":"beforeend",c.innerHTML)}}),r},mergeAttrs:function(e,t){for(var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],i=t.attributes,r=0,o=i.length;r<o;r++){var a=i[r].name;n.indexOf(a)<0&&e.setAttribute(a,t.getAttribute(a))}},mergeInputs:function(e,t){F.mergeAttrs(e,t,["value"]),e.readOnly=t.readOnly},restoreFocus:function(e,t,n){F.isTextualInput(e)&&((""===e.value||e.readOnly)&&e.blur(),e.focus(),(e.setSelectionRange&&"text"===e.type||"textarea"===e.type)&&e.setSelectionRange(t,n))},isTextualInput:function(e){return L.indexOf(e.type)>=0}},K=function(){function e(t,n,i,r){var o=this;k(this,e),this.liveSocket=n,this.parent=i,this.gracefullyClosed=!1,this.el=t,this.id=this.el.id,this.view=this.el.getAttribute(A),this.loaderTimer=null,this.pendingDiffs=[],this.href=r,this.joinedOnce=!1,this.viewHooks={},this.channel=this.liveSocket.channel("lv:".concat(this.id),function(){return{url:o.href||o.liveSocket.root.href,params:o.liveSocket.params(o.view),session:o.getSession(),static:o.getStatic()}}),this.showLoader(C),this.bindChannel()}return w(e,[{key:"isConnected",value:function(){return this.channel.canPush()}},{key:"getSession",value:function(){return this.el.getAttribute("data-phx-session")}},{key:"getStatic",value:function(){var e=this.el.getAttribute("data-phx-static");return""===e?null:e}},{key:"destroy",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(){};clearTimeout(this.loaderTimer);var n=function(){for(var n in t(),e.viewHooks)e.destroyHook(e.viewHooks[n])};this.hasGracefullyClosed()?(this.log("destroyed",function(){return["the server view has gracefully closed"]}),n()):(this.log("destroyed",function(){return["the child has been removed from the parent"]}),this.channel.leave().receive("ok",n).receive("error",n).receive("timeout",n))}},{key:"setContainerClasses",value:function(){var e;this.el.classList.remove("phx-connected","phx-disconnected","phx-error"),(e=this.el.classList).add.apply(e,arguments)}},{key:"isLoading",value:function(){return this.el.classList.contains("phx-disconnected")}},{key:"showLoader",value:function(e){var t=this;if(clearTimeout(this.loaderTimer),e)this.loaderTimer=setTimeout(function(){return t.showLoader()},e);else{for(var n in this.viewHooks)this.viewHooks[n].__trigger__("disconnected");this.setContainerClasses("phx-disconnected")}}},{key:"hideLoader",value:function(){for(var e in clearTimeout(this.loaderTimer),this.viewHooks)this.viewHooks[e].__trigger__("reconnected");this.setContainerClasses("phx-connected")}},{key:"log",value:function(e,t){this.liveSocket.log(this,e,t)}},{key:"onJoin",value:function(e){var t=e.rendered,n=e.live_redirect;this.log("join",function(){return["",JSON.stringify(t)]}),this.rendered=t,this.hideLoader();var i=F.patch(this,this.el,this.id,V.toString(this.rendered));if(i.added.push(this.el),F.all(this.el,"[".concat(this.binding("hook"),"]"),function(e){return i.added.push(e)}),this.triggerHooks(i),this.joinNewChildren(),n){var r=n.kind,o=n.to;j.pushState(r,{},o)}}},{key:"joinNewChildren",value:function(){var e=this;F.all(document,"".concat(S,"[").concat("data-phx-parent-id",'="').concat(this.id,'"]'),function(t){e.liveSocket.getViewByEl(t)||e.liveSocket.joinView(t,e)})}},{key:"update",value:function(e){if(!function(e){for(var t in e)return!1;return!0}(e)){if(this.liveSocket.hasPendingLink())return this.pendingDiffs.push(e);this.log("update",function(){return["",JSON.stringify(e)]}),this.rendered=V.mergeDiff(this.rendered,e);var t=V.toString(this.rendered),n=F.patch(this,this.el,this.id,t);n.phxChildrenAdded.length>0&&this.joinNewChildren(),this.triggerHooks(n)}}},{key:"getHook",value:function(e){return this.viewHooks[M.elementID(e)]}},{key:"addHook",value:function(e){if(!M.elementID(e)&&e.getAttribute){var t=this.liveSocket.getHookCallbacks(e.getAttribute(this.binding("hook")));if(t&&this.ownsElement(e)){var n=new M(this,e,t);this.viewHooks[M.elementID(n.el)]=n,n.__trigger__("mounted")}}}},{key:"destroyHook",value:function(e){e.__trigger__("destroyed"),delete this.viewHooks[M.elementID(e.el)]}},{key:"triggerHooks",value:function(e){var t=this,n=[];e.updated.push({fromEl:this.el,toEl:this.el}),e.added.forEach(function(e){return t.addHook(e)}),e.updated.forEach(function(e){var n=e.fromEl,i=e.toEl,r=t.getHook(n),o=t.binding("hook");r&&i.getAttribute&&n.getAttribute(o)===i.getAttribute(o)?r.__trigger__("updated"):r&&(t.destroyHook(r),t.addHook(n))}),e.discarded.forEach(function(e){var i=t.componentID(e);i&&n.push(i);var r=t.getHook(e);r&&t.destroyHook(r)}),n.length>0&&this.pushComponentsDestroyed(n)}},{key:"applyPendingUpdates",value:function(){var e=this;this.pendingDiffs.forEach(function(t){return e.update(t)}),this.pendingDiffs=[]}},{key:"bindChannel",value:function(){var e=this;this.channel.on("diff",function(t){return e.update(t)}),this.channel.on("redirect",function(t){var n=t.to,i=t.flash;return e.onRedirect({to:n,flash:i})}),this.channel.on("live_redirect",function(t){var n=t.to,i=t.kind;return e.onLiveRedirect({to:n,kind:i})}),this.channel.on("external_live_redirect",function(t){var n=t.to,i=t.kind;return e.onExternalLiveRedirect({to:n,kind:i})}),this.channel.on("session",function(t){var n=t.token;return e.el.setAttribute("data-phx-session",n)}),this.channel.onError(function(t){return e.onError(t)}),this.channel.onClose(function(){return e.onGracefulClose()})}},{key:"onGracefulClose",value:function(){this.gracefullyClosed=!0,this.liveSocket.destroyViewById(this.id)}},{key:"onExternalLiveRedirect",value:function(e){var t=this,n=e.to,i=e.kind;this.liveSocket.replaceRoot(n,function(){j.pushState(i,{},n),t.liveSocket.registerNewLocation(window.location)})}},{key:"onLiveRedirect",value:function(e){var t=e.to,n=e.kind;this.href=t,j.pushState(n,{},t)}},{key:"onRedirect",value:function(e){var t=e.to,n=e.flash;j.redirect(t,n)}},{key:"hasGracefullyClosed",value:function(){return this.gracefullyClosed}},{key:"join",value:function(e){var t=this;this.parent&&(this.parent.channel.onClose(function(){return t.onGracefulClose()}),this.parent.channel.onError(function(){return t.liveSocket.destroyViewById(t.id)})),this.channel.join().receive("ok",function(n){t.joinedOnce||e&&e(t),t.joinedOnce=!0,t.onJoin(n)}).receive("error",function(e){return t.onJoinError(e)}).receive("timeout",function(){return t.onJoinError("timeout")})}},{key:"onJoinError",value:function(e){return(e.redirect||e.external_live_redirect)&&this.channel.leave(),e.redirect?this.onRedirect(e.redirect):e.external_live_redirect?this.onExternalLiveRedirect(e.external_live_redirect):(this.displayError(),void this.log("error",function(){return["unable to join",e]}))}},{key:"onError",value:function(e){this.log("error",function(){return["view crashed",e]}),this.liveSocket.onViewError(this),document.activeElement.blur(),this.liveSocket.isUnloaded()?this.showLoader(200):this.displayError()}},{key:"displayError",value:function(){this.showLoader(),this.setContainerClasses("phx-disconnected","phx-error")}},{key:"pushWithReply",value:function(e,t){var n=this,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){};return this.channel.push(e,t,3e4).receive("ok",function(e){e.diff&&n.update(e.diff),e.redirect&&n.onRedirect(e.redirect),e.live_redirect&&n.onLiveRedirect(e.live_redirect),e.external_live_redirect&&n.onExternalLiveRedirect(e.external_live_redirect),i(e)})}},{key:"componentID",value:function(e){return e.getAttribute&&e.getAttribute("data-phx-component")&&e.id}},{key:"targetComponentID",value:function(e){var t=this;return D(e.closest("[".concat("data-phx-component","]")),function(e){return t.ownsElement(e)&&t.componentID(e)})}},{key:"pushEvent",value:function(e,t,n,i){for(var r=this.binding("value-"),o=0;o<t.attributes.length;o++){var a=t.attributes[o].name;a.startsWith(r)&&(i[a.replace(r,"")]=t.getAttribute(a))}void 0!==t.value&&(i.value=t.value),this.pushWithReply("event",{type:e,event:n,value:i,cid:this.targetComponentID(t)||void 0})}},{key:"pushKey",value:function(e,t,n,i){void 0!==e.value&&(i.value=e.value),this.pushWithReply("event",{type:t,event:n,value:i,cid:this.targetComponentID(e)||void 0})}},{key:"pushInput",value:function(e,t,n){F.dispatchEvent(e.form,"phx-change",{triggeredBy:e}),this.pushWithReply("event",{type:"form",event:t,value:O(e.form,{_target:n.target.name}),cid:this.targetComponentID(e)||void 0})}},{key:"pushFormSubmit",value:function(e,t,n){this.pushWithReply("event",{type:"form",event:t,value:O(e),cid:this.targetComponentID(e)||void 0},n)}},{key:"pushInternalLink",value:function(e,t){var n=this;this.isLoading()||this.showLoader(C);var i=this.liveSocket.setPendingLink(e);this.pushWithReply("link",{url:e},function(r){r.link_redirect?n.liveSocket.replaceRoot(e,t,i):n.liveSocket.commitPendingLink(i)&&(n.href=e,n.applyPendingUpdates(),n.hideLoader(),t&&t())}).receive("timeout",function(){return j.redirect(window.location.href)})}},{key:"pushComponentsDestroyed",value:function(e){this.pushWithReply("cids_destroyed",{cids:e})}},{key:"ownsElement",value:function(e){return e.getAttribute("data-phx-parent-id")===this.id||D(e.closest(S),function(e){return e.id})===this.id}},{key:"submitForm",value:function(e,t){var n=this,i=this.liveSocket.getBindingPrefix();F.putPrivate(e,"phx-has-submitted",!0),F.disableForm(e,i),this.liveSocket.blurActiveElement(this),this.pushFormSubmit(e,t,function(){F.restoreDisabledForm(e,i),n.liveSocket.restorePreviouslyActiveFocus()})}},{key:"binding",value:function(e){return this.liveSocket.binding(e)}}]),e}(),U=1,M=function(){function e(t,n,i){for(var r in k(this,e),this.__view=t,this.__callbacks=i,this.el=n,this.viewName=t.view,this.el.phxHookId=this.constructor.makeID(),this.__callbacks)this[r]=this.__callbacks[r]}return w(e,null,[{key:"makeID",value:function(){return U++}},{key:"elementID",value:function(e){return e.phxHookId}}]),w(e,[{key:"pushEvent",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.__view.pushWithReply("event",{type:"hook",event:e,value:t})}},{key:"__trigger__",value:function(e){var t=this.__callbacks[e];t&&t.call(this)}}]),e}();t.default=B},function(e,t){var n;n=function(){return this}();try{n=n||Function("return this")()||(0,eval)("this")}catch(e){"object"==typeof window&&(n=window)}e.exports=n},function(e,t,n){(function(t){t.Phoenix||(t.Phoenix={}),e.exports=t.Phoenix.LiveView=n(0)}).call(this,n(1))}])});