q2-tecton-elements 1.45.3 → 1.46.1

package/dist/collection/components/q2-carousel/q2-carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-carousel.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel/q2-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Watch,\n    State,\n    Fragment,\n    Element,\n    Host,\n    h,\n    Event,\n    EventEmitter,\n    Listen,\n} from '@stencil/core';\nimport { SwiperOptions, Autoplay, Swiper } from 'swiper';\nimport { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';\n\nconst carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */\n\n@Component({ tag: 'q2-carousel', shadow: false, styleUrl: 'q2-carousel.scss' })\nexport class Q2Carousel implements ComponentInterface {\n    /** @private */\n    private swiper?: Swiper = null;\n\n    /** Start the carousel without user input. */\n    @Prop({ reflect: true }) autoPlay: boolean = false;\n\n    /** Display the carousel panes full-width rather than with peeking content. */\n    @Prop({ reflect: true }) fullWidthPanes: boolean = false;\n\n    /** Display the carousel a frameless with no container or shadow **/\n    @Prop({ reflect: true }) framelessPanes: boolean = false;\n\n    /** Hide the dots below the carousel that provide navigation control and indicate which page is currently active. */\n    @Prop({ reflect: true }) hidePagination: boolean = false;\n\n    /**\n     * The label that is associated with the carousel. This is not displayed visually, but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string = 'tecton.element.carousel.ariaLabel';\n\n    /** Display navigation arrow buttons as another way to navigate the carousel. */\n    @Prop({ reflect: true }) showNavigationArrows: boolean = false;\n\n    /** The carousel pane you want the carousel to start from. */\n    @Prop({ reflect: true, mutable: true }) index: number = 1;\n\n    /** @deprecated */\n    @Prop({ reflect: true }) ariaLabel: string;\n\n    @State() universalCarouselOptions: SwiperOptions = {\n        centeredSlides: true,\n        focusableElements: 'q2-btn, q2-dropdown, a, input, select, textarea, button, video, label, option',\n        autoplay: this.autoPlay,\n        modules: [Autoplay],\n        on: {\n            slideChange: () => {\n                this.handleSlideChange(this.swiper?.activeIndex ?? 0); // lazy-load causing this.swiper is null only on ios safari\n            },\n            activeIndexChange: swiper => {\n                this.activePaneIndex = swiper.activeIndex;\n                this.organizePanes();\n                const isPaginationFocused = !!document.activeElement.closest(\n                    `#q2-carousel-${this.guid} .q2-carousel-page-indicator`\n                );\n                const isCarouselFocused = !!document.activeElement.closest(\n                    `#q2-carousel-${this.guid} q2-carousel-pane`\n                );\n                const isFocused = isPaginationFocused || isCarouselFocused;\n                this.handleAriaLive(isFocused);\n\n                if (isPaginationFocused) {\n                    this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });\n                } else if (isCarouselFocused)\n                    (swiper.slides[swiper.activeIndex] as HTMLElement).focus({\n                        preventScroll: true,\n                    });\n            },\n        },\n    };\n\n    @State() fullWidthDisplayOptions: SwiperOptions = {\n        slidesPerView: 1,\n        spaceBetween: 100,\n        ...this.universalCarouselOptions,\n    };\n    @State() activePaneIndex: number = this.realIndex;\n    @State() applyFocus: boolean = false;\n    @State() applyPaginationFocus: boolean = false;\n    @State() autoPlayInProgress: boolean = false;\n    @State() compactMode: boolean = false;\n    @State() carouselWrapperWidth: number = 0;\n    @State() ariaLiveValue: 'polite' | 'off' = 'polite';\n    @State() currentPaneCount: number = this.paneCount;\n    @Element() hostElement: HTMLElement;\n\n    carouselWrapper: HTMLElement;\n    carouselPaneWrapperElement: HTMLElement;\n    mutationObserver: MutationObserver;\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('carouselWrapperWidth')\n    carouselWrapperWidthChanged() {\n        this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;\n    }\n\n    @Watch('index')\n    indexChanged() {\n        this.swiper?.slideTo(this.realIndex);\n    }\n\n    @Watch('fullWidthPanes')\n    @Watch('framelessPanes')\n    @Watch('compactMode')\n    @Watch('autoPlay')\n    revampCarousel() {\n        this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n    }\n\n    @Watch('framelessPanes')\n    framelessPanesChanged() {\n        this.organizePanes();\n        this.revampCarousel();\n    }\n\n    // COMPUTED //\n    guid = createGuid();\n\n    get peekContentDisplayOptions(): SwiperOptions {\n        return {\n            slidesPerView: 2,\n            spaceBetween: this.compactMode ? 0 : -10,\n            centerInsufficientSlides: false,\n            ...this.universalCarouselOptions,\n        };\n    }\n\n    get realIndex(): number {\n        const indexNum = Number(this.index);\n        return indexNum > 0 ? indexNum - 1 : 0;\n    }\n\n    get paginationBtns(): NodeListOf<HTMLButtonElement> {\n        return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');\n    }\n\n    get activeCarouselOptions() {\n        return this.fullWidthPanes || this.framelessPanes\n            ? this.fullWidthDisplayOptions\n            : this.peekContentDisplayOptions;\n    }\n\n    get dynamicPaginationDots() {\n        return this.paneCount && this.paneCount > 5;\n    }\n\n    get paneCollection() {\n        return this.hostElement.querySelectorAll('q2-carousel-pane');\n    }\n\n    get paneArray() {\n        return Array.from(this.paneCollection);\n    }\n\n    get paneCount() {\n        return this.paneArray && this.paneArray.length > 0 ? this.paneArray.length : 0;\n    }\n\n    get insufficientPanes() {\n        return this.paneCount < 1;\n    }\n\n    // HOST ELEMENT EVENTS //\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.index = event.detail.index;\n        }\n    }\n\n    @Listen('clickCarouselPane')\n    carouselPaneClicked(event) {\n        this.swiper?.slideTo(event.detail.paneIndex);\n        (this.swiper?.slides[event.detail.paneIndex] as HTMLElement).focus({ preventScroll: true });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const activePane = this.swiper.slides[this.swiper.activeIndex];\n        if (!isEventFromElement(event, this.hostElement) || !activePane) return;\n        (activePane as HTMLElement).focus({ preventScroll: true });\n    }\n\n    // EVENTS //\n\n    /**\n     * Emitted when the carousel pane changes.\n     */\n    @Event() change: EventEmitter<{ index: number }>;\n\n    // METHODS //\n    onMutationObserved = () => {\n        this.organizePanes();\n        this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n    };\n\n    setCarouselWrapperWidth = () => {\n        if (this.insufficientPanes) return;\n        this.carouselWrapperWidth = this.carouselWrapper.clientWidth;\n    };\n\n    handleSlideChange = (newIndex: number) => {\n        this.change.emit({ index: newIndex + 1 });\n    };\n\n    configureCarousel = (carouselWrapper, carouselOptions) => {\n        if (!!this.swiper) {\n            this.tearDownCarousel();\n        }\n        this.autoPlayInProgress = this.autoPlay;\n\n        this.swiper = new Swiper(carouselWrapper, carouselOptions);\n        this.swiper?.slideTo(this.realIndex);\n        if (this.autoPlayInProgress) this.swiper.autoplay.start();\n    };\n\n    tearDownCarousel = () => {\n        this.swiper.destroy();\n        this.swiper = null;\n    };\n\n    organizePanes = () => {\n        const { framelessPanes, paneCollection } = this;\n        const siblingCount = paneCollection.length;\n\n        this.paneCollection.forEach((pane, index) => {\n            pane.index = index;\n            pane.siblingCount = siblingCount;\n            pane.isActivePane = index === this.activePaneIndex;\n            pane.slotFrameless = framelessPanes || undefined;\n        });\n        this.currentPaneCount = this.paneCollection.length;\n    };\n\n    handleAutoPlayPause = () => {\n        const {\n            swiper: { autoplay },\n        } = this;\n        if (!autoplay) return;\n\n        if (autoplay?.running) autoplay.stop();\n        else autoplay.start();\n        this.autoPlayInProgress = autoplay.running;\n    };\n\n    handleCarouselNavigationSelection = (newIndex: number, applyFocus: boolean) => {\n        if (applyFocus) {\n            this.applyFocus = true;\n        }\n\n        this.handleSlideChange(newIndex);\n    };\n\n    handleAriaLive(activeAndFocused: boolean) {\n        if (this.autoPlayInProgress && !activeAndFocused) {\n            this.ariaLiveValue = 'off';\n        } else {\n            this.ariaLiveValue = 'polite';\n        }\n    }\n\n    onPaginationKeyDown = (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.applyFocus = false;\n                this.applyPaginationFocus = true;\n                this.swiper.slideNext();\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.applyFocus = false;\n                this.applyPaginationFocus = true;\n                this.swiper.slidePrev();\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.applyFocus = false;\n                this.applyPaginationFocus = true;\n                this.swiper?.slideTo(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.applyFocus = false;\n                this.applyPaginationFocus = true;\n                this.swiper?.slideTo(this.swiper.slides.length - 1);\n                break;\n        }\n    };\n\n    onWrapperKeyDown = (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.applyFocus = true;\n                this.swiper.slideNext();\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.applyFocus = true;\n                this.swiper.slidePrev();\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.applyFocus = true;\n                this.swiper?.slideTo(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.applyFocus = true;\n                this.swiper?.slideTo(this.swiper.slides.length - 1);\n                break;\n        }\n    };\n\n    // LIFECYCLES //\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.organizePanes();\n        window.addEventListener('resize', this.setCarouselWrapperWidth);\n    }\n\n    componentDidLoad() {\n        this.setCarouselWrapperWidth();\n        if (this.carouselWrapper && !!this.paneArray.length) {\n            this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n        }\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        if (!!this.swiper) {\n            this.tearDownCarousel();\n        }\n\n        window.removeEventListener('resize', this.setCarouselWrapperWidth);\n    }\n\n    render() {\n        const { fullWidthPanes, framelessPanes } = this;\n        let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper-container'];\n        if (fullWidthPanes) carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];\n        if (framelessPanes) carouselContainerClasses = [...carouselContainerClasses, 'frameless-display'];\n        if (!fullWidthPanes && !framelessPanes)\n            carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];\n        if (this.compactMode) carouselContainerClasses = [...carouselContainerClasses, 'compact'];\n\n        let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];\n        if (this.showNavigationArrows) paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];\n\n        return (\n            <Host\n                id={`q2-carousel-${this.guid}`}\n                class=\"q2-carousel-instance\"\n            >\n                {this.insufficientPanes ? (\n                    this.insufficientPanesDisplay()\n                ) : (\n                    <Fragment>\n                        {this.paneCount > 1 && (\n                            <div class={paginationWrapperClasses.join(' ')}>\n                                {this.showNavigationArrows && this.prevNavBtn()}\n\n                                <div class=\"q2-carousel-control-center-tray\">\n                                    {!this.hidePagination && this.paginationArea()}\n\n                                    {this.autoPlay && this.autoPlayBtn()}\n                                </div>\n\n                                {this.showNavigationArrows && this.nextNavBtn()}\n                            </div>\n                        )}\n\n                        <section\n                            class={carouselContainerClasses.join(' ')}\n                            ref={el => (this.carouselWrapper = el)}\n                            aria-roledescription=\"carousel\"\n                            aria-label={loc(this.label)}\n                        >\n                            <div\n                                class=\"q2-carousel-swiper-wrapper swiper-wrapper\"\n                                ref={el => (this.carouselPaneWrapperElement = el)}\n                                aria-live={this.ariaLiveValue}\n                                onKeyDown={this.onWrapperKeyDown}\n                            >\n                                <slot></slot>\n                            </div>\n                        </section>\n                    </Fragment>\n                )}\n            </Host>\n        );\n    }\n\n    paginationArea = () => {\n        let paginationContainerClasses = ['q2-carousel-pagination'];\n        if (this.dynamicPaginationDots) paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];\n\n        return (\n            <div\n                class={paginationContainerClasses.join(' ')}\n                role=\"tablist\"\n                aria-label={loc('tecton.element.carousel.tabWrapperLabel')}\n            >\n                {this.paneArray.map(pane => {\n                    let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${pane.index}`];\n                    if (pane.isActivePane) btnClasses = [...btnClasses, 'active-page'];\n                    if (this.dynamicPaginationDots) btnClasses = [...btnClasses, 'dynamic'];\n\n                    const withinOneOfActive =\n                        pane.index === this.activePaneIndex + 1 || pane.index === this.activePaneIndex - 1;\n                    if (withinOneOfActive) btnClasses = [...btnClasses, 'active-adjacent'];\n\n                    const withinTwoOfActive =\n                        pane.index === this.activePaneIndex + 2 || pane.index === this.activePaneIndex - 2;\n                    if (withinTwoOfActive) btnClasses = [...btnClasses, 'active-adjacent-adjacent'];\n\n                    return (\n                        <button\n                            type=\"button\"\n                            role=\"tab\"\n                            tabIndex={pane.isActivePane ? undefined : -1}\n                            aria-selected={pane.isActivePane ? 'true' : 'false'}\n                            class={btnClasses.join(' ')}\n                            onClick={() => this.handleCarouselNavigationSelection(pane.index, true)}\n                            onKeyDown={event => this.onPaginationKeyDown(event)}\n                            aria-label={loc('tecton.element.carousel.itemDescription', [\n                                (pane.index + 1).toString(),\n                                this.paneCount.toString(),\n                            ])}\n                        ></button>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    autoPlayBtn = () => {\n        return (\n            <q2-btn\n                type=\"button\"\n                hide-label\n                label={loc(\n                    this.autoPlayInProgress\n                        ? 'tecton.element.carousel.pausePlayLabel'\n                        : 'tecton.element.carousel.resumePlayLabel'\n                )}\n                class=\"q2-carousel-autoplay-control\"\n                onClick={this.handleAutoPlayPause}\n            >\n                <q2-icon type={this.autoPlayInProgress ? 'pause' : 'play'} />\n            </q2-btn>\n        );\n    };\n\n    prevNavBtn = () => {\n        const prevPaneAvailable = this.activePaneIndex > 0;\n\n        return (\n            <div>\n                <q2-btn\n                    type=\"button\"\n                    disabled={prevPaneAvailable ? undefined : true}\n                    class=\"q2-carousel-navigation-button q2-carousel-navigation-button-prev\"\n                    hide-label\n                    label={loc('tecton.element.carousel.previousItemLabel')}\n                    onClick={() => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true)}\n                >\n                    <q2-icon type=\"chevron-left\" />\n                </q2-btn>\n            </div>\n        );\n    };\n\n    nextNavBtn = () => {\n        const nextPaneAvailable = this.activePaneIndex < this.paneCount - 1;\n\n        return (\n            <div>\n                <q2-btn\n                    type=\"button\"\n                    disabled={nextPaneAvailable ? undefined : true}\n                    class=\"q2-carousel-navigation-button q2-carousel-navigation-button-next\"\n                    hide-label\n                    label={loc('tecton.element.carousel.nextItemLabel')}\n                    onClick={() => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true)}\n                >\n                    <q2-icon type=\"chevron-right\" />\n                </q2-btn>\n            </div>\n        );\n    };\n\n    insufficientPanesDisplay = () => {\n        let insufficientPanesContainerClasses = [\n            'insufficient-pane-feedback',\n            this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',\n        ];\n        if (this.compactMode) insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];\n\n        return (\n            <div class={insufficientPanesContainerClasses.join(' ')}>\n                <div class=\"insufficient-panes-icon-wrapper\">\n                    <q2-icon type=\"warning\" />\n                </div>\n                <p class=\"insufficient-panes-header\">\n                    <strong>{loc('tecton.element.carousel.insufficientPanesMessageHeader')}</strong>\n                </p>\n                <p class=\"insufficient-panes-body\">{loc('tecton.element.carousel.insufficientPanesMessageBody')}</p>\n            </div>\n        );\n    };\n}\n"]}
+{"version":3,"file":"q2-carousel.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel/q2-carousel.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Watch,\n    State,\n    Fragment,\n    Element,\n    Host,\n    h,\n    Event,\n    EventEmitter,\n    Listen,\n} from '@stencil/core';\nimport { SwiperOptions, Autoplay, Swiper } from 'swiper';\nimport { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';\n\nconst carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly */\n\n@Component({ tag: 'q2-carousel', shadow: false, styleUrl: 'q2-carousel.scss' })\nexport class Q2Carousel implements ComponentInterface {\n    /** @private */\n    private swiper?: Swiper = null;\n\n    /** Start the carousel without user input. */\n    @Prop({ reflect: true }) autoPlay: boolean = false;\n\n    /** Display the carousel panes full-width rather than with peeking content. */\n    @Prop({ reflect: true }) fullWidthPanes: boolean = false;\n\n    /** Display the carousel a frameless with no container or shadow **/\n    @Prop({ reflect: true }) framelessPanes: boolean = false;\n\n    /** Hide the dots below the carousel that provide navigation control and indicate which page is currently active. */\n    @Prop({ reflect: true }) hidePagination: boolean = false;\n\n    /**\n     * The label that is associated with the carousel. This is not displayed visually, but is presented by screen readers.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string = 'tecton.element.carousel.ariaLabel';\n\n    /** Display navigation arrow buttons as another way to navigate the carousel. */\n    @Prop({ reflect: true }) showNavigationArrows: boolean = false;\n\n    /** The carousel pane you want the carousel to start from. */\n    @Prop({ reflect: true, mutable: true }) index: number = 1;\n\n    /** @deprecated */\n    @Prop({ reflect: true }) ariaLabel: string;\n\n    @State() universalCarouselOptions: SwiperOptions = {\n        centeredSlides: true,\n        focusableElements:\n            'q2-btn, q2-dropdown, q2-item, q2-list, a, input, select, textarea, button, video, label, option',\n        autoplay: this.autoPlay,\n        modules: [Autoplay],\n        on: {\n            slideChange: () => {\n                this.handleSlideChange(this.swiper?.activeIndex ?? 0); // lazy-load causing this.swiper is null only on ios safari\n            },\n            activeIndexChange: swiper => {\n                this.activePaneIndex = swiper.activeIndex;\n                this.organizePanes();\n                const isPaginationFocused = !!document.activeElement.closest(\n                    `#q2-carousel-${this.guid} .q2-carousel-page-indicator`\n                );\n                const isCarouselFocused = !!document.activeElement.closest(\n                    `#q2-carousel-${this.guid} q2-carousel-pane`\n                );\n                const isFocused = isPaginationFocused || isCarouselFocused;\n                this.handleAriaLive(isFocused);\n\n                if (isPaginationFocused) {\n                    this.paginationBtns[swiper.activeIndex].focus({ preventScroll: true });\n                } else if (isCarouselFocused)\n                    (swiper.slides[swiper.activeIndex] as HTMLElement).focus({\n                        preventScroll: true,\n                    });\n            },\n            afterInit: swiper => {\n                this.swiper = swiper;\n                this.activePane?.addEventListener('popoverStateChanged', this.handlePopovers);\n            },\n            slideChangeTransitionEnd: () => {\n                this.activePane?.addEventListener('popoverStateChanged', this.handlePopovers);\n            },\n            slideChangeTransitionStart: () => {\n                this.activePane?.removeEventListener('popoverStateChanged', this.handlePopovers);\n            },\n        },\n    };\n\n    @State() fullWidthDisplayOptions: SwiperOptions = {\n        slidesPerView: 1,\n        spaceBetween: 100,\n        ...this.universalCarouselOptions,\n    };\n    @State() activePaneIndex: number = this.realIndex;\n    @State() applyFocus: boolean = false;\n    @State() applyPaginationFocus: boolean = false;\n    @State() autoPlayInProgress: boolean = false;\n    @State() compactMode: boolean = false;\n    @State() carouselWrapperWidth: number = 0;\n    @State() ariaLiveValue: 'polite' | 'off' = 'polite';\n    @State() currentPaneCount: number = this.paneCount;\n    @Element() hostElement: HTMLElement;\n\n    carouselWrapper: HTMLElement;\n    carouselPaneWrapperElement: HTMLElement;\n    mutationObserver: MutationObserver;\n\n    @Watch('ariaLabel')\n    ariaLabelObserver() {\n        handleAriaLabel(this);\n    }\n\n    @Watch('carouselWrapperWidth')\n    carouselWrapperWidthChanged() {\n        this.compactMode = this.carouselWrapperWidth < carouselBreakpoint;\n    }\n\n    @Watch('index')\n    indexChanged() {\n        this.swiper?.slideTo(this.realIndex);\n    }\n\n    @Watch('fullWidthPanes')\n    @Watch('framelessPanes')\n    @Watch('compactMode')\n    @Watch('autoPlay')\n    revampCarousel() {\n        this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n    }\n\n    @Watch('framelessPanes')\n    framelessPanesChanged() {\n        this.organizePanes();\n        this.revampCarousel();\n    }\n\n    // COMPUTED //\n    guid = createGuid();\n\n    get peekContentDisplayOptions(): SwiperOptions {\n        return {\n            slidesPerView: 2,\n            spaceBetween: this.compactMode ? 0 : -10,\n            centerInsufficientSlides: false,\n            ...this.universalCarouselOptions,\n        };\n    }\n\n    get realIndex(): number {\n        const indexNum = Number(this.index);\n        return indexNum > 0 ? indexNum - 1 : 0;\n    }\n\n    get paginationBtns(): NodeListOf<HTMLButtonElement> {\n        return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');\n    }\n\n    get activeCarouselOptions() {\n        return this.fullWidthPanes || this.framelessPanes\n            ? this.fullWidthDisplayOptions\n            : this.peekContentDisplayOptions;\n    }\n\n    get activePane(): HTMLElement {\n        const activeSlide = this.swiper?.slides[this.swiper.activeIndex] ?? 0;\n        return activeSlide instanceof HTMLElement ? activeSlide : null;\n    }\n\n    get dynamicPaginationDots() {\n        return this.paneCount && this.paneCount > 5;\n    }\n\n    get paneCollection() {\n        return this.hostElement.querySelectorAll('q2-carousel-pane');\n    }\n\n    get paneArray() {\n        return Array.from(this.paneCollection);\n    }\n\n    get paneCount() {\n        return this.paneArray && this.paneArray.length > 0 ? this.paneArray.length : 0;\n    }\n\n    get insufficientPanes() {\n        return this.paneCount < 1;\n    }\n\n    // HOST ELEMENT EVENTS //\n\n    @Listen('change')\n    onHostElementChange(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange) {\n            this.index = event.detail.index;\n        }\n    }\n\n    @Listen('clickCarouselPane')\n    carouselPaneClicked(event) {\n        this.swiper?.slideTo(event.detail.paneIndex);\n        (this.swiper?.slides[event.detail.paneIndex] as HTMLElement).focus({ preventScroll: true });\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        const activePane = this.swiper.slides[this.swiper.activeIndex];\n        if (!isEventFromElement(event, this.hostElement) || !activePane) return;\n        (activePane as HTMLElement).focus({ preventScroll: true });\n    }\n\n    // EVENTS //\n\n    /**\n     * Emitted when the carousel pane changes.\n     */\n    @Event() change: EventEmitter<{ index: number }>;\n\n    // METHODS //\n    handlePopovers = (event: CustomEvent) => {\n        const { swiper, carouselPaneWrapperElement } = this;\n        if (event.detail.open) {\n            carouselPaneWrapperElement.style.left = `${swiper?.translate}px`;\n            carouselPaneWrapperElement.style.transform = null;\n            swiper.disable();\n        } else {\n            carouselPaneWrapperElement.style.left = null;\n            carouselPaneWrapperElement.style.transform = `translate3d(${swiper?.translate}px, 0, 0)`;\n            swiper.enable();\n        }\n    };\n\n    onMutationObserved = () => {\n        this.organizePanes();\n        this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n    };\n\n    setCarouselWrapperWidth = () => {\n        if (this.insufficientPanes) return;\n        this.carouselWrapperWidth = this.carouselWrapper.clientWidth;\n    };\n\n    handleSlideChange = (newIndex: number) => {\n        this.change.emit({ index: newIndex + 1 });\n    };\n\n    configureCarousel = (carouselWrapper, carouselOptions) => {\n        if (!!this.swiper) {\n            this.tearDownCarousel();\n        }\n        this.autoPlayInProgress = this.autoPlay;\n\n        new Swiper(carouselWrapper, carouselOptions);\n        this.swiper?.slideTo(this.realIndex);\n        if (this.autoPlayInProgress) this.swiper.autoplay.start();\n    };\n\n    tearDownCarousel = () => {\n        this.swiper.destroy();\n        this.swiper = null;\n    };\n\n    organizePanes = () => {\n        const { framelessPanes, paneCollection } = this;\n        const siblingCount = paneCollection.length;\n\n        this.paneCollection.forEach((pane, index) => {\n            pane.index = index;\n            pane.siblingCount = siblingCount;\n            pane.isActivePane = index === this.activePaneIndex;\n            pane.slotFrameless = framelessPanes || undefined;\n        });\n        this.currentPaneCount = this.paneCollection.length;\n    };\n\n    handleAutoPlayPause = () => {\n        const {\n            swiper: { autoplay },\n        } = this;\n        if (!autoplay) return;\n\n        if (autoplay?.running) autoplay.stop();\n        else autoplay.start();\n        this.autoPlayInProgress = autoplay.running;\n    };\n\n    handleCarouselNavigationSelection = (newIndex: number, applyFocus: boolean) => {\n        if (applyFocus) {\n            this.applyFocus = true;\n        }\n\n        this.handleSlideChange(newIndex);\n    };\n\n    handleAriaLive(activeAndFocused: boolean) {\n        if (this.autoPlayInProgress && !activeAndFocused) {\n            this.ariaLiveValue = 'off';\n        } else {\n            this.ariaLiveValue = 'polite';\n        }\n    }\n\n    onPaginationKeyDown = (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.applyFocus = false;\n                this.applyPaginationFocus = true;\n                this.swiper.slideNext();\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.applyFocus = false;\n                this.applyPaginationFocus = true;\n                this.swiper.slidePrev();\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.applyFocus = false;\n                this.applyPaginationFocus = true;\n                this.swiper?.slideTo(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.applyFocus = false;\n                this.applyPaginationFocus = true;\n                this.swiper?.slideTo(this.swiper.slides.length - 1);\n                break;\n        }\n    };\n\n    onWrapperKeyDown = (event: KeyboardEvent) => {\n        switch (event.key) {\n            case 'ArrowRight':\n                event.preventDefault();\n                this.applyFocus = true;\n                this.swiper.slideNext();\n                break;\n\n            case 'ArrowLeft':\n                event.preventDefault();\n                this.applyFocus = true;\n                this.swiper.slidePrev();\n                break;\n\n            case 'Home':\n                event.preventDefault();\n                this.applyFocus = true;\n                this.swiper?.slideTo(0);\n                break;\n\n            case 'End':\n                event.preventDefault();\n                this.applyFocus = true;\n                this.swiper?.slideTo(this.swiper.slides.length - 1);\n                break;\n        }\n    };\n\n    // LIFECYCLES //\n\n    componentWillLoad() {\n        handleAriaLabel(this);\n        this.organizePanes();\n        window.addEventListener('resize', this.setCarouselWrapperWidth);\n    }\n\n    componentDidLoad() {\n        this.setCarouselWrapperWidth();\n        if (this.carouselWrapper && !!this.paneArray.length) {\n            this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n        }\n        const observer = new MutationObserver(this.onMutationObserved);\n        observer.observe(this.hostElement, { childList: true, subtree: true });\n        this.mutationObserver = observer;\n        overrideFocus(this.hostElement);\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        if (!!this.swiper) {\n            this.tearDownCarousel();\n        }\n\n        window.removeEventListener('resize', this.setCarouselWrapperWidth);\n    }\n\n    render() {\n        const { fullWidthPanes, framelessPanes } = this;\n        let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper-container'];\n        if (fullWidthPanes) carouselContainerClasses = [...carouselContainerClasses, 'full-width-display'];\n        if (framelessPanes) carouselContainerClasses = [...carouselContainerClasses, 'frameless-display'];\n        if (!fullWidthPanes && !framelessPanes)\n            carouselContainerClasses = [...carouselContainerClasses, 'content-peek-display'];\n        if (this.compactMode) carouselContainerClasses = [...carouselContainerClasses, 'compact'];\n\n        let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];\n        if (this.showNavigationArrows) paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];\n\n        return (\n            <Host\n                id={`q2-carousel-${this.guid}`}\n                class=\"q2-carousel-instance\"\n            >\n                {this.insufficientPanes ? (\n                    this.insufficientPanesDisplay()\n                ) : (\n                    <Fragment>\n                        {this.paneCount > 1 && (\n                            <div class={paginationWrapperClasses.join(' ')}>\n                                {this.showNavigationArrows && this.prevNavBtn()}\n\n                                <div class=\"q2-carousel-control-center-tray\">\n                                    {!this.hidePagination && this.paginationArea()}\n\n                                    {this.autoPlay && this.autoPlayBtn()}\n                                </div>\n\n                                {this.showNavigationArrows && this.nextNavBtn()}\n                            </div>\n                        )}\n\n                        <section\n                            class={carouselContainerClasses.join(' ')}\n                            ref={el => (this.carouselWrapper = el)}\n                            aria-roledescription=\"carousel\"\n                            aria-label={loc(this.label)}\n                        >\n                            <div\n                                class=\"q2-carousel-swiper-wrapper swiper-wrapper\"\n                                ref={el => (this.carouselPaneWrapperElement = el)}\n                                aria-live={this.ariaLiveValue}\n                                onKeyDown={this.onWrapperKeyDown}\n                            >\n                                <slot></slot>\n                            </div>\n                        </section>\n                    </Fragment>\n                )}\n            </Host>\n        );\n    }\n\n    paginationArea = () => {\n        let paginationContainerClasses = ['q2-carousel-pagination'];\n        if (this.dynamicPaginationDots) paginationContainerClasses = [...paginationContainerClasses, 'dynamic'];\n\n        return (\n            <div\n                class={paginationContainerClasses.join(' ')}\n                role=\"tablist\"\n                aria-label={loc('tecton.element.carousel.tabWrapperLabel')}\n            >\n                {this.paneArray.map(pane => {\n                    let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${pane.index}`];\n                    if (pane.isActivePane) btnClasses = [...btnClasses, 'active-page'];\n                    if (this.dynamicPaginationDots) btnClasses = [...btnClasses, 'dynamic'];\n\n                    const withinOneOfActive =\n                        pane.index === this.activePaneIndex + 1 || pane.index === this.activePaneIndex - 1;\n                    if (withinOneOfActive) btnClasses = [...btnClasses, 'active-adjacent'];\n\n                    const withinTwoOfActive =\n                        pane.index === this.activePaneIndex + 2 || pane.index === this.activePaneIndex - 2;\n                    if (withinTwoOfActive) btnClasses = [...btnClasses, 'active-adjacent-adjacent'];\n\n                    return (\n                        <button\n                            type=\"button\"\n                            role=\"tab\"\n                            tabIndex={pane.isActivePane ? undefined : -1}\n                            aria-selected={pane.isActivePane ? 'true' : 'false'}\n                            class={btnClasses.join(' ')}\n                            onClick={() => this.handleCarouselNavigationSelection(pane.index, true)}\n                            onKeyDown={event => this.onPaginationKeyDown(event)}\n                            aria-label={loc('tecton.element.carousel.itemDescription', [\n                                (pane.index + 1).toString(),\n                                this.paneCount.toString(),\n                            ])}\n                        ></button>\n                    );\n                })}\n            </div>\n        );\n    };\n\n    autoPlayBtn = () => {\n        return (\n            <q2-btn\n                type=\"button\"\n                hide-label\n                label={loc(\n                    this.autoPlayInProgress\n                        ? 'tecton.element.carousel.pausePlayLabel'\n                        : 'tecton.element.carousel.resumePlayLabel'\n                )}\n                class=\"q2-carousel-autoplay-control\"\n                onClick={this.handleAutoPlayPause}\n            >\n                <q2-icon type={this.autoPlayInProgress ? 'pause' : 'play'} />\n            </q2-btn>\n        );\n    };\n\n    prevNavBtn = () => {\n        const prevPaneAvailable = this.activePaneIndex > 0;\n\n        return (\n            <div>\n                <q2-btn\n                    type=\"button\"\n                    disabled={prevPaneAvailable ? undefined : true}\n                    class=\"q2-carousel-navigation-button q2-carousel-navigation-button-prev\"\n                    hide-label\n                    label={loc('tecton.element.carousel.previousItemLabel')}\n                    onClick={() => this.handleCarouselNavigationSelection(this.activePaneIndex - 1, true)}\n                >\n                    <q2-icon type=\"chevron-left\" />\n                </q2-btn>\n            </div>\n        );\n    };\n\n    nextNavBtn = () => {\n        const nextPaneAvailable = this.activePaneIndex < this.paneCount - 1;\n\n        return (\n            <div>\n                <q2-btn\n                    type=\"button\"\n                    disabled={nextPaneAvailable ? undefined : true}\n                    class=\"q2-carousel-navigation-button q2-carousel-navigation-button-next\"\n                    hide-label\n                    label={loc('tecton.element.carousel.nextItemLabel')}\n                    onClick={() => this.handleCarouselNavigationSelection(this.activePaneIndex + 1, true)}\n                >\n                    <q2-icon type=\"chevron-right\" />\n                </q2-btn>\n            </div>\n        );\n    };\n\n    insufficientPanesDisplay = () => {\n        let insufficientPanesContainerClasses = [\n            'insufficient-pane-feedback',\n            this.fullWidthPanes ? 'full-width-display' : 'content-peek-display',\n        ];\n        if (this.compactMode) insufficientPanesContainerClasses = [...insufficientPanesContainerClasses, 'compact'];\n\n        return (\n            <div class={insufficientPanesContainerClasses.join(' ')}>\n                <div class=\"insufficient-panes-icon-wrapper\">\n                    <q2-icon type=\"warning\" />\n                </div>\n                <p class=\"insufficient-panes-header\">\n                    <strong>{loc('tecton.element.carousel.insufficientPanesMessageHeader')}</strong>\n                </p>\n                <p class=\"insufficient-panes-body\">{loc('tecton.element.carousel.insufficientPanesMessageBody')}</p>\n            </div>\n        );\n    };\n}\n"]}

