npm - q2-tecton-elements - Versions diffs - 1.66.2 → 1.67.0 - Mend

q2-tecton-elements 1.66.2 → 1.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (681) hide show

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

	@@ -1 +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 Method,\n} from '@stencil/core';\nimport Swiper from 'swiper';\nimport { Autoplay } from 'swiper/modules';\nimport type { SwiperOptions } from 'swiper/types';\nimport { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\nconst carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly /\nconst carouselDesktopBreakpoint = 1024; / viewport width where we show 3 full panes /\n\n/\n @name Carousel\n * @category Display\n * @summary Use for cycling through a series of content slides with swipe or button navigation.\n /\n@Component({ tag: 'q2-carousel', shadow: false, styleUrl: 'q2-carousel.scss' })\nexport class Q2Carousel implements ComponentInterface {\n // #region Own Properties\n\n carouselPaneWrapperElement: HTMLElement;\n carouselWrapper: HTMLElement;\n fullWidthDisplayOptions: SwiperOptions;\n guid = createGuid();\n mutationObserver: MutationObserver;\n swiper?: Swiper = null;\n universalCarouselOptions: SwiperOptions;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n /* Manages re-rendering the component when the `ariaLive` value changes. /\n @State()\n ariaLiveValue: 'polite' \| 'off' = 'polite';\n\n /* Manages re-rendering the autoPlay button when clicked. /\n @State()\n autoPlayInProgress: boolean = false;\n\n /* Manages re-rendering the component when resize event is consumed. /\n @State()\n carouselWrapperWidth: number = 0;\n\n /* Manages sizing the component based on changes in `carouselWrapperWidth`. /\n @State()\n compactMode: boolean = false;\n\n /* Manages re-rendering the component when panes are added or removed. /\n @State()\n currentPaneCount: number = this.paneCount;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true })\n ariaLabel: string;\n\n /* Enables the auto-play feature and starts the carousel without user input. /\n @Prop({ reflect: true })\n autoPlay: boolean = false;\n\n /* Display the carousel panes as frameless with no container or shadow. /\n @Prop({ reflect: true })\n framelessPanes: boolean = false;\n\n /* Display the carousel panes full-width rather than with peeking content. /\n @Prop({ reflect: true })\n fullWidthPanes: 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 })\n hidePagination: boolean = false;\n\n /* The currently displayed carousel pane. /\n @Prop({ reflect: true, mutable: true })\n index: number = 1;\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 })\n label: string = 'tecton.element.carousel.ariaLabel';\n\n /* Display navigation arrow buttons as another way to navigate the carousel. /\n @Prop({ reflect: true })\n showNavigationArrows: boolean = false;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the displayed carousel pane changes.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ index: number }>;\n\n /\n Emitted when the displayed carousel pane changes.\n /\n @Event()\n tctChange: EventEmitter<{ index: number }>;\n\n // #endregion\n // #region Component Lifecycle Events\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 componentWillLoad() {\n handleAriaLabel(this);\n this.updateCarouselPaneProps();\n window.addEventListener('resize', this.setCarouselWrapperWidth);\n\n if (!hasValidChildren(this.hostElement, 'q2-carousel-pane')) {\n filterChildren(this.hostElement, 'q2-carousel-pane');\n }\n\n this.universalCarouselOptions = {\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 realIndexChange: swiper => {\n this.index = swiper.realIndex + 1;\n this.updateCarouselPaneProps();\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 mirrorEmit(this, ['change', 'tctChange'], { index: swiper.realIndex + 1 });\n\n if (isPaginationFocused) {\n this.paginationBtns[swiper.realIndex].focus({ preventScroll: true });\n } else if (isCarouselFocused)\n (swiper.slides[swiper.realIndex] 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 this.fullWidthDisplayOptions = {\n slidesPerView: 1,\n spaceBetween: 100,\n ...this.universalCarouselOptions,\n };\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 // #endregion\n // #region Listeners\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?.realIndex];\n if (!isEventFromElement(event, this.hostElement) \|\| !activePane) return;\n (activePane as HTMLElement).focus({ preventScroll: true });\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Clicks and Focuses the `q2-carousel-pane` matching the specified index.\n * @testOnly\n /\n @Method()\n async selectCarouselPane(index: number) {\n if (index > this.paneCount) return;\n const actualIndex = index > 0 ? index - 1 : 0;\n const pane = this.paneArray[actualIndex];\n pane?.click();\n pane?.focus({ preventScroll: true });\n }\n\n /\n Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.\n \n @warning\n * If the `autoPlay` property is not enabled, this method does nothing.\n \n @testOnly\n */\n @Method()\n async togglePlayPause() {\n if (!this.autoPlay) return;\n const playPauseBtn = this.hostElement.querySelector('.q2-carousel-autoplay-control') as HTMLQ2BtnElement;\n playPauseBtn?.click();\n playPauseBtn?.focus();\n }\n\n // #endregion\n // #region Watchers\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('framelessPanes')\n framelessPanesChanged() {\n this.updateCarouselPaneProps();\n this.revampCarousel();\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('index')\n indexChanged(newIndex) {\n // this allows the carousel to be swiped programmatically via the index prop\n if (newIndex !== this.swiper?.realIndex + 1) {\n this.swiper?.slideTo(this.realIndex);\n }\n }\n\n // #endregion\n // #region Local Methods\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?.realIndex] ?? 0;\n return activeSlide instanceof HTMLElement ? activeSlide : null;\n }\n\n get insufficientPanes() {\n return this.paneCount < 1;\n }\n\n get paginationBtns(): NodeListOf<HTMLButtonElement> {\n return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');\n }\n\n get paneArray(): HTMLQ2CarouselPaneElement[] {\n return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane'));\n }\n\n get paneCount() {\n return this.paneArray.length;\n }\n\n get peekContentDisplayOptions(): SwiperOptions {\n return {\n slidesPerView: 2,\n spaceBetween: this.compactMode ? 0 : -10,\n centerInsufficientSlides: false,\n breakpoints: {\n [carouselDesktopBreakpoint]: {\n slidesPerView: 3,\n },\n },\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 useDynamicPaginationDots() {\n return this.paneCount && this.paneCount > 5;\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 handleAriaLive(activeAndFocused: boolean) {\n if (this.autoPlayInProgress && !activeAndFocused) {\n this.ariaLiveValue = 'off';\n } else {\n this.ariaLiveValue = 'polite';\n }\n }\n\n handleAutoPlayPause = (action: 'play' \| 'pause') => {\n if (!this.autoPlay) return;\n const autoplay = this.swiper?.autoplay;\n switch (action) {\n case 'play':\n autoplay.start();\n this.autoPlayInProgress = true;\n break;\n case 'pause':\n autoplay.stop();\n this.autoPlayInProgress = false;\n break;\n }\n };\n\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 keydownHandler = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n this.swiper?.slideNext();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.swiper?.slidePrev();\n break;\n\n case 'Home':\n event.preventDefault();\n this.swiper?.slideTo(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.swiper?.slideTo(this.paneCount - 1);\n break;\n }\n };\n\n onMutationObserved = () => {\n this.updateCarouselPaneProps();\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 tearDownCarousel = () => {\n this.swiper.destroy();\n this.swiper = null;\n };\n\n updateCarouselPaneProps = () => {\n const { framelessPanes, paneCount, paneArray } = this;\n\n paneArray.forEach((pane, index) => {\n pane.index = index;\n pane.siblingCount = paneCount;\n pane.isActivePane = index === this.realIndex;\n pane.slotFrameless = framelessPanes \|\| undefined;\n });\n this.currentPaneCount = paneCount;\n };\n\n // #endregion\n // #region Render Methods\n\n renderAutoPlayBtn = () => {\n const { autoPlayInProgress } = this;\n return (\n <q2-btn\n type=\"button\"\n hide-label\n label={loc(\n autoPlayInProgress\n ? 'tecton.element.carousel.pausePlayLabel'\n : 'tecton.element.carousel.resumePlayLabel'\n )}\n class=\"q2-carousel-autoplay-control\"\n onClick={() => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play')}\n >\n <q2-icon type={autoPlayInProgress ? 'pause' : 'play'} />\n </q2-btn>\n );\n };\n\n renderInsufficientPanesDisplay = () => {\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 renderNextNavBtn = () => {\n const nextPaneAvailable = this.realIndex < 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.swiper?.slideNext()}\n >\n <q2-icon type=\"chevron-right\" />\n </q2-btn>\n </div>\n );\n };\n\n renderPaginationArea = () => {\n const { useDynamicPaginationDots, realIndex, paneCount, paneArray } = this;\n let paginationContainerClasses = ['q2-carousel-pagination'];\n if (useDynamicPaginationDots) 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 {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 (useDynamicPaginationDots) btnClasses = [...btnClasses, 'dynamic'];\n\n const withinOneOfActive = pane.index === realIndex + 1 \|\| pane.index === realIndex - 1;\n if (withinOneOfActive) btnClasses = [...btnClasses, 'active-adjacent'];\n\n const withinTwoOfActive = pane.index === realIndex + 2 \|\| pane.index === realIndex - 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}`}\n class={btnClasses.join(' ')}\n onClick={() => this.swiper?.slideTo(pane.index)}\n onKeyDown={this.keydownHandler}\n aria-label={loc('tecton.element.carousel.itemDescription', [\n (pane.index + 1).toString(),\n paneCount.toString(),\n ])}\n ></button>\n );\n })}\n </div>\n );\n };\n\n renderPrevNavBtn = () => {\n const prevPaneAvailable = this.realIndex > 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.swiper?.slidePrev()}\n >\n <q2-icon type=\"chevron-left\" />\n </q2-btn>\n </div>\n );\n };\n\n render() {\n const {\n paneCount,\n fullWidthPanes,\n framelessPanes,\n compactMode,\n showNavigationArrows,\n insufficientPanes,\n autoPlay,\n hidePagination,\n ariaLiveValue,\n label,\n } = this;\n let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper'];\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 (compactMode) carouselContainerClasses = [...carouselContainerClasses, 'compact'];\n\n let paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];\n if (showNavigationArrows) paginationWrapperClasses = [...paginationWrapperClasses, 'evenly-space'];\n\n return (\n <Host\n id={`q2-carousel-${this.guid}`}\n class=\"q2-carousel-instance\"\n >\n {insufficientPanes ? (\n this.renderInsufficientPanesDisplay()\n ) : (\n <Fragment>\n {paneCount > 1 && (\n <div class={paginationWrapperClasses.join(' ')}>\n {showNavigationArrows && this.renderPrevNavBtn()}\n\n <div class=\"q2-carousel-control-center-tray\">\n {!hidePagination && this.renderPaginationArea()}\n\n {autoPlay && this.renderAutoPlayBtn()}\n </div>\n\n {showNavigationArrows && this.renderNextNavBtn()}\n </div>\n )}\n\n <section\n class={carouselContainerClasses.join(' ')}\n ref={el => (this.carouselWrapper = el)}\n aria-roledescription=\"carousel\"\n aria-label={loc(label)}\n >\n <div\n class=\"q2-carousel-swiper-wrapper swiper-wrapper\"\n ref={el => (this.carouselPaneWrapperElement = el)}\n aria-live={ariaLiveValue}\n onKeyDown={this.keydownHandler}\n >\n <slot></slot>\n </div>\n </section>\n </Fragment>\n )}\n </Host>\n );\n }\n\n // #endregion\n}\n"]}
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 Method,\n} from '@stencil/core';\nimport Swiper from 'swiper';\nimport { Autoplay } from 'swiper/modules';\nimport type { SwiperOptions } from 'swiper/types';\nimport { createGuid, loc, handleAriaLabel, overrideFocus, isEventFromElement } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { filterChildren, hasValidChildren } from '@/utils/component';\n\nconst carouselBreakpoint = 500; /* width in px of this host element where the layout starts to get unruly /\nconst carouselDesktopBreakpoint = 1024; / viewport width where we show 3 full panes /\n\n/\n @name Carousel\n * @category Display\n * @summary Use for cycling through a series of content slides with swipe or button navigation.\n /\n@Component({ tag: 'q2-carousel', shadow: false, styleUrl: 'q2-carousel.scss' })\nexport class Q2Carousel implements ComponentInterface {\n // #region Own Properties\n\n carouselPaneWrapperElement: HTMLElement;\n carouselWrapper: HTMLElement;\n fullWidthDisplayOptions: SwiperOptions;\n guid = createGuid();\n mutationObserver: MutationObserver;\n swiper?: Swiper = null;\n universalCarouselOptions: SwiperOptions;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region State Properties\n\n /* Manages re-rendering the component when the `ariaLive` value changes. /\n @State()\n ariaLiveValue: 'polite' \| 'off' = 'polite';\n\n /* Manages re-rendering the autoPlay button when clicked. /\n @State()\n autoPlayInProgress: boolean = false;\n\n /* Manages re-rendering the component when resize event is consumed. /\n @State()\n carouselWrapperWidth: number = 0;\n\n /* Manages sizing the component based on changes in `carouselWrapperWidth`. /\n @State()\n compactMode: boolean = false;\n\n /* Manages re-rendering the component when panes are added or removed. /\n @State()\n currentPaneCount: number = this.paneCount;\n\n // #endregion\n // #region Public Property API\n\n /* @deprecated /\n @Prop({ reflect: true })\n ariaLabel: string;\n\n /* Position to show the navigation arrows\n * `float`: vertically centered and float over the carousel pane.\n * `bottom`: bottom area around pagination indicator, the arrows at far left/right edges.\n * `hug`: bottom area around pagination indicator and wraps the pagination indicator.\n /\n @Prop({ reflect: true })\n arrowPosition: 'bottom' \| 'hug' \| 'float' \| undefined;\n\n /* Enables the auto-play feature and starts the carousel without user input. /\n @Prop({ reflect: true })\n autoPlay: boolean = false;\n\n /* Display the carousel panes as frameless with no container or shadow. /\n @Prop({ reflect: true })\n framelessPanes: boolean = false;\n\n /* Display the carousel panes full-width rather than with peeking content. /\n @Prop({ reflect: true })\n fullWidthPanes: 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 })\n hidePagination: boolean = false;\n\n /* The currently displayed carousel pane. /\n @Prop({ reflect: true, mutable: true })\n index: number = 1;\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 })\n label: string = 'tecton.element.carousel.ariaLabel';\n\n /* Display navigation arrow buttons as another way to navigate the carousel. /\n @Prop({ reflect: true })\n showNavigationArrows: boolean = false;\n\n // #endregion\n // #region Events\n\n /\n Emitted when the displayed carousel pane changes.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{ index: number }>;\n\n /\n Emitted when the displayed carousel pane changes.\n /\n @Event()\n tctChange: EventEmitter<{ index: number }>;\n\n // #endregion\n // #region Component Lifecycle Events\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 componentWillLoad() {\n handleAriaLabel(this);\n this.updateCarouselPaneProps();\n window.addEventListener('resize', this.setCarouselWrapperWidth);\n\n if (!hasValidChildren(this.hostElement, 'q2-carousel-pane')) {\n filterChildren(this.hostElement, 'q2-carousel-pane');\n }\n\n this.universalCarouselOptions = {\n centeredSlides: true,\n loop: 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 realIndexChange: swiper => {\n this.index = swiper.realIndex + 1;\n this.updateCarouselPaneProps();\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 mirrorEmit(this, ['change', 'tctChange'], { index: swiper.realIndex + 1 });\n\n if (isPaginationFocused) {\n this.paginationBtns[swiper.realIndex].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 this.fullWidthDisplayOptions = {\n slidesPerView: 1,\n spaceBetween: 100,\n ...this.universalCarouselOptions,\n };\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 // #endregion\n // #region Listeners\n\n @Listen('clickCarouselPane')\n carouselPaneClicked(event) {\n this.swiper?.slideToLoop(event.detail.paneIndex);\n }\n\n @Listen('focus')\n delegateFocus(event: FocusEvent) {\n const activePane = this.swiper?.slides[this.swiper?.realIndex];\n if (!isEventFromElement(event, this.hostElement) \|\| !activePane) return;\n (activePane as HTMLElement).focus({ preventScroll: true });\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n Clicks and Focuses the `q2-carousel-pane` matching the specified index.\n * @testOnly\n /\n @Method()\n async selectCarouselPane(index: number) {\n if (index > this.paneCount) return;\n const actualIndex = index > 0 ? index - 1 : 0;\n this.swiper?.slideToLoop(actualIndex);\n const activeSlide = this.swiper?.slides[this.swiper?.activeIndex] as HTMLElement;\n activeSlide?.focus({ preventScroll: true });\n }\n\n /\n Clicks and Focuses the `<button>` that controls playing or pausing the auto-play feature of the carousel.\n \n @warning\n * If the `autoPlay` property is not enabled, this method does nothing.\n \n @testOnly\n */\n @Method()\n async togglePlayPause() {\n if (!this.autoPlay) return;\n const playPauseBtn = this.hostElement.querySelector('.q2-carousel-autoplay-control') as HTMLButtonElement;\n playPauseBtn?.click();\n playPauseBtn?.focus();\n }\n\n // #endregion\n // #region Watchers\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('framelessPanes')\n framelessPanesChanged() {\n this.updateCarouselPaneProps();\n this.revampCarousel();\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('index')\n indexChanged(newIndex) {\n // this allows the carousel to be swiped programmatically via the index prop\n if (newIndex !== this.swiper?.realIndex + 1) {\n this.swiper?.slideToLoop(this.realIndex);\n // this.swiper?.slideTo(this.realIndex);\n }\n }\n\n // #endregion\n // #region Local Methods\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 insufficientPanes() {\n return this.paneCount < 1;\n }\n\n get paginationBtns(): NodeListOf<HTMLButtonElement> {\n return this.hostElement.querySelectorAll('.q2-carousel-page-indicator');\n }\n\n get paneArray(): HTMLQ2CarouselPaneElement[] {\n return Array.from(this.hostElement.querySelectorAll('q2-carousel-pane'));\n }\n\n get paneCount() {\n return this.paneArray.length;\n }\n\n get peekContentDisplayOptions(): SwiperOptions {\n return {\n slidesPerView: 2,\n spaceBetween: this.compactMode ? 0 : 10,\n centerInsufficientSlides: false,\n breakpoints: {\n [carouselDesktopBreakpoint]: {\n slidesPerView: 2,\n },\n },\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 useDynamicPaginationDots() {\n return this.paneCount && this.paneCount > 5;\n }\n\n configureCarousel = (carouselWrapper, carouselOptions) => {\n // Disconnect observer to prevent infinite loop from Swiper's internal DOM changes (e.g. loop mode)\n this.mutationObserver?.disconnect();\n\n if (!!this.swiper) {\n this.tearDownCarousel();\n }\n this.autoPlayInProgress = this.autoPlay;\n\n // Save the target index before Swiper init — the realIndexChange callback\n // fires during construction and may overwrite this.index\n const targetIndex = this.realIndex;\n new Swiper(carouselWrapper, carouselOptions);\n this.swiper?.slideToLoop(targetIndex, 0);\n // Ensure popover listener is on the active pane after initial positioning\n this.activePane?.addEventListener('popoverStateChanged', this.handlePopovers);\n if (this.autoPlayInProgress) this.swiper?.autoplay.start();\n\n // Re-observe after Swiper's DOM changes have settled\n requestAnimationFrame(() => {\n this.mutationObserver?.observe(this.hostElement, { childList: true, subtree: true });\n });\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 handleAutoPlayPause = (action: 'play' \| 'pause') => {\n if (!this.autoPlay) return;\n const autoplay = this.swiper?.autoplay;\n switch (action) {\n case 'play':\n autoplay.start();\n this.autoPlayInProgress = true;\n break;\n case 'pause':\n autoplay.stop();\n this.autoPlayInProgress = false;\n break;\n }\n };\n\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 keydownHandler = (event: KeyboardEvent) => {\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n this.swiper?.slideNext();\n break;\n\n case 'ArrowLeft':\n event.preventDefault();\n this.swiper?.slidePrev();\n break;\n\n case 'Home':\n event.preventDefault();\n this.swiper?.slideToLoop(0);\n break;\n\n case 'End':\n event.preventDefault();\n this.swiper?.slideToLoop(this.paneCount - 1);\n break;\n }\n };\n\n onMutationObserved = () => {\n if (this.paneCount !== this.currentPaneCount) {\n this.updateCarouselPaneProps();\n this.configureCarousel(this.carouselWrapper, this.activeCarouselOptions);\n }\n };\n\n setCarouselWrapperWidth = () => {\n if (this.insufficientPanes) return;\n this.carouselWrapperWidth = this.carouselWrapper.clientWidth;\n };\n\n tearDownCarousel = () => {\n this.swiper.destroy();\n this.swiper = null;\n };\n\n updateCarouselPaneProps = () => {\n const { framelessPanes, paneCount, paneArray } = this;\n\n paneArray.forEach((pane, domIndex) => {\n const swiperIndex = pane.getAttribute('data-swiper-slide-index');\n const index = swiperIndex !== null ? parseInt(swiperIndex, 10) : domIndex;\n pane.index = index;\n pane.siblingCount = paneCount;\n pane.isActivePane = index === this.realIndex;\n pane.slotFrameless = framelessPanes \|\| undefined;\n });\n this.currentPaneCount = paneCount;\n };\n\n // #endregion\n // #region Render Methods\n\n renderAutoPlayBtn = () => {\n const { autoPlayInProgress } = this;\n return (\n <button\n type=\"button\"\n class=\"q2-carousel-autoplay-control\"\n aria-label={loc(\n autoPlayInProgress\n ? 'tecton.element.carousel.pausePlayLabel'\n : 'tecton.element.carousel.resumePlayLabel'\n )}\n onClick={() => this.handleAutoPlayPause(autoPlayInProgress ? 'pause' : 'play')}\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 24 24\"\n fill=\"currentColor\"\n class=\"autoplay-icon\"\n aria-hidden=\"true\"\n >\n {autoPlayInProgress ? (\n <path d=\"M7.667 3.667h-2c-.737 0-1.334.597-1.334 1.333v14c0 .736.597 1.333 1.334 1.333h2C8.403 20.333 9 19.736 9 19V5c0-.736-.597-1.333-1.333-1.333Zm10.666 0h-2C15.597 3.667 15 4.264 15 5v14c0 .736.597 1.333 1.333 1.333h2c.737 0 1.334-.597 1.334-1.333V5c0-.736-.597-1.333-1.334-1.333Z\" />\n ) : (\n <path d=\"m6.868 3.837 12.656 7.008a1.316 1.316 0 0 1 0 2.31L6.868 20.163c-.892.494-1.993-.144-1.993-1.155V4.992c0-1.01 1.1-1.65 1.993-1.155Z\" />\n )}\n </svg>\n </button>\n );\n };\n\n renderInsufficientPanesDisplay = () => {\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 renderNextNavBtn = () => {\n return (\n <div class=\"next-btn\">\n <button\n type=\"button\"\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-next\"\n aria-label={loc('tecton.element.carousel.nextItemLabel')}\n onClick={() => this.swiper?.slideNext()}\n >\n <q2-icon type=\"arrow-right\" />\n </button>\n </div>\n );\n };\n\n renderPaginationArea = () => {\n const { useDynamicPaginationDots, realIndex, paneCount } = this;\n const paginationContainerClasses = ['q2-carousel-pagination', 'autoplay'];\n if (useDynamicPaginationDots) paginationContainerClasses.push('dynamic');\n if (this.autoPlayInProgress) paginationContainerClasses.push('autoplay-on');\n\n return (\n <div\n class={paginationContainerClasses.join(' ')}\n role=\"tablist\"\n aria-label={loc('tecton.element.carousel.tabWrapperLabel')}\n >\n {Array.from({ length: paneCount }, (_, i) => i).map(index => {\n const isActive = index === realIndex;\n let btnClasses = ['q2-carousel-page-indicator', `q2-carousel-page-indicator-${index}`];\n if (isActive) btnClasses = [...btnClasses, 'active-page'];\n if (useDynamicPaginationDots) btnClasses = [...btnClasses, 'dynamic'];\n\n const withinOneOfActive = index === realIndex + 1 \|\| index === realIndex - 1;\n if (withinOneOfActive) btnClasses = [...btnClasses, 'active-adjacent'];\n\n const withinTwoOfActive = index === realIndex + 2 \|\| index === realIndex - 2;\n if (withinTwoOfActive) btnClasses = [...btnClasses, 'active-adjacent-adjacent'];\n\n return (\n <button\n type=\"button\"\n role=\"tab\"\n tabIndex={isActive ? undefined : -1}\n aria-selected={`${isActive}`}\n class={btnClasses.join(' ')}\n onClick={() => this.swiper?.slideToLoop(index)}\n onKeyDown={this.keydownHandler}\n aria-label={loc('tecton.element.carousel.itemDescription', [\n (index + 1).toString(),\n paneCount.toString(),\n ])}\n ></button>\n );\n })}\n </div>\n );\n };\n\n renderPrevNavBtn = () => {\n return (\n <div class=\"prev-btn\">\n <button\n type=\"button\"\n class=\"q2-carousel-navigation-button q2-carousel-navigation-button-prev\"\n aria-label={loc('tecton.element.carousel.previousItemLabel')}\n onClick={() => this.swiper?.slidePrev()}\n >\n <q2-icon type=\"arrow-left\" />\n </button>\n </div>\n );\n };\n\n render() {\n const {\n paneCount,\n fullWidthPanes,\n framelessPanes,\n compactMode,\n showNavigationArrows,\n arrowPosition = 'bottom',\n insufficientPanes,\n autoPlay,\n hidePagination,\n ariaLiveValue,\n label,\n } = this;\n let carouselContainerClasses = ['q2-carousel-swiper-container', 'swiper'];\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 (compactMode) carouselContainerClasses = [...carouselContainerClasses, 'compact'];\n\n const paginationWrapperClasses = ['q2-carousel-pagination-navigation-wrapper'];\n if (showNavigationArrows && arrowPosition === 'bottom') paginationWrapperClasses.push('evenly-space');\n if (showNavigationArrows && arrowPosition === 'hug') paginationWrapperClasses.push('center-space');\n\n return (\n <Host\n id={`q2-carousel-${this.guid}`}\n class=\"q2-carousel-instance\"\n >\n {insufficientPanes ? (\n this.renderInsufficientPanesDisplay()\n ) : (\n <Fragment>\n {paneCount > 1 && (\n <div class={paginationWrapperClasses.join(' ')}>\n {showNavigationArrows &&\n ['bottom', 'hug'].includes(arrowPosition) &&\n this.renderPrevNavBtn()}\n\n <div class=\"q2-carousel-control-center-tray\">\n {!hidePagination && this.renderPaginationArea()}\n {autoPlay && this.renderAutoPlayBtn()}\n </div>\n\n {showNavigationArrows &&\n ['bottom', 'hug'].includes(arrowPosition) &&\n this.renderNextNavBtn()}\n </div>\n )}\n\n <section\n class={carouselContainerClasses.join(' ')}\n ref={el => (this.carouselWrapper = el)}\n aria-roledescription=\"carousel\"\n aria-label={loc(label)}\n >\n <div\n class=\"q2-carousel-swiper-wrapper swiper-wrapper\"\n ref={el => (this.carouselPaneWrapperElement = el)}\n aria-live={ariaLiveValue}\n onKeyDown={this.keydownHandler}\n >\n <slot></slot>\n </div>\n {showNavigationArrows && arrowPosition === 'float' && (\n <div class=\"q2-carousel-floating-arrow-wrapper\">\n {this.renderPrevNavBtn()}\n {this.renderNextNavBtn()}\n </div>\n )}\n </section>\n </Fragment>\n )}\n </Host>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.css CHANGED Viewed

@@ -85,19 +85,13 @@ q2-carousel-pane.q2-carousel-pane {
   --comp-carousel-shadow: var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14));
   cursor: grab;
 }
