@coras-io/embed 0.1.0

package/dist/components/better-carousel/better-carousel.component.js

@@ -0,0 +1,335 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { property, query, queryAssignedElements, state, } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import "./better-carousel-item/better-carousel-item.js";
+import "../button/button.js";
+import "../icon/icon.js";
+import styles from "./better-carousel.styles.js";
+/**
+ * @element coras-better-carousel
+ * @slot - Default slot for carousel items
+ * @slot action - Slot for content to be displayed in the right bottom corner
+ * @csspart base - The component's base wrapper
+ * @csspart carousel - The carousel container
+ * @csspart btn-prev - The previous navigation button
+ * @csspart btn-next - The next navigation button
+ */
+export class CorasBetterCarousel extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.assetsURL = "";
+        /**
+         * Whether to use multi-item mode
+         */
+        this.multiItem = false;
+        /**
+         * Current active item index (0-based)
+         */
+        this.currentItemIndex = 0;
+        /**
+         * Total number of items
+         */
+        this.totalItems = 0;
+        /**
+         * Whether the previous button should be visible
+         */
+        this.showPrevButton = false;
+        /**
+         * Whether the next button should be visible
+         */
+        this.showNextButton = true;
+        /**
+         * Width of a single carousel item
+         */
+        this.itemWidth = 0;
+        /**
+         * Current scroll position
+         */
+        this.currentScrollPosition = 0;
+        /**
+         * Handle scroll events
+         */
+        this.handleScroll = () => {
+            this.currentScrollPosition = this.carouselContent.scrollLeft;
+            if (!this.multiItem) {
+                // For single-item mode, update the current item index based on scroll position
+                const itemWidth = this.carouselContent.clientWidth;
+                if (itemWidth > 0) {
+                    const newIndex = Math.round(this.currentScrollPosition / itemWidth);
+                    if (newIndex !== this.currentItemIndex &&
+                        newIndex >= 0 &&
+                        newIndex < this.totalItems) {
+                        this.currentItemIndex = newIndex;
+                    }
+                }
+            }
+            this.updateButtonVisibility();
+        };
+    }
+    static { this.styles = styles; }
+    firstUpdated() {
+        this.updateCarouselState();
+        this.setupScrollListener();
+        this.resizeObserver = new ResizeObserver(() => {
+            this.updateCarouselState();
+        });
+        this.resizeObserver.observe(this.carouselContent);
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("multiItem")) {
+            // Handle mode change
+            this.handleModeChange();
+        }
+    }
+    /**
+     * Setup scroll listener for carousel
+     */
+    setupScrollListener() {
+        // Add scroll event listener for both modes
+        this.carouselContent.addEventListener("scroll", this.handleScroll);
+    }
+    /**
+     * Handle mode change between single-item and multi-item
+     */
+    handleModeChange() {
+        // Remove existing scroll listener
+        if (this.carouselContent) {
+            this.carouselContent.removeEventListener("scroll", this.handleScroll);
+        }
+        // Reset state
+        this.currentItemIndex = 0;
+        this.currentScrollPosition = 0;
+        // Setup for new mode
+        if (this.multiItem) {
+            // Multi-item mode: setup scroll listener
+            this.setupScrollListener();
+        }
+        else {
+            // Single-item mode: also uses scroll but with different behavior
+            this.carouselContent.addEventListener("scroll", this.handleScroll);
+        }
+        // Make all items visible for both modes
+        this.items.forEach((item) => {
+            item.removeAttribute("hidden");
+        });
+        this.updateCarouselState();
+        // Scroll to the first item
+        if (!this.multiItem) {
+            this.scrollToItem(0, "auto");
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.resizeObserver?.disconnect();
+        // Remove scroll event listener for both modes
+        if (this.carouselContent) {
+            this.carouselContent.removeEventListener("scroll", this.handleScroll);
+        }
+    }
+    /**
+     * Update carousel measurements and state
+     */
+    updateCarouselState() {
+        if (this.items && this.items.length > 0) {
+            this.totalItems = this.items.length;
+            // Make sure all items are visible for both modes
+            this.items.forEach((item) => {
+                item.removeAttribute("hidden");
+            });
+            // Calculate item width for multi-item scrolling
+            if (this.multiItem && this.items[0]) {
+                this.itemWidth = this.items[0].offsetWidth;
+            }
+            this.updateButtonVisibility();
+            // For single-item mode, scroll to the current item
+            if (!this.multiItem) {
+                this.scrollToItem(this.currentItemIndex, "auto");
+            }
+        }
+    }
+    /**
+     * Update the visibility of navigation buttons
+     */
+    updateButtonVisibility() {
+        if (this.multiItem) {
+            // For multi-item mode, check if there's more content to scroll to
+            const scrollWidth = this.carouselContent.scrollWidth;
+            const clientWidth = this.carouselContent.clientWidth;
+            const scrollLeft = this.carouselContent.scrollLeft;
+            this.showPrevButton = scrollLeft > 0;
+            this.showNextButton = scrollLeft + clientWidth < scrollWidth - 1; // -1 to account for rounding errors
+        }
+        else {
+            // For single-item mode, check the current item index
+            this.showPrevButton = this.currentItemIndex > 0;
+            this.showNextButton = this.currentItemIndex < this.totalItems - 1;
+        }
+    }
+    /**
+     * Handle navigation button clicks
+     */
+    handleNavBtnClick(direction) {
+        if (this.multiItem) {
+            // For multi-item mode, scroll the content
+            if (direction === "prev") {
+                this.scrollPrevious();
+            }
+            else {
+                this.scrollNext();
+            }
+        }
+        else {
+            // For single-item mode, also use scrolling but update the current index
+            if (direction === "prev" && this.currentItemIndex > 0) {
+                this.currentItemIndex--;
+                this.scrollToItem(this.currentItemIndex);
+            }
+            else if (direction === "next" &&
+                this.currentItemIndex < this.totalItems - 1) {
+                this.currentItemIndex++;
+                this.scrollToItem(this.currentItemIndex);
+            }
+            this.updateButtonVisibility();
+        }
+    }
+    /**
+     * Scroll to the previous set of items in multi-item mode
+     */
+    scrollPrevious() {
+        if (!this.multiItem)
+            return;
+        // Scroll by exactly one item width to ensure CSS snap works correctly
+        const scrollAmount = this.itemWidth;
+        this.carouselContent.scrollBy({
+            left: -scrollAmount,
+            behavior: "smooth",
+        });
+        // Update button visibility after scrolling
+        setTimeout(() => this.updateButtonVisibility(), 300);
+    }
+    /**
+     * Scroll to the next set of items in multi-item mode
+     */
+    scrollNext() {
+        if (!this.multiItem)
+            return;
+        // Scroll by exactly one item width to ensure CSS snap works correctly
+        const scrollAmount = this.itemWidth;
+        this.carouselContent.scrollBy({
+            left: scrollAmount,
+            behavior: "smooth",
+        });
+        // Update button visibility after scrolling
+        setTimeout(() => this.updateButtonVisibility(), 300);
+    }
+    /**
+     * Scroll to a specific item by index
+     */
+    scrollToItem(index, behavior = "smooth") {
+        if (index < 0 || index >= this.totalItems)
+            return;
+        const item = this.items[index];
+        if (!item)
+            return;
+        // For single-item mode, each item is 100% of the container width
+        const scrollPosition = index * this.carouselContent.clientWidth;
+        this.carouselContent.scrollTo({
+            left: scrollPosition,
+            behavior,
+        });
+        // Update button visibility after scrolling
+        setTimeout(() => this.updateButtonVisibility(), 300);
+    }
+    render() {
+        // Classes for the carousel container
+        const containerClasses = {
+            "carousel-container": true,
+            "mode-single-item": !this.multiItem,
+            "mode-multi-item": this.multiItem,
+        };
+        // Classes for the previous button
+        const prevBtnClasses = {
+            "nav-btn": true,
+            hidden: !this.showPrevButton,
+        };
+        // Classes for the next button
+        const nextBtnClasses = {
+            "nav-btn": true,
+            hidden: !this.showNextButton,
+        };
+        return html `
+      <div class=${classMap(containerClasses)} part="base">
+        <coras-button
+          id="btn-left"
+          part="btn-prev"
+          class=${classMap(prevBtnClasses)}
+          radius="circle"
+          variant="outlined"
+          @click=${() => this.handleNavBtnClick("prev")}
+          ><coras-icon
+            assets-url="${this.assetsURL}"
+            icon="chevron-left"
+          ></coras-icon
+        ></coras-button>
+        <div
+          class="carousel-content"
+          part="carousel"
+          @scroll=${this.handleScroll}
+        >
+          <slot @slotchange=${this.updateCarouselState}></slot>
+        </div>
+        <div class="action-slot-container">
+          <slot name="action"></slot>
+        </div>
+        <coras-button
+          id="btn-right"
+          part="btn-next"
+          class=${classMap(nextBtnClasses)}
+          radius="circle"
+          variant="outlined"
+          @click=${() => this.handleNavBtnClick("next")}
+          ><coras-icon
+            assets-url="${this.assetsURL}"
+            icon="chevron-right"
+          ></coras-icon
+        ></coras-button>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property({ type: String, attribute: "assets-url" })
+], CorasBetterCarousel.prototype, "assetsURL", void 0);
+__decorate([
+    property({ type: Boolean, attribute: "multi-item" })
+], CorasBetterCarousel.prototype, "multiItem", void 0);
+__decorate([
+    query(".carousel-content")
+], CorasBetterCarousel.prototype, "carouselContent", void 0);
+__decorate([
+    queryAssignedElements({ flatten: true })
+], CorasBetterCarousel.prototype, "items", void 0);
+__decorate([
+    state()
+], CorasBetterCarousel.prototype, "currentItemIndex", void 0);
+__decorate([
+    state()
+], CorasBetterCarousel.prototype, "totalItems", void 0);
+__decorate([
+    state()
+], CorasBetterCarousel.prototype, "showPrevButton", void 0);
+__decorate([
+    state()
+], CorasBetterCarousel.prototype, "showNextButton", void 0);
+__decorate([
+    state()
+], CorasBetterCarousel.prototype, "itemWidth", void 0);
+__decorate([
+    state()
+], CorasBetterCarousel.prototype, "currentScrollPosition", void 0);

package/dist/components/better-carousel/better-carousel.d.ts

@@ -0,0 +1,8 @@
+import { CorasBetterCarousel } from "./better-carousel.component.js";
+export * from "./better-carousel.component.js";
+export default CorasBetterCarousel;
+declare global {
+    interface HTMLElementTagNameMap {
+        "coras-better-carousel": CorasBetterCarousel;
+    }
+}

package/dist/components/better-carousel/better-carousel.js

@@ -0,0 +1,6 @@
+import { CorasBetterCarousel } from "./better-carousel.component.js";
+export * from "./better-carousel.component.js";
+export default CorasBetterCarousel;
+if (!customElements.get("coras-better-carousel")) {
+    customElements.define("coras-better-carousel", CorasBetterCarousel);
+}

package/dist/components/better-carousel/better-carousel.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/better-carousel/better-carousel.styles.js

@@ -0,0 +1,159 @@
+import { css } from "lit";
+import component from "../../styles/defaults/component.js";
+export default css `
+  ${component}
+
+  /* Utility classes */
+  .hidden {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .carousel-container {
+    container-type: inline-size; /* Enable container queries based on width */
+    position: relative; /* Needed for absolute positioning context */
+    overflow: hidden; /* Hide parts of arrows when needed */
+  }
+
+  .nav-btn {
+    position: absolute;
+    top: 50%;
+    opacity: 80%;
+
+    transition: opacity 0.1s linear;
+    transition-delay: 0s;
+
+    &.hidden {
+      transition:
+        visibility 0s linear 0.1s,
+        opacity 0.1s linear;
+      visibility: hidden;
+      opacity: 0;
+    }
+  }
+
+  .carousel-content {
+    /* Common styles for the content area */
+    min-width: 0; /* Prevent flexbox blowout */
+  }
+
+  /* --- Mode 1: Single Item --- */
+  .mode-single-item {
+    /* Default: Arrows outside, using flex */
+    display: flex;
+    align-items: center;
+    gap: 1rem; /* Space between arrows and content */
+    overflow: hidden; /* Hide overflow content */
+  }
+
+  .mode-single-item .nav-btn {
+    position: relative;
+    flex-shrink: 0;
+
+    &#btn-left {
+      order: 0;
+    }
+
+    &#btn-right {
+      order: 2;
+    }
+  }
+
+  .mode-single-item .carousel-content {
+    flex-grow: 1; /* Content takes available space */
+    display: flex; /* Use flex layout for items */
+    overflow-x: auto; /* Enable horizontal scrolling */
+    scroll-snap-type: x mandatory; /* Enforce snapping */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+    width: 100%; /* Constrain width to container */
+    max-width: 100%; /* Ensure it doesn't exceed container width */
+  }
+
+  .mode-single-item .carousel-content::-webkit-scrollbar {
+    display: none; /* Chrome/Safari/Opera */
+  }
+
+  /* Styles for better-carousel-item in single-item mode */
+  .mode-single-item .carousel-content ::slotted(coras-better-carousel-item) {
+    flex: 0 0 100%;
+    min-width: 100%;
+  }
+
+  /* Container Query for Single Item Mode: Arrows move inside */
+  @container (max-width: 820px) {
+    .carousel-container.mode-single-item {
+      gap: 0; /* Remove gap when arrows overlay */
+    }
+
+    .mode-single-item .nav-btn {
+      /* Switch to absolute positioning for smaller screens */
+      position: absolute;
+
+      &#btn-left {
+        left: 10px;
+        transform: translateY(-50%);
+        order: initial;
+      }
+
+      &#btn-right {
+        right: 10px;
+        transform: translateY(-50%);
+        order: initial;
+      }
+    }
+  }
+
+  /* --- Mode 2: Multiple Items (Snap) --- */
+  .mode-multi-item {
+    /* Add padding to make space for half-in/half-out arrows */
+    padding-left: 22px;
+    padding-right: 22px;
+  }
+
+  .mode-multi-item .carousel-content {
+    display: flex;
+    overflow-x: auto;
+    scroll-snap-type: x mandatory; /* Enforce snapping */
+    gap: 1rem; /* Space between items */
+    padding-bottom: 10px; /* Add space below in case scrollbar appears briefly */
+
+    /* Hide scrollbar visually */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+
+  .mode-multi-item .carousel-content::-webkit-scrollbar {
+    display: none; /* Chrome/Safari/Opera */
+  }
+
+  .mode-multi-item .carousel-content ::slotted(coras-better-carousel-item) {
+    flex: 0 0 auto; /* Prevent slides from stretching/shrinking */
+    /*scroll-snap-align: start;*/
+  }
+
+  .mode-multi-item .nav-btn {
+    /* Adjust positioning for multi-item mode */
+    position: absolute;
+
+    &#btn-left {
+      left: 0;
+      transform: translate(-50%, -50%);
+    }
+
+    &#btn-right {
+      right: 0;
+      transform: translate(50%, -50%);
+    }
+  }
+
+  /* Action slot container positioning */
+  .action-slot-container {
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    /*z-index: 10; !* Ensure it's above carousel content *!*/
+    pointer-events: auto; /* Make sure it's clickable */
+  }
+`;

package/dist/components/bottom-drawer/bottom-drawer.component.d.ts

@@ -0,0 +1,27 @@
+import { CSSResultGroup, LitElement, PropertyValues } from "lit";
+export declare class CorasBottomDrawer extends LitElement {
+    static styles: CSSResultGroup;
+    open: boolean;
+    fullscreen: boolean;
+    private isDragging;
+    private startY;
+    private currentY;
+    private dragMoved;
+    private suppressNextClick;
+    private mouseMoveListener?;
+    private mouseUpListener?;
+    private _ownsScrollLock;
+    private setVisibility;
+    private canStartDragFromHandle;
+    private startDragAt;
+    private updateDragAt;
+    private endDrag;
+    private onHandleTouchStart;
+    private onHandleTouchMove;
+    private onHandleMouseDown;
+    private onHandleClick;
+    protected updated(changed: PropertyValues): void;
+    firstUpdated(): void;
+    disconnectedCallback(): void;
+    render(): import("lit").TemplateResult<1>;
+}