package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js

@@ -2,9 +2,17 @@ import { Host, h } from "@stencil/core";
 import { loc } from "../../utils/index";
 export class Q2CarouselPane {
     constructor() {
+        this.disabledElements = [];
         this.generatePaneClass = (currentIndex) => {
             return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;
         };
+        this.onMutationObserved = () => {
+            this.removePointerMoveListeners();
+            this.addPointerMoveListeners();
+        };
+        this.pointerMoveHandler = (event) => {
+            event.stopPropagation();
+        };
         this.paneClicked = event => {
             if (this.isActivePane)
                 return;
@@ -25,10 +33,35 @@ export class Q2CarouselPane {
     }
     componentDidLoad() {
         this.determineDisabledContent();
+        this.addPointerMoveListeners();
+        if (typeof MutationObserver !== 'undefined') {
+            const observer = new MutationObserver(this.onMutationObserved);
+            observer.observe(this.hostElement, { childList: true, subtree: true });
+            this.mutationObserver = observer;
+        }
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+            this.mutationObserver = null;
+        }
+        this.removePointerMoveListeners();
+    }
+    addPointerMoveListeners() {
+        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];
+        this.disabledElements = Array.from(this.hostElement.querySelectorAll(elementsToDisable.join(',')));
+        this.disabledElements.forEach(element => {
+            element.addEventListener('pointermove', this.pointerMoveHandler);
+        });
+    }
+    removePointerMoveListeners() {
+        this.disabledElements.forEach(element => {
+            element.removeEventListener('pointermove', this.pointerMoveHandler);
+        });
     }
     determineDisabledContent() {
         const { isActivePane } = this;
-        const focusableElements = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, a[href], button, [tabindex]:not([tabindex="-1"])');
+        const focusableElements = this.hostElement.querySelectorAll('q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex="-1"])');
         focusableElements.forEach(element => {
             const hasValidTabIndex = element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;
             if (hasValidTabIndex) {
@@ -39,9 +72,6 @@ export class Q2CarouselPane {
                     element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));
                     element.removeAttribute('data-q2-tabindex');
                 }
-                else if (element.tagName.startsWith('Q2-')) {
-                    element.tabIndex = undefined;
-                }
                 else {
                     element.removeAttribute('tabindex');
                 }
@@ -53,12 +83,12 @@ export class Q2CarouselPane {
     }
     render() {
         const { label } = this;
-        return (h(Host, { key: '3408598713aeea60c644c3ea0750f0dce2d40ca9', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
+        return (h(Host, { key: '44c83fb865d762361b67e040e5ac3e26f275ce64', class: this.generatePaneClass(this.currentPaneIndex), tabIndex: this.isActivePane ? 0 : -1, role: "group", "aria-roledescription": "slide", "aria-hidden": this.isActivePane ? undefined : 'true', "aria-label": label
                 ? loc(label)
                 : loc('tecton.element.carousel.itemDescription', [
                     (this.currentPaneIndex + 1).toString(),
                     (this.siblingCount || 0).toString(),
-                ]), onClick: this.paneClicked }, h("article", { key: 'a03a7125b958195b21d731f9cbeebdb1c8f9a0b3', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'c07f1d5fc75a902a6f9741e746279bad8c094a13' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '899089ed499de1df8506227389c9b54cfb742dfa', class: "q2-carousel-pane-main-content" }, h("slot", { key: '44e6c7e89b31bb55cf981f7867a4bb33806f4891' }))));
     }
     static get is() { return "q2-carousel-pane"; }
     static get originalStyleUrls() {

package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js.map

@@ -1 +1 @@
-{"version":3,"file":"q2-carousel-pane.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    /**\n     * Used by q2-carousel to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false }) index: number;\n\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false }) siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless\n     * @private\n     */\n    @Prop({ reflect: true }) slotFrameless: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        this.clickCarouselPane.emit({\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n        );\n\n        focusableElements.forEach(element => {\n            const hasValidTabIndex =\n                element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n            if (hasValidTabIndex) {\n                element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n            }\n\n            if (isActivePane) {\n                if (element.hasAttribute('data-q2-tabindex')) {\n                    element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n                    element.removeAttribute('data-q2-tabindex');\n                } else if (element.tagName.startsWith('Q2-')) {\n                    element.tabIndex = undefined;\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    render() {\n        const { label } = this;\n\n        return (\n            <Host\n                class={this.generatePaneClass(this.currentPaneIndex)}\n                tabIndex={this.isActivePane ? 0 : -1}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-hidden={this.isActivePane ? undefined : 'true'}\n                aria-label={\n                    label\n                        ? loc(label)\n                        : loc('tecton.element.carousel.itemDescription', [\n                              (this.currentPaneIndex + 1).toString(),\n                              (this.siblingCount || 0).toString(),\n                          ])\n                }\n                onClick={this.paneClicked}\n            >\n                <article class=\"q2-carousel-pane-main-content\">\n                    <slot></slot>\n                </article>\n            </Host>\n        );\n    }\n}\n"]}
+{"version":3,"file":"q2-carousel-pane.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/q2-carousel-pane.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Event, Element, Host, Watch, Prop, h, EventEmitter } from '@stencil/core';\nimport { loc } from 'src/utils';\n\n@Component({ tag: 'q2-carousel-pane', shadow: false, styleUrl: 'q2-carousel-pane.scss' })\nexport class Q2CarouselPane implements ComponentInterface {\n    /**\n     * Used by q2-carousel to determine the pane's index.\n     * @private\n     */\n    @Prop({ reflect: false }) index: number;\n\n    /**\n     * Used by q2-carousel to indicate how many panes are in the carousel.\n     * @private\n     */\n    @Prop({ reflect: false }) siblingCount: number;\n\n    /**\n     * Used by `q2-carousel` to indicate which pane is currently active.\n     * @private\n     */\n    @Prop({ reflect: true }) isActivePane: boolean;\n\n    /**\n     * Text used only as an `aria-label` for accessibility purposes.\n     * @localizable\n     */\n    @Prop({ reflect: true }) label: string;\n\n    /**\n     * Used by `q2-carousel` to indicate the pane should be frameless\n     * @private\n     */\n    @Prop({ reflect: true }) slotFrameless: boolean;\n\n    @Element() hostElement: HTMLElement;\n\n    disabledElements?: HTMLElement[] = [];\n    mutationObserver?: MutationObserver;\n\n    get currentPaneIndex() {\n        return Array.prototype.indexOf.call(this.hostElement.parentElement.children, this.hostElement);\n    }\n\n    componentDidLoad(): void {\n        this.determineDisabledContent();\n        this.addPointerMoveListeners();\n\n        if (typeof MutationObserver !== 'undefined') {\n            const observer = new MutationObserver(this.onMutationObserved);\n            observer.observe(this.hostElement, { childList: true, subtree: true });\n            this.mutationObserver = observer;\n        }\n    }\n\n    disconnectedCallback() {\n        if (this.mutationObserver) {\n            this.mutationObserver.disconnect();\n            this.mutationObserver = null;\n        }\n        this.removePointerMoveListeners();\n    }\n\n    generatePaneClass = (currentIndex: number) => {\n        return `q2-carousel-pane swiper-slide q2-carousel-pane-${currentIndex}`;\n    };\n\n    onMutationObserved = () => {\n        this.removePointerMoveListeners();\n        this.addPointerMoveListeners();\n    };\n\n    addPointerMoveListeners() {\n        const elementsToDisable = ['q2-dropdown', 'q2-dropdown-item'];\n        this.disabledElements = Array.from(this.hostElement.querySelectorAll<HTMLElement>(elementsToDisable.join(',')));\n        this.disabledElements.forEach(element => {\n            element.addEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    removePointerMoveListeners() {\n        this.disabledElements.forEach(element => {\n            element.removeEventListener('pointermove', this.pointerMoveHandler);\n        });\n    }\n\n    pointerMoveHandler = (event: PointerEvent) => {\n        event.stopPropagation();\n    };\n\n    /**\n     * Emitted when the pane is clicked.\n     */\n    @Event() clickCarouselPane: EventEmitter<{ paneIndex: number; pane: HTMLElement }>;\n\n    paneClicked = event => {\n        if (this.isActivePane) return;\n        event.preventDefault();\n        this.clickCarouselPane.emit({\n            paneIndex: this.index,\n            pane: this.hostElement,\n        });\n    };\n\n    @Watch('isActivePane')\n    determineDisabledContent() {\n        const { isActivePane } = this;\n        const focusableElements = this.hostElement.querySelectorAll<HTMLElement>(\n            'q2-btn, q2-dropdown, q2-item, q2-chart-donut, a[href], button, [tabindex]:not([tabindex=\"-1\"])'\n        );\n\n        focusableElements.forEach(element => {\n            const hasValidTabIndex =\n                element.hasAttribute('tabindex') && parseInt(element.getAttribute('tabindex')) >= 0;\n\n            if (hasValidTabIndex) {\n                element.setAttribute('data-q2-tabindex', `${element.tabIndex}`);\n            }\n\n            if (isActivePane) {\n                if (element.hasAttribute('data-q2-tabindex')) {\n                    element.tabIndex = parseInt(element.getAttribute('data-q2-tabindex'));\n                    element.removeAttribute('data-q2-tabindex');\n                } else {\n                    element.removeAttribute('tabindex');\n                }\n            } else {\n                element.tabIndex = -1;\n            }\n        });\n    }\n\n    render() {\n        const { label } = this;\n\n        return (\n            <Host\n                class={this.generatePaneClass(this.currentPaneIndex)}\n                tabIndex={this.isActivePane ? 0 : -1}\n                role=\"group\"\n                aria-roledescription=\"slide\"\n                aria-hidden={this.isActivePane ? undefined : 'true'}\n                aria-label={\n                    label\n                        ? loc(label)\n                        : loc('tecton.element.carousel.itemDescription', [\n                              (this.currentPaneIndex + 1).toString(),\n                              (this.siblingCount || 0).toString(),\n                          ])\n                }\n                onClick={this.paneClicked}\n            >\n                <article class=\"q2-carousel-pane-main-content\">\n                    <slot></slot>\n                </article>\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/components/q2-chart-donut/q2-chart-donut.css

@@ -77,6 +77,7 @@ button {
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
 }
 
 .chart-container {
@@ -149,4 +150,12 @@ q2-icon {
 
 .value {
   font-size: var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px));
+}
+
+figure {
+  margin: 0;
+}
+
+.legend {
+  margin-top: var(--tct-chart-donut-legend-margin-top, var(--app-scale-0x, 0));
 }

package/dist/collection/components/q2-chart-donut/q2-chart-donut.js

@@ -47,6 +47,9 @@ export class Q2ChartDonut {
                 case 'Escape':
                     this.clearSelection();
                     break;
+                case ' ':
+                    event.preventDefault();
+                    break;
                 default:
                     return;
             }
@@ -65,6 +68,45 @@ export class Q2ChartDonut {
             this.clearSelection();
             event.stopPropagation();
         };
+        this.onLegendClick = event => {
+            if (event.detail) {
+                const dataIndex = this.getDataIndexForId(event.detail.id);
+                this.selectedId = event.detail.id;
+                this.chart.dispatchAction({
+                    type: 'select',
+                    seriesIndex: 0,
+                    dataIndex,
+                });
+            }
+            else {
+                const dataIndex = this.getDataIndexForId(this.selectedId);
+                this.hoveredId = this.selectedId;
+                this.selectedId = null;
+                this.chart.dispatchAction({
+                    type: 'unselect',
+                    seriesIndex: 0,
+                    dataIndex,
+                });
+            }
+        };
+        this.onLegendMouseleave = event => {
+            const dataIndex = this.getDataIndexForId(event.detail.id);
+            this.hoveredId = this.selectedId;
+            this.chart.dispatchAction({
+                type: 'downplay',
+                seriesIndex: 0,
+                dataIndex,
+            });
+        };
+        this.onLegendMouseenter = event => {
+            const dataIndex = this.getDataIndexForId(event.detail.id);
+            this.hoveredId = event.detail.id;
+            this.chart.dispatchAction({
+                type: 'highlight',
+                seriesIndex: 0,
+                dataIndex,
+            });
+        };
         this.data = [];
         this.chartName = undefined;
         this.format = undefined;
@@ -75,9 +117,11 @@ export class Q2ChartDonut {
         this.outerRadius = '85%';
         this.selectedId = undefined;
         this.selectedOffset = 10;
+        this.showLegend = false;
         this.summaryIcon = undefined;
         this.summaryName = undefined;
         this.hoveredId = undefined;
+        this.legendData = undefined;
     }
     /// LifeCycle Hooks ///
     componentDidLoad() {
@@ -90,6 +134,7 @@ export class Q2ChartDonut {
         this.setupChartEvents(chart);
         this.checkSelectedId();
         this.chart = chart;
+        this.setLegendData();
         this.selectById(this.selectedId);
         overrideFocus(this.hostElement);
     }
@@ -112,6 +157,9 @@ export class Q2ChartDonut {
     get isMobile() {
         return isMobile();
     }
+    get legendHoveredId() {
+        return this.hoveredId === this.selectedId ? null : this.hoveredId;
+    }
     /// Helpers ///
     cacheComputedStyles() {
         this.chartContainerStyles = getComputedStyle(this.chartContainer);
@@ -184,6 +232,17 @@ export class Q2ChartDonut {
     getMinSliceSizeAsAngle() {
         return (parseFloat(this.minSliceSize) / 100) * 360;
     }
+    getDataIndexForId(id) {
+        return this.data.findIndex(item => item.id === id);
+    }
+    setLegendData() {
+        const chartColors = this.chart.getOption().series[0].color;
+        this.legendData = this.data.map((item, index) => {
+            if (!item.color)
+                item.color = chartColors[index];
+            return item;
+        });
+    }
     // Edit with caution. Echarts does not interpret events the same on mobile.
     setupChartEvents(chart) {
         if (!this.isMobile) {
@@ -209,6 +268,13 @@ export class Q2ChartDonut {
                 this.isInChangeEvent = false;
             }, 0);
         });
+        chart.on('finished', () => {
+            var _a;
+            const canvas = chart.getDom().querySelector('canvas');
+            if ((_a = canvas === null || canvas === void 0 ? void 0 : canvas.hasAttribute('aria-hidden')) !== null && _a !== void 0 ? _a : false)
+                return;
+            canvas.setAttribute('aria-hidden', 'true');
+        });
     }
     updateChart(chart) {
         return chart.setOption({
@@ -376,14 +442,14 @@ export class Q2ChartDonut {
                 'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
             }
             : null;
-        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, isClickable && (h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description'))), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
+        return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, h("div", { id: "center-card-description", class: "sr" }, loc('tecton.element.chartDonut.button.description')), h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), !!icon && (h("q2-icon", { type: icon, style: color && {
                 '--tct-icon-stroke-primary': color,
                 '--tct-icon-stroke-secondary': color,
                 color,
             } })), !!name && h("div", { class: "name" }, name), !!value && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: 'e5bec431c5bdc58d9ec1f89d374a7e24475f832b', onChange: this.onClickElsewhere }, h("div", { key: 'd1bf82b8746b7d9c000d1493a69f77306dbe61ed', class: "container" }, h("div", { key: 'f4e6e3fba1b86f91a429daaa70a7811ed192a503', ref: el => (this.chartContainer = el), class: "chart-container", role: "status", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
+        return (h("click-elsewhere", { key: '53c1a369526583b3260eecebc9d20a98d7eee02f', onChange: this.onClickElsewhere }, h("figure", { key: '3c995800e322483fc72d193643632a9b10394e87' }, h("div", { key: '13ec1654546b45801c8f92c7cdd317951408659e', class: "container" }, h("div", { key: '93b2989c435714e0ba8d93327483603c830d677b', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '850fa60a26cd2b39dc534260efa9634f82cfc220' }, h("q2-legend", { key: '7a8b918ad722cfefd05c28688819e0a41f39e11e', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     static get is() { return "q2-chart-donut"; }
     static get encapsulation() { return "shadow"; }
@@ -591,6 +657,27 @@ export class Q2ChartDonut {
                 "reflect": false,
                 "defaultValue": "10"
             },
+            "showLegend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "info",
+                            "text": "The legend is a list of the data points in the chart and their colors."
+                        }],
+                    "text": "Determines whether the legend is displayed."
+                },
+                "attribute": "show-legend",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "summaryIcon": {
                 "type": "string",
                 "mutable": false,
@@ -632,7 +719,8 @@ export class Q2ChartDonut {
     }
     static get states() {
         return {
-            "hoveredId": {}
+            "hoveredId": {},
+            "legendData": {}
         };
     }
     static get events() {