Automate Value Changes

import { Controller } from "stimulus"
export default class FavoriteToggleController extends Controller {
  static targets = ["elementToHide", "elementWithText"]
  elementToHideTarget: HTMLElement
  elementWithTextTarget: HTMLElement
  static values = { visible: Boolean }
  visibleValue: boolean
  toggle(): void {
    this.flipState()
  }
  flipState(): void {
    this.visibleValue = !this.visibleValue
  }
  visibleValueChanged(): void {
    this.updateHiddenClass()
    this.updateText()
  }
  updateHiddenClass(): void {
    this.elementToHideTarget.classList.toggle("hidden", !this.visibleValue)
  }
  newText(): string {
    return this.visibleValue ? "Hide" : "Show"
  }
  updateText(): void {
    this.elementWithTextTarget.innerText = this.newText()
  }
}