{"version":3,"file":"arrow_navigation_controller-kOTKyTmR.js","sources":["../../../app/javascript/controllers/arrow_navigation_controller.js"],"sourcesContent":["import ApplicationController from './application_controller'\n\nexport default class extends ApplicationController {\n  static values = {\n    active: { type: Number, default: 0 },\n    enabled: Boolean\n  }\n\n  static targets = ['panel', 'tab']\n  static classes = ['active']\n\n  initialize() {\n    this.onArrowUp = this.onArrowUp.bind(this)\n    this.onArrowDown = this.onArrowDown.bind(this)\n  }\n\n  onArrowUp(e) {\n    if(this.isDisabled) return;\n\n    this.activeValue = this.activeValue - 1\n    this.updateHighlightedElement()\n  }\n\n  onArrowDown(e) {\n    if(this.isDisabled) return;\n\n    this.activeValue = this.activeValue + 1\n    this.updateHighlightedElement()\n  }\n\n  updateHighlightedElement() {\n    if(this.activeValue < 0) {\n      this.activeValue = this.navigatableElements.length - 1\n    } else if(this.activeValue >= this.navigatableElements.length) {\n      this.activeValue = 0\n    }\n\n    this.navigatableElements.forEach((element, index) => {\n      if(index === this.activeValue) {\n        this.addClass(element, ...this.activeElementClasses)\n        element.scrollIntoView(false)\n      } else {\n        this.removeClass(element, ...this.activeElementClasses)\n      }\n    })\n  }\n\n  clickActiveElement() {\n    if(this.isDisabled) {\n      return this.dispatch('enter')\n    }\n\n    if(this.activeElement) {\n      this.activeElement.click()\n    } else {\n      this.dispatch('empty')\n    }\n  }\n\n  navigateToElement({ detail: element }) {\n    this.activeValue = this.navigatableElements.indexOf(element)\n    this.updateHighlightedElement()\n  }\n\n  setActiveElement({ currentTarget }) {\n    this.activeValue = this.navigatableElements.indexOf(currentTarget)\n    this.updateHighlightedElement()\n  }\n\n  // private\n\n  enabledValueChanged() {\n    if(this.isDisabled) return;\n    this.updateHighlightedElement()\n  }\n\n  get activeElement() {\n    return this.navigatableElements[this.activeValue]\n  }\n\n  get activeElementClasses() {\n    return this.hasActiveClass ? [...this.activeClasses] : ['bg-night-10']\n  }\n\n  get navigatableElements() {\n    return Array.from(this.element.querySelectorAll('[data-arrow-navigatable]'))\n  }\n\n  get isDisabled() {\n    return !this.enabledValue\n  }\n}\n"],"names":["arrow_navigation_controller","ApplicationController","element","index","currentTarget","__publicField"],"mappings":"uNAEe,MAAKA,UAASC,CAAsB,CASjD,YAAa,CACX,KAAK,UAAY,KAAK,UAAU,KAAK,IAAI,EACzC,KAAK,YAAc,KAAK,YAAY,KAAK,IAAI,CACjD,CAEE,UAAU,EAAG,CACR,KAAK,aAER,KAAK,YAAc,KAAK,YAAc,EACtC,KAAK,yBAAwB,EACjC,CAEE,YAAY,EAAG,CACV,KAAK,aAER,KAAK,YAAc,KAAK,YAAc,EACtC,KAAK,yBAAwB,EACjC,CAEE,0BAA2B,CACtB,KAAK,YAAc,EACpB,KAAK,YAAc,KAAK,oBAAoB,OAAS,EAC7C,KAAK,aAAe,KAAK,oBAAoB,SACrD,KAAK,YAAc,GAGrB,KAAK,oBAAoB,QAAQ,CAACC,EAASC,IAAU,CAChDA,IAAU,KAAK,aAChB,KAAK,SAASD,EAAS,GAAG,KAAK,oBAAoB,EACnDA,EAAQ,eAAe,EAAK,GAE5B,KAAK,YAAYA,EAAS,GAAG,KAAK,oBAAoB,CAEzD,CAAA,CACL,CAEE,oBAAqB,CACnB,GAAG,KAAK,WACN,OAAO,KAAK,SAAS,OAAO,EAG3B,KAAK,cACN,KAAK,cAAc,MAAK,EAExB,KAAK,SAAS,OAAO,CAE3B,CAEE,kBAAkB,CAAE,OAAQA,GAAW,CACrC,KAAK,YAAc,KAAK,oBAAoB,QAAQA,CAAO,EAC3D,KAAK,yBAAwB,CACjC,CAEE,iBAAiB,CAAE,cAAAE,GAAiB,CAClC,KAAK,YAAc,KAAK,oBAAoB,QAAQA,CAAa,EACjE,KAAK,yBAAwB,CACjC,CAIE,qBAAsB,CACjB,KAAK,YACR,KAAK,yBAAwB,CACjC,CAEE,IAAI,eAAgB,CAClB,OAAO,KAAK,oBAAoB,KAAK,WAAW,CACpD,CAEE,IAAI,sBAAuB,CACzB,OAAO,KAAK,eAAiB,CAAC,GAAG,KAAK,aAAa,EAAI,CAAC,aAAa,CACzE,CAEE,IAAI,qBAAsB,CACxB,OAAO,MAAM,KAAK,KAAK,QAAQ,iBAAiB,0BAA0B,CAAC,CAC/E,CAEE,IAAI,YAAa,CACf,MAAO,CAAC,KAAK,YACjB,CACA,CAxFEC,EADkBL,EACX,SAAS,CACd,OAAQ,CAAE,KAAM,OAAQ,QAAS,CAAG,EACpC,QAAS,OACb,GAEEK,EANkBL,EAMX,UAAU,CAAC,QAAS,KAAK,GAChCK,EAPkBL,EAOX,UAAU,CAAC,QAAQ"}