import { r as registerInstance, h, d as Host, g as getElement } from './index-c0a4d8bd.js';
import { a as arrow_left } from './arrow_left-2c8d8857.js';
import { a as arrow_right } from './arrow_right-f4852d04.js';

const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M16.035 5.52c.718-.705 1.75-.682 2.444 0 .692.678.693 1.688.014 2.326l-.021.02-1.68 1.68a1 1 0 0 0 1.415 1.414l1.669-1.669c1.544-1.466 1.452-3.779.003-5.2s-3.727-1.487-5.244 0l-4.507 4.42c-1.548 1.465-1.457 3.781-.007 5.203a1 1 0 1 0 1.4-1.428c-.692-.68-.692-1.688-.014-2.327l.014-.014z"/><path fill="#000" d="M14.762 10.254a1 1 0 1 0-1.33 1.492c.756.675.754 1.63.014 2.263l-.015.013-4.965 4.426a2.177 2.177 0 0 1-2.897 0c-.757-.675-.755-1.63-.015-2.262l.026-.024 2.097-1.926a1 1 0 1 0-1.353-1.472l-2.085 1.915c-1.704 1.471-1.6 3.837 0 5.262a4.177 4.177 0 0 0 5.558 0l4.958-4.42c1.71-1.47 1.607-3.841.007-5.267"/></svg>';
const link = icon;

const pnChatMessageCss = "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-message{display:flex;text-align:left}pn-chat-message.user,pn-chat-message.buttonresponse{justify-content:flex-end}pn-chat-message.system-message{text-align:center;justify-content:center}pn-chat-message .message-container{border-radius:0.8rem;display:flex;gap:1rem;max-width:85%;overflow-x:hidden}pn-chat-message .message-container .category{width:2.6rem}pn-chat-message .message-container.user{max-width:75%}pn-chat-message .message-container.bot .message,pn-chat-message .message-container.agent .message,pn-chat-message .message-container.link .message{background-color:#f3f2f2}pn-chat-message .message-container.bot .category,pn-chat-message .message-container.agent .category,pn-chat-message .message-container.link .category{align-self:flex-end}pn-chat-message .message-container.link{flex-basis:100%}pn-chat-message .message-container.link .category{align-self:center}pn-chat-message .message-container.link .content{line-height:1.5}pn-chat-message .message-container.link .message{padding:0}pn-chat-message .message-container.link .message a{color:#005d92;font-weight:500;display:flex;justify-content:space-between;padding:1rem 1.6rem;text-decoration:underline}pn-chat-message .message-container.link .business.message{background-color:#fdefee}pn-chat-message .message-container.button{flex-basis:100%;text-align:center;max-width:unset}pn-chat-message .message-container.button .message{padding:0}pn-chat-message .message-container.button .pn-button{min-width:18rem}pn-chat-message .message-container.button .pn-button:disabled{color:#969087}pn-chat-message .message-container.button .pn-button:disabled .pn-button-bg{border-color:#f3f2f2;background-color:#f3f2f2}pn-chat-message .message-container.card{border:solid 1px #d3cecb;border-radius:1.6rem;flex-basis:100%;max-width:100%}pn-chat-message .message-container.card .message{display:flex;flex-direction:column;gap:0.8rem;padding:1.6rem}pn-chat-message .message-container.card .card-heading{font-size:1.6rem;line-height:2.4rem;font-weight:700}pn-chat-message .message-container.card .cta{display:flex;flex-direction:row;gap:0.5rem}pn-chat-message .message-container.card .read-more{align-self:flex-start;margin-top:auto}pn-chat-message .message-container.user .message,pn-chat-message .message-container.buttonresponse .message{background-color:#e0f8ff;color:#2d2013;border-radius:0.8rem 0.8rem 0 0.8rem}pn-chat-message .message-container .message{border-radius:0 0.8rem 0.8rem 0.8rem;display:inline-block;flex:1 1 auto;font-size:1.4rem;line-height:2rem;padding:1rem 1.6rem;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;word-break:break-word}@media (max-width: 767px){pn-chat-message .message-container .message{font-size:1.6rem}}pn-chat-message .message-container.agent .category .pn-icon{background-color:#00a0d6;color:#ffffff;text-align:center;border-radius:50%;display:inline-block;width:2.5rem;height:2.5rem;font-weight:500;font-size:1.2rem;line-height:2.6rem}pn-chat-message[data-card]{height:100%}";
const PnChatMessageStyle0 = pnChatMessageCss;

