import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$3 } from './component2.js';
import { d as defineCustomElement$2 } from './component8.js';

const styleCss = "x-showcase{display:block;width:100%;padding:0}x-showcase .main-media img{display:block;margin:0 auto;border-radius:0.45rem;-webkit-box-shadow:0px 10px 16px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);box-shadow:0px 10px 16px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);background-color:rgba(0, 0, 0, 0.1);max-width:100%;height:auto}x-showcase .main-media iframe{border:none;overflow:hidden;width:100%;display:block;margin:0 auto;border-radius:0.45rem;-webkit-box-shadow:0px 10px 16px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);box-shadow:0px 10px 16px rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);background-color:rgba(0, 0, 0, 0.1);max-width:100%}x-showcase .item-selector{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;scroll-behavior:smooth;position:relative}x-showcase .item-selector>button{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;margin:0;padding:0px 0.2rem;width:1.75rem;height:1.75rem;font-size:1rem;line-height:1em;border:none;outline:none !important;cursor:pointer;background-color:transparent;-webkit-transition:0.3s;transition:0.3s;color:inherit;position:absolute;z-index:9;border-radius:50%;background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.75)}.is-dark-mode x-showcase .item-selector>button{background-color:rgba(var(--color-dark-rgb, 31, 31, 31), 0.75)}x-showcase .item-selector>button:first-child{top:1.75rem;left:-0.75rem}x-showcase .item-selector>button:last-child{top:1.75rem;right:-0.75rem}x-showcase .item-selector>button i[class^=icon-]{display:block}x-showcase .item-selector>button:disabled,x-showcase .item-selector>button[disabled]{opacity:0.3;cursor:not-allowed}x-showcase .item-selector>button:hover{color:white;-webkit-transform:none;transform:none;background-color:rgba(var(--color-primary-rgb, 66, 117, 242), 0.9);-webkit-box-shadow:0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3);box-shadow:0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3)}x-showcase .item-selector .items{-ms-flex:1;flex:1;overflow:hidden;white-space:nowrap;padding:0.75rem 3px;border-radius:0.25rem}x-showcase .item-selector .items>a{display:inline-block;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;position:relative;width:calc(4rem - 6px);height:calc(4rem - 6px);margin:0px;padding:0px;border-radius:0.45rem;overflow:hidden;background-color:rgba(0, 0, 0, 0.1);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-box-shadow:0px 3px 0.75rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35), 0px 0px 0px 0px rgba(var(--color-border-rgb, 200, 199, 204), 0.3);box-shadow:0px 3px 0.75rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35), 0px 0px 0px 0px rgba(var(--color-border-rgb, 200, 199, 204), 0.3);margin-right:0.75rem;-webkit-transition:0.3s;transition:0.3s}x-showcase .item-selector .items>a>svg{width:3rem;height:3rem;margin-top:9px;margin-left:5px;fill:rgba(var(--color-light-rgb, 254, 254, 254), 0.85);-webkit-filter:drop-shadow(0 0 1rem #000000);filter:drop-shadow(0 0 1rem #000000)}x-showcase .item-selector .items>a:last-child{margin-right:0}x-showcase .item-selector .items>a:hover{-webkit-box-shadow:0px 3px 0.75rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-primary-rgb, 66, 117, 242), 1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3);box-shadow:0px 3px 0.75rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-primary-rgb, 66, 117, 242), 1), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 0.3)}x-showcase .item-selector .items>a.selected{-webkit-box-shadow:0px 3px 0.75rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-primary-rgb, 66, 117, 242), 0), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 1);box-shadow:0px 3px 0.75rem rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(var(--color-primary-rgb, 66, 117, 242), 0), 0px 0px 0px 3px rgba(var(--color-primary-rgb, 66, 117, 242), 1)}.is-dark-mode x-showcase .item-selector .items>a{background-color:rgba(255, 255, 255, 0.1)}";
const XShowcaseStyle0 = styleCss;

