q2-tecton-elements 1.50.1 → 1.51.1

package/dist/collection/components/q2-resize-observer/q2-resize-observer.js

@@ -0,0 +1,166 @@
+import { h } from "@stencil/core";
+export class Q2ResizeObserver {
+    constructor() {
+        this.observedElements = [];
+        // #endregion
+        // #region Local Methods
+        this.handleSlotChange = () => {
+            if (this.disabled)
+                return;
+            this.startObserver();
+        };
+        this.disabled = undefined;
+    }
+    // #endregion
+    // #region Component Lifecycle Events
+    disconnectedCallback() {
+        this.stopObserver();
+        this.resizeObserver = null;
+    }
+    componentDidLoad() {
+        if ('ResizeObserver' in window) {
+            this.resizeObserver = new ResizeObserver(resizeEntries => {
+                this.tctResize.emit({ entries: resizeEntries });
+                this.currentResizeObserverEntries = resizeEntries;
+            });
+        }
+        else {
+            console.warn('ResizeObserver is not defined.');
+        }
+        if (!this.disabled) {
+            this.startObserver();
+        }
+    }
+    // #endregion
+    // #region Public Methods API
+    /**
+     * Returns the latest entries reported by the component.
+     */
+    async getCurrentResizeEntries() {
+        return this.currentResizeObserverEntries || [];
+    }
+    // #endregion
+    // #region Watchers
+    disabledUpdated(newVal) {
+        if (newVal) {
+            this.stopObserver();
+        }
+        else {
+            this.startObserver();
+        }
+    }
+    startObserver() {
+        var _a, _b, _c;
+        const slot = this.hostElement.shadowRoot.querySelector('slot');
+        if (slot === null)
+            return;
+        const elements = (_b = (_a = slot.assignedElements) === null || _a === void 0 ? void 0 : _a.call(slot, { flatten: true })) !== null && _b !== void 0 ? _b : [];
+        // Unwatch previous elements
+        (_c = this.observedElements) === null || _c === void 0 ? void 0 : _c.forEach(el => this.resizeObserver.unobserve(el));
+        this.observedElements = [];
+        // Watch new elements
+        elements.forEach(el => {
+            var _a;
+            (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el);
+            this.observedElements.push(el);
+        });
+    }
+    stopObserver() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    // #endregion
+    // #region Render Methods
+    render() {
+        return h("slot", { key: 'e704a2aa1c38da509b0e366e03cd33397ffdbf5d', onSlotchange: this.handleSlotChange });
+    }
+    static get is() { return "q2-resize-observer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["q2-resize-observer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["q2-resize-observer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines wheter or not events will be emitted from the component."
+                },
+                "attribute": "disabled",
+                "reflect": true
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tctResize",
+                "name": "tctResize",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when any of the observed elements are resized."
+                },
+                "complexType": {
+                    "original": "{ entries: ResizeObserverEntry[] }",
+                    "resolved": "{ entries: ResizeObserverEntry[]; }",
+                    "references": {
+                        "ResizeObserverEntry": {
+                            "location": "global",
+                            "id": "global::ResizeObserverEntry"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getCurrentResizeEntries": {
+                "complexType": {
+                    "signature": "() => Promise<ResizeObserverEntry[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ResizeObserverEntry": {
+                            "location": "global",
+                            "id": "global::ResizeObserverEntry"
+                        }
+                    },
+                    "return": "Promise<ResizeObserverEntry[]>"
+                },
+                "docs": {
+                    "text": "Returns the latest entries reported by the component.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+    static get watchers() {
+        return [{
+                "propName": "disabled",
+                "methodName": "disabledUpdated"
+            }];
+    }
+}
+//# sourceMappingURL=q2-resize-observer.js.map

package/dist/collection/components/q2-resize-observer/q2-resize-observer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-resize-observer.js","sourceRoot":"","sources":["../../../src/components/q2-resize-observer/q2-resize-observer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOpH,MAAM,OAAO,gBAAgB;;QAIzB,qBAAgB,GAAkB,EAAE,CAAC;QAyErC,aAAa;QACb,wBAAwB;QAExB,qBAAgB,GAAG,GAAG,EAAE;YACpB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,aAAa,EAAE,CAAC;QACzB,CAAC,CAAC;;;IApDF,aAAa;IACb,qCAAqC;IAErC,oBAAoB;QAChB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC/B,CAAC;IAED,gBAAgB;QACZ,IAAI,gBAAgB,IAAI,MAAM,EAAE,CAAC;YAC7B,IAAI,CAAC,cAAc,GAAG,IAAI,cAAc,CAAC,aAAa,CAAC,EAAE;gBACrD,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,aAAa,EAAE,CAAC,CAAC;gBAChD,IAAI,CAAC,4BAA4B,GAAG,aAAa,CAAC;YACtD,CAAC,CAAC,CAAC;QACP,CAAC;aAAM,CAAC;YACJ,OAAO,CAAC,IAAI,CAAC,gCAAgC,CAAC,CAAC;QACnD,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjB,IAAI,CAAC,aAAa,EAAE,CAAC;QACzB,CAAC;IACL,CAAC;IAED,aAAa;IACb,6BAA6B;IAE7B;;OAEG;IAEH,KAAK,CAAC,uBAAuB;QACzB,OAAO,IAAI,CAAC,4BAA4B,IAAI,EAAE,CAAC;IACnD,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,MAAe;QAC3B,IAAI,MAAM,EAAE,CAAC;YACT,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,aAAa,EAAE,CAAC;QACzB,CAAC;IACL,CAAC;IAUD,aAAa;;QACT,MAAM,IAAI,GAAG,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;QAChE,IAAI,IAAI,KAAK,IAAI;YAAE,OAAO;QAE1B,MAAM,QAAQ,GAAG,MAAC,MAAA,IAAI,CAAC,gBAAgB,qDAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAmB,mCAAI,EAAE,CAAC;QAErF,4BAA4B;QAC5B,MAAA,IAAI,CAAC,gBAAgB,0CAAE,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC;QACxE,IAAI,CAAC,gBAAgB,GAAG,EAAE,CAAC;QAE3B,qBAAqB;QACrB,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;;YAClB,MAAA,IAAI,CAAC,cAAc,0CAAE,OAAO,CAAC,EAAE,CAAC,CAAC;YACjC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,YAAY;;QACR,MAAA,IAAI,CAAC,cAAc,0CAAE,UAAU,EAAE,CAAC;IACtC,CAAC;IAED,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAAC;IACzD,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, ComponentInterface, Element, EventEmitter, h, Prop, Event, Method, Watch } from '@stencil/core';\n\n@Component({\n    tag: 'q2-resize-observer',\n    styleUrl: 'q2-resize-observer.scss',\n    shadow: true,\n})\nexport class Q2ResizeObserver implements ComponentInterface {\n    // #region Own Properties\n\n    currentResizeObserverEntries: ResizeObserverEntry[];\n    observedElements: HTMLElement[] = [];\n    resizeObserver?: ResizeObserver;\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     * Determines wheter or not events will be emitted from the component.\n     */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when any of the observed elements are resized.\n     */\n    @Event()\n    tctResize: EventEmitter<{ entries: ResizeObserverEntry[] }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.stopObserver();\n        this.resizeObserver = null;\n    }\n\n    componentDidLoad() {\n        if ('ResizeObserver' in window) {\n            this.resizeObserver = new ResizeObserver(resizeEntries => {\n                this.tctResize.emit({ entries: resizeEntries });\n                this.currentResizeObserverEntries = resizeEntries;\n            });\n        } else {\n            console.warn('ResizeObserver is not defined.');\n        }\n\n        if (!this.disabled) {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    /**\n     * Returns the latest entries reported by the component.\n     */\n    @Method()\n    async getCurrentResizeEntries(): Promise<ResizeObserverEntry[]> {\n        return this.currentResizeObserverEntries || [];\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledUpdated(newVal: boolean) {\n        if (newVal) {\n            this.stopObserver();\n        } else {\n            this.startObserver();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleSlotChange = () => {\n        if (this.disabled) return;\n        this.startObserver();\n    };\n\n    startObserver() {\n        const slot = this.hostElement.shadowRoot!.querySelector('slot');\n        if (slot === null) return;\n\n        const elements = (slot.assignedElements?.({ flatten: true }) as HTMLElement[]) ?? [];\n\n        // Unwatch previous elements\n        this.observedElements?.forEach(el => this.resizeObserver.unobserve(el));\n        this.observedElements = [];\n\n        // Watch new elements\n        elements.forEach(el => {\n            this.resizeObserver?.observe(el);\n            this.observedElements.push(el);\n        });\n    }\n\n    stopObserver() {\n        this.resizeObserver?.disconnect();\n    }\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return <slot onSlotchange={this.handleSlotChange} />;\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-resize-observer/test/q2-resize-observer.e2e.js

@@ -0,0 +1,83 @@
+import { setup } from "../../../utils/helpers";
+describe('q2-resize-observer', () => {
+    let page;
+    let resizeEventSpy;
+    describe('Events', () => {
+        describe('tctResize', () => {
+            it('emits a resize event when the window is resized', async () => {
+                page = await setup({
+                    html: `
+                        <q2-resize-observer>
+                            <button style="width: 100%; display: block;">Sample</button>
+                        </q2-resize-observer>
+                    `,
+                });
+                resizeEventSpy = await page.spyOnEvent('tctResize');
+                await page.setViewport({ width: 400, height: 800 });
+                await page.waitForChanges();
+                expect(resizeEventSpy).toHaveReceivedEventTimes(1);
+            });
+            it('emits a resize event when the observed element has the display property updated', async () => {
+                page = await setup({
+                    html: `
+                        <q2-resize-observer>
+                            <button style="display: none;">Sample</button>
+                        </q2-resize-observer>
+                    `,
+                });
+                resizeEventSpy = await page.spyOnEvent('tctResize');
+                await page.$eval('button', (el) => {
+                    el.style.display = 'block';
+                });
+                await page.waitForChanges();
+                expect(resizeEventSpy).toHaveReceivedEventTimes(1);
+            });
+            it('emits a resize event when the observed element is resized', async () => {
+                page = await setup({
+                    html: `
+                        <q2-resize-observer>
+                            <button style="width: 100%; display: block;">Sample</button>
+                        </q2-resize-observer>
+                    `,
+                });
+                resizeEventSpy = await page.spyOnEvent('tctResize');
+                await page.$eval('button', (el) => {
+                    el.style.width = '200px';
+                });
+                await page.waitForChanges();
+                expect(resizeEventSpy).toHaveReceivedEventTimes(1);
+            });
+            it('emits a resize event when the content of the observed element is changed', async () => {
+                page = await setup({
+                    html: `
+                        <q2-resize-observer>
+                            <button>Sample</button>
+                        </q2-resize-observer>
+                    `,
+                });
+                resizeEventSpy = await page.spyOnEvent('tctResize');
+                await page.$eval('button', (el) => {
+                    el.textContent = 'Sample Content';
+                });
+                await page.waitForChanges();
+                expect(resizeEventSpy).toHaveReceivedEventTimes(1);
+            });
+            describe('when the component is disabled', () => {
+                it('does not emit a resize event when the window is resized', async () => {
+                    page = await setup({
+                        html: `
+                            <q2-resize-observer disabled>
+                                <button style="width: 100%; display: block;">Sample</button>
+                            </q2-resize-observer>
+                        `,
+                    });
+                    resizeEventSpy = await page.spyOnEvent('tctResize');
+                    await page.setViewport({ width: 400, height: 800 });
+                    await page.waitForChanges();
+                    expect(resizeEventSpy).toHaveReceivedEventTimes(0);
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=q2-resize-observer.e2e.js.map

package/dist/collection/components/q2-resize-observer/test/q2-resize-observer.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-resize-observer.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-resize-observer/test/q2-resize-observer.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { setup } from '@/utils/helpers';\nimport { E2EPage, EventSpy } from '@stencil/core/testing';\n\ndescribe('q2-resize-observer', () => {\n    let page: E2EPage;\n    let resizeEventSpy: EventSpy;\n\n    describe('Events', () => {\n        describe('tctResize', () => {\n            it('emits a resize event when the window is resized', async () => {\n                page = await setup({\n                    html: `\n                        <q2-resize-observer>\n                            <button style=\"width: 100%; display: block;\">Sample</button>\n                        </q2-resize-observer>\n                    `,\n                });\n                resizeEventSpy = await page.spyOnEvent('tctResize');\n\n                await page.setViewport({ width: 400, height: 800 });\n                await page.waitForChanges();\n                expect(resizeEventSpy).toHaveReceivedEventTimes(1);\n            });\n\n            it('emits a resize event when the observed element has the display property updated', async () => {\n                page = await setup({\n                    html: `\n                        <q2-resize-observer>\n                            <button style=\"display: none;\">Sample</button>\n                        </q2-resize-observer>\n                    `,\n                });\n                resizeEventSpy = await page.spyOnEvent('tctResize');\n\n                await page.$eval('button', (el: HTMLElement) => {\n                    el.style.display = 'block';\n                });\n                await page.waitForChanges();\n                expect(resizeEventSpy).toHaveReceivedEventTimes(1);\n            });\n\n            it('emits a resize event when the observed element is resized', async () => {\n                page = await setup({\n                    html: `\n                        <q2-resize-observer>\n                            <button style=\"width: 100%; display: block;\">Sample</button>\n                        </q2-resize-observer>\n                    `,\n                });\n                resizeEventSpy = await page.spyOnEvent('tctResize');\n\n                await page.$eval('button', (el: HTMLElement) => {\n                    el.style.width = '200px';\n                });\n                await page.waitForChanges();\n                expect(resizeEventSpy).toHaveReceivedEventTimes(1);\n            });\n\n            it('emits a resize event when the content of the observed element is changed', async () => {\n                page = await setup({\n                    html: `\n                        <q2-resize-observer>\n                            <button>Sample</button>\n                        </q2-resize-observer>\n                    `,\n                });\n                resizeEventSpy = await page.spyOnEvent('tctResize');\n\n                await page.$eval('button', (el: HTMLElement) => {\n                    el.textContent = 'Sample Content';\n                });\n                await page.waitForChanges();\n                expect(resizeEventSpy).toHaveReceivedEventTimes(1);\n            });\n\n            describe('when the component is disabled', () => {\n                it('does not emit a resize event when the window is resized', async () => {\n                    page = await setup({\n                        html: `\n                            <q2-resize-observer disabled>\n                                <button style=\"width: 100%; display: block;\">Sample</button>\n                            </q2-resize-observer>\n                        `,\n                    });\n                    resizeEventSpy = await page.spyOnEvent('tctResize');\n\n                    await page.setViewport({ width: 400, height: 800 });\n                    await page.waitForChanges();\n                    expect(resizeEventSpy).toHaveReceivedEventTimes(0);\n                });\n            });\n        });\n    });\n});\n"]}

package/dist/collection/components/q2-resize-observer/test/q2-resize-observer.spec.js

@@ -0,0 +1,66 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Q2ResizeObserver } from "../q2-resize-observer";
+describe('q2-resize-observer', () => {
+    let specPage;
+    let specResizeObserver;
+    describe('Props', () => {
+        describe('disabled', () => {
+            it('calls stopObserver when disabled is set', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2ResizeObserver],
+                    html: `<q2-resize-observer>Test</q2-resize-observer>`,
+                });
+                specResizeObserver = specPage.rootInstance;
+                const stopObserverSpy = jest.spyOn(specResizeObserver, 'stopObserver');
+                const startObserverSpy = jest.spyOn(specResizeObserver, 'startObserver');
+                specResizeObserver.disabled = true;
+                await specPage.waitForChanges();
+                expect(stopObserverSpy).toHaveBeenCalled();
+                expect(startObserverSpy).not.toHaveBeenCalled();
+            });
+            it('calls startObserver when disabled is removed', async () => {
+                specPage = await newSpecPage({
+                    components: [Q2ResizeObserver],
+                    html: `<q2-resize-observer disabled>Test</q2-resize-observer>`,
+                });
+                specResizeObserver = specPage.rootInstance;
+                const stopObserverSpy = jest.spyOn(specResizeObserver, 'stopObserver');
+                const startObserverSpy = jest.spyOn(specResizeObserver, 'startObserver');
+                specResizeObserver.disabled = false;
+                await specPage.waitForChanges();
+                expect(stopObserverSpy).not.toHaveBeenCalled();
+                expect(startObserverSpy).toHaveBeenCalled();
+            });
+        });
+    });
+    describe('Public Methods', () => {
+        describe('getCurrentResizeEntries', () => {
+            beforeEach(() => {
+                specResizeObserver = new Q2ResizeObserver();
+            });
+            it('returns an empty array when currentResizeObserverEntries is null', async () => {
+                expect(await specResizeObserver.getCurrentResizeEntries()).toEqual([]);
+            });
+            it('returns currentResizeObserverEntries when it is present', async () => {
+                const sampleEntries = [
+                    {
+                        target: document.body,
+                        contentRect: {
+                            x: 0,
+                            y: 0,
+                            width: 100,
+                            height: 100,
+                            top: 0,
+                            right: 100,
+                            bottom: 100,
+                            left: 0,
+                        },
+                    },
+                ];
+                specResizeObserver.currentResizeObserverEntries = sampleEntries;
+                expect(await specResizeObserver.getCurrentResizeEntries()).toEqual(sampleEntries);
+            });
+        });
+    });
+});
+//# sourceMappingURL=q2-resize-observer.spec.js.map

package/dist/collection/components/q2-resize-observer/test/q2-resize-observer.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"q2-resize-observer.spec.js","sourceRoot":"","sources":["../../../../src/components/q2-resize-observer/test/q2-resize-observer.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { SpecPage, newSpecPage } from '@stencil/core/testing';\nimport { Q2ResizeObserver } from '../q2-resize-observer';\n\ndescribe('q2-resize-observer', () => {\n    let specPage: SpecPage;\n    let specResizeObserver: Q2ResizeObserver;\n\n    describe('Props', () => {\n        describe('disabled', () => {\n            it('calls stopObserver when disabled is set', async () => {\n                specPage = await newSpecPage({\n                    components: [Q2ResizeObserver],\n                    html: `<q2-resize-observer>Test</q2-resize-observer>`,\n                });\n\n                specResizeObserver = specPage.rootInstance;\n                const stopObserverSpy = jest.spyOn(specResizeObserver, 'stopObserver');\n                const startObserverSpy = jest.spyOn(specResizeObserver, 'startObserver');\n\n                specResizeObserver.disabled = true;\n                await specPage.waitForChanges();\n\n                expect(stopObserverSpy).toHaveBeenCalled();\n                expect(startObserverSpy).not.toHaveBeenCalled();\n            });\n\n            it('calls startObserver when disabled is removed', async () => {\n                specPage = await newSpecPage({\n                    components: [Q2ResizeObserver],\n                    html: `<q2-resize-observer disabled>Test</q2-resize-observer>`,\n                });\n\n                specResizeObserver = specPage.rootInstance;\n                const stopObserverSpy = jest.spyOn(specResizeObserver, 'stopObserver');\n                const startObserverSpy = jest.spyOn(specResizeObserver, 'startObserver');\n\n                specResizeObserver.disabled = false;\n                await specPage.waitForChanges();\n\n                expect(stopObserverSpy).not.toHaveBeenCalled();\n                expect(startObserverSpy).toHaveBeenCalled();\n            });\n        });\n    });\n\n    describe('Public Methods', () => {\n        describe('getCurrentResizeEntries', () => {\n            beforeEach(() => {\n                specResizeObserver = new Q2ResizeObserver();\n            });\n\n            it('returns an empty array when currentResizeObserverEntries is null', async () => {\n                expect(await specResizeObserver.getCurrentResizeEntries()).toEqual([]);\n            });\n\n            it('returns currentResizeObserverEntries when it is present', async () => {\n                const sampleEntries = [\n                    {\n                        target: document.body,\n                        contentRect: {\n                            x: 0,\n                            y: 0,\n                            width: 100,\n                            height: 100,\n                            top: 0,\n                            right: 100,\n                            bottom: 100,\n                            left: 0,\n                        },\n                    },\n                ];\n                specResizeObserver.currentResizeObserverEntries = sampleEntries as unknown as ResizeObserverEntry[];\n                expect(await specResizeObserver.getCurrentResizeEntries()).toEqual(sampleEntries);\n            });\n        });\n    });\n});\n"]}

package/dist/collection/components/q2-section/q2-section.js

@@ -117,6 +117,30 @@ export class Q2Section {
         }
     }
     // #endregion
+    // #region Test Methods API
+    /**
+     * A test method to collapse section.
+     *
+     * @testOnly
+     */
+    async collapse() {
+        if (!this.collapsible || !this.expanded)
+            return;
+        const btn = this.hostElement.shadowRoot.querySelector('[test-id="toggleButton"]');
+        btn === null || btn === void 0 ? void 0 : btn.click();
+    }
+    /**
+     * A test method to expand section.
+     *
+     * @testOnly
+     */
+    async expand() {
+        if (!this.collapsible || this.expanded)
+            return;
+        const btn = this.hostElement.shadowRoot.querySelector('[test-id="toggleButton"]');
+        btn === null || btn === void 0 ? void 0 : btn.click();
+    }
+    // #endregion
     // #region Local Methods
     get contentContainerHeight() {
         return `${this.contentContainer.offsetHeight || 0}px`;
@@ -158,9 +182,9 @@ export class Q2Section {
                 wrapperClasses.push('is-transitioning');
         }
         const showDefaultHeader = !this.hasYieldedHeader && !!this.label;
-        return (h("section", { key: 'f7969997a0aaea2c5f883156428626bde982d6f2', class: "wrapper" }, h("header", { key: '1dca67129a19b4ab1f13e96ad4069f51e66aa744', class: hasHeader ? 'has-header' : '' }, h("div", { key: 'ed9c5f0a351cfe2afe39b26de41816ad7842a5c0', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '2d3081f31e0cbe7255c9eab2ca03fc0de8aecb9f', class: "title" }, loc(this.label)), h("div", { key: '4bda5e123c97f10bee569b96ead7585ce4910c0e', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'fa1cf27e2c5a6d05f47887a3b40adf8d1f6b6fbd', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: 'dc9ce02e335aed9c06cb4eac6a2d4e15212bc95e', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: '377521b837fce45914a003d768862871dfb89bdb', type: "chevron-up" })))), h("div", { key: 'cae742942789c59d37466d3767b4ec4b3da2c138', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
+        return (h("section", { key: '994cfe09abd1a9d8220ca4017cb4003ae1e2cf39', class: "wrapper" }, h("header", { key: '56a44ef98988748508c673bd3725887a1743a99b', class: hasHeader ? 'has-header' : '' }, h("div", { key: '03cc85008637fe3de375d223de79ac59c6b6ba64', class: "header-content", id: this.titleId, onClick: this.collapsible && this.onHeaderClick }, showDefaultHeader && h("h2", { key: '69c2119b393e0b3f02392686ec49835273a9ebcb', class: "title" }, loc(this.label)), h("div", { key: '62a92b25033d9c9709a680b05becc2a48779197c', ref: el => (this.headerSlotWrapper = el), class: "header-slot-wrapper" }, h("slot", { key: 'f5b2dbc68e33d01f31845bdbfb429e0a18a5e174', ref: (el) => (this.headerSlot = el), name: "q2-section-header" }))), this.collapsible && !this.noCollapseIcon && (h("q2-btn", { key: '1983d339de073ca38b6879fca9d96fbe4648e533', label: loc(this.label || 'tecton.element.section.defaultToggleLabel'), ariaExpanded: `${!!this.expanded}`, ariaControls: this.contentId, "test-id": "toggleButton", "hide-label": true, onClick: this.onHeaderClick }, h("q2-icon", { key: 'de36065a7fdeb1c381184304e4ed679f27d4f771', type: "chevron-up" })))), h("div", { key: 'e681760db4a6551d03ded78c25ab24257b6eaf0b', class: wrapperClasses.join(' '), id: this.contentId, "aria-labelledby": this.titleId, role: "region", onTransitionEnd: this.onTransitionEnd, style: this.collapsible && {
                 height: this.contentHeight,
-            } }, h("div", { key: '43f57ee880d454ecfef29f92177946350da7eec4', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f13ca46b06dcdb43e1c307add290f7bb16065365', ref: (el) => (this.contentSlot = el) })))));
+            } }, h("div", { key: '004500e012e4eb718f7e018c20a0cc3590b9ebce', ref: el => (this.contentContainer = el), class: "content", tabindex: "-1" }, h("slot", { key: 'f83f550c26a3f36d2a72c777a9f904a3774e963f', ref: (el) => (this.contentSlot = el) })))));
     }
     static get is() { return "q2-section"; }
     static get encapsulation() { return "shadow"; }
@@ -277,6 +301,58 @@ export class Q2Section {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "collapse": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLQ2BtnElement": {
+                            "location": "global",
+                            "id": "global::HTMLQ2BtnElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "A test method to collapse section.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            },
+            "expand": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLQ2BtnElement": {
+                            "location": "global",
+                            "id": "global::HTMLQ2BtnElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "A test method to expand section.",
+                    "tags": [{
+                            "name": "testOnly",
+                            "text": undefined
+                        }]
+                }
+            }
+        };
+    }
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{

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

@@ -1 +1 @@
-{"version":3,"file":"q2-section.js","sourceRoot":"","sources":["../../../src/components/q2-section/q2-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Listen,\n    State,\n    Watch,\n    h,\n    Event,\n    EventEmitter,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n    // #region Own Properties\n\n    contentContainer: HTMLDivElement;\n    contentId: string = 'content';\n    contentSlot: HTMLSlotElement;\n    contentSlotMutationObserver: MutationObserver;\n    headerSlot: HTMLSlotElement;\n    headerSlotMutationObserver: MutationObserver;\n    headerSlotWrapper: HTMLDivElement;\n    resizerFn: NodeJS.Timeout | undefined;\n    titleId: string = 'title';\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentHeight: string;\n\n    @State()\n    hasYieldedHeader: boolean = false;\n\n    @State()\n    hideContent: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if the section is collapsible. */\n    @Prop({ reflect: true })\n    collapsible: boolean;\n\n    /** Indicates if the `q2-section` is in an expanded state or not. */\n    @Prop({ reflect: true, mutable: true })\n    expanded: boolean;\n\n    /**\n     * The text to display above the `q2-section`. Renders as an `<h2>` element.\n     *\n     * It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n     *\n     * @warning\n     * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n     * accessibility.\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the collapse chevron icon should show in the `q2-section` header. */\n    @Prop({ reflect: true })\n    noCollapseIcon: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the section is expanded or collapsed.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ expanded: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeHeaderSlotListener();\n        this.removeContentSlotListener();\n    }\n\n    componentWillLoad() {\n        this.onHeaderSlotChange();\n        const { collapsible, expanded } = this;\n        this.contentHeight = collapsible && expanded ? undefined : '0px';\n        this.hideContent = !expanded;\n    }\n\n    componentDidLoad() {\n        this.addHeaderSlotListener();\n        this.addContentSlotListener();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n            this.expanded = event.detail.expanded;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.contentContainer.focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('collapsible')\n    collapsibleObserver() {\n        this.contentHeight = this.currentHeight;\n    }\n\n    @Watch('expanded')\n    async expandedObserver(expanded: boolean) {\n        this.clearResizeInterval();\n        this.resizerFn = setInterval(resizeIframe, 5);\n\n        if (expanded) {\n            this.expandSection();\n        } else {\n            this.collapseSection();\n        }\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get contentContainerHeight() {\n        return `${this.contentContainer.offsetHeight || 0}px`;\n    }\n\n    get currentHeight() {\n        const { collapsible, expanded } = this;\n        if (!collapsible) {\n            return null;\n        } else if (expanded) {\n            return this.contentContainerHeight;\n        } else {\n            return '0';\n        }\n    }\n\n    addContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.addEventListener('slotchange', resizeIframe);\n            return;\n        }\n\n        const observer = new MutationObserver(resizeIframe);\n        observer.observe(this.contentContainer, { childList: true, subtree: true });\n        this.contentSlotMutationObserver = observer;\n    };\n\n    addHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        const observer = new MutationObserver(this.onHeaderSlotChange);\n        observer.observe(this.headerSlotWrapper, { childList: true });\n        this.headerSlotMutationObserver = observer;\n    };\n\n    clearResizeInterval = () => {\n        this.resizerFn && clearInterval(this.resizerFn);\n    };\n\n    async collapseSection() {\n        this.contentHeight = this.contentContainerHeight;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    async expandSection() {\n        this.hideContent = false;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    onHeaderClick = () => {\n        this.change.emit({\n            expanded: !this.expanded,\n        });\n    };\n\n    onHeaderSlotChange = () => {\n        const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n        if (this.hasYieldedHeader !== hasSlotContent) {\n            this.hasYieldedHeader = !!hasSlotContent;\n        }\n    };\n\n    onTransitionEnd = () => {\n        if (this.expanded) {\n            this.contentHeight = undefined;\n        } else {\n            this.hideContent = true;\n        }\n\n        setTimeout(() => {\n            // This gives enough time for all values to get passed over\n            // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n            // Will revisit in TCT-599\n            this.clearResizeInterval();\n        }, 1000);\n    };\n\n    removeContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.removeEventListener('slotchange', resizeIframe);\n            return;\n        }\n        this.contentSlotMutationObserver.disconnect();\n    };\n\n    removeHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        this.headerSlotMutationObserver.disconnect();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const hasHeader = this.label || this.hasYieldedHeader;\n        const wrapperClasses = ['content-wrapper'];\n        const { collapsible, hideContent, contentHeight } = this;\n        if (collapsible) {\n            if (hideContent) wrapperClasses.push('is-closed');\n            else if (contentHeight) wrapperClasses.push('is-transitioning');\n        }\n\n        const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n        return (\n            <section class=\"wrapper\">\n                <header class={hasHeader ? 'has-header' : ''}>\n                    <div\n                        class=\"header-content\"\n                        id={this.titleId}\n                        onClick={this.collapsible && this.onHeaderClick}\n                    >\n                        {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n                        <div\n                            ref={el => (this.headerSlotWrapper = el)}\n                            class=\"header-slot-wrapper\"\n                        >\n                            <slot\n                                ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n                                name=\"q2-section-header\"\n                            />\n                        </div>\n                    </div>\n                    {this.collapsible && !this.noCollapseIcon && (\n                        <q2-btn\n                            label={loc(this.label || 'tecton.element.section.defaultToggleLabel')}\n                            ariaExpanded={`${!!this.expanded}`}\n                            ariaControls={this.contentId}\n                            test-id=\"toggleButton\"\n                            hide-label\n                            onClick={this.onHeaderClick}\n                        >\n                            <q2-icon type=\"chevron-up\" />\n                        </q2-btn>\n                    )}\n                </header>\n                <div\n                    class={wrapperClasses.join(' ')}\n                    id={this.contentId}\n                    aria-labelledby={this.titleId}\n                    role=\"region\"\n                    onTransitionEnd={this.onTransitionEnd}\n                    style={\n                        this.collapsible && {\n                            height: this.contentHeight,\n                        }\n                    }\n                >\n                    <div\n                        ref={el => (this.contentContainer = el)}\n                        class=\"content\"\n                        tabindex=\"-1\"\n                    >\n                        <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n                    </div>\n                </div>\n            </section>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-section.js","sourceRoot":"","sources":["../../../src/components/q2-section/q2-section.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n    Component,\n    ComponentInterface,\n    Prop,\n    Element,\n    Listen,\n    State,\n    Watch,\n    h,\n    Event,\n    EventEmitter,\n    Method,\n} from '@stencil/core';\nimport { isEventFromElement, loc, nextPaint, overrideFocus, resizeIframe } from 'src/utils';\n\n@Component({ tag: 'q2-section', shadow: true, styleUrl: 'q2-section.scss' })\nexport class Q2Section implements ComponentInterface {\n    // #region Own Properties\n\n    contentContainer: HTMLDivElement;\n    contentId: string = 'content';\n    contentSlot: HTMLSlotElement;\n    contentSlotMutationObserver: MutationObserver;\n    headerSlot: HTMLSlotElement;\n    headerSlotMutationObserver: MutationObserver;\n    headerSlotWrapper: HTMLDivElement;\n    resizerFn: NodeJS.Timeout | undefined;\n    titleId: string = 'title';\n\n    // #endregion\n    // #region Host HTML Element\n\n    @Element()\n    hostElement: HTMLElement;\n\n    // #endregion\n    // #region State Properties\n\n    @State()\n    contentHeight: string;\n\n    @State()\n    hasYieldedHeader: boolean = false;\n\n    @State()\n    hideContent: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Determines if the section is collapsible. */\n    @Prop({ reflect: true })\n    collapsible: boolean;\n\n    /** Indicates if the `q2-section` is in an expanded state or not. */\n    @Prop({ reflect: true, mutable: true })\n    expanded: boolean;\n\n    /**\n     * The text to display above the `q2-section`. Renders as an `<h2>` element.\n     *\n     * It is also used to provided an `aria-label` for the toggle button when the component is collapsible.\n     *\n     * @warning\n     * If you are providing a custom header, setting this property is still strongly encouraged for the purposes of\n     * accessibility.\n     */\n    @Prop({ reflect: true })\n    label: string;\n\n    /** Determines if the collapse chevron icon should show in the `q2-section` header. */\n    @Prop({ reflect: true })\n    noCollapseIcon: boolean;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when the section is expanded or collapsed.\n     * @legacyEvent\n     */\n    @Event()\n    change: EventEmitter<{ expanded: boolean }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.removeHeaderSlotListener();\n        this.removeContentSlotListener();\n    }\n\n    componentWillLoad() {\n        this.onHeaderSlotChange();\n        const { collapsible, expanded } = this;\n        this.contentHeight = collapsible && expanded ? undefined : '0px';\n        this.hideContent = !expanded;\n    }\n\n    componentDidLoad() {\n        this.addHeaderSlotListener();\n        this.addContentSlotListener();\n        overrideFocus(this.hostElement);\n    }\n\n    // #endregion\n    // #region Listeners\n\n    @Listen('change')\n    defaultChangeHandler(event: CustomEvent) {\n        if (event.target === this.hostElement && !this.hostElement.onchange && !!event.detail) {\n            this.expanded = event.detail.expanded;\n        }\n    }\n\n    @Listen('focus')\n    delegateFocus(event: FocusEvent) {\n        if (!isEventFromElement(event, this.hostElement)) return;\n        this.contentContainer.focus();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('collapsible')\n    collapsibleObserver() {\n        this.contentHeight = this.currentHeight;\n    }\n\n    @Watch('expanded')\n    async expandedObserver(expanded: boolean) {\n        this.clearResizeInterval();\n        this.resizerFn = setInterval(resizeIframe, 5);\n\n        if (expanded) {\n            this.expandSection();\n        } else {\n            this.collapseSection();\n        }\n    }\n\n    // #endregion\n    // #region Test Methods API\n\n    /**\n     * A test method to collapse section.\n     *\n     * @testOnly\n     */\n    @Method()\n    async collapse() {\n        if (!this.collapsible || !this.expanded) return;\n        const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    /**\n     * A test method to expand section.\n     *\n     * @testOnly\n     */\n    @Method()\n    async expand() {\n        if (!this.collapsible || this.expanded) return;\n        const btn = this.hostElement.shadowRoot.querySelector('[test-id=\"toggleButton\"]');\n        (btn as HTMLQ2BtnElement)?.click();\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get contentContainerHeight() {\n        return `${this.contentContainer.offsetHeight || 0}px`;\n    }\n\n    get currentHeight() {\n        const { collapsible, expanded } = this;\n        if (!collapsible) {\n            return null;\n        } else if (expanded) {\n            return this.contentContainerHeight;\n        } else {\n            return '0';\n        }\n    }\n\n    addContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.addEventListener('slotchange', resizeIframe);\n            return;\n        }\n\n        const observer = new MutationObserver(resizeIframe);\n        observer.observe(this.contentContainer, { childList: true, subtree: true });\n        this.contentSlotMutationObserver = observer;\n    };\n\n    addHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.addEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        const observer = new MutationObserver(this.onHeaderSlotChange);\n        observer.observe(this.headerSlotWrapper, { childList: true });\n        this.headerSlotMutationObserver = observer;\n    };\n\n    clearResizeInterval = () => {\n        this.resizerFn && clearInterval(this.resizerFn);\n    };\n\n    async collapseSection() {\n        this.contentHeight = this.contentContainerHeight;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    async expandSection() {\n        this.hideContent = false;\n        await nextPaint(() => {\n            this.contentHeight = this.currentHeight;\n        });\n    }\n\n    onHeaderClick = () => {\n        this.change.emit({\n            expanded: !this.expanded,\n        });\n    };\n\n    onHeaderSlotChange = () => {\n        const hasSlotContent = !!this.hostElement.querySelector('[slot=\"q2-section-header\"]');\n\n        if (this.hasYieldedHeader !== hasSlotContent) {\n            this.hasYieldedHeader = !!hasSlotContent;\n        }\n    };\n\n    onTransitionEnd = () => {\n        if (this.expanded) {\n            this.contentHeight = undefined;\n        } else {\n            this.hideContent = true;\n        }\n\n        setTimeout(() => {\n            // This gives enough time for all values to get passed over\n            // Previously, the interval was never cleared and the fn was called indefinitely then filtered\n            // Will revisit in TCT-599\n            this.clearResizeInterval();\n        }, 1000);\n    };\n\n    removeContentSlotListener = () => {\n        if (this.contentSlot) {\n            this.contentSlot.removeEventListener('slotchange', resizeIframe);\n            return;\n        }\n        this.contentSlotMutationObserver.disconnect();\n    };\n\n    removeHeaderSlotListener = () => {\n        if (this.headerSlot) {\n            this.headerSlot.removeEventListener('slotchange', this.onHeaderSlotChange);\n            return;\n        }\n\n        this.headerSlotMutationObserver.disconnect();\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const hasHeader = this.label || this.hasYieldedHeader;\n        const wrapperClasses = ['content-wrapper'];\n        const { collapsible, hideContent, contentHeight } = this;\n        if (collapsible) {\n            if (hideContent) wrapperClasses.push('is-closed');\n            else if (contentHeight) wrapperClasses.push('is-transitioning');\n        }\n\n        const showDefaultHeader = !this.hasYieldedHeader && !!this.label;\n\n        return (\n            <section class=\"wrapper\">\n                <header class={hasHeader ? 'has-header' : ''}>\n                    <div\n                        class=\"header-content\"\n                        id={this.titleId}\n                        onClick={this.collapsible && this.onHeaderClick}\n                    >\n                        {showDefaultHeader && <h2 class=\"title\">{loc(this.label)}</h2>}\n                        <div\n                            ref={el => (this.headerSlotWrapper = el)}\n                            class=\"header-slot-wrapper\"\n                        >\n                            <slot\n                                ref={(el: HTMLSlotElement) => (this.headerSlot = el)}\n                                name=\"q2-section-header\"\n                            />\n                        </div>\n                    </div>\n                    {this.collapsible && !this.noCollapseIcon && (\n                        <q2-btn\n                            label={loc(this.label || 'tecton.element.section.defaultToggleLabel')}\n                            ariaExpanded={`${!!this.expanded}`}\n                            ariaControls={this.contentId}\n                            test-id=\"toggleButton\"\n                            hide-label\n                            onClick={this.onHeaderClick}\n                        >\n                            <q2-icon type=\"chevron-up\" />\n                        </q2-btn>\n                    )}\n                </header>\n                <div\n                    class={wrapperClasses.join(' ')}\n                    id={this.contentId}\n                    aria-labelledby={this.titleId}\n                    role=\"region\"\n                    onTransitionEnd={this.onTransitionEnd}\n                    style={\n                        this.collapsible && {\n                            height: this.contentHeight,\n                        }\n                    }\n                >\n                    <div\n                        ref={el => (this.contentContainer = el)}\n                        class=\"content\"\n                        tabindex=\"-1\"\n                    >\n                        <slot ref={(el: HTMLSlotElement) => (this.contentSlot = el)} />\n                    </div>\n                </div>\n            </section>\n        );\n    }\n\n    // #endregion\n}\n"]}

package/dist/collection/components/q2-section/test/q2-section-test.e2e.js

@@ -1,14 +1,5 @@
 import { setTestStrings, setup, dispatchEvent, getListOfStyleCompilationIssues, evaluateA11y } from "../../../utils/helpers";
 describe('q2-section', () => {
-    describe('[A11y] guideline compliance', () => {
-        it('Does not have accessibility violations with only label', async () => {
-            const page = await setup({
-                html: `<q2-section>Some content to provide height.</q2-section>`,
-            });
-            const hasViolations = await evaluateA11y(page);
-            expect(hasViolations).toBe(false);
-        });
-    });
     it('properly compiles CSS vars and functions', async () => {
         const page = await setup({ html: '<q2-section></q2-section>' });
         expect(await getListOfStyleCompilationIssues(page, 'q2-section')).toHaveLength(0);
@@ -401,5 +392,44 @@ describe('q2-section', () => {
             expect(contained).toBe(true);
         });
     });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations with default configuration', async () => {
+                const page = await setup({
+                    html: `<q2-section>Some content to provide height.</q2-section>`,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+            it('does not have accessibility violations when expandable', async () => {
+                const page = await setup({
+                    html: `
+                        <q2-section collapsible expanded label="My section">
+                            Some content to provide height.
+                        </q2-section>
+                    `,
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
+    describe('test methods', () => {
+        it('call expand and collapse method ', async function () {
+            const page = await setup({ html: `<q2-section collapsible><h1>Hello</h1></q2-section>` });
+            const section = await page.find('q2-section');
+            await page.waitForChanges();
+            const toggleSpy = await section.spyOnEvent('change');
+            await section.callMethod('expand');
+            expect(toggleSpy).toHaveReceivedEventDetail({ expanded: true });
+            expect(await section.getProperty('expanded')).toBe(true);
+            await section.callMethod('collapse');
+            expect(toggleSpy).toHaveReceivedEventDetail({ expanded: false });
+            expect(await section.getProperty('expanded')).toBe(false);
+        });
+    });
 });
 //# sourceMappingURL=q2-section-test.e2e.js.map