@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/collection/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.js

@@ -0,0 +1,494 @@
+import { Host, h } from "@stencil/core";
+import { arrow_left, arrow_right } from "pn-design-assets/pn-assets/icons.js";
+export class PnMarketwebCarousel {
+    constructor() {
+        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,
+    };
+    hostElement;
+    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 is() { return "pn-marketweb-carousel"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-marketweb-carousel.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-marketweb-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "previousButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "previous-button-label",
+                "reflect": false
+            },
+            "nextButtonLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "next-button-label",
+                "reflect": false
+            },
+            "ariaNavigationLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "aria-navigation-label",
+                "reflect": false
+            },
+            "source": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "source",
+                "reflect": false
+            },
+            "slidesToShow": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "slides-to-show",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "showCarouselButtons": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-carousel-buttons",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showFirstSlidePrevButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-first-slide-prev-button",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showLastSlideNextButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-last-slide-next-button",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "slidesData": {},
+            "currentSlide": {},
+            "isDragging": {},
+            "slideWidth": {}
+        };
+    }
+    static get methods() {
+        return {
+            "goToSlide": {
+                "complexType": {
+                    "signature": "(index: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "index",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "getCurrentSlide": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "source",
+                "methodName": "handleSourceChange"
+            }];
+    }
+}
+//# sourceMappingURL=pn-marketweb-carousel.js.map

package/collection/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-marketweb-carousel.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/collection/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.stories.js

@@ -0,0 +1,82 @@
+import { createDocumentation, createComponent } from "../../../globals/documentation/story";
+import docs from "./pn-marketweb-carousel-docs.json";
+import * as colors from "pn-design-assets/pn-assets/colors";
+const { argTypes, textContent } = createDocumentation(docs);
+const styleSample = `
+  pn-marketweb-carousel  {width: 400px }
+  .slider-wrapper { max-height: 400px; max-width: 400px }
+  .slides-container { height: calc(100vh - 2rem) }
+  .slide {padding: 2rem; }
+
+  .slide:nth-child(1) {
+    background-color: ${colors.blue400};
+  }
+
+  .slide:nth-child(2) {
+    background-color: ${colors.green500};
+  }
+
+  .slide:nth-child(3) {
+    background-color: ${colors.coral400};
+    margin: 0;
+  }
+
+  .slide:nth-child(4) {
+    background-color: ${colors.orange400};
+  }`;
+const meta = {
+    title: 'Components/Widgets/Market Web Carousel',
+    parameters: {
+        actions: {},
+        docs: {
+            description: {
+                story: textContent,
+            },
+        },
+    },
+    args: {
+        nextButtonLabel: 'Next',
+        previousButtonLabel: 'Previous',
+        ariaNavigationLabel: 'Carousel Navigation',
+        source: `{ "slides": [
+          "<h2>Sample Heading</h2><p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p>",
+          "<h2>Custom Heading</h2><p>Lorem ipsum dolor sit amet</p>",
+          "<h3>Custom Heading</h3><p>Lorem ipsum dolor sit amet</p>"
+        ]}`,
+    },
+    argTypes,
+};
+export default meta;
+export const MarketWebCarousel = {
+    name: 'Carousel with full width slides',
+    render: args => {
+        const component = createComponent('pn-marketweb-carousel', args);
+        const customStyle = document.createElement('style');
+        customStyle.innerHTML = styleSample;
+        component.prepend(customStyle);
+        return component;
+    },
+    args: {},
+};
+export const MarketWebCarouselExample = {
+    name: 'Carousel with 1 slide',
+    render: MarketWebCarousel.render,
+    args: {
+        source: `{ "slides": [
+          "<h2>Sample Heading</h2><p>Sample Body</p>"
+        ]}`,
+    },
+};
+export const MarketWebCarouselExample2 = {
+    name: 'Carousel with multiple slides, 1.5 slides visible',
+    render: MarketWebCarousel.render,
+    args: {
+        source: `{ "slides": [
+          "<h2>Sample Heading</h2><p>Lorem ipsum</p>",
+          "<h2>Sample Heading</h2><p>Dolor sit amet</p>",
+          "<h2>Sample Heading</h2><p>Dolor sit amet</p>"
+        ]}`,
+        slidesToShow: 1.5, // could be 1.25, 1.35, 1.45 or similar
+    },
+};
+//# sourceMappingURL=pn-marketweb-carousel.stories.js.map