const XShowcase$1 = /*@__PURE__*/ proxyCustomElement(class XShowcase extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.isLeftArrowActive = false;
        this.isRightArrowActive = false;
        this.activeScroll = null;
        this.activeMediaIndex = 0;
        this.busyScroll = false;
        this.mediaElements = [];
    }
    /**
     * Element event on slot make changes
     *
     * @param evt
     */
    handleSlotChange() {
        this.searchMediaElements();
    }
    componentDidLoad() {
        var _a;
        this.searchMediaElements();
        this.onContainerScroll();
        const container = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector(".items");
        if (container) {
            this.isRightArrowActive = container.scrollWidth > container.offsetWidth;
        }
    }
    searchMediaElements() {
        if (this.el) {
            this.mediaElements = Array.from(this.el.querySelector('.item-selector').childNodes)
                .filter(item => item.nodeName.toLowerCase() === 'x-showcase-item')
                .map(item => item);
        }
    }
    onContainerScroll() {
        this.busyScroll = true;
        if (this.activeScroll !== null) {
            clearTimeout(this.activeScroll);
        }
        this.activeScroll = setTimeout(() => {
            const container = this.el.querySelector(".items");
            if (container) {
                this.isLeftArrowActive = container.scrollLeft > 0;
                this.isRightArrowActive = container.scrollLeft < container.scrollWidth - container.offsetWidth;
            }
            this.busyScroll = false;
        }, 200);
    }
    onScrollLeft() {
        this.scrollItemTo(-1);
    }
    onScrollRight() {
        this.scrollItemTo(1);
    }
    onSelectMedia(event, index) {
        event.preventDefault();
        this.selectMediaElement(index);
    }
    scrollItemTo(positionFactor) {
        const container = this.el.querySelector(".items");
        if (container) {
            const factor = Math.round(container.offsetWidth / 58);
            const position = (factor - 1) * 58;
            container.scrollBy({
                top: 0,
                left: position > 200 ? positionFactor * position : positionFactor * 200,
                behavior: "smooth",
            });
        }
    }
    selectMediaElement(index) {
        if (index != null && this.mediaElements[index]) {
            this.activeMediaIndex = index;
        }
    }
    getMediaThumb(media) {
        if (media.type == "youtube") {
            return `http://img.youtube.com/vi/${this.getYoutubeId(media.url)}/0.jpg`;
        }
        return media.thumb || media.url;
    }
    getYoutubeId(url) {
        var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
        var match = url.match(regExp);
        return match && match[7].length == 11 ? match[7] : false;
    }
    getMainElementRender() {
        if (!this.mediaElements[this.activeMediaIndex]) {
            return (h("x-skeleton", { height: "16rem" }));
        }
        switch (this.mediaElements[this.activeMediaIndex].type) {
            case 'image':
                return (h("img", { src: this.mediaElements[this.activeMediaIndex].url, "aria-label": this.mediaElements[this.activeMediaIndex].title, alt: this.mediaElements[this.activeMediaIndex].title }));
            case 'youtube':
                return (h("iframe", { src: this.mediaElements[this.activeMediaIndex].url, title: this.mediaElements[this.activeMediaIndex].title, height: "420", scrolling: "no", frameborder: "0", allowFullScreen: true, allow: "autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" }));
            default:
                return (h("x-skeleton", { height: "16rem" }));
        }
    }
    /**
     * Render component
     */
    render() {
        return h(Host, { key: '5d4bffbbf166e6d74818000715e376fcd0dcfc50' }, h("div", { key: 'f549987c22072c93f52acb703028da98f7ca3abb', class: "main-media" }, this.getMainElementRender()), h("div", { key: 'dce9caaa70a1b71dd5be28d17af00a747c63e202', class: "item-selector" }, this.isLeftArrowActive && h("button", { key: '8cece1e6b3c7c15bbfe636f4810ebc4122661cc1', disabled: this.busyScroll, onClick: () => this.onScrollLeft() }, h("x-icon", { key: 'd6a33b27c39bc220899659e9164bb54790371071', name: "back" })), h("slot", { key: '0c3d8584aecfefae8ab8244de07605dd4013be6b' }), h("div", { key: '18a325f92cb9ae54a7caffbc57b74b9be9dc052b', class: "items", onScroll: () => this.onContainerScroll() }, this.mediaElements.map((media, i) => (h("a", { onClick: (e) => this.onSelectMedia(e, i), key: i, href: media.url, style: { backgroundImage: `url(${this.getMediaThumb(media)})` }, class: { selected: i == this.activeMediaIndex } }, ['youtube', 'video'].includes(media.type) && h("svg", { x: "0px", y: "0px", viewBox: "0 0 700 700" }, h("g", null, h("path", { d: "M350,87.4c-106.2,0-192.6,86.5-192.6,192.6S243.8,472.6,350,472.6S542.6,386.2,542.6,280S456.2,87.4,350,87.4L350,87.4z\n\t\t\t\t\t\t\t\t\t\t\tM433.3,286.7c-1.3,2.2-2.7,3.6-4.9,4.9l-116.5,67.2c-2.2,1.3-4.5,1.8-6.7,1.8c-7.6,0-13.4-5.8-13.4-13.4V212.8\n\t\t\t\t\t\t\t\t\t\t\tc0-7.6,5.8-13.4,13.4-13.4c2.2,0,4.5,0.4,6.7,1.8l116.5,67.2C434.7,271.9,436.9,280.4,433.3,286.7L433.3,286.7z" }))))))), this.isRightArrowActive && h("button", { key: '53d96bd4289d31dbec58f9d63529ab910e70883e', disabled: this.busyScroll, onClick: () => this.onScrollRight() }, h("x-icon", { key: 'ae6908f4fdaecf00038fba35f4c5dfc18a0ef2e5', name: "forward" }))));
    }
    get el() { return this; }
    static get style() { return XShowcaseStyle0; }
}, [4, "x-showcase", {
        "isLeftArrowActive": [32],
        "isRightArrowActive": [32],
        "activeScroll": [32],
        "activeMediaIndex": [32],
        "busyScroll": [32],
        "mediaElements": [32]
    }, [[0, "slotchange", "handleSlotChange"]]]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["x-showcase", "x-icon", "x-skeleton"];
    components.forEach(tagName => { switch (tagName) {
        case "x-showcase":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, XShowcase$1);
            }
            break;
        case "x-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "x-skeleton":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const XShowcase = XShowcase$1;
const defineCustomElement = defineCustomElement$1;

export { XShowcase, defineCustomElement };
