\n\nimport { Controller } from '@hotwired/stimulus';\n\nexport default class extends Controller {\n static targets = ['container']\n static values = {\n backdropColor: { type: String, default: 'rgba(0, 0, 0, 0.8)' },\n restoreScroll: { type: Boolean, default: true }\n }\n\n connect() {\n // The class we should toggle on the container\n this.toggleClass = this.data.get('class') || 'hidden';\n\n // The ID of the background to hide/remove\n this.backgroundId = this.data.get('backgroundId') || 'modal-background';\n\n // The HTML for the background element\n this.backgroundHtml = this.data.get('backgroundHtml') || this._backgroundHTML();\n\n // Let the user close the modal by clicking on the background\n this.allowBackgroundClose = (this.data.get('allowBackgroundClose') || 'true') === 'true';\n\n // Prevent the default action of the clicked element (following a link for example) when opening the modal\n this.preventDefaultActionOpening = (this.data.get('preventDefaultActionOpening') || 'true') === 'true';\n\n // Prevent the default action of the clicked element (following a link for example) when closing the modal\n this.preventDefaultActionClosing = (this.data.get('preventDefaultActionClosing') || 'true') === 'true';\n }\n\n disconnect() {\n this.close();\n }\n\n open(e) {\n if (this.preventDefaultActionOpening) {\n e.preventDefault();\n }\n\n if (e.target.blur) {\n e.target.blur();\n }\n\n // Lock the scroll and save current scroll position\n this.lockScroll();\n\n // Unhide the modal\n this.containerTarget.classList.remove(this.toggleClass);\n\n // Insert the background\n if (!this.data.get(\"disable-backdrop\")) {\n document.body.insertAdjacentHTML('beforeend', this.backgroundHtml);\n this.background = document.querySelector(`#${this.backgroundId}`);\n }\n }\n\n close(e) {\n if (e && this.preventDefaultActionClosing) {\n e.preventDefault();\n }\n\n // Unlock the scroll and restore previous scroll position\n this.unlockScroll();\n\n // Hide the modal\n this.containerTarget.classList.add(this.toggleClass);\n\n // Remove the background\n if (this.background) { this.background.remove() }\n }\n\n closeBackground(e) {\n if (this.allowBackgroundClose && e.target === this.containerTarget) {\n this.close(e);\n }\n }\n\n closeWithKeyboard(e) {\n if (e.keyCode === 27 && !this.containerTarget.classList.contains(this.toggleClass)) {\n this.close(e);\n }\n }\n\n _backgroundHTML() {\n return ``;\n }\n\n lockScroll() {\n // Add right padding to the body so the page doesn't shift\n // when we disable scrolling\n const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n document.body.style.paddingRight = `${scrollbarWidth}px`;\n\n // Save the scroll position\n this.saveScrollPosition();\n\n // Add classes to body to fix its position\n document.body.classList.add('fixed', 'inset-x-0', 'overflow-hidden');\n\n // Add negative top position in order for body to stay in place\n document.body.style.top = `-${this.scrollPosition}px`;\n }\n\n unlockScroll() {\n // Remove tweaks for scrollbar\n document.body.style.paddingRight = null;\n\n // Remove classes from body to unfix position\n document.body.classList.remove('fixed', 'inset-x-0', 'overflow-hidden');\n\n // Restore the scroll position of the body before it got locked\n if(this.restoreScrollValue) {\n this.restoreScrollPosition();\n }\n\n // Remove the negative top inline style from body\n document.body.style.top = null;\n }\n\n saveScrollPosition() {\n this.scrollPosition = window.pageYOffset || document.body.scrollTop;\n }\n\n restoreScrollPosition() {\n if (this.scrollPosition === undefined) return;\n\n document.documentElement.scrollTop = this.scrollPosition;\n }\n}\n", "import { Controller } from '@hotwired/stimulus'\n\nexport default class extends Controller {\n static targets = ['tab', 'panel']\n\n connect() {\n this.activeTabClasses = (this.data.get('activeTab') || 'active').split(' ')\n this.inactiveTabClasses = (this.data.get('inactiveTab') || 'inactive').split(' ')\n if (this.anchor) this.index = this.tabTargets.findIndex((tab) => tab.id === this.anchor)\n this.showTab()\n }\n\n change(event) {\n event.preventDefault()\n\n // If target specifies an index, use that\n if (event.currentTarget.dataset.index) {\n this.index = event.currentTarget.dataset.index\n\n // If target specifies an id, use that\n } else if (event.currentTarget.dataset.id) {\n this.index = this.tabTargets.findIndex((tab) => tab.id == event.currentTarget.dataset.id)\n\n // Otherwise, use the index of the current target\n } else {\n this.index = this.tabTargets.indexOf(event.currentTarget)\n }\n\n window.dispatchEvent(new CustomEvent('tsc:tab-change'))\n }\n\n showTab() {\n this.tabTargets.forEach((tab, index) => {\n const panel = this.panelTargets[index]\n\n if (index === this.index) {\n panel.classList.remove('hidden')\n tab.classList.remove(...this.inactiveTabClasses)\n tab.classList.add(...this.activeTabClasses)\n\n // Update URL with the tab ID if it has one\n // This will be automatically selected on page load\n if (tab.id) {\n location.hash = tab.id\n }\n } else {\n panel.classList.add('hidden')\n tab.classList.remove(...this.activeTabClasses)\n tab.classList.add(...this.inactiveTabClasses)\n }\n })\n }\n\n get index() {\n return parseInt(this.data.get('index') || 0)\n }\n\n set index(value) {\n this.data.set('index', (value >= 0 ? value : 0))\n this.showTab()\n }\n\n get anchor() {\n return (document.URL.split('#').length > 1) ? document.URL.split('#')[1] : null;\n }\n}\n", "import { Controller } from '@hotwired/stimulus'\n\nexport default class extends Controller {\n static targets = ['toggleable']\n static values = { open: Boolean }\n\n connect() {\n this.toggleClass = this.data.get('class') || 'hidden'\n }\n\n toggle(event) {\n event.preventDefault()\n\n this.openValue = !this.openValue\n }\n\n hide(event) {\n event.preventDefault();\n\n this.openValue = false;\n }\n\n show(event) {\n event.preventDefault();\n\n this.openValue = true;\n }\n\n openValueChanged() {\n if (!this.toggleClass) { return }\n\n this.toggleableTargets.forEach(target => {\n target.classList.toggle(this.toggleClass)\n })\n }\n}\n", "// A simple inline popover to be used wherever needed, with a configurable offset.\n// Visit The Stimulus Handbook for more details\n// https://stimulusjs.org/handbook/introduction\n//\n// This example controller works with specially annotated HTML like:\n//\n//
\n// Beginning in 2015, Google introduced what is called the\n//
\n// Terrible name - we know. But the biggest name in SEO came up with it.\n//
\n//
\n// which shows you local search results before normal organic results.\n//\n//\n// You can also toggle the popover using the click action.\n//
popover#toggle\" data-action=\"mouseover->popover#mouseOver mouseout->popover#mouseOut\">\n\nimport { Controller } from '@hotwired/stimulus'\n\nexport default class extends Controller {\n static targets = ['content']\n\n // Sets the popover offset using Stimulus data map objects.\n initialize() {\n this.contentTarget.setAttribute(\n 'style',\n `transform:translate(${this.data.get('translateX')}, ${this.data.get('translateY')});`,\n )\n }\n\n // Show the popover\n mouseOver() {\n this.contentTarget.classList.remove('hidden')\n }\n // Hide the popover\n mouseOut() {\n this.contentTarget.classList.add('hidden')\n }\n // Toggle the popover on demand\n toggle() {\n if (this.contentTarget.classList.contains('hidden')) {\n this.contentTarget.classList.remove('hidden')\n } else {\n this.contentTarget.classList.add('hidden')\n } \n }\n}\n", "// Visit The Stimulus Handbook for more details\n// https://stimulusjs.org/handbook/introduction\n\n// This example controller works with specially annotated HTML like:\n\n//
\n//
\n//
\n//
\n// \n//
\n//
\n//
\n// \n//
\n//
\n//
\n//
\n//
\n\nimport Dropdown from './dropdown.js'\n\nexport default class extends Dropdown {\n static targets = ['menu', 'overlay']\n\n _show() {\n this.overlayTarget.classList.remove(this.toggleClass)\n\n super._show(\n (() => {\n this._activeClassList[1].forEach(klass => this.overlayTarget.classList.add(klass))\n this._invisibleClassList[1].forEach(klass => this.overlayTarget.classList.remove(klass))\n this._visibleClassList[1].forEach(klass => this.overlayTarget.classList.add(klass))\n setTimeout(\n (() => {\n this._enteringClassList[1].forEach(klass => this.overlayTarget.classList.remove(klass))\n }).bind(this),\n this.enterTimeout[1],\n )\n }).bind(this),\n )\n }\n\n _hide() {\n this._leavingClassList[1].forEach(klass => this.overlayTarget.classList.add(klass))\n\n super._hide(\n (() => {\n setTimeout(\n (() => {\n this._visibleClassList[1].forEach(klass => this.overlayTarget.classList.remove(klass))\n this._invisibleClassList[1].forEach(klass => this.overlayTarget.classList.add(klass))\n this._activeClassList[1].forEach(klass => this.overlayTarget.classList.remove(klass))\n this._leavingClassList[1].forEach(klass => this.overlayTarget.classList.remove(klass))\n this.overlayTarget.classList.add(this.toggleClass)\n }).bind(this),\n this.leaveTimeout[1],\n )\n }).bind(this),\n )\n }\n}\n", "// A color picker preview where you can choose to have the color or backgroundColor\n// get updated based on the result of a color picker. It also supports ensuring\n// the foreground text is always readable by performing a YIQ calculation to\n// set the text to black or white based on the contrast of the color and backgroundColor.\n//\n// The example below uses the native HTML5 color picker for picking the color but\n// you can swap it with anything you'd like:\n//\n//