@postnord/pn-marketweb-components 3.5.3 → 4.0.0

package/components/pn-marketweb-carousel2.js

@@ -0,0 +1,326 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as arrow_left } from './arrow_left.js';
+import { a as arrow_right } from './arrow_right.js';
+
+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 = /*@__PURE__*/ proxyCustomElement(class PnMarketwebCarousel extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        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 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: 'c80db60a09f02cfeec55338910211c5a27ebedab' }, h("div", { key: '836a9635ebfbadddadfececd8e7f1f94f355f89b', class: "pn-marketweb-carousel" }, h("section", { key: '838b05eb1e8db65b84011b16ba7409dcf23b5eb3', class: "slider-wrapper" }, this.showCarouselButtons && (h("div", { key: '3a3fe23b4a586f047b5391b5b8406e02884d1620', class: "nav-buttons", role: "group", "aria-label": this.ariaNavigationLabel }, h("pn-button", { key: '9d47e97795ad23bf118b54e2e72730e1819b9d3b', 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: '58e1c0363129d693f052ec59bd1a3b427db9bc56', 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: '1c942f7d043a65e1b73a1bec69fbfdc3691c92f7', 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"]
+    }; }
+    static get style() { return PnMarketwebCarouselStyle0; }
+}, [0, "pn-marketweb-carousel", {
+        "previousButtonLabel": [1, "previous-button-label"],
+        "nextButtonLabel": [1, "next-button-label"],
+        "ariaNavigationLabel": [1, "aria-navigation-label"],
+        "source": [1],
+        "slidesToShow": [2, "slides-to-show"],
+        "showCarouselButtons": [4, "show-carousel-buttons"],
+        "showFirstSlidePrevButton": [4, "show-first-slide-prev-button"],
+        "showLastSlideNextButton": [4, "show-last-slide-next-button"],
+        "slidesData": [32],
+        "currentSlide": [32],
+        "isDragging": [32],
+        "slideWidth": [32],
+        "goToSlide": [64],
+        "getCurrentSlide": [64]
+    }, undefined, {
+        "source": ["handleSourceChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pn-marketweb-carousel"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pn-marketweb-carousel":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PnMarketwebCarousel);
+            }
+            break;
+    } });
+}
+
+export { PnMarketwebCarousel as P, defineCustomElement as d };
+
+//# sourceMappingURL=pn-marketweb-carousel2.js.map

package/components/pn-marketweb-carousel2.js.map

@@ -0,0 +1 @@
+{"file":"pn-marketweb-carousel2.js","mappings":";;;;AAAA,MAAM,sBAAsB,GAAG,o4DAAo4D,CAAC;AACp6D,kCAAe,sBAAsB;;MCgBxB,mBAAmB;;;;;;;;4BAaC,CAAC;mCACO,IAAI;wCACC,KAAK;uCACN,KAAK;0BAER,EAAE;4BACF,CAAC;0BACF,KAAK;0BACN,CAAC;;IApB/B,OAAgB,QAAQ,GAAG;QACjC,kBAAkB,EAAE,EAAE;QACtB,qBAAqB,EAAE,GAAG;QAC1B,wBAAwB,EAAE,EAAE;KACpB,CAAC;;IAkBH,MAAM,GAAmC,IAAI,CAAC;IAC9C,eAAe,GAAuB,IAAI,CAAC;IAC3C,WAAW,GAAW,CAAC,CAAC;IACxB,UAAU,GAAuB,IAAI,CAAC;IACtC,UAAU,GAAuB,IAAI,CAAC;IACtC,UAAU,GAAW,CAAC,CAAC;IACvB,SAAS,GAA0B,EAAE,CAAC;IACtC,kBAAkB,GAAkB,IAAI,CAAC;IAEjD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,gBAAgB;QACd,IAAI,CAAC,aAAa,EAAE,CAAC;QACrB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACtD;IAED,oBAAoB;QAClB,IAAI,CAAC,OAAO,EAAE,CAAC;QACf,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;KACzD;IAGD,MAAM,SAAS,CAAC,KAAa;QAC3B,IAAI,KAAK,IAAI,CAAC,IAAI,KAAK,GAAG,IAAI,CAAC,WAAW,EAAE;YAC1C,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAGD,MAAM,eAAe;QACnB,OAAO,IAAI,CAAC,YAAY,CAAC;KAC1B;IAGD,kBAAkB,CAAC,QAAgB;QACjC,IAAI,QAAQ,EAAE;YACZ,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;KACF;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,EAAE;YACxB,OAAO,CAAC,IAAI,CAAC,iCAAiC,CAAC,CAAC;YAChD,OAAO;SACR;QAED,IAAI;YACF,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAiB,CAAC;YAE3D,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE;gBACvB,MAAM,IAAI,KAAK,CAAC,+BAA+B,CAAC,CAAC;aAClD;YAED,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE;gBACpC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC;gBACpC,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAC;aACvD;iBAAM;gBACL,MAAM,IAAI,KAAK,CAAC,6BAA6B,CAAC,CAAC;aAChD;SACF;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,gCAAgC,EAAE,KAAK,YAAY,KAAK,GAAG,KAAK,CAAC,OAAO,GAAG,eAAe,CAAC,CAAC;YAC1G,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;SACtB;KACF;IAEO,aAAa;QACnB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC1B,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAEO,kBAAkB;QACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAc,yBAAyB,CAAC,CAAC;QAC9F,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAc,cAAc,CAAC,CAAC;QAC7E,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;QAE5C,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAc,wBAAwB,CAAC,CAAC;YACxF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAc,wBAAwB,CAAC,CAAC;SACzF;QAED,IAAI,CAAC,UAAU,GAAG,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;KAC3C;IAEO,oBAAoB;QAC1B,IAAI,CAAC,IAAI,CAAC,eAAe;YAAE,OAAO;QAElC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAa,EAAE,OAAsB,EAAE,OAAiC;YACjH,OAAO,CAAC,gBAAgB,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;SAClD,CAAC;;QAGF,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,EAAE,IAAI,CAAC,gBAAiC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3G,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,CAAC,eAAgC,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QAC1G,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,UAAU,EAAE,IAAI,CAAC,cAA+B,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;;QAGvG,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,CAAC,gBAAiC,CAAC,CAAC;QACvF,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,WAAW,EAAE,IAAI,CAAC,eAAgC,CAAC,CAAC;QACtF,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE,IAAI,CAAC,cAA+B,CAAC,CAAC;QACnF,WAAW,CAAC,IAAI,CAAC,eAAe,EAAE,YAAY,EAAE,IAAI,CAAC,cAA+B,CAAC,CAAC;QAEtF,IAAI,IAAI,CAAC,mBAAmB,EAAE;YAC5B,IAAI,CAAC,UAAU,IAAI,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;YAC/E,IAAI,CAAC,UAAU,IAAI,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;SAChF;KACF;IAEO,OAAO;QACb,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE;YACjD,OAAO,CAAC,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;SAC7C,CAAC,CAAC;QACH,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;KACrB;IAEO,YAAY,GAAG;QACrB,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC;KAChC,CAAC;IAEM,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,kBAAkB,IAAI,IAAI,CAAC,eAAe,EAAE;YACpD,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,eAAe,CAAC,WAAW,CAAC;SAC5D;QACD,OAAO,IAAI,CAAC,kBAAkB,IAAI,CAAC,CAAC;KACrC;IAEO,eAAe,GAAG,CAAC,CAAQ;QACjC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB,CAAC;IAEM,eAAe,GAAG,CAAC,CAAQ;QACjC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,SAAS,EAAE,CAAC;KAClB,CAAC;IAEM,gBAAgB,GAAG,CAAC,CAA0B;QACpD,IAAK,CAAC,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,YAAY,CAAC;YAAE,OAAO;QAEvE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,SAAS,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC;KACrE,CAAC;IAEM,eAAe,GAAG,CAAC,CAA0B;QACnD,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,IAAI,SAAS,IAAI,CAAC,EAAE;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;SACpB;QAED,MAAM,eAAe,GAAG,SAAS,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC;QAC1E,MAAM,IAAI,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;QAC/C,MAAM,WAAW,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC,aAAa,EAAE,IAAI,GAAG,CAAC;QAExD,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC;KAC9B,CAAC;IAEM,cAAc,GAAG,CAAC,CAA0B;QAClD,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAE7B,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAExB,MAAM,eAAe,GAAG,gBAAgB,IAAI,CAAC,GAAG,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,CAAC,CAAC,OAAO,CAAC;QACxF,MAAM,IAAI,GAAG,eAAe,GAAG,IAAI,CAAC,UAAU,CAAC;QAE/C,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAC,QAAQ,CAAC,kBAAkB,EAAE;YACpE,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,CAAC,EAAE;gBACrC,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;iBAAM,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;gBAC/D,IAAI,CAAC,YAAY,EAAE,CAAC;aACrB;SACF;QAED,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB,CAAC;IAEM,gCAAgC;;QAEtC,OAAO,CAAC,GAAG,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,GAAG,CAAC;KAC7C;IAEO,UAAU,CAAC,iBAAyB,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;YACzC,OAAO;SACR;QAED,IAAI;YACF,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK;gBAC/B,IAAI,KAAK,EAAE;;oBAET,KAAK,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC;oBAE1C,IAAI,WAAW,GAAG,CAAC,CAAC;oBAEpB,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;;wBAE3B,WAAW,GAAG,CAAC,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC;qBACxC;yBAAM;;wBAEL,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;;4BAE1B,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;gCAC3B,WAAW,GAAG,CAAC,EAAE,CAAC;6BACnB;yBACF;6BAAM;;4BAEL,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;;gCAE3B,WAAW,GAAG,CAAC,GAAG,CAAC;6BACpB;iCAAM,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;;gCAElC,IAAI,KAAK,KAAK,CAAC,EAAE;oCACf,WAAW,GAAG,CAAC,GAAG,CAAC;iCACpB;qCAAM;;oCAEL,WAAW,GAAG,IAAI,CAAC,gCAAgC,EAAE,CAAC;iCACvD;6BACF;yBACF;qBACF;;oBAGD,WAAW,IAAI,cAAc,CAAC;oBAE9B,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,WAAW,IAAI,CAAC;oBACtD,KAAK,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;;oBAGlC,IAAI,SAAS,CAAC;oBAEd,IAAI,IAAI,CAAC,YAAY,KAAK,CAAC,EAAE;wBAC3B,SAAS,GAAG,KAAK,KAAK,IAAI,CAAC,YAAY,CAAC;qBACzC;yBAAM;wBACL,SAAS;4BACP,IAAI,CAAC,YAAY,KAAK,CAAC;gCACvB,IAAI,CAAC,WAAW,KAAK,CAAC;iCACrB,IAAI,CAAC,YAAY,KAAK,CAAC,IAAI,WAAW,KAAK,CAAC,GAAG,CAAC;iCAChD,IAAI,CAAC,YAAY,KAAK,CAAC;qCACrB,CAAC,KAAK,KAAK,CAAC,IAAI,WAAW,KAAK,CAAC,GAAG;wCACnC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;qBACnB;oBAED,KAAK,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC,SAAS,EAAE,QAAQ,EAAE,CAAC,CAAC;iBAC5D;aACF,CAAC,CAAC;SACJ;QAAC,OAAO,KAAK,EAAE;YACd,OAAO,CAAC,KAAK,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC;SAC9C;KACF;IAEO,gBAAgB;QACtB,IAAI,CAAC,IAAI,CAAC,mBAAmB;YAAE,OAAO;QAEtC,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC;QAC7C,MAAM,WAAW,GAAG,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;QAE/D,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,YAAY,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;YAC9F,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,GAAG,YAAY,GAAG,GAAG,IAAI,CAAC,wBAAwB,EAAE,GAAG,MAAM,CAAC;SAC3F;QAED,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,WAAW,EAAE,WAAW,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;YAC5F,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,IAAI,GAAG,WAAW,GAAG,GAAG,IAAI,CAAC,uBAAuB,EAAE,GAAG,MAAM,CAAC;SACzF;KACF;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,WAAW,GAAG,CAAC,EAAE;YAC7C,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;SACvB;aAAM;YACL,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;QACD,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,YAAY,IAAI,CAAC,EAAE;YAC1B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;SAC1C;aAAM;YACL,IAAI,CAAC,YAAY,EAAE,CAAC;SACrB;QACD,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,uBAAuB,IAChC,gEAAS,KAAK,EAAC,gBAAgB,IAC5B,IAAI,CAAC,mBAAmB,KACvB,4DAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,mBAAmB,IACxE,kEACE,UAAU,EAAC,OAAO,EAClB,IAAI,EAAE,UAAU,eACN,MAAM,EAChB,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,KAAK,EAAE,cAAc,IAAI,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,GAAG,WAAW,GAAG,EAAE,EAAE,8CAEvF,IAAI,CAAC,mBAAmB,mBACrB,IAAI,CAAC,YAAY,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,GAC9D,EACZ,kEACE,UAAU,EAAC,OAAO,EAClB,IAAI,EAAE,WAAW,eACP,MAAM,EAChB,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,KAAK,EAAC,YAAY,8CAEN,IAAI,CAAC,eAAe,mBACjB,IAAI,CAAC,YAAY,KAAK,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,GAChF,CACR,CACP,EACA,IAAI,CAAC,UAAU,KACd,2DACE,KAAK,EAAC,kBAAkB,iDAEV,IAAI,CAAC,YAAY,KAAK,CAAC,GAAG,OAAO,GAAG,MAAM,eAC9C,QAAQ,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,IAE5C,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,MAChC,UAAI,KAAK,EAAC,OAAO,sBAAY,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,GAAG,GAAG,EAAE,iBAAe,KAAK,KAAK,IAAI,CAAC,YAAY,GAAO,CACxI,CAAC,CACC,CACN,CACO,CACN,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.scss?tag=pn-marketweb-carousel","src/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn-marketweb-carousel {\n  display: inline-block;\n\n  .pn-marketweb-carousel {\n    .slider-wrapper {\n      margin: 1rem;\n      overflow: hidden;\n      position: relative;\n      touch-action: pan-y pinch-zoom;\n    }\n\n    .slides-container {\n      display: flex;\n      width: 100%;\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      overflow: hidden;\n      position: relative;\n      touch-action: none;\n      transition: transform 0.5s ease-in-out;\n      user-select: none;\n\n      &[data-partial='false'] .slide {\n        width: 100%;\n      }\n    }\n\n    [data-slide] {\n      flex: 0 0 auto;\n      transition: transform 0.5s ease-in-out;\n    }\n\n    .nav-button {\n      cursor: pointer;\n      display: flex;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      transform: translateY(-50%);\n      height: 2rem;\n      margin: auto;\n      padding: 0;\n      opacity: 0.85;\n      transition: opacity 200ms;\n      z-index: 1;\n\n      &.invisible {\n        opacity: 0;\n      }\n\n      &[data-show='false'] {\n        display: none;\n      }\n\n      &:hover,\n      &:focus {\n        opacity: 1;\n      }\n    }\n\n    [data-nav-button-prev] {\n      left: 1.75rem;\n      border-radius: 0 2rem 2rem 0;\n    }\n\n    [data-nav-button-next] {\n      right: 1.75rem;\n      border-radius: 2rem 0 0 2rem;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .slides-container {\n      transition: none;\n    }\n\n    [data-slide] {\n      transition: none;\n    }\n  }\n}\n","import { Component, Host, Prop, Element, State, h, Watch, Method } from '@stencil/core';\nimport { arrow_left, arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\ninterface CarouselData {\n  slides: string[];\n}\n\ninterface EventListenerConfig {\n  element: HTMLElement;\n  event: string;\n  handler: EventListener;\n}\n\n@Component({\n  tag: 'pn-marketweb-carousel',\n  styleUrl: 'pn-marketweb-carousel.scss',\n})\nexport class PnMarketwebCarousel {\n  private static readonly DEFAULTS = {\n    SWIPE_THRESHOLD_PX: 50,\n    ANIMATION_DURATION_MS: 300,\n    OVERSCROLL_LIMIT_PERCENT: 30,\n  } as const;\n\n  @Element() private hostElement!: HTMLElement;\n\n  @Prop() previousButtonLabel!: string;\n  @Prop() nextButtonLabel!: string;\n  @Prop() ariaNavigationLabel!: string;\n  @Prop() source!: string;\n  @Prop() slidesToShow: number = 1;\n  @Prop() showCarouselButtons: boolean = true;\n  @Prop() showFirstSlidePrevButton: boolean = false;\n  @Prop() showLastSlideNextButton: boolean = false;\n\n  @State() private slidesData: string[] = [];\n  @State() private currentSlide: number = 0;\n  @State() private isDragging: boolean = false;\n  @State() private slideWidth: number = 0;\n\n  private slides: NodeListOf<HTMLElement> | null = null;\n  private slidesContainer: HTMLElement | null = null;\n  private totalSlides: number = 0;\n  private prevButton: HTMLElement | null = null;\n  private nextButton: HTMLElement | null = null;\n  private dragStartX: number = 0;\n  private listeners: EventListenerConfig[] = [];\n  private memoizedSlideWidth: number | null = null;\n\n  componentWillLoad(): void {\n    this.setInitialValues();\n  }\n\n  componentDidLoad(): void {\n    this.setupCarousel();\n    window.addEventListener('resize', this.handleResize);\n  }\n\n  disconnectedCallback(): void {\n    this.cleanup();\n    window.removeEventListener('resize', this.handleResize);\n  }\n\n  @Method()\n  async goToSlide(index: number): Promise<void> {\n    if (index >= 0 && index < this.totalSlides) {\n      this.currentSlide = index;\n      this.moveSlides();\n      this.updateNavButtons();\n    }\n  }\n\n  @Method()\n  async getCurrentSlide(): Promise<number> {\n    return this.currentSlide;\n  }\n\n  @Watch('source')\n  handleSourceChange(newValue: string): void {\n    if (newValue) {\n      this.setInitialValues();\n    }\n  }\n\n  private setInitialValues(): void {\n    if (!this.source?.trim()) {\n      console.warn('No source provided for carousel');\n      return;\n    }\n\n    try {\n      const parsedData = JSON.parse(this.source) as CarouselData;\n\n      if (!parsedData?.slides) {\n        throw new Error('Invalid slides data structure');\n      }\n\n      if (Array.isArray(parsedData.slides)) {\n        this.slidesData = parsedData.slides;\n        this.showCarouselButtons = this.slidesData.length > 1;\n      } else {\n        throw new Error('Slides data is not an array');\n      }\n    } catch (error) {\n      console.error('Error parsing carousel source:', error instanceof Error ? error.message : 'Unknown error');\n      this.slidesData = [];\n    }\n  }\n\n  private setupCarousel(): void {\n    this.initializeElements();\n    this.attachEventListeners();\n    this.updateNavButtons();\n  }\n\n  private initializeElements(): void {\n    this.slidesContainer = this.hostElement.querySelector<HTMLElement>('[data-slides-container]');\n    this.slides = this.hostElement.querySelectorAll<HTMLElement>('[data-slide]');\n    this.totalSlides = this.slides?.length ?? 0;\n\n    if (this.showCarouselButtons) {\n      this.prevButton = this.hostElement.querySelector<HTMLElement>('[data-nav-button-prev]');\n      this.nextButton = this.hostElement.querySelector<HTMLElement>('[data-nav-button-next]');\n    }\n\n    this.slideWidth = 100 / this.slidesToShow;\n  }\n\n  private attachEventListeners(): void {\n    if (!this.slidesContainer) return;\n\n    const addListener = (element: HTMLElement, event: string, handler: EventListener, options?: AddEventListenerOptions) => {\n      element.addEventListener(event, handler, options);\n      this.listeners.push({ element, event, handler });\n    };\n\n    // Touch events\n    addListener(this.slidesContainer, 'touchstart', this.handleTouchStart as EventListener, { passive: true });\n    addListener(this.slidesContainer, 'touchmove', this.handleTouchMove as EventListener, { passive: false });\n    addListener(this.slidesContainer, 'touchend', this.handleTouchEnd as EventListener, { passive: true });\n\n    // Mouse events\n    addListener(this.slidesContainer, 'mousedown', this.handleTouchStart as EventListener);\n    addListener(this.slidesContainer, 'mousemove', this.handleTouchMove as EventListener);\n    addListener(this.slidesContainer, 'mouseup', this.handleTouchEnd as EventListener);\n    addListener(this.slidesContainer, 'mouseleave', this.handleTouchEnd as EventListener);\n\n    if (this.showCarouselButtons) {\n      this.nextButton && addListener(this.nextButton, 'click', this.handleNextClick);\n      this.prevButton && addListener(this.prevButton, 'click', this.handlePrevClick);\n    }\n  }\n\n  private cleanup(): void {\n    this.listeners.forEach(({ element, event, handler }) => {\n      element.removeEventListener(event, handler);\n    });\n    this.listeners = [];\n  }\n\n  private handleResize = (): void => {\n    this.memoizedSlideWidth = null;\n  };\n\n  private getSlideWidth(): number {\n    if (!this.memoizedSlideWidth && this.slidesContainer) {\n      this.memoizedSlideWidth = this.slidesContainer.offsetWidth;\n    }\n    return this.memoizedSlideWidth ?? 0;\n  }\n\n  private handleNextClick = (e: Event): void => {\n    e.stopPropagation();\n    this.nextSlide();\n  };\n\n  private handlePrevClick = (e: Event): void => {\n    e.stopPropagation();\n    this.prevSlide();\n  };\n\n  private handleTouchStart = (e: TouchEvent | MouseEvent): void => {\n    if ((e.target as HTMLElement).classList.contains('nav-button')) return;\n\n    this.isDragging = true;\n    this.dragStartX = 'touches' in e ? e.touches[0].clientX : e.clientX;\n  };\n\n  private handleTouchMove = (e: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging) return;\n\n    if ('touches' in e) {\n      e.preventDefault();\n    }\n\n    const currentPosition = 'touches' in e ? e.touches[0].clientX : e.clientX;\n    const diff = currentPosition - this.dragStartX;\n    const percentMove = (diff / this.getSlideWidth()) * 100;\n\n    this.moveSlides(percentMove);\n  };\n\n  private handleTouchEnd = (e: TouchEvent | MouseEvent): void => {\n    if (!this.isDragging) return;\n\n    this.isDragging = false;\n\n    const currentPosition = 'changedTouches' in e ? e.changedTouches[0].clientX : e.clientX;\n    const diff = currentPosition - this.dragStartX;\n\n    if (Math.abs(diff) > PnMarketwebCarousel.DEFAULTS.SWIPE_THRESHOLD_PX) {\n      if (diff > 0 && this.currentSlide > 0) {\n        this.currentSlide--;\n      } else if (diff < 0 && this.currentSlide < this.totalSlides - 1) {\n        this.currentSlide++;\n      }\n    }\n\n    this.moveSlides();\n    this.updateNavButtons();\n  };\n\n  private calculateProportionalTranslation(): number {\n    // Calculate proportional translation based on slidesToShow\n    return -200 + (this.slidesToShow - 1) * 100;\n  }\n\n  private moveSlides(extraTranslate: number = 0): void {\n    if (!this.slides || !this.slidesContainer) {\n      return;\n    }\n\n    try {\n      this.slides.forEach((slide, index) => {\n        if (slide) {\n          // Set each slide's width\n          slide.style.width = `${this.slideWidth}%`;\n\n          let translation = 0;\n\n          if (this.slidesToShow === 1) {\n            // Full slide view\n            translation = -100 * this.currentSlide;\n          } else {\n            // Partial slide view\n            if (this.totalSlides === 2) {\n              // Special case for 2 slides\n              if (this.currentSlide === 1) {\n                translation = -50; // Both slides move by -50%\n              }\n            } else {\n              // 3 or more slides\n              if (this.currentSlide === 1) {\n                // Second slide showing - all slides move -100%\n                translation = -100;\n              } else if (this.currentSlide === 2) {\n                // Third slide showing\n                if (index === 0) {\n                  translation = -100; // First slide stays at -100%\n                } else {\n                  // Calculate proportional translation\n                  translation = this.calculateProportionalTranslation();\n                }\n              }\n            }\n          }\n\n          // Add any extra translation from dragging\n          translation += extraTranslate;\n\n          slide.style.transform = `translateX(${translation}%)`;\n          slide.style.position = 'relative';\n\n          // Update visibility for screen readers\n          let isVisible;\n\n          if (this.slidesToShow === 1) {\n            isVisible = index === this.currentSlide;\n          } else {\n            isVisible =\n              this.currentSlide === 0 || // First slide showing\n              this.totalSlides === 2 || // Two slides - both visible\n              (this.currentSlide === 1 && translation === -100) || // Second slide showing\n              (this.currentSlide === 2 &&\n                ((index === 0 && translation === -100) || // First slide still visible\n                  index > 0)); // Second and third slides visible\n          }\n\n          slide.setAttribute('aria-hidden', (!isVisible).toString());\n        }\n      });\n    } catch (error) {\n      console.error('Error moving slides:', error);\n    }\n  }\n\n  private updateNavButtons(): void {\n    if (!this.showCarouselButtons) return;\n\n    const isFirstSlide = this.currentSlide === 0;\n    const isLastSlide = this.currentSlide === this.totalSlides - 1;\n\n    if (this.prevButton) {\n      this.prevButton.classList.toggle('invisible', isFirstSlide && !this.showFirstSlidePrevButton);\n      this.prevButton.dataset.show = isFirstSlide ? `${this.showFirstSlidePrevButton}` : 'true';\n    }\n\n    if (this.nextButton) {\n      this.nextButton.classList.toggle('invisible', isLastSlide && !this.showLastSlideNextButton);\n      this.nextButton.dataset.show = isLastSlide ? `${this.showLastSlideNextButton}` : 'true';\n    }\n  }\n\n  private nextSlide(): void {\n    if (this.currentSlide >= this.totalSlides - 1) {\n      this.currentSlide = 0;\n    } else {\n      this.currentSlide++;\n    }\n    this.moveSlides();\n    this.updateNavButtons();\n  }\n\n  private prevSlide(): void {\n    if (this.currentSlide <= 0) {\n      this.currentSlide = this.totalSlides - 1;\n    } else {\n      this.currentSlide--;\n    }\n    this.moveSlides();\n    this.updateNavButtons();\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"pn-marketweb-carousel\">\n          <section class=\"slider-wrapper\">\n            {this.showCarouselButtons && (\n              <div class=\"nav-buttons\" role=\"group\" aria-label={this.ariaNavigationLabel}>\n                <pn-button\n                  appearance=\"light\"\n                  icon={arrow_left}\n                  icon-only=\"true\"\n                  tooltip={this.previousButtonLabel}\n                  class={`nav-button ${this.currentSlide === 0 && !this.showFirstSlidePrevButton ? 'invisible' : ''}`}\n                  data-nav-button-prev\n                  area-label={this.previousButtonLabel}\n                  aria-disabled={this.currentSlide === 0 && !this.showFirstSlidePrevButton}>\n                </pn-button>\n                <pn-button\n                  appearance=\"light\"\n                  icon={arrow_right}\n                  icon-only=\"true\"\n                  tooltip={this.nextButtonLabel}\n                  class=\"nav-button\"\n                  data-nav-button-next\n                  area-label={this.nextButtonLabel}\n                  aria-disabled={this.currentSlide === this.totalSlides - 1 && !this.showLastSlideNextButton}>\n                </pn-button>\n              </div>\n            )}\n            {this.slidesData && (\n              <ul\n                class=\"slides-container\"\n                data-slides-container\n                data-partial={this.slidesToShow === 1 ? 'false' : 'true'}\n                aria-live=\"polite\"\n                style={{ display: 'flex', transform: 'none' }}\n              >\n                {this.slidesData.map((slide, index) => (\n                  <li class=\"slide\" data-slide innerHTML={slide} style={{ width: this.slideWidth + '%' }} aria-hidden={index !== this.currentSlide}></li>\n                ))}\n              </ul>\n            )}\n          </section>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-marketweb-icon.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pnMarketwebIconCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}";
+const pnMarketwebIconCss = "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}}";
 const PnMarketwebIconStyle0 = pnMarketwebIconCss;
 
 const PnmarketwebIcon = /*@__PURE__*/ proxyCustomElement(class PnmarketwebIcon extends HTMLElement {
@@ -12,7 +12,7 @@ const PnmarketwebIcon = /*@__PURE__*/ proxyCustomElement(class PnmarketwebIcon e
         this.color = 'black';
     }
     render() {
-        return (h(Host, { key: '51d1b49a349b16779dfe94b3f74c52944c35dff0' }, h("pn-icon", { key: '3bbc19a8f65de6f50a4bdefe6ff7d9aa09237dbc', icon: this.symbol, color: this.color, small: this.small })));
+        return (h(Host, { key: 'a1917c9d9ae0182591904b2a06683b1961a13ec0' }, h("pn-icon", { key: '32ada4505d2162bce62c024099c754403860174c', icon: this.symbol, color: this.color, small: this.small })));
     }
     static get style() { return PnMarketwebIconStyle0; }
 }, [0, "pn-marketweb-icon", {

package/components/pn-marketweb-icon.js.map

@@ -1 +1 @@
-{"file":"pn-marketweb-icon.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,iFAAiF,CAAC;AAC7G,8BAAe,kBAAkB;;MCMpB,eAAe;;;;sBAED,IAAI;qBAEJ,KAAK;qBAEN,OAAO;;IAE/B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CACvE,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/minor/pn-marketweb-icon/pn-marketweb-icon.scss?tag=pn-marketweb-icon","src/components/minor/pn-marketweb-icon/pn-marketweb-icon.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-icon',\n  styleUrl: 'pn-marketweb-icon.scss',\n})\nexport class PnmarketwebIcon {\n  /** The SVG content of the icon you want to use */\n  @Prop() symbol: string = null;\n  /** Medium is default but you can pass \"small\" for a 16x16 icon */\n  @Prop() small: boolean = false;\n  /** Check for the available colors in the knobs panel in the story */\n  @Prop() color: string = 'black';\n\n  render() {\n    return (\n      <Host>\n        <pn-icon icon={this.symbol} color={this.color} small={this.small}></pn-icon>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-marketweb-icon.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,0ZAA0Z,CAAC;AACtb,8BAAe,kBAAkB;;MCMpB,eAAe;;;;sBAED,IAAI;qBAEJ,KAAK;qBAEN,OAAO;;IAE/B,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,gEAAS,IAAI,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,GAAY,CACvE,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/minor/pn-marketweb-icon/pn-marketweb-icon.scss?tag=pn-marketweb-icon","src/components/minor/pn-marketweb-icon/pn-marketweb-icon.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport { arrow_right } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-icon',\n  styleUrl: 'pn-marketweb-icon.scss',\n})\nexport class PnmarketwebIcon {\n  /** The SVG content of the icon you want to use */\n  @Prop() symbol: string = null;\n  /** Medium is default but you can pass \"small\" for a 16x16 icon */\n  @Prop() small: boolean = false;\n  /** Check for the available colors in the knobs panel in the story */\n  @Prop() color: string = 'black';\n\n  render() {\n    return (\n      <Host>\n        <pn-icon icon={this.symbol} color={this.color} small={this.small}></pn-icon>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-marketweb-input2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
 
-const pnMarketwebInputCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn--marketweb-input{display:inline-flex;flex-direction:column}pn-marketweb-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}pn-marketweb-input input::placeholder{color:#969087;font-weight:normal}pn-marketweb-input input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-marketweb-input input:hover{border:0.1rem solid #00a0d6}pn-marketweb-input input:disabled{background:#f3f2f2;border:none}pn-marketweb-input>.input-container{position:relative}pn-marketweb-input>.input-container>button{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005d92;padding:0.6rem;border-radius:0.8rem;outline:none;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-marketweb-input>.input-container>button:focus{border:0.1rem solid #005d92}pn-marketweb-input>.input-container>button:hover{background:#e0f8ff}pn-marketweb-input>.input-container>button:active{background:#005d92;color:white}pn-marketweb-input>.input-container>svg{position:absolute;right:0.75em;top:50%;transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-marketweb-input>.input-container>svg polyline{stroke-linecap:round;transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-marketweb-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005e41;stroke-dashoffset:23;stroke-dasharray:23}pn-marketweb-input .label-container{margin-bottom:0.4rem;color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-marketweb-input .label-container label{cursor:pointer;transition:color 0.2s}.label-container label.char-count{flex-shrink:0;padding-left:0.5em}pn-marketweb-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5e554a}pn-input.error{color:#a70707}pn-input.error label{color:#a70707}pn-input.error small{color:#a70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #a70707}pn-input.error input:focus{border:0.1rem solid #a70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707}pn-input.error input:hover{border:0.1rem solid #f06365}pn-input.valid{color:#005e41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005e41}pn-input.valid input{border:0.1rem solid #005e41}pn-input.valid input:focus{border:0.1rem solid #005e41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41}pn-input.valid input:hover{border:0.1rem solid #5ec584}pn-marketweb-input.password input{padding-right:4em}pn-marketweb-input.icon input{padding-right:2.3em}";
+const pnMarketwebInputCss = "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-input{display:inline-flex;flex-direction:column}pn-marketweb-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}pn-marketweb-input input::placeholder{color:#969087;font-weight:normal}pn-marketweb-input input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}pn-marketweb-input input:hover{border:0.1rem solid #00a0d6}pn-marketweb-input input:disabled{background:#f3f2f2;border:none}pn-marketweb-input>.input-container{position:relative}pn-marketweb-input>.input-container>button{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005d92;padding:0.6rem;border-radius:0.8rem;outline:none;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-marketweb-input>.input-container>button:focus{border:0.1rem solid #005d92}pn-marketweb-input>.input-container>button:hover{background:#e0f8ff}pn-marketweb-input>.input-container>button:active{background:#005d92;color:white}pn-marketweb-input>.input-container>svg{position:absolute;right:0.75em;top:50%;transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-marketweb-input>.input-container>svg polyline{stroke-linecap:round;transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-marketweb-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005e41;stroke-dashoffset:23;stroke-dasharray:23}pn-marketweb-input .label-container{margin-bottom:0.4rem;color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-marketweb-input .label-container label{cursor:pointer;transition:color 0.2s}.label-container label.char-count{flex-shrink:0;padding-left:0.5em}pn-marketweb-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5e554a}pn-input.error{color:#a70707}pn-input.error label{color:#a70707}pn-input.error small{color:#a70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #a70707}pn-input.error input:focus{border:0.1rem solid #a70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #a70707}pn-input.error input:hover{border:0.1rem solid #f06365}pn-input.valid{color:#005e41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005e41}pn-input.valid input{border:0.1rem solid #005e41}pn-input.valid input:focus{border:0.1rem solid #005e41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005e41}pn-input.valid input:hover{border:0.1rem solid #5ec584}pn-marketweb-input.password input{padding-right:4em}pn-marketweb-input.icon input{padding-right:2.3em}";
 const PnMarketwebInputStyle0 = pnMarketwebInputCss;
 
 const PnMarketwebInput = /*@__PURE__*/ proxyCustomElement(class PnMarketwebInput extends HTMLElement {

package/components/pn-marketweb-input2.js.map

@@ -1 +1 @@
-{"file":"pn-marketweb-input2.js","mappings":"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","names":[],"sources":["src/components/input/pn-marketweb-input/pn-marketweb-input.scss?tag=pn-marketweb-input","src/components/input/pn-marketweb-input/pn-marketweb-input.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn--marketweb-input {\n  display: inline-flex;\n  flex-direction: column;\n}\n\npn-marketweb-input input {\n  padding: 0.75em;\n  font-size: 1em;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  outline: none;\n  border-radius: 0.8rem;\n  border: 0.1rem solid $gray700;\n  transition:\n    box-shadow 0.15s,\n    border 0.15s;\n  color: $black;\n  width: 100%;\n\n  &::placeholder {\n    color: $gray400;\n    font-weight: normal;\n  }\n\n  &:focus {\n    border: 0.1rem solid $blue700;\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:hover {\n    border: 0.1rem solid $blue400;\n  }\n\n  &:disabled {\n    background: $gray50;\n    border: none;\n  }\n}\n\npn-marketweb-input > .input-container {\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 1.2rem;\n    top: 50%;\n    transform: translateY(-50%);\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: $blue700;\n    padding: 0.6rem;\n    border-radius: 0.8rem;\n    outline: none;\n    transition:\n      border 0.1s,\n      background 0.2s,\n      color 0.1s;\n    border: 0.1rem solid transparent;\n\n    &:focus {\n      border: 0.1rem solid $blue700;\n    }\n\n    &:hover {\n      background: $blue50;\n    }\n\n    &:active {\n      background: $blue700;\n      color: white;\n    }\n  }\n\n  > svg {\n    position: absolute;\n    right: 0.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 1.5em;\n    width: 1.5em;\n    pointer-events: none;\n\n    polyline {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n    }\n  }\n\n  > svg.pn-input-checkmark polyline {\n    stroke: $green700;\n    stroke-dashoffset: 23;\n    stroke-dasharray: 23;\n  }\n}\n\npn-marketweb-input .label-container {\n  margin-bottom: 0.4rem;\n  color: $gray700;\n  font-size: 0.875em;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  label {\n    cursor: pointer;\n    transition: color 0.2s;\n  }\n}\n\n.label-container label.char-count {\n  flex-shrink: 0;\n  padding-left: 0.5em;\n}\n\npn-marketweb-input small {\n  font-size: 0.75em;\n  font-size: unquote('max(.6em, 1.2rem)');\n  transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n  margin-top: 0.5em;\n  color: $gray700;\n}\n\npn-input.error {\n  color: $warning;\n\n  label {\n    color: $warning;\n  }\n\n  small {\n    color: $warning;\n  }\n\n  small > pn-icon {\n    margin-right: 0.25em;\n  }\n\n  input {\n    border: 0.1rem solid $warning;\n\n    &:focus {\n      border: 0.1rem solid $warning;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $warning;\n    }\n\n    &:hover {\n      border: 0.1rem solid $coral400;\n    }\n  }\n}\n\npn-input.valid {\n  color: $green700;\n\n  .input-container > svg.pn-input-checkmark polyline {\n    stroke-dashoffset: 0;\n  }\n\n  label {\n    color: $green700;\n  }\n\n  input {\n    border: 0.1rem solid $green700;\n\n    &:focus {\n      border: 0.1rem solid $green700;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $green700;\n    }\n\n    &:hover {\n      border: 0.1rem solid $green400;\n    }\n  }\n}\n\npn-marketweb-input.password input {\n  padding-right: 4em;\n}\n\npn-marketweb-input.icon input {\n  padding-right: 2.3em;\n}\n","import { Component, Prop, h, Host, State } from '@stencil/core';\nimport { alert_exclamation_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-input',\n  styleUrl: 'pn-marketweb-input.scss',\n})\nexport class PnMarketwebInput {\n  @Prop() disabled: boolean = false;\n  /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */\n  @Prop() error: string = '';\n  /** Error state without message (If you want to control the error messaging on your own) */\n  @Prop() invalid: boolean = false;\n  /** Text message placed underneath the input field */\n  @Prop() helpertext: string = '';\n  /** Text label placed above the input field */\n  @Prop() label: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() inputid: string = `${Math.random()}`;\n  @Prop() name: string = '';\n  @Prop() required: boolean = false;\n  @Prop({ mutable: true }) type: string = 'text';\n  @Prop() autocomplete: string = '';\n  @Prop() valid: boolean = null;\n  @Prop() value: string = '';\n  /** The maximum number of characters the user should be able to add, also adds a visible counter */\n  @Prop() maxlength: string = '';\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() step: string = '';\n  @Prop() pattern: string = '';\n\n  getTextMessage() {\n    if (this.error) return this.error;\n    if (this.helpertext) return this.helpertext;\n\n    return null;\n  }\n\n  @State() showText: boolean = false;\n  toggleTextVisibility() {\n    this.showText = !this.showText;\n  }\n\n  getInputType() {\n    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];\n\n    return types.includes(this.type) && !this.showText ? this.type : 'text';\n  }\n\n  setVal(e) {\n    const target: HTMLInputElement = e.composedPath?.()[0] as HTMLInputElement;\n    this.value = target.value;\n  }\n\n  getClassNames() {\n    let classNames = 'pn-input ';\n    if (this.error.length > 0 || this.invalid) classNames += 'error ';\n    if (this.valid) classNames += 'valid ';\n    if (this.type === 'password') classNames += 'password ';\n    if (this.error || this.invalid || this.valid) classNames += 'icon ';\n\n    return classNames;\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassNames()}>\n        {(this.label || this.maxlength) && (\n          <div class=\"label-container\">\n            {this.label && <label htmlFor={this.inputid}>{this.label}</label>}\n            {parseInt(this.maxlength) > 0 && (\n              <label class=\"char-count\" htmlFor={this.inputid}>\n                {`${this.value.length}/${this.maxlength}`}\n              </label>\n            )}\n          </div>\n        )}\n        <div class=\"input-container\">\n          <input\n            type={this.getInputType()}\n            value={this.value}\n            id={this.inputid}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.required}\n            autocomplete={this.autocomplete}\n            onInput={e => this.setVal(e)}\n            maxlength={this.maxlength ? this.maxlength : null}\n            min={this.min ? this.min : null}\n            max={this.max ? this.max : null}\n            step={this.step ? this.step : null}\n            pattern={this.pattern ? this.pattern : null}\n          />\n          <svg class=\"pn-input-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <polyline class=\"checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n          </svg>\n\n          {this.type === 'password' && !this.disabled && <button onClick={() => this.toggleTextVisibility()}>Show</button>}\n        </div>\n\n        {this.getTextMessage() && (\n          <small>\n            {this.error && <pn-icon icon={alert_exclamation_circle} small color=\"warning\"></pn-icon>}\n            {this.getTextMessage()}\n          </small>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pn-marketweb-input2.js","mappings":"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","names":[],"sources":["src/components/input/pn-marketweb-input/pn-marketweb-input.scss?tag=pn-marketweb-input","src/components/input/pn-marketweb-input/pn-marketweb-input.tsx"],"sourcesContent":["@import '../../../globals/main.scss';\n\npn--marketweb-input {\n  display: inline-flex;\n  flex-direction: column;\n}\n\npn-marketweb-input input {\n  padding: 0.75em;\n  font-size: 1em;\n  font-weight: 500;\n  -webkit-font-smoothing: antialiased;\n  outline: none;\n  border-radius: 0.8rem;\n  border: 0.1rem solid $gray700;\n  transition:\n    box-shadow 0.15s,\n    border 0.15s;\n  color: $black;\n  width: 100%;\n\n  &::placeholder {\n    color: $gray400;\n    font-weight: normal;\n  }\n\n  &:focus {\n    border: 0.1rem solid $blue700;\n    box-shadow:\n      0 0 0 0.2rem #fff,\n      0 0 0 0.4rem $blue700;\n  }\n\n  &:hover {\n    border: 0.1rem solid $blue400;\n  }\n\n  &:disabled {\n    background: $gray50;\n    border: none;\n  }\n}\n\npn-marketweb-input > .input-container {\n  position: relative;\n\n  > button {\n    position: absolute;\n    right: 1.2rem;\n    top: 50%;\n    transform: translateY(-50%);\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: $blue700;\n    padding: 0.6rem;\n    border-radius: 0.8rem;\n    outline: none;\n    transition:\n      border 0.1s,\n      background 0.2s,\n      color 0.1s;\n    border: 0.1rem solid transparent;\n\n    &:focus {\n      border: 0.1rem solid $blue700;\n    }\n\n    &:hover {\n      background: $blue50;\n    }\n\n    &:active {\n      background: $blue700;\n      color: white;\n    }\n  }\n\n  > svg {\n    position: absolute;\n    right: 0.75em;\n    top: 50%;\n    transform: translateY(-50%);\n    height: 1.5em;\n    width: 1.5em;\n    pointer-events: none;\n\n    polyline {\n      stroke-linecap: round;\n      transition: stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n    }\n  }\n\n  > svg.pn-input-checkmark polyline {\n    stroke: $green700;\n    stroke-dashoffset: 23;\n    stroke-dasharray: 23;\n  }\n}\n\npn-marketweb-input .label-container {\n  margin-bottom: 0.4rem;\n  color: $gray700;\n  font-size: 0.875em;\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-end;\n\n  label {\n    cursor: pointer;\n    transition: color 0.2s;\n  }\n}\n\n.label-container label.char-count {\n  flex-shrink: 0;\n  padding-left: 0.5em;\n}\n\npn-marketweb-input small {\n  font-size: 0.75em;\n  font-size: unquote('max(.6em, 1.2rem)');\n  transition: transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);\n  margin-top: 0.5em;\n  color: $gray700;\n}\n\npn-input.error {\n  color: $warning;\n\n  label {\n    color: $warning;\n  }\n\n  small {\n    color: $warning;\n  }\n\n  small > pn-icon {\n    margin-right: 0.25em;\n  }\n\n  input {\n    border: 0.1rem solid $warning;\n\n    &:focus {\n      border: 0.1rem solid $warning;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $warning;\n    }\n\n    &:hover {\n      border: 0.1rem solid $coral400;\n    }\n  }\n}\n\npn-input.valid {\n  color: $green700;\n\n  .input-container > svg.pn-input-checkmark polyline {\n    stroke-dashoffset: 0;\n  }\n\n  label {\n    color: $green700;\n  }\n\n  input {\n    border: 0.1rem solid $green700;\n\n    &:focus {\n      border: 0.1rem solid $green700;\n      box-shadow:\n        0 0 0 0.2rem #fff,\n        0 0 0 0.4rem $green700;\n    }\n\n    &:hover {\n      border: 0.1rem solid $green400;\n    }\n  }\n}\n\npn-marketweb-input.password input {\n  padding-right: 4em;\n}\n\npn-marketweb-input.icon input {\n  padding-right: 2.3em;\n}\n","import { Component, Prop, h, Host, State } from '@stencil/core';\nimport { alert_exclamation_circle } from 'pn-design-assets/pn-assets/icons.js';\n\n@Component({\n  tag: 'pn-marketweb-input',\n  styleUrl: 'pn-marketweb-input.scss',\n})\nexport class PnMarketwebInput {\n  @Prop() disabled: boolean = false;\n  /** Error message; will take precedence over helpertext if both are provided (applies invalid styles automatically) */\n  @Prop() error: string = '';\n  /** Error state without message (If you want to control the error messaging on your own) */\n  @Prop() invalid: boolean = false;\n  /** Text message placed underneath the input field */\n  @Prop() helpertext: string = '';\n  /** Text label placed above the input field */\n  @Prop() label: string = '';\n  @Prop() placeholder: string = '';\n  @Prop() inputid: string = `${Math.random()}`;\n  @Prop() name: string = '';\n  @Prop() required: boolean = false;\n  @Prop({ mutable: true }) type: string = 'text';\n  @Prop() autocomplete: string = '';\n  @Prop() valid: boolean = null;\n  @Prop() value: string = '';\n  /** The maximum number of characters the user should be able to add, also adds a visible counter */\n  @Prop() maxlength: string = '';\n  @Prop() min: string = '';\n  @Prop() max: string = '';\n  @Prop() step: string = '';\n  @Prop() pattern: string = '';\n\n  getTextMessage() {\n    if (this.error) return this.error;\n    if (this.helpertext) return this.helpertext;\n\n    return null;\n  }\n\n  @State() showText: boolean = false;\n  toggleTextVisibility() {\n    this.showText = !this.showText;\n  }\n\n  getInputType() {\n    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];\n\n    return types.includes(this.type) && !this.showText ? this.type : 'text';\n  }\n\n  setVal(e) {\n    const target: HTMLInputElement = e.composedPath?.()[0] as HTMLInputElement;\n    this.value = target.value;\n  }\n\n  getClassNames() {\n    let classNames = 'pn-input ';\n    if (this.error.length > 0 || this.invalid) classNames += 'error ';\n    if (this.valid) classNames += 'valid ';\n    if (this.type === 'password') classNames += 'password ';\n    if (this.error || this.invalid || this.valid) classNames += 'icon ';\n\n    return classNames;\n  }\n\n  render() {\n    return (\n      <Host class={this.getClassNames()}>\n        {(this.label || this.maxlength) && (\n          <div class=\"label-container\">\n            {this.label && <label htmlFor={this.inputid}>{this.label}</label>}\n            {parseInt(this.maxlength) > 0 && (\n              <label class=\"char-count\" htmlFor={this.inputid}>\n                {`${this.value.length}/${this.maxlength}`}\n              </label>\n            )}\n          </div>\n        )}\n        <div class=\"input-container\">\n          <input\n            type={this.getInputType()}\n            value={this.value}\n            id={this.inputid}\n            name={this.name}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            required={this.required}\n            autocomplete={this.autocomplete}\n            onInput={e => this.setVal(e)}\n            maxlength={this.maxlength ? this.maxlength : null}\n            min={this.min ? this.min : null}\n            max={this.max ? this.max : null}\n            step={this.step ? this.step : null}\n            pattern={this.pattern ? this.pattern : null}\n          />\n          <svg class=\"pn-input-checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <polyline class=\"checkmark-path\" points=\"4,12 9,17 20,6\" stroke-width=\"3\" />\n          </svg>\n\n          {this.type === 'password' && !this.disabled && <button onClick={() => this.toggleTextVisibility()}>Show</button>}\n        </div>\n\n        {this.getTextMessage() && (\n          <small>\n            {this.error && <pn-icon icon={alert_exclamation_circle} small color=\"warning\"></pn-icon>}\n            {this.getTextMessage()}\n          </small>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pn-marketweb-search.js

@@ -1,128 +1,4 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as close_small } from './close_small.js';
-import { s as search } from './search.js';
-
-const pnMarketwebSearchCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}:host{display:inline-flex}:host>pn-button{margin-left:0.35em}:host>pn-button button .pn-button-bg{transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, left 0.2s, transform 0.2s}:host>pn-button[data-loading=true] .pn-button-bg{left:0;transform:translateX(0);transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s}:host>pn-button[data-loading=true] pn-spinner{left:0.75em}:host input{padding:0.75em;min-height:3em;font-size:1em;height:100%;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:3em;border:0.1rem solid #5e554a;transition:box-shadow 0.15s, border 0.15s;color:#000000;width:100%}:host input::-webkit-search-cancel-button{display:none}:host input::placeholder{color:#969087;font-weight:normal}:host input:focus{border:0.1rem solid #005d92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host input:hover{border:0.1rem solid #00a0d6}:host input:disabled{background:#f3f2f2;border:none}:host>.input-container{width:100%;position:relative}:host>.input-container .button-container{position:absolute;top:0;right:0;background:transparent;width:3em;height:100%;overflow:hidden;display:flex;align-items:center;justify-content:center}:host[list] :host>.input-container .button-container{display:none}:host>.input-container button{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);background:#ffffff;border:none;color:#005d92;padding:0.3rem;margin:0;font-size:0.875em;border-radius:50%;outline:none;transition:border 0.1s, background 0.2s, box-shadow 0.1s, transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s, opacity 0.2s;border:0.1rem solid transparent;-webkit-tap-highlight-color:transparent}:host>.input-container button.clear,:host>.input-container button.search{cursor:pointer}:host>.input-container button:focus{box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005d92}:host>.input-container button:hover,:host>.input-container button:focus{background:#e0f8ff}:host>.input-container button:active{background:#005d92}:host>.input-container button:active pn-icon svg,:host>.input-container button:active pn-icon svg path{fill:white}:host .searching button.search{transform:translate(150%, -50%)}:host .searching button.clear{transform:translate(-50%, -50%)}:host .button-none input,:host .button-icon-inline input{padding-right:3.3em}:host .button-none pn-spinner,:host .button-icon-inline pn-spinner{position:absolute;left:50%;top:50%;transform:translate(100%, -50%);transition:transform cubic-bezier(0.7, 0, 0.3, 1) 0.2s}:host .button-none button.search,:host .button-icon-inline button.search{transform:translate(-50%, -50%)}:host .button-none.loading button,:host .button-icon-inline.loading button{transform:translate(100%, -50%)}:host .button-none.loading pn-spinner,:host .button-icon-inline.loading pn-spinner{transform:translate(-50%, -50%)}:host .button-none.searching button.search{transform:translate(100%, -50%)}:host .button-icon>pn-button[data-loading=true] .pn-button-bg{left:50%;transform:translateX(-50%)}";
-const PnMarketwebSearchStyle0 = pnMarketwebSearchCss;
-
-const PnMarketwebSearch$1 = /*@__PURE__*/ proxyCustomElement(class PnMarketwebSearch extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.search = createEvent(this, "search", 7);
-        this.update = createEvent(this, "update", 7);
-        this.disabled = false;
-        this.placeholder = null;
-        this.inputid = null;
-        this.name = null;
-        this.autocomplete = null;
-        this.list = null;
-        this.value = null;
-        this.label = null;
-        this.loading = false;
-        this.button = '';
-        this.light = false;
-        this.suggestionObserver = null;
-        this.hasClonedInput = false;
-        this.listSuggestion = [];
-    }
-    get hostElement() { return this; }
-    /** This is emitted on search submission both with keyboard and mouse */
-    search;
-    /** custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */
-    update;
-    inputHandler() {
-        this.update.emit(this.value);
-    }
-    emitSearch(e) {
-        if (e.type === 'click' || (e.type === 'keydown' && e.key === 'Enter')) {
-            // We prevent the native search event since it's not supported in IE and FF, then we emit our own instead
-            e.preventDefault();
-            this.search.emit(this.value);
-        }
-    }
-    setVal(e) {
-        this.value = e.target.value;
-    }
-    clearInput() {
-        this.value = '';
-        this.update.emit(this.value);
-        this.hostElement.querySelector('input').focus();
-    }
-    getClassNames() {
-        let classNames = '';
-        const buttonTypes = ['none', 'icon', 'icon-inline'];
-        if (this.value)
-            classNames += 'searching ';
-        if (this.loading)
-            classNames += 'loading ';
-        if (buttonTypes.includes(this.button))
-            classNames += `button-${this.button} `;
-        return classNames;
-    }
-    componentWillRender() {
-        this.cloneListContent();
-        this.autocompleteEventBinding();
-    }
-    onSuggestionUpdate() {
-        this.cloneListContent();
-    }
-    autocompleteEventBinding() {
-        if (this.suggestionObserver !== null || !this.list || !this.hostElement || !document.getElementById(this.list)) {
-            return;
-        }
-        const targetNode = document.getElementById(this.list);
-        this.suggestionObserver = new MutationObserver(this.onSuggestionUpdate.bind(this));
-        this.suggestionObserver.observe(targetNode, { attributes: true, childList: true, subtree: true });
-    }
-    cloneListContent() {
-        if (!this.list || !this.hostElement || !document.getElementById(this.list)) {
-            return;
-        }
-        const options = [...document.getElementById(this.list).querySelectorAll('option')];
-        this.listSuggestion = options.map((item) => {
-            if (item.hasAttribute('value')) {
-                return item.getAttribute('value');
-            }
-            return item.innerText;
-        });
-    }
-    render() {
-        return (h(Host, { key: '0b682770e7717859ae63e30fb63eafb58688213b' }, h("div", { key: '47a7b03aead0498b5387e322771876730d91e0ee', class: `input-container ${this.getClassNames()}`, "data-haslist": (this.list !== null) + '' }, h("input", { key: '214e1b792f8ed6334e1e7719a3a60617260f4e13', type: "search", value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, list: this.list, onKeyDown: e => this.emitSearch(e), onInput: e => this.setVal(e) }), h("div", { key: 'e8e385b02015e69fffdb3d98ef7019cbe3a0ae8a', class: "button-container" }, (this.button === 'none' || this.button === 'icon-inline') && (h("button", { key: '162340c5e929f729479e69800ddd0f1f70387ac7', class: "search", tabindex: this.button === 'icon-inline' ? '0' : '-1', onClick: e => this.emitSearch(e), "aria-label": "search", title: "search" }, h("pn-icon", { key: 'aff75aa97f4defa3d16d1c0b380733279fad5e1b', icon: search, color: "blue700" }))), this.button !== 'icon-inline' && (h("button", { key: 'f468e08f5093bdc629663af835b711b8ebe22f00', class: "clear", "aria-label": "clear", title: "clear search field", tabindex: this.value && (!this.loading || this.button !== 'none') ? '0' : '-1', onClick: () => this.clearInput() }, h("pn-icon", { key: '17b4ed79a3ff0694cea246c3151feafdb459ce7d', icon: close_small, color: "blue700" }))), this.button === 'none' || (this.button === 'icon-inline' && h("pn-spinner", { key: '248118b563d93c74cd45d3d68ce923caeb008d76' })))), this.button !== 'none' && this.button !== 'icon-inline' && (h("pn-button", { key: '68ce11c62c479707fc9f6c06bbca63ae9453cf14', onClick: e => this.emitSearch(e), loading: this.loading, icon: search, appearance: this.light ? 'light' : 'dark', tooltip: this.button === 'icon' ? this.label : null }, this.label)), this.list && (h("datalist", { key: '4fffbc6bd51af6299eda20f3bcbe7521b73d96d5', id: this.list }, this.listSuggestion.map(item => {
-            return h("option", null, item);
-        })))));
-    }
-    static get style() { return PnMarketwebSearchStyle0; }
-}, [1, "pn-marketweb-search", {
-        "disabled": [4],
-        "placeholder": [1],
-        "inputid": [1],
-        "name": [1],
-        "autocomplete": [1],
-        "list": [1],
-        "value": [1],
-        "label": [1],
-        "loading": [4],
-        "button": [1],
-        "light": [4],
-        "suggestionObserver": [32],
-        "hasClonedInput": [32],
-        "listSuggestion": [32]
-    }, [[0, "input", "inputHandler"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["pn-marketweb-search"];
-    components.forEach(tagName => { switch (tagName) {
-        case "pn-marketweb-search":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, PnMarketwebSearch$1);
-            }
-            break;
-    } });
-}
+import { P as PnMarketwebSearch$1, d as defineCustomElement$1 } from './pn-marketweb-search2.js';
 
 const PnMarketwebSearch = PnMarketwebSearch$1;
 const defineCustomElement = defineCustomElement$1;