npm - @postnord/pn-marketweb-components - Versions diffs - 3.5.2 → 4.0.0 - Mend

@postnord/pn-marketweb-components 3.5.2 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1186) hide show

package/components/pn-marketweb-carousel2.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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}
1	+ {"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 CHANGED Viewed

@@ -1,9 +1,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { a as alert_exclamation_circle } from './alert_exclamation_circle.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" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1.4 5.497-.334 5.005a1.069 1.069 0 0 1-2.133 0L10.6 7.497a1.403 1.403 0 1 1 2.8 0M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';
-const alert_exclamation_circle = icon;
-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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"pn-marketweb-input2.js","mappings":"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","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_exclamation_circle.js","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":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1.4 5.497-.334 5.005a1.069 1.069 0 0 1-2.133 0L10.6 7.497a1.403 1.403 0 1 1 2.8 0M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_exclamation_circle = icon;\nexport const alertExclamationCircle = icon;\n","@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}
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}

package/components/pn-marketweb-search.js CHANGED Viewed

@@ -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;