Uh oh! Something broke. Try reloading...
\" tags when the \"Enter\" key\n // is pressed. You can see more context at https://github.com/basecamp/trix/issues/680#issuecomment-1664445292.\n Trix.config.blockAttributes.default.tagName = \"p\";\n Trix.config.blockAttributes.default.breakOnReturn = true;\n\n Trix.Block.prototype.breaksOnReturn = function() {\n const attr = this.getLastAttribute();\n // Function `Trix.getBlockConfig()` was not found so I replaced it with analog:\n const config = Trix.config.blockAttributes[attr ? attr : \"default\"];\n return config ? config.breakOnReturn : false;\n };\n\n Trix.LineBreakInsertion.prototype.shouldInsertBlockBreak = function() {\n if (this.block.hasAttributes() && this.block.isListItem() && !this.block.isEmpty()) {\n return this.startLocation.offset > 0;\n } else {\n return !this.shouldBreakFormattedBlock() ? this.breaksOnReturn : false;\n }\n };\n // end of monkey-patch code\n\n Trix.config.blockAttributes.heading2 = {\n tagName: \"h2\",\n terminal: true,\n breakOnReturn: true,\n group: false\n }\n\n Trix.config.blockAttributes.heading3 = {\n tagName: \"h3\",\n terminal: true,\n breakOnReturn: true,\n group: false\n }\n\n Trix.config.blockAttributes.note = {\n tagName: \"note-default\",\n terminal: true,\n group: false,\n }\n\n Trix.config.blockAttributes.noteCaution = {\n tagName: \"note-caution\",\n terminal: true,\n group: false,\n }\n\n Trix.config.blockAttributes.noteWarning = {\n tagName: \"note-warning\",\n terminal: true,\n group: false,\n }\n\n Trix.config.textAttributes.underline = {\n tagName: \"u\",\n inheritable: 1\n }\n\n Trix.config.blockAttributes.paragraph = {\n tagName: \"p\",\n terminal: true,\n breakOnReturn: true,\n group: false\n }\n})\n\ndocument.addEventListener(\"trix-file-accept\", (event) => {\n const acceptedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/svg+xml', 'application/pdf']\n\n if (!acceptedTypes.includes(event.file.type)) {\n event.preventDefault()\n alert(\"Only JPEG, JPG, PNG, SVG, or PDF files are supported\")\n }\n})\n\ndocument.addEventListener(\"trix-initialize\", (event) => {\n const toolbar = event.target.toolbarElement\n\n if (toolbar.querySelector(\"[data-trix-attribute='underline']\")) { return }\n\n const underlineButton = ''\n\n const linkButton = toolbar.querySelector(\"[data-trix-attribute='href']\")\n linkButton.insertAdjacentHTML(\"afterend\", underlineButton)\n})\n","'use strict';\n\nimport RoleModel from '@rolemodel/turbo-confirm'\n\nTurbo.setConfirmMethod(RoleModel.confirm)\n\nRoleModel.init({\n showConfirmCallback: (dialog) => {\n checkConfirmDisable(dialog)\n },\n contentSlots: {\n title: {\n contentAttribute: 'turbo-confirm',\n slotSelector: '#confirm-title'\n },\n body: {\n contentAttribute: 'confirm-details',\n slotSelector: '#confirm-body'\n },\n acceptText: {\n contentAttribute: 'confirm-button',\n slotSelector: '#confirm-accept'\n },\n rejectText: {\n contentAttribute: 'confirm-cancel',\n slotSelector: '#confirm-close'\n },\n },\n})\n\nfunction checkConfirmDisable(dialog) {\n const confirmButton = dialog.querySelector('#confirm-accept')\n if (confirmButton.innerHTML == 'hide_me') dialog.querySelector('#confirm-accept').classList.add('display-none')\n}\n","export default () => {\n const metaEl = document.querySelector('meta[name=\"csrf-token\"]')\n return metaEl?.content\n}\n","import { createElement, numberFromPixels, numberToPixels, setElementLocation } from '../../helpers/dom_helpers'\n\nclass DraggableModal {\n constructor(rootElement, positionOnGrid, gridSquareNumber) {\n this._rootElement = rootElement\n this._positionOnGrid = positionOnGrid\n this._gridSquareNumber = gridSquareNumber\n\n this._createElement()\n }\n\n rootElement() { return this._rootElement }\n positionOnGrid() { return this._positionOnGrid }\n gridSquareNumber() { return this._gridSquareNumber }\n element() { return this._element }\n\n _createElement() {\n this._modalDragBox = createElement(this.rootElement(), 'div', 'tutorial-practice__modal-drag-box')\n this._element = createElement(this.rootElement(), 'div', 'tutorial-practice__modal')\n let modalWidth = 500\n this.element().style.width = numberToPixels(modalWidth)\n\n // The modal drag box is an invisible box that sits behind the modal. If the mouse is moved quickly,\n // it will move faster than the modal. The modal drag box will capture the move events in that case.\n this._modalDragBox.style.width = numberToPixels(modalWidth + 200)\n this._modalDragBox.style.height = numberToPixels(400)\n\n this.element().addEventListener('mousedown', () => this._modalMouseDown = true)\n this.element().addEventListener('mousemove', this._modalMouseMove.bind(this))\n this._modalDragBox.addEventListener('mousemove', this._modalMouseMove.bind(this))\n this.element().addEventListener('mouseup', this._endDrag.bind(this))\n }\n\n updatePosition(focusElementBoundingBox) {\n const { modalLeft, modalTop, modalRight } = this._getModalPosition(focusElementBoundingBox)\n const absoluteLeft = Math.max(10, modalLeft)\n const absoluteTop = Math.max(10, modalTop)\n setElementLocation(this.element(), absoluteLeft, absoluteTop, modalRight)\n this._updateModalDragBoxPosition(absoluteLeft, absoluteTop)\n }\n\n /**\n * This allows the user to drag the modal on the screen and reposition it.\n * @param event\n * @private\n */\n _modalMouseMove({ pageX, pageY, buttons }) {\n if (buttons !== 1 || !this._modalMouseDown) {\n return this._endDrag()\n }\n\n const diffX = pageX - this._lastX\n const diffY = pageY - this._lastY\n this._lastX = pageX\n this._lastY = pageY\n const { left, top, right } = this.element().style\n const { width } = this.element().getBoundingClientRect()\n\n let modalLeft\n if (right) {\n modalLeft = this._iframeElement().width - numberFromPixels(right) - width\n } else {\n modalLeft = numberFromPixels(left)\n }\n\n const modalTop = numberFromPixels(top)\n const newLeft = modalLeft + diffX\n const newTop = modalTop + diffY\n\n if (this._attemptingToDragOutOfIframe(newLeft, newTop)) {\n return\n }\n\n this._userHasMovedModal = true\n\n setElementLocation(this.element(), newLeft, newTop)\n this._updateModalDragBoxPosition(newLeft, newTop)\n }\n\n _attemptingToDragOutOfIframe(newLeft, newTop) {\n const newRight = newLeft + this.element().getBoundingClientRect().width\n const newBottom = newTop + this.element().getBoundingClientRect().height\n const { clientWidth: maxWidth, clientHeight: maxHeight } = this.rootElement()\n\n return newRight > maxWidth ||\n newBottom > maxHeight ||\n newLeft < 0 ||\n newTop < 0\n }\n\n _endDrag() {\n this._modalMouseDown = false\n this._lastX = undefined\n this._lastY = undefined\n }\n\n _updateModalDragBoxPosition(left, top) {\n const { width: modalWidth, height: modalHeight } = this.element().getBoundingClientRect()\n const { width, height } = this._modalDragBox.getBoundingClientRect()\n const adjustedWidth = (width - modalWidth) / 2\n const adjustedHeight = (height - modalHeight) / 2\n setElementLocation(this._modalDragBox, left - adjustedWidth, top - adjustedHeight)\n }\n\n _getModalPosition(focusElementBoundingBox) {\n if (this._shouldPositionOnGrid()) {\n return this._getModalGridPosition()\n }\n\n const {\n left: focusElementLeft,\n bottomAvailableSpace: focusElementBottomAvailableSpace,\n top: focusElementTop,\n height: focusElementHeight,\n } = focusElementBoundingBox\n const { height: modalHeight, width: modalWidth } = this.element().getBoundingClientRect()\n const margin = 28\n let modalTop = focusElementTop + focusElementHeight + margin\n let modalLeft = focusElementLeft\n const modalRight = modalLeft + modalWidth\n const notEnoughRoomBelowFocusElement = focusElementBottomAvailableSpace < (modalHeight + 2 * margin)\n const notEnoughRoomAboveFocusElement = (top - modalHeight - margin) < 0\n const modalRightIsOffScreen = modalRight > this._iframeElement().width\n\n if (notEnoughRoomBelowFocusElement) {\n modalTop = focusElementTop - modalHeight - margin\n }\n\n if (notEnoughRoomBelowFocusElement && notEnoughRoomAboveFocusElement) {\n // position in the middle of the focus element\n modalTop = (modalHeight / 2) - (margin / 2)\n }\n\n if (modalRightIsOffScreen) {\n const difference = modalRight - this._iframeElement().width\n modalLeft = focusElementLeft - (difference + margin)\n }\n return { modalLeft, modalTop }\n }\n\n /**\n * Some steps override the position of the modal that is rendered. The property 'cb' (gridSquareNumber)\n * is used to communicate which grid square in a grid of 9 squares the modal should position itself in\n * with zero being none.\n * @returns {boolean}\n * @private\n */\n _shouldPositionOnGrid() {\n return this._positionOnGrid === true && this.gridSquareNumber() !== 0\n }\n\n /**\n * This function returns a modalLeft (or modalRight) and a modalTop that inform where the modal\n * should be positioned in a grid of 1-9 (see below)\n * | 1 | 2 | 3 |\n * | 4 | 5 | 6 |\n * | 7 | 8 | 9 |\n * @returns {{modalLeft: (string|number), modalTop: string, modalRight: string}}\n * @private\n */\n _getModalGridPosition() {\n const modalLeft = this._getModalLeftForGrid()\n const modalTop = this._getModalTopForGrid()\n const modalRight = this._getModalRightForGrid()\n return { modalLeft, modalTop, modalRight }\n }\n\n /**\n * @returns {number} A pixel value indicating how far from the left side of the iframe to position\n */\n _getModalLeftForGrid() {\n const width = this.element().getBoundingClientRect().width\n const middle = (this._iframeElement().width / 2) - (width / 2)\n\n if ([1, 4, 7].includes(this.gridSquareNumber())) { return 15 }\n if ([2, 5, 8].includes(this.gridSquareNumber())) { return middle }\n }\n\n /**\n * @returns {number} A pixel value indicating how far from the right side of the iframe to position\n */\n _getModalRightForGrid() {\n if ([3, 6, 9].includes(this.gridSquareNumber())) { return 15 }\n }\n\n /**\n * @returns {number} A pixel value indicating how far from the top of the iframe to position\n */\n _getModalTopForGrid() {\n const height = this.element().getBoundingClientRect().height\n const middleOfTopRow = (this._iframeElement().height * 0.15) - (height / 2)\n const middleOfMiddleRow = (this._iframeElement().height * 0.5) - (height / 2)\n const middleOfBottomRow = (this._iframeElement().height * 0.85) - (height / 2)\n\n if ([1, 2, 3].includes(this.gridSquareNumber())) { return middleOfTopRow }\n if ([4, 5, 6].includes(this.gridSquareNumber())) { return middleOfMiddleRow }\n return middleOfBottomRow\n }\n\n _iframeElement() {\n return this.rootElement().querySelector('iframe').getBoundingClientRect()\n }\n}\n\nexport default DraggableModal\n","export default function legacyFocusElementFinder(clickedNodes, rootElement) {\n let focusElement = rootElement\n for (const index of clickedNodes) {\n if (focusElement) {\n const element = focusElement.children[index]\n if (element) {\n focusElement = element\n } else {\n break\n }\n }\n }\n\n return focusElement\n}\n","import TextInputStep from './text_input_step'\n\nclass ClearTextInputStep extends TextInputStep {\n /**\n * Override the render input function to populate it with the a value that must be cleared.\n * The value comes straight from the focus element in the oracle html.\n * @private\n */\n _renderInput() {\n super._renderInput()\n this._input.value = this.focusElement().value\n }\n\n _correctValue() {\n return ''\n }\n}\n\nexport default ClearTextInputStep\n","import InteractiveTutorialStep from './interactive_tutorial_step'\nimport { setElementLocation, setElementDimensions, numberFromPixels } from '../../../helpers/dom_helpers'\n\nclass ClickActionStep extends InteractiveTutorialStep {\n #minSizeOfFocusElementOverlay = 40\n\n render() {\n super.render()\n this.initializeFocusElementClickTarget()\n }\n\n handleFocusElementPositionChange(focusElementBoundingBox) {\n this._focusElementBoundingBox = focusElementBoundingBox\n super.handleFocusElementPositionChange()\n\n this.updateFocusElementClickTargetSize()\n this.updateFocusElementClickTargetPosition()\n }\n\n /**\n * Creates an invisible element over the focus element and the focus element highlight that is clickable.\n * It has a min height and width of 40px to make small buttons easier to click\n */\n initializeFocusElementClickTarget() {\n this.focusElementOverlay = this.parentElement().appendChild(document.createElement('a'))\n this.focusElementOverlay.onclick = this.onComplete.bind(this)\n this.focusElementOverlay.className = 'tutorial-practice__focus-element-click-target'\n this.focusElementOverlay.dataset.interactiveTutorialTarget = 'clickElement'\n\n this.updateFocusElementClickTargetSize()\n this.updateFocusElementClickTargetPosition()\n }\n\n /**\n * This function will position the invisible focus element click target over the focus element.\n * Some math is required due to the possibility of there being an adjusted width or height on the clickable\n * overlay to allow for easier clicking of smaller elements.\n */\n updateFocusElementClickTargetPosition() {\n let { width: overlayElementWidth, height: overlayElementHeight } = this.focusElementOverlay.style\n let { top: adjustedTop, left: adjustedLeft, width: focusElementWidth, height: focusElementHeight } = this.focusElementBoundingBox()\n overlayElementWidth = numberFromPixels(overlayElementWidth)\n overlayElementHeight = numberFromPixels(overlayElementHeight)\n adjustedTop = adjustedTop - ((overlayElementHeight - focusElementHeight) / 2)\n adjustedLeft = adjustedLeft - ((overlayElementWidth - focusElementWidth) / 2)\n if (!adjustedLeft) adjustedLeft = 1\n setElementLocation(this.focusElementOverlay, adjustedLeft, adjustedTop)\n }\n\n updateFocusElementClickTargetSize() {\n const { width, height } = this.focusElementBoundingBox()\n\n setElementDimensions(\n this.focusElementOverlay,\n Math.max(width, this.#minSizeOfFocusElementOverlay),\n Math.max(height, this.#minSizeOfFocusElementOverlay)\n )\n }\n}\n\nexport default ClickActionStep\n","import InteractiveTutorialStep from './interactive_tutorial_step'\nimport { createElement, setElementDimensions } from '../../../helpers/dom_helpers'\n\nclass CloseStep extends InteractiveTutorialStep {\n handleFocusElementPositionChange() {}\n\n /**\n * Render a fake browser tab with a button to close it above the iframe. It renders its own clickable 'focus element'\n * that looks like the focus element in other step types. When the user clicks that button, it proceeds to the\n * next step and removes the fake browser head from the dom.\n */\n render() {\n this._renderFakeBrowserHead()\n super.render()\n this._updateIframeToRefreshPosition()\n }\n\n /**\n * The close step deviates from other steps in that in renders its focus element outside of the iframe in a fake\n * browser tab.\n * @Override\n */\n initializeFocusElementHighlight() {\n this._focusElementHighlight = createElement(this._fakeBrowserTab, 'div', 'tutorial-practice__focus-element-highlight')\n this._focusElementHighlight.dataset.interactiveTutorialTarget = 'highlightElement'\n this._fakeCloseIcon = createElement(this._focusElementHighlight, 'span', 'fake-browser-head__close-icon material-icons material-icons--lg')\n this._fakeCloseIcon.textContent = 'cancel' // Set material icon for close button\n // Override some styles that the default focus element highlight gets so that it positions correctly in the tab and is clickable\n this._focusElementHighlight.style.position = 'inherit'\n this._focusElementHighlight.style.marginRight = '12px'\n this._focusElementHighlight.style.marginTop = '9px'\n this._focusElementHighlight.style.pointerEvents = 'unset'\n setElementDimensions(this._focusElementHighlight, 32, 30)\n\n // click event on fake close icon advances the scene. This is styled to look like the simplify-overlay\n this._fakeCloseIcon.addEventListener('click', (_e) => {\n this._fakeBrowserHead.remove()\n this.onComplete()\n })\n }\n\n /**\n * This is a workaround for a bug that caused the fake browser head to be hidden behind the iframe and not cause it\n * be pushed down. It was found that toggling the display of the element caused the iframe to update and appropriately\n * be pushed down\n * @private\n */\n _updateIframeToRefreshPosition() {\n let iframe = this.parentElement().querySelector('iframe')\n setTimeout(() => iframe.style.display = 'none', 100)\n setTimeout(() => iframe.style.display = 'block', 200)\n }\n\n _renderFakeBrowserHead() {\n if (document.querySelector('.fake-browser-head')) { return }\n\n // Create a div to hold the fake browser head and insert it before the iframe so that it will show above it\n this._fakeBrowserHead = createElement(this.parentElement(), 'div', 'fake-browser-head')\n this.parentElement().insertBefore(this._fakeBrowserHead, this.parentElement().childNodes[0])\n\n this._renderFakeBrowserTab()\n this._renderFakeBrowserSearchBar()\n this._renderFakeButtons()\n }\n\n _renderFakeBrowserTab() {\n this._fakeBrowserTab = createElement(this._fakeBrowserHead, 'div', 'fake-browser-head__tab')\n createElement(this._fakeBrowserHead, 'img', 'fake-browser-head__os-icons')\n this._fakeToolbar = createElement(this._fakeBrowserHead, 'div', 'fake-browser-head__toolbar')\n createElement(this._fakeBrowserTab, 'img', 'fake-browser-head__favicon')\n const fakeBrowserTabLabel = createElement(this._fakeBrowserTab, 'span', 'fake-browser-head__tab-label')\n fakeBrowserTabLabel.textContent = 'Maverick Training'\n }\n\n _renderFakeBrowserSearchBar() {\n createElement(this._fakeToolbar, 'img', 'fake-browser-head__arrows')\n this._fakeUrlContainer = createElement(this._fakeToolbar, 'div', 'fake-browser-head__search-bar')\n this._fakeUrlInput = createElement(this._fakeUrlContainer, 'input', 'fake-browser-head__search-input')\n this._fakeUrlInput.value = 'https://training.mavericksolutions.com'\n this._fakeUrlInput.disabled = true\n createElement(this._fakeUrlContainer, 'img', 'fake-browser-head__star')\n }\n\n _renderFakeButtons() {\n const fakeUserBadge = createElement(this._fakeToolbar, 'div', 'fake-browser-head__user-badge')\n fakeUserBadge.textContent = 'M'\n createElement(this._fakeToolbar, 'div', 'fake-browser-head__hamburger-menu')\n }\n}\n\nexport default CloseStep\n","import { setElementDimensions, setElementLocation } from '../../../helpers/dom_helpers'\n\nclass InteractiveTutorialStep {\n /**\n * Baseclass for all tutorial step types\n * @param parentElement the dom element that the stimulus controller was attached to (also the parent element of the iframe)\n * @param focusElement the next element to click inside the iframe\n * @param stepData a json blob with step data\n * @param onCompleteFunction function to call on step completion\n * @param focusElementBoundingBox the element\n */\n constructor(parentElement, focusElement, stepData, onCompleteFunction, focusElementBoundingBox) {\n this._parentElement = parentElement\n this._focusElement = focusElement\n this._stepData = stepData\n this.onComplete = onCompleteFunction\n this._focusElementBoundingBox = focusElementBoundingBox\n }\n\n parentElement() {\n return this._parentElement\n }\n\n focusElement() {\n return this._focusElement\n }\n\n stepData() {\n return this._stepData\n }\n\n nextStepUrl() {\n return this._nextStepUrl\n }\n\n focusElementBoundingBox() {\n return this._focusElementBoundingBox\n }\n\n /**\n * This is called when the stimulus controller mounts and should do any logic that is required to\n * correctly display the step in the dom\n */\n render() {\n this.initializeFocusElementHighlight()\n }\n\n /**\n * This function will be called by the stimulus controller to on scroll or resize\n */\n handleFocusElementPositionChange() {\n this._updateFocusElementHighlightSizeAndPosition()\n }\n\n /**\n * If the content stored is a PNG, metadata will be passed through in the step defining the click target\n * @returns {boolean} True if the content attachment on an image\n */\n contentIsImage() {\n return this.stepData().action_width !== undefined\n }\n\n /**\n * Creates a *non-clickable* div with a green border that gets placed exactly overtop the focus element in the iframe.\n * This element has a large translucent box shadow that darkens the rest of the screen slightly.\n */\n initializeFocusElementHighlight() {\n this._focusElementHighlight = this.parentElement().appendChild(document.createElement('div'))\n this._focusElementHighlight.className = 'tutorial-practice__focus-element-highlight'\n this._focusElementHighlight.dataset.interactiveTutorialTarget = 'highlightElement'\n this._updateFocusElementHighlightSizeAndPosition()\n }\n\n /**\n * This function will position the focus element highlight element to be exactly on top of the focus element\n */\n _updateFocusElementHighlightSizeAndPosition() {\n let { top, left, width, height } = this.focusElementBoundingBox()\n setElementLocation(this._focusElementHighlight, left, top)\n setElementDimensions(this._focusElementHighlight, width, height)\n }\n}\n\nexport default InteractiveTutorialStep\n\n","import InteractiveTutorialStep from './interactive_tutorial_step'\nimport { createElement } from '../../../helpers/dom_helpers'\nimport DraggableModal from '../draggable_modal'\nimport getText from '../../../helpers/getText'\n\nclass ModalStep extends InteractiveTutorialStep {\n render() {\n super.render()\n this._renderModal()\n this._renderLabel()\n this._renderButton()\n this.modal().updatePosition(this.focusElementBoundingBox())\n }\n\n handleFocusElementPositionChange(focusElementBoundingBox) {\n super.handleFocusElementPositionChange()\n if (this._userHasMovedModal) { return }\n this._focusElementBoundingBox = focusElementBoundingBox\n this.modal().updatePosition(focusElementBoundingBox)\n }\n\n modal() {\n return this._modal\n }\n\n button() {\n return this._button\n }\n\n _onButtonClick(_event) {\n setTimeout(() => this.onComplete(), 700)\n }\n\n _labelText() {\n throw new Error('Subclass should override')\n }\n\n _renderModal() {\n this._modal = new DraggableModal(\n this.parentElement(),\n this.stepData().repositionEnabled,\n this.stepData().cb\n )\n }\n\n _renderLabel() {\n this._label = createElement(this.modal().element(), 'span')\n this._label.innerText = this._labelText()\n }\n\n _renderButton() {\n this._button = createElement(this.modal().element(), 'button', 'btn btn--primary margin-top-sm')\n this._button.innerText = getText.dom_data('modal-step', 'continue')\n this._button.style.float = 'right'\n this._button.onclick = this._onButtonClick.bind(this)\n }\n}\n\nexport default ModalStep\n","import InteractiveTutorialStep from './interactive_tutorial_step'\n\nclass SelectStep extends InteractiveTutorialStep {\n render() {\n super.render()\n this.focusElement().addEventListener('change', this._onSelect.bind(this))\n }\n\n handleFocusElementPositionChange(focusElementBoundingBox) {\n this._focusElementBoundingBox = focusElementBoundingBox\n super.handleFocusElementPositionChange()\n }\n\n _onSelect(_event) {\n const selectElement = this.focusElement()\n const correctOption = this.stepData().option_value.trim().toLowerCase()\n\n const selectedCorrectOption = selectElement &&\n selectElement.item &&\n selectElement.item(selectElement.selectedIndex).textContent.trim().toLowerCase() === correctOption\n\n if (selectedCorrectOption) {\n this.onComplete()\n }\n }\n}\n\nexport default SelectStep\n","import ModalStep from './modal_step'\nimport { createElement } from '../../../helpers/dom_helpers'\nimport getText from '../../../helpers/getText'\n\nclass TextInputStep extends ModalStep {\n render() {\n super.render()\n this._renderInput()\n }\n\n input() {\n return this._input\n }\n\n _correctValue() {\n return this.stepData().input_value.toLowerCase() || this.stepData().default_input_value.toLowerCase()\n }\n\n _labelText() {\n return getText.step_name_value() ||\n this.stepData().name_value ||\n this.stepData().default_name_value\n }\n\n _onButtonClick(_event) {\n const inputValue = this.input().value\n const correctValueEntered = !this.stepData().requireInputTextMatch || inputValue.toLowerCase() === this._correctValue()\n\n if (correctValueEntered) {\n this._toggleState(correctValueEntered)\n super._onButtonClick()\n } else {\n this._toggleState(correctValueEntered)\n }\n }\n\n _toggleState(success) {\n this._clearState()\n let color = 'danger'\n let resultMessage = this._errorMessage()\n let renderIcon = this._renderErrorIcon.bind(this)\n\n if (success) {\n color = 'success'\n resultMessage = getText.dom_data('input', 'success')\n renderIcon = this._renderAnimateCheckbox.bind(this)\n }\n\n this._resultMessage.classList.add(`font-${color}`)\n this.input().classList.add(color)\n this._resultMessage.innerText = resultMessage\n renderIcon()\n }\n\n _errorMessage() {\n return getText.dom_data('input', 'error')\n }\n\n _clearState() {\n this._iconContainer.innerText = ''\n this._resultMessage.classList.remove('font-success')\n this._resultMessage.classList.remove('font-danger')\n this.input().classList.remove('success')\n this.input().classList.remove('danger')\n }\n\n _handleKeyUp(event) {\n if (event.key === 'Enter') {\n this._onButtonClick()\n }\n }\n\n _renderInput() {\n this._inputRow = createElement(this.modal().element(), 'div', 'flex items-center margin-top-sm')\n this._resultMessage = createElement(this.modal().element(), 'div', 'margin-top-sm font-xs')\n this.modal().element().insertBefore(this._inputRow, this.button())\n this.modal().element().insertBefore(this._resultMessage, this.button())\n this._input = createElement(this._inputRow, 'input', 'form__input position-relative')\n this._input.onkeypress = this._handleKeyUp.bind(this)\n this._iconContainer = createElement(this._inputRow, 'span', 'margin-left-sm flex items-center')\n }\n\n _renderAnimateCheckbox() {\n this._checkmarkContainer = createElement(this._iconContainer, 'div', 'loading-circle')\n this._checkmark = createElement(this._checkmarkContainer, 'div', 'checkmark hidden')\n\n setTimeout(() => {\n this._checkmarkContainer.classList.add('load-complete')\n this._checkmark.classList.remove('hidden')\n this._checkmark.classList.add('draw')\n }, 400)\n }\n\n _renderErrorIcon() {\n this._icon = createElement(this._iconContainer, 'span', 'material-icons material-icons-outlined material-icons--lg')\n this._icon.style.color = 'var(--color-danger)'\n this._icon.innerText='cancel'\n }\n}\n\nexport default TextInputStep\n","import ModalStep from './modal_step'\nimport getText from '../../../helpers/getText'\n\nclass ViewStep extends ModalStep {\n _labelText() {\n return getText.dom_data('view', 'label')\n }\n}\n\nexport default ViewStep\n","import TextInputStep from './step_types/text_input_step'\nimport ViewStep from './step_types/view_step'\nimport ClearTextInputStep from './step_types/clear_text_input_step'\nimport ClickActionStep from './step_types/click_action_step'\nimport SelectStep from './step_types/select_step'\nimport CloseStep from './step_types/close_step'\n\nclass TutorialStepFactory {\n constructor(element, focusElement, stepData, onCompleteCallback, focusElementBoundingBox) {\n this._element = element\n this._focusElement = focusElement\n this._stepData = stepData\n this._onCompleteCallback = onCompleteCallback\n this._focusElementBoundingBox = focusElementBoundingBox\n this._fixupElementTag()\n }\n\n get stepData() {\n return this._stepData\n }\n\n makeStep(overrideKlass = undefined) {\n let klass = ClickActionStep\n switch (this.stepData.elementTag) {\n case 'input-text':\n case 'input-password':\n if (this.stepData.type === 'clear') {\n klass = ClearTextInputStep\n } else {\n klass = TextInputStep\n }\n break\n case 'select':\n klass = SelectStep\n break\n }\n\n if (overrideKlass) {\n klass = overrideKlass\n } else if (this.stepData.type === 'custom' && this.stepData.customView) {\n klass = ViewStep\n } else if (this.stepData.type === 'view') {\n klass = ViewStep\n } else if (this.stepData.type === 'close') {\n klass = CloseStep\n }\n\n return new klass(this._element, this._focusElement, this._stepData, this._onCompleteCallback, this._focusElementBoundingBox)\n }\n\n _fixupElementTag() {\n if (this.stepData.type === 'input' || this.stepData.type === 'clear') {\n this._stepData.elementTag = 'input-text'\n }\n }\n}\n\nexport default TutorialStepFactory\n","import ElementData from './element_data'\n\nexport default class BodyElementData extends ElementData {\n details() {\n this._tagName = 'body'\n return this.result\n }\n}\n","import ElementData from './element_data'\n\nexport default class DefaultElementData extends ElementData {\n details() {\n this._tagName = this.target.tagName.toLowerCase()\n this._elementName = this.titleOrText()\n\n return this.result\n }\n}\n","export default class ElementData {\n constructor(target, iframeDocument) {\n this._target = target\n this._iframeDocument = iframeDocument\n }\n\n details() {\n throw new Error('Subclass should override')\n }\n\n findLabelText() {\n let labelElement = this.iframeDocument.querySelector(`[for=\"${this.target.id}\"]`)\n if (labelElement) {\n return labelElement.textContent\n }\n }\n\n hasAttributeWithValue(name) {\n return this.target.hasAttribute(name) && !!this.target.getAttribute(name).trim()\n }\n\n titleOrText() {\n if (this.hasAttributeWithValue('title')) {\n return this.target.getAttribute('title')\n } else {\n return this.truncate(this.target.textContent, 300)\n }\n }\n\n get result() {\n return { elementTag: this.tagName, defaultNameValue: this.elementName, defaultInputValue: this.elementInput }\n }\n\n get elementName() {\n return this.elementNameIsSet ? this._elementName : 'none'\n }\n\n get elementNameIsSet() {\n return this._elementName && !!this._elementName.trim()\n }\n\n get elementInput() {\n return this._elementInput\n }\n\n get tagName() {\n return this._tagName\n }\n\n get target() {\n return this._target\n }\n\n get iframeDocument() {\n return this._iframeDocument\n }\n\n truncate(value, num) {\n if (!value || value.length <= num) { return value }\n\n return value.slice(0, num)\n }\n}\n","import TdElementData from './td_element_data'\nimport SelectElementData from './select_element_data'\nimport LabelElementData from './label_element_data'\nimport BodyElementData from './body_element_data'\nimport InputElementData from './input_element_data'\nimport IframeElementData from './iframe_element_data'\nimport DefaultElementData from './default_element_data'\n\nexport default class ElementDataMapper {\n static klassMap = {\n 'td': TdElementData,\n 'select': SelectElementData,\n 'label': LabelElementData,\n 'body': BodyElementData,\n 'input': InputElementData,\n 'textarea': InputElementData,\n 'iframe': IframeElementData,\n }\n\n static getDetails(elementType, target, iframeDocument) {\n const klass = this.klassMap[elementType]\n let instance\n if (klass) {\n instance = new klass(target, iframeDocument)\n } else {\n instance = new DefaultElementData(target, iframeDocument)\n }\n\n return instance.details()\n }\n}\n","import ElementData from './element_data'\n\nexport default class IframeElementData extends ElementData {\n details() {\n this._tagName = 'iframe'\n this._elementName = this.findIframeName()\n\n return this.result\n }\n\n findIframeName() {\n return this.target.getAttribute('title') ||\n this.target.getAttribute('name') ||\n this.target.getAttribute('id') ||\n 'iframe'\n }\n}\n","import ElementData from './element_data'\n\nexport default class InputElementData extends ElementData {\n details() {\n const tagType = this.target.type\n\n if (tagType == 'password') {\n this._tagName = 'input-password'\n } else if (tagType == 'radio') {\n this._tagName = 'input-radio'\n } else if (tagType == 'checkbox') {\n this._tagName = 'input-checkbox'\n } else if (tagType == 'button' || tagType == 'submit') {\n this._tagName = \"input-button\"\n this._elementName = this.target.value\n } else if (tagType == 'file') {\n this._tagName = \"input-button\"\n this._elementName = this.titleOrText()\n } else {\n this._tagName = 'input-text'\n }\n this._elementInput = \"none\";\n\n if (!this.elementNameIsSet) {\n this._elementName = this.findInputName()\n }\n\n return this.result\n }\n\n findInputName() {\n if (this.target.nextElementSibling && this.target.nextElementSibling.tagName.toLowerCase() == \"label\") {\n return this.target.nextElementSibling.textContent\n } else if (this.target.previousElementSibling && this.target.previousElementSibling.tagName.toLowerCase() == \"label\") {\n return this.target.previousElementSibling.textContent\n } else if (this.target.placeholder != \"\") {\n return this.target.placeholder\n } else {\n return this.findLabelText()\n }\n }\n}\n","import ElementData from './element_data'\n\nexport default class LabelElementData extends ElementData {\n details() {\n this._tagName = 'label'\n this._elementName = this.target.textContent\n\n const labelAssociatedElement = this.iframeDocument.querySelector(`[id=\"${this.target.getAttribute('for')}\"]`)\n if (labelAssociatedElement) {\n if (labelAssociatedElement.type == 'radio') {\n this._tagName = 'input-radio'\n } else if (labelAssociatedElement.type == 'checkbox') {\n this._tagName = 'input-checkbox'\n }\n }\n\n return this.result\n }\n}\n","import ElementData from './element_data'\n\nexport default class SelectElementData extends ElementData {\n details() {\n this._tagName = 'select'\n\n const labelText = this.findLabelText()\n if (labelText) {\n this._elementName = labelText\n } else if (this.hasAttributeWithValue('name')) {\n this._elementName = this.target.getAttribute('name');\n }\n\n return this.result\n }\n}\n","import ElementData from './element_data'\n\nexport default class TdElementData extends ElementData {\n details() {\n this._tagName = 'td'\n const table = this.target.closest(\"table\");\n\n if (table && table.hasAttribute(\"summary\")) {\n this._elementName = table.getAttribute(\"summary\");\n }\n\n return this.result\n }\n}\n","import Edit from \"./Edit\"\n\nexport default class CanvasEdits {\n #collection = []\n\n constructor(collection) {\n this.#collection = collection\n }\n\n draw(ctx) {\n this.#collection.forEach(edit => edit.draw(ctx))\n }\n\n start(x, y, fillStyle) {\n this.#collection.push( new Edit(x, y, fillStyle) )\n }\n\n trySelect(x, y) {\n let hit = false\n this.#collection.forEach(edit => {\n if (edit.toggleSelection(edit.hitTest(x, y))) {\n hit = true\n }\n })\n return hit\n }\n\n deselect() {\n this.#collection.forEach(edit => edit.toggleSelection(false))\n }\n\n toggleSelection() {\n this.#collection.forEach(edit => edit.toggleSelection())\n }\n\n deleteSelected() {\n this.selected.forEach(edit => {\n this.#collection.splice(this.#collection.indexOf(edit), 1)\n })\n }\n\n get current() {\n return this.#collection.at(-1)\n }\n\n get selected() {\n return this.#collection.filter(edit => edit.isSelected)\n }\n}","export default class CanvasImage {\n #imageElement\n\n constructor(el) {\n this.#imageElement = el\n }\n\n draw(ctx) {\n ctx.drawImage(this.#imageElement, 0, 0)\n }\n\n get width() {\n return this.#imageElement.width\n }\n\n get height() {\n return this.#imageElement.height\n }\n}","export default class Edit {\n x = 0\n y = 0\n width = 0\n height = 0\n isSelected = false\n textContent = ''\n lineWidth = 2\n fillStyle = 'white'\n textStyle = 'black'\n strokeStyle = 'red'\n textBaseline = 'top'\n\n constructor(x, y, fillStyle) {\n this.x = x\n this.y = y\n this.fillStyle = fillStyle\n }\n\n resize(x, y) {\n this.width = x - this.x\n this.height = y - this.y\n }\n\n toggleSelection(selected = !this.isSelected) {\n this.isSelected = selected\n return selected\n }\n\n hitTest(x, y) {\n const xDistance = Math.abs(x - this.centerX)\n const yDistance = Math.abs(y - this.centerY)\n\n return (xDistance < this.width / 2) && (yDistance < this.height / 2)\n }\n\n draw(ctx) {\n ctx.save()\n ctx.fillStyle = this.fillStyle\n ctx.fillRect(...this.bounds)\n\n if (this.isSelected) {\n ctx.strokeStyle = this.strokeStyle\n ctx.lineWidth = this.lineWidth\n ctx.strokeRect(...this.bounds)\n }\n\n ctx.restore()\n this.drawText(ctx)\n }\n\n drawText(ctx) {\n if (this.height < 12) return\n\n ctx.save()\n ctx.font = this.font\n ctx.fillStyle = this.textStyle\n ctx.textBaseline = this.textBaseline\n ctx.fillText(this.textContent, this.textSpacing, this.textSpacing)\n ctx.restore()\n }\n\n get bounds() {\n return [\n this.x,\n this.y,\n this.width,\n this.height\n ]\n }\n\n get centerX() {\n return this.x + (this.width / 2)\n }\n\n get centerY() {\n return this.y + (this.height / 2)\n }\n\n get font() {\n return `bold ${this.height - this.textSpacing}px arial`\n }\n\n get textSpacing() {\n return Math.floor(this.height / 4)\n }\n}","class Attachment {\n constructor(file, directory) {\n this.file = file;\n this.directory = directory;\n this.state = 'pending';\n this.id = null;\n this.href = null;\n this.name = null;\n this.percent = 0;\n }\n static traverse(transfer, directory) {\n return transferredFiles(transfer, directory);\n }\n static from(files) {\n const result = [];\n for (const file of files) {\n if (file instanceof File) {\n result.push(new Attachment(file));\n }\n else if (file instanceof Attachment) {\n result.push(file);\n }\n else {\n throw new Error('Unexpected type');\n }\n }\n return result;\n }\n get fullPath() {\n return this.directory ? `${this.directory}/${this.file.name}` : this.file.name;\n }\n isImage() {\n return ['image/gif', 'image/png', 'image/jpg', 'image/jpeg', 'image/svg+xml'].indexOf(this.file.type) > -1;\n }\n isVideo() {\n return ['video/mp4', 'video/quicktime'].indexOf(this.file.type) > -1;\n }\n saving(percent) {\n if (this.state !== 'pending' && this.state !== 'saving') {\n throw new Error(`Unexpected transition from ${this.state} to saving`);\n }\n this.state = 'saving';\n this.percent = percent;\n }\n saved(attributes) {\n var _a, _b, _c;\n if (this.state !== 'pending' && this.state !== 'saving') {\n throw new Error(`Unexpected transition from ${this.state} to saved`);\n }\n this.state = 'saved';\n this.id = (_a = attributes === null || attributes === void 0 ? void 0 : attributes.id) !== null && _a !== void 0 ? _a : null;\n this.href = (_b = attributes === null || attributes === void 0 ? void 0 : attributes.href) !== null && _b !== void 0 ? _b : null;\n this.name = (_c = attributes === null || attributes === void 0 ? void 0 : attributes.name) !== null && _c !== void 0 ? _c : null;\n }\n isPending() {\n return this.state === 'pending';\n }\n isSaving() {\n return this.state === 'saving';\n }\n isSaved() {\n return this.state === 'saved';\n }\n}\nfunction transferredFiles(transfer, directory) {\n if (directory && isDirectory(transfer)) {\n return traverse('', roots(transfer));\n }\n return Promise.resolve(visible(Array.from(transfer.files || [])).map(f => new Attachment(f)));\n}\nfunction hidden(file) {\n return file.name.startsWith('.');\n}\nfunction visible(files) {\n return Array.from(files).filter(file => !hidden(file));\n}\nfunction getFile(entry) {\n return new Promise(function (resolve, reject) {\n entry.file(resolve, reject);\n });\n}\nfunction getEntries(entry) {\n return new Promise(function (resolve, reject) {\n const result = [];\n const reader = entry.createReader();\n const read = () => {\n reader.readEntries(entries => {\n if (entries.length > 0) {\n result.push(...entries);\n read();\n }\n else {\n resolve(result);\n }\n }, reject);\n };\n read();\n });\n}\nasync function traverse(path, entries) {\n const results = [];\n for (const entry of visible(entries)) {\n if (entry.isDirectory) {\n results.push(...(await traverse(entry.fullPath, await getEntries(entry))));\n }\n else {\n const file = await getFile(entry);\n results.push(new Attachment(file, path));\n }\n }\n return results;\n}\nfunction isDirectory(transfer) {\n return (transfer.items &&\n Array.from(transfer.items).some((item) => {\n const entry = item.webkitGetAsEntry && item.webkitGetAsEntry();\n return entry && entry.isDirectory;\n }));\n}\nfunction roots(transfer) {\n return Array.from(transfer.items)\n .map((item) => item.webkitGetAsEntry())\n .filter(entry => entry != null);\n}\n\nclass FileAttachmentElement extends HTMLElement {\n connectedCallback() {\n this.addEventListener('dragenter', onDragenter);\n this.addEventListener('dragover', onDragenter);\n this.addEventListener('dragleave', onDragleave);\n this.addEventListener('drop', onDrop);\n this.addEventListener('paste', onPaste);\n this.addEventListener('change', onChange);\n }\n disconnectedCallback() {\n this.removeEventListener('dragenter', onDragenter);\n this.removeEventListener('dragover', onDragenter);\n this.removeEventListener('dragleave', onDragleave);\n this.removeEventListener('drop', onDrop);\n this.removeEventListener('paste', onPaste);\n this.removeEventListener('change', onChange);\n }\n get directory() {\n return this.hasAttribute('directory');\n }\n set directory(value) {\n if (value) {\n this.setAttribute('directory', '');\n }\n else {\n this.removeAttribute('directory');\n }\n }\n async attach(transferred) {\n const attachments = transferred instanceof DataTransfer\n ? await Attachment.traverse(transferred, this.directory)\n : Attachment.from(transferred);\n const accepted = this.dispatchEvent(new CustomEvent('file-attachment-accept', {\n bubbles: true,\n cancelable: true,\n detail: { attachments }\n }));\n if (accepted && attachments.length) {\n this.dispatchEvent(new CustomEvent('file-attachment-accepted', {\n bubbles: true,\n detail: { attachments }\n }));\n }\n }\n}\nfunction hasFile(transfer) {\n return Array.from(transfer.types).indexOf('Files') >= 0;\n}\nlet dragging = null;\nfunction onDragenter(event) {\n const target = event.currentTarget;\n if (dragging) {\n clearTimeout(dragging);\n }\n dragging = window.setTimeout(() => target.removeAttribute('hover'), 200);\n const transfer = event.dataTransfer;\n if (!transfer || !hasFile(transfer))\n return;\n transfer.dropEffect = 'copy';\n target.setAttribute('hover', '');\n event.preventDefault();\n}\nfunction onDragleave(event) {\n if (event.dataTransfer) {\n event.dataTransfer.dropEffect = 'none';\n }\n const target = event.currentTarget;\n target.removeAttribute('hover');\n event.stopPropagation();\n event.preventDefault();\n}\nfunction onDrop(event) {\n const container = event.currentTarget;\n if (!(container instanceof FileAttachmentElement))\n return;\n container.removeAttribute('hover');\n const transfer = event.dataTransfer;\n if (!transfer || !hasFile(transfer))\n return;\n container.attach(transfer);\n event.stopPropagation();\n event.preventDefault();\n}\nconst images = /^image\\/(gif|png|jpeg)$/;\nfunction pastedFile(items) {\n for (const item of items) {\n if (item.kind === 'file' && images.test(item.type)) {\n return item.getAsFile();\n }\n }\n return null;\n}\nfunction onPaste(event) {\n if (!event.clipboardData)\n return;\n if (!event.clipboardData.items)\n return;\n const container = event.currentTarget;\n if (!(container instanceof FileAttachmentElement))\n return;\n const file = pastedFile(event.clipboardData.items);\n if (!file)\n return;\n const files = [file];\n container.attach(files);\n event.preventDefault();\n}\nfunction onChange(event) {\n const container = event.currentTarget;\n if (!(container instanceof FileAttachmentElement))\n return;\n const input = event.target;\n if (!(input instanceof HTMLInputElement))\n return;\n const id = container.getAttribute('input');\n if (id && input.id !== id)\n return;\n const files = input.files;\n if (!files || files.length === 0)\n return;\n container.attach(files);\n input.value = '';\n}\nif (!window.customElements.get('file-attachment')) {\n window.FileAttachmentElement = FileAttachmentElement;\n window.customElements.define('file-attachment', FileAttachmentElement);\n}\n\nexport default FileAttachmentElement;\nexport { Attachment };\n","(function (global, factory) {\n\ttypeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :\n\ttypeof define === 'function' && define.amd ? define(factory) :\n\t(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Honeybadger = factory());\n})(this, (function () { 'use strict';\n\n\tvar commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};\n\n\tfunction getDefaultExportFromCjs (x) {\n\t\treturn x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;\n\t}\n\n\tfunction getAugmentedNamespace(n) {\n\t var f = n.default;\n\t\tif (typeof f == \"function\") {\n\t\t\tvar a = function () {\n\t\t\t\treturn f.apply(this, arguments);\n\t\t\t};\n\t\t\ta.prototype = f.prototype;\n\t } else a = {};\n\t Object.defineProperty(a, '__esModule', {value: true});\n\t\tObject.keys(n).forEach(function (k) {\n\t\t\tvar d = Object.getOwnPropertyDescriptor(n, k);\n\t\t\tObject.defineProperty(a, k, d.get ? d : {\n\t\t\t\tenumerable: true,\n\t\t\t\tget: function () {\n\t\t\t\t\treturn n[k];\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t\treturn a;\n\t}\n\n\tvar browser$1 = {};\n\n\tvar src = {};\n\n\tvar events = {};\n\n\tvar util$1 = {};\n\n\tvar UNKNOWN_FUNCTION = '