-q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) * {
-  cursor: pointer;
-}
 q2-carousel-pane.q2-carousel-pane:not([is-active-pane]) .q2-carousel-pane-main-content {
   background: var(--tct-carousel-pane-inactive-background, var(--tct-carousel-background, var(--app-base, #ffffff)));
   box-shadow: var(--tct-carousel-pane-inactive-box-shadow, var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow)));
 }
-q2-carousel-pane.q2-carousel-pane:focus-visible {
-  box-shadow: none;
-}
 q2-carousel-pane.q2-carousel-pane:focus-visible .q2-carousel-pane-main-content {
   outline: none;
-  box-shadow: var(--const-double-focus-ring);
+  box-shadow: var(--tct-carousel-pane-focus-visible-box-shadow, --const-double-focus-ring);
 }
 q2-carousel-pane.q2-carousel-pane button {
   border: 0;
@@ -110,7 +104,7 @@ q2-carousel-pane.q2-carousel-pane button:hover {
   opacity: 0.7;
 }
 q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {
-  box-shadow: var(--tct-carousel-pane-box-shadow, --comp-carousel-shadow);
+  box-shadow: var(--tct-carousel-pane-box-shadow, var(--comp-carousel-shadow));
   transition: var(--comp-carousel-pane-tween);
   background: var(--tct-carousel-background, var(--tct-carousel-background-color, var(--t-carousel-background-color, var(--tct-white, var(--app-white, #ffffff)))));
   border: var(--tct-carousel-pane-border-width, var(--t-carousel-pane-border-width, 0px)) solid var(--tct-carousel-pane-border-color, var(--t-carousel-pane-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));
@@ -118,9 +112,6 @@ q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content {
   padding: var(--tct-carousel-pane-padding, var(--t-carousel-pane-padding, 7px));
   height: var(--tct-carousel-pane-height, var(--t-carousel-pane-height, 10em));
 }
-q2-carousel-pane.q2-carousel-pane .q2-carousel-pane-main-content:hover {
-  box-shadow: var(--const-double-focus-ring), var(--comp-carousel-shadow);
-}
 q2-carousel-pane.q2-carousel-pane[slot-frameless]:not([slot-frameless=false]) .q2-carousel-pane-main-content {
   box-shadow: none;
   border: 0;

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

@@ -97,12 +97,12 @@ export class Q2CarouselPane {
     // #region Render Methods
     render() {
         const { label } = this;
-        return (h(Host, { key: 'c321264b11e25ec101280695fd2f869b92a18e26', 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: '156420cbdaf48d8d1e6e14c05e745ff0df308a2a', 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: 'c506d1bdbbd434483a9447cce1a898b540cac6f2', class: "q2-carousel-pane-main-content" }, h("slot", { key: '406d356278c375ff44431c9df2cad1acac933be2' }))));
+                ]), onClick: this.paneClicked }, h("article", { key: '2f61bdfa9d9e4413941d0ca2f1edc9fc2cd48e8e', class: "q2-carousel-pane-main-content" }, h("slot", { key: 'd498b8a73ba1a668bb768891d37b2303db976012' }))));
     }
     static get is() { return "q2-carousel-pane"; }
     static get originalStyleUrls() {

package/dist/collection/components/q2-chart-area/q2-chart-area.js CHANGED Viewed

@@ -85,6 +85,8 @@ export class Q2ChartArea {
     // #endregion
     // #region Watchers
     propsUpdates() {
+        if (!this.chart)
+            return;
         this.updateChart(this.chart);
     }
     // #endregion
@@ -250,7 +252,7 @@ export class Q2ChartArea {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'cd60bed2147fd67a0781b37271205c3dec484328', class: "container" }, h("div", { key: 'd0832b1fccf4e94e395d456ff6f314ebb5560cd1', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: '81f8432837d66f500da8403dbc25727c44635a03', class: "container" }, h("div", { key: 'fcd3f4aa43d89467591140cbe211c7d5e35316fa', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
     }
     static get is() { return "q2-chart-area"; }
     static get encapsulation() { return "shadow"; }
@@ -353,13 +355,13 @@ export class Q2ChartArea {
                 "attribute": "data",
                 "mutable": false,
                 "complexType": {
-                    "original": "IChartData[]",
-                    "resolved": "IChartData[]",
+                    "original": "ChartData[]",
+                    "resolved": "ChartData[]",
                     "references": {
-                        "IChartData": {
+                        "ChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::ChartData"
                         }
                     }
                 },
@@ -785,13 +787,13 @@ export class Q2ChartArea {
                     "text": "Emitted when a data point is clicked."
                 },
                 "complexType": {
-                    "original": "{\n        index: number;\n        data: IChartData;\n    }",
-                    "resolved": "{ index: number; data: IChartData; }",
+                    "original": "{\n        index: number;\n        data: ChartData;\n    }",
+                    "resolved": "{ index: number; data: ChartData; }",
                     "references": {
-                        "IChartData": {
+                        "ChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::ChartData"
                         }
                     }
                 }
@@ -806,13 +808,13 @@ export class Q2ChartArea {
                     "text": "Emitted when a data point is clicked."
                 },
                 "complexType": {
-                    "original": "{\n        index: number;\n        data: IChartData;\n    }",
-                    "resolved": "{ index: number; data: IChartData; }",
+                    "original": "{\n        index: number;\n        data: ChartData;\n    }",
+                    "resolved": "{ index: number; data: ChartData; }",
                     "references": {
-                        "IChartData": {
+                        "ChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::ChartData"
                         }
                     }
                 }

package/dist/collection/components/q2-chart-area/q2-chart-area.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-area.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-area/q2-chart-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event, Method } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { LineChart, LineSeriesOption } from 'echarts/charts';\nimport { UniversalTransition } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\n\nimport type { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| LineSeriesOption \| TitleComponentOption>;\n\n/*\n @name Area Chart\n * @category Data Visualization\n * @summary Use for showing trends over time with filled areas under lines.\n /\n@Component({ tag: 'q2-chart-area', shadow: true, styleUrl: 'q2-chart-area.scss' })\nexport class Q2ChartArea implements ComponentInterface {\n // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n alignChartName: 'left' \| 'right' \| 'center';\n\n /\n Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n areaColor: string;\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true })\n chartSubTitle: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IChartData[] = [];\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true })\n dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /* Controls the direction or viibility of grid lines on the chart. /\n @Prop({ reflect: true })\n gridLines: 'horizontal' \| 'vertical' \| 'off';\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideNameAxisLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n hideValueAxisLabels: boolean = false;\n\n /\n Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n lineColor: string;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataValues: boolean = false;\n\n /\n Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n pointerLineColor: string;\n\n /* Controls the style of the vertical poiner line. /\n @Prop({ reflect: true })\n pointerLineStyle: 'solid' \| 'dashed';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n showChartName: boolean = false;\n\n /* Controls the visibility of a value label when a data point is shown on the chart. /\n @Prop({ reflect: true })\n showDatapointLabels: boolean = false;\n\n /\n Controls making the area fill color into a gradient.\n * The gradient starts at the top with the `areaColor` value, and fades to white.\n /\n @Prop({ reflect: true })\n showGradient: boolean = false;\n\n /* Controls the xAxis max value. /\n @Prop({ reflect: true })\n xMax: number;\n\n /* Controls the xAxis min value. /\n @Prop({ reflect: true })\n xMin: number;\n\n /* Controls the yAxis max value. /\n @Prop({ reflect: true })\n yMax: number;\n\n /* Controls the yAxis min value. /\n @Prop({ reflect: true })\n yMin: number;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a data point is clicked.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n index: number;\n data: IChartData;\n }>;\n\n /\n Emitted when a data point is clicked.\n /\n @Event()\n tctChange: EventEmitter<{\n index: number;\n data: IChartData;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // CRITICAL: Dispose eCharts instance to prevent memory leaks\n // eCharts holds references to canvas, event listeners, and animation frames\n if (this.chart) {\n this.chart.dispose();\n this.chart = null;\n }\n\n // Remove window resize listener\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clear cached style references that hold DOM references (Safari memory management)\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Clear DOM and event listener references\n this.chartContainer = null;\n this.resizeEventListener = null;\n }\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to fire change event on hover on a point.\n \n @testOnly\n */\n @Method()\n async hoverDataPoint(index: number) {\n mirrorEmit(this, ['change', 'tctChange'], {\n index: index,\n data: this.data[index],\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('data')\n @Watch('alignChartName')\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('lineColor')\n @Watch('pointerLineColor')\n @Watch('pointerLineStyle')\n @Watch('areaColor')\n @Watch('dataNamesOverflow')\n @Watch('dataNamesWidth')\n @Watch('format')\n @Watch('formatModifier')\n @Watch('hideNameAxisLabels')\n @Watch('hideValueAxisLabels')\n @Watch('offsetDataNames')\n @Watch('offsetDataValues')\n @Watch('showChartName')\n @Watch('showDatapointLabels')\n @Watch('showGradient')\n @Watch('gridLines')\n @Watch('gridPadding')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getAreaFill() {\n if (this.showGradient) {\n return {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [\n {\n offset: 0,\n color: this.getColor(this.areaColor),\n },\n {\n offset: 1,\n color: 'white',\n },\n ],\n global: false,\n };\n }\n return this.getColor(this.areaColor);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n return primaryColor;\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n chart.on('finished', () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n });\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n splitLine: {\n show: this.gridLines === 'horizontal' \|\| !this.gridLines,\n },\n min: this.yMin,\n max: this.yMax,\n };\n\n const categoryAxis = {\n type: 'category',\n boundaryGap: false,\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n show: !this.hideNameAxisLabels,\n },\n axisLine: {\n show: !this.hideNameAxisLabels,\n },\n axisTick: {\n show: !this.hideNameAxisLabels,\n },\n axisPointer: {\n show: true,\n type: 'line',\n label: {\n show: false,\n formatter: (params: any) => {\n const dataIndex = params.seriesData[0].dataIndex;\n mirrorEmit(this, ['change', 'tctChange'], {\n index: dataIndex,\n data: this.data[dataIndex],\n });\n },\n },\n lineStyle: {\n color: this.getColor(this.pointerLineColor \|\| 'var(--t-gray-10)'),\n type: this.pointerLineStyle \|\| 'solid',\n width: 1.5,\n },\n z: 1,\n },\n splitLine: {\n show: this.gridLines === 'vertical',\n },\n min: this.xMin,\n max: this.xMax,\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n ...this.gridPadding,\n },\n xAxis: categoryAxis,\n yAxis: valueAxis,\n series: [\n {\n data: this.data.map(datum => datum.value \|\| 0),\n id: 'area',\n type: 'line',\n lineStyle: {\n color: this.getColor(this.lineColor),\n },\n itemStyle: {\n color: this.getColor(this.lineColor),\n },\n areaStyle: {\n color: this.getAreaFill(),\n },\n symbolSize: 10,\n showSymbol: false,\n label: {\n show: this.showDatapointLabels,\n position: 'right',\n formatter: (params: any) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n },\n ],\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"areaChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-chart-area.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-area/q2-chart-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch, EventEmitter, Event, Method } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { LineChart, LineSeriesOption } from 'echarts/charts';\nimport { UniversalTransition } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport mirrorEmit from '@/utils/mirror-emit';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\n\nimport type { ChartData } from 'q2-tecton-common/lib/types/elements';\n\necharts.use([AriaComponent, LineChart, CanvasRenderer, UniversalTransition, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| LineSeriesOption \| TitleComponentOption>;\n\n/*\n @name Area Chart\n * @category Data Visualization\n * @summary Use for showing trends over time with filled areas under lines.\n /\n@Component({ tag: 'q2-chart-area', shadow: true, styleUrl: 'q2-chart-area.scss' })\nexport class Q2ChartArea implements ComponentInterface {\n // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n alignChartName: 'left' \| 'right' \| 'center';\n\n /\n Controls area fill color of chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n areaColor: string;\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true })\n chartSubTitle: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: ChartData[] = [];\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true })\n dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /* Controls the direction or viibility of grid lines on the chart. /\n @Prop({ reflect: true })\n gridLines: 'horizontal' \| 'vertical' \| 'off';\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideNameAxisLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n hideValueAxisLabels: boolean = false;\n\n /\n Controls color of the data line on the chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n lineColor: string;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataValues: boolean = false;\n\n /\n Controls color of vertical pointer on a line chart. Accepts variables, hex codes, and CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n pointerLineColor: string;\n\n /* Controls the style of the vertical poiner line. /\n @Prop({ reflect: true })\n pointerLineStyle: 'solid' \| 'dashed';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n showChartName: boolean = false;\n\n /* Controls the visibility of a value label when a data point is shown on the chart. /\n @Prop({ reflect: true })\n showDatapointLabels: boolean = false;\n\n /\n Controls making the area fill color into a gradient.\n * The gradient starts at the top with the `areaColor` value, and fades to white.\n /\n @Prop({ reflect: true })\n showGradient: boolean = false;\n\n /* Controls the xAxis max value. /\n @Prop({ reflect: true })\n xMax: number;\n\n /* Controls the xAxis min value. /\n @Prop({ reflect: true })\n xMin: number;\n\n /* Controls the yAxis max value. /\n @Prop({ reflect: true })\n yMax: number;\n\n /* Controls the yAxis min value. /\n @Prop({ reflect: true })\n yMin: number;\n\n // #endregion\n // #region Events\n\n /\n Emitted when a data point is clicked.\n * @deprecated Use 'tctChange' instead\n /\n @Event()\n change: EventEmitter<{\n index: number;\n data: ChartData;\n }>;\n\n /\n Emitted when a data point is clicked.\n /\n @Event()\n tctChange: EventEmitter<{\n index: number;\n data: ChartData;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // CRITICAL: Dispose eCharts instance to prevent memory leaks\n // eCharts holds references to canvas, event listeners, and animation frames\n if (this.chart) {\n this.chart.dispose();\n this.chart = null;\n }\n\n // Remove window resize listener\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clear cached style references that hold DOM references (Safari memory management)\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Clear DOM and event listener references\n this.chartContainer = null;\n this.resizeEventListener = null;\n }\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Public Methods API\n\n /\n A method to fire change event on hover on a point.\n \n @testOnly\n */\n @Method()\n async hoverDataPoint(index: number) {\n mirrorEmit(this, ['change', 'tctChange'], {\n index: index,\n data: this.data[index],\n });\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('data')\n @Watch('alignChartName')\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('lineColor')\n @Watch('pointerLineColor')\n @Watch('pointerLineStyle')\n @Watch('areaColor')\n @Watch('dataNamesOverflow')\n @Watch('dataNamesWidth')\n @Watch('format')\n @Watch('formatModifier')\n @Watch('hideNameAxisLabels')\n @Watch('hideValueAxisLabels')\n @Watch('offsetDataNames')\n @Watch('offsetDataValues')\n @Watch('showChartName')\n @Watch('showDatapointLabels')\n @Watch('showGradient')\n @Watch('gridLines')\n @Watch('gridPadding')\n propsUpdates() {\n if (!this.chart) return;\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getAreaFill() {\n if (this.showGradient) {\n return {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [\n {\n offset: 0,\n color: this.getColor(this.areaColor),\n },\n {\n offset: 1,\n color: 'white',\n },\n ],\n global: false,\n };\n }\n return this.getColor(this.areaColor);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n return primaryColor;\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n chart.on('finished', () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n });\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n splitLine: {\n show: this.gridLines === 'horizontal' \|\| !this.gridLines,\n },\n min: this.yMin,\n max: this.yMax,\n };\n\n const categoryAxis = {\n type: 'category',\n boundaryGap: false,\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n show: !this.hideNameAxisLabels,\n },\n axisLine: {\n show: !this.hideNameAxisLabels,\n },\n axisTick: {\n show: !this.hideNameAxisLabels,\n },\n axisPointer: {\n show: true,\n type: 'line',\n label: {\n show: false,\n formatter: (params: any) => {\n const dataIndex = params.seriesData[0].dataIndex;\n mirrorEmit(this, ['change', 'tctChange'], {\n index: dataIndex,\n data: this.data[dataIndex],\n });\n },\n },\n lineStyle: {\n color: this.getColor(this.pointerLineColor \|\| 'var(--t-gray-10)'),\n type: this.pointerLineStyle \|\| 'solid',\n width: 1.5,\n },\n z: 1,\n },\n splitLine: {\n show: this.gridLines === 'vertical',\n },\n min: this.xMin,\n max: this.xMax,\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n ...this.gridPadding,\n },\n xAxis: categoryAxis,\n yAxis: valueAxis,\n series: [\n {\n data: this.data.map(datum => datum.value \|\| 0),\n id: 'area',\n type: 'line',\n lineStyle: {\n color: this.getColor(this.lineColor),\n },\n itemStyle: {\n color: this.getColor(this.lineColor),\n },\n areaStyle: {\n color: this.getAreaFill(),\n },\n symbolSize: 10,\n showSymbol: false,\n label: {\n show: this.showDatapointLabels,\n position: 'right',\n formatter: (params: any) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n },\n ],\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"areaChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"]}

package/dist/collection/components/q2-chart-bar/q2-chart-bar.js CHANGED Viewed

@@ -72,6 +72,8 @@ export class Q2ChartBar {
     // #endregion
     // #region Watchers
     propsUpdates() {
+        if (!this.chart)
+            return;
         this.updateChart(this.chart);
     }
     // #endregion
@@ -187,7 +189,7 @@ export class Q2ChartBar {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '5e51e9cda9a970424f0d21219784b85194b8e844', class: "container" }, h("div", { key: '65340b646221f4d5408387799aab8af54a992a1e', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: 'bea029d1b2ab1650f3a8dd60f64bd5640752632b', class: "container" }, h("div", { key: '1a240fcde7691730648aa698a3cb57b98cb1f95f', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
     }
     static get is() { return "q2-chart-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -290,13 +292,13 @@ export class Q2ChartBar {
                 "attribute": "data",
                 "mutable": false,
                 "complexType": {
-                    "original": "IChartData[]",
-                    "resolved": "IChartData[]",
+                    "original": "ChartData[]",
+                    "resolved": "ChartData[]",
                     "references": {
-                        "IChartData": {
+                        "ChartData": {
                             "location": "import",
-                            "path": "q2-tecton-common/lib/types/element-types",
-                            "id": "../q2-tecton-common/lib/types/element-types.d.ts::IChartData"
+                            "path": "q2-tecton-common/lib/types/elements",
+                            "id": "../q2-tecton-common/lib/types/elements.d.ts::ChartData"
                         }
                     }
                 },

package/dist/collection/components/q2-chart-bar/q2-chart-bar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-bar.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-bar/q2-chart-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport type { CallbackDataParams } from 'echarts/types/dist/shared';\nimport type { IChartData } from 'q2-tecton-common/lib/types/element-types';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| BarSeriesOption \| TitleComponentOption>;\n\n/*\n @name Bar Chart\n * @category Data Visualization\n * @summary Use for comparing values across categories with horizontal or vertical bars.\n /\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n chartFinishedListener: () => void;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n alignChartName: 'left' \| 'right' \| 'center';\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true })\n chartSubTitle: string;\n\n /\n Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n * Accept variables, hex codes, an CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n color: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: IChartData[] = [];\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true })\n dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n hideValueAxisLabels: boolean = false;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataValues: boolean = false;\n\n /\n Controls which axes are the value and name axes.\n * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n /\n @Prop({ reflect: true })\n orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n showChartName: boolean = false;\n\n /\n By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n * When set to `true`, values on the bar will be re-sorted in descending order.\n */\n @Prop({ reflect: true })\n sort: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // Remove event listeners\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clean up chart instance\n if (this.chart) {\n if (this.chartFinishedListener) {\n this.chart.off('finished', this.chartFinishedListener);\n }\n this.chart.dispose();\n this.chart = null;\n }\n\n // Null out cached computed styles to allow GC\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Null out DOM references\n this.chartContainer = null;\n this.resizeEventListener = null;\n this.chartFinishedListener = null;\n }\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('color')\n @Watch('hideBarLabels')\n @Watch('showChartName')\n @Watch('alignChartName')\n @Watch('orientation')\n @Watch('format')\n @Watch('sort')\n @Watch('data')\n @Watch('offsetDataNames')\n @Watch('hideValueAxisLabels')\n @Watch('formatModifier')\n @Watch('dataNamesOverflow')\n @Watch('gridPadding')\n propsUpdates() {\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n if (seriesColor) return seriesColor;\n if (isValidColor(this.color)) return this.color;\n return primaryColor;\n }\n\n processData(data: IChartData[]) {\n return data.map(datum => {\n return {\n value: datum.value \|\| 0,\n itemStyle: {\n color: this.getColor(datum.color),\n },\n };\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n this.chartFinishedListener = () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n };\n chart.on('finished', this.chartFinishedListener);\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n interval: 0,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n },\n axisTick: {\n alignWithLabel: this.offsetDataNames,\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n ...this.gridPadding,\n },\n xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n series: [\n {\n data: this.processData(this.data),\n id: 'bar',\n type: 'bar',\n label: {\n show: !this.hideBarLabels,\n position: 'top',\n fontWeight: 'bold',\n formatter: (params: CallbackDataParams) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n realtimeSort: this.sort,\n },\n ],\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"]}
1	+ {"version":3,"file":"q2-chart-bar.js","sourceRoot":"","sources":["../../../../src/components/q2-chart-bar/q2-chart-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport * as echarts from 'echarts/core';\nimport {\n TitleComponent,\n TitleComponentOption,\n AriaComponent,\n AriaComponentOption,\n GridComponent,\n} from 'echarts/components';\nimport { BarChart, BarSeriesOption } from 'echarts/charts';\nimport { LabelLayout } from 'echarts/features';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { loc, overrideFocus } from 'src/utils';\nimport { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport type { CallbackDataParams } from 'echarts/types/dist/shared';\nimport type { ChartData } from 'q2-tecton-common/lib/types/elements';\n\necharts.use([AriaComponent, BarChart, CanvasRenderer, LabelLayout, GridComponent, TitleComponent]);\n\ntype EChartsOption = echarts.ComposeOption<AriaComponentOption \| BarSeriesOption \| TitleComponentOption>;\n\n/*\n @name Bar Chart\n * @category Data Visualization\n * @summary Use for comparing values across categories with horizontal or vertical bars.\n /\n@Component({ tag: 'q2-chart-bar', shadow: true, styleUrl: 'q2-chart-bar.scss' })\nexport class Q2ChartBar implements ComponentInterface {\n // #region Own Properties\n\n chart: echarts.ECharts;\n chartContainer: HTMLDivElement;\n chartContainerStyles: CSSStyleDeclaration;\n chartFinishedListener: () => void;\n hostElementStyles: CSSStyleDeclaration;\n resizeEventListener: EventListener;\n\n // #endregion\n // #region Host HTML Element\n\n @Element()\n hostElement: HTMLElement;\n\n // #endregion\n // #region Public Property API\n\n /* Controls alignment of the chart name when its visible. /\n @Prop({ reflect: true })\n alignChartName: 'left' \| 'right' \| 'center';\n\n /\n The title of the chart. We recommend always including this for accessibility purposes.\n \n It is hidden by default, but can be made visible with the `showChartName` variable.\n * @localizable\n /\n @Prop({ reflect: true })\n chartName: string;\n\n /* A subtitile to the chart name. Often used to provide a brief description of what the data represents. /\n @Prop({ reflect: true })\n chartSubTitle: string;\n\n /\n Controls the color of all bars in the chart. Can be overridden at the individual data point level.\n * Accept variables, hex codes, an CSS color names.\n \n Examples:\n * @snippet\n * element.areaColor = \"#ff0000\";\n * element.areaColor = \"papayawhip\";\n * element.areaColor = \"var(--t-accent-1)\";\n /\n @Prop({ reflect: true })\n color: string;\n\n /* An array of objects that contain the data to be displayed. /\n @Prop()\n data: ChartData[] = [];\n\n /\n Allows control of how labels on the name axis will be handled if the text length is wider than the available space.\n * Values will ellipsize if the truncate option is used.\n /\n @Prop({ reflect: true })\n dataNamesOverflow: 'break' \| 'truncate';\n\n /\n Sets width available for labels on the name axis.\n * It can be used in coordination with `dataNamesOverflow` to control where the label text breaks or truncates.\n /\n @Prop({ reflect: true })\n dataNamesWidth: number;\n\n /* Controls whether values on the value axis are shown as numbers or as currency. /\n @Prop({ reflect: true })\n format: 'currency' \| 'default';\n\n /\n Can be used in coordination with the currency format property to control decimal handling.\n * Accepts `Ndec` where N is a number. (e.g. `2dec`)\n /\n @Prop({ reflect: true })\n formatModifier: string;\n\n /\n Sets chart padding around the grid.\n * Each value in the object will be interpreted as pixels.\n \n Example:\n * @snippet\n * chart.gridPadding = { left: 10, right: 10, top: 20, bottom: 20 };\n /\n @Prop()\n gridPadding: { left?: number; right?: number; top?: number; bottom?: number };\n\n /* Controls visibility of labels on the name axis. /\n @Prop({ reflect: true })\n hideBarLabels: boolean = false;\n\n /* Controls visibility of labels on the value axis. /\n @Prop({ reflect: true })\n hideValueAxisLabels: boolean = false;\n\n /\n Controls the position of text on the names axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataNames: boolean = false;\n\n /\n Controls the position of text on the values axis by centering the text to the bar at a 45° angle.\n * Can be used when space is limited or with longer name labels.\n /\n @Prop({ reflect: true })\n offsetDataValues: boolean = false;\n\n /\n Controls which axes are the value and name axes.\n * When `vertical`, values are on the y-axis and names are on the x-axis, with bars shown vertically on the chart.\n * When `horizontal`, names are on the y-axis and values are on the x-axis, with bars shown horizontally on the chart.\n /\n @Prop({ reflect: true })\n orientation: 'vertical' \| 'horizontal';\n\n /* Controls the visibility of the chart name at the top of the chart. /\n @Prop({ reflect: true })\n showChartName: boolean = false;\n\n /\n By default, the sorting of the bars on the chart is controlled by the order the values are in the data array.\n * When set to `true`, values on the bar will be re-sorted in descending order.\n */\n @Prop({ reflect: true })\n sort: boolean = false;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n // Remove event listeners\n window.removeEventListener('resize', this.resizeEventListener);\n\n // Clean up chart instance\n if (this.chart) {\n if (this.chartFinishedListener) {\n this.chart.off('finished', this.chartFinishedListener);\n }\n this.chart.dispose();\n this.chart = null;\n }\n\n // Null out cached computed styles to allow GC\n this.chartContainerStyles = null;\n this.hostElementStyles = null;\n\n // Null out DOM references\n this.chartContainer = null;\n this.resizeEventListener = null;\n this.chartFinishedListener = null;\n }\n\n componentDidLoad() {\n const chart = echarts.init(this.chartContainer);\n\n this.chart = chart;\n\n this.resizeEventListener = () => this.resizeChart();\n window.addEventListener('resize', this.resizeEventListener);\n\n this.cacheComputedStyles();\n this.updateChart(chart);\n this.setupChartEvents(chart);\n\n overrideFocus(this.hostElement);\n }\n\n // #endregion\n // #region Watchers\n\n @Watch('chartName')\n @Watch('chartSubTitle')\n @Watch('color')\n @Watch('hideBarLabels')\n @Watch('showChartName')\n @Watch('alignChartName')\n @Watch('orientation')\n @Watch('format')\n @Watch('sort')\n @Watch('data')\n @Watch('offsetDataNames')\n @Watch('hideValueAxisLabels')\n @Watch('formatModifier')\n @Watch('dataNamesOverflow')\n @Watch('gridPadding')\n propsUpdates() {\n if (!this.chart) return;\n this.updateChart(this.chart);\n }\n\n // #endregion\n // #region Local Methods\n\n cacheComputedStyles() {\n this.chartContainerStyles = getComputedStyle(this.chartContainer);\n this.hostElementStyles = getComputedStyle(this.hostElement);\n }\n\n getColor(color: string) {\n const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);\n const seriesColor = getCSSProperty(this.color, this.chartContainerStyles, this.hostElementStyles);\n const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);\n if (cssColorProp) return cssColorProp;\n if (isValidColor(color)) return color;\n if (seriesColor) return seriesColor;\n if (isValidColor(this.color)) return this.color;\n return primaryColor;\n }\n\n processData(data: ChartData[]) {\n return data.map(datum => {\n return {\n value: datum.value \|\| 0,\n itemStyle: {\n color: this.getColor(datum.color),\n },\n };\n });\n }\n\n resizeChart() {\n this.chart.resize();\n }\n\n setupChartEvents(chart: echarts.ECharts) {\n this.chartFinishedListener = () => {\n const canvas = chart.getDom().querySelector('canvas');\n if (canvas?.hasAttribute('aria-hidden') ?? false) return;\n canvas.setAttribute('aria-hidden', 'true');\n };\n chart.on('finished', this.chartFinishedListener);\n }\n\n updateChart(chart: echarts.ECharts) {\n const decimals = this.formatModifier?.includes('dec') ? this.formatModifier.replace('dec', '') : 0;\n\n const valueAxis = {\n type: 'value',\n axisLabel: {\n formatter: (value: number) =>\n formatValue(value, {\n type: this.format,\n decimals,\n }),\n rotate: this.offsetDataValues ? 45 : 0,\n margin: this.offsetDataValues ? 15 : 8,\n show: !this.hideValueAxisLabels,\n },\n };\n\n const categoryAxis = {\n type: 'category',\n data: this.data.map(datum => loc(datum.name) \|\| ''),\n axisLabel: {\n rotate: this.offsetDataNames ? 45 : 0,\n margin: this.offsetDataNames ? 15 : 8,\n interval: 0,\n width: this.dataNamesWidth \|\| 50,\n overflow: this.dataNamesOverflow \|\| 'none',\n truncate: 'ellipsis',\n },\n axisTick: {\n alignWithLabel: this.offsetDataNames,\n },\n };\n\n return chart.setOption<EChartsOption>({\n aria: {\n enabled: true,\n },\n title: {\n text: loc(this.chartName),\n show: this.showChartName,\n left: this.alignChartName,\n subtext: this.chartSubTitle,\n },\n grid: {\n containLabel: true,\n ...this.gridPadding,\n },\n xAxis: this.orientation === 'horizontal' ? valueAxis : categoryAxis,\n yAxis: this.orientation === 'horizontal' ? categoryAxis : valueAxis,\n series: [\n {\n data: this.processData(this.data),\n id: 'bar',\n type: 'bar',\n label: {\n show: !this.hideBarLabels,\n position: 'top',\n fontWeight: 'bold',\n formatter: (params: CallbackDataParams) => {\n return formatValue(params.value as number, {\n type: this.format,\n decimals,\n });\n },\n },\n realtimeSort: this.sort,\n },\n ],\n });\n }\n\n // #endregion\n // #region Render Methods\n\n render() {\n return (\n <div class=\"container\">\n <div\n ref={el => (this.chartContainer = el)}\n class=\"chart-container\"\n role=\"img\"\n test-id=\"barChartContainer\"\n ></div>\n </div>\n );\n }\n\n // #endregion\n}\n"]}

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

@@ -96,6 +96,9 @@ button {
   --comp-color-11: var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));
   --comp-color-12: var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)));
 }
+.chart-container:focus-visible {
+  box-shadow: var(--tct-chart-donut-focus-visible-box-shadow, var(--const-double-focus-ring));
+}
 button {
   --comp-button-padding: var(--tct-chart-donut-button-padding, var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px))) 0);
@@ -130,12 +133,12 @@ button:focus-visible {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  border-radius: 50%;
 }
 .center-card:is(button) {
   cursor: pointer;
   background: var(--tct-chart-donut-button-background, transparent);
   border: 0;
-  border-radius: 50%;
 }
 .center-card:is(button):hover {
   background: var(--tct-chart-donut-button-hover-background, transparent);