@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/collection/components/widgets/pn-chat/pn-chat.js

@@ -0,0 +1,840 @@
+import { h, Host, Fragment } from "@stencil/core";
+import { minus, close, arrow_right, talk_bubble, submit } from "pn-design-assets/pn-assets/icons.js";
+import { LocalStorageService } from "../../../globals/LocalStorageService";
+import { PnChatService } from "./pn-chat.service";
+import { translations } from "./translations";
+export class PnChat {
+    constructor() {
+        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() {
+        let newMessages = 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');
+            }
+        }
+        const handleClick = () => {
+            if (props['data-action'] === 'minimize') {
+                this.toggleChat();
+            }
+            if (props['dataAction'] === 'choice' && props['dataOptionChoice']) {
+                (async () => {
+                    await this.handleSendChoice(props['dataOptionChoice'], message.content);
+                })();
+            }
+        };
+        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: '0cf24e9474bc0e7e39ec51b8e9bf7646f4ac21d8', class: this.customerSegment }, !this.isClosed && this.messagesData && (h("div", { key: 'f275614056e1f2df7972377ae3041ab690eae830', 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: '8bc0f594242ab297bc95e091a95bd382c1ce0b31' }, h("header", { key: '7a20b62deac0cb3fa34bf3abf7dba3f8eccb94e7', class: "chat-header", role: "banner" }, h("h1", { key: '0dbe95cfd3ca8856fc95bfd3e0a6e970b87ec6df', id: "chat-title" }, this.mainHeading), h("div", { key: '3c7ecf77edb890a351882a22a0910cdc8e2abc7b', class: "chat-controls", role: "toolbar", "aria-label": this.getTranslation('chatControlsAriaLabel') }, h("pn-button", { key: '564dd6d3c7234356f3805b4e0808411d97e41292', icon: minus, "icon-only": "true", class: "minimize-btn", onClick: this.toggleChat, "aria-expanded": !this.isMinimized, "aria-controls": mainId, "aria-label": this.getTranslation('minimizeChatAriaLabel'), variant: "borderless", tooltip: this.getTranslation('minimizeChatAriaLabel') }), h("pn-button", { key: '5d2873c2409d3caa7887bf9b99de5f64b5c8af22', icon: close, "icon-only": "true", class: "close-btn", onClick: this.closeChat, "aria-expanded": !this.isMinimized, "aria-label": this.getTranslation('closeChatAriaLabel'), variant: "borderless", tooltip: this.getTranslation('closeChatAriaLabel') }))), (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: '6d8a4b4e0ce587c39f307f5ad37dd7498eaaaa4a', class: "chat-footer", role: "contentinfo" }, h("div", { key: 'b2879f8c86f2d01cd9563d21d9303b2e4d649503', class: "form", role: "form", "aria-labelledby": inputId }, h("label", { key: '9af815bef9cf42c18379839844bcf0101bd3921e', htmlFor: inputId, class: "sr-only" }, this.getTranslation('writeChatMessagePlaceholder')), h("div", { key: '97007d97f8fe0a7c5f8b8e9c25bbe20918679484', class: "chat-input-container" }, h("input", { key: '6e156d7ad63763316d2be89b925099fa03984232', 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: '98f1a01a3774b504c91e72279133f46d327c723f', 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 is() { return "pn-chat"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-chat.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-chat.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": false
+            },
+            "customerSegment": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "CustomerSegment",
+                    "resolved": "string",
+                    "references": {
+                        "CustomerSegment": {
+                            "location": "import",
+                            "path": "./types",
+                            "id": "src/components/widgets/pn-chat/types.ts::CustomerSegment"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "customer-segment",
+                "reflect": false
+            },
+            "mainHeading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "main-heading",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "relatedContentAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "related-content-aria-label",
+                "reflect": false
+            },
+            "chatMinimizedAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "chat-minimized-aria-label",
+                "reflect": false
+            },
+            "chatOpenedAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "chat-opened-aria-label",
+                "reflect": false
+            },
+            "minimizeChatAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "minimize-chat-aria-label",
+                "reflect": false
+            },
+            "closeChatAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "close-chat-aria-label",
+                "reflect": false
+            },
+            "openChatAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open-chat-aria-label",
+                "reflect": false
+            },
+            "chatControlsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "chat-controls-aria-label",
+                "reflect": false
+            },
+            "chatMessagesAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "chat-messages-aria-label",
+                "reflect": false
+            },
+            "sentMessageAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "sent-message-aria-label",
+                "reflect": false
+            },
+            "writeChatMessagePlaceholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "write-chat-message-placeholder",
+                "reflect": false
+            },
+            "waitingForAnswerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "waiting-for-answer-label",
+                "reflect": false
+            },
+            "sendButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "send-button-text",
+                "reflect": false
+            },
+            "loadingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "loading-text",
+                "reflect": false
+            },
+            "carouselSlidesToShow": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "carousel-slides-to-show",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "messages": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "messages",
+                "reflect": false
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'sv'"
+            },
+            "market": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "market",
+                "reflect": false,
+                "defaultValue": "'se'"
+            },
+            "itemId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "item-id",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "pnChatId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "pn-chat-id",
+                "reflect": false,
+                "defaultValue": "'00000000-0000-0000-0000-000000000000'"
+            },
+            "forceOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "force-open",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isLoggedIn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "is-logged-in",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "message": {},
+            "messagesData": {},
+            "isMinimized": {},
+            "isClosed": {},
+            "lastMessageId": {},
+            "i18n": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "messages",
+                "methodName": "handleMessagesChange"
+            }, {
+                "propName": "pnChatId",
+                "methodName": "handleNewChatId"
+            }, {
+                "propName": "forceOpen",
+                "methodName": "handleSameChatId"
+            }, {
+                "propName": "isMinimized",
+                "methodName": "scrollToBottom"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=pn-chat.js.map