import { r as registerInstance, h, F as Fragment, d as Host } from './index-c0a4d8bd.js';
import { a as arrow_right } from './arrow_right-f4852d04.js';
import { c as close } from './close-9e7bd787.js';
import { m as minus } from './minus-2b8ae0b8.js';
import { L as LocalStorageService } from './LocalStorageService-78b1794d.js';
import { P as PnChatService } from './pn-chat.service-0def5c4e.js';
import './FetchHelper-4789695a.js';

const icon$1 = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M21 11.998a1 1 0 0 1-.577.908l-15 7a1 1 0 0 1-1.237-1.487l4.585-6.42-1.46-2.043A1 1 0 1 1 8.94 8.794l1.875 2.625a1 1 0 0 1 0 1.162l-2.788 3.903 9.599-4.48L6.58 6.909a1 1 0 1 1 .838-1.816l13 6a1 1 0 0 1 .581.906M5 4a1 1 0 0 1 1 1v.01a1 1 0 1 1-2 0V5a1 1 0 0 1 1-1" clip-rule="evenodd"/></svg>';
const submit = icon$1;

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12.388 2c5.522 0 10 4.477 10 10s-4.478 10-10 10H2l1.355-4.064-.798-3.987a8.8 8.8 0 0 1-.17-1.717V12c0-5.523 4.478-10 10-10m8 10a8 8 0 0 0-16 0v.232q0 .67.13 1.325l.902 4.507L4.775 20h7.612a8 8 0 0 0 8-8m-12.5-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3m6 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0m3-1.5a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3" clip-rule="evenodd"/></svg>';
const talk_bubble = icon;

const translations = {
    'sv': {
        relatedContentAriaLabel: 'Relaterat innehåll',
        chatMinimizedAriaLabel: 'Chatten är minimerad',
        chatOpenedAriaLabel: 'Chatten är öppen',
        minimizeChatAriaLabel: 'Minimera chatten',
        closeChatAriaLabel: 'Stäng chatten',
        openChatAriaLabel: 'Öppna chatten',
        chatControlsAriaLabel: 'Chattkontroller',
        chatMessagesAriaLabel: 'Chattmeddelanden',
        sentMessageAriaLabel: 'Meddelande skickat',
        writeChatMessagePlaceholder: 'Skriv ett meddelande...',
        waitingForAnswerLabel: 'Väntar på svar',
        sendButtonText: 'Skicka',
        loadingText: 'Laddar...',
    },
    'en': {
        relatedContentAriaLabel: 'Related content',
        chatMinimizedAriaLabel: 'Chat is minimized',
        chatOpenedAriaLabel: 'Chat is open',
        minimizeChatAriaLabel: 'Minimize chat',
        closeChatAriaLabel: 'Close chat',
        openChatAriaLabel: 'Open chat',
        chatControlsAriaLabel: 'Chat controls',
        chatMessagesAriaLabel: 'Chat messages',
        sentMessageAriaLabel: 'Message sent',
        writeChatMessagePlaceholder: 'Type a message...',
        waitingForAnswerLabel: 'Waiting for answer',
        sendButtonText: 'Send',
        loadingText: 'Loading...',
    },
    'da': {
        relatedContentAriaLabel: 'Relateret indhold',
        chatMinimizedAriaLabel: 'Chatten er minimeret',
        chatOpenedAriaLabel: 'Chatten er åben',
        minimizeChatAriaLabel: 'Minimer chatten',
        closeChatAriaLabel: 'Luk chatten',
        openChatAriaLabel: 'Åbn chatten',
        chatControlsAriaLabel: 'Chatkontroller',
        chatMessagesAriaLabel: 'Chatbeskeder',
        sentMessageAriaLabel: 'Besked sendt',
        writeChatMessagePlaceholder: 'Skriv en besked...',
        waitingForAnswerLabel: 'Venter på svar',
        sendButtonText: 'Send',
        loadingText: 'Indlæser...',
    },
    'no': {
        relatedContentAriaLabel: 'Relatert innhold',
        chatMinimizedAriaLabel: 'Chatten er minimert',
        chatOpenedAriaLabel: 'Chatten er åpen',
        minimizeChatAriaLabel: 'Minimer chatten',
        closeChatAriaLabel: 'Lukk chatten',
        openChatAriaLabel: 'Åpne chatten',
        chatControlsAriaLabel: 'Chatkontroller',
        chatMessagesAriaLabel: 'Chatmeldinger',
        sentMessageAriaLabel: 'Melding sendt',
        writeChatMessagePlaceholder: 'Skriv en melding...',
        waitingForAnswerLabel: 'Venter på svar',
        sendButtonText: 'Send',
        loadingText: 'Laster...',
    },
    'fi': {
        relatedContentAriaLabel: 'Aiheeseen liittyvä sisältö',
        chatMinimizedAriaLabel: 'Keskustelu on pienennetty',
        chatOpenedAriaLabel: 'Keskustelu on auki',
        minimizeChatAriaLabel: 'Pienennä keskustelu',
        closeChatAriaLabel: 'Sulje keskustelu',
        openChatAriaLabel: 'Avaa keskustelu',
        chatControlsAriaLabel: 'Keskustelun hallinta',
        chatMessagesAriaLabel: 'Keskusteluviestit',
        sentMessageAriaLabel: 'Viesti lähetetty',
        writeChatMessagePlaceholder: 'Kirjoita viesti...',
        waitingForAnswerLabel: 'Odotetaan vastausta',
        sendButtonText: 'Lähetä',
        loadingText: 'Ladataan...',
    },
};

const pnChatCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}@media screen and (max-width: 767px){.sr-only-mobile{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}}.pn-chat{display:flex;flex-direction:column;height:600px;width:400px;max-width:400px;box-shadow:0 4px 4px 0 rgba(0, 0, 0, 0.25), 0 -2px 4px 0 rgba(240, 240, 240, 0.55);border-radius:1.6rem}@media (max-width: 768px){.pn-chat:not(.minimized){position:absolute;height:100dvh;width:100dvw;max-width:100%;top:0;left:0}.pn-chat.minimized{height:70px;border-radius:0.8rem 0.8rem 0 0}}@media (min-width: 768px) and (max-width: 1024px){.pn-chat{max-width:350px}}.pn-chat .chat-header{background-color:#ffffff;padding:0.8rem;padding-left:1.6rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f3f2f2}@media (min-width: 768px){.pn-chat .chat-header{border-radius:1.6rem 1.6rem 0 0}}.pn-chat .chat-header .chat-controls{display:flex}.pn-chat .chat-header pn-button.minimize-btn button.pn-button{padding-bottom:0;margin-right:1rem}.pn-chat .chat-header pn-button.minimize-btn button.pn-button .pn-button-content{align-items:flex-end;position:absolute;bottom:0px}.pn-chat .chat-header #chat-title{margin:0;font-size:1.6rem;font-weight:500;line-height:1;height:100%;align-content:center}.pn-chat .chat-main{display:flex;flex-direction:column;flex-grow:1;overflow-y:auto;gap:1.6rem;padding:1.6rem;padding-bottom:3.2rem;background-color:#ffffff}.pn-chat .chat-main.loading-chat-main{display:flex;justify-content:center;align-items:center}.pn-chat .chat-loading-spinner{background-color:#005d92;width:4.8rem;height:4.8rem;border-radius:4.8rem;display:flex;align-items:center;justify-content:center}.pn-chat .chat-loading-content{color:#2d2013;font-size:1.6rem;font-weight:400}.pn-chat .chat-overview{text-align:center}.pn-chat .chat-messages{display:flex;flex-direction:column;gap:1.6rem;text-align:center}.pn-chat .card-container .slider-wrapper{margin:0}.pn-chat .card-container .slides-container{display:flex;gap:1rem}.pn-chat .card-container .slide:nth-child(even) [data-card]{width:calc(100% - 1rem)}@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.95)}}.pn-chat .chat-footer{background:#ffffff;border-top:1px solid #f3f2f2;border-radius:0 0 1.6rem 1.6rem}.pn-chat .chat-footer .form{display:flex;gap:0.7rem;padding:1rem}.pn-chat .chat-input-container{display:flex;flex-grow:1;justify-content:space-between;gap:0.7rem;background:#f9f8f8;border-radius:6.4rem}.pn-chat .chat-input-container .chat-text-input{border:none;background:transparent;width:100%;outline:0.2rem solid transparent;outline-offset:0.2rem;padding-left:1.6rem}.pn-chat .chat-input-container .chat-text-input:focus{border-radius:6.4rem}.pn-chat .chat-input-container .chat-text-input:focus-visible{outline-color:#005d92}.pn-chat .chat-input-container .chat-text-input::placeholder{top:2px;position:relative;color:#969087}.pn-chat .chat-input-container .chat-disabled-button{display:flex;width:3.5em;min-height:3em;min-width:0;align-items:center;justify-content:center}.pn-chat.minimized{background:transparent;border:initial;box-shadow:initial;max-width:50px;max-height:50px;min-width:initial;min-height:initial;transform:scale(0.95);cursor:pointer}.pn-chat.minimized .minimize-btn,.pn-chat.minimized .close-btn{position:absolute;top:0;right:0;bottom:0;left:0}.pn-chat.minimized .minimize-btn button,.pn-chat.minimized .close-btn button{display:none}.pn-chat.minimized .chat-main,.pn-chat.minimized .chat-footer{display:none}.pn-chat.closed{display:none}.pn-chat .open-chat-btn .pn-button{width:5.6rem;height:5.6rem}.pn-chat .open-chat-btn .pn-icon svg{width:3.2rem;height:3.2rem}.pn-chat .indicator-icon{padding:0.2rem 0.8rem;margin-right:auto;margin-top:1rem;margin-bottom:2rem;visibility:hidden}.pn-chat .minimize-btn .pn-button pn-icon .pn-icon-svg path,.pn-chat .close-btn .pn-button pn-icon .pn-icon-svg path{fill:#005d92}@media (max-width: 768px){body.chat-open{overflow:hidden}}";
const PnChatStyle0 = pnChatCss;

const PnChat = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.endpoint = undefined;
        this.customerSegment = undefined;
        this.mainHeading = '';
        this.relatedContentAriaLabel = undefined;
        this.chatMinimizedAriaLabel = undefined;
        this.chatOpenedAriaLabel = undefined;
        this.minimizeChatAriaLabel = undefined;
        this.closeChatAriaLabel = undefined;
        this.openChatAriaLabel = undefined;
        this.chatControlsAriaLabel = undefined;
        this.chatMessagesAriaLabel = undefined;
        this.sentMessageAriaLabel = undefined;
        this.writeChatMessagePlaceholder = undefined;
        this.waitingForAnswerLabel = undefined;
        this.sendButtonText = undefined;
        this.loadingText = undefined;
        this.carouselSlidesToShow = 1;
        this.messages = undefined;
        this.language = 'sv';
        this.market = 'se';
        this.itemId = '';
        this.pnChatId = '00000000-0000-0000-0000-000000000000';
        this.forceOpen = false;
        this.isLoggedIn = false;
        this.message = '';
        this.messagesData = undefined;
        this.isMinimized = true;
        this.isClosed = false;
        this.lastMessageId = '';
        this.i18n = undefined;
    }
    chatId;
    _defaultChatId = '00000000-0000-0000-0000-000000000000';
    _defaultAlternativeChatId = '1';
    chatLocalStorageKey = 'sf-chat-state';
    chatMessagesContainer;
    chatRef;
    inputRef;
    storage = new LocalStorageService();
    _chatService;
    _chatSegment = "#chat";
    _forceClose = false;
    componentWillLoad() {
        this._forceClose = false;
        this._chatService = new PnChatService(this.endpoint, this.market, this.language);
        this.messagesData = {
            header: {},
            messages: [],
        };
        let storageId = this.storage.get(this.chatLocalStorageKey);
        if (storageId && storageId.isLoggedIn === !this.isLoggedIn) {
            this.storage.remove(this.chatLocalStorageKey);
        }
        else if (storageId && storageId.chatId) {
            this.chatId = storageId?.chatId ?? this.chatId;
        }
        this.setTranslations();
        setInterval(() => {
            this.updateChat();
        }, 1500);
    }
    setTranslations() {
        if (this.language && translations[this.language]) {
            this.i18n = translations[this.language];
        }
    }
    getTranslation(key) {
        const value = this[key];
        if (value === undefined || value === null || value === '') {
            return translations[this.language]?.[key] ?? translations['en'][key];
        }
        return value;
    }
    async updateChat() {
        if (this.isMinimized || this.isClosed) {
            return;
        }
        let prevLastMessageId = this.lastMessageId;
        await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {
            this.lastMessageId = this._chatService.GetLastMessageId(newMessages?.messages, this.lastMessageId);
            let htmlCollection = document.getElementsByClassName('pn-chat-before');
            let elements = Array.from(htmlCollection);
            newMessages.messages.forEach(message => {
                elements.forEach(element => {
                    if (message.content != null && (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim()))) {
                        element.remove();
                    }
                });
                this.renderMessage(message);
            });
            if (prevLastMessageId !== this.lastMessageId) {
                this._chatService.updateLastMessageId(this.chatId, this.lastMessageId);
                this.messagesData = newMessages;
                newMessages.messages.forEach(message => {
                    this.renderMessage(message);
                });
            }
        });
    }
    async setStartValues() {
        if (this._forceClose) {
            this._forceClose = false;
            return;
        }
        if ((!this.chatId || this.chatId === this._defaultChatId || this.chatId === this._defaultAlternativeChatId) && !this.isMinimized) {
            this.chatId = await this._chatService.startChat(this.pnChatId, this.itemId);
            this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });
        }
        if (this.chatId) {
            this.storage.set(this.chatLocalStorageKey, { chatId: this.chatId, isLoggedIn: this.isLoggedIn });
            await this.fetchMessages();
            this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);
        }
    }
    async fetchMessages() {
        await this._chatService.fetchMessages(this.chatId, this.messagesData).then(newMessages => {
            this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);
            this.messagesData = newMessages;
            let htmlCollection = document.getElementsByClassName('pn-chat-before');
            let elements = Array.from(htmlCollection);
            newMessages.messages.forEach(message => {
                elements.forEach(element => {
                    if (element.textContent.trim() === message.content.trim() || element.textContent.trim().includes(message.content.trim())) {
                        element.remove();
                    }
                });
                this.renderMessage(message);
            });
            return newMessages;
        });
    }
    async handleSend() {
        if (!this.message?.trim()) {
            return;
        }
        let message = this.message;
        this.message = '';
        this.createBeforeElement(message);
        let responseId = await this._chatService.sendMessage(message, this.itemId, this.chatId, this.lastMessageId, 'Text');
        this.lastMessageId = responseId;
        this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);
        this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));
    }
    ;
    groupMessages() {
        const result = [];
        let currentCardGroup = [];
        const flushCardGroup = () => {
            if (currentCardGroup.length > 0) {
                const carouselData = {
                    slides: currentCardGroup.map(card => {
                        const cardHtml = `
              <pn-chat-message customerSegment=${this.customerSegment} data-card role="article" category=${card.category}>
                <h2 class="card-heading">${card.heading}</h2>
                <p>${card.content}</p>
                ${card.buttons
                            ?.map(button => `
                  <pn-button
                    href="${button.href}"
                    class="${button.class}"
                    appearance="${button.appearance}"
                    variant="${button.variant}"
                    small="${button.small}"
                    role="button"
                  >
                    ${button.content}
                  </pn-button>
                `)
                            .join('') || ''}
              </pn-chat-message>
            `;
                        return cardHtml;
                    }),
                };
                result.push(h("pn-marketweb-carousel", { class: "card-container", nextButtonLabel: "Next", previousButtonLabel: "Previous", ariaNavigationLabel: this.getTranslation('relatedContentAriaLabel'), slidesToShow: this.carouselSlidesToShow, source: JSON.stringify(carouselData) }));
                currentCardGroup = [];
            }
        };
        this.messagesData.messages.forEach((message, index) => {
            if (message.category === 'Card') {
                currentCardGroup.push(message);
                if (index === this.messagesData.messages.length - 1 || this.messagesData.messages[index + 1]?.category !== 'Card') {
                    flushCardGroup();
                }
            }
            else {
                flushCardGroup();
                result.push(this.renderMessage(message));
            }
        });
        return result;
    }
    handleKeyPress = (event) => {
        if (event.key === 'Enter' && this.message.trim()) {
            event.preventDefault();
            this.handleSend();
        }
    };
    handleSendMessage = (event) => {
        if (this.message.trim()) {
            event.preventDefault();
            this.handleSend();
        }
    };
    handleButtonKeyDown(event) {
        if (event.key === 'Enter' || event.key === ' ') {
            event.preventDefault();
            event.target.click();
        }
    }
    handleKeyDown(event) {
        if (event.key === 'Escape' && this.isMinimized && !this.isClosed) {
            this.toggleChat();
        }
    }
    handleMessagesChange(newMessage) {
        if (newMessage) {
            this.handleSend();
        }
    }
    handleNewChatId() {
        this.chatId = this.pnChatId === this._defaultAlternativeChatId ? this._defaultChatId : this.pnChatId;
        this.messagesData.messages = [];
        this.isMinimized = false;
        this.setStartValues();
    }
    handleSameChatId() {
        this.isMinimized = false;
    }
    scrollToBottom() {
        const observer = new MutationObserver((_, obs) => {
            const chatMain = document.getElementById('chat-main');
            if (chatMain) {
                setTimeout(() => {
                    chatMain.scrollTo({
                        top: chatMain.scrollHeight,
                        behavior: 'smooth'
                    });
                }, 500);
                obs.disconnect();
            }
        });
        observer.observe(document.body, { childList: true, subtree: true, });
    }
    closeChat = () => {
        this._forceClose = true;
        this.storage.remove(this.chatLocalStorageKey);
        this.chatId = null;
        this.pnChatId = this._defaultChatId;
        let chatElement = document.getElementsByTagName('pn-chat')[0];
        chatElement.setAttribute('item-id', '');
        let hasActiveShipmentInUrl = window.location.href.includes(this._chatSegment);
        if (hasActiveShipmentInUrl) {
            this.isMinimized = !this.isMinimized;
            this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));
            document.body.classList.toggle('chat-open');
            window.location.href = window.location.href.split(this._chatSegment)[0];
        }
        else {
            this._forceClose = false;
            this.toggleChat();
        }
    };
    toggleChat = () => {
        this.isMinimized = !this.isMinimized;
        this.announceToScreenReader(this.isMinimized ? this.getTranslation('chatMinimizedAriaLabel') : this.getTranslation('chatOpenedAriaLabel'));
        document.body.classList.toggle('chat-open');
        if (!this.isMinimized && !this.chatId) {
            this.setStartValues();
        }
    };
    announceToScreenReader(message) {
        const announcement = document.createElement('div');
        announcement.setAttribute('role', 'status');
        announcement.setAttribute('aria-live', 'polite');
        announcement.classList.add('sr-only');
        announcement.textContent = message;
        document.body.appendChild(announcement);
        setTimeout(() => announcement.remove(), 1000);
    }
    renderMessage(message) {
        switch (message.category) {
            case 'Bot':
                return this.renderBaseMessage(message);
            case 'Button':
                return this.renderButtonMessage(message);
            case 'ButtonResponse':
                return this.renderBaseMessage(message);
            case 'Link':
                return this.renderLinkMessage(message);
            case 'Card':
                return this.renderCardMessage(message);
            case 'User':
                return this.renderBaseMessage(message);
            case 'Agent':
                return this.renderAgentMessage(message);
            case 'System':
                return this.renderBaseMessage(message);
        }
    }
    renderBaseMessage(message) {
        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category, agentName: '', role: "log", "aria-live": "polite" }, message.content));
    }
    renderAgentMessage(message) {
        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category, agentName: message.agentName, role: "log", "aria-live": "polite" }, message.content));
    }
    renderButtonMessage(message) {
        let props = {};
        if (message?.props) {
            try {
                props = JSON.parse(message.props);
            }
            catch (error) {
                console.error('Error parsing button props', error instanceof Error ? error.message : 'Unknown error');
                return;
            }
        }
        const handleClick = (event) => {
            const button = event.target.closest('button');
            if (button === null || button?.hasAttribute('disabled')) {
                event.preventDefault();
                event.stopPropagation();
                return;
            }
            if (props['data-action'] === 'minimize') {
                this.toggleChat();
            }
            if (props['data-action'] === 'choice') {
                (async () => {
                    await this.handleSendChoice(props['data-option-choice'], message.content);
                })();
                const choiceButtons = document.querySelectorAll('[data-action="choice"]');
                choiceButtons.forEach(pnButton => {
                    const buttonInner = pnButton.querySelector('button');
                    buttonInner?.setAttribute('disabled', 'true');
                });
            }
        };
        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category }, h("pn-button", { class: message.class, role: "button", ...props, onClick: handleClick, onKeyDown: e => this.handleButtonKeyDown(e) }, message.content)));
    }
    createBeforeElement(content) {
        const targetElement = this.chatMessagesContainer;
        const chatMessage = document.createElement('pn-chat-message');
        chatMessage.setAttribute('customerSegment', this.customerSegment);
        chatMessage.setAttribute('category', 'User');
        chatMessage.classList.add('pn-chat-before');
        chatMessage.textContent = content;
        targetElement.appendChild(chatMessage);
        this.scrollToBottom();
        chatMessage.scrollIntoView();
    }
    async handleSendChoice(choiceId, content) {
        this.createBeforeElement(content);
        let responseId = await this._chatService.sendMessage(choiceId, this.itemId, this.chatId, this.lastMessageId, 'Choice');
        this.lastMessageId = responseId;
        this.lastMessageId = this._chatService.GetLastMessageId(this.messagesData.messages, this.lastMessageId);
        this.announceToScreenReader(this.getTranslation('sentMessageAriaLabel'));
    }
    renderLinkMessage(message) {
        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category }, h("a", { href: message.href, role: "link", rel: "noopener noreferrer" }, h("span", { class: "content" }, message.content), h("pn-icon", { icon: arrow_right, color: "blue700", "aria-hidden": "true", role: "presentation" }))));
    }
    renderCardMessage(message) {
        return (h("pn-chat-message", { customerSegment: this.customerSegment, category: message.category, "data-card": true, role: "article" }, h("h2", { class: "card-heading" }, message.heading), h("p", null, message.content), message.buttons && (h("div", { class: "cta" }, message.buttons?.map(button => (h("pn-button", { href: button.href, class: button.class, appearance: button.appearance, variant: button.variant, small: button.small, role: "button", onKeyDown: e => this.handleButtonKeyDown(e) }, button.content)))))));
    }
    render() {
        const mainId = 'chat-main';
        const inputId = 'chat-input';
        const headerButton = this.messagesData?.header.button;
        return (h(Host, { key: 'ef0d728a1117b155d7de29d80ab52bd0231f2d3d', class: this.customerSegment }, !this.isClosed && this.messagesData && (h("div", { key: '7c0568c9c5eef3d437bd0af6265f79bf97341246', class: `pn-chat ${this.isMinimized ? 'minimized' : ''} ${this.isClosed ? 'closed' : ''}`, ref: el => (this.chatRef = el), role: "region", "aria-label": this.mainHeading }, !this.isMinimized && (h(Fragment, { key: 'da8dd27a607182e85ddfeb00752c9518ffdc26d3' }, h("header", { key: 'c6f61749f1d1e4f8070b9a454744f43334bd0daf', class: "chat-header", role: "banner" }, h("h1", { key: '5c9b99aaa4c9d711f31fe1e791c1cd2008a6d846', id: "chat-title" }, this.mainHeading), h("div", { key: 'fadee3584da81fd35f67845af1f354b64e77a1b8', class: "chat-controls", role: "toolbar", "aria-label": this.getTranslation('chatControlsAriaLabel') }, h("pn-button", { key: '5659c90691ddfa151b9b6c77305d56f4e73737e1', icon: minus, "icon-only": "true", class: "minimize-btn", onClick: this.toggleChat, "aria-expanded": !this.isMinimized, "aria-controls": mainId, "aria-label": this.getTranslation('minimizeChatAriaLabel'), appearance: "light", tooltip: this.getTranslation('minimizeChatAriaLabel'), small: "true" }), h("pn-button", { key: '1eee187987f6482c1cb1710f2f6890d64e6a088b', icon: close, "icon-only": "true", class: "close-btn", onClick: this.closeChat, "aria-expanded": !this.isMinimized, "aria-label": this.getTranslation('closeChatAriaLabel'), appearance: "light", tooltip: this.getTranslation('closeChatAriaLabel'), small: "true" }))), (this.messagesData?.messages?.length ?? 0) > 0 ?
            (h("main", { id: mainId, class: "chat-main", role: "main", "aria-labelledby": "chat-title" }, this.messagesData.header && (h("div", { class: "chat-overview" }, h("div", { class: "body" }, this.messagesData.header.body), headerButton && (h("pn-button", { href: headerButton.href, class: headerButton.class, appearance: headerButton.appearance, variant: headerButton.variant, small: headerButton.small, role: "button", onKeyDown: e => this.handleButtonKeyDown(e) }, headerButton.content)))), h("div", { ref: el => (this.chatMessagesContainer = el), class: "chat-messages", role: "log", "aria-live": "polite", "aria-label": this.getTranslation('chatMessagesAriaLabel') }, this.groupMessages()), h("pn-icon", { class: "indicator-icon", "aria-label": this.getTranslation('waitingForAnswerLabel'), role: "presentation" })))
            : (h("main", { id: mainId, class: "chat-main loading-chat-main", role: "main", "aria-labelledby": "chat-title" }, h("div", { class: "chat-loading-spinner" }, h("pn-spinner", { light: "true", size: "1.5" })), h("span", { class: "chat-loading-content" }, this.getTranslation('loadingText')))), h("footer", { key: '3d80a8f4115c763ddb4ec3f9fda3ff8404c87f0b', class: "chat-footer", role: "contentinfo" }, h("div", { key: '3ded4cbdd6ff7c53fbc8864d27d5dad628cf093a', class: "form", role: "form", "aria-labelledby": inputId }, h("label", { key: '5d6cb81df2906085ccc1c409c33e94eaaefac16d', htmlFor: inputId, class: "sr-only" }, this.getTranslation('writeChatMessagePlaceholder')), h("div", { key: '6e61161f8aefb0f5816fe579a53732c130c363b0', class: "chat-input-container" }, h("input", { key: '7f0ecc89511587e2fbbd1eb94330a2eec5b3b0e4', id: inputId, class: "chat-text-input", ref: el => (this.inputRef = el), type: "text", placeholder: this.getTranslation('writeChatMessagePlaceholder'), value: this.message, onInput: (e) => (this.message = e.target.value), onKeyPress: this.handleKeyPress, maxLength: 3990 }), !this.message.trim() ? (h("div", { class: "chat-disabled-button", role: "button", "aria-label": this.getTranslation('sendButtonText'), "aria-disabled": "true", tabIndex: -1 }, h("pn-icon", { color: "gray400", icon: submit }))) : (h("pn-button", { "icon-only": "true", variant: "borderless", appearance: "light", icon: submit, onClick: this.handleSendMessage, disabled: !this.message.trim(), "aria-label": this.getTranslation('sendButtonText'), tooltip: this.getTranslation('sendButtonText') }))))))), this.isMinimized && (h("pn-button", { key: '8f3a191fa459261f45a102e8e5d26b55c27c9ac6', icon: talk_bubble, "icon-only": "true", class: "open-chat-btn", onClick: this.toggleChat, tooltip: this.getTranslation('openChatAriaLabel'), "aria-label": this.getTranslation('openChatAriaLabel'), "aria-expanded": !this.isMinimized }))))));
    }
    static get watchers() { return {
        "messages": ["handleMessagesChange"],
        "pnChatId": ["handleNewChatId"],
        "forceOpen": ["handleSameChatId"],
        "isMinimized": ["scrollToBottom"]
    }; }
};
PnChat.style = PnChatStyle0;

export { PnChat as pn_chat };

//# sourceMappingURL=pn-chat.entry.js.map