@prolibu-suite/cobalt-core 0.5.0 → 0.7.0

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

@@ -0,0 +1,633 @@
+import { Host, h } from "@stencil/core";
+import { getCarouselStrings } from "../../utils/carouselI18n";
+/**
+ * A generic slide carousel. Coordinates light-DOM `co-carousel-item`
+ * children (same pattern as co-tab-group): the parent stamps aria and
+ * inertness on each item and translates a flex track to the active index.
+ *
+ * No v-model in the Vue wrappers — consume with `:value` + `@coSlideChange`.
+ *
+ * @slot - co-carousel-item elements
+ */
+export class CoCarousel {
+    constructor() {
+        /** Active slide index */
+        this.value = 0;
+        /** Auto-advance slides */
+        this.autoplay = false;
+        /** Autoplay interval in milliseconds (floored at 1000) */
+        this.interval = 6000;
+        /** Wrap around at the ends */
+        this.loop = true;
+        /** Show prev/next arrows */
+        this.arrows = true;
+        /** Show dot indicators */
+        this.dots = true;
+        /** Pause autoplay while hovered */
+        this.pauseOnHover = true;
+        /** Enable pointer swipe navigation */
+        this.swipe = true;
+        /** Container aspect ratio */
+        this.aspectRatio = 'auto';
+        /** Language for aria labels (es/en/pt, accepts full locales) */
+        this.locale = 'es';
+        this.itemCount = 0;
+        this.dragDx = 0;
+        this.dragging = false;
+        /** True while the autoplay interval is actually running (drives aria-live). */
+        this.rotating = false;
+        this.hovering = false;
+        this.focusWithin = false;
+        this.reducedMotion = false;
+        this.pointerStartX = 0;
+        this.pointerStartY = 0;
+        this.pointerId = -1;
+        this.suppressClick = false;
+        this.handleSlotChange = () => {
+            // Vue renders slides async: re-count on every slot mutation.
+            this.refreshItems();
+        };
+        this.handleVisibilityChange = () => {
+            if (document.hidden) {
+                this.stopAutoplay();
+            }
+            else {
+                this.restartAutoplay();
+            }
+        };
+        this.handleMotionChange = (e) => {
+            this.reducedMotion = e.matches;
+            this.restartAutoplay();
+        };
+        this.handleMouseEnter = () => {
+            this.hovering = true;
+            if (this.pauseOnHover)
+                this.stopAutoplay();
+        };
+        this.handleMouseLeave = () => {
+            this.hovering = false;
+            this.restartAutoplay();
+        };
+        // Keyboard users get the same pause treatment as hover: rotation stops
+        // while focus is anywhere inside the carousel (focusin/focusout bubble,
+        // including from slotted light-DOM content).
+        this.handleFocusIn = () => {
+            this.focusWithin = true;
+            this.stopAutoplay();
+        };
+        this.handleFocusOut = (e) => {
+            if (e.relatedTarget && this.el.contains(e.relatedTarget))
+                return;
+            this.focusWithin = false;
+            this.restartAutoplay();
+        };
+        // ── Swipe (umbral de drag para no romper clicks de CTA) ──
+        this.handlePointerDown = (e) => {
+            // While a captured drag is in flight, a second touch must not hijack the
+            // gesture tracking (it would jump the track and swallow the active drag).
+            if (this.dragging)
+                return;
+            if (!this.swipe || this.itemCount <= 1 || (e.pointerType === 'mouse' && e.button !== 0))
+                return;
+            // New gesture starts clean: a stale flag from a swipe whose trailing click
+            // never fired must not poison this gesture's tap.
+            this.suppressClick = false;
+            this.pointerId = e.pointerId;
+            this.pointerStartX = e.clientX;
+            this.pointerStartY = e.clientY;
+            this.dragDx = 0;
+        };
+        this.handlePointerMove = (e) => {
+            var _a;
+            if (e.pointerId !== this.pointerId)
+                return;
+            const dx = e.clientX - this.pointerStartX;
+            const dy = e.clientY - this.pointerStartY;
+            if (!this.dragging) {
+                // Slop: ignore until clearly horizontal, so taps and vertical scroll win.
+                if (Math.abs(dx) < CoCarousel.DRAG_SLOP || Math.abs(dx) < Math.abs(dy))
+                    return;
+                this.dragging = true;
+                (_a = this.viewportEl) === null || _a === void 0 ? void 0 : _a.setPointerCapture(e.pointerId);
+            }
+            this.dragDx = dx;
+        };
+        this.handlePointerUp = (e) => {
+            var _a;
+            if (e.pointerId !== this.pointerId)
+                return;
+            this.pointerId = -1;
+            if (!this.dragging)
+                return;
+            const dx = this.dragDx;
+            this.dragging = false;
+            this.dragDx = 0;
+            this.suppressClick = true;
+            (_a = this.viewportEl) === null || _a === void 0 ? void 0 : _a.releasePointerCapture(e.pointerId);
+            if (dx <= -CoCarousel.SWIPE_THRESHOLD) {
+                this.advance(1);
+            }
+            else if (dx >= CoCarousel.SWIPE_THRESHOLD) {
+                this.advance(-1);
+            }
+            this.restartAutoplay();
+        };
+        this.handlePointerCancel = (e) => {
+            if (e.pointerId !== this.pointerId)
+                return;
+            this.pointerId = -1;
+            this.dragging = false;
+            this.dragDx = 0;
+            this.suppressClick = false;
+        };
+        this.handleClickCapture = (e) => {
+            // Swallow the click that follows a drag so CTAs inside slides
+            // don't fire after a swipe.
+            if (this.suppressClick) {
+                this.suppressClick = false;
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        // ── Keyboard ────────────────────────────────────
+        this.handleKeyDown = (e) => {
+            if (e.key === 'ArrowRight') {
+                e.preventDefault();
+                this.advance(1);
+            }
+            else if (e.key === 'ArrowLeft') {
+                e.preventDefault();
+                this.advance(-1);
+            }
+        };
+    }
+    // ── Lifecycle ───────────────────────────────────
+    componentWillLoad() {
+        var _a, _b;
+        if (typeof window !== 'undefined' && window.matchMedia) {
+            this.motionQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+            this.reducedMotion = this.motionQuery.matches;
+            (_b = (_a = this.motionQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.handleMotionChange);
+        }
+    }
+    componentDidLoad() {
+        this.refreshItems();
+        document.addEventListener('visibilitychange', this.handleVisibilityChange);
+        this.restartAutoplay();
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        this.stopAutoplay();
+        document.removeEventListener('visibilitychange', this.handleVisibilityChange);
+        (_b = (_a = this.motionQuery) === null || _a === void 0 ? void 0 : _a.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'change', this.handleMotionChange);
+    }
+    // ── Watchers ────────────────────────────────────
+    watchValue() {
+        const clamped = this.clampIndex(this.value);
+        if (clamped !== this.value) {
+            this.value = clamped;
+            return;
+        }
+        this.syncItems();
+    }
+    watchLocale() {
+        this.syncItems();
+    }
+    watchAutoplay() {
+        this.restartAutoplay();
+    }
+    // ── Public methods ──────────────────────────────
+    async next() {
+        this.advance(1);
+    }
+    async prev() {
+        this.advance(-1);
+    }
+    async goTo(index) {
+        this.setActive(this.clampIndex(index));
+    }
+    // ── Items (light DOM, patrón co-tab-group) ─────
+    getItems() {
+        // :scope > : solo hijos directos — un carrusel anidado dentro de un slide
+        // no debe aportar sus items al conteo/aria del padre.
+        return Array.from(this.el.querySelectorAll(':scope > co-carousel-item'));
+    }
+    refreshItems() {
+        const items = this.getItems();
+        this.itemCount = items.length;
+        if (this.value > 0 && this.value >= this.itemCount) {
+            this.value = Math.max(0, this.itemCount - 1);
+        }
+        this.syncItems();
+        this.restartAutoplay();
+    }
+    syncItems() {
+        const items = this.getItems();
+        const n = items.length;
+        const s = getCarouselStrings(this.locale);
+        items.forEach((item, i) => {
+            const active = i === this.value;
+            item.setAttribute('aria-label', s.slideLabel.replace('{i}', String(i + 1)).replace('{n}', String(n)));
+            item.setAttribute('aria-hidden', active ? 'false' : 'true');
+            item.toggleAttribute('inert', !active);
+        });
+    }
+    // ── Navigation ──────────────────────────────────
+    clampIndex(i) {
+        if (this.itemCount === 0)
+            return 0;
+        return Math.max(0, Math.min(this.itemCount - 1, i));
+    }
+    setActive(index) {
+        if (index === this.value || index < 0 || index >= this.itemCount)
+            return;
+        this.value = index;
+        this.coSlideChange.emit(index);
+    }
+    advance(dir) {
+        if (this.itemCount <= 1)
+            return;
+        let next = this.value + dir;
+        if (next >= this.itemCount) {
+            if (!this.loop)
+                return;
+            next = 0;
+        }
+        else if (next < 0) {
+            if (!this.loop)
+                return;
+            next = this.itemCount - 1;
+        }
+        this.setActive(next);
+    }
+    // ── Autoplay ────────────────────────────────────
+    restartAutoplay() {
+        this.stopAutoplay();
+        if (!this.autoplay || this.itemCount <= 1 || this.reducedMotion)
+            return;
+        if (this.pauseOnHover && this.hovering)
+            return;
+        if (this.focusWithin)
+            return;
+        if (typeof document !== 'undefined' && document.hidden)
+            return;
+        this.timer = setInterval(() => {
+            if (this.dragging)
+                return;
+            if (!this.loop && this.value >= this.itemCount - 1) {
+                this.stopAutoplay();
+                return;
+            }
+            this.advance(1);
+        }, Math.max(1000, this.interval));
+        this.rotating = true;
+    }
+    stopAutoplay() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+        this.rotating = false;
+    }
+    // ── Render ──────────────────────────────────────
+    render() {
+        const s = getCarouselStrings(this.locale);
+        const multi = this.itemCount > 1;
+        const canPrev = this.loop || this.value > 0;
+        const canNext = this.loop || this.value < this.itemCount - 1;
+        const aspectClass = `co-carousel--${this.aspectRatio.replace(':', '-')}`;
+        const trackStyle = {
+            transform: this.dragging
+                ? `translateX(calc(${-this.value * 100}% + ${this.dragDx}px))`
+                : `translateX(${-this.value * 100}%)`,
+        };
+        if (this.dragging)
+            trackStyle.transition = 'none';
+        return (h(Host, { key: '29c8bdeb6a2c402aa46e6a1b3a442abbb8f9967c' }, h("div", { key: '5a57b4b999cdac0def308039ba0a4edcfba9adf5', class: { 'co-carousel': true, [aspectClass]: true }, part: "container", role: "region", "aria-roledescription": "carousel", "aria-label": s.carouselLabel, tabindex: 0, onKeyDown: this.handleKeyDown, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut }, h("div", { key: 'a20cec4e9d8144868ac4f53f72d536272def9119', class: "co-carousel__viewport", part: "viewport", ref: el => (this.viewportEl = el), onPointerDown: this.handlePointerDown, onPointerMove: this.handlePointerMove, onPointerUp: this.handlePointerUp, onPointerCancel: this.handlePointerCancel, onClickCapture: this.handleClickCapture }, h("div", { key: '98755bee7cd2d8da45a8ffb2abcd048f0de440ad', class: "co-carousel__track", part: "track", style: trackStyle, "aria-live": this.rotating ? 'off' : 'polite' }, h("slot", { key: 'a3e9a2bffb93be5ebb60ba61130ab362f3793ccb', onSlotchange: this.handleSlotChange }))), this.arrows && multi && (h("button", { key: '516649b789c44ba235991f6fe3c6aab2a6a2fcf7', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--prev': true, 'co-carousel__arrow--disabled': !canPrev }, part: "arrow-prev", type: "button", "aria-label": s.prevSlide, disabled: !canPrev, onClick: () => this.advance(-1) }, h("co-icon", { key: 'ffcddd1e02ce1d699052290e8df6ab2463b27a20', name: "caret-left", size: 18, weight: "bold" }))), this.arrows && multi && (h("button", { key: 'a7d6989b1c18d3598dc6c7c9e6606b2cf31fc026', class: { 'co-carousel__arrow': true, 'co-carousel__arrow--next': true, 'co-carousel__arrow--disabled': !canNext }, part: "arrow-next", type: "button", "aria-label": s.nextSlide, disabled: !canNext, onClick: () => this.advance(1) }, h("co-icon", { key: '9e26adf68047395cd0cb265cfeaba3b4af6b950e', name: "caret-right", size: 18, weight: "bold" }))), this.dots && multi && (
+        // APG grouped-carousel picker pattern: plain always-tabbable
+        // buttons in a labelled group (tablist/tab would demand
+        // aria-controls + roving tabindex we don't implement).
+        h("div", { key: 'd64ee6b57da49e5025c6f5a6faa3f58ba6855f49', class: "co-carousel__dots", part: "dots", role: "group", "aria-label": s.pickSlide }, Array.from({ length: this.itemCount }, (_, i) => (h("button", { class: { 'co-carousel__dot': true, 'co-carousel__dot--active': i === this.value }, part: "dot", type: "button", "aria-current": i === this.value ? 'true' : undefined, "aria-label": s.goToSlide.replace('{i}', String(i + 1)), onClick: () => this.setActive(i) }))))))));
+    }
+    static get is() { return "co-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Active slide index"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "autoplay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-advance slides"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "false"
+            },
+            "interval": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autoplay interval in milliseconds (floored at 1000)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "interval",
+                "defaultValue": "6000"
+            },
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Wrap around at the ends"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "true"
+            },
+            "arrows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show prev/next arrows"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "arrows",
+                "defaultValue": "true"
+            },
+            "dots": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show dot indicators"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dots",
+                "defaultValue": "true"
+            },
+            "pauseOnHover": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Pause autoplay while hovered"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pause-on-hover",
+                "defaultValue": "true"
+            },
+            "swipe": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable pointer swipe navigation"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "swipe",
+                "defaultValue": "true"
+            },
+            "aspectRatio": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'16:9' | '4:3' | '1:1' | '21:9' | 'auto'",
+                    "resolved": "\"16:9\" | \"1:1\" | \"21:9\" | \"4:3\" | \"auto\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Container aspect ratio"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "aspect-ratio",
+                "defaultValue": "'auto'"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language for aria labels (es/en/pt, accepts full locales)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "'es'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "itemCount": {},
+            "dragDx": {},
+            "dragging": {},
+            "rotating": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coSlideChange",
+                "name": "coSlideChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the active slide changes (user, autoplay or method)"
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "prev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "goTo": {
+                "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": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchValue"
+            }, {
+                "propName": "locale",
+                "methodName": "watchLocale"
+            }, {
+                "propName": "autoplay",
+                "methodName": "watchAutoplay"
+            }, {
+                "propName": "interval",
+                "methodName": "watchAutoplay"
+            }];
+    }
+}
+/** Minimum horizontal travel (px) before a pointer gesture counts as a drag. */
+CoCarousel.DRAG_SLOP = 8;
+/** Horizontal travel (px) needed to change slide on release. */
+CoCarousel.SWIPE_THRESHOLD = 40;

package/dist/collection/components/co-carousel-item/co-carousel-item.css

@@ -0,0 +1,6 @@
+:host {
+  display: block;
+  flex: 0 0 100%;
+  min-width: 100%;
+  box-sizing: border-box;
+}

package/dist/collection/components/co-carousel-item/co-carousel-item.js

@@ -0,0 +1,25 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A single slide inside a co-carousel. The parent carousel stamps
+ * aria-label / aria-hidden / inert on each item (same light-DOM
+ * coordination pattern as co-tab-group ↔ co-tab).
+ *
+ * @slot - Slide content
+ */
+export class CoCarouselItem {
+    render() {
+        return (h(Host, { key: '70a79bb97b8a0dd47b48c1df02e58a63d9a0f712', role: "group", "aria-roledescription": "slide" }, h("slot", { key: '9b639772cf96b15aa38ff4b2821ef9ca2a7faa53' })));
+    }
+    static get is() { return "co-carousel-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-carousel-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-carousel-item.css"]
+        };
+    }
+}