npm - @postnord/pn-marketweb-components - Versions diffs - 4.0.2 → 4.0.4-test - Mend

@postnord/pn-marketweb-components 4.0.2 → 4.0.4-test

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 (1163) hide show

package/dist/collection/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.js DELETED Viewed

@@ -1,494 +0,0 @@
-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/dist/collection/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"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/dist/collection/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.stories.js DELETED Viewed

@@ -1,82 +0,0 @@
-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/dist/collection/components/widgets/pn-marketweb-carousel/pn-marketweb-carousel.stories.js.map DELETED Viewed

@@ -1 +0,0 @@

- {"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"]}