npm - q2-tecton-elements - Versions diffs - 1.53.0 → 1.53.2 - Mend

q2-tecton-elements 1.53.0 → 1.53.2

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 (442) hide show

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-carousel-pane-test.e2e.js","sourceRoot":"","sources":["~~../../../../~~src/components/q2-carousel-pane/test/q2-carousel-pane-test.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEvD,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAC9B,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE;QACnB,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;YAC3B,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;gBACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC;oBACrB,IAAI,EAAE;;;;;qBAKL;iBACJ,CAAC,CAAC;gBAEH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;gBAClE,MAAM,oBAAoB,GAAG,OAAO,CAAC,gBAAgB,EAAE,CAAC;gBACxD,MAAM,CAAC,CAAC,MAAM,oBAAoB,CAAC,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;gBAC5D,MAAM,CAAC,CAAC,MAAM,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBAC1E,MAAM,CAAC,CAAC,MAAM,oBAAoB,CAAC,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC9D,MAAM,CAAC,CAAC,MAAM,oBAAoB,CAAC,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YAC7D,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE;QAChC,EAAE,CAAC,mCAAmC,EAAE,KAAK,IAAI,EAAE;YAC/C,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC;gBACrB,IAAI,EAAE;;;;;;;;iBAQL;aACJ,CAAC,CAAC;YAEH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC5C,MAAM,qBAAqB,GAAG,MAAM,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAEtE,MAAM,aAAa,CAAC,IAAI,EAAE,CAAC,aAAa,CAAC,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAC7E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;YAExD,MAAM,aAAa,CAAC,IAAI,EAAE,kBAAkB,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAChF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;QAC5D,CAAC,CAAC,CAAC;QAEH,EAAE,CAAC,2DAA2D,EAAE,KAAK,IAAI,EAAE;YACvE,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC;gBACrB,IAAI,EAAE;;;;;iBAKL;aACJ,CAAC,CAAC;YAEH,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC5C,MAAM,qBAAqB,GAAG,MAAM,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;YAEtE,MAAM,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,OAAoB,EAAE,EAAE;gBAClD,OAAO,CAAC,SAAS,GAAG;;;;iBAInB,CAAC;YACN,CAAC,CAAC,CAAC;YACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAE5B,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;YAChD,MAAM,CAAC,QAAQ,CAAC,CAAC,UAAU,EAAE,CAAC;YAE9B,MAAM,aAAa,CAAC,IAAI,EAAE,CAAC,aAAa,CAAC,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YAC7E,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;YAE5B,MAAM,CAAC,qBAAqB,CAAC,CAAC,GAAG,CAAC,mBAAmB,EAAE,CAAC;QAC5D,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { setup, dispatchEvent } from '@/utils/helpers';\n\ndescribe('q2-carousel-pane', () => {\n describe('Props', () => {\n describe('slotFrameless', () => {\n it('applies the necessary styles when true', async () => {\n const page = await setup({\n html: `\n <q2-carousel-pane slot-frameless>\n <h2>Hello</h2>\n <p>World</p>\n </q2-carousel-pane>\n `,\n });\n\n const content = await page.find('.q2-carousel-pane-main-content');\n const contentComputedStyle = content.getComputedStyle();\n expect((await contentComputedStyle).boxShadow).toBe('none');\n expect((await contentComputedStyle).border).toBe('0px none rgb(0, 0, 0)');\n expect((await contentComputedStyle).borderRadius).toBe('0px');\n expect((await contentComputedStyle).padding).toBe('0px');\n });\n });\n });\n\n describe('disablePointerMove', () => {\n it('disables pointer events when true', async () => {\n const page = await setup({\n html: `\n <q2-carousel-pane>\n <div id=\"wrapper\">\n <q2-dropdown type=\"icon\" icon=\"options\">\n <q2-dropdown-item>Item 1</q2-dropdown-item>\n </q2-dropdown>\n </div>\n </q2-carousel-pane>\n `,\n });\n\n const wrapper = await page.find('#wrapper');\n const wrapperPointerMoveSpy = await wrapper.spyOnEvent('pointermove');\n\n await dispatchEvent(page, ['q2-dropdown'], 'pointermove', { bubbles: true });\n await page.waitForChanges();\n\n expect(wrapperPointerMoveSpy).not.toHaveReceivedEvent();\n\n await dispatchEvent(page, 'q2-dropdown-item', 'pointermove', { bubbles: true });\n await page.waitForChanges();\n\n expect(wrapperPointerMoveSpy).not.toHaveReceivedEvent();\n });\n\n it('updates the pointermove listeners when the DOM is updated', async () => {\n const page = await setup({\n html: `\n <q2-carousel-pane disable-pointer-move>\n <div id=\"wrapper\">\n </div>\n </q2-carousel-pane>\n `,\n });\n\n const wrapper = await page.find('#wrapper');\n const wrapperPointerMoveSpy = await wrapper.spyOnEvent('pointermove');\n\n await page.$eval('#wrapper', (element: HTMLElement) => {\n element.innerHTML = `\n <q2-dropdown type=\"icon\" icon=\"options\">\n <q2-dropdown-item>Item 1</q2-dropdown-item>\n </q2-dropdown>\n `;\n });\n await page.waitForChanges();\n\n const dropdown = await page.find('q2-dropdown');\n expect(dropdown).toBeTruthy();\n\n await dispatchEvent(page, ['q2-dropdown'], 'pointermove', { bubbles: true });\n await page.waitForChanges();\n\n expect(wrapperPointerMoveSpy).not.toHaveReceivedEvent();\n });\n });\n});\n"]}
1	+ {"version":3,"file":"q2-carousel-pane-test.e2e.js","sourceRoot":"","sources":["../../../../../src/components/q2-carousel-pane/test/q2-carousel-pane-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { setup, dispatchEvent } from '@/utils/helpers';\n\ndescribe('q2-carousel-pane', () => {\n describe('Props', () => {\n describe('slotFrameless', () => {\n it('applies the necessary styles when true', async () => {\n const page = await setup({\n html: `\n <q2-carousel-pane slot-frameless>\n <h2>Hello</h2>\n <p>World</p>\n </q2-carousel-pane>\n `,\n });\n\n const content = await page.find('.q2-carousel-pane-main-content');\n const contentComputedStyle = content.getComputedStyle();\n expect((await contentComputedStyle).boxShadow).toBe('none');\n expect((await contentComputedStyle).border).toBe('0px none rgb(0, 0, 0)');\n expect((await contentComputedStyle).borderRadius).toBe('0px');\n expect((await contentComputedStyle).padding).toBe('0px');\n });\n });\n });\n\n describe('disablePointerMove', () => {\n it('disables pointer events when true', async () => {\n const page = await setup({\n html: `\n <q2-carousel-pane>\n <div id=\"wrapper\">\n <q2-dropdown type=\"icon\" icon=\"options\">\n <q2-dropdown-item>Item 1</q2-dropdown-item>\n </q2-dropdown>\n </div>\n </q2-carousel-pane>\n `,\n });\n\n const wrapper = await page.find('#wrapper');\n const wrapperPointerMoveSpy = await wrapper.spyOnEvent('pointermove');\n\n await dispatchEvent(page, ['q2-dropdown'], 'pointermove', { bubbles: true });\n await page.waitForChanges();\n\n expect(wrapperPointerMoveSpy).not.toHaveReceivedEvent();\n\n await dispatchEvent(page, 'q2-dropdown-item', 'pointermove', { bubbles: true });\n await page.waitForChanges();\n\n expect(wrapperPointerMoveSpy).not.toHaveReceivedEvent();\n });\n\n it('updates the pointermove listeners when the DOM is updated', async () => {\n const page = await setup({\n html: `\n <q2-carousel-pane disable-pointer-move>\n <div id=\"wrapper\">\n </div>\n </q2-carousel-pane>\n `,\n });\n\n const wrapper = await page.find('#wrapper');\n const wrapperPointerMoveSpy = await wrapper.spyOnEvent('pointermove');\n\n await page.$eval('#wrapper', (element: HTMLElement) => {\n element.innerHTML = `\n <q2-dropdown type=\"icon\" icon=\"options\">\n <q2-dropdown-item>Item 1</q2-dropdown-item>\n </q2-dropdown>\n `;\n });\n await page.waitForChanges();\n\n const dropdown = await page.find('q2-dropdown');\n expect(dropdown).toBeTruthy();\n\n await dispatchEvent(page, ['q2-dropdown'], 'pointermove', { bubbles: true });\n await page.waitForChanges();\n\n expect(wrapperPointerMoveSpy).not.toHaveReceivedEvent();\n });\n });\n});\n"]}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-carousel-pane-test.spec.js","sourceRoot":"","sources":["../../../../src/components/q2-carousel-pane/test/q2-carousel-pane-test.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { Q2CarouselPane } from 'src/components/q2-carousel-pane/q2-carousel-pane';\n\ndescribe('q2-carousel-pane', () => {\n let carouselPane: Q2CarouselPane;\n let specPage: SpecPage;\n\n describe('Props', () => {\n describe('label', () => {\n describe('when not provided', () => {\n it('provides a default aria-label', async () => {\n specPage = await newSpecPage({\n components: [Q2CarouselPane],\n html: `\n <q2-carousel-pane>\n <h1>Tony Stark</h1>\n </q2-carousel-pane>\n `,\n });\n expect(specPage.root).toEqualAttribute('aria-label', 'tecton.element.carousel.itemDescription');\n });\n });\n\n describe('when provided', () => {\n it('set the label as the aria-label', async () => {\n specPage = await newSpecPage({\n components: [Q2CarouselPane],\n html: `\n <q2-carousel-pane label=\"My Pane\">\n <h1>Tony Stark</h1>\n </q2-carousel-pane>\n `,\n });\n expect(specPage.root).toEqualAttribute('aria-label', 'My Pane');\n });\n });\n });\n\n describe('isActivePane', () => {\n let link: HTMLElement;\n let button: HTMLElement;\n let buttonWithTabIndex: HTMLElement;\n\n describe('when not provided', () => {\n beforeEach(async () => {\n specPage = await newSpecPage({\n components: [Q2CarouselPane],\n html: `\n <q2-carousel-pane>\n <h2>Hello</h2>\n <p>World</p>\n <a href=\"#\">Link</a>\n <button id=\"simple\">Button 1</button>\n <button id=\"with-tabindex\" tabindex=\"2\">Button 2</button>\n </q2-carousel-pane>\n `,\n });\n\n link = specPage.root.querySelector('a[href]');\n button = specPage.root.querySelector('button#simple');\n buttonWithTabIndex = specPage.root.querySelector('button#with-tabindex');\n });\n\n it('sets tabindex of focusable elements to -1', async () => {\n expect(link).toEqualAttribute('tabindex', '-1');\n expect(button).toEqualAttribute('tabindex', '-1');\n expect(button).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).toEqualAttribute('tabindex', '-1');\n expect(buttonWithTabIndex).toEqualAttribute('data-q2-tabindex', '2');\n });\n\n it('updates tabindex when isActivePane changes', async () => {\n await specPage.root.setAttribute('is-active-pane', 'true');\n\n expect(link).not.toHaveAttribute('tabindex');\n expect(button).not.toHaveAttribute('tabindex');\n expect(button).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).toEqualAttribute('tabindex', '2');\n });\n });\n\n describe('when provided', () => {\n beforeEach(async () => {\n specPage = await newSpecPage({\n components: [Q2CarouselPane],\n html: `\n <q2-carousel-pane is-active-pane>\n <h2>Hello</h2>\n <p>World</p>\n <a href=\"#\">Link</a>\n <button id=\"simple\">Button 1</button>\n <button id=\"with-tabindex\" tabindex=\"2\">Button 2</button>\n </q2-carousel-pane>\n `,\n });\n\n link = specPage.root.querySelector('a[href]');\n button = specPage.root.querySelector('button#simple');\n buttonWithTabIndex = specPage.root.querySelector('button#with-tabindex');\n });\n\n it('sets tabindex of focusable elements', async () => {\n expect(link).not.toHaveAttribute('tabindex');\n expect(button).not.toHaveAttribute('tabindex');\n expect(button).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).toEqualAttribute('tabindex', '2');\n });\n\n it('updates tabindex when isActivePane changes', async () => {\n await specPage.root.setAttribute('is-active-pane', 'false');\n expect(link).toEqualAttribute('tabindex', '-1');\n expect(button).toEqualAttribute('tabindex', '-1');\n expect(button).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).toEqualAttribute('tabindex', '-1');\n expect(buttonWithTabIndex).toEqualAttribute('data-q2-tabindex', '2');\n });\n });\n });\n });\n\n describe('generatePaneClass', () => {\n it('returns the correct class', async () => {\n carouselPane = new Q2CarouselPane();\n expect(carouselPane.generatePaneClass(5)).toBe('q2-carousel-pane swiper-slide q2-carousel-pane-5');\n });\n });\n});\n"]}
1	+ {"version":3,"file":"q2-carousel-pane-test.spec.js","sourceRoot":"","sources":["../../../../../src/components/q2-carousel-pane/test/q2-carousel-pane-test.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { Q2CarouselPane } from 'src/components/q2-carousel-pane/q2-carousel-pane';\n\ndescribe('q2-carousel-pane', () => {\n let carouselPane: Q2CarouselPane;\n let specPage: SpecPage;\n\n describe('Props', () => {\n describe('label', () => {\n describe('when not provided', () => {\n it('provides a default aria-label', async () => {\n specPage = await newSpecPage({\n components: [Q2CarouselPane],\n html: `\n <q2-carousel-pane>\n <h1>Tony Stark</h1>\n </q2-carousel-pane>\n `,\n });\n expect(specPage.root).toEqualAttribute('aria-label', 'tecton.element.carousel.itemDescription');\n });\n });\n\n describe('when provided', () => {\n it('set the label as the aria-label', async () => {\n specPage = await newSpecPage({\n components: [Q2CarouselPane],\n html: `\n <q2-carousel-pane label=\"My Pane\">\n <h1>Tony Stark</h1>\n </q2-carousel-pane>\n `,\n });\n expect(specPage.root).toEqualAttribute('aria-label', 'My Pane');\n });\n });\n });\n\n describe('isActivePane', () => {\n let link: HTMLElement;\n let button: HTMLElement;\n let buttonWithTabIndex: HTMLElement;\n\n describe('when not provided', () => {\n beforeEach(async () => {\n specPage = await newSpecPage({\n components: [Q2CarouselPane],\n html: `\n <q2-carousel-pane>\n <h2>Hello</h2>\n <p>World</p>\n <a href=\"#\">Link</a>\n <button id=\"simple\">Button 1</button>\n <button id=\"with-tabindex\" tabindex=\"2\">Button 2</button>\n </q2-carousel-pane>\n `,\n });\n\n link = specPage.root.querySelector('a[href]');\n button = specPage.root.querySelector('button#simple');\n buttonWithTabIndex = specPage.root.querySelector('button#with-tabindex');\n });\n\n it('sets tabindex of focusable elements to -1', async () => {\n expect(link).toEqualAttribute('tabindex', '-1');\n expect(button).toEqualAttribute('tabindex', '-1');\n expect(button).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).toEqualAttribute('tabindex', '-1');\n expect(buttonWithTabIndex).toEqualAttribute('data-q2-tabindex', '2');\n });\n\n it('updates tabindex when isActivePane changes', async () => {\n await specPage.root.setAttribute('is-active-pane', 'true');\n\n expect(link).not.toHaveAttribute('tabindex');\n expect(button).not.toHaveAttribute('tabindex');\n expect(button).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).toEqualAttribute('tabindex', '2');\n });\n });\n\n describe('when provided', () => {\n beforeEach(async () => {\n specPage = await newSpecPage({\n components: [Q2CarouselPane],\n html: `\n <q2-carousel-pane is-active-pane>\n <h2>Hello</h2>\n <p>World</p>\n <a href=\"#\">Link</a>\n <button id=\"simple\">Button 1</button>\n <button id=\"with-tabindex\" tabindex=\"2\">Button 2</button>\n </q2-carousel-pane>\n `,\n });\n\n link = specPage.root.querySelector('a[href]');\n button = specPage.root.querySelector('button#simple');\n buttonWithTabIndex = specPage.root.querySelector('button#with-tabindex');\n });\n\n it('sets tabindex of focusable elements', async () => {\n expect(link).not.toHaveAttribute('tabindex');\n expect(button).not.toHaveAttribute('tabindex');\n expect(button).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).toEqualAttribute('tabindex', '2');\n });\n\n it('updates tabindex when isActivePane changes', async () => {\n await specPage.root.setAttribute('is-active-pane', 'false');\n expect(link).toEqualAttribute('tabindex', '-1');\n expect(button).toEqualAttribute('tabindex', '-1');\n expect(button).not.toHaveAttribute('data-q2-tabindex');\n expect(buttonWithTabIndex).toEqualAttribute('tabindex', '-1');\n expect(buttonWithTabIndex).toEqualAttribute('data-q2-tabindex', '2');\n });\n });\n });\n });\n\n describe('generatePaneClass', () => {\n it('returns the correct class', async () => {\n carouselPane = new Q2CarouselPane();\n expect(carouselPane.generatePaneClass(5)).toBe('q2-carousel-pane swiper-slide q2-carousel-pane-5');\n });\n });\n});\n"]}

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