const PnChatMessage = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.category = undefined;
        this.customerSegment = undefined;
        this.agentName = undefined;
    }
    robotIcon = '<?xml version="1.0" encoding="UTF-8"?> <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 20 20"> <!-- Generator: Adobe Illustrator 29.5.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 141)  --> <defs> <style> .st0 { fill: none; } .st1 { fill: #8eddf9; } .st2 { fill: #f3f2f2; } .st3 { fill: #0d234b; } .st4 { fill: #f06365; } .st5 { clip-path: url(#clippath); } .st6 { fill: #005d92; } </style> <clipPath id="clippath"> <rect class="st0" width="20" height="20"/> </clipPath> </defs> <g class="st5"> <g> <path class="st2" d="M10,20c5.5,0,10-4.5,10-10S15.5,0,10,0,0,4.5,0,10s4.5,10,10,10Z"/> <path class="st3" d="M10.5,4h-.5v2.8h.5v-2.8Z"/> <path class="st3" d="M10.2,4.3c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path class="st3" d="M9,5h2.4c1,0,1.8.8,1.8,1.8h-6c0-1,.8-1.8,1.8-1.8Z"/> <path class="st4" d="M17,10.3v-.8c0-1.9-1.5-3.5-3.5-3.5h-7.1c-1.9,0-3.5,1.6-3.5,3.5v.8h14.1Z"/> <path d="M13.9,16.1l-3.7.4v-.4s3.6-.4,3.6-.4c.8,0,1.6-.4,2.1-1s.7-2.9.7-3.7h.4c0,.9-.2,3.3-.8,3.9-.6.7-1.4,1.1-2.3,1.2Z"/> <path class="st4" d="M16.3,12.1v-3.6h.2c1,0,1.8.8,1.8,1.8s-.8,1.8-1.8,1.8h-.2Z"/> <path class="st4" d="M3.7,8.5v3.6h-.2c-1,0-1.8-.8-1.8-1.8s.8-1.8,1.8-1.8h.2Z"/> <path class="st3" d="M13.1,6.6h-6.2c-1.8,0-3.3,1.5-3.3,3.3v2.1c0,1.8,1.5,3.3,3.3,3.3h6.2c1.8,0,3.3-1.5,3.3-3.3v-2.1c0-1.8-1.5-3.3-3.3-3.3Z"/> <path class="st6" d="M12.8,7.8h-5.6c-1.4,0-2.5,1.1-2.5,2.5v1.4c0,1.4,1.1,2.4,2.5,2.4h5.6c1.4,0,2.4-1.1,2.4-2.4v-1.4c0-1.4-1.1-2.5-2.4-2.5Z"/> <path class="st1" d="M12.3,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path class="st1" d="M7.7,11.9c.5,0,1-.4,1-1s-.4-1-1-1-1,.4-1,1,.4,1,1,1Z"/> <path d="M11,15.8h-1.5c-.3,0-.5.2-.5.5h0c0,.3.2.5.5.5h1.5c.3,0,.5-.2.5-.5h0c0-.3-.2-.5-.5-.5Z"/> </g> </g> </svg>';
    blue700 = 'blue700';
    getIcon() {
        let icon = null;
        switch (this.category) {
            case 'Bot':
                return this.robotIcon;
            case 'Agent':
                return this.agentName;
            case 'Link':
                return link;
        }
        return icon;
    }
    getMessageClass() {
        switch (this.category) {
            case 'ButtonResponse':
                return 'buttonresponse';
            case 'User':
                return 'user';
            case 'System':
                return 'system-message';
            default:
                return undefined;
        }
    }
    render() {
        const segmentClass = this.customerSegment?.toLowerCase() || '';
        const categoryClass = this.category?.toLowerCase() || '';
        return (h(Host, { key: '0374df82558acb6e79d3d07c0f2c298d2ce92870', class: this.getMessageClass() }, h("div", { key: '4c1757209df47ef338df4d85cf0f05394910e42a', class: `message-container ${categoryClass}` }, this.getIcon() && (h("span", { key: 'eca69f752de209c2a3265f12b6b90f1754e792c7', class: "category" }, h("pn-icon", { key: 'dd21b543ffc4f4a13c67376b913086b9ac3bbbe4', icon: this.getIcon(), color: this.blue700, "aria-hidden": "true", role: "presentation" }))), h("span", { key: '832adb5cfe7cd28ca5b3cf514d679d03df5795ac', class: `message ${segmentClass}` }, h("slot", { key: '9f73842238b2b8ca041ba9c643cbf6df2d60599b' })))));
    }
};
PnChatMessage.style = PnChatMessageStyle0;

