diff --git a/__tests__/controllers/message_controller_test.js b/__tests__/controllers/message_controller_test.js index bc760ab..dcd3335 100644 --- a/__tests__/controllers/message_controller_test.js +++ b/__tests__/controllers/message_controller_test.js @@ -254,20 +254,47 @@ describe('MessageController', () => { id: 'message-456', product: undefined, buttonId: undefined, - body: undefined, + body: '', cardElement: cardWithoutData } }) }) - it('handles null card element', () => { + it('falls back to button text when data text is missing', () => { + delete mockButton.dataset.text + mockButton.textContent = 'Buy this one' + + controller.quickReply({ currentTarget: mockButton }) + + expect(controller.dispatch).toHaveBeenCalledWith('quickReply', { + detail: { + id: 'message-456', + product: 'product-456', + buttonId: 'btn-789', + body: 'Buy this one', + cardElement: mockCard + } + }) + }) + + it('dispatches plain quick replies without a product card', () => { mockButton.closest = jest.fn().mockReturnValue(null) const mockEvent = { currentTarget: mockButton } - expect(() => controller.quickReply(mockEvent)).toThrow() + controller.quickReply(mockEvent) + + expect(controller.dispatch).toHaveBeenCalledWith('quickReply', { + detail: { + id: 'message-456', + product: undefined, + buttonId: 'btn-789', + body: 'Buy Now', + cardElement: mockButton + } + }) }) }) @@ -394,8 +421,8 @@ describe('MessageController', () => { describe('moveToLeft', () => { beforeEach(() => { - // Mock getScrollAmount - controller.getScrollAmount = jest.fn().mockReturnValue(296) + mockCarouselContainer.scrollLeft = 350 + controller.getPreviousPageScrollLeft = jest.fn().mockReturnValue(54) }) it('scrolls left by calculated amount when carousel container exists', () => { @@ -414,24 +441,23 @@ describe('MessageController', () => { Object.defineProperty(tempController, 'hasCarouselContainerTarget', { get: () => false }) - tempController.getScrollAmount = jest.fn().mockReturnValue(296) + tempController.getPreviousPageScrollLeft = jest.fn().mockReturnValue(54) tempController.moveToLeft() expect(mockCarouselContainer.scrollBy).not.toHaveBeenCalled() }) - it('calls getScrollAmount to calculate scroll distance', () => { + it('calls getPreviousPageScrollLeft to calculate scroll distance', () => { controller.moveToLeft() - expect(controller.getScrollAmount).toHaveBeenCalledTimes(1) + expect(controller.getPreviousPageScrollLeft).toHaveBeenCalledTimes(1) }) }) describe('moveToRight', () => { beforeEach(() => { - // Mock getScrollAmount - controller.getScrollAmount = jest.fn().mockReturnValue(296) + controller.getNextPageScrollLeft = jest.fn().mockReturnValue(296) }) it('scrolls right by calculated amount when carousel container exists', () => { @@ -450,17 +476,17 @@ describe('MessageController', () => { Object.defineProperty(tempController, 'hasCarouselContainerTarget', { get: () => false }) - tempController.getScrollAmount = jest.fn().mockReturnValue(296) + tempController.getNextPageScrollLeft = jest.fn().mockReturnValue(296) tempController.moveToRight() expect(mockCarouselContainer.scrollBy).not.toHaveBeenCalled() }) - it('calls getScrollAmount to calculate scroll distance', () => { + it('calls getNextPageScrollLeft to calculate scroll distance', () => { controller.moveToRight() - expect(controller.getScrollAmount).toHaveBeenCalledTimes(1) + expect(controller.getNextPageScrollLeft).toHaveBeenCalledTimes(1) }) }) @@ -522,6 +548,60 @@ describe('MessageController', () => { }) }) + describe('getPageScrollAmount', () => { + it('uses the visible carousel area minus the gap', () => { + const result = controller.getPageScrollAmount() + + expect(result).toBe(284) + }) + }) + + describe('page scroll alignment', () => { + beforeEach(() => { + Object.defineProperty(mockCarouselContainer, 'clientWidth', { + value: 600, + writable: true, + configurable: true + }) + Object.defineProperty(mockCarouselContainer, 'scrollWidth', { + value: 1244, + writable: true, + configurable: true + }) + controller.pageStartOffsetValue = 56 + + mockCarouselContainer.innerHTML = '' + + Array.from({ length: 4 }).forEach((_, index) => { + const card = document.createElement('article') + card.className = 'message__carousel_card' + Object.defineProperty(card, 'offsetWidth', { + value: 236, + writable: true, + configurable: true + }) + Object.defineProperty(card, 'offsetLeft', { + value: index * 252, + writable: true, + configurable: true + }) + mockCarouselContainer.appendChild(card) + }) + }) + + it('aligns the next page to the first clipped card with a left offset', () => { + mockCarouselContainer.scrollLeft = 0 + + expect(controller.getNextPageScrollLeft()).toBe(448) + }) + + it('aligns the previous page back to the previous offset page', () => { + mockCarouselContainer.scrollLeft = 448 + + expect(controller.getPreviousPageScrollLeft()).toBe(0) + }) + }) + describe('updateFades', () => { it('does nothing when carousel container target does not exist', () => { // Create a new controller instance to avoid property redefinition issues @@ -630,7 +710,7 @@ describe('MessageController', () => { describe('edge case handling', () => { it('handles rounding errors at end position', () => { - mockCarouselContainer.scrollLeft = 698 // 2 pixels before end, within tolerance + mockCarouselContainer.scrollLeft = 696 // 4 pixels before end, just outside the fade-hide threshold Object.defineProperty(mockCarouselContainer, 'scrollWidth', { value: 1000, writable: true, @@ -645,7 +725,7 @@ describe('MessageController', () => { controller.updateFades() - // maxScroll = 1000 - 300 = 700, scrollLeft (698) < maxScroll - 1 (699), so right fade should be visible + // maxScroll = 1000 - 300 = 700, scrollLeft (696) keeps enough fade opacity to remain visible expect(mockRightFade.classList.contains('hidden')).toBe(false) }) @@ -694,7 +774,7 @@ describe('MessageController', () => { describe('integration tests', () => { it('updates fades correctly after moving left', () => { mockCarouselContainer.scrollLeft = 350 - controller.getScrollAmount = jest.fn().mockReturnValue(296) + controller.getPreviousPageScrollLeft = jest.fn().mockReturnValue(54) const updateFadesSpy = jest.spyOn(controller, 'updateFades') @@ -708,7 +788,7 @@ describe('MessageController', () => { it('updates fades correctly after moving right', () => { mockCarouselContainer.scrollLeft = 50 - controller.getScrollAmount = jest.fn().mockReturnValue(296) + controller.getNextPageScrollLeft = jest.fn().mockReturnValue(346) const updateFadesSpy = jest.spyOn(controller, 'updateFades') diff --git a/__tests__/controllers/webchat_controller_test.js b/__tests__/controllers/webchat_controller_test.js index ebc20f4..09f0b0c 100644 --- a/__tests__/controllers/webchat_controller_test.js +++ b/__tests__/controllers/webchat_controller_test.js @@ -4,6 +4,7 @@ import WebchatController from '../../src/controllers/webchat_controller' import Hellotext from '../../src/hellotext' +import { Locale } from '../../src/core/configuration/locale' import { Webchat as WebchatConfiguration, modes } from '../../src/core/configuration/webchat' import { usePopover } from '../../src/controllers/mixins/usePopover' import { useOpeningSequence } from '../../src/controllers/webchat/useOpeningSequence' @@ -44,6 +45,7 @@ describe('WebchatController', () => { controller.idValue = 'test-webchat-id' controller.conversationIdValue = 'test-conversation-id' controller.messageIds = new Set() + WebchatController.messageTimestampFormatters = {} mockBroadcastChannel = { postMessage: jest.fn(), @@ -68,6 +70,53 @@ describe('WebchatController', () => { } }) + describe('localizeMessageTimestamps', () => { + it('formats rendered message timestamps with the configured locale and browser timezone', () => { + const formatter = { format: jest.fn(() => '10:18 PM') } + const dateTimeFormatSpy = jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => formatter) + const localeSpy = jest.spyOn(Locale, 'toString').mockReturnValue('en') + const timestamp = document.createElement('time') + + timestamp.setAttribute('datetime', '2026-06-01T01:18:36Z') + timestamp.setAttribute('data-message-timestamp', '') + timestamp.textContent = '08:18 PM' + mockMessagesContainer.appendChild(timestamp) + + controller.localizeMessageTimestamps() + + expect(timestamp.getAttribute('datetime')).toBe('2026-06-01T01:18:36.000Z') + expect(timestamp.textContent).toBe('10:18 PM') + expect(Intl.DateTimeFormat).toHaveBeenCalledWith('en', { + hour: 'numeric', + minute: '2-digit', + }) + + localeSpy.mockRestore() + dateTimeFormatSpy.mockRestore() + }) + + it('reuses timestamp formatters for the same locale', () => { + const formatter = { format: jest.fn(() => '10:18 PM') } + const dateTimeFormatSpy = jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => formatter) + const localeSpy = jest.spyOn(Locale, 'toString').mockReturnValue('en') + const datetimes = ['2026-06-01T01:18:36Z', '2026-06-01T01:19:36Z'] + + datetimes.forEach(datetime => { + const timestamp = document.createElement('time') + timestamp.setAttribute('datetime', datetime) + timestamp.setAttribute('data-message-timestamp', '') + mockMessagesContainer.appendChild(timestamp) + }) + + controller.localizeMessageTimestamps() + + expect(Intl.DateTimeFormat).toHaveBeenCalledTimes(1) + + localeSpy.mockRestore() + dateTimeFormatSpy.mockRestore() + }) + }) + describe('onOutboundMessageSent', () => { describe('when event type is "message:sent"', () => { it('parses the HTML element and appends it to messages container', () => { @@ -162,6 +211,29 @@ describe('WebchatController', () => { expect(existingMessage.className).toBe('message failed') }) + it('writes the failure reason into the message timestamp', () => { + const messageId = 'failed-message-with-reason' + const existingMessage = document.createElement('div') + const timestamp = document.createElement('time') + + existingMessage.id = messageId + timestamp.setAttribute('data-message-timestamp', '') + timestamp.textContent = 'Just now' + existingMessage.appendChild(timestamp) + mockMessagesContainer.appendChild(existingMessage) + + controller.onOutboundMessageSent({ + data: { + type: 'message:failed', + id: messageId, + reason: 'Message cannot be empty.', + }, + }) + + expect(existingMessage.classList.contains('failed')).toBe(true) + expect(timestamp.textContent).toBe('Message cannot be empty.') + }) + it('does nothing when message with id is not found', () => { const event = { data: { @@ -310,6 +382,9 @@ describe('WebchatController', () => { const attachmentContainer = document.createElement('div') attachmentContainer.setAttribute('data-attachment-container', '') mockMessageTemplate.appendChild(bodyElement) + const timestamp = document.createElement('time') + timestamp.setAttribute('data-message-timestamp', '') + mockMessageTemplate.appendChild(timestamp) mockMessageTemplate.appendChild(attachmentContainer) // Set up attachment image mock @@ -363,6 +438,29 @@ describe('WebchatController', () => { expect(addedElement.getAttribute('data-hellotext--webchat-target')).toBe('message') }) + it('localizes incoming message timestamps with the configured locale and browser timezone', () => { + const formatter = { format: jest.fn(() => '10:18 PM') } + const dateTimeFormatSpy = jest.spyOn(Intl, 'DateTimeFormat').mockImplementation(() => formatter) + const localeSpy = jest.spyOn(Locale, 'toString').mockReturnValue('en') + + controller.onMessageReceived({ + body: '

Hello world!

', + created_at: '2026-06-01T01:18:36Z', + id: 'msg-local-timezone', + }) + + const timestamp = mockMessagesContainer.children[0].querySelector('[data-message-timestamp]') + expect(timestamp.getAttribute('datetime')).toBe('2026-06-01T01:18:36.000Z') + expect(timestamp.textContent).toBe('10:18 PM') + expect(Intl.DateTimeFormat).toHaveBeenCalledWith('en', { + hour: 'numeric', + minute: '2-digit', + }) + + localeSpy.mockRestore() + dateTimeFormatSpy.mockRestore() + }) + it('silently drops a duplicate message that was already claimed in memory', () => { controller.openValue = false @@ -1131,6 +1229,163 @@ describe('WebchatController', () => { }) }) + describe('openValueChanged', () => { + let actualUsePopover + + beforeEach(() => { + actualUsePopover = jest.requireActual('../../src/controllers/mixins/usePopover').usePopover + controller.popoverTarget = document.createElement('div') + controller.popoverTarget.showPopover = jest.fn() + controller.popoverTarget.hidePopover = jest.fn() + controller.preparePopoverOpenAnimation = jest.fn() + controller.onPopoverOpened = jest.fn() + controller.onPopoverClosed = jest.fn() + controller.disabledValue = false + actualUsePopover(controller) + }) + + it('prepares the transient open animation only when the popover opens', () => { + controller.openValue = true + + controller.openValueChanged() + + expect(controller.preparePopoverOpenAnimation).toHaveBeenCalledTimes(1) + expect(controller.popoverTarget.showPopover).toHaveBeenCalledTimes(1) + expect(controller.popoverTarget.getAttribute('aria-expanded')).toBe('true') + expect(controller.onPopoverOpened).toHaveBeenCalledTimes(1) + }) + + it('does not prepare the open animation when the popover closes', () => { + controller.openValue = false + + controller.openValueChanged() + + expect(controller.preparePopoverOpenAnimation).not.toHaveBeenCalled() + expect(controller.popoverTarget.hidePopover).toHaveBeenCalledTimes(1) + expect(controller.popoverTarget.hasAttribute('aria-expanded')).toBe(false) + expect(controller.onPopoverClosed).toHaveBeenCalledTimes(1) + }) + }) + + describe('preparePopoverOpenAnimation', () => { + beforeEach(() => { + jest.useFakeTimers() + controller.popoverTarget = document.createElement('div') + controller.fadeOutClasses = ['fade-out'] + }) + + afterEach(() => { + jest.useRealTimers() + }) + + it('uses a temporary class for the open animation', () => { + controller.popoverTarget.classList.add('fade-out') + + controller.preparePopoverOpenAnimation() + + expect(controller.popoverTarget.classList.contains('fade-out')).toBe(false) + expect(controller.popoverTarget.classList.contains('hellotext--webchat-popover-opening')).toBe(true) + + jest.advanceTimersByTime(119) + expect(controller.popoverTarget.classList.contains('hellotext--webchat-popover-opening')).toBe(true) + + jest.advanceTimersByTime(1) + expect(controller.popoverTarget.classList.contains('hellotext--webchat-popover-opening')).toBe(false) + }) + }) + + describe('closePopover', () => { + beforeEach(() => { + controller.popoverTarget = document.createElement('div') + controller.fadeOutClasses = ['fade-out'] + controller.openValue = true + }) + + it('minimizes the popover immediately', () => { + controller.popoverTarget.classList.add('fade-out') + controller.closePopover() + + expect(controller.popoverTarget.classList.contains('fade-out')).toBe(false) + expect(controller.openValue).toBe(false) + }) + }) + + describe('closePopoverOnEscape', () => { + beforeEach(() => { + controller.closePopover = jest.fn() + controller.openValue = true + controller.triggerTarget = document.createElement('button') + document.body.appendChild(controller.triggerTarget) + }) + + it('closes the popover when Escape is pressed', () => { + const event = new KeyboardEvent('keydown', { key: 'Escape', cancelable: true }) + const stopPropagation = jest.spyOn(event, 'stopPropagation') + + controller.closePopoverOnEscape(event) + + expect(controller.closePopover).toHaveBeenCalled() + expect(event.defaultPrevented).toBe(true) + expect(stopPropagation).toHaveBeenCalled() + expect(document.activeElement).toBe(controller.triggerTarget) + }) + + it('ignores other keys', () => { + controller.closePopoverOnEscape(new KeyboardEvent('keydown', { key: 'Enter', cancelable: true })) + + expect(controller.closePopover).not.toHaveBeenCalled() + }) + + it('ignores Escape when the popover is already closed', () => { + controller.openValue = false + controller.closePopoverOnEscape(new KeyboardEvent('keydown', { key: 'Escape', cancelable: true })) + + expect(controller.closePopover).not.toHaveBeenCalled() + }) + }) + + describe('focusCompose', () => { + beforeEach(() => { + const input = document.createElement('textarea') + document.body.appendChild(input) + + controller.inputTarget = input + + Object.defineProperty(controller, 'hasInputTarget', { + get: () => true, + configurable: true, + }) + }) + + it('focuses the compose input from the compose surface', () => { + const surface = document.createElement('section') + const event = new Event('pointerdown', { cancelable: true }) + + Object.defineProperty(event, 'target', { value: surface }) + + controller.focusCompose(event) + + expect(document.activeElement).toBe(controller.inputTarget) + expect(event.defaultPrevented).toBe(true) + }) + + it('keeps focus inside the emoji picker instead of moving it to the compose input', () => { + const picker = document.createElement('em-emoji-picker') + const event = new Event('pointerdown', { cancelable: true }) + + picker.setAttribute('tabindex', '0') + document.body.appendChild(picker) + picker.focus() + Object.defineProperty(event, 'target', { value: picker }) + + controller.focusCompose(event) + + expect(document.activeElement).toBe(picker) + expect(document.activeElement).not.toBe(controller.inputTarget) + expect(event.defaultPrevented).toBe(false) + }) + }) + describe('onScroll', () => { let mockMessagesAPI let mockMessageTemplate @@ -1318,6 +1573,26 @@ describe('WebchatController', () => { }) }) + it('listens for Escape in the capture phase so focused compose controls cannot swallow it', () => { + const addEventListenerSpy = jest.spyOn(window, 'addEventListener') + + setHasTeaserTarget(false) + controller.connect() + + expect(addEventListenerSpy).toHaveBeenCalledWith('keydown', controller.closePopoverOnEscape, true) + }) + + it('removes the capture-phase Escape listener on disconnect', () => { + const removeEventListenerSpy = jest.spyOn(window, 'removeEventListener') + + setHasTeaserTarget(false) + controller.floatingUICleanup = jest.fn() + controller.connect() + controller.disconnect() + + expect(removeEventListenerSpy).toHaveBeenCalledWith('keydown', controller.closePopoverOnEscape, true) + }) + it('does not set up teaser positioning without a teaser target', () => { setHasTeaserTarget(false) @@ -1356,6 +1631,24 @@ describe('WebchatController', () => { expect(controller.teaserCycleTimeout).toBe(null) }) + it('scopes the session seen flag to the rendered teaser version', () => { + allowPreConversationTeaser() + mockTeaser.dataset.teaserVersion = 'new-version' + mockSessionStorage.getItem.mockImplementation(key => + key === `hellotext:webchat:${controller.idValue}:teaser-seen:old-version` ? 'true' : null, + ) + setHasTeaserTarget(true) + const messages = setTeaserMessages([2]) + + controller.connect() + + expect(mockSessionStorage.getItem).toHaveBeenCalledWith( + `hellotext:webchat:${controller.idValue}:teaser-seen:new-version`, + ) + expect(mockTeaser.classList.contains('invisible')).toBe(false) + expect(messages[0].classList.contains('hidden')).toBe(false) + }) + it('hides the teaser without teaser messages', () => { allowPreConversationTeaser() setHasTeaserTarget(true) @@ -2509,6 +2802,7 @@ describe('WebchatController', () => { expect(mockBroadcastChannel.postMessage).toHaveBeenLastCalledWith({ type: 'message:failed', id: addedElement.id, + reason: 'Message failed', }) expect(addedElement.classList.contains('failed')).toBe(true) expect(mockHellotext.eventEmitter.dispatch).not.toHaveBeenCalledWith( @@ -2829,6 +3123,7 @@ describe('WebchatController', () => { expect(mockBroadcastChannel.postMessage).toHaveBeenCalledWith({ type: 'message:failed', id: expect.any(String), + reason: 'Message failed', }) }) @@ -2909,6 +3204,28 @@ describe('WebchatController', () => { expect(attachmentContainer.children).toHaveLength(0) }) + it('sends plain quick replies without product data', async () => { + const plainMessageElement = document.createElement('article') + + await controller.sendQuickReplyMessage({ + detail: { + id: 'msg-123', + buttonId: 'btn-789', + body: 'Plain quick reply', + cardElement: plainMessageElement, + }, + }) + + const formData = mockMessagesAPI.create.mock.calls[0][0] + expect(formData.get('message[body]')).toBe('Plain quick reply') + expect(formData.get('message[replied_to]')).toBe('msg-123') + expect(formData.get('message[product]')).toBeNull() + expect(formData.get('message[button]')).toBe('btn-789') + + const addedElement = mockMessagesContainer.children[0] + expect(addedElement.querySelector('[data-body]').innerText).toBe('Plain quick reply') + }) + it('handles null attachment gracefully', async () => { // Mock querySelector to return null const originalQuerySelector = mockCardElement.querySelector @@ -2956,9 +3273,9 @@ describe('WebchatController', () => { await controller.sendQuickReplyMessage({ detail: eventDetail }) const formData = mockMessagesAPI.create.mock.calls[0][0] - expect(formData.get('message[replied_to]')).toBe('undefined') - expect(formData.get('message[product]')).toBe('undefined') - expect(formData.get('message[button]')).toBe('undefined') + expect(formData.get('message[replied_to]')).toBeNull() + expect(formData.get('message[product]')).toBeNull() + expect(formData.get('message[button]')).toBeNull() }) it('handles API response without id', async () => { diff --git a/__tests__/core/configuration_test.js b/__tests__/core/configuration_test.js index 76b09c6..c60acc3 100644 --- a/__tests__/core/configuration_test.js +++ b/__tests__/core/configuration_test.js @@ -27,6 +27,31 @@ describe('Configuration', () => { }) }) + describe('.actionCableUrl', () => { + const defaultApiRoot = Configuration.apiRoot + const defaultActionCableUrl = Configuration.actionCableUrl + + afterEach(() => { + Configuration.apiRoot = defaultApiRoot + Configuration.actionCableUrl = defaultActionCableUrl + }) + + it('is inferred from apiRoot when actionCableUrl is not provided', () => { + Configuration.assign({ apiRoot: 'http://api.example.test/v1' }) + + expect(Configuration.actionCableUrl).toEqual('ws://api.example.test/cable') + }) + + it('preserves an explicit actionCableUrl', () => { + Configuration.assign({ + apiRoot: 'http://api.example.test/v1', + actionCableUrl: 'ws://cable.example.test/cable', + }) + + expect(Configuration.actionCableUrl).toEqual('ws://cable.example.test/cable') + }) + }) + describe('.webchat', () => { it('can be modified', () => { Configuration.assign({ webchat: { id: '123' } }) diff --git a/__tests__/models/business_test.js b/__tests__/models/business_test.js index 5cc7867..17fed21 100644 --- a/__tests__/models/business_test.js +++ b/__tests__/models/business_test.js @@ -8,13 +8,24 @@ import API from '../../src/api' describe('Business', () => { let business + const markStylesheetLoaded = linkTag => { + Object.defineProperty(linkTag, 'sheet', { + value: {}, + configurable: true + }) + linkTag.dispatchEvent(new Event('load')) + } + beforeEach(() => { business = new Business('test-business-123') }) afterEach(() => { jest.clearAllMocks() - document.querySelectorAll('link[rel="stylesheet"]').forEach(link => link.remove()) + document.querySelectorAll('link[rel="stylesheet"]').forEach(link => { + link.dispatchEvent(new Event('error')) + link.remove() + }) }) describe('constructor', () => { @@ -85,6 +96,27 @@ describe('Business', () => { const linkTag = document.querySelector('link[rel="stylesheet"]') expect(linkTag).toBeTruthy() expect(linkTag.href).toBe('https://example.com/styles.css') + expect(linkTag.getAttribute('data-hellotext-stylesheet')).toBe('true') + }) + + it('resolves the stylesheet load promise when the stylesheet loads', async () => { + document.head.innerHTML = '' + + business.setData(mockData) + const linkTag = document.querySelector('link[rel="stylesheet"]') + markStylesheetLoaded(linkTag) + + await expect(business.stylesheetLoaded).resolves.toBe(true) + }) + + it('resolves the stylesheet load promise as false when the stylesheet fails', async () => { + document.head.innerHTML = '' + + business.setData(mockData) + const linkTag = document.querySelector('link[rel="stylesheet"]') + linkTag.dispatchEvent(new Event('error')) + + await expect(business.stylesheetLoaded).resolves.toBe(false) }) it('does not add stylesheet when document is undefined', () => { diff --git a/__tests__/models/webchat_test.js b/__tests__/models/webchat_test.js index 29615f7..f958a4b 100644 --- a/__tests__/models/webchat_test.js +++ b/__tests__/models/webchat_test.js @@ -7,6 +7,29 @@ import { Configuration } from '../../src/core' import { Webchat } from '../../src/models' describe('Webchat', () => { + const createStylesheet = ({ loaded = true } = {}) => { + const linkTag = document.createElement('link') + linkTag.rel = 'stylesheet' + linkTag.href = 'https://example.com/hellotext.css' + linkTag.setAttribute('data-hellotext-stylesheet', 'true') + + if (loaded) { + linkTag.dataset.hellotextStylesheetLoaded = 'true' + } + + document.head.appendChild(linkTag) + + return linkTag + } + + const markStylesheetLoaded = linkTag => { + Object.defineProperty(linkTag, 'sheet', { + value: {}, + configurable: true + }) + linkTag.dispatchEvent(new Event('load')) + } + beforeEach(() => { document.body.innerHTML = '
' @@ -20,6 +43,10 @@ describe('Webchat', () => { afterEach(() => { jest.restoreAllMocks() document.body.innerHTML = '' + document.querySelectorAll('link[rel="stylesheet"]').forEach(link => { + link.dispatchEvent(new Event('error')) + link.remove() + }) Configuration.webchat.container = 'body' Configuration.webchat.behaviour = null @@ -27,6 +54,8 @@ describe('Webchat', () => { }) it('serializes an explicit camelCase behaviour override onto the Stimulus value', async () => { + createStylesheet() + const article = document.createElement('article') API.webchats.get.mockResolvedValue(article) @@ -38,7 +67,8 @@ describe('Webchat', () => { } Configuration.webchat.behaviourOverride = true - await Webchat.load('webchat-id') + const webchat = await Webchat.load('webchat-id') + await webchat.rendered expect(API.webchats.get).toHaveBeenCalledWith('webchat-id') expect(document.querySelector('#webchat-container article')).toBe(article) @@ -51,6 +81,8 @@ describe('Webchat', () => { }) it('preserves the rendered behaviour value when no explicit JS override exists', async () => { + createStylesheet() + const article = document.createElement('article') const renderedBehaviour = JSON.stringify({ trigger: 'on_load', @@ -69,8 +101,41 @@ describe('Webchat', () => { } Configuration.webchat.behaviourOverride = false - await Webchat.load('webchat-id') + const webchat = await Webchat.load('webchat-id') + await webchat.rendered expect(article.getAttribute('data-hellotext--webchat-behaviour-value')).toBe(renderedBehaviour) }) + + it('waits for the stylesheet before appending the webchat HTML', async () => { + const linkTag = createStylesheet({ loaded: false }) + const article = document.createElement('article') + API.webchats.get.mockResolvedValue(article) + + const webchat = await Webchat.load('webchat-id') + expect(document.querySelector('#webchat-container article')).toBeNull() + + markStylesheetLoaded(linkTag) + await webchat.rendered + + expect(document.querySelector('#webchat-container article')).toBe(article) + expect(webchat.mounted).toBe(true) + }) + + it('does not append the webchat HTML when the stylesheet fails', async () => { + const warn = jest.spyOn(console, 'warn').mockImplementation(() => {}) + const linkTag = createStylesheet({ loaded: false }) + const article = document.createElement('article') + API.webchats.get.mockResolvedValue(article) + + const webchat = await Webchat.load('webchat-id') + linkTag.dispatchEvent(new Event('error')) + await webchat.rendered + + expect(document.querySelector('#webchat-container article')).toBeNull() + expect(webchat.mounted).toBe(false) + expect(warn).toHaveBeenCalledWith( + 'Hellotext webchat was not mounted because its stylesheet failed to load.' + ) + }) }) diff --git a/dist/hellotext.js b/dist/hellotext.js index d678d91..7506410 100644 --- a/dist/hellotext.js +++ b/dist/hellotext.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Hellotext=t():e.Hellotext=t()}("undefined"!=typeof self?self:this,(()=>(()=>{"use strict";var e,t,n,r,i={599:(e,t,n)=>{n.d(t,{Mx:()=>J,Qr:()=>ie});class r{constructor(e,t,n){this.eventTarget=e,this.eventName=t,this.eventOptions=n,this.unorderedBindings=new Set}connect(){this.eventTarget.addEventListener(this.eventName,this,this.eventOptions)}disconnect(){this.eventTarget.removeEventListener(this.eventName,this,this.eventOptions)}bindingConnected(e){this.unorderedBindings.add(e)}bindingDisconnected(e){this.unorderedBindings.delete(e)}handleEvent(e){const t=function(e){if("immediatePropagationStopped"in e)return e;{const{stopImmediatePropagation:t}=e;return Object.assign(e,{immediatePropagationStopped:!1,stopImmediatePropagation(){this.immediatePropagationStopped=!0,t.call(this)}})}}(e);for(const e of this.bindings){if(t.immediatePropagationStopped)break;e.handleEvent(t)}}hasBindings(){return this.unorderedBindings.size>0}get bindings(){return Array.from(this.unorderedBindings).sort(((e,t)=>{const n=e.index,r=t.index;return nr?1:0}))}}class i{constructor(e){this.application=e,this.eventListenerMaps=new Map,this.started=!1}start(){this.started||(this.started=!0,this.eventListeners.forEach((e=>e.connect())))}stop(){this.started&&(this.started=!1,this.eventListeners.forEach((e=>e.disconnect())))}get eventListeners(){return Array.from(this.eventListenerMaps.values()).reduce(((e,t)=>e.concat(Array.from(t.values()))),[])}bindingConnected(e){this.fetchEventListenerForBinding(e).bindingConnected(e)}bindingDisconnected(e,t=!1){this.fetchEventListenerForBinding(e).bindingDisconnected(e),t&&this.clearEventListenersForBinding(e)}handleError(e,t,n={}){this.application.handleError(e,`Error ${t}`,n)}clearEventListenersForBinding(e){const t=this.fetchEventListenerForBinding(e);t.hasBindings()||(t.disconnect(),this.removeMappedEventListenerFor(e))}removeMappedEventListenerFor(e){const{eventTarget:t,eventName:n,eventOptions:r}=e,i=this.fetchEventListenerMapForEventTarget(t),o=this.cacheKey(n,r);i.delete(o),0==i.size&&this.eventListenerMaps.delete(t)}fetchEventListenerForBinding(e){const{eventTarget:t,eventName:n,eventOptions:r}=e;return this.fetchEventListener(t,n,r)}fetchEventListener(e,t,n){const r=this.fetchEventListenerMapForEventTarget(e),i=this.cacheKey(t,n);let o=r.get(i);return o||(o=this.createEventListener(e,t,n),r.set(i,o)),o}createEventListener(e,t,n){const i=new r(e,t,n);return this.started&&i.connect(),i}fetchEventListenerMapForEventTarget(e){let t=this.eventListenerMaps.get(e);return t||(t=new Map,this.eventListenerMaps.set(e,t)),t}cacheKey(e,t){const n=[e];return Object.keys(t).sort().forEach((e=>{n.push(`${t[e]?"":"!"}${e}`)})),n.join(":")}}const o={stop:({event:e,value:t})=>(t&&e.stopPropagation(),!0),prevent:({event:e,value:t})=>(t&&e.preventDefault(),!0),self:({event:e,value:t,element:n})=>!t||n===e.target},s=/^(?:(?:([^.]+?)\+)?(.+?)(?:\.(.+?))?(?:@(window|document))?->)?(.+?)(?:#([^:]+?))(?::(.+))?$/;function a(e){return e.replace(/(?:[_-])([a-z0-9])/g,((e,t)=>t.toUpperCase()))}function c(e){return a(e.replace(/--/g,"-").replace(/__/g,"_"))}function l(e){return e.charAt(0).toUpperCase()+e.slice(1)}function u(e){return e.replace(/([A-Z])/g,((e,t)=>`-${t.toLowerCase()}`))}function h(e){return null!=e}function d(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const f=["meta","ctrl","alt","shift"];class p{constructor(e,t,n,r){this.element=e,this.index=t,this.eventTarget=n.eventTarget||e,this.eventName=n.eventName||function(e){const t=e.tagName.toLowerCase();if(t in m)return m[t](e)}(e)||y("missing event name"),this.eventOptions=n.eventOptions||{},this.identifier=n.identifier||y("missing identifier"),this.methodName=n.methodName||y("missing method name"),this.keyFilter=n.keyFilter||"",this.schema=r}static forToken(e,t){return new this(e.element,e.index,function(e){const t=e.trim().match(s)||[];let n=t[2],r=t[3];return r&&!["keydown","keyup","keypress"].includes(n)&&(n+=`.${r}`,r=""),{eventTarget:(i=t[4],"window"==i?window:"document"==i?document:void 0),eventName:n,eventOptions:t[7]?(o=t[7],o.split(":").reduce(((e,t)=>Object.assign(e,{[t.replace(/^!/,"")]:!/^!/.test(t)})),{})):{},identifier:t[5],methodName:t[6],keyFilter:t[1]||r};var i,o}(e.content),t)}toString(){const e=this.keyFilter?`.${this.keyFilter}`:"",t=this.eventTargetName?`@${this.eventTargetName}`:"";return`${this.eventName}${e}${t}->${this.identifier}#${this.methodName}`}shouldIgnoreKeyboardEvent(e){if(!this.keyFilter)return!1;const t=this.keyFilter.split("+");if(this.keyFilterDissatisfied(e,t))return!0;const n=t.filter((e=>!f.includes(e)))[0];return!!n&&(d(this.keyMappings,n)||y(`contains unknown key filter: ${this.keyFilter}`),this.keyMappings[n].toLowerCase()!==e.key.toLowerCase())}shouldIgnoreMouseEvent(e){if(!this.keyFilter)return!1;const t=[this.keyFilter];return!!this.keyFilterDissatisfied(e,t)}get params(){const e={},t=new RegExp(`^data-${this.identifier}-(.+)-param$`,"i");for(const{name:n,value:r}of Array.from(this.element.attributes)){const i=n.match(t),o=i&&i[1];o&&(e[a(o)]=g(r))}return e}get eventTargetName(){return(e=this.eventTarget)==window?"window":e==document?"document":void 0;var e}get keyMappings(){return this.schema.keyMappings}keyFilterDissatisfied(e,t){const[n,r,i,o]=f.map((e=>t.includes(e)));return e.metaKey!==n||e.ctrlKey!==r||e.altKey!==i||e.shiftKey!==o}}const m={a:()=>"click",button:()=>"click",form:()=>"submit",details:()=>"toggle",input:e=>"submit"==e.getAttribute("type")?"click":"input",select:()=>"change",textarea:()=>"input"};function y(e){throw new Error(e)}function g(e){try{return JSON.parse(e)}catch(t){return e}}class v{constructor(e,t){this.context=e,this.action=t}get index(){return this.action.index}get eventTarget(){return this.action.eventTarget}get eventOptions(){return this.action.eventOptions}get identifier(){return this.context.identifier}handleEvent(e){const t=this.prepareActionEvent(e);this.willBeInvokedByEvent(e)&&this.applyEventModifiers(t)&&this.invokeWithEvent(t)}get eventName(){return this.action.eventName}get method(){const e=this.controller[this.methodName];if("function"==typeof e)return e;throw new Error(`Action "${this.action}" references undefined method "${this.methodName}"`)}applyEventModifiers(e){const{element:t}=this.action,{actionDescriptorFilters:n}=this.context.application,{controller:r}=this.context;let i=!0;for(const[o,s]of Object.entries(this.eventOptions))if(o in n){const a=n[o];i=i&&a({name:o,value:s,event:e,element:t,controller:r})}return i}prepareActionEvent(e){return Object.assign(e,{params:this.action.params})}invokeWithEvent(e){const{target:t,currentTarget:n}=e;try{this.method.call(this.controller,e),this.context.logDebugActivity(this.methodName,{event:e,target:t,currentTarget:n,action:this.methodName})}catch(t){const{identifier:n,controller:r,element:i,index:o}=this,s={identifier:n,controller:r,element:i,index:o,event:e};this.context.handleError(t,`invoking action "${this.action}"`,s)}}willBeInvokedByEvent(e){const t=e.target;return!(e instanceof KeyboardEvent&&this.action.shouldIgnoreKeyboardEvent(e))&&!(e instanceof MouseEvent&&this.action.shouldIgnoreMouseEvent(e))&&(this.element===t||(t instanceof Element&&this.element.contains(t)?this.scope.containsElement(t):this.scope.containsElement(this.action.element)))}get controller(){return this.context.controller}get methodName(){return this.action.methodName}get element(){return this.scope.element}get scope(){return this.context.scope}}class b{constructor(e,t){this.mutationObserverInit={attributes:!0,childList:!0,subtree:!0},this.element=e,this.started=!1,this.delegate=t,this.elements=new Set,this.mutationObserver=new MutationObserver((e=>this.processMutations(e)))}start(){this.started||(this.started=!0,this.mutationObserver.observe(this.element,this.mutationObserverInit),this.refresh())}pause(e){this.started&&(this.mutationObserver.disconnect(),this.started=!1),e(),this.started||(this.mutationObserver.observe(this.element,this.mutationObserverInit),this.started=!0)}stop(){this.started&&(this.mutationObserver.takeRecords(),this.mutationObserver.disconnect(),this.started=!1)}refresh(){if(this.started){const e=new Set(this.matchElementsInTree());for(const t of Array.from(this.elements))e.has(t)||this.removeElement(t);for(const t of Array.from(e))this.addElement(t)}}processMutations(e){if(this.started)for(const t of e)this.processMutation(t)}processMutation(e){"attributes"==e.type?this.processAttributeChange(e.target,e.attributeName):"childList"==e.type&&(this.processRemovedNodes(e.removedNodes),this.processAddedNodes(e.addedNodes))}processAttributeChange(e,t){this.elements.has(e)?this.delegate.elementAttributeChanged&&this.matchElement(e)?this.delegate.elementAttributeChanged(e,t):this.removeElement(e):this.matchElement(e)&&this.addElement(e)}processRemovedNodes(e){for(const t of Array.from(e)){const e=this.elementFromNode(t);e&&this.processTree(e,this.removeElement)}}processAddedNodes(e){for(const t of Array.from(e)){const e=this.elementFromNode(t);e&&this.elementIsActive(e)&&this.processTree(e,this.addElement)}}matchElement(e){return this.delegate.matchElement(e)}matchElementsInTree(e=this.element){return this.delegate.matchElementsInTree(e)}processTree(e,t){for(const n of this.matchElementsInTree(e))t.call(this,n)}elementFromNode(e){if(e.nodeType==Node.ELEMENT_NODE)return e}elementIsActive(e){return e.isConnected==this.element.isConnected&&this.element.contains(e)}addElement(e){this.elements.has(e)||this.elementIsActive(e)&&(this.elements.add(e),this.delegate.elementMatched&&this.delegate.elementMatched(e))}removeElement(e){this.elements.has(e)&&(this.elements.delete(e),this.delegate.elementUnmatched&&this.delegate.elementUnmatched(e))}}class w{constructor(e,t,n){this.attributeName=t,this.delegate=n,this.elementObserver=new b(e,this)}get element(){return this.elementObserver.element}get selector(){return`[${this.attributeName}]`}start(){this.elementObserver.start()}pause(e){this.elementObserver.pause(e)}stop(){this.elementObserver.stop()}refresh(){this.elementObserver.refresh()}get started(){return this.elementObserver.started}matchElement(e){return e.hasAttribute(this.attributeName)}matchElementsInTree(e){const t=this.matchElement(e)?[e]:[],n=Array.from(e.querySelectorAll(this.selector));return t.concat(n)}elementMatched(e){this.delegate.elementMatchedAttribute&&this.delegate.elementMatchedAttribute(e,this.attributeName)}elementUnmatched(e){this.delegate.elementUnmatchedAttribute&&this.delegate.elementUnmatchedAttribute(e,this.attributeName)}elementAttributeChanged(e,t){this.delegate.elementAttributeValueChanged&&this.attributeName==t&&this.delegate.elementAttributeValueChanged(e,t)}}function O(e,t){let n=e.get(t);return n||(n=new Set,e.set(t,n)),n}class T{constructor(){this.valuesByKey=new Map}get keys(){return Array.from(this.valuesByKey.keys())}get values(){return Array.from(this.valuesByKey.values()).reduce(((e,t)=>e.concat(Array.from(t))),[])}get size(){return Array.from(this.valuesByKey.values()).reduce(((e,t)=>e+t.size),0)}add(e,t){!function(e,t,n){O(e,t).add(n)}(this.valuesByKey,e,t)}delete(e,t){!function(e,t,n){O(e,t).delete(n),function(e,t){const n=e.get(t);null!=n&&0==n.size&&e.delete(t)}(e,t)}(this.valuesByKey,e,t)}has(e,t){const n=this.valuesByKey.get(e);return null!=n&&n.has(t)}hasKey(e){return this.valuesByKey.has(e)}hasValue(e){return Array.from(this.valuesByKey.values()).some((t=>t.has(e)))}getValuesForKey(e){const t=this.valuesByKey.get(e);return t?Array.from(t):[]}getKeysForValue(e){return Array.from(this.valuesByKey).filter((([t,n])=>n.has(e))).map((([e,t])=>e))}}class S{constructor(e,t,n,r){this._selector=t,this.details=r,this.elementObserver=new b(e,this),this.delegate=n,this.matchesByElement=new T}get started(){return this.elementObserver.started}get selector(){return this._selector}set selector(e){this._selector=e,this.refresh()}start(){this.elementObserver.start()}pause(e){this.elementObserver.pause(e)}stop(){this.elementObserver.stop()}refresh(){this.elementObserver.refresh()}get element(){return this.elementObserver.element}matchElement(e){const{selector:t}=this;if(t){const n=e.matches(t);return this.delegate.selectorMatchElement?n&&this.delegate.selectorMatchElement(e,this.details):n}return!1}matchElementsInTree(e){const{selector:t}=this;if(t){const n=this.matchElement(e)?[e]:[],r=Array.from(e.querySelectorAll(t)).filter((e=>this.matchElement(e)));return n.concat(r)}return[]}elementMatched(e){const{selector:t}=this;t&&this.selectorMatched(e,t)}elementUnmatched(e){const t=this.matchesByElement.getKeysForValue(e);for(const n of t)this.selectorUnmatched(e,n)}elementAttributeChanged(e,t){const{selector:n}=this;if(n){const t=this.matchElement(e),r=this.matchesByElement.has(n,e);t&&!r?this.selectorMatched(e,n):!t&&r&&this.selectorUnmatched(e,n)}}selectorMatched(e,t){this.delegate.selectorMatched(e,t,this.details),this.matchesByElement.add(t,e)}selectorUnmatched(e,t){this.delegate.selectorUnmatched(e,t,this.details),this.matchesByElement.delete(t,e)}}class k{constructor(e,t){this.element=e,this.delegate=t,this.started=!1,this.stringMap=new Map,this.mutationObserver=new MutationObserver((e=>this.processMutations(e)))}start(){this.started||(this.started=!0,this.mutationObserver.observe(this.element,{attributes:!0,attributeOldValue:!0}),this.refresh())}stop(){this.started&&(this.mutationObserver.takeRecords(),this.mutationObserver.disconnect(),this.started=!1)}refresh(){if(this.started)for(const e of this.knownAttributeNames)this.refreshAttribute(e,null)}processMutations(e){if(this.started)for(const t of e)this.processMutation(t)}processMutation(e){const t=e.attributeName;t&&this.refreshAttribute(t,e.oldValue)}refreshAttribute(e,t){const n=this.delegate.getStringMapKeyForAttribute(e);if(null!=n){this.stringMap.has(e)||this.stringMapKeyAdded(n,e);const r=this.element.getAttribute(e);if(this.stringMap.get(e)!=r&&this.stringMapValueChanged(r,n,t),null==r){const t=this.stringMap.get(e);this.stringMap.delete(e),t&&this.stringMapKeyRemoved(n,e,t)}else this.stringMap.set(e,r)}}stringMapKeyAdded(e,t){this.delegate.stringMapKeyAdded&&this.delegate.stringMapKeyAdded(e,t)}stringMapValueChanged(e,t,n){this.delegate.stringMapValueChanged&&this.delegate.stringMapValueChanged(e,t,n)}stringMapKeyRemoved(e,t,n){this.delegate.stringMapKeyRemoved&&this.delegate.stringMapKeyRemoved(e,t,n)}get knownAttributeNames(){return Array.from(new Set(this.currentAttributeNames.concat(this.recordedAttributeNames)))}get currentAttributeNames(){return Array.from(this.element.attributes).map((e=>e.name))}get recordedAttributeNames(){return Array.from(this.stringMap.keys())}}class E{constructor(e,t,n){this.attributeObserver=new w(e,t,this),this.delegate=n,this.tokensByElement=new T}get started(){return this.attributeObserver.started}start(){this.attributeObserver.start()}pause(e){this.attributeObserver.pause(e)}stop(){this.attributeObserver.stop()}refresh(){this.attributeObserver.refresh()}get element(){return this.attributeObserver.element}get attributeName(){return this.attributeObserver.attributeName}elementMatchedAttribute(e){this.tokensMatched(this.readTokensForElement(e))}elementAttributeValueChanged(e){const[t,n]=this.refreshTokensForElement(e);this.tokensUnmatched(t),this.tokensMatched(n)}elementUnmatchedAttribute(e){this.tokensUnmatched(this.tokensByElement.getValuesForKey(e))}tokensMatched(e){e.forEach((e=>this.tokenMatched(e)))}tokensUnmatched(e){e.forEach((e=>this.tokenUnmatched(e)))}tokenMatched(e){this.delegate.tokenMatched(e),this.tokensByElement.add(e.element,e)}tokenUnmatched(e){this.delegate.tokenUnmatched(e),this.tokensByElement.delete(e.element,e)}refreshTokensForElement(e){const t=this.tokensByElement.getValuesForKey(e),n=this.readTokensForElement(e),r=function(e,t){const n=Math.max(e.length,t.length);return Array.from({length:n},((n,r)=>[e[r],t[r]]))}(t,n).findIndex((([e,t])=>{return r=t,!((n=e)&&r&&n.index==r.index&&n.content==r.content);var n,r}));return-1==r?[[],[]]:[t.slice(r),n.slice(r)]}readTokensForElement(e){const t=this.attributeName;return function(e,t,n){return e.trim().split(/\s+/).filter((e=>e.length)).map(((e,r)=>({element:t,attributeName:n,content:e,index:r})))}(e.getAttribute(t)||"",e,t)}}class j{constructor(e,t,n){this.tokenListObserver=new E(e,t,this),this.delegate=n,this.parseResultsByToken=new WeakMap,this.valuesByTokenByElement=new WeakMap}get started(){return this.tokenListObserver.started}start(){this.tokenListObserver.start()}stop(){this.tokenListObserver.stop()}refresh(){this.tokenListObserver.refresh()}get element(){return this.tokenListObserver.element}get attributeName(){return this.tokenListObserver.attributeName}tokenMatched(e){const{element:t}=e,{value:n}=this.fetchParseResultForToken(e);n&&(this.fetchValuesByTokenForElement(t).set(e,n),this.delegate.elementMatchedValue(t,n))}tokenUnmatched(e){const{element:t}=e,{value:n}=this.fetchParseResultForToken(e);n&&(this.fetchValuesByTokenForElement(t).delete(e),this.delegate.elementUnmatchedValue(t,n))}fetchParseResultForToken(e){let t=this.parseResultsByToken.get(e);return t||(t=this.parseToken(e),this.parseResultsByToken.set(e,t)),t}fetchValuesByTokenForElement(e){let t=this.valuesByTokenByElement.get(e);return t||(t=new Map,this.valuesByTokenByElement.set(e,t)),t}parseToken(e){try{return{value:this.delegate.parseValueForToken(e)}}catch(e){return{error:e}}}}class P{constructor(e,t){this.context=e,this.delegate=t,this.bindingsByAction=new Map}start(){this.valueListObserver||(this.valueListObserver=new j(this.element,this.actionAttribute,this),this.valueListObserver.start())}stop(){this.valueListObserver&&(this.valueListObserver.stop(),delete this.valueListObserver,this.disconnectAllActions())}get element(){return this.context.element}get identifier(){return this.context.identifier}get actionAttribute(){return this.schema.actionAttribute}get schema(){return this.context.schema}get bindings(){return Array.from(this.bindingsByAction.values())}connectAction(e){const t=new v(this.context,e);this.bindingsByAction.set(e,t),this.delegate.bindingConnected(t)}disconnectAction(e){const t=this.bindingsByAction.get(e);t&&(this.bindingsByAction.delete(e),this.delegate.bindingDisconnected(t))}disconnectAllActions(){this.bindings.forEach((e=>this.delegate.bindingDisconnected(e,!0))),this.bindingsByAction.clear()}parseValueForToken(e){const t=p.forToken(e,this.schema);if(t.identifier==this.identifier)return t}elementMatchedValue(e,t){this.connectAction(t)}elementUnmatchedValue(e,t){this.disconnectAction(t)}}class C{constructor(e,t){this.context=e,this.receiver=t,this.stringMapObserver=new k(this.element,this),this.valueDescriptorMap=this.controller.valueDescriptorMap}start(){this.stringMapObserver.start(),this.invokeChangedCallbacksForDefaultValues()}stop(){this.stringMapObserver.stop()}get element(){return this.context.element}get controller(){return this.context.controller}getStringMapKeyForAttribute(e){if(e in this.valueDescriptorMap)return this.valueDescriptorMap[e].name}stringMapKeyAdded(e,t){const n=this.valueDescriptorMap[t];this.hasValue(e)||this.invokeChangedCallback(e,n.writer(this.receiver[e]),n.writer(n.defaultValue))}stringMapValueChanged(e,t,n){const r=this.valueDescriptorNameMap[t];null!==e&&(null===n&&(n=r.writer(r.defaultValue)),this.invokeChangedCallback(t,e,n))}stringMapKeyRemoved(e,t,n){const r=this.valueDescriptorNameMap[e];this.hasValue(e)?this.invokeChangedCallback(e,r.writer(this.receiver[e]),n):this.invokeChangedCallback(e,r.writer(r.defaultValue),n)}invokeChangedCallbacksForDefaultValues(){for(const{key:e,name:t,defaultValue:n,writer:r}of this.valueDescriptors)null==n||this.controller.data.has(e)||this.invokeChangedCallback(t,r(n),void 0)}invokeChangedCallback(e,t,n){const r=`${e}Changed`,i=this.receiver[r];if("function"==typeof i){const r=this.valueDescriptorNameMap[e];try{const e=r.reader(t);let o=n;n&&(o=r.reader(n)),i.call(this.receiver,e,o)}catch(e){throw e instanceof TypeError&&(e.message=`Stimulus Value "${this.context.identifier}.${r.name}" - ${e.message}`),e}}}get valueDescriptors(){const{valueDescriptorMap:e}=this;return Object.keys(e).map((t=>e[t]))}get valueDescriptorNameMap(){const e={};return Object.keys(this.valueDescriptorMap).forEach((t=>{const n=this.valueDescriptorMap[t];e[n.name]=n})),e}hasValue(e){const t=`has${l(this.valueDescriptorNameMap[e].name)}`;return this.receiver[t]}}class x{constructor(e,t){this.context=e,this.delegate=t,this.targetsByName=new T}start(){this.tokenListObserver||(this.tokenListObserver=new E(this.element,this.attributeName,this),this.tokenListObserver.start())}stop(){this.tokenListObserver&&(this.disconnectAllTargets(),this.tokenListObserver.stop(),delete this.tokenListObserver)}tokenMatched({element:e,content:t}){this.scope.containsElement(e)&&this.connectTarget(e,t)}tokenUnmatched({element:e,content:t}){this.disconnectTarget(e,t)}connectTarget(e,t){var n;this.targetsByName.has(t,e)||(this.targetsByName.add(t,e),null===(n=this.tokenListObserver)||void 0===n||n.pause((()=>this.delegate.targetConnected(e,t))))}disconnectTarget(e,t){var n;this.targetsByName.has(t,e)&&(this.targetsByName.delete(t,e),null===(n=this.tokenListObserver)||void 0===n||n.pause((()=>this.delegate.targetDisconnected(e,t))))}disconnectAllTargets(){for(const e of this.targetsByName.keys)for(const t of this.targetsByName.getValuesForKey(e))this.disconnectTarget(t,e)}get attributeName(){return`data-${this.context.identifier}-target`}get element(){return this.context.element}get scope(){return this.context.scope}}function M(e,t){const n=A(e);return Array.from(n.reduce(((e,n)=>(function(e,t){const n=e[t];return Array.isArray(n)?n:[]}(n,t).forEach((t=>e.add(t))),e)),new Set))}function A(e){const t=[];for(;e;)t.push(e),e=Object.getPrototypeOf(e);return t.reverse()}class _{constructor(e,t){this.started=!1,this.context=e,this.delegate=t,this.outletsByName=new T,this.outletElementsByName=new T,this.selectorObserverMap=new Map,this.attributeObserverMap=new Map}start(){this.started||(this.outletDefinitions.forEach((e=>{this.setupSelectorObserverForOutlet(e),this.setupAttributeObserverForOutlet(e)})),this.started=!0,this.dependentContexts.forEach((e=>e.refresh())))}refresh(){this.selectorObserverMap.forEach((e=>e.refresh())),this.attributeObserverMap.forEach((e=>e.refresh()))}stop(){this.started&&(this.started=!1,this.disconnectAllOutlets(),this.stopSelectorObservers(),this.stopAttributeObservers())}stopSelectorObservers(){this.selectorObserverMap.size>0&&(this.selectorObserverMap.forEach((e=>e.stop())),this.selectorObserverMap.clear())}stopAttributeObservers(){this.attributeObserverMap.size>0&&(this.attributeObserverMap.forEach((e=>e.stop())),this.attributeObserverMap.clear())}selectorMatched(e,t,{outletName:n}){const r=this.getOutlet(e,n);r&&this.connectOutlet(r,e,n)}selectorUnmatched(e,t,{outletName:n}){const r=this.getOutletFromMap(e,n);r&&this.disconnectOutlet(r,e,n)}selectorMatchElement(e,{outletName:t}){const n=this.selector(t),r=this.hasOutlet(e,t),i=e.matches(`[${this.schema.controllerAttribute}~=${t}]`);return!!n&&r&&i&&e.matches(n)}elementMatchedAttribute(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}elementAttributeValueChanged(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}elementUnmatchedAttribute(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}connectOutlet(e,t,n){var r;this.outletElementsByName.has(n,t)||(this.outletsByName.add(n,e),this.outletElementsByName.add(n,t),null===(r=this.selectorObserverMap.get(n))||void 0===r||r.pause((()=>this.delegate.outletConnected(e,t,n))))}disconnectOutlet(e,t,n){var r;this.outletElementsByName.has(n,t)&&(this.outletsByName.delete(n,e),this.outletElementsByName.delete(n,t),null===(r=this.selectorObserverMap.get(n))||void 0===r||r.pause((()=>this.delegate.outletDisconnected(e,t,n))))}disconnectAllOutlets(){for(const e of this.outletElementsByName.keys)for(const t of this.outletElementsByName.getValuesForKey(e))for(const n of this.outletsByName.getValuesForKey(e))this.disconnectOutlet(n,t,e)}updateSelectorObserverForOutlet(e){const t=this.selectorObserverMap.get(e);t&&(t.selector=this.selector(e))}setupSelectorObserverForOutlet(e){const t=this.selector(e),n=new S(document.body,t,this,{outletName:e});this.selectorObserverMap.set(e,n),n.start()}setupAttributeObserverForOutlet(e){const t=this.attributeNameForOutletName(e),n=new w(this.scope.element,t,this);this.attributeObserverMap.set(e,n),n.start()}selector(e){return this.scope.outlets.getSelectorForOutletName(e)}attributeNameForOutletName(e){return this.scope.schema.outletAttributeForScope(this.identifier,e)}getOutletNameFromOutletAttributeName(e){return this.outletDefinitions.find((t=>this.attributeNameForOutletName(t)===e))}get outletDependencies(){const e=new T;return this.router.modules.forEach((t=>{M(t.definition.controllerConstructor,"outlets").forEach((n=>e.add(n,t.identifier)))})),e}get outletDefinitions(){return this.outletDependencies.getKeysForValue(this.identifier)}get dependentControllerIdentifiers(){return this.outletDependencies.getValuesForKey(this.identifier)}get dependentContexts(){const e=this.dependentControllerIdentifiers;return this.router.contexts.filter((t=>e.includes(t.identifier)))}hasOutlet(e,t){return!!this.getOutlet(e,t)||!!this.getOutletFromMap(e,t)}getOutlet(e,t){return this.application.getControllerForElementAndIdentifier(e,t)}getOutletFromMap(e,t){return this.outletsByName.getValuesForKey(t).find((t=>t.element===e))}get scope(){return this.context.scope}get schema(){return this.context.schema}get identifier(){return this.context.identifier}get application(){return this.context.application}get router(){return this.application.router}}class I{constructor(e,t){this.logDebugActivity=(e,t={})=>{const{identifier:n,controller:r,element:i}=this;t=Object.assign({identifier:n,controller:r,element:i},t),this.application.logDebugActivity(this.identifier,e,t)},this.module=e,this.scope=t,this.controller=new e.controllerConstructor(this),this.bindingObserver=new P(this,this.dispatcher),this.valueObserver=new C(this,this.controller),this.targetObserver=new x(this,this),this.outletObserver=new _(this,this);try{this.controller.initialize(),this.logDebugActivity("initialize")}catch(e){this.handleError(e,"initializing controller")}}connect(){this.bindingObserver.start(),this.valueObserver.start(),this.targetObserver.start(),this.outletObserver.start();try{this.controller.connect(),this.logDebugActivity("connect")}catch(e){this.handleError(e,"connecting controller")}}refresh(){this.outletObserver.refresh()}disconnect(){try{this.controller.disconnect(),this.logDebugActivity("disconnect")}catch(e){this.handleError(e,"disconnecting controller")}this.outletObserver.stop(),this.targetObserver.stop(),this.valueObserver.stop(),this.bindingObserver.stop()}get application(){return this.module.application}get identifier(){return this.module.identifier}get schema(){return this.application.schema}get dispatcher(){return this.application.dispatcher}get element(){return this.scope.element}get parentElement(){return this.element.parentElement}handleError(e,t,n={}){const{identifier:r,controller:i,element:o}=this;n=Object.assign({identifier:r,controller:i,element:o},n),this.application.handleError(e,`Error ${t}`,n)}targetConnected(e,t){this.invokeControllerMethod(`${t}TargetConnected`,e)}targetDisconnected(e,t){this.invokeControllerMethod(`${t}TargetDisconnected`,e)}outletConnected(e,t,n){this.invokeControllerMethod(`${c(n)}OutletConnected`,e,t)}outletDisconnected(e,t,n){this.invokeControllerMethod(`${c(n)}OutletDisconnected`,e,t)}invokeControllerMethod(e,...t){const n=this.controller;"function"==typeof n[e]&&n[e](...t)}}const L="function"==typeof Object.getOwnPropertySymbols?e=>[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)]:Object.getOwnPropertyNames,F=(()=>{function e(e){function t(){return Reflect.construct(e,arguments,new.target)}return t.prototype=Object.create(e.prototype,{constructor:{value:t}}),Reflect.setPrototypeOf(t,e),t}try{return function(){const t=e((function(){this.a.call(this)}));t.prototype.a=function(){},new t}(),e}catch(e){return e=>class extends e{}}})();class N{constructor(e,t){this.application=e,this.definition=function(e){return{identifier:e.identifier,controllerConstructor:(t=e.controllerConstructor,function(e,t){const n=F(e),r=function(e,t){return L(t).reduce(((n,r)=>{const i=function(e,t,n){const r=Object.getOwnPropertyDescriptor(e,n);if(!r||!("value"in r)){const e=Object.getOwnPropertyDescriptor(t,n).value;return r&&(e.get=r.get||e.get,e.set=r.set||e.set),e}}(e,t,r);return i&&Object.assign(n,{[r]:i}),n}),{})}(e.prototype,t);return Object.defineProperties(n.prototype,r),n}(t,function(e){return M(e,"blessings").reduce(((t,n)=>{const r=n(e);for(const e in r){const n=t[e]||{};t[e]=Object.assign(n,r[e])}return t}),{})}(t)))};var t}(t),this.contextsByScope=new WeakMap,this.connectedContexts=new Set}get identifier(){return this.definition.identifier}get controllerConstructor(){return this.definition.controllerConstructor}get contexts(){return Array.from(this.connectedContexts)}connectContextForScope(e){const t=this.fetchContextForScope(e);this.connectedContexts.add(t),t.connect()}disconnectContextForScope(e){const t=this.contextsByScope.get(e);t&&(this.connectedContexts.delete(t),t.disconnect())}fetchContextForScope(e){let t=this.contextsByScope.get(e);return t||(t=new I(this,e),this.contextsByScope.set(e,t)),t}}class B{constructor(e){this.scope=e}has(e){return this.data.has(this.getDataKey(e))}get(e){return this.getAll(e)[0]}getAll(e){return(this.data.get(this.getDataKey(e))||"").match(/[^\s]+/g)||[]}getAttributeName(e){return this.data.getAttributeNameForKey(this.getDataKey(e))}getDataKey(e){return`${e}-class`}get data(){return this.scope.data}}class D{constructor(e){this.scope=e}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get(e){const t=this.getAttributeNameForKey(e);return this.element.getAttribute(t)}set(e,t){const n=this.getAttributeNameForKey(e);return this.element.setAttribute(n,t),this.get(e)}has(e){const t=this.getAttributeNameForKey(e);return this.element.hasAttribute(t)}delete(e){if(this.has(e)){const t=this.getAttributeNameForKey(e);return this.element.removeAttribute(t),!0}return!1}getAttributeNameForKey(e){return`data-${this.identifier}-${u(e)}`}}class R{constructor(e){this.warnedKeysByObject=new WeakMap,this.logger=e}warn(e,t,n){let r=this.warnedKeysByObject.get(e);r||(r=new Set,this.warnedKeysByObject.set(e,r)),r.has(t)||(r.add(t),this.logger.warn(n,e))}}function V(e,t){return`[${e}~="${t}"]`}class q{constructor(e){this.scope=e}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get schema(){return this.scope.schema}has(e){return null!=this.find(e)}find(...e){return e.reduce(((e,t)=>e||this.findTarget(t)||this.findLegacyTarget(t)),void 0)}findAll(...e){return e.reduce(((e,t)=>[...e,...this.findAllTargets(t),...this.findAllLegacyTargets(t)]),[])}findTarget(e){const t=this.getSelectorForTargetName(e);return this.scope.findElement(t)}findAllTargets(e){const t=this.getSelectorForTargetName(e);return this.scope.findAllElements(t)}getSelectorForTargetName(e){return V(this.schema.targetAttributeForScope(this.identifier),e)}findLegacyTarget(e){const t=this.getLegacySelectorForTargetName(e);return this.deprecate(this.scope.findElement(t),e)}findAllLegacyTargets(e){const t=this.getLegacySelectorForTargetName(e);return this.scope.findAllElements(t).map((t=>this.deprecate(t,e)))}getLegacySelectorForTargetName(e){const t=`${this.identifier}.${e}`;return V(this.schema.targetAttribute,t)}deprecate(e,t){if(e){const{identifier:n}=this,r=this.schema.targetAttribute,i=this.schema.targetAttributeForScope(n);this.guide.warn(e,`target:${t}`,`Please replace ${r}="${n}.${t}" with ${i}="${t}". The ${r} attribute is deprecated and will be removed in a future version of Stimulus.`)}return e}get guide(){return this.scope.guide}}class ${constructor(e,t){this.scope=e,this.controllerElement=t}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get schema(){return this.scope.schema}has(e){return null!=this.find(e)}find(...e){return e.reduce(((e,t)=>e||this.findOutlet(t)),void 0)}findAll(...e){return e.reduce(((e,t)=>[...e,...this.findAllOutlets(t)]),[])}getSelectorForOutletName(e){const t=this.schema.outletAttributeForScope(this.identifier,e);return this.controllerElement.getAttribute(t)}findOutlet(e){const t=this.getSelectorForOutletName(e);if(t)return this.findElement(t,e)}findAllOutlets(e){const t=this.getSelectorForOutletName(e);return t?this.findAllElements(t,e):[]}findElement(e,t){return this.scope.queryElements(e).filter((n=>this.matchesElement(n,e,t)))[0]}findAllElements(e,t){return this.scope.queryElements(e).filter((n=>this.matchesElement(n,e,t)))}matchesElement(e,t,n){const r=e.getAttribute(this.scope.schema.controllerAttribute)||"";return e.matches(t)&&r.split(" ").includes(n)}}class K{constructor(e,t,n,r){this.targets=new q(this),this.classes=new B(this),this.data=new D(this),this.containsElement=e=>e.closest(this.controllerSelector)===this.element,this.schema=e,this.element=t,this.identifier=n,this.guide=new R(r),this.outlets=new $(this.documentScope,t)}findElement(e){return this.element.matches(e)?this.element:this.queryElements(e).find(this.containsElement)}findAllElements(e){return[...this.element.matches(e)?[this.element]:[],...this.queryElements(e).filter(this.containsElement)]}queryElements(e){return Array.from(this.element.querySelectorAll(e))}get controllerSelector(){return V(this.schema.controllerAttribute,this.identifier)}get isDocumentScope(){return this.element===document.documentElement}get documentScope(){return this.isDocumentScope?this:new K(this.schema,document.documentElement,this.identifier,this.guide.logger)}}class H{constructor(e,t,n){this.element=e,this.schema=t,this.delegate=n,this.valueListObserver=new j(this.element,this.controllerAttribute,this),this.scopesByIdentifierByElement=new WeakMap,this.scopeReferenceCounts=new WeakMap}start(){this.valueListObserver.start()}stop(){this.valueListObserver.stop()}get controllerAttribute(){return this.schema.controllerAttribute}parseValueForToken(e){const{element:t,content:n}=e;return this.parseValueForElementAndIdentifier(t,n)}parseValueForElementAndIdentifier(e,t){const n=this.fetchScopesByIdentifierForElement(e);let r=n.get(t);return r||(r=this.delegate.createScopeForElementAndIdentifier(e,t),n.set(t,r)),r}elementMatchedValue(e,t){const n=(this.scopeReferenceCounts.get(t)||0)+1;this.scopeReferenceCounts.set(t,n),1==n&&this.delegate.scopeConnected(t)}elementUnmatchedValue(e,t){const n=this.scopeReferenceCounts.get(t);n&&(this.scopeReferenceCounts.set(t,n-1),1==n&&this.delegate.scopeDisconnected(t))}fetchScopesByIdentifierForElement(e){let t=this.scopesByIdentifierByElement.get(e);return t||(t=new Map,this.scopesByIdentifierByElement.set(e,t)),t}}class U{constructor(e){this.application=e,this.scopeObserver=new H(this.element,this.schema,this),this.scopesByIdentifier=new T,this.modulesByIdentifier=new Map}get element(){return this.application.element}get schema(){return this.application.schema}get logger(){return this.application.logger}get controllerAttribute(){return this.schema.controllerAttribute}get modules(){return Array.from(this.modulesByIdentifier.values())}get contexts(){return this.modules.reduce(((e,t)=>e.concat(t.contexts)),[])}start(){this.scopeObserver.start()}stop(){this.scopeObserver.stop()}loadDefinition(e){this.unloadIdentifier(e.identifier);const t=new N(this.application,e);this.connectModule(t);const n=e.controllerConstructor.afterLoad;n&&n.call(e.controllerConstructor,e.identifier,this.application)}unloadIdentifier(e){const t=this.modulesByIdentifier.get(e);t&&this.disconnectModule(t)}getContextForElementAndIdentifier(e,t){const n=this.modulesByIdentifier.get(t);if(n)return n.contexts.find((t=>t.element==e))}proposeToConnectScopeForElementAndIdentifier(e,t){const n=this.scopeObserver.parseValueForElementAndIdentifier(e,t);n?this.scopeObserver.elementMatchedValue(n.element,n):console.error(`Couldn't find or create scope for identifier: "${t}" and element:`,e)}handleError(e,t,n){this.application.handleError(e,t,n)}createScopeForElementAndIdentifier(e,t){return new K(this.schema,e,t,this.logger)}scopeConnected(e){this.scopesByIdentifier.add(e.identifier,e);const t=this.modulesByIdentifier.get(e.identifier);t&&t.connectContextForScope(e)}scopeDisconnected(e){this.scopesByIdentifier.delete(e.identifier,e);const t=this.modulesByIdentifier.get(e.identifier);t&&t.disconnectContextForScope(e)}connectModule(e){this.modulesByIdentifier.set(e.identifier,e),this.scopesByIdentifier.getValuesForKey(e.identifier).forEach((t=>e.connectContextForScope(t)))}disconnectModule(e){this.modulesByIdentifier.delete(e.identifier),this.scopesByIdentifier.getValuesForKey(e.identifier).forEach((t=>e.disconnectContextForScope(t)))}}const z={controllerAttribute:"data-controller",actionAttribute:"data-action",targetAttribute:"data-target",targetAttributeForScope:e=>`data-${e}-target`,outletAttributeForScope:(e,t)=>`data-${e}-${t}-outlet`,keyMappings:Object.assign(Object.assign({enter:"Enter",tab:"Tab",esc:"Escape",space:" ",up:"ArrowUp",down:"ArrowDown",left:"ArrowLeft",right:"ArrowRight",home:"Home",end:"End",page_up:"PageUp",page_down:"PageDown"},W("abcdefghijklmnopqrstuvwxyz".split("").map((e=>[e,e])))),W("0123456789".split("").map((e=>[e,e]))))};function W(e){return e.reduce(((e,[t,n])=>Object.assign(Object.assign({},e),{[t]:n})),{})}class J{constructor(e=document.documentElement,t=z){this.logger=console,this.debug=!1,this.logDebugActivity=(e,t,n={})=>{this.debug&&this.logFormattedMessage(e,t,n)},this.element=e,this.schema=t,this.dispatcher=new i(this),this.router=new U(this),this.actionDescriptorFilters=Object.assign({},o)}static start(e,t){const n=new this(e,t);return n.start(),n}async start(){await new Promise((e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",(()=>e())):e()})),this.logDebugActivity("application","starting"),this.dispatcher.start(),this.router.start(),this.logDebugActivity("application","start")}stop(){this.logDebugActivity("application","stopping"),this.dispatcher.stop(),this.router.stop(),this.logDebugActivity("application","stop")}register(e,t){this.load({identifier:e,controllerConstructor:t})}registerActionOption(e,t){this.actionDescriptorFilters[e]=t}load(e,...t){(Array.isArray(e)?e:[e,...t]).forEach((e=>{e.controllerConstructor.shouldLoad&&this.router.loadDefinition(e)}))}unload(e,...t){(Array.isArray(e)?e:[e,...t]).forEach((e=>this.router.unloadIdentifier(e)))}get controllers(){return this.router.contexts.map((e=>e.controller))}getControllerForElementAndIdentifier(e,t){const n=this.router.getContextForElementAndIdentifier(e,t);return n?n.controller:null}handleError(e,t,n){var r;this.logger.error("%s\n\n%o\n\n%o",t,e,n),null===(r=window.onerror)||void 0===r||r.call(window,t,"",0,0,e)}logFormattedMessage(e,t,n={}){n=Object.assign({application:this},n),this.logger.groupCollapsed(`${e} #${t}`),this.logger.log("details:",Object.assign({},n)),this.logger.groupEnd()}}function Z(e,t,n){return e.application.getControllerForElementAndIdentifier(t,n)}function G(e,t,n){let r=Z(e,t,n);return r||(e.application.router.proposeToConnectScopeForElementAndIdentifier(t,n),r=Z(e,t,n),r||void 0)}function Q([e,t],n){return function(e){const{token:t,typeDefinition:n}=e,r=`${u(t)}-value`,i=function(e){const{controller:t,token:n,typeDefinition:r}=e,i=function(e){const{controller:t,token:n,typeObject:r}=e,i=h(r.type),o=h(r.default),s=i&&o,a=i&&!o,c=!i&&o,l=X(r.type),u=Y(e.typeObject.default);if(a)return l;if(c)return u;if(l!==u)throw new Error(`The specified default value for the Stimulus Value "${t?`${t}.${n}`:n}" must match the defined type "${l}". The provided default value of "${r.default}" is of type "${u}".`);return s?l:void 0}({controller:t,token:n,typeObject:r}),o=Y(r),s=X(r),a=i||o||s;if(a)return a;throw new Error(`Unknown value type "${t?`${t}.${r}`:n}" for "${n}" value`)}(e);return{type:i,key:r,name:a(r),get defaultValue(){return function(e){const t=X(e);if(t)return ee[t];const n=d(e,"default"),r=d(e,"type"),i=e;if(n)return i.default;if(r){const{type:e}=i,t=X(e);if(t)return ee[t]}return e}(n)},get hasCustomDefaultValue(){return void 0!==Y(n)},reader:te[i],writer:ne[i]||ne.default}}({controller:n,token:e,typeDefinition:t})}function X(e){switch(e){case Array:return"array";case Boolean:return"boolean";case Number:return"number";case Object:return"object";case String:return"string"}}function Y(e){switch(typeof e){case"boolean":return"boolean";case"number":return"number";case"string":return"string"}return Array.isArray(e)?"array":"[object Object]"===Object.prototype.toString.call(e)?"object":void 0}const ee={get array(){return[]},boolean:!1,number:0,get object(){return{}},string:""},te={array(e){const t=JSON.parse(e);if(!Array.isArray(t))throw new TypeError(`expected value of type "array" but instead got value "${e}" of type "${Y(t)}"`);return t},boolean:e=>!("0"==e||"false"==String(e).toLowerCase()),number:e=>Number(e.replace(/_/g,"")),object(e){const t=JSON.parse(e);if(null===t||"object"!=typeof t||Array.isArray(t))throw new TypeError(`expected value of type "object" but instead got value "${e}" of type "${Y(t)}"`);return t},string:e=>e},ne={default:function(e){return`${e}`},array:re,object:re};function re(e){return JSON.stringify(e)}class ie{constructor(e){this.context=e}static get shouldLoad(){return!0}static afterLoad(e,t){}get application(){return this.context.application}get scope(){return this.context.scope}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get targets(){return this.scope.targets}get outlets(){return this.scope.outlets}get classes(){return this.scope.classes}get data(){return this.scope.data}initialize(){}connect(){}disconnect(){}dispatch(e,{target:t=this.element,detail:n={},prefix:r=this.identifier,bubbles:i=!0,cancelable:o=!0}={}){const s=new CustomEvent(r?`${r}:${e}`:e,{detail:n,bubbles:i,cancelable:o});return t.dispatchEvent(s),s}}ie.blessings=[function(e){return M(e,"classes").reduce(((e,t)=>{return Object.assign(e,{[`${n=t}Class`]:{get(){const{classes:e}=this;if(e.has(n))return e.get(n);{const t=e.getAttributeName(n);throw new Error(`Missing attribute "${t}"`)}}},[`${n}Classes`]:{get(){return this.classes.getAll(n)}},[`has${l(n)}Class`]:{get(){return this.classes.has(n)}}});var n}),{})},function(e){return M(e,"targets").reduce(((e,t)=>{return Object.assign(e,{[`${n=t}Target`]:{get(){const e=this.targets.find(n);if(e)return e;throw new Error(`Missing target element "${n}" for "${this.identifier}" controller`)}},[`${n}Targets`]:{get(){return this.targets.findAll(n)}},[`has${l(n)}Target`]:{get(){return this.targets.has(n)}}});var n}),{})},function(e){const t=function(e,t){return A(e).reduce(((e,n)=>(e.push(...function(e,t){const n=e[t];return n?Object.keys(n).map((e=>[e,n[e]])):[]}(n,t)),e)),[])}(e,"values"),n={valueDescriptorMap:{get(){return t.reduce(((e,t)=>{const n=Q(t,this.identifier),r=this.data.getAttributeNameForKey(n.key);return Object.assign(e,{[r]:n})}),{})}}};return t.reduce(((e,t)=>Object.assign(e,function(e,t){const n=Q(e,void 0),{key:r,name:i,reader:o,writer:s}=n;return{[i]:{get(){const e=this.data.get(r);return null!==e?o(e):n.defaultValue},set(e){void 0===e?this.data.delete(r):this.data.set(r,s(e))}},[`has${l(i)}`]:{get(){return this.data.has(r)||n.hasCustomDefaultValue}}}}(t))),n)},function(e){return M(e,"outlets").reduce(((e,t)=>Object.assign(e,function(e){const t=c(e);return{[`${t}Outlet`]:{get(){const t=this.outlets.find(e),n=this.outlets.getSelectorForOutletName(e);if(t){const n=G(this,t,e);if(n)return n;throw new Error(`The provided outlet element is missing an outlet controller "${e}" instance for host controller "${this.identifier}"`)}throw new Error(`Missing outlet element "${e}" for host controller "${this.identifier}". Stimulus couldn't find a matching outlet element using selector "${n}".`)}},[`${t}Outlets`]:{get(){const t=this.outlets.findAll(e);return t.length>0?t.map((t=>{const n=G(this,t,e);if(n)return n;console.warn(`The provided outlet element is missing an outlet controller "${e}" instance for host controller "${this.identifier}"`,t)})).filter((e=>e)):[]}},[`${t}OutletElement`]:{get(){const t=this.outlets.find(e),n=this.outlets.getSelectorForOutletName(e);if(t)return t;throw new Error(`Missing outlet element "${e}" for host controller "${this.identifier}". Stimulus couldn't find a matching outlet element using selector "${n}".`)}},[`${t}OutletElements`]:{get(){return this.outlets.findAll(e)}},[`has${l(t)}Outlet`]:{get(){return this.outlets.has(e)}}}}(t))),{})}],ie.targets=[],ie.outlets=[],ie.values={}},228:(e,t,n)=>{n.d(t,{default:()=>mi});var r=n(379),i=n.n(r),o=n(795),s=n.n(o),a=n(569),c=n.n(a),l=n(565),u=n.n(l),h=n(216),d=n.n(h),f=n(589),p=n.n(f),m=n(989),y={};y.styleTagTransform=p(),y.setAttributes=u(),y.insert=c().bind(null,"head"),y.domAPI=s(),y.insertStyleElement=d(),i()(m.Z,y),m.Z&&m.Z.locals&&m.Z.locals;var g=n(599);function v(e,t){for(var n=0;n{var[t,n]=e;this[t]=n})),this}},{key:"shouldShowSuccessMessage",get:function(){return this.successMessage}}],null&&v(t.prototype,null),n&&v(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function w(e,t){for(var n=0;n{var[t,n]=e;if(!["primaryColor","secondaryColor","typography"].includes(t))throw new Error("Invalid style property: ".concat(t));if("typography"!==t&&!this.isHexOrRgba(n))throw new Error("Invalid color value: ".concat(n," for ").concat(t,". Colors must be hex or rgb/a."))})),this._style=e}},{key:"appearance",get:function(){return this._appearance},set:function(e){if(!this.isPlainObject(e))throw new Error("Appearance must be an object");Object.entries(e).forEach((e=>{var[t,n]=e;if(!["header","launcher"].includes(t))throw new Error("Invalid appearance property: ".concat(t));if(!this.isPlainObject(n))throw new Error("Appearance ".concat(t," must be an object"));Object.entries(n).forEach((e=>{var[n,r]=e;if("header"===t&&"name"!==n)throw new Error("Invalid appearance header property: ".concat(n));if("launcher"===t&&"iconUrl"!==n)throw new Error("Invalid appearance launcher property: ".concat(n));if(null!=r&&"string"!=typeof r)throw new Error("Invalid appearance ".concat(t,".").concat(n," value: ").concat(r))}))})),this._appearance=e}},{key:"whatsapp",get:function(){return this._whatsapp},set:function(e){if(!this.isPlainObject(e))throw new Error("WhatsApp must be an object");Object.entries(e).forEach((e=>{var[t,n]=e;if(!["number","restrictToChannel"].includes(t))throw new Error("Invalid WhatsApp property: ".concat(t));if(null!=n){if("number"===t&&"string"!=typeof n)throw new Error("Invalid WhatsApp number value: ".concat(n));if("restrictToChannel"===t&&"boolean"!=typeof n)throw new Error("Invalid WhatsApp restrictToChannel value: ".concat(n))}})),this._whatsapp=e}},{key:"mode",get:function(){return this._mode},set:function(e){if(!Object.values(A).includes(e))throw new Error("Invalid mode value: ".concat(e));this._mode=e}},{key:"behaviour",get:function(){return this._behaviour},set:function(e){if(null!=e){if("object"!=typeof e||Array.isArray(e))throw new Error("Invalid behaviour value: ".concat(e));this._behaviour=e}else this._behaviour=e}},{key:"hasBehaviourOverride",get:function(){return this._hasBehaviourOverride}},{key:"behaviourOverride",set:function(e){this._hasBehaviourOverride=!!e}},{key:"strategy",get:function(){return this._strategy?this._strategy:"body"==this.container?M.FIXED:M.ABSOLUTE},set:function(e){if(e&&!Object.values(M).includes(e))throw new Error("Invalid strategy value: ".concat(e));this._strategy=e}},{key:"assign",value:function(e){return e&&Object.entries(e).forEach((e=>{var[t,n]=e;this[t]=n})),this}},{key:"isHexOrRgba",value:function(e){return/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(e)||/^rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3},?\s*(0|1|0?\.\d+)?\s*\)$/.test(e)}},{key:"isPlainObject",value:function(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)}}],null&&C(t.prototype,null),n&&C(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function I(e,t){for(var n=0;n{var[t,n]=e;"forms"===t?this.forms=b.assign(n):"webchat"===t?this.webchat=_.assign(n):this[t]=n})),this}},{key:"locale",get:function(){return P.toString()},set:function(e){P.identifier=e}},{key:"endpoint",value:function(e){return"".concat(this.apiRoot,"/").concat(e)}}],null&&I(t.prototype,null),n&&I(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function F(e){var t="function"==typeof Map?new Map:void 0;return F=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return N(e,arguments,R(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),D(r,e)},F(e)}function N(e,t,n){return N=B()?Reflect.construct.bind():function(e,t,n){var r=[null];r.push.apply(r,t);var i=new(Function.bind.apply(e,r));return n&&D(i,n.prototype),i},N.apply(null,arguments)}function B(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function D(e,t){return D=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},D(e,t)}function R(e){return R=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},R(e)}L.apiRoot="https://api.hellotext.com/v1",L.actionCableUrl="wss://www.hellotext.com/cable",L.autoGenerateSession=!0,L.session=null,L.forms=b,L.webchat=_;var V=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&D(e,t)}(o,e);var t,n,r,i=(n=o,r=B(),function(){var e,t=R(n);if(r){var i=R(this).constructor;e=Reflect.construct(t,arguments,i)}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function o(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),(t=i.call(this,"".concat(e," is not valid. Please provide a valid event name"))).name="InvalidEvent",t}return t=o,Object.defineProperty(t,"prototype",{writable:!1}),t}(F(Error));function q(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function $(e){for(var t=1;tt===e))}}],(n=[{key:"addSubscriber",value:function(t,n){if(e.invalid(t))throw new V(t);this.subscribers=$($({},this.subscribers),{},{[t]:this.subscribers[t]?[...this.subscribers[t],n]:[n]})}},{key:"removeSubscriber",value:function(t,n){if(e.invalid(t))throw new V(t);this.subscribers[t]&&(this.subscribers[t]=this.subscribers[t].filter((e=>e!==n)))}},{key:"dispatch",value:function(e,t){var n;null===(n=this.subscribers[e])||void 0===n||n.forEach((e=>{e(t)}))}},{key:"listeners",get:function(){return 0!==Object.keys(this.subscribers).length}}])&&H(t.prototype,n),r&&H(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();function W(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function J(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},t=yield fetch(this.endpoint,{method:"POST",headers:Zt.headers,body:JSON.stringify(ge({session:Zt.session},e))});return new ie(t.ok,t)},i=function(){var e=this,t=arguments;return new Promise((function(n,i){var o=r.apply(e,t);function s(e){be(o,n,i,s,a,"next",e)}function a(e){be(o,n,i,s,a,"throw",e)}s(void 0)}))},function(){return i.apply(this,arguments)})}],null&&we(t.prototype,null),n&&we(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Se(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function ke(e,t){for(var n=0;n{var[n,r]=e;t.searchParams.append("style[".concat(n,"]"),r)})),this.appendWebchatOverrides(t),t.searchParams.append("placement",L.webchat.placement);var n=yield fetch(t,{method:"GET",headers:Zt.headers}),r=yield n.json();return Zt.business.data||(Zt.business.setData(r.business),Zt.business.setLocale(r.locale)),(new DOMParser).parseFromString(r.html,"text/html").querySelector("article")},function(){var t=this,n=arguments;return new Promise((function(r,i){var o=e.apply(t,n);function s(e){Se(o,r,i,s,a,"next",e)}function a(e){Se(o,r,i,s,a,"throw",e)}s(void 0)}))});return function(e){return t.apply(this,arguments)}}()},{key:"appendWebchatOverrides",value:function(e){var t,n,{appearance:r,whatsapp:i}=L.webchat;this.appendIfSupplied(e,"webchat[appearance][header][name]",null===(t=r.header)||void 0===t?void 0:t.name),this.appendIfSupplied(e,"webchat[appearance][launcher][icon_url]",null===(n=r.launcher)||void 0===n?void 0:n.iconUrl),this.appendIfSupplied(e,"webchat[handoff][identifier]",i.number),this.appendIfSupplied(e,"webchat[handoff][restrict_to_channel]",i.restrictToChannel)}},{key:"appendIfSupplied",value:function(e,t,n){null!=n&&e.searchParams.append(t,String(n))}}],n&&ke(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();const je=Ee;function Pe(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function Ce(e,t){for(var n=0;n{var[t,n]=e;return n})));qe.set("hello_utm",JSON.stringify(r))}}var t,n;return t=e,(n=[{key:"current",get:function(){try{return JSON.parse(qe.get("hello_utm"))||{}}catch(e){return{}}}}])&&Ne(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function De(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:null;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.utm=new Be,this._url=t}var t,n,r;return t=e,r=[{key:"getRootDomain",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;try{if(!e){var t;if("undefined"==typeof window||null===(t=window.location)||void 0===t||!t.hostname)return null;e=window.location.hostname}var n=e.split(".");if(n.length<=1)return e;for(var r of["myshopify.com","vtexcommercestable.com.br","myvtex.com","wixsite.com"]){var i=r.split(".");if(n.slice(-i.length).join(".")===r&&n.length>i.length)return".".concat(n.slice(-(i.length+1)).join("."))}var o=n[n.length-1],s=n[n.length-2];return n.length>2&&2===o.length&&s.length<=3?".".concat(n.slice(-3).join(".")):".".concat(n.slice(-2).join("."))}catch(e){return null}}}],(n=[{key:"url",get:function(){return null!==this._url&&void 0!==this._url?this._url:window.location.href}},{key:"title",get:function(){return document.title}},{key:"path",get:function(){if(this._url)try{return new URL(this._url).pathname}catch(e){return"/"}return window.location.pathname}},{key:"utmParams",get:function(){return this.utm.current}},{key:"trackingData",get:function(){return{page:{url:this.url,title:this.title,path:this.path},utm_params:this.utmParams}}},{key:"domain",get:function(){try{var t=this.url;if(!t)return null;var n=new URL(t).hostname;return e.getRootDomain(n)}catch(e){return null}}}])&&De(t.prototype,n),r&&De(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Ve(e,t){for(var n=0;n\n ".concat(Zt.business.locale.white_label.powered_by,'\n\n \n \n Hellotext\n \n \n \n \n ')}});var ct=0;function lt(e){return"__private_"+ct+++"_"+e}var ut=lt("findOrCreateComponent"),ht=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),Object.defineProperty(this,ut,{value:dt}),this.data=t,this.element=n||document.querySelector('[data-hello-form="'.concat(this.id,'"]'))||document.createElement("form")}var t,n,r,i;return t=e,n=[{key:"mount",value:(r=function*(){var e,{ifCompleted:t=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(t&&this.hasBeenCompleted)return null===(e=this.element)||void 0===e||e.remove(),Zt.eventEmitter.dispatch("form:completed",function(e){for(var t=1;t{this.element.setAttribute(e.name,e.value)})),document.contains(this.element)||document.body.appendChild(this.element),Zt.business.features.white_label||this.element.prepend(tt.build())},i=function(){var e=this,t=arguments;return new Promise((function(n,i){var o=r.apply(e,t);function s(e){it(o,n,i,s,a,"next",e)}function a(e){it(o,n,i,s,a,"throw",e)}s(void 0)}))},function(){return i.apply(this,arguments)})},{key:"buildHeader",value:function(e){var t=at(this,ut)[ut]("[data-form-header]","header");t.innerHTML=e.content,this.element.querySelector("[data-form-header]")?this.element.querySelector("[data-form-header]").replaceWith(t):this.element.prepend(t)}},{key:"buildInputs",value:function(e){var t=at(this,ut)[ut]("[data-form-inputs]","main");e.map((e=>Ge.build(e))).forEach((e=>t.appendChild(e))),this.element.querySelector("[data-form-inputs]")?this.element.querySelector("[data-form-inputs]").replaceWith(t):this.element.querySelector("[data-form-header]").insertAdjacentHTML("afterend",t.outerHTML)}},{key:"buildButton",value:function(e){var t=at(this,ut)[ut]("[data-form-button]","button");t.innerText=e.text,t.setAttribute("data-action","click->hellotext--form#submit"),t.setAttribute("data-hellotext--form-target","button"),this.element.querySelector("[data-form-button]")?this.element.querySelector("[data-form-button]").replaceWith(t):this.element.querySelector("[data-form-inputs]").insertAdjacentHTML("afterend",t.outerHTML)}},{key:"buildFooter",value:function(e){var t=at(this,ut)[ut]("[data-form-footer]","footer");t.innerHTML=e.content,this.element.querySelector("[data-form-footer]")?this.element.querySelector("[data-form-footer]").replaceWith(t):this.element.appendChild(t)}},{key:"markAsCompleted",value:function(e){var t={state:"completed",id:this.id,data:e,completedAt:(new Date).getTime()};localStorage.setItem("hello-form-".concat(this.id),JSON.stringify(t)),Zt.eventEmitter.dispatch("form:completed",t)}},{key:"hasBeenCompleted",get:function(){return null!==localStorage.getItem("hello-form-".concat(this.id))}},{key:"id",get:function(){return this.data.id}},{key:"localeAuthKey",get:function(){var e=this.data.steps[0];return e.inputs.some((e=>"email"===e.kind))&&e.inputs.some((e=>"phone"===e.kind))?"phone_and_email":e.inputs.some((e=>"email"===e.kind))?"email":e.inputs.some((e=>"phone"===e.kind))?"phone":"none"}},{key:"elementAttributes",get:function(){return[{name:"data-controller",value:"hellotext--form"},{name:"data-hello-form",value:this.id},{name:"data-hellotext--form-data-value",value:JSON.stringify(this.data)}]}}],n&&ot(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function dt(e,t){var n=this.element.querySelector(e);if(n)return n.cloneNode(!0);var r=document.createElement(t);return r.setAttribute(e.replace("[","").replace("]",""),""),r}function ft(e){var t="function"==typeof Map?new Map:void 0;return ft=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return pt(e,arguments,gt(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),yt(r,e)},ft(e)}function pt(e,t,n){return pt=mt()?Reflect.construct.bind():function(e,t,n){var r=[null];r.push.apply(r,t);var i=new(Function.bind.apply(e,r));return n&&yt(i,n.prototype),i},pt.apply(null,arguments)}function mt(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function yt(e,t){return yt=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},yt(e,t)}function gt(e){return gt=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},gt(e)}var vt=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&yt(e,t)}(o,e);var t,n,r,i=(n=o,r=mt(),function(){var e,t=gt(n);if(r){var i=gt(this).constructor;e=Reflect.construct(t,arguments,i)}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function o(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),(e=i.call(this,"You need to initialize before tracking events. Call Hellotext.initialize and pass your public business id")).name="NotInitializedError",e}return t=o,Object.defineProperty(t,"prototype",{writable:!1}),t}(ft(Error));function bt(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function wt(e,t){for(var n=0;n0&&this.collect()}},{key:"formMutationObserver",value:function(e){e.find((e=>"childList"===e.type&&e.addedNodes.length>0))&&Array.from(document.querySelectorAll("[data-hello-form]")).length>0&&this.collect()}},{key:"collect",value:(r=function*(){if(Zt.notInitialized)throw new vt;if(!this.fetching){if("undefined"==typeof document||!("querySelectorAll"in document))return console.warn("Document is not defined, collection is not possible. Please make sure to initialize the library after the document is loaded.");var e=function(e,t){if(!Object.prototype.hasOwnProperty.call(e,t))throw new TypeError("attempted to use private field on non-instance");return e}(this,St)[St];if(0!==e.length){var t=e.map((e=>me.get(e).then((e=>e.json()))));this.fetching=!0,yield Promise.all(t).then((e=>e.forEach(this.add))).then((()=>Zt.eventEmitter.dispatch("forms:collected",this))).then((()=>this.fetching=!1)),L.forms.autoMount&&this.forms.forEach((e=>e.mount()))}}},i=function(){var e=this,t=arguments;return new Promise((function(n,i){var o=r.apply(e,t);function s(e){bt(o,n,i,s,a,"next",e)}function a(e){bt(o,n,i,s,a,"throw",e)}s(void 0)}))},function(){return i.apply(this,arguments)})},{key:"forEach",value:function(e){this.forms.forEach(e)}},{key:"map",value:function(e){return this.forms.map(e)}},{key:"add",value:function(e){this.includes(e.id)||(Zt.business.data||(Zt.business.setData(e.business),Zt.business.setLocale(P.toString())),Zt.business.enabledWhitelist||console.warn("No whitelist has been configured. It is advised to whitelist the domain to avoid bots from submitting forms."),this.forms.push(new ht(e)))}},{key:"getById",value:function(e){return this.forms.find((t=>t.id===e))}},{key:"getByIndex",value:function(e){return this.forms[e]}},{key:"includes",value:function(e){return this.forms.some((t=>t.id===e))}},{key:"excludes",value:function(e){return!this.includes(e)}},{key:"length",get:function(){return this.forms.length}}],n&&wt(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Et(){return Array.from(document.querySelectorAll("[data-hello-form]")).map((e=>e.dataset.helloForm)).filter(this.excludes)}function jt(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function Pt(e,t){for(var n=0;nBt(e))).filter((e=>void 0!==e));if(e instanceof Date)return e.toISOString();if("object"==typeof e){var n=Object.keys(e).sort(((e,t)=>e.localeCompare(t))).reduce(((t,n)=>{var r=Bt(e[n]);return void 0!==r&&(t[n]=r),t}),{});return Object.keys(n).length>0?n:void 0}return"number"==typeof e||"boolean"==typeof e?e:void 0}}function Dt(e,t){var n=Bt(function(e){for(var t=1;t2&&void 0!==arguments[2]?arguments[2]:{}))||{};return JSON.stringify(n)}function Rt(){return(Rt=It((function*(e){var t;if(null===(t=globalThis.crypto)||void 0===t||!t.subtle||"undefined"==typeof TextEncoder)return function(e){for(var t=5381,n=0;n>>0).toString(16))}(e);var n=yield globalThis.crypto.subtle.digest("SHA-256",(new TextEncoder).encode(e)),r=Array.from(new Uint8Array(n)).map((e=>e.toString(16).padStart(2,"0"))).join("");return"v1:".concat(r)}))).apply(this,arguments)}var Vt=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,n,r;return t=e,null,n=[{key:"matches",value:function(e,t){return!!e&&e===t}},{key:"generate",value:(r=It((function*(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return yield function(e){return Rt.apply(this,arguments)}(Dt(e,t,n))})),function(e,t){return r.apply(this,arguments)})}],n&&At(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function qt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function $t(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{};this.business=new Fe(e),L.assign(t),Je.initialize(),this.page=new Re,this.forms=new kt,this.query=new Q;var n=yield this.business.hydrate(),r=!1!==t.webchat&&this.mergeWebchatConfig(n&&n.webchat||{},t.webchat||{}),i=t.webchat&&!1!==t.webchat&&Object.prototype.hasOwnProperty.call(t.webchat,"behaviour");L.webchat.behaviourOverride=i,r&&r.id&&(L.webchat.assign(r),this.webchat=yield Ct.load(r.id)),"undefined"!=typeof MutationObserver&&this.forms.collectExistingFormsOnPage()})),function(e){return o.apply(this,arguments)})},{key:"mergeWebchatConfig",value:function(e,t){return this.deepMergePlainObjects(e,t)}},{key:"deepMergePlainObjects",value:function(e,t){var n=$t({},e);return Object.entries(t).forEach((e=>{var[t,r]=e;this.isPlainObject(r)&&this.isPlainObject(n[t])?n[t]=this.deepMergePlainObjects(n[t],r):n[t]=r})),n}},{key:"isPlainObject",value:function(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)}},{key:"track",value:(i=Ut((function*(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.notInitialized)throw new vt;var n=$t($t({},t&&t.headers||{}),this.headers),r=$t($t({},Mt.identificationData),t.user_parameters||{}),i=t&&t.url?new Re(t.url):this.page,o=$t($t({session:this.session,user_parameters:r,action:e},t),i.trackingData);return delete o.headers,yield Ae.events.create({headers:n,body:o})})),function(e){return i.apply(this,arguments)})},{key:"identify",value:(r=Ut((function*(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=yield Vt.generate(this.session,e,n);if(Vt.matches(Mt.fingerprint,r))return new ie(!0,{json:(t=Ut((function*(){return{already_identified:!0}})),function(){return t.apply(this,arguments)})});var i=yield Ae.identifications.create($t({user_id:e},n));return i.succeeded&&Mt.remember(e,n.source,r),i})),function(e){return r.apply(this,arguments)})},{key:"forget",value:function(){Mt.forget()}},{key:"on",value:function(e,t){this.eventEmitter.addSubscriber(e,t)}},{key:"removeEventListener",value:function(e,t){this.eventEmitter.removeSubscriber(e,t)}},{key:"session",get:function(){return Je.session}},{key:"isInitialized",get:function(){return void 0!==Je.session}},{key:"notInitialized",get:function(){return!this.business||void 0===this.business.id}},{key:"headers",get:function(){if(this.notInitialized)throw new vt;return{Authorization:"Bearer ".concat(this.business.id),Accept:"application/json","Content-Type":"application/json"}}}],n&&zt(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();Jt.eventEmitter=new z,Jt.forms=void 0,Jt.business=void 0,Jt.webchat=void 0;const Zt=Jt;function Gt(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function Qt(e,t){for(var n=0;n{var{type:t,parameter:n}=e,r=this.inputTargets.find((e=>e.name===n));r.setCustomValidity(Zt.business.locale.errors[t]),r.reportValidity(),r.addEventListener("input",(()=>{r.setCustomValidity(""),r.reportValidity()}))})),this.showErrorMessages();this.buttonTarget.style.display="none",this.element.querySelectorAll("input").forEach((e=>e.disabled=!0)),this.completed()},i=function(){var e=this,t=arguments;return new Promise((function(n,i){var o=r.apply(e,t);function s(e){Gt(o,n,i,s,a,"next",e)}function a(e){Gt(o,n,i,s,a,"throw",e)}s(void 0)}))},function(e){return i.apply(this,arguments)})},{key:"completed",value:function(){if(this.form.markAsCompleted(this.formData),!L.forms.shouldShowSuccessMessage)return this.element.remove();"string"==typeof L.forms.successMessage?this.element.innerHTML=L.forms.successMessage:this.element.innerHTML=Zt.business.locale.forms[this.form.localeAuthKey]}},{key:"showErrorMessages",value:function(){this.inputTargets.forEach((e=>{var t=e.closest("article").querySelector("[data-error-container]");e.validity.valid?t.innerText="":t.innerText=e.validationMessage}))}},{key:"clearErrorMessages",value:function(){this.inputTargets.forEach((e=>{e.setCustomValidity(""),e.closest("article").querySelector("[data-error-container]").innerText=""}))}},{key:"inputTargetConnected",value:function(e){e.getAttribute("data-default-value")&&(e.value=e.getAttribute("data-default-value"))}},{key:"requiredInputs",get:function(){return this.inputTargets.filter((e=>e.required))}},{key:"invalid",get:function(){return!this.element.checkValidity()}}],n&&Qt(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),c}(g.Qr);function nn(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function rn(e){for(var t=1;t0?this.leftFadeTarget.classList.remove("hidden"):this.leftFadeTarget.classList.add("hidden"),ee.concat(t,t+"-"+hn[0],t+"-"+hn[1])),[]),fn=Math.min,pn=Math.max,mn=Math.round,yn=Math.floor,gn=e=>({x:e,y:e}),vn={left:"right",right:"left",bottom:"top",top:"bottom"},bn={start:"end",end:"start"};function wn(e,t,n){return pn(e,fn(t,n))}function On(e,t){return"function"==typeof e?e(t):e}function Tn(e){return e.split("-")[0]}function Sn(e){return e.split("-")[1]}function kn(e){return"x"===e?"y":"x"}function En(e){return"y"===e?"height":"width"}const jn=new Set(["top","bottom"]);function Pn(e){return jn.has(Tn(e))?"y":"x"}function Cn(e){return kn(Pn(e))}function xn(e,t,n){void 0===n&&(n=!1);const r=Sn(e),i=Cn(e),o=En(i);let s="x"===i?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return t.reference[o]>t.floating[o]&&(s=Fn(s)),[s,Fn(s)]}function Mn(e){return e.replace(/start|end/g,(e=>bn[e]))}const An=["left","right"],_n=["right","left"],In=["top","bottom"],Ln=["bottom","top"];function Fn(e){return e.replace(/left|right|bottom|top/g,(e=>vn[e]))}function Nn(e){const{x:t,y:n,width:r,height:i}=e;return{width:r,height:i,top:n,left:t,right:t+r,bottom:n+i,x:t,y:n}}function Bn(e,t,n){let{reference:r,floating:i}=e;const o=Pn(t),s=Cn(t),a=En(s),c=Tn(t),l="y"===o,u=r.x+r.width/2-i.width/2,h=r.y+r.height/2-i.height/2,d=r[a]/2-i[a]/2;let f;switch(c){case"top":f={x:u,y:r.y-i.height};break;case"bottom":f={x:u,y:r.y+r.height};break;case"right":f={x:r.x+r.width,y:h};break;case"left":f={x:r.x-i.width,y:h};break;default:f={x:r.x,y:r.y}}switch(Sn(t)){case"start":f[s]-=d*(n&&l?-1:1);break;case"end":f[s]+=d*(n&&l?-1:1)}return f}async function Dn(e,t){var n;void 0===t&&(t={});const{x:r,y:i,platform:o,rects:s,elements:a,strategy:c}=e,{boundary:l="clippingAncestors",rootBoundary:u="viewport",elementContext:h="floating",altBoundary:d=!1,padding:f=0}=On(t,e),p=function(e){return"number"!=typeof e?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(e):{top:e,right:e,bottom:e,left:e}}(f),m=a[d?"floating"===h?"reference":"floating":h],y=Nn(await o.getClippingRect({element:null==(n=await(null==o.isElement?void 0:o.isElement(m)))||n?m:m.contextElement||await(null==o.getDocumentElement?void 0:o.getDocumentElement(a.floating)),boundary:l,rootBoundary:u,strategy:c})),g="floating"===h?{x:r,y:i,width:s.floating.width,height:s.floating.height}:s.reference,v=await(null==o.getOffsetParent?void 0:o.getOffsetParent(a.floating)),b=await(null==o.isElement?void 0:o.isElement(v))&&await(null==o.getScale?void 0:o.getScale(v))||{x:1,y:1},w=Nn(o.convertOffsetParentRelativeRectToViewportRelativeRect?await o.convertOffsetParentRelativeRectToViewportRelativeRect({elements:a,rect:g,offsetParent:v,strategy:c}):g);return{top:(y.top-w.top+p.top)/b.y,bottom:(w.bottom-y.bottom+p.bottom)/b.y,left:(y.left-w.left+p.left)/b.x,right:(w.right-y.right+p.right)/b.x}}const Rn=new Set(["left","top"]);function Vn(){return"undefined"!=typeof window}function qn(e){return Hn(e)?(e.nodeName||"").toLowerCase():"#document"}function $n(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function Kn(e){var t;return null==(t=(Hn(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function Hn(e){return!!Vn()&&(e instanceof Node||e instanceof $n(e).Node)}function Un(e){return!!Vn()&&(e instanceof Element||e instanceof $n(e).Element)}function zn(e){return!!Vn()&&(e instanceof HTMLElement||e instanceof $n(e).HTMLElement)}function Wn(e){return!(!Vn()||"undefined"==typeof ShadowRoot)&&(e instanceof ShadowRoot||e instanceof $n(e).ShadowRoot)}const Jn=new Set(["inline","contents"]);function Zn(e){const{overflow:t,overflowX:n,overflowY:r,display:i}=ar(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&!Jn.has(i)}const Gn=new Set(["table","td","th"]);function Qn(e){return Gn.has(qn(e))}const Xn=[":popover-open",":modal"];function Yn(e){return Xn.some((t=>{try{return e.matches(t)}catch(e){return!1}}))}const er=["transform","translate","scale","rotate","perspective"],tr=["transform","translate","scale","rotate","perspective","filter"],nr=["paint","layout","strict","content"];function rr(e){const t=ir(),n=Un(e)?ar(e):e;return er.some((e=>!!n[e]&&"none"!==n[e]))||!!n.containerType&&"normal"!==n.containerType||!t&&!!n.backdropFilter&&"none"!==n.backdropFilter||!t&&!!n.filter&&"none"!==n.filter||tr.some((e=>(n.willChange||"").includes(e)))||nr.some((e=>(n.contain||"").includes(e)))}function ir(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}const or=new Set(["html","body","#document"]);function sr(e){return or.has(qn(e))}function ar(e){return $n(e).getComputedStyle(e)}function cr(e){return Un(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function lr(e){if("html"===qn(e))return e;const t=e.assignedSlot||e.parentNode||Wn(e)&&e.host||Kn(e);return Wn(t)?t.host:t}function ur(e){const t=lr(e);return sr(t)?e.ownerDocument?e.ownerDocument.body:e.body:zn(t)&&Zn(t)?t:ur(t)}function hr(e,t,n){var r;void 0===t&&(t=[]),void 0===n&&(n=!0);const i=ur(e),o=i===(null==(r=e.ownerDocument)?void 0:r.body),s=$n(i);if(o){const e=dr(s);return t.concat(s,s.visualViewport||[],Zn(i)?i:[],e&&n?hr(e):[])}return t.concat(i,hr(i,[],n))}function dr(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function fr(e){const t=ar(e);let n=parseFloat(t.width)||0,r=parseFloat(t.height)||0;const i=zn(e),o=i?e.offsetWidth:n,s=i?e.offsetHeight:r,a=mn(n)!==o||mn(r)!==s;return a&&(n=o,r=s),{width:n,height:r,$:a}}function pr(e){return Un(e)?e:e.contextElement}function mr(e){const t=pr(e);if(!zn(t))return gn(1);const n=t.getBoundingClientRect(),{width:r,height:i,$:o}=fr(t);let s=(o?mn(n.width):n.width)/r,a=(o?mn(n.height):n.height)/i;return s&&Number.isFinite(s)||(s=1),a&&Number.isFinite(a)||(a=1),{x:s,y:a}}const yr=gn(0);function gr(e){const t=$n(e);return ir()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:yr}function vr(e,t,n,r){void 0===t&&(t=!1),void 0===n&&(n=!1);const i=e.getBoundingClientRect(),o=pr(e);let s=gn(1);t&&(r?Un(r)&&(s=mr(r)):s=mr(e));const a=function(e,t,n){return void 0===t&&(t=!1),!(!n||t&&n!==$n(e))&&t}(o,n,r)?gr(o):gn(0);let c=(i.left+a.x)/s.x,l=(i.top+a.y)/s.y,u=i.width/s.x,h=i.height/s.y;if(o){const e=$n(o),t=r&&Un(r)?$n(r):r;let n=e,i=dr(n);for(;i&&r&&t!==n;){const e=mr(i),t=i.getBoundingClientRect(),r=ar(i),o=t.left+(i.clientLeft+parseFloat(r.paddingLeft))*e.x,s=t.top+(i.clientTop+parseFloat(r.paddingTop))*e.y;c*=e.x,l*=e.y,u*=e.x,h*=e.y,c+=o,l+=s,n=$n(i),i=dr(n)}}return Nn({width:u,height:h,x:c,y:l})}function br(e,t){const n=cr(e).scrollLeft;return t?t.left+n:vr(Kn(e)).left+n}function wr(e,t,n){void 0===n&&(n=!1);const r=e.getBoundingClientRect();return{x:r.left+t.scrollLeft-(n?0:br(e,r)),y:r.top+t.scrollTop}}const Or=new Set(["absolute","fixed"]);function Tr(e,t,n){let r;if("viewport"===t)r=function(e,t){const n=$n(e),r=Kn(e),i=n.visualViewport;let o=r.clientWidth,s=r.clientHeight,a=0,c=0;if(i){o=i.width,s=i.height;const e=ir();(!e||e&&"fixed"===t)&&(a=i.offsetLeft,c=i.offsetTop)}return{width:o,height:s,x:a,y:c}}(e,n);else if("document"===t)r=function(e){const t=Kn(e),n=cr(e),r=e.ownerDocument.body,i=pn(t.scrollWidth,t.clientWidth,r.scrollWidth,r.clientWidth),o=pn(t.scrollHeight,t.clientHeight,r.scrollHeight,r.clientHeight);let s=-n.scrollLeft+br(e);const a=-n.scrollTop;return"rtl"===ar(r).direction&&(s+=pn(t.clientWidth,r.clientWidth)-i),{width:i,height:o,x:s,y:a}}(Kn(e));else if(Un(t))r=function(e,t){const n=vr(e,!0,"fixed"===t),r=n.top+e.clientTop,i=n.left+e.clientLeft,o=zn(e)?mr(e):gn(1);return{width:e.clientWidth*o.x,height:e.clientHeight*o.y,x:i*o.x,y:r*o.y}}(t,n);else{const n=gr(e);r={x:t.x-n.x,y:t.y-n.y,width:t.width,height:t.height}}return Nn(r)}function Sr(e,t){const n=lr(e);return!(n===t||!Un(n)||sr(n))&&("fixed"===ar(n).position||Sr(n,t))}function kr(e,t,n){const r=zn(t),i=Kn(t),o="fixed"===n,s=vr(e,!0,o,t);let a={scrollLeft:0,scrollTop:0};const c=gn(0);function l(){c.x=br(i)}if(r||!r&&!o)if(("body"!==qn(t)||Zn(i))&&(a=cr(t)),r){const e=vr(t,!0,o,t);c.x=e.x+t.clientLeft,c.y=e.y+t.clientTop}else i&&l();o&&!r&&i&&l();const u=!i||r||o?gn(0):wr(i,a);return{x:s.left+a.scrollLeft-c.x-u.x,y:s.top+a.scrollTop-c.y-u.y,width:s.width,height:s.height}}function Er(e){return"static"===ar(e).position}function jr(e,t){if(!zn(e)||"fixed"===ar(e).position)return null;if(t)return t(e);let n=e.offsetParent;return Kn(e)===n&&(n=n.ownerDocument.body),n}function Pr(e,t){const n=$n(e);if(Yn(e))return n;if(!zn(e)){let t=lr(e);for(;t&&!sr(t);){if(Un(t)&&!Er(t))return t;t=lr(t)}return n}let r=jr(e,t);for(;r&&Qn(r)&&Er(r);)r=jr(r,t);return r&&sr(r)&&Er(r)&&!rr(r)?n:r||function(e){let t=lr(e);for(;zn(t)&&!sr(t);){if(rr(t))return t;if(Yn(t))return null;t=lr(t)}return null}(e)||n}const Cr={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{elements:t,rect:n,offsetParent:r,strategy:i}=e;const o="fixed"===i,s=Kn(r),a=!!t&&Yn(t.floating);if(r===s||a&&o)return n;let c={scrollLeft:0,scrollTop:0},l=gn(1);const u=gn(0),h=zn(r);if((h||!h&&!o)&&(("body"!==qn(r)||Zn(s))&&(c=cr(r)),zn(r))){const e=vr(r);l=mr(r),u.x=e.x+r.clientLeft,u.y=e.y+r.clientTop}const d=!s||h||o?gn(0):wr(s,c,!0);return{width:n.width*l.x,height:n.height*l.y,x:n.x*l.x-c.scrollLeft*l.x+u.x+d.x,y:n.y*l.y-c.scrollTop*l.y+u.y+d.y}},getDocumentElement:Kn,getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:r,strategy:i}=e;const o=[..."clippingAncestors"===n?Yn(t)?[]:function(e,t){const n=t.get(e);if(n)return n;let r=hr(e,[],!1).filter((e=>Un(e)&&"body"!==qn(e))),i=null;const o="fixed"===ar(e).position;let s=o?lr(e):e;for(;Un(s)&&!sr(s);){const t=ar(s),n=rr(s);n||"fixed"!==t.position||(i=null),(o?!n&&!i:!n&&"static"===t.position&&i&&Or.has(i.position)||Zn(s)&&!n&&Sr(e,s))?r=r.filter((e=>e!==s)):i=t,s=lr(s)}return t.set(e,r),r}(t,this._c):[].concat(n),r],s=o[0],a=o.reduce(((e,n)=>{const r=Tr(t,n,i);return e.top=pn(r.top,e.top),e.right=fn(r.right,e.right),e.bottom=fn(r.bottom,e.bottom),e.left=pn(r.left,e.left),e}),Tr(t,s,i));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},getOffsetParent:Pr,getElementRects:async function(e){const t=this.getOffsetParent||Pr,n=this.getDimensions,r=await n(e.floating);return{reference:kr(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:r.width,height:r.height}}},getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){const{width:t,height:n}=fr(e);return{width:t,height:n}},getScale:mr,isElement:Un,isRTL:function(e){return"rtl"===ar(e).direction}};function xr(e,t){return e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height}const Mr=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var n,r;const{x:i,y:o,placement:s,middlewareData:a}=t,c=await async function(e,t){const{placement:n,platform:r,elements:i}=e,o=await(null==r.isRTL?void 0:r.isRTL(i.floating)),s=Tn(n),a=Sn(n),c="y"===Pn(n),l=Rn.has(s)?-1:1,u=o&&c?-1:1,h=On(t,e);let{mainAxis:d,crossAxis:f,alignmentAxis:p}="number"==typeof h?{mainAxis:h,crossAxis:0,alignmentAxis:null}:{mainAxis:h.mainAxis||0,crossAxis:h.crossAxis||0,alignmentAxis:h.alignmentAxis};return a&&"number"==typeof p&&(f="end"===a?-1*p:p),c?{x:f*u,y:d*l}:{x:d*l,y:f*u}}(t,e);return s===(null==(n=a.offset)?void 0:n.placement)&&null!=(r=a.arrow)&&r.alignmentOffset?{}:{x:i+c.x,y:o+c.y,data:{...c,placement:s}}}}},Ar=function(e){return void 0===e&&(e={}),{name:"autoPlacement",options:e,async fn(t){var n,r,i;const{rects:o,middlewareData:s,placement:a,platform:c,elements:l}=t,{crossAxis:u=!1,alignment:h,allowedPlacements:d=dn,autoAlignment:f=!0,...p}=On(e,t),m=void 0!==h||d===dn?function(e,t,n){return(e?[...n.filter((t=>Sn(t)===e)),...n.filter((t=>Sn(t)!==e))]:n.filter((e=>Tn(e)===e))).filter((n=>!e||Sn(n)===e||!!t&&Mn(n)!==n))}(h||null,f,d):d,y=await Dn(t,p),g=(null==(n=s.autoPlacement)?void 0:n.index)||0,v=m[g];if(null==v)return{};const b=xn(v,o,await(null==c.isRTL?void 0:c.isRTL(l.floating)));if(a!==v)return{reset:{placement:m[0]}};const w=[y[Tn(v)],y[b[0]],y[b[1]]],O=[...(null==(r=s.autoPlacement)?void 0:r.overflows)||[],{placement:v,overflows:w}],T=m[g+1];if(T)return{data:{index:g+1,overflows:O},reset:{placement:T}};const S=O.map((e=>{const t=Sn(e.placement);return[e.placement,t&&u?e.overflows.slice(0,2).reduce(((e,t)=>e+t),0):e.overflows[0],e.overflows]})).sort(((e,t)=>e[1]-t[1])),k=(null==(i=S.filter((e=>e[2].slice(0,Sn(e[0])?2:3).every((e=>e<=0))))[0])?void 0:i[0])||S[0][0];return k!==a?{data:{index:g+1,overflows:O},reset:{placement:k}}:{}}}},_r=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){const{x:n,y:r,placement:i}=t,{mainAxis:o=!0,crossAxis:s=!1,limiter:a={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...c}=On(e,t),l={x:n,y:r},u=await Dn(t,c),h=Pn(Tn(i)),d=kn(h);let f=l[d],p=l[h];if(o){const e="y"===d?"bottom":"right";f=wn(f+u["y"===d?"top":"left"],f,f-u[e])}if(s){const e="y"===h?"bottom":"right";p=wn(p+u["y"===h?"top":"left"],p,p-u[e])}const m=a.fn({...t,[d]:f,[h]:p});return{...m,data:{x:m.x-n,y:m.y-r,enabled:{[d]:o,[h]:s}}}}}},Ir=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n,r;const{placement:i,middlewareData:o,rects:s,initialPlacement:a,platform:c,elements:l}=t,{mainAxis:u=!0,crossAxis:h=!0,fallbackPlacements:d,fallbackStrategy:f="bestFit",fallbackAxisSideDirection:p="none",flipAlignment:m=!0,...y}=On(e,t);if(null!=(n=o.arrow)&&n.alignmentOffset)return{};const g=Tn(i),v=Pn(a),b=Tn(a)===a,w=await(null==c.isRTL?void 0:c.isRTL(l.floating)),O=d||(b||!m?[Fn(a)]:function(e){const t=Fn(e);return[Mn(e),t,Mn(t)]}(a)),T="none"!==p;!d&&T&&O.push(...function(e,t,n,r){const i=Sn(e);let o=function(e,t,n){switch(e){case"top":case"bottom":return n?t?_n:An:t?An:_n;case"left":case"right":return t?In:Ln;default:return[]}}(Tn(e),"start"===n,r);return i&&(o=o.map((e=>e+"-"+i)),t&&(o=o.concat(o.map(Mn)))),o}(a,m,p,w));const S=[a,...O],k=await Dn(t,y),E=[];let j=(null==(r=o.flip)?void 0:r.overflows)||[];if(u&&E.push(k[g]),h){const e=xn(i,s,w);E.push(k[e[0]],k[e[1]])}if(j=[...j,{placement:i,overflows:E}],!E.every((e=>e<=0))){var P,C;const e=((null==(P=o.flip)?void 0:P.index)||0)+1,t=S[e];if(t&&("alignment"!==h||v===Pn(t)||j.every((e=>Pn(e.placement)!==v||e.overflows[0]>0))))return{data:{index:e,overflows:j},reset:{placement:t}};let n=null==(C=j.filter((e=>e.overflows[0]<=0)).sort(((e,t)=>e.overflows[1]-t.overflows[1]))[0])?void 0:C.placement;if(!n)switch(f){case"bestFit":{var x;const e=null==(x=j.filter((e=>{if(T){const t=Pn(e.placement);return t===v||"y"===t}return!0})).map((e=>[e.placement,e.overflows.filter((e=>e>0)).reduce(((e,t)=>e+t),0)])).sort(((e,t)=>e[1]-t[1]))[0])?void 0:x[0];e&&(n=e);break}case"initialPlacement":n=a}if(i!==n)return{reset:{placement:n}}}return{}}}};var Lr=e=>{Object.assign(e,{show(){var e;null===(e=this.cancelBehaviourOpen)||void 0===e||e.call(this),this.openValue=!0},hide(){this.openValue=!1},toggle(){var e;null===(e=this.cancelBehaviourOpen)||void 0===e||e.call(this),this.openValue=!this.openValue},setupFloatingUI(e){var{trigger:t,popover:n,strategy:r}=e;this.floatingUICleanup=function(e,t,n,r){void 0===r&&(r={});const{ancestorScroll:i=!0,ancestorResize:o=!0,elementResize:s="function"==typeof ResizeObserver,layoutShift:a="function"==typeof IntersectionObserver,animationFrame:c=!1}=r,l=pr(e),u=i||o?[...l?hr(l):[],...hr(t)]:[];u.forEach((e=>{i&&e.addEventListener("scroll",n,{passive:!0}),o&&e.addEventListener("resize",n)}));const h=l&&a?function(e,t){let n,r=null;const i=Kn(e);function o(){var e;clearTimeout(n),null==(e=r)||e.disconnect(),r=null}return function s(a,c){void 0===a&&(a=!1),void 0===c&&(c=1),o();const l=e.getBoundingClientRect(),{left:u,top:h,width:d,height:f}=l;if(a||t(),!d||!f)return;const p={rootMargin:-yn(h)+"px "+-yn(i.clientWidth-(u+d))+"px "+-yn(i.clientHeight-(h+f))+"px "+-yn(u)+"px",threshold:pn(0,fn(1,c))||1};let m=!0;function y(t){const r=t[0].intersectionRatio;if(r!==c){if(!m)return s();r?s(!1,r):n=setTimeout((()=>{s(!1,1e-7)}),1e3)}1!==r||xr(l,e.getBoundingClientRect())||s(),m=!1}try{r=new IntersectionObserver(y,{...p,root:i.ownerDocument})}catch(e){r=new IntersectionObserver(y,p)}r.observe(e)}(!0),o}(l,n):null;let d,f=-1,p=null;s&&(p=new ResizeObserver((e=>{let[r]=e;r&&r.target===l&&p&&(p.unobserve(t),cancelAnimationFrame(f),f=requestAnimationFrame((()=>{var e;null==(e=p)||e.observe(t)}))),n()})),l&&!c&&p.observe(l),p.observe(t));let m=c?vr(e):null;return c&&function t(){const r=vr(e);m&&!xr(m,r)&&n(),m=r,d=requestAnimationFrame(t)}(),n(),()=>{var e;u.forEach((e=>{i&&e.removeEventListener("scroll",n),o&&e.removeEventListener("resize",n)})),null==h||h(),null==(e=p)||e.disconnect(),p=null,c&&cancelAnimationFrame(d)}}(t,n,(()=>{((e,t,n)=>{const r=new Map,i={platform:Cr,...n},o={...i.platform,_c:r};return(async(e,t,n)=>{const{placement:r="bottom",strategy:i="absolute",middleware:o=[],platform:s}=n,a=o.filter(Boolean),c=await(null==s.isRTL?void 0:s.isRTL(t));let l=await s.getElementRects({reference:e,floating:t,strategy:i}),{x:u,y:h}=Bn(l,r,c),d=r,f={},p=0;for(let n=0;n{var{x:t,y:r,strategy:i}=e,o={left:"".concat(t,"px"),top:"".concat(r,"px"),position:i};Object.assign(n.style,o)}))}))},openValueChanged(){this.disabledValue||(this.openValue?(this.popoverTarget.showPopover(),this.popoverTarget.setAttribute("aria-expanded","true"),this.onPopoverOpened&&this.onPopoverOpened()):(this.popoverTarget.hidePopover(),this.popoverTarget.removeAttribute("aria-expanded"),this.onPopoverClosed&&this.onPopoverClosed()))}})};function Fr(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function Nr(e){return function(){var t=this,n=arguments;return new Promise((function(r,i){var o=e.apply(t,n);function s(e){Fr(o,r,i,s,a,"next",e)}function a(e){Fr(o,r,i,s,a,"throw",e)}s(void 0)}))}}function Br(e,t){for(var n=0;n{var[n,r]=e;t.searchParams.append(n,r)})),yield fetch(t,{method:"GET",headers:Zt.headers})})),function(e){return o.apply(this,arguments)})},{key:"create",value:(i=Kr((function*(e){var t=yield fetch(this.url,{method:"POST",headers:{Authorization:"Bearer ".concat(Zt.business.id)},body:e});return new ie(t.ok,t)})),function(e){return i.apply(this,arguments)})},{key:"markAsSeen",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=e?this.url+"/".concat(e):this.url+"/seen";fetch(t,{method:"PATCH",headers:Zt.headers,body:JSON.stringify({session:Zt.session})})}},{key:"url",get:function(){return e.endpoint.replace(":id",this.webchatId)}}],r=[{key:"endpoint",get:function(){return L.endpoint("public/webchats/:id/messages")}}],n&&Hr(t.prototype,n),r&&Hr(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();function zr(e,t){for(var n=0;n{this.webSocket.send(JSON.stringify(i))}))}},{key:"onMessage",value:function(e){this.webSocket.addEventListener("message",(t=>{var n=JSON.parse(t.data),{type:r,message:i}=n;this.ignoredEvents.includes(r)||e(i)}))}},{key:"webSocket",get:function(){return e.webSocket?e.webSocket:e.webSocket=new WebSocket(L.actionCableUrl)}},{key:"ignoredEvents",get:function(){return["ping","confirm_subscription","welcome"]}}])&&zr(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Jr(e,t){for(var n=0;n{"message"===t.type&&e(t)}))}},{key:"onReaction",value:function(e){Zr(Qr(s.prototype),"onMessage",this).call(this,(t=>{"reaction.create"!==t.type&&"reaction.destroy"!==t.type||e(t)}))}},{key:"onTypingStart",value:function(e){Zr(Qr(s.prototype),"onMessage",this).call(this,(t=>{"started_typing"===t.type&&e(t)}))}},{key:"updateSubscriptionWith",value:function(e){this.unsubscribe(),setTimeout((()=>{this.conversation=e,this.subscribe()}),1e3)}}])&&Jr(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),s}(Wr);const Yr=Xr;var ei=e=>{Object.assign(e,{scheduleBehaviourOpen(){if(this.shouldAutoOpenFromBehaviour()){var e=1e3*Number(this.behaviourValue.delay_seconds||0);this.behaviourOpenTimeout=window.setTimeout((()=>{this.behaviourOpenTimeout=null,this.openValue||(this.openValue=!0,this.markBehaviourAutoOpened())}),e)}},cancelBehaviourOpen(){window.clearTimeout(this.behaviourOpenTimeout),this.behaviourOpenTimeout=null},shouldAutoOpenFromBehaviour(){var e=this.behaviourValue;return!(!e||"on_load"!==e.trigger||e.first_visit_only&&localStorage.getItem(this.firstVisitKey())||e.once_per_session&&sessionStorage.getItem(this.sessionKey()))},markBehaviourAutoOpened(){this.behaviourValue.first_visit_only&&localStorage.setItem(this.firstVisitKey(),"1"),this.behaviourValue.once_per_session&&sessionStorage.setItem(this.sessionKey(),"1")},firstVisitKey(){return"hellotext--webchat--".concat(this.idValue,"--auto-opened")},sessionKey(){return"hellotext--webchat--".concat(this.idValue,"--auto-opened-session")}})},ti=e=>{Object.assign(e,{setupOpeningSequence(){this.openingSequenceStarted=!1,this.openingSequenceCancelled=!1,this.openingSequenceTimeout=null,this.openingSequenceMessages=[],this.revealedOpeningSequenceMessageIds=[]},teardownOpeningSequence(){this.cancelOpeningSequence()},startOpeningSequence(){this.openingSequenceMessages=Array.from(this.openingSequenceMessageTargets||[]),this.openingSequenceCanStart()&&(this.openingSequenceStarted=!0,this.openingSequenceCancelled=!1,this.revealedOpeningSequenceMessageIds=[],this.playOpeningSequenceMessageAt(0))},openingSequenceCanStart(){return!this.conversationIdValue&&this.hasOpeningSequenceTarget&&this.openingSequenceMessages.length>0&&!this.openingSequenceStarted},playOpeningSequenceMessageAt(e){var t=this.openingSequenceMessages[e];if(t){var n=1e3*this.openingSequenceMessageDelay(t);this.openingSequenceTimeout=window.setTimeout((()=>{this.openingSequenceTimeout=null,this.openingSequenceCancelled||(this.revealOpeningSequenceMessage(t),this.playOpeningSequenceMessageAt(e+1))}),n)}},revealOpeningSequenceMessage(e){this.messagesContainerTarget.insertBefore(e,this.messageTemplateTarget),e.hidden=!1,this.recordOpeningSequenceMessage(e),this.scrollOpeningSequenceToBottom()},recordOpeningSequenceMessage(e){var t=e.dataset.openingSequenceMessageId;t&&!this.revealedOpeningSequenceMessageIds.includes(t)&&this.revealedOpeningSequenceMessageIds.push(t)},openingSequenceMessageDelay(e){var t=Number(e.dataset.delaySeconds||0);return Number.isFinite(t)?t:0},scrollOpeningSequenceToBottom(){this.messagesContainerTarget.scroll&&this.messagesContainerTarget.scroll({top:this.messagesContainerTarget.scrollHeight,behavior:"smooth"})},cancelOpeningSequence(){this.openingSequenceCancelled=!0,null!==this.openingSequenceTimeout&&void 0!==this.openingSequenceTimeout&&(window.clearTimeout(this.openingSequenceTimeout),this.openingSequenceTimeout=null)},appendOpeningSequenceMessageIds(e){this.cancelOpeningSequence(),(this.revealedOpeningSequenceMessageIds||[]).forEach((t=>{e.append("message[opening_sequence_message_ids][]",t)}))},clearRevealedOpeningSequenceMessageIds(){this.revealedOpeningSequenceMessageIds=[]}})},ni=e=>{Object.assign(e,{setupTeaser(){this.teaserCycleTimeout=null,this.teaserMessages=[],this.boundOnTeaserClick=this.boundOnTeaserClick||this.onTeaserClick.bind(this),this.hasTeaserTarget&&(this.teaserTarget.addEventListener("click",this.boundOnTeaserClick),this.startTeaserPresentation())},teardownTeaser(){this.stopTeaserCycle(),this.hasTeaserTarget&&this.boundOnTeaserClick&&this.teaserTarget.removeEventListener("click",this.boundOnTeaserClick)},collectTeaserMessages(){return this.hasTeaserTarget?Array.from(this.teaserTarget.querySelectorAll("[data-teaser-message]")):[]},startTeaserPresentation(){this.stopTeaserCycle(),this.teaserMessages=this.collectTeaserMessages(),this.hasTeaserTarget&&(0!==this.teaserMessages.length?this.openValue||this.conversationIdValue||this.hasRenderedConversationMessages()?this.dismissTeaserForSession():this.teaserSeenForSession()?this.hideTeaser():(this.teaserTarget.classList.remove("invisible"),this.showTeaserMessage(0),this.teaserMessages.length<2||this.scheduleNextTeaserMessage(0)):this.hideTeaser())},scheduleNextTeaserMessage(e){var t=e+1;if(!(t>=this.teaserMessages.length)){var n=this.teaserMessages[e],r=this.teaserPresentationDelay(n);this.teaserCycleTimeout=window.setTimeout((()=>{this.teaserCycleTimeout=null,this.showTeaserMessage(t),this.scheduleNextTeaserMessage(t)}),r)}},showTeaserMessage(e){this.teaserMessages.forEach(((t,n)=>{t.classList.toggle("hidden",n!==e)}))},stopTeaserCycle(){null!==this.teaserCycleTimeout&&void 0!==this.teaserCycleTimeout&&(window.clearTimeout(this.teaserCycleTimeout),this.teaserCycleTimeout=null)},teaserMessageDelay(e){var t=Number(e.dataset.delaySeconds||0);return Number.isFinite(t)?t:0},teaserPresentationDelay(e){return Math.max(1e3*this.teaserMessageDelay(e),250)},hasRenderedConversationMessages(){var e=[];try{e=Array.from(this.messageTargets||[])}catch(t){e=[]}return e.some((e=>e!==this.messageTemplateTarget))},teaserSeenKey(){return"hellotext:webchat:".concat(this.idValue||this.element.id,":teaser-seen")},teaserSeenForSession(){try{return"true"===window.sessionStorage.getItem(this.teaserSeenKey())}catch(e){return!1}},markTeaserSeenForSession(){try{window.sessionStorage.setItem(this.teaserSeenKey(),"true")}catch(e){}},dismissTeaserForSession(){this.markTeaserSeenForSession(),this.hideTeaser()},hideTeaser(){this.stopTeaserCycle(),this.hasTeaserTarget&&this.teaserTarget.classList.add("invisible")},onTeaserClick(e){e.target.closest("a")||(this.dismissTeaserForSession(),this.show())}})};function ri(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function ii(e){for(var t=1;t{this.messagesContainerTarget.scroll({top:this.messagesContainerTarget.scrollHeight,behavior:"instant"})}));var t=this.typingIndicatorKeepAliveValue;this.incomingTypingIndicatorTimeout=setTimeout((()=>{this.clearTypingIndicator()}),t)}},{key:"resetTypingIndicatorTimer",value:function(){if(this.typingIndicatorVisible){clearTimeout(this.incomingTypingIndicatorTimeout),clearTimeout(this.optimisticTypingTimeout);var e=this.typingIndicatorKeepAliveValue;this.incomingTypingIndicatorTimeout=setTimeout((()=>{this.clearTypingIndicator()}),e)}}},{key:"clearTypingIndicator",value:function(){this.hasTypingIndicatorTarget&&this.typingIndicatorTarget.remove(),this.typingIndicatorVisible=!1,clearTimeout(this.incomingTypingIndicatorTimeout),clearTimeout(this.optimisticTypingTimeout)}},{key:"onMessageInputChange",value:function(){this.resizeInput(),clearTimeout(this.typingIndicatorTimeout),this.hasSentTypingIndicator||(this.webChatChannel.startTypingIndicator(),this.hasSentTypingIndicator=!0),this.typingIndicatorTimeout=setTimeout((()=>{this.hasSentTypingIndicator=!1}),3e3)}},{key:"onOutboundMessageSent",value:function(e){var{data:t}=e,n={"message:sent":e=>{var t=(new DOMParser).parseFromString(e.element,"text/html").body.firstElementChild;this.typingIndicatorVisible&&this.hasTypingIndicatorTarget?this.messagesContainerTarget.insertBefore(t,this.typingIndicatorTarget):this.messagesContainerTarget.appendChild(t),t.scrollIntoView({behavior:"instant"})},"message:failed":e=>{var t;null===(t=this.messagesContainerTarget.querySelector("#".concat(e.id)))||void 0===t||t.classList.add("failed")}};n[t.type]?n[t.type](t):console.log("Unhandled message event: ".concat(t.type))}},{key:"onScroll",value:(s=ai((function*(){if(!(this.messagesContainerTarget.scrollTop>300||!this.nextPageValue||this.fetchingNextPage)){this.fetchingNextPage=!0;var e=yield this.messagesAPI.index({page:this.nextPageValue,session:Zt.session}),{next:t,messages:n}=yield e.json();this.nextPageValue=t,this.oldScrollHeight=this.messagesContainerTarget.scrollHeight,n.forEach((e=>{var{body:t,attachments:n}=e,r=document.createElement("div");r.innerHTML=t;var i=this.messageTemplateTarget.cloneNode(!0);i.setAttribute("data-hellotext--webchat-target","message"),i.style.removeProperty("display"),i.querySelector("[data-body]").innerHTML=r.innerHTML,"received"===e.state?i.classList.add("received"):i.classList.remove("received"),n&&n.forEach((e=>{var t,n=this.attachmentImageTarget.cloneNode(!0);n.removeAttribute("data-hellotext--webchat-target"),n.src=e,n.style.display="block",null===(t=this.messageAttachmentsContainer(i))||void 0===t||t.appendChild(n)})),i.setAttribute("data-body",t),this.messagesContainerTarget.prepend(i)})),this.messagesContainerTarget.scroll({top:this.messagesContainerTarget.scrollHeight-this.oldScrollHeight,behavior:"instant"}),this.fetchingNextPage=!1}})),function(){return s.apply(this,arguments)})},{key:"onClickOutside",value:function(e){_.mode===A.POPOVER&&this.openValue&&e.target.nodeType&&!1===this.element.contains(e.target)&&(this.openValue=!1)}},{key:"closePopover",value:function(){this.popoverTarget.classList.add(...this.fadeOutClasses),setTimeout((()=>{this.openValue=!1}),250)}},{key:"onPopoverOpened",value:function(){var e;this.popoverTarget.classList.remove(...this.fadeOutClasses),null===(e=this.dismissTeaserForSession)||void 0===e||e.call(this),this.onMobile||this.inputTarget.focus(),this.scrolled||(requestAnimationFrame((()=>{this.messagesContainerTarget.scroll({top:this.messagesContainerTarget.scrollHeight,behavior:"instant"})})),this.scrolled=!0),Zt.eventEmitter.dispatch("webchat:opened"),localStorage.setItem("hellotext--webchat--".concat(this.idValue),"opened"),this.messageTeaserValue&&(this.messageTeaserValue=null),this.startOpeningSequence(),"none"!==this.unreadCounterTarget.style.display&&(this.unreadCounterTarget.style.display="none",this.unreadCounterTarget.innerText="0",this.messagesAPI.markAsSeen())}},{key:"onPopoverClosed",value:function(){Zt.eventEmitter.dispatch("webchat:closed"),localStorage.setItem("hellotext--webchat--".concat(this.idValue),"closed")}},{key:"onMessageReaction",value:function(e){var{message:t,reaction:n,type:r}=e,i=this.messageTargets.find((e=>e.dataset.id===t)).querySelector("[data-reactions]");if("reaction.destroy"===r)return i.querySelector('[data-id="'.concat(n.id,'"]')).remove();if(i.querySelector('[data-id="'.concat(n.id,'"]')))i.querySelector('[data-id="'.concat(n.id,'"]')).innerText=n.emoji;else{var o=document.createElement("span");o.innerText=n.emoji,o.setAttribute("data-id",n.id),i.appendChild(o)}}},{key:"onMessageReceived",value:function(e){var t,{id:n,body:r,attachments:i,teaser:o}=e;if(this.claimMessageId(n)){if(null===(t=this.hideTeaser)||void 0===t||t.call(this),e.carousel)return this.insertCarouselMessage(e);var s=document.createElement("div");s.innerHTML=r;var a=this.messageTemplateTarget.cloneNode(!0);a.style.display="flex",a.querySelector("[data-body]").innerHTML=s.innerHTML,a.setAttribute("data-id",n),a.setAttribute("data-hellotext--webchat-target","message"),i&&i.forEach((e=>{var t,n=this.attachmentImageTarget.cloneNode(!0);n.src=e,n.style.display="block",null===(t=this.messageAttachmentsContainer(a))||void 0===t||t.appendChild(n)})),this.clearTypingIndicator(),this.messagesContainerTarget.appendChild(a),Zt.eventEmitter.dispatch("webchat:message:received",ii(ii({},e),{},{body:a.querySelector("[data-body]").innerText})),a.scrollIntoView({behavior:"smooth"}),this.updateMessageTeaser(o),this.openValue?this.messagesAPI.markAsSeen(n):this.incrementUnreadCounter()}}},{key:"claimMessageId",value:function(e){var t=this.messageTargets||[];return!this.messageIds.has(e)&&(this.messageIds.add(e),!t.some((t=>t.dataset.id===e)))}},{key:"updateMessageTeaser",value:function(e){this.messageTeaserValue=e,this.messageTeaserValue&&this.hasTeaserTarget&&this.hasInboundMessageTeaserTarget&&this.hasInboundMessageTeaserBodyTarget&&(this.teaserMessageTargets.forEach((e=>e.classList.add("hidden"))),this.inboundMessageTeaserBodyTarget.innerHTML=this.messageTeaserValue,this.inboundMessageTeaserTarget.classList.remove("hidden"),this.teaserTarget.classList.toggle("invisible",this.openValue))}},{key:"insertCarouselMessage",value:function(e){var t,n=e.html,r=(new DOMParser).parseFromString(n,"text/html").body.firstElementChild;r.setAttribute("data-id",e.id),r.setAttribute("data-hellotext--webchat-target","message"),this.clearTypingIndicator(),this.messagesContainerTarget.appendChild(r),r.scrollIntoView({behavior:"smooth"}),Zt.eventEmitter.dispatch("webchat:message:received",ii(ii({},e),{},{body:(null===(t=r.querySelector("[data-body]"))||void 0===t?void 0:t.innerText)||""})),this.updateMessageTeaser(e.teaser),this.openValue?this.messagesAPI.markAsSeen(e.id):this.incrementUnreadCounter()}},{key:"resizeInput",value:function(){this.inputTarget.style.height="auto";var e=this.inputTarget.scrollHeight;this.inputTarget.style.height="".concat(Math.min(e,96),"px")}},{key:"sendQuickReplyMessage",value:(o=ai((function*(e){var t,n,{detail:{id:r,product:i,buttonId:o,body:s,cardElement:a}}=e;null===(t=this.dismissTeaserForSession)||void 0===t||t.call(this);var c=new FormData;c.append("message[body]",s),c.append("message[replied_to]",r),c.append("message[product]",i),c.append("message[button]",o),c.append("session",Zt.session),c.append("locale",P.toString()),this.appendOpeningSequenceMessageIds(c);var l,u=this.buildMessageElement(),h=null===(n=a.querySelector("img"))||void 0===n?void 0:n.cloneNode(!0);u.querySelector("[data-body]").innerText=s,h&&(h.removeAttribute("width"),h.removeAttribute("height"),null===(l=this.messageAttachmentsContainer(u))||void 0===l||l.appendChild(h)),this.typingIndicatorVisible&&this.hasTypingIndicatorTarget?this.messagesContainerTarget.insertBefore(u,this.typingIndicatorTarget):this.messagesContainerTarget.appendChild(u),u.scrollIntoView({behavior:"smooth"}),this.broadcastChannel.postMessage({type:"message:sent",element:u.outerHTML});var d=yield this.messagesAPI.create(c);if(d.failed)return clearTimeout(this.optimisticTypingTimeout),this.broadcastChannel.postMessage({type:"message:failed",id:u.id}),u.classList.add("failed");var f=yield d.json();this.dispatch("set:id",{target:u,detail:f.id}),this.clearRevealedOpeningSequenceMessageIds();var p={id:f.id,body:s,attachments:h?[h.src]:[],replied_to:r,product:i,button:o,type:"quick_reply"};Zt.eventEmitter.dispatch("webchat:message:sent",p)})),function(e){return o.apply(this,arguments)})},{key:"sendTeaserQuickReply",value:(i=ai((function*(e){var t;e.preventDefault(),e.stopPropagation();var n=e.currentTarget,r=(n.dataset.value||"").trim(),i=[n.dataset.text,n.textContent].map((e=>(e||"").trim())).find((e=>e.length>0)),o=r||i;if(o){null===(t=this.dismissTeaserForSession)||void 0===t||t.call(this),this.show();var s=(n.dataset.type||"").trim()||"quick_reply",a=new FormData;a.append("message[body]",o),a.append("session",Zt.session),a.append("locale",P.toString()),this.appendOpeningSequenceMessageIds(a);var c=this.buildMessageElement();c.querySelector("[data-body]").innerText=o,this.typingIndicatorVisible&&this.hasTypingIndicatorTarget?this.messagesContainerTarget.insertBefore(c,this.typingIndicatorTarget):this.messagesContainerTarget.appendChild(c),c.scrollIntoView({behavior:"smooth"}),this.broadcastChannel.postMessage({type:"message:sent",element:c.outerHTML}),this.typingIndicatorVisible||(clearTimeout(this.optimisticTypingTimeout),this.optimisticTypingTimeout=setTimeout((()=>{this.showOptimisticTypingIndicator()}),this.optimisticTypingIndicatorWaitValue));var l=yield this.messagesAPI.create(a);if(l.failed)return clearTimeout(this.optimisticTypingTimeout),this.broadcastChannel.postMessage({type:"message:failed",id:c.id}),c.classList.add("failed");var u=yield l.json();c.setAttribute("data-id",u.id),this.clearRevealedOpeningSequenceMessageIds(),Zt.eventEmitter.dispatch("webchat:message:sent",{id:u.id,body:o,attachments:[],type:"quick_reply",teaser:{text:i||o,value:r||o,type:s}}),u.conversation&&u.conversation!==this.conversationIdValue&&(this.conversationIdValue=u.conversation,this.webChatChannel.updateSubscriptionWith(this.conversationIdValue)),this.typingIndicatorVisible&&this.resetTypingIndicatorTimer()}})),function(e){return i.apply(this,arguments)})},{key:"sendMessage",value:(r=ai((function*(e){var t,n={body:this.inputTarget.value,attachments:this.files};if(0!==this.inputTarget.value.trim().length||0!==this.files.length){null===(t=this.dismissTeaserForSession)||void 0===t||t.call(this);var r=new FormData;this.inputTarget.value.trim().length>0?r.append("message[body]",this.inputTarget.value):delete n.body,this.files.forEach((e=>{r.append("message[attachments][]",e)})),r.append("session",Zt.session),r.append("locale",P.toString()),this.appendOpeningSequenceMessageIds(r);var i=this.buildMessageElement();this.inputTarget.value.trim().length>0?i.querySelector("[data-body]").innerText=this.inputTarget.value:i.querySelector("[data-message-bubble]").remove();var o=this.attachmentContainerTarget.querySelectorAll("img");o.length>0&&o.forEach((e=>{var t;null===(t=this.messageAttachmentsContainer(i))||void 0===t||t.appendChild(e.cloneNode(!0))})),this.typingIndicatorVisible&&this.hasTypingIndicatorTarget?this.messagesContainerTarget.insertBefore(i,this.typingIndicatorTarget):this.messagesContainerTarget.appendChild(i),i.scrollIntoView({behavior:"smooth"}),this.broadcastChannel.postMessage({type:"message:sent",element:i.outerHTML}),this.inputTarget.value="",this.resizeInput(),this.files=[],this.attachmentInputTarget.value="",this.attachmentContainerTarget.innerHTML="",this.attachmentContainerTarget.style.display="none",this.errorMessageContainerTarget.style.display="none",this.inputTarget.focus(),this.typingIndicatorVisible||(clearTimeout(this.optimisticTypingTimeout),this.optimisticTypingTimeout=setTimeout((()=>{this.showOptimisticTypingIndicator()}),this.optimisticTypingIndicatorWaitValue));var s=yield this.messagesAPI.create(r);if(s.failed)return clearTimeout(this.optimisticTypingTimeout),this.broadcastChannel.postMessage({type:"message:failed",id:i.id}),i.classList.add("failed");var a=yield s.json();i.setAttribute("data-id",a.id),n.id=a.id,this.clearRevealedOpeningSequenceMessageIds(),Zt.eventEmitter.dispatch("webchat:message:sent",n),a.conversation!==this.conversationIdValue&&(this.conversationIdValue=a.conversation,this.webChatChannel.updateSubscriptionWith(this.conversationIdValue)),this.typingIndicatorVisible&&this.resetTypingIndicatorTimer(),this.attachmentContainerTarget.style.display=""}else e&&e.target&&e.preventDefault()})),function(e){return r.apply(this,arguments)})},{key:"buildMessageElement",value:function(){var e=this.messageTemplateTarget.cloneNode(!0);return e.id="hellotext--webchat--".concat(this.idValue,"--message--").concat(Date.now()),e.classList.add("received"),e.style.removeProperty("display"),e.setAttribute("data-controller","hellotext--message"),e.setAttribute("data-hellotext--webchat-target","message"),e}},{key:"messageAttachmentsContainer",value:function(e){return e.querySelector("[data-attachments-container], [data-attachment-container]")}},{key:"incrementUnreadCounter",value:function(){this.unreadCounterTarget.style.display="flex";var e=(parseInt(this.unreadCounterTarget.innerText)||0)+1;this.unreadCounterTarget.innerText=Math.min(e,9)}},{key:"openAttachment",value:function(){this.attachmentInputTarget.click()}},{key:"onFileInputChange",value:function(){this.errorMessageContainerTarget.style.display="none";var e=Array.from(this.attachmentInputTarget.files);this.attachmentInputTarget.value="";var t=e.find((e=>{var t=e.type.split("/")[0];return["image","video","audio"].includes(t)?this.mediaValue[t].max_sizethis.createAttachmentElement(e))),this.inputTarget.focus()}},{key:"createAttachmentElement",value:function(e){var t=this.attachmentElement();if(this.attachmentContainerTarget.style.display="",t.setAttribute("data-name",e.name),e.type.startsWith("image/")){var n=this.attachmentImageTarget.cloneNode(!0);n.src=URL.createObjectURL(e),n.style.display="block",t.appendChild(n),this.attachmentContainerTarget.appendChild(t),this.attachmentContainerTarget.style.display="flex"}else{var r=t.querySelector("main");r.style.height="5rem",r.style.borderRadius="0.375rem",r.style.backgroundColor="#e5e7eb",r.style.padding="0.25rem",t.querySelector("p[data-attachment-name]").innerText=e.name,this.attachmentContainerTarget.appendChild(t),this.attachmentContainerTarget.style.display="flex"}}},{key:"removeAttachment",value:function(e){var{currentTarget:t}=e,n=t.closest("[data-hellotext--webchat-target='attachment']");this.files=this.files.filter((e=>e.name!==n.dataset.name)),this.attachmentInputTarget.value="",n.remove(),this.inputTarget.focus()}},{key:"attachmentTargetDisconnected",value:function(){0===this.attachmentTargets.length&&(this.attachmentContainerTarget.innerHTML="",this.attachmentContainerTarget.style.display="none")}},{key:"attachmentElement",value:function(){var e=this.attachmentTemplateTarget.cloneNode(!0);return e.removeAttribute("hidden"),e.style.display="flex",e.setAttribute("data-hellotext--webchat-target","attachment"),e}},{key:"onEmojiSelect",value:function(e){var{detail:t}=e,n=this.inputTarget.value,r=this.inputTarget.selectionStart,i=this.inputTarget.selectionEnd;this.inputTarget.value=n.slice(0,r)+t+n.slice(i),this.inputTarget.selectionStart=this.inputTarget.selectionEnd=r+t.length,this.inputTarget.focus()}},{key:"byteToMegabyte",value:function(e){return Math.ceil(e/1024/1024)}},{key:"middlewares",get:function(){return[Mr(this.offsetValue),_r({padding:this.paddingValue}),Ir()]}},{key:"shouldOpenOnMount",get:function(){return"opened"===localStorage.getItem("hellotext--webchat--".concat(this.idValue))&&!this.onMobile}},{key:"onMobile",get:function(){return window.matchMedia("(max-width: ".concat(this.fullScreenThresholdValue,"px)")).matches}}],n&&ci(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),u}(g.Qr);fi.values={id:String,conversationId:String,media:Object,fileSizeErrorMessage:String,placement:{type:String,default:"bottom-end"},open:{type:Boolean,default:!1},autoPlacement:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},nextPage:{type:Number,default:void 0},fullScreenThreshold:{type:Number,default:1024},typingIndicatorKeepAlive:{type:Number,default:3e4},offset:{type:Number,default:24},padding:{type:Number,default:24},optimisticTypingIndicatorWait:{type:Number,default:1e3},teaser:Object,messageTeaser:String,behaviour:Object},fi.classes=["fadeOut"],fi.targets=["trigger","popover","input","attachmentInput","attachmentButton","errorMessageContainer","attachmentTemplate","attachmentContainer","attachment","messageTemplate","messagesContainer","title","attachmentImage","footer","toolbar","message","unreadCounter","typingIndicator","typingIndicatorTemplate","teaser","teaserMessage","inboundMessageTeaser","inboundMessageTeaserBody","openingSequence","openingSequenceMessage"];var pi=g.Mx.start();pi.register("hellotext--form",tn),pi.register("hellotext--webchat",fi),pi.register("hellotext--webchat--emoji",qr),pi.register("hellotext--message",un),window.Hellotext=Zt;const mi=Zt},989:(e,t,n)=>{n.d(t,{Z:()=>a});var r=n(81),i=n.n(r),o=n(645),s=n.n(o)()(i());s.push([e.id,"form[data-hello-form] {\n position: relative;\n}\n\nform[data-hello-form] article [data-error-container] {\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: none;\n}\n\nform[data-hello-form] article:has(input:invalid) [data-error-container] {\n display: block;\n}\n\nform[data-hello-form] [data-logo-container] {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n position: absolute;\n right: 1rem;\n bottom: 1rem;\n}\n\nform[data-hello-form] [data-logo-container] small {\n margin: 0 0.3rem;\n}\n\nform[data-hello-form] [data-logo-container] [data-hello-brand] {\n width: 4rem;\n}\n",""]);const a=s},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,i,o){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(r)for(var a=0;a0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=o),n&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=n):u[2]=n),i&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=i):u[4]="".concat(i)),t.push(u))}},t}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var t=[];function n(e){for(var n=-1,r=0;r{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var i=void 0!==n.layer;i&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,i&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var o=n.sourceMap;o&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},o={};function s(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return i[e](n,n.exports,s),n.exports}s.m=i,s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,s.t=function(n,r){if(1&r&&(n=this(n)),8&r)return n;if("object"==typeof n&&n){if(4&r&&n.__esModule)return n;if(16&r&&"function"==typeof n.then)return n}var i=Object.create(null);s.r(i);var o={};e=e||[null,t({}),t([]),t(t)];for(var a=2&r&&n;"object"==typeof a&&!~e.indexOf(a);a=t(a))Object.getOwnPropertyNames(a).forEach((e=>o[e]=()=>n[e]));return o.default=()=>n,s.d(i,o),i},s.d=(e,t)=>{for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((t,n)=>(s.f[n](e,t),t)),[])),s.u=e=>({34:"webchat-emoji-en",309:"webchat-emoji-es",853:"webchat-emoji"}[e]+".js"),s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n={},r="Hellotext:",s.l=(e,t,i,o)=>{if(n[e])n[e].push(t);else{var a,c;if(void 0!==i)for(var l=document.getElementsByTagName("script"),u=0;u{a.onerror=a.onload=null,clearTimeout(f);var i=n[e];if(delete n[e],a.parentNode&&a.parentNode.removeChild(a),i&&i.forEach((e=>e(r))),t)return t(r)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=d.bind(null,a.onerror),a.onload=d.bind(null,a.onload),c&&document.head.appendChild(a)}},s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;s.g.importScripts&&(e=s.g.location+"");var t=s.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var n=t.getElementsByTagName("script");n.length&&(e=n[n.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),s.p=e})(),(()=>{var e={179:0};s.f.j=(t,n)=>{var r=s.o(e,t)?e[t]:void 0;if(0!==r)if(r)n.push(r[2]);else{var i=new Promise(((n,i)=>r=e[t]=[n,i]));n.push(r[2]=i);var o=s.p+s.u(t),a=new Error;s.l(o,(n=>{if(s.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var i=n&&("load"===n.type?"missing":n.type),o=n&&n.target&&n.target.src;a.message="Loading chunk "+t+" failed.\n("+i+": "+o+")",a.name="ChunkLoadError",a.type=i,a.request=o,r[1](a)}}),"chunk-"+t,t)}};var t=(t,n)=>{var r,i,[o,a,c]=n,l=0;if(o.some((t=>0!==e[t]))){for(r in a)s.o(a,r)&&(s.m[r]=a[r]);c&&c(s)}for(t&&t(n);l(()=>{"use strict";var e,t,n,r,i={599:(e,t,n)=>{n.d(t,{Mx:()=>J,Qr:()=>ie});class r{constructor(e,t,n){this.eventTarget=e,this.eventName=t,this.eventOptions=n,this.unorderedBindings=new Set}connect(){this.eventTarget.addEventListener(this.eventName,this,this.eventOptions)}disconnect(){this.eventTarget.removeEventListener(this.eventName,this,this.eventOptions)}bindingConnected(e){this.unorderedBindings.add(e)}bindingDisconnected(e){this.unorderedBindings.delete(e)}handleEvent(e){const t=function(e){if("immediatePropagationStopped"in e)return e;{const{stopImmediatePropagation:t}=e;return Object.assign(e,{immediatePropagationStopped:!1,stopImmediatePropagation(){this.immediatePropagationStopped=!0,t.call(this)}})}}(e);for(const e of this.bindings){if(t.immediatePropagationStopped)break;e.handleEvent(t)}}hasBindings(){return this.unorderedBindings.size>0}get bindings(){return Array.from(this.unorderedBindings).sort(((e,t)=>{const n=e.index,r=t.index;return nr?1:0}))}}class i{constructor(e){this.application=e,this.eventListenerMaps=new Map,this.started=!1}start(){this.started||(this.started=!0,this.eventListeners.forEach((e=>e.connect())))}stop(){this.started&&(this.started=!1,this.eventListeners.forEach((e=>e.disconnect())))}get eventListeners(){return Array.from(this.eventListenerMaps.values()).reduce(((e,t)=>e.concat(Array.from(t.values()))),[])}bindingConnected(e){this.fetchEventListenerForBinding(e).bindingConnected(e)}bindingDisconnected(e,t=!1){this.fetchEventListenerForBinding(e).bindingDisconnected(e),t&&this.clearEventListenersForBinding(e)}handleError(e,t,n={}){this.application.handleError(e,`Error ${t}`,n)}clearEventListenersForBinding(e){const t=this.fetchEventListenerForBinding(e);t.hasBindings()||(t.disconnect(),this.removeMappedEventListenerFor(e))}removeMappedEventListenerFor(e){const{eventTarget:t,eventName:n,eventOptions:r}=e,i=this.fetchEventListenerMapForEventTarget(t),o=this.cacheKey(n,r);i.delete(o),0==i.size&&this.eventListenerMaps.delete(t)}fetchEventListenerForBinding(e){const{eventTarget:t,eventName:n,eventOptions:r}=e;return this.fetchEventListener(t,n,r)}fetchEventListener(e,t,n){const r=this.fetchEventListenerMapForEventTarget(e),i=this.cacheKey(t,n);let o=r.get(i);return o||(o=this.createEventListener(e,t,n),r.set(i,o)),o}createEventListener(e,t,n){const i=new r(e,t,n);return this.started&&i.connect(),i}fetchEventListenerMapForEventTarget(e){let t=this.eventListenerMaps.get(e);return t||(t=new Map,this.eventListenerMaps.set(e,t)),t}cacheKey(e,t){const n=[e];return Object.keys(t).sort().forEach((e=>{n.push(`${t[e]?"":"!"}${e}`)})),n.join(":")}}const o={stop:({event:e,value:t})=>(t&&e.stopPropagation(),!0),prevent:({event:e,value:t})=>(t&&e.preventDefault(),!0),self:({event:e,value:t,element:n})=>!t||n===e.target},s=/^(?:(?:([^.]+?)\+)?(.+?)(?:\.(.+?))?(?:@(window|document))?->)?(.+?)(?:#([^:]+?))(?::(.+))?$/;function a(e){return e.replace(/(?:[_-])([a-z0-9])/g,((e,t)=>t.toUpperCase()))}function c(e){return a(e.replace(/--/g,"-").replace(/__/g,"_"))}function l(e){return e.charAt(0).toUpperCase()+e.slice(1)}function u(e){return e.replace(/([A-Z])/g,((e,t)=>`-${t.toLowerCase()}`))}function h(e){return null!=e}function d(e,t){return Object.prototype.hasOwnProperty.call(e,t)}const f=["meta","ctrl","alt","shift"];class p{constructor(e,t,n,r){this.element=e,this.index=t,this.eventTarget=n.eventTarget||e,this.eventName=n.eventName||function(e){const t=e.tagName.toLowerCase();if(t in m)return m[t](e)}(e)||g("missing event name"),this.eventOptions=n.eventOptions||{},this.identifier=n.identifier||g("missing identifier"),this.methodName=n.methodName||g("missing method name"),this.keyFilter=n.keyFilter||"",this.schema=r}static forToken(e,t){return new this(e.element,e.index,function(e){const t=e.trim().match(s)||[];let n=t[2],r=t[3];return r&&!["keydown","keyup","keypress"].includes(n)&&(n+=`.${r}`,r=""),{eventTarget:(i=t[4],"window"==i?window:"document"==i?document:void 0),eventName:n,eventOptions:t[7]?(o=t[7],o.split(":").reduce(((e,t)=>Object.assign(e,{[t.replace(/^!/,"")]:!/^!/.test(t)})),{})):{},identifier:t[5],methodName:t[6],keyFilter:t[1]||r};var i,o}(e.content),t)}toString(){const e=this.keyFilter?`.${this.keyFilter}`:"",t=this.eventTargetName?`@${this.eventTargetName}`:"";return`${this.eventName}${e}${t}->${this.identifier}#${this.methodName}`}shouldIgnoreKeyboardEvent(e){if(!this.keyFilter)return!1;const t=this.keyFilter.split("+");if(this.keyFilterDissatisfied(e,t))return!0;const n=t.filter((e=>!f.includes(e)))[0];return!!n&&(d(this.keyMappings,n)||g(`contains unknown key filter: ${this.keyFilter}`),this.keyMappings[n].toLowerCase()!==e.key.toLowerCase())}shouldIgnoreMouseEvent(e){if(!this.keyFilter)return!1;const t=[this.keyFilter];return!!this.keyFilterDissatisfied(e,t)}get params(){const e={},t=new RegExp(`^data-${this.identifier}-(.+)-param$`,"i");for(const{name:n,value:r}of Array.from(this.element.attributes)){const i=n.match(t),o=i&&i[1];o&&(e[a(o)]=v(r))}return e}get eventTargetName(){return(e=this.eventTarget)==window?"window":e==document?"document":void 0;var e}get keyMappings(){return this.schema.keyMappings}keyFilterDissatisfied(e,t){const[n,r,i,o]=f.map((e=>t.includes(e)));return e.metaKey!==n||e.ctrlKey!==r||e.altKey!==i||e.shiftKey!==o}}const m={a:()=>"click",button:()=>"click",form:()=>"submit",details:()=>"toggle",input:e=>"submit"==e.getAttribute("type")?"click":"input",select:()=>"change",textarea:()=>"input"};function g(e){throw new Error(e)}function v(e){try{return JSON.parse(e)}catch(t){return e}}class y{constructor(e,t){this.context=e,this.action=t}get index(){return this.action.index}get eventTarget(){return this.action.eventTarget}get eventOptions(){return this.action.eventOptions}get identifier(){return this.context.identifier}handleEvent(e){const t=this.prepareActionEvent(e);this.willBeInvokedByEvent(e)&&this.applyEventModifiers(t)&&this.invokeWithEvent(t)}get eventName(){return this.action.eventName}get method(){const e=this.controller[this.methodName];if("function"==typeof e)return e;throw new Error(`Action "${this.action}" references undefined method "${this.methodName}"`)}applyEventModifiers(e){const{element:t}=this.action,{actionDescriptorFilters:n}=this.context.application,{controller:r}=this.context;let i=!0;for(const[o,s]of Object.entries(this.eventOptions))if(o in n){const a=n[o];i=i&&a({name:o,value:s,event:e,element:t,controller:r})}return i}prepareActionEvent(e){return Object.assign(e,{params:this.action.params})}invokeWithEvent(e){const{target:t,currentTarget:n}=e;try{this.method.call(this.controller,e),this.context.logDebugActivity(this.methodName,{event:e,target:t,currentTarget:n,action:this.methodName})}catch(t){const{identifier:n,controller:r,element:i,index:o}=this,s={identifier:n,controller:r,element:i,index:o,event:e};this.context.handleError(t,`invoking action "${this.action}"`,s)}}willBeInvokedByEvent(e){const t=e.target;return!(e instanceof KeyboardEvent&&this.action.shouldIgnoreKeyboardEvent(e))&&!(e instanceof MouseEvent&&this.action.shouldIgnoreMouseEvent(e))&&(this.element===t||(t instanceof Element&&this.element.contains(t)?this.scope.containsElement(t):this.scope.containsElement(this.action.element)))}get controller(){return this.context.controller}get methodName(){return this.action.methodName}get element(){return this.scope.element}get scope(){return this.context.scope}}class b{constructor(e,t){this.mutationObserverInit={attributes:!0,childList:!0,subtree:!0},this.element=e,this.started=!1,this.delegate=t,this.elements=new Set,this.mutationObserver=new MutationObserver((e=>this.processMutations(e)))}start(){this.started||(this.started=!0,this.mutationObserver.observe(this.element,this.mutationObserverInit),this.refresh())}pause(e){this.started&&(this.mutationObserver.disconnect(),this.started=!1),e(),this.started||(this.mutationObserver.observe(this.element,this.mutationObserverInit),this.started=!0)}stop(){this.started&&(this.mutationObserver.takeRecords(),this.mutationObserver.disconnect(),this.started=!1)}refresh(){if(this.started){const e=new Set(this.matchElementsInTree());for(const t of Array.from(this.elements))e.has(t)||this.removeElement(t);for(const t of Array.from(e))this.addElement(t)}}processMutations(e){if(this.started)for(const t of e)this.processMutation(t)}processMutation(e){"attributes"==e.type?this.processAttributeChange(e.target,e.attributeName):"childList"==e.type&&(this.processRemovedNodes(e.removedNodes),this.processAddedNodes(e.addedNodes))}processAttributeChange(e,t){this.elements.has(e)?this.delegate.elementAttributeChanged&&this.matchElement(e)?this.delegate.elementAttributeChanged(e,t):this.removeElement(e):this.matchElement(e)&&this.addElement(e)}processRemovedNodes(e){for(const t of Array.from(e)){const e=this.elementFromNode(t);e&&this.processTree(e,this.removeElement)}}processAddedNodes(e){for(const t of Array.from(e)){const e=this.elementFromNode(t);e&&this.elementIsActive(e)&&this.processTree(e,this.addElement)}}matchElement(e){return this.delegate.matchElement(e)}matchElementsInTree(e=this.element){return this.delegate.matchElementsInTree(e)}processTree(e,t){for(const n of this.matchElementsInTree(e))t.call(this,n)}elementFromNode(e){if(e.nodeType==Node.ELEMENT_NODE)return e}elementIsActive(e){return e.isConnected==this.element.isConnected&&this.element.contains(e)}addElement(e){this.elements.has(e)||this.elementIsActive(e)&&(this.elements.add(e),this.delegate.elementMatched&&this.delegate.elementMatched(e))}removeElement(e){this.elements.has(e)&&(this.elements.delete(e),this.delegate.elementUnmatched&&this.delegate.elementUnmatched(e))}}class w{constructor(e,t,n){this.attributeName=t,this.delegate=n,this.elementObserver=new b(e,this)}get element(){return this.elementObserver.element}get selector(){return`[${this.attributeName}]`}start(){this.elementObserver.start()}pause(e){this.elementObserver.pause(e)}stop(){this.elementObserver.stop()}refresh(){this.elementObserver.refresh()}get started(){return this.elementObserver.started}matchElement(e){return e.hasAttribute(this.attributeName)}matchElementsInTree(e){const t=this.matchElement(e)?[e]:[],n=Array.from(e.querySelectorAll(this.selector));return t.concat(n)}elementMatched(e){this.delegate.elementMatchedAttribute&&this.delegate.elementMatchedAttribute(e,this.attributeName)}elementUnmatched(e){this.delegate.elementUnmatchedAttribute&&this.delegate.elementUnmatchedAttribute(e,this.attributeName)}elementAttributeChanged(e,t){this.delegate.elementAttributeValueChanged&&this.attributeName==t&&this.delegate.elementAttributeValueChanged(e,t)}}function O(e,t){let n=e.get(t);return n||(n=new Set,e.set(t,n)),n}class T{constructor(){this.valuesByKey=new Map}get keys(){return Array.from(this.valuesByKey.keys())}get values(){return Array.from(this.valuesByKey.values()).reduce(((e,t)=>e.concat(Array.from(t))),[])}get size(){return Array.from(this.valuesByKey.values()).reduce(((e,t)=>e+t.size),0)}add(e,t){!function(e,t,n){O(e,t).add(n)}(this.valuesByKey,e,t)}delete(e,t){!function(e,t,n){O(e,t).delete(n),function(e,t){const n=e.get(t);null!=n&&0==n.size&&e.delete(t)}(e,t)}(this.valuesByKey,e,t)}has(e,t){const n=this.valuesByKey.get(e);return null!=n&&n.has(t)}hasKey(e){return this.valuesByKey.has(e)}hasValue(e){return Array.from(this.valuesByKey.values()).some((t=>t.has(e)))}getValuesForKey(e){const t=this.valuesByKey.get(e);return t?Array.from(t):[]}getKeysForValue(e){return Array.from(this.valuesByKey).filter((([t,n])=>n.has(e))).map((([e,t])=>e))}}class S{constructor(e,t,n,r){this._selector=t,this.details=r,this.elementObserver=new b(e,this),this.delegate=n,this.matchesByElement=new T}get started(){return this.elementObserver.started}get selector(){return this._selector}set selector(e){this._selector=e,this.refresh()}start(){this.elementObserver.start()}pause(e){this.elementObserver.pause(e)}stop(){this.elementObserver.stop()}refresh(){this.elementObserver.refresh()}get element(){return this.elementObserver.element}matchElement(e){const{selector:t}=this;if(t){const n=e.matches(t);return this.delegate.selectorMatchElement?n&&this.delegate.selectorMatchElement(e,this.details):n}return!1}matchElementsInTree(e){const{selector:t}=this;if(t){const n=this.matchElement(e)?[e]:[],r=Array.from(e.querySelectorAll(t)).filter((e=>this.matchElement(e)));return n.concat(r)}return[]}elementMatched(e){const{selector:t}=this;t&&this.selectorMatched(e,t)}elementUnmatched(e){const t=this.matchesByElement.getKeysForValue(e);for(const n of t)this.selectorUnmatched(e,n)}elementAttributeChanged(e,t){const{selector:n}=this;if(n){const t=this.matchElement(e),r=this.matchesByElement.has(n,e);t&&!r?this.selectorMatched(e,n):!t&&r&&this.selectorUnmatched(e,n)}}selectorMatched(e,t){this.delegate.selectorMatched(e,t,this.details),this.matchesByElement.add(t,e)}selectorUnmatched(e,t){this.delegate.selectorUnmatched(e,t,this.details),this.matchesByElement.delete(t,e)}}class k{constructor(e,t){this.element=e,this.delegate=t,this.started=!1,this.stringMap=new Map,this.mutationObserver=new MutationObserver((e=>this.processMutations(e)))}start(){this.started||(this.started=!0,this.mutationObserver.observe(this.element,{attributes:!0,attributeOldValue:!0}),this.refresh())}stop(){this.started&&(this.mutationObserver.takeRecords(),this.mutationObserver.disconnect(),this.started=!1)}refresh(){if(this.started)for(const e of this.knownAttributeNames)this.refreshAttribute(e,null)}processMutations(e){if(this.started)for(const t of e)this.processMutation(t)}processMutation(e){const t=e.attributeName;t&&this.refreshAttribute(t,e.oldValue)}refreshAttribute(e,t){const n=this.delegate.getStringMapKeyForAttribute(e);if(null!=n){this.stringMap.has(e)||this.stringMapKeyAdded(n,e);const r=this.element.getAttribute(e);if(this.stringMap.get(e)!=r&&this.stringMapValueChanged(r,n,t),null==r){const t=this.stringMap.get(e);this.stringMap.delete(e),t&&this.stringMapKeyRemoved(n,e,t)}else this.stringMap.set(e,r)}}stringMapKeyAdded(e,t){this.delegate.stringMapKeyAdded&&this.delegate.stringMapKeyAdded(e,t)}stringMapValueChanged(e,t,n){this.delegate.stringMapValueChanged&&this.delegate.stringMapValueChanged(e,t,n)}stringMapKeyRemoved(e,t,n){this.delegate.stringMapKeyRemoved&&this.delegate.stringMapKeyRemoved(e,t,n)}get knownAttributeNames(){return Array.from(new Set(this.currentAttributeNames.concat(this.recordedAttributeNames)))}get currentAttributeNames(){return Array.from(this.element.attributes).map((e=>e.name))}get recordedAttributeNames(){return Array.from(this.stringMap.keys())}}class P{constructor(e,t,n){this.attributeObserver=new w(e,t,this),this.delegate=n,this.tokensByElement=new T}get started(){return this.attributeObserver.started}start(){this.attributeObserver.start()}pause(e){this.attributeObserver.pause(e)}stop(){this.attributeObserver.stop()}refresh(){this.attributeObserver.refresh()}get element(){return this.attributeObserver.element}get attributeName(){return this.attributeObserver.attributeName}elementMatchedAttribute(e){this.tokensMatched(this.readTokensForElement(e))}elementAttributeValueChanged(e){const[t,n]=this.refreshTokensForElement(e);this.tokensUnmatched(t),this.tokensMatched(n)}elementUnmatchedAttribute(e){this.tokensUnmatched(this.tokensByElement.getValuesForKey(e))}tokensMatched(e){e.forEach((e=>this.tokenMatched(e)))}tokensUnmatched(e){e.forEach((e=>this.tokenUnmatched(e)))}tokenMatched(e){this.delegate.tokenMatched(e),this.tokensByElement.add(e.element,e)}tokenUnmatched(e){this.delegate.tokenUnmatched(e),this.tokensByElement.delete(e.element,e)}refreshTokensForElement(e){const t=this.tokensByElement.getValuesForKey(e),n=this.readTokensForElement(e),r=function(e,t){const n=Math.max(e.length,t.length);return Array.from({length:n},((n,r)=>[e[r],t[r]]))}(t,n).findIndex((([e,t])=>{return r=t,!((n=e)&&r&&n.index==r.index&&n.content==r.content);var n,r}));return-1==r?[[],[]]:[t.slice(r),n.slice(r)]}readTokensForElement(e){const t=this.attributeName;return function(e,t,n){return e.trim().split(/\s+/).filter((e=>e.length)).map(((e,r)=>({element:t,attributeName:n,content:e,index:r})))}(e.getAttribute(t)||"",e,t)}}class E{constructor(e,t,n){this.tokenListObserver=new P(e,t,this),this.delegate=n,this.parseResultsByToken=new WeakMap,this.valuesByTokenByElement=new WeakMap}get started(){return this.tokenListObserver.started}start(){this.tokenListObserver.start()}stop(){this.tokenListObserver.stop()}refresh(){this.tokenListObserver.refresh()}get element(){return this.tokenListObserver.element}get attributeName(){return this.tokenListObserver.attributeName}tokenMatched(e){const{element:t}=e,{value:n}=this.fetchParseResultForToken(e);n&&(this.fetchValuesByTokenForElement(t).set(e,n),this.delegate.elementMatchedValue(t,n))}tokenUnmatched(e){const{element:t}=e,{value:n}=this.fetchParseResultForToken(e);n&&(this.fetchValuesByTokenForElement(t).delete(e),this.delegate.elementUnmatchedValue(t,n))}fetchParseResultForToken(e){let t=this.parseResultsByToken.get(e);return t||(t=this.parseToken(e),this.parseResultsByToken.set(e,t)),t}fetchValuesByTokenForElement(e){let t=this.valuesByTokenByElement.get(e);return t||(t=new Map,this.valuesByTokenByElement.set(e,t)),t}parseToken(e){try{return{value:this.delegate.parseValueForToken(e)}}catch(e){return{error:e}}}}class C{constructor(e,t){this.context=e,this.delegate=t,this.bindingsByAction=new Map}start(){this.valueListObserver||(this.valueListObserver=new E(this.element,this.actionAttribute,this),this.valueListObserver.start())}stop(){this.valueListObserver&&(this.valueListObserver.stop(),delete this.valueListObserver,this.disconnectAllActions())}get element(){return this.context.element}get identifier(){return this.context.identifier}get actionAttribute(){return this.schema.actionAttribute}get schema(){return this.context.schema}get bindings(){return Array.from(this.bindingsByAction.values())}connectAction(e){const t=new y(this.context,e);this.bindingsByAction.set(e,t),this.delegate.bindingConnected(t)}disconnectAction(e){const t=this.bindingsByAction.get(e);t&&(this.bindingsByAction.delete(e),this.delegate.bindingDisconnected(t))}disconnectAllActions(){this.bindings.forEach((e=>this.delegate.bindingDisconnected(e,!0))),this.bindingsByAction.clear()}parseValueForToken(e){const t=p.forToken(e,this.schema);if(t.identifier==this.identifier)return t}elementMatchedValue(e,t){this.connectAction(t)}elementUnmatchedValue(e,t){this.disconnectAction(t)}}class j{constructor(e,t){this.context=e,this.receiver=t,this.stringMapObserver=new k(this.element,this),this.valueDescriptorMap=this.controller.valueDescriptorMap}start(){this.stringMapObserver.start(),this.invokeChangedCallbacksForDefaultValues()}stop(){this.stringMapObserver.stop()}get element(){return this.context.element}get controller(){return this.context.controller}getStringMapKeyForAttribute(e){if(e in this.valueDescriptorMap)return this.valueDescriptorMap[e].name}stringMapKeyAdded(e,t){const n=this.valueDescriptorMap[t];this.hasValue(e)||this.invokeChangedCallback(e,n.writer(this.receiver[e]),n.writer(n.defaultValue))}stringMapValueChanged(e,t,n){const r=this.valueDescriptorNameMap[t];null!==e&&(null===n&&(n=r.writer(r.defaultValue)),this.invokeChangedCallback(t,e,n))}stringMapKeyRemoved(e,t,n){const r=this.valueDescriptorNameMap[e];this.hasValue(e)?this.invokeChangedCallback(e,r.writer(this.receiver[e]),n):this.invokeChangedCallback(e,r.writer(r.defaultValue),n)}invokeChangedCallbacksForDefaultValues(){for(const{key:e,name:t,defaultValue:n,writer:r}of this.valueDescriptors)null==n||this.controller.data.has(e)||this.invokeChangedCallback(t,r(n),void 0)}invokeChangedCallback(e,t,n){const r=`${e}Changed`,i=this.receiver[r];if("function"==typeof i){const r=this.valueDescriptorNameMap[e];try{const e=r.reader(t);let o=n;n&&(o=r.reader(n)),i.call(this.receiver,e,o)}catch(e){throw e instanceof TypeError&&(e.message=`Stimulus Value "${this.context.identifier}.${r.name}" - ${e.message}`),e}}}get valueDescriptors(){const{valueDescriptorMap:e}=this;return Object.keys(e).map((t=>e[t]))}get valueDescriptorNameMap(){const e={};return Object.keys(this.valueDescriptorMap).forEach((t=>{const n=this.valueDescriptorMap[t];e[n.name]=n})),e}hasValue(e){const t=`has${l(this.valueDescriptorNameMap[e].name)}`;return this.receiver[t]}}class x{constructor(e,t){this.context=e,this.delegate=t,this.targetsByName=new T}start(){this.tokenListObserver||(this.tokenListObserver=new P(this.element,this.attributeName,this),this.tokenListObserver.start())}stop(){this.tokenListObserver&&(this.disconnectAllTargets(),this.tokenListObserver.stop(),delete this.tokenListObserver)}tokenMatched({element:e,content:t}){this.scope.containsElement(e)&&this.connectTarget(e,t)}tokenUnmatched({element:e,content:t}){this.disconnectTarget(e,t)}connectTarget(e,t){var n;this.targetsByName.has(t,e)||(this.targetsByName.add(t,e),null===(n=this.tokenListObserver)||void 0===n||n.pause((()=>this.delegate.targetConnected(e,t))))}disconnectTarget(e,t){var n;this.targetsByName.has(t,e)&&(this.targetsByName.delete(t,e),null===(n=this.tokenListObserver)||void 0===n||n.pause((()=>this.delegate.targetDisconnected(e,t))))}disconnectAllTargets(){for(const e of this.targetsByName.keys)for(const t of this.targetsByName.getValuesForKey(e))this.disconnectTarget(t,e)}get attributeName(){return`data-${this.context.identifier}-target`}get element(){return this.context.element}get scope(){return this.context.scope}}function A(e,t){const n=M(e);return Array.from(n.reduce(((e,n)=>(function(e,t){const n=e[t];return Array.isArray(n)?n:[]}(n,t).forEach((t=>e.add(t))),e)),new Set))}function M(e){const t=[];for(;e;)t.push(e),e=Object.getPrototypeOf(e);return t.reverse()}class L{constructor(e,t){this.started=!1,this.context=e,this.delegate=t,this.outletsByName=new T,this.outletElementsByName=new T,this.selectorObserverMap=new Map,this.attributeObserverMap=new Map}start(){this.started||(this.outletDefinitions.forEach((e=>{this.setupSelectorObserverForOutlet(e),this.setupAttributeObserverForOutlet(e)})),this.started=!0,this.dependentContexts.forEach((e=>e.refresh())))}refresh(){this.selectorObserverMap.forEach((e=>e.refresh())),this.attributeObserverMap.forEach((e=>e.refresh()))}stop(){this.started&&(this.started=!1,this.disconnectAllOutlets(),this.stopSelectorObservers(),this.stopAttributeObservers())}stopSelectorObservers(){this.selectorObserverMap.size>0&&(this.selectorObserverMap.forEach((e=>e.stop())),this.selectorObserverMap.clear())}stopAttributeObservers(){this.attributeObserverMap.size>0&&(this.attributeObserverMap.forEach((e=>e.stop())),this.attributeObserverMap.clear())}selectorMatched(e,t,{outletName:n}){const r=this.getOutlet(e,n);r&&this.connectOutlet(r,e,n)}selectorUnmatched(e,t,{outletName:n}){const r=this.getOutletFromMap(e,n);r&&this.disconnectOutlet(r,e,n)}selectorMatchElement(e,{outletName:t}){const n=this.selector(t),r=this.hasOutlet(e,t),i=e.matches(`[${this.schema.controllerAttribute}~=${t}]`);return!!n&&r&&i&&e.matches(n)}elementMatchedAttribute(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}elementAttributeValueChanged(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}elementUnmatchedAttribute(e,t){const n=this.getOutletNameFromOutletAttributeName(t);n&&this.updateSelectorObserverForOutlet(n)}connectOutlet(e,t,n){var r;this.outletElementsByName.has(n,t)||(this.outletsByName.add(n,e),this.outletElementsByName.add(n,t),null===(r=this.selectorObserverMap.get(n))||void 0===r||r.pause((()=>this.delegate.outletConnected(e,t,n))))}disconnectOutlet(e,t,n){var r;this.outletElementsByName.has(n,t)&&(this.outletsByName.delete(n,e),this.outletElementsByName.delete(n,t),null===(r=this.selectorObserverMap.get(n))||void 0===r||r.pause((()=>this.delegate.outletDisconnected(e,t,n))))}disconnectAllOutlets(){for(const e of this.outletElementsByName.keys)for(const t of this.outletElementsByName.getValuesForKey(e))for(const n of this.outletsByName.getValuesForKey(e))this.disconnectOutlet(n,t,e)}updateSelectorObserverForOutlet(e){const t=this.selectorObserverMap.get(e);t&&(t.selector=this.selector(e))}setupSelectorObserverForOutlet(e){const t=this.selector(e),n=new S(document.body,t,this,{outletName:e});this.selectorObserverMap.set(e,n),n.start()}setupAttributeObserverForOutlet(e){const t=this.attributeNameForOutletName(e),n=new w(this.scope.element,t,this);this.attributeObserverMap.set(e,n),n.start()}selector(e){return this.scope.outlets.getSelectorForOutletName(e)}attributeNameForOutletName(e){return this.scope.schema.outletAttributeForScope(this.identifier,e)}getOutletNameFromOutletAttributeName(e){return this.outletDefinitions.find((t=>this.attributeNameForOutletName(t)===e))}get outletDependencies(){const e=new T;return this.router.modules.forEach((t=>{A(t.definition.controllerConstructor,"outlets").forEach((n=>e.add(n,t.identifier)))})),e}get outletDefinitions(){return this.outletDependencies.getKeysForValue(this.identifier)}get dependentControllerIdentifiers(){return this.outletDependencies.getValuesForKey(this.identifier)}get dependentContexts(){const e=this.dependentControllerIdentifiers;return this.router.contexts.filter((t=>e.includes(t.identifier)))}hasOutlet(e,t){return!!this.getOutlet(e,t)||!!this.getOutletFromMap(e,t)}getOutlet(e,t){return this.application.getControllerForElementAndIdentifier(e,t)}getOutletFromMap(e,t){return this.outletsByName.getValuesForKey(t).find((t=>t.element===e))}get scope(){return this.context.scope}get schema(){return this.context.schema}get identifier(){return this.context.identifier}get application(){return this.context.application}get router(){return this.application.router}}class _{constructor(e,t){this.logDebugActivity=(e,t={})=>{const{identifier:n,controller:r,element:i}=this;t=Object.assign({identifier:n,controller:r,element:i},t),this.application.logDebugActivity(this.identifier,e,t)},this.module=e,this.scope=t,this.controller=new e.controllerConstructor(this),this.bindingObserver=new C(this,this.dispatcher),this.valueObserver=new j(this,this.controller),this.targetObserver=new x(this,this),this.outletObserver=new L(this,this);try{this.controller.initialize(),this.logDebugActivity("initialize")}catch(e){this.handleError(e,"initializing controller")}}connect(){this.bindingObserver.start(),this.valueObserver.start(),this.targetObserver.start(),this.outletObserver.start();try{this.controller.connect(),this.logDebugActivity("connect")}catch(e){this.handleError(e,"connecting controller")}}refresh(){this.outletObserver.refresh()}disconnect(){try{this.controller.disconnect(),this.logDebugActivity("disconnect")}catch(e){this.handleError(e,"disconnecting controller")}this.outletObserver.stop(),this.targetObserver.stop(),this.valueObserver.stop(),this.bindingObserver.stop()}get application(){return this.module.application}get identifier(){return this.module.identifier}get schema(){return this.application.schema}get dispatcher(){return this.application.dispatcher}get element(){return this.scope.element}get parentElement(){return this.element.parentElement}handleError(e,t,n={}){const{identifier:r,controller:i,element:o}=this;n=Object.assign({identifier:r,controller:i,element:o},n),this.application.handleError(e,`Error ${t}`,n)}targetConnected(e,t){this.invokeControllerMethod(`${t}TargetConnected`,e)}targetDisconnected(e,t){this.invokeControllerMethod(`${t}TargetDisconnected`,e)}outletConnected(e,t,n){this.invokeControllerMethod(`${c(n)}OutletConnected`,e,t)}outletDisconnected(e,t,n){this.invokeControllerMethod(`${c(n)}OutletDisconnected`,e,t)}invokeControllerMethod(e,...t){const n=this.controller;"function"==typeof n[e]&&n[e](...t)}}const I="function"==typeof Object.getOwnPropertySymbols?e=>[...Object.getOwnPropertyNames(e),...Object.getOwnPropertySymbols(e)]:Object.getOwnPropertyNames,F=(()=>{function e(e){function t(){return Reflect.construct(e,arguments,new.target)}return t.prototype=Object.create(e.prototype,{constructor:{value:t}}),Reflect.setPrototypeOf(t,e),t}try{return function(){const t=e((function(){this.a.call(this)}));t.prototype.a=function(){},new t}(),e}catch(e){return e=>class extends e{}}})();class N{constructor(e,t){this.application=e,this.definition=function(e){return{identifier:e.identifier,controllerConstructor:(t=e.controllerConstructor,function(e,t){const n=F(e),r=function(e,t){return I(t).reduce(((n,r)=>{const i=function(e,t,n){const r=Object.getOwnPropertyDescriptor(e,n);if(!r||!("value"in r)){const e=Object.getOwnPropertyDescriptor(t,n).value;return r&&(e.get=r.get||e.get,e.set=r.set||e.set),e}}(e,t,r);return i&&Object.assign(n,{[r]:i}),n}),{})}(e.prototype,t);return Object.defineProperties(n.prototype,r),n}(t,function(e){return A(e,"blessings").reduce(((t,n)=>{const r=n(e);for(const e in r){const n=t[e]||{};t[e]=Object.assign(n,r[e])}return t}),{})}(t)))};var t}(t),this.contextsByScope=new WeakMap,this.connectedContexts=new Set}get identifier(){return this.definition.identifier}get controllerConstructor(){return this.definition.controllerConstructor}get contexts(){return Array.from(this.connectedContexts)}connectContextForScope(e){const t=this.fetchContextForScope(e);this.connectedContexts.add(t),t.connect()}disconnectContextForScope(e){const t=this.contextsByScope.get(e);t&&(this.connectedContexts.delete(t),t.disconnect())}fetchContextForScope(e){let t=this.contextsByScope.get(e);return t||(t=new _(this,e),this.contextsByScope.set(e,t)),t}}class D{constructor(e){this.scope=e}has(e){return this.data.has(this.getDataKey(e))}get(e){return this.getAll(e)[0]}getAll(e){return(this.data.get(this.getDataKey(e))||"").match(/[^\s]+/g)||[]}getAttributeName(e){return this.data.getAttributeNameForKey(this.getDataKey(e))}getDataKey(e){return`${e}-class`}get data(){return this.scope.data}}class R{constructor(e){this.scope=e}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get(e){const t=this.getAttributeNameForKey(e);return this.element.getAttribute(t)}set(e,t){const n=this.getAttributeNameForKey(e);return this.element.setAttribute(n,t),this.get(e)}has(e){const t=this.getAttributeNameForKey(e);return this.element.hasAttribute(t)}delete(e){if(this.has(e)){const t=this.getAttributeNameForKey(e);return this.element.removeAttribute(t),!0}return!1}getAttributeNameForKey(e){return`data-${this.identifier}-${u(e)}`}}class B{constructor(e){this.warnedKeysByObject=new WeakMap,this.logger=e}warn(e,t,n){let r=this.warnedKeysByObject.get(e);r||(r=new Set,this.warnedKeysByObject.set(e,r)),r.has(t)||(r.add(t),this.logger.warn(n,e))}}function V(e,t){return`[${e}~="${t}"]`}class q{constructor(e){this.scope=e}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get schema(){return this.scope.schema}has(e){return null!=this.find(e)}find(...e){return e.reduce(((e,t)=>e||this.findTarget(t)||this.findLegacyTarget(t)),void 0)}findAll(...e){return e.reduce(((e,t)=>[...e,...this.findAllTargets(t),...this.findAllLegacyTargets(t)]),[])}findTarget(e){const t=this.getSelectorForTargetName(e);return this.scope.findElement(t)}findAllTargets(e){const t=this.getSelectorForTargetName(e);return this.scope.findAllElements(t)}getSelectorForTargetName(e){return V(this.schema.targetAttributeForScope(this.identifier),e)}findLegacyTarget(e){const t=this.getLegacySelectorForTargetName(e);return this.deprecate(this.scope.findElement(t),e)}findAllLegacyTargets(e){const t=this.getLegacySelectorForTargetName(e);return this.scope.findAllElements(t).map((t=>this.deprecate(t,e)))}getLegacySelectorForTargetName(e){const t=`${this.identifier}.${e}`;return V(this.schema.targetAttribute,t)}deprecate(e,t){if(e){const{identifier:n}=this,r=this.schema.targetAttribute,i=this.schema.targetAttributeForScope(n);this.guide.warn(e,`target:${t}`,`Please replace ${r}="${n}.${t}" with ${i}="${t}". The ${r} attribute is deprecated and will be removed in a future version of Stimulus.`)}return e}get guide(){return this.scope.guide}}class ${constructor(e,t){this.scope=e,this.controllerElement=t}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get schema(){return this.scope.schema}has(e){return null!=this.find(e)}find(...e){return e.reduce(((e,t)=>e||this.findOutlet(t)),void 0)}findAll(...e){return e.reduce(((e,t)=>[...e,...this.findAllOutlets(t)]),[])}getSelectorForOutletName(e){const t=this.schema.outletAttributeForScope(this.identifier,e);return this.controllerElement.getAttribute(t)}findOutlet(e){const t=this.getSelectorForOutletName(e);if(t)return this.findElement(t,e)}findAllOutlets(e){const t=this.getSelectorForOutletName(e);return t?this.findAllElements(t,e):[]}findElement(e,t){return this.scope.queryElements(e).filter((n=>this.matchesElement(n,e,t)))[0]}findAllElements(e,t){return this.scope.queryElements(e).filter((n=>this.matchesElement(n,e,t)))}matchesElement(e,t,n){const r=e.getAttribute(this.scope.schema.controllerAttribute)||"";return e.matches(t)&&r.split(" ").includes(n)}}class K{constructor(e,t,n,r){this.targets=new q(this),this.classes=new D(this),this.data=new R(this),this.containsElement=e=>e.closest(this.controllerSelector)===this.element,this.schema=e,this.element=t,this.identifier=n,this.guide=new B(r),this.outlets=new $(this.documentScope,t)}findElement(e){return this.element.matches(e)?this.element:this.queryElements(e).find(this.containsElement)}findAllElements(e){return[...this.element.matches(e)?[this.element]:[],...this.queryElements(e).filter(this.containsElement)]}queryElements(e){return Array.from(this.element.querySelectorAll(e))}get controllerSelector(){return V(this.schema.controllerAttribute,this.identifier)}get isDocumentScope(){return this.element===document.documentElement}get documentScope(){return this.isDocumentScope?this:new K(this.schema,document.documentElement,this.identifier,this.guide.logger)}}class z{constructor(e,t,n){this.element=e,this.schema=t,this.delegate=n,this.valueListObserver=new E(this.element,this.controllerAttribute,this),this.scopesByIdentifierByElement=new WeakMap,this.scopeReferenceCounts=new WeakMap}start(){this.valueListObserver.start()}stop(){this.valueListObserver.stop()}get controllerAttribute(){return this.schema.controllerAttribute}parseValueForToken(e){const{element:t,content:n}=e;return this.parseValueForElementAndIdentifier(t,n)}parseValueForElementAndIdentifier(e,t){const n=this.fetchScopesByIdentifierForElement(e);let r=n.get(t);return r||(r=this.delegate.createScopeForElementAndIdentifier(e,t),n.set(t,r)),r}elementMatchedValue(e,t){const n=(this.scopeReferenceCounts.get(t)||0)+1;this.scopeReferenceCounts.set(t,n),1==n&&this.delegate.scopeConnected(t)}elementUnmatchedValue(e,t){const n=this.scopeReferenceCounts.get(t);n&&(this.scopeReferenceCounts.set(t,n-1),1==n&&this.delegate.scopeDisconnected(t))}fetchScopesByIdentifierForElement(e){let t=this.scopesByIdentifierByElement.get(e);return t||(t=new Map,this.scopesByIdentifierByElement.set(e,t)),t}}class U{constructor(e){this.application=e,this.scopeObserver=new z(this.element,this.schema,this),this.scopesByIdentifier=new T,this.modulesByIdentifier=new Map}get element(){return this.application.element}get schema(){return this.application.schema}get logger(){return this.application.logger}get controllerAttribute(){return this.schema.controllerAttribute}get modules(){return Array.from(this.modulesByIdentifier.values())}get contexts(){return this.modules.reduce(((e,t)=>e.concat(t.contexts)),[])}start(){this.scopeObserver.start()}stop(){this.scopeObserver.stop()}loadDefinition(e){this.unloadIdentifier(e.identifier);const t=new N(this.application,e);this.connectModule(t);const n=e.controllerConstructor.afterLoad;n&&n.call(e.controllerConstructor,e.identifier,this.application)}unloadIdentifier(e){const t=this.modulesByIdentifier.get(e);t&&this.disconnectModule(t)}getContextForElementAndIdentifier(e,t){const n=this.modulesByIdentifier.get(t);if(n)return n.contexts.find((t=>t.element==e))}proposeToConnectScopeForElementAndIdentifier(e,t){const n=this.scopeObserver.parseValueForElementAndIdentifier(e,t);n?this.scopeObserver.elementMatchedValue(n.element,n):console.error(`Couldn't find or create scope for identifier: "${t}" and element:`,e)}handleError(e,t,n){this.application.handleError(e,t,n)}createScopeForElementAndIdentifier(e,t){return new K(this.schema,e,t,this.logger)}scopeConnected(e){this.scopesByIdentifier.add(e.identifier,e);const t=this.modulesByIdentifier.get(e.identifier);t&&t.connectContextForScope(e)}scopeDisconnected(e){this.scopesByIdentifier.delete(e.identifier,e);const t=this.modulesByIdentifier.get(e.identifier);t&&t.disconnectContextForScope(e)}connectModule(e){this.modulesByIdentifier.set(e.identifier,e),this.scopesByIdentifier.getValuesForKey(e.identifier).forEach((t=>e.connectContextForScope(t)))}disconnectModule(e){this.modulesByIdentifier.delete(e.identifier),this.scopesByIdentifier.getValuesForKey(e.identifier).forEach((t=>e.disconnectContextForScope(t)))}}const H={controllerAttribute:"data-controller",actionAttribute:"data-action",targetAttribute:"data-target",targetAttributeForScope:e=>`data-${e}-target`,outletAttributeForScope:(e,t)=>`data-${e}-${t}-outlet`,keyMappings:Object.assign(Object.assign({enter:"Enter",tab:"Tab",esc:"Escape",space:" ",up:"ArrowUp",down:"ArrowDown",left:"ArrowLeft",right:"ArrowRight",home:"Home",end:"End",page_up:"PageUp",page_down:"PageDown"},W("abcdefghijklmnopqrstuvwxyz".split("").map((e=>[e,e])))),W("0123456789".split("").map((e=>[e,e]))))};function W(e){return e.reduce(((e,[t,n])=>Object.assign(Object.assign({},e),{[t]:n})),{})}class J{constructor(e=document.documentElement,t=H){this.logger=console,this.debug=!1,this.logDebugActivity=(e,t,n={})=>{this.debug&&this.logFormattedMessage(e,t,n)},this.element=e,this.schema=t,this.dispatcher=new i(this),this.router=new U(this),this.actionDescriptorFilters=Object.assign({},o)}static start(e,t){const n=new this(e,t);return n.start(),n}async start(){await new Promise((e=>{"loading"==document.readyState?document.addEventListener("DOMContentLoaded",(()=>e())):e()})),this.logDebugActivity("application","starting"),this.dispatcher.start(),this.router.start(),this.logDebugActivity("application","start")}stop(){this.logDebugActivity("application","stopping"),this.dispatcher.stop(),this.router.stop(),this.logDebugActivity("application","stop")}register(e,t){this.load({identifier:e,controllerConstructor:t})}registerActionOption(e,t){this.actionDescriptorFilters[e]=t}load(e,...t){(Array.isArray(e)?e:[e,...t]).forEach((e=>{e.controllerConstructor.shouldLoad&&this.router.loadDefinition(e)}))}unload(e,...t){(Array.isArray(e)?e:[e,...t]).forEach((e=>this.router.unloadIdentifier(e)))}get controllers(){return this.router.contexts.map((e=>e.controller))}getControllerForElementAndIdentifier(e,t){const n=this.router.getContextForElementAndIdentifier(e,t);return n?n.controller:null}handleError(e,t,n){var r;this.logger.error("%s\n\n%o\n\n%o",t,e,n),null===(r=window.onerror)||void 0===r||r.call(window,t,"",0,0,e)}logFormattedMessage(e,t,n={}){n=Object.assign({application:this},n),this.logger.groupCollapsed(`${e} #${t}`),this.logger.log("details:",Object.assign({},n)),this.logger.groupEnd()}}function Z(e,t,n){return e.application.getControllerForElementAndIdentifier(t,n)}function G(e,t,n){let r=Z(e,t,n);return r||(e.application.router.proposeToConnectScopeForElementAndIdentifier(t,n),r=Z(e,t,n),r||void 0)}function Q([e,t],n){return function(e){const{token:t,typeDefinition:n}=e,r=`${u(t)}-value`,i=function(e){const{controller:t,token:n,typeDefinition:r}=e,i=function(e){const{controller:t,token:n,typeObject:r}=e,i=h(r.type),o=h(r.default),s=i&&o,a=i&&!o,c=!i&&o,l=X(r.type),u=Y(e.typeObject.default);if(a)return l;if(c)return u;if(l!==u)throw new Error(`The specified default value for the Stimulus Value "${t?`${t}.${n}`:n}" must match the defined type "${l}". The provided default value of "${r.default}" is of type "${u}".`);return s?l:void 0}({controller:t,token:n,typeObject:r}),o=Y(r),s=X(r),a=i||o||s;if(a)return a;throw new Error(`Unknown value type "${t?`${t}.${r}`:n}" for "${n}" value`)}(e);return{type:i,key:r,name:a(r),get defaultValue(){return function(e){const t=X(e);if(t)return ee[t];const n=d(e,"default"),r=d(e,"type"),i=e;if(n)return i.default;if(r){const{type:e}=i,t=X(e);if(t)return ee[t]}return e}(n)},get hasCustomDefaultValue(){return void 0!==Y(n)},reader:te[i],writer:ne[i]||ne.default}}({controller:n,token:e,typeDefinition:t})}function X(e){switch(e){case Array:return"array";case Boolean:return"boolean";case Number:return"number";case Object:return"object";case String:return"string"}}function Y(e){switch(typeof e){case"boolean":return"boolean";case"number":return"number";case"string":return"string"}return Array.isArray(e)?"array":"[object Object]"===Object.prototype.toString.call(e)?"object":void 0}const ee={get array(){return[]},boolean:!1,number:0,get object(){return{}},string:""},te={array(e){const t=JSON.parse(e);if(!Array.isArray(t))throw new TypeError(`expected value of type "array" but instead got value "${e}" of type "${Y(t)}"`);return t},boolean:e=>!("0"==e||"false"==String(e).toLowerCase()),number:e=>Number(e.replace(/_/g,"")),object(e){const t=JSON.parse(e);if(null===t||"object"!=typeof t||Array.isArray(t))throw new TypeError(`expected value of type "object" but instead got value "${e}" of type "${Y(t)}"`);return t},string:e=>e},ne={default:function(e){return`${e}`},array:re,object:re};function re(e){return JSON.stringify(e)}class ie{constructor(e){this.context=e}static get shouldLoad(){return!0}static afterLoad(e,t){}get application(){return this.context.application}get scope(){return this.context.scope}get element(){return this.scope.element}get identifier(){return this.scope.identifier}get targets(){return this.scope.targets}get outlets(){return this.scope.outlets}get classes(){return this.scope.classes}get data(){return this.scope.data}initialize(){}connect(){}disconnect(){}dispatch(e,{target:t=this.element,detail:n={},prefix:r=this.identifier,bubbles:i=!0,cancelable:o=!0}={}){const s=new CustomEvent(r?`${r}:${e}`:e,{detail:n,bubbles:i,cancelable:o});return t.dispatchEvent(s),s}}ie.blessings=[function(e){return A(e,"classes").reduce(((e,t)=>{return Object.assign(e,{[`${n=t}Class`]:{get(){const{classes:e}=this;if(e.has(n))return e.get(n);{const t=e.getAttributeName(n);throw new Error(`Missing attribute "${t}"`)}}},[`${n}Classes`]:{get(){return this.classes.getAll(n)}},[`has${l(n)}Class`]:{get(){return this.classes.has(n)}}});var n}),{})},function(e){return A(e,"targets").reduce(((e,t)=>{return Object.assign(e,{[`${n=t}Target`]:{get(){const e=this.targets.find(n);if(e)return e;throw new Error(`Missing target element "${n}" for "${this.identifier}" controller`)}},[`${n}Targets`]:{get(){return this.targets.findAll(n)}},[`has${l(n)}Target`]:{get(){return this.targets.has(n)}}});var n}),{})},function(e){const t=function(e,t){return M(e).reduce(((e,n)=>(e.push(...function(e,t){const n=e[t];return n?Object.keys(n).map((e=>[e,n[e]])):[]}(n,t)),e)),[])}(e,"values"),n={valueDescriptorMap:{get(){return t.reduce(((e,t)=>{const n=Q(t,this.identifier),r=this.data.getAttributeNameForKey(n.key);return Object.assign(e,{[r]:n})}),{})}}};return t.reduce(((e,t)=>Object.assign(e,function(e,t){const n=Q(e,void 0),{key:r,name:i,reader:o,writer:s}=n;return{[i]:{get(){const e=this.data.get(r);return null!==e?o(e):n.defaultValue},set(e){void 0===e?this.data.delete(r):this.data.set(r,s(e))}},[`has${l(i)}`]:{get(){return this.data.has(r)||n.hasCustomDefaultValue}}}}(t))),n)},function(e){return A(e,"outlets").reduce(((e,t)=>Object.assign(e,function(e){const t=c(e);return{[`${t}Outlet`]:{get(){const t=this.outlets.find(e),n=this.outlets.getSelectorForOutletName(e);if(t){const n=G(this,t,e);if(n)return n;throw new Error(`The provided outlet element is missing an outlet controller "${e}" instance for host controller "${this.identifier}"`)}throw new Error(`Missing outlet element "${e}" for host controller "${this.identifier}". Stimulus couldn't find a matching outlet element using selector "${n}".`)}},[`${t}Outlets`]:{get(){const t=this.outlets.findAll(e);return t.length>0?t.map((t=>{const n=G(this,t,e);if(n)return n;console.warn(`The provided outlet element is missing an outlet controller "${e}" instance for host controller "${this.identifier}"`,t)})).filter((e=>e)):[]}},[`${t}OutletElement`]:{get(){const t=this.outlets.find(e),n=this.outlets.getSelectorForOutletName(e);if(t)return t;throw new Error(`Missing outlet element "${e}" for host controller "${this.identifier}". Stimulus couldn't find a matching outlet element using selector "${n}".`)}},[`${t}OutletElements`]:{get(){return this.outlets.findAll(e)}},[`has${l(t)}Outlet`]:{get(){return this.outlets.has(e)}}}}(t))),{})}],ie.targets=[],ie.outlets=[],ie.values={}},228:(e,t,n)=>{n.d(t,{default:()=>yi});var r=n(379),i=n.n(r),o=n(795),s=n.n(o),a=n(569),c=n.n(a),l=n(565),u=n.n(l),h=n(216),d=n.n(h),f=n(589),p=n.n(f),m=n(989),g={};g.styleTagTransform=p(),g.setAttributes=u(),g.insert=c().bind(null,"head"),g.domAPI=s(),g.insertStyleElement=d(),i()(m.Z,g),m.Z&&m.Z.locals&&m.Z.locals;var v=n(599);function y(e,t){for(var n=0;n{var[t,n]=e;this[t]=n})),this}},{key:"shouldShowSuccessMessage",get:function(){return this.successMessage}}],null&&y(t.prototype,null),n&&y(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function w(e,t){for(var n=0;n{var[t,n]=e;if(!["primaryColor","secondaryColor","typography"].includes(t))throw new Error("Invalid style property: ".concat(t));if("typography"!==t&&!this.isHexOrRgba(n))throw new Error("Invalid color value: ".concat(n," for ").concat(t,". Colors must be hex or rgb/a."))})),this._style=e}},{key:"appearance",get:function(){return this._appearance},set:function(e){if(!this.isPlainObject(e))throw new Error("Appearance must be an object");Object.entries(e).forEach((e=>{var[t,n]=e;if(!["header","launcher"].includes(t))throw new Error("Invalid appearance property: ".concat(t));if(!this.isPlainObject(n))throw new Error("Appearance ".concat(t," must be an object"));Object.entries(n).forEach((e=>{var[n,r]=e;if("header"===t&&"name"!==n)throw new Error("Invalid appearance header property: ".concat(n));if("launcher"===t&&"iconUrl"!==n)throw new Error("Invalid appearance launcher property: ".concat(n));if(null!=r&&"string"!=typeof r)throw new Error("Invalid appearance ".concat(t,".").concat(n," value: ").concat(r))}))})),this._appearance=e}},{key:"whatsapp",get:function(){return this._whatsapp},set:function(e){if(!this.isPlainObject(e))throw new Error("WhatsApp must be an object");Object.entries(e).forEach((e=>{var[t,n]=e;if(!["number","restrictToChannel"].includes(t))throw new Error("Invalid WhatsApp property: ".concat(t));if(null!=n){if("number"===t&&"string"!=typeof n)throw new Error("Invalid WhatsApp number value: ".concat(n));if("restrictToChannel"===t&&"boolean"!=typeof n)throw new Error("Invalid WhatsApp restrictToChannel value: ".concat(n))}})),this._whatsapp=e}},{key:"mode",get:function(){return this._mode},set:function(e){if(!Object.values(M).includes(e))throw new Error("Invalid mode value: ".concat(e));this._mode=e}},{key:"behaviour",get:function(){return this._behaviour},set:function(e){if(null!=e){if("object"!=typeof e||Array.isArray(e))throw new Error("Invalid behaviour value: ".concat(e));this._behaviour=e}else this._behaviour=e}},{key:"hasBehaviourOverride",get:function(){return this._hasBehaviourOverride}},{key:"behaviourOverride",set:function(e){this._hasBehaviourOverride=!!e}},{key:"strategy",get:function(){return this._strategy?this._strategy:"body"==this.container?A.FIXED:A.ABSOLUTE},set:function(e){if(e&&!Object.values(A).includes(e))throw new Error("Invalid strategy value: ".concat(e));this._strategy=e}},{key:"assign",value:function(e){return e&&Object.entries(e).forEach((e=>{var[t,n]=e;this[t]=n})),this}},{key:"isHexOrRgba",value:function(e){return/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(e)||/^rgba?\(\s*\d{1,3},\s*\d{1,3},\s*\d{1,3},?\s*(0|1|0?\.\d+)?\s*\)$/.test(e)}},{key:"isPlainObject",value:function(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)}}],null&&j(t.prototype,null),n&&j(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function _(e,t){for(var n=0;n{var[t,n]=e;"forms"===t?this.forms=b.assign(n):"webchat"===t?this.webchat=L.assign(n):this[t]=n})),t&&(this.actionCableUrl=this.actionCableUrlForApiRoot(this.apiRoot))}return this}},{key:"locale",get:function(){return C.toString()},set:function(e){C.identifier=e}},{key:"endpoint",value:function(e){return"".concat(this.apiRoot,"/").concat(e)}},{key:"actionCableUrlForApiRoot",value:function(e){try{var t=new URL(e),n="https:"===t.protocol?"wss:":"ws:";return t.protocol=n,t.pathname="/cable",t.search="",t.hash="",t.toString()}catch(e){return this.actionCableUrl}}}],null&&_(t.prototype,null),n&&_(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function F(e){var t="function"==typeof Map?new Map:void 0;return F=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return N(e,arguments,B(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),R(r,e)},F(e)}function N(e,t,n){return N=D()?Reflect.construct.bind():function(e,t,n){var r=[null];r.push.apply(r,t);var i=new(Function.bind.apply(e,r));return n&&R(i,n.prototype),i},N.apply(null,arguments)}function D(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function R(e,t){return R=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},R(e,t)}function B(e){return B=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},B(e)}I.apiRoot="https://api.hellotext.com/v1",I.actionCableUrl="wss://www.hellotext.com/cable",I.autoGenerateSession=!0,I.session=null,I.forms=b,I.webchat=L;var V=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&R(e,t)}(o,e);var t,n,r,i=(n=o,r=D(),function(){var e,t=B(n);if(r){var i=B(this).constructor;e=Reflect.construct(t,arguments,i)}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function o(e){var t;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),(t=i.call(this,"".concat(e," is not valid. Please provide a valid event name"))).name="InvalidEvent",t}return t=o,Object.defineProperty(t,"prototype",{writable:!1}),t}(F(Error));function q(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function $(e){for(var t=1;tt===e))}}],(n=[{key:"addSubscriber",value:function(t,n){if(e.invalid(t))throw new V(t);this.subscribers=$($({},this.subscribers),{},{[t]:this.subscribers[t]?[...this.subscribers[t],n]:[n]})}},{key:"removeSubscriber",value:function(t,n){if(e.invalid(t))throw new V(t);this.subscribers[t]&&(this.subscribers[t]=this.subscribers[t].filter((e=>e!==n)))}},{key:"dispatch",value:function(e,t){var n;null===(n=this.subscribers[e])||void 0===n||n.forEach((e=>{e(t)}))}},{key:"listeners",get:function(){return 0!==Object.keys(this.subscribers).length}}])&&z(t.prototype,n),r&&z(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();function W(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function J(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:{},t=yield fetch(this.endpoint,{method:"POST",headers:Qt.headers,body:JSON.stringify(ve({session:Qt.session},e))});return new ie(t.ok,t)},i=function(){var e=this,t=arguments;return new Promise((function(n,i){var o=r.apply(e,t);function s(e){be(o,n,i,s,a,"next",e)}function a(e){be(o,n,i,s,a,"throw",e)}s(void 0)}))},function(){return i.apply(this,arguments)})}],null&&we(t.prototype,null),n&&we(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Se(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function ke(e,t){for(var n=0;n{var[n,r]=e;t.searchParams.append("style[".concat(n,"]"),r)})),this.appendWebchatOverrides(t),t.searchParams.append("placement",I.webchat.placement);var n=yield fetch(t,{method:"GET",headers:Qt.headers}),r=yield n.json();return Qt.business.data||(Qt.business.setData(r.business),Qt.business.setLocale(r.locale)),(new DOMParser).parseFromString(r.html,"text/html").querySelector("article")},function(){var t=this,n=arguments;return new Promise((function(r,i){var o=e.apply(t,n);function s(e){Se(o,r,i,s,a,"next",e)}function a(e){Se(o,r,i,s,a,"throw",e)}s(void 0)}))});return function(e){return t.apply(this,arguments)}}()},{key:"appendWebchatOverrides",value:function(e){var t,n,{appearance:r,whatsapp:i}=I.webchat;this.appendIfSupplied(e,"webchat[appearance][header][name]",null===(t=r.header)||void 0===t?void 0:t.name),this.appendIfSupplied(e,"webchat[appearance][launcher][icon_url]",null===(n=r.launcher)||void 0===n?void 0:n.iconUrl),this.appendIfSupplied(e,"webchat[handoff][identifier]",i.number),this.appendIfSupplied(e,"webchat[handoff][restrict_to_channel]",i.restrictToChannel)}},{key:"appendIfSupplied",value:function(e,t,n){null!=n&&e.searchParams.append(t,String(n))}}],n&&ke(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();const Ee=Pe;function Ce(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function je(e,t){for(var n=0;ne.href===t));if(n)return n.setAttribute(Fe,"true"),n;var r=document.createElement("link");return r.rel="stylesheet",r.href=e,r.setAttribute(Fe,"true"),this.waitForStylesheet(r),document.head.append(r),r}},{key:"stylesheetLinks",get:function(){return"undefined"==typeof document?[]:Array.from(document.querySelectorAll(this.stylesheetSelector))}},{key:"latestStylesheet",get:function(){return this.stylesheetLinks[this.stylesheetLinks.length-1]}},{key:"normalizedStylesheetUrl",value:function(e){try{return new URL(e,document.baseURI).href}catch(t){return e}}},{key:"waitForStylesheet",value:function(e){return e?this.stylesheetIsLoaded(e)?Promise.resolve(!0):"false"===e.dataset.hellotextStylesheetLoaded?Promise.resolve(!1):(e._hellotextStylesheetLoaded||(e._hellotextStylesheetLoaded=new Promise((t=>{var n,r=r=>{clearTimeout(n),e.removeEventListener("load",i),e.removeEventListener("error",o),e.dataset.hellotextStylesheetLoaded=r?"true":"false",t(r)},i=()=>r(this.stylesheetIsLoaded(e)),o=()=>r(!1);e.addEventListener("load",i),e.addEventListener("error",o),(n=setTimeout((()=>r(this.stylesheetIsLoaded(e))),1e4)).unref&&n.unref()}))),e._hellotextStylesheetLoaded):Promise.resolve(!1)}},{key:"stylesheetIsLoaded",value:function(e){return"true"===e.dataset.hellotextStylesheetLoaded||!!e.sheet}}],n&&Ie(t.prototype,n),r&&Ie(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();function De(e,t){for(var n=0;n{var[t,n]=e;return n})));$e.set("hello_utm",JSON.stringify(r))}}var t,n;return t=e,(n=[{key:"current",get:function(){try{return JSON.parse($e.get("hello_utm"))||{}}catch(e){return{}}}}])&&De(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Be(e,t){for(var n=0;n0&&void 0!==arguments[0]?arguments[0]:null;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.utm=new Re,this._url=t}var t,n,r;return t=e,r=[{key:"getRootDomain",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null;try{if(!e){var t;if("undefined"==typeof window||null===(t=window.location)||void 0===t||!t.hostname)return null;e=window.location.hostname}var n=e.split(".");if(n.length<=1)return e;for(var r of["myshopify.com","vtexcommercestable.com.br","myvtex.com","wixsite.com"]){var i=r.split(".");if(n.slice(-i.length).join(".")===r&&n.length>i.length)return".".concat(n.slice(-(i.length+1)).join("."))}var o=n[n.length-1],s=n[n.length-2];return n.length>2&&2===o.length&&s.length<=3?".".concat(n.slice(-3).join(".")):".".concat(n.slice(-2).join("."))}catch(e){return null}}}],(n=[{key:"url",get:function(){return null!==this._url&&void 0!==this._url?this._url:window.location.href}},{key:"title",get:function(){return document.title}},{key:"path",get:function(){if(this._url)try{return new URL(this._url).pathname}catch(e){return"/"}return window.location.pathname}},{key:"utmParams",get:function(){return this.utm.current}},{key:"trackingData",get:function(){return{page:{url:this.url,title:this.title,path:this.path},utm_params:this.utmParams}}},{key:"domain",get:function(){try{var t=this.url;if(!t)return null;var n=new URL(t).hostname;return e.getRootDomain(n)}catch(e){return null}}}])&&Be(t.prototype,n),r&&Be(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();function qe(e,t){for(var n=0;n\n ".concat(Qt.business.locale.white_label.powered_by,'\n\n \n \n Hellotext\n \n \n \n \n ')}});var lt=0;function ut(e){return"__private_"+lt+++"_"+e}var ht=ut("findOrCreateComponent"),dt=function(){function e(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),Object.defineProperty(this,ht,{value:ft}),this.data=t,this.element=n||document.querySelector('[data-hello-form="'.concat(this.id,'"]'))||document.createElement("form")}var t,n,r,i;return t=e,n=[{key:"mount",value:(r=function*(){var e,{ifCompleted:t=!0}=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(t&&this.hasBeenCompleted)return null===(e=this.element)||void 0===e||e.remove(),Qt.eventEmitter.dispatch("form:completed",function(e){for(var t=1;t{this.element.setAttribute(e.name,e.value)})),document.contains(this.element)||document.body.appendChild(this.element),Qt.business.features.white_label||this.element.prepend(nt.build())},i=function(){var e=this,t=arguments;return new Promise((function(n,i){var o=r.apply(e,t);function s(e){ot(o,n,i,s,a,"next",e)}function a(e){ot(o,n,i,s,a,"throw",e)}s(void 0)}))},function(){return i.apply(this,arguments)})},{key:"buildHeader",value:function(e){var t=ct(this,ht)[ht]("[data-form-header]","header");t.innerHTML=e.content,this.element.querySelector("[data-form-header]")?this.element.querySelector("[data-form-header]").replaceWith(t):this.element.prepend(t)}},{key:"buildInputs",value:function(e){var t=ct(this,ht)[ht]("[data-form-inputs]","main");e.map((e=>Qe.build(e))).forEach((e=>t.appendChild(e))),this.element.querySelector("[data-form-inputs]")?this.element.querySelector("[data-form-inputs]").replaceWith(t):this.element.querySelector("[data-form-header]").insertAdjacentHTML("afterend",t.outerHTML)}},{key:"buildButton",value:function(e){var t=ct(this,ht)[ht]("[data-form-button]","button");t.innerText=e.text,t.setAttribute("data-action","click->hellotext--form#submit"),t.setAttribute("data-hellotext--form-target","button"),this.element.querySelector("[data-form-button]")?this.element.querySelector("[data-form-button]").replaceWith(t):this.element.querySelector("[data-form-inputs]").insertAdjacentHTML("afterend",t.outerHTML)}},{key:"buildFooter",value:function(e){var t=ct(this,ht)[ht]("[data-form-footer]","footer");t.innerHTML=e.content,this.element.querySelector("[data-form-footer]")?this.element.querySelector("[data-form-footer]").replaceWith(t):this.element.appendChild(t)}},{key:"markAsCompleted",value:function(e){var t={state:"completed",id:this.id,data:e,completedAt:(new Date).getTime()};localStorage.setItem("hello-form-".concat(this.id),JSON.stringify(t)),Qt.eventEmitter.dispatch("form:completed",t)}},{key:"hasBeenCompleted",get:function(){return null!==localStorage.getItem("hello-form-".concat(this.id))}},{key:"id",get:function(){return this.data.id}},{key:"localeAuthKey",get:function(){var e=this.data.steps[0];return e.inputs.some((e=>"email"===e.kind))&&e.inputs.some((e=>"phone"===e.kind))?"phone_and_email":e.inputs.some((e=>"email"===e.kind))?"email":e.inputs.some((e=>"phone"===e.kind))?"phone":"none"}},{key:"elementAttributes",get:function(){return[{name:"data-controller",value:"hellotext--form"},{name:"data-hello-form",value:this.id},{name:"data-hellotext--form-data-value",value:JSON.stringify(this.data)}]}}],n&&st(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function ft(e,t){var n=this.element.querySelector(e);if(n)return n.cloneNode(!0);var r=document.createElement(t);return r.setAttribute(e.replace("[","").replace("]",""),""),r}function pt(e){var t="function"==typeof Map?new Map:void 0;return pt=function(e){if(null===e||(n=e,-1===Function.toString.call(n).indexOf("[native code]")))return e;var n;if("function"!=typeof e)throw new TypeError("Super expression must either be null or a function");if(void 0!==t){if(t.has(e))return t.get(e);t.set(e,r)}function r(){return mt(e,arguments,yt(this).constructor)}return r.prototype=Object.create(e.prototype,{constructor:{value:r,enumerable:!1,writable:!0,configurable:!0}}),vt(r,e)},pt(e)}function mt(e,t,n){return mt=gt()?Reflect.construct.bind():function(e,t,n){var r=[null];r.push.apply(r,t);var i=new(Function.bind.apply(e,r));return n&&vt(i,n.prototype),i},mt.apply(null,arguments)}function gt(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}function vt(e,t){return vt=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},vt(e,t)}function yt(e){return yt=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},yt(e)}var bt=function(e){!function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&vt(e,t)}(o,e);var t,n,r,i=(n=o,r=gt(),function(){var e,t=yt(n);if(r){var i=yt(this).constructor;e=Reflect.construct(t,arguments,i)}else e=t.apply(this,arguments);return function(e,t){if(t&&("object"==typeof t||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(this,e)});function o(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,o),(e=i.call(this,"You need to initialize before tracking events. Call Hellotext.initialize and pass your public business id")).name="NotInitializedError",e}return t=o,Object.defineProperty(t,"prototype",{writable:!1}),t}(pt(Error));function wt(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function Ot(e,t){for(var n=0;n0&&this.collect()}},{key:"formMutationObserver",value:function(e){e.find((e=>"childList"===e.type&&e.addedNodes.length>0))&&Array.from(document.querySelectorAll("[data-hello-form]")).length>0&&this.collect()}},{key:"collect",value:(r=function*(){if(Qt.notInitialized)throw new bt;if(!this.fetching){if("undefined"==typeof document||!("querySelectorAll"in document))return console.warn("Document is not defined, collection is not possible. Please make sure to initialize the library after the document is loaded.");var e=function(e,t){if(!Object.prototype.hasOwnProperty.call(e,t))throw new TypeError("attempted to use private field on non-instance");return e}(this,kt)[kt];if(0!==e.length){var t=e.map((e=>me.get(e).then((e=>e.json()))));this.fetching=!0,yield Promise.all(t).then((e=>e.forEach(this.add))).then((()=>Qt.eventEmitter.dispatch("forms:collected",this))).then((()=>this.fetching=!1)),I.forms.autoMount&&this.forms.forEach((e=>e.mount()))}}},i=function(){var e=this,t=arguments;return new Promise((function(n,i){var o=r.apply(e,t);function s(e){wt(o,n,i,s,a,"next",e)}function a(e){wt(o,n,i,s,a,"throw",e)}s(void 0)}))},function(){return i.apply(this,arguments)})},{key:"forEach",value:function(e){this.forms.forEach(e)}},{key:"map",value:function(e){return this.forms.map(e)}},{key:"add",value:function(e){this.includes(e.id)||(Qt.business.data||(Qt.business.setData(e.business),Qt.business.setLocale(C.toString())),Qt.business.enabledWhitelist||console.warn("No whitelist has been configured. It is advised to whitelist the domain to avoid bots from submitting forms."),this.forms.push(new dt(e)))}},{key:"getById",value:function(e){return this.forms.find((t=>t.id===e))}},{key:"getByIndex",value:function(e){return this.forms[e]}},{key:"includes",value:function(e){return this.forms.some((t=>t.id===e))}},{key:"excludes",value:function(e){return!this.includes(e)}},{key:"length",get:function(){return this.forms.length}}],n&&Ot(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Et(){return Array.from(document.querySelectorAll("[data-hello-form]")).map((e=>e.dataset.helloForm)).filter(this.excludes)}function Ct(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function jt(e){return function(){var t=this,n=arguments;return new Promise((function(r,i){var o=e.apply(t,n);function s(e){Ct(o,r,i,s,a,"next",e)}function a(e){Ct(o,r,i,s,a,"throw",e)}s(void 0)}))}}function xt(e,t){for(var n=0;nBt(e))).filter((e=>void 0!==e));if(e instanceof Date)return e.toISOString();if("object"==typeof e){var n=Object.keys(e).sort(((e,t)=>e.localeCompare(t))).reduce(((t,n)=>{var r=Bt(e[n]);return void 0!==r&&(t[n]=r),t}),{});return Object.keys(n).length>0?n:void 0}return"number"==typeof e||"boolean"==typeof e?e:void 0}}function Vt(e,t){var n=Bt(function(e){for(var t=1;t2&&void 0!==arguments[2]?arguments[2]:{}))||{};return JSON.stringify(n)}function qt(){return(qt=Ft((function*(e){var t;if(null===(t=globalThis.crypto)||void 0===t||!t.subtle||"undefined"==typeof TextEncoder)return function(e){for(var t=5381,n=0;n>>0).toString(16))}(e);var n=yield globalThis.crypto.subtle.digest("SHA-256",(new TextEncoder).encode(e)),r=Array.from(new Uint8Array(n)).map((e=>e.toString(16).padStart(2,"0"))).join("");return"v1:".concat(r)}))).apply(this,arguments)}var $t=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e)}var t,n,r;return t=e,null,n=[{key:"matches",value:function(e,t){return!!e&&e===t}},{key:"generate",value:(r=Ft((function*(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};return yield function(e){return qt.apply(this,arguments)}(Vt(e,t,n))})),function(e,t){return r.apply(this,arguments)})}],n&&_t(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Kt(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function zt(e){for(var t=1;t1&&void 0!==arguments[1]?arguments[1]:{};this.business=new Ne(e),I.assign(t),Ze.initialize(),this.page=new Ve,this.forms=new Pt,this.query=new Q;var n=yield this.business.hydrate(),r=!1!==t.webchat&&this.mergeWebchatConfig(n&&n.webchat||{},t.webchat||{}),i=t.webchat&&!1!==t.webchat&&Object.prototype.hasOwnProperty.call(t.webchat,"behaviour");I.webchat.behaviourOverride=i,r&&r.id&&(I.webchat.assign(r),this.webchat=yield At.load(r.id)),"undefined"!=typeof MutationObserver&&this.forms.collectExistingFormsOnPage()})),function(e){return o.apply(this,arguments)})},{key:"mergeWebchatConfig",value:function(e,t){return this.deepMergePlainObjects(e,t)}},{key:"deepMergePlainObjects",value:function(e,t){var n=zt({},e);return Object.entries(t).forEach((e=>{var[t,r]=e;this.isPlainObject(r)&&this.isPlainObject(n[t])?n[t]=this.deepMergePlainObjects(n[t],r):n[t]=r})),n}},{key:"isPlainObject",value:function(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)}},{key:"track",value:(i=Wt((function*(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.notInitialized)throw new bt;var n=zt(zt({},t&&t.headers||{}),this.headers),r=zt(zt({},Lt.identificationData),t.user_parameters||{}),i=t&&t.url?new Ve(t.url):this.page,o=zt(zt({session:this.session,user_parameters:r,action:e},t),i.trackingData);return delete o.headers,yield Me.events.create({headers:n,body:o})})),function(e){return i.apply(this,arguments)})},{key:"identify",value:(r=Wt((function*(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=yield $t.generate(this.session,e,n);if($t.matches(Lt.fingerprint,r))return new ie(!0,{json:(t=Wt((function*(){return{already_identified:!0}})),function(){return t.apply(this,arguments)})});var i=yield Me.identifications.create(zt({user_id:e},n));return i.succeeded&&Lt.remember(e,n.source,r),i})),function(e){return r.apply(this,arguments)})},{key:"forget",value:function(){Lt.forget()}},{key:"on",value:function(e,t){this.eventEmitter.addSubscriber(e,t)}},{key:"removeEventListener",value:function(e,t){this.eventEmitter.removeSubscriber(e,t)}},{key:"session",get:function(){return Ze.session}},{key:"isInitialized",get:function(){return void 0!==Ze.session}},{key:"notInitialized",get:function(){return!this.business||void 0===this.business.id}},{key:"headers",get:function(){if(this.notInitialized)throw new bt;return{Authorization:"Bearer ".concat(this.business.id),Accept:"application/json","Content-Type":"application/json"}}}],n&&Jt(t,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();Gt.eventEmitter=new H,Gt.forms=void 0,Gt.business=void 0,Gt.webchat=void 0;const Qt=Gt;function Xt(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function Yt(e,t){for(var n=0;n{var{type:t,parameter:n}=e,r=this.inputTargets.find((e=>e.name===n));r.setCustomValidity(Qt.business.locale.errors[t]),r.reportValidity(),r.addEventListener("input",(()=>{r.setCustomValidity(""),r.reportValidity()}))})),this.showErrorMessages();this.buttonTarget.style.display="none",this.element.querySelectorAll("input").forEach((e=>e.disabled=!0)),this.completed()},i=function(){var e=this,t=arguments;return new Promise((function(n,i){var o=r.apply(e,t);function s(e){Xt(o,n,i,s,a,"next",e)}function a(e){Xt(o,n,i,s,a,"throw",e)}s(void 0)}))},function(e){return i.apply(this,arguments)})},{key:"completed",value:function(){if(this.form.markAsCompleted(this.formData),!I.forms.shouldShowSuccessMessage)return this.element.remove();"string"==typeof I.forms.successMessage?this.element.innerHTML=I.forms.successMessage:this.element.innerHTML=Qt.business.locale.forms[this.form.localeAuthKey]}},{key:"showErrorMessages",value:function(){this.inputTargets.forEach((e=>{var t=e.closest("article").querySelector("[data-error-container]");e.validity.valid?t.innerText="":t.innerText=e.validationMessage}))}},{key:"clearErrorMessages",value:function(){this.inputTargets.forEach((e=>{e.setCustomValidity(""),e.closest("article").querySelector("[data-error-container]").innerText=""}))}},{key:"inputTargetConnected",value:function(e){e.getAttribute("data-default-value")&&(e.value=e.getAttribute("data-default-value"))}},{key:"requiredInputs",get:function(){return this.inputTargets.filter((e=>e.required))}},{key:"invalid",get:function(){return!this.element.checkValidity()}}],n&&Yt(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),c}(v.Qr);function on(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function sn(e){for(var t=1;t0?e:this.getCardScrollAmount()}},{key:"getNextPageScrollLeft",value:function(){var e=this.getCurrentScrollLeft(),t=e+this.carouselContainerTarget.clientWidth,n=this.getCardMetrics().find((e=>e.end>t+1)),r=n?this.getPageAlignedScrollLeft(n.start):e+this.getPageScrollAmount(),i=e+this.getPageScrollAmount();return this.clampScrollLeft(r>e+1?r:i)}},{key:"getPreviousPageScrollLeft",value:function(){var e,t,n=this.getCurrentScrollLeft();if(n<=1)return 0;var r=Math.max(n-this.getPageScrollAmount(),0);if(r<=1)return 0;var i=this.getCardMetrics(),o=i.find((e=>e.start>=r-1&&e.starte.start{var t=this.getCardScrollLeft(e);return{start:t,end:t+e.offsetWidth}}))}},{key:"getCardScrollLeft",value:function(e){var t=e.getBoundingClientRect(),n=this.carouselContainerTarget.getBoundingClientRect();return t.left||t.width||n.left||n.width?t.left-n.left+this.carouselContainerTarget.scrollLeft:e.offsetLeft||0}},{key:"getCurrentScrollLeft",value:function(){return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft)}},{key:"clampScrollLeft",value:function(e){var t=Math.max(this.carouselContainerTarget.scrollWidth-this.carouselContainerTarget.clientWidth,0);return Math.min(Math.max(e,0),t)}},{key:"getGap",value:function(){var e=window.getComputedStyle(this.carouselContainerTarget),t=Number.parseFloat(e.columnGap||e.gap);return Number.isFinite(t)?t:16}},{key:"getFadeDistance",value:function(){return Number.isFinite(this.fadeDistanceValue)?this.fadeDistanceValue:64}},{key:"getPageStartOffset",value:function(){return Number.isFinite(this.pageStartOffsetValue)?this.pageStartOffsetValue:0}},{key:"updateFades",value:function(){if(this.hasCarouselContainerTarget){var e=Math.max(this.carouselContainerTarget.scrollWidth-this.carouselContainerTarget.clientWidth,0);if(e<=1)return this.hideFade(this.leftFadeTarget),void this.hideFade(this.rightFadeTarget);var t=Math.min(Math.max(this.carouselContainerTarget.scrollLeft,0),e),n=this.getFadeDistance();this.setFadeOpacity(this.leftFadeTarget,t/n),this.setFadeOpacity(this.rightFadeTarget,(e-t)/n)}}},{key:"setFadeOpacity",value:function(e,t){var n=Math.min(Math.max(t,0),1);n<=.05?this.hideFade(e):(e.classList.remove("hidden"),e.removeAttribute("disabled"),e.removeAttribute("tabindex"),e.setAttribute("aria-hidden","false"),e.style.opacity=n.toFixed(3),e.style.pointerEvents="auto")}},{key:"hideFade",value:function(e){e.style.opacity="0",e.style.pointerEvents="none",e.setAttribute("aria-hidden","true"),e.setAttribute("tabindex","-1"),"disabled"in e&&(e.disabled=!0),e.classList.add("hidden")}}],n&&cn(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),s}(v.Qr);dn.values={fadeDistance:{type:Number,default:64},id:String,pageStartOffset:{type:Number,default:0}},dn.targets=["carouselContainer","leftFade","rightFade","carouselCard"];const fn=["start","end"],pn=["top","right","bottom","left"].reduce(((e,t)=>e.concat(t,t+"-"+fn[0],t+"-"+fn[1])),[]),mn=Math.min,gn=Math.max,vn=Math.round,yn=Math.floor,bn=e=>({x:e,y:e}),wn={left:"right",right:"left",bottom:"top",top:"bottom"},On={start:"end",end:"start"};function Tn(e,t,n){return gn(e,mn(t,n))}function Sn(e,t){return"function"==typeof e?e(t):e}function kn(e){return e.split("-")[0]}function Pn(e){return e.split("-")[1]}function En(e){return"x"===e?"y":"x"}function Cn(e){return"y"===e?"height":"width"}const jn=new Set(["top","bottom"]);function xn(e){return jn.has(kn(e))?"y":"x"}function An(e){return En(xn(e))}function Mn(e,t,n){void 0===n&&(n=!1);const r=Pn(e),i=An(e),o=Cn(i);let s="x"===i?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return t.reference[o]>t.floating[o]&&(s=Dn(s)),[s,Dn(s)]}function Ln(e){return e.replace(/start|end/g,(e=>On[e]))}const _n=["left","right"],In=["right","left"],Fn=["top","bottom"],Nn=["bottom","top"];function Dn(e){return e.replace(/left|right|bottom|top/g,(e=>wn[e]))}function Rn(e){const{x:t,y:n,width:r,height:i}=e;return{width:r,height:i,top:n,left:t,right:t+r,bottom:n+i,x:t,y:n}}function Bn(e,t,n){let{reference:r,floating:i}=e;const o=xn(t),s=An(t),a=Cn(s),c=kn(t),l="y"===o,u=r.x+r.width/2-i.width/2,h=r.y+r.height/2-i.height/2,d=r[a]/2-i[a]/2;let f;switch(c){case"top":f={x:u,y:r.y-i.height};break;case"bottom":f={x:u,y:r.y+r.height};break;case"right":f={x:r.x+r.width,y:h};break;case"left":f={x:r.x-i.width,y:h};break;default:f={x:r.x,y:r.y}}switch(Pn(t)){case"start":f[s]-=d*(n&&l?-1:1);break;case"end":f[s]+=d*(n&&l?-1:1)}return f}async function Vn(e,t){var n;void 0===t&&(t={});const{x:r,y:i,platform:o,rects:s,elements:a,strategy:c}=e,{boundary:l="clippingAncestors",rootBoundary:u="viewport",elementContext:h="floating",altBoundary:d=!1,padding:f=0}=Sn(t,e),p=function(e){return"number"!=typeof e?function(e){return{top:0,right:0,bottom:0,left:0,...e}}(e):{top:e,right:e,bottom:e,left:e}}(f),m=a[d?"floating"===h?"reference":"floating":h],g=Rn(await o.getClippingRect({element:null==(n=await(null==o.isElement?void 0:o.isElement(m)))||n?m:m.contextElement||await(null==o.getDocumentElement?void 0:o.getDocumentElement(a.floating)),boundary:l,rootBoundary:u,strategy:c})),v="floating"===h?{x:r,y:i,width:s.floating.width,height:s.floating.height}:s.reference,y=await(null==o.getOffsetParent?void 0:o.getOffsetParent(a.floating)),b=await(null==o.isElement?void 0:o.isElement(y))&&await(null==o.getScale?void 0:o.getScale(y))||{x:1,y:1},w=Rn(o.convertOffsetParentRelativeRectToViewportRelativeRect?await o.convertOffsetParentRelativeRectToViewportRelativeRect({elements:a,rect:v,offsetParent:y,strategy:c}):v);return{top:(g.top-w.top+p.top)/b.y,bottom:(w.bottom-g.bottom+p.bottom)/b.y,left:(g.left-w.left+p.left)/b.x,right:(w.right-g.right+p.right)/b.x}}const qn=new Set(["left","top"]);function $n(){return"undefined"!=typeof window}function Kn(e){return Hn(e)?(e.nodeName||"").toLowerCase():"#document"}function zn(e){var t;return(null==e||null==(t=e.ownerDocument)?void 0:t.defaultView)||window}function Un(e){var t;return null==(t=(Hn(e)?e.ownerDocument:e.document)||window.document)?void 0:t.documentElement}function Hn(e){return!!$n()&&(e instanceof Node||e instanceof zn(e).Node)}function Wn(e){return!!$n()&&(e instanceof Element||e instanceof zn(e).Element)}function Jn(e){return!!$n()&&(e instanceof HTMLElement||e instanceof zn(e).HTMLElement)}function Zn(e){return!(!$n()||"undefined"==typeof ShadowRoot)&&(e instanceof ShadowRoot||e instanceof zn(e).ShadowRoot)}const Gn=new Set(["inline","contents"]);function Qn(e){const{overflow:t,overflowX:n,overflowY:r,display:i}=lr(e);return/auto|scroll|overlay|hidden|clip/.test(t+r+n)&&!Gn.has(i)}const Xn=new Set(["table","td","th"]);function Yn(e){return Xn.has(Kn(e))}const er=[":popover-open",":modal"];function tr(e){return er.some((t=>{try{return e.matches(t)}catch(e){return!1}}))}const nr=["transform","translate","scale","rotate","perspective"],rr=["transform","translate","scale","rotate","perspective","filter"],ir=["paint","layout","strict","content"];function or(e){const t=sr(),n=Wn(e)?lr(e):e;return nr.some((e=>!!n[e]&&"none"!==n[e]))||!!n.containerType&&"normal"!==n.containerType||!t&&!!n.backdropFilter&&"none"!==n.backdropFilter||!t&&!!n.filter&&"none"!==n.filter||rr.some((e=>(n.willChange||"").includes(e)))||ir.some((e=>(n.contain||"").includes(e)))}function sr(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}const ar=new Set(["html","body","#document"]);function cr(e){return ar.has(Kn(e))}function lr(e){return zn(e).getComputedStyle(e)}function ur(e){return Wn(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}}function hr(e){if("html"===Kn(e))return e;const t=e.assignedSlot||e.parentNode||Zn(e)&&e.host||Un(e);return Zn(t)?t.host:t}function dr(e){const t=hr(e);return cr(t)?e.ownerDocument?e.ownerDocument.body:e.body:Jn(t)&&Qn(t)?t:dr(t)}function fr(e,t,n){var r;void 0===t&&(t=[]),void 0===n&&(n=!0);const i=dr(e),o=i===(null==(r=e.ownerDocument)?void 0:r.body),s=zn(i);if(o){const e=pr(s);return t.concat(s,s.visualViewport||[],Qn(i)?i:[],e&&n?fr(e):[])}return t.concat(i,fr(i,[],n))}function pr(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}function mr(e){const t=lr(e);let n=parseFloat(t.width)||0,r=parseFloat(t.height)||0;const i=Jn(e),o=i?e.offsetWidth:n,s=i?e.offsetHeight:r,a=vn(n)!==o||vn(r)!==s;return a&&(n=o,r=s),{width:n,height:r,$:a}}function gr(e){return Wn(e)?e:e.contextElement}function vr(e){const t=gr(e);if(!Jn(t))return bn(1);const n=t.getBoundingClientRect(),{width:r,height:i,$:o}=mr(t);let s=(o?vn(n.width):n.width)/r,a=(o?vn(n.height):n.height)/i;return s&&Number.isFinite(s)||(s=1),a&&Number.isFinite(a)||(a=1),{x:s,y:a}}const yr=bn(0);function br(e){const t=zn(e);return sr()&&t.visualViewport?{x:t.visualViewport.offsetLeft,y:t.visualViewport.offsetTop}:yr}function wr(e,t,n,r){void 0===t&&(t=!1),void 0===n&&(n=!1);const i=e.getBoundingClientRect(),o=gr(e);let s=bn(1);t&&(r?Wn(r)&&(s=vr(r)):s=vr(e));const a=function(e,t,n){return void 0===t&&(t=!1),!(!n||t&&n!==zn(e))&&t}(o,n,r)?br(o):bn(0);let c=(i.left+a.x)/s.x,l=(i.top+a.y)/s.y,u=i.width/s.x,h=i.height/s.y;if(o){const e=zn(o),t=r&&Wn(r)?zn(r):r;let n=e,i=pr(n);for(;i&&r&&t!==n;){const e=vr(i),t=i.getBoundingClientRect(),r=lr(i),o=t.left+(i.clientLeft+parseFloat(r.paddingLeft))*e.x,s=t.top+(i.clientTop+parseFloat(r.paddingTop))*e.y;c*=e.x,l*=e.y,u*=e.x,h*=e.y,c+=o,l+=s,n=zn(i),i=pr(n)}}return Rn({width:u,height:h,x:c,y:l})}function Or(e,t){const n=ur(e).scrollLeft;return t?t.left+n:wr(Un(e)).left+n}function Tr(e,t,n){void 0===n&&(n=!1);const r=e.getBoundingClientRect();return{x:r.left+t.scrollLeft-(n?0:Or(e,r)),y:r.top+t.scrollTop}}const Sr=new Set(["absolute","fixed"]);function kr(e,t,n){let r;if("viewport"===t)r=function(e,t){const n=zn(e),r=Un(e),i=n.visualViewport;let o=r.clientWidth,s=r.clientHeight,a=0,c=0;if(i){o=i.width,s=i.height;const e=sr();(!e||e&&"fixed"===t)&&(a=i.offsetLeft,c=i.offsetTop)}return{width:o,height:s,x:a,y:c}}(e,n);else if("document"===t)r=function(e){const t=Un(e),n=ur(e),r=e.ownerDocument.body,i=gn(t.scrollWidth,t.clientWidth,r.scrollWidth,r.clientWidth),o=gn(t.scrollHeight,t.clientHeight,r.scrollHeight,r.clientHeight);let s=-n.scrollLeft+Or(e);const a=-n.scrollTop;return"rtl"===lr(r).direction&&(s+=gn(t.clientWidth,r.clientWidth)-i),{width:i,height:o,x:s,y:a}}(Un(e));else if(Wn(t))r=function(e,t){const n=wr(e,!0,"fixed"===t),r=n.top+e.clientTop,i=n.left+e.clientLeft,o=Jn(e)?vr(e):bn(1);return{width:e.clientWidth*o.x,height:e.clientHeight*o.y,x:i*o.x,y:r*o.y}}(t,n);else{const n=br(e);r={x:t.x-n.x,y:t.y-n.y,width:t.width,height:t.height}}return Rn(r)}function Pr(e,t){const n=hr(e);return!(n===t||!Wn(n)||cr(n))&&("fixed"===lr(n).position||Pr(n,t))}function Er(e,t,n){const r=Jn(t),i=Un(t),o="fixed"===n,s=wr(e,!0,o,t);let a={scrollLeft:0,scrollTop:0};const c=bn(0);function l(){c.x=Or(i)}if(r||!r&&!o)if(("body"!==Kn(t)||Qn(i))&&(a=ur(t)),r){const e=wr(t,!0,o,t);c.x=e.x+t.clientLeft,c.y=e.y+t.clientTop}else i&&l();o&&!r&&i&&l();const u=!i||r||o?bn(0):Tr(i,a);return{x:s.left+a.scrollLeft-c.x-u.x,y:s.top+a.scrollTop-c.y-u.y,width:s.width,height:s.height}}function Cr(e){return"static"===lr(e).position}function jr(e,t){if(!Jn(e)||"fixed"===lr(e).position)return null;if(t)return t(e);let n=e.offsetParent;return Un(e)===n&&(n=n.ownerDocument.body),n}function xr(e,t){const n=zn(e);if(tr(e))return n;if(!Jn(e)){let t=hr(e);for(;t&&!cr(t);){if(Wn(t)&&!Cr(t))return t;t=hr(t)}return n}let r=jr(e,t);for(;r&&Yn(r)&&Cr(r);)r=jr(r,t);return r&&cr(r)&&Cr(r)&&!or(r)?n:r||function(e){let t=hr(e);for(;Jn(t)&&!cr(t);){if(or(t))return t;if(tr(t))return null;t=hr(t)}return null}(e)||n}const Ar={convertOffsetParentRelativeRectToViewportRelativeRect:function(e){let{elements:t,rect:n,offsetParent:r,strategy:i}=e;const o="fixed"===i,s=Un(r),a=!!t&&tr(t.floating);if(r===s||a&&o)return n;let c={scrollLeft:0,scrollTop:0},l=bn(1);const u=bn(0),h=Jn(r);if((h||!h&&!o)&&(("body"!==Kn(r)||Qn(s))&&(c=ur(r)),Jn(r))){const e=wr(r);l=vr(r),u.x=e.x+r.clientLeft,u.y=e.y+r.clientTop}const d=!s||h||o?bn(0):Tr(s,c,!0);return{width:n.width*l.x,height:n.height*l.y,x:n.x*l.x-c.scrollLeft*l.x+u.x+d.x,y:n.y*l.y-c.scrollTop*l.y+u.y+d.y}},getDocumentElement:Un,getClippingRect:function(e){let{element:t,boundary:n,rootBoundary:r,strategy:i}=e;const o=[..."clippingAncestors"===n?tr(t)?[]:function(e,t){const n=t.get(e);if(n)return n;let r=fr(e,[],!1).filter((e=>Wn(e)&&"body"!==Kn(e))),i=null;const o="fixed"===lr(e).position;let s=o?hr(e):e;for(;Wn(s)&&!cr(s);){const t=lr(s),n=or(s);n||"fixed"!==t.position||(i=null),(o?!n&&!i:!n&&"static"===t.position&&i&&Sr.has(i.position)||Qn(s)&&!n&&Pr(e,s))?r=r.filter((e=>e!==s)):i=t,s=hr(s)}return t.set(e,r),r}(t,this._c):[].concat(n),r],s=o[0],a=o.reduce(((e,n)=>{const r=kr(t,n,i);return e.top=gn(r.top,e.top),e.right=mn(r.right,e.right),e.bottom=mn(r.bottom,e.bottom),e.left=gn(r.left,e.left),e}),kr(t,s,i));return{width:a.right-a.left,height:a.bottom-a.top,x:a.left,y:a.top}},getOffsetParent:xr,getElementRects:async function(e){const t=this.getOffsetParent||xr,n=this.getDimensions,r=await n(e.floating);return{reference:Er(e.reference,await t(e.floating),e.strategy),floating:{x:0,y:0,width:r.width,height:r.height}}},getClientRects:function(e){return Array.from(e.getClientRects())},getDimensions:function(e){const{width:t,height:n}=mr(e);return{width:t,height:n}},getScale:vr,isElement:Wn,isRTL:function(e){return"rtl"===lr(e).direction}};function Mr(e,t){return e.x===t.x&&e.y===t.y&&e.width===t.width&&e.height===t.height}const Lr=function(e){return void 0===e&&(e=0),{name:"offset",options:e,async fn(t){var n,r;const{x:i,y:o,placement:s,middlewareData:a}=t,c=await async function(e,t){const{placement:n,platform:r,elements:i}=e,o=await(null==r.isRTL?void 0:r.isRTL(i.floating)),s=kn(n),a=Pn(n),c="y"===xn(n),l=qn.has(s)?-1:1,u=o&&c?-1:1,h=Sn(t,e);let{mainAxis:d,crossAxis:f,alignmentAxis:p}="number"==typeof h?{mainAxis:h,crossAxis:0,alignmentAxis:null}:{mainAxis:h.mainAxis||0,crossAxis:h.crossAxis||0,alignmentAxis:h.alignmentAxis};return a&&"number"==typeof p&&(f="end"===a?-1*p:p),c?{x:f*u,y:d*l}:{x:d*l,y:f*u}}(t,e);return s===(null==(n=a.offset)?void 0:n.placement)&&null!=(r=a.arrow)&&r.alignmentOffset?{}:{x:i+c.x,y:o+c.y,data:{...c,placement:s}}}}},_r=function(e){return void 0===e&&(e={}),{name:"autoPlacement",options:e,async fn(t){var n,r,i;const{rects:o,middlewareData:s,placement:a,platform:c,elements:l}=t,{crossAxis:u=!1,alignment:h,allowedPlacements:d=pn,autoAlignment:f=!0,...p}=Sn(e,t),m=void 0!==h||d===pn?function(e,t,n){return(e?[...n.filter((t=>Pn(t)===e)),...n.filter((t=>Pn(t)!==e))]:n.filter((e=>kn(e)===e))).filter((n=>!e||Pn(n)===e||!!t&&Ln(n)!==n))}(h||null,f,d):d,g=await Vn(t,p),v=(null==(n=s.autoPlacement)?void 0:n.index)||0,y=m[v];if(null==y)return{};const b=Mn(y,o,await(null==c.isRTL?void 0:c.isRTL(l.floating)));if(a!==y)return{reset:{placement:m[0]}};const w=[g[kn(y)],g[b[0]],g[b[1]]],O=[...(null==(r=s.autoPlacement)?void 0:r.overflows)||[],{placement:y,overflows:w}],T=m[v+1];if(T)return{data:{index:v+1,overflows:O},reset:{placement:T}};const S=O.map((e=>{const t=Pn(e.placement);return[e.placement,t&&u?e.overflows.slice(0,2).reduce(((e,t)=>e+t),0):e.overflows[0],e.overflows]})).sort(((e,t)=>e[1]-t[1])),k=(null==(i=S.filter((e=>e[2].slice(0,Pn(e[0])?2:3).every((e=>e<=0))))[0])?void 0:i[0])||S[0][0];return k!==a?{data:{index:v+1,overflows:O},reset:{placement:k}}:{}}}},Ir=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(t){const{x:n,y:r,placement:i}=t,{mainAxis:o=!0,crossAxis:s=!1,limiter:a={fn:e=>{let{x:t,y:n}=e;return{x:t,y:n}}},...c}=Sn(e,t),l={x:n,y:r},u=await Vn(t,c),h=xn(kn(i)),d=En(h);let f=l[d],p=l[h];if(o){const e="y"===d?"bottom":"right";f=Tn(f+u["y"===d?"top":"left"],f,f-u[e])}if(s){const e="y"===h?"bottom":"right";p=Tn(p+u["y"===h?"top":"left"],p,p-u[e])}const m=a.fn({...t,[d]:f,[h]:p});return{...m,data:{x:m.x-n,y:m.y-r,enabled:{[d]:o,[h]:s}}}}}},Fr=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(t){var n,r;const{placement:i,middlewareData:o,rects:s,initialPlacement:a,platform:c,elements:l}=t,{mainAxis:u=!0,crossAxis:h=!0,fallbackPlacements:d,fallbackStrategy:f="bestFit",fallbackAxisSideDirection:p="none",flipAlignment:m=!0,...g}=Sn(e,t);if(null!=(n=o.arrow)&&n.alignmentOffset)return{};const v=kn(i),y=xn(a),b=kn(a)===a,w=await(null==c.isRTL?void 0:c.isRTL(l.floating)),O=d||(b||!m?[Dn(a)]:function(e){const t=Dn(e);return[Ln(e),t,Ln(t)]}(a)),T="none"!==p;!d&&T&&O.push(...function(e,t,n,r){const i=Pn(e);let o=function(e,t,n){switch(e){case"top":case"bottom":return n?t?In:_n:t?_n:In;case"left":case"right":return t?Fn:Nn;default:return[]}}(kn(e),"start"===n,r);return i&&(o=o.map((e=>e+"-"+i)),t&&(o=o.concat(o.map(Ln)))),o}(a,m,p,w));const S=[a,...O],k=await Vn(t,g),P=[];let E=(null==(r=o.flip)?void 0:r.overflows)||[];if(u&&P.push(k[v]),h){const e=Mn(i,s,w);P.push(k[e[0]],k[e[1]])}if(E=[...E,{placement:i,overflows:P}],!P.every((e=>e<=0))){var C,j;const e=((null==(C=o.flip)?void 0:C.index)||0)+1,t=S[e];if(t&&("alignment"!==h||y===xn(t)||E.every((e=>xn(e.placement)!==y||e.overflows[0]>0))))return{data:{index:e,overflows:E},reset:{placement:t}};let n=null==(j=E.filter((e=>e.overflows[0]<=0)).sort(((e,t)=>e.overflows[1]-t.overflows[1]))[0])?void 0:j.placement;if(!n)switch(f){case"bestFit":{var x;const e=null==(x=E.filter((e=>{if(T){const t=xn(e.placement);return t===y||"y"===t}return!0})).map((e=>[e.placement,e.overflows.filter((e=>e>0)).reduce(((e,t)=>e+t),0)])).sort(((e,t)=>e[1]-t[1]))[0])?void 0:x[0];e&&(n=e);break}case"initialPlacement":n=a}if(i!==n)return{reset:{placement:n}}}return{}}}};var Nr=e=>{Object.assign(e,{show(){var e;null===(e=this.cancelBehaviourOpen)||void 0===e||e.call(this),this.openValue=!0},hide(){this.openValue=!1},toggle(){var e;null===(e=this.cancelBehaviourOpen)||void 0===e||e.call(this),this.openValue=!this.openValue},setupFloatingUI(e){var{trigger:t,popover:n,strategy:r}=e;this.floatingUICleanup=function(e,t,n,r){void 0===r&&(r={});const{ancestorScroll:i=!0,ancestorResize:o=!0,elementResize:s="function"==typeof ResizeObserver,layoutShift:a="function"==typeof IntersectionObserver,animationFrame:c=!1}=r,l=gr(e),u=i||o?[...l?fr(l):[],...fr(t)]:[];u.forEach((e=>{i&&e.addEventListener("scroll",n,{passive:!0}),o&&e.addEventListener("resize",n)}));const h=l&&a?function(e,t){let n,r=null;const i=Un(e);function o(){var e;clearTimeout(n),null==(e=r)||e.disconnect(),r=null}return function s(a,c){void 0===a&&(a=!1),void 0===c&&(c=1),o();const l=e.getBoundingClientRect(),{left:u,top:h,width:d,height:f}=l;if(a||t(),!d||!f)return;const p={rootMargin:-yn(h)+"px "+-yn(i.clientWidth-(u+d))+"px "+-yn(i.clientHeight-(h+f))+"px "+-yn(u)+"px",threshold:gn(0,mn(1,c))||1};let m=!0;function g(t){const r=t[0].intersectionRatio;if(r!==c){if(!m)return s();r?s(!1,r):n=setTimeout((()=>{s(!1,1e-7)}),1e3)}1!==r||Mr(l,e.getBoundingClientRect())||s(),m=!1}try{r=new IntersectionObserver(g,{...p,root:i.ownerDocument})}catch(e){r=new IntersectionObserver(g,p)}r.observe(e)}(!0),o}(l,n):null;let d,f=-1,p=null;s&&(p=new ResizeObserver((e=>{let[r]=e;r&&r.target===l&&p&&(p.unobserve(t),cancelAnimationFrame(f),f=requestAnimationFrame((()=>{var e;null==(e=p)||e.observe(t)}))),n()})),l&&!c&&p.observe(l),p.observe(t));let m=c?wr(e):null;return c&&function t(){const r=wr(e);m&&!Mr(m,r)&&n(),m=r,d=requestAnimationFrame(t)}(),n(),()=>{var e;u.forEach((e=>{i&&e.removeEventListener("scroll",n),o&&e.removeEventListener("resize",n)})),null==h||h(),null==(e=p)||e.disconnect(),p=null,c&&cancelAnimationFrame(d)}}(t,n,(()=>{((e,t,n)=>{const r=new Map,i={platform:Ar,...n},o={...i.platform,_c:r};return(async(e,t,n)=>{const{placement:r="bottom",strategy:i="absolute",middleware:o=[],platform:s}=n,a=o.filter(Boolean),c=await(null==s.isRTL?void 0:s.isRTL(t));let l=await s.getElementRects({reference:e,floating:t,strategy:i}),{x:u,y:h}=Bn(l,r,c),d=r,f={},p=0;for(let n=0;n{var{x:t,y:r,strategy:i}=e,o={left:"".concat(t,"px"),top:"".concat(r,"px"),position:i};Object.assign(n.style,o)}))}))},openValueChanged(){var e;this.disabledValue||(this.openValue?(null===(e=this.preparePopoverOpenAnimation)||void 0===e||e.call(this),this.popoverTarget.showPopover(),this.popoverTarget.setAttribute("aria-expanded","true"),this.onPopoverOpened&&this.onPopoverOpened()):(this.popoverTarget.hidePopover(),this.popoverTarget.removeAttribute("aria-expanded"),this.onPopoverClosed&&this.onPopoverClosed()))}})};function Dr(e,t,n,r,i,o,s){try{var a=e[o](s),c=a.value}catch(e){return void n(e)}a.done?t(c):Promise.resolve(c).then(r,i)}function Rr(e){return function(){var t=this,n=arguments;return new Promise((function(r,i){var o=e.apply(t,n);function s(e){Dr(o,r,i,s,a,"next",e)}function a(e){Dr(o,r,i,s,a,"throw",e)}s(void 0)}))}}function Br(e,t){for(var n=0;n{var[n,r]=e;t.searchParams.append(n,r)})),yield fetch(t,{method:"GET",headers:Qt.headers})})),function(e){return o.apply(this,arguments)})},{key:"create",value:(i=Ur((function*(e){var t=yield fetch(this.url,{method:"POST",headers:{Authorization:"Bearer ".concat(Qt.business.id)},body:e});return new ie(t.ok,t)})),function(e){return i.apply(this,arguments)})},{key:"markAsSeen",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,t=e?this.url+"/".concat(e):this.url+"/seen";fetch(t,{method:"PATCH",headers:Qt.headers,body:JSON.stringify({session:Qt.session})})}},{key:"url",get:function(){return e.endpoint.replace(":id",this.webchatId)}}],r=[{key:"endpoint",get:function(){return I.endpoint("public/webchats/:id/messages")}}],n&&Hr(t.prototype,n),r&&Hr(t,r),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Jr(e,t){for(var n=0;n{this.webSocket.send(JSON.stringify(i))}))}},{key:"onMessage",value:function(e){this.webSocket.addEventListener("message",(t=>{var n=JSON.parse(t.data),{type:r,message:i}=n;this.ignoredEvents.includes(r)||e(i)}))}},{key:"webSocket",get:function(){return e.webSocket?e.webSocket:e.webSocket=new WebSocket(I.actionCableUrl)}},{key:"ignoredEvents",get:function(){return["ping","confirm_subscription","welcome"]}}])&&Jr(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),e}();function Gr(e,t){for(var n=0;n{"message"===t.type&&e(t)}))}},{key:"onReaction",value:function(e){Qr(Yr(s.prototype),"onMessage",this).call(this,(t=>{"reaction.create"!==t.type&&"reaction.destroy"!==t.type||e(t)}))}},{key:"onTypingStart",value:function(e){Qr(Yr(s.prototype),"onMessage",this).call(this,(t=>{"started_typing"===t.type&&e(t)}))}},{key:"updateSubscriptionWith",value:function(e){this.unsubscribe(),setTimeout((()=>{this.conversation=e,this.subscribe()}),1e3)}}])&&Gr(t.prototype,n),Object.defineProperty(t,"prototype",{writable:!1}),s}(Zr);const ti=ei;var ni=e=>{Object.assign(e,{scheduleBehaviourOpen(){if(this.shouldAutoOpenFromBehaviour()){var e=1e3*Number(this.behaviourValue.delay_seconds||0);this.behaviourOpenTimeout=window.setTimeout((()=>{this.behaviourOpenTimeout=null,this.openValue||(this.openValue=!0,this.markBehaviourAutoOpened())}),e)}},cancelBehaviourOpen(){window.clearTimeout(this.behaviourOpenTimeout),this.behaviourOpenTimeout=null},shouldAutoOpenFromBehaviour(){var e=this.behaviourValue;return!(!e||"on_load"!==e.trigger||e.first_visit_only&&localStorage.getItem(this.firstVisitKey())||e.once_per_session&&sessionStorage.getItem(this.sessionKey()))},markBehaviourAutoOpened(){this.behaviourValue.first_visit_only&&localStorage.setItem(this.firstVisitKey(),"1"),this.behaviourValue.once_per_session&&sessionStorage.setItem(this.sessionKey(),"1")},firstVisitKey(){return"hellotext--webchat--".concat(this.idValue,"--auto-opened")},sessionKey(){return"hellotext--webchat--".concat(this.idValue,"--auto-opened-session")}})},ri=e=>{Object.assign(e,{setupOpeningSequence(){this.openingSequenceStarted=!1,this.openingSequenceCancelled=!1,this.openingSequenceTimeout=null,this.openingSequenceMessages=[],this.revealedOpeningSequenceMessageIds=[]},teardownOpeningSequence(){this.cancelOpeningSequence()},startOpeningSequence(){this.openingSequenceMessages=Array.from(this.openingSequenceMessageTargets||[]),this.openingSequenceCanStart()&&(this.openingSequenceStarted=!0,this.openingSequenceCancelled=!1,this.revealedOpeningSequenceMessageIds=[],this.playOpeningSequenceMessageAt(0))},openingSequenceCanStart(){return!this.conversationIdValue&&this.hasOpeningSequenceTarget&&this.openingSequenceMessages.length>0&&!this.openingSequenceStarted},playOpeningSequenceMessageAt(e){var t=this.openingSequenceMessages[e];if(t){var n=1e3*this.openingSequenceMessageDelay(t);this.openingSequenceTimeout=window.setTimeout((()=>{this.openingSequenceTimeout=null,this.openingSequenceCancelled||(this.revealOpeningSequenceMessage(t),this.playOpeningSequenceMessageAt(e+1))}),n)}},revealOpeningSequenceMessage(e){this.messagesContainerTarget.insertBefore(e,this.messageTemplateTarget),e.hidden=!1,this.recordOpeningSequenceMessage(e),this.scrollOpeningSequenceToBottom()},recordOpeningSequenceMessage(e){var t=e.dataset.openingSequenceMessageId;t&&!this.revealedOpeningSequenceMessageIds.includes(t)&&this.revealedOpeningSequenceMessageIds.push(t)},openingSequenceMessageDelay(e){var t=Number(e.dataset.delaySeconds||0);return Number.isFinite(t)?t:0},scrollOpeningSequenceToBottom(){this.messagesContainerTarget.scroll&&this.messagesContainerTarget.scroll({top:this.messagesContainerTarget.scrollHeight,behavior:"smooth"})},cancelOpeningSequence(){this.openingSequenceCancelled=!0,null!==this.openingSequenceTimeout&&void 0!==this.openingSequenceTimeout&&(window.clearTimeout(this.openingSequenceTimeout),this.openingSequenceTimeout=null)},appendOpeningSequenceMessageIds(e){this.cancelOpeningSequence(),(this.revealedOpeningSequenceMessageIds||[]).forEach((t=>{e.append("message[opening_sequence_message_ids][]",t)}))},clearRevealedOpeningSequenceMessageIds(){this.revealedOpeningSequenceMessageIds=[]}})},ii=e=>{Object.assign(e,{setupTeaser(){this.teaserCycleTimeout=null,this.teaserMessages=[],this.boundOnTeaserClick=this.boundOnTeaserClick||this.onTeaserClick.bind(this),this.hasTeaserTarget&&(this.teaserTarget.addEventListener("click",this.boundOnTeaserClick),this.startTeaserPresentation())},teardownTeaser(){this.stopTeaserCycle(),this.hasTeaserTarget&&this.boundOnTeaserClick&&this.teaserTarget.removeEventListener("click",this.boundOnTeaserClick)},collectTeaserMessages(){return this.hasTeaserTarget?Array.from(this.teaserTarget.querySelectorAll("[data-teaser-message]")):[]},startTeaserPresentation(){this.stopTeaserCycle(),this.teaserMessages=this.collectTeaserMessages(),this.hasTeaserTarget&&(0!==this.teaserMessages.length?this.openValue||this.conversationIdValue||this.hasRenderedConversationMessages()?this.dismissTeaserForSession():this.teaserSeenForSession()?this.hideTeaser():(this.teaserTarget.classList.remove("invisible"),this.showTeaserMessage(0),this.teaserMessages.length<2||this.scheduleNextTeaserMessage(0)):this.hideTeaser())},scheduleNextTeaserMessage(e){var t=e+1;if(!(t>=this.teaserMessages.length)){var n=this.teaserMessages[e],r=this.teaserPresentationDelay(n);this.teaserCycleTimeout=window.setTimeout((()=>{this.teaserCycleTimeout=null,this.showTeaserMessage(t),this.scheduleNextTeaserMessage(t)}),r)}},showTeaserMessage(e){this.teaserMessages.forEach(((t,n)=>{t.classList.toggle("hidden",n!==e)}))},stopTeaserCycle(){null!==this.teaserCycleTimeout&&void 0!==this.teaserCycleTimeout&&(window.clearTimeout(this.teaserCycleTimeout),this.teaserCycleTimeout=null)},teaserMessageDelay(e){var t=Number(e.dataset.delaySeconds||0);return Number.isFinite(t)?t:0},teaserPresentationDelay(e){return Math.max(1e3*this.teaserMessageDelay(e),250)},hasRenderedConversationMessages(){var e=[];try{e=Array.from(this.messageTargets||[])}catch(t){e=[]}return e.some((e=>e!==this.messageTemplateTarget))},teaserSeenKey(){var e=this.hasTeaserTarget?this.teaserTarget.dataset.teaserVersion:"",t=e?":".concat(e):"";return"hellotext:webchat:".concat(this.idValue||this.element.id,":teaser-seen").concat(t)},teaserSeenForSession(){try{return"true"===window.sessionStorage.getItem(this.teaserSeenKey())}catch(e){return!1}},markTeaserSeenForSession(){try{window.sessionStorage.setItem(this.teaserSeenKey(),"true")}catch(e){}},dismissTeaserForSession(){this.markTeaserSeenForSession(),this.hideTeaser()},hideTeaser(){this.stopTeaserCycle(),this.hasTeaserTarget&&this.teaserTarget.classList.add("invisible")},onTeaserClick(e){e.target.closest("a")||(this.dismissTeaserForSession(),this.show())}})};function oi(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function si(e){for(var t=1;t{this.messagesContainerTarget.scroll({top:this.messagesContainerTarget.scrollHeight,behavior:"instant"})}));var t=this.typingIndicatorKeepAliveValue;this.incomingTypingIndicatorTimeout=setTimeout((()=>{this.clearTypingIndicator()}),t)}},{key:"resetTypingIndicatorTimer",value:function(){if(this.typingIndicatorVisible){clearTimeout(this.incomingTypingIndicatorTimeout),clearTimeout(this.optimisticTypingTimeout);var e=this.typingIndicatorKeepAliveValue;this.incomingTypingIndicatorTimeout=setTimeout((()=>{this.clearTypingIndicator()}),e)}}},{key:"clearTypingIndicator",value:function(){this.hasTypingIndicatorTarget&&this.typingIndicatorTarget.remove(),this.typingIndicatorVisible=!1,clearTimeout(this.incomingTypingIndicatorTimeout),clearTimeout(this.optimisticTypingTimeout)}},{key:"onMessageInputChange",value:function(){this.resizeInput(),clearTimeout(this.typingIndicatorTimeout),this.hasSentTypingIndicator||(this.webChatChannel.startTypingIndicator(),this.hasSentTypingIndicator=!0),this.typingIndicatorTimeout=setTimeout((()=>{this.hasSentTypingIndicator=!1}),3e3)}},{key:"onOutboundMessageSent",value:function(e){var{data:t}=e,n={"message:sent":e=>{var t=(new DOMParser).parseFromString(e.element,"text/html").body.firstElementChild;this.localizeMessageTimestamps(t),this.typingIndicatorVisible&&this.hasTypingIndicatorTarget?this.messagesContainerTarget.insertBefore(t,this.typingIndicatorTarget):this.messagesContainerTarget.appendChild(t),t.scrollIntoView({behavior:"instant"})},"message:failed":e=>{var t=this.messagesContainerTarget.querySelector("#".concat(e.id));this.markMessageFailed(t,e.reason)}};n[t.type]?n[t.type](t):console.log("Unhandled message event: ".concat(t.type))}},{key:"onScroll",value:(l=li((function*(){if(!(this.messagesContainerTarget.scrollTop>300||!this.nextPageValue||this.fetchingNextPage)){this.fetchingNextPage=!0;var e=yield this.messagesAPI.index({page:this.nextPageValue,session:Qt.session}),{next:t,messages:n}=yield e.json();this.nextPageValue=t,this.oldScrollHeight=this.messagesContainerTarget.scrollHeight,n.forEach((e=>{var{body:t,attachments:n}=e,r=e.created_at||e.createdAt,i=document.createElement("div");i.innerHTML=t;var o=this.messageTemplateTarget.cloneNode(!0);o.setAttribute("data-hellotext--webchat-target","message"),o.style.removeProperty("display"),o.querySelector("[data-body]").innerHTML=i.innerHTML,"received"===e.state?o.classList.add("received"):o.classList.remove("received"),n&&n.forEach((e=>{var t,n=this.attachmentImageTarget.cloneNode(!0);n.removeAttribute("data-hellotext--webchat-target"),n.src=e,n.style.display="block",null===(t=this.messageAttachmentsContainer(o))||void 0===t||t.appendChild(n)})),o.setAttribute("data-body",t),this.localizeMessageTimestamp(o.querySelector("[data-message-timestamp]"),r),this.messagesContainerTarget.prepend(o)})),this.messagesContainerTarget.scroll({top:this.messagesContainerTarget.scrollHeight-this.oldScrollHeight,behavior:"instant"}),this.fetchingNextPage=!1}})),function(){return l.apply(this,arguments)})},{key:"onClickOutside",value:function(e){L.mode===M.POPOVER&&this.openValue&&e.target.nodeType&&!1===this.element.contains(e.target)&&(this.openValue=!1)}},{key:"closePopover",value:function(){this.clearPopoverOpenAnimation(),this.popoverTarget.classList.remove(...this.fadeOutClasses),this.openValue=!1}},{key:"preparePopoverOpenAnimation",value:function(){this.clearPopoverOpenAnimation(),this.popoverTarget.classList.remove(...this.fadeOutClasses),this.popoverTarget.classList.add("hellotext--webchat-popover-opening"),this.popoverOpenAnimationTimeout=setTimeout((()=>{this.popoverTarget.classList.remove("hellotext--webchat-popover-opening"),this.popoverOpenAnimationTimeout=null}),120)}},{key:"clearPopoverOpenAnimation",value:function(){var e;this.popoverOpenAnimationTimeout&&(clearTimeout(this.popoverOpenAnimationTimeout),this.popoverOpenAnimationTimeout=null),null===(e=this.popoverTarget)||void 0===e||e.classList.remove("hellotext--webchat-popover-opening")}},{key:"onPopoverOpened",value:function(){var e;this.popoverTarget.classList.remove(...this.fadeOutClasses),null===(e=this.dismissTeaserForSession)||void 0===e||e.call(this),this.onMobile||this.inputTarget.focus(),this.scrolled||(requestAnimationFrame((()=>{this.messagesContainerTarget.scroll({top:this.messagesContainerTarget.scrollHeight,behavior:"instant"})})),this.scrolled=!0),Qt.eventEmitter.dispatch("webchat:opened"),localStorage.setItem("hellotext--webchat--".concat(this.idValue),"opened"),this.messageTeaserValue&&(this.messageTeaserValue=null),this.startOpeningSequence(),"none"!==this.unreadCounterTarget.style.display&&(this.unreadCounterTarget.style.display="none",this.unreadCounterTarget.innerText="0",this.messagesAPI.markAsSeen())}},{key:"onPopoverClosed",value:function(){this.clearPopoverOpenAnimation(),Qt.eventEmitter.dispatch("webchat:closed"),localStorage.setItem("hellotext--webchat--".concat(this.idValue),"closed")}},{key:"onMessageReaction",value:function(e){var{message:t,reaction:n,type:r}=e,i=this.messageTargets.find((e=>e.dataset.id===t)).querySelector("[data-reactions]");if("reaction.destroy"===r)return i.querySelector('[data-id="'.concat(n.id,'"]')).remove();if(i.querySelector('[data-id="'.concat(n.id,'"]')))i.querySelector('[data-id="'.concat(n.id,'"]')).innerText=n.emoji;else{var o=document.createElement("span");o.innerText=n.emoji,o.setAttribute("data-id",n.id),i.appendChild(o)}}},{key:"onMessageReceived",value:function(e){var t,{id:n,body:r,attachments:i,teaser:o}=e,s=e.created_at||e.createdAt;if(this.claimMessageId(n)){if(null===(t=this.hideTeaser)||void 0===t||t.call(this),e.carousel)return this.insertCarouselMessage(e);var a=document.createElement("div");a.innerHTML=r;var c=this.messageTemplateTarget.cloneNode(!0);c.style.display="flex",c.querySelector("[data-body]").innerHTML=a.innerHTML,c.setAttribute("data-id",n),c.setAttribute("data-hellotext--webchat-target","message"),this.localizeMessageTimestamp(c.querySelector("[data-message-timestamp]"),s),i&&i.forEach((e=>{var t,n=this.attachmentImageTarget.cloneNode(!0);n.src=e,n.style.display="block",null===(t=this.messageAttachmentsContainer(c))||void 0===t||t.appendChild(n)})),this.clearTypingIndicator(),this.messagesContainerTarget.appendChild(c),Qt.eventEmitter.dispatch("webchat:message:received",si(si({},e),{},{body:c.querySelector("[data-body]").innerText})),c.scrollIntoView({behavior:"smooth"}),this.updateMessageTeaser(o),this.openValue?this.messagesAPI.markAsSeen(n):this.incrementUnreadCounter()}}},{key:"claimMessageId",value:function(e){var t=this.messageTargets||[];return!this.messageIds.has(e)&&(this.messageIds.add(e),!t.some((t=>t.dataset.id===e)))}},{key:"updateMessageTeaser",value:function(e){this.messageTeaserValue=e,this.messageTeaserValue&&this.hasTeaserTarget&&this.hasInboundMessageTeaserTarget&&this.hasInboundMessageTeaserBodyTarget&&(this.teaserMessageTargets.forEach((e=>e.classList.add("hidden"))),this.inboundMessageTeaserBodyTarget.innerHTML=this.messageTeaserValue,this.inboundMessageTeaserTarget.classList.remove("hidden"),this.teaserTarget.classList.toggle("invisible",this.openValue))}},{key:"insertCarouselMessage",value:function(e){var t,n=e.html,r=(new DOMParser).parseFromString(n,"text/html").body.firstElementChild;r.setAttribute("data-id",e.id),r.setAttribute("data-hellotext--webchat-target","message"),this.localizeMessageTimestamps(r),this.clearTypingIndicator(),this.messagesContainerTarget.appendChild(r),r.scrollIntoView({behavior:"smooth"}),Qt.eventEmitter.dispatch("webchat:message:received",si(si({},e),{},{body:(null===(t=r.querySelector("[data-body]"))||void 0===t?void 0:t.innerText)||""})),this.updateMessageTeaser(e.teaser),this.openValue?this.messagesAPI.markAsSeen(e.id):this.incrementUnreadCounter()}},{key:"resizeInput",value:function(){this.inputTarget.style.height="auto";var e=this.inputTarget.scrollHeight;this.inputTarget.style.height="".concat(Math.min(e,96),"px")}},{key:"sendQuickReplyMessage",value:(c=li((function*(e){var t,n,{detail:{id:r,product:i,buttonId:o,body:s,cardElement:a}}=e;null===(t=this.dismissTeaserForSession)||void 0===t||t.call(this);var c=new FormData;c.append("message[body]",s),r&&c.append("message[replied_to]",r),i&&c.append("message[product]",i),o&&c.append("message[button]",o),c.append("session",Qt.session),c.append("locale",C.toString()),this.appendOpeningSequenceMessageIds(c);var l,u=this.buildMessageElement(),h=null==a||null===(n=a.querySelector("img"))||void 0===n?void 0:n.cloneNode(!0);u.querySelector("[data-body]").innerText=s,h&&(h.removeAttribute("width"),h.removeAttribute("height"),null===(l=this.messageAttachmentsContainer(u))||void 0===l||l.appendChild(h)),this.typingIndicatorVisible&&this.hasTypingIndicatorTarget?this.messagesContainerTarget.insertBefore(u,this.typingIndicatorTarget):this.messagesContainerTarget.appendChild(u),u.scrollIntoView({behavior:"smooth"}),this.broadcastChannel.postMessage({type:"message:sent",element:u.outerHTML});var d=yield this.messagesAPI.create(c);if(d.failed)return clearTimeout(this.optimisticTypingTimeout),this.markMessageFailedFromResponse(d,u);var f=yield d.json();this.dispatch("set:id",{target:u,detail:f.id}),this.localizeMessageTimestamp(u.querySelector("[data-message-timestamp]"),f.created_at||f.createdAt),this.clearRevealedOpeningSequenceMessageIds();var p={id:f.id,body:s,attachments:h?[h.src]:[],replied_to:r,product:i,button:o,type:"quick_reply"};Qt.eventEmitter.dispatch("webchat:message:sent",p)})),function(e){return c.apply(this,arguments)})},{key:"sendTeaserQuickReply",value:(a=li((function*(e){var t;e.preventDefault(),e.stopPropagation();var n=e.currentTarget,r=(n.dataset.value||"").trim(),i=[n.dataset.text,n.textContent].map((e=>(e||"").trim())).find((e=>e.length>0)),o=r||i;if(o){null===(t=this.dismissTeaserForSession)||void 0===t||t.call(this),this.show();var s=(n.dataset.type||"").trim()||"quick_reply",a=new FormData;a.append("message[body]",o),a.append("session",Qt.session),a.append("locale",C.toString()),this.appendOpeningSequenceMessageIds(a);var c=this.buildMessageElement();c.querySelector("[data-body]").innerText=o,this.typingIndicatorVisible&&this.hasTypingIndicatorTarget?this.messagesContainerTarget.insertBefore(c,this.typingIndicatorTarget):this.messagesContainerTarget.appendChild(c),c.scrollIntoView({behavior:"smooth"}),this.broadcastChannel.postMessage({type:"message:sent",element:c.outerHTML}),this.typingIndicatorVisible||(clearTimeout(this.optimisticTypingTimeout),this.optimisticTypingTimeout=setTimeout((()=>{this.showOptimisticTypingIndicator()}),this.optimisticTypingIndicatorWaitValue));var l=yield this.messagesAPI.create(a);if(l.failed)return clearTimeout(this.optimisticTypingTimeout),this.markMessageFailedFromResponse(l,c);var u=yield l.json();c.setAttribute("data-id",u.id),this.localizeMessageTimestamp(c.querySelector("[data-message-timestamp]"),u.created_at||u.createdAt),this.clearRevealedOpeningSequenceMessageIds(),Qt.eventEmitter.dispatch("webchat:message:sent",{id:u.id,body:o,attachments:[],type:"quick_reply",teaser:{text:i||o,value:r||o,type:s}}),u.conversation&&u.conversation!==this.conversationIdValue&&(this.conversationIdValue=u.conversation,this.webChatChannel.updateSubscriptionWith(this.conversationIdValue)),this.typingIndicatorVisible&&this.resetTypingIndicatorTimer()}})),function(e){return a.apply(this,arguments)})},{key:"sendMessage",value:(s=li((function*(e){var t,n={body:this.inputTarget.value,attachments:this.files};if(0!==this.inputTarget.value.trim().length||0!==this.files.length){null===(t=this.dismissTeaserForSession)||void 0===t||t.call(this);var r=new FormData;this.inputTarget.value.trim().length>0?r.append("message[body]",this.inputTarget.value):delete n.body,this.files.forEach((e=>{r.append("message[attachments][]",e)})),r.append("session",Qt.session),r.append("locale",C.toString()),this.appendOpeningSequenceMessageIds(r);var i=this.buildMessageElement();this.inputTarget.value.trim().length>0?i.querySelector("[data-body]").innerText=this.inputTarget.value:i.querySelector("[data-message-bubble]").remove();var o=this.attachmentContainerTarget.querySelectorAll("img");o.length>0&&o.forEach((e=>{var t;null===(t=this.messageAttachmentsContainer(i))||void 0===t||t.appendChild(e.cloneNode(!0))})),this.typingIndicatorVisible&&this.hasTypingIndicatorTarget?this.messagesContainerTarget.insertBefore(i,this.typingIndicatorTarget):this.messagesContainerTarget.appendChild(i),i.scrollIntoView({behavior:"smooth"}),this.broadcastChannel.postMessage({type:"message:sent",element:i.outerHTML}),this.inputTarget.value="",this.resizeInput(),this.files=[],this.attachmentInputTarget.value="",this.attachmentContainerTarget.innerHTML="",this.attachmentContainerTarget.style.display="none",this.errorMessageContainerTarget.style.display="none",this.inputTarget.focus(),this.typingIndicatorVisible||(clearTimeout(this.optimisticTypingTimeout),this.optimisticTypingTimeout=setTimeout((()=>{this.showOptimisticTypingIndicator()}),this.optimisticTypingIndicatorWaitValue));var s=yield this.messagesAPI.create(r);if(s.failed)return clearTimeout(this.optimisticTypingTimeout),this.markMessageFailedFromResponse(s,i);var a=yield s.json();i.setAttribute("data-id",a.id),n.id=a.id,this.localizeMessageTimestamp(i.querySelector("[data-message-timestamp]"),a.created_at||a.createdAt),this.clearRevealedOpeningSequenceMessageIds(),Qt.eventEmitter.dispatch("webchat:message:sent",n),a.conversation!==this.conversationIdValue&&(this.conversationIdValue=a.conversation,this.webChatChannel.updateSubscriptionWith(this.conversationIdValue)),this.typingIndicatorVisible&&this.resetTypingIndicatorTimer(),this.attachmentContainerTarget.style.display=""}else e&&e.target&&e.preventDefault()})),function(e){return s.apply(this,arguments)})},{key:"buildMessageElement",value:function(){var e=this.messageTemplateTarget.cloneNode(!0);return e.id="hellotext--webchat--".concat(this.idValue,"--message--").concat(Date.now()),e.classList.add("received"),e.style.removeProperty("display"),e.setAttribute("data-controller","hellotext--message"),e.setAttribute("data-hellotext--webchat-target","message"),this.localizeMessageTimestamp(e.querySelector("[data-message-timestamp]"),new Date),e}},{key:"focusCompose",value:function(e){var{target:t}=e,n=["button","a","input","textarea","select","label",'[role="button"]',"em-emoji-picker",'[data-hellotext--webchat--emoji-target~="popover"]','[data-controller~="hellotext--webchat--emoji"]'].join(", ");if(this.hasInputTarget&&!t.closest(n)&&(e.preventDefault(),this.inputTarget.focus(),"number"==typeof this.inputTarget.selectionStart)){var r=this.inputTarget.value.length;this.inputTarget.setSelectionRange(r,r)}}},{key:"closePopoverFromHeader",value:function(e){var{target:t}=e;t.closest(".hellotext--webchat-header-channel-button, .hellotext--webchat-close-button")||(e.preventDefault(),this.closePopover())}},{key:"closePopoverOnEscape",value:function(e){var t,n;"Escape"===e.key&&this.openValue&&(e.preventDefault(),e.stopPropagation(),this.closePopover(),null===(t=this.triggerTarget)||void 0===t||null===(n=t.focus)||void 0===n||n.call(t))}},{key:"markMessageFailedFromResponse",value:(o=li((function*(e,t){var n=yield this.messageFailureReason(e);this.markMessageFailed(t,n),this.broadcastChannel.postMessage({type:"message:failed",id:t.id,reason:n})})),function(e,t){return o.apply(this,arguments)})},{key:"markMessageFailed",value:function(e,t){if(e&&(e.classList.add("failed"),t)){var n=e.querySelector("[data-message-timestamp]");n&&(n.textContent=t)}}},{key:"localizeMessageTimestamps",value:function(){var e,t,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.element;n&&(null!==(e=n.matches)&&void 0!==e&&e.call(n,"time[datetime][data-message-timestamp]")?[n]:Array.from((null===(t=n.querySelectorAll)||void 0===t?void 0:t.call(n,"time[datetime][data-message-timestamp]"))||[])).forEach((e=>this.localizeMessageTimestamp(e)))}},{key:"localizeMessageTimestamp",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null==e?void 0:e.getAttribute("datetime");if(e&&t){var n=t instanceof Date?t:new Date(t);Number.isNaN(n.getTime())||(e.setAttribute("datetime",n.toISOString()),e.textContent=this.formatMessageTimestamp(n))}}},{key:"formatMessageTimestamp",value:function(e){return this.constructor.messageTimestampFormatterFor(C.toString()).format(e)}},{key:"messageFailureReason",value:(i=li((function*(e){var t=(null==e?void 0:e.data)||(null==e?void 0:e.response),n=(null==t?void 0:t.statusText)||"Message failed";try{var r,i=null!=t&&t.clone?t.clone():t,o=yield null==i||null===(r=i.json)||void 0===r?void 0:r.call(i),s=this.messageFailureReasonFromPayload(o);if(s)return s}catch(e){}try{var a,c=null!=t&&t.clone?t.clone():t,l=yield null==c||null===(a=c.text)||void 0===a?void 0:a.call(c);return this.messageFailureReasonFromText(l)||n}catch(e){return n}})),function(e){return i.apply(this,arguments)})},{key:"messageFailureReasonFromText",value:function(e){if("string"!=typeof e)return null;var t=e.trim();if(!t||t.startsWith("<"))return null;try{return this.messageFailureReasonFromPayload(JSON.parse(t))||t}catch(e){return t}}},{key:"messageFailureReasonFromPayload",value:function(e){var t,n,r,i,o,s;return e?[null===(t=e.error)||void 0===t?void 0:t.message,e.message,null===(n=e.errors)||void 0===n?void 0:n.message,null===(r=e.errors)||void 0===r||null===(i=r[0])||void 0===i?void 0:i.message,null===(o=e.errors)||void 0===o||null===(s=o[0])||void 0===s?void 0:s.description].find((e=>"string"==typeof e&&e.trim().length>0)):null}},{key:"messageAttachmentsContainer",value:function(e){return e.querySelector("[data-attachments-container], [data-attachment-container]")}},{key:"incrementUnreadCounter",value:function(){this.unreadCounterTarget.style.display="flex";var e=(parseInt(this.unreadCounterTarget.innerText)||0)+1;this.unreadCounterTarget.innerText=Math.min(e,9)}},{key:"openAttachment",value:function(){this.attachmentInputTarget.click()}},{key:"onFileInputChange",value:function(){this.errorMessageContainerTarget.style.display="none";var e=Array.from(this.attachmentInputTarget.files);this.attachmentInputTarget.value="";var t=e.find((e=>{var t=e.type.split("/")[0];return["image","video","audio"].includes(t)?this.mediaValue[t].max_sizethis.createAttachmentElement(e))),this.inputTarget.focus()}},{key:"createAttachmentElement",value:function(e){var t=this.attachmentElement();if(this.attachmentContainerTarget.style.display="",t.setAttribute("data-name",e.name),e.type.startsWith("image/")){var n=this.attachmentImageTarget.cloneNode(!0);n.src=URL.createObjectURL(e),n.style.display="block",t.appendChild(n),this.attachmentContainerTarget.appendChild(t),this.attachmentContainerTarget.style.display="flex"}else{var r=t.querySelector("main");r.style.height="5rem",r.style.borderRadius="0.375rem",r.style.backgroundColor="#e5e7eb",r.style.padding="0.25rem",t.querySelector("p[data-attachment-name]").innerText=e.name,this.attachmentContainerTarget.appendChild(t),this.attachmentContainerTarget.style.display="flex"}}},{key:"removeAttachment",value:function(e){var{currentTarget:t}=e,n=t.closest("[data-hellotext--webchat-target='attachment']");this.files=this.files.filter((e=>e.name!==n.dataset.name)),this.attachmentInputTarget.value="",n.remove(),this.inputTarget.focus()}},{key:"attachmentTargetDisconnected",value:function(){0===this.attachmentTargets.length&&(this.attachmentContainerTarget.innerHTML="",this.attachmentContainerTarget.style.display="none")}},{key:"attachmentElement",value:function(){var e=this.attachmentTemplateTarget.cloneNode(!0);return e.removeAttribute("hidden"),e.style.display="flex",e.setAttribute("data-hellotext--webchat-target","attachment"),e}},{key:"onEmojiSelect",value:function(e){var{detail:t}=e,n=this.inputTarget.value,r=this.inputTarget.selectionStart,i=this.inputTarget.selectionEnd;this.inputTarget.value=n.slice(0,r)+t+n.slice(i),this.inputTarget.selectionStart=this.inputTarget.selectionEnd=r+t.length,this.inputTarget.focus()}},{key:"byteToMegabyte",value:function(e){return Math.ceil(e/1024/1024)}},{key:"middlewares",get:function(){return[Lr(this.offsetValue),Ir({padding:this.paddingValue}),Fr()]}},{key:"shouldOpenOnMount",get:function(){return"opened"===localStorage.getItem("hellotext--webchat--".concat(this.idValue))&&!this.onMobile}},{key:"onMobile",get:function(){return window.matchMedia("(max-width: ".concat(this.fullScreenThresholdValue,"px)")).matches}}],r=[{key:"messageTimestampFormatterFor",value:function(e){var t=e||"default";return this.messageTimestampFormatters[t]||(this.messageTimestampFormatters[t]=this.buildMessageTimestampFormatter(e)),this.messageTimestampFormatters[t]}},{key:"buildMessageTimestampFormatter",value:function(e){try{return new Intl.DateTimeFormat(e||void 0,mi)}catch(e){return new Intl.DateTimeFormat(void 0,mi)}}}],n&&ui(t.prototype,n),r&&ui(t,r),Object.defineProperty(t,"prototype",{writable:!1}),f}(v.Qr);gi.messageTimestampFormatters={},gi.values={id:String,conversationId:String,media:Object,fileSizeErrorMessage:String,placement:{type:String,default:"bottom-end"},open:{type:Boolean,default:!1},autoPlacement:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},nextPage:{type:Number,default:void 0},fullScreenThreshold:{type:Number,default:1024},typingIndicatorKeepAlive:{type:Number,default:3e4},offset:{type:Number,default:24},padding:{type:Number,default:24},optimisticTypingIndicatorWait:{type:Number,default:1e3},teaser:Object,messageTeaser:String,behaviour:Object},gi.classes=["fadeOut"],gi.targets=["trigger","popover","input","attachmentInput","attachmentButton","errorMessageContainer","attachmentTemplate","attachmentContainer","attachment","messageTemplate","messagesContainer","title","attachmentImage","footer","toolbar","message","unreadCounter","typingIndicator","typingIndicatorTemplate","teaser","teaserMessage","inboundMessageTeaser","inboundMessageTeaserBody","openingSequence","openingSequenceMessage"];var vi=v.Mx.start();vi.register("hellotext--form",rn),vi.register("hellotext--webchat",gi),vi.register("hellotext--webchat--emoji",Kr),vi.register("hellotext--message",dn),window.Hellotext=Qt;const yi=Qt},989:(e,t,n)=>{n.d(t,{Z:()=>a});var r=n(81),i=n.n(r),o=n(645),s=n.n(o)()(i());s.push([e.id,"form[data-hello-form] {\n position: relative;\n}\n\nform[data-hello-form] article [data-error-container] {\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: none;\n}\n\nform[data-hello-form] article:has(input:invalid) [data-error-container] {\n display: block;\n}\n\nform[data-hello-form] [data-logo-container] {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n position: absolute;\n right: 1rem;\n bottom: 1rem;\n}\n\nform[data-hello-form] [data-logo-container] small {\n margin: 0 0.3rem;\n}\n\nform[data-hello-form] [data-logo-container] [data-hello-brand] {\n width: 4rem;\n}\n",""]);const a=s},645:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",r=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),r&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),r&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,r,i,o){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(r)for(var a=0;a0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=o),n&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=n):u[2]=n),i&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=i):u[4]="".concat(i)),t.push(u))}},t}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var t=[];function n(e){for(var n=-1,r=0;r{var t={};e.exports=function(e,n){var r=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(n)}},216:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},565:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var r="";n.supports&&(r+="@supports (".concat(n.supports,") {")),n.media&&(r+="@media ".concat(n.media," {"));var i=void 0!==n.layer;i&&(r+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),r+=n.css,i&&(r+="}"),n.media&&(r+="}"),n.supports&&(r+="}");var o=n.sourceMap;o&&"undefined"!=typeof btoa&&(r+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),t.styleTagTransform(r,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}},589:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}}},o={};function s(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return i[e](n,n.exports,s),n.exports}s.m=i,s.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return s.d(t,{a:t}),t},t=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,s.t=function(n,r){if(1&r&&(n=this(n)),8&r)return n;if("object"==typeof n&&n){if(4&r&&n.__esModule)return n;if(16&r&&"function"==typeof n.then)return n}var i=Object.create(null);s.r(i);var o={};e=e||[null,t({}),t([]),t(t)];for(var a=2&r&&n;"object"==typeof a&&!~e.indexOf(a);a=t(a))Object.getOwnPropertyNames(a).forEach((e=>o[e]=()=>n[e]));return o.default=()=>n,s.d(i,o),i},s.d=(e,t)=>{for(var n in t)s.o(t,n)&&!s.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},s.f={},s.e=e=>Promise.all(Object.keys(s.f).reduce(((t,n)=>(s.f[n](e,t),t)),[])),s.u=e=>({34:"webchat-emoji-en",309:"webchat-emoji-es",853:"webchat-emoji"}[e]+".js"),s.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),s.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n={},r="Hellotext:",s.l=(e,t,i,o)=>{if(n[e])n[e].push(t);else{var a,c;if(void 0!==i)for(var l=document.getElementsByTagName("script"),u=0;u{a.onerror=a.onload=null,clearTimeout(f);var i=n[e];if(delete n[e],a.parentNode&&a.parentNode.removeChild(a),i&&i.forEach((e=>e(r))),t)return t(r)},f=setTimeout(d.bind(null,void 0,{type:"timeout",target:a}),12e4);a.onerror=d.bind(null,a.onerror),a.onload=d.bind(null,a.onload),c&&document.head.appendChild(a)}},s.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;s.g.importScripts&&(e=s.g.location+"");var t=s.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var n=t.getElementsByTagName("script");n.length&&(e=n[n.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),s.p=e})(),(()=>{var e={179:0};s.f.j=(t,n)=>{var r=s.o(e,t)?e[t]:void 0;if(0!==r)if(r)n.push(r[2]);else{var i=new Promise(((n,i)=>r=e[t]=[n,i]));n.push(r[2]=i);var o=s.p+s.u(t),a=new Error;s.l(o,(n=>{if(s.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var i=n&&("load"===n.type?"missing":n.type),o=n&&n.target&&n.target.src;a.message="Loading chunk "+t+" failed.\n("+i+": "+o+")",a.name="ChunkLoadError",a.type=i,a.request=o,r[1](a)}}),"chunk-"+t,t)}};var t=(t,n)=>{var r,i,[o,a,c]=n,l=0;if(o.some((t=>0!==e[t]))){for(r in a)s.o(a,r)&&(s.m[r]=a[r]);c&&c(s)}for(t&&t(n);l 0 ? scrollAmount : this.getCardScrollAmount(); + } + }, { + key: "getNextPageScrollLeft", + value: function getNextPageScrollLeft() { + const currentScrollLeft = this.getCurrentScrollLeft(); + const viewportRight = currentScrollLeft + this.carouselContainerTarget.clientWidth; + const cardMetrics = this.getCardMetrics(); + const nextCard = cardMetrics.find(card => card.end > viewportRight + 1); + const targetScrollLeft = nextCard ? this.getPageAlignedScrollLeft(nextCard.start) : currentScrollLeft + this.getPageScrollAmount(); + const fallbackScrollLeft = currentScrollLeft + this.getPageScrollAmount(); + return this.clampScrollLeft(targetScrollLeft > currentScrollLeft + 1 ? targetScrollLeft : fallbackScrollLeft); + } + }, { + key: "getPreviousPageScrollLeft", + value: function getPreviousPageScrollLeft() { + const currentScrollLeft = this.getCurrentScrollLeft(); + if (currentScrollLeft <= 1) return 0; + const targetThreshold = Math.max(currentScrollLeft - this.getPageScrollAmount(), 0); + if (targetThreshold <= 1) return 0; + const cardMetrics = this.getCardMetrics(); + const previousPageCard = cardMetrics.find(card => card.start >= targetThreshold - 1 && card.start < currentScrollLeft - 1); + const previousCard = [...cardMetrics].reverse().find(card => card.start < currentScrollLeft - 1); + return this.getPageAlignedScrollLeft((previousPageCard === null || previousPageCard === void 0 ? void 0 : previousPageCard.start) ?? (previousCard === null || previousCard === void 0 ? void 0 : previousCard.start) ?? 0); + } + }, { + key: "getPageAlignedScrollLeft", + value: function getPageAlignedScrollLeft(cardStart) { + const pageStartOffset = this.getPageStartOffset(); + if (cardStart <= pageStartOffset + 1) return 0; + return this.clampScrollLeft(cardStart - pageStartOffset); + } + }, { + key: "getCardMetrics", + value: function getCardMetrics() { + return Array.from(this.carouselContainerTarget.querySelectorAll('.message__carousel_card')).map(card => { + const start = this.getCardScrollLeft(card); + return { + start, + end: start + card.offsetWidth + }; + }); + } + }, { + key: "getCardScrollLeft", + value: function getCardScrollLeft(card) { + const cardRect = card.getBoundingClientRect(); + const containerRect = this.carouselContainerTarget.getBoundingClientRect(); + if (cardRect.left || cardRect.width || containerRect.left || containerRect.width) { + return cardRect.left - containerRect.left + this.carouselContainerTarget.scrollLeft; + } + return card.offsetLeft || 0; + } + }, { + key: "getCurrentScrollLeft", + value: function getCurrentScrollLeft() { + return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft); + } + }, { + key: "clampScrollLeft", + value: function clampScrollLeft(scrollLeft) { + const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0); + return Math.min(Math.max(scrollLeft, 0), maxScroll); + } + }, { + key: "getGap", + value: function getGap() { + const styles = window.getComputedStyle(this.carouselContainerTarget); + const gap = Number.parseFloat(styles.columnGap || styles.gap); + return Number.isFinite(gap) ? gap : 16; + } + }, { + key: "getFadeDistance", + value: function getFadeDistance() { + return Number.isFinite(this.fadeDistanceValue) ? this.fadeDistanceValue : 64; + } + }, { + key: "getPageStartOffset", + value: function getPageStartOffset() { + return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0; } }, { key: "updateFades", value: function updateFades() { if (!this.hasCarouselContainerTarget) return; - const scrollLeft = this.carouselContainerTarget.scrollLeft; - const maxScroll = this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth; - - // Show left fade if scrolled past start - if (scrollLeft > 0) { - this.leftFadeTarget.classList.remove('hidden'); - } else { - this.leftFadeTarget.classList.add('hidden'); + const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0); + if (maxScroll <= 1) { + this.hideFade(this.leftFadeTarget); + this.hideFade(this.rightFadeTarget); + return; } - - // Show right fade if not at end - if (scrollLeft < maxScroll - 1) { - // -1 for rounding errors - this.rightFadeTarget.classList.remove('hidden'); - } else { - this.rightFadeTarget.classList.add('hidden'); + const scrollLeft = Math.min(Math.max(this.carouselContainerTarget.scrollLeft, 0), maxScroll); + const fadeDistance = this.getFadeDistance(); + this.setFadeOpacity(this.leftFadeTarget, scrollLeft / fadeDistance); + this.setFadeOpacity(this.rightFadeTarget, (maxScroll - scrollLeft) / fadeDistance); + } + }, { + key: "setFadeOpacity", + value: function setFadeOpacity(fadeTarget, opacity) { + const clampedOpacity = Math.min(Math.max(opacity, 0), 1); + if (clampedOpacity <= 0.05) { + this.hideFade(fadeTarget); + return; } + fadeTarget.classList.remove('hidden'); + fadeTarget.removeAttribute('disabled'); + fadeTarget.removeAttribute('tabindex'); + fadeTarget.setAttribute('aria-hidden', 'false'); + fadeTarget.style.opacity = clampedOpacity.toFixed(3); + fadeTarget.style.pointerEvents = 'auto'; + } + }, { + key: "hideFade", + value: function hideFade(fadeTarget) { + fadeTarget.style.opacity = '0'; + fadeTarget.style.pointerEvents = 'none'; + fadeTarget.setAttribute('aria-hidden', 'true'); + fadeTarget.setAttribute('tabindex', '-1'); + if ('disabled' in fadeTarget) fadeTarget.disabled = true; + fadeTarget.classList.add('hidden'); } }]); return _default; }(_stimulus.Controller); exports.default = _default; _default.values = { - id: String + fadeDistance: { + type: Number, + default: 64 + }, + id: String, + pageStartOffset: { + type: Number, + default: 0 + } }; _default.targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard']; \ No newline at end of file diff --git a/lib/controllers/message_controller.js b/lib/controllers/message_controller.js index f42bf63..bef776f 100644 --- a/lib/controllers/message_controller.js +++ b/lib/controllers/message_controller.js @@ -48,13 +48,15 @@ var _default = /*#__PURE__*/function (_Controller) { currentTarget } = _ref2; var card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]'); + var messageElement = currentTarget.closest('[data-controller~="hellotext--message"]'); + var body = currentTarget.dataset.text || currentTarget.textContent.trim(); this.dispatch('quickReply', { detail: { id: this.idValue, - product: card.dataset.id, + product: card === null || card === void 0 ? void 0 : card.dataset.id, buttonId: currentTarget.dataset.id, - body: currentTarget.dataset.text, - cardElement: card + body, + cardElement: card || messageElement || currentTarget } }); } @@ -93,7 +95,9 @@ var _default = /*#__PURE__*/function (_Controller) { key: "moveToLeft", value: function moveToLeft() { if (!this.hasCarouselContainerTarget) return; - var scrollAmount = this.getScrollAmount(); + var nextScrollLeft = this.getPreviousPageScrollLeft(); + var scrollAmount = this.carouselContainerTarget.scrollLeft - nextScrollLeft; + if (scrollAmount < 1) return; this.carouselContainerTarget.scrollBy({ left: -scrollAmount, behavior: 'smooth' @@ -103,7 +107,9 @@ var _default = /*#__PURE__*/function (_Controller) { key: "moveToRight", value: function moveToRight() { if (!this.hasCarouselContainerTarget) return; - var scrollAmount = this.getScrollAmount(); + var nextScrollLeft = this.getNextPageScrollLeft(); + var scrollAmount = nextScrollLeft - this.carouselContainerTarget.scrollLeft; + if (scrollAmount < 1) return; this.carouselContainerTarget.scrollBy({ left: scrollAmount, behavior: 'smooth' @@ -112,44 +118,158 @@ var _default = /*#__PURE__*/function (_Controller) { }, { key: "getScrollAmount", value: function getScrollAmount() { - // Get the actual card width from DOM + return this.getCardScrollAmount(); + } + }, { + key: "getCardScrollAmount", + value: function getCardScrollAmount() { var firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card'); if (!firstCard) { return 280; // Fallback to default desktop card width } var cardWidth = firstCard.offsetWidth; - var gap = 16; // gap-x-4 = 1rem = 16px - - return cardWidth + gap; + return cardWidth + this.getGap(); + } + }, { + key: "getPageScrollAmount", + value: function getPageScrollAmount() { + var scrollAmount = this.carouselContainerTarget.clientWidth - this.getGap(); + return scrollAmount > 0 ? scrollAmount : this.getCardScrollAmount(); + } + }, { + key: "getNextPageScrollLeft", + value: function getNextPageScrollLeft() { + var currentScrollLeft = this.getCurrentScrollLeft(); + var viewportRight = currentScrollLeft + this.carouselContainerTarget.clientWidth; + var cardMetrics = this.getCardMetrics(); + var nextCard = cardMetrics.find(card => card.end > viewportRight + 1); + var targetScrollLeft = nextCard ? this.getPageAlignedScrollLeft(nextCard.start) : currentScrollLeft + this.getPageScrollAmount(); + var fallbackScrollLeft = currentScrollLeft + this.getPageScrollAmount(); + return this.clampScrollLeft(targetScrollLeft > currentScrollLeft + 1 ? targetScrollLeft : fallbackScrollLeft); + } + }, { + key: "getPreviousPageScrollLeft", + value: function getPreviousPageScrollLeft() { + var _ref4, _previousPageCard$sta; + var currentScrollLeft = this.getCurrentScrollLeft(); + if (currentScrollLeft <= 1) return 0; + var targetThreshold = Math.max(currentScrollLeft - this.getPageScrollAmount(), 0); + if (targetThreshold <= 1) return 0; + var cardMetrics = this.getCardMetrics(); + var previousPageCard = cardMetrics.find(card => card.start >= targetThreshold - 1 && card.start < currentScrollLeft - 1); + var previousCard = [...cardMetrics].reverse().find(card => card.start < currentScrollLeft - 1); + return this.getPageAlignedScrollLeft((_ref4 = (_previousPageCard$sta = previousPageCard === null || previousPageCard === void 0 ? void 0 : previousPageCard.start) !== null && _previousPageCard$sta !== void 0 ? _previousPageCard$sta : previousCard === null || previousCard === void 0 ? void 0 : previousCard.start) !== null && _ref4 !== void 0 ? _ref4 : 0); + } + }, { + key: "getPageAlignedScrollLeft", + value: function getPageAlignedScrollLeft(cardStart) { + var pageStartOffset = this.getPageStartOffset(); + if (cardStart <= pageStartOffset + 1) return 0; + return this.clampScrollLeft(cardStart - pageStartOffset); + } + }, { + key: "getCardMetrics", + value: function getCardMetrics() { + return Array.from(this.carouselContainerTarget.querySelectorAll('.message__carousel_card')).map(card => { + var start = this.getCardScrollLeft(card); + return { + start, + end: start + card.offsetWidth + }; + }); + } + }, { + key: "getCardScrollLeft", + value: function getCardScrollLeft(card) { + var cardRect = card.getBoundingClientRect(); + var containerRect = this.carouselContainerTarget.getBoundingClientRect(); + if (cardRect.left || cardRect.width || containerRect.left || containerRect.width) { + return cardRect.left - containerRect.left + this.carouselContainerTarget.scrollLeft; + } + return card.offsetLeft || 0; + } + }, { + key: "getCurrentScrollLeft", + value: function getCurrentScrollLeft() { + return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft); + } + }, { + key: "clampScrollLeft", + value: function clampScrollLeft(scrollLeft) { + var maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0); + return Math.min(Math.max(scrollLeft, 0), maxScroll); + } + }, { + key: "getGap", + value: function getGap() { + var styles = window.getComputedStyle(this.carouselContainerTarget); + var gap = Number.parseFloat(styles.columnGap || styles.gap); + return Number.isFinite(gap) ? gap : 16; + } + }, { + key: "getFadeDistance", + value: function getFadeDistance() { + return Number.isFinite(this.fadeDistanceValue) ? this.fadeDistanceValue : 64; + } + }, { + key: "getPageStartOffset", + value: function getPageStartOffset() { + return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0; } }, { key: "updateFades", value: function updateFades() { if (!this.hasCarouselContainerTarget) return; - var scrollLeft = this.carouselContainerTarget.scrollLeft; - var maxScroll = this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth; - - // Show left fade if scrolled past start - if (scrollLeft > 0) { - this.leftFadeTarget.classList.remove('hidden'); - } else { - this.leftFadeTarget.classList.add('hidden'); + var maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0); + if (maxScroll <= 1) { + this.hideFade(this.leftFadeTarget); + this.hideFade(this.rightFadeTarget); + return; } - - // Show right fade if not at end - if (scrollLeft < maxScroll - 1) { - // -1 for rounding errors - this.rightFadeTarget.classList.remove('hidden'); - } else { - this.rightFadeTarget.classList.add('hidden'); + var scrollLeft = Math.min(Math.max(this.carouselContainerTarget.scrollLeft, 0), maxScroll); + var fadeDistance = this.getFadeDistance(); + this.setFadeOpacity(this.leftFadeTarget, scrollLeft / fadeDistance); + this.setFadeOpacity(this.rightFadeTarget, (maxScroll - scrollLeft) / fadeDistance); + } + }, { + key: "setFadeOpacity", + value: function setFadeOpacity(fadeTarget, opacity) { + var clampedOpacity = Math.min(Math.max(opacity, 0), 1); + if (clampedOpacity <= 0.05) { + this.hideFade(fadeTarget); + return; } + fadeTarget.classList.remove('hidden'); + fadeTarget.removeAttribute('disabled'); + fadeTarget.removeAttribute('tabindex'); + fadeTarget.setAttribute('aria-hidden', 'false'); + fadeTarget.style.opacity = clampedOpacity.toFixed(3); + fadeTarget.style.pointerEvents = 'auto'; + } + }, { + key: "hideFade", + value: function hideFade(fadeTarget) { + fadeTarget.style.opacity = '0'; + fadeTarget.style.pointerEvents = 'none'; + fadeTarget.setAttribute('aria-hidden', 'true'); + fadeTarget.setAttribute('tabindex', '-1'); + if ('disabled' in fadeTarget) fadeTarget.disabled = true; + fadeTarget.classList.add('hidden'); } }]); return _default; }(Controller); _default.values = { - id: String + fadeDistance: { + type: Number, + default: 64 + }, + id: String, + pageStartOffset: { + type: Number, + default: 0 + } }; _default.targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard']; export { _default as default }; \ No newline at end of file diff --git a/lib/controllers/mixins/usePopover.cjs b/lib/controllers/mixins/usePopover.cjs index 0b6eb54..b1d5c95 100644 --- a/lib/controllers/mixins/usePopover.cjs +++ b/lib/controllers/mixins/usePopover.cjs @@ -48,6 +48,8 @@ const usePopover = controller => { openValueChanged() { if (this.disabledValue) return; if (this.openValue) { + var _this$preparePopoverO; + (_this$preparePopoverO = this.preparePopoverOpenAnimation) === null || _this$preparePopoverO === void 0 ? void 0 : _this$preparePopoverO.call(this); this.popoverTarget.showPopover(); this.popoverTarget.setAttribute('aria-expanded', 'true'); if (this['onPopoverOpened']) { diff --git a/lib/controllers/mixins/usePopover.js b/lib/controllers/mixins/usePopover.js index effdad2..14281b9 100644 --- a/lib/controllers/mixins/usePopover.js +++ b/lib/controllers/mixins/usePopover.js @@ -44,6 +44,8 @@ export var usePopover = controller => { openValueChanged() { if (this.disabledValue) return; if (this.openValue) { + var _this$preparePopoverO; + (_this$preparePopoverO = this.preparePopoverOpenAnimation) === null || _this$preparePopoverO === void 0 ? void 0 : _this$preparePopoverO.call(this); this.popoverTarget.showPopover(); this.popoverTarget.setAttribute('aria-expanded', 'true'); if (this['onPopoverOpened']) { diff --git a/lib/controllers/webchat/useTeaser.cjs b/lib/controllers/webchat/useTeaser.cjs index 8cf4cba..39cadf0 100644 --- a/lib/controllers/webchat/useTeaser.cjs +++ b/lib/controllers/webchat/useTeaser.cjs @@ -118,7 +118,9 @@ const useTeaser = controller => { return messages.some(message => message !== this.messageTemplateTarget); }, teaserSeenKey() { - return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen`; + const teaserVersion = this.hasTeaserTarget ? this.teaserTarget.dataset.teaserVersion : ''; + const versionSegment = teaserVersion ? `:${teaserVersion}` : ''; + return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen${versionSegment}`; }, teaserSeenForSession() { try { diff --git a/lib/controllers/webchat/useTeaser.js b/lib/controllers/webchat/useTeaser.js index a1a62fa..f18a200 100644 --- a/lib/controllers/webchat/useTeaser.js +++ b/lib/controllers/webchat/useTeaser.js @@ -112,7 +112,9 @@ export var useTeaser = controller => { return messages.some(message => message !== this.messageTemplateTarget); }, teaserSeenKey() { - return "hellotext:webchat:".concat(this.idValue || this.element.id, ":teaser-seen"); + var teaserVersion = this.hasTeaserTarget ? this.teaserTarget.dataset.teaserVersion : ''; + var versionSegment = teaserVersion ? ":".concat(teaserVersion) : ''; + return "hellotext:webchat:".concat(this.idValue || this.element.id, ":teaser-seen").concat(versionSegment); }, teaserSeenForSession() { try { diff --git a/lib/controllers/webchat_controller.cjs b/lib/controllers/webchat_controller.cjs index 9f40087..35e322b 100644 --- a/lib/controllers/webchat_controller.cjs +++ b/lib/controllers/webchat_controller.cjs @@ -30,6 +30,11 @@ function _possibleConstructorReturn(self, call) { if (call && (typeof call === " function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } +const POPOVER_ANIMATION_DURATION = 120; +const MESSAGE_TIMESTAMP_FORMAT_OPTIONS = { + hour: 'numeric', + minute: '2-digit' +}; let _default = /*#__PURE__*/function (_Controller) { _inherits(_default, _Controller); var _super = _createSuper(_default); @@ -49,6 +54,7 @@ let _default = /*#__PURE__*/function (_Controller) { this.onTypingStart = this.onTypingStart.bind(this); this.onScroll = this.onScroll.bind(this); this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this); + this.closePopoverOnEscape = this.closePopoverOnEscape.bind(this); this.broadcastChannel = new BroadcastChannel(`hellotext--webchat--${this.idValue}`); _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this); } @@ -72,6 +78,7 @@ let _default = /*#__PURE__*/function (_Controller) { } this.setupTeaser(); this.setupOpeningSequence(); + this.localizeMessageTimestamps(); this.webChatChannel.onMessage(this.onMessageReceived); this.webChatChannel.onTypingStart(this.onTypingStart); this.webChatChannel.onReaction(this.onMessageReaction); @@ -81,6 +88,7 @@ let _default = /*#__PURE__*/function (_Controller) { } _hellotext.default.eventEmitter.dispatch('webchat:mounted'); this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent); + window.addEventListener('keydown', this.closePopoverOnEscape, true); this.scheduleBehaviourOpen(); _get(_getPrototypeOf(_default.prototype), "connect", this).call(this); } @@ -88,10 +96,12 @@ let _default = /*#__PURE__*/function (_Controller) { key: "disconnect", value: function disconnect() { this.cancelBehaviourOpen(); + this.clearPopoverOpenAnimation(); this.teardownTeaser(); this.teardownOpeningSequence(); this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent); this.messagesContainerTarget.removeEventListener('scroll', this.onScroll); + window.removeEventListener('keydown', this.closePopoverOnEscape, true); // Clean up typing indicator timeouts this.clearTypingIndicator(); @@ -180,6 +190,7 @@ let _default = /*#__PURE__*/function (_Controller) { const callbacks = { 'message:sent': data => { const element = new DOMParser().parseFromString(data.element, 'text/html').body.firstElementChild; + this.localizeMessageTimestamps(element); // Insert message before typing indicator if one exists if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) { @@ -192,8 +203,8 @@ let _default = /*#__PURE__*/function (_Controller) { }); }, 'message:failed': data => { - var _this$messagesContain; - (_this$messagesContain = this.messagesContainerTarget.querySelector(`#${data.id}`)) === null || _this$messagesContain === void 0 ? void 0 : _this$messagesContain.classList.add('failed'); + const element = this.messagesContainerTarget.querySelector(`#${data.id}`); + this.markMessageFailed(element, data.reason); } }; if (callbacks[data.type]) { @@ -222,6 +233,7 @@ let _default = /*#__PURE__*/function (_Controller) { body, attachments } = message; + const createdAt = message.created_at || message.createdAt; const div = document.createElement('div'); div.innerHTML = body; const element = this.messageTemplateTarget.cloneNode(true); @@ -244,6 +256,7 @@ let _default = /*#__PURE__*/function (_Controller) { }); } element.setAttribute('data-body', body); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt); this.messagesContainerTarget.prepend(element); }); this.messagesContainerTarget.scroll({ @@ -262,10 +275,30 @@ let _default = /*#__PURE__*/function (_Controller) { }, { key: "closePopover", value: function closePopover() { - this.popoverTarget.classList.add(...this.fadeOutClasses); - setTimeout(() => { - this.openValue = false; - }, 250); + this.clearPopoverOpenAnimation(); + this.popoverTarget.classList.remove(...this.fadeOutClasses); + this.openValue = false; + } + }, { + key: "preparePopoverOpenAnimation", + value: function preparePopoverOpenAnimation() { + this.clearPopoverOpenAnimation(); + this.popoverTarget.classList.remove(...this.fadeOutClasses); + this.popoverTarget.classList.add('hellotext--webchat-popover-opening'); + this.popoverOpenAnimationTimeout = setTimeout(() => { + this.popoverTarget.classList.remove('hellotext--webchat-popover-opening'); + this.popoverOpenAnimationTimeout = null; + }, POPOVER_ANIMATION_DURATION); + } + }, { + key: "clearPopoverOpenAnimation", + value: function clearPopoverOpenAnimation() { + var _this$popoverTarget; + if (this.popoverOpenAnimationTimeout) { + clearTimeout(this.popoverOpenAnimationTimeout); + this.popoverOpenAnimationTimeout = null; + } + (_this$popoverTarget = this.popoverTarget) === null || _this$popoverTarget === void 0 ? void 0 : _this$popoverTarget.classList.remove('hellotext--webchat-popover-opening'); } }, { key: "onPopoverOpened", @@ -299,6 +332,7 @@ let _default = /*#__PURE__*/function (_Controller) { }, { key: "onPopoverClosed", value: function onPopoverClosed() { + this.clearPopoverOpenAnimation(); _hellotext.default.eventEmitter.dispatch('webchat:closed'); localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed'); } @@ -336,6 +370,7 @@ let _default = /*#__PURE__*/function (_Controller) { attachments, teaser } = message; + const createdAt = message.created_at || message.createdAt; if (!this.claimMessageId(id)) return; (_this$hideTeaser = this.hideTeaser) === null || _this$hideTeaser === void 0 ? void 0 : _this$hideTeaser.call(this); if (message.carousel) { @@ -348,6 +383,7 @@ let _default = /*#__PURE__*/function (_Controller) { element.querySelector('[data-body]').innerHTML = div.innerHTML; element.setAttribute('data-id', id); element.setAttribute('data-hellotext--webchat-target', 'message'); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt); if (attachments) { attachments.forEach(attachmentUrl => { var _this$messageAttachme2; @@ -405,6 +441,7 @@ let _default = /*#__PURE__*/function (_Controller) { const element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild; element.setAttribute('data-id', message.id); element.setAttribute('data-hellotext--webchat-target', 'message'); + this.localizeMessageTimestamps(element); this.clearTypingIndicator(); this.messagesContainerTarget.appendChild(element); element.scrollIntoView({ @@ -449,14 +486,14 @@ let _default = /*#__PURE__*/function (_Controller) { (_this$dismissTeaserFo2 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo2 === void 0 ? void 0 : _this$dismissTeaserFo2.call(this); const formData = new FormData(); formData.append('message[body]', body); - formData.append('message[replied_to]', id); - formData.append('message[product]', product); - formData.append('message[button]', buttonId); + if (id) formData.append('message[replied_to]', id); + if (product) formData.append('message[product]', product); + if (buttonId) formData.append('message[button]', buttonId); formData.append('session', _hellotext.default.session); formData.append('locale', _core.Locale.toString()); this.appendOpeningSequenceMessageIds(formData); const element = this.buildMessageElement(); - const attachment = (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true); + const attachment = cardElement === null || cardElement === void 0 ? void 0 : (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true); element.querySelector('[data-body]').innerText = body; if (attachment) { var _this$messageAttachme3; @@ -480,17 +517,14 @@ let _default = /*#__PURE__*/function (_Controller) { if (response.failed) { // Clear the optimistic typing indicator on failure clearTimeout(this.optimisticTypingTimeout); - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id - }); - return element.classList.add('failed'); + return this.markMessageFailedFromResponse(response, element); } const data = await response.json(); this.dispatch('set:id', { target: element, detail: data.id }); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt); this.clearRevealedOpeningSequenceMessageIds(); const message = { id: data.id, @@ -545,14 +579,11 @@ let _default = /*#__PURE__*/function (_Controller) { const response = await this.messagesAPI.create(formData); if (response.failed) { clearTimeout(this.optimisticTypingTimeout); - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id - }); - return element.classList.add('failed'); + return this.markMessageFailedFromResponse(response, element); } const data = await response.json(); element.setAttribute('data-id', data.id); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt); this.clearRevealedOpeningSequenceMessageIds(); _hellotext.default.eventEmitter.dispatch('webchat:message:sent', { id: data.id, @@ -648,15 +679,12 @@ let _default = /*#__PURE__*/function (_Controller) { if (response.failed) { // Clear the optimistic typing indicator on failure clearTimeout(this.optimisticTypingTimeout); - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id - }); - return element.classList.add('failed'); + return this.markMessageFailedFromResponse(response, element); } const data = await response.json(); element.setAttribute('data-id', data.id); message.id = data.id; + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt); this.clearRevealedOpeningSequenceMessageIds(); _hellotext.default.eventEmitter.dispatch('webchat:message:sent', message); if (data.conversation !== this.conversationIdValue) { @@ -679,8 +707,131 @@ let _default = /*#__PURE__*/function (_Controller) { element.style.removeProperty('display'); element.setAttribute('data-controller', 'hellotext--message'); element.setAttribute('data-hellotext--webchat-target', 'message'); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), new Date()); return element; } + }, { + key: "focusCompose", + value: function focusCompose(event) { + const { + target + } = event; + const ignoredSelector = ['button', 'a', 'input', 'textarea', 'select', 'label', '[role="button"]', 'em-emoji-picker', '[data-hellotext--webchat--emoji-target~="popover"]', '[data-controller~="hellotext--webchat--emoji"]'].join(', '); + if (!this.hasInputTarget || target.closest(ignoredSelector)) return; + event.preventDefault(); + this.inputTarget.focus(); + if (typeof this.inputTarget.selectionStart === 'number') { + const position = this.inputTarget.value.length; + this.inputTarget.setSelectionRange(position, position); + } + } + }, { + key: "closePopoverFromHeader", + value: function closePopoverFromHeader(event) { + const { + target + } = event; + if (target.closest('.hellotext--webchat-header-channel-button, .hellotext--webchat-close-button')) return; + event.preventDefault(); + this.closePopover(); + } + }, { + key: "closePopoverOnEscape", + value: function closePopoverOnEscape(event) { + var _this$triggerTarget, _this$triggerTarget$f; + if (event.key !== 'Escape' || !this.openValue) return; + event.preventDefault(); + event.stopPropagation(); + this.closePopover(); + (_this$triggerTarget = this.triggerTarget) === null || _this$triggerTarget === void 0 ? void 0 : (_this$triggerTarget$f = _this$triggerTarget.focus) === null || _this$triggerTarget$f === void 0 ? void 0 : _this$triggerTarget$f.call(_this$triggerTarget); + } + }, { + key: "markMessageFailedFromResponse", + value: async function markMessageFailedFromResponse(response, element) { + const reason = await this.messageFailureReason(response); + this.markMessageFailed(element, reason); + this.broadcastChannel.postMessage({ + type: 'message:failed', + id: element.id, + reason + }); + } + }, { + key: "markMessageFailed", + value: function markMessageFailed(element, reason) { + if (!element) return; + element.classList.add('failed'); + if (!reason) return; + const timestamp = element.querySelector('[data-message-timestamp]'); + if (timestamp) { + timestamp.textContent = reason; + } + } + }, { + key: "localizeMessageTimestamps", + value: function localizeMessageTimestamps(root = this.element) { + var _root$matches, _root$querySelectorAl; + if (!root) return; + const timestamps = (_root$matches = root.matches) !== null && _root$matches !== void 0 && _root$matches.call(root, 'time[datetime][data-message-timestamp]') ? [root] : Array.from(((_root$querySelectorAl = root.querySelectorAll) === null || _root$querySelectorAl === void 0 ? void 0 : _root$querySelectorAl.call(root, 'time[datetime][data-message-timestamp]')) || []); + timestamps.forEach(timestamp => this.localizeMessageTimestamp(timestamp)); + } + }, { + key: "localizeMessageTimestamp", + value: function localizeMessageTimestamp(timestamp, value = timestamp === null || timestamp === void 0 ? void 0 : timestamp.getAttribute('datetime')) { + if (!timestamp || !value) return; + const date = value instanceof Date ? value : new Date(value); + if (Number.isNaN(date.getTime())) return; + timestamp.setAttribute('datetime', date.toISOString()); + timestamp.textContent = this.formatMessageTimestamp(date); + } + }, { + key: "formatMessageTimestamp", + value: function formatMessageTimestamp(date) { + return this.constructor.messageTimestampFormatterFor(_core.Locale.toString()).format(date); + } + }, { + key: "messageFailureReason", + value: async function messageFailureReason(response) { + const nativeResponse = (response === null || response === void 0 ? void 0 : response.data) || (response === null || response === void 0 ? void 0 : response.response); + const fallback = (nativeResponse === null || nativeResponse === void 0 ? void 0 : nativeResponse.statusText) || 'Message failed'; + try { + var _jsonResponse$json; + const jsonResponse = nativeResponse !== null && nativeResponse !== void 0 && nativeResponse.clone ? nativeResponse.clone() : nativeResponse; + const payload = await (jsonResponse === null || jsonResponse === void 0 ? void 0 : (_jsonResponse$json = jsonResponse.json) === null || _jsonResponse$json === void 0 ? void 0 : _jsonResponse$json.call(jsonResponse)); + const reason = this.messageFailureReasonFromPayload(payload); + if (reason) return reason; + } catch (_) { + // Fall through to text parsing/fallback. Some stores strip content-type or + // return non-JSON failures, so the timestamp still needs a useful reason. + } + try { + var _textResponse$text; + const textResponse = nativeResponse !== null && nativeResponse !== void 0 && nativeResponse.clone ? nativeResponse.clone() : nativeResponse; + const text = await (textResponse === null || textResponse === void 0 ? void 0 : (_textResponse$text = textResponse.text) === null || _textResponse$text === void 0 ? void 0 : _textResponse$text.call(textResponse)); + return this.messageFailureReasonFromText(text) || fallback; + } catch (_) { + return fallback; + } + } + }, { + key: "messageFailureReasonFromText", + value: function messageFailureReasonFromText(text) { + if (typeof text !== 'string') return null; + const value = text.trim(); + if (!value || value.startsWith('<')) return null; + try { + return this.messageFailureReasonFromPayload(JSON.parse(value)) || value; + } catch (_) { + return value; + } + } + }, { + key: "messageFailureReasonFromPayload", + value: function messageFailureReasonFromPayload(payload) { + var _payload$error, _payload$errors, _payload$errors2, _payload$errors2$, _payload$errors3, _payload$errors3$; + if (!payload) return null; + return [(_payload$error = payload.error) === null || _payload$error === void 0 ? void 0 : _payload$error.message, payload.message, (_payload$errors = payload.errors) === null || _payload$errors === void 0 ? void 0 : _payload$errors.message, (_payload$errors2 = payload.errors) === null || _payload$errors2 === void 0 ? void 0 : (_payload$errors2$ = _payload$errors2[0]) === null || _payload$errors2$ === void 0 ? void 0 : _payload$errors2$.message, (_payload$errors3 = payload.errors) === null || _payload$errors3 === void 0 ? void 0 : (_payload$errors3$ = _payload$errors3[0]) === null || _payload$errors3$ === void 0 ? void 0 : _payload$errors3$.description].find(reason => typeof reason === 'string' && reason.trim().length > 0); + } }, { key: "messageAttachmentsContainer", value: function messageAttachmentsContainer(element) { @@ -809,10 +960,29 @@ let _default = /*#__PURE__*/function (_Controller) { get: function () { return window.matchMedia(`(max-width: ${this.fullScreenThresholdValue}px)`).matches; } + }], [{ + key: "messageTimestampFormatterFor", + value: function messageTimestampFormatterFor(locale) { + const key = locale || 'default'; + if (!this.messageTimestampFormatters[key]) { + this.messageTimestampFormatters[key] = this.buildMessageTimestampFormatter(locale); + } + return this.messageTimestampFormatters[key]; + } + }, { + key: "buildMessageTimestampFormatter", + value: function buildMessageTimestampFormatter(locale) { + try { + return new Intl.DateTimeFormat(locale || undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS); + } catch (_) { + return new Intl.DateTimeFormat(undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS); + } + } }]); return _default; }(_stimulus.Controller); exports.default = _default; +_default.messageTimestampFormatters = {}; _default.values = { id: String, conversationId: String, diff --git a/lib/controllers/webchat_controller.js b/lib/controllers/webchat_controller.js index e5e9d28..30f62a0 100644 --- a/lib/controllers/webchat_controller.js +++ b/lib/controllers/webchat_controller.js @@ -28,6 +28,11 @@ import { usePopover } from './mixins/usePopover'; import { useBehaviour } from './webchat/useBehaviour'; import { useOpeningSequence } from './webchat/useOpeningSequence'; import { useTeaser } from './webchat/useTeaser'; +var POPOVER_ANIMATION_DURATION = 120; +var MESSAGE_TIMESTAMP_FORMAT_OPTIONS = { + hour: 'numeric', + minute: '2-digit' +}; var _default = /*#__PURE__*/function (_Controller) { _inherits(_default, _Controller); var _super = _createSuper(_default); @@ -47,6 +52,7 @@ var _default = /*#__PURE__*/function (_Controller) { this.onTypingStart = this.onTypingStart.bind(this); this.onScroll = this.onScroll.bind(this); this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this); + this.closePopoverOnEscape = this.closePopoverOnEscape.bind(this); this.broadcastChannel = new BroadcastChannel("hellotext--webchat--".concat(this.idValue)); _get(_getPrototypeOf(_default.prototype), "initialize", this).call(this); } @@ -70,6 +76,7 @@ var _default = /*#__PURE__*/function (_Controller) { } this.setupTeaser(); this.setupOpeningSequence(); + this.localizeMessageTimestamps(); this.webChatChannel.onMessage(this.onMessageReceived); this.webChatChannel.onTypingStart(this.onTypingStart); this.webChatChannel.onReaction(this.onMessageReaction); @@ -79,6 +86,7 @@ var _default = /*#__PURE__*/function (_Controller) { } Hellotext.eventEmitter.dispatch('webchat:mounted'); this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent); + window.addEventListener('keydown', this.closePopoverOnEscape, true); this.scheduleBehaviourOpen(); _get(_getPrototypeOf(_default.prototype), "connect", this).call(this); } @@ -86,10 +94,12 @@ var _default = /*#__PURE__*/function (_Controller) { key: "disconnect", value: function disconnect() { this.cancelBehaviourOpen(); + this.clearPopoverOpenAnimation(); this.teardownTeaser(); this.teardownOpeningSequence(); this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent); this.messagesContainerTarget.removeEventListener('scroll', this.onScroll); + window.removeEventListener('keydown', this.closePopoverOnEscape, true); // Clean up typing indicator timeouts this.clearTypingIndicator(); @@ -178,6 +188,7 @@ var _default = /*#__PURE__*/function (_Controller) { var callbacks = { 'message:sent': data => { var element = new DOMParser().parseFromString(data.element, 'text/html').body.firstElementChild; + this.localizeMessageTimestamps(element); // Insert message before typing indicator if one exists if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) { @@ -190,8 +201,8 @@ var _default = /*#__PURE__*/function (_Controller) { }); }, 'message:failed': data => { - var _this$messagesContain; - (_this$messagesContain = this.messagesContainerTarget.querySelector("#".concat(data.id))) === null || _this$messagesContain === void 0 ? void 0 : _this$messagesContain.classList.add('failed'); + var element = this.messagesContainerTarget.querySelector("#".concat(data.id)); + this.markMessageFailed(element, data.reason); } }; if (callbacks[data.type]) { @@ -221,6 +232,7 @@ var _default = /*#__PURE__*/function (_Controller) { body, attachments } = message; + var createdAt = message.created_at || message.createdAt; var div = document.createElement('div'); div.innerHTML = body; var element = this.messageTemplateTarget.cloneNode(true); @@ -243,6 +255,7 @@ var _default = /*#__PURE__*/function (_Controller) { }); } element.setAttribute('data-body', body); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt); this.messagesContainerTarget.prepend(element); }); this.messagesContainerTarget.scroll({ @@ -266,10 +279,30 @@ var _default = /*#__PURE__*/function (_Controller) { }, { key: "closePopover", value: function closePopover() { - this.popoverTarget.classList.add(...this.fadeOutClasses); - setTimeout(() => { - this.openValue = false; - }, 250); + this.clearPopoverOpenAnimation(); + this.popoverTarget.classList.remove(...this.fadeOutClasses); + this.openValue = false; + } + }, { + key: "preparePopoverOpenAnimation", + value: function preparePopoverOpenAnimation() { + this.clearPopoverOpenAnimation(); + this.popoverTarget.classList.remove(...this.fadeOutClasses); + this.popoverTarget.classList.add('hellotext--webchat-popover-opening'); + this.popoverOpenAnimationTimeout = setTimeout(() => { + this.popoverTarget.classList.remove('hellotext--webchat-popover-opening'); + this.popoverOpenAnimationTimeout = null; + }, POPOVER_ANIMATION_DURATION); + } + }, { + key: "clearPopoverOpenAnimation", + value: function clearPopoverOpenAnimation() { + var _this$popoverTarget; + if (this.popoverOpenAnimationTimeout) { + clearTimeout(this.popoverOpenAnimationTimeout); + this.popoverOpenAnimationTimeout = null; + } + (_this$popoverTarget = this.popoverTarget) === null || _this$popoverTarget === void 0 ? void 0 : _this$popoverTarget.classList.remove('hellotext--webchat-popover-opening'); } }, { key: "onPopoverOpened", @@ -303,6 +336,7 @@ var _default = /*#__PURE__*/function (_Controller) { }, { key: "onPopoverClosed", value: function onPopoverClosed() { + this.clearPopoverOpenAnimation(); Hellotext.eventEmitter.dispatch('webchat:closed'); localStorage.setItem("hellotext--webchat--".concat(this.idValue), 'closed'); } @@ -340,6 +374,7 @@ var _default = /*#__PURE__*/function (_Controller) { attachments, teaser } = message; + var createdAt = message.created_at || message.createdAt; if (!this.claimMessageId(id)) return; (_this$hideTeaser = this.hideTeaser) === null || _this$hideTeaser === void 0 ? void 0 : _this$hideTeaser.call(this); if (message.carousel) { @@ -352,6 +387,7 @@ var _default = /*#__PURE__*/function (_Controller) { element.querySelector('[data-body]').innerHTML = div.innerHTML; element.setAttribute('data-id', id); element.setAttribute('data-hellotext--webchat-target', 'message'); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt); if (attachments) { attachments.forEach(attachmentUrl => { var _this$messageAttachme2; @@ -408,6 +444,7 @@ var _default = /*#__PURE__*/function (_Controller) { var element = new DOMParser().parseFromString(html, 'text/html').body.firstElementChild; element.setAttribute('data-id', message.id); element.setAttribute('data-hellotext--webchat-target', 'message'); + this.localizeMessageTimestamps(element); this.clearTypingIndicator(); this.messagesContainerTarget.appendChild(element); element.scrollIntoView({ @@ -453,14 +490,14 @@ var _default = /*#__PURE__*/function (_Controller) { (_this$dismissTeaserFo2 = this.dismissTeaserForSession) === null || _this$dismissTeaserFo2 === void 0 ? void 0 : _this$dismissTeaserFo2.call(this); var formData = new FormData(); formData.append('message[body]', body); - formData.append('message[replied_to]', id); - formData.append('message[product]', product); - formData.append('message[button]', buttonId); + if (id) formData.append('message[replied_to]', id); + if (product) formData.append('message[product]', product); + if (buttonId) formData.append('message[button]', buttonId); formData.append('session', Hellotext.session); formData.append('locale', Locale.toString()); this.appendOpeningSequenceMessageIds(formData); var element = this.buildMessageElement(); - var attachment = (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true); + var attachment = cardElement === null || cardElement === void 0 ? void 0 : (_cardElement$querySel = cardElement.querySelector('img')) === null || _cardElement$querySel === void 0 ? void 0 : _cardElement$querySel.cloneNode(true); element.querySelector('[data-body]').innerText = body; if (attachment) { var _this$messageAttachme3; @@ -484,17 +521,14 @@ var _default = /*#__PURE__*/function (_Controller) { if (response.failed) { // Clear the optimistic typing indicator on failure clearTimeout(this.optimisticTypingTimeout); - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id - }); - return element.classList.add('failed'); + return this.markMessageFailedFromResponse(response, element); } var data = yield response.json(); this.dispatch('set:id', { target: element, detail: data.id }); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt); this.clearRevealedOpeningSequenceMessageIds(); var message = { id: data.id, @@ -555,14 +589,11 @@ var _default = /*#__PURE__*/function (_Controller) { var response = yield this.messagesAPI.create(formData); if (response.failed) { clearTimeout(this.optimisticTypingTimeout); - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id - }); - return element.classList.add('failed'); + return this.markMessageFailedFromResponse(response, element); } var data = yield response.json(); element.setAttribute('data-id', data.id); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt); this.clearRevealedOpeningSequenceMessageIds(); Hellotext.eventEmitter.dispatch('webchat:message:sent', { id: data.id, @@ -664,15 +695,12 @@ var _default = /*#__PURE__*/function (_Controller) { if (response.failed) { // Clear the optimistic typing indicator on failure clearTimeout(this.optimisticTypingTimeout); - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id - }); - return element.classList.add('failed'); + return this.markMessageFailedFromResponse(response, element); } var data = yield response.json(); element.setAttribute('data-id', data.id); message.id = data.id; + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt); this.clearRevealedOpeningSequenceMessageIds(); Hellotext.eventEmitter.dispatch('webchat:message:sent', message); if (data.conversation !== this.conversationIdValue) { @@ -700,8 +728,145 @@ var _default = /*#__PURE__*/function (_Controller) { element.style.removeProperty('display'); element.setAttribute('data-controller', 'hellotext--message'); element.setAttribute('data-hellotext--webchat-target', 'message'); + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), new Date()); return element; } + }, { + key: "focusCompose", + value: function focusCompose(event) { + var { + target + } = event; + var ignoredSelector = ['button', 'a', 'input', 'textarea', 'select', 'label', '[role="button"]', 'em-emoji-picker', '[data-hellotext--webchat--emoji-target~="popover"]', '[data-controller~="hellotext--webchat--emoji"]'].join(', '); + if (!this.hasInputTarget || target.closest(ignoredSelector)) return; + event.preventDefault(); + this.inputTarget.focus(); + if (typeof this.inputTarget.selectionStart === 'number') { + var position = this.inputTarget.value.length; + this.inputTarget.setSelectionRange(position, position); + } + } + }, { + key: "closePopoverFromHeader", + value: function closePopoverFromHeader(event) { + var { + target + } = event; + if (target.closest('.hellotext--webchat-header-channel-button, .hellotext--webchat-close-button')) return; + event.preventDefault(); + this.closePopover(); + } + }, { + key: "closePopoverOnEscape", + value: function closePopoverOnEscape(event) { + var _this$triggerTarget, _this$triggerTarget$f; + if (event.key !== 'Escape' || !this.openValue) return; + event.preventDefault(); + event.stopPropagation(); + this.closePopover(); + (_this$triggerTarget = this.triggerTarget) === null || _this$triggerTarget === void 0 ? void 0 : (_this$triggerTarget$f = _this$triggerTarget.focus) === null || _this$triggerTarget$f === void 0 ? void 0 : _this$triggerTarget$f.call(_this$triggerTarget); + } + }, { + key: "markMessageFailedFromResponse", + value: function () { + var _markMessageFailedFromResponse = _asyncToGenerator(function* (response, element) { + var reason = yield this.messageFailureReason(response); + this.markMessageFailed(element, reason); + this.broadcastChannel.postMessage({ + type: 'message:failed', + id: element.id, + reason + }); + }); + function markMessageFailedFromResponse(_x4, _x5) { + return _markMessageFailedFromResponse.apply(this, arguments); + } + return markMessageFailedFromResponse; + }() + }, { + key: "markMessageFailed", + value: function markMessageFailed(element, reason) { + if (!element) return; + element.classList.add('failed'); + if (!reason) return; + var timestamp = element.querySelector('[data-message-timestamp]'); + if (timestamp) { + timestamp.textContent = reason; + } + } + }, { + key: "localizeMessageTimestamps", + value: function localizeMessageTimestamps() { + var _root$matches, _root$querySelectorAl; + var root = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.element; + if (!root) return; + var timestamps = (_root$matches = root.matches) !== null && _root$matches !== void 0 && _root$matches.call(root, 'time[datetime][data-message-timestamp]') ? [root] : Array.from(((_root$querySelectorAl = root.querySelectorAll) === null || _root$querySelectorAl === void 0 ? void 0 : _root$querySelectorAl.call(root, 'time[datetime][data-message-timestamp]')) || []); + timestamps.forEach(timestamp => this.localizeMessageTimestamp(timestamp)); + } + }, { + key: "localizeMessageTimestamp", + value: function localizeMessageTimestamp(timestamp) { + var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : timestamp === null || timestamp === void 0 ? void 0 : timestamp.getAttribute('datetime'); + if (!timestamp || !value) return; + var date = value instanceof Date ? value : new Date(value); + if (Number.isNaN(date.getTime())) return; + timestamp.setAttribute('datetime', date.toISOString()); + timestamp.textContent = this.formatMessageTimestamp(date); + } + }, { + key: "formatMessageTimestamp", + value: function formatMessageTimestamp(date) { + return this.constructor.messageTimestampFormatterFor(Locale.toString()).format(date); + } + }, { + key: "messageFailureReason", + value: function () { + var _messageFailureReason = _asyncToGenerator(function* (response) { + var nativeResponse = (response === null || response === void 0 ? void 0 : response.data) || (response === null || response === void 0 ? void 0 : response.response); + var fallback = (nativeResponse === null || nativeResponse === void 0 ? void 0 : nativeResponse.statusText) || 'Message failed'; + try { + var _jsonResponse$json; + var jsonResponse = nativeResponse !== null && nativeResponse !== void 0 && nativeResponse.clone ? nativeResponse.clone() : nativeResponse; + var payload = yield jsonResponse === null || jsonResponse === void 0 ? void 0 : (_jsonResponse$json = jsonResponse.json) === null || _jsonResponse$json === void 0 ? void 0 : _jsonResponse$json.call(jsonResponse); + var reason = this.messageFailureReasonFromPayload(payload); + if (reason) return reason; + } catch (_) { + // Fall through to text parsing/fallback. Some stores strip content-type or + // return non-JSON failures, so the timestamp still needs a useful reason. + } + try { + var _textResponse$text; + var textResponse = nativeResponse !== null && nativeResponse !== void 0 && nativeResponse.clone ? nativeResponse.clone() : nativeResponse; + var text = yield textResponse === null || textResponse === void 0 ? void 0 : (_textResponse$text = textResponse.text) === null || _textResponse$text === void 0 ? void 0 : _textResponse$text.call(textResponse); + return this.messageFailureReasonFromText(text) || fallback; + } catch (_) { + return fallback; + } + }); + function messageFailureReason(_x6) { + return _messageFailureReason.apply(this, arguments); + } + return messageFailureReason; + }() + }, { + key: "messageFailureReasonFromText", + value: function messageFailureReasonFromText(text) { + if (typeof text !== 'string') return null; + var value = text.trim(); + if (!value || value.startsWith('<')) return null; + try { + return this.messageFailureReasonFromPayload(JSON.parse(value)) || value; + } catch (_) { + return value; + } + } + }, { + key: "messageFailureReasonFromPayload", + value: function messageFailureReasonFromPayload(payload) { + var _payload$error, _payload$errors, _payload$errors2, _payload$errors2$, _payload$errors3, _payload$errors3$; + if (!payload) return null; + return [(_payload$error = payload.error) === null || _payload$error === void 0 ? void 0 : _payload$error.message, payload.message, (_payload$errors = payload.errors) === null || _payload$errors === void 0 ? void 0 : _payload$errors.message, (_payload$errors2 = payload.errors) === null || _payload$errors2 === void 0 ? void 0 : (_payload$errors2$ = _payload$errors2[0]) === null || _payload$errors2$ === void 0 ? void 0 : _payload$errors2$.message, (_payload$errors3 = payload.errors) === null || _payload$errors3 === void 0 ? void 0 : (_payload$errors3$ = _payload$errors3[0]) === null || _payload$errors3$ === void 0 ? void 0 : _payload$errors3$.description].find(reason => typeof reason === 'string' && reason.trim().length > 0); + } }, { key: "messageAttachmentsContainer", value: function messageAttachmentsContainer(element) { @@ -832,9 +997,28 @@ var _default = /*#__PURE__*/function (_Controller) { get: function get() { return window.matchMedia("(max-width: ".concat(this.fullScreenThresholdValue, "px)")).matches; } + }], [{ + key: "messageTimestampFormatterFor", + value: function messageTimestampFormatterFor(locale) { + var key = locale || 'default'; + if (!this.messageTimestampFormatters[key]) { + this.messageTimestampFormatters[key] = this.buildMessageTimestampFormatter(locale); + } + return this.messageTimestampFormatters[key]; + } + }, { + key: "buildMessageTimestampFormatter", + value: function buildMessageTimestampFormatter(locale) { + try { + return new Intl.DateTimeFormat(locale || undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS); + } catch (_) { + return new Intl.DateTimeFormat(undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS); + } + } }]); return _default; }(Controller); +_default.messageTimestampFormatters = {}; _default.values = { id: String, conversationId: String, diff --git a/lib/core/configuration.cjs b/lib/core/configuration.cjs index 3fc93fc..3ea7e36 100644 --- a/lib/core/configuration.cjs +++ b/lib/core/configuration.cjs @@ -39,6 +39,7 @@ let Configuration = /*#__PURE__*/function () { */ function assign(props) { if (props) { + const shouldInferActionCableUrl = Object.prototype.hasOwnProperty.call(props, 'apiRoot') && !Object.prototype.hasOwnProperty.call(props, 'actionCableUrl'); Object.entries(props).forEach(([key, value]) => { if (key === 'forms') { this.forms = _forms.Forms.assign(value); @@ -48,6 +49,9 @@ let Configuration = /*#__PURE__*/function () { this[key] = value; } }); + if (shouldInferActionCableUrl) { + this.actionCableUrl = this.actionCableUrlForApiRoot(this.apiRoot); + } } return this; } @@ -64,6 +68,21 @@ let Configuration = /*#__PURE__*/function () { value: function endpoint(path) { return `${this.apiRoot}/${path}`; } + }, { + key: "actionCableUrlForApiRoot", + value: function actionCableUrlForApiRoot(apiRoot) { + try { + const url = new URL(apiRoot); + const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'; + url.protocol = protocol; + url.pathname = '/cable'; + url.search = ''; + url.hash = ''; + return url.toString(); + } catch (_) { + return this.actionCableUrl; + } + } }]); return Configuration; }(); diff --git a/lib/core/configuration.js b/lib/core/configuration.js index d05aa09..7ba284a 100644 --- a/lib/core/configuration.js +++ b/lib/core/configuration.js @@ -34,6 +34,7 @@ var Configuration = /*#__PURE__*/function () { */ function assign(props) { if (props) { + var shouldInferActionCableUrl = Object.prototype.hasOwnProperty.call(props, 'apiRoot') && !Object.prototype.hasOwnProperty.call(props, 'actionCableUrl'); Object.entries(props).forEach(_ref => { var [key, value] = _ref; if (key === 'forms') { @@ -44,6 +45,9 @@ var Configuration = /*#__PURE__*/function () { this[key] = value; } }); + if (shouldInferActionCableUrl) { + this.actionCableUrl = this.actionCableUrlForApiRoot(this.apiRoot); + } } return this; } @@ -60,6 +64,21 @@ var Configuration = /*#__PURE__*/function () { value: function endpoint(path) { return "".concat(this.apiRoot, "/").concat(path); } + }, { + key: "actionCableUrlForApiRoot", + value: function actionCableUrlForApiRoot(apiRoot) { + try { + var url = new URL(apiRoot); + var protocol = url.protocol === 'https:' ? 'wss:' : 'ws:'; + url.protocol = protocol; + url.pathname = '/cable'; + url.search = ''; + url.hash = ''; + return url.toString(); + } catch (_) { + return this.actionCableUrl; + } + } }]); return Configuration; }(); diff --git a/lib/models/business.cjs b/lib/models/business.cjs index 2bbed2a..bc9a6e8 100644 --- a/lib/models/business.cjs +++ b/lib/models/business.cjs @@ -12,17 +12,22 @@ function _defineProperties(target, props) { for (var i = 0; i < props.length; i+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; } function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); } function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } +const stylesheetAttribute = 'data-hellotext-stylesheet'; +const stylesheetLoadTimeout = 10000; + /** * @typedef {Object} BusinessCountry * @property {String} [code] - ISO country code configured for the business. * @property {String} [prefix] - Phone country prefix configured for the business. */ + /** * @typedef {Object} BusinessWebchat * @property {String} [id] - Dashboard webchat id configured for the business. * @property {Object} [appearance] - Dashboard appearance defaults for the webchat. * @property {Object} [whatsapp] - Dashboard WhatsApp handoff defaults for the webchat. */ + /** * Public business metadata returned by `public/businesses/:id`. * @@ -36,6 +41,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === * @property {String|Array} [whitelist] - Domain whitelist configuration. * @property {String} [subscription] - Current business subscription tier. */ + /** * Public business context used by the SDK for tracking, forms, and webchat defaults. */ @@ -47,6 +53,8 @@ let Business = /*#__PURE__*/function () { _classCallCheck(this, Business); this.id = id; this.data = null; + this.stylesheet = null; + this.stylesheetLoaded = Promise.resolve(false); } /** @@ -87,11 +95,12 @@ let Business = /*#__PURE__*/function () { key: "setData", value: function setData(data) { this.data = data; - if (typeof document !== 'undefined') { - const linkTag = document.createElement('link'); - linkTag.rel = 'stylesheet'; - linkTag.href = data.style_url; - document.head.append(linkTag); + if (typeof document !== 'undefined' && data.style_url) { + this.stylesheet = this.constructor.ensureStylesheet(data.style_url); + this.stylesheetLoaded = this.constructor.waitForStylesheet(this.stylesheet); + } else { + this.stylesheet = null; + this.stylesheetLoaded = Promise.resolve(false); } } }, { @@ -135,6 +144,78 @@ let Business = /*#__PURE__*/function () { get: function () { return this.data.features; } + }], [{ + key: "stylesheetSelector", + get: function () { + return `link[rel="stylesheet"][${stylesheetAttribute}]`; + } + }, { + key: "ensureStylesheet", + value: function ensureStylesheet(styleUrl) { + const href = this.normalizedStylesheetUrl(styleUrl); + const existingLink = this.stylesheetLinks.find(link => link.href === href); + if (existingLink) { + existingLink.setAttribute(stylesheetAttribute, 'true'); + return existingLink; + } + const linkTag = document.createElement('link'); + linkTag.rel = 'stylesheet'; + linkTag.href = styleUrl; + linkTag.setAttribute(stylesheetAttribute, 'true'); + this.waitForStylesheet(linkTag); + document.head.append(linkTag); + return linkTag; + } + }, { + key: "stylesheetLinks", + get: function () { + if (typeof document === 'undefined') return []; + return Array.from(document.querySelectorAll(this.stylesheetSelector)); + } + }, { + key: "latestStylesheet", + get: function () { + return this.stylesheetLinks[this.stylesheetLinks.length - 1]; + } + }, { + key: "normalizedStylesheetUrl", + value: function normalizedStylesheetUrl(styleUrl) { + try { + return new URL(styleUrl, document.baseURI).href; + } catch (_error) { + return styleUrl; + } + } + }, { + key: "waitForStylesheet", + value: function waitForStylesheet(linkTag) { + if (!linkTag) return Promise.resolve(false); + if (this.stylesheetIsLoaded(linkTag)) return Promise.resolve(true); + if (linkTag.dataset.hellotextStylesheetLoaded === 'false') return Promise.resolve(false); + if (linkTag._hellotextStylesheetLoaded) return linkTag._hellotextStylesheetLoaded; + linkTag._hellotextStylesheetLoaded = new Promise(resolve => { + let timeout; + const finish = loaded => { + clearTimeout(timeout); + linkTag.removeEventListener('load', handleLoad); + linkTag.removeEventListener('error', handleError); + linkTag.dataset.hellotextStylesheetLoaded = loaded ? 'true' : 'false'; + resolve(loaded); + }; + const handleLoad = () => finish(this.stylesheetIsLoaded(linkTag)); + const handleError = () => finish(false); + linkTag.addEventListener('load', handleLoad); + linkTag.addEventListener('error', handleError); + timeout = setTimeout(() => finish(this.stylesheetIsLoaded(linkTag)), stylesheetLoadTimeout); + if (timeout.unref) timeout.unref(); + }); + return linkTag._hellotextStylesheetLoaded; + } + }, { + key: "stylesheetIsLoaded", + value: function stylesheetIsLoaded(linkTag) { + return linkTag.dataset.hellotextStylesheetLoaded === 'true' || !!linkTag.sheet; + } }]); return Business; }(); diff --git a/lib/models/business.js b/lib/models/business.js index 25a9175..89b1572 100644 --- a/lib/models/business.js +++ b/lib/models/business.js @@ -7,6 +7,8 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } import locales from '../locales'; import BusinessesAPI from '../api/businesses'; +var stylesheetAttribute = 'data-hellotext-stylesheet'; +var stylesheetLoadTimeout = 10000; /** * @typedef {Object} BusinessCountry @@ -46,6 +48,8 @@ var Business = /*#__PURE__*/function () { _classCallCheck(this, Business); this.id = id; this.data = null; + this.stylesheet = null; + this.stylesheetLoaded = Promise.resolve(false); } /** @@ -91,11 +95,12 @@ var Business = /*#__PURE__*/function () { key: "setData", value: function setData(data) { this.data = data; - if (typeof document !== 'undefined') { - var linkTag = document.createElement('link'); - linkTag.rel = 'stylesheet'; - linkTag.href = data.style_url; - document.head.append(linkTag); + if (typeof document !== 'undefined' && data.style_url) { + this.stylesheet = this.constructor.ensureStylesheet(data.style_url); + this.stylesheetLoaded = this.constructor.waitForStylesheet(this.stylesheet); + } else { + this.stylesheet = null; + this.stylesheetLoaded = Promise.resolve(false); } } }, { @@ -139,6 +144,78 @@ var Business = /*#__PURE__*/function () { get: function get() { return this.data.features; } + }], [{ + key: "stylesheetSelector", + get: function get() { + return "link[rel=\"stylesheet\"][".concat(stylesheetAttribute, "]"); + } + }, { + key: "ensureStylesheet", + value: function ensureStylesheet(styleUrl) { + var href = this.normalizedStylesheetUrl(styleUrl); + var existingLink = this.stylesheetLinks.find(link => link.href === href); + if (existingLink) { + existingLink.setAttribute(stylesheetAttribute, 'true'); + return existingLink; + } + var linkTag = document.createElement('link'); + linkTag.rel = 'stylesheet'; + linkTag.href = styleUrl; + linkTag.setAttribute(stylesheetAttribute, 'true'); + this.waitForStylesheet(linkTag); + document.head.append(linkTag); + return linkTag; + } + }, { + key: "stylesheetLinks", + get: function get() { + if (typeof document === 'undefined') return []; + return Array.from(document.querySelectorAll(this.stylesheetSelector)); + } + }, { + key: "latestStylesheet", + get: function get() { + return this.stylesheetLinks[this.stylesheetLinks.length - 1]; + } + }, { + key: "normalizedStylesheetUrl", + value: function normalizedStylesheetUrl(styleUrl) { + try { + return new URL(styleUrl, document.baseURI).href; + } catch (_error) { + return styleUrl; + } + } + }, { + key: "waitForStylesheet", + value: function waitForStylesheet(linkTag) { + if (!linkTag) return Promise.resolve(false); + if (this.stylesheetIsLoaded(linkTag)) return Promise.resolve(true); + if (linkTag.dataset.hellotextStylesheetLoaded === 'false') return Promise.resolve(false); + if (linkTag._hellotextStylesheetLoaded) return linkTag._hellotextStylesheetLoaded; + linkTag._hellotextStylesheetLoaded = new Promise(resolve => { + var timeout; + var finish = loaded => { + clearTimeout(timeout); + linkTag.removeEventListener('load', handleLoad); + linkTag.removeEventListener('error', handleError); + linkTag.dataset.hellotextStylesheetLoaded = loaded ? 'true' : 'false'; + resolve(loaded); + }; + var handleLoad = () => finish(this.stylesheetIsLoaded(linkTag)); + var handleError = () => finish(false); + linkTag.addEventListener('load', handleLoad); + linkTag.addEventListener('error', handleError); + timeout = setTimeout(() => finish(this.stylesheetIsLoaded(linkTag)), stylesheetLoadTimeout); + if (timeout.unref) timeout.unref(); + }); + return linkTag._hellotextStylesheetLoaded; + } + }, { + key: "stylesheetIsLoaded", + value: function stylesheetIsLoaded(linkTag) { + return linkTag.dataset.hellotextStylesheetLoaded === 'true' || !!linkTag.sheet; + } }]); return Business; }(); diff --git a/lib/models/webchat.cjs b/lib/models/webchat.cjs index f83bfce..86f7f64 100644 --- a/lib/models/webchat.cjs +++ b/lib/models/webchat.cjs @@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { exports.Webchat = void 0; var _core = require("../core"); var _api = _interopRequireDefault(require("../api")); +var _business = require("./business"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } } @@ -16,13 +17,20 @@ let Webchat = /*#__PURE__*/function () { function Webchat(data) { _classCallCheck(this, Webchat); this.data = data; - this.render(); + this.mounted = false; + this.rendered = Promise.resolve(false); } _createClass(Webchat, [{ key: "render", - value: function render() { + value: async function render() { this.applyBehaviourOverride(); + if (!(await this.stylesheetLoaded)) { + console.warn('Hellotext webchat was not mounted because its stylesheet failed to load.'); + return false; + } this.containerToAppendTo.appendChild(this.data.html); + this.mounted = true; + return true; } }, { key: "applyBehaviourOverride", @@ -53,13 +61,20 @@ let Webchat = /*#__PURE__*/function () { get: function () { return document.querySelector(_core.Configuration.webchat.container); } + }, { + key: "stylesheetLoaded", + get: function () { + return _business.Business.waitForStylesheet(_business.Business.latestStylesheet); + } }], [{ key: "load", value: async function load(id) { - return new Webchat({ + const webchat = new Webchat({ id, html: await _api.default.webchats.get(id) }); + webchat.rendered = webchat.render(); + return webchat; } }]); return Webchat; diff --git a/lib/models/webchat.js b/lib/models/webchat.js index b96ab7b..198ed44 100644 --- a/lib/models/webchat.js +++ b/lib/models/webchat.js @@ -7,18 +7,32 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } import { Configuration } from '../core'; import API from '../api'; +import { Business } from './business'; var Webchat = /*#__PURE__*/function () { function Webchat(data) { _classCallCheck(this, Webchat); this.data = data; - this.render(); + this.mounted = false; + this.rendered = Promise.resolve(false); } _createClass(Webchat, [{ key: "render", - value: function render() { - this.applyBehaviourOverride(); - this.containerToAppendTo.appendChild(this.data.html); - } + value: function () { + var _render = _asyncToGenerator(function* () { + this.applyBehaviourOverride(); + if (!(yield this.stylesheetLoaded)) { + console.warn('Hellotext webchat was not mounted because its stylesheet failed to load.'); + return false; + } + this.containerToAppendTo.appendChild(this.data.html); + this.mounted = true; + return true; + }); + function render() { + return _render.apply(this, arguments); + } + return render; + }() }, { key: "applyBehaviourOverride", value: function applyBehaviourOverride() { @@ -48,14 +62,21 @@ var Webchat = /*#__PURE__*/function () { get: function get() { return document.querySelector(Configuration.webchat.container); } + }, { + key: "stylesheetLoaded", + get: function get() { + return Business.waitForStylesheet(Business.latestStylesheet); + } }], [{ key: "load", value: function () { var _load = _asyncToGenerator(function* (id) { - return new Webchat({ + var webchat = new Webchat({ id, html: yield API.webchats.get(id) }); + webchat.rendered = webchat.render(); + return webchat; }); function load(_x) { return _load.apply(this, arguments); diff --git a/package.json b/package.json index 7991eed..2550fd1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@hellotext/hellotext", - "version": "2.4.1", + "version": "2.4.2", "description": "Hellotext JavaScript Client", "source": "src/index.js", "main": "lib/index.cjs", diff --git a/src/controllers/message_controller.js b/src/controllers/message_controller.js index 1600b8e..29186a3 100644 --- a/src/controllers/message_controller.js +++ b/src/controllers/message_controller.js @@ -4,7 +4,9 @@ import Hellotext from '../hellotext' export default class extends Controller { static values = { + fadeDistance: { type: Number, default: 64 }, id: String, + pageStartOffset: { type: Number, default: 0 }, } static targets = ['carouselContainer', 'leftFade', 'rightFade', 'carouselCard'] @@ -24,14 +26,16 @@ export default class extends Controller { quickReply({ currentTarget }) { const card = currentTarget.closest('[data-hellotext--message-target="carouselCard"]') + const messageElement = currentTarget.closest('[data-controller~="hellotext--message"]') + const body = currentTarget.dataset.text || currentTarget.textContent.trim() this.dispatch('quickReply', { detail: { id: this.idValue, - product: card.dataset.id, + product: card?.dataset.id, buttonId: currentTarget.dataset.id, - body: currentTarget.dataset.text, - cardElement: card, + body, + cardElement: card || messageElement || currentTarget, }, }) } @@ -60,7 +64,10 @@ export default class extends Controller { moveToLeft() { if (!this.hasCarouselContainerTarget) return - const scrollAmount = this.getScrollAmount() + const nextScrollLeft = this.getPreviousPageScrollLeft() + const scrollAmount = this.carouselContainerTarget.scrollLeft - nextScrollLeft + + if (scrollAmount < 1) return this.carouselContainerTarget.scrollBy({ left: -scrollAmount, @@ -71,7 +78,10 @@ export default class extends Controller { moveToRight() { if (!this.hasCarouselContainerTarget) return - const scrollAmount = this.getScrollAmount() + const nextScrollLeft = this.getNextPageScrollLeft() + const scrollAmount = nextScrollLeft - this.carouselContainerTarget.scrollLeft + + if (scrollAmount < 1) return this.carouselContainerTarget.scrollBy({ left: scrollAmount, @@ -80,7 +90,10 @@ export default class extends Controller { } getScrollAmount() { - // Get the actual card width from DOM + return this.getCardScrollAmount() + } + + getCardScrollAmount() { const firstCard = this.carouselContainerTarget.querySelector('.message__carousel_card') if (!firstCard) { @@ -88,31 +101,141 @@ export default class extends Controller { } const cardWidth = firstCard.offsetWidth - const gap = 16 // gap-x-4 = 1rem = 16px - return cardWidth + gap + return cardWidth + this.getGap() + } + + getPageScrollAmount() { + const scrollAmount = this.carouselContainerTarget.clientWidth - this.getGap() + + return scrollAmount > 0 ? scrollAmount : this.getCardScrollAmount() + } + + getNextPageScrollLeft() { + const currentScrollLeft = this.getCurrentScrollLeft() + const viewportRight = currentScrollLeft + this.carouselContainerTarget.clientWidth + const cardMetrics = this.getCardMetrics() + const nextCard = cardMetrics.find(card => card.end > viewportRight + 1) + const targetScrollLeft = nextCard + ? this.getPageAlignedScrollLeft(nextCard.start) + : currentScrollLeft + this.getPageScrollAmount() + const fallbackScrollLeft = currentScrollLeft + this.getPageScrollAmount() + + return this.clampScrollLeft(targetScrollLeft > currentScrollLeft + 1 ? targetScrollLeft : fallbackScrollLeft) + } + + getPreviousPageScrollLeft() { + const currentScrollLeft = this.getCurrentScrollLeft() + + if (currentScrollLeft <= 1) return 0 + + const targetThreshold = Math.max(currentScrollLeft - this.getPageScrollAmount(), 0) + + if (targetThreshold <= 1) return 0 + + const cardMetrics = this.getCardMetrics() + const previousPageCard = cardMetrics.find(card => card.start >= targetThreshold - 1 && card.start < currentScrollLeft - 1) + const previousCard = [...cardMetrics].reverse().find(card => card.start < currentScrollLeft - 1) + + return this.getPageAlignedScrollLeft(previousPageCard?.start ?? previousCard?.start ?? 0) + } + + getPageAlignedScrollLeft(cardStart) { + const pageStartOffset = this.getPageStartOffset() + + if (cardStart <= pageStartOffset + 1) return 0 + + return this.clampScrollLeft(cardStart - pageStartOffset) + } + + getCardMetrics() { + return Array.from(this.carouselContainerTarget.querySelectorAll('.message__carousel_card')).map(card => { + const start = this.getCardScrollLeft(card) + + return { + start, + end: start + card.offsetWidth, + } + }) + } + + getCardScrollLeft(card) { + const cardRect = card.getBoundingClientRect() + const containerRect = this.carouselContainerTarget.getBoundingClientRect() + + if (cardRect.left || cardRect.width || containerRect.left || containerRect.width) { + return cardRect.left - containerRect.left + this.carouselContainerTarget.scrollLeft + } + + return card.offsetLeft || 0 + } + + getCurrentScrollLeft() { + return this.clampScrollLeft(this.carouselContainerTarget.scrollLeft) + } + + clampScrollLeft(scrollLeft) { + const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0) + + return Math.min(Math.max(scrollLeft, 0), maxScroll) + } + + getGap() { + const styles = window.getComputedStyle(this.carouselContainerTarget) + const gap = Number.parseFloat(styles.columnGap || styles.gap) + + return Number.isFinite(gap) ? gap : 16 + } + + getFadeDistance() { + return Number.isFinite(this.fadeDistanceValue) ? this.fadeDistanceValue : 64 + } + + getPageStartOffset() { + return Number.isFinite(this.pageStartOffsetValue) ? this.pageStartOffsetValue : 0 } updateFades() { if (!this.hasCarouselContainerTarget) return - const scrollLeft = this.carouselContainerTarget.scrollLeft - const maxScroll = - this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth + const maxScroll = Math.max(this.carouselContainerTarget.scrollWidth - this.carouselContainerTarget.clientWidth, 0) - // Show left fade if scrolled past start - if (scrollLeft > 0) { - this.leftFadeTarget.classList.remove('hidden') - } else { - this.leftFadeTarget.classList.add('hidden') + if (maxScroll <= 1) { + this.hideFade(this.leftFadeTarget) + this.hideFade(this.rightFadeTarget) + return } - // Show right fade if not at end - if (scrollLeft < maxScroll - 1) { - // -1 for rounding errors - this.rightFadeTarget.classList.remove('hidden') - } else { - this.rightFadeTarget.classList.add('hidden') + const scrollLeft = Math.min(Math.max(this.carouselContainerTarget.scrollLeft, 0), maxScroll) + + const fadeDistance = this.getFadeDistance() + + this.setFadeOpacity(this.leftFadeTarget, scrollLeft / fadeDistance) + this.setFadeOpacity(this.rightFadeTarget, (maxScroll - scrollLeft) / fadeDistance) + } + + setFadeOpacity(fadeTarget, opacity) { + const clampedOpacity = Math.min(Math.max(opacity, 0), 1) + + if (clampedOpacity <= 0.05) { + this.hideFade(fadeTarget) + return } + + fadeTarget.classList.remove('hidden') + fadeTarget.removeAttribute('disabled') + fadeTarget.removeAttribute('tabindex') + fadeTarget.setAttribute('aria-hidden', 'false') + fadeTarget.style.opacity = clampedOpacity.toFixed(3) + fadeTarget.style.pointerEvents = 'auto' + } + + hideFade(fadeTarget) { + fadeTarget.style.opacity = '0' + fadeTarget.style.pointerEvents = 'none' + fadeTarget.setAttribute('aria-hidden', 'true') + fadeTarget.setAttribute('tabindex', '-1') + if ('disabled' in fadeTarget) fadeTarget.disabled = true + fadeTarget.classList.add('hidden') } } diff --git a/src/controllers/mixins/usePopover.js b/src/controllers/mixins/usePopover.js index 08e4430..d52e547 100644 --- a/src/controllers/mixins/usePopover.js +++ b/src/controllers/mixins/usePopover.js @@ -35,6 +35,7 @@ export const usePopover = controller => { if (this.disabledValue) return if (this.openValue) { + this.preparePopoverOpenAnimation?.() this.popoverTarget.showPopover() this.popoverTarget.setAttribute('aria-expanded', 'true') diff --git a/src/controllers/webchat/useTeaser.js b/src/controllers/webchat/useTeaser.js index 2ade203..ac62e60 100644 --- a/src/controllers/webchat/useTeaser.js +++ b/src/controllers/webchat/useTeaser.js @@ -141,7 +141,10 @@ export const useTeaser = controller => { }, teaserSeenKey() { - return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen` + const teaserVersion = this.hasTeaserTarget ? this.teaserTarget.dataset.teaserVersion : '' + const versionSegment = teaserVersion ? `:${teaserVersion}` : '' + + return `hellotext:webchat:${this.idValue || this.element.id}:teaser-seen${versionSegment}` }, teaserSeenForSession() { diff --git a/src/controllers/webchat_controller.js b/src/controllers/webchat_controller.js index 75ddc84..17d5b29 100644 --- a/src/controllers/webchat_controller.js +++ b/src/controllers/webchat_controller.js @@ -13,7 +13,15 @@ import { useBehaviour } from './webchat/useBehaviour' import { useOpeningSequence } from './webchat/useOpeningSequence' import { useTeaser } from './webchat/useTeaser' +const POPOVER_ANIMATION_DURATION = 120 +const MESSAGE_TIMESTAMP_FORMAT_OPTIONS = { + hour: 'numeric', + minute: '2-digit', +} + export default class extends Controller { + static messageTimestampFormatters = {} + static values = { id: String, conversationId: String, @@ -83,6 +91,7 @@ export default class extends Controller { this.onScroll = this.onScroll.bind(this) this.onOutboundMessageSent = this.onOutboundMessageSent.bind(this) + this.closePopoverOnEscape = this.closePopoverOnEscape.bind(this) this.broadcastChannel = new BroadcastChannel(`hellotext--webchat--${this.idValue}`) super.initialize() @@ -106,6 +115,7 @@ export default class extends Controller { this.setupTeaser() this.setupOpeningSequence() + this.localizeMessageTimestamps() this.webChatChannel.onMessage(this.onMessageReceived) this.webChatChannel.onTypingStart(this.onTypingStart) @@ -120,6 +130,7 @@ export default class extends Controller { Hellotext.eventEmitter.dispatch('webchat:mounted') this.broadcastChannel.addEventListener('message', this.onOutboundMessageSent) + window.addEventListener('keydown', this.closePopoverOnEscape, true) this.scheduleBehaviourOpen() super.connect() @@ -127,11 +138,13 @@ export default class extends Controller { disconnect() { this.cancelBehaviourOpen() + this.clearPopoverOpenAnimation() this.teardownTeaser() this.teardownOpeningSequence() this.broadcastChannel.removeEventListener('message', this.onOutboundMessageSent) this.messagesContainerTarget.removeEventListener('scroll', this.onScroll) + window.removeEventListener('keydown', this.closePopoverOnEscape, true) // Clean up typing indicator timeouts this.clearTypingIndicator() @@ -228,6 +241,7 @@ export default class extends Controller { 'message:sent': data => { const element = new DOMParser().parseFromString(data.element, 'text/html').body .firstElementChild + this.localizeMessageTimestamps(element) // Insert message before typing indicator if one exists if (this.typingIndicatorVisible && this.hasTypingIndicatorTarget) { @@ -239,7 +253,9 @@ export default class extends Controller { element.scrollIntoView({ behavior: 'instant' }) }, 'message:failed': data => { - this.messagesContainerTarget.querySelector(`#${data.id}`)?.classList.add('failed') + const element = this.messagesContainerTarget.querySelector(`#${data.id}`) + + this.markMessageFailed(element, data.reason) }, } @@ -271,6 +287,7 @@ export default class extends Controller { messages.forEach(message => { const { body, attachments } = message + const createdAt = message.created_at || message.createdAt const div = document.createElement('div') div.innerHTML = body @@ -302,6 +319,7 @@ export default class extends Controller { } element.setAttribute('data-body', body) + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt) this.messagesContainerTarget.prepend(element) }) @@ -325,11 +343,29 @@ export default class extends Controller { } closePopover() { - this.popoverTarget.classList.add(...this.fadeOutClasses) + this.clearPopoverOpenAnimation() + this.popoverTarget.classList.remove(...this.fadeOutClasses) + this.openValue = false + } - setTimeout(() => { - this.openValue = false - }, 250) + preparePopoverOpenAnimation() { + this.clearPopoverOpenAnimation() + this.popoverTarget.classList.remove(...this.fadeOutClasses) + this.popoverTarget.classList.add('hellotext--webchat-popover-opening') + + this.popoverOpenAnimationTimeout = setTimeout(() => { + this.popoverTarget.classList.remove('hellotext--webchat-popover-opening') + this.popoverOpenAnimationTimeout = null + }, POPOVER_ANIMATION_DURATION) + } + + clearPopoverOpenAnimation() { + if (this.popoverOpenAnimationTimeout) { + clearTimeout(this.popoverOpenAnimationTimeout) + this.popoverOpenAnimationTimeout = null + } + + this.popoverTarget?.classList.remove('hellotext--webchat-popover-opening') } onPopoverOpened() { @@ -369,6 +405,7 @@ export default class extends Controller { } onPopoverClosed() { + this.clearPopoverOpenAnimation() Hellotext.eventEmitter.dispatch('webchat:closed') localStorage.setItem(`hellotext--webchat--${this.idValue}`, 'closed') } @@ -399,6 +436,7 @@ export default class extends Controller { onMessageReceived(message) { const { id, body, attachments, teaser } = message + const createdAt = message.created_at || message.createdAt if (!this.claimMessageId(id)) return @@ -418,6 +456,7 @@ export default class extends Controller { element.setAttribute('data-id', id) element.setAttribute('data-hellotext--webchat-target', 'message') + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), createdAt) if (attachments) { attachments.forEach(attachmentUrl => { @@ -487,6 +526,7 @@ export default class extends Controller { element.setAttribute('data-id', message.id) element.setAttribute('data-hellotext--webchat-target', 'message') + this.localizeMessageTimestamps(element) this.clearTypingIndicator() this.messagesContainerTarget.appendChild(element) @@ -527,16 +567,16 @@ export default class extends Controller { const formData = new FormData() formData.append('message[body]', body) - formData.append('message[replied_to]', id) - formData.append('message[product]', product) - formData.append('message[button]', buttonId) + if (id) formData.append('message[replied_to]', id) + if (product) formData.append('message[product]', product) + if (buttonId) formData.append('message[button]', buttonId) formData.append('session', Hellotext.session) formData.append('locale', Locale.toString()) this.appendOpeningSequenceMessageIds(formData) const element = this.buildMessageElement() - const attachment = cardElement.querySelector('img')?.cloneNode(true) + const attachment = cardElement?.querySelector('img')?.cloneNode(true) element.querySelector('[data-body]').innerText = body @@ -566,17 +606,13 @@ export default class extends Controller { // Clear the optimistic typing indicator on failure clearTimeout(this.optimisticTypingTimeout) - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id, - }) - - return element.classList.add('failed') + return this.markMessageFailedFromResponse(response, element) } const data = await response.json() this.dispatch('set:id', { target: element, detail: data.id }) + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt) this.clearRevealedOpeningSequenceMessageIds() const message = { @@ -645,16 +681,12 @@ export default class extends Controller { if (response.failed) { clearTimeout(this.optimisticTypingTimeout) - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id, - }) - - return element.classList.add('failed') + return this.markMessageFailedFromResponse(response, element) } const data = await response.json() element.setAttribute('data-id', data.id) + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt) this.clearRevealedOpeningSequenceMessageIds() Hellotext.eventEmitter.dispatch('webchat:message:sent', { @@ -768,17 +800,13 @@ export default class extends Controller { // Clear the optimistic typing indicator on failure clearTimeout(this.optimisticTypingTimeout) - this.broadcastChannel.postMessage({ - type: 'message:failed', - id: element.id, - }) - - return element.classList.add('failed') + return this.markMessageFailedFromResponse(response, element) } const data = await response.json() element.setAttribute('data-id', data.id) message.id = data.id + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), data.created_at || data.createdAt) this.clearRevealedOpeningSequenceMessageIds() Hellotext.eventEmitter.dispatch('webchat:message:sent', message) @@ -807,9 +835,173 @@ export default class extends Controller { element.setAttribute('data-controller', 'hellotext--message') element.setAttribute('data-hellotext--webchat-target', 'message') + this.localizeMessageTimestamp(element.querySelector('[data-message-timestamp]'), new Date()) return element } + focusCompose(event) { + const { target } = event + const ignoredSelector = [ + 'button', + 'a', + 'input', + 'textarea', + 'select', + 'label', + '[role="button"]', + 'em-emoji-picker', + '[data-hellotext--webchat--emoji-target~="popover"]', + '[data-controller~="hellotext--webchat--emoji"]', + ].join(', ') + + if (!this.hasInputTarget || target.closest(ignoredSelector)) return + + event.preventDefault() + this.inputTarget.focus() + + if (typeof this.inputTarget.selectionStart === 'number') { + const position = this.inputTarget.value.length + this.inputTarget.setSelectionRange(position, position) + } + } + + closePopoverFromHeader(event) { + const { target } = event + + if (target.closest('.hellotext--webchat-header-channel-button, .hellotext--webchat-close-button')) return + + event.preventDefault() + this.closePopover() + } + + closePopoverOnEscape(event) { + if (event.key !== 'Escape' || !this.openValue) return + + event.preventDefault() + event.stopPropagation() + this.closePopover() + + this.triggerTarget?.focus?.() + } + + async markMessageFailedFromResponse(response, element) { + const reason = await this.messageFailureReason(response) + + this.markMessageFailed(element, reason) + this.broadcastChannel.postMessage({ + type: 'message:failed', + id: element.id, + reason, + }) + } + + markMessageFailed(element, reason) { + if (!element) return + + element.classList.add('failed') + + if (!reason) return + + const timestamp = element.querySelector('[data-message-timestamp]') + + if (timestamp) { + timestamp.textContent = reason + } + } + + localizeMessageTimestamps(root = this.element) { + if (!root) return + + const timestamps = root.matches?.('time[datetime][data-message-timestamp]') + ? [root] + : Array.from(root.querySelectorAll?.('time[datetime][data-message-timestamp]') || []) + + timestamps.forEach(timestamp => this.localizeMessageTimestamp(timestamp)) + } + + localizeMessageTimestamp(timestamp, value = timestamp?.getAttribute('datetime')) { + if (!timestamp || !value) return + + const date = value instanceof Date ? value : new Date(value) + + if (Number.isNaN(date.getTime())) return + + timestamp.setAttribute('datetime', date.toISOString()) + timestamp.textContent = this.formatMessageTimestamp(date) + } + + formatMessageTimestamp(date) { + return this.constructor.messageTimestampFormatterFor(Locale.toString()).format(date) + } + + static messageTimestampFormatterFor(locale) { + const key = locale || 'default' + + if (!this.messageTimestampFormatters[key]) { + this.messageTimestampFormatters[key] = this.buildMessageTimestampFormatter(locale) + } + + return this.messageTimestampFormatters[key] + } + + static buildMessageTimestampFormatter(locale) { + try { + return new Intl.DateTimeFormat(locale || undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS) + } catch (_) { + return new Intl.DateTimeFormat(undefined, MESSAGE_TIMESTAMP_FORMAT_OPTIONS) + } + } + + async messageFailureReason(response) { + const nativeResponse = response?.data || response?.response + const fallback = nativeResponse?.statusText || 'Message failed' + + try { + const jsonResponse = nativeResponse?.clone ? nativeResponse.clone() : nativeResponse + const payload = await jsonResponse?.json?.() + const reason = this.messageFailureReasonFromPayload(payload) + + if (reason) return reason + } catch (_) { + // Fall through to text parsing/fallback. Some stores strip content-type or + // return non-JSON failures, so the timestamp still needs a useful reason. + } + + try { + const textResponse = nativeResponse?.clone ? nativeResponse.clone() : nativeResponse + const text = await textResponse?.text?.() + + return this.messageFailureReasonFromText(text) || fallback + } catch (_) { + return fallback + } + } + + messageFailureReasonFromText(text) { + if (typeof text !== 'string') return null + + const value = text.trim() + if (!value || value.startsWith('<')) return null + + try { + return this.messageFailureReasonFromPayload(JSON.parse(value)) || value + } catch (_) { + return value + } + } + + messageFailureReasonFromPayload(payload) { + if (!payload) return null + + return [ + payload.error?.message, + payload.message, + payload.errors?.message, + payload.errors?.[0]?.message, + payload.errors?.[0]?.description, + ].find(reason => typeof reason === 'string' && reason.trim().length > 0) + } + messageAttachmentsContainer(element) { return element.querySelector('[data-attachments-container], [data-attachment-container]') } diff --git a/src/core/configuration.js b/src/core/configuration.js index a5b5480..7d0d3d0 100644 --- a/src/core/configuration.js +++ b/src/core/configuration.js @@ -32,6 +32,11 @@ class Configuration { */ static assign(props) { if (props) { + const shouldInferActionCableUrl = ( + Object.prototype.hasOwnProperty.call(props, 'apiRoot') && + !Object.prototype.hasOwnProperty.call(props, 'actionCableUrl') + ) + Object.entries(props).forEach(([key, value]) => { if (key === 'forms') { this.forms = Forms.assign(value) @@ -41,6 +46,10 @@ class Configuration { this[key] = value } }) + + if (shouldInferActionCableUrl) { + this.actionCableUrl = this.actionCableUrlForApiRoot(this.apiRoot) + } } return this @@ -57,6 +66,22 @@ class Configuration { static endpoint(path) { return `${this.apiRoot}/${path}` } + + static actionCableUrlForApiRoot(apiRoot) { + try { + const url = new URL(apiRoot) + const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:' + + url.protocol = protocol + url.pathname = '/cable' + url.search = '' + url.hash = '' + + return url.toString() + } catch (_) { + return this.actionCableUrl + } + } } export { Configuration } diff --git a/src/models/business.js b/src/models/business.js index 51ff205..e07d549 100644 --- a/src/models/business.js +++ b/src/models/business.js @@ -1,6 +1,9 @@ import locales from '../locales' import BusinessesAPI from '../api/businesses' +const stylesheetAttribute = 'data-hellotext-stylesheet' +const stylesheetLoadTimeout = 10000 + /** * @typedef {Object} BusinessCountry * @property {String} [code] - ISO country code configured for the business. @@ -38,6 +41,8 @@ class Business { constructor(id) { this.id = id this.data = null + this.stylesheet = null + this.stylesheetLoaded = Promise.resolve(false) } /** @@ -81,15 +86,91 @@ class Business { setData(data) { this.data = data - if (typeof document !== 'undefined') { - const linkTag = document.createElement('link') - linkTag.rel = 'stylesheet' - linkTag.href = data.style_url + if (typeof document !== 'undefined' && data.style_url) { + this.stylesheet = this.constructor.ensureStylesheet(data.style_url) + this.stylesheetLoaded = this.constructor.waitForStylesheet(this.stylesheet) + } else { + this.stylesheet = null + this.stylesheetLoaded = Promise.resolve(false) + } + } + + static get stylesheetSelector() { + return `link[rel="stylesheet"][${stylesheetAttribute}]` + } + + static ensureStylesheet(styleUrl) { + const href = this.normalizedStylesheetUrl(styleUrl) + const existingLink = this.stylesheetLinks.find(link => link.href === href) + + if (existingLink) { + existingLink.setAttribute(stylesheetAttribute, 'true') + return existingLink + } + + const linkTag = document.createElement('link') + linkTag.rel = 'stylesheet' + linkTag.href = styleUrl + linkTag.setAttribute(stylesheetAttribute, 'true') + this.waitForStylesheet(linkTag) + + document.head.append(linkTag) + + return linkTag + } + + static get stylesheetLinks() { + if (typeof document === 'undefined') return [] + + return Array.from(document.querySelectorAll(this.stylesheetSelector)) + } + + static get latestStylesheet() { + return this.stylesheetLinks[this.stylesheetLinks.length - 1] + } - document.head.append(linkTag) + static normalizedStylesheetUrl(styleUrl) { + try { + return new URL(styleUrl, document.baseURI).href + } catch (_error) { + return styleUrl } } + static waitForStylesheet(linkTag) { + if (!linkTag) return Promise.resolve(false) + if (this.stylesheetIsLoaded(linkTag)) return Promise.resolve(true) + if (linkTag.dataset.hellotextStylesheetLoaded === 'false') return Promise.resolve(false) + if (linkTag._hellotextStylesheetLoaded) return linkTag._hellotextStylesheetLoaded + + linkTag._hellotextStylesheetLoaded = new Promise(resolve => { + let timeout + + const finish = loaded => { + clearTimeout(timeout) + linkTag.removeEventListener('load', handleLoad) + linkTag.removeEventListener('error', handleError) + linkTag.dataset.hellotextStylesheetLoaded = loaded ? 'true' : 'false' + resolve(loaded) + } + + const handleLoad = () => finish(this.stylesheetIsLoaded(linkTag)) + const handleError = () => finish(false) + + linkTag.addEventListener('load', handleLoad) + linkTag.addEventListener('error', handleError) + + timeout = setTimeout(() => finish(this.stylesheetIsLoaded(linkTag)), stylesheetLoadTimeout) + if (timeout.unref) timeout.unref() + }) + + return linkTag._hellotextStylesheetLoaded + } + + static stylesheetIsLoaded(linkTag) { + return linkTag.dataset.hellotextStylesheetLoaded === 'true' || !!linkTag.sheet + } + get subscription() { return this.data.subscription } diff --git a/src/models/webchat.js b/src/models/webchat.js index 5a0a607..8538faa 100644 --- a/src/models/webchat.js +++ b/src/models/webchat.js @@ -1,23 +1,38 @@ import { Configuration } from '../core' import API from '../api' +import { Business } from './business' class Webchat { static async load(id) { - return new Webchat({ + const webchat = new Webchat({ id, html: await API.webchats.get(id), }) + + webchat.rendered = webchat.render() + + return webchat } constructor(data) { this.data = data - this.render() + this.mounted = false + this.rendered = Promise.resolve(false) } - render() { + async render() { this.applyBehaviourOverride() + + if (!await this.stylesheetLoaded) { + console.warn('Hellotext webchat was not mounted because its stylesheet failed to load.') + return false + } + this.containerToAppendTo.appendChild(this.data.html) + this.mounted = true + + return true } applyBehaviourOverride() { @@ -50,6 +65,10 @@ class Webchat { get containerToAppendTo() { return document.querySelector(Configuration.webchat.container) } + + get stylesheetLoaded() { + return Business.waitForStylesheet(Business.latestStylesheet) + } } export { Webchat }