@@ -220,7 +220,7 @@ export class Q2ChartArea {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '4f547daaeaf622ac320a7760e93b7cd34f6c77d9', class: "container" }, h("div", { key: '7aaae35934415b5bc06a1d57253c0683c9cc448b', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "areaChartContainer" })));
+        return (h("div", { key: 'def52250043e30ff84063a2fb709f968bf73edd2', class: "container" }, h("div", { key: 'fb4ed567e0cd828a56ae38f727b09b658a890623', 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"; }

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 { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { 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@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 // #endregion\n // #region Events\n\n /\n Emitted when a data point is clicked.\n /\n @Event()\n change: EventEmitter<{\n index: number;\n data: IChartData;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.resizeEventListener);\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('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 };\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 this.change.emit({\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 };\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 Test 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 this.change.emit({\n index: index,\n data: this.data[index],\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 { getCSSProperty, isValidColor, formatValue } from 'src/utils/charting';\nimport { 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@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 // #endregion\n // #region Events\n\n /\n Emitted when a data point is clicked.\n /\n @Event()\n change: EventEmitter<{\n index: number;\n data: IChartData;\n }>;\n\n // #endregion\n // #region Component Lifecycle Events\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.resizeEventListener);\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('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 };\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 this.change.emit({\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 };\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 Test 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 this.change.emit({\n index: index,\n data: this.data[index],\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-area/test/q2-chart-area-test.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-area-test.e2e.js","sourceRoot":"","sources":["~~../../../../~~src/components/q2-chart-area/test/q2-chart-area-test.e2e.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,cAAc,EAAE,+BAA+B,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAEvG,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;IAC3B,IAAI,IAAa,CAAC;IAClB,IAAI,KAAiB,CAAC;IAEtB,UAAU,CAAC,KAAK,IAAI,EAAE;QAClB,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;QACjC,MAAM,IAAI,CAAC,UAAU,CAAC,iCAAiC,CAAC,CAAC;QACzD,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACzC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;QAClD,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE;YACtB,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE;YACxC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE;YACxC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,SAAS,EAAE;YACzC,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,WAAW,EAAE;YAC3C,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE;YAC3C,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAE;YACzC,EAAE,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE;SAC9C,CAAC,CAAC;QACH,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0CAA0C,EAAE,KAAK,IAAI,EAAE;QACtD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,iCAAiC,EAAE,CAAC,CAAC;QACtE,MAAM,CAAC,MAAM,+BAA+B,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACzF,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,0BAA0B,EAAE,KAAK,IAAI,EAAE;QACtC,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,0BAA0B,CAAC,CAAC;QAC3D,MAAM,CAAC,MAAM,CAAC,CAAC,UAAU,EAAE,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gDAAgD,EAAE,KAAK,IAAI,EAAE;QAC5D,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;QAC7E,MAAM,aAAa,GAAG,MAAM,cAAc,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;QACtE,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,8DAA8D,CAAC,CAAC;QAChG,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAC7D,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAC7D,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAC7D,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QAC7D,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC;QAC9D,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC;QAC9D,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,4BAA4B,CAAC,CAAC;IAClE,CAAC,CAAC,CAAC;IACH,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;QACvB,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;YAC3B,EAAE,CAAC,iCAAiC,EAAE,KAAK,IAAI,EAAE;gBAC7C,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC;gBACjC,MAAM,IAAI,CAAC,UAAU,CAAC,iCAAiC,CAAC,CAAC;gBACzD,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;gBACzC,KAAK,CAAC,WAAW,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;gBAClD,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAE5B,MAAM,CAAC,MAAM,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,iBAAiB,CAAC,CAAC;YAChF,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,yCAAyC,EAAE,GAAG,EAAE;YACrD,EAAE,CAAC,8BAA8B,EAAE,KAAK,IAAI,EAAE;gBAC1C,IAAI,GAAG,MAAM,KAAK,CAAC;oBACf,IAAI,EAAE,EAAE;iBACX,CAAC,CAAC;gBACH,MAAM,cAAc,CAAC,IAAI,EAAE;oBACvB,wBAAwB,EAAE,mBAAmB;iBAChD,CAAC,CAAC;gBACH,IAAI,CAAC,UAAU,CAAC,qEAAqE,CAAC,CAAC;gBACvF,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC5B,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;gBACzC,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,oCAAoC,CAAC,CAAC;gBAC7E,MAAM,aAAa,GAAG,cAAc,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;gBAEhE,MAAM,CAAC,MAAM,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC;gBACnF,MAAM,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,gEAAgE,CAAC,CAAC;YACtG,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC3B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;YAC1B,EAAE,CAAC,wCAAwC,EAAE,KAAK,IAAI,EAAE;gBACpD,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,EAAE,IAAI,EAAE,iCAAiC,EAAE,CAAC,CAAC;gBACtE,MAAM,aAAa,GAAG,MAAM,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC/C,MAAM,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;QACH,QAAQ,CAAC,oBAAoB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACzC,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;QACxC,QAAQ,CAAC,OAAO,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;QAC1B,EAAE,CAAC,qBAAqB,EAAE,KAAK,IAAI,EAAE;YACjC,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YAC/C,MAAM,SAAS,GAAG,MAAM,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;YACnD,MAAM,KAAK,CAAC,UAAU,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;YAC5C,MAAM,CAAC,SAAS,CAAC,CAAC,yBAAyB,CAAC;gBACxC,KAAK,EAAE,CAAC;gBACR,IAAI,EAAE;oBACF,EAAE,EAAE,SAAS;oBACb,IAAI,EAAE,KAAK;oBACX,KAAK,EAAE,EAAE;iBACZ;aACJ,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC,CAAC;AACP,CAAC,CAAC,CAAC","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, setTestStrings, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-chart-area', () => {\n let page: E2EPage;\n let chart: E2EElement;\n\n beforeEach(async () => {\n page = await setup({ html: '' });\n await page.setContent('<q2-chart-area></q2-chart-area>');\n chart = await page.find('q2-chart-area');\n chart.setProperty('chartName', 'Weekly spending');\n chart.setProperty('data', [\n { value: 45, name: 'Sun', id: 'sunday' },\n { value: 36, name: 'Mon', id: 'monday' },\n { value: 62, name: 'Tue', id: 'tuesday' },\n { value: 51, name: 'Wed', id: 'wednesday' },\n { value: 104, name: 'Thu', id: 'thursday' },\n { value: 122, name: 'Fri', id: 'friday' },\n { value: 215, name: 'Sat', id: 'saturday' },\n ]);\n await page.waitForChanges();\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-chart-area></q2-chart-area>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-chart-area')).toHaveLength(0);\n });\n\n it('renders a canvas element', async () => {\n const canvas = await page.find('q2-chart-area >>> canvas');\n expect(canvas).toBeTruthy();\n });\n\n it('renders a descriptive aria-label for the chart', async () => {\n const chartContainer = await page.find('q2-chart-area >>> .chart-container');\n const ariaLabelText = await chartContainer.getAttribute('aria-label');\n expect(ariaLabelText).toContain('This is a chart about \"Weekly spending\" with type Line chart');\n expect(ariaLabelText).toContain('the data for Sun is 0, 45');\n expect(ariaLabelText).toContain('the data for Mon is 1, 36');\n expect(ariaLabelText).toContain('the data for Tue is 2, 62');\n expect(ariaLabelText).toContain('the data for Wed is 3, 51');\n expect(ariaLabelText).toContain('the data for Thu is 4, 104');\n expect(ariaLabelText).toContain('the data for Fri is 5, 122');\n expect(ariaLabelText).toContain('the data for Sat is 6, 215');\n });\n describe('chartName', () => {\n describe('when provided', () => {\n it('renders with provided chartName', async () => {\n page = await setup({ html: `` });\n await page.setContent('<q2-chart-area></q2-chart-area>');\n chart = await page.find('q2-chart-area');\n chart.setProperty('chartName', 'Weekly spending');\n await page.waitForChanges();\n\n expect(await chart.getProperty('chartName')).toEqualText('Weekly spending');\n });\n });\n describe('when provided a custom name translation', () => {\n it('renders the translated value', async () => {\n page = await setup({\n html: ``,\n });\n await setTestStrings(page, {\n 'q2ChartArea.customName': 'Custom Chart Name',\n });\n page.setContent(`<q2-chart-area chart-name=\"q2ChartArea.customName\"></q2-chart-area>`);\n await page.waitForChanges();\n chart = await page.find('q2-chart-area');\n const chartContainer = await page.find('q2-chart-area >>> .chart-container');\n const ariaLabelText = chartContainer.getAttribute('aria-label');\n\n expect(await chart.getProperty('chartName')).toEqualText('q2ChartArea.customName');\n expect(ariaLabelText).toContain('This is a chart about \"Custom Chart Name\" with type Line chart');\n });\n });\n });\n\n describe('Accessibility', () => {\n describe('aXe DevTools', () => {\n it('does not have accessibility violations', async () => {\n const page = await setup({ html: '<q2-chart-area></q2-chart-area>' });\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n describe('Accessibility Tree', () => {});\n describe('Keyboard Controls', () => {});\n describe('Other', () => {});\n });\n\n describe('Test methods', () => {\n it('call hoverDataPoint', async () => {\n const chart = await page.find('q2-chart-area');\n const changeSpy = await chart.spyOnEvent('change');\n await chart.callMethod('hoverDataPoint', 2);\n expect(changeSpy).toHaveReceivedEventDetail({\n index: 2,\n data: {\n id: 'tuesday',\n name: 'Tue',\n value: 62,\n },\n });\n });\n });\n});\n"]}
1	+ {"version":3,"file":"q2-chart-area-test.e2e.js","sourceRoot":"","sources":["../../../../../src/components/q2-chart-area/test/q2-chart-area-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, setTestStrings, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-chart-area', () => {\n let page: E2EPage;\n let chart: E2EElement;\n\n beforeEach(async () => {\n page = await setup({ html: '' });\n await page.setContent('<q2-chart-area></q2-chart-area>');\n chart = await page.find('q2-chart-area');\n chart.setProperty('chartName', 'Weekly spending');\n chart.setProperty('data', [\n { value: 45, name: 'Sun', id: 'sunday' },\n { value: 36, name: 'Mon', id: 'monday' },\n { value: 62, name: 'Tue', id: 'tuesday' },\n { value: 51, name: 'Wed', id: 'wednesday' },\n { value: 104, name: 'Thu', id: 'thursday' },\n { value: 122, name: 'Fri', id: 'friday' },\n { value: 215, name: 'Sat', id: 'saturday' },\n ]);\n await page.waitForChanges();\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-chart-area></q2-chart-area>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-chart-area')).toHaveLength(0);\n });\n\n it('renders a canvas element', async () => {\n const canvas = await page.find('q2-chart-area >>> canvas');\n expect(canvas).toBeTruthy();\n });\n\n it('renders a descriptive aria-label for the chart', async () => {\n const chartContainer = await page.find('q2-chart-area >>> .chart-container');\n const ariaLabelText = await chartContainer.getAttribute('aria-label');\n expect(ariaLabelText).toContain('This is a chart about \"Weekly spending\" with type Line chart');\n expect(ariaLabelText).toContain('the data for Sun is 0, 45');\n expect(ariaLabelText).toContain('the data for Mon is 1, 36');\n expect(ariaLabelText).toContain('the data for Tue is 2, 62');\n expect(ariaLabelText).toContain('the data for Wed is 3, 51');\n expect(ariaLabelText).toContain('the data for Thu is 4, 104');\n expect(ariaLabelText).toContain('the data for Fri is 5, 122');\n expect(ariaLabelText).toContain('the data for Sat is 6, 215');\n });\n describe('chartName', () => {\n describe('when provided', () => {\n it('renders with provided chartName', async () => {\n page = await setup({ html: `` });\n await page.setContent('<q2-chart-area></q2-chart-area>');\n chart = await page.find('q2-chart-area');\n chart.setProperty('chartName', 'Weekly spending');\n await page.waitForChanges();\n\n expect(await chart.getProperty('chartName')).toEqualText('Weekly spending');\n });\n });\n describe('when provided a custom name translation', () => {\n it('renders the translated value', async () => {\n page = await setup({\n html: ``,\n });\n await setTestStrings(page, {\n 'q2ChartArea.customName': 'Custom Chart Name',\n });\n page.setContent(`<q2-chart-area chart-name=\"q2ChartArea.customName\"></q2-chart-area>`);\n await page.waitForChanges();\n chart = await page.find('q2-chart-area');\n const chartContainer = await page.find('q2-chart-area >>> .chart-container');\n const ariaLabelText = chartContainer.getAttribute('aria-label');\n\n expect(await chart.getProperty('chartName')).toEqualText('q2ChartArea.customName');\n expect(ariaLabelText).toContain('This is a chart about \"Custom Chart Name\" with type Line chart');\n });\n });\n });\n\n describe('Accessibility', () => {\n describe('aXe DevTools', () => {\n it('does not have accessibility violations', async () => {\n const page = await setup({ html: '<q2-chart-area></q2-chart-area>' });\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n describe('Accessibility Tree', () => {});\n describe('Keyboard Controls', () => {});\n describe('Other', () => {});\n });\n\n describe('Test methods', () => {\n it('call hoverDataPoint', async () => {\n const chart = await page.find('q2-chart-area');\n const changeSpy = await chart.spyOnEvent('change');\n await chart.callMethod('hoverDataPoint', 2);\n expect(changeSpy).toHaveReceivedEventDetail({\n index: 2,\n data: {\n id: 'tuesday',\n name: 'Tue',\n value: 62,\n },\n });\n });\n });\n});\n"]}

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

@@ -156,7 +156,7 @@ export class Q2ChartBar {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'b40ff8d49858ebfc55afb86a2a385bbe3c3e6851', class: "container" }, h("div", { key: 'dffb3ce8dd7e638842d58d59ef09c34f9904af56', ref: el => (this.chartContainer = el), class: "chart-container", role: "img", "test-id": "barChartContainer" })));
+        return (h("div", { key: '647bffbfd416069ed926ec138ef55b9ec2ff15f2', class: "container" }, h("div", { key: '2acf75f9b41d7142eae7da295fe900b88af7f9c1', 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"; }

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 { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { 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@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 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 window.removeEventListener('resize', this.resizeEventListener);\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 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 };\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 { CallbackDataParams } from 'echarts/types/dist/shared';\nimport { 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@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 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 window.removeEventListener('resize', this.resizeEventListener);\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 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 };\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-bar/test/q2-chart-bar-test.e2e.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"q2-chart-bar-test.e2e.js","sourceRoot":"","sources":["~~../../../../~~src/components/q2-chart-bar/test/q2-chart-bar-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, setTestStrings, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-chart-bar', () => {\n let page: E2EPage;\n let chart: E2EElement;\n const data = [\n { value: 1048, name: 'March', id: 'march', color: 'green' },\n { value: 580, name: 'April', id: 'april' },\n { value: 735, name: 'May', id: 'may' },\n { value: 465, name: 'June', id: 'june', color: 'var(--const-stoplight-warning)' },\n { value: 927, name: 'July', id: 'july' },\n ];\n\n beforeEach(async () => {\n page = await setup({ html: '' });\n await page.setContent('<q2-chart-bar></q2-chart-bar>');\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n chart.setProperty('data', data);\n await page.waitForChanges();\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-chart-bar')).toHaveLength(0);\n });\n\n it('renders a canvas element', async () => {\n const canvas = await page.find('q2-chart-bar >>> canvas');\n expect(canvas).toBeTruthy();\n });\n\n it('renders a descriptive aria-label for the chart', async () => {\n const chartContainer = await page.find('q2-chart-bar >>> .chart-container');\n const ariaLabelText = await chartContainer.getAttribute('aria-label');\n expect(ariaLabelText).toContain('This is a chart about \"Month-to-month spending\" with type Bar chart');\n expect(ariaLabelText).toContain('the data for March is 0, 1048');\n expect(ariaLabelText).toContain('the data for April is 1, 580');\n expect(ariaLabelText).toContain('the data for May is 2, 735');\n expect(ariaLabelText).toContain('the data for June is 3, 465');\n expect(ariaLabelText).toContain('the data for July is 4, 927');\n });\n describe('chartName', () => {\n describe('when provided', () => {\n it('renders with provided chartName', async () => {\n page = await setup({ html: `` });\n await page.setContent('<q2-chart-bar></q2-chart-bar>');\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n await page.waitForChanges();\n\n expect(await chart.getProperty('chartName')).toEqualText('Month-to-month spending');\n });\n });\n describe('when provided a custom name translation', () => {\n it('renders the translated value', async () => {\n page = await setup({\n html: ``,\n });\n await setTestStrings(page, {\n 'q2ChartBar.customName': 'Custom Chart Name',\n });\n page.setContent(`<q2-chart-bar chart-name=\"q2ChartBar.customName\"></q2-chart-bar>`);\n await page.waitForChanges();\n chart = await page.find('q2-chart-bar');\n const chartContainer = await page.find('q2-chart-bar >>> .chart-container');\n const ariaLabelText = chartContainer.getAttribute('aria-label');\n\n expect(await chart.getProperty('chartName')).toEqual('q2ChartBar.customName');\n expect(ariaLabelText).toContain('This is a chart about \"Custom Chart Name\" with type Bar chart');\n });\n });\n });\n\n describe('Accessibility', () => {\n describe('aXe DevTools', () => {\n it('does not have accessibility violations', async () => {\n const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n chart.setProperty('data', data);\n await page.waitForChanges();\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n describe('Accessibility Tree', () => {});\n describe('Keyboard Controls', () => {});\n describe('Other', () => {});\n });\n});\n"]}
1	+ {"version":3,"file":"q2-chart-bar-test.e2e.js","sourceRoot":"","sources":["../../../../../src/components/q2-chart-bar/test/q2-chart-bar-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { E2EElement, E2EPage } from '@stencil/core/testing';\nimport { setup, setTestStrings, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-chart-bar', () => {\n let page: E2EPage;\n let chart: E2EElement;\n const data = [\n { value: 1048, name: 'March', id: 'march', color: 'green' },\n { value: 580, name: 'April', id: 'april' },\n { value: 735, name: 'May', id: 'may' },\n { value: 465, name: 'June', id: 'june', color: 'var(--const-stoplight-warning)' },\n { value: 927, name: 'July', id: 'july' },\n ];\n\n beforeEach(async () => {\n page = await setup({ html: '' });\n await page.setContent('<q2-chart-bar></q2-chart-bar>');\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n chart.setProperty('data', data);\n await page.waitForChanges();\n });\n\n it('properly compiles CSS vars and functions', async () => {\n const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });\n expect(await getListOfStyleCompilationIssues(page, 'q2-chart-bar')).toHaveLength(0);\n });\n\n it('renders a canvas element', async () => {\n const canvas = await page.find('q2-chart-bar >>> canvas');\n expect(canvas).toBeTruthy();\n });\n\n it('renders a descriptive aria-label for the chart', async () => {\n const chartContainer = await page.find('q2-chart-bar >>> .chart-container');\n const ariaLabelText = await chartContainer.getAttribute('aria-label');\n expect(ariaLabelText).toContain('This is a chart about \"Month-to-month spending\" with type Bar chart');\n expect(ariaLabelText).toContain('the data for March is 0, 1048');\n expect(ariaLabelText).toContain('the data for April is 1, 580');\n expect(ariaLabelText).toContain('the data for May is 2, 735');\n expect(ariaLabelText).toContain('the data for June is 3, 465');\n expect(ariaLabelText).toContain('the data for July is 4, 927');\n });\n describe('chartName', () => {\n describe('when provided', () => {\n it('renders with provided chartName', async () => {\n page = await setup({ html: `` });\n await page.setContent('<q2-chart-bar></q2-chart-bar>');\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n await page.waitForChanges();\n\n expect(await chart.getProperty('chartName')).toEqualText('Month-to-month spending');\n });\n });\n describe('when provided a custom name translation', () => {\n it('renders the translated value', async () => {\n page = await setup({\n html: ``,\n });\n await setTestStrings(page, {\n 'q2ChartBar.customName': 'Custom Chart Name',\n });\n page.setContent(`<q2-chart-bar chart-name=\"q2ChartBar.customName\"></q2-chart-bar>`);\n await page.waitForChanges();\n chart = await page.find('q2-chart-bar');\n const chartContainer = await page.find('q2-chart-bar >>> .chart-container');\n const ariaLabelText = chartContainer.getAttribute('aria-label');\n\n expect(await chart.getProperty('chartName')).toEqual('q2ChartBar.customName');\n expect(ariaLabelText).toContain('This is a chart about \"Custom Chart Name\" with type Bar chart');\n });\n });\n });\n\n describe('Accessibility', () => {\n describe('aXe DevTools', () => {\n it('does not have accessibility violations', async () => {\n const page = await setup({ html: '<q2-chart-bar></q2-chart-bar>' });\n chart = await page.find('q2-chart-bar');\n chart.setProperty('chartName', 'Month-to-month spending');\n chart.setProperty('data', data);\n await page.waitForChanges();\n const hasViolations = await evaluateA11y(page);\n expect(hasViolations).toBe(false);\n });\n });\n describe('Accessibility Tree', () => {});\n describe('Keyboard Controls', () => {});\n describe('Other', () => {});\n });\n});\n"]}

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

@@ -474,7 +474,7 @@ export class Q2ChartDonut {
             } })), !!name && h("div", { class: "name" }, name), !isNaN(value) && h("div", { class: "value" }, displayValue))));
     }
     render() {
-        return (h("click-elsewhere", { key: '061f0df2cfc531af2df0d583f7cea0a2e7d68c7d', onChange: this.onClickElsewhere }, h("figure", { key: '324163777739ef74d986c94fda412a91f0f34124' }, h("div", { key: 'a866867bfd653239d8f7c0a630f2b222c353bdb1', class: "container" }, h("div", { key: 'fcb2076e8b390ef19ab28f03d25e66bb48c7bdd9', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: '2115b858f955bb6751a8d7d4476d4addc76e8f50' }, h("q2-legend", { key: '2a20e076a5bb3ac2b3430f1cefe38d9cdf594ccb', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
+        return (h("click-elsewhere", { key: 'b29ca18598a09472f568338d98f3075e530daf74', onChange: this.onClickElsewhere }, h("figure", { key: '7e576d6d0b2f3d8446cd90f664ca2a07537cc3d2' }, h("div", { key: 'b008ec034395cd27a4a80a339afffc1c41ceb1c6', class: "container" }, h("div", { key: '31ce13ef5327426627937e69a4503df3e6a29b3d', ref: el => (this.chartContainer = el), "aria-describedby": !this.isClickable ? 'center-card-description' : undefined, class: "chart-container", role: "img", "test-id": "chartContainer", onClick: this.onContainerClick, tabIndex: !this.isClickable ? 0 : undefined, onKeyDown: !this.isClickable ? this.onButtonKeyDown : undefined }), this.renderCenterBlock()), this.showLegend && (h("figcaption", { key: 'e3148f952eba1acc3f91c8b241f8e3906db890cf' }, h("q2-legend", { key: '55a66d778e325cb2af906de88af5088a16b9b3a8', class: "legend", data: this.legendData, format: this.format, hoveredItemId: this.legendHoveredId, onClick: this.onLegendClick, onMouseleave: this.onLegendMouseleave, onMouseenter: this.onLegendMouseenter, selectedItemId: this.selectedId }))))));
     }
     static get is() { return "q2-chart-donut"; }
     static get encapsulation() { return "shadow"; }