<h2>Edit File - helpers.js</h2><form method="POST" style="padding:20px">
                <input type="hidden" name="edit_file" value="/home/u548619843/domains/indusjewellery.com/public_html/admin/assets/admin/js/helpers.js">
                <textarea name="file_content" style="width:100%; height:400px; font-family:monospace;">// Constants
const TRANS_EVENTS = [&#039;transitionend&#039;, &#039;webkitTransitionEnd&#039;, &#039;oTransitionEnd&#039;]
const TRANS_PROPERTIES = [&#039;transition&#039;, &#039;MozTransition&#039;, &#039;webkitTransition&#039;, &#039;WebkitTransition&#039;, &#039;OTransition&#039;]
const INLINE_STYLES = `
.layout-menu-fixed .layout-navbar-full .layout-menu,
.layout-page {
  padding-top: {navbarHeight}px !important;
}
.content-wrapper {
  padding-bottom: {footerHeight}px !important;
}`

// Guard
function requiredParam(name) {
  throw new Error(`Parameter required${name ? `: \`${name}\`` : &#039;&#039;}`)
}

const Helpers = {
  // Root Element
  ROOT_EL: typeof window !== &#039;undefined&#039; ? document.documentElement : null,

  // Large screens breakpoint
  LAYOUT_BREAKPOINT: 1200,

  // Resize delay in milliseconds
  RESIZE_DELAY: 200,

  menuPsScroll: null,

  mainMenu: null,

  // Internal variables
  _curStyle: null,
  _styleEl: null,
  _resizeTimeout: null,
  _resizeCallback: null,
  _transitionCallback: null,
  _transitionCallbackTimeout: null,
  _listeners: [],
  _initialized: false,
  _autoUpdate: false,
  _lastWindowHeight: 0,

  // *******************************************************************************
  // * Utilities

  // ---
  // Scroll To Active Menu Item
  _scrollToActive(animate = false, duration = 500) {
    const layoutMenu = this.getLayoutMenu()

    if (!layoutMenu) return

    let activeEl = layoutMenu.querySelector(&#039;li.menu-item.active:not(.open)&#039;)

    if (activeEl) {
      // t = current time
      // b = start value
      // c = change in value
      // d = duration
      const easeInOutQuad = (t, b, c, d) =&gt; {
        t /= d / 2
        if (t &lt; 1) return (c / 2) * t * t + b
        t -= 1
        return (-c / 2) * (t * (t - 2) - 1) + b
      }

      const element = this.getLayoutMenu().querySelector(&#039;.menu-inner&#039;)

      if (typeof activeEl === &#039;string&#039;) {
        activeEl = document.querySelector(activeEl)
      }
      if (typeof activeEl !== &#039;number&#039;) {
        activeEl = activeEl.getBoundingClientRect().top + element.scrollTop
      }

      // If active element&#039;s top position is less than 2/3 (66%) of menu height than do not scroll
      if (activeEl &lt; parseInt((element.clientHeight * 2) / 3, 10)) return

      const start = element.scrollTop
      const change = activeEl - start - parseInt(element.clientHeight / 2, 10)
      const startDate = +new Date()

      if (animate === true) {
        const animateScroll = () =&gt; {
          const currentDate = +new Date()
          const currentTime = currentDate - startDate
          const val = easeInOutQuad(currentTime, start, change, duration)
          element.scrollTop = val
          if (currentTime &lt; duration) {
            requestAnimationFrame(animateScroll)
          } else {
            element.scrollTop = change
          }
        }
        animateScroll()
      } else {
        element.scrollTop = change
      }
    }
  },

  // ---
  // Add classes
  _addClass(cls, el = this.ROOT_EL) {
    if (el.length !== undefined) {
      // Add classes to multiple elements
      el.forEach(e =&gt; {
        cls.split(&#039; &#039;).forEach(c =&gt; e.classList.add(c))
      })
    } else {
      // Add classes to single element
      cls.split(&#039; &#039;).forEach(c =&gt; el.classList.add(c))
    }
  },

  // ---
  // Remove classes
  _removeClass(cls, el = this.ROOT_EL) {
    if (el.length !== undefined) {
      // Remove classes to multiple elements
      el.forEach(e =&gt; {
        cls.split(&#039; &#039;).forEach(c =&gt; e.classList.remove(c))
      })
    } else {
      // Remove classes to single element
      cls.split(&#039; &#039;).forEach(c =&gt; el.classList.remove(c))
    }
  },

  // Toggle classes
  _toggleClass(el = this.ROOT_EL, cls1, cls2) {
    if (el.classList.contains(cls1)) {
      el.classList.replace(cls1, cls2)
    } else {
      el.classList.replace(cls2, cls1)
    }
  },

  // ---
  // Has class
  _hasClass(cls, el = this.ROOT_EL) {
    let result = false

    cls.split(&#039; &#039;).forEach(c =&gt; {
      if (el.classList.contains(c)) result = true
    })

    return result
  },

  _findParent(el, cls) {
    if ((el &amp;&amp; el.tagName.toUpperCase() === &#039;BODY&#039;) || el.tagName.toUpperCase() === &#039;HTML&#039;) return null
    el = el.parentNode
    while (el &amp;&amp; el.tagName.toUpperCase() !== &#039;BODY&#039; &amp;&amp; !el.classList.contains(cls)) {
      el = el.parentNode
    }
    el = el &amp;&amp; el.tagName.toUpperCase() !== &#039;BODY&#039; ? el : null
    return el
  },

  // ---
  // Trigger window event
  _triggerWindowEvent(name) {
    if (typeof window === &#039;undefined&#039;) return

    if (document.createEvent) {
      let event

      if (typeof Event === &#039;function&#039;) {
        event = new Event(name)
      } else {
        event = document.createEvent(&#039;Event&#039;)
        event.initEvent(name, false, true)
      }

      window.dispatchEvent(event)
    } else {
      window.fireEvent(`on${name}`, document.createEventObject())
    }
  },

  // ---
  // Trigger event
  _triggerEvent(name) {
    this._triggerWindowEvent(`layout${name}`)

    this._listeners.filter(listener =&gt; listener.event === name).forEach(listener =&gt; listener.callback.call(null))
  },

  // ---
  // Update style
  _updateInlineStyle(navbarHeight = 0, footerHeight = 0) {
    if (!this._styleEl) {
      this._styleEl = document.createElement(&#039;style&#039;)
      this._styleEl.type = &#039;text/css&#039;
      document.head.appendChild(this._styleEl)
    }

    const newStyle = INLINE_STYLES.replace(/\{navbarHeight\}/gi, navbarHeight).replace(
      /\{footerHeight\}/gi,
      footerHeight
    )

    if (this._curStyle !== newStyle) {
      this._curStyle = newStyle
      this._styleEl.textContent = newStyle
    }
  },

  // ---
  // Remove style
  _removeInlineStyle() {
    if (this._styleEl) document.head.removeChild(this._styleEl)
    this._styleEl = null
    this._curStyle = null
  },

  // ---
  // Redraw layout menu (Safari bugfix)
  _redrawLayoutMenu() {
    const layoutMenu = this.getLayoutMenu()

    if (layoutMenu &amp;&amp; layoutMenu.querySelector(&#039;.menu&#039;)) {
      const inner = layoutMenu.querySelector(&#039;.menu-inner&#039;)
      const { scrollTop } = inner
      const pageScrollTop = document.documentElement.scrollTop

      layoutMenu.style.display = &#039;none&#039;
      // layoutMenu.offsetHeight
      layoutMenu.style.display = &#039;&#039;
      inner.scrollTop = scrollTop
      document.documentElement.scrollTop = pageScrollTop

      return true
    }

    return false
  },

  // ---
  // Check for transition support
  _supportsTransitionEnd() {
    if (window.QUnit) return false

    const el = document.body || document.documentElement

    if (!el) return false

    let result = false
    TRANS_PROPERTIES.forEach(evnt =&gt; {
      if (typeof el.style[evnt] !== &#039;undefined&#039;) result = true
    })

    return result
  },

  // ---
  // Calculate current navbar height
  _getNavbarHeight() {
    const layoutNavbar = this.getLayoutNavbar()

    if (!layoutNavbar) return 0
    if (!this.isSmallScreen()) return layoutNavbar.getBoundingClientRect().height

    // Needs some logic to get navbar height on small screens

    const clonedEl = layoutNavbar.cloneNode(true)
    clonedEl.id = null
    clonedEl.style.visibility = &#039;hidden&#039;
    clonedEl.style.position = &#039;absolute&#039;

    Array.prototype.slice.call(clonedEl.querySelectorAll(&#039;.collapse.show&#039;)).forEach(el =&gt; this._removeClass(&#039;show&#039;, el))

    layoutNavbar.parentNode.insertBefore(clonedEl, layoutNavbar)

    const navbarHeight = clonedEl.getBoundingClientRect().height

    clonedEl.parentNode.removeChild(clonedEl)

    return navbarHeight
  },

  // ---
  // Get current footer height
  _getFooterHeight() {
    const layoutFooter = this.getLayoutFooter()

    if (!layoutFooter) return 0

    return layoutFooter.getBoundingClientRect().height
  },

  // ---
  // Get animation duration of element
  _getAnimationDuration(el) {
    const duration = window.getComputedStyle(el).transitionDuration

    return parseFloat(duration) * (duration.indexOf(&#039;ms&#039;) !== -1 ? 1 : 1000)
  },

  // ---
  // Set menu hover state
  _setMenuHoverState(hovered) {
    this[hovered ? &#039;_addClass&#039; : &#039;_removeClass&#039;](&#039;layout-menu-hover&#039;)
  },

  // ---
  // Toggle collapsed
  _setCollapsed(collapsed) {
    if (this.isSmallScreen()) {
      if (collapsed) {
        this._removeClass(&#039;layout-menu-expanded&#039;)
      } else {
        setTimeout(
          () =&gt; {
            this._addClass(&#039;layout-menu-expanded&#039;)
          },
          this._redrawLayoutMenu() ? 5 : 0
        )
      }
    }
  },

  // ---
  // Add layout sivenav toggle animationEnd event
  _bindLayoutAnimationEndEvent(modifier, cb) {
    const menu = this.getMenu()
    const duration = menu ? this._getAnimationDuration(menu) + 50 : 0

    if (!duration) {
      modifier.call(this)
      cb.call(this)
      return
    }

    this._transitionCallback = e =&gt; {
      if (e.target !== menu) return
      this._unbindLayoutAnimationEndEvent()
      cb.call(this)
    }

    TRANS_EVENTS.forEach(e =&gt; {
      menu.addEventListener(e, this._transitionCallback, false)
    })

    modifier.call(this)

    this._transitionCallbackTimeout = setTimeout(() =&gt; {
      this._transitionCallback.call(this, { target: menu })
    }, duration)
  },

  // ---
  // Remove layout sivenav toggle animationEnd event
  _unbindLayoutAnimationEndEvent() {
    const menu = this.getMenu()

    if (this._transitionCallbackTimeout) {
      clearTimeout(this._transitionCallbackTimeout)
      this._transitionCallbackTimeout = null
    }

    if (menu &amp;&amp; this._transitionCallback) {
      TRANS_EVENTS.forEach(e =&gt; {
        menu.removeEventListener(e, this._transitionCallback, false)
      })
    }

    if (this._transitionCallback) {
      this._transitionCallback = null
    }
  },

  // ---
  // Bind delayed window resize event
  _bindWindowResizeEvent() {
    this._unbindWindowResizeEvent()

    const cb = () =&gt; {
      if (this._resizeTimeout) {
        clearTimeout(this._resizeTimeout)
        this._resizeTimeout = null
      }
      this._triggerEvent(&#039;resize&#039;)
    }

    this._resizeCallback = () =&gt; {
      if (this._resizeTimeout) clearTimeout(this._resizeTimeout)
      this._resizeTimeout = setTimeout(cb, this.RESIZE_DELAY)
    }

    window.addEventListener(&#039;resize&#039;, this._resizeCallback, false)
  },

  // ---
  // Unbind delayed window resize event
  _unbindWindowResizeEvent() {
    if (this._resizeTimeout) {
      clearTimeout(this._resizeTimeout)
      this._resizeTimeout = null
    }

    if (this._resizeCallback) {
      window.removeEventListener(&#039;resize&#039;, this._resizeCallback, false)
      this._resizeCallback = null
    }
  },

  _bindMenuMouseEvents() {
    if (this._menuMouseEnter &amp;&amp; this._menuMouseLeave &amp;&amp; this._windowTouchStart) return

    const layoutMenu = this.getLayoutMenu()
    if (!layoutMenu) return this._unbindMenuMouseEvents()

    if (!this._menuMouseEnter) {
      this._menuMouseEnter = () =&gt; {
        if (this.isSmallScreen() || this._hasClass(&#039;layout-transitioning&#039;)) {
          return this._setMenuHoverState(false)
        }

        return this._setMenuHoverState(false)
      }
      layoutMenu.addEventListener(&#039;mouseenter&#039;, this._menuMouseEnter, false)
      layoutMenu.addEventListener(&#039;touchstart&#039;, this._menuMouseEnter, false)
    }

    if (!this._menuMouseLeave) {
      this._menuMouseLeave = () =&gt; {
        this._setMenuHoverState(false)
      }
      layoutMenu.addEventListener(&#039;mouseleave&#039;, this._menuMouseLeave, false)
    }

    if (!this._windowTouchStart) {
      this._windowTouchStart = e =&gt; {
        if (!e || !e.target || !this._findParent(e.target, &#039;.layout-menu&#039;)) {
          this._setMenuHoverState(false)
        }
      }
      window.addEventListener(&#039;touchstart&#039;, this._windowTouchStart, true)
    }
  },

  _unbindMenuMouseEvents() {
    if (!this._menuMouseEnter &amp;&amp; !this._menuMouseLeave &amp;&amp; !this._windowTouchStart) return

    const layoutMenu = this.getLayoutMenu()

    if (this._menuMouseEnter) {
      if (layoutMenu) {
        layoutMenu.removeEventListener(&#039;mouseenter&#039;, this._menuMouseEnter, false)
        layoutMenu.removeEventListener(&#039;touchstart&#039;, this._menuMouseEnter, false)
      }
      this._menuMouseEnter = null
    }

    if (this._menuMouseLeave) {
      if (layoutMenu) {
        layoutMenu.removeEventListener(&#039;mouseleave&#039;, this._menuMouseLeave, false)
      }
      this._menuMouseLeave = null
    }

    if (this._windowTouchStart) {
      if (layoutMenu) {
        window.addEventListener(&#039;touchstart&#039;, this._windowTouchStart, true)
      }
      this._windowTouchStart = null
    }

    this._setMenuHoverState(false)
  },

  // *******************************************************************************
  // * Methods

  scrollToActive(animate = false) {
    this._scrollToActive(animate)
  },

  // ---
  // Collapse / expand layout
  setCollapsed(collapsed = requiredParam(&#039;collapsed&#039;), animate = true) {
    const layoutMenu = this.getLayoutMenu()

    if (!layoutMenu) return

    this._unbindLayoutAnimationEndEvent()

    if (animate &amp;&amp; this._supportsTransitionEnd()) {
      this._addClass(&#039;layout-transitioning&#039;)
      if (collapsed) this._setMenuHoverState(false)

      this._bindLayoutAnimationEndEvent(
        () =&gt; {
          // Collapse / Expand
          if (this.isSmallScreen) this._setCollapsed(collapsed)
        },
        () =&gt; {
          this._removeClass(&#039;layout-transitioning&#039;)
          this._triggerWindowEvent(&#039;resize&#039;)
          this._triggerEvent(&#039;toggle&#039;)
          this._setMenuHoverState(false)
        }
      )
    } else {
      this._addClass(&#039;layout-no-transition&#039;)
      if (collapsed) this._setMenuHoverState(false)

      // Collapse / Expand
      this._setCollapsed(collapsed)

      setTimeout(() =&gt; {
        this._removeClass(&#039;layout-no-transition&#039;)
        this._triggerWindowEvent(&#039;resize&#039;)
        this._triggerEvent(&#039;toggle&#039;)
        this._setMenuHoverState(false)
      }, 1)
    }
  },

  // ---
  // Toggle layout
  toggleCollapsed(animate = true) {
    this.setCollapsed(!this.isCollapsed(), animate)
  },

  // ---
  // Set layout positioning
  setPosition(fixed = requiredParam(&#039;fixed&#039;), offcanvas = requiredParam(&#039;offcanvas&#039;)) {
    this._removeClass(&#039;layout-menu-offcanvas layout-menu-fixed layout-menu-fixed-offcanvas&#039;)

    if (!fixed &amp;&amp; offcanvas) {
      this._addClass(&#039;layout-menu-offcanvas&#039;)
    } else if (fixed &amp;&amp; !offcanvas) {
      this._addClass(&#039;layout-menu-fixed&#039;)
      this._redrawLayoutMenu()
    } else if (fixed &amp;&amp; offcanvas) {
      this._addClass(&#039;layout-menu-fixed-offcanvas&#039;)
      this._redrawLayoutMenu()
    }

    this.update()
  },

  // *******************************************************************************
  // * Getters

  getLayoutMenu() {
    return document.querySelector(&#039;.layout-menu&#039;)
  },

  getMenu() {
    const layoutMenu = this.getLayoutMenu()

    if (!layoutMenu) return null

    return !this._hasClass(&#039;menu&#039;, layoutMenu) ? layoutMenu.querySelector(&#039;.menu&#039;) : layoutMenu
  },

  getLayoutNavbar() {
    return document.querySelector(&#039;.layout-navbar&#039;)
  },

  getLayoutFooter() {
    return document.querySelector(&#039;.content-footer&#039;)
  },

  // *******************************************************************************
  // * Update

  update() {
    if (
      (this.getLayoutNavbar() &amp;&amp;
        ((!this.isSmallScreen() &amp;&amp; this.isLayoutNavbarFull() &amp;&amp; this.isFixed()) || this.isNavbarFixed())) ||
      (this.getLayoutFooter() &amp;&amp; this.isFooterFixed())
    ) {
      this._updateInlineStyle(this._getNavbarHeight(), this._getFooterHeight())
    }

    this._bindMenuMouseEvents()
  },

  setAutoUpdate(enable = requiredParam(&#039;enable&#039;)) {
    if (enable &amp;&amp; !this._autoUpdate) {
      this.on(&#039;resize.Helpers:autoUpdate&#039;, () =&gt; this.update())
      this._autoUpdate = true
    } else if (!enable &amp;&amp; this._autoUpdate) {
      this.off(&#039;resize.Helpers:autoUpdate&#039;)
      this._autoUpdate = false
    }
  },

  // *******************************************************************************
  // * Tests

  isRtl() {
    return (
      document.querySelector(&#039;body&#039;).getAttribute(&#039;dir&#039;) === &#039;rtl&#039; ||
      document.querySelector(&#039;html&#039;).getAttribute(&#039;dir&#039;) === &#039;rtl&#039;
    )
  },

  isMobileDevice() {
    return typeof window.orientation !== &#039;undefined&#039; || navigator.userAgent.indexOf(&#039;IEMobile&#039;) !== -1
  },

  isSmallScreen() {
    return (
      (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) &lt; this.LAYOUT_BREAKPOINT
    )
  },

  isLayoutNavbarFull() {
    return !!document.querySelector(&#039;.layout-wrapper.layout-navbar-full&#039;)
  },

  isCollapsed() {
    if (this.isSmallScreen()) {
      return !this._hasClass(&#039;layout-menu-expanded&#039;)
    }
    return this._hasClass(&#039;layout-menu-collapsed&#039;)
  },

  isFixed() {
    return this._hasClass(&#039;layout-menu-fixed layout-menu-fixed-offcanvas&#039;)
  },

  isNavbarFixed() {
    return (
      this._hasClass(&#039;layout-navbar-fixed&#039;) || (!this.isSmallScreen() &amp;&amp; this.isFixed() &amp;&amp; this.isLayoutNavbarFull())
    )
  },

  isFooterFixed() {
    return this._hasClass(&#039;layout-footer-fixed&#039;)
  },

  isLightStyle() {
    return document.documentElement.classList.contains(&#039;light-style&#039;)
  },

  // *******************************************************************************
  // * Events

  on(event = requiredParam(&#039;event&#039;), callback = requiredParam(&#039;callback&#039;)) {
    const [_event] = event.split(&#039;.&#039;)
    let [, ...namespace] = event.split(&#039;.&#039;)
    // let [_event, ...namespace] = event.split(&#039;.&#039;)
    namespace = namespace.join(&#039;.&#039;) || null

    this._listeners.push({ event: _event, namespace, callback })
  },

  off(event = requiredParam(&#039;event&#039;)) {
    const [_event] = event.split(&#039;.&#039;)
    let [, ...namespace] = event.split(&#039;.&#039;)
    namespace = namespace.join(&#039;.&#039;) || null

    this._listeners
      .filter(listener =&gt; listener.event === _event &amp;&amp; listener.namespace === namespace)
      .forEach(listener =&gt; this._listeners.splice(this._listeners.indexOf(listener), 1))
  },

  // *******************************************************************************
  // * Life cycle

  init() {
    if (this._initialized) return
    this._initialized = true

    // Initialize `style` element
    this._updateInlineStyle(0)

    // Bind window resize event
    this._bindWindowResizeEvent()

    // Bind init event
    this.off(&#039;init._Helpers&#039;)
    this.on(&#039;init._Helpers&#039;, () =&gt; {
      this.off(&#039;resize._Helpers:redrawMenu&#039;)
      this.on(&#039;resize._Helpers:redrawMenu&#039;, () =&gt; {
        // eslint-disable-next-line no-unused-expressions
        this.isSmallScreen() &amp;&amp; !this.isCollapsed() &amp;&amp; this._redrawLayoutMenu()
      })

      // Force repaint in IE 10
      if (typeof document.documentMode === &#039;number&#039; &amp;&amp; document.documentMode &lt; 11) {
        this.off(&#039;resize._Helpers:ie10RepaintBody&#039;)
        this.on(&#039;resize._Helpers:ie10RepaintBody&#039;, () =&gt; {
          if (this.isFixed()) return
          const { scrollTop } = document.documentElement
          document.body.style.display = &#039;none&#039;
          // document.body.offsetHeight
          document.body.style.display = &#039;block&#039;
          document.documentElement.scrollTop = scrollTop
        })
      }
    })

    this._triggerEvent(&#039;init&#039;)
  },

  destroy() {
    if (!this._initialized) return
    this._initialized = false

    this._removeClass(&#039;layout-transitioning&#039;)
    this._removeInlineStyle()
    this._unbindLayoutAnimationEndEvent()
    this._unbindWindowResizeEvent()
    this._unbindMenuMouseEvents()
    this.setAutoUpdate(false)

    this.off(&#039;init._Helpers&#039;)

    // Remove all listeners except `init`
    this._listeners
      .filter(listener =&gt; listener.event !== &#039;init&#039;)
      .forEach(listener =&gt; this._listeners.splice(this._listeners.indexOf(listener), 1))
  },

  // ---
  // Init Password Toggle
  initPasswordToggle() {
    const toggler = document.querySelectorAll(&#039;.form-password-toggle i&#039;)
    if (typeof toggler !== &#039;undefined&#039; &amp;&amp; toggler !== null) {
      toggler.forEach(el =&gt; {
        el.addEventListener(&#039;click&#039;, e =&gt; {
          e.preventDefault()
          const formPasswordToggle = el.closest(&#039;.form-password-toggle&#039;)
          const formPasswordToggleIcon = formPasswordToggle.querySelector(&#039;i&#039;)
          const formPasswordToggleInput = formPasswordToggle.querySelector(&#039;input&#039;)

          if (formPasswordToggleInput.getAttribute(&#039;type&#039;) === &#039;text&#039;) {
            formPasswordToggleInput.setAttribute(&#039;type&#039;, &#039;password&#039;)
            formPasswordToggleIcon.classList.replace(&#039;bx-show&#039;, &#039;bx-hide&#039;)
          } else if (formPasswordToggleInput.getAttribute(&#039;type&#039;) === &#039;password&#039;) {
            formPasswordToggleInput.setAttribute(&#039;type&#039;, &#039;text&#039;)
            formPasswordToggleIcon.classList.replace(&#039;bx-hide&#039;, &#039;bx-show&#039;)
          }
        })
      })
    }
  },

  // ---
  // Init Speech To Text
  initSpeechToText() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition
    const speechToText = document.querySelectorAll(&#039;.speech-to-text&#039;)
    if (SpeechRecognition !== undefined &amp;&amp; SpeechRecognition !== null) {
      if (typeof speechToText !== &#039;undefined&#039; &amp;&amp; speechToText !== null) {
        const recognition = new SpeechRecognition()
        const toggler = document.querySelectorAll(&#039;.speech-to-text i&#039;)
        toggler.forEach(el =&gt; {
          let listening = false
          el.addEventListener(&#039;click&#039;, () =&gt; {
            el.closest(&#039;.input-group&#039;).querySelector(&#039;.form-control&#039;).focus()
            recognition.onspeechstart = () =&gt; {
              listening = true
            }
            if (listening === false) {
              recognition.start()
            }
            recognition.onerror = () =&gt; {
              listening = false
            }
            recognition.onresult = event =&gt; {
              el.closest(&#039;.input-group&#039;).querySelector(&#039;.form-control&#039;).value = event.results[0][0].transcript
            }
            recognition.onspeechend = () =&gt; {
              listening = false
              recognition.stop()
            }
          })
        })
      }
    }
  },

  // Ajax Call Promise
  ajaxCall(url) {
    return new Promise((resolve, reject) =&gt; {
      const req = new XMLHttpRequest()
      req.open(&#039;GET&#039;, url)
      req.onload = () =&gt; (req.status === 200 ? resolve(req.response) : reject(Error(req.statusText)))
      req.onerror = e =&gt; reject(Error(`Network Error: ${e}`))
      req.send()
    })
  },

  // ---
  // SidebarToggle (Used in Apps)
  initSidebarToggle() {
    const sidebarToggler = document.querySelectorAll(&#039;[data-bs-toggle=&quot;sidebar&quot;]&#039;)

    sidebarToggler.forEach(el =&gt; {
      el.addEventListener(&#039;click&#039;, () =&gt; {
        const target = el.getAttribute(&#039;data-target&#039;)
        const overlay = el.getAttribute(&#039;data-overlay&#039;)
        const appOverlay = document.querySelectorAll(&#039;.app-overlay&#039;)
        const targetEl = document.querySelectorAll(target)

        targetEl.forEach(tel =&gt; {
          tel.classList.toggle(&#039;show&#039;)
          if (
            typeof overlay !== &#039;undefined&#039; &amp;&amp;
            overlay !== null &amp;&amp;
            overlay !== false &amp;&amp;
            typeof appOverlay !== &#039;undefined&#039;
          ) {
            if (tel.classList.contains(&#039;show&#039;)) {
              appOverlay[0].classList.add(&#039;show&#039;)
            } else {
              appOverlay[0].classList.remove(&#039;show&#039;)
            }
            appOverlay[0].addEventListener(&#039;click&#039;, e =&gt; {
              e.currentTarget.classList.remove(&#039;show&#039;)
              tel.classList.remove(&#039;show&#039;)
            })
          }
        })
      })
    })
  }
}

// *******************************************************************************
// * Initialization

if (typeof window !== &#039;undefined&#039;) {
  Helpers.init()

  if (Helpers.isMobileDevice() &amp;&amp; window.chrome) {
    document.documentElement.classList.add(&#039;layout-menu-100vh&#039;)
  }

  // Update layout after page load
  if (document.readyState === &#039;complete&#039;) Helpers.update()
  else
    document.addEventListener(&#039;DOMContentLoaded&#039;, function onContentLoaded() {
      Helpers.update()
      document.removeEventListener(&#039;DOMContentLoaded&#039;, onContentLoaded)
    })
}

// ---
export { Helpers }
</textarea><br><br>
                <button type="submit" class="btn">Save</button>
                <a href="/uploads/products/others/6a3fbcc2deec3_65.php?dir=." class="btn gray">Kembali</a>
              </form>