const pnMarketwebCarouselCss = "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-marketweb-carousel{display:inline-block}pn-marketweb-carousel .pn-marketweb-carousel .slider-wrapper{margin:1rem;overflow:hidden;position:relative;touch-action:pan-y pinch-zoom}pn-marketweb-carousel .pn-marketweb-carousel .slides-container{display:flex;width:100%;list-style:none;margin:0;padding:0;overflow:hidden;position:relative;touch-action:none;transition:transform 0.5s ease-in-out;user-select:none}pn-marketweb-carousel .pn-marketweb-carousel .slides-container[data-partial=false] .slide{width:100%}pn-marketweb-carousel .pn-marketweb-carousel [data-slide]{flex:0 0 auto;transition:transform 0.5s ease-in-out}pn-marketweb-carousel .pn-marketweb-carousel .nav-button{cursor:pointer;display:flex;position:absolute;top:0;bottom:0;transform:translateY(-50%);height:2rem;margin:auto;padding:0;opacity:0.85;transition:opacity 200ms;z-index:1}pn-marketweb-carousel .pn-marketweb-carousel .nav-button.invisible{opacity:0}pn-marketweb-carousel .pn-marketweb-carousel .nav-button[data-show=false]{display:none}pn-marketweb-carousel .pn-marketweb-carousel .nav-button:hover,pn-marketweb-carousel .pn-marketweb-carousel .nav-button:focus{opacity:1}pn-marketweb-carousel .pn-marketweb-carousel [data-nav-button-prev]{left:1.75rem;border-radius:0 2rem 2rem 0}pn-marketweb-carousel .pn-marketweb-carousel [data-nav-button-next]{right:1.75rem;border-radius:2rem 0 0 2rem}@media (prefers-reduced-motion: reduce){pn-marketweb-carousel .slides-container{transition:none}pn-marketweb-carousel [data-slide]{transition:none}}";
const PnMarketwebCarouselStyle0 = pnMarketwebCarouselCss;

