import { h, Host } from "@stencil/core";
export class DgaCarousel {
    constructor() {
        this.DIRECTION = {
            LEFT: Symbol('LEFT'),
            RIGHT: Symbol('RIGHT')
        };
        this.variant = 'arrows';
        this.showDots = true;
        this.steps = 1;
        this.transitionDuration = 600;
        this.Dir = 'rtl';
        this.size = 'lg';
        this.arrowsVariant = 'primary';
        this.arrows = {
            variant: 'primary',
            size: 'lg'
        };
        this.childWidth = 0;
        this.childrenLength = 0;
        this.currentSlideIndex = 0;
    }
    isRTL() {
        return this.Dir === 'rtl';
    }
    changeSlide(direction) {
        const isMovingForward = direction === this.DIRECTION.RIGHT;
        const isMovingBackward = direction === this.DIRECTION.LEFT;
        if (this.isRTL()) {
            // In RTL: RIGHT means going towards index 0, LEFT means going towards the end
            if (isMovingForward && this.currentSlideIndex > 0) {
                this.currentSlideIndex--;
            }
            else if (isMovingBackward && this.currentSlideIndex < this.childrenLength - 1) {
                this.currentSlideIndex++;
            }
        }
        else {
            // In LTR: RIGHT means going towards the end, LEFT means going towards index 0
            if (isMovingForward && this.currentSlideIndex < this.childrenLength - 1) {
                this.currentSlideIndex++;
            }
            else if (isMovingBackward && this.currentSlideIndex > 0) {
                this.currentSlideIndex--;
            }
        }
        this.updateSlidePosition();
    }
    updateSlidePosition() {
        if (this.slidesContainer) {
            const translateX = this.isRTL()
                ? (this.currentSlideIndex * this.childWidth)
                : -(this.currentSlideIndex * this.childWidth);
            this.slidesContainer.style.transform = `translateX(${translateX}px)`;
        }
    }
    showLeftArrow() {
        if (this.isRTL()) {
            // In RTL: Left arrow shows when we can move towards the end (increase index)
            return this.currentSlideIndex < this.childrenLength - 1;
        }
        // In LTR: Left arrow shows when we can move towards the start (decrease index)
        return this.currentSlideIndex > 0;
    }
    showRightArrow() {
        if (this.isRTL()) {
            // In RTL: Right arrow shows when we can move towards the start (decrease index)
            return this.currentSlideIndex > 0;
        }
        // In LTR: Right arrow shows when we can move towards the end (increase index)
        return this.currentSlideIndex < this.childrenLength - 1;
    }
    isHighlighted(index) {
        return index === this.currentSlideIndex;
    }
    componentDidLoad() {
        var _a;
        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
        slot === null || slot === void 0 ? void 0 : slot.addEventListener('slotchange', this.calculateChildWidth.bind(this));
        this.calculateChildWidth();
        this.updateChildrenLength();
    }
    calculateChildWidth() {
        const child = this.slidesContainer.querySelector('.KCarousel-slides > *');
        if (child) {
            this.childWidth = child.clientWidth;
        }
    }
    updateChildrenLength() {
        if (this.slidesContainer) {
            this.childrenLength = this.slidesContainer.childElementCount;
        }
    }
    render() {
        return (h(Host, { key: 'c84caf26b68ba83253512a6029b8a8d856bb1e9c', class: `KCarousel KCarousel--${this.variant} KCarousel--${this.size}`, dir: this.Dir }, this.variant !== "dots-only" && h("div", { key: 'e113311ed9f5f6bbbd18493ec5a51fa7b13d4a4a', class: "KCarousel-body" }, this.variant === "arrows" && (h("a", { key: 'c5e326d8deae66dcbb1b40e5f2f95af3dfbf69e2', class: {
                'KCarousel-arrow': true,
                'KCarousel-arrow--active': this.showLeftArrow(),
                [this.isRTL() ? 'right' : 'left']: true,
                [`KCarousel-arrow--${this.arrowsVariant}`]: true
            }, onClick: () => this.changeSlide(this.DIRECTION.LEFT) }, h("dga-icon", { key: 'd86047f49af470a6c6210cb7ea4e36142fd72643', icon: this.isRTL() ? "arrow-right-01" : "arrow-left-01", variant: "stroke", type: "rounded", size: 24 }))), h("div", { key: 'ebdd4b31d85394432a2f03051ecc443c5483aaf5', class: "KCarousel-container", style: { overflow: 'hidden', maxWidth: `${this.childWidth}px` } }, h("div", { key: '6591698fc65bf4d7a6fc978532c846610111f071', style: {
                display: 'flex',
                transition: `transform ${this.transitionDuration}ms ease-in-out`,
            }, class: "KCarousel-slides", ref: (el) => (this.slidesContainer = el) }, h("slot", { key: 'e493906798730583356129d21b94fe31c194b973' }))), this.variant === "arrows" && (h("a", { key: '178f007b40ad57a6a9cd9fa1f500005dee1620c2', class: {
                'KCarousel-arrow': true,
                'KCarousel-arrow--active': this.showRightArrow(),
                [this.isRTL() ? 'left' : 'right']: true,
                [`KCarousel-arrow--${this.arrowsVariant}`]: true
            }, onClick: () => this.changeSlide(this.DIRECTION.RIGHT) }, h("dga-icon", { key: '40d60082cb45d5162c5ac06b0c10cbe62a80ad90', icon: this.isRTL() ? "arrow-left-01" : "arrow-right-01", variant: "stroke", type: "rounded", size: 24 })))), ["dots", "dots-only"].includes(this.variant) && (h("div", { key: '9f6e4eced3f0d57bf7c32410413ca8d3c7c94022', class: "KCarousel-dots" }, Array.from({ length: this.childrenLength }).map((_, index) => (h("span", { class: {
                'KCarousel-dot': true,
                'is-active': this.isHighlighted(index)
            }, onClick: () => {
                this.currentSlideIndex = index;
                this.updateSlidePosition();
            } })))))));
    }
    static get is() { return "dga-carousel"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-carousel.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-carousel.css"]
        };
    }
    static get properties() {
        return {
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'arrows' | 'dots' | 'dots-only'",
                    "resolved": "\"arrows\" | \"dots\" | \"dots-only\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "variant",
                "reflect": false,
                "defaultValue": "'arrows'"
            },
            "showDots": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "show-dots",
                "reflect": false,
                "defaultValue": "true"
            },
            "steps": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "steps",
                "reflect": false,
                "defaultValue": "1"
            },
            "transitionDuration": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "transition-duration",
                "reflect": false,
                "defaultValue": "600"
            },
            "Dir": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'rtl' | 'ltr'",
                    "resolved": "\"ltr\" | \"rtl\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "dir",
                "reflect": false,
                "defaultValue": "'rtl'"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'sm' | 'md' | 'lg'",
                    "resolved": "\"lg\" | \"md\" | \"sm\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "size",
                "reflect": false,
                "defaultValue": "'lg'"
            },
            "arrowsVariant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'primary' | 'subtle'",
                    "resolved": "\"primary\" | \"subtle\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "attribute": "arrows-variant",
                "reflect": false,
                "defaultValue": "'primary'"
            },
            "arrows": {
                "type": "unknown",
                "mutable": false,
                "complexType": {
                    "original": "{\n    variant: 'primary' | 'subtle';\n    size: 'sm' | 'md' | 'lg'\n  }",
                    "resolved": "{ variant: \"subtle\" | \"primary\"; size: \"lg\" | \"md\" | \"sm\"; }",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "defaultValue": "{\n    variant: 'primary',\n    size: 'lg'\n  }"
            }
        };
    }
    static get states() {
        return {
            "childWidth": {},
            "childrenLength": {},
            "currentSlideIndex": {}
        };
    }
    static get elementRef() { return "el"; }
}
//# sourceMappingURL=dga-carousel.js.map
