q2-tecton-elements 1.54.5 → 1.55.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-modal.js","sourceRoot":"","sources":["../../../../src/components/q2-modal/q2-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, ComponentInterface, Prop, Method, h, State, Event, EventEmitter, Element } from '@stencil/core';\nimport { ModalOption, ModalResponse } from 'q2-tecton-common/lib/utility/modal';\nimport { debounce, hasSlotContent, waitForNextPaint } from 'src/utils';\nimport sanitizeHTMLString from '@/utils/sanitize-html-string';\n\n@Component({ tag: 'q2-modal', shadow: true, styleUrl: 'q2-modal.scss' })\nexport class Q2Modal implements ComponentInterface {\n    // #region Own Properties\n\n    // to prevent background scroll when modal scrolls\n    bodyOverflow: string = '';\n    contentElement: HTMLDivElement;\n    debouncedScroll: () => void;\n    dialogElement: HTMLDialogElement;\n    scheduledAfterRender: (() => void)[] = [];\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    maxActionButtons: number = 4;\n\n    @State()\n    renderStatus: 'is-open' | 'is-closing' | 'is-opening' = 'is-closing';\n\n    // #endregion\n    // #region Public Property API\n\n    /**\n     * Controls visibility of close button on top right corner.\n     */\n    @Prop({ reflect: true })\n    closable: boolean = true;\n\n    /**\n     * Allows HTML markup as modal content, but it'll be sanitized as needed for security purpose.\n     */\n    @Prop()\n    customMarkup: string;\n\n    /**\n     * Plain text, description of the modal.\n     */\n    @Prop()\n    description: string;\n\n    /**\n     * Icon type, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    icon: string;\n\n    /**\n     * Icon fill color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconFillColor: string;\n\n    /**\n     * Icon primary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokePrimary: string;\n\n    /**\n     * Icon secondary stroke color, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeSecondary: string;\n\n    /**\n     * Icon secondary stroke width, [See Icon document](https://tecton.q2developer.com/design-system/q2-icon).\n     */\n    @Prop()\n    iconStrokeWidth: string;\n\n    /**\n     * Image URL in modal content, it renders with 100% width.\n     */\n    @Prop({ reflect: true })\n    imageSrc: string;\n\n    /**\n     * Plain text, title of the modal on top area.\n     */\n    @Prop({ mutable: true, reflect: true })\n    title: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Emitted when one of action button is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter;\n\n    /**\n     * Emitted when modal is closed.\n     */\n    @Event()\n    tctClose: EventEmitter;\n\n    /**\n     * Emitted when the modal is opened.\n     */\n    @Event()\n    tctOpen: EventEmitter;\n\n    /**\n     * Emitted when the modal has finished rendering.\n     * @private\n     */\n    @Event({ bubbles: false })\n    tctReady: EventEmitter;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.dialogElement.removeEventListener('cancel', this.onCancel);\n        this.contentElement?.removeEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidLoad() {\n        this.dialogElement.addEventListener('cancel', this.onCancel);\n        this.tctReady.emit();\n        this.bodyOverflow = document.body.style.overflow;\n        this.debouncedScroll = debounce(this.onContentScroll, 100);\n        this.contentElement.addEventListener('scroll', this.debouncedScroll);\n    }\n\n    componentDidRender(): void {\n        this.scheduledAfterRender?.forEach(fn => fn());\n        this.scheduledAfterRender = [];\n    }\n\n    // #endregion\n    // #region Public Methods API\n\n    @Method()\n    async closeModal(data?: ModalResponse) {\n        this.tctClose.emit(data);\n        this.renderStatus = 'is-closing';\n        document.body.style.overflow = this.bodyOverflow;\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-closing') return;\n                this.dialogElement.close();\n                this.renderStatus = null;\n            },\n            { once: true }\n        );\n    }\n\n    @Method()\n    async openModal(option?: ModalOption) {\n        if (this.dialogElement?.open) return;\n        this.tctOpen.emit(option);\n        await waitForNextPaint();\n        // overwrite the properties if option provided\n        if (option) {\n            this.title = option?.title || this.title;\n            this.description = option?.description || this.description;\n            this.imageSrc = option?.imageSrc || this.imageSrc;\n            this.icon = option?.icon || this.icon;\n            this.iconStrokePrimary = option?.iconStrokePrimary || this.iconStrokePrimary;\n            this.iconStrokeSecondary = option?.imageSrc || this.imageSrc;\n            this.iconFillColor = option?.iconFillColor || this.iconFillColor;\n            this.iconStrokeWidth = option?.iconStrokeWidth || this.iconStrokeWidth;\n            this.description = option?.description || this.description;\n        }\n        this.dialogElement.showModal();\n        this.dialogElement.open = true;\n        document.body.style.overflow = 'hidden';\n        this.initializeModal();\n        this.renderStatus = 'is-opening';\n        this.dialogElement.addEventListener(\n            'transitionend',\n            () => {\n                if (this.renderStatus !== 'is-opening') return;\n                this.renderStatus = 'is-open';\n            },\n            { once: true }\n        );\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    // to be removed\n\n    iconStyle = () => {\n        const styleObject = {};\n        if (this.iconStrokePrimary) styleObject['--tct-icon-stroke-primary'] = this.iconStrokePrimary;\n        if (this.iconStrokeSecondary) styleObject['--tct-icon-stroke-secondary'] = this.iconStrokeSecondary;\n        if (this.iconFillColor) styleObject['--tct-icon-fill'] = this.iconFillColor;\n        if (this.iconStrokeWidth) styleObject['--tct-icon-stroke-width'] = this.iconStrokeWidth;\n        return styleObject;\n    };\n\n    initializeModal = () => {\n        // limits 4 buttons in action slot\n        this.hostElement.querySelectorAll<HTMLElement>('[slot=\"action\"]').forEach((el, i) => {\n            if (i >= this.maxActionButtons) {\n                console.warn(\n                    `q2-modal allows up to ${this.maxActionButtons} action buttons, [${el.getAttribute('label') || el.textContent}] button is now hidden.`\n                );\n                el.hidden = true;\n            }\n        });\n        this.contentElement.scrollTo({ top: 0 });\n        this.debouncedScroll();\n    };\n\n    onCancel = (event: Event) => {\n        event.preventDefault();\n        this.closeModal();\n    };\n\n    onClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        const eventTarget = event.target as HTMLElement;\n        if (!(eventTarget instanceof HTMLElement)) return;\n        const slot = eventTarget.getAttribute('slot');\n        if (slot === 'action') {\n            this.tctClick.emit({ value: eventTarget.dataset.value });\n            this.onCancel(event);\n        } else {\n            const isInContent = !!eventTarget.closest('.interior , q2-modal');\n            if (isInContent) return;\n            this.onCancel(event);\n        }\n    };\n\n    onContentScroll = () => {\n        const scrollHeight = this.contentElement.scrollHeight;\n        const scrollTop = Math.ceil(this.contentElement.scrollTop);\n        const contentHeight = Math.ceil(this.contentElement.getBoundingClientRect()?.height || 0);\n        // to show bottom gradient when more contents available\n        if (scrollHeight > contentHeight) {\n            scrollHeight <= contentHeight + scrollTop\n                ? this.contentElement.classList.remove('more-gradient')\n                : this.contentElement.classList.add('more-gradient');\n        } else {\n            this.contentElement.classList.remove('more-gradient');\n        }\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        const interiorClasses = `interior`;\n        const renderStatus = `${this.renderStatus || ''}`;\n        return (\n            <dialog\n                ref={el => (this.dialogElement = el)}\n                class={renderStatus}\n                onClick={this.onClick}\n            >\n                <div class={interiorClasses}>\n                    {this.title && (\n                        <header>\n                            {this.title && <h2 class=\"title\">{this.title}</h2>}\n                            {!!this.closable && (\n                                <q2-btn\n                                    class=\"btn-close\"\n                                    test-id=\"btnClose\"\n                                    onClick={this.onCancel}\n                                    label=\"tecton.element.modal.close\"\n                                    hide-label\n                                >\n                                    <q2-icon type=\"close\" />\n                                </q2-btn>\n                            )}\n                        </header>\n                    )}\n                    <div\n                        class=\"content\"\n                        ref={el => (this.contentElement = el)}\n                    >\n                        {this.icon && (\n                            <div class=\"icon\">\n                                <q2-icon\n                                    type={this.icon}\n                                    style={this.iconStyle()}\n                                ></q2-icon>\n                            </div>\n                        )}\n                        {this.imageSrc && (\n                            <div class=\"image\">\n                                <img src={this.imageSrc}></img>\n                            </div>\n                        )}\n                        {hasSlotContent(this.hostElement, 'content') && <slot name=\"content\"></slot>}\n                        {this.description && <p class=\"description\">{this.description}</p>}\n                        {this.customMarkup && (\n                            <p\n                                class=\"customMarkup\"\n                                innerHTML={sanitizeHTMLString(this.customMarkup)}\n                            ></p>\n                        )}\n                    </div>\n                    <footer>\n                        <q2-action-group full-width>\n                            <slot name=\"action\"></slot>\n                        </q2-action-group>\n                    </footer>\n                </div>\n            </dialog>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -0,0 +1,102 @@
+import { setup, getListOfStyleCompilationIssues, evaluateA11y } from "../../../utils/helpers";
+describe('q2-modal', () => {
+    it('properly compiles CSS vars and functions', async () => {
+        const page = await setup({ html: '<q2-modal></q2-modal>' });
+        expect(await getListOfStyleCompilationIssues(page, 'q2-modal')).toHaveLength(0);
+    });
+    describe('@Props', () => {
+        it('when title provided', async () => {
+            const page = await setup({
+                html: '<q2-modal title="Awesome title"></q2-modal>',
+            });
+            const modalElement = await page.find('q2-modal');
+            await modalElement.callMethod('openModal');
+            const title = await page.find('q2-modal >>> .title');
+            expect(title.innerText).toEqual('Awesome title');
+        });
+        it('when icon provided', async () => {
+            const page = await setup({
+                html: '<q2-modal icon="success-filled"></q2-modal>',
+            });
+            const modalElement = await page.find('q2-modal');
+            await modalElement.callMethod('openModal');
+            const icon = await page.find('q2-modal >>> q2-icon');
+            expect(await icon.getProperty('type')).toEqual('success-filled');
+        });
+        it('when description provided', async () => {
+            const page = await setup({
+                html: '<q2-modal description="Awesome description"></q2-modal>',
+            });
+            const modalElement = await page.find('q2-modal');
+            await modalElement.callMethod('openModal');
+            const description = await page.find('q2-modal >>> .description');
+            expect(description.innerText).toEqual('Awesome description');
+        });
+        it('when imageSrc provided', async () => {
+            const page = await setup({
+                html: '<q2-modal image-src="https://www.q2.com/hubfs/Imported_Blog_Media/Dodgeball-Blog_960x720.png"></q2-modal>',
+            });
+            const modalElement = await page.find('q2-modal');
+            await modalElement.callMethod('openModal');
+            const image = await page.find('q2-modal >>> img');
+            expect(await image.getProperty('src')).toEqual('https://www.q2.com/hubfs/Imported_Blog_Media/Dodgeball-Blog_960x720.png');
+        });
+    });
+    describe('@Events', () => {
+        it('emits tctOpen when action button clicked ', async function () {
+            const page = await setup({
+                html: `<q2-modal title="Awesome title">
+                    <q2-btn slot="action" intent="workflow-primary" label="Submit" data-value="Submit"></q2-btn>
+                </q2-modal>`,
+            });
+            const modalElement = await page.find('q2-modal');
+            const spy = await modalElement.spyOnEvent('tctOpen');
+            await modalElement.callMethod('openModal');
+            await page.waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+        it('emits tctClick when action button clicked ', async function () {
+            const page = await setup({
+                html: `<q2-modal title="Awesome title">
+                    <q2-btn slot="action" intent="workflow-primary" label="Submit" data-value="Submit"></q2-btn>
+                </q2-modal>`,
+            });
+            const modalElement = await page.find('q2-modal');
+            await modalElement.callMethod('openModal');
+            const spy = await modalElement.spyOnEvent('tctClick');
+            const button = await page.find('q2-btn[label="Submit"]');
+            await button.click();
+            await page.waitForChanges();
+            expect(spy).toHaveReceivedEventDetail({ value: 'Submit' });
+        });
+        it('emits tctClose when action button clicked ', async function () {
+            const page = await setup({
+                html: `<q2-modal title="Awesome title">
+                    <q2-btn slot="action" intent="workflow-primary" label="Submit" data-value="Submit"></q2-btn>
+                </q2-modal>`,
+            });
+            const modalElement = await page.find('q2-modal');
+            await modalElement.callMethod('openModal');
+            const spy = await modalElement.spyOnEvent('tctClose');
+            const button = await page.find('q2-btn[label="Submit"]');
+            await button.click();
+            await page.waitForChanges();
+            expect(spy).toHaveReceivedEventTimes(1);
+        });
+    });
+    describe('Accessibility', () => {
+        describe('aXe DevTools', () => {
+            it('does not have accessibility violations', async () => {
+                const page = await setup({
+                    html: '<q2-modal title="Awesome title"></q2-message>',
+                });
+                const hasViolations = await evaluateA11y(page);
+                expect(hasViolations).toBe(false);
+            });
+        });
+        describe('Accessibility Tree', () => { });
+        describe('Keyboard Controls', () => { });
+        describe('Other', () => { });
+    });
+});
+//# sourceMappingURL=q2-modal-test.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-modal-test.e2e.js","sourceRoot":"","sources":["../../../../../src/components/q2-modal/test/q2-modal-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { setup, getListOfStyleCompilationIssues, evaluateA11y } from '@/utils/helpers';\n\ndescribe('q2-modal', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-modal></q2-modal>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-modal')).toHaveLength(0);\n    });\n\n    describe('@Props', () => {\n        it('when title provided', async () => {\n            const page = await setup({\n                html: '<q2-modal title=\"Awesome title\"></q2-modal>',\n            });\n            const modalElement = await page.find('q2-modal');\n            await modalElement.callMethod('openModal');\n            const title = await page.find('q2-modal >>> .title');\n            expect(title.innerText).toEqual('Awesome title');\n        });\n\n        it('when icon provided', async () => {\n            const page = await setup({\n                html: '<q2-modal icon=\"success-filled\"></q2-modal>',\n            });\n            const modalElement = await page.find('q2-modal');\n            await modalElement.callMethod('openModal');\n            const icon = await page.find('q2-modal >>> q2-icon');\n            expect(await icon.getProperty('type')).toEqual('success-filled');\n        });\n\n        it('when description provided', async () => {\n            const page = await setup({\n                html: '<q2-modal description=\"Awesome description\"></q2-modal>',\n            });\n            const modalElement = await page.find('q2-modal');\n            await modalElement.callMethod('openModal');\n            const description = await page.find('q2-modal >>> .description');\n            expect(description.innerText).toEqual('Awesome description');\n        });\n\n        it('when imageSrc provided', async () => {\n            const page = await setup({\n                html: '<q2-modal image-src=\"https://www.q2.com/hubfs/Imported_Blog_Media/Dodgeball-Blog_960x720.png\"></q2-modal>',\n            });\n            const modalElement = await page.find('q2-modal');\n            await modalElement.callMethod('openModal');\n            const image = await page.find('q2-modal >>> img');\n            expect(await image.getProperty('src')).toEqual(\n                'https://www.q2.com/hubfs/Imported_Blog_Media/Dodgeball-Blog_960x720.png'\n            );\n        });\n    });\n\n    describe('@Events', () => {\n        it('emits tctOpen when action button clicked ', async function (): Promise<void> {\n            const page = await setup({\n                html: `<q2-modal title=\"Awesome title\">\n                    <q2-btn slot=\"action\" intent=\"workflow-primary\" label=\"Submit\" data-value=\"Submit\"></q2-btn>\n                </q2-modal>`,\n            });\n            const modalElement = await page.find('q2-modal');\n            const spy = await modalElement.spyOnEvent('tctOpen');\n            await modalElement.callMethod('openModal');\n            await page.waitForChanges();\n            expect(spy).toHaveReceivedEventTimes(1);\n        });\n\n        it('emits tctClick when action button clicked ', async function (): Promise<void> {\n            const page = await setup({\n                html: `<q2-modal title=\"Awesome title\">\n                    <q2-btn slot=\"action\" intent=\"workflow-primary\" label=\"Submit\" data-value=\"Submit\"></q2-btn>\n                </q2-modal>`,\n            });\n            const modalElement = await page.find('q2-modal');\n            await modalElement.callMethod('openModal');\n            const spy = await modalElement.spyOnEvent('tctClick');\n            const button = await page.find('q2-btn[label=\"Submit\"]');\n            await button.click();\n            await page.waitForChanges();\n            expect(spy).toHaveReceivedEventDetail({ value: 'Submit' });\n        });\n\n        it('emits tctClose when action button clicked ', async function (): Promise<void> {\n            const page = await setup({\n                html: `<q2-modal title=\"Awesome title\">\n                    <q2-btn slot=\"action\" intent=\"workflow-primary\" label=\"Submit\" data-value=\"Submit\"></q2-btn>\n                </q2-modal>`,\n            });\n            const modalElement = await page.find('q2-modal');\n            await modalElement.callMethod('openModal');\n            const spy = await modalElement.spyOnEvent('tctClose');\n            const button = await page.find('q2-btn[label=\"Submit\"]');\n            await button.click();\n            await page.waitForChanges();\n            expect(spy).toHaveReceivedEventTimes(1);\n        });\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: '<q2-modal title=\"Awesome title\"></q2-message>',\n                });\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-modal/test/q2-modal-test.spec.js

@@ -0,0 +1,127 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Q2Modal } from "../q2-modal";
+function createNewSpecPage(props) {
+    let htmlProps = '';
+    if (!!props.title) {
+        htmlProps += ` title="${props.title}"`;
+    }
+    if (!!props.description) {
+        htmlProps += ` description="${props.description}"`;
+    }
+    if (!!props.iconType) {
+        htmlProps += ` icon-type="${props.iconType}"`;
+    }
+    if (!!props.imageSrc) {
+        htmlProps += ` imageSrc="${props.imageSrc}"`;
+    }
+    if (!!props.closable) {
+        htmlProps += ` closable=""`;
+    }
+    return newSpecPage({
+        components: [Q2Modal],
+        html: `<q2-modal ${htmlProps}>
+            <q2-btn slot="action" intent="workflow-primary" label="Submit" data-value="Submit"></q2-btn>
+            <q2-btn slot="action" intent="workflow-secondary" label="Cancel" data-value="Cancel"></q2-btn>
+        </q2-modal>`,
+    });
+}
+describe('q2-modal', () => {
+    let specPage;
+    let modalElement;
+    const imageSrc = 'https://www.q2.com/hubfs/Imported_Blog_Media/Dodgeball-Blog_960x720.png';
+    it('renders', async () => {
+        specPage = await createNewSpecPage({
+            title: 'Awesome modal title',
+            description: 'Awesome modal description',
+            imageSrc,
+        });
+        expect(specPage.root).toEqualHtml(`
+            <q2-modal closable="" description="Awesome modal description" imagesrc="${imageSrc}" title="Awesome modal title">
+                <mock:shadow-root>
+                    <dialog class="is-closing">
+                        <div class="interior">
+                            <header>
+                                <h2 class="title">Awesome modal title</h2>
+                                <q2-btn class="btn-close" hide-label="" label="tecton.element.modal.close" test-id="btnClose">
+                                    <q2-icon type="close"></q2-icon>
+                                </q2-btn>
+                            </header>
+                            <div class="content">
+                                <p class="description">Awesome modal description</p>
+                            </div>
+                            <footer>
+                                <q2-action-group full-width="">
+
+                                    <slot name="action"></slot>
+                                </q2-action-group
+                            </footer>
+                        </div>
+                    </dialog>
+                </mock:shadow-root>
+                <q2-btn data-value="Submit" intent="workflow-primary" label="Submit" slot="action"></q2-btn>
+                <q2-btn data-value="Cancel" intent="workflow-secondary" label="Cancel" slot="action"></q2-btn>
+            </q2-modal>
+        `);
+    });
+    describe('Props', () => {
+        it('should render with properties', async () => {
+            specPage = await createNewSpecPage({
+                title: 'Awesome modal title',
+                description: 'Awesome modal description',
+                iconType: 'success-filled',
+                imageSrc,
+            });
+            modalElement = specPage.root;
+            expect(modalElement.getAttribute('title')).toBe('Awesome modal title');
+            expect(modalElement.getAttribute('description')).toBe('Awesome modal description');
+            expect(modalElement.getAttribute('icon-type')).toBe('success-filled');
+            expect(modalElement.getAttribute('imageSrc')).toBe(imageSrc);
+        });
+    });
+    describe('Events', () => {
+        describe('click', () => {
+            it('emits tctReady when load', async () => {
+                specPage = await createNewSpecPage({
+                    title: 'Awesome modal title',
+                    description: 'Awesome modal description',
+                    iconType: 'success-filled',
+                    imageSrc,
+                });
+                const tctReady = jest.spyOn(specPage.rootInstance.tctReady, 'emit');
+                specPage.rootInstance.componentDidLoad();
+                expect(tctReady).toHaveBeenCalled();
+            });
+        });
+    });
+    describe('Local Methods', () => {
+        describe('Methods', () => {
+            describe('closeModal()', () => {
+                it('emits tctClose', async () => {
+                    specPage = await createNewSpecPage({
+                        title: 'Awesome modal title',
+                        description: 'Awesome modal description',
+                        iconType: 'success-filled',
+                        imageSrc,
+                    });
+                    const tctClose = jest.spyOn(specPage.rootInstance.tctClose, 'emit');
+                    specPage.rootInstance.closeModal();
+                    expect(tctClose).toHaveBeenCalled();
+                });
+            });
+            describe('openModal()', () => {
+                it('emits tctOpen', async () => {
+                    specPage = await createNewSpecPage({
+                        title: 'Awesome modal title',
+                        description: 'Awesome modal description',
+                        iconType: 'success-filled',
+                        imageSrc,
+                    });
+                    const tctOpen = jest.spyOn(specPage.rootInstance.tctOpen, 'emit');
+                    specPage.rootInstance.openModal();
+                    expect(tctOpen).toHaveBeenCalled();
+                });
+            });
+        });
+    });
+});
+//# sourceMappingURL=q2-modal-test.spec.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"q2-modal-test.spec.js","sourceRoot":"","sources":["../../../../../src/components/q2-modal/test/q2-modal-test.spec.ts"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { Q2Modal } from '../q2-modal';\n\nfunction createNewSpecPage(props: {\n    title?: string;\n    description?: string;\n    iconType?: string;\n    imageSrc?: string;\n    closable?: boolean;\n}) {\n    let htmlProps: string = '';\n    if (!!props.title) {\n        htmlProps += ` title=\"${props.title}\"`;\n    }\n    if (!!props.description) {\n        htmlProps += ` description=\"${props.description}\"`;\n    }\n    if (!!props.iconType) {\n        htmlProps += ` icon-type=\"${props.iconType}\"`;\n    }\n    if (!!props.imageSrc) {\n        htmlProps += ` imageSrc=\"${props.imageSrc}\"`;\n    }\n    if (!!props.closable) {\n        htmlProps += ` closable=\"\"`;\n    }\n\n    return newSpecPage({\n        components: [Q2Modal],\n        html: `<q2-modal ${htmlProps}>\n            <q2-btn slot=\"action\" intent=\"workflow-primary\" label=\"Submit\" data-value=\"Submit\"></q2-btn>\n            <q2-btn slot=\"action\" intent=\"workflow-secondary\" label=\"Cancel\" data-value=\"Cancel\"></q2-btn>\n        </q2-modal>`,\n    });\n}\n\ndescribe('q2-modal', () => {\n    let specPage;\n    let modalElement;\n    const imageSrc = 'https://www.q2.com/hubfs/Imported_Blog_Media/Dodgeball-Blog_960x720.png';\n\n    it('renders', async () => {\n        specPage = await createNewSpecPage({\n            title: 'Awesome modal title',\n            description: 'Awesome modal description',\n            imageSrc,\n        });\n\n        expect(specPage.root).toEqualHtml(`\n            <q2-modal closable=\"\" description=\"Awesome modal description\" imagesrc=\"${imageSrc}\" title=\"Awesome modal title\">\n                <mock:shadow-root>\n                    <dialog class=\"is-closing\">\n                        <div class=\"interior\">\n                            <header>\n                                <h2 class=\"title\">Awesome modal title</h2>\n                                <q2-btn class=\"btn-close\" hide-label=\"\" label=\"tecton.element.modal.close\" test-id=\"btnClose\">\n                                    <q2-icon type=\"close\"></q2-icon>\n                                </q2-btn>\n                            </header>\n                            <div class=\"content\">\n                                <p class=\"description\">Awesome modal description</p>\n                            </div>\n                            <footer>\n                                <q2-action-group full-width=\"\">\n\n                                    <slot name=\"action\"></slot>\n                                </q2-action-group\n                            </footer>\n                        </div>\n                    </dialog>\n                </mock:shadow-root>\n                <q2-btn data-value=\"Submit\" intent=\"workflow-primary\" label=\"Submit\" slot=\"action\"></q2-btn>\n                <q2-btn data-value=\"Cancel\" intent=\"workflow-secondary\" label=\"Cancel\" slot=\"action\"></q2-btn>\n            </q2-modal>\n        `);\n    });\n\n    describe('Props', () => {\n        it('should render with properties', async () => {\n            specPage = await createNewSpecPage({\n                title: 'Awesome modal title',\n                description: 'Awesome modal description',\n                iconType: 'success-filled',\n                imageSrc,\n            });\n            modalElement = specPage.root;\n            expect(modalElement.getAttribute('title')).toBe('Awesome modal title');\n            expect(modalElement.getAttribute('description')).toBe('Awesome modal description');\n            expect(modalElement.getAttribute('icon-type')).toBe('success-filled');\n            expect(modalElement.getAttribute('imageSrc')).toBe(imageSrc);\n        });\n    });\n\n    describe('Events', () => {\n        describe('click', () => {\n            it('emits tctReady when load', async () => {\n                specPage = await createNewSpecPage({\n                    title: 'Awesome modal title',\n                    description: 'Awesome modal description',\n                    iconType: 'success-filled',\n                    imageSrc,\n                });\n                const tctReady = jest.spyOn(specPage.rootInstance.tctReady, 'emit');\n                specPage.rootInstance.componentDidLoad();\n                expect(tctReady).toHaveBeenCalled();\n            });\n        });\n    });\n\n    describe('Local Methods', () => {\n        describe('Methods', () => {\n            describe('closeModal()', () => {\n                it('emits tctClose', async () => {\n                    specPage = await createNewSpecPage({\n                        title: 'Awesome modal title',\n                        description: 'Awesome modal description',\n                        iconType: 'success-filled',\n                        imageSrc,\n                    });\n                    const tctClose = jest.spyOn(specPage.rootInstance.tctClose, 'emit');\n                    specPage.rootInstance.closeModal();\n                    expect(tctClose).toHaveBeenCalled();\n                });\n            });\n            describe('openModal()', () => {\n                it('emits tctOpen', async () => {\n                    specPage = await createNewSpecPage({\n                        title: 'Awesome modal title',\n                        description: 'Awesome modal description',\n                        iconType: 'success-filled',\n                        imageSrc,\n                    });\n                    const tctOpen = jest.spyOn(specPage.rootInstance.tctOpen, 'emit');\n                    specPage.rootInstance.openModal();\n                    expect(tctOpen).toHaveBeenCalled();\n                });\n            });\n        });\n    });\n});\n"]}

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

@@ -44,7 +44,7 @@ export class Q2Optgroup {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: '306cf0d06e8664a616974421d45a3083235bc03b', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '738affcd788d0f9e2fdf548f4f14d6d98b8a1c7e', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: 'cff8fad7e158854df77ad3d9cb85ea578aa0edc5', class: "q2-optgroup-options" }, h("slot", { key: 'd5daf0a105b29ace1c1f0daf5b99ec6bc8fc684c' }))));
+        return (h("div", { key: '72e78e35e909a826dbff58572ccf2eb922992ad8', class: "q2-optgroup-container", hidden: this.hidden, "aria-labelledby": this.headerId, role: "group" }, h("div", { key: '3c25d95961cf0b41f1633782647a708043033bea', class: "q2-optgroup-header", id: this.headerId }, (this.label && loc(this.label)) || ''), h("div", { key: '126e87b4daeb27564289a5c183f2fa155f8b086f', class: "q2-optgroup-options" }, h("slot", { key: '21e7c0f8f8992915b029343ce917ebb20f0579b5' }))));
     }
     static get is() { return "q2-optgroup"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;;QACnB,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAiE5B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;sBAtDgB,KAAK;wBAOH,KAAK;;;IAMzB,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\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    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-optgroup.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/q2-optgroup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAG5C,MAAM,OAAO,UAAU;;QACnB,yBAAyB;QAEzB,SAAI,GAAW,UAAU,EAAE,CAAC;QAiE5B,cAAS,GAAG,GAAG,EAAE;YACb,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAClF,CAAC,CAAC;sBAtDgB,KAAK;wBAOH,KAAK;;;IAMzB,aAAa;IACb,qCAAqC;IAErC,oBAAoB;;QAChB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAED,iBAAiB;QACb,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACzF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QAEjC,gBAAgB;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;QACjB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACxC,CAAC;IAED,aAAa;IACb,mBAAmB;IAGnB,eAAe,CAAC,QAAiB;QAC7B,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;YACvB,GAAG,CAAC,aAAa,GAAG,CAAC,CAAC,QAAQ,CAAC;QACnC,CAAC,CAAC,CAAC;IACP,CAAC;IAED,aAAa;IACb,wBAAwB;IAExB,IAAI,QAAQ;QACR,OAAO,sBAAsB,IAAI,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,IAAI,OAAO;QACP,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;IACtE,CAAC;IAMD,aAAa;IACb,yBAAyB;IAEzB,MAAM;QACF,OAAO,CACH,4DACI,KAAK,EAAC,uBAAuB,EAC7B,MAAM,EAAE,IAAI,CAAC,MAAM,qBACF,IAAI,CAAC,QAAQ,EAC9B,IAAI,EAAC,OAAO;YAEZ,4DACI,KAAK,EAAC,oBAAoB,EAC1B,EAAE,EAAE,IAAI,CAAC,QAAQ,IAEhB,CAAC,IAAI,CAAC,KAAK,IAAI,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CACpC;YACN,4DAAK,KAAK,EAAC,qBAAqB;gBAC5B,8DAAQ,CACN,CACJ,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAGJ","sourcesContent":["import { Component, h, ComponentInterface, Prop, Element, Watch, State } from '@stencil/core';\nimport { createGuid, loc } from 'src/utils';\n\n@Component({ tag: 'q2-optgroup', shadow: true, styleUrl: 'q2-optgroup.scss' })\nexport class Q2Optgroup implements ComponentInterface {\n    // #region Own Properties\n\n    guid: number = createGuid();\n    mutationObserver: MutationObserver;\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    hidden: boolean = false;\n\n    // #endregion\n    // #region Public Property API\n\n    /** Serves as the group header text. */\n    @Prop({ reflect: true })\n    disabled: boolean = false;\n\n    /** Determines whether all nested options are disabled. */\n    @Prop({ reflect: true })\n    label: string;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        const observer = new MutationObserver(this.setHidden);\n        observer.observe(this.hostElement, { childList: true, attributes: true, subtree: true });\n        this.mutationObserver = observer;\n\n        // set initially\n        this.setHidden();\n        this.disabledWatcher(this.disabled);\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('disabled')\n    disabledWatcher(disabled: boolean) {\n        this.options.forEach(opt => {\n            opt.disabledGroup = !!disabled;\n        });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    get headerId() {\n        return `q2-optgroup-header-${this.guid}`;\n    }\n\n    get options() {\n        return Array.from(this.hostElement.querySelectorAll('q2-option'));\n    }\n\n    setHidden = () => {\n        this.hidden = this.options.every(opt => opt.hidden || opt._multiSelectHidden);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    render() {\n        return (\n            <div\n                class=\"q2-optgroup-container\"\n                hidden={this.hidden}\n                aria-labelledby={this.headerId}\n                role=\"group\"\n            >\n                <div\n                    class=\"q2-optgroup-header\"\n                    id={this.headerId}\n                >\n                    {(this.label && loc(this.label)) || ''}\n                </div>\n                <div class=\"q2-optgroup-options\">\n                    <slot />\n                </div>\n            </div>\n        );\n    }\n\n    // #endregion\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"q2-optgroup-test.e2e.js","sourceRoot":"","sources":["../../../../src/components/q2-optgroup/test/q2-optgroup-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from '@/utils/helpers';\n\ndescribe('q2-select', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-select></q2-select>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-select')).toHaveLength(0);\n    });\n\n    it('renders base state', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" >\n                        <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const optGroup = await page.find('q2-optgroup');\n\n        // the component renders\n        expect(optGroup.tagName).toEqual('Q2-OPTGROUP');\n\n        const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n        // label text is rendered in header\n        expect(optGroupLabel.textContent).toEqual('Option Group');\n\n        const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n\n        // label header id matches container aria-labelledby\n        expect(optGroupLabel.id).toEqual(optGroupContainer.getAttribute('aria-labelledby'));\n\n        const assignedNodesLocalName = await page.$eval('q2-optgroup', group => {\n            return group.shadowRoot.querySelector('slot').assignedElements()[0].localName;\n        });\n\n        // slot renders with provided options\n        expect(assignedNodesLocalName).toEqual('q2-option');\n    });\n\n    it('propagates disabled state to child options', async function () {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" disabled>\n                        <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const option = await page.find('q2-option');\n        const optionDisabledByGroup = await option.getProperty('disabledGroup');\n\n        expect(optionDisabledByGroup).toEqual(true);\n    });\n\n    it('hides the container if all children are hidden', async function () {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" >\n                        <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n        let containerHidden = await optGroupContainer.getProperty('hidden');\n\n        // container hidden if all options hidden\n        expect(containerHidden).toEqual(true);\n\n        const option = await page.find('q2-option');\n\n        await option.setProperty('hidden', false);\n\n        await page.waitForChanges();\n\n        // container no longer hidden once option isn't hidden\n        // tests mutation observer fires\n        containerHidden = await optGroupContainer.getProperty('hidden');\n        expect(containerHidden).toEqual(false);\n    });\n\n    it('localizes label string', async function () {\n        const page = await setup({\n            html: `<q2-optgroup >\n                        <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        await setTestStrings(page, {\n            'q2-optGroup.label': 'My Option Group Label',\n        });\n\n        const optGroup = await page.find('q2-optgroup');\n        await optGroup.setProperty('label', 'q2-optGroup.label');\n\n        await page.waitForChanges();\n\n        const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n\n        expect(optGroupLabel.textContent).toEqual('My Option Group Label');\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-select label=\"My Select\">\n                            <q2-optgroup label=\"Option Group\" >\n                                <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                            </q2-optgroup>\n                        </q2-select>\n                    `,\n                });\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"]}
+{"version":3,"file":"q2-optgroup-test.e2e.js","sourceRoot":"","sources":["../../../../../src/components/q2-optgroup/test/q2-optgroup-test.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { evaluateA11y, getListOfStyleCompilationIssues, setTestStrings, setup } from '@/utils/helpers';\n\ndescribe('q2-select', () => {\n    it('properly compiles CSS vars and functions', async () => {\n        const page = await setup({ html: '<q2-select></q2-select>' });\n        expect(await getListOfStyleCompilationIssues(page, 'q2-select')).toHaveLength(0);\n    });\n\n    it('renders base state', async function (): Promise<void> {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" >\n                        <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const optGroup = await page.find('q2-optgroup');\n\n        // the component renders\n        expect(optGroup.tagName).toEqual('Q2-OPTGROUP');\n\n        const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n        // label text is rendered in header\n        expect(optGroupLabel.textContent).toEqual('Option Group');\n\n        const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n\n        // label header id matches container aria-labelledby\n        expect(optGroupLabel.id).toEqual(optGroupContainer.getAttribute('aria-labelledby'));\n\n        const assignedNodesLocalName = await page.$eval('q2-optgroup', group => {\n            return group.shadowRoot.querySelector('slot').assignedElements()[0].localName;\n        });\n\n        // slot renders with provided options\n        expect(assignedNodesLocalName).toEqual('q2-option');\n    });\n\n    it('propagates disabled state to child options', async function () {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" disabled>\n                        <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const option = await page.find('q2-option');\n        const optionDisabledByGroup = await option.getProperty('disabledGroup');\n\n        expect(optionDisabledByGroup).toEqual(true);\n    });\n\n    it('hides the container if all children are hidden', async function () {\n        const page = await setup({\n            html: `<q2-optgroup label=\"Option Group\" >\n                        <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        const optGroupContainer = await page.find('q2-optgroup >>> .q2-optgroup-container');\n        let containerHidden = await optGroupContainer.getProperty('hidden');\n\n        // container hidden if all options hidden\n        expect(containerHidden).toEqual(true);\n\n        const option = await page.find('q2-option');\n\n        await option.setProperty('hidden', false);\n\n        await page.waitForChanges();\n\n        // container no longer hidden once option isn't hidden\n        // tests mutation observer fires\n        containerHidden = await optGroupContainer.getProperty('hidden');\n        expect(containerHidden).toEqual(false);\n    });\n\n    it('localizes label string', async function () {\n        const page = await setup({\n            html: `<q2-optgroup >\n                        <q2-option value=\"option1\" display=\"Option Text\" hidden>Option Text</q2-option>\n                    </q2-optgroup>\n            `,\n        });\n\n        await setTestStrings(page, {\n            'q2-optGroup.label': 'My Option Group Label',\n        });\n\n        const optGroup = await page.find('q2-optgroup');\n        await optGroup.setProperty('label', 'q2-optGroup.label');\n\n        await page.waitForChanges();\n\n        const optGroupLabel = await page.find('q2-optgroup >>> .q2-optgroup-header');\n\n        expect(optGroupLabel.textContent).toEqual('My Option Group Label');\n    });\n\n    describe('Accessibility', () => {\n        describe('aXe DevTools', () => {\n            it('does not have accessibility violations', async () => {\n                const page = await setup({\n                    html: `\n                        <q2-select label=\"My Select\">\n                            <q2-optgroup label=\"Option Group\" >\n                                <q2-option value=\"option1\" display=\"Option Text\">Option Text</q2-option>\n                            </q2-optgroup>\n                        </q2-select>\n                    `,\n                });\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-option/q2-option.js

@@ -4,15 +4,6 @@ export class Q2Option {
     constructor() {
         // #endregion
         // #region Local Methods
-        this.handleTextContent = async () => {
-            if (this.multiline)
-                return;
-            const textContent = await getAllText(this.hostElement);
-            if (this.display === textContent)
-                return;
-            if (this.display && !textContent)
-                this.hostElement.textContent = loc(this.display);
-        };
         this.initDisplay = async () => {
             if (this.multiline)
                 return;
@@ -20,9 +11,11 @@ export class Q2Option {
             if (this.display)
                 this.displayProvidedAtInit = true;
             this.display = !!this.display ? loc(this.display) : textContent;
-            await this.handleTextContent();
+            this.setTextContent();
         };
         this.initMutationObserver = () => {
+            if (!('MutationObserver' in window))
+                return;
             const observer = new MutationObserver(this.mutationHandler);
             observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });
             this.mutationObserver = observer;
@@ -34,6 +27,12 @@ export class Q2Option {
             if (!this.displayProvidedAtInit)
                 this.display = allTextContent;
         };
+        this.setTextContent = () => {
+            const hasLoc = !!this.hostElement.querySelector('q2-loc');
+            if (this.multiline || hasLoc)
+                return;
+            this.hostElement.textContent = loc(this.display);
+        };
         this._multiSelectHidden = false;
         this.active = undefined;
         this.disabled = undefined;
@@ -57,26 +56,22 @@ export class Q2Option {
         this.initDisplay();
     }
     componentDidLoad() {
-        if ('MutationObserver' in window)
-            this.initMutationObserver();
+        this.initMutationObserver();
     }
     // #endregion
     // #region Watchers
-    async separatorChangedHandler(separator) {
+    displayChangedHandler() {
+        this.display = loc(this.display);
+        this.setTextContent();
+        this.displayChanged.emit({ display: this.display, value: this.value });
+    }
+    separatorChangedHandler(separator) {
         if (!separator)
             return;
         this.role = 'separator';
     }
-    async displayChangedHandler() {
-        this.display = loc(this.display);
-        await this.handleTextContent();
-        this.displayChanged.emit({ display: this.display, value: this.value });
-    }
     // #endregion
     // #region Render Methods
-    renderSeparator() {
-        return h("div", { class: "separator" });
-    }
     renderOption() {
         const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;
         const isDisabled = disabled || disabledGroup;
@@ -95,6 +90,9 @@ export class Q2Option {
                 }
             } }, this.selected && h("q2-icon", { type: "checkmark" }), h("div", { class: "content" }, h("slot", null))));
     }
+    renderSeparator() {
+        return h("div", { class: "separator" });
+    }
     render() {
         return this.separator ? this.renderSeparator() : this.renderOption();
     }
@@ -346,11 +344,11 @@ export class Q2Option {
     static get elementRef() { return "hostElement"; }
     static get watchers() {
         return [{
-                "propName": "separator",
-                "methodName": "separatorChangedHandler"
-            }, {
                 "propName": "display",
                 "methodName": "displayChangedHandler"
+            }, {
+                "propName": "separator",
+                "methodName": "separatorChangedHandler"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"q2-option.js","sourceRoot":"","sources":["../../../src/components/q2-option/q2-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\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    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        if ('MutationObserver' in window) this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('separator')\n    async separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    @Watch('display')\n    async displayChangedHandler() {\n        this.display = loc(this.display);\n        await this.handleTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    handleTextContent = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display === textContent) return;\n        if (this.display && !textContent) this.hostElement.textContent = loc(this.display);\n    };\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        await this.handleTextContent();\n    };\n\n    initMutationObserver = () => {\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"]}
+{"version":3,"file":"q2-option.js","sourceRoot":"","sources":["../../../../src/components/q2-option/q2-option.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, ComponentInterface, Host, Event, EventEmitter, Watch } from '@stencil/core';\nimport { getAllText, loc } from '@/utils';\n\n@Component({ tag: 'q2-option', shadow: true, styleUrl: 'q2-option.scss' })\nexport class Q2Option implements ComponentInterface {\n    // #region Own Properties\n\n    displayProvidedAtInit: boolean;\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    @Prop({ reflect: true, attribute: '_multiSelectHidden' })\n    _multiSelectHidden: boolean = false;\n\n    /**\n     * Used by q2-option-list to indicate the option is active\n     * @private\n     */\n    @Prop({ reflect: true })\n    active: boolean;\n\n    /** Disables the option. */\n    @Prop({ reflect: true })\n    disabled: boolean;\n\n    /**\n     * Used by consuming elements to disable all options in the group\n     * @private\n     */\n    @Prop({ reflect: true })\n    disabledGroup: boolean;\n\n    /**\n     * The text that is displayed in the field when selected. If not provided, any text inside the element will be used.\n     * @localizable\n     */\n    @Prop({ reflect: true, mutable: true })\n    display: string;\n\n    /**\n     * Used by consuming elements to enable multiline content support\n     * @private\n     */\n    @Prop({ reflect: true })\n    multiline: boolean;\n\n    /**\n     * Used by q2-option-list to set a role on the option\n     * @type {('option' | 'menuitem' | 'separator')}\n     * @private\n     */\n    @Prop({ reflect: true, mutable: true })\n    role: string = 'option';\n\n    /**\n     * Used by q2-option-list to indicate the option is selected\n     * @private\n     */\n    @Prop({ reflect: true })\n    selected: boolean;\n\n    /**\n     * Renders a line in the item instead of text.\n     * Click events from these items will not have details provided.\n     * A `separator` allows for quick visual grouping of items, so interactions should not be bound to these options.\n     */\n    @Prop({ reflect: true })\n    separator: boolean;\n\n    /** Serves as the option's value. */\n    @Prop({ reflect: true })\n    value: string;\n\n    // #endregion\n    // #region Events\n\n    /**\n     * Used by consuming elements to indicate the display value of the option has changed.\n     * @private\n     */\n    @Event()\n    displayChanged: EventEmitter<{ value: string; display: string }>;\n\n    /**\n     * Is emitted when the option is clicked.\n     */\n    @Event()\n    tctClick: EventEmitter<{ type: 'select' | 'remove'; value: string }>;\n\n    // #endregion\n    // #region Component Lifecycle Events\n\n    disconnectedCallback() {\n        this.mutationObserver?.disconnect();\n        this.mutationObserver = null;\n    }\n\n    componentWillLoad() {\n        this.separatorChangedHandler(this.separator);\n        this.initDisplay();\n    }\n\n    componentDidLoad() {\n        this.initMutationObserver();\n    }\n\n    // #endregion\n    // #region Watchers\n\n    @Watch('display')\n    displayChangedHandler() {\n        this.display = loc(this.display);\n        this.setTextContent();\n        this.displayChanged.emit({ display: this.display, value: this.value });\n    }\n\n    @Watch('separator')\n    separatorChangedHandler(separator: boolean) {\n        if (!separator) return;\n        this.role = 'separator';\n    }\n\n    // #endregion\n    // #region Local Methods\n\n    initDisplay = async () => {\n        if (this.multiline) return;\n        const textContent = await getAllText(this.hostElement);\n        if (this.display) this.displayProvidedAtInit = true;\n        this.display = !!this.display ? loc(this.display) : textContent;\n        this.setTextContent();\n    };\n\n    initMutationObserver = () => {\n        if (!('MutationObserver' in window)) return;\n        const observer = new MutationObserver(this.mutationHandler);\n        observer.observe(this.hostElement, { childList: true, subtree: true, characterData: true });\n        this.mutationObserver = observer;\n    };\n\n    mutationHandler = async () => {\n        const allTextContent = await getAllText(this.hostElement);\n        if (this.display === allTextContent || this.multiline) return;\n        if (!this.displayProvidedAtInit) this.display = allTextContent;\n    };\n\n    setTextContent = () => {\n        const hasLoc: boolean = !!this.hostElement.querySelector('q2-loc');\n        if (this.multiline || hasLoc) return;\n        this.hostElement.textContent = loc(this.display);\n    };\n\n    // #endregion\n    // #region Render Methods\n\n    renderOption() {\n        const { display, disabled, disabledGroup, selected, _multiSelectHidden } = this;\n        const isDisabled = disabled || disabledGroup;\n        return (\n            <Host\n                tabindex=\"-1\"\n                aria-disabled={isDisabled ? 'true' : undefined}\n                aria-selected={`${!!selected}`}\n                aria-hidden={_multiSelectHidden ? 'true' : undefined}\n                display={loc(display)}\n                onClick={() => {\n                    if (isDisabled) return;\n                    this.tctClick.emit({ type: 'select', value: this.value });\n                }}\n                onKeydown={(event: KeyboardEvent) => {\n                    if (isDisabled) return;\n                    if (event.key === 'Enter' || event.key === ' ') {\n                        setTimeout(() => {\n                            this.tctClick.emit({ type: 'select', value: this.value });\n                        }, 1);\n\n                        event.preventDefault();\n                    }\n                }}\n            >\n                {this.selected && <q2-icon type=\"checkmark\" />}\n                <div class=\"content\">\n                    <slot />\n                </div>\n            </Host>\n        );\n    }\n\n    renderSeparator() {\n        return <div class=\"separator\"></div>;\n    }\n\n    render() {\n        return this.separator ? this.renderSeparator() : this.renderOption();\n    }\n\n    // #endregion\n}\n"]}