package/collection/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-marketweb-carousel.stories.js","sourceRoot":"","sources":["../../../../src/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,mCAAmC,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,mCAAmC,CAAC;AAE5D,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,WAAW,GAAG;;;;;;;wBAOI,MAAM,CAAC,OAAO;;;;wBAId,MAAM,CAAC,QAAQ;;;;wBAIf,MAAM,CAAC,QAAQ;;;;;wBAKf,MAAM,CAAC,SAAS;IACpC,CAAC;AAEL,MAAM,IAAI,GAAyC;IACjD,KAAK,EAAE,wCAAwC;IAC/C,UAAU,EAAE;QACV,OAAO,EAAE,EAAE;QACX,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,MAAM;QACvB,mBAAmB,EAAE,UAAU;QAC/B,mBAAmB,EAAE,qBAAqB;QAC1C,MAAM,EAAE;;;;WAID;KACR;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE,iCAAiC;IACvC,MAAM,EAAE,IAAI,CAAC,EAAE;QACb,MAAM,SAAS,GAAG,eAAe,CAAC,uBAAuB,EAAE,IAAI,CAAC,CAAC;QACjE,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,WAAW,CAAC,SAAS,GAAG,WAAW,CAAC;QACpC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC;QAC/B,OAAO,SAAS,CAAC;IACnB,CAAC;IACD,IAAI,EAAE,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAU;IAC7C,IAAI,EAAE,uBAAuB;IAC7B,MAAM,EAAE,iBAAiB,CAAC,MAAM;IAChC,IAAI,EAAE;QACJ,MAAM,EAAE;;WAED;KACR;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAU;IAC9C,IAAI,EAAE,mDAAmD;IACzD,MAAM,EAAE,iBAAiB,CAAC,MAAM;IAChC,IAAI,EAAE;QACJ,MAAM,EAAE;;;;WAID;QACP,YAAY,EAAE,GAAG,EAAE,uCAAuC;KAC3D;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-marketweb-carousel-docs.json';\n\nimport * as colors from 'pn-design-assets/pn-assets/colors';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst styleSample = `\n  pn-marketweb-carousel  {width: 400px }\n  .slider-wrapper { max-height: 400px; max-width: 400px }\n  .slides-container { height: calc(100vh - 2rem) }\n  .slide {padding: 2rem; }\n\n  .slide:nth-child(1) {\n    background-color: ${colors.blue400};\n  }\n\n  .slide:nth-child(2) {\n    background-color: ${colors.green500};\n  }\n\n  .slide:nth-child(3) {\n    background-color: ${colors.coral400};\n    margin: 0;\n  }\n\n  .slide:nth-child(4) {\n    background-color: ${colors.orange400};\n  }`;\n\nconst meta: Meta<HTMLPnMarketwebCarouselElement> = {\n  title: 'Components/Widgets/Market Web Carousel',\n  parameters: {\n    actions: {},\n    docs: {\n      description: {\n        story: textContent,\n      },\n    },\n  },\n  args: {\n    nextButtonLabel: 'Next',\n    previousButtonLabel: 'Previous',\n    ariaNavigationLabel: 'Carousel Navigation',\n    source: `{ \"slides\": [\n          \"<h2>Sample Heading</h2><p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p><p>Lorem ipsum dolor sit amet</p>\",\n          \"<h2>Custom Heading</h2><p>Lorem ipsum dolor sit amet</p>\",\n          \"<h3>Custom Heading</h3><p>Lorem ipsum dolor sit amet</p>\"\n        ]}`,\n  },\n  argTypes,\n};\n\ntype Story = StoryObj<HTMLPnMarketwebCarouselElement>;\n\nexport default meta;\n\nexport const MarketWebCarousel: Story = {\n  name: 'Carousel with full width slides',\n  render: args => {\n    const component = createComponent('pn-marketweb-carousel', args);\n    const customStyle = document.createElement('style');\n    customStyle.innerHTML = styleSample;\n    component.prepend(customStyle);\n    return component;\n  },\n  args: {},\n};\n\nexport const MarketWebCarouselExample: Story = {\n  name: 'Carousel with 1 slide',\n  render: MarketWebCarousel.render,\n  args: {\n    source: `{ \"slides\": [\n          \"<h2>Sample Heading</h2><p>Sample Body</p>\"\n        ]}`,\n  },\n};\n\nexport const MarketWebCarouselExample2: Story = {\n  name: 'Carousel with multiple slides, 1.5 slides visible',\n  render: MarketWebCarousel.render,\n  args: {\n    source: `{ \"slides\": [\n          \"<h2>Sample Heading</h2><p>Lorem ipsum</p>\",\n          \"<h2>Sample Heading</h2><p>Dolor sit amet</p>\",\n          \"<h2>Sample Heading</h2><p>Dolor sit amet</p>\"\n        ]}`,\n    slidesToShow: 1.5, // could be 1.25, 1.35, 1.45 or similar\n  },\n};\n"]}