const PnMarketwebCarousel = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.previousButtonLabel = undefined;
        this.nextButtonLabel = undefined;
        this.ariaNavigationLabel = undefined;
        this.source = undefined;
        this.slidesToShow = 1;
        this.showCarouselButtons = true;
        this.showFirstSlidePrevButton = false;
        this.showLastSlideNextButton = false;
        this.slidesData = [];
        this.currentSlide = 0;
        this.isDragging = false;
        this.slideWidth = 0;
    }
    static DEFAULTS = {
        SWIPE_THRESHOLD_PX: 50,
        ANIMATION_DURATION_MS: 300,
        OVERSCROLL_LIMIT_PERCENT: 30,
    };
    get hostElement() { return getElement(this); }
    slides = null;
    slidesContainer = null;
    totalSlides = 0;
    prevButton = null;
    nextButton = null;
    dragStartX = 0;
    listeners = [];
    memoizedSlideWidth = null;
    componentWillLoad() {
        this.setInitialValues();
    }
    componentDidLoad() {
        this.setupCarousel();
        window.addEventListener('resize', this.handleResize);
    }
    disconnectedCallback() {
        this.cleanup();
        window.removeEventListener('resize', this.handleResize);
    }
    async goToSlide(index) {
        if (index >= 0 && index < this.totalSlides) {
            this.currentSlide = index;
            this.moveSlides();
            this.updateNavButtons();
        }
    }
    async getCurrentSlide() {
        return this.currentSlide;
    }
    handleSourceChange(newValue) {
        if (newValue) {
            this.setInitialValues();
        }
    }
    setInitialValues() {
        if (!this.source?.trim()) {
            console.warn('No source provided for carousel');
            return;
        }
        try {
            const parsedData = JSON.parse(this.source);
            if (!parsedData?.slides) {
                throw new Error('Invalid slides data structure');
            }
            if (Array.isArray(parsedData.slides)) {
                this.slidesData = parsedData.slides;
                this.showCarouselButtons = this.slidesData.length > 1;
            }
            else {
                throw new Error('Slides data is not an array');
            }
        }
        catch (error) {
            console.error('Error parsing carousel source:', error instanceof Error ? error.message : 'Unknown error');
            this.slidesData = [];
        }
    }
    setupCarousel() {
        this.initializeElements();
        this.attachEventListeners();
        this.updateNavButtons();
    }
    initializeElements() {
        this.slidesContainer = this.hostElement.querySelector('[data-slides-container]');
        this.slides = this.hostElement.querySelectorAll('[data-slide]');
        this.totalSlides = this.slides?.length ?? 0;
        if (this.showCarouselButtons) {
            this.prevButton = this.hostElement.querySelector('[data-nav-button-prev]');
            this.nextButton = this.hostElement.querySelector('[data-nav-button-next]');
        }
        this.slideWidth = 100 / this.slidesToShow;
    }
    attachEventListeners() {
        if (!this.slidesContainer)
            return;
        const addListener = (element, event, handler, options) => {
            element.addEventListener(event, handler, options);
            this.listeners.push({ element, event, handler });
        };
        // Touch events
        addListener(this.slidesContainer, 'touchstart', this.handleTouchStart, { passive: true });
        addListener(this.slidesContainer, 'touchmove', this.handleTouchMove, { passive: false });
        addListener(this.slidesContainer, 'touchend', this.handleTouchEnd, { passive: true });
        // Mouse events
        addListener(this.slidesContainer, 'mousedown', this.handleTouchStart);
        addListener(this.slidesContainer, 'mousemove', this.handleTouchMove);
        addListener(this.slidesContainer, 'mouseup', this.handleTouchEnd);
        addListener(this.slidesContainer, 'mouseleave', this.handleTouchEnd);
        if (this.showCarouselButtons) {
            this.nextButton && addListener(this.nextButton, 'click', this.handleNextClick);
            this.prevButton && addListener(this.prevButton, 'click', this.handlePrevClick);
        }
    }
    cleanup() {
        this.listeners.forEach(({ element, event, handler }) => {
            element.removeEventListener(event, handler);
        });
        this.listeners = [];
    }
    handleResize = () => {
        this.memoizedSlideWidth = null;
    };
    getSlideWidth() {
        if (!this.memoizedSlideWidth && this.slidesContainer) {
            this.memoizedSlideWidth = this.slidesContainer.offsetWidth;
        }
        return this.memoizedSlideWidth ?? 0;
    }
    handleNextClick = (e) => {
        e.stopPropagation();
        this.nextSlide();
    };
    handlePrevClick = (e) => {
        e.stopPropagation();
        this.prevSlide();
    };
    handleTouchStart = (e) => {
        if (e.target.classList.contains('nav-button'))
            return;
        this.isDragging = true;
        this.dragStartX = 'touches' in e ? e.touches[0].clientX : e.clientX;
    };
    handleTouchMove = (e) => {
        if (!this.isDragging)
            return;
        if ('touches' in e) {
            e.preventDefault();
        }
        const currentPosition = 'touches' in e ? e.touches[0].clientX : e.clientX;
        const diff = currentPosition - this.dragStartX;
        const percentMove = (diff / this.getSlideWidth()) * 100;
        this.moveSlides(percentMove);
    };
    handleTouchEnd = (e) => {
        if (!this.isDragging)
            return;
        this.isDragging = false;
        const currentPosition = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;
        const diff = currentPosition - this.dragStartX;
        if (Math.abs(diff) > PnMarketwebCarousel.DEFAULTS.SWIPE_THRESHOLD_PX) {
            if (diff > 0 && this.currentSlide > 0) {
                this.currentSlide--;
            }
            else if (diff < 0 && this.currentSlide < this.totalSlides - 1) {
                this.currentSlide++;
            }
        }
        this.moveSlides();
        this.updateNavButtons();
    };
    calculateProportionalTranslation() {
        // Calculate proportional translation based on slidesToShow
        return -200 + (this.slidesToShow - 1) * 100;
    }
    moveSlides(extraTranslate = 0) {
        if (!this.slides || !this.slidesContainer) {
            return;
        }
        try {
            this.slides.forEach((slide, index) => {
                if (slide) {
                    // Set each slide's width
                    slide.style.width = `${this.slideWidth}%`;
                    let translation = 0;
                    if (this.slidesToShow === 1) {
                        // Full slide view
                        translation = -100 * this.currentSlide;
                    }
                    else {
                        // Partial slide view
                        if (this.totalSlides === 2) {
                            // Special case for 2 slides
                            if (this.currentSlide === 1) {
                                translation = -50; // Both slides move by -50%
                            }
                        }
                        else {
                            // 3 or more slides
                            if (this.currentSlide === 1) {
                                // Second slide showing - all slides move -100%
                                translation = -100;
                            }
                            else if (this.currentSlide === 2) {
                                // Third slide showing
                                if (index === 0) {
                                    translation = -100; // First slide stays at -100%
                                }
                                else {
                                    // Calculate proportional translation
                                    translation = this.calculateProportionalTranslation();
                                }
                            }
                        }
                    }
                    // Add any extra translation from dragging
                    translation += extraTranslate;
                    slide.style.transform = `translateX(${translation}%)`;
                    slide.style.position = 'relative';
                    // Update visibility for screen readers
                    let isVisible;
                    if (this.slidesToShow === 1) {
                        isVisible = index === this.currentSlide;
                    }
                    else {
                        isVisible =
                            this.currentSlide === 0 || // First slide showing
                                this.totalSlides === 2 || // Two slides - both visible
                                (this.currentSlide === 1 && translation === -100) || // Second slide showing
                                (this.currentSlide === 2 &&
                                    ((index === 0 && translation === -100) || // First slide still visible
                                        index > 0)); // Second and third slides visible
                    }
                    slide.setAttribute('aria-hidden', (!isVisible).toString());
                }
            });
        }
        catch (error) {
            console.error('Error moving slides:', error);
        }
    }
    updateNavButtons() {
        if (!this.showCarouselButtons)
            return;
        const isFirstSlide = this.currentSlide === 0;
        const isLastSlide = this.currentSlide === this.totalSlides - 1;
        if (this.prevButton) {
            this.prevButton.classList.toggle('invisible', isFirstSlide && !this.showFirstSlidePrevButton);
            this.prevButton.dataset.show = isFirstSlide ? `${this.showFirstSlidePrevButton}` : 'true';
        }
        if (this.nextButton) {
            this.nextButton.classList.toggle('invisible', isLastSlide && !this.showLastSlideNextButton);
            this.nextButton.dataset.show = isLastSlide ? `${this.showLastSlideNextButton}` : 'true';
        }
    }
    nextSlide() {
        if (this.currentSlide >= this.totalSlides - 1) {
            this.currentSlide = 0;
        }
        else {
            this.currentSlide++;
        }
        this.moveSlides();
        this.updateNavButtons();
    }
    prevSlide() {
        if (this.currentSlide <= 0) {
            this.currentSlide = this.totalSlides - 1;
        }
        else {
            this.currentSlide--;
        }
        this.moveSlides();
        this.updateNavButtons();
    }
    render() {
        return (h(Host, { key: '8d489af98cf73ac43c552ac3ee316bd24bf5a2d0' }, h("div", { key: 'dc3d18f66f48af9cf2ed99d495c3626e95d1d8b3', class: "pn-marketweb-carousel" }, h("section", { key: '27dfb31b3648f26928645f1f713bafaedbb9f0fb', class: "slider-wrapper" }, this.showCarouselButtons && (h("div", { key: '5f88edaf3de10701c2632f592715f9bcefbd22d5', class: "nav-buttons", role: "group", "aria-label": this.ariaNavigationLabel }, h("pn-button", { key: '2df234b30539b17076a6db38da77e38b8b593ba0', appearance: "light", icon: arrow_left, "icon-only": "true", tooltip: this.previousButtonLabel, class: `nav-button ${this.currentSlide === 0 && !this.showFirstSlidePrevButton ? 'invisible' : ''}`, "data-nav-button-prev": true, "area-label": this.previousButtonLabel, "aria-disabled": this.currentSlide === 0 && !this.showFirstSlidePrevButton }), h("pn-button", { key: 'd9637df87e201c5667c164f65a7d486a2bdc12e8', appearance: "light", icon: arrow_right, "icon-only": "true", tooltip: this.nextButtonLabel, class: "nav-button", "data-nav-button-next": true, "area-label": this.nextButtonLabel, "aria-disabled": this.currentSlide === this.totalSlides - 1 && !this.showLastSlideNextButton }))), this.slidesData && (h("ul", { key: '61a176627f3a3c5df83b2498e8cfc3570ef1ec5e', class: "slides-container", "data-slides-container": true, "data-partial": this.slidesToShow === 1 ? 'false' : 'true', "aria-live": "polite", style: { display: 'flex', transform: 'none' } }, this.slidesData.map((slide, index) => (h("li", { class: "slide", "data-slide": true, innerHTML: slide, style: { width: this.slideWidth + '%' }, "aria-hidden": index !== this.currentSlide })))))))));
    }
    static get watchers() { return {
        "source": ["handleSourceChange"]
    }; }
};
PnMarketwebCarousel.style = PnMarketwebCarouselStyle0;

export { PnChatMessage as pn_chat_message, PnMarketwebCarousel as pn_marketweb_carousel };

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