@sekiui/elements 0.0.61 → 0.0.64

package/dist/collection/components/carousel/seki-carousel.js

@@ -0,0 +1,574 @@
+import { h, Host } from "@stencil/core";
+import EmblaCarousel from "embla-carousel";
+/**
+ * @slot - Carousel content (seki-carousel-content, arrows, dots)
+ */
+export class SekiCarousel {
+    constructor() {
+        // =========================================================================
+        // Props
+        // =========================================================================
+        /** Enable infinite loop scrolling */
+        this.loop = false;
+        /** Enable autoplay */
+        this.autoplay = false;
+        /** Autoplay delay in milliseconds */
+        this.autoplayDelay = 4000;
+        /** Pause autoplay on hover */
+        this.pauseOnHover = true;
+        /** Number of slides to scroll at once */
+        this.slidesToScroll = 1;
+        /** Initial slide index */
+        this.startIndex = 0;
+        /** Enable momentum/free scrolling */
+        this.dragFree = false;
+        /** Accessible label for the carousel */
+        this.ariaLabel = 'Carousel';
+        // =========================================================================
+        // State
+        // =========================================================================
+        /** Currently selected slide index */
+        this.selectedIndex = 0;
+        /** Total number of scroll snaps */
+        this.scrollSnapCount = 0;
+        /** Whether can scroll to previous */
+        this.canScrollPrev = false;
+        /** Whether can scroll to next */
+        this.canScrollNext = false;
+        /** Whether autoplay is currently paused */
+        this.autoplayPaused = false;
+        // =========================================================================
+        // Private
+        // =========================================================================
+        this.emblaApi = null;
+        this.autoplayInterval = null;
+        this.viewportEl = null;
+        this.handleSelect = () => {
+            this.updateState();
+            this.slideChange.emit({
+                index: this.selectedIndex,
+                total: this.scrollSnapCount,
+            });
+        };
+        this.handleReInit = () => {
+            this.updateState();
+        };
+        this.handlePointerDown = () => {
+            if (this.autoplay) {
+                this.pauseAutoplay();
+            }
+        };
+        this.handlePointerUp = () => {
+            if (this.autoplay && this.autoplayPaused) {
+                this.resumeAutoplay();
+            }
+        };
+        this.handleMouseEnter = () => {
+            if (this.autoplay && this.pauseOnHover) {
+                this.pauseAutoplay();
+            }
+        };
+        this.handleMouseLeave = () => {
+            if (this.autoplay && this.pauseOnHover && this.autoplayPaused) {
+                this.resumeAutoplay();
+            }
+        };
+        this.handleFocusIn = () => {
+            if (this.autoplay) {
+                this.pauseAutoplay();
+            }
+        };
+        this.handleFocusOut = (event) => {
+            // Only resume if focus is leaving the carousel entirely
+            if (this.autoplay && !this.el.contains(event.relatedTarget)) {
+                this.resumeAutoplay();
+            }
+        };
+        this.handleKeyDown = (event) => {
+            var _a, _b, _c, _d;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    event.preventDefault();
+                    (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollPrev();
+                    break;
+                case 'ArrowRight':
+                    event.preventDefault();
+                    (_b = this.emblaApi) === null || _b === void 0 ? void 0 : _b.scrollNext();
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    (_c = this.emblaApi) === null || _c === void 0 ? void 0 : _c.scrollTo(0);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    (_d = this.emblaApi) === null || _d === void 0 ? void 0 : _d.scrollTo(this.scrollSnapCount - 1);
+                    break;
+            }
+        };
+    }
+    // =========================================================================
+    // Lifecycle
+    // =========================================================================
+    componentDidLoad() {
+        this.initEmbla();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.stopAutoplay();
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.destroy();
+    }
+    // =========================================================================
+    // Watchers
+    // =========================================================================
+    handleAutoplayChange(newValue) {
+        if (newValue) {
+            this.startAutoplay();
+        }
+        else {
+            this.stopAutoplay();
+        }
+    }
+    handleOptionsChange() {
+        var _a;
+        // Reinitialize Embla with new options
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.destroy();
+        this.initEmbla();
+    }
+    // =========================================================================
+    // Public Methods
+    // =========================================================================
+    /** Scroll to the previous slide */
+    async scrollPrev() {
+        var _a;
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollPrev();
+    }
+    /** Scroll to the next slide */
+    async scrollNext() {
+        var _a;
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollNext();
+    }
+    /** Scroll to a specific slide index */
+    async goToSlide(index) {
+        var _a;
+        (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollTo(index);
+    }
+    /** Get the currently selected slide index */
+    async getSelectedIndex() {
+        var _a, _b;
+        return (_b = (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.selectedScrollSnap()) !== null && _b !== void 0 ? _b : 0;
+    }
+    /** Get the carousel context for child components */
+    async getContext() {
+        return {
+            emblaApi: this.emblaApi,
+            selectedIndex: this.selectedIndex,
+            scrollSnapCount: this.scrollSnapCount,
+            canScrollPrev: this.canScrollPrev,
+            canScrollNext: this.canScrollNext,
+            scrollPrev: () => { var _a; return (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollPrev(); },
+            scrollNext: () => { var _a; return (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollNext(); },
+            scrollTo: (index) => { var _a; return (_a = this.emblaApi) === null || _a === void 0 ? void 0 : _a.scrollTo(index); },
+        };
+    }
+    // =========================================================================
+    // Private Methods
+    // =========================================================================
+    initEmbla() {
+        var _a;
+        // Find the viewport element (seki-carousel-content)
+        this.viewportEl = this.el.querySelector('seki-carousel-content');
+        if (!this.viewportEl) {
+            console.warn('seki-carousel: No seki-carousel-content found');
+            return;
+        }
+        // Get the inner container
+        const containerEl = (_a = this.viewportEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.carousel-content');
+        if (!containerEl) {
+            // Wait for content to render
+            requestAnimationFrame(() => this.initEmbla());
+            return;
+        }
+        const options = {
+            loop: this.loop,
+            startIndex: this.startIndex,
+            slidesToScroll: this.slidesToScroll,
+            dragFree: this.dragFree,
+            containScroll: 'trimSnaps',
+        };
+        this.emblaApi = EmblaCarousel(this.viewportEl, options);
+        // Set up event listeners
+        this.emblaApi.on('select', this.handleSelect);
+        this.emblaApi.on('reInit', this.handleReInit);
+        this.emblaApi.on('pointerDown', this.handlePointerDown);
+        this.emblaApi.on('pointerUp', this.handlePointerUp);
+        // Initial state update
+        this.updateState();
+        // Start autoplay if enabled
+        if (this.autoplay) {
+            this.startAutoplay();
+        }
+    }
+    updateState() {
+        if (!this.emblaApi)
+            return;
+        this.selectedIndex = this.emblaApi.selectedScrollSnap();
+        this.scrollSnapCount = this.emblaApi.scrollSnapList().length;
+        this.canScrollPrev = this.emblaApi.canScrollPrev();
+        this.canScrollNext = this.emblaApi.canScrollNext();
+    }
+    startAutoplay() {
+        if (this.autoplayInterval)
+            return;
+        // Check for reduced motion preference
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            return;
+        }
+        this.autoplayInterval = setInterval(() => {
+            if (!this.autoplayPaused && this.emblaApi) {
+                if (this.loop || this.canScrollNext) {
+                    this.emblaApi.scrollNext();
+                }
+                else {
+                    // Reset to start if not looping
+                    this.emblaApi.scrollTo(0);
+                }
+            }
+        }, this.autoplayDelay);
+    }
+    stopAutoplay() {
+        if (this.autoplayInterval) {
+            clearInterval(this.autoplayInterval);
+            this.autoplayInterval = null;
+        }
+        this.autoplayPaused = false;
+    }
+    pauseAutoplay() {
+        this.autoplayPaused = true;
+    }
+    resumeAutoplay() {
+        this.autoplayPaused = false;
+    }
+    // =========================================================================
+    // Render
+    // =========================================================================
+    render() {
+        return (h(Host, { key: 'a7eb148f26f940d3924989a014770530044b6ff6', class: "carousel", role: "region", "aria-roledescription": "carousel", "aria-label": this.ariaLabel, tabindex: "0", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusIn: this.handleFocusIn, onFocusOut: this.handleFocusOut, onKeyDown: this.handleKeyDown }, h("div", { key: 'c0a1b637c07a58f8e73202396a1f29464fc2c758', class: "carousel__container" }, h("slot", { key: 'eb4dc7088cb11ecbf35c11c3ead292ac7f292a5a' })), h("div", { key: '78c4cdecff0fb89908279dc0a589dd174801bbd3', class: "carousel__live-region", "aria-live": "polite", "aria-atomic": "true" }, `Slide ${this.selectedIndex + 1} of ${this.scrollSnapCount}`)));
+    }
+    static get is() { return "seki-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["seki-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["seki-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable infinite loop scrolling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "false"
+            },
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable autoplay"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "autoplayDelay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autoplay delay in milliseconds"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay-delay",
+                "defaultValue": "4000"
+            },
+            "pauseOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pause autoplay on hover"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-on-hover",
+                "defaultValue": "true"
+            },
+            "slidesToScroll": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of slides to scroll at once"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "slides-to-scroll",
+                "defaultValue": "1"
+            },
+            "startIndex": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial slide index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-index",
+                "defaultValue": "0"
+            },
+            "dragFree": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable momentum/free scrolling"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "drag-free",
+                "defaultValue": "false"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the carousel"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aria-label",
+                "defaultValue": "'Carousel'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "selectedIndex": {},
+            "scrollSnapCount": {},
+            "canScrollPrev": {},
+            "canScrollNext": {},
+            "autoplayPaused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "slideChange",
+                "name": "seki-slide-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selected slide changes"
+                },
+                "complexType": {
+                    "original": "{ index: number; total: number }",
+                    "resolved": "{ index: number; total: number; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "scrollPrev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scroll to the previous slide",
+                    "tags": []
+                }
+            },
+            "scrollNext": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Scroll to the next slide",
+                    "tags": []
+                }
+            },
+            "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": "Scroll to a specific slide index",
+                    "tags": []
+                }
+            },
+            "getSelectedIndex": {
+                "complexType": {
+                    "signature": "() => Promise<number>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<number>"
+                },
+                "docs": {
+                    "text": "Get the currently selected slide index",
+                    "tags": []
+                }
+            },
+            "getContext": {
+                "complexType": {
+                    "signature": "() => Promise<CarouselContext>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "CarouselContext": {
+                            "location": "local",
+                            "path": "/home/runner/work/seki-ui/seki-ui/src/components/carousel/seki-carousel.tsx",
+                            "id": "src/components/carousel/seki-carousel.tsx::CarouselContext"
+                        }
+                    },
+                    "return": "Promise<CarouselContext>"
+                },
+                "docs": {
+                    "text": "Get the carousel context for child components",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "autoplay",
+                "methodName": "handleAutoplayChange"
+            }, {
+                "propName": "loop",
+                "methodName": "handleOptionsChange"
+            }, {
+                "propName": "slidesToScroll",
+                "methodName": "handleOptionsChange"
+            }, {
+                "propName": "dragFree",
+                "methodName": "handleOptionsChange"
+            }];
+    }
+}